/**
 * Тематические оверрайды поверх верстки из dist/. Сюда складываем правки,
 * которые нужны только в WP-окружении и не могут жить в исходниках dist
 * (dist — финальная верстка, не правится).
 */

/* FacetWP оборачивает шаблон в <div class="facetwp-template">; без этого
   правила сетка .catalog__cards видит обёртку как единственного ребёнка
   и складывает все карточки в одну ячейку. */
.catalog__cards .facetwp-template {
	display: contents;
}

/* Slick: если в слайдере один слайд, скрываем dots и стрелки.
   :nth-child(2) ловит наличие второго слайда; .slick-cloned стоит на
   клонах при infinite — нам не мешают, потому что всегда :nth-child >= 2. */
.slick-slider:not(:has(.slick-slide:nth-child(2))) .slick-dots,
.slick-slider:not(:has(.slick-slide:nth-child(2))) .slick-arrow {
	display: none !important;
}

/* FacetWP-чекбоксы. Markup: <label class="filters__label facetwp-checkbox">
     <span class="checkbox"></span>
     <div class="filters__name">...</div>
   </label>
   span.checkbox получает кастомное оформление через .checkbox + ::before
   из base.css. Состояние «выбран» отслеживает FacetWP через класс .checked
   на label — закрашиваем span gradient'ом. */
.facetwp-checkbox {
	background: none !important;
}
.filters__label.facetwp-checkbox.checked .checkbox {
	background: var(--primary-brand-gradient-red, linear-gradient(90deg, #fd6e70 0.02%, #f4a780 100%));
}
.filters__label.facetwp-checkbox.checked .checkbox::before {
	background: url("../img/icons/check.svg") center center / 14px 14px no-repeat;
	box-shadow: none !important;
}

/* Soft-limit для локаций: 5 первых видны, остальные раскрываются по
   .filters__item-more. JS вешает класс .filters_all на .filters__item-content-wrap
   (catalog_category.js, обработчик уже навешан на DOMReady). */
.filters__item-content-wrap:not(.filters_all) .facetwp-facet-_location > .facetwp-checkbox:nth-child(n+6) {
	display: none;
}

/* Hover на иконках соцсетей — меняет fill у <rect> внутри inline SVG.
   CSS-переменная --social-hover-color задаётся inline-стилем на ссылке
   (из CF-поля hover_color). Если переменная не задана — fill не меняется. */
/* Мега-меню каталога: упаковка колонок сверху вниз, затем вправо.
   В base.css .catalog-menu__container — flex-row, мы переключаем на column-wrap
   с max-height: пункты заполняют первую колонку до достижения предела высоты,
   далее wrap'ятся в следующую колонку справа. align-content: flex-start —
   колонки прижаты к левому краю, без растягивания пустых дорожек. */
.catalog-menu .catalog-menu__container {
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 357px;
	align-content: flex-start;
}

/* Hover на родительской категории в мега-меню — розовый цвет текста + chevron. */
.catalog-menu__submenu-title a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.catalog-menu__submenu-title a svg path {
	transition: stroke 0.2s;
}
.catalog-menu__submenu-title a:hover {
	color: var(--primary-brand-pink, #f00a6e);
}
.catalog-menu__submenu-title a:hover svg path {
	stroke: var(--primary-brand-pink, #f00a6e);
}

/* Hover на иконках соцсетей в шапке/футере/мобильном меню — inline SVG,
   меняем fill у <rect>. .contacts__socials и .suggest__socials выводятся
   через <img>, для них CSS-fill недоступен (img — растровый источник). */
.header__social:hover svg rect,
.footer__social:hover svg rect,
.menu-mob__social:hover svg rect,
.header__socials-drop a:hover svg rect {
	fill: var(--social-hover-color, currentColor);
	transition: fill 0.2s;
}

/* Soft-limit на /pickup/: 6 первых магазинов в каждом городе. Класс
   .pickup__city_open снимает лимит (ставит JS::initPickupShowAll). */
.pickup__city:not(.pickup__city_open) .pickup__items > .store:nth-child(n+7) {
	display: none;
}
.pickup__city.pickup__city_open .pickup__city-more {
	display: none;
}

/* .filters_scroll-wrap::after — fade-градиент внизу скроллящегося контейнера.
   В верстке всегда видим; нам нужно скрывать, если scrollbar нет (последний
   элемент полностью виден). Класс .has-scroll ставит JS (initFiltersScrollIndicator).
   В catalog_category.css правило без !important — этой специфичности достаточно. */
.filters_scroll-wrap:not(.has-scroll)::after {
	display: none;
}

/* FacetWP-slider визуально 1:1 с .range_slider из catalog_category.css.
   ВАЖНО: facetwp/nouislider.css и facetwp/front.css грузятся ПОСЛЕ theme.css
   и перебивают наши правила (height:14px на .noUi-horizontal, 20x20 handle).
   Поэтому везде !important. Возможный refactor — отдельный фасетный CSS-файл
   с поздним приоритетом enqueue. */
.facetwp-slider.noUi-target {
	height: 3px !important;
	background: #dbdee3 !important;
	border-radius: 3px !important;
	margin-top: 7px !important;
	margin-bottom: 7px !important;
	border: none !important;
	width: calc(100% - 20px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-shadow: none !important;
}
.facetwp-slider.noUi-horizontal {
	height: 3px !important;
}
.facetwp-slider.noUi-horizontal .noUi-handle {
	width: 16px !important;
	height: 16px !important;
	top: -8px !important;
	right: -8px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 0 0 2px inset #292a35 !important;
	border: none !important;
	cursor: pointer !important;
}
.facetwp-slider .noUi-handle::before,
.facetwp-slider .noUi-handle::after {
	display: none !important;
}
.facetwp-slider .noUi-connect {
	background: var(--primary-brand-gradient-purple, linear-gradient(90deg, #883be1 0.02%, #ff69a4 100%)) !important;
}
.facetwp-slider-wrap {
	padding-bottom: 0 !important;
}
/* В верстке нет ни label'а с текущим диапазоном, ни reset-кнопки. */
.facetwp-slider-label,
.facetwp-slider-reset {
	display: none !important;
}
/* Контейнер input min/max — стили из catalog_category.css уже стилизуют
   .range-inputs / .range-inputs__sep, мы только вставим разметку через JS. */

/* facetwp_display('facet', '_page'/'_loadmore') возвращает обёртку
   <div class="facetwp-facet facetwp-type-pager">. PHP-фильтр facetwp_facet_html
   (inc/facetwp.php) переписывает содержимое .facetwp-pager в верстковую
   структуру .pagination__btn-prev + ul.pagination__list + .pagination__btn-next.
   display:contents растворяет обёртки — prev/ul/next становятся
   прямыми flex-детьми .pagination. */
.facetwp-facet-_page,
.facetwp-facet-_loadmore,
.catalog__pagination .facetwp-pager {
	display: contents;
}

/* dist-CSS объявляет display:flex на .quick__product-quant, .panel-prod__add,
   .notice — это перебивает HTML5-атрибут hidden (оба имеют одинаковую
   специфичность 0-1-0, последнее объявление побеждает). Добавляем правила
   с более высокой специфичностью (0-2-0) + !important — чтобы hidden работал
   в любом контексте. */
.quick__product-quant[hidden],
.panel-prod__add[hidden],
.notice[hidden],
.modal[hidden],
.favorites__top-right[hidden],
[data-recover-field][hidden],
[data-shop-avail][hidden] {
	display: none !important;
}

/* Toast .add-fav (избранное / stock-limit). В base.css mobile/tablet media queries
   ставят z-index: 2 / 4, что меньше .modal (z-index: 1000) — на мобиле тост
   уезжает под открытую модалку. Поднимаем выше модалок. */
.add-fav {
	z-index: 1100 !important;
}

/* Бейдж наличия товаров корзины в попапе выбора магазина (cart-city). Элемента
   нет в верстке — рендерится из cart-city.php и обновляется JS. Цветной маркер +
   текст «Все / Не все / Нет в наличии». */
.map-shop__avail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 130%;
}
.map-shop__avail::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.map-shop__avail_all  { color: #1faa53; }
.map-shop__avail_some { color: #e8920c; }
.map-shop__avail_none { color: var(--secondary-ui-dark-grey, #7d7e88); }

/* На мобилке корзина даёт горизонтальный «свайп с откатом» (touch-pan по body,
   возможно из-за стэкинг-контекста с .cart-card или slick на recommendations).
   touch-action: pan-y — browser-level разрешает только вертикальный pan на body;
   slick-сладеры внутри сохраняют свой touch (у них default touch-action на
   .slick-list / .slick-track). overflow-x: hidden — safety-net на случай если
   какой-то child всё-таки вылезет за viewport. */
@media (max-width: 790px) {
	body.woocommerce-cart {
		overflow-x: hidden;
		touch-action: pan-y;
	}
}

/* cart.css (dist) для cart-страницы при ≤900px обнуляет горизонтальный padding
   на .modal__container_map (там была кастомная вёрстка choose-store без отступов).
   У нас в этой модалке грузится через AJAX `.map-avail__*` контент — нужен
   полный padding 16px со всех сторон, как на single-product. !important —
   потому что cart.css загружается ПОСЛЕ theme.css. */
@media (max-width: 900px) {
	body.woocommerce-cart .modal__container_map {
		padding: 16px !important;
	}
}

/* Sort: FacetWP рендерит <select> без классов внутри .facetwp-facet-_sort.
   JS добавляет .catalog__sorting.custom-select и инициализирует niceSelect.
   Враппер .facetwp-facet-_sort не должен растягиваться — min-width 0,
   размер задаёт сам .nice-select (от .custom-select). */
.catalog__sorting-wrap .facetwp-facet-_sort {
	min-width: 0;
}

.promocode__error {
	color: var(--primary-brand-red, #fd6f70);
	font-size: 13px;
	font-weight: 400;
	line-height: 130%;
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(253, 111, 112, 0.08);
	border: 1px solid rgba(253, 111, 112, 0.25);
}

/* Home tabs: блокировка таба во время AJAX-запроса (см. theme.js::initHomeTabs). */
.tabs-basic[data-tabs-section] .tab-basic.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Auth-формы. Состояния .field_error и .form__error / .form__error-list
   стилизованы версткой; здесь только loading-кнопка, success-state recover'а
   и фикс z-index air-datepicker, чтобы dropdown даты не уходил под модалку. */
button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* CTA «Уже есть аккаунт? Войти» под ошибкой «телефон/email уже зарегистрирован».
   Рендерится JS-ом (theme.js::renderErrors) перед кнопкой submit. */
.form__login-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	line-height: 130%;
	margin-bottom: 4px;
}
.form__login-hint-btn {
	color: var(--primary-brand-pink, #f00a6e);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.form__login-hint-btn:hover {
	text-decoration: none;
}

/* WC notices override: success/info — компактный inline-стиль рядом с
   .form__error-list. Без margin: списки рендерятся внутри
   .account__data-fields / .account__pass-fields, которые flex column gap:20px —
   отступ от полей и до submit-блока обеспечивает flex gap. */
.form__success {
	padding: 10px 14px;
	background: rgba(76, 175, 80, 0.08);
	border: 1px solid rgba(76, 175, 80, 0.3);
	border-radius: 8px;
	color: #2e7d32;
	font-size: 13px;
	line-height: 130%;
	margin-bottom: 4px;
}
.form__notice {
	padding: 10px 14px;
	background: rgba(33, 150, 243, 0.08);
	border: 1px solid rgba(33, 150, 243, 0.3);
	border-radius: 8px;
	color: #1565c0;
	font-size: 13px;
	line-height: 130%;
	margin-bottom: 4px;
}
.air-datepicker.-active- {
	z-index: 99999;
}

/* Датапикер даты рождения (регистрация/ЛК): курсор-поинтер на горизонтальной
   ленте годов .datepicker-years (кнопки годов уже pointer в base.css, но пустая
   область ленты/прокрутки показывала дефолтный курсор). */
.datepicker-years {
	cursor: pointer;
}

/* Карточка товара — out-of-stock state. Лейбл в .card__labels (рядом с
   «Новинка»/«ХИТ»). Базовая геометрия (h:19px, radius:6px, padding:0 6px,
   font 10-11px) приходит из base.css::.card__label — здесь только цвета. */
.card__label_outofstock {
	border: 1px solid var(--secondary-ui-dark-grey, #7d7e88);
	color: var(--secondary-ui-dark-grey, #7d7e88);
	background: var(--secondary-ui-white, #fff);
	font-size: 11px;
	font-weight: 500;
	line-height: 149%;
}
.card__add[disabled] {
	pointer-events: none;
	background: var(--secondary-ui-light-grey, #f3f4f6) !important;
	color: var(--secondary-ui-dark-grey, #7d7e88) !important;
	cursor: not-allowed;
}
.card__add[disabled] .icon {
	opacity: 0.5;
}
.card__add[disabled]::before {
	display: none;
}

/* .card_horiz: кнопка избранного должна занимать ту же ширину, что и .card__add
   над ней, и не «прыгать» при toggle текста «В избранное» ↔ «Удалить».
   Оба лейбла рендерятся одновременно и стэкаются в одной grid-ячейке —
   это резервирует ширину под самый длинный текст. .fav-active переключает
   видимость нужного варианта. */
.card_horiz .card__fav-fill {
	width: 100%;
	justify-content: center;
}
.card_horiz .card__fav-fill .card__fav-label {
	display: grid;
}
.card_horiz .card__fav-fill .card__fav-label > span {
	grid-area: 1 / 1;
	transition: none;
}
.card_horiz .card__fav-fill .card__fav-label__remove {
	visibility: hidden;
}
.card_horiz .card__fav-fill.fav-active .card__fav-label__add {
	visibility: hidden;
}
.card_horiz .card__fav-fill.fav-active .card__fav-label__remove {
	visibility: visible;
}

/* /my-account/orders/ — пустой таб (есть заказы, но в выбранной категории нет).
   Показывается между табами и пагинацией; табы остаются доступны для возврата. */
.orders__filter-empty {
	padding: 32px 16px;
	text-align: center;
	color: #7d7e88;
	font-size: 14px;
	line-height: 130%;
	background: #f7f7f9;
	border-radius: 12px;
	margin-top: 16px;
}
.orders__filter-empty a {
	color: var(--primary-brand-pink, #f00a6e);
	margin-left: 6px;
}
.orders__filter-empty a:hover {
	text-decoration: underline;
}

/* Favorites: переключение state ready / empty / loading. Все три ветки
   в DOM одновременно, CSS прячет неактивные. */
.favorites[data-favorites-state="ready"]   .favorites__loading,
.favorites[data-favorites-state="ready"]   .favorites__empty,
.favorites[data-favorites-state="empty"]   .favorites__loading,
.favorites[data-favorites-state="empty"]   .favorites__wrap,
.favorites[data-favorites-state="loading"] .favorites__wrap,
.favorites[data-favorites-state="loading"] .favorites__empty {
	display: none;
}

.favorites__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 80px 16px;
	color: #7d7e88;
}
.favorites__loading-spinner {
	width: 48px;
	height: 48px;
	border: 3px solid #ececec;
	border-top-color: #f00a6e;
	border-radius: 50%;
	animation: favorites-spin 0.8s linear infinite;
}
.favorites__loading-text {
	font-size: 14px;
}
@keyframes favorites-spin {
	to { transform: rotate(360deg); }
}

/* Рекомендации под /favorites/:
   .interest_items («Могут заинтересовать») — видна и в ready, и в empty.
   .popular_items («Популярные товары»)     — скрыта всегда (одного слайдера
   рекомендаций достаточно).
   Во время loading обе скрыты. */
.favorites                                 ~ .popular_items,
.favorites[data-favorites-state="loading"] ~ .interest_items {
	display: none;
}

/* Filter «Со скидкой»: скрывает карточки без sale-цены. !important — потому
   что в base.css на .card стоит `display: flex !important`. */
.favorites[data-favorites-filter="discount"] .catalog__cards .card[data-on-sale="0"] {
	display: none !important;
}

/* Bulk-select на /favorites/: класс .select ставится на саму кнопку .card__fav
   (по верстке favorites.html). Стилизация — из dist/favorites.css. */

/* ===========================================================================
   Полноэкранный AJAX-поиск (.modal[data-modal="search"]).
   Дизайн от 2026-05-18: docs/plans/2026-05-18-full-screen-search-design.md.
   В верстке этих классов нет — стили целиком наши.
   =========================================================================== */
.modal__container_search {
	width: 100%;
	max-width: 100%;
	height: 100vh;
	min-height: 100vh;
	border-radius: 0;
	padding: 80px 20px 40px;
	overflow-y: auto;
}
.modal__container_search .close-modal {
	border: 1px solid #f3f4f6;
}

/* На мобиле viewport «плывёт» от URL-bar и soft-клавиатуры; .close-modal
   как absolute относительно контейнера может уезжать выше viewport'а.
   Фиксируем относительно viewport — всегда видим в правом-верхнем углу. */
@media (max-width: 768px) {
	.modal__container_search .close-modal {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2;
		background: #fff;
	}
}
.search-modal__content {
	max-width: 1100px;
	margin: 0 auto;
}
.search-modal__form {
	margin-bottom: 24px;
}
.search-modal__field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	background: #f3f4f6;
	border-radius: 12px;
	height: 56px;
}
.search-modal__icon { flex-shrink: 0; }
.search-modal__input {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	font-size: 16px;
	outline: none;
}
.search-modal__voice,
.search-modal__clear {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 8px;
}
/* class-only селектор перебивает UA [hidden]{display:none} — нужно явное правило. */
.search-modal__voice[hidden],
.search-modal__clear[hidden] { display: none; }
.search-modal__voice:hover,
.search-modal__clear:hover { background: rgba(0,0,0,0.05); }
.search-modal__voice.is-listening {
	background: var(--primary-brand-pink, #f00a6e);
}
.search-modal__voice.is-listening svg path,
.search-modal__voice.is-listening svg rect { stroke: #fff; }

.search-modal__hint,
.search-modal__empty {
	text-align: center;
	color: #7D7E88;
	padding: 60px 0;
	font-size: 16px;
}

/* История запросов (localStorage). Показывается при пустом инпуте,
   сразу под формой поиска (над hint'ом). */
.search-modal__history { margin-bottom: 24px; }
.search-modal__history[hidden] { display: none; }
.search-modal__history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.search-modal__history-title {
	font-size: 13px;
	font-weight: 600;
	color: #292A35;
}
.search-modal__history-clear {
	background: none;
	border: none;
	color: #7D7E88;
	font-size: 12px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}
.search-modal__history-clear:hover { color: var(--primary-brand-pink, #f00a6e); }
.search-modal__history-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.search-history-chip {
	display: inline-flex;
	align-items: center;
	background: #f3f4f6;
	border-radius: 16px;
	overflow: hidden;
	transition: background 0.15s;
}
.search-history-chip:hover { background: #e5e7eb; }
.search-history-chip__use {
	background: none;
	border: none;
	padding: 6px 4px 6px 12px;
	font-size: 13px;
	color: #292A35;
	cursor: pointer;
}
.search-history-chip__rm {
	background: none;
	border: none;
	padding: 4px 10px 4px 4px;
	font-size: 16px;
	line-height: 1;
	color: #7D7E88;
	cursor: pointer;
}
.search-history-chip__rm:hover { color: var(--primary-brand-pink, #f00a6e); }

.search-modal__tabs-wrap {
	position: relative;
	margin-bottom: 24px;
	border-bottom: 1px solid #f3f4f6;
	padding: 0 40px;  /* Место для Slick-стрелок по краям */
}
.search-modal__tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.search-modal__tabs::-webkit-scrollbar { display: none; }
/* Slick: добавляет .slick-list/.slick-track. Tabs становятся слайдами с variableWidth. */
.search-modal__tabs.slick-initialized {
	display: block;
	overflow: visible;
}
.search-modal__tabs .slick-track { display: flex !important; gap: 4px; }
.search-modal__tabs-wrap .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: none;
	background: #f3f4f6;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0;
	z-index: 2;
}
.search-modal__tabs-wrap .slick-prev { left: -40px; }
.search-modal__tabs-wrap .slick-next { right: -40px; }
.search-modal__tabs-wrap .slick-arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	background: center/12px no-repeat;
}
.search-modal__tabs-wrap .slick-prev::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M7.5 9L4.5 6L7.5 3" stroke="%23292A35" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'); }
.search-modal__tabs-wrap .slick-next::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M4.5 9L7.5 6L4.5 3" stroke="%23292A35" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'); }
.search-modal__tabs-wrap .slick-disabled { opacity: 0.4; cursor: default; }
.search-tab {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #49536C;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.search-tab span { color: #7D7E88; font-weight: 400; }
.search-tab:hover { color: #292A35; }
.search-tab.active {
	color: #292A35;
	border-bottom-color: var(--primary-brand-pink, #f00a6e);
}

.search-cat {
	margin-bottom: 32px;
}
.search-cat__title {
	display: block;
	background: none;
	border: none;
	padding: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	color: #292A35;
	cursor: pointer;
	text-align: left;
}
.search-cat__title:hover { color: var(--primary-brand-pink, #f00a6e); }
.search-cat__title span { color: #7D7E88; font-weight: 400; }
/* Pane «Все» — сетка 3 колонок, каждая .search-cat — ячейка.
   Внутри .search-cat товары идут вертикально компактным списком. */
.search-modal__pane[data-search-pane="all"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
/* [hidden] специфичность 0,1,0 проигрывает нашему 0,2,0 из data-attribute
   селектора → нужен явный override для скрытия pane'ов. */
.search-modal__pane[hidden] { display: none; }
.search-modal__cat-title {
	font-size: 18px;
	font-weight: 600;
	color: #292A35;
	margin: 0 0 16px;
}
@media (max-width: 1150px) {
	.search-modal__pane[data-search-pane="all"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
	.search-modal__pane[data-search-pane="all"] { grid-template-columns: 1fr; }
}
.search-cat {
	display: flex;
	flex-direction: column;
}
.search-cat__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Pane «category» — сетка карточек 3 кол. под пагинацию. */
.search-modal__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 1150px) {
	.search-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
	.search-modal__grid { grid-template-columns: 1fr; }
}

.search-cat__all {
	margin-top: 12px;
	align-self: flex-start;
	background: #f3f4f6;
	border: none;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.search-cat__all:hover { background: #e5e7eb; }
.search-cat__all span { color: #7D7E88; }

/* Минимальная search-карточка: горизонтальная, без слайдера фото. */
.search-card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 6px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: 0.2s background;
}
.search-card:hover { background: #f3f4f6; }
.search-card__img {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	border-radius: 6px;
	overflow: hidden;
}
.search-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.search-card__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.search-card__name {
	font-size: 13px;
	line-height: 1.3;
	color: #292A35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.search-card__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-brand-pink, #f00a6e);
}
.search-card__price .price { display: inline; }
.search-card__price del { color: #7D7E88; font-weight: 400; margin-right: 4px; }
.search-card__stock {
	font-size: 11px;
	margin-top: 2px;
}
.search-card__stock.is-in  { color: #2E8B57; }
.search-card__stock.is-out { color: #c43; }

.search-modal__pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 32px;
}
.search-modal__pagination:empty { display: none; }
.search-page {
	background: none;
	border: 1px solid #f3f4f6;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
}
.search-page:hover:not([disabled]) { border-color: var(--primary-brand-pink, #f00a6e); }
.search-page.active {
	background: var(--primary-brand-pink, #f00a6e);
	color: #fff;
	border-color: transparent;
}
.search-page[disabled] { opacity: 0.4; cursor: default; }

.search-modal__loader {
	display: flex;
	justify-content: center;
	padding: 30px 0;
}
/* [hidden] на лоадере — наш display: flex перебивал глобальный UA-стиль
   [hidden] { display: none }. Спецификация class+attr выигрывает у class alone. */
.search-modal__loader[hidden] { display: none; }
.search-modal__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #f3f4f6;
	border-top-color: var(--primary-brand-pink, #f00a6e);
	border-radius: 50%;
	animation: search-spin 0.8s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }

/* Рекомендации в пустых состояниях поиска (популярные категории + товары).
   Показываются при пустом вводе и при «ничего не найдено». Сетка товаров
   переиспользует .search-modal__grid (3 кол. с responsive выше). */
.search-modal__recommend[hidden],
.search-modal__rec-cats[hidden],
.search-modal__rec-products[hidden] { display: none; }
.search-modal__recommend { margin-top: 8px; }
.search-modal__rec-cats { margin-bottom: 32px; }
.search-modal__rec-title {
	font-size: 18px;
	font-weight: 600;
	color: #292A35;
	margin: 0 0 16px;
}
.search-modal__rec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.search-rec-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: #f3f4f6;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 500;
	color: #292A35;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.search-rec-chip:hover {
	background: var(--primary-brand-pink, #f00a6e);
	color: #fff;
}

/* Sidebar fav-кнопка на странице товара — active-state красит сердечко
   в brand-pink (по аналогии с .panel-prod__fav, у которой gradient на mask-icon).
   В .product__icon-btn--favorite сердечко — inline SVG <path fill="#7D7E88">,
   CSS перебивает атрибутный fill без !important. */
.product__icon-btn--favorite svg path,
.product__icon-btn--favorite svg {
	transition: fill 0.2s, opacity 0.2s;
}
.product__icon-btn--favorite.fav-active svg,
.product__icon-btn--favorite:hover svg {
	opacity: 1;
}
.product__icon-btn--favorite.fav-active svg path,
.product__icon-btn--favorite:hover svg path {
	fill: var(--primary-brand-pink, #f00a6e);
}

/* Toast для share-кнопок (initBlogShare → копирование ссылки). */
.vp-share-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translate(-50%, 20px);
	background: #292A35;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 10000;
	pointer-events: none;
	white-space: nowrap;
}
.vp-share-toast--show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Overlay для массового удаления товаров из корзины. Появляется поверх
   .cart на время AJAX'ов «убрать выбранные». */
.cart { position: relative; }
.cart__overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	z-index: 10;
}
.cart__overlay.is-active { display: flex; }
.cart__overlay-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #f3f4f6;
	border-top-color: var(--primary-brand-pink, #f00a6e);
	border-radius: 50%;
	animation: cart-spin 0.8s linear infinite;
}
@keyframes cart-spin { to { transform: rotate(360deg); } }

/* Loading/error state в модалке «Наличие в магазинах», пока AJAX тянет
   контент для cart-card-кнопки `.cart-card__avail-value`. */
.map-avail__loading {
	padding: 40px;
	text-align: center;
	font-size: 14px;
	color: #888;
}

/* FacetWP loading-state на /catalog/<cat>/ — чтобы карточки не «прыгали»
   при смене сорта/фильтра. JS на facetwp-refresh лочит min-height и ставит
   .is-loading; на facetwp-loaded убирает обратно. */
.catalog__cards-wrap {
	position: relative;
}
.catalog__cards.is-loading {
	visibility: hidden;
	pointer-events: none;
}
.catalog__cards-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
	background: #fff;
	pointer-events: none;
}
.catalog__cards-overlay.is-active {
	display: flex;
}
.catalog__cards-overlay::before {
	content: '';
	width: 42px;
	height: 42px;
	border: 3px solid rgba(40, 42, 53, 0.12);
	border-top-color: var(--primary-brand-pink, #f00a6e);
	border-radius: 50%;
	animation: vapeluxe-spin 0.8s linear infinite;
}
@keyframes vapeluxe-spin {
	to { transform: rotate(360deg); }
}

/* .catalog__category-slider — slick меняет верстку при init (grid → block,
   margin карточек 16px → 8px, перемещает arrow-кнопки). Чтобы пользователь
   не видел переходного состояния — прячем весь блок .catalog__category до
   `.slick-initialized` и показываем overlay со спиннером поверх.

   `::before` — белая заливка (overlay), `::after` — spinner (анимация
   vapeluxe-spin определена выше в этом файле). Дети блока невидимы через
   visibility: hidden, но место под них зарезервировано grid-layout'ом из
   catalog_category.css. Когда slick добавляет `.slick-initialized` —
   :has() перестаёт совпадать, overlay/спиннер пропадают, дети становятся
   видимыми. */
.catalog__category {
	position: relative;
}
.catalog__category:not(.is-ready) > * {
	visibility: hidden;
}
.catalog__category:not(.is-ready)::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(40, 42, 53, 0.12);
	border-top-color: var(--primary-brand-pink, #f00a6e);
	border-radius: 50%;
	animation: vapeluxe-spin 0.8s linear infinite;
}

/* Сердечко в .cart-card__fav на странице корзины: при .fav-active меняем
   mask-image fill на бренд-градиент (как у .card__fav.fav-active в base.css).
   В dist cart.css есть только базовый стиль .cart-card__fav .icon без
   active-варианта — поэтому добавляем здесь. */
.cart-card__fav.fav-active .icon {
	opacity: 1;
	background: radial-gradient(ellipse 80% 68% at 50% 88%, #fdd796 0%, rgba(255, 147, 83, 0) 100%), linear-gradient(135deg, #883be1, #ff69a4);
}

/* Модалка [data-modal="auth-block"] — в верстке (account_orders_empty.html:1962)
   .header__auth-block рендерится напрямую внутри .modal, без .modal__container.
   Базовое правило .header__auth-block имеет position:absolute + top:calc(100%-6px),
   рассчитанное на dropdown под .header__auth (relative-parent в шапке). Внутри
   .modal (position:fixed, full-viewport) это даёт top ≈ 100vh − 6px — блок
   припирается к нижнему краю экрана, частично за пределами viewport.
   Сбрасываем абсолютное позиционирование — блок остаётся в flex-flow .modal
   и центрируется штатным align/justify-center. */
.modal[data-modal="auth-block"] .header__auth-block {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
}

/* SEO-описание категории (parts/catalog/category-descr.php) — на проде часто
   используется <blockquote> для дисклеймеров 15-ФЗ. Брендируем — accent
   border-left, светло-серый фон, italic для отличия от обычного текста. */
.descr-page__text blockquote {
	margin: 20px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--primary-brand-pink, #f00a6e);
	background: var(--secondary-ui-light-grey, #f3f4f6);
	border-radius: 0 8px 8px 0;
	color: var(--secondary-ui-dark-grey, #7d7e88);
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
}
.descr-page__text blockquote p {
	margin: 0 0 8px 0;
}
.descr-page__text blockquote p:last-child {
	margin-bottom: 0;
}

/* Кликабельные значения атрибута pa_vkus в характеристиках товара. Ссылки
   ведут на категорию товара с FacetWP-фильтром ?_vkus=<slug>. Стилизуем
   как обычный текст с brand-accent цветом и underline-decoration на hover. */
.product__spec-value a {
	color: var(--primary-brand-pink, #f00a6e);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.product__spec-value a:hover {
	border-bottom-color: #f00a6e;
}

/* Стили balloon'а Yandex Maps (.marker-container) — глобально, чтобы работали
   на checkout/view-order и других страницах где модалка map-avail открывается,
   но contacts.css не подгружен (он только на /contacts/, /pickup/). Источник —
   contacts.css:167+ скопирован 1:1, чтобы единое поведение через сайт. */
.marker-container {
	border-radius: 12px;
	background: var(--secondary-ui-white, #fff);
	width: 260px;
	padding: 16px;
}
.marker-container * {
	font-family: "Golos Text" !important;
}
.marker__title {
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 135%;
	margin-bottom: 2px;
}
.marker__shedule .store__time {
	margin-bottom: 2px;
	gap: 9px;
}
.marker__shedule .store__time::after {
	display: none;
}
.marker__shedule {
	margin-bottom: 13px;
}
.marker__btn {
	margin-top: 13px;
	width: 100%;
}

[data-pickup-map] .ymaps-2-1-79-balloon__layout {
	border-radius: 12px;
	box-shadow: 0 4px 35px 0 rgba(0, 0, 0, 0.25);
	overflow: hidden;
}
[data-pickup-map] .ymaps-2-1-79-balloon__close + .ymaps-2-1-79-balloon__content {
	padding: 0;
	margin-right: 0 !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon {
	box-shadow: none !important;
	top: -192px !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon__close-button {
	background-size: 50%;
	width: 12px !important;
	height: 12px !important;
	margin-top: 10px;
	margin-right: 10px;
	opacity: 0.5 !important;
	background: url("../img/icons/close.svg") center center/12px 12px no-repeat !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon__close-button:hover {
	opacity: 1 !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon-content__footer {
	display: none !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon__tail {
	position: absolute !important;
	right: 3px;
	top: 76px;
	left: auto !important;
}
[data-pickup-map] .ymaps-2-1-79-balloon-content__header {
	margin: 0 !important;
}
[data-pickup-map] .ymaps-2-1-79-ground-pane {
	filter: grayscale(1);
}

/* .catalog-subcategory__list — soft-limit 3 строки, кнопка «Показать ещё».
   initSubcategoryListExpand (theme.js) измеряет offsetTop items, добавляет
   .catalog-subcategory_hidden-row на 4+ строки. .catalog-subcategory__toggle
   создаётся динамически рядом со списком. Стиль кнопки — как .filters__item-more. */
/* Specificity-bump через двойной класс — иначе .catalog-subcategory{display:flex}
   из catalog_category.css (грузится после theme.css) переопределяет display:none. */
.catalog-subcategory.catalog-subcategory_hidden-row {
	display: none;
}
.catalog-subcategory__toggle {
	color: var(--primary-brand-pink, #f00a6e);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%;
	border-bottom: 1px dashed rgba(240, 10, 110, 0.3);
	margin-top: 10px;
	background: none;
	padding: 0;
	cursor: pointer;
}

@media (max-width: 790px) {
	.marker-container {
		display: flex;
		flex-direction: column;
		align-items: start;
	}
	.marker-container .store__phone {
		order: 2;
		margin-bottom: 4px;
	}
	.marker__title {
		order: 1;
	}
	.marker__shedule {
		order: 3;
		margin-top: 4px;
		margin-bottom: 13px;
	}
	.marker__shedule .store__time {
		margin-bottom: 4px;
		gap: 9px;
	}
	.marker__btn {
		margin-top: 0;
		width: 100%;
		order: 4;
	}
}

/* .quick__product-stores в модалках add-cart / quick-order — кликабельный
   триггер map-avail (как .cart-card__avail-value в корзине). Разметка сменена
   с <div> на <button>, поэтому сбрасываем дефолтные стили кнопки (фон, шрифт,
   appearance); геометрия и dashed-border берутся из base.css. Hover — цвет и
   рамка в brand-pink, 1:1 с .cart-card__avail-value:hover. */
button.quick__product-stores {
	background: none;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
button.quick__product-stores:hover {
	color: var(--primary-brand-pink, #f00a6e);
	border-color: var(--primary-brand-pink, #f00a6e);
}

/* Счётчик-бейдж избранного. Используется в footer popup account-menu-pop
   (рендерится глобально из footer.php) + в myaccount/navigation.php. Раньше
   жил в account.css — на не-account страницах не подгружался → unstyled. */
.link-fav__quant {
	color: var(--UI-Colors-White, #fff);
	text-align: center;
	font-family: Inter;
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	border-radius: 900px;
	background: var(--primary-brand-pink, #f00a6e);
	display: flex;
	min-width: 17px;
	height: 17px;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

/* Чипы-фильтры в шапке категории используют разметку/стили подкатегорий
   (.catalog-subcategory). Скрываем чипы со значением 0 товаров в категории
   (is-empty проставляет сервер по статичному категорийному счётчику —
   vapeluxe_render_cat_quick_filters). */
.catalog-subcategory.is-empty {
	display: none;
}

/* Фото магазина — авто-высота (сохранение пропорций). */
.store__img {
	height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Welcome-модалка (анонс редизайна, parts/modals/welcome.php).
   Визуально повторяет блок .product__help: персиковая карточка #fff3ee.
   Кнопка — дубль вида .product__btn--consult (его стили в page-specific
   product.css, поэтому здесь повторены, чтобы работали глобально).
   ───────────────────────────────────────────────────────────────────────── */
.modal__container_welcome {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 18.41%, #ffeaf7 99.91%), #fff5fc;
	max-width: 440px;
	width: 100%;
}

.modal__container_welcome .close-modal {
	border-bottom: 1px solid #f00d70;
    border-left: 1px solid #f00d70;
}
.modal__container_welcome .close-modal .icon {
	background-color: #f00d70;
}
.modal__container_welcome .close-modal:hover {
	background-color: #f00d70;
}
.modal__container_welcome .close-modal:hover .icon {
	background-color: #FFFFFF;
}

.welcome {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	/* запас справа, чтобы заголовок не наезжал на .close-modal */
	padding-right: 28px;
}

/* Декоративный знак вопроса — как .product__help-icon: снизу-справа, за текстом.
   Позиционируется относительно .modal__container_welcome. */
.welcome__icon {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 130px;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.welcome__title,
.welcome__text,
.welcome__btn {
	position: relative;
	z-index: 1;
}

.welcome__title {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
}

.welcome__text {
	font-size: 15px;
	line-height: 1.5;
	max-width: 290px;
}

/* Кнопка как .product__btn--consult: градиентная рамка (.btn-border-gr) +
   розовый текст. Фон белый (на персиковом фоне модалки контрастнее). */
.welcome__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	margin-top: 4px;
	padding: 13px 22px;
	border-radius: 12px;
	/* фон под цвет модалки (#fff3ee), виден только градиентный бордер — как .product__btn--consult */
	background: transparent;
	border: 1px solid #f00a6e;
	color: #f00a6e;
	font-size: 14px;
	font-weight: 600;
	line-height: 130%;
}

.welcome__btn:hover {
	border-color: transparent;
}

.welcome__btn span {
	color: #f00a6e;
}

@media (max-width: 575px) {
	.modal__container_welcome {
		width: calc(100vw - 28px);
	}

	.welcome__title {
		font-size: 19px;
	}
}

/* Заголовки h3 в тексте политики/соглашения — 20px (вместо дистовых 28px). */
.policy__content h3 {
	font-size: 20px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Блюр превью товара для гостей (галочка vapeluxe_blur_for_guests на товаре
   или категории). В компактных местах — модалки add-cart/quick-order,
   sticky-панель, корзина, результаты поиска, уведомление избранного —
   показываем РЕАЛЬНОЕ фото размытым (а не плейсхолдер). Класс .card__img_blur
   вешается на <img> (PHP — vapeluxe_blur_img_class(); JS — по data-product-blurred).
   scale + overflow на контейнере прячут размытые края.
   ───────────────────────────────────────────────────────────────────────── */
.card__img_blur {
	filter: blur(18px);
}
.search-card__img .card__img_blur {
	filter: blur(4px);
}
.panel-prod__img .card__img_blur {
	filter: blur(8px);
}
/* ─────────────────────────────────────────────────────────────────────────
   Нижний отступ каталога/бренда, когда «Недавно просмотренные» пусты.
   .promo-block_category by design имеет padding-bottom: 0 (см. catalog_category.css)
   и рассчитывает, что следующий блок (.descr-page или .views) даст отступ снизу.
   Но recently-viewed (.views) при отсутствии товаров стоит hidden (display:none),
   а на странице бренда descr-блока нет вовсе — тогда promo-block прилипает к подвалу.
   Если непосредственно за promo-block идёт скрытый .views — возвращаем нижний
   отступ (значения 1:1 с padding-bottom у .views). Реагирует динамически: у гостя
   JS снимает hidden после загрузки из localStorage → отступ убирается.
   (.descr-page фиксить не нужно — у него уже есть собственный padding-bottom.)
   ───────────────────────────────────────────────────────────────────────── */
.promo-block_category:has(+ .views[hidden]) {
	padding-bottom: 60px;
}
@media (max-width: 576px) {
	.promo-block_category:has(+ .views[hidden]) {
		padding-bottom: 40px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Кредит разработчика в подвале. .footer__copyright обёрнут в
   .footer__copyright-wrap, под копирайтом — «Разработка сайта ReadyCode».
   ───────────────────────────────────────────────────────────────────────── */
.footer__developer {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 140%;
	color: var(--secondary-ui-dark-grey, #7d7e88);
}
.footer__developer a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: border-color 0.2s;
}
.footer__developer a:hover {
	border-bottom-color: #fff;
}
@media (max-width: 1150px) {
	/* Внешний отступ блока берёт на себя обёртка: в base.css margin-bottom стоял
	   на .footer__copyright, но теперь он внутри обёртки и разрывал бы копирайт
	   и кредит. */
	.footer__copyright-wrap .footer__copyright {
		margin-bottom: 0;
	}
	.footer__copyright-wrap {
		margin-bottom: 10px;
	}
}
@media (max-width: 576px) {
	.footer__copyright-wrap {
		text-align: center;
	}
}