/* Секции главной страницы: баннеры, слайдер, категории, преимущества.
   Дополняет shop.css, не переопределяя его базовые стили. */

/* Ширина видимой области страницы.
   Блоки «во всю ширину» раньше считались от 100vw, а эта единица включает и
   вертикальную полосу прокрутки: блок выходил за экран на её толщину, и внизу
   появлялась горизонтальная прокрутка. Реальную ширину подставляет крошечный
   скрипт в шапке (burum_home_viewport_var), здесь — запасное значение на случай
   отключённого JS. Все полноэкранные расчёты идут только через эту переменную. */
:root{--nik-vw:100vw}

/* ---------- Баннер (общий для слайдера и одиночного) ---------- */
/* Настройки из админки приходят переменными; здесь — значения по умолчанию. */
.banner,.hero-slider{--nik-max-h:none;--nik-pad-t:36px;--nik-pad-b:36px}

.banner{position:relative;overflow:hidden;border-radius:14px;min-height:340px;display:flex;align-items:center;background:#f2f3f5}
.banner--single{margin:0 0 34px;max-height:var(--nik-max-h)}
.banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Ширину текстового блока задаёт настройка секции; 560px — если поле пустое. */
.banner__copy{position:relative;z-index:2;max-width:var(--nik-text-max,560px);box-sizing:border-box;
	padding:var(--nik-pad-t) 40px var(--nik-pad-b)}
.banner--left{justify-content:flex-start}
.banner--center{justify-content:center;text-align:center}
.banner--center .banner__copy{margin:0 auto}
.banner--right{justify-content:flex-end}
.banner--right .banner__copy{text-align:right}
.banner__title{margin:0 0 10px;font-size:clamp(24px,3.4vw,40px);line-height:1.12}
.banner__text{margin:0 0 18px;font-size:16px;line-height:1.5}

/* Читаемость поверх фото: подложка мягкая, чтобы не убивать картинку. */
.banner:has(.banner__img)::after{content:"";position:absolute;inset:0;z-index:1}
.banner--light:has(.banner__img)::after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15))}
.banner--light.banner--right:has(.banner__img)::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.15))}
.banner--light.banner--center:has(.banner__img)::after{background:rgba(0,0,0,.4)}
.banner--dark:has(.banner__img)::after{background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.3))}
.banner--light .banner__copy,.banner--light .banner__title,.banner--light .banner__text,.banner--light .hero__eyebrow{color:#fff}
.banner--dark .banner__copy,.banner--dark .banner__title,.banner--dark .banner__text{color:#14181f}

@media(max-width:640px){
	.banner{min-height:260px}
	.banner__copy{padding:22px 20px}
}

/* ---------- Слайдер ---------- */
.hero-slider{position:relative;margin:0 0 34px;max-height:var(--nik-max-h)}
.hero-slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:0;
	scrollbar-width:none;-ms-overflow-style:none;border-radius:14px;max-height:var(--nik-max-h)}
/* Минимальная высота баннера не должна перебивать заданный максимум: когда
   переменная не задана, значение min() невалидно и правило просто отбрасывается,
   оставляя min-height из .banner. */
.hero-slide,.banner--single{min-height:min(340px, var(--nik-max-h))}
.hero-slider__track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;scroll-snap-align:start;border-radius:14px;max-height:var(--nik-max-h)}
.hero-slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:0;
	border-radius:50%;background:rgba(255,255,255,.9);color:#14181f;font-size:26px;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.hero-slider__nav:hover{background:#fff}
.hero-slider__nav--prev{left:12px}
.hero-slider__nav--next{right:12px}
.hero-slider__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:8px;justify-content:center}
.hero-slider__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.hero-slider__dot.is-on{background:#fff;width:22px;border-radius:5px}
@media(max-width:640px){.hero-slider__nav{display:none}}

/* Текст слайда не должен заезжать под стрелки: они 42px и отстоят на 12px,
   поэтому с боков оставляем запас в 72px. На мобильных стрелок нет — отступ
   возвращаем к обычному, иначе текст сжимается в колонку. */
.hero-slider .banner__copy{padding-left:72px;padding-right:72px}
@media(max-width:640px){
	.hero-slider .banner__copy{padding-left:20px;padding-right:20px}
}

/* ---------- Слайдер во всю ширину экрана ---------- */
/* Картинка тянется от края до края, а текст остаётся по ширине контента:
   боковой отступ считается от вьюпорта, но не меньше запаса под стрелки. */
.hero-slider--full{margin-left:calc(50% - var(--nik-vw)/2);margin-right:calc(50% - var(--nik-vw)/2);
	width:var(--nik-vw);max-width:var(--nik-vw)}
.hero-slider--full .hero-slider__track,
.hero-slider--full .hero-slide{border-radius:0}
.hero-slider--full .banner__copy{
	max-width:none;
	width:100%;
	box-sizing:border-box;
	padding-left:max(72px, calc(var(--nik-vw)/2 - 576px));
	padding-right:max(72px, calc(var(--nik-vw)/2 - 576px));
}
/* При выравнивании по центру и справа текст всё равно держится контейнера. */
.hero-slider--full .banner--center .banner__copy,
.hero-slider--full .banner--right .banner__copy{margin-left:auto;margin-right:auto}
/* Стрелки уводим ЗА текстовую колонку, а не к её краю: 42px кнопки плюс 12px
   зазора = 54px, поэтому отсчёт идёт от границы контейнера (50vw − 576px)
   ещё на 54px наружу. На узких экранах упирается в 12px, где текст и так
   отступает на 72px и не пересекается. */
.hero-slider--full .hero-slider__nav--prev{left:max(12px, calc(var(--nik-vw)/2 - 630px))}
.hero-slider--full .hero-slider__nav--next{right:max(12px, calc(var(--nik-vw)/2 - 630px))}
@media(max-width:640px){
	.hero-slider--full .banner__copy{padding-left:20px;padding-right:20px}
}

/* ---------- Категории ---------- */
.cat-grid{display:grid;gap:var(--nik-gap,16px)}
.cat-grid--2{grid-template-columns:repeat(2,1fr)}
.cat-grid--3{grid-template-columns:repeat(3,1fr)}
.cat-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cat-grid--3,.cat-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr!important}}

/* Карточки одной высоты: ячейка тянется по сетке, карточка занимает её всю,
   а текстовая часть добирает остаток — низ карточек в ряду совпадает. */
.cat-cell{display:flex;flex-direction:column}
/* Фон, рамка, скруглення, відступ і вирівнювання приходять з налаштувань самої
   секції; порожнє поле змінної не створює — працює значення тут. */
.cat-card{display:flex;flex-direction:column;gap:0;
	border:1px solid var(--cat-border,#e6e8ec);border-radius:var(--cat-radius,12px);overflow:hidden;
	text-decoration:none;color:inherit;background:var(--cat-bg,#fff);
	text-align:var(--cat-align,left);transition:border-color .15s,box-shadow .15s;
	flex:1 1 auto;height:100%;box-sizing:border-box}
.cat-card:hover{border-color:#c9ced8;box-shadow:0 4px 16px rgba(20,24,31,.07)}
/* Пропорции задаются в настройках секции; 4:3 — если поле пустое. */
.cat-card__media{display:block;aspect-ratio:var(--cat-ratio,4/3);background:#f2f3f5;overflow:hidden;flex:0 0 auto}
.cat-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card__ph{display:block;width:100%;height:100%;
	background:repeating-linear-gradient(45deg,#eef0f3,#eef0f3 10px,#e7e9ee 10px,#e7e9ee 20px)}
.cat-card__link{display:block;text-decoration:none}
.cat-card__body{display:flex;flex-direction:column;gap:3px;padding:var(--cat-pad,12px 14px);flex:1 1 auto}
.cat-card__body strong{font-size:var(--cat-name-size,15px);color:var(--cat-name-color,inherit)}
.cat-card__body span{font-size:var(--cat-count-size,13px);color:var(--cat-count-color,#6b7280)}
.cat-card__name{text-decoration:none;color:inherit}
.cat-card__name:hover strong{text-decoration:underline}
/* Кількість у дужках стоїть у рядку назви, тому не має тягнути її розмір. */
.cat-card__count--inline{font-weight:400;margin-left:4px}
/* text-align сам по себе не двигает элементы колонки — нужен align-items. */
.cat-grid--center .cat-card__body{align-items:center}
.cat-grid--right .cat-card__body{align-items:flex-end}

/* Строки: фото слева, текст справа. Ширину фото держим долей карточки, но не
   даём ей ни схлопнуться, ни занять половину строки. */
.nik-view--rows .cat-card{flex-direction:row;align-items:stretch}
.nik-view--rows .cat-card__media,
.nik-view--rows .cat-card__link{flex:0 0 clamp(96px, 26%, 190px)}
.nik-view--rows .cat-card__link .cat-card__media{flex:1 1 auto;height:100%}
.nik-view--rows .cat-card__body{justify-content:center}

/* Дерево: подкатегории списком внутри карточки родителя. Вертикальная линия и
   чёрточки рисуются на самих пунктах — тогда линия сама заканчивается на
   последнем пункте, без подгонки отступов. */
.cat-card--tree{cursor:default}
.cat-card--tree::after{display:none}
.cat-children{list-style:none;margin:10px 0 0;padding:0}
.cat-children li{position:relative;padding:4px 0 4px 18px;display:flex;align-items:baseline;gap:8px}
.cat-children li::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:#dfe3ea}
.cat-children li:last-child::before{bottom:auto;height:13px}
.cat-children li::after{content:"";position:absolute;left:4px;top:13px;width:9px;height:1px;background:#dfe3ea}
.cat-children a{font-size:13px;color:#4b5563;text-decoration:none}
.cat-children a:hover{color:#14181f;text-decoration:underline}
.cat-children__count{margin-left:auto;font-size:12px;color:#9aa0ab}

/* ---------- Преимущества ---------- */
.usp-grid{display:grid;gap:18px}
.usp-grid--2{grid-template-columns:repeat(2,1fr)}
.usp-grid--3{grid-template-columns:repeat(3,1fr)}
.usp-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.usp-grid--3,.usp-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.usp-grid{grid-template-columns:1fr!important}}
.usp-item__icon{margin:0 0 10px}
.usp-item__icon img{width:44px;height:44px;object-fit:contain;display:block}
.usp-item h3{margin:0 0 6px;font-size:16px}
.usp-item__text{font-size:14px;line-height:1.5;color:#4b5563}
.usp-item__text p{margin:0 0 .5em}
.usp-item__text p:last-child{margin-bottom:0}

.home-copy{margin-top:28px}

/* ---------- Пропорции баннеров и слайдов ---------- */
.ratio-21-9,.ratio-21-9 .hero-slide{aspect-ratio:21/9}
.ratio-16-9,.ratio-16-9 .hero-slide{aspect-ratio:16/9}
.ratio-3-1,.ratio-3-1 .hero-slide{aspect-ratio:3/1}
.ratio-4-3,.ratio-4-3 .hero-slide{aspect-ratio:4/3}
.hero-slider .hero-slide,.banner--single{min-height:0}
/* Совсем узкий экран: жёсткая пропорция режет текст, поэтому отпускаем высоту. */
@media(max-width:640px){
	.ratio-21-9,.ratio-21-9 .hero-slide,.ratio-3-1,.ratio-3-1 .hero-slide{aspect-ratio:auto;min-height:260px}
}

/* Баннер без картинки — обычный блок на светлом фоне, текст всегда читаем. */
.banner--plain{background:#f4f5f7;min-height:0;padding:8px 0}
.banner--plain .banner__copy{color:#14181f}
.banner--plain .banner__title,.banner--plain .banner__text{color:#14181f}

.banner__text p{margin:0 0 .6em}
.banner__text p:last-child{margin-bottom:0}
/* Заголовок теперь пишут прямо в редакторе, поэтому он подчиняется «кольору
   тексту» блока и не тянет за собой размеры из общей типографики темы. */
.banner__text h1,.banner__text h2,.banner__text h3,.banner__text h4{
	margin:0 0 10px;padding:0;color:inherit;line-height:1.14}
.banner__text h1{font-size:clamp(26px,3.6vw,44px)}
.banner__text h2{font-size:clamp(24px,3.4vw,40px)}
.banner__text h3{font-size:clamp(20px,2.6vw,30px)}
.banner__text h4{font-size:clamp(18px,2.2vw,24px)}
.hero__desc{margin:0 0 16px;line-height:1.55}
.hero__desc p{margin:0 0 .6em}
.hero__desc p:last-child{margin-bottom:0}

/* ---------- Кнопки с настройками из админки ---------- */
.btn-custom{display:inline-block;padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:600;
	background:#14181f;color:#fff;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-custom:hover{opacity:.92}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Карточки товаров на главном экране ---------- */
.hero-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.hero-card img{width:100%;height:auto;display:block;border-radius:10px}
.hero-card__title{font-size:14px;font-weight:600;line-height:1.3}
.hero-card__price{font-size:14px;color:#4b5563}
.hero-card__btn{display:inline-block;margin-top:4px;padding:7px 14px;border-radius:8px;background:#14181f;color:#fff;
	font-size:13px;font-weight:600;text-align:center}

/* ==========================================================================
   Адаптив секций главной: планшет — два в ряд, телефон — во всю ширину.
   `!important` здесь намеренно: он перебивает выбранное владельцем число
   колонок (.cat-grid--4 и т.п.), которое на узком экране не имеет смысла.
   Каталог и категории — те же правила, но в shop.css: он грузится везде.
   ========================================================================== */
@media(max-width:1024px){
	.cat-grid,.usp-grid{grid-template-columns:repeat(2,1fr)!important}
	.hero__media{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
	.cat-grid,.usp-grid{grid-template-columns:1fr!important}
	.hero__media{grid-template-columns:1fr}
	.hero__actions{gap:8px}
	.btn-custom{width:100%;text-align:center}
}

/* ==========================================================================
   Виды отображения блоков: сетка, колонки, строки, слайдер.
   Количество карточек задаётся переменными --cd/--ct/--cm из админки.
   ========================================================================== */
.nik-view{display:grid;gap:var(--nik-gap,16px)}
/*
 * Ячейка — точка отсчёта для всего, что внутри неё позиционируется абсолютно.
 * Без этого такой элемент цепляется за ближайшего позиционированного предка —
 * за весь `.nik-slider`, — и остаётся стоять на своём месте в ленте, за краем
 * экрана: прокрутка слайдера его не уносит и не обрезает, зато вся страница
 * получает горизонтальную прокрутку. У карточек WooCommerce такой элемент есть
 * всегда — скрытая подпись для экранных читалок («Диапазон цен…»), и хватало
 * одной карточки в конце ленты.
 */
.nik-cell{position:relative}
.nik-view--grid,.nik-view--columns{grid-template-columns:repeat(var(--cd,4),minmax(0,1fr))}
.nik-view--rows{grid-template-columns:1fr}
@media(max-width:1024px){
	.nik-view--grid,.nik-view--columns{grid-template-columns:repeat(var(--ct,2),minmax(0,1fr))}
}
@media(max-width:640px){
	.nik-view--grid,.nik-view--columns{grid-template-columns:repeat(var(--cm,1),minmax(0,1fr))}
}

/* Строки: карточка вытягивается в горизонтальную полосу.
   Категории раскладываются выше — там же, где остальные их правила. */
.nik-view--rows .usp-item{display:flex;gap:14px;align-items:flex-start}
.nik-view--rows .usp-item__icon{margin:0}

/* Слайдер блока: горизонтальная прокрутка со snap. */
.nik-slider{position:relative}
.nik-view--slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
	gap:var(--nik-gap,16px);padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.nik-view--slider::-webkit-scrollbar{display:none}
.nik-view--slider > *{scroll-snap-align:start;flex:0 0 calc((100% - (var(--cd,4) - 1) * 16px) / var(--cd,4))}
@media(max-width:1024px){
	.nik-view--slider > *{flex-basis:calc((100% - (var(--ct,2) - 1) * 16px) / var(--ct,2))}
}
@media(max-width:640px){
	.nik-view--slider > *{flex-basis:calc((100% - (var(--cm,1) - 1) * 16px) / var(--cm,1))}
}
.nik-slider__nav{position:absolute;top:40%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border:0;
	border-radius:50%;background:rgba(255,255,255,.95);color:#14181f;font-size:22px;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.nik-slider__nav:hover{background:#fff}
.nik-slider__nav--prev{left:-6px}
.nik-slider__nav--next{right:-6px}
.nik-slider__nav[hidden]{display:none}
@media(max-width:640px){.nik-slider__nav{display:none}}

/* Товары в блоке-виде: карточка Woo внутри своей ячейки. */
.nik-products .nik-cell{display:flex}
.nik-products .nik-cell > li.product,
.nik-products .nik-cell > .product{width:100%!important;margin:0!important;float:none!important;list-style:none}

/* ==========================================================================
   Цвета текста из админки. Пустые переменные — цвет остаётся темовым.
   ========================================================================== */
.banner__title,.hero__text h1{color:var(--nik-title,inherit)}
.banner__text,.hero__desc,.hero__eyebrow{color:var(--nik-text,inherit)}

/* Затемнение фото задаётся отдельно и не зависит от выбранных цветов. */
.banner:has(.banner__img)::after{background:rgba(0,0,0,var(--nik-overlay,0))}
.banner--light:has(.banner__img)::after,
.banner--dark:has(.banner__img)::after{background:rgba(0,0,0,var(--nik-overlay,0))}

/* ---------- Главный экран с товарами: две равные половины ----------
   Секция `.hero` в shop.css сама по себе сетка из двух колонок, а секция из
   админки кладёт внутрь одну обёртку `.hero__inner` — она занимала только
   первую колонку, и текст с товарами оказывались в левой половине друг под
   другом. Поэтому у настраиваемой секции сетку строит именно `.hero__inner`:
   ровно 50/50 на десктопе и одна колонка на мобильном. `minmax(0,1fr)` тут
   обязателен — без него колонка со слайдером растягивается по содержимому и
   страница получает горизонтальную прокрутку. */
.hero--split{display:block}
.hero--split .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:40px;align-items:center}
.hero--split .hero__text{min-width:0}
/* Внутри половины ширину карточкам раздаёт блок вида (.nik-view), поэтому
   собственная сетка `.hero__media` из shop.css тут только мешала: она резала
   половину ещё на две колонки. min-width:0 нужен слайдеру — иначе колонка
   растягивается по содержимому вместо того, чтобы прокручиваться. */
.hero--split .hero__media{display:block;min-width:0}
@media(max-width:900px){
	.hero--split .hero__inner{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* Полноэкранный режим: фон от края до края, содержимое — по ширине контейнера. */
.hero--full{margin-left:calc(50% - var(--nik-vw)/2);margin-right:calc(50% - var(--nik-vw)/2);
	width:var(--nik-vw);max-width:var(--nik-vw);border-radius:0;padding-left:0;padding-right:0}
.hero--full .hero__inner{max-width:1200px;margin:0 auto;padding:0 24px}

/* Банер во всю ширину экрана. */
.banner--full{margin-left:calc(50% - var(--nik-vw)/2);margin-right:calc(50% - var(--nik-vw)/2);
	width:var(--nik-vw);max-width:var(--nik-vw);border-radius:0}
.banner--full .banner__copy{max-width:none;width:100%;box-sizing:border-box;
	padding-left:max(40px, calc(var(--nik-vw)/2 - 576px));
	padding-right:max(40px, calc(var(--nik-vw)/2 - 576px))}
@media(max-width:640px){
	.banner--full .banner__copy{padding-left:20px;padding-right:20px}
}

/* ==========================================================================
   Заголовок секції та посилання «усі товари».
   Вирівнювання заголовка й вигляд посилання налаштовуються в кожному блоці
   окремо — тому це класи, а не глобальні правила.
   ========================================================================== */
.section-head--center{justify-content:center;text-align:center}
.section-head--right{justify-content:flex-end;text-align:right}

/* Звичайне посилання — як було: дрібний приглушений текст. */
.section-link{font-size:14px;color:#6b7280;text-decoration:none;white-space:nowrap}
.section-link:hover{color:#14181f}

/* Кнопки: та сама висота й скруглення, що у кнопок теми. */
.section-link--solid,.section-link--outline{
	display:inline-flex;align-items:center;justify-content:center;
	padding:11px 22px;border-radius:8px;font-size:15px;font-weight:500;
	border:1px solid transparent;transition:.18s ease;text-decoration:none}
.section-link--solid{background:#14181d;color:#fff;border-color:#14181d}
.section-link--solid:hover{opacity:.88;color:#fff}
.section-link--outline{background:transparent;color:#14181d;border-color:#d9dce1}
.section-link--outline:hover{border-color:#14181d;color:#14181d}

/* Посилання під блоком. */
.section-foot{display:flex;margin-top:22px}
.section-foot--bl{justify-content:flex-start}
.section-foot--bc{justify-content:center}
.section-foot--br{justify-content:flex-end}

/* ==========================================================================
   Фон головного екрана «текст, кнопки і товари».
   Колір і градієнт лягають прямо на секцію, а відео — окремим шаром під
   вмістом: фоном його зробити не можна.
   ========================================================================== */
.hero--bg{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
/* Затемнення тим самим полем, що й у банера: 0 — шар прозорий і не заважає. */
.hero--bg::after{content:"";position:absolute;inset:0;z-index:1;
	background:rgba(0,0,0,var(--nik-overlay,0));pointer-events:none}
.hero--bg .hero__inner{position:relative;z-index:2}

/* ==========================================================================
   Якір секції. У блока є свій ID — на нього ведуть посилання «#id». Шапка
   липка, тому браузер має зупинятися трохи вище, інакше заголовок блока
   ховається під нею. Висоту шапки міряє скрипт (--nik-head-h), 96px — запас.
   ========================================================================== */
[id].home-section,
[id].hero,
[id].banner,
[id].hero-slider { scroll-margin-top: calc(var(--nik-head-h, 96px) + 12px); }