.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}/*
Theme Name: GeneratePress
Theme URI: https://generatepress.com
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Version: 3.6.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

GeneratePress, Copyright 2014-2025 EDGE22 Studios LTD.
GeneratePress is distributed under the terms of the GNU GPL

GeneratePress is based on Underscores http://underscores.me/, (C) 2012-2025 Automattic, Inc.

Actual CSS can be found in /assets/css/ folder.
*/
/*
Theme Name: Online Store Tool Child
Theme URI: https://generatepress.com
Description: Child theme for GeneratePress.
Author: Your Name
Author URI: https://yourwebsite.com
Template: generatepress
Version: 1.0
*/

/* Подключение шрифта Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* ===== иконки в хедере ===== */
.topbar-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  gap: 15px;
}

.topbar-icons a {
  color: #333;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar-icons a:hover {
  color: #0073aa; /* Изменить цвет при наведении */
}

/* Глобальные переменные темы */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Основные стили темы */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Стили тёмной темы */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
}

/* Примеры инверсии навигации и футера (общие) */
body.dark-mode .site-header,
body.dark-mode .site-footer {
  background-color: #1e1e1e;
}

/*Кнопка переключения темы. Сместить вверх: уменьшить значение top */

#theme-toggle {
  position: fixed;
  top: 23px;
  right: 10px;
  z-index: 9999;
  padding: 10px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/*СКРЫТЬ КНОПКУ ПЕРЕКЛЮЧЕНИЯ ТЕМЫ*/
#theme-toggle {
  display: none !important;
}

/* Центрирование строки в футере */
.footer-bar,
.site-info {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block;
}

/* Ссылки без подчёркивания (глобально) */
a {
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

a:hover {
  transform: scale(1.05);
  color: #0073aa;
}

/* Футер: общие стили */
.site-footer,
.footer-widgets-container,
.footer-bar,
.site-info {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}

/* Ссылки в футере */
.site-footer a,
.footer-bar a,
.footer-widgets-container a {
  color: #ccc !important;
}

.site-footer a:hover,
.footer-bar a:hover,
.footer-widgets-container a:hover {
  color: #fff !important;
}

/* Виджеты и текст в футере */
.site-footer .widget,
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget span,
.site-footer .widget-title,
.site-footer input,
.site-footer label {
  color: #f1f1f1 !important;
}

/* Поля и кнопки в футере */
.site-footer input[type="email"],
.site-footer input[type="text"] {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

.site-footer input[type="submit"],
.site-footer button {
  background-color: #0073aa !important;
  color: #fff !important;
  border: none !important;
}

.site-footer input[type="submit"]:hover,
.site-footer button:hover {
  background-color: #005177 !important;
}

/* Убираем ограничение ширины и отступы у футера */
.site-footer,
.site-footer .inside-footer-widgets,
.site-footer .footer-bar .inside-footer-bar,
.site-footer .footer-widgets,
.site-footer .site-info,
.site-footer .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Футер с эффектом плавного появления */
.site-footer {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.5s ease,
    color 0.5s ease;
}

body.show-footer .site-footer {
  opacity: 1;
  transform: translateY(0);
}

/* Виджеты футера (аккордеон) */
.footer-widget-title {
  cursor: pointer;
}
.footer-widget-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.footer-widget.open .footer-widget-content {
  max-height: 500px;
}

/* Специальные стили для тёмной темы (блоки, виджеты, поиск и меню) */
body.dark-mode .widget,
body.dark-mode .widget-area,
body.dark-mode .sidebar,
body.dark-mode .content-area,
body.dark-mode .inside-article,
body.dark-mode .entry-content,
body.dark-mode .entry-summary,
body.dark-mode .site-content,
body.dark-mode .search-form,
body.dark-mode .search-form input,
body.dark-mode .search-form button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Поисковая строка */
body.dark-mode .widget_search input[type="search"],
body.dark-mode .widget_search button[type="submit"],
body.dark-mode .search-form input[type="search"],
body.dark-mode .search-form button[type="submit"] {
  background-color: #222222 !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Меню навигации в темной теме */
body.dark-mode .main-navigation,
body.dark-mode .main-navigation ul,
body.dark-mode .main-navigation li,
body.dark-mode .main-navigation .menu > .menu-item > a,
body.dark-mode .site-header,
body.dark-mode .header-wrap,
body.dark-mode .navigation-branding,
body.dark-mode .menu,
body.dark-mode .menu-item,
body.dark-mode .menu-item a {
  background-color: #121212 !important;
  color: #ffffff !important;
}

body.dark-mode .main-navigation .menu > .menu-item > a:hover,
body.dark-mode .main-navigation .menu > .menu-item.current-menu-item > a {
  background-color: #1e1e1e !important;
}

/* Общий фон страницы в темной теме */
body.dark-mode {
  background-color: #121212 !important;
}

/* Исправление контрастности текста в тёмной теме */
body.dark-mode .entry-title a,
body.dark-mode .entry-meta,
body.dark-mode .entry-meta a,
body.dark-mode .page-header h1,
body.dark-mode .widget-title,
body.dark-mode .widget a,
body.dark-mode .widget,
body.dark-mode .entry-content,
body.dark-mode .entry-summary {
  color: #ffffff !important; /* белый цвет текста для максимального контраста */
  opacity: 1 !important; /* убираем прозрачность */
}

/* Исправление контрастности логотипа в хедере в тёмной теме */
body.dark-mode .site-header .main-title a,
body.dark-mode .site-header .main-title {
  color: #ffffff !important; /* Белый цвет текста логотипа */
  opacity: 1 !important;
}

/* Увеличить верхний отступ в футере */
.site-footer .footer-widget h4,
.site-footer .footer-widget .widget-title {
  margin-top: 20px; /* можно увеличить до 30px, если нужно больше воздуха */
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5 {
  margin-top: 20px;
}

.top-bar a,
.top-bar a:visited {
  color: #ffffff !important; /* белый текст */
  font-weight: 500;
}

.top-bar a:hover {
  color: #ffcc00 !important; /* или другой акцент при наведении */
}

#scrollToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background-color: #b50000;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  display: flex; /* ⬅ используем flex */
  align-items: center; /* ⬅ вертикальное центрирование */
  justify-content: center; /* ⬅ горизонтальное центрирование */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#scrollToTop:hover {
  background-color: #a00000;
  transform: scale(1.1);
}

body.show-scroll-button #scrollToTop {
  opacity: 1;
  visibility: visible;
}

/* === ТЁМНАЯ ТЕМА: адаптация блоков главной страницы === */
body.dark-mode .home-categories,
body.dark-mode .home-popular-products,
body.dark-mode .home-new-products,
body.dark-mode .home-features,
body.dark-mode .home-about,
body.dark-mode .home-subscribe {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}

/* Белый цвет заголовков */
body.dark-mode .section-title {
  color: #ffffff !important;
}

/* Цвет текста в блоках */
body.dark-mode .home-subscribe .subscribe-description,
body.dark-mode .home-about p,
body.dark-mode .home-features .feature p {
  color: #cccccc !important;
}

/* Подпись и инпуты в тёмной теме */
body.dark-mode .subscribe-form input[type="email"] {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode .subscribe-form button {
  background-color: #d00;
  color: white;
}

body.dark-mode .subscribe-form button:hover {
  background-color: #a00;
}

/* Кнопки Telegram и WhatsApp */
body.dark-mode .messenger-icon {
  opacity: 0.9;
}

/* Темная тема: карточки блока "Почему выбирают нас" */
body.dark-mode .feature-item {
  background-color: #2a2a2a !important;
  color: #f1f1f1 !important;
  border-color: #444 !important;
  transition: background-color 0.3s ease;
}

body.dark-mode .feature-item strong {
  color: #ff4444 !important;
}

/* Карточки категорий в тёмной теме */
body.dark-mode .category-card {
  background-color: #2a2a2a !important;
  color: #f1f1f1;
  border: 1px solid #444;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .category-card:hover {
  background-color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Карточки товаров в тёмной теме */
body.dark-mode .product-card {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #444;
}

body.dark-mode .product-card h3,
body.dark-mode .product-card .product-price {
  color: #fff;
}

/* Карточки преимуществ */
body.dark-mode .feature {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #444;
}

/* Кнопка "В корзину" — без изменений, так как уже контрастная */

body.dark-mode .feature-item {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .feature-item *,
body.dark-mode .feature-item strong {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  #scrollToTop {
    bottom: 70px; /* поднять кнопку, чтобы не перекрывалась нижней панелью */
  }
}

/* Обертка для иконки корзины, чтобы позиционировать счетчик */
.cart-icon-wrapper {
  position: relative; /* Важно для позиционирования кругляшка */
  display: inline-flex; /* Чтобы обертка не занимала всю ширину */
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Убираем подчеркивание у ссылки */
  /* Возможно, нужно будет скорректировать padding для nav-item */
}

.cart-count-bubble {
  position: absolute;
  top: -5px; /* Регулируйте для вертикального положения */
  right: -5px; /* Регулируйте для горизонтального положения */
  background-color: red; /* Цвет кругляшка */
  color: white; /* Цвет текста */
  font-size: 10px; /* Размер шрифта */
  font-weight: bold;
  border-radius: 50%; /* Делаем его круглым */
  padding: 2px 5px; /* Отступы внутри кругляшка */
  min-width: 18px; /* Минимальная ширина, чтобы кругляшок был достаточно большим для одно/двухзначных чисел */
  height: 18px; /* Высота для создания идеального круга */
  display: flex; /* Для центрирования текста внутри кругляшка */
  align-items: center; /* Центрируем по вертикали */
  justify-content: center; /* Центрируем по горизонтали */
  text-align: center;
  line-height: 1; /* Убираем лишние отступы строки */
  pointer-events: none; /* Чтобы не мешал кликам по иконке */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* Легкая тень */
  transform: scale(0); /* Изначально скрыт */
  transform-origin: 100% 0; /* Точка трансформации (правый верхний угол) */
  transition: transform 0.2s ease-out; /* Анимация появления */
}

/* Правило для отображения кругляшка, когда в нем есть цифры */
.cart-count-bubble.has-items {
  transform: scale(1); /* Показываем кругляшок */
}

/* Стили для десктопной корзины, если её иконка находится в другом месте
   В style.css, например:
*/
/*
.main-navigation .cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-navigation .cart-count-bubble {
    position: absolute;
    top: -8px; // Возможно, другие значения для десктопа
    right: -8px; // Возможно, другие значения для десктопа
    background-color: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 5px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    transform: scale(0);
    transform-origin: 100% 0;
    transition: transform 0.2s ease-out;
}

.main-navigation .cart-count-bubble.has-items {
    transform: scale(1);
}
*/

/* Скрываем кнопку "Фильтр" и ее родительский контейнер
   на десктопных экранах (шириной более 768px).
   768px - это стандартный порог для мобильных/десктопных устройств. */
@media (min-width: 769px) {
  .mobile-shop-controls {
    display: none !important; /* Скрываем весь контейнер с кнопкой */
  }
}

/* Бургер-иконка в светлой теме: черная */
.menu-toggle svg {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Бургер-иконка в темной теме: белая */
body.dark-mode .menu-toggle svg {
  fill: #fff !important;
  stroke: #fff !important;
}

body.dark-mode .products-section {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
}/*
Theme Name: Online Store Tool Child
Theme URI: https://generatepress.com
Description: Child theme for GeneratePress.
Author: Your Name
Author URI: https://yourwebsite.com
Template: generatepress
Version: 1.0
*/

/* ===== НАСТРОЙКИ ШРИФТА ===== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* ========================================= */
/* Макет страницы каталога (Sidebar + Main Content) */
/* ========================================= */

.shop-container {
  display: flex;
  gap: 30px;
  margin: 0 auto;
  /* Если sidebar и primary имеют свои max-width, можно добавить flex-wrap: wrap; */
  /* чтобы они переносились на маленьких экранах, но это зависит от вашего адаптивного дизайна. */
}

/* Уточненный селектор для основного контента на странице магазина */
.shop-container #primary.site-main {
  flex: 1; /* или flex: 1 1 auto; */
  min-width: 0; /* Важно для flex-элементов внутри main, чтобы они не переполняли */
}

/* Общие стили для области виджетов (сайдбара) */
.widget-area {
  background: #fff; /* Если это фон для всего сайдбара */
  padding: 15px;
  border-radius: 8px;
}

/* Стили для сайдбара на странице архивов WooCommerce */
.woocommerce.archive #right-sidebar,
.woocommerce.archive #left-sidebar,
.woocommerce.archive #secondary {
  flex: 0 0 auto; /* Чтобы сайдбар не сжимался */
  width: max-content; /* Ширина по содержимому */
  min-width: 260px; /* Уменьшено с 270px, чтобы было больше места */
  max-width: 320px;
  padding: 10px;
  box-sizing: border-box;
  background: none; /* Убедитесь, что фон не дублируется, если он уже в .widget-area */
  border: none;
}

/* Убираем лишние рамки у самих виджетов в сайдбаре */
#right-sidebar .widget,
#left-sidebar .widget,
#secondary .widget {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Стили для виджетов фильтров (WOOF) */
.widget_woof {
  font-size: 15px;
  padding: 0;
  line-height: 1.4;
}

.woof_container_inner label,
.woof_container_inner span,
.woof_container_inner div {
  white-space: nowrap; /* Убрано !important, если не требуется явно */
}

.woof_price_search_container input[type="text"] {
  min-width: 75px;
  font-size: 14px;
}

/* Сетка товаров получает оставшееся пространство */
.woocommerce.archive #primary {
  flex: 1 1 auto;
  width: auto !important; /* Автоматическая ширина */
  max-width: 100% !important;
  margin: 0; /* Убираем внешние отступы */
}

/* Убираем сайдбар и возвращаем полную ширину контента на странице товара */
.single-product .site-content {
  display: block !important;
}

.single-product #primary {
  width: 100% !important;
  margin: 0 auto;
}

.single-product #secondary {
  display: none !important;
}

/* ========================================= */
/* Стили для сетки товаров и карточек */
/* ========================================= */

/* Сетка карточек товаров: Grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 25px !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Карточки товаров внутри grid */
.woocommerce ul.products li.product {
  width: 100% !important;
  box-sizing: border-box;
  height: auto; /* Позволяем карточке расти по содержимому */
  display: flex; /* Flexbox для внутреннего содержимого карточки */
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 0px; /* Убедитесь, что нет внутренних отступов, которые вызывают проблему */
  margin: 0; /* Убедитесь, что нет внешних отступов у каждой карточки */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Анимация при наведении */
}

/* Эффект при наведении на карточку */
ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Обёртка внутри карточки — тянется на всю высоту */
ul.products li.product .card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Блок с изображением */
ul.products li.product .image-block {
  flex: 0 0 180px; /* Фиксированная высота для изображения */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

ul.products li.product .image-block img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Блок с информацией о товаре */
ul.products li.product .info-block {
  flex: 1 1 auto; /* Заполняет всё доступное пространство */
  display: flex;
  flex-direction: column;
  padding: 0 10px 12px;
}

/* Обёртка заголовка */
ul.products li.product .product-title-wrap {
  flex: 0 0 auto;
  margin: 10px 0;
  overflow: hidden;
  display: block;
  height: 3.6em; /* три строки по ~1.2em */
}

/* Заголовок товара */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  /* Уточненный селектор */
  margin: 0;
  font-size: 1em;
  line-height: 1.2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: 50px; /* Убедитесь, что есть минимальная высота для выравнивания */
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

/* Блок с ценой и кнопкой */
ul.products li.product .bottom-block {
  margin-top: auto; /* Прижимает блок к низу карточки */
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  position: relative; /* Добавляем относительное позиционирование чтобы кнопка не съезжала вверх при нажатии*/
}

/* Цена */
.woocommerce ul.products li.product .price {
  /* Уточненный селектор */
  min-height: 3.5em; /* фиксированная высота для всех цен */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
  margin: 0;
}

ul.products li.product .price del {
  color: #888;
  font-size: 0.9em;
  display: block;
}

ul.products li.product .price ins {
  color: var(--text-color);
  text-decoration: none;
  display: block;
}

/* Кнопка "В корзину" */
/* Кнопка "В корзину" - улучшенная версия */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .added_to_cart {
  background-color: #d00 !important;
  color: white !important;
  padding: 10px !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  width: 100% !important;
  text-align: center !important;
  transition: background-color 0.2s ease !important;
  position: relative !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
  background-color: #a00 !important;
  transform: none !important;
}

/* Состояние "добавлено в корзину" */
ul.products li.product .added_to_cart {
  background-color: #28a745 !important;
}

ul.products li.product .added_to_cart:hover {
  background-color: #218838 !important;
}

/* Дополнительные стили, если нужны */
.woocommerce-archive .site-main {
  flex-grow: 1; /* Возможно, этот стиль избыточен, так как #primary уже имеет flex: 1 */
}

/* Картинка (если нужен более специфичный селектор, чтобы перебить что-то) */
.woocommerce ul.products li.product img {
  height: 180px;
  object-fit: contain;
}

/* Полностью скрываем сайдбар на страницах архивов WooCommerce */
.woocommerce.archive #secondary {
  display: none !important;
}

/* Полностью удаляем невидимые псевдоэлементы, которые могут ломать сетку */
ul.products::before,
ul.products::after,
ul.products li.product::before,
ul.products li.product::after {
  display: none !important;
  content: none !important;
}

/*Показ изображений при наведении курсора*/
.woocommerce ul.products li.product .second-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.woocommerce ul.products li.product:hover .second-image {
  opacity: 1;
}

/* Фиксация позиции кнопок в карточках товаров */
ul.products li.product .bottom-block .button,
ul.products li.product .bottom-block .add_to_cart_button,
ul.products li.product .bottom-block .added_to_cart {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Скрываем старую кнопку "Add to cart" когда появляется "View cart" */
ul.products li.product .bottom-block .add_to_cart_button.added {
  display: none !important;
}

/* Убеждаемся, что кнопка "View cart" заменяет, а не дополняет */
ul.products li.product .bottom-block .added_to_cart {
  position: static;
  width: 100%;
  margin: 0;
}

/*Отступ сверху кнопок переключения страниц каталога*/
.woocommerce nav.woocommerce-pagination {
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}

/* Альтернативный вариант с большим отступом */
.woocommerce .woocommerce-pagination {
  margin-top: 50px !important;
  padding-top: 20px !important;
  border-top: 1px solid #eee; /* Опционально: разделительная линия */
}

/* Более специфичный селектор для архивных страниц */
.woocommerce.archive nav.woocommerce-pagination ul {
  margin-top: 30px !important;
}

/* Если нужен отступ только от сетки товаров */
ul.products + nav.woocommerce-pagination {
  margin-top: 45px !important;
}

@media (max-width: 768px) {
  form.woocommerce-ordering {
    width: 100%;
    margin-bottom: 10px;
  }

  form.woocommerce-ordering select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
  }
}

/* Обертка, в которой будет селектор отображения и сортировки */
.view-mode-wrapper,
.woocommerce-ordering {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
}

/* Обёртка над ними */
.view-mode-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
  gap: 1rem;
}

/* Убираем float у Woo сортировки */
.woocommerce-ordering {
  float: none !important;
  margin-bottom: 0 !important;
}

/* Адаптив на мобилках */
@media (max-width: 768px) {
  .view-mode-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .woocommerce-ordering {
    width: 100%;
  }
}
/** {
  outline: 1px solid red !important;
}*/

.view-mode-container {
  display: flex;
  align-items: flex-start; /* Выравнивание по верхнему краю */
  gap: 15px; /* Расстояние между селектами */
  flex-wrap: wrap; /* На всякий случай для мобильных */
}

/* Удалим лишние отступы у WooCommerce-сортировки */
.view-mode-container .woocommerce-ordering {
  margin: 0 !important;
  padding: 0 !important;
}

.view-mode-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.woocommerce nav.woocommerce-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}