/* ==========================================================================
   DRIVMAN — Shop page styles
   ========================================================================== */

/* (Page header & breadcrumb styles moved to style.css so every page can use
   them without needing to load shop.css) */

/* ---------- Shop layout ---------- */
.dm-shop-layout { display: flex; gap: var(--dm-space-4); align-items: flex-start; }
.dm-shop-sidebar {
  width: 280px; flex-shrink: 0;
  position: sticky; top: calc(var(--dm-navbar-height) + 16px);
}
.dm-shop-main { flex: 1; min-width: 0; }

@media (max-width: 991px) {
  .dm-shop-sidebar {
    position: fixed; top: 0; left: -100%; width: min(86vw, 360px); height: 100%;
    z-index: 1200; background: var(--dm-black-soft); overflow-y: auto;
    padding: var(--dm-space-3); transition: left var(--dm-speed-base) var(--dm-ease);
    border-right: 1px solid var(--dm-border);
  }
  .dm-shop-sidebar.is-open { left: 0; }
}

/* ---------- Filter groups ---------- */
.dm-filter-group { border-bottom: 1px solid var(--dm-border); padding: var(--dm-space-3) 0; }
.dm-filter-group:first-child { padding-top: 0; }
.dm-filter-group__head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.dm-filter-group__head h4 { font-size: var(--dm-fs-sm); font-weight: 600; color: var(--dm-text-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.dm-filter-group__head i { color: var(--dm-text-muted); transition: transform var(--dm-speed-fast) var(--dm-ease); font-size: 12px; }
.dm-filter-group.is-collapsed .dm-filter-group__head i { transform: rotate(-90deg); }
.dm-filter-group__body { margin-top: var(--dm-space-2); display: flex; flex-direction: column; gap: 10px; }
.dm-filter-group.is-collapsed .dm-filter-group__body { display: none; }

.dm-check {
  display: flex; align-items: center; gap: 10px; font-size: var(--dm-fs-sm); color: var(--dm-text-secondary);
  cursor: pointer;
}
.dm-check input { accent-color: var(--dm-red); width: 16px; height: 16px; }
.dm-check .count { margin-left: auto; color: var(--dm-text-muted); font-size: var(--dm-fs-xs); }
.dm-check:hover { color: var(--dm-text-primary); }

.dm-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dm-border-strong);
  cursor: pointer; transition: border-color var(--dm-speed-fast) var(--dm-ease), transform var(--dm-speed-fast) var(--dm-ease);
}
.dm-swatch.is-active { border-color: var(--dm-red-bright); transform: scale(1.12); }

.dm-price-range { display: flex; align-items: center; gap: 10px; }
.dm-price-range input[type="number"] {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--dm-border-strong);
  color: var(--dm-text-primary); border-radius: var(--dm-radius-sm); padding: 8px 10px; font-size: var(--dm-fs-sm);
}
.dm-price-range input[type="range"] { width: 100%; accent-color: var(--dm-red); }

.dm-clear-filters { font-size: var(--dm-fs-xs); color: var(--dm-red-bright); text-decoration: underline; cursor: pointer; }

/* ---------- Toolbar ---------- */
.dm-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--dm-space-2);
  margin-bottom: var(--dm-space-3);
  padding-bottom: var(--dm-space-2);
  border-bottom: 1px solid var(--dm-border);
}
.dm-shop-toolbar__count { color: var(--dm-text-muted); font-size: var(--dm-fs-sm); }
.dm-shop-toolbar__right { display: flex; align-items: center; gap: 12px; }
.dm-mobile-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dm-border-strong); color: var(--dm-text-primary);
  padding: 10px 16px; border-radius: var(--dm-radius-sm); font-size: var(--dm-fs-sm);
}
@media (min-width: 992px) { .dm-mobile-filter-btn { display: none; } }

.dm-sort-select {
  background: rgba(255,255,255,0.04); border: 1px solid var(--dm-border-strong); color: var(--dm-text-primary);
  padding: 10px 14px; border-radius: var(--dm-radius-sm); font-size: var(--dm-fs-sm);
}
.dm-view-toggle { display: flex; gap: 4px; border: 1px solid var(--dm-border-strong); border-radius: var(--dm-radius-sm); padding: 3px; }
.dm-view-toggle button {
  width: 34px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--dm-text-muted); border-radius: 4px;
}
.dm-view-toggle button.is-active { background: var(--dm-grad-red); color: #fff; }

/* Active filter chips */
.dm-active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--dm-space-3); }
.dm-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,0,24,0.1); border: 1px solid rgba(196,0,24,0.35); color: var(--dm-text-primary);
  font-size: var(--dm-fs-xs); padding: 6px 10px; border-radius: 20px;
}
.dm-chip i { cursor: pointer; color: var(--dm-text-muted); }

/* List view variant */
.dm-product-grid.is-list { display: flex; flex-direction: column; gap: var(--dm-space-3); }
.dm-product-grid.is-list .dm-product-card { display: flex; flex-direction: row; }
.dm-product-grid.is-list .dm-product-card__media { width: 220px; flex-shrink: 0; aspect-ratio: auto; height: 180px; }
@media (max-width: 575px) {
  .dm-product-grid.is-list .dm-product-card { flex-direction: column; }
  .dm-product-grid.is-list .dm-product-card__media { width: 100%; height: auto; aspect-ratio: 1/1; }
}
.dm-product-grid.is-list .dm-product-card__body { flex: 1; }

.dm-empty-state { text-align: center; padding: var(--dm-space-7) var(--dm-space-3); color: var(--dm-text-muted); }
.dm-empty-state i { font-size: 40px; color: var(--dm-grey-700); margin-bottom: var(--dm-space-2); display: block; }

/* ---------- Pagination ---------- */
.dm-pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--dm-space-5); }
.dm-pagination button {
  width: 38px; height: 38px; border-radius: var(--dm-radius-sm);
  background: rgba(255,255,255,0.04); border: 1px solid var(--dm-border-strong); color: var(--dm-text-secondary);
  font-size: var(--dm-fs-sm);
}
.dm-pagination button.is-active { background: var(--dm-grad-red); border-color: transparent; color: #fff; }
.dm-pagination button:disabled { opacity: 0.4; }

.dm-drawer-overlay--shop { z-index: 1150; }