.stc-mobile-demo {
  --stcmd-bg: #faf8f2;
  --stcmd-bg-soft: #f0ebe2;
  --stcmd-ink: #171717;
  --stcmd-muted: #625b52;
  --stcmd-border: #ded6ca;
  --stcmd-panel: #fffdf8;
  --stcmd-accent: #d7352a;
  --stcmd-accent-dark: #a91f17;
  --stcmd-price: #08785d;
  --stcmd-focus: rgba(215, 53, 42, 0.24);
  --stcmd-font-ui: "Plus Jakarta Sans", "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --stcmd-font-display: "Outfit", "Plus Jakarta Sans", "Manrope", "Avenir Next", sans-serif;
  background:
    linear-gradient(180deg, #fffcf6 0%, var(--stcmd-bg) 42%, var(--stcmd-bg-soft) 100%);
  color: var(--stcmd-ink);
  font-family: var(--stcmd-font-ui);
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1.25rem, env(safe-area-inset-bottom));
  position: relative;
}

.stc-mobile-demo *,
.stc-mobile-demo *::before,
.stc-mobile-demo *::after {
  box-sizing: border-box;
}

.stc-mobile-demo-account {
  align-items: center;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(23, 23, 23, 0.14);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(23, 23, 23, 0.12);
  color: var(--stcmd-ink);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right));
  text-decoration: none;
  top: max(0.85rem, env(safe-area-inset-top));
  width: 44px;
  z-index: 20;
}

.stc-mobile-demo-account svg {
  display: block;
  fill: currentColor;
  height: 19px;
  width: 19px;
}

.stc-mobile-demo-account:hover,
.stc-mobile-demo-account:focus-visible {
  border-color: rgba(23, 23, 23, 0.34);
  box-shadow: 0 0 0 4px var(--stcmd-focus), 0 10px 24px rgba(23, 23, 23, 0.16);
  outline: 0;
}

.stc-mobile-demo-hero {
  margin: 0 auto;
  max-width: 720px;
  padding: 0.25rem 4.9rem 0.85rem 1rem;
}

.stc-mobile-demo-kicker,
.stc-mobile-demo-date {
  color: var(--stcmd-muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
}

.stc-mobile-demo-hero h1 {
  color: var(--stcmd-ink);
  font-family: var(--stcmd-font-display);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0.18rem 0 0;
}

.stc-mobile-demo-subtitle {
  color: var(--stcmd-muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.38rem 0 0;
  max-width: 31rem;
}

.stc-mobile-demo-feed {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 720px;
  padding: 0 0.75rem 1.6rem;
  scroll-snap-type: y proximity;
}

.stc-mobile-demo-card {
  background: var(--stcmd-panel);
  border: 1px solid var(--stcmd-border);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(42, 34, 24, 0.12);
  display: grid;
  gap: 0;
  min-height: calc(100svh - 13.6rem);
  overflow: hidden;
  scroll-snap-align: start;
}

.stc-mobile-demo-poster {
  align-items: center;
  background: #ece6dc;
  border-bottom: 1px solid var(--stcmd-border);
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
}

.stc-mobile-demo-image {
  display: block;
  height: 100%;
  max-height: 50svh;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.stc-mobile-demo-details {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
}

.stc-mobile-demo-details h2 {
  color: var(--stcmd-ink);
  font-family: var(--stcmd-font-display);
  font-size: 1.42rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
  overflow-wrap: anywhere;
}

.stc-mobile-demo-venue {
  color: var(--stcmd-muted);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.25;
  margin: -0.12rem 0 0;
  overflow-wrap: anywhere;
}

.stc-mobile-demo-buybar {
  align-items: center;
  background: rgba(255, 253, 248, 0.94);
  border-top: 1px solid rgba(222, 214, 202, 0.74);
  display: grid;
  gap: 0.62rem;
  margin: 0.1rem -0.9rem -0.9rem;
  padding: 0.78rem 0.9rem 0.9rem;
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.stc-mobile-demo-price {
  color: var(--stcmd-price);
  font-family: var(--stcmd-font-ui);
  font-size: 1.52rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

.stc-mobile-demo-cta {
  align-items: center;
  background: var(--stcmd-accent);
  border: 1px solid var(--stcmd-accent-dark);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(169, 31, 23, 0.24);
  color: #fff;
  display: inline-flex;
  font-family: var(--stcmd-font-ui);
  font-size: 1rem;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0;
  min-height: 50px;
  padding: 0.78rem 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  width: 100%;
}

.stc-mobile-demo-cta:hover,
.stc-mobile-demo-cta:focus-visible {
  background: #c82c22;
  box-shadow: 0 0 0 4px var(--stcmd-focus), 0 10px 22px rgba(169, 31, 23, 0.28);
  color: #fff;
  outline: 0;
}

.stc-mobile-demo-cta:active {
  transform: translateY(1px);
}

.stc-mobile-demo-cta-secondary {
  background: #171717;
  border-color: #171717;
  box-shadow: 0 8px 18px rgba(23, 23, 23, 0.18);
}

.stc-mobile-demo-cta-secondary:hover,
.stc-mobile-demo-cta-secondary:focus-visible {
  background: #2a2927;
}

.stc-mobile-demo-cta-busy {
  display: none;
}

.stc-mobile-demo-cta.stc-is-busy,
.stc-mobile-demo-cta.loading,
.stc-mobile-demo-cta[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.82;
  pointer-events: none;
}

.stc-mobile-demo-cta.stc-is-busy .stc-mobile-demo-cta-label,
.stc-mobile-demo-cta.loading .stc-mobile-demo-cta-label {
  display: none;
}

.stc-mobile-demo-cta.stc-is-busy .stc-mobile-demo-cta-busy,
.stc-mobile-demo-cta.loading .stc-mobile-demo-cta-busy {
  display: inline;
}

.stc-mobile-demo-cta.added {
  background: var(--stcmd-price);
  border-color: #05634d;
  box-shadow: 0 8px 18px rgba(8, 120, 93, 0.22);
}

.stc-mobile-demo-cta.added_to_cart {
  display: none;
}

.stc-mobile-demo .added_to_cart.wc-forward {
  display: none;
}

.stc-mobile-demo-info {
  color: var(--stcmd-muted);
  margin: -0.15rem auto 0;
  max-width: 720px;
  padding: 0 1rem 1.4rem;
}

.stc-mobile-demo-info h2 {
  color: var(--stcmd-ink);
  font-family: var(--stcmd-font-display);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 0.42rem;
}

.stc-mobile-demo-info p {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  margin: 0.35rem 0 0;
}

.stc-mobile-demo-info details {
  border-top: 1px solid rgba(98, 91, 82, 0.24);
  padding: 0.72rem 0;
}

.stc-mobile-demo-info details:last-child {
  border-bottom: 1px solid rgba(98, 91, 82, 0.24);
}

.stc-mobile-demo-info summary {
  color: var(--stcmd-ink);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.3;
}

.stc-mobile-demo-empty {
  background: #fffdf8;
  border: 1px solid #ded6ca;
  border-radius: 8px;
  color: #3d3933;
  font-family: "Plus Jakarta Sans", "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  margin: 1rem auto;
  max-width: 720px;
  padding: 1rem;
}

@media (min-width: 680px) {
  .stc-mobile-demo {
    padding-top: 1.35rem;
  }

  .stc-mobile-demo-hero {
    padding-left: 1.2rem;
  }

  .stc-mobile-demo-feed {
    gap: 1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .stc-mobile-demo-card {
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 620px;
  }

  .stc-mobile-demo-poster {
    border-bottom: 0;
    border-right: 1px solid var(--stcmd-border);
  }

  .stc-mobile-demo-image {
    max-height: none;
  }

  .stc-mobile-demo-details {
    align-content: end;
    padding: 1.05rem;
  }

  .stc-mobile-demo-buybar {
    margin-left: -1.05rem;
    margin-right: -1.05rem;
    margin-bottom: -1.05rem;
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }
}