/* =============================================
   AGWraps — archive.css
   Shop page + all product category/tag pages.
   Enqueued via functions-archive-snippet.php
   on is_shop() || is_product_category() || is_product_tag()
============================================= */
/* ═══════════════════════════════════════════
   SHOP / CATEGORY ARCHIVE
═══════════════════════════════════════════ */

/* ── Header additions: subtitle, count, pills ── */
.cart-page-sub {
  font-size:15px; color:rgba(255,255,255,0.5);
  max-width:640px; margin-top:10px; line-height:1.6;
}
.cart-page-meta { margin-top:14px; }
.cart-page-count {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--yellow); font-weight:700;
}

.cat-pills {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:24px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.cat-pill {
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.6); text-decoration:none;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  transition:all 0.2s;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.cat-pill:hover { border-color:var(--yellow); color:var(--white); }
.cat-pill--active {
  background:var(--yellow); color:var(--black);
  border-color:var(--yellow-border);
}
.cat-pill--active:hover { color:var(--black); }

/* ── Layout ── */
.shop-body { background:var(--off-white); min-height:60vh; }
.shop-inner { max-width:1380px; margin:0 auto; padding:0 40px 80px; }
.shop-layout {
  display:grid; grid-template-columns:260px 1fr;
  gap:24px; align-items:start;
}

/* ── Sidebar ── */
.shop-sidebar { min-width:0; width:100%; display:flex; flex-direction:column; gap:3px; }
.shop-filter-block { background:var(--white); border:1px solid var(--gray-200); }
.shop-filter-header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; color:var(--black);
  text-align:left;
}
.shop-filter-chevron { width:16px; height:16px; fill:var(--gray-400); transition:transform 0.2s; flex-shrink:0; }
.shop-filter-header[aria-expanded="false"] + .shop-filter-body { display:none; }
.shop-filter-header[aria-expanded="false"] .shop-filter-chevron { transform:rotate(-90deg); }
.shop-filter-body { padding:0 18px 16px; }

/* Category list */
.shop-cat-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.shop-cat-list a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 0; font-size:14px; color:var(--gray-600);
  text-decoration:none; transition:color 0.15s;
}
.shop-cat-list a:hover { color:var(--black); }
.shop-cat-list a.shop-cat-active {
  color:var(--yellow-border); font-weight:700;
}
.shop-cat-count { font-family:var(--font-mono); font-size:10px; color:var(--gray-400); flex-shrink:0; }
.shop-cat-sublist {
  list-style:none; display:flex; flex-direction:column; gap:2px;
  margin:2px 0 6px 16px;
  border-left:1px solid var(--gray-200); padding-left:12px;
}
.shop-cat-sublist a { font-size:13px; padding:6px 0; }

/* Attribute filters */
.shop-attr-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.shop-attr-link {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; text-decoration:none;
  font-size:14px; color:var(--gray-600);
  transition:color 0.15s;
}
.shop-attr-link:hover { color:var(--black); }
.shop-attr-check {
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--black);
  transition:all 0.15s;
}
.shop-attr-link--active .shop-attr-check {
  background:var(--yellow); border-color:var(--yellow-border);
}
.shop-attr-link--active { color:var(--black); font-weight:600; }
.shop-attr-swatch {
  width:16px; height:16px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--gray-200);
}
.shop-attr-name { flex:1; }
.shop-attr-count { font-family:var(--font-mono); font-size:10px; color:var(--gray-400); flex-shrink:0; }

.shop-clear-filters {
  display:block; text-align:center;
  padding:12px 18px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--black); text-decoration:none;
  background:var(--white); border:1px solid var(--gray-200);
  transition:all 0.2s;
}
.shop-clear-filters:hover { border-color:#c0392b; color:#c0392b; }

/* ── Main / Toolbar ── */
.shop-main { min-width:0; width:100%; }
.shop-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.shop-result-count {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-400);
}
.shop-ordering select,
.woocommerce-ordering select {
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:10px 36px 10px 16px;
  border:1px solid var(--gray-200); background:var(--white) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23999"%3E%3Cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/%3E%3C/svg%3E') no-repeat right 12px center;
  background-size:14px;
  color:var(--black); cursor:pointer;
  appearance:none; -webkit-appearance:none; border-radius:0;
}

/* ── Empty state ── */
.shop-empty {
  text-align:center; padding:64px 20px;
  background:var(--white); border:1px solid var(--gray-200);
}
.shop-empty svg { width:48px; height:48px; fill:var(--gray-200); margin-bottom:16px; }
.shop-empty h2 {
  font-family:var(--font-display); font-size:22px; font-weight:900;
  text-transform:uppercase; letter-spacing:1px; color:var(--black); margin-bottom:8px;
}
.shop-empty p { font-size:14px; color:var(--gray-600); }
.shop-empty a { color:var(--yellow-border); font-weight:700; text-decoration:underline; }

/* ── Pagination (shared with search) ── */
.shop-main nav.pagination,
.shop-main nav.woocommerce-pagination {
  margin-top:40px;
}
.shop-main nav.pagination ul,
.shop-main nav.woocommerce-pagination ul {
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  list-style:none;
}
.shop-main nav.pagination .page-numbers,
.shop-main nav.woocommerce-pagination .page-numbers {
  display:flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px;
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:1px; text-decoration:none;
  border:1px solid var(--gray-200); color:var(--black);
  background:var(--white); transition:all 0.15s;
}
.shop-main .page-numbers:hover { border-color:var(--yellow-border); }
.shop-main .page-numbers.current { background:var(--black); color:var(--yellow); border-color:var(--black); }

/* ── Responsive ── */
@media(max-width:1100px) {
  .shop-layout  { grid-template-columns:1fr; }
  .shop-sidebar { order:-1; }
  .shop-main    { order:1; }
}
@media(max-width:768px) {
  .shop-inner { padding:0 16px 60px; }
  .cat-pills  { gap:6px; }
  .cat-pill   { font-size:12px; padding:8px 14px; }
  .shop-layout{ gap:16px; }
}