/**
 * Оптимизированные адаптивные стили для категорий и фильтров WooCommerce
 * Фокус на скорость, производительность и UX
 */

/* ==========================================================================
   БАЗОВЫЕ СТИЛИ
   ========================================================================== */

   .crosssells_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header_product {
    padding: 20px 0;
  }
  
  .header_product h1 {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-medium);
    color: var(--black);
    line-height: 1.2;
    margin-bottom: 10px;
  }
  
  .woocommerce-breadcrumb {
    font-weight: var(--font-weight-semibold);
  }
  
  .woocommerce-breadcrumb a {
    color: var(--text-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    transition: color 0.2s ease;
  }
  
  .woocommerce-breadcrumb a:hover {
    color: var(--primary-color);
  }
  

  .second-level-categories{
    border: 1px solid #333;
    border-radius: 5px;
  }

  .category_filter{
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
    border: 1px solid #333;
    border-radius: 5px;
  }

  /* ==========================================================================
     LAYOUT - DESKTOP
     ========================================================================== */
  
  .categories_flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .product_filter {
    width: 18%;
    min-width: 250px;
    border-top: 1px solid var(--light-gray);
    padding: 10px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--light-gray);
  }
  
  .product_filter::-webkit-scrollbar {
    width: 6px;
  }
  
  .product_filter::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 3px;
  }
  
  .product_filter::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
  }
  
  .product_filter::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
  }
  
  .category {
    width: calc(80% - 20px);
    flex: 1;
  }
  
  /* ==========================================================================
     МОБИЛЬНЫЕ КНОПКИ ФИЛЬТРОВ (скрыты на desktop)
     ========================================================================== */
  
  .mobile-filter {
    display: none;
    width: 100%;
  }
  
  .filter_overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
  }
  
  .filter_overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  
  .close-icon-wrapper {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 50%;
    background: var(--light-gray);
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  
  .close-icon-wrapper:hover {
    background: var(--primary-color);
    color: var(--white);
  }
  
  .close-icon-wrapper i {
    font-size: 18px;
  }
  
  .mobile-filter-shortcode {
    display: none;
  }
  
  /* ==========================================================================
     КАТЕГОРИИ И ФИЛЬТРЫ
     ========================================================================== */
  
  .bapf_sfilter {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--light-gray);
  }
  
  .bapf_head {
    padding: 10px 12px;
    border-bottom: 1px solid #333;
  }
  
  .bapf_head h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--black);
  }
  
  .bapf_val {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-light);
  }
  
  .bapf_categories {
    display: flex;
    flex-direction: column;
  }
  
  .bapf_categories a,
  .category-button {
    display: block;
    padding: 8px 12px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    color: var(--black);
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .category-button:last-child{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .bapf_categories a:hover,
  .category-button:hover {
    background: var(--light-gray);
    color: var(--primary-color);
  }
  
  .bapf_categories a.active,
  .category-button.active {
    background: var(--primary-color);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
  }
  
  .second-level-categories {
    margin-bottom: 20px;
    border-radius: 5px;
  }
  
  /* ==========================================================================
     СЕТКА ТОВАРОВ
     ========================================================================== */
  
  ul.products.columns-3,
  ul.products.columns-5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
  }
  
  .columns-5 .product-category,
  .columns-3 .product-category {
    display: none;
  }
  
  /* ==========================================================================
     ПОДКАТЕГОРИИ НАД ТОВАРАМИ
     ========================================================================== */
  
  .subcategory-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 20px;
  }
  
  .subcategory-button {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    background: #fff;
    color: var(--black);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  
  .subcategory-button:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .subcategory-button.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
  }
  
  /* ==========================================================================
     ПАГИНАЦИЯ
     ========================================================================== */
  
  .category-pagination {
    margin: var(--spacing-lg) 0;
  }
  
  .woocommerce-pagination {
    text-align: center;
  }
  
  .woocommerce-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
  }
  
  .woocommerce-pagination .page-numbers .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .woocommerce-pagination .page-numbers .page-numbers:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
  }
  
  .woocommerce-pagination .page-numbers .page-numbers.current {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    pointer-events: none;
  }
  
  .facetwp-slider-reset{
    display: none;
  }
  
  .category_price{
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
    border: 1px solid #333;
    margin-top: 20px;
  }

  .woocommerce-pagination .page-numbers .next,
  .woocommerce-pagination .page-numbers .prev {
    font-weight: var(--font-weight-bold);
  }
  
  .woocommerce-pagination .page-numbers .page-numbers:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  .facetwp-facet {
    margin-bottom: 10px !important;
    padding-left: 12px;
    padding-top: 10px;
    padding-right: 12px;
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 1440px
     ========================================================================== */
  
  @media (max-width: 1440px) {
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
  
    .woocommerce-loop-product__title {
      font-size: var(--font-size-sm);
    }
  
    .product_filter {
      width: 20%;
    }
  
    .category {
      width: calc(78% - 20px);
    }
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 1200px
     ========================================================================== */
  
  @media (max-width: 1200px) {
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
  
    .product_filter {
      width: 22%;
    }
  
    .category {
      width: calc(76% - 20px);
    }
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 992px (ТАБЛЕТЫ И МОБИЛЬНЫЕ)
     ========================================================================== */
  
  @media (max-width: 992px) {
    /* Сетка товаров */
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
  
    /* Основная категория на всю ширину */
    .category {
      width: 100%;
    }
  
    /* Показываем мобильные кнопки фильтров */
    .mobile-filter {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
  
    #mobile_filter,
    #mobile_filters {
      padding: 12px 20px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: 6px;
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-medium);
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
  
    #mobile_filter:hover,
    #mobile_filters:hover {
      background: #8f7e6d;
      transform: translateY(-1px);
    }
  
    #mobile_filter:active,
    #mobile_filters:active {
      transform: translateY(0);
    }
  
    /* Мобильный фильтр-шорткод */
    .mobile-filter-shortcode {
      display: block;
      padding: 30px 20px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background: var(--white);
      height: 100%;
      width: 85%;
      max-width: 400px;
      transform: translateX(-100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
  
    .mobile-filter-shortcode.active {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: translateX(0);
    }
  
    .mobile-filter-shortcode .wc-local-attributes-filter-form {
      display: flex;
      flex-direction: column-reverse;
    }
  
    .mobile-filter-shortcode .wc-local-attributes-filter-wrapper {
      margin-top: 0 !important;
    }
  
    .mobile-filter-shortcode .filter-title {
      margin-bottom: 10px;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
    }
  
    .mobile-filter-shortcode .wc-local-attributes-filter-form .filter-columns {
      overflow-y: auto;
      max-height: calc(100vh - 150px);
      padding: 15px 0;
    }
  
    /* Основной product_filter как боковая панель */
    .product_filter {
      display: none; /* Скрыт по умолчанию */
      padding: 30px 20px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background: var(--white);
      height: 100%;
      width: 85%;
      max-width: 400px;
      transform: translateX(-100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
  
    .product_filter.active {
      display: block; /* Показываем только при активации */
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: translateX(0);
    }
  
    .product_filter h2 {
      font-size: var(--font-size-xl);
      margin-bottom: 20px;
    }
  
    .product_filter .wc-local-attributes-filter-wrapper {
      display: none;
    }
  
    /* Заголовок с кнопкой закрытия */
    .close-category-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--light-gray);
    }
  
    .close-icon-wrapper {
      display: flex;
    }
  
    /* Стили для категорий на мобильных */
    .second-level-categories .bapf_categories {
      display: flex;
      flex-direction: column;
    }
  
    .second-level-categories .category-button {
      padding: 10px 15px;
      font-size: var(--font-size-sm);
    }
  
    /* Подкатегории */
    .subcategory-buttons {
      gap: 8px;
      margin: 12px 0 16px;
    }
  
    .subcategory-button {
      padding: 8px 14px;
      font-size: var(--font-size-xs);
    }
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 768px
     ========================================================================== */
  
  @media (max-width: 768px) {
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
  
    .header_product h1 {
      font-size: var(--font-size-xl);
    }
  
    .woocommerce-breadcrumb a {
      font-size: 12px;
    }
  
    .categories_flex {
      gap: 15px;
    }
  
    .subcategory-buttons {
      gap: 6px;
      margin: 10px 0 14px;
    }
  
    .subcategory-button {
      padding: 6px 12px;
      font-size: 12px;
    }
  
    /* Пагинация */
    .woocommerce-pagination .page-numbers .page-numbers {
      min-width: 36px;
      height: 36px;
      font-size: var(--font-size-sm);
      padding: 0 8px;
    }
  
    .woocommerce-pagination ul.page-numbers {
      gap: 4px;
    }
  
    /* Фильтры */
    .product_filter,
    .mobile-filter-shortcode {
      width: 90%;
      max-width: 350px;
      padding: 25px 15px;
    }
  
    .bapf_head h3 {
      font-size: var(--font-size-md);
    }
  
    .category-button {
      padding: 8px 12px;
      font-size: var(--font-size-sm);
    }
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 576px
     ========================================================================== */
  
  @media (max-width: 576px) {
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  
    .header_product {
      padding: 15px 0;
    }
  
    .header_product h1 {
      font-size: var(--font-size-lg);
      margin-bottom: 8px;
    }
  
    #mobile_filter,
    #mobile_filters {
      padding: 10px 16px;
      font-size: var(--font-size-sm);
    }
  
    .subcategory-buttons {
      gap: 5px;
      margin: 8px 0 12px;
    }
  
    .subcategory-button {
      padding: 6px 10px;
      font-size: 11px;
    }
  
    .product_filter,
    .mobile-filter-shortcode {
      width: 100%;
      max-width: none;
      padding: 20px 15px;
    }
  
    .close-icon-wrapper {
      width: 32px;
      height: 32px;
    }
  
    .close-icon-wrapper i {
      font-size: 16px;
    }
  }
  
  /* ==========================================================================
     АДАПТИВНОСТЬ: 375px и меньше
     ========================================================================== */
  
  @media (max-width: 375px) {
    ul.products.columns-5,
    ul.products.columns-3 {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  
    .header_product h1 {
      font-size: var(--font-size-md);
    }
  
    .subcategory-buttons {
      flex-direction: column;
      gap: 6px;
    }
  
    .subcategory-button {
      width: 100%;
      text-align: center;
    }
  }
  
  /* ==========================================================================
     ОПТИМИЗАЦИЯ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ
     ========================================================================== */
  
  /* Отключаем анимации для пользователей с prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  
    .product_filter,
    .mobile-filter-shortcode,
    .filter_overlay {
      transition: none !important;
    }
  }
  
  /* Оптимизация для touch устройств */
  @media (hover: none) {
    ul.products li.product:hover {
      transform: none;
      box-shadow: none;
    }
  
    .category-button:hover,
    .subcategory-button:hover,
    .bapf_categories a:hover {
      transform: none;
    }
  }
  
  /* Улучшение доступности */
  .mobile-filter-shortcode:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
  }
  
  /* ==========================================================================
     ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
     ========================================================================== */
  
  .no-products-message {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--font-size-lg);
  }
  
  .category-seo-description {
    margin-top: 40px;
    padding: 30px 0;
    border-top: 1px solid var(--light-gray);
  }
  
  .category-seo-description h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 15px;
  }
  
  .category-seo-description p {
    line-height: 1.6;
    color: var(--text-color);
  }
  
  /* Скрытие элементов на desktop */
  @media (min-width: 993px) {
    .mobile-filter,
    .mobile-filter-shortcode,
    .filter_overlay,
    .close-icon-wrapper {
      display: none !important;
    }
  
    .product_filter {
      display: block;
      position: sticky;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: none;
      transition: none;
    }
  }

  /* Оптимизация таблицы заказов */
.account-orders-table {
    position: relative;
}

/* Плавный переход при загрузке FacetWP */
.facetwp-template {
    transition: opacity 0.3s ease;
}

/* Оптимизация для мобильных */
@media (max-width: 768px) {
    .woocommerce-orders-table {
        font-size: 0.9em;
    }
    
    .woocommerce-orders-table td {
        padding: 0.5em;
    }
}

/* Прелоадер для FacetWP */
.facetwp-template[style*="opacity: 0.5"] {
    position: relative;
}

.facetwp-template[style*="opacity: 0.5"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Оптимизация пагинации */
.woocommerce-pagination {
    margin-top: 2em;
    text-align: center;
}

.woocommerce-pagination .facetwp-pager {
    display: inline-block;
}