/**
 * The shop archive: product cards, price and stock lines, pagination.
 * Everything else comes from base.css.
 */

.cs-shop {
  /* The shop keeps the narrower measure it shipped with. */
  --wrap-max: 1120px;
  --wrap-pad: var(--space-8);
  --thumb-mobile: 104px;
}

.cs-page.cs-shop .sec-title { margin-block: var(--space-2); }

/* Woo renders the ordering form inside the sort note. */
.cs-shop .sort-note select {
  font: inherit;
  color: inherit;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: var(--line-hair);
  border-radius: 999px;
  cursor: pointer;
}

/* ── product cards ──────────────────────────────────────── */
.cs-shop .card-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 215px;
  max-width: 320px;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.cs-shop .card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.cs-shop .card-lines { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }

.cs-shop .card-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Astra colours `.price` at a higher specificity than a class alone can beat. */
body .cs-shop .price,
body .cs-shop .price .amount,
body .cs-shop .price bdi {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-price);
  color: var(--color-text);
}

.cs-shop .price del { opacity: 0.5; margin-right: var(--space-2); }
.cs-shop .price ins { text-decoration: none; }

.cs-shop .stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
}

.cs-shop .added_to_cart { display: none; }

/* ── pagination ─────────────────────────────────────────── */
.cs-shop .woocommerce-pagination ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.cs-shop .woocommerce-pagination a,
.cs-shop .woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: var(--space-2) var(--space-3);
  border: var(--line-hair);
  border-radius: 999px;
  font-size: var(--fs-small);
}

.cs-shop .woocommerce-pagination .current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ── tablet ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cs-shop .card-product { flex: 1 1 40%; max-width: none; }
}

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .cs-shop .cards { gap: var(--space-4); }

  .cs-shop .card-product {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .cs-shop .card-product .card-media { width: var(--thumb-mobile); flex: none; }
  .cs-shop .card-product .card-lines { flex: 1 1 180px; min-width: 0; }
  .cs-shop .card-product .card-desc { display: none; }
  .cs-shop .card-product .card-foot { flex: 1 1 100%; }
  .cs-shop .card-product .stock { flex: 1 1 100%; }
}