/* wc-archive-pro v1.8 — clean desktop, rock-solid mobile with bottom-sheet filters */

/* Design tokens */
:root{
  --accent:#8A4FE5;
  --accent-2:#6c3cc5;
  --muted:#6b7280;
  --bg:#ffffff;
  --radius:12px;
  --shadow:0 6px 18px rgba(12,18,26,0.08);
  --maxw:1200px;
}

/* Resets */
*{box-sizing:border-box}
.wcap-wrap{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial; color:#111827; }

/* Layout shell */
.wcap-wrap{
  max-width:var(--maxw);
  margin:18px auto;
  padding:0 14px;
}
.wcap-topbar{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.wcap-top-search-wrap{ flex:1; display:flex; gap:8px; }
.wcap-top-search{ flex:1; padding:10px 12px; border:1px solid #e7e9ee; border-radius:10px; min-width:0; }
.wcap-top-search-btn{ padding:10px; border:1px solid #e7e9ee; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.wcap-filter-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#f3f4f6; border:1px solid #e7e9ee; border-radius:999px;
  padding:8px 10px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.wcap-filter-chip-summary{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }

/* Two-column desktop layout */
.wcap-layout{
  display:grid; grid-template-columns: 280px 1fr; gap:24px; align-items:start;
}

/* Sidebar (desktop sticky) */
.wcap-sidebar{
  background:#fff; border:1px solid rgba(0,0,0,0.04); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px;
  position:sticky; top:20px; max-height:calc(100vh - 40px);
  overflow:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.wcap-sidebar::-webkit-scrollbar{ display:none; }
.wcap-sidebar-inner{ display:flex; flex-direction:column; gap:12px; }
.wcap-block-title{ margin:0 0 8px 0; font-size:14px; font-weight:700; }

.wcap-filter-search{ width:100%; padding:8px 10px; border:1px solid #e7e9ee; border-radius:8px; margin-bottom:8px; }
.wcap-list{ list-style:none; margin:0; padding:8px; background:#fbfbfc; border-radius:8px; border:1px solid #f1f2f4; max-height:220px; overflow:auto; -ms-overflow-style:none; scrollbar-width:none; }
.wcap-list::-webkit-scrollbar{ display:none; }
.wcap-list li{ margin:6px 0; font-size:14px; }
.wcap-list label{ display:flex; align-items:center; gap:8px; cursor:pointer; }

.wcap-popular-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.wcap-popular-tag{ background:#f3f4f6; border:none; padding:6px 10px; border-radius:999px; font-size:13px; cursor:pointer; }
.wcap-popular-tag.active{ background:var(--accent); color:#fff; }

.price_slider_amount{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.price_slider_amount .wcap-min,
.price_slider_amount .wcap-max{
  flex:1 1 48%;
  min-width:120px;
  padding:8px 10px; border:1px solid #e7e9ee; border-radius:8px; background:#fff;
}
.price_slider_amount .wcap-price-apply{
  flex:1 1 100%; padding:8px 10px; border:none; border-radius:8px;
  background:linear-gradient(180deg,var(--accent) 0%, var(--accent-2) 100%); color:#fff; font-weight:700; cursor:pointer;
}

.wcap-actions-row{ display:flex; gap:10px; }
.wcap-apply,.wcap-reset{ flex:1; padding:10px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; }
.wcap-apply{ background:linear-gradient(180deg,var(--accent) 0%, var(--accent-2) 100%); color:#fff; }
.wcap-reset{ background:#fff; border:1px solid #e7e9ee; }

/* Main area */
.wcap-main{ display:flex; flex-direction:column; gap:12px; }
.wcap-controls{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.wcap-active-filters{ color:var(--muted); font-size:13px; min-height:18px; }
.wcap-perpage-wrap select{ padding:6px 8px; border:1px solid #e7e9ee; border-radius:8px; }

/* Grid */
.wcap-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Card */
.wcap-card{
  background:#fff; border:1px solid rgba(0,0,0,0.04); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative;
}
.wcap-image{ background:#f6f7f8; }
.wcap-image img{ width:100%; height:auto; display:block; object-fit:cover; }
.wcap-body{ padding:12px 14px 16px; display:flex; flex-direction:column; gap:8px; }
.wcap-title{ margin:0; font-size:15px; font-weight:700; line-height:1.25; }
.wcap-title a{ color:#111827; text-decoration:none; }
.wcap-meta{ display:flex; align-items:center; gap:10px; }
.wcap-price{ color:var(--accent); font-weight:800; }

.wcap-actions{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.wcap-seemore{ padding:8px 12px; background:var(--accent); color:#fff; text-decoration:none; border-radius:8px; font-weight:700; }
.wcap-addcart{ margin-left:auto; width:40px; height:40px; border-radius:50%; background:#111827; color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

/* Badges */
.wcap-badge{ position:absolute; left:12px; top:12px; background:#FF3B30; color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }

/* Load more / states */
.wcap-loadmore-wrap{ text-align:center; margin-top:12px; }
.wcap-loadmore{ padding:10px 18px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
.wcap-no-results{ text-align:center; padding:28px; color:#6b7280; }

.wcap-products.loading{ opacity:.6; position:relative; }
.wcap-products.loading::after{
  content:""; position:absolute; left:50%; top:40%; width:42px; height:42px; margin-left:-21px;
  border-radius:50%; border:4px solid rgba(0,0,0,0.06); border-top-color:var(--accent); animation:wcap-spin .9s linear infinite;
}
@keyframes wcap-spin{ to{ transform:rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 860px){
  .wcap-layout{ grid-template-columns: 1fr; gap:12px; }
  .wcap-topbar{ flex-direction:column; align-items:stretch; gap:8px; }
  .wcap-filter-chip{ align-self:flex-start; }

  /* Sidebar becomes bottom sheet (hidden by default) */
  .wcap-sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    transform: translateY(100%);
    height:85vh; max-height:85vh; border-radius:12px 12px 0 0;
    z-index:1202; padding:14px; overflow:auto;
  }
  .wcap-sidebar.open{ transform: translateY(0); }
  .wcap-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1201; }
  .wcap-overlay.open{ display:block; }

  .wcap-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .wcap-title{ font-size:14px; }
  .wcap-seemore{ padding:8px 10px; }
  .wcap-addcart{ width:38px; height:38px; }
}

/* Extra small phones */
@media (max-width: 420px){
  .wcap-grid{ grid-template-columns: 1fr; }
  .price_slider_amount .wcap-min,
  .price_slider_amount .wcap-max{ min-width:100px; flex:1 1 48%; }
}