/*
 * PunjabiLibas — Shop Page Sidebar Filters + Load More (v2 rebuild)
 * Applies to: shop, category, tag archive pages (.pl-shop-page body class)
 */

:root {
  --plm-deep:       #1C0A00;
  --plm-maroon:     #6B1E1E;
  --plm-gold:       #C49A3C;
  --plm-cream:      #FAF6F0;
  --plm-warm-white: #FFFDF9;
  --plm-text-muted: #6B5E55;
  --plm-border:     rgba(196,154,60,0.2);
  --plm-r:          6px;
  --plm-r-lg:       12px;
}

/* ── Widen the shop container (Astra default is 1320px) ─────── */
body.pl-shop-page .ast-container {
  max-width: 1600px !important;
}

/* New Arrivals is a bare custom page template with NO #primary/
   #secondary wrapper (unlike the real shop archive, where #primary
   already has its own Astra "fill the row" rule) — .ast-container
   is display:flex on desktop, and with only one flex child
   (.pl-shop-layout) and no flex-grow, that child shrinks to its
   content width instead of filling the row, squeezing the whole
   sidebar+grid into a narrow column. Forcing plain block layout here
   (only on this page's own body/template class, real archives
   untouched) lets .pl-shop-layout take its natural 100% block width. */
body.page-template-template-new-arrivals .ast-container {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Small breathing room above the grid (no title/breadcrumb, but
   not flush against the header either) ───────────────────────── */
body.pl-shop-page .ast-separate-container .ast-woocommerce-container {
  padding-top: 18px !important;
}
body.pl-shop-page #primary,
body.pl-shop-page .ast-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.pl-shop-page .woocommerce-notices-wrapper:empty {
  display: none;
  margin: 0;
}

/* ── Two-column layout: sidebar + main ───────────────────────── */
.pl-shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.pl-shop-main {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────  */
.pl-shop-sidebar {
  flex: 0 0 260px;
  width: 260px;
  position: sticky;
  /* The header (#masthead) is sticky at top:0 too now (~80px tall on
     desktop) — top:24px used to put the sidebar's top edge right
     under it and get covered as soon as the page scrolled. Cleared
     the header's height plus a visible margin below it. max-height
     adjusted to match, so the sidebar's own bottom stays the same
     24px clear of the viewport bottom as before. */
  top: 100px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  padding-right: 4px;
  /* Scroll still works, the scrollbar itself is just hidden. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}
.pl-shop-sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (Chromium) */
}
.pl-shop-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pl-shop-sidebar-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--plm-deep);
  margin: 0;
}
.pl-shop-clear-filters {
  font-size: 12px;
  color: var(--plm-maroon);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.pl-filter-widget {
  margin-bottom: 4px;
  padding: 4px 2px;
  background: transparent;
  border: none;
}
/* .pl-filter-widget is now a <details> element — .pl-filter-title is
   its <summary>, closed by default so the user opens each group
   themselves (no [open] attribute in the markup). */
.pl-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--plm-deep);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 2px 4px 14px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--plm-border);
  cursor: pointer;
  list-style: none;
}
.pl-filter-title::-webkit-details-marker {
  display: none;
}
.pl-filter-title::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--plm-maroon);
  border-bottom: 2px solid var(--plm-maroon);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details[open] > .pl-filter-title {
  border-bottom-color: var(--plm-border);
  margin-bottom: 12px;
}
details[open] > .pl-filter-title::after {
  transform: rotate(-135deg);
}
.pl-filter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pl-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--plm-text-muted);
  cursor: pointer;
}
.pl-filter-option input[type="checkbox"],
.pl-filter-option input[type="radio"] {
  accent-color: var(--plm-maroon);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.pl-filter-option .pl-filter-label-text {
  flex: 1;
  min-width: 0;
}
.pl-filter-option .pl-filter-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  font-size: 11px;
  color: var(--plm-gold);
  text-align: right;
}
.pl-filter-option.pl-filter-empty {
  opacity: 0.55;
}
.pl-filter-option.pl-filter-empty .pl-filter-count {
  color: var(--plm-text-muted);
}

/* ── Mobile filter toggle + drawer ────────────────────────────── */
/* On desktop this wrapper doesn't participate in layout at all —
   the Filters button (display:none there) and the real WooCommerce
   sort form behave exactly as if it weren't there. On mobile it
   becomes the shared row for both controls (see media query below). */
.pl-shop-toolbar-mobile {
  display: contents;
}
.pl-shop-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--plm-warm-white);
  border: 1px solid var(--plm-border);
  border-radius: var(--plm-r);
  color: var(--plm-deep);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.pl-shop-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28,10,0,0.55);
  z-index: 9990;
}

@media (max-width: 921px) {
  .pl-shop-layout {
    gap: 0;
  }
  /* Filters toggle + Sort dropdown share one row; the "Showing X of
     Y results" text is hidden entirely on mobile per user request. */
  .woocommerce-result-count {
    display: none;
  }
  .pl-shop-toolbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 18px;
  }
  .pl-shop-filter-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
  }
  .pl-shop-toolbar-mobile .woocommerce-ordering {
    float: none;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
  }
  .pl-shop-toolbar-mobile .woocommerce-ordering select {
    max-width: 100%;
  }
  .pl-shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    max-height: none;
    background: var(--plm-cream);
    z-index: 9991;
    padding: 20px;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 30px rgba(28,10,0,0.25);
  }
  .pl-shop-sidebar.is-open {
    transform: translateX(0);
  }
  body.pl-shop-filters-open .pl-shop-filter-backdrop {
    display: block;
  }
  body.pl-shop-filters-open {
    overflow: hidden;
  }
}

/* ── Active filter chips (top of the product list column) ────── */
.pl-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.pl-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: var(--plm-warm-white);
  border: 1px solid var(--plm-border);
  border-radius: 20px;
  font-size: 12.5px;
  color: var(--plm-deep);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pl-active-filter-chip:hover {
  background: var(--plm-maroon);
  color: #fff;
  border-color: var(--plm-maroon);
}
.pl-chip-x {
  font-size: 15px;
  line-height: 1;
}
.pl-active-filters-clear {
  font-size: 12px;
  color: var(--plm-maroon);
  text-decoration: underline;
}

/* ── Coming soon (empty category, e.g. Phulkari / Pranda) ────── */
.pl-coming-soon {
  text-align: center;
  padding: 60px 20px;
  background: var(--plm-warm-white);
  border: 1px dashed var(--plm-border);
  border-radius: var(--plm-r-lg);
}
.pl-coming-soon h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--plm-deep);
  margin: 0 0 8px;
}
.pl-coming-soon p {
  font-size: 14px;
  color: var(--plm-text-muted);
  margin: 0;
}

/* ── Load More ────────────────────────────────────────────────── */
.pl-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.pl-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 36px;
  background: var(--plm-maroon) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--plm-r-lg);
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s;
}
/* Explicit dark shade + !important so this can never resolve to a
   pale/washed-out hover state regardless of what else on the page
   might otherwise win the cascade — was previously too close to the
   base maroon to read as a real hover change. */
.pl-load-more-btn:hover {
  background: #3D0F0F !important;
  color: #fff !important;
}
.pl-load-more-btn:disabled {
  background: var(--plm-maroon) !important;
  color: #fff !important;
  opacity: 0.85;
  cursor: default;
}
.pl-load-more-btn:disabled:hover {
  background: var(--plm-maroon) !important;
}
.pl-load-more-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: pl-spin 0.7s linear infinite;
}
.pl-load-more-btn.is-loading .pl-load-more-spinner {
  display: inline-block;
}
.pl-load-more-btn.is-loading .pl-load-more-label {
  display: none;
}
@keyframes pl-spin {
  to { transform: rotate(360deg); }
}

/* ── "Shop All Products" CTA (New Arrivals page only) ─────────── */
.pl-shop-all-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--plm-border);
}
.pl-shop-all-cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 40px;
  background: transparent;
  color: var(--plm-maroon);
  border: 2px solid var(--plm-maroon);
  border-radius: var(--plm-r-lg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.pl-shop-all-cta:hover {
  background: var(--plm-maroon);
  color: #fff;
}