/* making the shop page attributes dynamically open and close css + js */

.widget_layered_nav .widget-title {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
  }

  @media (min-width: 992px) {
    .col-lg-3 {
      flex: 0 0 20% !important;
      max-width: 20% !important;
    }
  }

  @media (min-width: 992px) {
    .col-lg-9 {
      flex: 0 0 80% !important;
      max-width: 80% !important;
    }
  }

  .widget_layered_nav .widget-title {
    font-size: 20px !important;
  }

  #text-6 .widget-title,
  #text-7 .widget-title {
    font-size: 20px !important;
    color: #96C18A;
  }

  .woocommerce-widget-layered-nav-list__item.wc-layered-nav-term {
    font-size: 14px !important;
  }

  .row.has-sidebar.layout-reverse .col-lg-3.col-12 {
   width:80% !important;
  }
  
  .widget_layered_nav .widget-title::after {
    content: '▾'; /* down arrow */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  
  .widget_layered_nav.collapsed .widget-title::after {
    transform: translateY(-50%) rotate(-90deg); /* arrow rotates when collapsed */
  }
  
  .widget_layered_nav .woocommerce-widget-layered-nav-list {
    display: block;
    transition: max-height 0.3s ease;
    overflow: hidden;
  }
  
  .widget_layered_nav.collapsed .woocommerce-widget-layered-nav-list {
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* hide filters */

 /* When filters are hidden, hide our detected sidebar
   and let #site-content take the full row width */
.row.has-sidebar.filters-hidden .shop-sidebar-injected {
  display: none !important;
}

.row.has-sidebar.filters-hidden #site-content {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* (Optional) a tiny style for the new toggle button */
.button--filters-toggle {
  display: inline-flex!important;
  align-items: center!important;
  gap: .4rem!important;
  padding: .5rem .8rem!important;
  /* line-height: 1!important; */
  cursor: pointer!important;
}


/* 1) Push everything AFTER the result count to the right */
.shop-actions .woocommerce-result-count {
  margin-right: auto;
}

/* 2) Kill the theme’s auto-push on the form and add a small gap from the button */
.shop-actions .woocommerce-ordering {
  margin-left: 0 !important;         /* remove ML:auto from theme */
  margin-left: .6rem !important;     /* tiny gap next to the button */
}

/* 4) (Optional) add a small gap between items */
.shop-actions { gap: .6rem; }


@media (max-width: 992px) {
  .button--filters-toggle {
    display: none !important;
  }
}

@media (min-width: 992px) {

  	.sidebar-drawer-content > #woocommerce_layered_nav-2,
    .sidebar-drawer-content > #woocommerce_layered_nav-3,
    .sidebar-drawer-content > #woocommerce_layered_nav-8,
    .sidebar-drawer-content > #woocommerce_layered_nav-9,
    .sidebar-drawer-content > #woocommerce_layered_nav-11,
    .sidebar-drawer-content > #woocommerce_layered_nav-12,
    .sidebar-drawer-content > #woocommerce_layered_nav-13,
    .sidebar-drawer-content > #woocommerce_layered_nav-10,
    .sidebar-drawer-content > #woocommerce_layered_nav-14,
    .sidebar-drawer-content > #woocommerce_layered_nav-15,
    .sidebar-drawer-content > #woocommerce_layered_nav-16,
    .sidebar-drawer-content > #woocommerce_layered_nav-17,
    .sidebar-drawer-content > #woocommerce_layered_nav-18,
    .sidebar-drawer-content > #woocommerce_layered_nav-19,
    .sidebar-drawer-content > #woocommerce_layered_nav-20,
    .sidebar-drawer-content > #woocommerce_layered_nav-21,
    .sidebar-drawer-content > #text-6 ,
    .sidebar-drawer-content > #text-7 {
      margin-bottom: 0 !important;
    }
}