/* ==========================================================================
   MerchStamp — Shop All page (shop.html)
   Added 2026-09-18. The site had no page that showed the whole catalogue;
   every product lived inside a themed category page and the home hero's
   "Explore the shop" only anchor-scrolled. A real visitor could not find the
   merchandise. This is the destination that fixes that.
   Follows the house rule: black for hero/brand moments, warm paper ground
   under the product grid, accent spent only on price tags and CTAs.
   ========================================================================== */

/* ---------- hero ---------- */
.shop-hero{
  background: var(--black);
  color: var(--white);
  padding: 74px 0 62px;
  position: relative;
  overflow: hidden;
}
.shop-hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 90% at 88% 0%, rgba(179,18,45,.22), transparent 62%),
    radial-gradient(45% 70% at 4% 100%, rgba(217,165,49,.09), transparent 62%);
  pointer-events: none;
}
.shop-hero .wrap{ position: relative; }
.shop-hero .eyebrow{ color: var(--accent-bright); display: block; margin-bottom: 18px; }
.shop-hero h1{
  font-size: clamp(2.5rem, 8vw, 4.4rem);
  margin-bottom: 20px;
}
.shop-hero h1 em{ font-style: normal; color: var(--accent); }
.shop-hero p.lede{
  font-size: clamp(.98rem, 2vw, 1.12rem);
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 560px;
}

/* ---------- filter bar ----------
   Sticks under the nav so the way to re-filter never scrolls away. Plain
   buttons, real text labels — no icon-only controls. */
.shop-filter{
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: var(--charcoal-2);
  border-bottom: 1px solid var(--line-dark);
  padding: 14px 0;
}
.shop-filter .wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-label{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-right: 4px;
}
.filter-chip{
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dark);
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 9px 17px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.filter-chip .count{
  opacity: .55;
  margin-left: 6px;
  font-weight: 400;
}
.filter-chip:hover{ color: var(--white); border-color: var(--muted-dark); }
.filter-chip[aria-pressed="true"]{
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}
.filter-chip[aria-pressed="true"] .count{ opacity: .8; }
.filter-chip:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- grid ---------- */
.shop-grid-section{
  background: var(--paper);
  padding: 54px 0 96px;
}
.shop-count{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted-light);
  margin-bottom: 26px;
}
.shop-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

/* The .p-card product card itself is a SHARED component and lives in base.css,
   because the home page's featured strip uses the same card. Only the Shop All
   page's own furniture (hero, filter bar, grid, outro) is defined here. */

/* ---------- closing strip ---------- */
.shop-outro{
  background: var(--charcoal);
  color: var(--white);
  padding: 62px 0;
  border-top: 1px solid var(--line-dark);
  text-align: center;
}
.shop-outro h2{ font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 14px; }
.shop-outro p{
  color: var(--muted-dark);
  max-width: 52ch;
  margin: 0 auto 26px;
  line-height: 1.7;
  font-size: .98rem;
}
.shop-outro .cta-row{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .shop-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .shop-hero{ padding: 56px 0 48px; }
}
@media (max-width: 620px){
  .shop-filter{ padding: 11px 0; }
  .filter-label{ display: none; }
  .filter-chip{ padding: 8px 13px; font-size: .68rem; }
}