/* ── MERCH PAGE ── */

.merch-hero {
  padding: 56px 40px 48px;
  border-bottom: 3px solid #222;
}
.merch-hero .breadcrumb {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #666; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.merch-hero .breadcrumb a { color: #29ABE2; }
.merch-hero .breadcrumb span { color: #444; }
.merch-hero h1 {
  font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 12px;
}
.merch-hero p { font-size: 16px; color: #aaa; }

/* ── SHOP AREA ── */
.merch-shop {
  padding: 56px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Shopify Buy Button injects its own iframe — give it breathing room */
#shopify-embed iframe { display: block; }

/* ── PLACEHOLDER (shown before Shopify is connected) ── */
.shopify-placeholder {
  border: 2px dashed #333;
  padding: 80px 40px;
  text-align: center;
}
.shopify-placeholder__inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 420px; margin: 0 auto;
}
.shopify-placeholder svg {
  width: 48px; height: 48px; fill: #444;
}
.shopify-placeholder h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.shopify-placeholder p {
  font-size: 15px; color: #aaa; line-height: 1.65;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .merch-hero { padding: 40px 20px 36px; }
  .merch-hero h1 { font-size: 36px; }
  .merch-shop { padding: 40px 20px; }
  .shopify-placeholder { padding: 56px 20px; }
}