/* ============================================================
Kat-kin — общесайтовые правки 15.10.26
Главная (hero, карточки товаров), боковая корзина,
мобильное бургер-меню, плавающие кнопки связи.
============================================================ */
/* ---------- п.2 / Frame 9: hero-баннер во всю ширину ---------- */
/* На мобильной hero остаётся full-bleed 100vw: это делает встроенный
блок #katkin-home-edge-strips-fix. Своих боковых полей не задаём. */
@media (max-width: 768px) {
/* сам текстовый блок (розовая рамка) — с полями 15px от краёв,
при этом видео-фон hero остаётся full-bleed */
body.home .elementor.elementor-13 .e-con-inner > .elementor-element-a99206d {
width: calc(100% - 30px) !important;
max-width: calc(100% - 30px) !important;
flex-basis: auto !important;
margin-left: 15px !important;
margin-right: 15px !important;
align-self: center !important;
}
/* страховка, если JS ещё не выполнился: перенос после «питание».
Размер шрифта привязан к доступной ширине, чтобы на 320–414 px
заголовок оставался в две строки, а на 449 px был ровно 28 px. */
body.home .elementor-element-44442bd .elementor-heading-title {
font-size: clamp(18px, calc((100vw - 82px) * 0.0774), 28px) !important;
line-height: 1 !important;
max-width: 360px;
}
}
/* ---------- п.3 / Frame 9: цена и кнопка в одну строку ---------- */
@media (max-width: 768px) {
/* Frame 9: две равные колонки. Без minmax(0,1fr) Elementor растягивает
треки под min-content карточки и правая колонка уезжает за экран. */
.elementor-element-97489f9 .elementor-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Ширина карточки в Figma — 204.5 px при вьюпорте 449. Ниже она
пропорционально меньше; все размеры внутри считаются от неё. */
.elementor-150 .elementor-element-785a650 {
--ka-card-w: calc(50vw - 20px);
padding-left: 0 !important;
padding-right: 0 !important;
/* 10.11: 341px flat вместо clamp(...,324) — заголовок должен помещаться
строго между картинкой (низ плашки 239) и кнопкой (верх 274 при 341).
Контент постоянной высоты (фото 125x173 фикс) → clamp не нужен. */
min-height: 341px !important;
}
.elementor-150 .elementor-element-8a36d6f .elementor-widget-container {
margin-left: calc(var(--ka-card-w) * 0.043) !important;
margin-right: calc(var(--ka-card-w) * 0.043) !important;
}
.elementor-150 .elementor-element-3839cd6 {
width: 100% !important;
margin: 0 !important;
padding: 0 calc(var(--ka-card-w) * 0.036) 0 calc(var(--ka-card-w) * 0.083) !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: calc(var(--ka-card-w) * 0.02) !important;
}
.elementor-150 .elementor-element-e32c477 {
width: max-content !important;
max-width: 100% !important;
align-self: center !important;
text-align: left !important;
margin: 0 !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* Elementor задаёт цене margin-bottom:15px — из-за него текст прижат
к верху строки. Убираем, чтобы цена стояла слева по центру кнопки. */
.elementor-150 .elementor-element-e32c477 .elementor-widget-container {
margin: 0 !important;
}
.elementor-150 .elementor-element-e32c477 .elementor-heading-title,
.elementor-150 .elementor-element-e32c477 .woocommerce-Price-amount.amount {
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(19px, calc(var(--ka-card-w) * 0.137), 28px) !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #232323 !important;
white-space: nowrap !important;
/* в Figma цена без пробела перед ₽ — убираем наезд на кнопку */
word-spacing: -0.18em !important;
}
.elementor-150 .elementor-element-f7d0cdc {
flex: 0 0 auto !important;
width: clamp(66px, calc(var(--ka-card-w) * 0.499), 102px) !important;
margin: 0 !important;
}
.elementor-150 .elementor-element-f7d0cdc .elementor-widget-container {
margin: 0 !important;
}
.elementor-150 .sp-quick-view,
.elementor-150 .sp-quick-view-icon {
width: 100% !important;
}
.elementor-150 .sp-quick-view-icon {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
}
body .elementor-150 .elementor-element.elementor-element-f7d0cdc .sp-quick-view .sp-quick-view-icon i.sp-icon {
width: 100% !important;
height: clamp(30px, calc(var(--ka-card-w) * 0.225), 46px) !important;
border-radius: 4px !important;
background: #FF2C5B !important;
background-image: none !important;
font-size: clamp(18px, calc(var(--ka-card-w) * 0.137), 28px) !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* заголовок карточки — Comfortaa 18/20 */
body .elementor-150 .elementor-element-40c34c4 .elementor-heading-title {
font-family: 'Comfortaa', sans-serif !important;
font-size: 18px !important;
line-height: 20px !important;
font-weight: 500 !important;
color: #232323 !important;
}
/* плашка изображения — фон убран 10.11 (владелец: «на 768px удали серый фон
за картинкой»), radius 9 оставлен без фона не виден (Frame 9) */
body .elementor-150 .elementor-element-8a36d6f .elementor-widget-container {
background: none !important;
border-radius: 9px !important;
}
body .elementor-150 .elementor-element-8a36d6f img {
border-radius: 9px !important;
}
}
/* ---------- п.9 / Frame 11: боковая корзина ---------- */
@media (max-width: 767.98px) {
.cart-widget-side {
width: 343px !important;
max-width: 86vw;
}
.cart-widget-side .mini_cart_item {
padding: 16px 15px 16px 19px !important;
}
.cart-widget-side .cart-info {
display: grid !important;
grid-template-columns: auto 1fr !important;
column-gap: 14px !important;
row-gap: 8px !important;
align-items: center !important;
padding-left: 10px !important;
padding-right: 0 !important;
}
.cart-widget-side .cart-info .wd-entities-title {
grid-column: 1 / -1 !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 16px !important;
line-height: 20px !important;
font-weight: 500 !important;
color: #040404 !important;
}
.cart-widget-side .cart-info div.quantity {
grid-column: 1 !important;
grid-row: 2 !important;
margin: 0 !important;
}
.cart-widget-side .cart-info > span.quantity {
grid-column: 2 !important;
grid-row: 2 !important;
justify-self: end !important;
width: auto !important;
font-size: 0 !important;
}
.cart-widget-side .cart-info > span.quantity .woocommerce-Price-amount.amount {
font-family: 'Montserrat Alternates', sans-serif !important;
font-size: 20px !important;
line-height: 24px !important;
font-weight: 500 !important;
color: #000 !important;
}
/* итог — того же размера, что цены товаров, и по тому же правому краю */
.cart-widget-side .woocommerce-mini-cart__total .woocommerce-Price-amount.amount {
font-size: 20px !important;
line-height: 24px !important;
font-weight: 500 !important;
}
}
/* ---------- п.5 / Frame 7-8: мобильное бургер-меню ---------- */
.mobile-nav {
display: none !important;
}
body.ks-drawer-lock {
overflow: hidden !important;
}
.ks-drawer {
position: fixed;
inset: 0;
z-index: 100002;
visibility: hidden;
pointer-events: none;
}
.ks-drawer.is-open {
visibility: visible;
pointer-events: auto;
}
.ks-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.25s ease;
}
.ks-drawer.is-open .ks-drawer__backdrop {
opacity: 1;
}
.ks-drawer__panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: 315px;
max-width: 88vw;
padding: 17px;
background: #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
transform: translateX(-105%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
overscroll-behavior: contain;
}
.ks-drawer.is-open .ks-drawer__panel {
transform: translateX(0);
}
.ks-drawer__close {
position: absolute;
top: 20px;
right: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px !important;
min-height: 24px !important;
padding: 0;
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #4D4D4D !important;
cursor: pointer;
z-index: 1;
}
.ks-drawer__close .ka-icon {
width: 24px;
height: 24px;
}
/* wp-custom-css красит .elementor-kit-6 button:hover/:focus в розовый
градиент через !important — перебиваем для крестика. */
html body .ks-drawer .ks-drawer__close:hover,
html body .ks-drawer .ks-drawer__close:focus,
html body .ks-drawer .ks-drawer__close:active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
.ks-drawer__head {
padding: 14px 0 0;
}
.ks-drawer__logo {
display: inline-block;
max-width: 156px;
line-height: 0;
}
.ks-drawer__logo img {
display: block;
width: 156px;
height: auto;
max-width: 100%;
}
.ks-drawer__tagline {
margin-top: 4px;
padding-left: 16px;
font-family: 'Montserrat Alternates', sans-serif;
font-size: 12px;
line-height: 15px;
color: #000;
}
.ks-drawer__user {
display: flex;
align-items: center;
gap: 10px;
min-height: 66px;
margin-top: 38px;
padding: 7px 10px;
border: 1px solid #C5C5C5;
border-radius: 9px;
color: #000;
text-decoration: none;
}
.ks-drawer__avatar {
width: 52px;
height: 52px;
flex: 0 0 52px;
border-radius: 50%;
overflow: hidden;
background: #D9D9D9;
display: inline-flex;
align-items: center;
justify-content: center;
color: #8A8A8A;
}
.ks-drawer__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.ks-drawer__avatar--empty .ka-icon {
width: 24px;
height: 24px;
}
.ks-drawer__who {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
flex: 1;
min-width: 0;
}
.ks-drawer__title {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ks-drawer__sub {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 10px;
line-height: 12px;
color: #4D4D4D;
}
.ks-drawer__points {
display: inline-flex;
align-items: center;
justify-content: center;
width: 73px;
height: 20px;
border-radius: 11px;
background: #FFC6D2;
font-family: 'Montserrat Alternates', sans-serif;
font-size: 10px;
line-height: 12px;
font-weight: 500;
color: #FF2C5B;
}
.ks-drawer__chevron {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: #4D4D4D;
}
.ks-drawer__nav {
display: flex;
flex-direction: column;
margin-top: 21px;
}
.ks-drawer__nav a {
position: relative;
display: flex;
align-items: center;
gap: 17px;
min-height: 52px;
padding: 14px 0 14px 17px;
border: 1px solid transparent;
border-radius: 9px;
box-sizing: border-box;
color: #000;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
/* эффект как у карточек разделов ЛК: розовая окантовка + иконка */
.ks-drawer__nav a:hover,
.ks-drawer__nav a:focus-visible,
.ks-drawer__nav a:active {
border-color: #E91E63;
background: #FFF5F8;
}
.ks-drawer__nav a:hover .ks-drawer__icon,
.ks-drawer__nav a:focus-visible .ks-drawer__icon,
.ks-drawer__nav a:active .ks-drawer__icon {
color: #E91E63;
}
.ks-drawer__icon {
position: absolute;
left: 17px;
display: inline-flex;
width: 18px;
height: 18px;
color: #4D4D4D;
}
.ks-drawer__icon .ka-icon {
width: 18px;
height: 18px;
}
.ks-drawer__link {
margin-left: 35px;
font-family: 'Montserrat Alternates', sans-serif;
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: #000;
}
.ks-drawer__logout {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 20px 18px 10px;
font-family: 'Montserrat Alternates', sans-serif;
font-size: 14px;
line-height: 20px;
color: #4D4D4D;
text-decoration: none;
}
.ks-drawer__logout .ka-icon {
width: 18px;
height: 18px;
}
/* ---------- п.10: одна плавающая кнопка связи ---------- */
.floating-menu.float-menu-1 {
top: auto !important;
bottom: 150px !important;
right: 10px !important;
z-index: 9998;
}
.floating-menu.float-menu-1 .fm-bar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
.floating-menu.float-menu-1 .fm-item {
display: none !important;
}
.floating-menu.float-menu-1.is-open .fm-item {
display: block !important;
}
.floating-menu.float-menu-1 .fm-label {
display: none !important;
}
.floating-menu.float-menu-1 .fm-item .fm-link {
pointer-events: auto;
}
.ks-fm-toggle {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: #FE2C5C !important;
background-image: none !important;
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: transform 0.2s ease; /* 11.11: без background — иначе кнопка мерцает при mouseout */
}
.ks-fm-toggle:hover {
background: #E01F4D;
transform: scale(1.04);
}
.ks-fm-toggle svg {
width: 26px;
height: 26px;
display: block;
}
.ks-fm-toggle .ks-fm-close {
display: none;
}
.floating-menu.float-menu-1.is-open .ks-fm-toggle .ks-fm-chat {
display: none;
}
.floating-menu.float-menu-1.is-open .ks-fm-toggle .ks-fm-close {
display: block;
}
/* ==========================================================================
29.10.26 — документ «Правки по сайту 22.10.26»
========================================================================== */
/* 1. Фото пользователя в шапке: элемент «аккаунт» Woodmart рендерит только
иконку-глиф; JS подставляет ![]()
внутрь .wd-tools-icon, глиф прячем. */
.wd-header-my-account .wd-tools-icon .ka-header-avatar {
display: block;
width: 100%;
height: 100%;
max-width: none;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.wd-header-my-account .wd-tools-icon.ka-has-avatar::before {
display: none;
}
/* 2. Кнопка «Заказать» в меню: шрифт как у остальных пунктов меню
(размер, апперкейс, толщина; семейство уже совпадает — Comfortaa). */
.whb-115136r690l9m2mme7dp .btn {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: normal !important;
line-height: 18.2px;
}
/* 29.10.26: в шапке профиля бургер-меню имя и пилюля баллов — в одну строку. */
.ks-drawer__who {
flex-direction: row;
align-items: center;
gap: 8px;
}
.ks-drawer__title {
flex: 0 1 auto;
min-width: 0;
}
.ks-drawer__points {
width: auto;
height: 22px;
padding: 0 9px;
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
/* чуть больше воздуха в строке профиля, чтобы имя не резалось */
.ks-drawer__user {
gap: 8px;
padding: 6px 8px;
}
.ks-drawer__title {
font-size: 15px;
}
.ks-drawer__who {
gap: 6px;
}
/* 29.10: блок каталога «Магазин» на главной — по ширине шапки.
Внутренний контейнер секции стоит на 80% ширины — растягиваем до 100%,
внешняя обвязка страницы и так совпадает с контейнером шапки (1025px/15px). */
@media (min-width: 1024px) {
.home .elementor-element-7069981 {
width: 100% !important;
max-width: 100% !important;
}
}
/* ==== KATKIN header «ЗАКАЗАТЬ» чуть шире — 04.11.2026 ==== */
a.btn[href="/#katalog"] {
min-width: 100px;
}
/* ==== /KATKIN header «ЗАКАЗАТЬ» ==== */
/* ==== KATKIN header MENU: белый текст + подчёркивание слева направо — 05.11.2026 ==== */
/* Только основное меню в шапке (мобильный drawer и футер не трогаем). */
.whb-header .wd-nav-main > li > a,
.whb-header .wd-nav-main > li > a > .nav-link-text,
.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-nav-main > li > a:hover > .nav-link-text {
color: #ffffff;
}
.whb-header .wd-nav-main > li > a > .nav-link-text {
position: relative;
display: inline-block;
}
/* Подчёркивание: плавно слева направо при наведении, постоянно у активного пункта */
.whb-header .wd-nav-main > li > a > .nav-link-text::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: currentColor;
border-radius: 2px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
transform-origin: left center;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
pointer-events: none;
}
.whb-header .wd-nav-main > li > a:hover > .nav-link-text::after,
.whb-header .wd-nav-main > li > a:focus > .nav-link-text::after,
.whb-header .wd-nav-main > li.current-menu-item > a > .nav-link-text::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ==== /KATKIN header MENU ==== */
/* ==== KATKIN header ACCOUNT: без выпадающего меню при наведении — 05.11.2026 ==== */
/* Аватар остаётся ссылкой в личный кабинет; дропдаун (Мои заказы/Адреса) скрыт. */
.whb-header .wd-header-my-account .wd-dropdown {
display: none !important;
}
/* ==== /KATKIN header ACCOUNT ==== */
/* ==== KATKIN header ACCOUNT: розовый контур аватара — 05.11.2026 ==== */
/* Кольцо было 3px: круг 42px, фото 36px. Стало 2px: круг 40px, фото 36px. */
.whb-header .wd-header-my-account .wd-tools-inner {
width: 40px !important;
height: 40px !important;
padding: 2px !important;
border-radius: 50% !important;
}
/* ==== /KATKIN header ACCOUNT контур ==== */
/* ==== KATKIN header CART: сумма «760 ₽» — белая, 14px как у меню — 05.11.2026 ==== */
.whb-header .wd-header-cart .wd-cart-subtotal,
.whb-header .wd-header-cart .wd-cart-subtotal .woocommerce-Price-amount,
.whb-header .wd-header-cart .wd-cart-subtotal .woocommerce-Price-currencySymbol {
color: #ffffff !important;
font-size: 14px !important;
}
/* ==== /KATKIN header CART ==== */
/* ==== ФИКС 08.11 v3 (+правка 06.11: цена чуть крупнее и чёрная) ====
Причина бага найдена: в Microthemer (загружается после этого файла) есть
правило .katkin-loading-target bdi{font-size:28px!important;color:#040404!important}
(+20px на ≤1199px), а класс .katkin-loading-target loading-ux вешал на
карточку при клике и не снимал. Инлайновый размер на bdi перебивает
унаследованный от родителей, поэтому пин ставим на ВСЕ уровни цены,
включая bdi, с более высокой специфичностью.
06.11: 20px → 22px → 28px, цвет #ef255d → #000000 (запрос владельца). */
html body .elementor-element.elementor-element-e32c477 .elementor-heading-title,
html body .elementor-element.elementor-element-e32c477 .woocommerce-Price-amount.amount,
html body .elementor-element.elementor-element-e32c477 .woocommerce-Price-amount.amount bdi,
html body .elementor-element.elementor-element-e32c477 .woocommerce-Price-currencySymbol {
font-size: 28px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
color: #000000 !important;
}
/* Нейтрализация Microthemer-правила в loading-состоянии (запасной пояс) */
html body .katkin-loading-target bdi,
html body .katkin-loading-target .woocommerce-Price-amount.amount {
font-size: 28px !important;
color: #000000 !important;
margin-left: 0 !important;
}
/* Кнопка быстрого просмотра не должна залипать полупрозрачной после ошибки AJAX */
html body .elementor-150 .sp-quick-view {
opacity: 1 !important;
}
/* ==== /ФИКС 08.11 v3 ==== */
/* ==== KATKIN loading spinner: толще, серая дуга — 06.11.2026 ====
Источник спиннера — mu-plugin katkin-loading-ux (стили в wp_footer,
3px обводка + бордовая дуга #8f1d40). Здесь переопределяем толщину
и цвет дуги, сам mu-plugin не трогаем. !important перекрывает
порядок загрузки (footer позже head).
06.11 (вечер): дуга чёрный → серый #666666 (запрос владельца). */
html body .katkin-loading-spinner {
border-width: 6px !important;
border-top-color: #666666 !important;
}
html body .katkin-page-loader .katkin-loading-spinner {
border-width: 8px !important;
border-top-color: #666666 !important;
}
/* ==== /KATKIN loading spinner ==== */
/* ==== KATKIN quick-view кнопка: без мини-спиннера — 06.11.2026 ====
shop-press при AJAX вешает класс .loading на .sp-quick-view и показывает
маленький спиннер (::after 16px, sp-quick-view-spin) + приглушает иконку
(opacity .3). Владелец попросил убрать анимацию внутри розовой кнопки:
спиннер скрыт, иконка всегда непрозрачна. Сам AJAX и класс loading не тронуты. */
html body .sp-quick-view.loading::after,
html body .sp-quick-view.overlay.loading::after {
content: none !important;
display: none !important;
}
html body .sp-quick-view.loading .sp-quick-view-icon,
html body .sp-quick-view.loading .sp-quick-view-label {
opacity: 1 !important;
}
/* ==== /KATKIN quick-view кнопка ==== */
/* ==== KATKIN quick-view PopUp: видимый крестик закрытия — 06.11.2026 ====
Крестик #sp-close-quick-view существует в разметке, но инлайн-CSS на
странице прячет его: #sp-close-quick-view svg { display:none !important }
и background:none !important на самой кнопке — визуально крестика нет.
Возвращаем видимость и делаем заметным: круг 36px, тёмная иконка 14px,
hover — фирменный розовый #FE2C5C с белой иконкой.
Специфичность html body #a #b перебивает инлайновый #a svg c !important. */
html body #sp-quick-view-overlay #sp-close-quick-view {
background: #f1f2f3 !important;
width: 36px !important;
height: 36px !important;
right: 15px !important;
top: 15px !important;
border-radius: 50% !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s ease !important;
}
html body #sp-quick-view-overlay #sp-close-quick-view svg {
display: block !important;
position: static !important;
width: 14px !important;
height: 14px !important;
}
html body #sp-quick-view-overlay #sp-close-quick-view svg path {
fill: #232323 !important;
transition: fill 0.2s ease !important;
}
html body #sp-quick-view-overlay #sp-close-quick-view:hover {
background: #fe2c5c !important;
}
html body #sp-quick-view-overlay #sp-close-quick-view:hover svg path {
fill: #ffffff !important;
}
/* ==== /KATKIN quick-view PopUp крестик ==== */
/* ==== KATKIN quick-view PopUp: крестик не уезжает при скролле — 06.11.2026 ====
Крестик absolute внутри #sp-quick-view-content, а на ≤768px контент попапа
имеет height:80% + overflow-y:auto — при прокрутке описания товара крестик
уезжал вверх вместе с контентом и пропадал (owner: «не закрывает при нажатии»).
На мобильных делаем крестик fixed: прибит к вьюпорту в правом верхнем углу
попапа, не участвует в скролле. (Плюс touch-страховка в katkin-site.js.) */
@media (max-width: 768px) {
html body #sp-quick-view-overlay #sp-close-quick-view {
position: fixed !important;
top: calc(5% + 14px) !important;
right: 12px !important;
}
}
/* ==== /KATKIN quick-view PopUp крестик fixed ==== */
/* ==== KATKIN quick-view PopUp: блок покупки по макету — 06.11.2026 ====
Макет владельца: ряд 1 — поле количества (белая подложка, рамка 2px
#FE2C5C, скругление 10px, красные −/+) + цена товара справа (вставляется
из карточки через katkin-site.js, в разметке попапа цены нет);
ряд 2 — контурная кнопка «В корзину» (белый фон, рамка 2px, красный
текст) на всю ширину. Hover кнопки — розовая заливка + белый текст.
Селекторы ограничены попапом (#sp-quick-view-content), страница товара
и карточки каталога не затронуты. */
html body #sp-quick-view-content form.cart {
align-items: center !important;
gap: 0 !important; /* отступ рядов задаём margin'ом кнопки: 8px по запросу владельца */
width: 78% !important; /* 07.11.2026: было 68% - при колонке 360px количество+цена не влезали в строку; 78% = 281px */ /* −20% от прежних 85%: контейнер = ширине кнопки, цена не вылезает */
max-width: 78% !important;
}
/* На мобильных контейнер снова на всю ширину (иначе поле 210px не влезает в ряд с ценой) */
@media (max-width: 768px) {
html body #sp-quick-view-content form.cart {
width: 100% !important;
max-width: 100% !important;
}
}
html body #sp-quick-view-content form.cart .quantity {
flex: 0 0 auto !important;
margin: 0 !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap {
background: #ffffff !important;
border: 1px solid #fe2c5c !important;
border-radius: 5px !important;
width: 158px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 8px !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap input.qty {
border: none !important;
background: transparent !important;
text-align: center !important;
color: #fe2c5c !important;
font-size: 16px !important;
font-weight: 500 !important;
width: 100% !important;
height: 100% !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap input.qty::-webkit-outer-spin-button,
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-control {
color: #fe2c5c !important;
background: transparent !important;
border: none !important;
width: 19px !important;
height: 19px !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-control svg rect,
html body #sp-quick-view-content form.cart .sp-quantity-control svg path {
fill: currentColor !important;
stroke: currentColor !important; /* жирнее: обводка добавляет толщину линиям +/− */
stroke-width: 1px !important;
}
/* У .ka-qv-price стили сайта ставят flex-basis:100% и margin-left:0 —
перебиваем повышенной специфичностью (3 id) + явными flex-свойствами */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price {
flex: 0 0 auto !important;
flex-basis: auto !important;
width: auto !important;
max-width: 50% !important;
margin: 0 0 0 auto !important;
padding-left: 12px !important;
}
html body #sp-quick-view-content form.cart .ka-qv-price .woocommerce-Price-amount {
font-family: 'Montserrat', sans-serif !important;
font-size: 30px !important;
font-weight: 400 !important;
color: #fe2c5c !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* ВАЖНО: текст цены обёрнут в , у которого собственное правило CSS попапа
(28px, weight 500, чёрный #000000) — оно перебивает наследование от span,
поэтому пин ставим и на bdi (и на символ ₽ внутри него). Без этого правила
любые изменения font-size/color на span.amount визуально не применяются. */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price .woocommerce-Price-amount bdi,
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
font-family: 'Montserrat', sans-serif !important;
font-size: 30px !important;
font-weight: 400 !important;
color: #fe2c5c !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
html body #sp-quick-view-content form.cart .single_add_to_cart_button {
flex-basis: 100% !important;
width: 100% !important;
margin: 8px 0 0 !important; /* левый край кнопки = левый край поля количества */
height: 50px !important;
border-radius: 5px !important;
background: #ffffff !important;
}
/* Радиус кнопки: какой-то сайт-CSS с !important держит 10px — перебиваем 3-id специфичностью */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .single_add_to_cart_button {
border-radius: 5px !important;
background-image: none !important;
border: 1px solid #fe2c5c !important;
color: #fe2c5c !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
text-align: center !important;
transition: background 0.2s ease, color 0.2s ease !important;
cursor: pointer !important;
}
/* Hover кнопки: цвет текста держал сайт-CSS (как border-radius) — усиленный
селектор + JS-страховка с инлайновым color в katkin-site.js */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart button.single_add_to_cart_button.button.alt:hover {
background: #fe2c5c !important;
background-image: none !important;
color: #ffffff !important;
}
/* ==== /KATKIN quick-view блок покупки ==== */
/* ==== KATKIN 07.11.2026: быстрый просмотр — количество, экраны <332px: ширина −15% ==== */
@media (max-width: 331.98px) {
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap {
width: calc(158px * 0.85) !important; /* 158px − 15% = 134.3px */
}
}
/* ==== KATKIN 07.11.2026: быстрый просмотр — ширина по формуле владельца ==== */
/* Попап = 40px отступы по бокам + 20px отступ фото + фото 274px + 60px зазор + контент 360px ≈ 796px.
(исходно 880px, затем 776px при отступах 30px; +20px на увеличение боковых отступов 30→40)
Фото натуральной шириной 274.4px (392 × 0.7), оболочка fit-content, отступ слева 20px.
Колонка формы сдвигается только визуально (position, а не margin/flex); ширина capped 360px. */
@media (min-width: 1024px) {
html body #sp-quick-view-content {
width: 796px !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
html body #sp-quick-view-content .elementor-element-24a5eed .elementor-element-3740729 img {
width: 274.4px !important;
height: auto !important;
}
html body #sp-quick-view-content .elementor-element-24a5eed .elementor-element-3740729 .elementor-widget-container {
width: fit-content !important;
margin-left: 20px !important;
}
html body #sp-quick-view-content .elementor-element-24a5eed .elementor-element-7d15157 {
position: relative !important;
left: 0 !important;
min-width: 360px !important;
max-width: 360px !important; /* min+max: колонка контента ровно 360px при любой ширине ряда */
}
/* 07.11.2026: межстрочный интервал описания и состава — 1.6 (25.6px) → 1.4 (22.4px) */
html body #sp-quick-view-content .elementor-element-75c3233 .elementor-widget-container,
html body #sp-quick-view-content .elementor-element-fcf64ef .elementor-widget-container {
line-height: 1.4 !important;
}
}
/* ==== KATKIN 07.11.2026: адаптив 768–1023px — фото по высоте блока контента ==== */
/* В этой зоне основной дизайн (≥1024px) не действует, работает нативная вёрстка 880px.
Раньше фото (392×542) само задавало высоту ряда. Теперь оно вынуто из потока:
ряд получает высоту контентной колонки справа, а фото заполняет её целиком
с сохранением пропорций (object-fit: contain). Колонки становятся одной высоты. */
@media (min-width: 769px) and (max-width: 1023.98px) {
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget {
height: 100% !important;
}
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-container {
height: 100% !important;
position: relative !important;
}
html body #sp-quick-view-content .elementor-element-3740729 img.attachment-full {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
}
/* ==== KATKIN 07.11.2026: мобильная зона ≤768px — фото компактной карточкой по центру ==== */
/* Фото максимум 182×224 (на 30% меньше первых 260×320), по центру, пропорции сохранены (contain),
внешние отступы 30px сверху и снизу. */
@media (max-width: 768.98px) {
html body #sp-quick-view-content .elementor-element-3740729 img.attachment-full {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 182px !important;
max-height: 224px !important;
object-fit: contain !important;
margin: 30px auto !important;
}
/* 07.11.2026 (вечер): строка покупки между заголовком и описанием (flex order),
ширина формы не больше 280px */
html body #sp-quick-view-content .elementor-element-7d15157 > .elementor-element-99b8bb7 { order: 1 !important; }
/* 09.11: сначала подзаголовок (описание), затем блок покупки (владелец);
было: order 2 у формы, order 3 у описания */
html body #sp-quick-view-content .elementor-element-7d15157 > .elementor-element-75c3233 { order: 2 !important; }
html body #sp-quick-view-content .elementor-element-7d15157 > .elementor-element-3b519fb { order: 3 !important; }
html body #sp-quick-view-content .elementor-element-7d15157 > .elementor-element-fcf64ef { order: 4 !important; }
html body #sp-quick-view-content .elementor-element-7d15157 form.cart {
max-width: 280px !important;
}
}
/* ==== KATKIN 09.11.2026: быстрый просмотр — блокировка скролла страницы ==== */
/* shop-press при открытом попапе не блокирует прокрутку документа — страница
за ним скроллится. Класс ka-qv-lock ставит katkin-site.js на при
quick_view_loaded и снимает при закрытии (крестик/фон/touch). overflow на
html и body — страховка для iOS, где только html не всегда достаточно. */
html.ka-qv-lock,
html.ka-qv-lock body {
overflow: hidden !important;
}
/* ==== KATKIN 09.11.2026: быстрый просмотр — затемнение фона попапа ==== */
/* Владелец: «заливку темнее и прозрачнее». Было: плагин даёт #f6f7f8f7 — светло-серая
вуаль 97% непрозрачности, страница за попапом почти не видна. Стало: тёмная
полупрозрачная вуаль (#070809 — тёмный из палитры сайта, затемнение 70%):
фон за попапом мягко просвечивает в затемнении, классический вид модалки. */
html body #sp-quick-view-overlay {
background: rgba(7, 8, 9, 0.7) !important;
/* 09.11.2026 (позже): лёгкое размытие фона за попапом («матовое стекло»),
-webkit- — для Safari; сам попап остаётся чётким. */
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
}
/* ==== KATKIN 09.11.2026: быстрый просмотр — цена не переносится при сужении ==== */
/* Владелец: «при изменении размера экрана цена перескакивает на следующую строку».
Было: form.cart — flex с flex-wrap:wrap; строка 1 (количество 158px + цена ~96px)
влезала впритык (255px), любое сужение формы роняло цену вниз. Стало: grid —
строка 1 жёстко «количество + цена» (колонка цены 1fr, перенос исключён),
строка 2 — кнопка «В корзину» на всю ширину, как и было (margin-top 8px и
align-items:center сохранены по замеру 09.11 при ширине формы 255px). */
html body #sp-quick-view-content form.cart {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
}
html body #sp-quick-view-content form.cart .ka-qv-price {
white-space: nowrap !important;
}
html body #sp-quick-view-content form.cart .single_add_to_cart_button {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
/* 09.11 (позже): цена прижата к правому краю формы — правая грань цены ровно по
правой грани кнопки «В корзину», выступание исключено. Замер при окне 771px:
старое правило (выше, с margin:0 0 0 auto и max-width:50%) сжимало div цены до
50% колонки (61px), и текст «170 ₽» (78px) переливался через край формы на 43px.
Селектор той же специфичности (2 id), идёт позже — перебивает auto-маржин и
потолок 50%: div растягивается на всю колонку цены, текст выровнен вправо. */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price {
margin: 0 !important;
max-width: none !important;
justify-self: stretch !important;
text-align: right !important;
}
/* ==== KATKIN 09.11.2026 (ночь): зона 600–768px — две колонки, Состав уходит вниз ==== */
/* Задача владельца: на 600–768px строка 1 = фото (слева) | заголовок, количество +
«В корзину», описание (справа), фото и правый контент одной высоты; строка 2 (на
всю ширину) = Состав над блоком «Срок годности / Способы скармливания». Плюс
вернуть попапу внутренний отступ: плагин на ≤768px даёт padding:10px — заголовок
прижат к потолку, тексты к левому краю.
Механика: ряд 24a5eed и колонка 7d15157 становятся display:contents — их виджеты
сами превращаются в ячейки грида контейнера 2afef92 и раскладываются по
именованным областям. Переносов в DOM нет, ширины/flex колонок не трогаем. */
@media (min-width: 600px) and (max-width: 768.98px) {
/* 1) внутренний отступ попапа вместо плагинных 10px */
html body #sp-quick-view-overlay #sp-quick-view-content {
padding: 30px 24px !important;
}
/* 2) контейнер ряда — грид с двумя колонками и именованными областями */
html body #sp-quick-view-content .elementor-element-2afef92 {
display: grid !important;
/* 09.11 (позже): правая колонка (заголовок/форма/описание) не деформируется —
фикс 300px (её ширина на верхней границе зоны); всё сужение экрана
600→768px забирает фотоколонка (minmax(0,1fr)). */
grid-template-columns: minmax(0, 1fr) 300px !important;
column-gap: 20px !important;
row-gap: 14px !important;
grid-template-areas:
"photo title"
"photo descr"
"photo form"
"sostav sostav"
"bottom bottom" !important;
/* 09.11: под заголовком сначала описание, затем блок покупки (владелец) */
}
/* 3) ряд и колонка контента — «прозрачные», виджеты попадают в ячейки напрямую */
html body #sp-quick-view-content .elementor-element-24a5eed,
html body #sp-quick-view-content .elementor-element-7d15157 {
display: contents !important;
}
/* 4) рассадка виджетов по областям */
html body #sp-quick-view-content .elementor-element-3740729 { grid-area: photo !important; }
html body #sp-quick-view-content .elementor-element-99b8bb7 { grid-area: title !important; }
html body #sp-quick-view-content .elementor-element-3b519fb { grid-area: form !important; }
html body #sp-quick-view-content .elementor-element-75c3233 { grid-area: descr !important; }
html body #sp-quick-view-content .elementor-element-fcf64ef { grid-area: sostav !important; }
html body #sp-quick-view-content .elementor-element-c63c313 { grid-area: bottom !important; }
/* 5) фото одной высоты с правым контентом: колонка тянется по строкам 1–3,
картинка заполняет её целиком (contain), перекрывая компактные правила
мобильной зоны ≤768px (те — для стека <600px) */
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image,
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-container {
height: 100% !important;
position: relative !important;
}
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image img.attachment-full {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
margin: 0 !important;
}
}
/* 09.11.2026 (позже): описание товара в попапе (75c3233) — типографика по запросу
владельца: шрифт 14px (было 16px), межстрочный 1.2 (было 1.4). Селектор с 2 id —
перебивает типографику шаблона и наши прошлые правила интервалов. */
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-75c3233 .elementor-widget-container {
font-size: 14px !important;
line-height: 1.3 !important; /* 09.11 (позже): владелец поднял с 1.2 до 1.3 */
}
/* ==== KATKIN 09.11.2026 (позже): десктоп ≥1024px — фото не выше контентной колонки ==== */
/* Владелец: «фото товара не может превышать по высоте столб с контентом справа».
Было: картинка в потоке (274.4px ширина, height auto ≈ 380px) задавала высоту
ряда и выступала ниже контента (контентная колонка ~226px после типографики).
Стало: тот же паттерн, что в зоне 769–1023 — картинка вынута из потока
(absolute + contain), высоту ряда задаёт контентная колонка, фото заполняет
свою колонку ровно по ней, не искажаясь. Отступ слева 20px сохранён. */
@media (min-width: 1024px) {
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image {
height: 100% !important;
position: relative !important;
}
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-3740729 .elementor-widget-container {
height: 100% !important;
position: relative !important;
width: auto !important; /* перебивает fit-content старого правила */
margin-left: 20px !important;
}
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image img.attachment-full {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
margin: 0 !important;
}
}
/* 09.11.2026 (позже): описание прижато к заголовку. Владелец: «чуть ближе к заголовку».
Стандартный зазор колонки 20px между заголовком и описанием сокращён до 10px
(отрицательный margin-top виджета описания). Только зоны ≥769px, где описание
идёт сразу за заголовком; в зоне 600–768px описание стоит после формы покупки —
там расстановка не тронута. Зазоры описание↔Состав и Состав↔форма не менялись. */
@media (min-width: 769px) {
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-75c3233 {
margin-top: -10px !important;
}
}
/* 09.11.2026 (позже): блоку «Срок годности / Способы скармливания» (c63c313)
добавлен отступ сверху: +10px (margin-top). Зазор от ряда фото+контент на
десктопе: было 20px (зазор контейнера) → стало 30px. Во всех зонах. */
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-c63c313 {
margin-top: 10px !important;
}
/* ==== KATKIN 09.11.2026 (позже): описание скрывается на 500–599px ==== */
/* Владелец: «при ширине экрана 500-599px этот текст должен исчезать» (описание
товара 75c3233 «Оптимальный выбор…»). Ниже 500px и на 600px+ описание видно. */
@media (min-width: 500px) and (max-width: 599.98px) {
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-75c3233 {
display: none !important;
}
}
/* ==== KATKIN 09.11.2026 (позже): зона 500–599px — две колонки + компактный блок покупки ==== */
/* Владелец: справа от фото — заголовок и блок покупки; «всё не влезет» → уменьшены:
количество 158→120px (высота 36→32px, шрифт 16→14), кнопка «В корзину» 50→40px
(шрифт 14px), цена 30→22px. Описание в этой зоне скрыто (правка выше). Состав и
«Срок годности/Способы скармливания» — полные строки под рядом. Контентная
колонка фиксирована 210px, фото — единственная «резиновая» колонка и по высоте
равна правой. Границы зоны: 500–599.98px (499 — старый стек, 600 — зона 600–768). */
@media (min-width: 500px) and (max-width: 599.98px) {
html body #sp-quick-view-content .elementor-element-2afef92 {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 210px !important;
column-gap: 16px !important;
row-gap: 12px !important;
grid-template-areas:
"photo title"
"photo form"
"sostav sostav"
"bottom bottom" !important;
}
html body #sp-quick-view-content .elementor-element-24a5eed,
html body #sp-quick-view-content .elementor-element-7d15157 {
display: contents !important;
}
html body #sp-quick-view-content .elementor-element-3740729 { grid-area: photo !important; }
html body #sp-quick-view-content .elementor-element-99b8bb7 { grid-area: title !important; }
html body #sp-quick-view-content .elementor-element-3b519fb { grid-area: form !important; }
html body #sp-quick-view-content .elementor-element-fcf64ef { grid-area: sostav !important; }
html body #sp-quick-view-content .elementor-element-c63c313 { grid-area: bottom !important; }
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image,
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-container {
height: 100% !important;
position: relative !important;
}
html body #sp-quick-view-content .elementor-element-3740729 .elementor-widget-image img.attachment-full {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
margin: 0 !important;
}
/* компактное количество */
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap {
width: 120px !important;
height: 32px !important;
padding: 0 6px !important;
}
html body #sp-quick-view-content form.cart .sp-quantity-input-modern-wrap input.qty {
font-size: 14px !important;
}
/* компактная кнопка «В корзину» */
html body #sp-quick-view-content form.cart .single_add_to_cart_button {
height: 40px !important;
margin: 6px 0 0 !important;
}
/* шрифт кнопки: тема держит 18px сильным селектором — перебиваем 2 id */
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .single_add_to_cart_button {
font-size: 14px !important;
}
/* компактная цена */
html body #sp-quick-view-content .elementor-element-3b519fb form.cart .ka-qv-price .woocommerce-Price-amount {
font-size: 22px !important;
}
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price .woocommerce-Price-amount bdi,
html body #sp-quick-view-overlay #sp-quick-view-content form.cart .ka-qv-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
font-size: 22px !important;
}
}
/* 09.11.2026 (позже): зона 500–599px — отступы попапа и заголовка.
Внутренние отступы попапа: плагин на ≤768px даёт 10px — увеличиваем до
30px 24px (как в зоне 600–768). Заголовку — нижний отступ на размер высоты
кнопки «В корзину» (42px в этой зоне), воздух между заголовком и покупкой. */
@media (min-width: 500px) and (max-width: 599.98px) {
html body #sp-quick-view-overlay #sp-quick-view-content {
padding: 30px 24px !important;
}
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-99b8bb7 {
margin-bottom: 42px !important;
}
}
/* 09.11.2026 (позже): блоку «Состав» (fcf64ef) отступ сверху 20px. Зоны ≤768px,
где Состав — отдельная полная строка под рядом фото+контент (грид-зона 600–768,
компактная 500–599, стек <600). На десктопе ≥769px Состав внутри правой колонки
с утверждёнными зазорами — не тронут. */
@media (max-width: 768.98px) {
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-fcf64ef {
margin-top: 20px !important;
}
}
/* 09.11.2026 (позже): на ≤499px зазор заголовок↔описание 20→10px (как на десктопе).
В мобильном стеке порядок: заголовок → описание → форма → Состав;
отрицательный margin-top описания подтягивает его к заголовку. */
@media (max-width: 499.98px) {
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-75c3233 {
margin-top: -10px !important;
}
}
/* ==== KATKIN 09.11.2026 (позже): тень фото товара в попапе ==== */
/* Владелец: «добавить красивую тень фотографии». Фото — прозрачный PNG/WebP, поэтому
box-shadow (прямоугольник вокруг блока) не подходит — тень должна повторять контур
товара. Используем drop-shadow, который строится по альфа-каналу картинки.
Два слоя: близкая короткая + дальняя рассеянная — мягкая естественная тень.
Все зоны (десктоп, 769–1023, 600–768, 500–599, стек <600). */
html body #sp-quick-view-overlay #sp-quick-view-content .elementor-element-3740729 img.attachment-full {
/* 09.11 (позже): владелец — «сделай тень заметнее» (плотность и разлёт увеличены) */
filter:
drop-shadow(0 6px 12px rgba(7, 8, 9, 0.18))
drop-shadow(0 20px 40px rgba(7, 8, 9, 0.28)) !important;
}
/* ==== KATKIN 09.11.2026: фото в карточках каталога вдвое меньше ==== */
/* Владелец: «в каждой карточке товара находится фото, сделай его в 2 раза меньше».
Было 250×250 (натуральный размер миниатюры; на мобильных ограничивалось
контейнером). Стало 125px по ширине, высота auto (квадратные миниатюры →
125×125), центрирование сохранено (inline-block по центру контейнера).
Затрагивает виджет фото 8a36d6f шаблона карточек 150 (каталог на главной);
карточки страницы /shop/ используют другую вёрстку — не задеты. */
html body .elementor-element-8a36d6f img {
width: 125px !important;
height: auto !important;
}
/* 09.11 (позже): жёсткий лимит 125px для фото карточек. После смены миниатюры на
полный размер ширина упорно держалась ~280px — некое !important-правило-конкурент
(подозрение: Microthemer-стили каталога) перебивает селектор без ID. Бьём
селектором с id секции каталога + max-width как гарантией. */
html body #ka-to-catalog .elementor-element-8a36d6f img.attachment-full {
width: 125px !important;
max-width: 125px !important;
height: auto !important;
/* 09.11 (позже): потолок высоты 173px — у «Хвостика кролика» оригинал
~150×1800 (виден был как башня 1500px). contain — весь товар виден,
без обрезки; обычные вертикальные фото (370×512) заполняют как раньше. */
max-height: 173px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
/* 09.11 (позже): строки грида каталога — по контенту, а не 1fr. После включения
полноразмерных фото строковый цикл (grid-auto-rows: 1fr) раздул ВСЕ карточки
до 1727px (строки грида равняются по самой высокой, контент растягивается по
строке — замкнутый круг). auto возвращает естественную высоту ~470px
(min-height шаблона 470px сохраняется, карточки остаются равными). */
html body #ka-to-catalog .elementor-loop-container {
grid-auto-rows: auto !important;
}
/* ==== KATKIN 10.11.2026: отступ 30px сверху и снизу у фото в карточках ==== */
/* Владелец: «добавь отступ 30px сверху и снизу у каждой фотографии в каждой карточке».
Фото — виджет 8a36d6f шаблона карточек 150 (каталог на главной). 30px сверху и
снизу, по бокам auto — центрирование сохраняется. Селектор с id секции:
без id правило перебивают конкуренты (Microthemer) — см. соседние секции 09.11.
Строки грида auto (grid-auto-rows выше), карточки подрастают на 60px сами. */
html body #ka-to-catalog .elementor-element-8a36d6f img.attachment-full {
margin: 30px auto !important;
}
/* ==== KATKIN 10.11.2026: тень фото в карточках каталога ==== */
/* Владелец: «добавь тень фотографиям». drop-shadow (не box-shadow): фото товаров —
PNG-стиль с прозрачным фоном, тень повторяет силуэт пачки, а не прямоугольник.
Параметры по образцу одобренной тени фото в quick-view попапе (0 20px 40px / 0.28),
пропорционально уменьшены под фото 125px. Тот же селектор-с-ID (Microthemer). */
html body #ka-to-catalog .elementor-element-8a36d6f img.attachment-full {
filter: drop-shadow(0 12px 22px rgba(7, 8, 9, 0.25)) !important;
}
/* ==== KATKIN 10.11.2026: зазор колонок = зазору строк + тень карточек ==== */
/* Владелец: «отступ у колонок больше чем отступ строк — уменьши отступ колонок до
размера отступа между строками» + «добавь небольшую тень карточкам».
Замер 10.11: column-gap 30px, row-gap 15px → колонки 15px. Тень: у видимой коробки
карточки (785a650, рамка 1px #F8F8F8, радиус 10px) шаблонная тень 0 0 2px rgba(0,0,0,.5)
выглядит как грязный ободок → мягкая рассеянная вместо неё. Селекторы с id секции
(Microthemer/шаблон перебивают без id). */
html body #ka-to-catalog .elementor-loop-container.elementor-grid {
column-gap: 15px !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
box-shadow: 0 4px 14px rgba(7, 8, 9, 0.08) !important;
}
/* ==== KATKIN 10.11.2026 (поправка): рамка-ободок + hover карточек возвращены ==== */
/* Владелец: «пропали рамки карточек и эффект при наведении». Причина: секция выше с
!important перебила шаблонные состояния контейнера 785a650 (Elementor 150):
покой = 0 0 2px rgba(0,0,0,.5) — визуально РАМКА карточки (настоящий border #F8F8F8
невидим на белом), hover = 0 0 14.8px rgba(0,0,0,.5) — подсветка при наведении.
Восстанавливаем оба состояния как в шаблоне + мягкая тень 0 4px 14px остаётся вторым
слоем в обоих состояниях. Селектор с id секции — специфика Microthemer/шаблона. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), 0 4px 14px rgba(7, 8, 9, 0.08) !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-785a650:hover {
box-shadow: 0 0 14.8px 0 rgba(0, 0, 0, 0.5), 0 4px 14px rgba(7, 8, 9, 0.08) !important;
}
/* ==== KATKIN 10.11.2026 (уточнение): мягкая тень карточки видна и без наведения ==== */
/* Владелец: «бордер и тень при наведении должны остаться без изменений, я хочу чтобы
добавилась тень за карточкой даже без эффекта наведения». Мягкий слой в покое 8%
был глазу незаметен (computed был, визуала нет) → 0 5px 16px rgba(7,8,9,0.15).
Ободок 0 0 2px (.5) в покое сохранён тем же правилом; hover-правило секции выше
(специфичнее за счёт :hover) продолжает действовать без изменений. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), 0 5px 16px rgba(7, 8, 9, 0.15) !important;
}
/* ==== KATKIN 10.11.2026 (параметры владельца): тень покоя карточек ==== */
/* Владелец: «тень: x=0, y=0, blur 14,9, spread 0, цвет 000000 40%».
Мягкий слой покоя заменён на 0 0 14.9px 0 rgba(0,0,0,0.4); ободок-бордер
0 0 2px (.5) оставлен в том же правиле; hover-правило секции выше
(14.8px + 4px/14px 8%) действует без изменений за счёт :hover-специфичности. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 14.9px 0 rgba(0, 0, 0, 0.4) !important;
}
/* ==== KATKIN 10.11.2026 (убран бордер-ободок карточек) ==== */
/* Владелец: «у карточек товаров есть бордер, удали его». Убран слой-ободок
0 0 2px 0 rgba(0,0,0,.5) из тени покоя (это он визуально был рамкой);
осталась ровно тень с параметрами владельца: 0 0 14.9px 0 rgba(0,0,0,0.4).
Hover-правило секции выше без изменений. Настоящий border шаблона (1px #F8F8F8)
не трогали: на белом фоне невидим, владелец называл бордером именно ободок-тень. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
box-shadow: 0 0 14.9px 0 rgba(0, 0, 0, 0.4) !important;
}
/* ==== KATKIN 10.11.2026: карточки каталога уже ==== */
/* Владелец: «сделай карточки товаров поуже». Грид 995px → max-width 870px:
3 колонки по 280px (было 322px, −13%) + зазоры 15px, грид центрируется
auto-маржинами в родителе. Ниже 870px вьюпорт грид резиновый как раньше.
Тот же селектор с id секции (Microthemer). Подстройка ширины — по запросу владельца. */
html body #ka-to-catalog .elementor-loop-container.elementor-grid {
max-width: 870px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==== KATKIN 10.11.2026 (параметры владельца): тень фото карточек ==== */
/* Владелец: «тень фотографий в карточках: x=0, y=0, blur=28.6, spread=1,
цвет 000000 40%». Прежняя тень была drop-shadow (без spread) — фильтр гасим,
вместо него box-shadow 0 0 28.6px 1px rgba(0,0,0,0.4) (радиус 10px у img
задан шаблоном 150, тень последует скруглению). Селектор с id секции. */
html body #ka-to-catalog .elementor-element-8a36d6f img.attachment-full {
filter: none !important;
box-shadow: 0 0 28.6px 1px rgba(0, 0, 0, 0.4) !important;
}
/* ==== KATKIN 10.11.2026: шрифт заголовка карточки 17px medium ==== */
/* Владелец: «сделай заголовку шрифт 17px medium». Было 15px/700 (Comfortaa).
Ставим 17px/500. Сайт подгружает Comfortaa в весах 600;700 — при 500 браузер
выбирает ближайший доступный (600); при необходимости точного 500 добавить вес
в загрузку шрифта. Селектор с id секции. */
html body #ka-to-catalog .elementor-element-40c34c4 .elementor-heading-title {
font-size: 17px !important;
font-weight: 500 !important;
}
/* ==== KATKIN 10.11.2026: заголовок карточки regular (400) ==== */
/* Владелец: «сделай все такие не medium, а regular». font-weight 500 → 400
(17px остаётся). Настоящий 400 появляется после до-загрузки весов Comfortaa
через katkin-site.js (секция comfortaa-full того же дня). Селектор с id секции. */
html body #ka-to-catalog .elementor-element-40c34c4 .elementor-heading-title {
font-weight: 400 !important;
}
/* ==== KATKIN 10.11.2026: кнопка корзины карточек 120x46, 20px от углов ==== */
/* Владелец: «увеличь ширину кнопки до 120px и высоту до 46px» + «отступы от нижнего
и правого края 20px». Кнопка = i.sp-icon (розовый градиент) внутри span.sp-quick-view-icon
внутри .sp-quick-view (клик открывает quick-view). Absolute-прикол к правому-нижнему
углу видимой коробки карточки 785a650 — точные 20/20 независимо от ряда цены.
line-height 46px держит глиф корзины по центру вертикали. Селекторы с id секции. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 {
position: relative !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view {
position: absolute !important;
right: 20px !important;
bottom: 20px !important;
width: 120px !important;
height: 46px !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon {
width: 120px !important;
height: 46px !important;
margin: 0 !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon i {
width: 120px !important;
height: 46px !important;
line-height: 46px !important;
}
/* ==== KATKIN 10.11.2026 (исправление): кнопка корзины точные 120x46 и 20/20 ==== */
/* Диагностика 10.11: (1) rect иконки был 120x56 — у i.sp-icon box-sizing:content-box
и padding 5px → border-box даёт ровно 120x46; (2) absolute .sp-quick-view якорился
к f7d0cdc/3839cd6 (Elementor ставит им position:relative) → 73/31 вместо 20/20;
static на обеих обёртках делает якорем коробку карточки 785a650 (relative выше). */
html body #ka-to-catalog .e-loop-item .elementor-element-3839cd6,
html body #ka-to-catalog .e-loop-item .elementor-element-f7d0cdc {
position: static !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon i {
box-sizing: border-box !important;
}
/* ==== KATKIN 10.11.2026: глиф корзины по центру кнопки ==== */
/* Владелец: «иконка корзины внутри кнопки не по центру, выровни». Глиф = ::before
шрифта jkiticon; вертикаль на line-height — метрики иконку-шрифтов кривые.
flex на i.sp-icon центрирует ::before по em-коробке точно в обе оси. */
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon i {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
}
/* ==== KATKIN 10.11.2026: цена на одной линии с кнопкой корзины ==== */
/* Владелец: «выровни цену горизонтально по кнопке». Замер: центр цены был на 33px
от низа карточки, центр кнопки на 44px → margin-bottom 11px на ряду цены 3839cd6
(ряд static после секции cartbtn120b, margin в потоке поднимает его, карточка
подрастает на 11px, absolute-кнопка остаётся 20/20 от нового края). */
html body #ka-to-catalog .e-loop-item .elementor-element-3839cd6 {
margin-bottom: 11px !important;
}
/* ==== KATKIN 10.11.2026: цена+кнопка выше на 10px, карточка короче ==== */
/* Владелец: «приподними цену и кнопку на 10px, отступ кнопки от низа сохраняется,
высота карточки -10px, фото/заголовок/описание на месте». Нижний воздух = padding
bottom 15px у e-con-inner (boxed-обёртка коробки карточки) → padding-bottom: 5px.
Поток не тронут (верх без изменений), absolute-кнопка остаётся 20/20 от нового края. */
html body #ka-to-catalog .e-loop-item .elementor-element-785a650 .e-con-inner {
padding-bottom: 5px !important;
}
/* ==== KATKIN 10.11.2026 (цена поднята на линию кнопки) ==== */
/* e-con-inner — flex column c justify-content: space-between: ряд цены прибит к низу
inner, зазоры над ним положение не меняют (правила к margin описания были no-op и
удалены — действует шаблонные 20px). Цена поднимается уменьшением её отступа от
нижнего края: margin-bottom ряда 3839cd6 11px → 21px (space-between: увеличение
отступа поднимает ряд). Кнопка (absolute bottom 20px)
остаётся 20px от края карточки; карточка в min-height 470 — итог: 482 → 470. */
html body #ka-to-catalog .e-loop-item .elementor-element-3839cd6 {
margin-bottom: 21px !important;
}
/* ==== KATKIN 10.11.2026: цена внутри кнопки корзины (все ширины) ==== */
/* Владелец: «в красной кнопке вместо значка корзины — цена товара 28px белым
по центру, ко всем карточкам на всех размерах». Глиф (::before jkiticon) скрыт;
виджет цены e32c477 — absolute-оверлей на кнопке (right/bottom 20, 120x46,
якорь 785a650), pointer-events:none пропускает клики в quick-view. Белый 28px
на всех уровнях цены (bdi/amount/symbol) — перебивает пин 08.11 и Microthemer. */
html body #ka-to-catalog .e-loop-item .sp-quick-view-icon i.sp-icon::before {
content: none !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 {
position: absolute !important;
right: 20px !important;
bottom: 20px !important;
width: 120px !important;
height: 46px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
z-index: 2 !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 .elementor-heading-title {
text-align: center !important;
color: #FFFFFF !important;
font-size: 28px !important;
line-height: 34px !important;
margin: 0 !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 .woocommerce-Price-amount,
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 .woocommerce-Price-amount bdi,
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 .woocommerce-Price-amount bdi .woocommerce-Price-currencySymbol {
color: #FFFFFF !important;
font-size: 28px !important;
}
/* ==== KATKIN 10.11.2026 (уточнение): кнопка во всю ширину, цена точно по центру ==== */
/* (1) Центр цены: flex-центрирование перенесено с виджета на .elementor-widget-
container (он рвал цепочку — цена была в его углу). (2) Кнопка и ценовой оверлей —
во всю ширину карточки до внутренних отступов: left/right 15px в padding-box
координатах 785a650 (padding 0, border 1px → визуально 16px от края, линия
контента). width:auto перебивает фикс 120px из cartbtn120/pricebtn. */
html body #ka-to-catalog .e-loop-item .sp-quick-view {
left: 15px !important;
right: 15px !important;
width: auto !important;
bottom: 20px !important;
height: 46px !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
html body #ka-to-catalog .e-loop-item .sp-quick-view .sp-quick-view-icon i {
width: 100% !important;
height: 100% !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 {
left: 15px !important;
right: 15px !important;
width: auto !important;
bottom: 20px !important;
height: 46px !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-e32c477 > .elementor-widget-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ==== KATKIN 10.11.2026: заголовок ≤768 ровно посередине фото↔кнопка ==== */
/* Владелец: «заголовок ровно по середине между фото и кнопкой». Замер: низ видимого
фото 209, верх кнопки 274 → середина 241.5; заголовок стоял 244 (ближе к кнопке).
margin-top контейнера заголовка 5px → -7.5px: заголовок 231.5–251.5, зазоры по 22.5px.
Плашка фото прозрачна (tilemobilenobg) — сдвиг вверх без наложений. */
@media (max-width: 768px) {
html body #ka-to-catalog .e-loop-item .elementor-element-40c34c4 > .elementor-widget-container {
margin-top: -7.5px !important;
}
}
/* ==== KATKIN 10.11.2026: спиннер загрузки попапа — в центре видимого окна (≤768) ==== */
/* Владелец: «анимация загрузки показывается слишком низко» (вариант 2).
Оверлей katkin-loading-overlay растягивался на весь контент попапа (~1200px
на телефоне), спиннер = 50% этой высоты → низ экрана. Теперь высота оверлея
= высоте экрана: затемнение и кружок в пределах видимого окна попапа. */
@media (max-width: 768px) {
/* 11.11.2026: шторь на всю высоту контента попапа (раньше height обрезал её
до calc(100vh - 300px) — затемнение заканчивалось выше блока «Состав»). */
.sp-qv-wrap .katkin-loading-overlay {
height: auto !important;
inset: 0 !important;
align-items: flex-start !important;
}
/* Кружок остаётся в прежней одобренной точке — центр зоны (100vh - 300px). */
.sp-qv-wrap .katkin-loading-overlay .katkin-loading-spinner {
margin-top: calc((100vh - 300px) / 2 - 30px) !important;
}
}
/* ==== KATKIN 10.11.2026: заголовок ≤768 — absolute-центр между фото и кнопкой ==== */
/* Владелец: «на 410px заголовок ниже середины». Прошлый отступ -7.5px (секция
titlecenter768) верен только для однострочного заголовка; на карточке 175px
заголовки 1/2/3 строки. Контейнер заголовка — absolute в зоне 209..274 (между
видимым низом фото и верхом кнопки) + flex-центр: точный центр при любой высоте.
Колонка и виджет — static, чтобы якорем была коробка карточки. Правило -7.5px
ниже по файлу перекрыто margin: 0. */
@media (max-width: 768px) {
html body #ka-to-catalog .e-loop-item .elementor-element-a6157c6,
html body #ka-to-catalog .e-loop-item .elementor-element-40c34c4 {
position: static !important;
}
html body #ka-to-catalog .e-loop-item .elementor-element-40c34c4 > .elementor-widget-container {
position: absolute !important;
top: 208px !important;
bottom: 66px !important;
height: auto !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ==== KATKIN 11.11.2026: иконка кнопки «Связаться с нами» остаётся белой ==== */
/* Woodmart base.css на button:hover задаёт color: var(--btn-color-hover, #3E3E3E)
со специфичностью выше .ks-fm-toggle — иконка (stroke: currentColor) серела.
Держим белый на всех состояниях кнопки. */
.ks-fm-toggle,
.ks-fm-toggle:hover,
.ks-fm-toggle:focus,
.ks-fm-toggle:focus-visible,
.ks-fm-toggle:active {
color: #fff !important;
}
.ks-fm-toggle svg {
stroke: #fff !important;
}
/* ==== KATKIN 11.11.2026: подвал — логотип x2, высота -30% ==== */
/* Владелец: «Увеличь размер логотипа в подвале в 2 раза, высоту подвала уменьши
на 30%». Логотип 187x54 → 373x108 на ≥769px (на ≤768 он и так резиновый: 100%
колонки). Высота: min-height контейнеров 84907dd / 6f999f6 / 0bfcc23 уменьшены
на 30% (десктоп 421→295 и 76→53, итог 497→348; ≤768 300→210 и 76→53, итог
376→267). */
html body footer.elementor-15975 .elementor-element-6f999f6,
html body footer.elementor-15975 .elementor-element-0bfcc23 {
min-height: 53px !important;
}
@media (min-width: 769px) {
html body footer.elementor-15975 .elementor-element-84907dd {
min-height: 345px !important;
}
html body footer.elementor-15975 .elementor-element-0a555b9 img {
width: 298px !important;
max-width: none !important;
height: auto !important;
}
}
@media (max-width: 768px) {
html body footer.elementor-15975 .elementor-element-84907dd {
min-height: 260px !important;
}
}
/* 11.11.2026: отступ между пунктами меню подвала меньше (13px → 8px сверху/снизу). */
html body footer.elementor-15975 .elementor-nav-menu--main .elementor-item {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* ==== KATKIN 11.11.2026: лого и меню на 50px ближе к центру подвала ==== */
/* Ряд подвала был 1140px и центрирован: лого слева, меню справа. Уменьшение
ширины до 1040px при центрировании сдвигает лого +50px (к центру) и меню
−50px (к центру). max-width:100% — чтобы ряд не вылезал на узких экранах. */
@media (min-width: 769px) {
html body footer.elementor-15975 .elementor-element-b1c0bf9 {
width: 940px !important;
max-width: 100% !important;
}
}