.ls-front { max-width: 480px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.ls-live-banner { background: #2d2a26; color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }
.ls-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: ls-pulse 1.5s infinite; }
@keyframes ls-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.ls-product-image { width: 100%; }
.ls-product-image img { width: 100%; height: 320px; object-fit: cover; display: block; }

.ls-product-details { padding: 20px; }
.ls-product-name { font-size: 22px; font-weight: 700; color: #2d2a26; margin: 0 0 4px; }
.ls-product-price { font-size: 24px; font-weight: 700; color: #b8860b; margin-bottom: 12px; }
.ls-product-desc { font-size: 15px; color: #8a8580; line-height: 1.5; margin-bottom: 24px; }

.ls-label { display: block; font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }

.ls-variants { margin-bottom: 24px; }
.ls-variant-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-variant-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 2px solid #e8e5e0; background: #fff; color: #2d2a26; cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.15s; }
.ls-variant-btn.active { border-color: #2d2a26; background: #2d2a26; color: #fff; }
.ls-color-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); flex-shrink: 0; }

.ls-quantity { margin-bottom: 28px; }
.ls-qty-control { display: flex; align-items: center; }
.ls-qty-btn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid #e8e5e0; background: #fff; font-size: 22px; font-weight: 600; cursor: pointer; color: #2d2a26; display: flex; align-items: center; justify-content: center; }
.ls-qty-value { width: 56px; text-align: center; font-size: 20px; font-weight: 700; color: #2d2a26; }

.ls-customer-form { margin-bottom: 24px; }
.ls-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 2px solid #e8e5e0; font-size: 16px; font-family: inherit; outline: none; background: #fff; box-sizing: border-box; color: #2d2a26; margin-bottom: 10px; }
.ls-input:focus { border-color: #b8860b; }

.ls-submit-btn { width: 100%; padding: 16px 0; border-radius: 14px; border: none; font-size: 18px; font-weight: 700; cursor: pointer; background: #b8860b; color: #fff; transition: all 0.2s; letter-spacing: 0.3px; }
.ls-submit-btn:disabled { background: #e0ddd8; color: #bbb; cursor: not-allowed; }

.ls-confirm-box { display: flex; flex-direction: column; align-items: center; padding: 60px 32px; text-align: center; }
.ls-confirm-check { width: 80px; height: 80px; border-radius: 50%; background: #e8f5e9; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #2e7d32; margin-bottom: 20px; }
.ls-confirm-box h2 { font-size: 22px; font-weight: 700; color: #2d2a26; margin: 0 0 10px; }
.ls-confirm-box p { color: #8a8580; font-size: 16px; line-height: 1.6; max-width: 300px; }
.ls-back-btn { margin-top: 28px; background: #2d2a26; color: #fff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }

.ls-offline { text-align: center; padding: 80px 32px; }
.ls-offline-icon { font-size: 64px; margin-bottom: 16px; }
.ls-offline h2 { font-size: 22px; color: #2d2a26; font-weight: 700; margin: 0 0 12px; }
.ls-offline p { color: #8a8580; font-size: 16px; line-height: 1.6; }
.ls-social-links { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.ls-social-links span { background: #f0ede6; padding: 8px 16px; border-radius: 20px; font-size: 14px; color: #5a5650; font-weight: 500; }

.ls-previous { padding: 0 20px 40px; }
.ls-prev-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid #eee; margin-bottom: 8px; }
.ls-prev-item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.ls-prev-info { flex: 1; }
.ls-prev-info strong { display: block; font-size: 15px; color: #2d2a26; }
.ls-prev-info span { font-size: 15px; color: #b8860b; font-weight: 600; }