/* «Kisteninhalt» (diegenusspartner/box-contents). Раскладка карточек — стиль витрины
   `gp-box--grid` (подключён зависимостью в block.json), список — flexibility «неделя».
   Здесь только то, чего у них нет: выбранная карточка и кнопка выбора (Figma 2259:3216). */

/* ── Секция по кадру 2146:2979 (14.09, зона страниц) ──
   Поля 100 сверху (под шапкой) и 64 снизу, заголовок 64/700 ls −0.64 (тёмное +
   зелёное «Kiste»), шапка → карточки 40. Селекторы с `.gp-kiste--select` перебивают
   общие правила витрины `gp-box--grid` и `.gp-box:first-child`. */
/* Кадр только десктопный: на планшете и телефоне поле и кегль остаются общими для сайта. */
@media (min-width: 1025px) {
	.gp-kiste--select.gp-box:first-child .gp-box__inner {
		padding-top: calc(var(--gp-header-h, 88px) + var(--wp--preset--spacing--r-100));
	}
	.gp-kiste--select .gp-box__title {
		font-size: var(--wp--preset--font-size--r-64);
		letter-spacing: -0.01em;
	}
}
.gp-kiste--select .gp-box__carousel { margin-top: var(--wp--preset--spacing--r-40); }
.gp-kiste--select .gp-box__viewport {
	padding: 0;
	margin: 0;
}

/* Обводка карточки в кадре снаружи (stroke OUTSIDE): рамкой её делать нельзя — 1px
   с каждой стороны съедал ширину фото и кнопки (409/377 вместо 411/379). Кольцо тенью
   места не занимает; у выбранной — цвет и тень выделения (кадр 2259:3216). */
.gp-kiste--select .gp-box__card {
	/* Лишняя высота ряда уходит в тело, а не делится с фото: иначе у короткого состава
	   название съезжает ниже соседних. */
	grid-template-rows: auto 1fr;
	border: 0;
	/* Тень невыбранной — по кадру (2259:3207/3227, DROP_SHADOW 0 35 r34.5 spread −37, #184000 8%);
	   одиночное кольцо её затирало (замечание проверки 14.09). */
	box-shadow:
		0 0 0 1px transparent,
		0 35px 34.5px -37px rgba(24, 64, 0, 0.08);
	transition: box-shadow var(--wp--custom--transition--fast);
}
.gp-kiste--select .gp-box__card.is-selected {
	border: 0;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--leaf) 60%, transparent),
		0 16px 40px color-mix(in srgb, var(--wp--preset--color--leaf) 50%, transparent);
}

/* Макет: название → состав 16, состав → кнопка 24, кнопки в ряду на одной линии. */
.gp-kiste--select .gp-box__body {
	gap: var(--wp--preset--spacing--r-16);
}
.gp-kiste--select .gp-box__desc {
	margin-bottom: var(--wp--preset--spacing--r-8);
}
/* В кадре под состав отведено четыре строки (текст 379×108), кнопки на 491 от верха
   карточки 563 — и у короткого состава тоже. Только там, где карточки в ряд. */
@media (min-width: 1025px) {
	.gp-kiste--select .gp-box__desc { min-height: 6em; }
}

/* Кнопка 379×48, рамка 1px primary, 14/700 (Main Button 2274:2991). Специфичность
   0,2,0: `.gp-btn--outline` из style.css темы грузится позже и ставил рамку 2px. */
.gp-kiste--select .gp-kiste__pick {
	width: 100%;
	margin-top: auto;
	padding: var(--wp--preset--spacing--r-16);
	border-width: 1px;
	line-height: 1;
	cursor: pointer;
}

/* ── Компактный вид R5 (part=compact, /b2c/, кадр 2259:3238, 14.09) ──
   Кадр 1440: поля 64, заголовок 48/700 (тёмное + зелёное «Kiste»), подпись 18/600 через 24,
   шапка → ряд 40. Слева коробки 564×155 столбиком (r24, поле 16/40, фото 151×123, зазор 32,
   название 24/600 заглавными, «N sorten» 18/500), справа «Kisteninhalte» 24/700 и круги 137
   с кольцом 2 primary по 4 в ряд (зазор 26×16, подпись 18/500 через 16).
   Поля секции 64, а не 128 кадра: над ней «Wählen Sie Ihre Kiste» того же фона со своими 64. */
.gp-kiste--compact {
	background: var(--wp--preset--color--surface);
}
.gp-kiste--compact .gp-kiste__inner {
	max-width: calc(1312px + 2 * var(--wp--custom--layout--gutter));
	margin: 0 auto;
	padding: var(--wp--preset--spacing--r-64) var(--wp--custom--layout--gutter);
}
.gp-kiste--compact .gp-kiste__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--r-48);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}
.gp-kiste--compact .gp-kiste__accent { color: var(--wp--preset--color--primary); }
.gp-kiste--compact .gp-kiste__subtitle {
	margin: var(--wp--preset--spacing--r-24) 0 0;
	font-size: var(--wp--preset--font-size--r-18);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--muted);
}
.gp-kiste--compact .gp-kiste__grid {
	display: grid;
	grid-template-columns: minmax(0, 564px) minmax(0, 626px);
	justify-content: space-between;
	align-items: start;
	margin-top: var(--wp--preset--spacing--r-40);
}
.gp-kiste--compact .gp-kiste__boxes,
.gp-kiste--compact .gp-kiste__items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gp-kiste--compact .gp-kiste__boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--r-12);
}

/* Карточка — кнопка целиком (клик и Enter). Тень из кадра: 0 35 r34.5 spread −37, #184000 4 %
   (у выбранной 6 %). Выбранная без заливки, обводка 2 внутрь градиентом leaf 12 % → leaf-deep
   сверху вниз: рамка прозрачная у всех (размер не прыгает), цвет рамки — фоном border-box,
   середина — цветом секции. */
.gp-kiste--compact .gp-kiste__box-btn {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--r-32);
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--r-16) - 2px) calc(var(--wp--preset--spacing--r-40) - 2px) calc(var(--wp--preset--spacing--r-16) - 2px) calc(var(--wp--preset--spacing--r-16) - 2px);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	box-shadow: 0 35px 34.5px -37px rgba(24, 64, 0, 0.04);
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}
.gp-kiste--compact .gp-kiste__box.is-selected .gp-kiste__box-btn {
	background:
		linear-gradient(var(--wp--preset--color--surface), var(--wp--preset--color--surface)) padding-box,
		linear-gradient(180deg, var(--wp--preset--color--leaf) 12%, var(--wp--preset--color--leaf-deep)) border-box;
	box-shadow: 0 35px 34.5px -37px rgba(24, 64, 0, 0.06);
}
.gp-kiste--compact .gp-kiste__box-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.gp-kiste--compact .gp-kiste__box-photo {
	flex: 0 0 151px;
	width: 151px;
	height: 123px;
	object-fit: contain;
}
.gp-kiste--compact .gp-kiste__box-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--r-8);
	min-width: 0;
}
.gp-kiste--compact .gp-kiste__box-title {
	font-size: var(--wp--preset--font-size--r-24);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	transition: color var(--wp--custom--transition--fast);
}
.gp-kiste--compact .gp-kiste__box.is-selected .gp-kiste__box-title,
.gp-kiste--compact .gp-kiste__box-btn:hover .gp-kiste__box-title { color: var(--wp--preset--color--primary); }
.gp-kiste--compact .gp-kiste__box-sorten {
	font-size: var(--wp--preset--font-size--r-18);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--muted);
}

.gp-kiste--compact .gp-kiste__contents-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--r-24);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}
.gp-kiste--compact .gp-kiste__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 137px));
	justify-content: space-between;
	gap: var(--wp--preset--spacing--r-16) 26px;
	margin-top: var(--wp--preset--spacing--r-32);
}
.gp-kiste--compact .gp-kiste__items[hidden] { display: none; }
.gp-kiste--compact .gp-kiste__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--r-16);
	text-align: center;
}
/* Двойной класс: `.woocommerce-page img { height: auto }` перебивает одиночный (так же в R6). */
.gp-kiste--compact .gp-kiste__item-photo {
	box-sizing: border-box;
	display: block;
	width: 137px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	object-fit: cover;
}
.gp-kiste--compact .gp-kiste__item-label {
	font-size: var(--wp--preset--font-size--r-18);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}

/* Кадр только десктопный: ниже — столбиком (коробки, под ними состав). */
@media (max-width: 1024px) {
	.gp-kiste--compact .gp-kiste__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--r-40);
	}
}
@media (max-width: 600px) {
	.gp-kiste--compact .gp-kiste__box-btn {
		gap: var(--wp--preset--spacing--r-16);
		padding: var(--wp--preset--spacing--r-12) var(--wp--preset--spacing--r-16) var(--wp--preset--spacing--r-12) var(--wp--preset--spacing--r-12);
	}
	.gp-kiste--compact .gp-kiste__box-photo {
		flex-basis: 96px;
		width: 96px;
		height: 78px;
	}
	.gp-kiste--compact .gp-kiste__box-title { font-size: var(--wp--preset--font-size--r-18); }
	.gp-kiste--compact .gp-kiste__box-sorten { font-size: var(--wp--preset--font-size--r-16); }
	.gp-kiste--compact .gp-kiste__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--r-16);
	}
	.gp-kiste--compact .gp-kiste__item { gap: var(--wp--preset--spacing--r-8); }
	.gp-kiste--compact .gp-kiste__item-label {
		font-size: var(--wp--preset--font-size--r-14);
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}
/* 320–389: «FAMILIENKISTE» 18 рядом с фото 96 не влезало (карточка 290 при колонке 265). */
@media (max-width: 389.98px) {
	.gp-kiste--compact .gp-kiste__box-btn { gap: var(--wp--preset--spacing--r-12); }
	.gp-kiste--compact .gp-kiste__box-photo {
		flex-basis: 64px;
		width: 64px;
		height: 52px;
	}
	.gp-kiste--compact .gp-kiste__box-title {
		font-size: var(--wp--preset--font-size--r-16);
		overflow-wrap: anywhere;
	}
	.gp-kiste--compact .gp-kiste__box-sorten { font-size: var(--wp--preset--font-size--r-14); }
}