/*
 * WonderBaby — редизайн каталога по образцу крупных fashion-ритейлеров
 * (референс: Crockid). См. WONDERBABY_CATALOG_REDESIGN.md за обоснование
 * каждого решения (какие фильтры реальны, откуда пороги цен и т.п.).
 *
 * Файл загружается САЙТ-ШИРОКО (не только на /shop/ и архивах) — найдено
 * 2026-08-07: те же сетки ul.products рендерятся и через шорткод
 * [products] на обычных страницах (например «Футболки для мальчиков»),
 * куда прежняя условная загрузка по is_shop()/is_product_taxonomy() не
 * доходила, и карточка там оставалась нестилизованной. Правила панели
 * фильтров/сайдбара ниже безвредны на остальных страницах — держатся на
 * классах .wbcro-filterbar/#secondary, которых там просто нет.
 */

/* ===== Бейдж скидки — поверх фото, верхний правый угол =====
 * По умолчанию Storefront уже даёт .onsale{top:0;right:0}, но относительно
 * ближайшего спозиционированного предка — им может оказаться сам <li>
 * (с учётом padding карточки), из-за чего бейдж визуально «отступает» от
 * фото. Явно назначаем позиционирование от ссылки-обёртки над самим фото. */
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-loop-product__link {
	position: relative;
	display: block;
}
ul.products li.product .onsale {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	min-height: 0;
	min-width: 0;
	border-radius: 4px !important;
	padding: 4px 8px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 700;
	z-index: 2;
	/* Часть фото каталога имеет свою вёрстку прямо в картинке (цветные
	 * кружки-образцы, плашки "3 шт" и т.п. — так подготовлены исходные
	 * фото, не наш код). Тень + белая обводка не дают бейджу "сливаться"
	 * с этими элементами фото — читается как отдельный слой поверх, а
	 * не часть композиции картинки, даже если снизу что-то есть. */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	border: 1.5px solid #fff;
	/* Более спокойный цвет по решению пользователя (2026-08-07) — приглушённый
	 * терракотовый вместо яркого кораллового var(--wb-discount). !important
	 * обязателен: у style.css свой .onsale{background-color:...!important}. */
	background-color: #b8574c !important;
}
ul.products li.product .wbcro-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
}
/* Если товар одновременно "Хит"/"Новинка" и по акции — бейджи на разных
 * углах (см. class-cro-badges.php), не перекрываются. */

/* ===== Горизонтальная панель фильтров над сеткой ===== */
.wbcro-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--wb-border, #e3e3e4);
}
.wbcro-filterbar__form {
	margin: 0;
}
.wbcro-filterbar__select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236c6c6c'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--wb-border, #e3e3e4);
	border-radius: 20px;
	padding: 8px 32px 8px 14px;
	font-size: 14px;
	font-family: var(--wb-font);
	color: var(--wb-text-primary, #191919);
	cursor: pointer;
	max-width: 180px;
}
.wbcro-filterbar__select:hover {
	border-color: var(--wb-accent-warm, #e2a330);
}
.wbcro-filterbar__link {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--wb-text-primary, #191919);
	text-decoration: none;
}
.wbcro-filterbar__link:hover {
	border-color: var(--wb-border, #e3e3e4);
}
.wbcro-filterbar__link--sale {
	color: var(--wb-discount, #f8604a);
}

/* ===== Сайдбар каталога ===== */
.wbcro-reset-filters {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wb-discount, #f8604a);
	text-decoration: none;
}
.wbcro-reset-filters:hover {
	text-decoration: underline;
}
.wbcro-quick-prices {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
	font-size: 14px;
}
.wbcro-quick-prices a {
	color: var(--wb-text-primary, #191919);
	text-decoration: none;
}
.wbcro-quick-prices a:hover {
	color: var(--wb-accent-warm, #e2a330);
}

/* Компактизация родных виджетов фильтра под общий стиль колонки */
#secondary .widget,
.widget-area .widget {
	margin-bottom: 26px;
}
#secondary .widget-title,
.widget-area .widget-title,
#secondary .wp-block-heading {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wb-text-secondary, #6c6c6c);
	margin-bottom: 12px;
}
#secondary .widget_layered_nav ul,
#secondary .widget_product_categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#secondary .widget_layered_nav ul li,
#secondary .widget_product_categories ul li {
	margin: 0 0 8px;
}
#secondary .widget_layered_nav ul li a,
#secondary .widget_product_categories ul li a {
	color: var(--wb-text-primary, #191919);
	text-decoration: none;
	font-size: 14px;
}
#secondary .widget_layered_nav ul li a:hover,
#secondary .widget_product_categories ul li a:hover {
	color: var(--wb-accent-warm, #e2a330);
}
#secondary .price_slider_wrapper .ui-slider {
	background: var(--wb-border, #e3e3e4);
	height: 4px;
}
#secondary .price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--wb-accent-warm, #e2a330);
}
#secondary .price_slider_wrapper .ui-slider .ui-slider-handle {
	background: #fff;
	border: 2px solid var(--wb-accent-warm, #e2a330);
	border-radius: 50%;
	width: 16px;
	height: 16px;
	top: -6px;
}
#secondary .price_slider_amount .button {
	background: var(--wb-text-primary, #191919);
	border-radius: 20px;
	font-size: 13px;
}

@media (max-width: 767px) {
	.wbcro-filterbar {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.wbcro-filterbar__select,
	.wbcro-filterbar__link {
		flex: 0 0 auto;
	}
}