/* ==========================================================================
   OstuGrupp — Shop / catalog enrichments (shop.css)
   Layered on top of woocommerce.css. Uses the shared design tokens.
   Loop badges · result-count + ordering toolbar · empty-shop state.
   ========================================================================== */

/* ---- Loop badges (Otsas / Uus) ---- */
/* The .ostu-loop-badges / .ostu-badge pill styles + the out-of-stock card dim
   moved to woocommerce.css. shop.css only loads on shop/taxonomy archives, but
   the same badges also render on the home [products] rails — so the canonical
   style now lives in woocommerce.css (loaded wherever WooCommerce is active) to
   keep the "Otsas" pill identical on every grid. Nothing badge-related here. */

/* ---- Result-count + ordering toolbar ---- */
.ostu-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* Neutralise WooCommerce's default floats/margins inside the toolbar. */
.ostu-shop-toolbar .woocommerce-result-count {
  margin: 0;
  float: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
}
.ostu-shop-toolbar .woocommerce-ordering {
  margin: 0;
  float: none;
}
.ostu-shop-toolbar::before,
.ostu-shop-toolbar::after { content: none; }

@media (max-width: 520px) {
  .ostu-shop-toolbar { flex-direction: column; align-items: stretch; }
  .ostu-shop-toolbar .woocommerce-ordering select { width: 100%; }
}

/* ---- Empty-shop state ---- */
.ostu-empty-shop {
  text-align: center;
  max-width: 460px;
  margin: 24px auto 8px;
  padding: 48px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ostu-empty-shop__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--muted);
  color: var(--slate-500);
}
.ostu-empty-shop__title {
  font-size: 22px;
  margin: 0 0 8px;
}
.ostu-empty-shop__text {
  color: var(--slate-600);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.ostu-empty-shop .btn-primary { margin: 0 auto; }

/* The default WooCommerce "no products found" notice is removed in PHP
   (inc/shop-extras.php → remove_action wc_no_products_found), so our branded
   .ostu-empty-shop panel is the only empty state — no CSS hide needed here. */

/* On the narrowest phones the empty panel sat hard against the screen edges
   with its 28px inset; trim it so the icon, copy and CTA breathe. */
@media (max-width: 400px) {
  .ostu-empty-shop { padding: 40px 20px; }
}