/* Pepvela Storefront (Phase 1A) -- scoped browse styles.
   Brand tokens match the existing shop.css palette (raw hex; shop.css uses no CSS vars).
   Indigo #1e1648  Violet #6c52e3  Lavender #ede9ff  Soft White #f8f7ff
   Border #ddd8f5  Muted #6b6890  White #ffffff
   Only .sf- scoped classes here; no existing selectors overridden. */

/* ---- Controls: search + filters ---- */
.sf-controls { margin-bottom: 28px; }
.sf-search {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px;
  border: 1.5px solid #ddd8f5;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: system-ui, -apple-system, sans-serif;
  color: #1e1648;
  background: #ffffff;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.sf-search::placeholder { color: #6b6890; }
.sf-search:focus { outline: none; border-color: #6c52e3; }

.sf-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-filterbar .filter-pills { margin: 0; }

.sf-instock, .sf-reset {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid #ddd8f5;
  background: #ffffff;
  color: #6b6890;
}
.sf-instock[aria-pressed="true"], .sf-instock.active {
  background: #6c52e3;
  border-color: #6c52e3;
  color: #ffffff;
}
.sf-reset:hover, .sf-instock:hover { border-color: #6c52e3; }
.sf-count { margin-top: 14px; font-size: 0.85rem; color: #6b6890; }

/* ---- Empty state ---- */
.sf-empty {
  text-align: center;
  padding: 48px 16px;
  color: #6b6890;
  font-size: 0.95rem;
}
.sf-resetlink {
  background: none;
  border: none;
  color: #6c52e3;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ---- Card refinements (scoped; base look inherited from shop.css .product-card) ---- */
.sf-card { display: flex; flex-direction: column; }
.sf-card-media { display: block; text-decoration: none; }
.sf-card-title { color: #1e1648; text-decoration: none; }
.sf-card-title:hover { color: #6c52e3; }
.sf-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sf-stock {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 9px;
  border-radius: 999px;
}
.sf-stock-in { background: #ede9ff; color: #3c3489; }
.sf-stock-out { background: #f1efe8; color: #6b6890; }

/* Add to Cart is INERT in Phase 1A (state only; wired to the separate cart in 1B). */
.sf-add { cursor: pointer; }

@media (max-width: 600px) {
  .sf-search { max-width: 100%; }
  .sf-filterbar { gap: 8px; }
}

/* ---- Catalog controls reorg (Phase 1 patch): In Stock Only toggle + conditional Clear filters ---- */
.sf-controls-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sf-controls-top .sf-search { margin-bottom: 0; flex: 1 1 220px; min-width: 200px; }
.sf-controls-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.sf-controls-foot .sf-count { margin-top: 0; }
.sf-clear { background: none; border: none; color: #6c52e3; font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 0; }
.sf-clear:hover { color: #1e1648; }