/* ============================================================
   CATALOG.CSS - page-specific styles for the catalog pages
   (/catalog/meat, /catalog/poultry) and the generic product
   page (/catalog/product/<id>).
   The product cards themselves (.prod-*) are shared and live in
   main.css. This file styles the grid wrappers + product detail.
   ============================================================ */

/* page sits under the fixed nav (top-bar + main-bar) - black so the
   padding-top offset matches the products section, no grey strip */
.catalog-page { padding-top: 124px; background: #000; }

/* ---------- products section ---------- */
.cat-products { padding: 64px 0 88px; background: #000; }
.cat-products .section-head { margin-bottom: 40px; }

/* ---------- closing CTA band (cream - dark text for contrast) ---------- */
.cat-cta-band {
  text-align: center; padding: 56px 0;
  background: #f2dcca; border-top: 1px solid rgba(26,22,23,0.12);
}
.cat-cta-band h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800; color: #1f1a1b; margin-bottom: 12px;
}
.cat-cta-band p { color: #3a3330; margin-bottom: 26px; font-size: 16px; }
.cat-cta-band .cat-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
/* ghost button reads dark on the cream band (default .btn-ghost uses cream --ink) */
.cat-cta-band .btn-ghost { color: #1f1a1b; border-color: #1f1a1b; }
.cat-cta-band .btn-ghost:hover { background: #1f1a1b; color: #f2dcca; }

/* ============================================================
   PRODUCT PAGE (generic - /catalog/product/<id>)
   ============================================================ */
.product-page-section { padding: 40px 0 88px; background: #000; }

/* breadcrumb */
.product-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--text-dim); margin-bottom: 36px;
}
.product-breadcrumb a { color: var(--cream-soft); transition: color 0.2s; }
.product-breadcrumb a:hover { color: var(--gold-3); }
.product-breadcrumb span[aria-current] { color: var(--cream); }

/* detail layout: media | info ([hidden] must win over display:grid) */
.product-detail[hidden], .product-missing[hidden] { display: none; }
.product-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}
.product-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--bg-soft);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media .prod-badge {
  position: absolute; top: 16px; inset-inline-end: 16px;
}

.product-info { padding-top: 8px; }
.product-info .product-cat {
  display: inline-block; font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--gold-3); margin-bottom: 14px;
}
.product-info h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px); color: var(--ink);
  line-height: 1.1; margin-bottom: 18px;
}
.product-info .product-lead {
  font-size: 17px; line-height: 1.75; color: var(--text); margin-bottom: 22px;
}
.product-info .product-note {
  font-size: 14px; color: var(--text-dim); margin-bottom: 30px;
  padding-inline-start: 14px; border-inline-start: 2px solid var(--gold-soft);
}
.product-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* missing-product fallback */
.product-missing {
  text-align: center; padding: 80px 0;
}
.product-missing h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 4vw, 36px); color: var(--ink); margin-bottom: 14px;
}
.product-missing p { color: var(--text); margin-bottom: 26px; }

@media (max-width: 767px) {
  .catalog-page { padding-top: 88px; }
  .cat-products { padding: 48px 0 64px; }
  .cat-cta-band .cat-cta-btns { flex-direction: column; }
  .cat-cta-band .cat-cta-btns .btn { width: 100%; }

  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .product-ctas { flex-direction: column; }
  .product-ctas .btn { width: 100%; }
}