/* ===========================
   PaperMint — Collections page
   =========================== */

/* ---------- Section 1: Collections Atlas ---------- */
.atlas-wrap {
	display: grid;
	gap: 16px;
}
.atlas-bullets {
	display: grid;
	gap: 6px;
	color: var(--ink-400);
	font-size: 14px;
}

.atlas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.atlas-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.atlas-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(23, 35, 42, 0.14);
	filter: contrast(1.02);
}
.atlas-card figure figcaption {
	margin-top: 6px;
	font-weight: 700;
}
.atlas-card .card-text {
	color: var(--ink-600);
	font-size: 14px;
}

/* responsive */
@media (max-width: 980px) {
	.atlas-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.atlas-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Section 2: Signature Series Rail ---------- */
.series-wrap {
	display: grid;
	gap: 16px;
}
.sr-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 320px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.sr-card {
	scroll-snap-align: start;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
	border: 1px solid rgba(15, 27, 32, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sr-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(23, 35, 42, 0.12);
}
.sr-name {
	margin: 0;
	font-size: 16px;
}
.sr-text {
	margin: 0;
	color: var(--ink-600);
	font-size: 14px;
}
.sr-fig figcaption {
	margin-top: 6px;
	color: var(--ink-600);
	font-size: 14px;
}
.series-hint {
	color: var(--ink-400);
	font-size: 12px;
}

/* ---------- Section 3: Format Finder ---------- */
.format-wrap {
	display: grid;
	gap: 16px;
}
.format-actions {
	margin-top: 8px;
}

.format-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) minmax(240px, 1fr);
	gap: 14px;
	align-items: start;
}

/* Бумажные макеты (без изображений) */
.sheet {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 12px;
	height: 220px;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.sheet .label {
	position: absolute;
	top: 10px;
	left: 12px;
	font-weight: 700;
	font-size: 12px;
	color: var(--ink-400);
}
.base-grid {
	position: absolute;
	inset: 12px;
	border-radius: 10px;
	pointer-events: none;
	background-image: repeating-linear-gradient(
			to bottom,
			rgba(11, 180, 138, 0.1) 0 1px,
			transparent 1px 24px
		),
		repeating-linear-gradient(
			to right,
			rgba(11, 180, 138, 0.06) 0 1px,
			transparent 1px 26px
		);
	opacity: 0.9;
	transition: opacity 0.2s ease, background-size 0.2s ease;
}
.c-format.is-mm .base-grid {
	/* при переключении — мельче шаг (mm) */
	background-image: repeating-linear-gradient(
			to bottom,
			rgba(11, 180, 138, 0.1) 0 1px,
			transparent 1px 10px
		),
		repeating-linear-gradient(
			to right,
			rgba(11, 180, 138, 0.06) 0 1px,
			transparent 1px 10px
		);
	opacity: 1;
}

/* Имитируем пропорции: A5 < B5 < A4 */
.sheet.a5 {
	height: 180px;
}
.sheet.b5 {
	height: 200px;
}
.sheet.a4 {
	height: 220px;
}

.format-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.format-fig figcaption {
	margin-top: 6px;
	color: var(--ink-600);
	font-size: 14px;
}
.format-note {
	color: var(--ink-400);
	font-size: 12px;
}

/* responsive */
@media (max-width: 1040px) {
	.format-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.format-grid {
		grid-template-columns: 1fr;
	}
}
/* ========== Section 4 — Paper Surfaces Lab ========== */
.surfaces-wrap {
	display: grid;
	gap: 16px;
}
.surfaces-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: start;
}
.surface-card {
	position: relative;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.surface-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(23, 35, 42, 0.14);
	filter: contrast(1.02);
}
.surface-card figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}

/* Шиммер света поверх текстуры */
.surface-card .sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;
}
.surface-card .sheen::before {
	content: '';
	position: absolute;
	inset: -40% -60%;
	transform: rotate(12deg);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 100%
	);
	opacity: 0;
	animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep {
	0%,
	30% {
		transform: translateX(-40%) rotate(12deg);
		opacity: 0;
	}
	45% {
		opacity: 0.9;
	}
	80%,
	100% {
		transform: translateX(60%) rotate(12deg);
		opacity: 0;
	}
}

/* Демка микротекстуры (без картинок) */
.surface-play {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 10px;
	place-items: center;
}
.surface-play .cell {
	width: 82%;
	height: 14px;
	border-radius: 999px;
	background: repeating-linear-gradient(
		90deg,
		rgba(24, 201, 161, 0.18) 0 8px,
		rgba(24, 201, 161, 0.1) 8px 16px
	);
	animation: grain 2.8s ease-in-out infinite;
}
.surface-play .cell:nth-child(2) {
	animation-delay: 0.25s;
	filter: brightness(1.05);
}
.surface-play .cell:nth-child(3) {
	animation-delay: 0.5s;
	filter: contrast(1.05);
}
@keyframes grain {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-2px);
	}
}
.play-note {
	color: var(--ink-400);
	font-size: 12px;
}

@media (max-width: 980px) {
	.surfaces-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.surfaces-grid {
		grid-template-columns: 1fr;
	}
}

/* ========== Section 5 — Refills & Compatibility (text-heavy) ========== */
.refills-wrap {
	display: grid;
	gap: 16px;
}
.refills-matrix {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
}
.r-row {
	display: grid;
	grid-template-columns: 1.1fr 0.6fr 1fr;
	gap: 8px;
	align-items: center;
}
.r-row .desc {
	grid-column: 1 / -1;
	color: var(--ink-600);
	font-size: 14px;
}
.r-head {
	font-weight: 700;
	color: var(--ink-900);
}
.refills-body {
	display: grid;
	gap: 10px;
	color: var(--ink-600);
}
.r-faq {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 10px;
}
.r-faq > summary {
	cursor: pointer;
	font-weight: 700;
}
.r-faq > p {
	margin: 8px 0 0;
}

/* responsive */
@media (max-width: 900px) {
	.r-row {
		grid-template-columns: 1fr 0.6fr 1fr;
	}
}
@media (max-width: 620px) {
	.r-row {
		grid-template-columns: 1fr;
	}
	.r-row .desc {
		grid-column: auto;
	}
}

/* ========== Section 6 — Planner Views (rail) ========== */
.views-wrap {
	display: grid;
	gap: 16px;
}
.views-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 320px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.view-card {
	scroll-snap-align: start;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.view-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(23, 35, 42, 0.12);
}
.view-card figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}
.views-hint {
	color: var(--ink-400);
	font-size: 12px;
}

/* reduce motion fallback */
@media (prefers-reduced-motion: reduce) {
	.surface-card .sheen::before,
	.surface-play .cell {
		animation: none !important;
	}
}
/* ===== Section 7 — Color Coding Systems ===== */
.colors-wrap {
	display: grid;
	gap: 16px;
}
.ccs {
	display: grid;
	gap: 14px;
}
.ccs-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 10px;
}
.ccs-controls input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(15, 27, 32, 0.12);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease,
		transform 0.15s ease;
}
.chip:hover {
	transform: translateY(-1px);
}
.chip[data-accent='review'] {
	background: #fff6e6;
}
.chip[data-accent='lecture'] {
	background: #e6f9ff;
}
.chip[data-accent='lab'] {
	background: #e9ffe9;
}
.chip[data-accent='exam'] {
	background: #ffe9f0;
}

.ccs-demo {
	--accent: #ffcf7a; /* default review */
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 10px;
}
.ccs-controls #ccs-review:checked ~ .ccs-demo {
	--accent: #ffcf7a;
}
.ccs-controls #ccs-lecture:checked ~ .ccs-demo {
	--accent: #9ad8ff;
}
.ccs-controls #ccs-lab:checked ~ .ccs-demo {
	--accent: #a8f0b2;
}
.ccs-controls #ccs-exam:checked ~ .ccs-demo {
	--accent: #ffb3c6;
}

.ccs-demo .lane {
	position: relative;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: linear-gradient(90deg, #f0fbff, #f7fff9);
}
.ccs-demo .lane .pulse {
	position: absolute;
	left: -20%;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklab, var(--accent) 30%, transparent) 35%,
		var(--accent) 50%,
		color-mix(in oklab, var(--accent) 30%, transparent) 65%,
		transparent 100%
	);
	animation: ccs-flow 3.2s ease-in-out infinite;
}
.ccs-demo .lane:nth-child(2) .pulse {
	animation-delay: 0.25s;
}
.ccs-demo .lane:nth-child(3) .pulse {
	animation-delay: 0.5s;
}
.ccs-demo .lane:nth-child(4) .pulse {
	animation-delay: 0.75s;
}
@keyframes ccs-flow {
	0% {
		left: -30%;
	}
	50% {
		left: 40%;
	}
	100% {
		left: 110%;
	}
}

.ccs-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.ccs-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.ccs-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}

@media (max-width: 980px) {
	.ccs-gallery {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.ccs-gallery {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 8 — Desk Tools Lineup ===== */
.tools-wrap {
	display: grid;
	gap: 16px;
}
.tools-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 320px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.tool-card {
	scroll-snap-align: start;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(23, 35, 42, 0.12);
}
.tools-hint {
	color: var(--ink-400);
	font-size: 12px;
}

/* ===== Section 9 — Campus Bundles ===== */
.bundles-wrap {
	display: grid;
	gap: 16px;
}
.bundles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.bundle-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bundle-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(23, 35, 42, 0.14);
	filter: contrast(1.02);
}
.bundle-card figure figcaption {
	margin-top: 6px;
	font-weight: 700;
}
.b-list {
	margin: 8px 0 0;
	color: var(--ink-600);
	font-size: 14px;
	display: grid;
	gap: 4px;
}
.b-tags {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.b-tags span {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--mint-200);
	color: var(--ink-900);
}
.bundle-card.text-only .b-title {
	margin: 0 0 6px;
	font-size: 16px;
}
.bundle-card.text-only .b-note {
	color: var(--ink-600);
}

@media (max-width: 980px) {
	.bundles-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.bundles-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 10 — Sticky Index Systems ===== */
.index-wrap {
	display: grid;
	gap: 16px;
}
.ix {
	display: grid;
	gap: 14px;
}
.ix-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 10px;
}
.ix-controls input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ix .chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(15, 27, 32, 0.12);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease,
		transform 0.15s ease;
}
.ix .chip:hover {
	transform: translateY(-1px);
}

.ix-demo {
	--accent: #a8f0b2; /* color mode по умолчанию */
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}
.ix-controls #ix-color:checked ~ .ix-demo {
	--accent: #a8f0b2;
}
.ix-controls #ix-number:checked ~ .ix-demo {
	--accent: #9ad8ff;
}
.ix-controls #ix-corner:checked ~ .ix-demo {
	--accent: #ffcf7a;
}

.ix-demo .page {
	position: relative;
	height: 100px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #fbfffe 80%),
		repeating-linear-gradient(
			to bottom,
			rgba(11, 180, 138, 0.1) 0 1px,
			transparent 1px 24px
		);
	border: 1px solid rgba(15, 27, 32, 0.06);
}
.ix-demo .flag {
	position: absolute;
	right: 8px;
	top: 12px;
	width: 18px;
	height: 8px;
	border-radius: 2px;
	background: var(--accent);
}
/* разные позиции/виды для наглядности */
.ix-demo .f2 {
	top: 28px;
}
.ix-demo .f3 {
	top: 44px;
}
.ix-demo .f4 {
	top: 60px;
}
.ix-demo .f5 {
	top: 76px;
}
.ix-demo .f6 {
	top: 92px;
	transform: translateY(-16px);
}

/* галерея */
.ix-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.ix-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.ix-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}

@media (max-width: 980px) {
	.ix-gallery {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.ix-gallery {
		grid-template-columns: 1fr;
	}
	.ix-demo {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== Section 11 — Pen Tips & Lines ===== */
.lines-wrap {
	display: grid;
	gap: 16px;
}
.gauge {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px;
	display: grid;
	gap: 10px;
}
.gauge .strip {
	position: relative;
	height: 20px;
	border-radius: 999px;
	overflow: hidden;
	background: linear-gradient(90deg, #f0fbff, #f7fff9);
}
.gauge .strip::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 80%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
}
.gauge .strip.t03::after {
	height: 2px;
}
.gauge .strip.t05::after {
	height: 4px;
}
.gauge .strip.t07::after {
	height: 6px;
}
.gauge .lab {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--ink-400);
}

.lines-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.ln-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.ln-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}
.lines-note {
	color: var(--ink-400);
	font-size: 12px;
}

@media (max-width: 980px) {
	.lines-gallery {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.lines-gallery {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 12 — Pocket-friendly Sets ===== */
.pocket-wrap {
	display: grid;
	gap: 16px;
}
.pocket-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: start;
}
.pk-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.pk-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}
.pk-text {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	color: var(--ink-600);
	display: grid;
	gap: 8px;
}
.pk-note {
	color: var(--ink-400);
	font-size: 12px;
}

@media (max-width: 980px) {
	.pocket-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.pocket-grid {
		grid-template-columns: 1fr;
	}
}
/* Активный режим и подсветка выбранного «чипа» */
.ccs.mode-review .ccs-demo {
	--accent: #ffcf7a;
}
.ccs.mode-lecture .ccs-demo {
	--accent: #9ad8ff;
}
.ccs.mode-lab .ccs-demo {
	--accent: #a8f0b2;
}
.ccs.mode-exam .ccs-demo {
	--accent: #ffb3c6;
}

.ccs.mode-review label[for='ccs-review'],
.ccs.mode-lecture label[for='ccs-lecture'],
.ccs.mode-lab label[for='ccs-lab'],
.ccs.mode-exam label[for='ccs-exam'] {
	border-color: var(--mint-600);
	box-shadow: 0 0 0 4px rgba(24, 201, 161, 0.12);
}
.ix.mode-color .ix-demo {
	--accent: #a8f0b2;
}
.ix.mode-number .ix-demo {
	--accent: #9ad8ff;
}
.ix.mode-corner .ix-demo {
	--accent: #ffcf7a;
}

.ix.mode-color label[for='ix-color'],
.ix.mode-number label[for='ix-number'],
.ix.mode-corner label[for='ix-corner'] {
	border-color: var(--mint-600);
	box-shadow: 0 0 0 4px rgba(24, 201, 161, 0.12);
}
/* ===== Section 13 — Paper Care Policy ===== */
.policy-wrap {
	display: grid;
	gap: 16px;
}
.policy-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 14px;
	align-items: start;
}
.policy-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.policy-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}
.policy-body {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	color: var(--ink-600);
	display: grid;
	gap: 8px;
}
.pl-faq {
	background: #fbfffe;
	border-radius: 10px;
	padding: 10px;
}
.pl-faq > summary {
	cursor: pointer;
	font-weight: 700;
}

@media (max-width: 980px) {
	.policy-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 14 — Desk Trays Matrix ===== */
.trays-wrap {
	display: grid;
	gap: 16px;
}
.trays-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.tray-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.tray-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(23, 35, 42, 0.14);
	filter: contrast(1.02);
}
.trays-table {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
}
.tr-row {
	display: grid;
	grid-template-columns: 0.8fr 1fr 0.8fr 1.4fr;
	gap: 8px;
	align-items: center;
}
.tr-head {
	font-weight: 700;
	color: var(--ink-900);
}
.tr-row .desc {
	grid-column: 1 / -1;
	color: var(--ink-600);
	font-size: 14px;
}

@media (max-width: 980px) {
	.trays-grid {
		grid-template-columns: 1fr 1fr;
	}
	.tr-row {
		grid-template-columns: 1fr 0.8fr 0.6fr;
	}
}
@media (max-width: 620px) {
	.trays-grid {
		grid-template-columns: 1fr;
	}
	.tr-row {
		grid-template-columns: 1fr;
	}
	.tr-row .desc {
		grid-column: auto;
	}
}

/* ===== Section 15 — Marker Swatch Bar ===== */
.swatch-wrap {
	display: grid;
	gap: 16px;
}
.sw-controls {
	margin-top: 8px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.sw-controls input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.sw-controls .chip {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(15, 27, 32, 0.12);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease;
}
.c-swatch.mode-pastel .sw-controls label[for='sw-pastel'],
.c-swatch.mode-neon .sw-controls label[for='sw-neon'],
.c-swatch.mode-erasable .sw-controls label[for='sw-erasable'] {
	border-color: var(--mint-600);
	box-shadow: 0 0 0 4px rgba(24, 201, 161, 0.12);
}

.c-swatch .swatch.demo {
	--accent: #a8f0b2; /* pastel по умолчанию */
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 10px;
}
.c-swatch.mode-pastel .swatch.demo {
	--accent: #a8f0b2;
}
.c-swatch.mode-neon .swatch.demo {
	--accent: #ffd166;
}
.c-swatch.mode-erasable .swatch.demo {
	--accent: #9ad8ff;
}

.c-swatch .lane {
	position: relative;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: linear-gradient(90deg, #f0fbff, #f7fff9);
}
.c-swatch .lane .pulse {
	position: absolute;
	left: -20%;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklab, var(--accent) 32%, transparent) 35%,
		var(--accent) 50%,
		color-mix(in oklab, var(--accent) 32%, transparent) 65%,
		transparent 100%
	);
	animation: sw-flow 3.2s ease-in-out infinite;
}
.c-swatch .lane:nth-child(2) .pulse {
	animation-delay: 0.25s;
}
.c-swatch .lane:nth-child(3) .pulse {
	animation-delay: 0.5s;
}
.c-swatch .lane:nth-child(4) .pulse {
	animation-delay: 0.75s;
}
@keyframes sw-flow {
	0% {
		left: -30%;
	}
	50% {
		left: 40%;
	}
	100% {
		left: 110%;
	}
}

.swatch-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.sw-fig {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
}
.sw-fig figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}

@media (max-width: 980px) {
	.swatch-gallery {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 620px) {
	.swatch-gallery {
		grid-template-columns: 1fr;
	}
}
/* ===== Section 16 — Limited Editions Gallery ===== */
.limited-wrap {
	display: grid;
	gap: 16px;
}
.limited-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	align-items: start;
}
.lim-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
	position: relative;
	overflow: hidden;
}
.lim-card::before {
	/* мягкий акцент-подсветка */
	content: '';
	position: absolute;
	inset: -30% -40%;
	transform: rotate(12deg);
	background: radial-gradient(
		80% 60% at 50% 50%,
		rgba(24, 201, 161, 0.1),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.lim-card:hover {
	transform: translateY(-4px) rotateZ(-0.2deg);
	box-shadow: 0 18px 38px rgba(23, 35, 42, 0.14);
	filter: contrast(1.02);
}
.lim-card:hover::before {
	opacity: 1;
}
.lim-card figcaption {
	margin-top: 8px;
	color: var(--ink-600);
	font-size: 14px;
}
.limited-note {
	color: var(--ink-400);
	font-size: 12px;
}

/* responsive */
@media (max-width: 1060px) {
	.limited-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.limited-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 17 — Packing & Delivery ===== */
.packing-wrap {
	display: grid;
	gap: 16px;
}

.pack-timeline {
	position: relative;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	align-items: start;
}
.pack-timeline .track {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 52px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e6f9ff, #e9ffe9);
}
.pack-timeline .track .progress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
	transition: width 1.2s ease;
}
.pack-timeline.reveal.is-visible .track .progress {
	width: 100%;
}

.pack-step {
	background: #fbfffe;
	border: 1px solid rgba(15, 27, 32, 0.06);
	border-radius: 14px;
	padding: 12px;
	display: grid;
	gap: 8px;
	position: relative;
}
.pack-step h3 {
	margin: 0;
	font-size: 16px;
}
.pack-step p {
	margin: 0;
	color: var(--ink-600);
	font-size: 14px;
}
.pack-step figure figcaption {
	margin-top: 6px;
	color: var(--ink-600);
	font-size: 14px;
}

/* responsive */
@media (max-width: 1060px) {
	.pack-timeline {
		grid-template-columns: repeat(2, 1fr);
	}
	.pack-timeline .track {
		top: 50px;
	}
}
@media (max-width: 620px) {
	.pack-timeline {
		grid-template-columns: 1fr;
	}
	.pack-timeline .track {
		display: none;
	}
}

.pack-faq {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px;
	display: grid;
	gap: 8px;
	color: var(--ink-600);
}
.pack-faq details > summary {
	cursor: pointer;
	font-weight: 700;
}