/*
 * The two smoke-test offer pages, /catalogue and /shopify (docs/marketing/offers-smoke-test-2026-10.md).
 * Their own few rules, in their own file so the shared stylesheet's cache key does not move for two
 * pages. Built from the site's tokens and the existing card language (the tilted cream card, the glow
 * field behind it), never new colours.
 */

/* ---------- A product page, mocked ---------- */
.product-demo {
  background: var(--color-card-white);
  border: 1px solid var(--color-soft-border);
  border-radius: 20px;
  box-shadow: rgba(15, 15, 15, 0.09) 0px 14px 34px -6px;
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform 0.35s var(--ease-spring);
}
.product-demo:hover { transform: rotate(0deg); }
.product-demo-body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; padding: 22px; align-items: start; }
.product-demo-shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--color-canvas-bone); aspect-ratio: 1 / 1; }
.product-demo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-demo-range { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-text); margin: 0 0 6px; }
.product-demo-name { font-family: var(--font-display); font-size: 21px; line-height: 1.2; color: var(--color-ink-black); margin: 0 0 12px; }
.product-demo-specs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 14px; }
.product-demo-specs th,
.product-demo-specs td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--color-soft-border); vertical-align: top; }
.product-demo-specs th { font-weight: 400; color: var(--color-muted-text); width: 44%; padding-right: 10px; }
.product-demo-specs td { color: var(--color-ink-black); }
.product-demo-price { font-size: 15px; color: var(--color-ink-black); margin: 0 0 14px; }
.product-demo-price strong { font-size: 19px; }
.product-demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700;
  padding: 9px 15px;
  white-space: nowrap;
}
.demo-btn.wa { background: var(--color-lime-wash); border: 1px solid var(--color-lime-edge); color: var(--color-ink-black); }
.demo-btn.pay { background: var(--color-ink-black); color: var(--color-card-white); }
.demo-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-demo-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 22px; }
.product-demo-more figure { margin: 0; }
.product-demo-more img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--color-canvas-bone); }
.product-demo-more figcaption { font-size: 12px; color: var(--color-graphite); margin-top: 6px; line-height: 1.35; }

/* ---------- A storefront, mocked ---------- */
.store-demo .product-demo-body { grid-template-columns: 1fr 1fr; }
.store-banner {
  margin: 0 22px; margin-top: 18px;
  border-radius: 12px;
  background: var(--tint-peach);
  padding: 14px 18px;
  font-size: 14px; color: var(--color-ink-black);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.store-banner strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.store-rails { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 22px; }
.store-rail {
  border-radius: var(--radius-pill);
  background: #f0eeeb;
  color: var(--color-graphite);
  font-size: 12px; font-weight: 500;
  padding: 5px 12px;
}
.store-rail:nth-child(1) { background: var(--tint-lime); }
.store-rail:nth-child(2) { background: var(--tint-sky); }
.store-rail:nth-child(3) { background: var(--tint-blush); }

/* What the free preview is, said once and plainly under the card. */
.offer-note { max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--color-graphite); margin: 14px auto 0; }

@media (max-width: 640px) {
  .product-demo { transform: none; }
  .product-demo-body { grid-template-columns: 1fr; }
  /* The store stays two-up on a phone, the way a real collection reads there. */
  .store-demo .product-demo-body { grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
  .store-demo .product-demo-name { font-size: 16px; }
  .product-demo-more { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .product-demo { transition: none; transform: none; }
}