/*
Theme Name: CaseHouse
Theme URI: https://casehouse.bg
Author: CaseHouse
Description: Фирмена блок-тема на магазина CaseHouse — калъфи и аксесоари за телефони. Оранжев акцент, бял фон, едри закръглени карти. Работи с WooCommerce.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.25.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casehouse
Tags: e-commerce, block-themes, full-site-editing, one-column, custom-colors, custom-logo
*/
/* ==========================================================================
0. Базови променливи
========================================================================== */
:root {
--ch-radius: 20px;
--ch-radius-sm: 14px;
--ch-shadow: 0 10px 30px rgba(23, 23, 23, 0.10);
--ch-gap: 16px;
--ch-container: 1200px;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
/* Картинки-эмодзи WordPress (если где-то остались) — размером с текст */
img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; display: inline; border: 0; box-shadow: none; }
img { max-width: 100%; height: auto; }
a { transition: color .15s ease; }
button, input, select, textarea { font-family: inherit; }
/* Контейнер: отступы на мобильном */
@media (max-width: 782px) {
body { --wp--style--root--padding-left: 16px; --wp--style--root--padding-right: 16px; }
}
/* ==========================================================================
1. Кнопки
========================================================================== */
.wp-block-button__link,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.single_add_to_cart_button,
.wc-block-components-product-button .wp-block-button__link,
button.button, a.button, .button {
font-family: inherit;
font-weight: 700;
border-radius: 999px !important;
line-height: 1.2;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
color: #171717;
border: 1.5px solid #171717;
padding: calc(0.9rem - 1.5px) calc(1.6rem - 1.5px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #171717; color: #fff; }
.wp-block-button.is-style-dark .wp-block-button__link { background: #171717; color: #fff; }
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #333; color: #fff; }
.ch-btn-arrow .wp-block-button__link::after {
content: "";
width: 16px; height: 16px; flex-shrink: 0;
background: no-repeat center / contain url("data:image/svg+xml;utf8,");
}
/* ==========================================================================
2. Шапка
≥1200px: лого слева, меню в одну строку, справа телефон (от 1360px) и иконки.
<1200px: бургер слева, лого по центру, справа поиск / профиль / корзина
(на телефоне — только поиск и корзина, профиль есть в меню).
========================================================================== */
.ch-promo {
background: #FF4D12;
color: #171717;
position: relative;
box-sizing: border-box; min-height: 32px;
display: flex; align-items: center; justify-content: center;
padding: 4px 48px;
font-size: 13px; font-weight: 500; text-align: center; line-height: 1.3; letter-spacing: .01em;
}
.ch-promo a { color: inherit; text-decoration: none; }
.ch-promo a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* выделения в сообщениях: **жирно**, ==белая плашка==, ##чёрная плашка## */
.ch-promo__b { font-weight: 800; }
.ch-promo__chip { display: inline-block; padding: 0 6px; border-radius: 5px; font-weight: 800; line-height: 1.35; color: inherit; background: transparent; }
.ch-promo__chip--light { background: #fff; color: #171717; }
.ch-promo__chip--dark { background: #171717; color: #fff; }
.ch-promo__item { animation: ch-promo-in .35s ease; }
@keyframes ch-promo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ch-promo__btn {
position: absolute; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; cursor: pointer; color: inherit;
width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.ch-promo__btn:first-child { left: 10px; }
.ch-promo__btn:last-child { right: 10px; }
.ch-promo__btn:hover { background: rgba(0,0,0,.08); }
.ch-promo__item { display: none; }
.ch-promo__item.is-active { display: block; }
.ch-promo--single .ch-promo__btn { display: none; }
@media (max-width: 782px) { .ch-promo { padding: 4px 34px; font-size: 12px; min-height: 30px; } .ch-promo__chip { padding: 0 5px; } .ch-promo__btn:first-child { left: 2px; } .ch-promo__btn:last-child { right: 2px; } }
/* Шапка закреплена при прокрутке (промо-полоса над ней — вне шапки, уезжает вместе со страницей) */
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 900; }
@media (max-width: 782px) { header.wp-block-template-part { top: 0; } } /* панель WP на телефоне не фиксированная */
.ch-header { border-bottom: 1px solid #E6E6EA; background: #fff; position: relative; z-index: 20; transition: box-shadow .2s ease; }
.ch-header.is-stuck { box-shadow: 0 6px 24px rgba(23, 23, 23, .08); }
.ch-header__inner {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 28px;
min-height: 66px;
}
.ch-logo { grid-column: 1; justify-self: start; margin: 0; }
.ch-logo a { display: block; }
.ch-logo img { height: 38px; width: auto !important; max-width: none; display: block; }
.ch-nav { grid-column: 2; min-width: 0; }
.ch-nav .wp-block-navigation__container { flex-wrap: nowrap !important; }
.ch-nav .wp-block-navigation-item__content { padding: 8px 0; font-weight: 500; white-space: nowrap; }
.ch-nav .wp-block-navigation-item__content:hover { color: #D93D08; }
.ch-nav__promo .wp-block-navigation-item__label::before {
content: "%";
display: inline-block; margin-right: 6px;
background: #FF4D12; color: #171717; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; line-height: 1.2;
}
.ch-nav .wp-block-navigation-item.ch-nav__account { display: none; } /* «Моят профил» — профиль теперь встроен в мобильную шторку */
.ch-nav .wp-block-navigation-item.ch-mobile-only { display: none !important; } /* пункт только для мобильной шторки (класс у пункта меню) */
.ch-header__actions { grid-column: 3; justify-self: end; display: flex !important; align-items: center; gap: 4px !important; flex-wrap: nowrap !important; }
.ch-phone { display: flex; flex-direction: column; align-items: flex-end; margin-right: 10px; line-height: 1.2; white-space: nowrap; }
.ch-phone__num { font-weight: 700; font-size: 15px; color: #171717; text-decoration: none; }
.ch-phone__hours { font-size: 12px; color: #6B7280; }
/* иконки в шапке — одинаковые круглые кнопки */
.ch-search__open,
.wc-block-customer-account .wc-block-customer-account__account-icon,
.wc-block-mini-cart .wc-block-mini-cart__button,
.ch-burger {
width: 44px; height: 44px; border-radius: 999px; padding: 0 !important; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; color: #171717; cursor: pointer;
transition: background .15s ease;
}
.ch-search__open:hover,
.wc-block-mini-cart .wc-block-mini-cart__button:hover,
.ch-burger:hover,
.wc-block-customer-account a:hover .wc-block-customer-account__account-icon { background: #F4F4F6; }
/* бургер WP и его полноэкранное меню не используем — вместо них своя шторка (.ch-drawer) */
.ch-nav .wp-block-navigation__responsive-container-open { display: none !important; }
.ch-burger { display: none; }
.wc-block-mini-cart__badge { background: #FF4D12 !important; color: #171717 !important; font-weight: 800 !important; border: 0 !important; }
.wc-block-mini-cart__quantity-badge { position: relative; }
.wc-block-customer-account a { text-decoration: none; }
.wc-block-customer-account__account-icon { color: #171717; }
/* Поиск: панель, выезжающая сверху, и затемнение страницы */
.ch-search__backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(23, 23, 23, .45); opacity: 0; transition: opacity .3s ease; }
.ch-search__backdrop.is-open { opacity: 1; }
.ch-search__panel {
position: fixed; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100001;
background: #fff; box-shadow: 0 12px 32px rgba(23, 23, 23, .14);
padding: 20px var(--wp--style--root--padding-right, 40px) 20px var(--wp--style--root--padding-left, 40px);
transform: translateY(-110%);
transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.ch-search__panel.is-open { transform: translateY(0); }
.ch-search__panel[hidden], .ch-search__backdrop[hidden] { display: none; }
.ch-search__form {
display: flex; align-items: center; gap: 12px;
max-width: 1200px; margin: 0 auto; height: 64px;
background: #F4F4F6; border-radius: 999px; padding: 0 10px 0 22px;
}
.ch-search__icon { display: inline-flex; color: #6B7280; flex-shrink: 0; }
.ch-search__input {
flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0;
font-size: 18px; font-family: inherit; color: #171717; padding: 0;
}
.ch-search__input::placeholder { color: #9CA3AF; }
.ch-search__input::-webkit-search-cancel-button, .ch-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ch-search__submit { flex-shrink: 0; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #FF4D12; color: #171717; font-weight: 700; font-size: 15px; font-family: inherit; cursor: pointer; }
.ch-search__submit:hover { background: #D93D08; }
.ch-search__close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: #171717; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ch-search__close:hover { background: #E6E6EA; }
body.ch-search-open { overflow: hidden; }
/* Меню для компьютера (строится из «Настройки сайта → Меню»): строка пунктов, выпадашки по наведению */
.ch-menu__list, .ch-menu__sub { list-style: none; margin: 0; padding: 0; }
.ch-menu__list { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.ch-menu__item { position: relative; margin: 0; }
.ch-menu__link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; font-size: 15px; font-weight: 500; color: #171717; text-decoration: none; white-space: nowrap; }
.ch-menu__link:hover { color: #D93D08; }
.ch-menu__item--promo > .ch-menu__link::before { content: "%"; display: inline-block; margin-right: 2px; background: #FF4D12; color: #171717; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; line-height: 1.2; }
.ch-menu__chev { flex-shrink: 0; transition: transform .2s ease; }
.ch-menu__item.has-children:hover > .ch-menu__link > .ch-menu__chev { transform: rotate(180deg); }
.ch-menu__sub { position: absolute; top: 100%; left: -12px; z-index: 40; min-width: 230px; margin-top: 6px; padding: 8px; background: #fff; border: 1px solid #E6E6EA; border-radius: 14px; box-shadow: 0 12px 30px rgba(23, 23, 23, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.ch-menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* «мостик», чтобы меню не закрывалось по дороге к нему */
.ch-menu__item:hover > .ch-menu__sub, .ch-menu__item:focus-within > .ch-menu__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ch-menu__sub .ch-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 15px; }
.ch-menu__sub .ch-menu__link:hover { background: #F4F4F6; color: #171717; }
.ch-menu__sub .ch-menu__item.has-children > .ch-menu__link > .ch-menu__chev { transform: rotate(-90deg); }
.ch-menu__sub .ch-menu__item.has-children:hover > .ch-menu__link > .ch-menu__chev { transform: rotate(-90deg); }
.ch-menu__sub .ch-menu__sub { top: -9px; left: 100%; margin: 0 0 0 2px; }
.ch-menu__sub .ch-menu__sub::before { top: 0; bottom: 0; left: -10px; right: auto; width: 10px; height: auto; }
.ch-menu__sub--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 440px; }
.ch-menu__sub--grid > .ch-menu__item--all { grid-column: 1 / -1; border-bottom: 1px solid #E6E6EA; margin-bottom: 4px; padding-bottom: 4px; }
.ch-menu__item--all > .ch-menu__link { font-weight: 700; }
.ch-menu__list > .ch-menu__item:nth-last-child(-n+2) > .ch-menu__sub { left: auto; right: -12px; } /* у последних пунктов — не вылезать за экран */
.ch-menu__list > .ch-menu__item:nth-last-child(-n+2) > .ch-menu__sub .ch-menu__sub { left: auto; right: 100%; margin: 0 2px 0 0; }
.ch-menu__list > .ch-menu__item:nth-last-child(-n+2) > .ch-menu__sub .ch-menu__sub::before { left: auto; right: -10px; }
@media (max-width: 1199px) { .ch-nav > .ch-menu__list { display: none; } }
/* Выпадающие списки меню; модели iPhone — в две колонки */
.ch-nav .wp-block-navigation__submenu-container { border-radius: 14px !important; border: 1px solid #E6E6EA !important; box-shadow: 0 12px 30px rgba(23, 23, 23, .12); padding: 8px !important; background: #fff; }
.ch-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 12px !important; border-radius: 8px; font-size: 15px; }
.ch-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #F4F4F6; color: #171717; }
@media (min-width: 1200px) {
.ch-nav .ch-nav__models > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 440px; }
.ch-nav .ch-nav__models > .wp-block-navigation__submenu-container > .ch-nav__models-all { grid-column: 1 / -1; border-bottom: 1px solid #E6E6EA; margin-bottom: 4px; padding-bottom: 4px; }
.ch-nav .ch-nav__models > .wp-block-navigation__submenu-container > .ch-nav__models-all .wp-block-navigation-item__content { font-weight: 700; }
}
/* Телефон не влезает рядом с меню на узких десктопах */
@media (max-width: 1359px) { .ch-phone { display: none; } }
/* Планшет и телефон: бургер слева, лого по центру */
@media (max-width: 1199px) {
.ch-header__inner { grid-template-columns: 1fr auto 1fr; column-gap: 12px; min-height: 56px; }
.ch-nav { grid-column: 1; grid-row: 1; justify-self: start; }
.ch-logo { grid-column: 2; grid-row: 1; justify-self: center; }
.ch-logo img { height: 34px; }
.ch-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
/* строку ссылок WP прячем, показываем свой бургер — он открывает шторку .ch-drawer */
.ch-nav .wp-block-navigation__responsive-container, .ch-nav > .wp-block-navigation__container { display: none !important; }
.ch-burger { display: inline-flex; }
.ch-search__form { height: 56px; padding-left: 18px; }
.ch-search__input { font-size: 16px; }
.ch-search__panel { padding: 14px var(--wp--style--root--padding-right, 16px); }
}
@media (max-width: 599px) {
.ch-logo img { height: 30px; }
.ch-header__actions .wc-block-customer-account { display: none; } /* профиль — в меню */
.ch-search__submit { display: none; }
}
/* Мобильное меню — боковая шторка слева (как на iCases). Разметка — плагин, includes/mobile-menu.php */
.ch-drawer__backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(23, 23, 23, .5); opacity: 0; transition: opacity .3s ease; }
.ch-drawer__backdrop.is-open { opacity: 1; }
.ch-drawer {
position: fixed; top: 0; bottom: 0; left: 0; z-index: 100001;
width: min(86vw, 400px); box-sizing: border-box; padding: 14px 14px 32px;
background: #fff; color: #171717; border-radius: 0 24px 24px 0; box-shadow: 0 0 48px rgba(23, 23, 23, .2);
transform: translateX(-105%); transition: transform .38s cubic-bezier(.2, .8, .2, 1);
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
display: flex; flex-direction: column;
}
.ch-drawer.is-open { transform: translateX(0); }
.ch-drawer[hidden], .ch-drawer__backdrop[hidden] { display: none; }
body.ch-drawer-open { overflow: hidden; }
.ch-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px 10px; }
.ch-drawer__logo { display: block; text-decoration: none; color: #171717; font-weight: 800; font-size: 22px; }
.ch-drawer__logo img { height: 34px; width: auto; display: block; }
.ch-drawer__close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: #171717; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ch-drawer__close:hover { background: #F4F4F6; }
.ch-drawer__list { list-style: none; margin: 0; padding: 0; }
.ch-drawer__item { margin: 0; padding: 0; }
.ch-drawer__row {
display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; box-sizing: border-box;
padding: 10px 10px; border: 0; border-radius: 14px; background: transparent;
color: #171717; font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
transition: background .15s ease;
}
@media (hover: hover) { .ch-drawer__row:hover { background: #F7F7F9; color: #171717; } }
.ch-drawer__item.is-open > .ch-drawer__row { background: #F4F4F6; }
.ch-drawer__icon { flex: 0 0 24px; width: 24px; height: 24px; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.ch-drawer__icon svg { width: 24px; height: 24px; }
.ch-drawer__label { flex: 1 1 auto; min-width: 0; }
.ch-drawer__chev { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid #6B7280; border-bottom: 2px solid #6B7280; transform: rotate(45deg); margin: -5px 10px 0 0; transition: transform .25s ease, margin .25s ease; }
.ch-drawer__item.is-open > .ch-drawer__row .ch-drawer__chev { transform: rotate(-135deg); margin-top: 5px; }
/* подменю: плавное раскрытие */
.ch-drawer__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s linear .3s; }
.ch-drawer__item.is-open > .ch-drawer__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease, visibility 0s; }
.ch-drawer__sub > * { min-height: 0; overflow: hidden; }
.ch-drawer__sub .ch-drawer__row { min-height: 46px; padding: 8px 10px 8px 48px; font-size: 16px; font-weight: 400; color: #171717; }
.ch-drawer__sub .ch-drawer__row.is-all { font-weight: 600; }
.ch-drawer__sub .ch-drawer__icon { display: none; }
.ch-drawer__sub .ch-drawer__sub .ch-drawer__row { padding-left: 64px; }
.ch-drawer__sub .ch-drawer__list { padding-bottom: 6px; }
.ch-drawer__sep { flex-shrink: 0; height: 1px; background: #E6E6EA; margin: 8px 6px; }
/* «Моят профил»: кнопки входа/регистрации */
.ch-drawer__btns { display: grid; gap: 10px; padding: 10px 10px 14px 48px; }
.ch-drawer__btn { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; box-sizing: border-box; font-size: 15px; font-weight: 700; text-decoration: none; color: #171717; }
.ch-drawer__btn--primary { background: #FF4D12; }
@media (hover: hover) { .ch-drawer__btn--primary:hover { background: #D93D08; color: #171717; } }
.ch-drawer__btn--outline { border: 1.5px solid #171717; }
@media (hover: hover) { .ch-drawer__btn--outline:hover { background: #171717; color: #fff; } }
/* телефон и соцсети внизу */
.ch-drawer__contacts { padding-bottom: 6px; }
.ch-drawer__phone { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: #171717; }
@media (hover: hover) { .ch-drawer__phone:hover { background: #F7F7F9; color: #171717; } }
.ch-drawer__phone b { font-size: 17px; font-weight: 700; display: block; }
.ch-drawer__phone small { display: block; font-size: 13px; color: #6B7280; margin-top: 2px; }
.ch-drawer__social { padding: 6px 10px 0 48px; }
.ch-drawer__social .ch-social { margin: 0; }
@media (min-width: 1200px) { .ch-drawer, .ch-drawer__backdrop { display: none !important; } }
@media (max-width: 360px) { .ch-drawer { width: 90vw; } .ch-drawer__row { font-size: 16px; } }
/* ==========================================================================
3. Общие секции / заголовки
========================================================================== */
.ch-section { margin-top: 56px; }
.ch-section__head { margin-bottom: 24px; gap: 16px; }
.ch-section__head h2 { margin: 0; }
.ch-section__head .wp-block-buttons { margin: 0; }
.ch-section__head .wp-block-button__link { padding: 11px 22px; font-size: 14px; }
/* Секции товаров на главной — карусели: стрелки на компьютере, свайп на телефоне */
.ch-section__head > .wp-block-buttons { margin-left: auto; }
.ch-carousel__nav { display: flex; gap: 8px; flex-shrink: 0; }
.ch-section__head > h2 + .ch-carousel__nav { margin-left: auto; } /* секция без кнопки «Виж всички» — стрелки справа */
.ch-carousel__btn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid #171717; background: #fff; color: #171717; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.ch-carousel__btn svg { width: 18px; height: 18px; }
.ch-carousel__btn:hover:not(:disabled) { background: #171717; color: #fff; }
.ch-carousel__btn:disabled { opacity: .3; cursor: default; }
.ch-section--no-scroll .ch-carousel__nav { display: none; }
.ch-section .ch-products .wc-block-product-template {
display: flex !important; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
scrollbar-width: none; padding: 4px 0 10px; margin: -4px 0 -10px; cursor: grab;
}
.ch-section .ch-products .wc-block-product-template::-webkit-scrollbar { display: none; }
.ch-section .ch-products .wc-block-product-template.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.ch-section .ch-products .wc-block-product-template > .wc-block-product { flex: 0 0 calc((100% - 48px) / 4); width: auto; max-width: none; box-sizing: border-box; scroll-snap-align: start; }
.ch-section .ch-products .wc-block-product-template.is-dragging a, .ch-section .ch-products .wc-block-product-template.is-dragging img { pointer-events: none; }
@media (max-width: 1024px) { .ch-section .ch-products .wc-block-product-template > .wc-block-product { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 782px) {
.ch-carousel__nav { display: none; }
.ch-section .ch-products .wc-block-product-template { gap: 10px; cursor: default; }
.ch-section .ch-products .wc-block-product-template > .wc-block-product { flex-basis: 44%; }
}
.ch-eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #6B7280; margin: 0; }
@media (max-width: 782px) {
.ch-section { margin-top: 36px; }
.ch-section__head { flex-wrap: wrap; }
.ch-section__head .wp-block-button__link { padding: 9px 16px; font-size: 13px; }
}
/* ==========================================================================
4. Главный баннер (слайдер)
Слайды едут горизонтально (как на icases.ua): стрелки по краям, счётчик
«01 — 02» снизу, свайп на телефоне. Слайд-картинка — вся кликабельна.
========================================================================== */
.ch-hero { margin-top: 24px; position: relative; }
.ch-hero__viewport { background: #F4F4F6; border-radius: 28px; overflow: hidden; position: relative; }
.ch-hero__track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.ch-hero__track.is-dragging { transition: none; }
.ch-hero__slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; }
.ch-hero__slide--text { padding: 48px 56px; min-height: 440px; display: flex; align-items: center; }
.ch-hero__slide--image { display: block; aspect-ratio: 2.4 / 1; text-decoration: none; background: #F4F4F6; }
.ch-hero__slide--image picture { display: block; width: 100%; height: 100%; }
.ch-hero__slide--image img, .ch-hero__picture { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; display: block; }
.ch-hero__cols { width: 100%; align-items: center; display: flex; gap: 24px; }
.ch-hero__col--text { flex: 1 1 45%; min-width: 0; }
.ch-hero__col--img { flex: 1 1 55%; min-width: 0; }
.ch-hero__img { margin: 0; }
.ch-hero .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-hero__title { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; margin: 12px 0 14px; }
.ch-hero__text { font-size: 18px; color: #4B5563; max-width: 440px; margin: 0 0 22px; }
.ch-hero__img img { max-height: 360px; width: auto; margin: 0 auto; display: block; }
.ch-hero__arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(23, 23, 23, .12); background: rgba(255, 255, 255, .92); color: #171717;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
transition: background .15s, color .15s, border-color .15s;
}
.ch-hero__arrow:hover { background: #171717; color: #fff; border-color: #171717; }
.ch-hero__arrow--prev { left: 18px; }
.ch-hero__arrow--next { right: 18px; }
.ch-hero__nav { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 3; font-size: 13px; font-weight: 600; color: #171717; letter-spacing: .04em; pointer-events: none; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(4px); }
.ch-hero__nav-num { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ch-hero__nav-bar { width: 120px; height: 3px; border-radius: 2px; background: rgba(23, 23, 23, .18); overflow: hidden; }
.ch-hero__nav-bar i { display: block; height: 100%; background: #171717; border-radius: 2px; transition: transform .55s cubic-bezier(.2, .8, .2, 1); transform-origin: left; }
.ch-hero--single .ch-hero__arrow, .ch-hero--single .ch-hero__nav { display: none; }
/* Слайд «товары»: коллаж из карточек с фото товаров и наклейками (как первый баннер на iCases); один товар — одно большое фото */
.ch-hero__collage { position: relative; width: 100%; max-width: 580px; height: 400px; margin: 0 auto; }
.ch-hero__collage-in { position: absolute; left: 50%; top: 0; width: 580px; height: 400px; margin-left: -290px; transform-origin: top center; }
.ch-hero__card { position: absolute; display: block; width: 240px; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(23, 23, 23, .18); transform: rotate(var(--r, 0deg)); transition: transform .25s ease, box-shadow .25s ease; }
.ch-hero__card img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.ch-hero__card:hover { transform: rotate(var(--r, 0deg)) scale(1.04); box-shadow: 0 24px 50px rgba(23, 23, 23, .24); z-index: 9; }
.ch-hero__card--1 { left: 20px; top: 70px; width: 250px; --r: -8deg; z-index: 3; }
.ch-hero__card--2 { left: 215px; top: 8px; width: 235px; --r: 6deg; z-index: 2; }
.ch-hero__card--3 { left: 345px; top: 165px; width: 225px; --r: -5deg; z-index: 4; }
.ch-hero__card--4 { left: 70px; top: 255px; width: 150px; --r: 10deg; z-index: 1; }
.ch-hero__card--5 { left: 440px; top: 20px; width: 135px; --r: 14deg; z-index: 1; }
.ch-hero__collage--n2 .ch-hero__card--1 { left: 50px; top: 40px; width: 280px; }
.ch-hero__collage--n2 .ch-hero__card--2 { left: 280px; top: 100px; width: 260px; --r: 8deg; z-index: 4; }
.ch-hero__collage--n3 .ch-hero__card--1 { left: 30px; top: 50px; width: 260px; }
.ch-hero__collage--n3 .ch-hero__card--2 { left: 230px; top: 0; width: 230px; }
.ch-hero__collage--n3 .ch-hero__card--3 { left: 330px; top: 160px; width: 235px; }
.ch-hero__collage--n1 .ch-hero__card { position: static; width: 100%; max-width: 380px; margin: 10px auto 0; --r: -4deg; }
.ch-hero__collage--n1 .ch-hero__collage-in { position: static; width: auto; height: auto; margin: 0; }
.ch-hero__collage--n1 { height: auto; }
.ch-hero__sticker { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(23, 23, 23, .15)); }
.ch-hero__sticker--star { width: 64px; left: -6px; top: 10px; transform: rotate(-12deg); }
.ch-hero__sticker--eyes { width: 96px; left: 215px; top: 236px; transform: rotate(-8deg); }
.ch-hero__sticker--zig { width: 84px; left: 470px; top: 320px; transform: rotate(10deg); }
.ch-hero__sticker--spark { width: 46px; left: 395px; top: -4px; }
.ch-hero__slide--dark .ch-hero__sticker--spark path { fill: #fff; }
.ch-hero__slide--dark .ch-hero__card { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
@media (max-width: 1024px) {
.ch-hero__collage { height: 320px; }
.ch-hero__collage-in { transform: scale(.8); }
}
@media (max-width: 782px) {
.ch-hero__collage { height: 236px; max-width: none; }
.ch-hero__collage-in { transform: scale(.58); }
.ch-hero__collage--n1 .ch-hero__collage-in { transform: none; }
.ch-hero__collage--n1 .ch-hero__card { max-width: 220px; margin-top: 0; }
.ch-hero__card:hover { transform: rotate(var(--r, 0deg)); }
}
@media (max-width: 782px) {
.ch-hero { margin-top: 16px; }
.ch-hero__viewport { border-radius: 20px; }
.ch-hero__slide--text { padding: 24px 20px 48px; min-height: 0; }
.ch-hero__slide--image { aspect-ratio: 4 / 3; }
.ch-hero__cols { flex-direction: column; }
.ch-hero__cols .wp-block-column, .ch-hero__col { flex-basis: auto !important; width: 100%; }
.ch-hero__title { font-size: 32px; }
.ch-hero__text { font-size: 15px; margin-bottom: 16px; }
.ch-hero__img img { max-height: 200px; }
.ch-hero__arrow { width: 40px; height: 40px; }
.ch-hero__arrow--prev { left: 10px; }
.ch-hero__arrow--next { right: 10px; }
.ch-hero__nav { bottom: 12px; font-size: 12px; }
.ch-hero__nav-bar { width: 72px; }
}
/* ==========================================================================
5. Плитки категорий
========================================================================== */
.ch-cats { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); gap: 16px; }
.ch-cats > .ch-cat { display: flex; align-items: center; text-decoration: none; color: #171717; }
.ch-cat__thumb { width: 44px !important; height: 44px; object-fit: cover; border-radius: 10px; }
.ch-cat__body { display: flex; flex-direction: column; min-width: 0; }
.ch-cat {
border: 1px solid #E6E6EA; border-radius: 20px; background: #fff; padding: 18px 20px;
gap: 16px !important; cursor: pointer; transition: border-color .15s ease;
}
.ch-cat:hover { border-color: #FF4D12; }
.ch-cat__icon { margin: 0; flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: #F4F4F6; display: flex; align-items: center; justify-content: center; }
.ch-cat__icon img { width: 28px !important; height: 28px; }
.ch-cat__name { font-weight: 700; font-size: 15px; margin: 0; line-height: 1.25; }
.ch-cat__name a { color: #171717; text-decoration: none; }
.ch-cat__sub { font-size: 13px; color: #6B7280; margin: 3px 0 0; }
@media (max-width: 782px) {
.ch-cats { margin-top: 20px; gap: 10px !important; }
.ch-cat { padding: 12px 14px; border-radius: 16px; gap: 12px !important; }
.ch-cat__icon { width: 40px; height: 40px; border-radius: 12px; }
.ch-cat__icon img { width: 22px !important; height: 22px; }
.ch-cat__name { font-size: 14px; }
.ch-cat__sub { font-size: 12px; }
}
/* ==========================================================================
6. Карточка товара (WooCommerce product collection)
========================================================================== */
.ch-products .wc-block-product-template,
.wp-block-woocommerce-product-collection .wc-block-product-template { gap: 16px; }
.wp-block-woocommerce-product-collection .wc-block-product-template .wc-block-product,
.wc-block-related-products .products-block-post-template > li {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 16px; background: #fff; border: 1px solid #E6E6EA; border-radius: 20px;
transition: box-shadow .15s ease; text-align: left;
}
.wp-block-woocommerce-product-collection .wc-block-product:hover,
.wc-block-related-products .products-block-post-template > li:hover { box-shadow: var(--ch-shadow); }
.wc-block-components-product-image { margin: 0 0 4px; background: #F7F7F9; border-radius: 14px; overflow: hidden; }
.wc-block-components-product-image a { display: block; }
.wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; padding: 14px; box-sizing: border-box; }
.wc-block-product .wp-block-post-title { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; margin: 0; min-height: 2.8em; }
.wc-block-product .wp-block-post-title a { color: #171717; text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: #D93D08; }
.wc-block-product .wc-block-components-product-price { font-size: 20px; font-weight: 800; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-block-product .wc-block-components-product-price del,
.wc-block-product .wc-block-components-product-price .wc-block-components-product-price__regular { font-size: 14px; font-weight: 500; color: #6B7280; order: 2; }
.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }
/* Низ карточки: наличие + кнопка. Карточка — container query: когда она узкая,
кнопка уходит отдельной строкой на всю ширину и никогда не вылезает за край. */
.wp-block-woocommerce-product-collection .wc-block-product-template .wc-block-product,
.wc-block-related-products .products-block-post-template > li { container-type: inline-size; }
.ch-card__foot { margin-top: auto; gap: 8px !important; flex-wrap: wrap !important; min-width: 0; }
.wp-block-button.wc-block-components-product-button { margin: 0; min-width: 0; max-width: 100%; }
.wc-block-components-product-stock-indicator { font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; }
.wc-block-components-product-stock-indicator--in-stock { color: #15803D; }
.wc-block-components-product-stock-indicator--in-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #15803D; margin-right: 6px; vertical-align: 1px; }
.wc-block-components-product-stock-indicator--out-of-stock { color: #6B7280; }
/* специфичность как у стилей WooCommerce (.wp-block-button.wc-block-components-product-button .wp-block-button__link),
иначе их white-space:normal / width:auto перебивают тему — и кнопка «растёт» в две строки */
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
padding: 10px 12px; font-size: 13px; background: #FF4D12; color: #171717; white-space: nowrap; width: auto; max-width: 100%; box-sizing: border-box;
}
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover { background: #D93D08; }
/* (ширина контейнера в container query — это content-box карточки, без её padding) */
@container (max-width: 250px) {
.ch-card__foot { flex-direction: column; align-items: stretch !important; }
.wp-block-button.wc-block-components-product-button .wp-block-button__link { width: 100%; }
}
.wc-block-components-product-button .wp-block-button__link::before {
content: ""; width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px;
background: no-repeat center / contain url("data:image/svg+xml;utf8,");
}
.wc-block-components-product-button .added_to_cart { display: block; font-size: 12px; margin-top: 6px; color: #15803D; }
/* бейджи */
.wc-block-components-product-sale-badge, .wc-block-grid__product-onsale, .onsale { display: none !important; }
.ch-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ch-badge {
display: inline-block;
background: #DC2626; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; line-height: 1.3;
}
.ch-badge--hit { background: #FF4D12; color: #171717; }
.ch-badge--new { background: #171717; color: #fff; }
/* «Съвместим с MagSafe» — строка под названием (ставится плагином, если у товара MagSafe: Да) */
.ch-ms { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.2; color: #171717; margin: -4px 0 0; white-space: nowrap; }
.ch-ms__icon { width: 15px; height: 15px; flex: 0 0 auto; color: #FF4D12; }
.ch-product__title + .ch-ms { font-size: 14px; margin: 6px 0 0; }
.ch-product__title + .ch-ms .ch-ms__icon { width: 18px; height: 18px; }
@media (max-width: 782px) { .ch-ms { font-size: 11px; } }
@media (max-width: 1024px) {
.wp-block-woocommerce-product-collection .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 782px) {
.wp-block-woocommerce-product-collection .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.wp-block-woocommerce-product-collection .wc-block-product-template .wc-block-product { padding: 12px; border-radius: 16px; }
.wc-block-product .wp-block-post-title { font-size: 13px; }
.wc-block-product .wc-block-components-product-price { font-size: 17px; }
.wp-block-button.wc-block-components-product-button .wp-block-button__link { padding: 9px 10px; font-size: 12px; }
}
/* ==========================================================================
7. Промо-лента (комплект)
========================================================================== */
.ch-band { margin-top: 56px; background: #171717; color: #fff; border-radius: 28px; padding: 48px 56px; }
.ch-band .ch-eyebrow { color: #FF4D12; }
.ch-band h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 12px 0 14px; }
.ch-band p { color: #D1D5DB; max-width: 460px; }
.ch-band .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
.ch-band__cols { display: flex; align-items: center; gap: 32px; }
.ch-band__col--text { flex: 1 1 55%; min-width: 0; }
.ch-band__col--img { flex: 1 1 45%; min-width: 0; }
.ch-band__img { margin: 0; }
.ch-band .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-band--orange .wp-block-button.is-style-outline .wp-block-button__link, .ch-band--peach .wp-block-button.is-style-outline .wp-block-button__link, .ch-band--light .wp-block-button.is-style-outline .wp-block-button__link { color: #171717; border-color: #171717; }
.ch-band--orange .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #171717; color: #fff; }
.ch-band img { max-height: 220px; width: auto; margin: 0 auto; display: block; }
.ch-band .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: #4B5563; }
.ch-band .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: #171717; border-color: #fff; }
@media (max-width: 782px) {
.ch-band { margin-top: 36px; padding: 28px 20px; border-radius: 24px; }
.ch-band__cols { flex-direction: column; align-items: stretch; }
.ch-band img { max-height: 160px; margin-top: 10px; }
}
/* ==========================================================================
8. Преимущества
========================================================================== */
.ch-benefits { margin-top: 56px; }
.ch-benefits--sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); gap: 16px; }
.ch-benefits--sc .ch-benefit { display: flex; }
.ch-benefit__body { min-width: 0; }
.ch-benefit { background: #F4F4F6; border-radius: 20px; padding: 20px; gap: 14px !important; align-items: flex-start !important; }
.ch-benefit__icon { margin: 0; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #FF4D12; display: flex; align-items: center; justify-content: center; }
.ch-benefit__icon img { width: 22px !important; height: 22px; }
.ch-benefit h3 { font-size: 15px; margin: 0 0 4px; }
.ch-benefit p { font-size: 13px; color: #6B7280; margin: 0; }
@media (max-width: 782px) {
.ch-benefits { margin-top: 36px; gap: 10px !important; }
.ch-benefit { flex-direction: column; padding: 14px; border-radius: 16px; }
.ch-benefit__icon { width: 36px; height: 36px; }
.ch-benefit h3 { font-size: 13px; }
.ch-benefit p { font-size: 12px; }
}
/* ==========================================================================
9. Отзывы
========================================================================== */
.ch-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* на главной отзывы — карусель (все отзывы, стрелки / свайп) */
.ch-section .ch-reviews { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; cursor: grab; }
.ch-section .ch-reviews::-webkit-scrollbar { display: none; }
.ch-section .ch-reviews.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.ch-section .ch-reviews.is-dragging a { pointer-events: none; }
.ch-section .ch-reviews > .ch-review { flex: 0 0 calc((100% - 32px) / 3); box-sizing: border-box; scroll-snap-align: start; }
.ch-section .ch-reviews > .ch-review .ch-review__text { flex: 1 1 auto; }
.ch-review { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #F4F4F6; border-radius: 24px; }
.ch-review__stars { display: inline-flex; gap: 2px; color: #FF4D12; }
.ch-review__stars svg { width: 18px; height: 18px; fill: currentColor; }
.ch-review__stars svg.is-empty { fill: #D1D5DB; }
.ch-review__text { margin: 0; font-size: 15px; line-height: 1.55; color: #374151; }
.ch-review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ch-review__avatar { width: 40px; height: 40px; border-radius: 999px; background: #171717; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.ch-review__name { font-weight: 700; font-size: 14px; display: block; }
.ch-review__meta { font-size: 12px; color: #6B7280; }
.ch-review__product { font-size: 12px; color: #6B7280; }
.ch-review__product a { color: #6B7280; text-decoration: underline; }
@media (max-width: 1024px) { .ch-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-section .ch-reviews > .ch-review { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 782px) { .ch-reviews { grid-template-columns: 1fr; gap: 10px; } .ch-review { padding: 20px; border-radius: 20px; } .ch-section .ch-reviews { cursor: default; } .ch-section .ch-reviews > .ch-review { flex-basis: 86%; } }
/* ==========================================================================
9a. О магазине — SEO-текст с H1 (перед отзывами)
========================================================================== */
.ch-about { display: grid; grid-template-columns: minmax(260px, 36%) minmax(0, 1fr); gap: 32px 72px; align-items: start; background: #F7F7F9; border-radius: 24px; padding: 48px; }
.ch-about__logo { height: 48px; width: auto; display: block; margin: 0 0 22px; }
.ch-about__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ch-about__text { font-size: 16px; line-height: 1.75; color: #374151; position: relative; }
.ch-about__text p { margin: 0 0 16px; }
.ch-about__text p:last-child { margin-bottom: 0; }
.ch-about__text h2, .ch-about__text h3 { font-size: 20px; line-height: 1.3; margin: 24px 0 10px; color: #171717; }
.ch-about__text ul, .ch-about__text ol { margin: 0 0 16px 20px; }
.ch-about__text a { color: #D93D08; text-decoration: underline; text-underline-offset: 3px; }
.ch-about__text.is-collapsed { max-height: 200px; overflow: hidden; }
.ch-about__text.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, rgba(247, 247, 249, 0), #F7F7F9); pointer-events: none; }
.ch-about__text.is-animating { overflow: hidden; transition: max-height .4s ease; }
.ch-about__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 22px; border: 1.5px solid #171717; border-radius: 999px; background: transparent; color: #171717; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s, color .15s; }
.ch-about__more:hover { background: #171717; color: #fff; }
.ch-about__more svg { transition: transform .2s; }
.ch-about__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ch-about__more.is-hidden { display: none; }
@media (max-width: 1024px) { .ch-about { grid-template-columns: 1fr; gap: 20px; padding: 32px; } }
@media (max-width: 782px) { .ch-about { padding: 24px 20px; border-radius: 20px; } .ch-about__title { font-size: 24px; } .ch-about__logo { height: 40px; margin-bottom: 16px; } .ch-about__text { font-size: 15px; } }
/* ==========================================================================
10. Блог
========================================================================== */
.ch-blog .wp-block-post-template { gap: 16px; }
.ch-post { border: 1px solid #E6E6EA; border-radius: 20px; overflow: hidden; background: #fff; height: 100%; transition: box-shadow .15s ease; }
.ch-post:hover { box-shadow: var(--ch-shadow); }
.ch-post__img { margin: 0; background: #F7F7F9; }
.ch-post__img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; }
/* Квадратные фото товаров (класс is-contain ставит плагин) — целиком, не режем */
.ch-post__img.is-contain { background: #fff; border-bottom: 1px solid #F0F0F3; }
.ch-post__img.is-contain img { object-fit: contain !important; padding: 12px 24px; box-sizing: border-box; }
.ch-post__body { padding: 16px 20px 20px; }
.ch-post__cat { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #D93D08; margin: 0 10px 8px 0; }
.ch-post__cat a { color: inherit; text-decoration: none; }
.ch-post__cat a:hover { color: #171717; }
.ch-post__cat .wp-block-post-terms__separator { color: #9CA3AF; }
.ch-post__cat .wp-block-post-terms__prefix { display: none; }
.ch-post__date { display: inline-block; font-size: 12px; color: #6B7280; font-weight: 600; margin: 0 0 8px; }
.ch-post__title { font-size: 17px; line-height: 1.35; margin: 0 0 8px; font-weight: 700; letter-spacing: 0; }
.ch-post__title a { color: #171717; text-decoration: none; }
.ch-post__title a:hover { color: #D93D08; }
.ch-post__excerpt p { font-size: 14px; color: #4B5563; line-height: 1.5; margin: 0; }
.ch-post__excerpt .wp-block-post-excerpt__more-text { display: none; }
.ch-blogcats { margin: 20px 0 4px; }
@media (max-width: 782px) {
.ch-blog .wp-block-post-template { grid-template-columns: 1fr !important; gap: 10px; }
.ch-blogcats { margin-top: 14px; }
}
/* Страница статьи — на всю ширину контента (1200px) */
.ch-single { max-width: none; }
.ch-single__meta { gap: 12px; font-size: 13px; color: #6B7280; font-weight: 600; }
.ch-single__meta .ch-post__cat { margin: 0; font-size: 12px; }
.ch-single > .wp-block-post-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.15; margin: 10px 0 22px; letter-spacing: -.01em; }
.ch-single__img { margin: 0 0 32px; overflow: hidden; border-radius: 24px; }
.ch-single__img img { border-radius: 24px; }
/* Квадратное фото товара — без обрезки под 16:9: естественные пропорции, по центру, не выше 560px */
.ch-single__img.is-contain { aspect-ratio: auto !important; border-radius: 0; }
.ch-single__img.is-contain img { width: auto !important; height: auto !important; max-height: 560px; max-width: 100%; display: block; margin: 0 auto; object-fit: contain !important; border-radius: 24px; }
.ch-single .wp-block-post-content { font-size: 18px; line-height: 1.75; color: #374151; }
.ch-single .wp-block-post-content > * { margin-top: 0; margin-bottom: 1.15em; }
.ch-single .wp-block-post-content h2 { font-size: 28px; line-height: 1.25; margin: 1.6em 0 .6em; color: #171717; }
.ch-single .wp-block-post-content h3 { font-size: 21px; line-height: 1.3; margin: 1.4em 0 .5em; color: #171717; }
.ch-single .wp-block-post-content a { text-decoration: underline; text-underline-offset: 3px; }
.ch-single .wp-block-post-content ul, .ch-single .wp-block-post-content ol { padding-left: 1.4em; }
.ch-single .wp-block-post-content li { margin-bottom: .4em; }
.ch-single .wp-block-post-content .wp-block-image { margin: 1.6em 0; text-align: center; }
.ch-single .wp-block-post-content .wp-block-image img { max-height: 560px; width: auto; height: auto; max-width: 100%; display: inline-block; border-radius: 20px; }
.ch-single .wp-block-post-content .wp-block-image figcaption { font-size: 14px; color: #6B7280; margin: 10px 0 0; text-align: center; }
.ch-single .wp-block-post-content .wp-block-table { margin: 1.4em 0; overflow-x: auto; }
.ch-single .wp-block-post-content table { font-size: 15px; line-height: 1.45; border-collapse: collapse; width: 100%; }
.ch-single .wp-block-post-content th, .ch-single .wp-block-post-content td { border: 1px solid #E6E6EA; padding: 10px 12px; vertical-align: top; text-align: left; }
.ch-single .wp-block-post-content th { background: #F7F7F9; color: #171717; font-weight: 700; }
.ch-single .wp-block-post-content tbody tr:nth-child(even) td { background: #FBFBFC; }
.ch-single .wp-block-post-content td:first-child { font-weight: 700; color: #171717; }
.ch-single .wp-block-separator { margin-top: 40px; }
@media (max-width: 782px) {
.ch-single > .wp-block-post-title { margin-bottom: 16px; }
.ch-single__img { margin-bottom: 20px; border-radius: 16px; }
.ch-single__img img, .ch-single__img.is-contain img { border-radius: 16px; }
.ch-single__img.is-contain img { max-height: 360px; }
.ch-single .wp-block-post-content { font-size: 16px; line-height: 1.7; }
.ch-single .wp-block-post-content h2 { font-size: 23px; }
.ch-single .wp-block-post-content h3 { font-size: 19px; }
.ch-single .wp-block-post-content .wp-block-image img { max-height: 380px; border-radius: 14px; }
.ch-single .wp-block-post-content table { min-width: 640px; font-size: 14px; }
.ch-single .wp-block-post-content th, .ch-single .wp-block-post-content td { padding: 8px 10px; }
}
/* ==========================================================================
11. Футер
========================================================================== */
.ch-footer { margin-top: 64px; background: #171717; color: #fff; }
.ch-footer a { color: #D1D5DB; text-decoration: none; }
.ch-footer a:hover { color: #fff; }
.ch-footer__cols { padding-top: 56px; padding-bottom: 32px; gap: 24px; }
.ch-footer__logo { margin: 0 0 16px; }
.ch-footer__logo img { height: 40px; width: auto !important; }
.ch-footer h3 { color: #fff; font-size: 16px; margin: 0 0 12px; }
.ch-footer ul { list-style: none; padding: 0; margin: 0; }
.ch-footer li { margin: 0 0 10px; font-size: 14px; }
.ch-footer__menus { display: flex; gap: 24px; }
.ch-footer__menu { flex: 1 1 0; min-width: 0; }
.ch-footer__contacts { line-height: 1.6; font-size: 13px; color: #9CA3AF; }
.ch-footer__contacts .ch-footer__phone { display: block; font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 6px; }
.ch-footer__contacts .wp-block-button__link, .ch-footer__viber { display: inline-flex; margin-top: 12px; padding: 11px 20px; font-size: 14px; }
.ch-footer__muted { font-size: 14px; color: #9CA3AF; margin: 0 0 12px; }
/* Иконки соцсетей */
.ch-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ch-social__link { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; transition: background .15s, color .15s, transform .15s; }
.ch-social__link svg { width: 20px; height: 20px; display: block; }
.ch-social--dark .ch-social__link { background: #262626; color: #fff; }
.ch-social--dark .ch-social__link:hover { background: #FF4D12; color: #171717; transform: translateY(-1px); }
.ch-social--light .ch-social__link { background: #fff; color: #171717; border: 1px solid #E6E6EA; }
.ch-social--light .ch-social__link:hover { background: #171717; color: #fff; border-color: #171717; }
.ch-footer__address { font-size: 14px; color: #D1D5DB; line-height: 1.6; margin: 0; }
.ch-subscribe { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.ch-subscribe input[type="email"] {
flex: 1 1 200px; height: 48px; border-radius: 999px; border: 1px solid #4B5563; background: #262626; color: #fff;
padding: 0 18px; font-size: 14px; min-width: 0;
}
.ch-subscribe input[type="email"]::placeholder { color: #9CA3AF; }
.ch-subscribe button { height: 48px; padding: 0 22px; font-size: 14px; background: #FF4D12; color: #171717; border: 0; border-radius: 999px; font-weight: 700; cursor: pointer; }
.ch-subscribe button:hover { background: #D93D08; }
.ch-subscribe__msg { font-size: 13px; margin: 6px 0 0; width: 100%; color: #D1D5DB; }
.ch-footer__bottom { border-top: 1px solid #333; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9CA3AF; }
.ch-pay { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.ch-pay span { font-size: 12px; font-weight: 700; color: #171717; background: #fff; border-radius: 6px; padding: 4px 10px; }
@media (max-width: 782px) {
.ch-footer { margin-top: 36px; }
.ch-footer__cols { padding-top: 32px; padding-bottom: 20px; }
.ch-footer__cols .wp-block-column { flex-basis: 100% !important; }
.ch-footer__menus { flex-wrap: wrap; gap: 16px 24px; }
.ch-footer__menu { flex: 1 1 40%; }
}
/* ==========================================================================
12. Каталог
========================================================================== */
.ch-crumbs, .woocommerce-breadcrumb { font-size: 13px; color: #6B7280; margin: 20px 0 0; }
.ch-crumbs a, .woocommerce-breadcrumb a { color: #6B7280; }
.ch-crumbs a:hover { color: #171717; }
.ch-catalog__head { gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.ch-catalog__head h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ch-count { font-size: 15px; color: #6B7280; margin: 0; }
.ch-subcats { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.ch-subcats a {
font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 1px solid #E6E6EA; color: #171717; background: #fff; text-decoration: none;
}
.ch-subcats a:hover { border-color: #171717; }
.ch-subcats a.is-current { background: #171717; color: #fff; border-color: #171717; }
.ch-catalog__cols { margin-top: 28px; gap: 32px; }
.ch-filters { flex: 0 0 264px; }
/* Фильтры (блок WooCommerce «Product Filters», собирается шорткодом [ch_filters]).
Стили самодостаточны — не зависят от CSS WooCommerce. */
.ch-filters .wc-block-product-filters { display: block; width: 100%; --top-padding: var(--wp-admin--admin-bar--height, 0px); }
.ch-filters .wc-block-product-filter--hidden { display: none !important; }
.ch-filters .ch-pf__title { font-size: 20px; font-weight: 800; margin: 0 0 4px !important; }
/* группа фильтра */
.ch-filters .wp-block-woocommerce-product-filter-price,
.ch-filters .wp-block-woocommerce-product-filter-attribute,
.ch-filters .wp-block-woocommerce-product-filter-status,
.ch-filters .wp-block-woocommerce-product-filter-rating,
.ch-filters .wp-block-woocommerce-product-filter-taxonomy { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E6E6EA; }
.ch-filters .wp-block-woocommerce-product-filter-price .wp-block-heading,
.ch-filters .wp-block-woocommerce-product-filter-attribute .wp-block-heading,
.ch-filters .wp-block-woocommerce-product-filter-status .wp-block-heading,
.ch-filters .wp-block-woocommerce-product-filter-rating .wp-block-heading,
.ch-filters .wp-block-woocommerce-product-filter-taxonomy .wp-block-heading { font-size: 16px; font-weight: 700; margin: 0 0 14px !important; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.ch-filters .ch-pf__group .wp-block-heading::after { content: ""; width: 10px; height: 10px; border-right: 2px solid #171717; border-bottom: 2px solid #171717; transform: rotate(-135deg); margin: 4px 6px 0 0; transition: transform .2s; }
.ch-filters .ch-pf__group.is-collapsed .wp-block-heading::after { transform: rotate(45deg); margin-top: -4px; }
.ch-filters .ch-pf__group.is-collapsed > :not(.wp-block-heading) { display: none; }
.ch-filters .ch-pf__group.is-collapsed .wp-block-heading { margin-bottom: 0 !important; }
/* активные фильтры (чипсы) */
.ch-filters .wp-block-woocommerce-product-filter-active { margin-top: 12px; }
.ch-filters .wp-block-woocommerce-product-filter-active:empty { display: none; }
.ch-filters .wc-block-product-filter-removable-chips__items { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 10px; padding: 0; }
.ch-filters .wc-block-product-filter-removable-chips__item { display: inline-flex; align-items: center; gap: 2px; background: #F4F4F6; border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; margin: 0; }
.ch-filters .wc-block-product-filter-removable-chips__remove { border: 0; background: transparent; padding: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #6B7280; border-radius: 50%; }
.ch-filters .wc-block-product-filter-removable-chips__remove svg { width: 18px; height: 18px; fill: currentColor; }
.ch-filters .wc-block-product-filter-removable-chips__remove:hover { background: #E6E6EA; color: #171717; }
.ch-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-buttons { margin: 0; }
.ch-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-button { width: 100%; }
.ch-filters .wp-block-woocommerce-product-filter-clear-button button, .ch-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; border-radius: 999px !important; border: 1.5px solid #171717 !important; background: transparent !important; color: #171717 !important; font-family: inherit; font-size: 14px !important; font-weight: 700; padding: 9px 14px !important; cursor: pointer; text-decoration: none; }
.ch-filters .wp-block-woocommerce-product-filter-clear-button button:hover { background: #171717 !important; color: #fff !important; }
/* список с галочками */
.ch-filters .wc-block-product-filter-checkbox-list fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ch-filters .wc-block-product-filter-checkbox-list__items { display: flex; flex-direction: column; gap: 10px; }
.ch-filters .wc-block-product-filter-checkbox-list__item[hidden] { display: none !important; }
.ch-filters .wc-block-product-filter-checkbox-list__label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.3; margin: 0; color: #171717; }
.ch-filters .wc-block-product-filter-checkbox-list__input-wrapper { position: relative; display: block; width: 20px; height: 20px; flex-shrink: 0; }
.ch-filters .wc-block-product-filter-checkbox-list__input-wrapper::before { content: ""; position: absolute; inset: 0; border: 1.5px solid #D1D5DB; border-radius: 6px; background: #fff; box-sizing: border-box; transition: background .15s, border-color .15s; }
.ch-filters .wc-block-product-filter-checkbox-list__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ch-filters svg.wc-block-product-filter-checkbox-list__mark { position: absolute; inset: 0; width: 20px; height: 20px; padding: 5px; box-sizing: border-box; color: #171717; display: none; pointer-events: none; }
.ch-filters .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark { display: block; }
.ch-filters .wc-block-product-filter-checkbox-list__input-wrapper:has(input:checked)::before { background: #FF4D12; border-color: #FF4D12; }
.ch-filters .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__input-wrapper::before { border-color: #171717; }
.ch-filters .wc-block-product-filter-checkbox-list__input:disabled ~ * , .ch-filters .wc-block-product-filter-checkbox-list__label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ch-filters .wc-block-product-filter-checkbox-list__text-wrapper { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.ch-filters .wc-block-product-filter-checkbox-list__count { color: #9CA3AF; font-size: 13px; }
.ch-filters .wc-block-product-filter-checkbox-list__show-more-button { background: none; border: 0; padding: 0; margin-top: 2px; color: #D93D08; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ch-filters .wc-block-product-filter-checkbox-list__stars { display: inline-block; height: 1.3em; overflow: hidden; line-height: 0; color: #F59E0B; }
.ch-filters .wc-block-product-filter-checkbox-list__stars-svg { display: block; height: 1.3em; width: auto; }
.ch-filters .wc-block-product-filter-checkbox-list__color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; background-size: cover; }
/* цена: ползунок + поля «от / до» */
.ch-filters .wc-block-product-filter-price-slider__content { display: grid; grid-template-areas: "price-slider price-slider" "left-input right-input"; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.ch-filters .wc-block-product-filter-price-slider__range { grid-area: price-slider; position: relative; height: 4px; margin: 10px 8px 6px; --low: 0%; --high: 100%; --range-color: #FF4D12; --track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%; }
.ch-filters .wc-block-product-filter-price-slider__range::before { content: ""; position: absolute; inset: 0; background: #E6E6EA; border-radius: 4px; }
.ch-filters .wc-block-product-filter-price-slider__range .range-bar { position: relative; height: 4px; border-radius: 4px; background: var(--track-background); }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"] { appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 0; margin: 0; padding: 0 !important; background: transparent; border: 0 !important; outline: none !important; pointer-events: none; display: block; }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-runnable-track { appearance: none; height: 1px; }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-track { appearance: none; height: 1px; }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; margin: -8px 0 0; border-radius: 50%; background: #fff; border: 2px solid #171717; box-sizing: border-box; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #171717; box-sizing: border-box; cursor: pointer; }
.ch-filters .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb:hover, .ch-filters .wc-block-product-filter-price-slider__range input[type="range"]:focus::-webkit-slider-thumb { background: #FF4D12; border-color: #FF4D12; }
.ch-filters .wc-block-product-filter-price-slider__left { grid-area: left-input; }
.ch-filters .wc-block-product-filter-price-slider__right { grid-area: right-input; }
.ch-filters .wc-block-product-filter-price-slider__left, .ch-filters .wc-block-product-filter-price-slider__right { background: #F4F4F6; border-radius: 12px; padding: 8px 12px 6px; font-size: 12px; color: #6B7280; min-width: 0; }
.ch-filters .wc-block-product-filter-price-slider__left::before { content: "от"; display: block; }
.ch-filters .wc-block-product-filter-price-slider__right::before { content: "до"; display: block; }
.ch-filters .wc-block-product-filter-price-slider .text input[type="text"] { display: block; width: 100%; max-width: none; min-width: 0; border: 0; background: transparent; padding: 2px 0 0; margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: #171717; outline: 0; }
/* мобильная шторка (до 1024px) */
.ch-filters .wc-block-product-filters__open-overlay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 999px; padding: 0 18px; background: #FF4D12; color: #171717; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ch-filters .wc-block-product-filters__open-overlay svg { width: 20px; height: 20px; fill: currentColor; }
.ch-filters .wc-block-product-filters__close-overlay { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: #171717; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ch-filters .wc-block-product-filters__close-overlay svg { width: 24px; height: 24px; fill: currentColor; }
.ch-filters .wc-block-product-filters__close-overlay:hover { background: #F4F4F6; }
.ch-filters .wc-block-product-filters__apply { width: 100%; height: 50px; border-radius: 999px; background: #FF4D12; color: #171717; font-family: inherit; font-size: 15px; font-weight: 700; border: 0; cursor: pointer; }
@media (max-width: 1024px) {
.ch-filters .wc-block-product-filters { display: block !important; }
.ch-filters .wc-block-product-filters__open-overlay { display: inline-flex !important; }
.ch-filters .wc-block-product-filters__overlay { position: fixed !important; inset: 0 !important; top: var(--top-padding) !important; z-index: 9999 !important; background-color: transparent; pointer-events: none !important; transition: background-color .2s .3s; }
.ch-filters .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay { background-color: rgba(23, 23, 23, .45) !important; pointer-events: auto !important; transition-delay: 0s; }
.ch-filters .wc-block-product-filters__overlay-wrapper { position: relative; width: 100% !important; height: 100% !important; }
.ch-filters .wc-block-product-filters__overlay-dialog { position: absolute !important; inset: 0 auto 0 0; width: min(100%, 400px) !important; max-height: 100%; display: flex !important; flex-direction: column; background: #fff !important; color: #171717; transform: translateX(-100%) !important; transition: transform .4s cubic-bezier(.2, .8, .2, 1) !important; }
.ch-filters .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog { transform: translateX(0) !important; }
.ch-filters .wc-block-product-filters__overlay-header { display: flex !important; flex-flow: row-reverse; padding: 12px 12px 0; }
.ch-filters .wc-block-product-filters__overlay-content { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto !important; padding: 0 20px 20px !important; }
.ch-filters .wc-block-product-filters__overlay-content > :first-child { margin-top: 0; }
.ch-filters .wc-block-product-filters__overlay-footer { display: block !important; padding: 14px 20px; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
.ch-filters .ch-pf__title { margin-top: 4px !important; }
}
@media (min-width: 1025px) {
.ch-filters .wc-block-product-filters__open-overlay, .ch-filters .wc-block-product-filters__overlay-header, .ch-filters .wc-block-product-filters__overlay-footer { display: none !important; }
.ch-filters .wc-block-product-filters__overlay { position: static !important; pointer-events: auto !important; background: transparent !important; z-index: auto; inset: auto; }
.ch-filters .wc-block-product-filters__overlay-wrapper { width: auto; height: auto; }
.ch-filters .wc-block-product-filters__overlay-dialog { position: static !important; width: auto; transform: none !important; transition: none; max-height: none; background: transparent; }
.ch-filters .wc-block-product-filters__overlay-content { padding: 0; overflow: visible; }
}
.ch-catalog__bar { margin-bottom: 16px; }
.wc-block-catalog-sorting, .woocommerce-ordering { margin: 0; }
.wc-block-catalog-sorting select, .woocommerce-ordering select, .orderby { height: 40px; border: 1px solid #E6E6EA; border-radius: 999px; padding: 0 36px 0 14px; font-size: 14px; background: #fff; }
.ch-catalog__main .wp-block-woocommerce-product-collection .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-query-pagination { margin-top: 32px; }
.wp-block-query-pagination-numbers a, .wp-block-query-pagination-numbers .current, .wp-block-query-pagination-previous, .wp-block-query-pagination-next {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid #E6E6EA; font-weight: 600; font-size: 14px; text-decoration: none; color: #171717;
}
.wp-block-query-pagination-numbers .current { background: #171717; color: #fff; border-color: #171717; }
.wp-block-query-pagination-numbers a:hover, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover { border-color: #171717; }
.ch-seo { margin-top: 48px; background: #F4F4F6; border-radius: 24px; padding: 32px 40px; color: #4B5563; font-size: 15px; line-height: 1.6; }
.ch-seo:empty { display: none; }
.wc-block-store-notices:empty, .wp-block-woocommerce-store-notices:empty { display: none; }
/* счётчик для телефона — рядом с кнопками, в шапке каталога прячется */
.ch-count--mobile { display: none; }
@media (max-width: 1024px) {
/* [Филтри] [Подреди] в одну строку, под ними счётчик, потом сетка */
.ch-catalog__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 10px; margin-top: 20px; }
.ch-catalog__cols > .ch-filters { grid-column: 1; flex: none; width: auto; min-width: 0; }
.ch-catalog__cols > .ch-catalog__main { display: contents; }
/* «Подреди» — сама группа рисуется как кнопка-пилюля, а настоящий