:root {
  /* Core colors sampled from remixmarket.com. */
  --shop-ink: #323e48;
  --shop-text: var(--shop-ink);
  --shop-paper: #fff;
  --shop-line: #dbe5d9;
  --shop-muted: #54616a;
  --shop-accent: #24741a;
  --market-green: #44d62c;
  --market-pale: #e6f9e0;
  --market-wash: #f3f8f1;
}

.market-ribbon {
  padding: 8px 18px;
  background: var(--market-green);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}

.shop-header .wordmark img { display: block; width: clamp(105px, 12vw, 148px); height: auto; }
.shop-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.shop-header .environment-badge { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; background: #fb923c; color: #431407; border: 1px solid #fdba74; border-radius: 999px; padding: 4px 9px; font-size: 11px; line-height: 1.2; font-weight: 750; letter-spacing: .04em; }
.shop-header .local-label { color: var(--shop-muted); }
#collection-eyebrow:empty { display: none; }

.hero {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: var(--market-pale);
}
.hero-copy { padding: clamp(32px, 5vw, 82px) 11%; }
.hero h1 {
  font-size: clamp(44px, 5.7vw, 82px);
  font-weight: bold;
  font-style: italic;
  line-height: .99;
}
.hero h1 em {
  text-decoration: underline solid var(--market-green) 5px;
  text-underline-offset: .13em;
  text-decoration-skip-ink: none;
}
.hero-description { color: var(--shop-text); }
.primary-link, .shop-button { border-radius: 30px; }
.primary-link { background: var(--market-green); color: var(--shop-ink); font-weight: 700; }
.primary-link:hover { background: #5ce149; }
.shop-button:hover { background: #45545f; }
.shop-button.secondary:hover { background: var(--market-pale); }
.hero-art {
  display: block;
  min-height: 390px;
  border-radius: 0;
}
.hero-art img { position: absolute; inset: 0; object-fit: cover; }
.hero-art::before {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 24px;
  background: var(--market-pale);
  clip-path: polygon(0 0, 95% 0, 38% 8%, 81% 14%, 43% 21%, 83% 28%, 35% 37%, 92% 43%, 47% 52%, 80% 59%, 35% 68%, 89% 76%, 38% 83%, 78% 91%, 45% 100%, 0 100%);
  content: '';
}
.art-caption {
  left: auto;
  right: 6%;
  bottom: 7%;
  padding: 12px 18px;
  background: var(--shop-paper);
  color: var(--shop-ink);
  box-shadow: 0 3px 16px #323e4835;
  transform: rotate(4deg);
}

.principles { background: var(--market-wash); margin: 0; padding: 0 5.5%; }
.principles p span, .how-steps span { color: var(--shop-accent); }
.collection-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.collection-summary p { font-size: 12px; color: var(--shop-muted); margin: 0; }
.market-sort { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12px; }
.market-sort select { width: auto; border-radius: 24px; padding: 7px 12px; font-size: 12px; }
.collection-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}
.market-filter { color: var(--shop-ink); min-width: 0; }
.market-filter input, .market-filter select {
  min-width: 0;
  border: 1px solid #9daaa0;
  border-radius: 24px;
  background: var(--shop-paper);
  color: var(--shop-ink);
  font-size: 14px;
}
.market-warning {
  background: var(--market-pale);
  padding: 12px 16px;
  border-radius: 8px;
}
.market-warning button { min-height: 32px; padding: 4px 12px; }
.listing-art, .detail-art { background: #eaf0e8; }
.listing-card:nth-child(3n+2) .listing-art { background: #e7ebec; }
.listing-card:nth-child(3n) .listing-art { background: #e3f1de; }
.listing-seller { color: var(--shop-muted); font-size: 13px; margin: 0 0 6px; }
.listing-methods { display: flex; flex-wrap: wrap; gap: 5px; }
.listing-methods span {
  border-radius: 14px;
  background: var(--market-pale);
  padding: 2px 9px;
  font-size: 11px;
}
.catalog-status, .how-it-works { background: var(--market-wash); }
.how-steps p, .photo-label { color: var(--shop-muted); }
.demo-notice, .receipt-mark { background: var(--market-wash); color: var(--shop-ink); }
.shop-field input, .shop-field textarea { background: var(--shop-paper); }
dialog::backdrop { background: #323e48ba; }
footer { background: var(--shop-ink); color: var(--shop-paper); }
.footer-brand img { display: block; width: 110px; height: auto; }
body :focus-visible { outline-color: var(--shop-accent); }
footer :focus-visible { outline-color: var(--market-green); }

@media (max-width: 700px) {
  .shop-header .local-label { max-width: 105px; flex-basis: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 36px 6%; }
  .hero h1 { font-size: clamp(42px, 11vw, 64px); }
  .hero-art { min-height: 0; aspect-ratio: 3 / 2; }
  .hero-art::before { display: none; }
  .principles { padding: 10px 6%; }
  .collection-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-summary { margin-top: 16px; gap: 10px; }
  .market-filter:first-child { grid-column: 1 / -1; }
}