/*
 * Mr.Host landing — W❤️² entry cards.
 *
 * Two clean entry cards (Custom + Ready-made) that link into the live
 * ShopLink Store. They are intentionally NOT a re-creation of the
 * Store's own product cards — we don't want a second source of truth
 * on the landing. The Store renders the full catalogue inside the
 * iframe; these cards are a door.
 *
 * The class names are namespaced (w2eb-*) so they cannot collide with
 * any existing .product-card / .card-gold rules in style.css. If those
 * rules ever change they won't affect this block.
 */

.w2eb-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 640px) {
  .w2eb-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.w2eb-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 18px 16px 16px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.w2eb-card.is-gold {
  background:
    linear-gradient(180deg, #FFFDF5 0%, #FFF6DC 100%);
  border-color: rgba(212, 175, 55, .25);
}

.w2eb-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F6F4EE;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.w2eb-media video,
.w2eb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.w2eb-title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  color: #111;
}

.w2eb-sub {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #6F6F6F;
}

/*
 * Note on price:
 * We render the current price inline ($1 / 26.000 ₫) so users see the
 * value on the landing too. But this is NOT an authoritative figure
 * — the live constructor inside the iframe reads its own price from
 * shoplink.ai, and the order amount comes from there too. If the live
 * price changes, this string falls out of sync until the landing is
 * redeployed. A future patch should replace this with a live fetch
 * from a shared catalog endpoint. For now: one place to change here.
 */
.w2eb-price {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: #FF4D00;
}

.w2eb-price-sub {
  font-weight: 500;
  font-size: 12px;
  color: #888;
  margin-left: 6px;
}

.w2eb-cta {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  transition: transform .06s ease, box-shadow .15s ease;
}

.w2eb-cta:hover { transform: translateY(-1px); }
.w2eb-cta:active { transform: translateY(0); }

.w2eb-cta.is-primary {
  background: #111;
  color: #fff;
}

.w2eb-cta.is-secondary {
  background: #FFE7C2;
  color: #4A2E00;
  border: 1px solid rgba(212, 175, 55, .45);
}

/*
 * "Coming soon" pills for the other categories. We keep the
 * category-pills strip visible in index.html (T-shirts, Hoodies, etc.)
 * so the user understands the breadth, but every non-tshirt category
 * shows this banner instead of fake cards. No buttons, no fake prices,
 * no broken links into removed local copies.
 */
.w2eb-soon {
  width: 100%;
  max-width: 720px;
  margin: 16px auto 0;
  padding: 20px 16px;
  text-align: center;
  background: #F8F7F3;
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6F6F6F;
}

.w2eb-soon strong { color: #111; font-weight: 700; }