/* LOCARTA LIVE stage: the LOCARTA version of the live-selling template.
   Logo, LIVE badge, event ribbon, scrolling promo ticker, arched stage, podium with products and a live-bid card.
   Every size is relative to the stage (container query units), so it fits a phone, the desktop viewer or a 720x1280 video. */
.lcl {
  --lcl-cream: #F3EEDF; --lcl-beige: #E8D2A3; --lcl-gold: #D49B17; --lcl-champ: #D3AC68; --lcl-brown: #6C4A08; --lcl-deep: #513407;
  position: absolute; inset: 0; overflow: hidden; container-type: size; isolation: isolate;
  background:
    radial-gradient(70% 45% at 50% 40%, rgba(255, 249, 232, .95) 0%, rgba(255, 249, 232, 0) 70%),
    linear-gradient(180deg, #F6E3B8 0%, #EED3A0 38%, #E2BC7E 70%, #C9944D 100%);
  font-family: Lexend, "Archivo", system-ui, sans-serif; color: var(--lcl-deep);
}
/* soft light rays and a faint woven pattern */
.lcl-rays { position: absolute; inset: -20%; z-index: -1; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 252, 240, .55) 0deg 6deg, rgba(255, 252, 240, 0) 6deg 14deg);
  -webkit-mask: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 75%); mask: radial-gradient(60% 55% at 50% 38%, #000 0%, transparent 75%); }
.lcl::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image: repeating-linear-gradient(45deg, rgba(108, 74, 8, .5) 0 1.2cqw, transparent 1.2cqw 2.4cqw), repeating-linear-gradient(-45deg, rgba(108, 74, 8, .5) 0 1.2cqw, transparent 1.2cqw 2.4cqw);
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 100%); mask: linear-gradient(180deg, transparent 30%, #000 100%); }

.lcl-top { position: absolute; top: 2.6cqh; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; }
.lcl-top img { height: 3.1cqh; width: auto; }
.lcl-top .lcl-mark { height: 3.6cqh; }

/* the big badge, like the event number box of the template */
.lcl-badge { position: absolute; top: 7.4cqh; left: 50%; transform: translateX(-50%); padding: 1.2cqh 7cqw 1.4cqh; border-radius: 3.4cqw;
  background: linear-gradient(180deg, #7A520D 0%, var(--lcl-deep) 100%); border: .55cqw solid var(--lcl-gold);
  box-shadow: 0 0 0 .5cqw rgba(255, 246, 220, .85), 0 1.6cqh 3cqh -1cqh rgba(81, 52, 7, .65); }
.lcl-live { display: flex; align-items: center; gap: 2.4cqw; font-weight: 800; font-size: 9.6cqh; line-height: .95; letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFF4D2 0%, #F4C860 45%, #D49B17 70%, #FFE7A3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lcl-live i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #E2493B; box-shadow: 0 0 0 1.1cqw rgba(226, 73, 59, .28); animation: lclPulse 1.6s ease-in-out infinite; }
@keyframes lclPulse { 50% { box-shadow: 0 0 0 2.2cqw rgba(226, 73, 59, 0); } }

/* ribbon under the badge */
.lcl-ribbon { position: absolute; top: 19.6cqh; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; padding: .9cqh 6cqw;
  background: linear-gradient(180deg, #E8A92A, var(--lcl-gold)); color: var(--lcl-deep); font-weight: 800; font-size: 2.5cqh; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); box-shadow: 0 .6cqh 1.2cqh -.6cqh rgba(81, 52, 7, .6); }

/* scrolling promo ticker */
.lcl-ticker { position: absolute; top: 25.6cqh; left: 0; right: 0; height: 3.9cqh; overflow: hidden; display: flex; align-items: center;
  background: var(--lcl-deep); border-top: .35cqh solid var(--lcl-gold); border-bottom: .35cqh solid var(--lcl-gold); }
.lcl-track { display: flex; flex: none; white-space: nowrap; animation: lclTick 8s linear infinite; }
.lcl-track span { flex: none; padding-right: 4cqw; font-weight: 700; font-size: 1.85cqh; letter-spacing: .08em; text-transform: uppercase; color: #F7D58A; }
@keyframes lclTick { to { transform: translateX(-50%); } }

/* pleated backdrop behind the arch */
.lcl-pleats { position: absolute; top: 29.5cqh; bottom: 12cqh; left: 0; right: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 250, 236, .55) 0 1.4cqw, rgba(176, 124, 54, .2) 1.4cqw 2.1cqw, rgba(255, 250, 236, .3) 2.1cqw 3cqw);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); }
/* the arched stage for the presenter (in the app, the creator's video plays here) */
.lcl-arch { position: absolute; top: 31.5cqh; left: 50%; width: 76cqw; height: 52cqh; transform: translateX(-50%);
  border-radius: 38cqw 38cqw 2cqw 2cqw; overflow: hidden; background: linear-gradient(180deg, #FFF9EC 0%, #F3E2BF 100%);
  border: .9cqw solid #FFF7E4; box-shadow: 0 0 0 .7cqw var(--lcl-champ), 0 0 0 1.5cqw rgba(255, 247, 228, .7), 0 2cqh 4cqh -2cqh rgba(81, 52, 7, .55); }
.lcl-arch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2cqh; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--lcl-gold) 0 3cqw, var(--lcl-deep) 3cqw 4cqw, var(--lcl-champ) 4cqw 7cqw, var(--lcl-deep) 7cqw 8cqw); opacity: .9; }
.lcl-arch video, .lcl-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcl-arch-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(108, 74, 8, .45); font-weight: 700; font-size: 2cqh; letter-spacing: .12em; text-transform: uppercase; }

/* podium with products */
.lcl-podium { position: absolute; left: 50%; bottom: -1cqh; width: 92cqw; height: 15cqh; transform: translateX(-50%); }
.lcl-podium::before, .lcl-podium::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; }
.lcl-podium::before { bottom: 0; width: 100%; height: 11cqh; background: linear-gradient(180deg, #FFF6E2 0%, #E8D2A3 55%, #C99A55 100%); box-shadow: 0 -.4cqh 0 .25cqh #FFF9EE inset, 0 1cqh 2cqh rgba(81, 52, 7, .35); }
.lcl-podium::after { bottom: 5.5cqh; width: 76%; height: 6.5cqh; background: linear-gradient(180deg, #FFFBF0 0%, #F0DDB4 100%); box-shadow: 0 .5cqh 1cqh rgba(81, 52, 7, .25); }
.lcl-prods { position: absolute; left: 50%; bottom: 8.6cqh; z-index: 2; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 2.6cqw; }
.lcl-prods img { width: 19cqw; height: 19cqw; object-fit: cover; border-radius: 2.4cqw; border: .7cqw solid #FFF9EE; box-shadow: 0 1cqh 1.8cqh -.6cqh rgba(81, 52, 7, .55); background: #fff; }
.lcl-prods img:nth-child(2) { width: 23cqw; height: 23cqw; }

/* live-bid card on the side */
.lcl-deal { position: absolute; right: 2.6cqw; top: 46cqh; z-index: 3; width: 25cqw; padding: 1.1cqh 1.6cqw 1.3cqh; border-radius: 2.6cqw; text-align: center;
  background: linear-gradient(180deg, #FFFBF1 0%, #F3E4C3 100%); border: .5cqw solid var(--lcl-gold); box-shadow: 0 1.2cqh 2.4cqh -1cqh rgba(81, 52, 7, .6);
  display: grid; gap: .5cqh; color: var(--lcl-deep); text-decoration: none; font: inherit; cursor: pointer; }
.lcl-deal small { display: block; padding: .35cqh 0; border-radius: 1.4cqw; background: var(--lcl-deep); color: #F7D58A; font-weight: 800; font-size: 1.25cqh; letter-spacing: .1em; }
.lcl-deal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1.6cqw; }
.lcl-deal b { font-size: 1.35cqh; line-height: 1.2; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcl-deal em { font-style: normal; font-weight: 800; font-size: 2.1cqh; color: var(--lcl-brown); }
.lcl-deal span { font-size: 1.1cqh; color: var(--lcl-brown); }
.lcl-deal i { font-style: normal; margin-top: .3cqh; padding: .6cqh 0; border-radius: 999px; background: var(--lcl-gold); color: var(--lcl-deep); font-weight: 800; font-size: 1.3cqh; }

@media (prefers-reduced-motion: reduce) { .lcl-track, .lcl-live i { animation: none; } }

/* inside the app's live viewer: the viewer's own header covers the top, so the logo steps aside and the stage moves down a little */
.rl-slide .lcl .lcl-top { display: none; }
.rl-slide .lcl .lcl-badge { top: 12.4cqh; padding: .8cqh 5.4cqw 1cqh; }
.rl-slide .lcl .lcl-live { font-size: 6.2cqh; }
.rl-slide .lcl .lcl-ribbon { top: 20.6cqh; font-size: 1.9cqh; }
.rl-slide .lcl .lcl-ticker { top: 25.4cqh; }
.rl-slide .lcl .lcl-arch { top: 31cqh; height: 41cqh; width: 62cqw; left: 47%; border-radius: 31cqw 31cqw 2cqw 2cqw; }
.rl-slide .lcl .lcl-deal { top: 37cqh; left: 2.4cqw; right: auto; width: 25cqw; }
.rl-slide .lcl .lcl-podium, .rl-slide .lcl .lcl-prods { display: none; }
.rl-slide .lcl .lcl-pleats { top: 29cqh; bottom: 24cqh; }
.rl-slide.is-lcl .rl-shade { background: linear-gradient(180deg, rgba(42, 21, 12, .45) 0%, rgba(42, 21, 12, 0) 9%, rgba(42, 21, 12, 0) 68%, rgba(42, 21, 12, .82) 100%); }
.rl-slide.is-lcl .rl-dock .rl-dock-item.is-lot { display: none; }
.lcl-deal .pic { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 1.6cqw; overflow: hidden; background: #E8D2A3; }
.lcl-deal .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }