/* ═══════════════════════════════════════════════════════
   SHOP — MOBILE SIDEBAR & FILTER BAR
   Hides the desktop aside on mobile, keeps the filter bar
   on one compact row with categories + price side-by-side.
   ═══════════════════════════════════════════════════════ */

/* ALL SMALL SCREENS (300px - 768px) — 2 columns */
@media (max-width: 768px) {

  /* 1. Hide the shop aside entirely on mobile */
  .shop-sidebar {
    display: none !important;
  }

  /* 2. Remove the price range inside the aside */
  .sidebar-section--price {
    display: none !important;
  }

  /* 3. Products grid — 2 columns on all small screens */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }

  /* 4. Reduce product card padding and image size for very small screens */
  .product-info {
    padding: 12px 12px 16px !important;
  }

  .product-name {
    font-size: 0.8rem !important;
  }

  .product-price {
    font-size: 0.75rem !important;
  }

  /* 5. Filter-bar: single row, no wrapping, gap between items */
  .filter-bar {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px !important;
  }

  /* 6. Categories dropdown — compact but keeps its border/padding shape */
  .filter-dropdown {
    flex: 0 0 auto !important;
  }
  .filter-dropdown-toggle {
    min-width: 0 !important;
    padding: 7px 11px !important;
    font-size: 0.6rem !important;
    gap: 6px !important;
    white-space: nowrap;
  }
  .filter-dropdown-label {
    font-size: 0.6rem !important;
  }
  .filter-chevron {
    font-size: 0.55rem !important;
  }

  /* 7. Price-range: no box, just sits inline beside categories */
  .filter-price-mobile {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 7px 0 !important;
    border: none !important;
    gap: 8px !important;
    align-items: center;
    white-space: nowrap;
    background: transparent;
  }

  .filter-price-mobile input[type="range"] {
    width: 80px !important;
    flex: none !important;
    max-width: none !important;
    accent-color: var(--gold);
  }

  .filter-price-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--silver) !important;
  }
}

/* Extra-small phones (≤480px) — further optimize spacing */
@media (max-width: 480px) {
  .filter-bar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .filter-dropdown {
    flex: 0 0 auto !important;
  }

  .filter-dropdown-toggle {
    width: auto !important;
    padding: 6px 10px !important;
    font-size: 0.58rem !important;
  }

  .filter-price-mobile {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 6px 0 !important;
    border: none !important;
  }

  .filter-price-mobile input[type="range"] {
    width: 65px !important;
  }

  .filter-price-label {
    font-size: 0.58rem !important;
  }
}