/* Sort & filter controls — used on the shop/category pages.
   White background, black text/icons/borders, pill-shaped filter buttons —
   matching the reference layout provided. */
.shop-controls {
  background: #fff;
  padding: 18px 20px;
  margin: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-family: "Montserrat", sans-serif;
}
.shop-controls-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.shop-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-control-icon {
  color: #000;
  flex-shrink: 0;
}
.shop-control span {
  color: #000;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}
.shop-control select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
  color: #000;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 11px 34px 11px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 160px;
  transition: background-color 0.15s ease;
}
.shop-control select:hover,
.shop-control select:focus {
  background-color: #f5f5f5;
  outline: none;
}
.shop-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #c0ab65;
  color: #fff;
  border: 1px solid #c0ab65;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.shop-live-btn:hover {
  opacity: 0.85;
}
.shop-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: shop-live-pulse 1.6s ease-in-out infinite;
}
@keyframes shop-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* Hidden category sections (filtered out) */
.model-section.shop-hidden {
  display: none;
}

/* The original page pulled every category heading except the first up by
   -100px (an inline hack tuned only for viewing all categories back-to-back).
   With the filter now able to isolate any single section, that negative
   margin has nothing above it to absorb and drags the heading straight into
   the controls bar. Neutralize it and use consistent, safe spacing instead
   so no heading can ever overlap .shop-controls, in any filter state. */
.model-section h1 {
  margin-top: 0 !important;
  padding-top: 45px;
}
/* Hidden individual cards (shouldn't normally happen with this filter model,
   reserved for future search-by-keyword) */
.product-card.shop-hidden {
  display: none;
}

@media (max-width: 600px) {
  .shop-controls-inner { gap: 10px; }
  .shop-control select { min-width: 140px; }
}