/* ============================================================================
 * Shared Store product browse cards — public + client + employee catalog
 * Soft Neutral tokens with legacy fallbacks.
 * ========================================================================== */

.st-hero{padding:3.5rem 0 1.25rem;text-align:center}
.st-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-0.02em;color:var(--ink-strong,var(--text-primary));margin:0 auto 0.75rem}
.st-hero p{color:var(--ink-muted,var(--text-secondary));max-width:560px;line-height:1.7;margin-left:auto;margin-right:auto}

.st-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-bottom:0;
}
.st-grid.st-grid--page{margin-bottom:3rem}

.st-card{
  background:var(--surface,var(--surface-primary));
  border:1px solid var(--border-hairline,var(--border-color));
  border-radius:var(--r-card,var(--radius-xl,16px));
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-soft,var(--shadow-sm));
  position:relative;
  min-width:0;
  width:100%;
}
/* Must beat display:flex !important above — used by type/search filters */
.st-card.is-filtered-out,
.st-item.is-filtered-out{
  display:none !important;
}
.st-card:hover{
  border-color:var(--border-strong,var(--border-hover-color));
  box-shadow:var(--shadow-soft,var(--shadow-md));
  background:var(--surface,var(--surface-primary));
}

.st-card-media{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:140px;
  background:var(--surface-sunken,var(--surface-secondary,#f3f4f6));
  overflow:hidden;
  flex:0 0 auto;
}
.st-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.st-card-media-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent,var(--primary));
  font-size:2.25rem;
  background:var(--surface-sunken,var(--surface-secondary,#f3f4f6));
}
.st-quick-add{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:var(--r-pill,9999px);
  border:none;
  background:var(--surface,var(--surface-primary,#fff));
  color:var(--accent,var(--primary));
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.95rem;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
  z-index:1;
}
.st-quick-add:hover{
  background:var(--accent,var(--primary));
  color:var(--ink-on-solid,#fff);
}
.st-quick-add.added{
  background:var(--positive,#10b981);
  color:var(--ink-on-solid,#fff);
}

.st-card-body{
  padding:1.15rem 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  flex:1;
  min-width:0;
}
.st-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  background:var(--accent-soft,rgba(var(--primary-rgb,243,91,37),0.1));
  color:var(--accent,var(--primary));
  font-size:0.72rem;
  font-weight:600;
  padding:0.28rem 0.7rem;
  border-radius:var(--r-pill,var(--radius-md,8px));
  margin:0;
}
.st-card-title{
  font-size:1.08rem;
  font-weight:700;
  margin:0;
  color:var(--ink-strong,var(--text-primary));
  line-height:1.35;
}
.st-card-meta{
  font-size:0.8rem;
  color:var(--ink-muted,var(--text-muted));
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
}
.st-card-pricing{
  margin-top:0.35rem;
  margin-bottom:0.15rem;
}
.st-card-price{
  font-size:1.4rem;
  font-weight:800;
  color:var(--ink-strong,var(--text-primary));
  line-height:1.2;
  margin:0;
}
.st-card-cycle{
  font-size:0.78rem;
  color:var(--ink-muted,var(--text-muted));
  margin:0.2rem 0 0;
}

.st-card-actions{
  margin-top:auto;
  padding-top:0.85rem;
  display:flex;
  gap:0.55rem;
}
.st-card-actions .st-view-btn,
.st-card-actions .st-buy-btn,
.st-card-actions .st-order-btn{
  flex:1;
  justify-content:center;
  padding-left:0.65rem;
  padding-right:0.65rem;
  min-width:0;
}

/* Inline order form inserted into the product grid (client / employee) */
.st-grid > .sto-order-inline{
  grid-column:1 / -1;
}

.st-empty{text-align:center;padding:4rem 1rem;color:var(--ink-muted,var(--text-secondary))}
.st-empty i{font-size:2.5rem;color:var(--accent,var(--primary));margin-bottom:1rem;display:block}

.st-browse__toolbar{display:flex;flex-direction:column;gap:14px;margin:0 0 1.25rem}
.st-browse__toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-browse__toolbar-row--types{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.st-search{position:relative;flex:1 1 240px;min-width:200px;max-width:420px}
.st-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-muted,var(--text-muted));font-size:0.85rem;pointer-events:none}
.st-search input{
  width:100%;
  height:42px;
  border:1px solid var(--border-hairline,var(--border-color));
  border-radius:var(--r-pill,999px);
  background:var(--surface,var(--surface-primary,#fff));
  color:var(--ink-strong,var(--text-primary));
  padding:0 16px 0 38px;
  font-size:0.92rem;
  outline:none;
}
.st-search input:focus{border-color:var(--accent,var(--primary));box-shadow:0 0 0 3px rgba(var(--primary-rgb,240,90,40),0.12)}
.st-search input::placeholder{color:var(--ink-muted,var(--text-muted))}
.st-browse__filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.st-filter-label{font-size:12px;font-weight:600;color:var(--ink-muted,var(--text-muted))}
.st-filter-select{
  height:38px;
  border:1px solid var(--border-hairline,var(--border-color));
  border-radius:var(--r-pill,999px);
  background:var(--surface,var(--surface-primary,#fff));
  color:var(--ink-strong,var(--text-primary));
  padding:0 12px;
  font-size:0.85rem;
  min-width:140px;
}
.st-browse__meta{display:flex;align-items:center;gap:12px;font-size:0.82rem;color:var(--ink-muted,var(--text-muted));margin-left:auto;white-space:nowrap}
.st-clear-filters{border:none;background:transparent;color:var(--accent,var(--primary));font-size:0.82rem;font-weight:600;cursor:pointer;padding:0}
.st-clear-filters:hover{text-decoration:underline}

/* Store type filter chips — same Soft Neutral pills as gigs browse */
.st-browse .chip-row,
.chip-row.st-type-chips{
  display:flex;
  gap:0.6rem;
  overflow-x:auto;
  padding-bottom:0;
  margin:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  flex:1 1 auto;
  min-width:0;
}
.chip-row::-webkit-scrollbar{display:none}
.chip-row .chip,
button.chip{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:auto;
  min-height:0;
  padding:0.55rem 1.1rem;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  border-radius:var(--r-pill,9999px);
  background:var(--surface,var(--surface-primary,#fff));
  color:var(--ink,var(--text-primary));
  border:1px solid var(--border-hairline,var(--border-color,rgba(0,0,0,.08)));
  box-shadow:none;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip-row .chip:hover,
button.chip:hover{
  background:var(--surface-sunken,var(--bg-secondary,#f5f5f5));
  color:var(--ink-strong,var(--text-primary));
}
.chip-row .chip.active,
button.chip.active{
  background:var(--ink-strong,var(--secondary,#181818));
  border-color:var(--ink-strong,var(--secondary,#181818));
  color:var(--canvas,var(--ink-on-solid,#fff));
}
.chip-row .chip.active i,
button.chip.active i{color:inherit}
.chip-row .chip i{font-size:0.85rem;line-height:1}

@media (max-width:991px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .st-grid{grid-template-columns:1fr}
  .st-hero{padding:1.25rem 0 1rem}
  .st-browse__filters{margin-left:0;width:100%}
  .st-filter-select{flex:1 1 140px}
  .st-search{max-width:none}
  .st-browse__toolbar-row--types{align-items:flex-start}
  .st-browse__meta{margin-left:0;width:100%;justify-content:space-between}
}