/*
Theme Name: Hello Elementor Child
Theme URI: http://example.com/
Description: Child Theme for Hello Elementor
Author: Your Name
Author URI: http://example.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Spinner centered in products area */
#products-area.loading,  #auto-products-area.loading{
  position: relative;
  min-height: 200px; /* ensures spinner is visible */
}

#products-area.loading::after , #auto-products-area.loading::after  {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fade-in products */
.products-grid {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.products-grid.loaded {
  opacity: 1;
}
#clear-all-filters {
  display: none;
}

#active-filters .filter-pill {
  display: inline-block;
  background: #f5cfe3;
  color: #000;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin: 0 5px 5px 0;
  cursor: pointer;
}

#active-filters .filter-pill span {
  margin-left: 6px;
  font-weight: bold;
  cursor: pointer;
}
#clear-all-filters {
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

#active-filters {
  margin: 10px 0;
}

#active-filters .filter-pill {
  display: inline-block;
  background: #f5cfe3;
  color: #000;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin: 0 5px 5px 0;
}
.ajax-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.ajax-pagination button {
  padding: 8px 16px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.ajax-pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.category-tabs-wrapper {
  display: flex;
  align-items: center;
}

.category-tabs {
  display: flex;
  overflow: hidden;
  flex: 1;
}

.cat-tab {
  flex: 0 0 auto;
  padding: 10px 15px;
  margin: 0 5px;
  white-space: nowrap;
}

.tab-arrow {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: none; /* hidden by default */
}

@media (max-width: 768px) {
  .tab-arrow {
    display: block;
  }

  .category-tabs {
    width: 100%;
  }

  .cat-tab {
    min-width: 100%; /* show only one tab at a time */
    text-align: center;
  }
}

/* Hide original filters and show toggle button on mobile */