/* =========================================================
   Картка товару — макет «iPhone Product».
   ========================================================= */

.am-pdp__head {
	padding-top: 16px;
}

.am-pdp__head h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.am-pdp__meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 12px;
	font-size: 13.5px;
	color: var(--am-muted);
	font-weight: 600;
}

.am-instock {
	display: flex;
	align-items: center;
	gap: 7px;
	color: oklch(0.5 0.13 155);
	font-weight: 700;
}

.am-instock span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: oklch(0.66 0.17 150);
}

.am-outstock {
	color: #c9372c;
	font-weight: 700;
}

.am-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 486px;
	gap: 24px;
	align-items: stretch;
	padding-top: 22px;
}

.am-pdp--second {
	align-items: start;
	padding-top: 34px;
}

.am-pdp__left,
.am-pdp__right {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

/* --- галерея --------------------------------------------- */

.am-shots {
	position: relative;
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 560px;
}

.am-shots__badge {
	top: 20px;
	left: 20px;
	padding: 6px 12px;
	border-radius: var(--am-r-sm);
	font-size: 11.5px;
	letter-spacing: 0.06em;
}

body.am-body .am-shots__fav {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--am-border);
	background: #fff;
	color: var(--am-muted);
	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-shots__fav[aria-pressed="true"] {
	color: var(--am-hit);
	border-color: var(--am-hit);
}

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

.am-shots__rating {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 34px;
	padding-inline: 14px;
	border-radius: 99px;
	background: var(--am-text);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.am-shots__rating:hover {
	background: var(--am-dark-2);
	color: #fff;
}

.am-shots__star {
	font-size: 12px;
	line-height: 1;
}

.am-shots__sep {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.22);
}

.am-shots__count {
	color: #c9ccd1;
	font-weight: 600;
}

.am-shots__img {
	display: none;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.am-shots__img.is-active {
	display: block;
}

body.am-body .am-shots__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--am-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--am-text-2);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 8px 20px -14px rgba(17, 18, 20, 0.4);
}

.am-shots__nav--prev {
	left: 18px;
}

.am-shots__nav--next {
	right: 18px;
}

.am-shots__dots {
	position: absolute;
	right: 22px;
	bottom: 26px;
	display: flex;
	justify-content: flex-end;
	gap: 7px;
	pointer-events: none;
}

.am-shots__dot {
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: var(--am-border-hover);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.am-shots__dot.is-active {
	width: 22px;
	background: var(--am-text);
}

/* --- біла картка-контейнер ------------------------------- */

.am-card-box {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 20px;
	padding: 24px 28px 26px;
	min-width: 0;
}

.am-card-box h2 {
	margin: 0 0 20px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.am-specs-short {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 26px;
}

.am-specs-short__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.am-specs-short__k {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--am-muted);
	font-weight: 600;
}

.am-si {
	flex: none;
	color: var(--am-accent);
}

.am-specs-short__v {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

/* --- конфігуратор ---------------------------------------- */

.am-config {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 20px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.am-config__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

.am-config__label--row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.am-config__hint {
	font-size: 12.5px;
	color: #b6bac0;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

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

body.am-body .am-copt {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 15px 0 12px;
	border-radius: var(--am-r-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--am-text);
	background: #fff;
	border: 1.5px solid var(--am-border-ctl);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.am-body .am-copt.is-active {
	font-weight: 700;
	border-color: var(--am-accent);
	box-shadow: 0 0 0 3px var(--am-accent-soft);
}

.am-copt__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	border: 1px solid rgba(17, 18, 20, 0.14);
}

body.am-body .am-mopt {
	height: 42px;
	padding-inline: 20px;
	border-radius: var(--am-r-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	border: 1.5px solid var(--am-border-ctl);
	background: #fff;
	color: var(--am-text-2);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

body.am-body .am-mopt.is-active {
	color: var(--am-text);
	border-color: var(--am-accent);
	box-shadow: 0 0 0 3px var(--am-accent-soft);
}

/* у групі товарів перемикачі — посилання на сусідні сторінки */
body.am-body a.am-mopt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--am-text-2);
}

body.am-body a.am-mopt.is-active,
body.am-body a.am-copt {
	color: var(--am-text);
}

/* під час підміни вмісту трохи гасимо блок, щоб перехід не був різким */
.am-product.is-swapping {
	opacity: 0.55;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

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

.am-wopt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	cursor: pointer;
	padding: 13px 14px;
	border-radius: var(--am-r-lg);
	background: #fff;
	border: 1.5px solid #e8e8e4;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.am-wopt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.am-wopt.is-active {
	border-color: var(--am-accent);
	box-shadow: 0 0 0 3px var(--am-accent-soft);
}

.am-wopt__name {
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--am-text);
}

.am-wopt__note {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--am-muted);
}

.am-wopt.is-active .am-wopt__note {
	color: var(--am-accent);
}

.am-config__rule {
	height: 1px;
	background: #f0f0ed;
}

.am-config__price {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.am-config__old-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 19px;
}

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

.am-config__disc {
	font-size: 12px;
	font-weight: 800;
	color: #c9372c;
	background: #fdecea;
	border-radius: 7px;
	padding: 3px 7px;
	white-space: nowrap;
}

.am-config__now-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* Долар тримається правого краю картки, гривня — лівого. */
.am-config__now-row .am-config__usd {
	margin-left: auto;
}

.am-config__now {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}

.am-config__usd {
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding-bottom: 3px;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 700;
	color: var(--am-text-2);
}

.am-config__usd-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--am-faint);
}

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

body.am-body .am-config__buy {
	flex: 1;
	height: 54px;
	border-radius: var(--am-r-lg);
	font-size: 16px;
}

body.am-body .am-config__one {
	height: 54px;
	padding-inline: 20px;
	border-radius: var(--am-r-lg);
	font-size: 14.5px;
}

/* --- способи доставки ------------------------------------ */

.am-delivery {
	margin-top: auto;
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 20px;
	padding: 20px 24px 20px;
	display: flex;
	flex-direction: column;
}

.am-delivery .am-config__label {
	padding-bottom: 14px;
}

.am-delivery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.am-delivery__tile {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 15px 16px;
	border-radius: 15px;
	background: var(--am-surface-2);
	border: 1px solid #f0f0ed;
	min-width: 0;
}

.am-delivery__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.am-delivery__value {
	font-size: 13px;
	color: #5c6067;
	font-weight: 600;
	line-height: 1.45;
}

body.am-body .am-delivery__link {
	align-self: flex-start;
	margin-top: 2px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 800;
	text-align: left;
	color: var(--am-accent);
	min-height: 0;
}

/* --- таби опису ------------------------------------------ */

.am-tabsbox {
	padding: 26px 28px 30px;
}

.am-tabsbox__tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid #f0f0ed;
}

body.am-body .am-ptab {
	height: 40px;
	padding-inline: 18px;
	border-radius: 11px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid #e8e8e4;
	background: #fff;
	color: #5c6067;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

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

.am-tabsbox__pane {
	display: none;
	padding-top: 22px;
}

.am-tabsbox__pane.is-active {
	display: block;
}

.am-desc {
	position: relative;
}

.am-desc__body {
	max-height: 430px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.65;
	color: #3c4046;
}

.am-desc.is-open .am-desc__body {
	max-height: none;
	overflow: visible;
}

.am-desc__body p {
	margin: 0 0 16px;
}

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

.am-desc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 20px;
}

.am-desc__chips span {
	height: 34px;
	display: flex;
	align-items: center;
	padding-inline: 14px;
	border-radius: 99px;
	background: var(--am-bg);
	border: 1px solid var(--am-border);
	font-size: 13px;
	font-weight: 700;
	color: var(--am-text-2);
}

.am-desc__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 58px;
	height: 110px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 82%);
}

.am-desc.is-open .am-desc__fade,
.am-desc__fade[hidden] {
	display: none;
}

body.am-body .am-desc__more {
	margin-top: 16px;
	height: 42px;
	padding-inline: 20px;
	border: 1px solid var(--am-border-ctl);
	border-radius: var(--am-r-md);
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	color: var(--am-text);
	transition: border-color 0.18s ease;
}

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

.am-specs-full__row {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--am-divider);
}

.am-specs-full__row:first-child {
	border-top: 0;
}

.am-specs-full__k {
	font-size: 13.5px;
	color: var(--am-muted);
	font-weight: 600;
	min-width: 0;
}

.am-specs-full__v {
	font-size: 14px;
	font-weight: 700;
	min-width: 0;
}

.am-ship {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.am-ship__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.am-ship__line {
	display: flex;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #3c4046;
}

.am-ship__line > span {
	color: #c3c7cc;
	font-weight: 800;
}

/* --- відгуки --------------------------------------------- */

.am-reviews {
	padding: 26px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.am-reviews__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.am-reviews__head h2 {
	margin: 0;
}

.am-reviews__head span {
	font-size: 13.5px;
	color: var(--am-muted);
	font-weight: 600;
}

.am-reviews__summary {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--am-surface-2);
	border: 1px solid #f0f0ed;
}

.am-reviews__score {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.am-reviews__stars-wrap {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.am-reviews__stars {
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--am-text);
}

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

.am-reviews__write {
	margin-left: auto;
	height: 40px;
	display: inline-flex;
	align-items: center;
	padding-inline: 16px;
	border: 1px solid var(--am-border-ctl);
	border-radius: var(--am-r-md);
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--am-text);
}

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

.am-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.am-review + .am-review {
	padding-top: 20px;
	border-top: 1px solid var(--am-divider);
}

.am-review__head {
	display: flex;
	align-items: center;
	gap: 11px;
}

.am-review__avatar {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--am-surface-3);
	border: 1px solid var(--am-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: var(--am-text-2);
}

.am-review__who {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.am-review__name {
	font-size: 14px;
	font-weight: 700;
}

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

.am-review__stars {
	margin-left: auto;
	font-size: 12.5px;
	letter-spacing: 1.5px;
	color: var(--am-text);
}

.am-review__text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #3c4046;
}

.am-reviews__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	color: #7b8088;
}

.am-reviews__form {
	border-top: 1px solid var(--am-divider);
	padding-top: 20px;
}

/* --- аксесуари ------------------------------------------- */

.am-accs {
	padding-top: 34px;
}

.am-accs__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 16px;
}

.am-accs__head h2 {
	margin: 0;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.am-accs__head a {
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--am-accent);
}

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

.am-product {
	padding-bottom: 44px;
}

/* Модалка «1 клік» повністю описана в app.css — вона спільна з графіком роботи. */

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

	.am-shots {
		height: 460px;
	}

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

@media (max-width: 1024px) {
	.am-pdp,
	.am-pdp--second {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 14px;
	}

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

	.am-shots {
		height: 340px;
		padding: 16px;
		border-radius: 18px;
	}

	/* стрілки лишаємо й на мобільному — вони єдиний спосіб гортати кадри */
	body.am-body .am-shots__nav {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}

	.am-shots__nav--prev {
		left: 10px;
	}

	.am-shots__nav--next {
		right: 10px;
	}

	.am-card-box,
	.am-config,
	.am-delivery,
	.am-tabsbox,
	.am-reviews {
		padding: 18px 16px;
		border-radius: 16px;
	}

	/* Короткі характеристики під галереєю ховаємо: на мобільному вони
	   повторюють вкладку «Характеристики» і просто відсувають ціну вниз. */
	.am-specs-card {
		display: none;
	}

	.am-config__warranty {
		grid-template-columns: 1fr;
	}

	.am-config__now {
		font-size: 29px;
	}

	.am-config__actions {
		flex-direction: column;
	}

	/* У колонці flex:1 обнуляє базову висоту — кнопка стискалась до 28px. */
	body.am-body .am-config__buy,
	body.am-body .am-config__one {
		flex: 0 0 auto;
		width: 100%;
	}

	.am-delivery__grid {
		grid-template-columns: 1fr;
	}

	.am-specs-full__row {
		grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
		gap: 10px;
	}

	.am-accs {
		padding-top: 24px;
	}

	.am-accs__head h2 {
		font-size: 19px;
	}

	.am-product .am-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.am-modal__box {
		border-radius: 20px;
		padding: 20px 18px 18px;
	}
}

.am-backorder {
	display: flex;
	align-items: center;
	gap: 7px;
	color: oklch(0.58 0.14 65);
	font-weight: 700;
}

.am-backorder span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: oklch(0.72 0.16 65);
}

/* =========================================================================
 * Нижня панель покупки — варіант 1c «плаваюча картка».
 * Токени взяті з макета: бордер #E8E8EC, поля #F4F4F6, чорна кнопка #101014,
 * радіуси 12-20px. Другого акцентного кольору на панелі немає.
 * ====================================================================== */

/* Власна панель Woodmart вимкнена в functions.php; правило — страховка. */
.wd-sticky-btn {
	display: none !important;
}

.am-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 340;
	display: flex;
	justify-content: center;
	padding: 0 32px 22px;
	pointer-events: none;
	opacity: 0;
	transform: translateY( 120% );
	transition: transform .28s cubic-bezier( .22, .61, .36, 1 ), opacity .2s ease;
}

.am-sticky.is-visible {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.am-sticky__card {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1380px;
	padding: 14px 16px 14px 20px;
	border: 1px solid #e8e8ec;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 40px rgba( 15, 15, 16, .09 );
}

.am-sticky__shot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 12px;
	background: #f4f4f6;
}

.am-sticky__shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-sticky__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 120px;
}

.am-sticky__name {
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.am-sticky__sku {
	font-size: 13px;
	font-weight: 500;
	color: #8a8a93;
}

.am-sticky__price {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	padding-right: 4px;
}

.am-sticky__now {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.am-sticky__usd {
	font-size: 13px;
	font-weight: 600;
	color: #8a8a93;
	font-variant-numeric: tabular-nums;
}

.am-sticky__qty {
	display: flex;
	flex: none;
	align-items: center;
	height: 48px;
	padding: 0 3px;
	border: 1px solid #e8e8ec;
	border-radius: 14px;
}

.am-sticky__qty button {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: #55555e;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.am-sticky__qty button:hover {
	background: #f4f4f6;
}

.am-sticky__qty span {
	width: 36px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.am-sticky__actions {
	display: flex;
	flex: none;
	gap: 10px;
}

.am-sticky__buy,
.am-sticky__one {
	height: 52px;
	border-radius: 15px;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	white-space: nowrap;
}

.am-sticky__buy {
	padding: 0 32px;
	border: 0;
	background: #101014;
	color: #fff;
	font-weight: 700;
}

.am-sticky__buy:hover {
	background: #26262c;
}

.am-sticky__one {
	padding: 0 24px;
	border: 1px solid #dededf;
	background: #fff;
	color: #101014;
	font-weight: 600;
}

.am-sticky__one:hover {
	border-color: #101014;
}

.am-sticky__fav {
	flex: none;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 15px;
	background: #f4f4f6;
	color: #101014;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.am-sticky__fav:hover {
	background: #e8e8ec;
}

.am-sticky__fav.is-active {
	color: #b4232a;
}

.am-sticky__buy:focus-visible,
.am-sticky__one:focus-visible,
.am-sticky__fav:focus-visible,
.am-sticky__qty button:focus-visible {
	outline: 2px solid #101014;
	outline-offset: 2px;
}

/* Планшет: артикул і «1 клік» поступаються місцем головній дії. */
@media ( max-width: 1100px ) {
	.am-sticky {
		padding: 0 16px 16px;
	}

	.am-sticky__card {
		gap: 16px;
	}

	.am-sticky__sku,
	.am-sticky__one {
		display: none;
	}
}

/* Телефон: залишаємо фото, ціну і «Купити». */
@media ( max-width: 720px ) {
	.am-sticky {
		padding: 0 12px 12px;
	}

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

	.am-sticky__qty,
	.am-sticky__fav {
		display: none;
	}

	.am-sticky__name {
		font-size: 15px;
	}

	.am-sticky__now {
		font-size: 21px;
	}

	.am-sticky__buy {
		height: 46px;
		padding: 0 22px;
		border-radius: 13px;
		font-size: 15px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.am-sticky {
		transition: none;
	}
}

/* --- підзаголовки в описі товару --- */

.am-desc__body h2 {
	margin: 22px 0 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #14181c;
}

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

.am-desc__body h3 {
	margin: 18px 0 6px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #14181c;
}


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

.am-config__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6f6f6a;
}

.am-config__note--pre {
	color: oklch(0.5 0.13 65);
}

.am-config__note--out {
	color: #a8332a;
}


/* === відгуки всередині вкладок ======================================= */

.am-pdp--second {
	grid-template-columns: minmax(0, 1fr);
}

.am-tabsbox .am-reviews {
	padding: 0;
}

.am-ptab__n {
	margin-left: 6px;
	font-size: 12px;
	opacity: 0.6;
}


/* === вкладки в лівій колонці, підбір аксесуарів у правій =============== */

/* Ліва колонка тепер довга: права не розтягується за нею. */
.am-pdp {
	align-items: start;
}

.am-delivery {
	margin-top: 0;
}

.am-fit {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 20px;
	padding: 20px 24px 18px;
}

.am-fit .am-config__label {
	padding-bottom: 12px;
}

.am-fit__list {
	display: flex;
	flex-direction: column;
}

.am-fit__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid #f0f0ed;
}

.am-fit__item:first-child {
	border-top: 0;
	padding-top: 2px;
}

.am-fit__thumb {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	background: var(--am-surface-2);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.am-fit__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.am-fit__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.am-fit__kind {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--am-muted);
}

.am-fit__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.am-fit__name:hover {
	color: var(--am-accent, #12a150);
}

.am-fit__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
}

.am-fit__meta b {
	font-weight: 800;
}

.am-fit__stock {
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
}

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

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

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

.am-fit__more {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--am-muted);
	text-decoration: none;
	white-space: nowrap;
}

.am-fit__more:hover {
	color: var(--am-ink, #111);
}

/* На одній колонці порядок лишається як був: галерея, конфігуратор, характеристики,
 * доставка, підбір, і тільки потім вкладки. */
@media (max-width: 1024px) {
	.am-pdp__left,
	.am-pdp__right {
		display: contents;
	}

	.am-pdp > .am-pdp__left > .am-shots { order: 1; }
	.am-pdp > .am-pdp__right > .am-config { order: 2; }
	.am-pdp > .am-pdp__left > .am-specs-card { order: 3; }
	.am-pdp > .am-pdp__right > .am-delivery { order: 4; }
	.am-pdp > .am-pdp__right > .am-fit { order: 5; }
	.am-pdp > .am-pdp__left > .am-tabsbox { order: 6; }
}

/* === підбір: групи по три з кнопкою ================================= */

.am-fit__group + .am-fit__group {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #ececea;
}

.am-fit__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 6px;
}

.am-fit__item {
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #f4f4f2;
}

.am-fit__item:first-child {
	border-top: 0;
	padding-top: 4px;
}

.am-fit__thumb {
	width: 60px;
	height: 60px;
	border-radius: 12px;
}

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

body.am-body .am-fit__buy {
	flex: none;
	height: 38px;
	padding-inline: 14px;
	border-radius: 10px;
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 420px) {
	.am-fit__item {
		flex-wrap: wrap;
	}

	body.am-body .am-fit__buy {
		width: 100%;
	}
}

/* === нижня плашка «Купити» на телефоні: усе вміщується в екран ==========
   Ціна й кнопка були нестискними, а назва — не вужчою за 120 px. На 375 px
   вмісту потрібно було 490 px, і кнопка йшла за правий край. */
@media ( max-width: 720px ) {
	.am-sticky__card {
		gap: 10px;
		min-width: 0;
	}

	.am-sticky__shot {
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}

	.am-sticky__info {
		flex: 1 1 0;
		min-width: 0;
	}

	.am-sticky__price {
		flex: 0 1 auto;
		min-width: 0;
		padding-right: 0;
	}

	.am-sticky__now {
		font-size: 18px;
		white-space: nowrap;
	}

	.am-sticky__usd {
		font-size: 12px;
		white-space: nowrap;
	}

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

	.am-sticky__buy {
		min-width: 0;
		padding: 0 16px;
	}
}

/* Вузькі телефони: назву прибираємо (вона в заголовку сторінки), а довгий
   напис на кнопці може перейти на другий рядок. */
@media ( max-width: 400px ) {
	.am-sticky__info {
		display: none;
	}

	/* Назви немає — кнопка забирає вільне місце праворуч, а не стоїть посередині. */
	.am-sticky__actions {
		flex: 1 1 auto;
	}

	.am-sticky__buy {
		flex: 1 1 auto;
		width: 100%;
		padding: 4px 12px;
		font-size: 14px;
		line-height: 1.15;
		white-space: normal;
	}
}

/* === плашка «Купити»: без лічильника, назва у два рядки ================= */

/* Кількість змінюють у кошику. Поле лишається в розмітці (скрипт бере з нього 1),
   лише не показується. */
.am-sticky__qty {
	display: none;
}

/* Два рядки назви замість одного з трьома крапками. */
.am-sticky__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	text-overflow: clip;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* === Планшет: фото ліворуч, вибір конфігурації праворуч ================
   В одну колонку на iPad усе розтягувалось на 800 px: фото, кнопки кольору
   й гарантії на всю ширину. Фото тримається на екрані, поки гортаєш вибір. */
@media (min-width: 721px) and (max-width: 1024px) {
	.am-pdp__head h1 {
		font-size: 28px;
	}

	.am-pdp {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}

	.am-pdp > .am-pdp__left > .am-shots {
		grid-column: 1;
		grid-row: 1;
		height: 420px;
		position: sticky;
		top: 84px;
	}

	.am-pdp > .am-pdp__right > .am-config {
		grid-column: 2;
		grid-row: 1;
	}

	.am-pdp > .am-pdp__right > .am-delivery {
		grid-column: 1;
		grid-row: 2;
	}

	.am-pdp > .am-pdp__right > .am-fit {
		grid-column: 2;
		grid-row: 2;
	}

	.am-pdp > .am-pdp__left > .am-tabsbox {
		grid-column: 1 / -1;
		grid-row: 3;
	}

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

/* Планшет, уточнення: sticky тут не спрацьовує (предок обрізає overflow),
   тому колонки вирівнюємо за висотою. Ліворуч фото + доставка, праворуч вибір
   конфігурації; нижче опис і характеристики поруч із «Підійде до цієї моделі». */
@media (min-width: 721px) and (max-width: 1024px) {
	.am-pdp > .am-pdp__left > .am-shots {
		position: static;
	}

	.am-pdp > .am-pdp__right > .am-config {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.am-pdp > .am-pdp__right > .am-delivery {
		grid-column: 1;
		grid-row: 2;
	}

	.am-pdp > .am-pdp__left > .am-tabsbox {
		grid-column: 1;
		grid-row: 3;
	}

	.am-pdp > .am-pdp__right > .am-fit {
		grid-column: 2;
		grid-row: 3;
	}
}

/* === Стрічки під карткою: «Кабелі» та «Живлення» ========================
   Картки гортаються: стрілками на комп'ютері, свайпом на планшеті й телефоні.
   Ширина картки рахується від кількості в ряду, тож вона однакова з сіткою. */

.am-rail .am-accs__head {
	align-items: center;
}

.am-rail + .am-rail {
	padding-top: 26px;
}

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

.am-rail.is-static .am-rail__nav {
	display: none;
}

body.am-body .am-rail__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--am-border-ctl);
	border-radius: 50%;
	background: #fff;
	color: var(--am-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

body.am-body .am-rail__btn:hover:not(:disabled) {
	border-color: var(--am-text);
}

body.am-body .am-rail__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.am-rail__btn:focus-visible {
	outline: 2px solid var(--am-text);
	outline-offset: 2px;
}

.am-rail__track {
	--am-rail-per: 4;
	--am-rail-gap: 14px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--am-rail-per) - 1) * var(--am-rail-gap)) / var(--am-rail-per));
	gap: var(--am-rail-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.am-rail__track::-webkit-scrollbar {
	display: none;
}

.am-rail__item {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

.am-rail__item > * {
	flex: 1;
	min-width: 0;
}

@media (max-width: 1024px) {
	.am-rail__track {
		--am-rail-per: 3;
		--am-rail-gap: 12px;
	}
}

/* Телефон: дві картки й край третьої — видно, що далі є ще. */
@media (max-width: 720px) {
	.am-rail__track {
		--am-rail-per: 2.15;
		--am-rail-gap: 10px;
	}

	.am-rail__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-rail__track {
		scroll-behavior: auto;
	}
}


/* Немає в наявності: напис замість ціни (картка й липка панель, 19.09.2026). */
.am-config__na {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--am-text-3);
}

.am-sticky__na {
	flex: none;
	padding-right: 4px;
	font-size: 15px;
	font-weight: 800;
	color: var(--am-text-3);
	white-space: nowrap;
}