.elementor-2543 .elementor-element.elementor-element-14164ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2543 .elementor-element.elementor-element-a85d6b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:140px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2543 .elementor-element.elementor-element-2a1c284{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family );font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2543 .elementor-element.elementor-element-3b001d7.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2543 .elementor-element.elementor-element-3b001d7 .woocommerce-breadcrumb{color:#010101;font-family:"Golos Text";font-size:14px;font-weight:400;line-height:100%;}.elementor-2543 .elementor-element.elementor-element-3b001d7 .woocommerce-breadcrumb > a{color:#969595;}.elementor-2543 .elementor-element.elementor-element-e4bd1de{--display:flex;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2543 .elementor-element.elementor-element-e16cac7.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2543 .elementor-element.elementor-element-e16cac7 .elementor-heading-title{font-family:"Prosto One";font-size:36px;font-weight:400;line-height:100%;letter-spacing:-1%;color:#010101;}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-2543 .elementor-element.elementor-element-0686540 .product{text-align:left;}.elementor-2543 .elementor-element.elementor-element-0686540.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2543 .elementor-element.elementor-element-0686540.elementor-wc-products  ul.products{grid-column-gap:16px;grid-row-gap:16px;}.elementor-2543 .elementor-element.elementor-element-0686540 a > img{border-radius:4px 4px 4px 4px;}.elementor-2543 .elementor-element.elementor-element-0686540 .woocommerce .woocommerce-loop-category__title{color:#010101;font-family:"Golos Text";font-size:20px;font-weight:500;line-height:100%;letter-spacing:-1%;}.elementor-2543 .elementor-element.elementor-element-61e3cb7.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2543 .elementor-element.elementor-element-1ca26de.xpro-widget-bg-overlay:before{transition:background 0.3s;}@media(max-width:1024px){.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:767px){.elementor-2543 .elementor-element.elementor-element-14164ef{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-2543 .elementor-element.elementor-element-a85d6b6{--margin-top:0px;--margin-bottom:72px;--margin-left:0px;--margin-right:0px;}.elementor-2543 .elementor-element.elementor-element-2a1c284{--padding-top:72px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-size:var( --e-global-typography-accent-font-size );}.elementor-2543 .elementor-element.elementor-element-3b001d7 .woocommerce-breadcrumb{line-height:1.2;}.elementor-2543 .elementor-element.elementor-element-e4bd1de{--margin-top:0px;--margin-bottom:32px;--margin-left:0px;--margin-right:0px;}.elementor-2543 .elementor-element.elementor-element-e16cac7 .elementor-heading-title{font-size:28px;}.elementor-2543 .elementor-element.elementor-element-0686540 .product{text-align:left;}.elementor-2543 .elementor-element.elementor-element-0686540{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2543 .elementor-element.elementor-element-0686540 .woocommerce .woocommerce-loop-category__title{font-size:18px;}body.elementor-page-2543{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for wc-categories, class: .elementor-element-0686540 *//* ================================================================
   Полный CSS для каталога: 
   — Основные стили карточек категорий с hover-эффектом и подкатегориями,
   — Дополнительный лёгкий hover для карточек с placeholder-изображением
   ================================================================ */

/* ================================================================
   1) Делаем li.product-category «контейнером» с position: relative,
      чтобы красный фон и заголовок можно было правильно спозиционировать.
   ================================================================ */
.product-category {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px; /* добавлено */
}

/* ================================================================
   2) Картинка в карточке: при наведении немного масштабируется и затемняется
   ================================================================ */
.product-category a img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 4px; /* добавлено */
}

/* 2.1) Hover для всех карточек по умолчанию */
.product-category:hover a img {
  transform: scale(1.02);
  filter: brightness(90%);
  border-radius: 4px; /* добавлено */
}

/* Если внутри .product-category нет img, делаем фон светлее или убираем */
.product-category:hover:not(:has(img)) {
  background-color: rgba(0,0,0,0.03) !important; /* почти незаметный фон */
}

/* ================================================================
   3) Заголовок родительской категории (h2.woocommerce-loop-category__title):
      — всегда показывается на белом фоне внизу карточки,
      — при наведении фон остаётся #ffffff, а текст — тёмный,
      — ставим его поверх .subcat-list (z-index больше, чем у .subcat-list).
   ================================================================ */
.product-category a .woocommerce-loop-category__title {
  position: absolute;
  bottom: 0;                   /* плашка прилипает к «полу» карточки */
  left: 0;
  width: 100%;                 /* растягиваем по всей ширине */
  margin: 0;
  padding: 12px 16px;          /* отступы сверху/снизу и слева/справа */
  background-color: #ffffff;   /* белый фон под текстом */
  color: #333333;              /* тёмный цвет текста (чтобы читалось на белом фоне) */
  font-size: 18px;             /* можно подкорректировать */
  line-height: 1.2;
  z-index: 5;                  /* выше, чем z-index красного .subcat-list (3 ниже) */
  transition: background 0.3s ease, color 0.3s ease;
}

/* ================================================================
   4) Список подкатегорий — располагаем его «за» заголовком, под
      красным фоном, но со свободным пространством под белой плашкой.
      Поэтому:
      — top: 0; bottom: height-of-title (реализовано большим bottom-padding),
      — z-index у .subcat-list поменьше, чем у заголовка.
   ================================================================ */
.product-category .subcat-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c81e1e;
  box-sizing: border-box;
  padding: 16px;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 3;
  overflow-y: auto;
  border-radius: 4px;
}

.product-category .subcat-list .subcat-item > a:last-child {

  padding: 8px 16px;

}

.subcat-list {
  padding-top: 8px !important;
}



/* ================================================================
   5) При наведении «включаем» subcat-list (красный фон + ссылки)
   ================================================================ */
.product-category:hover .subcat-list {
  opacity: 1;
  visibility: visible;
}



/* ================================================================
   6) Стили для ссылок внутри подкатегорий: белый текст + hover-эффект
   ================================================================ */
.product-category .subcat-list .subcat-item {
  margin: 0;
  padding: 0;
  margin-bottom: 0px; /* было 16px — стало 8px, чтобы подкатегории были ближе */
}

.product-category .subcat-list .subcat-item:last-child {
  margin-bottom: 0; /* убираем отступ у последнего */
  padding: 0px;
}

.product-category .subcat-list .subcat-item a {
  display: block;
  font-family: 'Golos Text', sans-serif; /* добавлено */
  font-weight: 500;                      /* добавлено */
  font-size: 16px;                       /* добавлено */
  line-height: 130%;                     /* добавлено */
  letter-spacing: 0%;                    /* добавлено */
  color: rgba(255,255,255,0.52);         /* изменено */
  text-decoration: none;
  transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s;
}

.product-category .subcat-list .subcat-item > a:last-child:hover {
  background-color: transparent !important;
  padding-left: 10px;
  color: #FFFFFF;
}

/* ================================================================
   7) Особенно мягкий hover для карточек с placeholder-изображением
      (woocommerce-placeholder.png). Убираем сильное затемнение/масштаб
      и добавляем едва заметный лёгкий фон у ссылки или li.
   ================================================================ */

/* 7.1) Отменяем масштаб и тёмное затемнение для placeholder-картинок */
.product-category:hover a img[src*="woocommerce-placeholder.png"] {
  transform: none !important;
  filter: brightness(90%) !important; /* очень лёгкое затемнение (90% яркости) */
}

/* 7.2) Добавляем еле заметный фон на сам <a> вместо яркого эффекта */
.product-category:hover a img[src*="woocommerce-placeholder.png"] {
  /* ничего, нужны только фильтр/transform из 7.1 */
}

/* 7.3) Даем легкий фоновый «налёт» у ссылки, чтобы при hover было чуть заметно */
.product-category:hover a img[src*="woocommerce-placeholder.png"] {
  /* только переопределили фильтры в 7.1 */
}

/* Если вы хотите, чтобы фон шёл под самой картинкой (и под заголовком),
   пример на <li> вместо <a>: */
.product-category:hover img[src*="woocommerce-placeholder.png"] {
  /* переопределили transform/filter выше */
}
.product-category:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px; /* добавлено */
}

/* ================================================================
   8) Отключаем появление красного subcat-list для карточек без подкатегорий
      (если в каких-то браузерах селектор :has() поддерживается).
   ================================================================ */
.product-category:not(:has(.subcat-list)):hover .subcat-list {
  display: none !important;
}

/* ================================================================
   Скрываем ровно карточку «Без категории» (slug = misc)
   ================================================================ */

/* 
  1) Ищем <li class="product-category">, внутри которого есть <a> с href, содержащим "/product-category/misc/".
  2) С помощью CSS-селектора :has() полностью скрываем весь <li> (то есть он не займёт места).
  
  Важно: селектор :has() поддерживается в современных версиях Chrome/Edge/Safari/Opera. 
  Если вам нужна 100% кроссбраузерность, можно чуть ниже добавить запасной вариант через height:0, overflow:hidden.
*/

/* Основное правило через :has() */
.product-category:has(a[href*="/product-category/misc/"]) {
  display: none !important;
}

/* --------------------------------------------------------
   Для браузеров, не поддерживающих :has(), дополнительно:
   (скрываем всё содержимое карточки «Без категории» так,
    чтобы она по факту не занимала места)
   -------------------------------------------------------- */
.product-category a[href*="/product-category/misc/"] {
  /* Скрываем саму ссылку (чтобы не было пустого <a>) */
  display: none !important;
}

/* Убираем высоту, паддинги и маргины у <li>, если :has() не сработал */
.product-category a[href*="/product-category/misc/"] {
  /* Делать этот блок пустым — ссылка уже скрыта, но контейнер остался */
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Этот селектор «подчистит» возможный <img> и <h2> внутри, 
   если они ещё как-то видны (редко нужно): */
.product-category a[href*="/product-category/misc/"] img,
.product-category a[href*="/product-category/misc/"] h2 {
  display: none !important;
}

/* --------------------------------------------------------
   Более «грубый» запасной вариант: если карточка всё ещё мелькает,
   принудительно обнуляем высоту у родителя <li> с данным href.
 
   (Этот блок сработает только там, где :has() и предыдущие стили
    не скрыли элемент полностью.)
   -------------------------------------------------------- */
.product-category a[href*="/product-category/misc/"] {
  display: none !important;
}
.elementor-element-d6b5199 li.product-category a[href*="/product-category/misc/"] + * {
  display: none !important;
}
/* Тот же самый <li> — путь к нему через parent-перепрыгивание */
.product-category a[href*="/product-category/misc/"] {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 767px) {
  .elementor-wc-products ul.products {
    grid-column-gap: 12px !important;
    grid-row-gap: 12px !important;
  }
}

/* 1) Жёстко назначаем квадратный контейнер для <picture> */
.products.elementor-grid.columns-5 .product-category picture {
  display: block !important;      /* принудительно блочный контейнер */
  width: 100% !important;         /* 100% ширины ячейки */
  padding-top: 100% !important;   /* квадрат 1:1 */
  position: relative !important;  
  overflow: hidden !important;
  border-radius: 4px !important;
}

/* 2) Абсолютно позиционируем картинку внутри этого квадрата */
.products.elementor-grid.columns-5 
  .product-category picture img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 3) Hover-эффекты оставляем прежними, но с повышенной специфичностью */
.products.elementor-grid.columns-5 
  .product-category:hover picture img {
  transform: scale(1.02) !important;
  filter: brightness(90%) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-61e3cb7 *//* ============================= */
/* 1) Сброс базовых отступов */
.my-wc-cat-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================= */
/* 2) ПЕРВЫЙ УРОВЕНЬ: “ПЛИТКИ” */

/* 2.1) Любой <li> первого уровня */
.my-wc-cat-tree > li.root-cat-item {
  margin-bottom: 10px;
}

/* 2.2) Родительский элемент с подкатегориями */
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children {
  display: flex;
  align-items: center;
  background-color: rgba(249, 249, 249, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* 2.3) Ссылка занимает всё пространство */
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children > a {
  flex: 1;
  padding: 16px;
  color: #111827;
  font-family: "Golos Text", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: -1%;
  text-decoration: none;
  transition: background 0.2s ease;
  border: none;
}
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children > a:hover {
  background-color: rgba(249, 249, 249, 1);
}

/* 2.4) Убираем псевдо-стрелку у <a> */
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children > a::after {
  content: none;
}

/* 2.5) Нижняя граница при открытом состоянии */
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children.open > a {
  border-bottom: 1px solid rgba(237, 237, 237, 1);
}

/* ============================= */
/* 3) TOGGLER (стрелка) справа */

/* 3.1) Базовые стили стрелки */
.my-wc-cat-tree > li.cat-item-has-children > .toggle-subcats {
  flex: 0 0 24px;
  height: 24px;
  cursor: pointer;
  background-image: url("https://vorotasam55.ru/wp-content/uploads/2025/06/icon-frame.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  
  /* расположение справа */
  order: 2;
  margin-left: auto;
  margin-right: 16px;
}

/* 3.2) Поворот стрелки при .open */
.my-wc-cat-tree > li.cat-item-has-children.open > .toggle-subcats {
  transform: rotate(90deg);
}

/* ============================= */
/* 4) Скрытие/показ подменю */
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children > ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-wc-cat-tree > li.root-cat-item.cat-item-has-children.open > ul {
  display: block;
}

/* ============================= */
/* 5) ЛИСТОВЫЕ ЭЛЕМЕНТЫ ПЕРВОГО УРОВНЯ */
.my-wc-cat-tree > li.root-cat-item:not(.cat-item-has-children) > a {
  display: block;
  padding: 16px;
  background-color: rgba(249, 249, 249, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 6px;
  color: #111827;
  font-family: "Golos Text", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: -1%;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-bottom: 10px;
}
.my-wc-cat-tree > li.root-cat-item:not(.cat-item-has-children) > a:hover {
  background-color: rgba(249, 249, 249, 1);
}

/* ============================= */
/* 6) СУБКАТЕГОРИИ (второй+ уровень) */
.my-wc-cat-tree li.sub-cat-item {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.my-wc-cat-tree li.sub-cat-item > a {
  display: block;
  padding: 10px 16px;
  color: #010101;
  font-family: "Golos Text", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  text-decoration: none;
  transition: background 0.2s ease;
}
.my-wc-cat-tree li.sub-cat-item > a:hover {
  background-color: rgba(249, 249, 249, 1);
}
.my-wc-cat-tree li.sub-cat-item > a::after {
  content: none;
}/* End custom CSS */