/* ═══ shop.css — جداشده از main.css (خطوط 583-945 نسخهٔ v1.1.267) بدون هیچ تغییری در محتوا/ترتیب.
   فروشگاه/آرشیو دسته نسل اول
   ترتیب لود (زنجیرهٔ dependency در functions.php) = ترتیب قبلی داخل main.css. ═══ */
/* ═══════════════════════════════════════
   SHOP PAGE
═══════════════════════════════════════ */

/* breadcrumb */
.breadcrumb-wrap { max-width: 1280px; margin: 0 auto; padding: 14px clamp(1rem,4vw,2rem) 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-400); list-style: none; }
.breadcrumb a { color: var(--gray-400); transition: color .15s; }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb svg { width: 10px; height: 10px; flex-shrink: 0; }
.breadcrumb li:last-child { color: var(--black); font-weight: 500; }

/* mobile filter bar */
.mobile-filter-bar {
  display: none; gap: 8px;
  padding: 12px clamp(1rem,4vw,1.2rem);
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-filter-bar::-webkit-scrollbar { display: none; }
.mf-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px;
  border: 0.5px solid var(--gray-200); border-radius: 20px;
  font-size: 12px; color: var(--gray-600); background: var(--white);
  white-space: nowrap; flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
}
.mf-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.mf-btn:hover { background: var(--gray-50); color: var(--black); }
.mf-btn.active { background: var(--black); border-color: var(--black); color: white; }
.mf-sort-btn { border-style: dashed; }

/* shop layout */
.shop-container {
  max-width: 1280px; margin: 0 auto;
  padding: 20px clamp(1rem,4vw,2rem) 60px;
  display: flex; gap: 24px; align-items: flex-start;
}

/* ── SIDEBAR ── */
.sidebar { width: 220px; flex-shrink: 0; position: sticky; top: calc(var(--header-h) + 16px); }
.sidebar-card { background: var(--white); border: 0.5px solid var(--gray-100); border-radius: var(--radius-xl); }
.sidebar-section {
  padding: 14px 14px 12px;
  border-bottom: 0.5px solid var(--gray-100);
}
.sidebar-section:last-child { border-bottom: none; }
.sidebar-title { font-size: 11px; font-weight: 600; color: var(--gray-600); letter-spacing: 0.4px; margin-bottom: 10px; }

/* category search */
.cat-search-wrap { position: relative; margin-bottom: 8px; }
.cat-search {
  width: 100%; height: 30px;
  border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 0 30px 0 8px; font-size: 12px; color: var(--black);
  background: var(--off); outline: none; direction: rtl; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.cat-search:focus { border-color: var(--gray-400); background: var(--white); }
.cat-search::placeholder { color: var(--gray-400); }
.cat-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.cat-search-ico { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; display: flex; }
.cat-search-ico svg { width: 13px; height: 13px; }

/* category list */
.cat-list-wrap { max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; }
.cat-list-wrap::-webkit-scrollbar { width: 3px; }
.cat-list-wrap::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 10px; border: none; background: none;
  border-radius: var(--radius-sm); font-size: 12px; color: var(--gray-600);
  text-align: right; transition: background .12s, color .12s; font-family: inherit;
}
.cat-btn:hover { background: var(--gray-50); color: var(--black); }
.cat-btn.active { background: var(--black); color: white; font-weight: 600; }
.cat-btn[data-hidden="true"] { display: none; }
.cat-count { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,0.06); flex-shrink: 0; }
.cat-btn.active .cat-count { background: rgba(255,255,255,0.2); }

/* ── PRICE RANGE ── */
.price-range-wrap { display: flex; flex-direction: column; gap: 10px; }
.price-inputs-row { display: flex; align-items: center; gap: 8px; }
.price-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.price-label { font-size: 10px; color: var(--gray-400); font-weight: 500; }
.price-input {
  width: 100%; height: 34px;
  border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 0 8px; font-size: 12px; color: var(--black);
  background: var(--off); outline: none; font-family: inherit;
  direction: ltr; text-align: left;
  transition: border-color .15s, background .15s;
  -moz-appearance: textfield;
}
.price-input::-webkit-inner-spin-button,
.price-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.price-input:focus { border-color: var(--gray-400); background: var(--white); }
.price-input::placeholder { color: var(--gray-400); }
.price-sep-line { width: 20px; height: 1px; background: var(--gray-200); flex-shrink: 0; margin-top: 18px; }
.btn-price-apply {
  width: 100%; height: 32px;
  background: var(--black); color: white;
  border: none; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background .15s;
}
.btn-price-apply:hover { background: var(--gray-800); }

/* sort select */
.sort-select {
  width: 100%; height: 34px;
  border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--black); background: var(--off);
  padding: 0 10px; outline: none; cursor: pointer; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center;
}
.sort-select:focus { border-color: var(--gray-400); }

/* ── SHOP MAIN ── */
.shop-main { flex: 1; min-width: 0; }
.shop-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.result-count { font-size: 13px; color: var(--gray-600); }
.result-count strong { color: var(--black); font-weight: 700; }
.view-toggle { display: flex; gap: 4px; }
.vbtn {
  width: 32px; height: 32px;
  border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s; cursor: pointer;
}
.vbtn svg { width: 14px; height: 14px; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke: var(--gray-600); }
.vbtn.active { background: var(--black); border-color: var(--black); }
.vbtn.active svg { stroke: white; }
.vbtn:not(.active):hover { background: var(--gray-50); }

/* ── PRODUCT GRID ── */
/* ── PAGINATION ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 28px; }
.pagination .page-numbers {
  min-width: 34px; height: 34px; padding: 0 6px;
  border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); font-size: 13px; color: var(--gray-600);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .12s, color .12s;
}
.pagination .page-numbers:hover { background: var(--gray-50); color: var(--black); }
.pagination .page-numbers.current { background: var(--black); border-color: var(--black); color: white; font-weight: 600; }
.pagination .page-numbers.dots { border: none; background: none; color: var(--gray-400); }

/* ── RESPONSIVE SHOP ── */
@media (max-width: 1024px) {
  .sidebar { width: 200px; }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-filter-bar { display: flex; }
  .shop-container { padding-top: 12px; gap: 0; }
}

/* ═══════════════════════════════════════
   CATEGORY PAGE HERO
═══════════════════════════════════════ */
.cat-hero {
  border-bottom: 0.5px solid var(--border);
  background: var(--white);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem);
}
.cat-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cat-hero-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--gray-50);
  border: 0.5px solid var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-hero-icon svg { width: 26px; height: 26px; stroke: var(--black); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.cat-hero-text { flex: 1; min-width: 0; }
.cat-hero-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.cat-hero-desc {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 4px;
  line-height: 1.5;
}
.cat-hero-meta { flex-shrink: 0; }
.cat-hero-count {
  display: inline-block;
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 0.5px solid var(--gray-100);
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 500;
}

/* موبایل: sort button در صفحه دسته‌بندی */
.cat-sort-bar {
  display: none;
  padding: 10px clamp(1rem,4vw,1.2rem);
  border-bottom: 0.5px solid var(--border);
  gap: 8px;
}
@media (max-width: 768px) {
  .cat-sort-bar { display: flex; align-items: center; justify-content: space-between; }
  .cat-sort-label { font-size: 12px; color: var(--gray-600); }
  .cat-sort-select {
    height: 30px; border: 0.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: 12px; color: var(--black); background: var(--off);
    padding: 0 10px; outline: none; font-family: inherit;
    -webkit-appearance: none; appearance: none; cursor: pointer;
  }
}