/* Home promo: the seller's message banner and picture box. Shared by the app and the Manage / admin previews.
   Colours come from the page's --accent / --accent2 / --bg (the seller's logo colours), so it always matches. */
.promo{position:relative;display:block;border-radius:18px;isolation:isolate;overflow:hidden;color:#fff;text-align:center;flex-shrink:0}
.promo-body{position:relative;z-index:2;display:block;padding:18px 20px}
.promo-title{display:block;--promo-min:15px;--promo-max:34px;font-size:clamp(20px,5.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.12;overflow-wrap:anywhere}
.promo-text{display:block;margin-top:6px;font-size:15px;line-height:1.4;opacity:.92;overflow-wrap:anywhere;max-width:46em;margin-left:auto;margin-right:auto}

/* Neon: a light chasing round the edge in both logo colours, glowing headline */
.promo.neon{padding:2px;box-shadow:0 0 26px -8px var(--accent),0 0 44px -16px var(--accent2)}
.promo.neon::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;z-index:0;
  background:conic-gradient(var(--accent),var(--accent2) 25%,transparent 40%,transparent 50%,var(--accent) 60%,var(--accent2) 75%,transparent 90%,var(--accent));
  animation:promo-spin 5s linear infinite}
.promo.neon .promo-body{border-radius:16px;background:radial-gradient(130% 160% at 0% 0%,color-mix(in srgb,var(--accent) 26%,var(--bg)),color-mix(in srgb,var(--bg) 92%,#000) 75%)}
.promo.neon .promo-title{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 55%,transparent))}
.promo.neon .promo-title .pt{background:linear-gradient(90deg,#fff 0%,var(--accent) 30%,var(--accent2) 60%,#fff 90%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:promo-slide 6s linear infinite}

/* Shine: bold moving gradient with a light sweeping across */
.promo.shine{background:linear-gradient(115deg,var(--accent),var(--accent2),var(--accent));background-size:220% 220%;animation:promo-slide 8s ease-in-out infinite alternate;
  box-shadow:0 12px 34px -14px var(--accent)}
.promo.shine::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%);
  transform:translateX(-130%);animation:promo-sweep 3.8s ease-in-out infinite}
.promo.shine .promo-body{background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12));text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* Calm: same colours, nothing moving */
.promo.calm{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 62%,var(--bg)),color-mix(in srgb,var(--accent2) 62%,var(--bg)))}
.promo.calm .promo-body{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}

/* Picture in its own square box */
.promo-pic{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 10px 30px -14px var(--accent)}
.promo-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

@keyframes promo-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes promo-slide{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes promo-sweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.promo,.promo::before,.promo::after,.promo .promo-title .pt{animation:none!important}}

/* TV sits feet away, not inches: bigger bounds, and the subtitle scales with them. */
.tv .promo-title{--promo-min:22px;--promo-max:38px}
.tv .promo-text{font-size:18px;margin-top:8px}
.tv .promo-body{padding:20px 28px}