/* Shop "Coming soon": Kobe at the house doors. Toggled by /assets/js/shop-state.js.
   With no .shop-open on <html>, live shop parts hide and the Coming soon panel shows. */
html:not(.shop-open) [data-shop-live] { display: none !important; }
html.shop-open [data-shop-soon] { display: none !important; }

.shop-soon {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  color: #f4efe6;
}

.shop-soon-art {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(232, 200, 120, 0.42);
  border-radius: 2px;
  background: #000;
  aspect-ratio: 1280 / 616;
}

.shop-soon-art picture,
.shop-soon-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 60%;
}

.shop-soon-copy {
  padding: 1.6rem 1rem 0.4rem;
}

.shop-soon-kicker {
  margin: 0 0 0.55rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #E8C878;
}

.shop-soon-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #E8C878;
  text-shadow: none;
}

.shop-soon-rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1rem auto;
  background: rgba(232, 200, 120, 0.6);
}

.shop-soon-line {
  max-width: 24rem;
  margin: 0 auto;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.86);
}

.shop-soon-sign {
  margin: 0.9rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(232, 200, 120, 0.9);
}

/* /shop: the panel stands in for the hero. */
.shop-soon--page {
  padding: 2rem clamp(1.15rem, 4vw, 2rem) 4.5rem;
}

/* Homepage chapter and /sit tab sit inside narrower columns. */
.shop-soon--inline {
  margin-top: 1rem;
}

.shop-soon--inline .shop-soon-title {
  font-size: 2.2rem;
}

@media (max-width: 720px) {
  .shop-soon-art { aspect-ratio: 680 / 616; }
  .shop-soon--page { padding: 1rem 1.15rem 3.5rem; }
}