/* ==========================================================================
   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,
.filter-chips,
.filter-sub{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-rows{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* Style row (the four tee styles), shown only while tees are picked. */
.filter-sub[hidden]{ display: none; }
.filter-sub{ padding-left: 56px; gap: 8px; }
.filter-sub .filter-label{ margin-right: 2px; }
.filter-sub .filter-chip{ padding: 7px 14px; font-size: .68rem; }
.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; }

/* Phone fold for the chips (2026-10-08). Ten chips wrapped into a sticky bar
   four rows tall on a 390px screen, a third of the view gone before a single
   product. On phones the bar is one row, "Filter / All 108", and opens to the
   chips on tap. Only when js/shop-filter.js is running (.has-toggle), so with
   no script the chips simply show. */
.filter-toggle{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.filter-toggle:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.filter-toggle-label{ color: var(--muted-dark); }
.filter-toggle-value{ display: inline-flex; align-items: center; gap: 6px; }
.filter-toggle-value .count{ opacity: .6; font-weight: 400; }
.filter-toggle-value::after{
  content: "";
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.shop-filter.open .filter-toggle-value::after{ transform: translateY(2px) rotate(-135deg); }

/* ---------- grid ---------- */
.shop-grid-section{
  background: var(--paper);
  padding: 54px 0 96px;
}
/* A plain visual break between two grouped grids on the same page —
   no label, just separation, so the groups read as distinct on sight. */
.shop-grid-section.grid-break{
  padding-top: 0;
  margin-top: -42px;
}
.shop-grid-section.grid-break .shop-grid{
  border-top: 1px solid var(--line-light);
  padding-top: 54px;
}
/* The one pointer to the digital section. Digital downloads are kept off
   Shop All by Lycan's call (2026-10-08), so this slim strip under the filter
   says where they went. It borrows the digital page's dark checkerboard. */
.shop-digital-note{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 26px;
  padding: 13px 20px;
  color: var(--white);
  background-color: #121212;
  background-image:
    linear-gradient(45deg, #1b1b1b 25%, transparent 25%, transparent 75%, #1b1b1b 75%),
    linear-gradient(45deg, #1b1b1b 25%, transparent 25%, transparent 75%, #1b1b1b 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  border-left: 3px solid var(--accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.shop-digital-note:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.shop-digital-note-label{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.shop-digital-note-text{ font-size: .88rem; color: var(--muted-dark); }
.shop-digital-note-go{
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.shop-digital-note-go::after{ content: "\2192"; margin-left: 8px; color: var(--accent-bright); }
@media (max-width: 620px){
  .shop-digital-note{ padding: 12px 14px; margin-bottom: 20px; }
  .shop-digital-note-text{ flex-basis: 100%; font-size: .82rem; }
  .shop-digital-note-go{ margin-left: 0; }
}

.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;
}

/* Groups on Shop All (2026-10-08): with 108 products one undivided grid had
   no landmarks, so each kind of product gets a heading row. When a single
   category is picked the headings only repeat the chip, so they step aside. */
.shop-group + .shop-group{ margin-top: 70px; }
.shop-group.is-hidden{ display: none; }
.group-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-light);
}
.group-head h2{ font-size: clamp(1.45rem, 3vw, 1.95rem); color: var(--ink); }
.group-count{
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  vertical-align: .55em;
  margin-left: 6px;
}
.group-links{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
.group-link,
.group-links a{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-light);
  transition: color .15s ease;
}
.group-link::after{ content: "\2192"; margin-left: 7px; }
.group-link:hover,
.group-links a:hover{ color: var(--accent); }
.shop-groups.is-filtered .group-head{ display: none; }
.shop-groups.is-filtered .shop-group + .shop-group{ margin-top: 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; }
  .shop-filter.has-toggle .filter-toggle{ display: flex; }
  .shop-filter.has-toggle .filter-rows{ display: none; }
  .shop-filter.has-toggle.open .filter-rows{
    display: flex;
    padding-top: 4px;
    max-height: 62vh;
    overflow-y: auto;
  }
  .filter-sub{ padding-left: 0; padding-top: 10px; border-top: 1px solid var(--line-dark); }
  .filter-sub .filter-label{ display: block; width: 100%; }
  .shop-group + .shop-group{ margin-top: 52px; }
  .group-head{ margin-bottom: 18px; }
}