/* AutoStyle desktop catalog adaptive fix
   Fixes category filter/sidebar on different desktop widths */

/* Give catalog sidebar enough space on normal desktop screens */
@media (min-width: 1181px){
  .catalog-page{
    grid-template-columns: clamp(340px, 25vw, 410px) minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(1560px, calc(100% - 40px)) !important;
  }

  .catalog-filters,
  .filters.catalog-filters{
    min-width: 0 !important;
    overflow: visible !important;
  }

  .category-tree-filter{
    width: 100% !important;
    overflow: hidden !important;
  }

  .cat-tree-grid{
    grid-template-columns: minmax(142px, .95fr) minmax(160px, 1.05fr) !important;
    min-width: 0 !important;
  }

  .cat-tree-title{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .cat-tree-parent,
  .cat-tree-child{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: clamp(12px, .82vw, 14px) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  .cat-tree-parent.active,
  .cat-tree-child.active{
    border-radius: 13px !important;
  }
}

/* Narrow notebooks: keep the filter usable instead of squeezing text */
@media (min-width: 981px) and (max-width: 1180px){
  .catalog-page{
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(100% - 28px, 1180px) !important;
  }

  .cat-tree-grid{
    grid-template-columns: 1fr !important;
  }

  .cat-tree-col-parent{
    border-right: 0 !important;
    border-bottom: 1px solid #e8edf4 !important;
  }

  .cat-tree-parents{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 260px !important;
  }

  .cat-tree-parent,
  .cat-tree-child{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
    min-height: 40px !important;
    text-overflow: clip !important;
  }
}

/* Do not let the right catalog area push the page outside the screen */
.catalog-content,
.catalog-top,
.catalog-grid{
  min-width: 0 !important;
}

@media (max-width: 1500px) and (min-width: 1181px){
  .catalog-grid{
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  }
}

/* AutoStyle real catalog layout fix: no overlays, no duplicated category blocks.
   Desktop small screens: main catalog stays in left sidebar, child groups stay in top bar. */
.catalog-page{
  align-items:start !important;
}

.filters.catalog-filters .field:has(#category){
  display:none !important;
}

.category-tree-filter{
  width:100% !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  margin:0 !important;
}

.category-tree-filter .cat-filter-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid #edf0f4 !important;
  margin-bottom:12px !important;
}

.category-tree-filter .cat-filter-head b{
  font-size:16px !important;
  font-weight:1000 !important;
  color:#101828 !important;
}

#clearCategoryFilter{
  border:1px solid #dfe6ef !important;
  background:#fff !important;
  color:#13a900 !important;
  border-radius:999px !important;
  height:32px !important;
  padding:0 12px !important;
  font-size:12px !important;
  font-weight:950 !important;
  cursor:pointer !important;
}

.cat-tree-grid,
.cat-tree-col,
.cat-tree-col-child,
.cat-tree-children,
.cat-tree-title{
  display:initial !important;
}

.cat-tree-col-child,
.cat-tree-children,
.cat-tree-title{
  display:none !important;
}

.cat-tree-main-only,
.cat-tree-parents{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
}

.cat-tree-parent{
  width:100% !important;
  min-height:42px !important;
  height:auto !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:#111827 !important;
  text-align:left !important;
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  cursor:pointer !important;
}

.cat-tree-parent::after{
  content:'›' !important;
  font-size:22px !important;
  line-height:1 !important;
  color:#98a2b3 !important;
  flex:0 0 auto !important;
}

.cat-tree-parent.active{
  background:linear-gradient(180deg,#35e01c,#20c90b) !important;
  color:#06120a !important;
  box-shadow:0 8px 18px rgba(32,201,11,.20) !important;
}

.cat-tree-parent.active::after{
  color:#06120a !important;
}

.top-category-bar{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

.top-child-groups{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:4px 2px 6px !important;
  scrollbar-width:thin !important;
}

.top-cat-btn{
  flex:0 0 auto !important;
  height:42px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  border:1px solid #dfe6ef !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:14px !important;
  font-weight:950 !important;
  box-shadow:0 6px 16px rgba(16,24,40,.05) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.top-cat-btn.active{
  background:linear-gradient(180deg,#35e01c,#20c90b) !important;
  border-color:#20c90b !important;
  color:#06120a !important;
  box-shadow:0 8px 20px rgba(32,201,11,.22) !important;
}

.catalog-top{
  flex-wrap:wrap !important;
  gap:12px !important;
  height:auto !important;
}

.catalog-top h1{
  flex:0 0 auto !important;
}

.catalog-top .top-category-bar{
  order:5 !important;
  flex:1 1 100% !important;
}

.catalog-top-price,
#zeroNotice,
.show-section-btn{
  max-width:100% !important;
}

@media (min-width:981px) and (max-width:1280px){
  .catalog-page{
    grid-template-columns:280px minmax(0,1fr) !important;
    gap:16px !important;
    width:calc(100% - 24px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .filters.catalog-filters{
    min-width:0 !important;
    overflow:visible !important;
  }
  .cat-tree-parent{
    font-size:13px !important;
    padding:9px 10px !important;
  }
}

@media (max-width:980px){
  .catalog-page{
    grid-template-columns:1fr !important;
  }
}

/* Fix: desktop sidebar catalog must not go below footer on low/small screens.
   This is not an overlay: the left filter remains in the normal catalog grid,
   but its inner content scrolls inside the panel. */
@media (min-width: 981px){
  .catalog-page{
    display:grid !important;
    align-items:start !important;
  }

  .filters.catalog-filters,
  aside.filters.catalog-filters{
    position:sticky !important;
    top:96px !important;
    align-self:start !important;
    max-height:calc(100vh - 118px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    z-index:1 !important;
    scrollbar-width:thin !important;
  }

  .filters.catalog-filters .category-tree-filter{
    overflow:visible !important;
  }

  .filters.catalog-filters .cat-tree-parents,
  .filters.catalog-filters .cat-tree-main-only{
    max-height:none !important;
    overflow:visible !important;
  }

  .catalog-content{
    min-width:0 !important;
    position:relative !important;
    z-index:0 !important;
  }

  .site-footer,
  footer{
    position:relative !important;
    z-index:0 !important;
    clear:both !important;
  }
}

@media (min-width: 981px) and (max-height: 720px){
  .filters.catalog-filters,
  aside.filters.catalog-filters{
    top:86px !important;
    max-height:calc(100vh - 96px) !important;
  }

  .cat-tree-parent{
    min-height:38px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
}

/* No visible scrollbars, but keep mouse/touch scrolling working. */
@media (min-width: 981px){
  .filters.catalog-filters,
  aside.filters.catalog-filters,
  .top-child-groups{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .filters.catalog-filters::-webkit-scrollbar,
  aside.filters.catalog-filters::-webkit-scrollbar,
  .top-child-groups::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  .filters.catalog-filters,
  aside.filters.catalog-filters{
    cursor:grab !important;
    user-select:none !important;
  }

  .filters.catalog-filters.dragging-scroll,
  aside.filters.catalog-filters.dragging-scroll,
  .top-child-groups.dragging-scroll{
    cursor:grabbing !important;
  }

  .top-child-groups{
    cursor:grab !important;
    user-select:none !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
}


/* Вернуть кнопки/фильтры в верхнюю панель возле количества товаров, не в левое меню. */
@media (min-width: 981px){
  .filters.catalog-filters .field:has(#sort){
    display:none !important;
  }

  .catalog-top .catalog-top-sort-field{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    order:2 !important;
  }

  .catalog-top .catalog-top-sort-field::before{
    content:'Сортировка' !important;
    font-size:14px !important;
    font-weight:950 !important;
    color:#667085 !important;
    white-space:nowrap !important;
  }

  .catalog-top .catalog-top-sort-field > *:not(select){
    display:none !important;
  }

  .catalog-top .catalog-top-sort-field select{
    width:190px !important;
    height:44px !important;
    border:1px solid #dfe6ef !important;
    border-radius:14px !important;
    background:#fff !important;
    padding:0 14px !important;
    font-size:14px !important;
    font-weight:850 !important;
    color:#111827 !important;
    outline:none !important;
  }

  .catalog-top h1,
  #catalogCount{
    order:1 !important;
  }

  .catalog-top-price{
    order:3 !important;
  }

  .catalog-top #zeroNotice{
    order:4 !important;
  }

  .catalog-top .top-category-bar{
    order:5 !important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .catalog-top .catalog-top-sort-field{
    flex:1 1 240px !important;
  }
  .catalog-top .catalog-top-sort-field select{
    flex:1 1 auto !important;
    width:100% !important;
  }
}

/* Clean crossed elements from desktop catalog: no overlay, only real layout cleanup. */
@media (min-width: 981px){
  /* Remove left panel title "Подгруппы" and search block from sidebar */
  .filters.catalog-filters > h2,
  aside.catalog-filters > h2,
  .filters.catalog-filters .field:has(#search),
  aside.catalog-filters .field:has(#search){
    display:none !important;
  }

  /* Header above parent categories: title on the left, "Все товары" button on the right */
  .category-tree-filter .cat-filter-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:0 0 10px !important;
    margin-bottom:10px !important;
  }
  .category-tree-filter .cat-filter-head b{
    display:block !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    color:#111827 !important;
  }

  /* Remove big product count text in the top panel */
  #catalogCount{
    display:none !important;
  }

  /* Fix duplicated "Сортировка Сортировка": hide native label text, keep one clean label */
  .catalog-top .catalog-top-sort-field{
    font-size:0 !important;
  }
  .catalog-top .catalog-top-sort-field::before{
    content:'Сортировка' !important;
    font-size:14px !important;
    font-weight:950 !important;
    color:#667085 !important;
    white-space:nowrap !important;
  }
  .catalog-top .catalog-top-sort-field select{
    font-size:14px !important;
  }

  /* Keep controls where they were: top panel near count area, not inside left menu */
  .catalog-top{
    align-items:flex-start !important;
  }
  .catalog-top-price,
  .catalog-top #zeroNotice,
  .catalog-top .catalog-top-sort-field{
    order:1 !important;
  }
  .catalog-top .top-category-bar{
    order:2 !important;
    flex:1 1 100% !important;
  }
}