/* Цвета, декоры и материалы — Kotelnikov LAB */

.decor-intro { max-width: 1100px; margin-bottom: 26px; font-size: 14px; line-height: 1.7; }
.decor-empty { padding: 40px 0; text-align: center; color: #767676; }

/* Заголовок блока: название + «Смотреть все» */
.decor-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.decor-section-head h2, .decor-section-head h3 { margin: 0; font-size: 20px; font-weight: 600; color: #444; }
.decor-section-head__all { font-weight: 600; white-space: nowrap; }

/* Вкладки раздела — отдельные страницы */
.decor-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.decor-tabs__item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #ccc; border-radius: 20px; background: #fff; color: #444; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.decor-tabs__item:hover, .decor-tabs__item:focus { border-color: #1f7fb0; color: #1f7fb0; text-decoration: none; }
.decor-tabs__item--active, .decor-tabs__item--active:hover, .decor-tabs__item--active:focus { border-color: #1f7fb0; background: #1f7fb0; color: #fff; }
.decor-tabs__count { font-size: 12px; font-weight: 400; opacity: .75; }

.decor-group { margin-bottom: 8px; }
.decor-group__title { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.decor-group__title a { color: #444; }

/* Сетка: колонки — в «Общие» или в разделе. decor-cols-dN — ПК (3–6), decor-cols-mN — телефон (1–2) */
.decor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 36px; margin-bottom: 34px; }
.decor-grid.decor-cols-d3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.decor-grid.decor-cols-d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 36px; }
.decor-grid.decor-cols-d5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 28px; }
.decor-grid.decor-cols-d6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 22px; }
/* Карточки своего размера в блоке макета — сколько поместится */
.decor-grid.decor-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--decor-item, 150px), 45%), 1fr)); gap: 20px; }

/* Образец: тонкая рамка с белым полем вокруг фото. Рамка повторяет форму фото
   (квадрат, вертикаль, горизонталь) и тянется по ширине колонки. */
.decor-swatch { display: flex; flex-direction: column; min-width: 0; color: #555; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* Карточка статична: никаких эффектов при наведении, фокусе и клике — ни своих, ни от темы */
a.decor-swatch, a.decor-swatch:hover, a.decor-swatch:focus, a.decor-swatch:active, a.decor-swatch:visited { border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: none !important; color: #555 !important; text-decoration: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
.decor-swatch__frame, .decor-swatch:hover .decor-swatch__frame, .decor-swatch:focus .decor-swatch__frame, .decor-swatch:active .decor-swatch__frame { display: block; padding: 3px; border: 1px solid #d6d6d6; background: #fff; box-shadow: none; outline: none; transform: none; transition: none; }
.decor-swatch__frame img, .decor-swatch:hover .decor-swatch__frame img { display: block; width: 100%; height: auto; transform: none; opacity: 1; transition: none; }
.decor-swatch__body { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.decor-swatch__name { font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: .06em; overflow-wrap: anywhere; }
.decor-swatch__type { font-size: 12px; letter-spacing: .04em; color: #8a8a8a; }
/* Чем больше колонок — тем мельче подпись */
.decor-cols-d5 .decor-swatch__name { font-size: 16px; }
.decor-cols-d6 .decor-swatch__name, .decor-grid--auto .decor-swatch__name { font-size: 15px; letter-spacing: .04em; }

/* Блок в макете: колонки считаются по ширине позиции, куда поставлен блок, а не по ширине экрана */
.decor-module { container-type: inline-size; clear: both; width: 100%; margin: 0 0 30px; }
.decor-module *, .decor-module *::before, .decor-module *::after { box-sizing: border-box; }
.decor-module .decor-section-head { margin: 0 0 16px; padding: 0; border: 0; }
.decor-module .decor-section-head h3 { margin: 0; padding: 0; border: 0; font-size: 20px; line-height: 1.3; text-transform: none; background: none; }
.decor-module .decor-grid { margin: 0; padding: 0; list-style: none; }
/* Шапка блока — как на странице раздела */
.decor-module__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin: 0 0 16px; }
.decor-module .decor-module__title { margin: 0; padding: 0; border: 0; background: none; font-size: 30px; font-weight: 700; line-height: 1.2; color: #333; text-transform: none; }
.decor-module .decor-group__title { margin: 0 0 16px; padding: 0; border: 0; background: none; font-size: 18px; font-weight: 700; color: #444; text-transform: none; }
button.decor-tabs__item { font: inherit; font-weight: 600; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }
.decor-module .decor-grid { margin-bottom: 30px; }
.decor-module img { max-width: 100%; height: auto; }

/* Компактные образцы в строку (блок макета) */
.decor-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.decor-strip .decor-swatch { width: var(--decor-item, 80px); }
.decor-strip .decor-swatch__frame { padding: 2px; }
.decor-strip .decor-swatch__body { margin-top: 6px; }
.decor-strip .decor-swatch__name { font-size: 12px; letter-spacing: .03em; }

/* Товары образца — карточки рисует тема; модуль задаёт только отступы и заголовок стандартной разметки */
.decor-products { clear: both; margin: 10px 0 34px; }
.decor-products__title { margin: 0 0 18px; font-size: 22px; font-weight: 600; color: #444; }

/* «Другие варианты» — одна строка с прокруткой, столько в ряд, сколько колонок у раздела */
.decor-siblings { margin-bottom: 10px; }
.decor-row-wrap { position: relative; margin-bottom: 30px; }
.decor-row { display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.decor-row::-webkit-scrollbar { display: none; }
.decor-row > .decor-swatch { flex: 0 0 calc((100% - 3 * 24px) / 4); min-width: 0; scroll-snap-align: start; }
.decor-row.decor-cols-d3 > .decor-swatch { flex-basis: calc((100% - 2 * 24px) / 3); }
.decor-row.decor-cols-d5 > .decor-swatch { flex-basis: calc((100% - 4 * 24px) / 5); }
.decor-row.decor-cols-d6 > .decor-swatch { flex-basis: calc((100% - 5 * 24px) / 6); }
.decor-row__nav { display: none; position: absolute; top: 35%; z-index: 2; width: 38px; height: 38px; padding: 0; border: 1px solid #d6d6d6; border-radius: 50%; background: rgba(255, 255, 255, .96); color: #444; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.decor-row__nav:hover:not([disabled]) { border-color: #555; color: #222; }
.decor-row__nav[disabled] { opacity: .3; cursor: default; }
.decor-row__nav--prev { left: -16px; }
.decor-row__nav--next { right: -16px; }
.decor-row-wrap--scroll .decor-row__nav { display: block; }

/* Страница образца: фото 35% слева, описание 65% справа */
.decor-profile { display: flex; align-items: flex-start; gap: 40px; margin-bottom: 40px; }
.decor-profile__media { flex: 0 0 35%; max-width: 35%; }
.decor-profile__content { flex: 1 1 0; min-width: 0; }
/* Фото в рамке, как у товара в OpenCart: не выходит за рамку */
.decor-photo { display: block; padding: 4px; border: 1px solid #ddd; border-radius: 4px; background: #fff; line-height: 0; }
.decor-photo img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 2px; }
a.decor-photo, a.decor-photo:hover, a.decor-photo:focus, a.decor-photo:active { cursor: zoom-in; border-color: #ddd !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.decor-profile__name { margin-top: 0; margin-bottom: 16px; }
.decor-profile__lead { font-size: 15px; }
.decor-profile__text { font-size: 14px; line-height: 1.7; }

/* Узкая позиция макета (колонка слева/справа, половина ширины) — меньше колонок */
@container (max-width: 900px) {
	.decor-module .decor-grid.decor-cols-d5, .decor-module .decor-grid.decor-cols-d6 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@container (max-width: 640px) {
	.decor-module .decor-grid:not(.decor-grid--auto) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
	.decor-module .decor-swatch__name { font-size: 14px; letter-spacing: .03em; }
	.decor-module .decor-swatch__body { margin-top: 8px; }
}
@container (max-width: 420px) {
	.decor-module .decor-grid:not(.decor-grid--auto) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
	.decor-module .decor-section-head h3 { font-size: 17px; }
	.decor-module .decor-module__title { font-size: 22px; }
}
@container (max-width: 220px) {
	.decor-module .decor-grid:not(.decor-grid--auto) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1199px) {
	/* Ноутбук и планшет — не больше 4 в ряд */
	.decor-grid.decor-cols-d5, .decor-grid.decor-cols-d6 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 24px; }
	.decor-grid.decor-cols-d4 { gap: 24px 24px; }
	.decor-row.decor-cols-d5 > .decor-swatch, .decor-row.decor-cols-d6 > .decor-swatch { flex-basis: calc((100% - 3 * 24px) / 4); }
	.decor-swatch__name { font-size: 16px; }
}

@media (max-width: 767px) {
	/* Телефон — 1 или 2 в ряд */
	.decor-grid, .decor-grid.decor-cols-m1 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.decor-grid.decor-cols-m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
	.decor-module .decor-grid.decor-cols-m1:not(.decor-grid--auto) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.decor-module .decor-grid.decor-cols-m2:not(.decor-grid--auto) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
	.decor-cols-m1 .decor-swatch__name { font-size: 17px; }
	.decor-cols-m2 .decor-swatch__name { font-size: 14px; letter-spacing: .03em; }
	.decor-swatch__body { margin-top: 8px; }
	/* «Другие варианты» — свайпом, край следующего образца виден */
	.decor-row { gap: 14px; }
	.decor-row > .decor-swatch, .decor-row.decor-cols-m1 > .decor-swatch { flex-basis: 72%; }
	.decor-row.decor-cols-m2 > .decor-swatch { flex-basis: 44%; }
	.decor-row-wrap--scroll .decor-row__nav { display: none; }
	.decor-profile { flex-direction: column; gap: 20px; }
	.decor-profile__media { flex: none; width: 100%; max-width: 100%; }
	/* Вкладки — лентой с прокруткой */
	.decor-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -15px; margin-right: -15px; padding: 0 15px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.decor-tabs::-webkit-scrollbar { display: none; }
	.decor-tabs__item { flex-shrink: 0; }
}