/* Shop Page */
.shop-header-bar { background:var(--bg-card); border-bottom:1px solid var(--border); padding:var(--space-5) 0; }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); margin-bottom:var(--space-4); }
.breadcrumb a { color:var(--text-muted); transition:color var(--transition-fast); }
.breadcrumb a:hover { color:var(--blue); }
.shop-header-info { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.shop-header-info h1 { font-size:clamp(20px,3vw,28px); font-weight:800; letter-spacing:-0.02em; }
.shop-header-controls { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.view-toggle { display:flex; border:1.5px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.view-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all var(--transition-fast); }
.view-btn:hover { color:var(--text-primary); background:var(--bg-elevated); }
.view-btn.active { background:var(--blue); color:#fff; }
.view-btn + .view-btn { border-left:1px solid var(--border); }
.active-filters { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.filter-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--radius-full); font-size:12px; font-weight:600; color:var(--blue-dark); }
.filter-tag button { width:14px; height:14px; display:flex; align-items:center; justify-content:center; opacity:.7; }
.filter-tag button:hover { opacity:1; }
.shop-layout { display: grid; grid-template-columns: minmax(260px, 260px) 1fr; gap:var(--space-8); padding:var(--space-8) 0 var(--space-16); align-items:start; min-height:100vh; }
.shop-main { min-width:0; flex:1; }
.filter-sidebar { overflow-y:auto; max-height:80vh; padding-right:var(--space-2); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-bottom:var(--space-8); grid-auto-rows: 1fr; }
.product-grid.list-view { grid-template-columns:1fr; }
.product-grid.list-view .product-card { flex-direction:row; }
.product-grid.list-view .product-card-img { width:160px; aspect-ratio:1; flex-shrink:0; }
.product-grid.list-view .product-card-footer { flex-direction:column; align-items:flex-start; border-left:1px solid var(--border); padding:var(--space-4); min-width:140px; }
.empty-state { text-align:center; padding:80px 20px; color:var(--text-muted); }
.empty-state svg { margin:0 auto 20px; opacity:.3; }
.empty-state h3 { font-size:20px; color:var(--text-primary); margin-bottom:8px; }
.mobile-menu-link { display:block; padding:13px var(--space-6); font-size:15px; font-weight:500; color:var(--text-primary); border-bottom:1px solid var(--divider); transition:all var(--transition-fast); text-decoration:none; }
.mobile-menu-link:hover { background:var(--bg-elevated); color:var(--blue); }
@media(max-width:1200px){ .shop-layout{grid-template-columns: minmax(220px, 220px) 1fr; gap:var(--space-5); } }
@media(max-width:1024px){ .filter-sidebar{display:none;} .shop-layout{grid-template-columns:1fr; gap:0;} .product-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4);} }
@media(max-width:768px){ .shop-layout{gap:0;padding-top:var(--space-5);} .product-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3);} }
@media(max-width:480px){ .product-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3); grid-auto-rows: minmax(240px, auto); } }
@media(max-width:360px){ .product-grid{grid-template-columns:1fr;} }

/* Ensure each product card fills its grid cell (equal height columns) */
.product-grid .product-card { height:100%; display:flex; flex-direction:column; }

/* =========================================================
   SHOP PAGE RESPONSIVE FIXES
   ========================================================= */

/* Prevent filter sidebar from overlapping product grid */
.shop-layout {
  overflow: hidden;
}

/* Filter sidebar — contained, no overflow of inner elements */
.filter-sidebar {
  overflow: hidden;
  min-width: 0;
}
.filter-group {
  overflow: hidden;
}
.price-range-inputs {
  overflow: hidden;
  max-width: 100%;
}

/* Product grid card fixes */
.product-grid .product-card {
  min-width: 0;
  overflow: hidden;
}

/* Mobile filter drawer */
.mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.mobile-filter-btn:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 1024px) {
  .mobile-filter-btn { display: flex; }
}

/* Shop header bar responsive */
@media (max-width: 640px) {
  .shop-header-controls { flex-wrap: wrap; gap: var(--space-2); }
  .view-toggle { margin-left: 0; }
}

/* Sort select — full width on mobile */
@media (max-width: 480px) {
  .shop-header-controls select {
    width: 100%;
  }
}

/* Product grid at various breakpoints */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Empty state responsive */
@media (max-width: 480px) {
  .empty-state { padding: 48px 16px; }
  .empty-state h3 { font-size: 18px; }
}