/* The prism is a brand visual. Product cards still use their actual catalog photos. */
body[data-page="shop"] .shop-section.catalog-section {
  background:
    radial-gradient(ellipse at 86% 0, #43265b3d, transparent 38rem),
    radial-gradient(ellipse at 8% 36%, #33225335, transparent 46rem),
    #111016;
}

body[data-page="shop"] .catalog-heading.shop-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  min-height: clamp(154px, 17vw, 220px);
  margin-bottom: clamp(13px, 1.8vw, 24px);
  padding: clamp(16px, 2.7vw, 38px);
  overflow: hidden;
  border: 1px solid #ad7ce464;
  border-radius: clamp(16px, 2.3vw, 28px);
  background: #120e1b;
  box-shadow: 0 12px 38px #08050c72, 0 0 30px #8854d325;
}

.shop-stage-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 78%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  pointer-events: none;
}

.shop-stage::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, #120e1b 0%, #120e1bf5 23%, #120e1ba6 39%, transparent 67%),
    linear-gradient(0deg, #100b1c45, transparent 52%);
  box-shadow: inset 0 1px #dbbaff45, inset 0 -1px #a2f8e51f;
}

.shop-stage-copy {
  position: relative;
  z-index: 2;
  max-width: min(53%, 560px);
  min-width: 0;
}

.shop-stage-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  color: #bcf5e8;
  font: 750 clamp(10px, 1vw, 12px)/1.3 var(--heading);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.shop-stage-kicker > span {
  width: 7px;
  height: 7px;
  background: #a2f9e4;
  transform: rotate(45deg);
  box-shadow: 0 0 13px #8af0dc88;
}

.shop-stage h1 {
  margin: 0;
  color: #fbf5ff;
  font-size: clamp(31px, 5.25vw, 68px);
  line-height: .99;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.shop-stage .catalog-description {
  max-width: 40ch;
  margin-top: 10px;
  color: #e2d7eb;
  font-size: clamp(12px, 1.3vw, 16px);
  text-wrap: pretty;
}

.shop-stage #product-count.catalog-result-count {
  position: absolute;
  z-index: 2;
  inset: auto clamp(10px, 1.7vw, 24px) clamp(10px, 1.7vw, 24px) auto;
  margin: 0;
  padding: 6px 10px;
  border-color: #dbbaff70;
  background: #21162bee;
  color: #f6ebff;
  box-shadow: 0 4px 16px #11091d8c;
}

body[data-page="shop"] .catalog-panel {
  position: relative;
  border-bottom-color: #8858ad60;
  padding-bottom: 12px;
}

body[data-page="shop"] .catalog-panel .filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  border-color: #73528b71;
  background: linear-gradient(151deg, #352743, #201a2b 80%);
  box-shadow: inset 0 1px #dbbaff26;
}

body[data-page="shop"] .catalog-panel .filter-button svg {
  width: 14px;
  height: 14px;
  color: #dbb8ff;
}

body[data-page="shop"] .catalog-panel .filter-button:hover {
  border-color: #bb8cf0;
}

body[data-page="shop"] .catalog-panel .filter-button.active {
  border-color: #c6f9ea;
  background: linear-gradient(141deg, #e6fff7, #99e9d6 80%);
  color: #13302b;
  box-shadow: inset 0 1px #fff9, 0 3px 14px #80eed034;
}

body[data-page="shop"] .catalog-panel .filter-button.active svg { color: #23524a; }

body[data-page="shop"] .catalog-panel :is(.search-field, .sort-field select) {
  border-color: #65487990;
  background: #1c1428;
  box-shadow: inset 0 1px #e1c2ff12;
}

@media (min-width: 900px) and (max-width: 1100px) {
  body[data-page="shop"] .catalog-panel .filter-button svg { display: none; }
}

@media (max-width: 600px) {
  body[data-page="shop"] .catalog-heading.shop-stage {
    min-height: 156px;
    padding-top: 34px;
  }

  .shop-stage-art {
    width: 91%;
    object-position: 66% 50%;
  }

  .shop-stage::before {
    background: linear-gradient(90deg, #120e1b 0%, #120e1bed 25%, #120e1bae 54%, #120e1b1f 100%);
  }

  .shop-stage-copy { max-width: 78%; }

  .shop-stage h1 { font-size: clamp(29px, 7.5vw, 44px); }

  .shop-stage .catalog-description { margin-top: 7px; }

  .shop-stage #product-count.catalog-result-count { inset: 10px 10px auto auto; }
}