/* =========================================================
   FW — Woo Archive: аккуратная сетка (2→3→4), карточки, пагинация,
   карусель чипов и грид иконок категорий
   ========================================================= */

/* ---------- Палитра/переменные ---------- */
:root{
  --fw-gap:22px;

  /* Карточка товара */
  --fw-card-bg:#fff;
  --fw-card-br:#e8e8eb;
  --fw-card-r:16px;
  --fw-card-shadow:0 8px 22px rgba(0,0,0,.06);

  /* Текст/цены/кнопки */
  --fw-txt:#121212;
  --fw-price:#111;
  --fw-sale:#d12e2e;
  --fw-btn:#111;
  --fw-btn-h:#000;

  /* Пагинация */
  --fw-pg-bg:#fff;
  --fw-pg-br:#ececec;
  --fw-pg-r:16px;
  --fw-pg-shadow:0 8px 22px rgba(0,0,0,.05);
  --fw-pg-text:#111;
  --fw-pg-active:#111;
  --fw-pg-active-text:#fff;
}

/* =========================================================
   СЕТКА ТОВАРОВ — 2 (моб) → 3 (таб) → 4 (десктоп)
   Одна реализация без дублей
   ========================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;  /* базово: телефоны */
  gap:14px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}

@media (min-width:901px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important; /* планшеты */
    gap:var(--fw-gap) !important;
  }
}
@media (min-width:1201px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important; /* десктоп */
  }
}

/* убираем наследованные clearfix/float от тем */
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; }

/* карточки не фиксируют ширину/float */
.woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  margin:0 !important;

  background:var(--fw-card-bg);
  border:1px solid var(--fw-card-br);
  border-radius:var(--fw-card-r);
  box-shadow:var(--fw-card-shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  border-color:#ddd;
}

/* Изображение товара — без фиксированных высот/absolute */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .wp-post-image,
.woocommerce ul.products li.product picture,
.woocommerce ul.products li.product picture img{
  position:static !重要;
  inset:auto !重要;
  width:100% !重要;
  height:auto !重要;
  max-width:100% !重要;
  max-height:none !重要;
  object-fit:contain !重要;
  aspect-ratio:auto !重要;
  transform:none !重要;
  background:#fff !重要;
}
/* деликатная «рамка» у фото */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img{
  padding:14px;
  border-bottom:1px solid #f2f2f4;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* Заголовок/цена/кнопка */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin:12px 14px 6px;
  font-size:17px; line-height:1.45;
  color:var(--fw-txt); font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .price{
  margin:0 14px 12px; font-weight:700; color:var(--fw-price); font-size:18px;
}
.woocommerce ul.products li.product .price del{ color:#999; margin-right:8px; font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--fw-sale); }

.woocommerce ul.products li.product .button{
  margin:0 14px 14px; width:calc(100% - 28px);
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 14px; border-radius:12px;
  background:var(--fw-btn); color:#fff; border:1px solid #000; text-decoration:none;
  font-weight:600; transition:background .18s, transform .1s, box-shadow .18s;
}
.woocommerce ul.products li.product .button:hover{
  background:var(--fw-btn-h); transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Бейдж распродажи */
.woocommerce ul.products li.product .onsale{
  position:absolute; z-index:2; top:10px; left:10px;
  background:var(--fw-sale); color:#fff; border-radius:999px;
  padding:6px 10px; font-size:12px; font-weight:600; line-height:1;
  box-shadow:0 6px 14px rgba(209,46,46,.35);
}

/* На мобилке чуть компактнее типографику карточки */
@media (max-width:560px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:15px !important;
    margin:10px 10px 6px !important;
  }
  .woocommerce ul.products li.product .price{
    font-size:16px !important;
    margin:0 10px 10px !important;
  }
  .woocommerce ul.products li.product .button{
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:14px !important;
    width:calc(100% - 20px) !important;
    margin:0 10px 10px !important;
  }
}

/* =========================================================
   ШАПКА ЛИСТИНГА: счётчик/сортировка
   ========================================================= */
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count{ margin:0 0 16px; }

.archive .woocommerce .woocommerce-result-count,
.archive .woocommerce .woocommerce-ordering{ align-self:center; }

.archive .woocommerce .woocommerce-ordering select{
  min-width:320px; height:48px; padding:0 14px;
  border-radius:14px; border:1px solid #e8e8e8;
  box-shadow:inset 0 0 0 1px #e8e8e8; background:#fff; font-weight:600;
}
.archive .woocommerce .woocommerce-result-count,
.archive .woocommerce .woocommerce-ordering{ margin:0 0 24px; }

@media (min-width:901px){
  .archive .woocommerce .woocommerce-result-count{ float:left; }
  .archive .woocommerce .woocommerce-ordering{ float:right; }
}
@media (max-width:900px){
  .archive .woocommerce .woocommerce-result-count,
  .archive .woocommerce .woocommerce-ordering{
    float:none; display:block; width:100%;
  }
  .archive .woocommerce .woocommerce-ordering select{ width:100%; min-width:0; }
}

/* =========================================================
   ПАГИНАЦИЯ
   ========================================================= */
.woocommerce nav.woocommerce-pagination,
nav.pagination{ margin:28px 0 12px; }

.woocommerce nav.woocommerce-pagination ul,
nav.pagination .page-numbers,
.nav-links{
  display:flex !important; flex-wrap:wrap; gap:12px !important;
  justify-content:center; align-items:center;
  margin:26px 0 10px !important; padding:12px 14px !important;
  border:1px solid var(--fw-pg-br) !important; border-radius:var(--fw-pg-r) !important;
  box-shadow:var(--fw-pg-shadow) !important; background:var(--fw-pg-bg) !important;
  list-style:none;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.pagination .page-numbers li{ margin:0 !important; border:0 !important; box-shadow:none !important; }

.woocommerce .page-numbers a,
.woocommerce .page-numbers span,
nav.pagination .page-numbers a,
nav.pagination .page-numbers span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 14px !important;
  border-radius:14px !important; font-weight:600 !important;
  background:#fff !important; color:var(--fw-pg-text) !important;
  line-height:46px !important; text-align:center;
  border:0 !important;
  box-shadow:inset 0 0 0 1px #e8e8e8;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
  outline:none !important;
}
.woocommerce .page-numbers a:hover,
nav.pagination .page-numbers a:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px #dcdcdc, 0 10px 20px rgba(0,0,0,.08);
}
.woocommerce .page-numbers .current,
nav.pagination .page-numbers .current{
  background:var(--fw-pg-active) !important; color:var(--fw-pg-active-text) !important;
  box-shadow:inset 0 0 0 1px #000, 0 12px 24px rgba(0,0,0,.12) !important;
}
.woocommerce .page-numbers .prev,
.woocommerce .page-numbers .next,
nav.pagination .page-numbers .prev,
nav.pagination .page-numbers .next{ min-width:48px; font-size:0 !important; }
.woocommerce .page-numbers .prev::before,
nav.pagination .page-numbers .prev::before{ content:"←"; font-size:18px; line-height:46px; color:#111; }
.woocommerce .page-numbers .next::before,
nav.pagination .page-numbers .next::before{ content:"→"; font-size:18px; line-height:46px; color:#111; }
.woocommerce .page-numbers .dots,
nav.pagination .page-numbers .dots{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  min-width:auto; height:auto; padding:0 4px !important; color:#666 !important; font-weight:600;
}
.woocommerce .page-numbers a,
.woocommerce .page-numbers span{ height:48px; line-height:48px !important; border-radius:14px !important; }
.woocommerce nav.woocommerce-pagination{ margin:32px 0 12px; }

/* =========================================================
   FW Top Carousel — чёрные прямоугольные чипы
   ========================================================= */
.fw-topbar-slot{ margin:12px 0 18px; }
.fw-topbar-scroll{
  display:flex; align-items:center; gap:12px;
  overflow:auto; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
  padding:12px;
  background:#fff; border:1px solid #e9e9e9; border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.fw-topbar-scroll::-webkit-scrollbar{ display:none; }

.fw-chip{
  --chip-h:48px;
  display:inline-flex; align-items:center; gap:10px;
  height:var(--chip-h); padding:0 16px;
  border-radius:12px;
  background:#111; color:#fff;
  text-decoration:none !important; white-space:nowrap;
  box-shadow:inset 0 0 0 1px #000;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.fw-chip:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px #000, 0 8px 18px rgba(0,0,0,.18);
  background:#000; color:#fff;
}
.fw-chip img{
  width:26px; height:26px; object-fit:cover; border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
}
.fw-chip span{
  font-size:15.5px; font-weight:600; line-height:1;
  max-width:240px; overflow:hidden; text-overflow:ellipsis;
}
.fw-chip.is-active{
  background:#111; color:#fff;
  box-shadow:inset 0 0 0 1.5px #000, 0 10px 22px rgba(0,0,0,.20);
  position:relative;
}
.fw-chip.is-active::after{ content:none !important; display:none !important; }

@media (max-width:1024px){
  .fw-topbar-scroll{ gap:10px; padding:10px; }
  .fw-chip{ --chip-h:44px; padding:0 12px; }
  .fw-chip span{ font-size:15px; max-width:200px; }
}
@media (max-width:640px){
  .fw-chip{ --chip-h:40px; padding:0 10px; border-radius:10px; }
  .fw-chip img{ width:22px; height:22px; border-radius:5px; }
  .fw-chip span{ font-size:14.5px; max-width:160px; }
}

/* =========================================================
   CATEGORY ICONS GRID — 2 в ряд на телефонах (как просила)
   ========================================================= */
.category-icons{
  display:grid;
  gap:22px;
  padding:20px 0;
  grid-template-columns:repeat(3,1fr);
  padding-left:min(12px,2vw);
  padding-right:min(12px,2vw);
}
@media (min-width:768px){
  .category-icons{
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    padding:30px 0;
  }
}
@media (max-width:560px){
  .category-icons{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:14px 0;
  }
}

.category-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#20222a;
  background:#fff;
  border:1px solid #f2f2f6;
  border-radius:24px;
  box-shadow:0 8px 32px rgba(22,36,74,.13), 0 1.5px 4px rgba(0,0,0,.07);
  min-height:160px;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .22s, transform .22s, border-color .22s;
  margin-inline:2px;
}
.category-box:hover,
.category-box:focus{
  box-shadow:0 16px 36px rgba(22,36,74,.20), 0 3px 12px rgba(0,0,0,.13);
  transform:translateY(-3px) scale(1.02);
  border-color:#ececf4;
}
.category-box:focus-visible{ outline:2px solid #000; outline-offset:3px; }

.category-img-wrap{
  width:100%; height:54%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-top-left-radius:24px; border-top-right-radius:24px;
  overflow:hidden;
}
.category-box img{
  width:100%; height:100%; object-fit:contain; display:block; background:none; margin:0;
}
.category-box span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  display:flex; align-items:flex-end; justify-content:center;
  height:46%;
  padding:0 8px 10px 8px; margin-top:8px;

  font-size:15px; font-weight:600; letter-spacing:.02em;
  line-height:1.28; text-align:center; color:#23243a;
}
@media (max-width:767px){
  .category-box{ border-radius:20px; }
  .category-img-wrap{ height:50%; border-top-left-radius:20px; border-top-right-radius:20px; }
  .category-box span{ font-size:13.5px; padding:0 6px 8px 6px; }
}

---





/* Точное измерение вьюпорта: сначала dvw (динамический), затем svw, затем vw */
:root { --kk-vw: 100vw; }
@supports (width: 100dvw) { :root { --kk-vw: 100dvw; }
} @supports (width: 100svw) and (not (width: 100dvw)) {
  :root { --kk-vw: 100svw; }
}

/* Fullbleed: расширяемся до краёв вьюпорта без сдвига контента */
:root { --kk-vw: 100vw; }
@supports (width: 100dvw) { :root { --kk-vw: 100dvw; } }
@supports (width: 100svw) and (not (width: 100dvw)) { :root { --kk-vw: 100svw; } }

.u-fullbleed{
  /* НЕ используем left/right:50% — только симметричные маргины */
  margin-left:  calc(50% - 0.5 * var(--kk-vw));
  margin-right: calc(50% - 0.5 * var(--kk-vw));
  width: auto;

  display: block;
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* анти-артефакты WebKit/macOS */
  transform: translateZ(0);
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
}

/* Жёсткий добивающий фикс — если на маке видна «нитка» только на конкретной полосе */
.u-fullbleed.--mac-fix{
  margin-left: -50vw;
  margin-right: -50vw;
}

/* На всякий случай: если класс повесили на столбец/виджет — запрещаем позиционирование */
.elementor-column.u-fullbleed,
.elementor-widget.u-fullbleed{
  position: static !important;
}

----------


/*************************************************
 * HERO ADVANCED SLIDER ВНУТРИ CONTAINER
 * Прижат к шапке, растянут на 100vw (PC + mobile)
 *************************************************/

/* 1. Убираем зазор под шапкой (header gap) */
header,
.site-header,
.elementor-location-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Контейнер с баннером: растягиваем на всю ширину окна (full-bleed 100vw) */
.hero-adv-slider.e-con {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none;
  box-shadow: none;
  overflow: hidden; /* на случай, если внутри что-то вылезает */
}

/* 3. Внутренний контейнер e-con-inner — без боковых ограничений */
.hero-adv-slider.e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. Если внутри ещё колонки / виджеты — убираем лишние отступы,
 * чтобы слайдер лег от края до края */
.hero-adv-slider.e-con .elementor-column,
.hero-adv-slider.e-con .elementor-widget {
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Сам Advanced Slider и картинки: растянуть на всю доступную ширину */
.hero-adv-slider.e-con img,
.hero-adv-slider.e-con .advanced-slider,
.hero-adv-slider.e-con .adv-slider,
.hero-adv-slider.e-con .pa-advanced-slider,
.hero-adv-slider.e-con .slick-slider {
  width: 100% !important;
  height: auto;
  display: block;
}

/* 6. Если тема использует "boxed" контент, позволяем нашему контейнеру выйти за рамки */
body.elementor-page .hero-adv-slider.e-con {
  overflow: hidden;
}


---------------



/*************************************************
 * HERO ADVANCED SLIDER ВНУТРИ CONTAINER
 * Прижат к шапке, растянут на 100vw (PC + mobile)
 *************************************************/

/* 1. Убираем зазор под шапкой (header gap) */
header,
.site-header,
.elementor-location-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Секция (section), внутри которой лежит наш hero-adv-slider.
 * Убираем у неё верхние отступы, чтобы баннер стал "впритык" к тому, что выше. */
section.elementor-section:has(.hero-adv-slider.e-con) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Контейнер с баннером: растягиваем на всю ширину окна (full-bleed 100vw) */
.hero-adv-slider.e-con {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none;
  box-shadow: none;
  overflow: hidden; /* если что-то вылазит за края */
}

/* 4. Внутренний контейнер e-con-inner — без боковых ограничений */
.hero-adv-slider.e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. Внутренние колонки / виджеты — без лишних отступов */
.hero-adv-slider.e-con .elementor-column,
.hero-adv-slider.e-con .elementor-widget {
  margin: 0 !important;
  padding: 0 !important;
}

/* 6. Сам Advanced Slider и картинки: тянем на всю ширину */
.hero-adv-slider.e-con img,
.hero-adv-slider.e-con .advanced-slider,
.hero-adv-slider.e-con .adv-slider,
.hero-adv-slider.e-con .pa-advanced-slider,
.hero-adv-slider.e-con .slick-slider {
  width: 100% !important;
  height: auto;
  display: block;
}

/* 7. Для "boxed" макетов позволяем герою выйти на край окна */
body.elementor-page .hero-adv-slider.e-con {
  overflow: hidden;
}


----------------



/*************************************************
 * HERO ADVANCED SLIDER ВНУТРИ CONTAINER
 * Full-width + "впритык" к блоку выше
 *************************************************/

/* Контейнер с баннером: растягиваем на 100vw */
.hero-adv-slider.e-con {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

/* Внутренний контейнер e-con-inner — без ограничений */
.hero-adv-slider.e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Колонки / виджеты внутри */
.hero-adv-slider.e-con .elementor-column,
.hero-adv-slider.e-con .elementor-widget {
  margin: 0 !important;
  padding: 0 !important;
}

/* Сам Advanced Slider и картинки */
.hero-adv-slider.e-con img,
.hero-adv-slider.e-con .advanced-slider,
.hero-adv-slider.e-con .adv-slider,
.hero-adv-slider.e-con .pa-advanced-slider,
.hero-adv-slider.e-con .slick-slider {
  width: 100% !important;
  height: auto;
  display: block;
}

/* ВАЖНО: подтягиваем баннер вверх (negative margin-top),
 * чтобы он встал вплотную к верхнему блоку.
 * Если зазор другой — меняешь значение -40px на своё.
 */
.hero-adv-slider.e-con {
  margin-top: -40px !important; /* pull banner up to touch the block above */
}

/* При желании можно чуть подправить для мобильных (optional) */
@media (max-width: 768px) {
  .hero-adv-slider.e-con {
    margin-top: -30px !important; /* mobile fine-tune */
  }
}



----------------------------



/* === KinKet – Categories bar & Mega menu (colors unified with header) === */

:root{
  --kk-cats-container-max: 1360px;
  --kk-cats-side-pad: 10px;

  --kk-cats-bg: #ffffff;
  --kk-cats-color: #111111;
  --kk-cats-height: 64px;
  --kk-cats-gap: 18px;
  --kk-cat-icon-size: 20px;
  --kk-cat-font-size: 15px;

  --kk-sale-color: #d32f2f;
  --kk-sale-bg: #ffeaea;

  --kk-mega-bg: #ffffff;
  --kk-mega-shadow: 0 14px 34px rgba(0,0,0,.14);
  --kk-mega-radius: 14px;
  --kk-mega-pad-y: 22px;
  --kk-mega-pad-x: 24px;
  --kk-mega-gap: 18px;
  --kk-mega-max-h: min(70vh, 720px);

  --kk-mega-hairline: 1px solid rgba(0,0,0,.08);

  --kk-accent: #7E07A9;
  --kk-accent-soft: rgba(126,7,169,.10);
}

/* Полоса категорий (top categories strip) */
.kk-catsbar{
  background: var(--kk-cats-bg);
  color: var(--kk-cats-color);
  height: var(--kk-cats-height);
  display: flex;
  align-items: center;
  border-bottom: var(--kk-mega-hairline);
  position: relative;
  z-index: 30;
}
.kk-catsbar .kk-wrap{
  max-width: var(--kk-cats-container-max);
  margin: 0 auto;
  padding: 0 var(--kk-cats-side-pad);
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: var(--kk-cats-gap);
  box-sizing: border-box;
}

.kk-cat{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.kk-cat > a{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--kk-cats-height) - 12px);
  padding: 0 12px;
  text-decoration: none;
  color: inherit;
  font-size: var(--kk-cat-font-size);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .2s ease, background .15s ease, color .15s ease;
}
.kk-cat > a:hover{
  border-bottom-color: var(--kk-accent);
  background: rgba(126,7,169,.04);
}

.kk-cat-icon{
  width: var(--kk-cat-icon-size);
  height: var(--kk-cat-icon-size);
  flex: 0 0 var(--kk-cat-icon-size);
  display: inline-block;
}
.kk-cat-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  vertical-align: middle;
}

/* «Розпродаж» (sale) выделяем мягко */
.kk-cat.is-sale > a{
  color: var(--kk-sale-color);
  background: var(--kk-sale-bg);
  border-radius: 10px;
  height: calc(var(--kk-cats-height) - 12px);
}

/* === Mega host === */
.kk-mega-host{
  display: none;
  background: var(--kk-mega-bg);
  box-shadow: var(--kk-mega-shadow);
  border-radius: 0 0 var(--kk-mega-radius) var(--kk-mega-radius);
  position: relative;
  z-index: 20;
  margin-top: 0;
}
.kk-mega-host.is-open{
  display: block;
}
.kk-mega{
  max-width: var(--kk-cats-container-max);
  margin: 0 auto;
  padding-left: calc(var(--kk-mega-pad-x) + var(--kk-cats-side-pad));
  padding-right: calc(var(--kk-mega-pad-x) + var(--kk-cats-side-pad));
  padding-top: var(--kk-mega-pad-y);
  padding-bottom: var(--kk-mega-pad-y);
}

.kk-mega-scroll{
  max-height: var(--kk-mega-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.kk-mega-scroll::-webkit-scrollbar{ width: 12px; }
.kk-mega-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}
.kk-mega-scroll:hover::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
}

.kk-mega-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--kk-mega-gap);
}
.kk-mega-grid.no-minis{
  grid-template-columns: 1fr;
}

/* Левая колонка – подкатегории */
.kk-subcats{
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(0,0,0,.08);
  padding-right: 16px;
}
.kk-subcat-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #111;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.kk-subcat-item:hover{
  background: #f8f8f8;
  transform: translateY(-1px);
}
.kk-subcat-item.is-active{
  border-color: var(--kk-accent);
  background: #f3e7fa;
}
.kk-subcat-item .img{
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f3f3;
  overflow: hidden;
  display: block;
}
.kk-subcat-item .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kk-subcat-item .title{
  font-weight: 600;
  font-size: 14px;
}
.kk-subcat-item .ind{
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
}
.kk-subcat-item .count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #efefef;
  color: #333;
  font-weight: 600;
}
.kk-subcat-item .chev{
  width: 16px;
  height: 16px;
  display: inline-block;
}
.kk-subcat-item .chev svg{
  width: 100%;
  height: 100%;
}

/* Правая колонка – мини-карточки */
.kk-minis-area{
  display: grid;
  gap: 8px;
}
.kk-minis-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 10px 4px;
  position: sticky;
  top: 0;
  background: var(--kk-mega-bg);
  z-index: 1;
}
.kk-minis-head .crumbs{
  font-size: 13px;
  color: #666;
}
.kk-minis-head .all-link{
  font-size: 13px;
  text-decoration: none;
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 10px;
  border-radius: 999px;
}

.kk-minis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kk-mega-gap);
}
.kk-mini-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: background .2s ease, transform .12s ease, box-shadow .16s ease;
}
.kk-mini-card:hover{
  background: #f8f8f8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.kk-mini-card .img{
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f3f3;
  overflow: hidden;
}
.kk-mini-card .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kk-mini-card .meta{
  display: grid;
  gap: 2px;
}
.kk-mini-card .title{
  font-weight: 600;
  font-size: 14px;
}
.kk-mini-card .desc{
  font-size: 12px;
  color: #666;
}

/* Focus states (фокус клавиатурой) */
.kk-subcat-item:focus,
.kk-mini-card:focus{
  outline: 2px solid var(--kk-accent);
  outline-offset: 2px;
}

/* На планшете/мобиле – полоску категорий и мегаменю убираем */
@media (max-width: 1024px){
  .kk-catsbar,
  .kk-mega-host{
    display: none !important;
  }
}


///


#wpadminbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html {
    margin-top: 32px !important;
}