/* ==========================================================================
   BUDKADOGS — базовые токены и каркас
   Секции главной наполняются модулями, их стили добавляются по мере вёрстки
   ========================================================================== */

:root {
	--bd-dark:        #0E1114;
	--bd-dark-2:      #15181B;
	--bd-accent:      #C9A57B;
	--bd-accent-dark: #B08E64;
	--bd-light:       #F2F0EC;
	--bd-text:        #1A1A1A;
	--bd-muted:       #6B6B6B;
	--bd-muted-dark:  #9AA0A6;
	--bd-line:        #E3DFD8;

	--bd-radius:    6px;
	--bd-radius-lg: 10px;

	--bd-container: 1280px;
	--bd-gutter:    20px;
	--bd-section-y: 44px;

	--bd-font: Inter, "Helvetica Neue", Arial, sans-serif;
	--bd-font-hand: Caveat, cursive;
}

*, *::before, *::after { box-sizing: border-box; }

body.bd-site {
	margin: 0;
	font-family: var(--bd-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--bd-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Раскладка: полоса на всю ширину, контент по центру ------------------ */

.bd-container {
	width: 100%;
	max-width: var(--bd-container);
	margin-inline: auto;
	padding-inline: var(--bd-gutter);
}

.bd-section { padding-block: var(--bd-section-y); }

/* Тёмные полосы */
.bd-section--catalog,
.bd-section--cta {
	background: var(--bd-dark);
	color: #fff;
}

/* Светлые полосы */
.bd-section--quiz,
.bd-section--works,
.bd-section--reviews {
	background: var(--bd-light);
}

/* Герой управляет отступами сам — фото во всю ширину */
.bd-section--hero { padding-block: 0; background: var(--bd-dark); }

.bd-main { padding-block: 48px; }

/* --- Кнопки -------------------------------------------------------------- */

.bd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--bd-radius);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.bd-btn--accent { background: var(--bd-accent); color: var(--bd-dark); }
.bd-btn--accent:hover { background: var(--bd-accent-dark); }

.bd-btn--dark { background: var(--bd-dark); color: #fff; border-color: #fff; }
.bd-btn--dark:hover { background: #fff; color: var(--bd-dark); }

.bd-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }

/* --- Шапка --------------------------------------------------------------- */

.bd-header { background: var(--bd-dark); color: #fff; }

.bd-header--sticky { position: sticky; top: 0; z-index: 1030; }

.bd-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 76px;
}

.bd-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: 0 0 auto;
}

.bd-logo__mark {
	display: grid;
	place-items: center;
	width: 55px;
	height: 55px;
	flex: 0 0 auto;
	border: 2px solid var(--bd-accent);
	border-radius: var(--bd-radius);
	overflow: hidden;
}

/* Жёстко ограничиваем картинку: SVG без размеров в атрибутах
   растягивается на всю доступную ширину и ломает шапку */
.bd-logo__mark img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 55px;
	max-height: 55px;
	object-fit: contain;
	padding: 3px;
}

/* Логотип без рамки, когда загружена своя картинка */
.bd-logo__mark:has(img) { border-color: transparent; padding: 0; }

.bd-logo__text { display: flex; flex-direction: column; }
.bd-logo__name { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; }
.bd-logo__slogan { font-size: .625rem; color: var(--bd-muted-dark); letter-spacing: .08em; }

.bd-nav { flex: 1 1 auto; }

.bd-header__aside {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	flex: 0 0 auto;
}

.bd-header__phone {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bd-phone-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	color: var(--bd-accent);
	flex: 0 0 auto;
}

.bd-phone-text { display: flex; flex-direction: column; }
.bd-phone { font-weight: 600; text-decoration: none; white-space: nowrap; }
.bd-hours { font-size: .75rem; color: var(--bd-muted-dark); white-space: nowrap; }

/* --- Бургер и мобильное меню -------------------------------------------- */

.bd-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.bd-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }

.bd-offcanvas { background: var(--bd-dark); color: #fff; }
.bd-offcanvas__title { font-weight: 600; }
.bd-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.bd-offcanvas ul { list-style: none; margin: 0; padding: 0; }
.bd-offcanvas li { border-bottom: 1px solid rgba(255,255,255,.1); }
.bd-offcanvas a { display: block; padding: 14px 0; text-decoration: none; }

.bd-offcanvas__phone {
	display: inline-block;
	margin-top: 24px;
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

/* --- Страница ошибки ----------------------------------------------------- */

.bd-errorpage {
	display: flex;
	align-items: center;
	min-height: 100vh;
	background: var(--bd-dark);
	color: #fff;
	text-align: center;
}

.bd-errorpage__code {
	font-size: clamp(4rem, 12vw, 9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--bd-accent);
	margin: 0;
}

.bd-errorpage__hint { color: var(--bd-muted-dark); }
.bd-errorpage__actions { margin-top: 28px; }

.bd-errorpage__debug {
	margin-top: 40px;
	text-align: left;
	font-size: .8125rem;
	color: var(--bd-muted-dark);
}

.bd-errorpage__debug pre { overflow-x: auto; }

/* --- Доступность --------------------------------------------------------- */

.bd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1100;
	padding: 12px 20px;
	background: var(--bd-accent);
	color: var(--bd-dark);
}

.bd-skip:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--bd-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Адаптив ------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.bd-nav__list { gap: 16px; }
	.bd-nav__link { font-size: .875rem; }
}

@media (max-width: 991.98px) {
	:root { --bd-section-y: 28px; }
	.bd-nav { display: none; }
	.bd-burger { display: flex; }
}

@media (max-width: 767.98px) {
	/* На телефонах sticky дёргается: браузер прячет адресную строку и меняет
	   высоту окна. Поэтому здесь fixed, а движение — через transform,
	   он от высоты окна не зависит. */
	.bd-header--sticky {
		position: fixed;
		inset: 0 0 auto;
		transform: translateY(0);
		transition: transform .25s ease;
		will-change: transform;
	}

	/* Прокрутка вниз — шапка уезжает, вверх — возвращается */
	.bd-header--sticky.is-hidden { transform: translateY(-100%); }

	.bd-header--sticky + .bd-navbar { position: static; }

	.bd-header__phone { display: none; }
	.bd-header__cta { display: none; }
	.bd-header__inner { min-height: 64px; gap: 16px; }
}

/* ==========================================================================
   Меню — дописать в конец css/template.css
   ========================================================================== */

/* --- Горизонтальное меню шапки ------------------------------------------ */

.bd-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-nav__item { position: relative; }

.bd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 8px;
	font-size: .9375rem;
	color: #fff;
	text-decoration: none;
	opacity: .85;
	white-space: nowrap;
	transition: opacity .15s, color .15s;
}

.bd-nav__link:hover,
.bd-nav__item.current > .bd-nav__link,
.bd-nav__item.active > .bd-nav__link {
	opacity: 1;
	color: var(--bd-accent);
}

.bd-nav__caret {
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .7;
}

.bd-nav__heading,
.bd-nav__separator {
	display: inline-block;
	padding-block: 8px;
	font-size: .9375rem;
	opacity: .6;
}

/* Подменю: раскрытие по наведению и по фокусу с клавиатуры */
.bd-nav__sub {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 1040;
	min-width: 240px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--bd-dark-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--bd-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}

.bd-nav__item:hover > .bd-nav__sub,
.bd-nav__item:focus-within > .bd-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bd-nav__sub .bd-nav__link {
	display: flex;
	padding: 10px 20px;
	opacity: 1;
	white-space: normal;
}

.bd-nav__sub .bd-nav__link:hover { background: rgba(255, 255, 255, .06); }

/* Третий уровень уходит вбок */
.bd-nav__sub .bd-nav__sub { top: 0; left: 100%; }

/* --- Мобильное меню ------------------------------------------------------ */

.bd-mnav,
.bd-mnav__sub { margin: 0; padding: 0; list-style: none; }

.bd-mnav > .bd-mnav__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.bd-mnav__row { display: flex; align-items: center; }

.bd-mnav__link {
	flex: 1 1 auto;
	padding: 14px 0;
	color: #fff;
	text-decoration: none;
	font-size: 1.0625rem;
}

.bd-mnav__item.current > .bd-mnav__row > .bd-mnav__link,
.bd-mnav__item.active > .bd-mnav__row > .bd-mnav__link { color: var(--bd-accent); }

.bd-mnav__heading {
	flex: 1 1 auto;
	padding: 14px 0;
	font-size: 1.0625rem;
	opacity: .6;
}

.bd-mnav__toggle {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.bd-mnav__toggle span {
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform .2s;
}

.bd-mnav__toggle[aria-expanded="true"] span { transform: rotate(-135deg); }

.bd-mnav__sub { padding-left: 16px; }

.bd-mnav__sub .bd-mnav__link {
	padding: 11px 0;
	font-size: .9375rem;
	opacity: .8;
}


/* ==========================================================================
   Подвал: полоса-призыв
   ========================================================================== */

.bd-footer { background: var(--bd-dark-2); color: #fff; }

.bd-footer__cta {
	position: relative;
	background: var(--bd-dark);
	padding-block: 28px;
	overflow: hidden;
}

.bd-footer__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 96px;
}

/* Фото питомца прижато к левому краю и выступает за полосу */
.bd-footer__image {
	flex: 0 0 auto;
	width: 150px;
	margin-block: -28px;
	align-self: flex-end;
}

.bd-footer__image img {
	width: 100%;
	height: auto;
}

.bd-footer__text { flex: 0 1 auto; }

.bd-footer__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.bd-footer__sub {
	margin: 4px 0 0;
	font-size: .9375rem;
	color: var(--bd-muted-dark);
}

.bd-footer__btn { flex: 0 0 auto; min-width: 200px; }

.bd-footer__phone {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	flex: 0 0 auto;
}

.bd-footer__phone-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	color: var(--bd-accent);
	flex: 0 0 auto;
}

.bd-footer__phone-text { display: flex; flex-direction: column; }

.bd-footer__phone-text a {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bd-footer__phone-text small {
	font-size: .75rem;
	color: var(--bd-muted-dark);
	white-space: nowrap;
}

/* --- Мессенджеры --------------------------------------------------------- */

.bd-footer__messengers {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 0 0 auto;
}

.bd-msg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .875rem;
	text-decoration: none;
	color: #fff;
	white-space: nowrap;
}

.bd-msg:hover { color: var(--bd-accent); }

.bd-msg__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	flex: 0 0 auto;
}

.bd-msg--tg .bd-msg__icon { background: #2AABEE; }

.bd-msg__icon--letter {
	background: var(--bd-accent);
	color: var(--bd-dark);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1;
}

/* --- Нижняя строка под модули -------------------------------------------- */

.bd-footer__bottom {
	padding-block: 26px;
	font-size: .875rem;
	color: var(--bd-muted-dark);
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.bd-footer__bottom a { color: #fff; }

/* --- Адаптив подвала ----------------------------------------------------- */

@media (max-width: 1199.98px) {
	.bd-footer__inner { flex-wrap: wrap; gap: 20px 28px; }
	.bd-footer__phone { margin-left: 0; }
}

@media (max-width: 767.98px) {
	.bd-footer__cta { padding-block: 24px; }
	.bd-footer__inner { flex-direction: column; align-items: flex-start; }
	.bd-footer__image { width: 120px; align-self: center; margin-block: -24px 0; }
	.bd-footer__btn { width: 100%; }
	.bd-footer__messengers { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ==========================================================================
   Корзина в шапке (mod_djc2cart)
   Разметку модуля не трогаем, всё оформление здесь
   ========================================================================== */

.bd-header__cart { flex: 0 0 auto; }

.mod_djc2cart { position: relative; display: inline-block; }

.mod_djc2cart .mod_djc2_cart_contents {
	display: flex;
	align-items: center;
}

/* Подпись прячем, из неё оставляем только число — оно станет бейджем */
.mod_djc2cart_info {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 2;
	margin: 0;
	font-size: 0;
	line-height: 0;
	pointer-events: none;
}

.djc_mod_cart_items_count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--bd-accent);
	border-radius: 999px;
	color: var(--bd-dark);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.mod_djc2cart_button { margin: 0; }

.mod_djc2cart_button .btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	transition: background-color .15s, border-color .15s;
}

.mod_djc2cart_button .btn:hover {
	background: var(--bd-accent);
	border-color: var(--bd-accent);
}

/* Текст кнопки убираем совсем: с font-size:0 спан всё равно занимал
   вторую строку сетки и смещал иконку вверх */
.mod_djc2cart_button .btn span { display: none; }

.mod_djc2cart_button .btn::before {
	content: "";
	width: 20px;
	height: 20px;
	background: center / contain no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E");
	transition: filter .15s;
}

.mod_djc2cart_button .btn:hover::before { filter: brightness(0); }

/* Вариант с подписью: задать модулю суффикс класса « bd-cart--text» */
.mod_djc2cart.bd-cart--text .mod_djc2cart_button .btn {
	width: auto;
	height: 44px;
	padding: 0 20px 0 16px;
	gap: 10px;
	grid-auto-flow: column;
	border-radius: var(--bd-radius);
}

.mod_djc2cart.bd-cart--text .mod_djc2cart_button .btn span {
	display: block;
	font-size: .9375rem;
	line-height: 1;
	font-weight: 600;
	color: #fff;
}

.mod_djc2cart.bd-cart--text .mod_djc2cart_button .btn:hover span { color: var(--bd-dark); }

/* --- Пустая корзина ------------------------------------------------------ */

/* Модуль оставляет кнопку в разметке, но прячет её блок инлайновым
   style="display: none" и показывает текст «Ваша корзина пуста».
   Текст убираем, блок с кнопкой возвращаем — иконка та же, бейдж без числа */
.mod_djc2cart_is_empty { display: none; }

.mod_djc2cart .mod_djc2_cart_contents[style] { display: flex !important; }

/* Когда корзина пуста, счётчик не выводим */
.mod_djc2cart:has(.mod_djc2cart_is_empty) .mod_djc2cart_info { display: none; }

.djc_mod_cart_items_count:empty { display: none; }

@media (max-width: 767.98px) {
	/* На телефоне корзина остаётся, а телефон и большая кнопка скрыты —
	   ставим её перед бургером */
	.bd-header__cart { order: 1; }
	.bd-burger { order: 2; }
	.mod_djc2cart_button .btn { width: 40px; height: 40px; }
}


/* ==========================================================================
   Полоса меню под шапкой
   ========================================================================== */

.bd-navbar { border-top: 1px solid rgba(255, 255, 255, .07); }

.bd-navbar .bd-container {
	display: flex;
	align-items: center;
	min-height: 52px;
}

.bd-navbar .bd-nav__list { gap: 28px; width: 100%; }

/* Выравнивание пунктов в полосе */
.bd-navbar--align-start   .bd-nav__list { justify-content: flex-start; }
.bd-navbar--align-center  .bd-nav__list { justify-content: center; }
.bd-navbar--align-end     .bd-nav__list { justify-content: flex-end; }
.bd-navbar--align-between .bd-nav__list { justify-content: space-between; }

/* Подменю у крайних пунктов не должно уезжать за край */
.bd-navbar--align-end .bd-nav__item:last-child .bd-nav__sub,
.bd-navbar--align-between .bd-nav__item:last-child .bd-nav__sub { left: auto; right: -16px; }

.bd-navbar .bd-nav__link {
	padding-block: 14px;
	font-size: .9375rem;
	white-space: nowrap;
}

/* Тёмная */
.bd-navbar--dark { background: var(--bd-dark-2); }

/* Полупрозрачная с размытием: сквозь неё просвечивает фон героя */
.bd-navbar--glass {
	background: rgba(10, 12, 14, .8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top-color: rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Браузерам без backdrop-filter отдаём плотный фон, иначе текст поплывёт */
@supports not (backdrop-filter: blur(10px)) {
	.bd-navbar--glass { background: rgba(10, 12, 14, .95); }
}

/* Песочная */
.bd-navbar--accent { background: var(--bd-accent); border-top-color: transparent; }
.bd-navbar--accent .bd-nav__link { color: var(--bd-dark); opacity: .85; }
.bd-navbar--accent .bd-nav__link:hover,
.bd-navbar--accent .bd-nav__item.current > .bd-nav__link,
.bd-navbar--accent .bd-nav__item.active > .bd-nav__link { color: var(--bd-dark); opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.bd-navbar--accent .bd-nav__sub { background: var(--bd-dark-2); }
.bd-navbar--accent .bd-nav__sub .bd-nav__link { color: #fff; text-decoration: none; }

/* Светлая */
.bd-navbar--light { background: var(--bd-light); border-top-color: var(--bd-line); }
.bd-navbar--light .bd-nav__link { color: var(--bd-text); opacity: .8; }
.bd-navbar--light .bd-nav__link:hover,
.bd-navbar--light .bd-nav__item.current > .bd-nav__link,
.bd-navbar--light .bd-nav__item.active > .bd-nav__link { color: var(--bd-accent-dark); opacity: 1; }

/* Подменю тоже светлое, иначе на светлой полосе висит чёрный прямоугольник */
.bd-navbar--light .bd-nav__sub {
	background: #fff;
	border-color: var(--bd-line);
	box-shadow: 0 12px 32px rgba(63, 29, 18, .12);
}

.bd-navbar--light .bd-nav__sub .bd-nav__link { color: var(--bd-text); }
.bd-navbar--light .bd-nav__sub .bd-nav__link:hover {
	background: var(--bd-light);
	color: var(--bd-accent-dark);
}

/* Залипает вместе с шапкой */
.bd-header--sticky + .bd-navbar {
	position: sticky;
	top: 76px;
	z-index: 1029;
}

@media (max-width: 991.98px) {
	.bd-navbar { display: none; }
}


/* --- Мессенджеры в шапке ------------------------------------------------- */

.bd-header__msg {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.bd-msg-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: transform .15s, filter .15s;
}

.bd-msg-icon:hover { transform: translateY(-2px); filter: brightness(1.1); }

.bd-msg-icon--tg { background: #2AABEE; }

.bd-msg-icon--max {
	background: var(--bd-accent);
	color: var(--bd-dark);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1;
}

@media (max-width: 1199.98px) {
	.bd-header__msg { display: none; }
}


/* --- Скрытая позиция для модулей ---------------------------------------- */

/* Модули рендерятся и их скрипты работают, но на странице ничего не видно.
   display:none ломает часть модалок, поэтому убираем блок из потока */
.bd-hidden-modules {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* --- Группа в Telegram --------------------------------------------------- */

.bd-msg-icon--tgg { background: #1B7FB8; }
.bd-msg--tgg .bd-msg__icon { background: #1B7FB8; }

/* ==========================================================================
   Карусель товаров (переопределение mod_djc2items)
   ========================================================================== */

.bd-carousel {
	position: relative;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.bd-carousel.is-dragging { cursor: grabbing; }

.bd-carousel__track {
	display: flex;
	gap: 14px;
	will-change: transform;
}

/* --- Карточка ------------------------------------------------------------ */

.bd-pcard {
	position: relative;
	flex: 0 0 300px;
	width: 300px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--bd-radius, 6px);
	background: var(--bd-dark-2);
	color: #fff;
}

.bd-pcard__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.bd-pcard__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #0A0C0E;
}

.bd-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-width: none;
	transition: transform .45s ease;
	pointer-events: none;
}

.bd-pcard:hover .bd-pcard__media img { transform: scale(1.06); }

.bd-pcard__media .djc_image,
.bd-pcard__media .djc_image a { display: block; height: 100%; }

.bd-pcard__labels {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bd-pcard__labels .djc_label,
.bd-pcard__labels .djc_labels span {
	display: inline-block;
	padding: 4px 8px;
	background: var(--bd-accent);
	border-radius: var(--bd-radius);
	color: var(--bd-dark);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.2;
}

/* --- Текст и цена -------------------------------------------------------- */

.bd-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	padding: 12px 13px 13px;
	background: #0A0C0E;
}

.bd-pcard__title {
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.25;
}

.bd-pcard__cat {
	position: relative;
	z-index: 4;
	margin: 0;
	align-self: flex-start;
	font-size: .6875rem;
	color: rgba(255, 255, 255, .55);
}

/* Ссылка на категорию лежит выше растянутой ссылки карточки */
.bd-pcard__cat a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.bd-pcard__cat a:hover {
	color: var(--bd-accent);
	border-bottom-color: var(--bd-accent);
}

.bd-pcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
}

.bd-pcard__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	font-size: .875rem;
	font-weight: 700;
	color: var(--bd-accent);
}

.bd-pcard__price-from {
	font-size: .625rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .5);
}

.bd-pcard__price .djc_price {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	white-space: nowrap;
}

.bd-pcard__price .djc_price_label { display: none; }

.bd-pcard__price .djc_price_value,
.bd-pcard__price .djc_price_unit { font: inherit; color: inherit; }

.bd-pcard__arrow {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--bd-accent);
	border-radius: 50%;
	transition: background-color .15s, transform .2s;
}

.bd-pcard__arrow::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: -2px;
	border-top: 2px solid var(--bd-dark);
	border-right: 2px solid var(--bd-dark);
	transform: rotate(45deg);
}

.bd-pcard:hover .bd-pcard__arrow { background: #fff; transform: translateX(3px); }

@media (max-width: 575.98px) {
	.bd-carousel__track { gap: 10px; }
	.bd-pcard { flex-basis: 175px; width: 175px; }
}

/* ==========================================================================
   Утилиты отступов
   Вписываются в «Суффикс класса модуля» с пробелом впереди, например « bd-py-0».
   Работают для любого модуля, у которого суффикс попадает на корневой элемент.
   ========================================================================== */

.bd-py-0 { padding-block: 0 !important; }
.bd-pt-0 { padding-top: 0 !important; }
.bd-pb-0 { padding-bottom: 0 !important; }

.bd-py-xs { padding-block: 12px !important; }
.bd-py-sm { padding-block: 22px !important; }
.bd-py-lg { padding-block: 72px !important; }

/* Секция главной тоже добавляет свой отступ — гасим и его */
.bd-section:has(> .bd-py-0) { padding-block: 0; }
.bd-section:has(> .bd-pt-0) { padding-top: 0; }
.bd-section:has(> .bd-pb-0) { padding-bottom: 0; }

/* Полностью вплотную: ни у секции, ни у модуля */
.bd-flush { padding-block: 0 !important; }
.bd-section:has(> .bd-flush) { padding-block: 0; }

/* Прижать к соседнему блоку сверху или снизу */
.bd-section:has(> .bd-py-sm),
.bd-section:has(> .bd-py-xs) { padding-block: 0; }


/* --- Заголовок секции (стиль вывода bdtitle) ----------------------------- */

/* Размер как у заголовка квиза — чтобы секции выглядели одинаково */
.bd-section__title {
	margin: 0 0 22px;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
}

/* На тёмных полосах заголовок белый */
.bd-section--catalog .bd-section__title,
.bd-section--cta .bd-section__title { color: #fff; }

/* ==========================================================================
   Модальная форма Wedal Callback
   Разметку модуля не трогаем, всё оформление здесь
   ========================================================================== */

/* У модуля своя белая подложка и узкая фиксированная ширина.
   Префикс .bd-site поднимает приоритет: CSS модуля подключается после
   шаблонного, и при равной важности побеждал бы он */
.bd-site .wjcallbackform,
.bd-site .wjcallbackform .modal-dialog,
.bd-site .mfp-content,
.bd-site .wjcallback-popup {
	max-width: 760px !important;
	width: 100% !important;
}

.bd-site .wjcallbackform .modal-dialog { width: calc(100% - 32px) !important; }

.wjcallbackform {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
}

.wjcallbackform .modal-dialog {
	max-width: 760px !important;
	width: calc(100% - 32px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wjcallbackform .modal-content {
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: var(--bd-radius-lg);
	box-shadow: 0 24px 64px rgba(10, 12, 14, .35);
	overflow: hidden;
}

/* --- Шапка --------------------------------------------------------------- */

.wjcallbackform .modal-header {
	position: relative;
	display: flex;
	align-items: center;
	padding: 26px 30px 20px;
	background: var(--bd-dark);
	border: 0;
}

.wjcallbackform .modal-title {
	display: block;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* Песочная черта под заголовком, как в остальных блоках */
.wjcallbackform .form-header::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 12px;
	background: var(--bd-accent);
	border-radius: 2px;
}

.wjcallbackform .modal-header .close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: rgba(255, 255, 255, .1);
	border-radius: 50%;
	color: #fff;
	font-size: 1.375rem;
	line-height: 1;
	opacity: 1;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.wjcallbackform .modal-header .close:hover {
	background: var(--bd-accent);
	color: var(--bd-dark);
}

/* --- Тело ---------------------------------------------------------------- */

.wjcallbackform .modal-body { padding: 26px 30px 6px; }

.wjcallbackform .informtext {
	margin-bottom: 18px;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--bd-muted);
}

.wjcallbackform .control-group { margin-bottom: 16px; }

.wjcallbackform .control-label label {
	display: block;
	margin-bottom: 6px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--bd-muted);
}

.wjcallbackform .control-label label .star,
.wjcallbackform .control-label label span.star { color: #c0392b; }

.wjcallbackform input[type="text"],
.wjcallbackform input[type="email"],
.wjcallbackform input[type="tel"],
.wjcallbackform input[type="number"],
.wjcallbackform input[type="file"],
.wjcallbackform select,
.wjcallbackform textarea {
	width: 100%;
	max-width: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	font: inherit;
	font-size: .9375rem;
	color: var(--bd-text);
	transition: border-color .15s, box-shadow .15s;
}

.wjcallbackform textarea { min-height: 110px; resize: vertical; }

.wjcallbackform input:focus,
.wjcallbackform select:focus,
.wjcallbackform textarea:focus {
	border-color: var(--bd-accent);
	box-shadow: 0 0 0 3px rgba(201, 165, 123, .18);
	outline: none;
}

.wjcallbackform input::placeholder,
.wjcallbackform textarea::placeholder { color: #b5b0a8; }

/* Согласие: компонент выводит подпись сверху, а чекбокс снизу.
   Переставляем в строку — сначала квадратик, потом текст */
.bd-site .wjcallbackform .control-group:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
}

.bd-site .wjcallbackform .control-group:has(input[type="checkbox"]) .controls {
	order: 1;
	flex: 0 0 auto;
	margin: 0;
}

.bd-site .wjcallbackform .control-group:has(input[type="checkbox"]) .control-label {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.bd-site .wjcallbackform .control-group:has(input[type="checkbox"]) .control-label label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bd-text);
	cursor: pointer;
}

.bd-site .wjcallbackform .control-group:has(input[type="checkbox"]) a {
	color: var(--bd-accent-dark);
}

.wjcallbackform input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var(--bd-accent-dark);
	cursor: pointer;
}

.wjcallbackform .checkbox label,
.wjcallbackform .controls label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bd-text);
	cursor: pointer;
}

.wjcallbackform .invalid,
.wjcallbackform input.invalid,
.wjcallbackform textarea.invalid { border-color: #c0392b !important; }

/* --- Кнопка -------------------------------------------------------------- */

.wjcallbackform .modal-footer {
	display: block;
	padding: 10px 30px 28px;
	background: none;
	border: 0;
}

.wjcallbackform .modal-footer .btn {
	display: block;
	width: 100%;
	padding: 16px 28px;
	background: var(--bd-accent);
	border: 0;
	border-radius: var(--bd-radius);
	color: var(--bd-dark);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s;
}

.wjcallbackform .modal-footer .btn:hover { background: var(--bd-accent-dark); }

/* --- Сообщение после отправки -------------------------------------------- */

.wjcallbackform .wjcallback-message,
.wjcallbackform .one-click-thankyou {
	padding: 30px;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
}

@media (max-width: 575.98px) {
	.wjcallbackform .modal-header { padding: 22px 20px 16px; }
	.wjcallbackform .modal-body { padding: 20px 20px 4px; }
	.wjcallbackform .modal-footer { padding: 8px 20px 22px; }
	.wjcallbackform .modal-title { font-size: 1.1875rem; }
}




.bd-minicatalog { background: var(--bd-accent); }



/* ==========================================================================
   Блоки категорий каталога на главной
   ========================================================================== */

.bd-catblock {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bd-light);
    border-radius: var(--bd-radius-lg);
    overflow: hidden;
}

.bd-catblock__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bd-catblock__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bd-catblock__icon {
    position: absolute;
    left: 14px;
    bottom: -18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--bd-accent);
    color: var(--bd-dark);
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.bd-catblock__title {
    margin: 28px 18px 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bd-text);
}

.bd-catblock__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 18px 20px;
    flex: 1;
}

.bd-catblock__list li + li {
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.bd-catblock__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--bd-text);
    text-decoration: none;
    font-size: .92rem;
    transition: color .15s;
}

.bd-catblock__list a:hover {
    color: var(--bd-accent-dark);
}

.bd-catblock__list a i {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: var(--bd-accent-dark);
}




/*

.bd-catblock {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bd-dark);
    border-radius: var(--bd-radius-lg);
    overflow: hidden;
}

.bd-catblock__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bd-catblock__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bd-catblock__icon {
    position: absolute;
    left: 14px;
    bottom: -18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--bd-accent);
    color: var(--bd-dark);
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.bd-catblock__title {
    margin: 28px 18px 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.bd-catblock__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 18px 20px;
    flex: 1;
}

.bd-catblock__list li + li {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.bd-catblock__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .92rem;
    transition: color .15s;
}

.bd-catblock__list a:hover {
    color: var(--bd-accent);
}

.bd-catblock__list a i {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: var(--bd-accent);
}

*/






/* ==========================================================================
   Страница контактов
   ========================================================================== */

.bd-contacts__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bd-text);
    margin-bottom: 12px;
}

.bd-contacts__lead {
    color: var(--bd-muted);
    margin-bottom: 28px;
    line-height: 1.5;
}

.bd-contacts__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.bd-contacts__item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.bd-contacts__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--bd-accent);
    color: var(--bd-dark);
    border-radius: 50%;
    font-size: 1rem;
}

.bd-contacts__label {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bd-muted);
    margin-bottom: 4px;
}

.bd-contacts__value {
    display: block;
    font-size: 1.02rem;
    color: var(--bd-text);
    line-height: 1.45;
}

.bd-contacts__value a {
    color: var(--bd-text);
    text-decoration: none;
}

.bd-contacts__value a:hover {
    color: var(--bd-accent-dark);
}

.bd-contacts__messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.bd-contacts__msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}

.bd-contacts__msg--tg { background: #2AABEE; }
.bd-contacts__msg--max { background: var(--bd-accent); color: var(--bd-dark); }

.bd-contacts__requisites {
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-size: .85rem;
    color: var(--bd-muted);
    line-height: 1.6;
}





#WJCForm134 .modal-header { display:none; }