/* ============================================
   SHOP PAGE CSS (LIGHT)
   ============================================ */

.shop-header { padding: 8rem 0 3rem; border-bottom: 1px solid var(--color-border); }
.shop-header__count { margin-top: 0.5rem; }

.filter-bar {
  position: sticky; top: 72px; z-index: 100;
  background: rgba(250,250,248,0.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  box-shadow: 0 2px 12px rgba(20,18,14,0.04);
}
.filter-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.filter-chips { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; flex: 1; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }

.tag--active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tag--active:hover { background: #2d2a25; color: var(--color-bg); border-color: #2d2a25; }

.shop-layout__inner { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }

.shop-sidebar {
  position: sticky; top: calc(72px + 57px + 1rem);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 4px rgba(20,18,14,0.05);
}

.sidebar-block { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-block__title { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; }

.price-range__values { display: flex; justify-content: space-between; margin-bottom: 0.75rem; }
.range-input {
  width: 100%; appearance: none; height: 2px;
  background: var(--color-border); border-radius: 2px; outline: none; cursor: pointer;
}
.range-input::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-text); cursor: pointer;
  box-shadow: 0 1px 6px rgba(20,18,14,0.2);
  transition: transform var(--dur-fast);
}
.range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }

.checkbox-list { display: flex; flex-direction: column; gap: 0.6rem; }
.checkbox-item { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.checkbox-item input[type="checkbox"] {
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px; appearance: none; cursor: pointer;
  background: transparent; flex-shrink: 0;
  transition: all var(--dur-fast); position: relative;
}
.checkbox-item input[type="checkbox"]:checked { background: var(--color-text); border-color: var(--color-text); }
.checkbox-item input[type="checkbox"]:checked::after {
  content: '✓'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); font-size: 10px; color: var(--color-bg); font-weight: 700;
}
.checkbox-item__label { font-size: 0.85rem; color: var(--color-text-muted); transition: color var(--dur-fast); }
.checkbox-item:hover .checkbox-item__label { color: var(--color-text); }

.shop-products .products-grid { gap: 2rem 1.5rem; }
.shop-empty { text-align: center; padding: 5rem 2rem; color: var(--color-text-muted); }

.scroll-row { cursor: grab; }
.scroll-row.is-dragging { cursor: grabbing; user-select: none; }

@media (max-width: 900px) {
  .shop-layout__inner { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .sidebar-block { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .shop-sidebar form > .btn { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .shop-sidebar { grid-template-columns: 1fr; }
  .shop-products .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
}