/* Retailer login: live 3D artwork (phone, cards, basket). Pure HTML/CSS, scales with the window, animated. */
.sc { display: none; }
@media (min-width: 900px) {
    .sc {
        display: block; position: absolute; left: calc(50% - 5.5vw); top: calc(50% - 3.5vh); width: 1240px; height: 705px; z-index: 2; pointer-events: none;
        transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 0.82)); transform-origin: 50% 50%;
    }
}
@media (max-width: 1099px) { .sc { display: none; } }
.sc, .sc * { box-sizing: border-box; }
.sc img { display: block; max-width: none; }
.sc-world { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 48% 38%; }
.sc-abs { position: absolute; }
.sc-p3 { transform-style: preserve-3d; }
.sc-shadow { filter: drop-shadow(0 12px 10px rgba(20, 60, 35, .32)); }
.sc-milk { filter: drop-shadow(0 12px 10px rgba(20, 60, 35, .3)); }
.sc-floor { position: absolute; left: 440px; top: 600px; width: 390px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10, 60, 30, .35), transparent 70%); filter: blur(8px); }
.sc-edge { position: absolute; inset: 0; border-radius: 18px; display: block; }
.sc-phone .sc-edge { border-radius: 38px; }

/* phone */
.sc-phone { left: 584px; top: 224px; width: 196px; height: 346px; transform: rotateY(-22deg) rotateX(4deg) rotateZ(4deg); }
.sc-frame { position: absolute; inset: 0; border-radius: 38px; padding: 4px; background: linear-gradient(135deg, #f1f4f6 0%, #9aa3a9 22%, #dfe4e7 48%, #7d868c 74%, #cfd5d9 100%); box-shadow: 0 40px 60px -10px rgba(10, 40, 25, .45), 0 14px 24px rgba(10, 40, 25, .25); }
.sc-bezel { width: 100%; height: 100%; border-radius: 34px; background: #06090b; padding: 5px; }
.sc-screen { width: 100%; height: 100%; border-radius: 29px; background: #ece5dc; overflow: hidden; position: relative; }
.sc-island { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 56px; height: 16px; border-radius: 12px; background: #000; z-index: 5; }
.sc-glare { position: absolute; inset: 0; border-radius: 38px; pointer-events: none; z-index: 8; overflow: hidden; }
.sc-glare::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .34) 48%, transparent 58%); animation: sc-sweep 7s ease-in-out infinite; }
.sc-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #8d969c, #d5dade); display: block; }
.sc-head { display: flex; align-items: center; gap: 7px; padding: 28px 11px 8px; background: linear-gradient(#146b3c, #0f5a31); color: #fff; }
.sc-av { width: 24px; height: 24px; border-radius: 8px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.sc-av img { width: 17px; height: 17px; }
.sc-head b { display: block; font-size: 11px; line-height: 1.1; }
.sc-head small { font-size: 8.5px; opacity: .85; }
.sc-chat { position: relative; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; height: calc(100% - 60px); background: #ece5dc; }
.sc-bub { background: #fff; border-radius: 10px 10px 10px 3px; padding: 7px 9px; font-size: 9.4px; line-height: 1.36; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); color: #1f2d26; }
.sc-bub.out { align-self: flex-end; background: #d9fdd3; border-radius: 10px 10px 3px 10px; }
.sc-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sc-prod { background: #fff; border-radius: 10px; padding: 4px; font-size: 8px; line-height: 1.25; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); color: #1f2d26; }
.sc-prod img { width: 100%; height: 46px; object-fit: cover; border-radius: 7px; margin-bottom: 3px; }
.sc-prod em { display: block; font-style: normal; color: #5b6b62; }
.sc-cat { text-align: center; background: linear-gradient(#17763f, #0f5a31); color: #fff; border-radius: 9px; padding: 7px; font-size: 9.4px; font-weight: 700; box-shadow: 0 3px 6px rgba(15, 90, 49, .35); }
.sc-cat.m5 { animation: sc-m5 12s ease infinite, sc-pulse 2.4s ease-in-out 8s infinite; }
.sc-input { margin-top: auto; background: #fff; border-radius: 14px; padding: 5px 8px; font-size: 8px; color: #9aa; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.sc-typing { position: absolute; left: 8px; top: 9px; display: flex; gap: 4px; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); opacity: 0; animation: sc-type 12s ease infinite; }
.sc-typing i { width: 5px; height: 5px; border-radius: 50%; background: #9aa5a0; animation: sc-dot 1s ease-in-out infinite; display: block; }
.sc-typing i:nth-child(2) { animation-delay: .15s; }
.sc-typing i:nth-child(3) { animation-delay: .3s; }

/* badge */
.sc-wa { width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #6af0a2, #25d366 55%, #14a84a); color: #fff; display: grid; place-items: center; box-shadow: 0 18px 28px rgba(20, 150, 70, .45), inset 0 -6px 10px rgba(0, 80, 30, .25), inset 0 4px 8px rgba(255, 255, 255, .4); animation: sc-fl 5s ease-in-out infinite; }
.sc-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); animation: sc-ring 2.6s ease-out infinite; }
.sc-wa svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0, 60, 20, .35)); }

/* glass cards */
.sc-card { background: transparent; }
.sc-in { position: relative; z-index: 2; border-radius: 18px; padding: 13px 15px; background: linear-gradient(160deg, #fff, #f4faf6); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 20px rgba(15, 60, 35, .12); height: 100%; overflow: hidden; }
.sc-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.sc-card h4 { margin: 0 0 3px; font-size: 12px; font-weight: 800; color: #0f2a1a; }
.sc-card small { display: block; font-size: 9px; color: #5b6b62; }
.sc-prodcard { left: 408px; top: 100px; width: 244px; transform: rotateY(24deg) rotateX(9deg) rotateZ(-6deg); }
.sc-row { display: flex; gap: 9px; margin-top: 8px; }
.sc-it { flex: 1; text-align: center; font-size: 9px; line-height: 1.25; color: #1f2d26; }
.sc-it img { width: 100%; height: 52px; object-fit: cover; border-radius: 12px; margin-bottom: 4px; box-shadow: 0 6px 10px rgba(0, 0, 0, .18); }
.sc-link { margin-top: 8px; font-size: 9px; color: #126037; font-weight: 700; }
.sc-sales { left: 674px; top: 116px; width: 132px; transform: rotateY(-26deg) rotateX(9deg) rotateZ(3deg); }
.sc-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin: 8px 0 6px; }
.sc-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #44c46e, #1b8a46); box-shadow: 0 3px 5px rgba(27, 138, 70, .35); transform-origin: bottom; display: block; animation: sc-grow 4.2s ease-in-out infinite; }
.sc-bars i:nth-child(2) { animation-delay: .15s; } .sc-bars i:nth-child(3) { animation-delay: .3s; } .sc-bars i:nth-child(4) { animation-delay: .45s; } .sc-bars i:nth-child(5) { animation-delay: .6s; } .sc-bars i:nth-child(6) { animation-delay: .75s; }
.sc-order { left: 386px; top: 288px; width: 188px; transform: rotateY(26deg) rotateX(9deg) rotateZ(-5deg); }
.sc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sc-w { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#34df78, #1fb85a); color: #fff; display: grid; place-items: center; box-shadow: 0 5px 8px rgba(31, 184, 90, .45); }
.sc-w svg { width: 17px; height: 17px; }
.sc-order b { display: block; font-size: 11.5px; }
.sc-pill { position: relative; overflow: hidden; display: block; text-align: center; background: linear-gradient(#17763f, #0f5a31); color: #fff; border-radius: 10px; padding: 8px; font-size: 9.5px; font-weight: 700; margin-top: 6px; box-shadow: 0 6px 10px rgba(15, 90, 49, .35); }
.sc-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: sc-shine 3.6s ease-in-out infinite; }

/* motion */
.sc-fl { animation: sc-fl 6s ease-in-out infinite; }
.sc-fl.f2 { animation-delay: -1.5s; } .sc-fl.f3 { animation-delay: -3s; } .sc-fl.f4 { animation-delay: -4.2s; }
.sc-bob { animation: sc-bob 3.8s ease-in-out infinite; }
.sc-bob.b2 { animation-delay: -1.2s; } .sc-bob.b3 { animation-delay: -2.4s; }
@keyframes sc-fl { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
@keyframes sc-grow { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes sc-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sc-sweep { 0%, 15% { transform: translateX(-30%); } 55%, 100% { transform: translateX(30%); } }
@keyframes sc-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes sc-pulse { 0%, 100% { box-shadow: 0 3px 6px rgba(15, 90, 49, .35); } 50% { box-shadow: 0 0 0 5px rgba(37, 211, 102, .28), 0 3px 6px rgba(15, 90, 49, .35); } }
@keyframes sc-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes sc-type { 0%, 3% { opacity: 0; } 5%, 8% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes sc-m1 { 0%, 8% { opacity: 0; transform: translateY(12px) scale(.97); } 13%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.sc-chat .m1 { animation: sc-m1 12s ease infinite; }
@keyframes sc-m2 { 0%, 21% { opacity: 0; transform: translateY(12px) scale(.97); } 26%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.sc-chat .m2 { animation: sc-m2 12s ease infinite; }
@keyframes sc-m3 { 0%, 37% { opacity: 0; transform: translateY(12px) scale(.97); } 42%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.sc-chat .m3 { animation: sc-m3 12s ease infinite; }
@keyframes sc-m4 { 0%, 49% { opacity: 0; transform: translateY(12px) scale(.97); } 54%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.sc-chat .m4 { animation: sc-m4 12s ease infinite; }
@keyframes sc-m5 { 0%, 61% { opacity: 0; transform: translateY(12px) scale(.97); } 66%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.sc-chat .m5 { animation: sc-m5 12s ease infinite; }

@media (prefers-reduced-motion: reduce) {
    .sc *, .sc *::after { animation: none !important; }
    .sc-chat .sc-bub, .sc-chat .sc-prods, .sc-chat .sc-cat { opacity: 1 !important; transform: none !important; }
    .sc-typing { display: none; }
}