/*
 * archive.css — WooCommerce Product Archive Page
 * Layout: sidebar (filter) + product grid, responsive
 * Font: Poppins | Colors: brand tokens from variables.css
 * ─────────────────────────────────────────────────────────────────
 */


/* ── Archive Page Body ───────────────────────────────────────────── */

.woocommerce.post-type-archive-product body,
.post-type-archive-product .site-content {
  background: var(--ls-bg-page);
}


/* ── Archive Top — Breadcrumbs & Title ───────────────────────────── */

.woocommerce-breadcrumb {
  font-family: var(--ls-font) !important;
  font-size: 13px !important;
  color: var(--ls-text-muted) !important;
  margin-bottom: 8px !important;
}

.woocommerce-breadcrumb a {
  color: var(--ls-btn-blue) !important;
  text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--ls-rach-red) !important;
}

.woocommerce-products-header__title,
.elementor-widget-theme-archive-title .elementor-heading-title {
  font-family: var(--ls-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ls-text-body) !important;
  margin: 0 0 16px !important;
}


/* ── Results Count & Sorting Bar ─────────────────────────────────── */

.woocommerce-result-count {
  font-family: var(--ls-font) !important;
  font-size: 13px !important;
  color: var(--ls-text-muted) !important;
  margin: 0 !important;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  font-family: var(--ls-font) !important;
  font-size: 13px !important;
  border: 1px solid var(--ls-border-light) !important;
  border-radius: var(--ls-radius-btn) !important;
  padding: 7px 12px !important;
  background: var(--ls-white) !important;
  color: var(--ls-text-body) !important;
  box-shadow: var(--ls-shadow-panel) !important;
  cursor: pointer !important;
}

.woocommerce-ordering select:focus {
  outline: none !important;
  border-color: var(--ls-btn-blue) !important;
}


/* ── Sidebar — Filter Panel Wrapper ─────────────────────────────── */
/*
 * The Elementor archive template uses a two-column container:
 * left column (.elementor-column or .e-con for the sidebar)
 * right column for the loop grid.
 * Target the sidebar column that holds .bapf_body
 */

/* Sidebar sticky scroll */
.elementor-loop-item ~ .elementor-widget-bapf_sfilter,
.elementor-widget-bapf_sfilter,
.elementor-widget-container > .bapf_sfilter {
  position: sticky;
  top: 100px; /* clears the sticky header */
}

/* Sidebar label above filter */
.bapf_sfilter_title,
.elementor-widget-bapf_sfilter .filter-heading {
  font-family: var(--ls-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ls-text-muted);
  margin-bottom: 8px;
}


/* ── Product Grid ────────────────────────────────────────────────── */

.elementor-loop-container.elementor-grid {
  gap: 20px !important;
}

/* 3 columns on desktop */
@media (min-width: 1025px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 2 columns on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* 2 columns on mobile — 1-col feels empty and hurts conversions */
@media (max-width: 768px) {
  .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}


/* ── No Results Message ──────────────────────────────────────────── */

.woocommerce-no-products-found,
.woocommerce-info {
  font-family: var(--ls-font) !important;
  font-size: 15px !important;
  color: var(--ls-text-muted) !important;
  background: var(--ls-white) !important;
  border: 1px solid var(--ls-border-light) !important;
  border-radius: var(--ls-radius-card) !important;
  padding: 32px 24px !important;
  text-align: center !important;
}


/* ── Pagination ──────────────────────────────────────────────────── */

.woocommerce-pagination,
.e-loop-pagination,
nav.woocommerce-pagination {
  margin-top: 32px !important;
  display: flex !important;
  justify-content: center !important;
}

.woocommerce-pagination ul,
.e-loop-pagination ul {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.e-loop-pagination a,
.e-loop-pagination span {
  font-family: var(--ls-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--ls-radius-btn) !important;
  border: 1px solid var(--ls-border-light) !important;
  background: var(--ls-white) !important;
  color: var(--ls-text-body) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.woocommerce-pagination ul li a:hover,
.e-loop-pagination a:hover {
  background: var(--ls-bg-page) !important;
  border-color: var(--ls-btn-blue) !important;
  color: var(--ls-btn-blue) !important;
}

.woocommerce-pagination ul li span.current,
.e-loop-pagination span.current {
  background: var(--ls-btn-blue) !important;
  border-color: var(--ls-btn-blue) !important;
  color: var(--ls-white) !important;
  font-weight: 700 !important;
}


/* ── Sidebar "Library Card" Promo Block ─────────────────────────── */
/*
 * The archive template has a Library Card promo in the sidebar above the filter.
 * Targets the heading + image + button block in that column.
 */

.elementor-widget-heading[data-widget_type="heading.default"] .elementor-heading-title {
  font-family: var(--ls-font);
}

/* Archive description / category intro text */
.woocommerce-archive-description p,
.woocommerce-archive-description {
  font-family: var(--ls-font) !important;
  font-size: 14px !important;
  color: var(--ls-text-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}


/* ── Loading Overlay on AJAX Filter ─────────────────────────────── */

.elementor-loop-container.berocket_loading,
.elementor-loop-container.bapf_loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}


/* ── Responsive — Stack sidebar above grid on mobile ────────────── */

@media (max-width: 768px) {

  /* Elementor should handle column stacking, but reinforce here */
  .elementor-widget-bapf_sfilter {
    position: static !important;
    margin-bottom: 20px;
  }

  .woocommerce-ordering,
  .woocommerce-result-count {
    display: block !important;
    text-align: center !important;
    margin: 4px auto !important;
  }
}