/* ==========================================================================
   Product archive bundle — category, tag and search results
   ========================================================================== */

.pc-cats-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--pc-yellow-soft); border-radius: 14px; padding: 14px 18px; margin-bottom: 20px;
  font-size: 14px; font-weight: 700; color: #6B5A1F;
}
.pc-cats-notice a { font-weight: 800; color: var(--pc-teal); }

.pc-archive-head { margin-bottom: 24px; }
.pc-archive-head .pc-h1 { font-size: 40px; margin-bottom: 6px; }
.pc-archive-blurb { color: var(--pc-muted); font-size: 16px; margin: 0; max-width: 560px; }

.pc-archive-layout { display: grid; grid-template-columns: 290px 1fr; gap: 32px; align-items: start; }

/* ---------- Filters ---------- */
.pc-filter-toggle {
  display: none; width: 100%; background: var(--pc-surface); border: 1px solid var(--pc-border2);
  border-radius: var(--pc-radius-sm); padding: 13px 18px; font-weight: 800; font-size: 15px;
  color: var(--pc-ink); cursor: pointer; margin-bottom: 14px;
  align-items: center; justify-content: center; gap: 9px;
}
.pc-filters {
  border: 1px solid var(--pc-border); border-radius: 18px; padding: 24px;
  background: var(--pc-surface); position: sticky; top: 96px;
}
.pc-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pc-filters-title { font-weight: 800; font-size: 15px; }
.pc-filters-close, .pc-filters-apply, .pc-filters-overlay { display: none; }
.pc-filter-group { margin-bottom: 18px; }
.pc-filter-name {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pc-muted2); margin-bottom: 8px;
}
.pc-filter-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #4C463A; padding: 5px 0; }
.pc-filter-opt:hover { color: var(--pc-teal); }
.pc-filter-box {
  width: 16px; height: 16px; border: 1.5px solid #D8CDB5; border-radius: 5px;
  display: inline-block; flex-shrink: 0;
}
.pc-filter-opt.active { font-weight: 800; color: var(--pc-ink); }
.pc-filter-opt.active .pc-filter-box { background: var(--pc-yellow); border-color: var(--pc-yellow); }
/* ---------- Collapsible categories ----------
   Parents always listed; their children expand on the chevron, and the
   branch you're already browsing starts open.
   ------------------------------------------------------------------------ */
.pc-filter-cat + .pc-filter-cat { margin-top: 2px; }
.pc-filter-row { display: flex; align-items: center; gap: 6px; }
.pc-filter-row .pc-filter-opt { flex: 1; min-width: 0; }

.pc-sub-toggle {
  flex: none; width: 28px; height: 28px; padding: 0; cursor: pointer;
  background: var(--pc-surface2); border: 1px solid var(--pc-border); border-radius: 8px;
  color: var(--pc-ink); display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.pc-sub-toggle:hover { background: var(--pc-yellow-soft); border-color: var(--pc-border2); }
.pc-sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  background: var(--pc-teal); border-color: var(--pc-teal); color: #fff;
}

.pc-filter-subs {
  margin: 2px 0 8px 9px; padding-left: 13px;
  border-left: 2px solid var(--pc-border);
}
.pc-filter-subs[hidden] { display: none; }
.pc-filter-cat.is-open > .pc-filter-row > .pc-filter-opt { font-weight: 800; }
.pc-filter-sub { font-size: 13px; color: var(--pc-muted); }
.pc-filter-sub .pc-filter-box { width: 14px; height: 14px; }
.pc-filter-sub.active { color: var(--pc-ink); font-weight: 800; }

.pc-filter-clear { font-size: 13px; font-weight: 800; color: var(--pc-teal); }

/* ---------- Toolbar ---------- */
.pc-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.pc-result-count { font-size: 14px; color: var(--pc-muted2); font-weight: 700; }
.pc-sort {
  border: 1px solid var(--pc-border); border-radius: 10px; padding: 9px 14px; font-size: 14px;
  font-weight: 700; background: var(--pc-surface); font-family: var(--pc-sans); color: var(--pc-ink); cursor: pointer;
}

/* ---------- Empty state ---------- */
.pc-archive-empty {
  text-align: center; padding: 60px 20px; border: 2px dashed var(--pc-border2);
  border-radius: var(--pc-radius); background: var(--pc-surface2);
}
.pc-archive-empty .pc-emoji { font-size: 38px; }
.pc-archive-empty h2 { font-size: 26px; margin: 10px 0 6px; }
.pc-archive-empty p { color: var(--pc-muted); margin: 0; }

/* ---------- Responsive ---------- */
/* ---------- Mobile: filters slide over the page ----------
   The panel is fixed, so opening it never reflows the product grid.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pc-archive-layout { grid-template-columns: 1fr; }
  .pc-filter-toggle { display: flex; }

  .pc-filters {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 320px; max-width: 86vw; height: 100%; margin: 0;
    border: none; border-radius: 0; padding: 20px 22px 22px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .18); visibility: hidden;
  }
  .pc-filters.open { transform: translateX(0); visibility: visible; }

  .pc-filters-overlay {
    display: block; position: fixed; inset: 0; z-index: 69;
    background: rgba(46, 42, 34, .45); opacity: 0; transition: opacity .28s ease;
  }
  .pc-filters-overlay.open { opacity: 1; }
  .pc-filters-overlay[hidden] { display: none; }

  .pc-filters-head {
    position: sticky; top: -20px; z-index: 1; background: var(--pc-surface);
    margin: -20px -22px 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--pc-border);
  }
  .pc-filters-title { font-size: 18px; font-family: var(--pc-serif); font-weight: 400; }
  .pc-filters-close {
    display: block; background: none; border: none; font-size: 28px; line-height: 1;
    color: var(--pc-muted2); cursor: pointer; padding: 0 4px;
  }

  /* Sticky, not absolute — an absolute button inside a scrolling panel would
     sit at the bottom of the content rather than the bottom of the screen. */
  .pc-filters-apply {
    display: block; position: sticky; bottom: 0; width: 100%;
    margin-top: 22px; padding: 15px; border-radius: 13px;
  }
  .pc-filter-opt { padding: 9px 0; font-size: 15px; }

  /* Stop the page scrolling behind the open panel. */
  body.pc-filters-open { overflow: hidden; }
}
@media (max-width: 620px) {
  .pc-archive-head .pc-h1 { font-size: 30px; }
  .pc-toolbar { flex-direction: column; align-items: stretch; }
  .pc-sort { width: 100%; }
}