/* Base styles — Phase 2. Full premium dark-luxury design system arrives in Phase 5. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0e0e12; color: #eaeaea; line-height: 1.6; position: relative; }
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 700px 500px at 15% -5%, rgba(139,92,246,.16), transparent 60%),
        radial-gradient(ellipse 600px 500px at 90% 15%, rgba(0,217,255,.10), transparent 60%),
        radial-gradient(ellipse 700px 600px at 50% 100%, rgba(139,92,246,.10), transparent 60%),
        radial-gradient(ellipse 500px 500px at 60% 40%, rgba(196,181,253,.07), transparent 65%);
    animation: aurora-drift 26s ease-in-out infinite alternate, aurora-breathe 9s ease-in-out infinite;
    background-size: 130% 130%;
}
@keyframes aurora-drift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 40% 60%; }
    100% { background-position: 15% 10%, 85% 15%, 45% 90%, 55% 45%; }
}
@keyframes aurora-breathe {
    0%, 100% { opacity: .85; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
a { color: #8b5cf6; text-decoration: none; }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { background: #17171d; border: 1px solid #26262e; border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 24px; margin-bottom: 24px; }
.auth-card label { display: block; font-size: 13px; margin: 16px 0 6px; color: #a1a1aa; }
.auth-card input { width: 100%; padding: 12px 14px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px; color: #fff; font-size: 15px; }
.auth-card input:focus { outline: none; border-color: #8b5cf6; }
.auth-card button { width: 100%; margin-top: 24px; padding: 13px; background: #8b5cf6; border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; font-size: 15px; }
.auth-card button:hover { background: #7c3aed; }
.auth-card .password-toggle-btn {
    position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: auto !important; height: auto !important; margin-top: 0 !important; padding: 4px !important;
    background: none !important; border: none !important; color: #a1a1aa; font-weight: normal; line-height: 0;
}
.auth-card .password-toggle-btn:hover { background: none !important; color: #8b5cf6; }
.auth-card .password-field { position: relative; }
.auth-card .password-field input { padding-right: 44px !important; }
.auth-card p { margin-top: 16px; font-size: 14px; color: #a1a1aa; }

.auth-social-buttons { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 4px; }
.btn-social {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
    text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-social:hover { transform: translateY(-1px); }
.btn-social-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.btn-social-google:hover { background: #f8f8f8; }
.btn-social-facebook { background: #1877f2; color: #fff; border: 1px solid #1877f2; }
.btn-social-facebook:hover { background: #166fe0; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #71717a; font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #26262e; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #86efac; }

.dashboard-page { max-width: 900px; margin: 60px auto; padding: 0 20px; }
.dashboard-stats { display: flex; gap: 16px; margin: 24px 0; }
.stat-card { background: #17171d; border: 1px solid #26262e; border-radius: 12px; padding: 24px; flex: 1; text-align: center; }
.stat-number { display: block; font-size: 32px; font-weight: 700; color: #8b5cf6; }
.stat-label { font-size: 13px; color: #a1a1aa; }
.dashboard-page form button { padding: 10px 20px; background: #26262e; border: none; border-radius: 8px; color: #fff; cursor: pointer; margin-top: 20px; }

.phase1-status { max-width: 700px; margin: 100px auto; padding: 0 20px; text-align: center; }
.phase1-status h1 { font-size: 36px; margin-bottom: 12px; }

/* ============================================================
   PHASE 4 — STOREFRONT STYLES (functional; premium pass in Phase 5)
   ============================================================ */

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(14,14,18,.9); backdrop-filter: blur(8px); border-bottom: 1px solid #1e1e26; }
.site-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.site-logo { font-weight: 700; font-size: 18px; color: #fff; }
.site-nav { display: flex; gap: 24px; align-items: center; }
.site-nav a { font-size: 14px; color: #d4d4d8; position: relative; }
.site-nav a::after {
    content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #00d9ff); transition: width .18s ease;
}
.site-nav a:not(.nav-cta):hover::after { width: 100%; }
.site-nav a.nav-cta { background: #8b5cf6; color: #fff; padding: 8px 16px; border-radius: 8px; }
.cart-count-badge { background: #8b5cf6; color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

main { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }

/* Original simple footer rules removed — superseded by the redesigned footer further below */
.footer-nav { display: flex; gap: 16px; }

.hero { text-align: center; padding: 40px 20px; }
.hero h1 { font-size: 42px; margin-bottom: 12px; background: linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-tagline { color: #a1a1aa; font-size: 17px; margin-bottom: 28px; }
.hero-search { display: flex; max-width: 480px; margin: 0 auto; gap: 8px; }
.hero-search input { flex: 1; padding: 14px 18px; background: #131318; border: 1px solid #26262e; border-radius: 999px; color: #fff; }
.hero-search button { padding: 14px 26px; background: #8b5cf6; border: none; border-radius: 999px; color: #fff; font-weight: 600; cursor: pointer; }

/* Featured Categories placed beside the Hero title, right under the slider */
.hero-row { display: flex; align-items: center; gap: 32px; margin: 0; }
.hero-row .hero { flex: 1; padding: 20px; text-align: left; }
.hero-row .hero-search { margin: 0; }
.hero-categories { flex: 0 0 240px; }
.hero-categories .section-title { font-size: 18px; margin-bottom: 14px; }
.hero-category-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hero-category-link {
    display: flex; align-items: center; gap: 10px; background: #131318; border: 1px solid #24242c;
    border-radius: 10px; padding: 14px 16px; color: #d4d4d8; transition: transform .2s ease, border-color .2s ease;
}
.hero-category-link:hover { transform: translateY(-2px); border-color: #8b5cf6; }
.hero-category-link .category-icon { margin-bottom: 0; font-size: 20px; }
.hero-category-link .category-name { font-size: 14px; }

@media (max-width: 800px) {
    .hero-row { flex-direction: column; align-items: stretch; gap: 20px; }
    .hero-row .hero { text-align: center; padding: 24px 4px; }
    .hero-row .hero-search { margin: 0 auto; }
    .hero-categories { flex: none; }
}

.section { margin: 36px 0; }
.section-title { font-size: 22px; margin-bottom: 20px; color: #fff; }
.section.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.section.reveal.is-visible { opacity: 1; transform: none; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.category-card { background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 22px 12px; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.category-card:hover { transform: translateY(-3px); border-color: #8b5cf6; }
.category-icon { display: block; font-size: 26px; margin-bottom: 8px; }
.category-name { font-size: 13px; color: #d4d4d8; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.product-card { background: #131318; border: 1px solid #24242c; border-radius: 14px; overflow: hidden; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.product-card-thumb { display: block; position: relative; aspect-ratio: 1/1; background: #1c1c24; }
.product-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; color: transparent; font-size: 0; }
.product-card-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#1c1c24,#26262e); }
.badge-sale, .badge-bestseller { position: absolute; top: 10px; left: 10px; background: #ef4444; color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.badge-bestseller { left: auto; right: 10px; background: #f59e0b; }
.wishlist-btn { flex-shrink: 0; width: 28px; height: 28px; background: #1c1c24; border: 1px solid #26262e; border-radius: 999px; color: #fff; font-size: 14px; cursor: pointer; }
.wishlist-btn.active { color: #ef4444; border-color: #ef4444; }
.product-card-body { padding: 14px; }
.product-card-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.product-card-title { display: block; font-size: 14px; color: #fff; margin-bottom: 0; font-weight: 500; }
.product-card-rating { font-size: 12px; color: #fbbf24; margin-bottom: 8px; }
.product-card-price { margin-bottom: 12px; }
.price-old { color: #71717a; text-decoration: line-through; font-size: 13px; margin-right: 8px; }
.price-now { color: #fff; font-weight: 700; font-size: 16px; }
.btn-add-to-cart { width: 100%; padding: 9px; background: #26262e; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .2s ease; }
.btn-add-to-cart:hover { background: #8b5cf6; }
.btn-large { padding: 14px; font-size: 15px; }

/* Shop page */
.shop-page h1 { font-size: 26px; margin-bottom: 24px; }
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.shop-filters h3 { font-size: 13px; text-transform: uppercase; color: #a1a1aa; margin: 20px 0 10px; }
.filter-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.filter-list a { padding: 8px 10px; border-radius: 6px; font-size: 14px; color: #d4d4d8; }
.filter-list a.active, .filter-list a:hover { background: #1c1c24; color: #fff; }
.price-filter-form { display: flex; gap: 8px; }
.price-filter-form input { width: 70px; padding: 8px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 6px; color: #fff; }
.price-filter-form button { padding: 8px 12px; background: #26262e; border: none; border-radius: 6px; color: #fff; cursor: pointer; }
.shop-toolbar { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.shop-search-form input { padding: 10px 14px; background: #131318; border: 1px solid #26262e; border-radius: 8px; color: #fff; width: 240px; }
#sort-select { padding: 10px 14px; background: #131318; border: 1px solid #26262e; border-radius: 8px; color: #fff; }

/* Product detail page */
.breadcrumb { font-size: 13px; color: #71717a; margin: 24px 0; }
.breadcrumb a { color: #a1a1aa; }
.product-detail-grid { display: grid; grid-template-columns: 1fr 420px; gap: 40px; margin-bottom: 48px; }
.product-main-image { width: 100%; border-radius: 16px; aspect-ratio: 1; object-fit: contain; background: #1c1c24; }
.product-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.product-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid #26262e; }
.product-video { margin-top: 16px; aspect-ratio: 16/9; }
.product-video iframe { width: 100%; height: 100%; border-radius: 12px; }
.product-buy-box h1 { font-size: 26px; margin-bottom: 10px; }
.product-rating { color: #fbbf24; font-size: 14px; margin-bottom: 14px; }
.product-price-block { margin-bottom: 10px; }
.product-price-block .price-now { font-size: 28px; }
.countdown { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; padding: 8px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.product-short-desc { color: #a1a1aa; margin-bottom: 16px; line-height: 1.7; }
.product-license { font-size: 13px; color: #a1a1aa; margin-bottom: 20px; }
.buy-box-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.buy-box-actions .btn-add-to-cart { flex: 2; }
.wishlist-btn-large { position: static; width: auto; flex: 1; background: #1c1c24; border-radius: 8px; font-size: 13px; padding: 0 12px; }
.trust-badges { display: flex; gap: 16px; font-size: 12px; color: #a1a1aa; margin-bottom: 16px; flex-wrap: wrap; }
.share-buttons { display: flex; gap: 10px; font-size: 13px; color: #71717a; }

.product-tabs { max-width: 100%; }
.tab-section { margin-bottom: 40px; }
.tab-section h2 { font-size: 19px; margin-bottom: 14px; }
.product-description { color: #d4d4d8; line-height: 1.8; }
.feature-list { padding-left: 20px; color: #d4d4d8; line-height: 2; }
.faq-item { background: #131318; border: 1px solid #24242c; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.faq-item summary { cursor: pointer; font-weight: 500; color: #fff; }
.faq-item p { margin-top: 8px; color: #a1a1aa; font-size: 14px; }
.review-card { border-bottom: 1px solid #1e1e26; padding: 16px 0; }
.review-header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.verified-badge { font-size: 11px; background: rgba(34,197,94,.15); color: #86efac; padding: 2px 8px; border-radius: 999px; }
.review-rating { color: #fbbf24; font-size: 13px; }
.review-title { font-weight: 600; margin-bottom: 4px; }
.review-comment { color: #a1a1aa; font-size: 14px; }
.review-form { margin-top: 24px; max-width: 480px; }
.review-form label { display: block; font-size: 13px; margin: 12px 0 6px; color: #a1a1aa; }
.review-form input, .review-form select, .review-form textarea { width: 100%; padding: 10px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px; color: #fff; }
.review-form button { margin-top: 14px; padding: 10px 20px; background: #8b5cf6; border: none; border-radius: 8px; color: #fff; cursor: pointer; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.testimonial-card { background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 20px; }
.testimonial-rating { color: #fbbf24; margin-bottom: 10px; }
.testimonial-comment { color: #d4d4d8; margin-bottom: 12px; font-size: 14px; }
.testimonial-author { color: #71717a; font-size: 12px; }

.section-newsletter { text-align: center; background: #131318; border-radius: 16px; padding: 48px 24px; }
.newsletter-form { display: flex; max-width: 400px; margin: 20px auto 0; gap: 8px; }
.newsletter-form input { flex: 1; padding: 12px 16px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 999px; color: #fff; }
.newsletter-form button { padding: 12px 22px; background: #8b5cf6; border: none; border-radius: 999px; color: #fff; cursor: pointer; }

/* Cart & Checkout */
.cart-page h1, .checkout-page h1 { font-size: 26px; margin: 32px 0 24px; }
.cart-item { display: flex; align-items: center; gap: 16px; background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart-item-info a { color: #fff; font-size: 14px; }
.cart-item-price { font-size: 13px; color: #a1a1aa; }
.cart-remove-btn { background: none; border: none; color: #f87171; cursor: pointer; font-size: 13px; }
.cart-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 20px; }

.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
.checkout-order-summary, .checkout-payment { background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 24px; }
.checkout-line-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #d4d4d8; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #1e1e26; }
.checkout-line-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #0e0e12; }
.checkout-line-info { flex: 1; min-width: 0; }
.checkout-line-title { display: block; font-size: 14px; color: #fff; margin-bottom: 6px; }
.qty-selector-compact { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qty-selector-compact .qty-stepper { display: flex; align-items: center; gap: 0; border: 1px solid #2c2c36; border-radius: 8px; overflow: hidden; }
.qty-selector-compact .qty-btn { width: 26px; height: 26px; background: #17171d; border: none; color: #d4d4d8; cursor: pointer; font-size: 14px; }
.qty-selector-compact .qty-btn:hover { background: #26262e; color: #8b5cf6; }
.qty-selector-compact .qty-input { width: 32px; text-align: center; background: #0e0e12; border: none; border-left: 1px solid #2c2c36; border-right: 1px solid #2c2c36; color: #fff; font-size: 13px; padding: 5px 0; }
.qty-selector-compact .checkout-line-total { font-size: 13px; color: #a1a1aa; font-weight: 600; white-space: nowrap; }
.checkout-remove-item { background: none; border: none; color: #71717a; cursor: pointer; font-size: 15px; flex-shrink: 0; padding: 4px; }
.checkout-remove-item:hover { color: #f87171; }
.checkout-coupon { margin: 16px 0; }
.checkout-coupon form { display: flex; gap: 8px; }
.checkout-coupon input { flex: 1; padding: 9px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px; color: #fff; }
.checkout-coupon button { padding: 9px 14px; background: #26262e; border: none; border-radius: 8px; color: #fff; cursor: pointer; }
.applied-coupon { font-size: 13px; color: #86efac; display: flex; justify-content: space-between; align-items: center; }
.applied-coupon button { background: none; border: none; color: #f87171; cursor: pointer; }
.checkout-totals { border-top: 1px solid #1e1e26; padding-top: 14px; }
.checkout-totals div { display: flex; justify-content: space-between; font-size: 14px; color: #a1a1aa; margin-bottom: 6px; }
.checkout-total { font-size: 17px !important; color: #fff !important; font-weight: 700; margin-top: 8px !important; }
.payment-methods { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 24px; }
.payment-methods label { display: flex; align-items: center; gap: 10px; padding: 12px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px; font-size: 14px; }
.payment-methods em { color: #71717a; font-size: 12px; margin-left: auto; }

/* Premium clickable payment method cards */
.payment-method-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-method-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 92px; padding: 14px 8px; background: #0e0e12; border: 1.5px solid #2c2c36; border-radius: 12px;
    cursor: pointer; overflow: hidden; transition: transform .15s ease, border-color .15s ease;
}
.payment-method-card:hover { transform: translateY(-2px); border-color: #4c3a80; }
.payment-method-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.payment-method-card-glow {
    position: absolute; inset: 0; opacity: 0; border-radius: 14px; pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(139,92,246,.35), transparent 70%);
    transition: opacity .25s ease;
}
.payment-method-card-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.payment-method-card-emoji { display: flex; align-items: center; justify-content: center; font-size: 19px; background: transparent; }
.payment-method-card-label { font-size: 11.5px; color: #d4d4d8; text-align: center; line-height: 1.25; }
.payment-method-card-check {
    position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
    background: #8b5cf6; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease;
}
.payment-method-card.selected {
    border-color: #8b5cf6; box-shadow: 0 0 0 1px #8b5cf6, 0 8px 24px rgba(139,92,246,.25);
}
.payment-method-card.selected .payment-method-card-glow { opacity: 1; }
.payment-method-card.selected .payment-method-card-check { opacity: 1; transform: scale(1); }
.payment-method-card.selected .payment-method-card-label { color: #fff; font-weight: 600; }

/* Contact info grid */
.contact-method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }
.contact-method-grid label { display: block; font-size: 12.5px; color: #a1a1aa; margin-bottom: 5px; }
.checkout-success { max-width: 600px; margin: 60px auto; text-align: center; }
.checkout-success h1 { font-size: 26px; margin-bottom: 16px; }
.checkout-grand-total { margin: 20px 0; font-size: 18px; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1c1c24; border: 1px solid #26262e; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-error { border-color: rgba(239,68,68,.4); color: #fca5a5; }

@media (max-width: 900px) {
    .shop-layout, .product-detail-grid, .checkout-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 5 — PREMIUM VISUAL PASS
   Glassmorphism, refined shadows/gradients, micro-interactions,
   skeleton loaders, button ripple. Layered on top of the Phase 4
   functional styles above — nothing above this line was removed.
   ============================================================ */

:root {
    --accent: #8b5cf6;
    --accent-dark: #7c3aed;
    --accent-glow: rgba(139, 92, 246, 0.35);
    --surface: #131318;
    --surface-2: #17171d;
    --border: #24242c;
    --radius-lg: 18px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Ambient background glow for a luxury feel, sits behind all content */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 10%, rgba(139,92,246,.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(236,72,153,.08) 0%, transparent 40%);
    pointer-events: none;
}

/* Glassmorphic header */
.site-header {
    background: rgba(14,14,18,.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-logo { background: linear-gradient(135deg,#fff,#c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Hero: animated gradient orb backdrop — now smaller & softer so it reads
   as ambient light behind the card, not a flat fill inside a hard box */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: '';
    position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    filter: blur(50px);
    opacity: .55;
    animation: orb-float 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes orb-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(24px); }
}
.hero h1 { position: relative; }
.hero-tagline { position: relative; }
.hero-search { position: relative; }

/* ============================================================
   HERO PANEL REDESIGN — the "Trusted Pva" box was previously
   just several overlapping blurred glow-circles clipped into a
   hard rectangle (looked like a flat, muddy solid-color block).
   Replaced with an actual glass card: a translucent panel with
   a thin, continuously ROTATING gradient ring border — a clear,
   unique, always-visible bit of motion instead of a static box.
   ============================================================ */
.hero-inner {
    background: linear-gradient(rgba(19, 19, 24, .82), rgba(19, 19, 24, .82)) padding-box,
                conic-gradient(from var(--ring-angle, 0deg), var(--accent, #8b5cf6), #00d9ff, #c4b5fd, var(--accent, #8b5cf6)) border-box;
    border: 1.5px solid transparent;
    border-radius: 28px;
    padding: 40px 44px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
@property --ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes hero-ring-spin { to { --ring-angle: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
    .hero-inner { animation: hero-ring-spin 6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-inner { animation: none; }
}
@media (max-width: 780px) {
    .hero-inner { padding: 28px 22px; }
}

/* Category sidebar: matching glass-card treatment so the hero row
   reads as one cohesive, designed unit instead of mismatched blocks */
.hero-categories {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 24px;
    padding: 24px 22px;
    backdrop-filter: blur(10px);
}
.hero-category-link {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease, background .25s ease;
}
.hero-category-link:hover {
    background: rgba(139,92,246,.08);
    box-shadow: 0 6px 18px rgba(139,92,246,.18);
}

/* Premium card shadows + lift, applied on top of existing hover rules */
.product-card, .category-card, .testimonial-card, .kpi-card, .admin-panel, .stat-card {
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
}
.product-card { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.product-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 45px rgba(0,0,0,.45), 0 0 0 1px var(--accent-glow);
    border-color: var(--accent);
}

/* Button ripple + glow */
.btn-add-to-cart, .btn-primary, .hero-search button, .auth-card button, .newsletter-form button {
    position: relative;
    overflow: hidden;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-add-to-cart:hover, .btn-primary:hover, .hero-search button:hover, .auth-card button:hover, .newsletter-form button:hover {
    box-shadow: 0 6px 20px var(--accent-glow);
}
.btn-add-to-cart:active, .btn-primary:active { transform: scale(.97); }

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transform: scale(0);
    animation: ripple-anim .6s ease-out;
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(3); opacity: 0; }
}

/* Skeleton loading placeholders (used while product grids fetch via AJAX) */
.skeleton {
    background: linear-gradient(90deg, #17171d 25%, #1e1e26 37%, #17171d 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 10px;
}
@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.skeleton-card { height: 280px; border-radius: 14px; }

/* Refined section headings with accent underline */
.section-title { position: relative; padding-bottom: 10px; }
.section-title::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 44px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* Smooth page-load fade-in */
main { animation: page-fade-in .4s ease; }
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Sticky buy box refinement */
.product-buy-box { position: sticky; top: 90px; align-self: start; }

/* Subtle border glow on focus across the site (accessibility + premium feel) */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-glow); }

@media (max-width: 900px) {
    .hero::before { width: 420px; height: 420px; }
    .product-buy-box { position: static; }
}

/* Checkout: contact-method fields (manual payment coordination flow) */
.checkout-payment select, .checkout-payment input[type="text"] {
    width: 100%; padding: 11px 14px; background: #0e0e12; border: 1px solid #2c2c36;
    border-radius: 8px; color: #fff; font-size: 14px; font-family: inherit;
}
.checkout-payment select:focus, .checkout-payment input[type="text"]:focus { outline: none; border-color: var(--accent, #8b5cf6); }

/* ============================================================
   PREMIUM PASS — ROUND 2
   Deeper polish: typography scale, image zoom, richer badges,
   card reveal stagger, gradient CTAs, custom scrollbar.
   ============================================================ */

/* Custom scrollbar for a considered, premium feel */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0d; }
::-webkit-scrollbar-thumb { background: #2c2c36; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent, #8b5cf6); }

/* Hero: larger, more confident type scale on desktop */
.hero h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.hero-tagline { font-size: clamp(15px, 2vw, 19px); max-width: 560px; margin-left: auto; margin-right: auto; }
.section-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

/* Product image zoom-on-hover, contained by the card's overflow */
.product-card-thumb { overflow: hidden; }
.product-card-thumb img { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.product-card:hover .product-card-thumb img { transform: scale(1.08); }

/* Richer badge treatment: soft glow + icon-style dot */
.badge-sale, .badge-bestseller {
    font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    backdrop-filter: blur(4px);
}
.badge-sale { background: linear-gradient(135deg,#ef4444,#dc2626); }
.badge-bestseller { background: linear-gradient(135deg,#f59e0b,#d97706); }

/* Wishlist button: glassmorphic, fills on hover/active */
.wishlist-btn {
    background: rgba(20,20,26,.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
    transition: background .2s ease, transform .2s ease, color .2s ease;
}
.wishlist-btn:hover { transform: scale(1.1); background: rgba(239,68,68,.25); }

/* Category cards: icon in a soft accent circle */
.category-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px;
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.12));
    font-size: 22px;
}
.category-name { font-weight: 600; }

/* Testimonials: quote mark + avatar initial */
.testimonial-card { position: relative; }
.testimonial-comment { position: relative; padding-left: 4px; }
.testimonial-comment::before {
    content: '"'; font-size: 42px; line-height: 0; color: var(--accent-glow, rgba(139,92,246,.35));
    position: absolute; left: -6px; top: 14px; font-family: Georgia, serif;
}
.testimonial-author { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #a1a1aa; font-size: 13px; }

/* Newsletter section: gradient border card */
.section-newsletter {
    position: relative;
    background: linear-gradient(#131318,#131318) padding-box,
                linear-gradient(135deg, var(--accent, #8b5cf6), transparent 60%) border-box;
    border: 1px solid transparent;
}

/* Gradient primary CTAs — richer than a flat fill */
.btn-add-to-cart, .btn-primary, .hero-search button, .newsletter-form button {
    background: linear-gradient(135deg, var(--accent-dark, #7c3aed), var(--accent, #8b5cf6));
}
.btn-add-to-cart:hover, .btn-primary:hover, .hero-search button:hover, .newsletter-form button:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
}

/* Card + grid reveal: cards use the same fade-up as sections, staggered */
.product-card.reveal, .category-card.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.product-card.reveal.is-visible, .category-card.reveal.is-visible { opacity: 1; transform: none; }
.product-grid .product-card:nth-child(1), .category-grid .category-card:nth-child(1) { transition-delay: 0s; }
.product-grid .product-card:nth-child(2), .category-grid .category-card:nth-child(2) { transition-delay: .06s; }
.product-grid .product-card:nth-child(3), .category-grid .category-card:nth-child(3) { transition-delay: .12s; }
.product-grid .product-card:nth-child(4), .category-grid .category-card:nth-child(4) { transition-delay: .18s; }
.product-grid .product-card:nth-child(5), .category-grid .category-card:nth-child(5) { transition-delay: .24s; }
.product-grid .product-card:nth-child(6), .category-grid .category-card:nth-child(6) { transition-delay: .3s; }

/* Rating stars in a warm gold, consistent everywhere */
.product-card-rating { color: #fbbf24; font-size: 13px; }

/* Section rhythm: consistent breathing room between homepage blocks */
.section { padding: 24px 20px; }
.section-flash-sale .section-title { color: #fca5a5; }

/* Buy box + FAQ: bring in line with the round-2 premium pass */
.product-buy-box {
    background: linear-gradient(180deg, rgba(139,92,246,.06), transparent 40%), #131318;
    border: 1px solid #24242c; border-radius: var(--radius-lg, 18px); padding: 24px;
}
.faq-item { transition: border-color .2s ease; }
.faq-item[open] { border-color: var(--accent, #8b5cf6); }
.faq-item summary::marker { color: var(--accent, #8b5cf6); }

/* ============================================================
   QUANTITY SELECTOR + BUY NOW
   ============================================================ */
.qty-selector { margin: 14px 0; }
.qty-selector label { display: block; font-size: 12px; color: #a1a1aa; margin-bottom: 6px; }
.qty-stepper, .qty-selector-compact {
    display: inline-flex; align-items: center; border: 1px solid #2c2c36; border-radius: 8px; overflow: hidden; background: #0e0e12;
}
.qty-selector-compact { margin: 10px 0; }
.qty-btn {
    width: 32px; height: 32px; background: #17171d; border: none; color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.qty-btn:hover { background: #26262e; }
.qty-input {
    width: 44px; height: 32px; text-align: center; background: transparent; border: none; color: #fff; font-size: 14px;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-card-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-buy-now {
    padding: 11px; border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; font-size: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    transition: box-shadow .2s ease, transform .15s ease;
}
.btn-buy-now:hover { box-shadow: 0 6px 20px rgba(245,158,11,.35); }
.btn-buy-now:active { transform: scale(.97); }
.btn-buy-now.btn-large { padding: 14px; font-size: 15px; }

.btn-outline {
    background: transparent !important;
    border: 1px solid #2c2c36 !important;
    color: #d4d4d8 !important;
}
.btn-outline:hover { border-color: var(--accent, #8b5cf6) !important; color: #fff !important; box-shadow: none !important; }

.buy-box-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.buy-box-actions .btn-buy-now, .buy-box-actions .btn-add-to-cart { flex: 1; min-width: 160px; }

/* ============================================================
   CATEGORY SLIDER (below header, homepage)
   ============================================================ */
.category-slider {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-height: 560px;
    overflow: hidden;
    background: #0a0a0d;
}
.category-slider-track { position: relative; width: 100%; aspect-ratio: 3 / 1; max-height: 560px; }
.category-slide {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity .6s ease; display: block;
}
.category-slide.active { opacity: 1; pointer-events: auto; }
.category-slide-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: blur(24px) brightness(.55) saturate(1.2); transform: scale(1.15); z-index: 0;
}
.category-slide img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.category-slide-caption {
    position: absolute; left: 32px; bottom: 28px; padding: 10px 22px; border-radius: 999px;
    background: rgba(10,10,13,.6); backdrop-filter: blur(6px); color: #fff; font-weight: 600; font-size: 18px;
    border: 1px solid rgba(255,255,255,.15);
}
.category-slider-dots { position: absolute; bottom: 16px; right: 32px; display: flex; gap: 8px; z-index: 2; }
.slider-dot {
    width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.35); cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.slider-dot.active { background: var(--accent, #8b5cf6); transform: scale(1.2); }

@media (max-width: 700px) {
    .category-slider { max-height: 420px; }
    .category-slider-track { aspect-ratio: 4 / 3; max-height: 420px; }
    .category-slide-caption { left: 16px; bottom: 16px; font-size: 15px; padding: 8px 16px; }
}

/* ============================================================
   HEADER SEARCH BAR
   ============================================================ */
.header-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; margin: 0 24px; }
.header-search input {
    flex: 1; padding: 10px 14px; background: #131318; border: 1px solid #26262e; border-radius: 8px;
    color: #fff; font-size: 13px;
}
.header-search input:focus { outline: none; border-color: var(--accent, #8b5cf6); }
.header-search button {
    padding: 10px 16px; background: #131318; border: 1px solid #26262e; border-radius: 8px;
    color: #fff; cursor: pointer; font-size: 14px;
}
.header-search button:hover { background: var(--accent, #8b5cf6); border-color: var(--accent, #8b5cf6); }
@media (max-width: 780px) {
    .header-search { display: none; }
}

/* ============================================================
   MOBILE NAV (hamburger menu)
   ============================================================ */
#mobile-nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; background: transparent; border: 1px solid #26262e; border-radius: 8px; cursor: pointer;
    flex-shrink: 0;
}
#mobile-nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; margin: 0 auto; border-radius: 2px; }
.mobile-nav-search { display: none; }

@media (max-width: 780px) {
    #mobile-nav-toggle { display: flex; }
    .site-header-inner { flex-wrap: wrap; }
    .site-nav {
        display: none; flex-direction: column; align-items: stretch; gap: 4px;
        width: 100%; order: 3; padding-top: 14px; margin-top: 14px; border-top: 1px solid #1e1e26;
    }
    .site-nav.mobile-open { display: flex; }
    .site-nav a { padding: 10px 6px; border-radius: 8px; }
    .site-nav a:hover { background: #17171d; }
    .site-nav a.nav-cta { text-align: center; }
    .mobile-nav-search { display: flex; gap: 8px; margin-bottom: 10px; }
    .mobile-nav-search input {
        flex: 1; padding: 10px 14px; background: #131318; border: 1px solid #26262e; border-radius: 8px; color: #fff; font-size: 13px;
    }
    .mobile-nav-search button {
        padding: 10px 16px; background: #8b5cf6; border: none; border-radius: 8px; color: #fff; font-size: 13px; cursor: pointer;
    }
}

/* ============================================================
   FOOTER REDESIGN
   ============================================================ */
.site-footer { background: #0a0a0d; border-top: 1px solid #1e1e26; margin-top: 60px; padding: 48px 20px 0; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; display: block; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr 1.2fr; gap: 28px; padding-bottom: 36px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.footer-col a { color: #a1a1aa; font-size: 14px; position: relative; width: fit-content; }
.footer-col p { color: #a1a1aa; font-size: 14px; }
.footer-tagline { color: #a1a1aa; font-size: 14px; margin: 8px 0 14px; max-width: 280px; }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a { color: #d4d4d8; font-size: 13px; }

.footer-newsletter-form { display: flex; gap: 8px; margin-top: 10px; }
.footer-newsletter-form input {
    flex: 1; padding: 9px 12px; background: #131318; border: 1px solid #2c2c36; border-radius: 8px; color: #fff; font-size: 13px;
}
.footer-newsletter-form button {
    padding: 9px 16px; background: linear-gradient(135deg, var(--accent-dark, #7c3aed), var(--accent, #8b5cf6));
    border: none; border-radius: 8px; color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap;
}

.footer-bottom { border-top: 1px solid #1e1e26; padding: 18px 0; text-align: center; }
.footer-bottom p { color: #71717a; font-size: 13px; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REFINED HOVER EFFECTS (site-wide)
   ============================================================ */
/* Underline-grow effect for nav & footer links */
.site-nav a, .footer-col a {
    transition: color .2s ease;
}
.site-nav a::after, .footer-col a::after {
    content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
    background: var(--accent, #8b5cf6); transition: width .18s ease;
}
.site-nav a { position: relative; }
.site-nav a:hover, .footer-col a:hover { color: #fff; }
.site-nav a:hover::after, .footer-col a:hover::after { width: 100%; }

/* Logo subtle hover glow */
.site-logo { transition: filter .2s ease; }
.site-logo:hover { filter: drop-shadow(0 0 8px var(--accent-glow, rgba(139,92,246,.5))); }

/* Category card + slide hover polish */
.category-card { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.category-card:hover { transform: translateY(-4px); border-color: var(--accent, #8b5cf6); }
.category-slide img { transition: transform .4s ease; }
.category-slide:hover img { transform: scale(1.04); }

/* Quantity buttons + dots already have hover; unify focus rings */
.qty-btn:focus-visible, .slider-dot:focus-visible, .site-nav a:focus-visible { outline: 2px solid var(--accent, #8b5cf6); outline-offset: 2px; }

/* ============================================================
   TOP BAR (email + socials, above main header)
   ============================================================ */
.topbar { background: #0a0a0d; border-bottom: 1px solid #1a1a20; font-size: 12px; }
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; justify-content: flex-end; align-items: center;
    color: #a1a1aa;
}
.topbar-icons { display: flex; align-items: center; gap: 8px; }
.topbar-icon-btn {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 6px; background: #17171d; border: 1px solid #24242c; color: #d4d4d8;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.topbar-icon-btn svg { width: 15px; height: 15px; }
.topbar-icon-btn:hover { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.4); color: #fff; transform: translateY(-1px); }
.topbar-whatsapp:hover { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.5); color: #25D366; }
@media (max-width: 600px) {
    .topbar-inner { padding: 8px 16px; }
    .topbar-icon-btn { width: 30px; height: 30px; }
}

/* ============================================================
   CATEGORY DROPDOWN NAV (second tier below main header)
   ============================================================ */
.category-nav { background: #101015; border-top: 1px solid #1e1e26; border-bottom: 1px solid #1e1e26; }
.category-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto;
}
.category-nav-item { position: relative; }
.category-nav-link {
    display: flex; align-items: center; gap: 5px; padding: 12px 16px; color: #d4d4d8; font-size: 13px; white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.category-nav-link:hover { color: #fff; background: rgba(139,92,246,.08); }
.cat-caret { display: inline-flex; width: 12px; height: 12px; transition: transform .2s ease; flex-shrink: 0; }
.cat-caret svg { width: 100%; height: 100%; }
.category-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 200px; background: #17171d; border: 1px solid #26262e;
    border-radius: 0 0 10px 10px; padding: 8px 0; display: none; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.category-nav-item.has-dropdown:hover > .category-dropdown { display: block; }
.category-dropdown .category-nav-link { padding: 9px 18px; font-size: 13px; }
.category-dropdown .category-nav-link:hover { background: rgba(139,92,246,.1); color: #fff; }
/* Level 2+ flyout: opens to the side instead of stacking below, so nested menus stay readable */
.category-dropdown .category-dropdown { top: -9px; left: 100%; border-radius: 10px; }
@media (max-width: 780px) {
    .category-nav-inner {
        -webkit-overflow-scrolling: touch; flex-direction: column; overflow-x: visible; gap: 0; padding: 0;
    }
    .category-nav-item { width: 100%; border-bottom: 1px solid #1a1a20; }
    .category-nav-link { padding: 13px 20px; justify-content: space-between; }
    .category-dropdown {
        position: static; display: none; border: none; border-radius: 0; box-shadow: none;
        background: #0c0c10; padding: 0; min-width: 0;
    }
    .category-dropdown .category-nav-link { padding-left: 34px; }
    .category-dropdown .category-dropdown .category-nav-link { padding-left: 50px; }
    .category-nav-item.open > .category-dropdown { display: block; }
    .category-nav-item.open > .category-nav-link .cat-caret { transform: rotate(180deg); }
}

/* ============================================================
   FOOTER NEWSLETTER HIGHLIGHT BOX + PAYMENT BADGES
   ============================================================ */
.footer-newsletter-box {
    background: linear-gradient(180deg, rgba(139,92,246,.1), rgba(139,92,246,.02));
    border: 1px solid rgba(139,92,246,.3); border-radius: 14px; padding: 20px;
}
.footer-newsletter-box h4 { margin-bottom: 6px; }
.footer-newsletter-box p { font-size: 13px; color: #a1a1aa; margin-bottom: 12px; }
.footer-newsletter-box .footer-newsletter-form { margin-top: 0; }

.footer-payment-methods {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 20px 0;
    border-top: 1px solid #1e1e26; font-size: 12px;
}
.footer-payment-label { color: #a1a1aa; margin-right: 6px; }
.payment-badge {
    padding: 5px 12px; border-radius: 6px; background: #131318; border: 1px solid #26262e; color: #d4d4d8; font-size: 11px;
    display: inline-flex; align-items: center; gap: 5px;
}
.payment-badge-icon { font-size: 13px; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Logo image (when uploaded via Settings) */
.site-logo-img { height: 40px; width: auto; display: block; }
.footer-brand .site-logo-img { height: 32px; }

/* Logo text shown alongside the logo image */
.site-logo-text { font-weight: 700; font-size: 18px; }
.footer-brand .site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.floating-whatsapp-btn {
    position: fixed; bottom: 94px; right: 24px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,.4); transition: transform .2s ease, opacity .25s ease;
}
.floating-whatsapp-btn:hover { transform: scale(1.08); }
.floating-icon-svg { width: 28px; height: 28px; }
.floating-whatsapp-btn.fab-scroll-fade,
.chatbot-widget.fab-scroll-fade .chatbot-toggle { opacity: .45; transform: scale(.82); }

/* ============================================================
   FLOATING FAQ CHATBOT WIDGET (rule-based, no AI)
   ============================================================ */
.chatbot-widget { position: fixed; bottom: 24px; right: 24px; z-index: 90; }
.chatbot-toggle {
    position: relative; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-dark,#7c3aed), var(--accent,#8b5cf6));
    border: none; color: #fff; cursor: pointer; box-shadow: 0 6px 20px var(--accent-glow, rgba(139,92,246,.4));
    transition: transform .2s ease; display: flex; align-items: center; justify-content: center;
}
.chatbot-toggle:hover { transform: scale(1.08); }
.chatbot-online-dot {
    position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #0e0e12;
}
.chatbot-online-dot.is-online { background: #22c55e; }
.chatbot-online-dot.is-offline { background: #71717a; }
.chatbot-online-badge { font-size: 10px; color: #86efac; font-weight: 400; margin-left: 6px; }
.chatbot-online-badge.offline { color: #a1a1aa; }

.chatbot-message-form textarea {
    width: 100%; padding: 10px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px;
    color: #fff; font-size: 13px; font-family: inherit; resize: vertical;
}

.chatbot-panel {
    display: none; position: absolute; bottom: 70px; right: 0; width: 320px; max-height: 440px;
    background: #17171d; border: 1px solid #26262e; border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.5); flex-direction: column;
}
.chatbot-widget.open .chatbot-panel { display: flex; }

.chatbot-panel-header {
    padding: 14px 16px; background: linear-gradient(135deg, var(--accent-dark,#7c3aed), var(--accent,#8b5cf6));
    color: #fff; font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}
.chatbot-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
.chatbot-close:hover { opacity: 1; }

.chatbot-panel-body { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.chatbot-question-list { display: flex; flex-direction: column; gap: 8px; }
.chatbot-question {
    text-align: left; padding: 10px 14px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px;
    color: #d4d4d8; font-size: 13px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.chatbot-question:hover { border-color: var(--accent,#8b5cf6); color: #fff; }

.chatbot-answer-bubble {
    background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.25); border-radius: 10px;
    padding: 12px 14px; font-size: 13px; color: #d4d4d8; margin-bottom: 10px; white-space: pre-line;
}
.chatbot-back-btn {
    background: none; border: none; color: var(--accent,#8b5cf6); font-size: 12px; cursor: pointer; margin-bottom: 10px; padding: 0;
}

.chatbot-whatsapp-cta {
    display: block; text-align: center; padding: 10px; background: #0e0e12; border-top: 1px solid #26262e;
    color: #86efac; font-size: 12px;
}

@media (max-width: 480px) {
    .chatbot-panel { width: calc(100vw - 48px); right: -12px; }
    .floating-whatsapp-btn { width: 46px; height: 46px; bottom: 74px; right: 14px; }
    .floating-icon-svg { width: 22px; height: 22px; }
    .chatbot-widget { bottom: 14px; right: 14px; }
    .chatbot-toggle { width: 46px; height: 46px; }
}

/* Show/hide password toggle */
.password-field { position: relative; }
.password-field input { padding-right: 44px !important; }
.password-toggle-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #a1a1aa; cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center; transition: color .15s ease;
}
.password-toggle-btn:hover { color: #8b5cf6; }

.password-strength-bar { width: 100%; height: 4px; background: #24242c; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.password-strength-bar span { display: block; height: 100%; width: 0%; border-radius: 4px; transition: width .25s ease, background .25s ease; }
.password-strength-label { font-size: 11.5px; margin-top: 4px; font-weight: 600; min-height: 14px; }

/* Live quantity x price = total display */
.qty-total-line { font-size: 13px; color: #a1a1aa; margin: 6px 0 12px; }
.qty-total-value { color: #86efac; font-weight: 700; }

/* Account dashboard header with avatar */
.account-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.account-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.account-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-dark,#7c3aed), var(--accent,#8b5cf6));
    color: #fff; font-size: 26px; font-weight: 700;
}

/* Payment method SVG icons (checkout radio list + footer badges) */
.payment-method-icon, .payment-badge-icon { display: inline-flex; align-items: center; justify-content: center; }
.payment-method-icon svg, .payment-badge-icon svg { width: 16px; height: 16px; }
.payment-badge-icon svg { width: 13px; height: 13px; }
.payment-badge-icon img { width: 16px; height: 16px; border-radius: 4px; }

/* Decorative section divider */
.section-divider {
    height: 1px; max-width: 1200px; margin: 20px auto;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), transparent);
}
.section-divider-dot {
    display: flex; align-items: center; justify-content: center; max-width: 1200px; margin: 10px auto; gap: 12px;
}
.section-divider-dot::before, .section-divider-dot::after {
    content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #26262e, transparent);
}
.section-divider-dot span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #8b5cf6); }

/* ============================================================
   PAGE LOADING SCREEN
   ============================================================ */
#page-loader {
    position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at center, #16121f 0%, #0a0a0d 70%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.page-loader-ring-wrap { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.page-loader-glow {
    position: absolute; inset: -20px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.45) 0%, transparent 70%);
    animation: page-loader-pulse 2s ease-in-out infinite;
}
.page-loader-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, #8b5cf6 25%, #d8b4fe 45%, transparent 60%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: page-loader-spin 1.1s linear infinite;
}
.page-loader-logo { position: relative; height: 42px; width: auto; border-radius: 50%; z-index: 1; }
.page-loader-logo-text {
    position: relative; z-index: 1; font-size: 18px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-loader-label { font-size: 13px; color: #a1a1aa; letter-spacing: .05em; display: flex; }
.page-loader-dots span { animation: page-loader-dot-fade 1.4s infinite; opacity: 0; }
.page-loader-dots span:nth-child(2) { animation-delay: .2s; }
.page-loader-dots span:nth-child(3) { animation-delay: .4s; }

/* ============================================================
   NOTIFICATION MOTION
   ============================================================ */
@keyframes page-loader-spin { to { transform: rotate(360deg); } }

@keyframes notif-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
#notif-unread-badge { animation: notif-badge-pulse 2s ease-out infinite; }

@keyframes notif-bell-wiggle {
    0%, 100% { transform: rotate(0deg); }
    20%  { transform: rotate(-14deg); }
    40%  { transform: rotate(11deg); }
    60%  { transform: rotate(-7deg); }
    80%  { transform: rotate(4deg); }
}
.notif-bell-shake .account-nav-icon { animation: notif-bell-wiggle .5s ease-in-out; transform-origin: top center; }

@keyframes notif-card-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-card {
    animation: notif-card-in .45s cubic-bezier(.16,1,.3,1) both;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.notif-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.notif-card.unread { position: relative; }
.notif-card.unread::before {
    content: ''; position: absolute; top: 16px; left: -1px; width: 4px; height: calc(100% - 32px);
    background: linear-gradient(180deg, #8b5cf6, #6d28d9); border-radius: 0 4px 4px 0;
}
@keyframes notif-dot-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,.6); }
    50%      { box-shadow: 0 0 0 5px rgba(139,92,246,0); }
}
.notif-unread-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6;
    animation: notif-dot-glow 1.8s ease-out infinite; margin-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
    #notif-unread-badge, .notif-bell-shake .account-nav-icon, .notif-card, .notif-unread-dot { animation: none !important; }
}
@keyframes page-loader-pulse { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes page-loader-dot-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Rich text editor (admin product description) */
.richtext-toolbar { display: flex; gap: 6px; margin-bottom: 6px; }
.richtext-toolbar button {
    padding: 6px 12px; background: #131318; border: 1px solid #26262e; border-radius: 6px;
    color: #d4d4d8; font-size: 12px; cursor: pointer;
}
.richtext-toolbar button:hover { border-color: var(--accent, #8b5cf6); color: #fff; }
.richtext-editor {
    min-height: 160px; padding: 12px 14px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 8px;
    color: #fff; font-size: 14px; line-height: 1.6;
}
.richtext-editor:focus { outline: none; border-color: var(--accent, #8b5cf6); }
.richtext-editor a { color: var(--accent, #8b5cf6); text-decoration: underline; }

/* Product description links on the public product page */
.product-description a { color: var(--accent, #8b5cf6); text-decoration: underline; }
.product-description a:hover { color: #a78bfa; }
/* ============================================================
   PRODUCT PAGE — image zoom + premium feature cards
   ============================================================ */
.product-zoom-wrap { overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.product-zoom-wrap .product-main-image { transition: transform .15s ease-out; will-change: transform; }

.feature-card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.feature-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: #131318; border: 1px solid #24242c; border-radius: 12px;
    transition: transform .18s ease, border-color .18s ease;
}
.feature-card:hover { transform: translateY(-3px); border-color: #8b5cf6; }
.feature-card-icon { font-size: 20px; flex-shrink: 0; }
.feature-card-text { font-size: 14px; color: #d4d4d8; }
.feature-card-highlight { background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.03)); border-color: rgba(139,92,246,.4); }
.feature-card-highlight .feature-card-text { color: #fff; font-weight: 600; }

/* ============================================================
   PREMIUM ACCOUNT DASHBOARD — sidebar + glassmorphism + stats
   ============================================================ */
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; max-width: 1200px; margin: 40px auto; padding: 0 20px; align-items: start; }
.account-content { min-width: 0; padding-top: 4px; }

.account-sidebar {
    position: relative; background: linear-gradient(180deg, rgba(30,26,45,.65), rgba(15,15,20,.65));
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px; position: sticky; top: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden;
}
.account-sidebar::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(600px circle at 20% -10%, rgba(139,92,246,.16), transparent 55%);
}
.account-sidebar-user { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid #24242c; min-width: 0; }
.account-sidebar-user > div:last-child { min-width: 0; flex: 1; }
.account-sidebar-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.account-sidebar-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 4px 12px rgba(139,92,246,.35); }
.account-sidebar-name { font-size: 13.5px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sidebar-email { font-size: 11.5px; color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.account-sidebar-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    color: #a1a1aa; font-size: 13.5px; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.account-sidebar-nav a:hover { background: #17171d; color: #fff; }
.account-sidebar-nav a.active { background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(139,92,246,.05)); color: #fff; border: 1px solid rgba(139,92,246,.3); }
.account-nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.account-nav-icon svg { width: 16px; height: 16px; }

.account-sidebar-logout { margin-top: 14px; padding-top: 14px; border-top: 1px solid #24242c; }
.account-sidebar-logout button { width: 100%; padding: 10px; background: rgba(255,255,255,.03); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: #a1a1aa; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s ease, color .15s ease; }
.account-sidebar-logout button:hover { border-color: #f87171; color: #f87171; }

.dashboard-stats-premium { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 0; }
.stat-card-premium {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: rgba(19,19,24,.7); backdrop-filter: blur(10px); border: 1px solid #24242c; border-radius: 16px;
    padding: 22px; text-decoration: none; overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.stat-card-premium::before {
    content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(circle at 100% 0%, rgba(139,92,246,.25), transparent 70%);
}
.stat-card-premium:hover { transform: translateY(-3px); border-color: #4c3a80; }
.stat-card-premium:hover::before { opacity: 1; }
.stat-card-icon {
    position: relative; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-card-icon svg { width: 20px; height: 20px; }
.stat-card-icon-orders { background: rgba(139,92,246,.14); color: #a78bfa; }
.stat-card-icon-downloads { background: rgba(56,189,248,.14); color: #38bdf8; }
.stat-card-icon-wishlist { background: rgba(244,114,182,.14); color: #f472b6; }
.stat-number-animated { font-size: 30px; font-weight: 800; color: #fff; position: relative; letter-spacing: -.02em; }
.stat-card-premium .stat-label { position: relative; color: #a1a1aa; font-size: 12.5px; }

@media (max-width: 640px) {
    .account-header { gap: 12px; margin-bottom: 14px; }
    .account-avatar, .account-avatar-placeholder { width: 46px; height: 46px; font-size: 18px; }
    .account-header h1 { font-size: 19px; }
    .alert { padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
    .dashboard-stats-premium { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
    .stat-card-premium { padding: 10px 8px; gap: 2px; border-radius: 12px; align-items: center; text-align: center; }
    .stat-card-icon { width: 30px; height: 30px; margin-bottom: 6px; border-radius: 9px; }
    .stat-card-icon svg { width: 15px; height: 15px; }
    .stat-number-animated { font-size: 19px; }
    .stat-card-premium .stat-label { font-size: 10px; line-height: 1.2; }
}

.glass-panel { background: rgba(19,19,24,.7); backdrop-filter: blur(10px); }

@media (max-width: 860px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-sidebar-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .account-sidebar-nav a {
        flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-radius: 50%;
        justify-content: center; background: rgba(255,255,255,.05);
        backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.09);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .account-sidebar-nav a:active { transform: scale(.94); }
    .account-sidebar-nav a.active {
        background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(109,40,217,.2));
        border-color: rgba(167,139,250,.55);
        box-shadow: 0 0 0 1px rgba(167,139,250,.2), 0 4px 14px rgba(139,92,246,.35);
    }
    .account-nav-label { display: none; }
    .account-nav-icon { width: 20px; height: 20px; }
    .account-nav-icon svg { width: 19px; height: 19px; }
}

/* ============================================================
   PREMIUM DOWNLOAD CENTER
   ============================================================ */
.download-center-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 20px; }
.download-card {
    display: flex; gap: 14px; background: rgba(19,19,24,.7); backdrop-filter: blur(10px);
    border: 1px solid #24242c; border-radius: 14px; padding: 16px; transition: border-color .18s ease, transform .18s ease;
}
.download-card:hover { transform: translateY(-2px); border-color: #4c3a80; }
.download-card-blocked { opacity: .7; }
.download-card-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #0e0e12; }
.download-card-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.download-card-body { flex: 1; min-width: 0; }
.download-card-title { font-size: 14.5px; color: #fff; margin: 0 0 8px; }
.download-card-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #a1a1aa; margin-bottom: 4px; }
.download-card-btn { display: inline-block; margin-top: 10px; padding: 8px 16px; font-size: 12.5px; border-radius: 8px; text-decoration: none; }

/* Security overview panel */
.security-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 10px; }
.security-info-grid > div { display: flex; flex-direction: column; gap: 4px; }
.security-info-label { font-size: 11.5px; color: #71717a; text-transform: uppercase; letter-spacing: .04em; }
.security-info-value { font-size: 14px; color: #fff; font-weight: 600; }

/* ============================================================
   HOMEPAGE — Flash Sale, Trust Strip, Live Stats, FAQ
   ============================================================ */
.flash-sale-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.flash-sale-header .section-title { margin: 0; }
.flash-sale-countdown { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.35); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: #d4d4d8; }
.flash-sale-countdown .countdown-timer { color: #fff; font-weight: 700; }
.section-flash-sale { position: relative; }

.section-trust-strip { padding: 18px 20px; }
.trust-badges-homepage { justify-content: center; gap: 28px; font-size: 13.5px; margin: 0; }

.section-live-stats { padding: 30px 20px; }
.live-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; text-align: center; }
.live-stat { display: flex; flex-direction: column; gap: 4px; }
.live-stat-number { font-size: 34px; font-weight: 800; background: linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.live-stat-label { font-size: 12.5px; color: #a1a1aa; }

.faq-list { max-width: 800px; margin: 0 auto; }

/* ============================================================
   LIVE SEARCH SUGGESTIONS DROPDOWN
   ============================================================ */
.search-suggest-dropdown {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #131318; border: 1px solid #24242c; border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.search-suggest-dropdown.open { display: block; }
.search-suggest-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #1e1e26; }
.search-suggest-item:last-child { border-bottom: none; }
.search-suggest-item:hover { background: #1a1a20; }
.search-suggest-item img, .search-suggest-thumb-placeholder {
    width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #0e0e12; font-size: 16px;
}
.search-suggest-info { display: flex; flex-direction: column; min-width: 0; }
.search-suggest-title { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest-price { font-size: 12px; color: #8b5cf6; font-weight: 600; }

/* ============================================================
   ORDER STATUS TIMELINE
   ============================================================ */
.order-timeline { display: flex; align-items: flex-start; margin: 20px 0; overflow-x: auto; padding-bottom: 4px; }
.order-timeline-step { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.order-timeline-step:not(:last-child)::after {
    content: ''; position: absolute; top: 14px; left: 55%; width: 90%; height: 2px; background: #2c2c36; z-index: 0;
}
.order-timeline-step.done:not(:last-child)::after { background: #8b5cf6; }
.order-timeline-dot {
    width: 28px; height: 28px; border-radius: 50%; background: #17171d; border: 2px solid #2c2c36;
    display: flex; align-items: center; justify-content: center; font-size: 13px; color: #71717a;
    position: relative; z-index: 1; margin-bottom: 8px; transition: all .2s ease;
}
.order-timeline-step.done .order-timeline-dot { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.order-timeline-step.current .order-timeline-dot { box-shadow: 0 0 0 4px rgba(139,92,246,.25); }
.order-timeline-label { font-size: 11.5px; color: #a1a1aa; }
.order-timeline-step.done .order-timeline-label { color: #fff; font-weight: 600; }

/* ============================================================
   PREMIUM LOGIN / REGISTER PAGES — floating labels, glass card
   ============================================================ */
.auth-card-premium {
    background: rgba(19,19,24,.75); backdrop-filter: blur(14px);
    border: 1px solid #24242c; box-shadow: 0 20px 60px rgba(0,0,0,.4);
    position: relative; overflow: hidden;
}
.auth-card-premium::before {
    content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 260px; height: 160px; background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
    pointer-events: none;
}
.auth-card-brand { text-align: center; margin-bottom: 18px; position: relative; }
.auth-card-logo { height: 40px; width: auto; }
.auth-card-logo-text {
    font-size: 20px; font-weight: 800;
    background: linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-card-premium h1 { text-align: center; font-size: 22px; margin-bottom: 6px; position: relative; }
.auth-card-subtitle { text-align: center; color: #a1a1aa; font-size: 13px; margin-bottom: 24px; position: relative; }
.auth-card-footer { text-align: center; }

/* Icon + placeholder input fields (simple, no overlap risk) */
.icon-field { position: relative; margin-top: 16px; }
.icon-field input {
    width: 100%; padding: 14px 14px 14px 44px; background: #0e0e12; border: 1px solid #2c2c36; border-radius: 10px;
    color: #fff; font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease;
}
.icon-field input::placeholder { color: #71717a; }
.icon-field input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.icon-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #71717a; opacity: .8; pointer-events: none; display: flex; }
.icon-field.password-field input { padding-right: 44px; }

/* Fix browser autofill (Chrome/Edge force a light background) */
.icon-field input:-webkit-autofill,
.icon-field input:-webkit-autofill:hover,
.icon-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #0e0e12 inset;
    box-shadow: 0 0 0px 1000px #0e0e12 inset;
    transition: background-color 9999s ease-in-out 0s;
}

.auth-row-between { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.auth-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #a1a1aa; cursor: pointer; }
.auth-link { font-size: 12.5px; color: #a78bfa; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ============================================================
   PRODUCT CARD UPGRADES — quick actions row, stock/sold badges,
   Quick View modal, Compare feature, Compare page
   ============================================================ */
.product-card-quick-actions { display: flex; align-items: center; gap: 6px; padding: 8px 14px 0; }
.quickview-btn {
    flex-shrink: 0; width: 28px; height: 28px; background: #1c1c24; border: 1px solid #26262e; border-radius: 999px;
    color: #fff; font-size: 13px; cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.quickview-btn:hover { transform: scale(1.1); background: rgba(139,92,246,.25); }
.compare-checkbox { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #a1a1aa; cursor: pointer; margin-left: auto; }
.compare-checkbox input { accent-color: #8b5cf6; }

.badge-outofstock { position: absolute; top: 10px; right: 10px; background: #52525b; color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.product-card-meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.product-card-sold { font-size: 11.5px; color: #fb923c; }
.stock-badge { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.stock-badge-in { background: rgba(74,222,128,.15); color: #4ade80; }
.stock-badge-low { background: rgba(250,204,21,.15); color: #facc15; }
.stock-badge-out { background: rgba(248,113,113,.15); color: #f87171; }

/* Quick View modal */
.quickview-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.quickview-modal.open { display: flex; }
.quickview-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.quickview-modal-content {
    position: relative; background: #131318; border: 1px solid #24242c; border-radius: 16px;
    max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 28px;
}
.quickview-modal-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
    background: #1c1c24; border: 1px solid #26262e; color: #fff; cursor: pointer;
}
.quickview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.quickview-image img { width: 100%; border-radius: 12px; }
@media (max-width: 560px) { .quickview-grid { grid-template-columns: 1fr; } }

/* Compare floating bar */
.compare-bar {
    position: fixed; left: 0; right: 0; bottom: -120px; z-index: 90; background: rgba(19,19,24,.95); backdrop-filter: blur(10px);
    border-top: 1px solid #24242c; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; transition: bottom .3s ease;
}
.compare-bar.open { bottom: 0; }
.compare-bar-items { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.compare-bar-item { display: flex; align-items: center; gap: 6px; background: #0e0e12; border: 1px solid #24242c; border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.compare-bar-item img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.compare-bar-remove { background: none; border: none; color: #71717a; cursor: pointer; }
.compare-bar-actions { display: flex; align-items: center; gap: 10px; }
#compare-clear-btn { background: none; border: 1px solid #2c2c36; color: #a1a1aa; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* Compare page table */
.compare-page { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.compare-table-wrap { overflow-x: auto; margin-top: 20px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { padding: 14px; border-bottom: 1px solid #24242c; text-align: center; vertical-align: top; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; color: #a1a1aa; font-size: 13px; white-space: nowrap; }
.compare-table-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.compare-table th a { color: #fff; text-decoration: none; font-size: 13.5px; }

/* ============================================================
   CART DRAWER (slide-out panel)
   ============================================================ */
.cart-drawer { position: fixed; inset: 0; z-index: 210; display: none; }
.cart-drawer.open { display: block; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.cart-drawer-panel {
    position: absolute; top: 0; right: -420px; width: 100%; max-width: 400px; height: 100%;
    background: #131318; border-left: 1px solid #24242c; display: flex; flex-direction: column;
    transition: right .3s ease;
}
.cart-drawer.open .cart-drawer-panel { right: 0; }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #24242c; }
.cart-drawer-close { background: #1c1c24; border: 1px solid #26262e; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-drawer-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #1e1e26; }
.cart-drawer-item img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #0e0e12; }
.cart-drawer-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-drawer-item-title { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-drawer-item-meta { font-size: 11.5px; color: #a1a1aa; }
.cart-drawer-footer { padding: 16px 20px 20px; border-top: 1px solid #24242c; }
.cart-drawer-subtotal { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 14px; }

/* ============================================================
   RECENTLY VIEWED STRIP
   ============================================================ */
.recently-viewed-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.recently-viewed-item {
    flex: 0 0 140px; display: flex; flex-direction: column; gap: 6px; text-decoration: none;
    background: #131318; border: 1px solid #24242c; border-radius: 12px; padding: 10px; transition: border-color .15s ease;
}
.recently-viewed-item:hover { border-color: #4c3a80; }
.recently-viewed-item img, .recently-viewed-item .product-card-thumb-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #0e0e12; }
.recently-viewed-title { font-size: 12px; color: #d4d4d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recently-viewed-price { font-size: 12px; color: #8b5cf6; font-weight: 600; }

/* Mobile: show 2 products per row instead of collapsing to 1 column */
@media (max-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-body { padding: 10px; }
    .product-card-title { font-size: 13px; }
    .product-card-quick-actions { padding: 6px 10px 0; }
    .compare-checkbox span { display: none; }
}
/* ============================================================
   MOTION LAYER — scroll progress bar (rich tricolor, still thin)
   ============================================================ */
#scroll-progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9998;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #00d9ff);
    transition: width .1s ease-out; pointer-events: none;
}

/* ============================================================
   MOTION LAYER — floating blobs + cursor glow (desktop only,
   smoothed in JS via gsap.quickTo so they glide, not jump)
   ============================================================ */
.hero-inner { position: relative; z-index: 1; }

.motion-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; z-index: 0;
    will-change: transform;
}
.motion-blob-0 { width: 340px; height: 340px; background: #8b5cf6; top: -80px; left: -60px; opacity: .22; }
.motion-blob-1 { width: 260px; height: 260px; background: #00d9ff; bottom: -60px; right: 10%; opacity: .16; }
.motion-blob-2 { width: 200px; height: 200px; background: #a78bfa; top: 30%; right: -40px; opacity: .18; }

/* ============================================================
   UNIQUE TOUCH — twinkling sparkle particles inside the hero card
   ============================================================ */
.motion-sparkle {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 8px 2px rgba(196,181,253,.8);
    opacity: 0; pointer-events: none; z-index: 2;
    animation: motion-sparkle-twinkle 3s ease-in-out infinite;
}
@keyframes motion-sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50% { opacity: .9; transform: scale(1); }
}
@media (max-width: 780px) {
    .motion-sparkle { display: none; }
}

/* Hero CTA: soft breathing glow so the main action clearly, continuously
   reads as "alive" rather than static */
@media (prefers-reduced-motion: no-preference) {
    .hero-search button {
        animation: hero-cta-breathe 2.6s ease-in-out infinite;
    }
}
@keyframes hero-cta-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,.45); }
    50% { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
}

#cursor-glow {
    position: fixed; top: 0; left: 0; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.12) 0%, rgba(0,217,255,.05) 45%, transparent 70%);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 5; mix-blend-mode: screen;
}

@media (max-width: 780px) {
    #cursor-glow, .motion-blob { display: none; }
}

/* ============================================================
   MOTION LAYER — hero title shimmer (animated gradient text)
   Pure CSS, respects prefers-reduced-motion on its own so it
   still works gracefully if JS fails to load.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    /* JS successfully split the heading into word-spans: gradient goes on
       the inner spans ONLY (the outer h1 has no visible text of its own
       anymore, so it must NOT also get the gradient-clip treatment —
       doing both at once was causing a duplicated/ghosted text render). */
    .hero h1[data-motion-split] .motion-word-inner,
    .hero-content h1[data-motion-split] .motion-word-inner,
    /* Fallback: JS hasn't run / failed — gradient goes on the h1 itself. */
    .hero h1:not([data-motion-split]),
    .hero-content h1:not([data-motion-split]) {
        background: linear-gradient(100deg, #fff 25%, #c4b5fd 45%, #00d9ff 55%, #fff 75%);
        background-size: 250% 100%;
        -webkit-background-clip: text; background-clip: text;
        color: transparent; -webkit-text-fill-color: transparent;
        animation: motion-shimmer 6s ease-in-out infinite;
    }
}
@keyframes motion-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   MOTION LAYER — cursor-spotlight glow on cards (desktop only)
   JS sets --spot-x/--spot-y per card on mousemove; the glow is
   a soft, mostly-transparent radial highlight that follows the
   pointer — a subtle "premium SaaS" card treatment.
   ============================================================ */
.feature-card, .testimonial-card, .product-card, .category-card, .payment-method-card {
    position: relative;
}
.feature-card::before, .testimonial-card::before, .product-card::before,
.category-card::before, .payment-method-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; z-index: 1; transition: opacity .35s ease;
    background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(139,92,246,.16), transparent 70%);
}
.feature-card:hover::before, .testimonial-card:hover::before, .product-card:hover::before,
.category-card:hover::before, .payment-method-card:hover::before { opacity: 1; }

@media (max-width: 780px) {
    .feature-card::before, .testimonial-card::before, .product-card::before,
    .category-card::before, .payment-method-card::before { display: none; }
}

/* ============================================================
   MOTION LAYER — smooth FAQ expand/collapse (see motion.js)
   ============================================================ */
.faq-item > p { overflow: hidden; }

   Each word sits in an overflow-hidden "mask" span so it can
   rise up into view from below, like a curtain lifting per word.
   Used on headings, section titles, and short blocks of copy
   sitewide (see motion.js) — never on interactive/nested markup.
   ============================================================ */
.motion-word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.motion-word-inner { display: inline-block; will-change: transform, opacity; }

/* ============================================================
   MOTION LAYER — ripple + shine sweep + card hover
   ============================================================ */
.motion-ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,.35);
    width: 10px; height: 10px; transform: translate(-50%, -50%) scale(0);
    animation: motion-ripple-anim .5s ease-out forwards; pointer-events: none;
}
@keyframes motion-ripple-anim { to { transform: translate(-50%, -50%) scale(22); opacity: 0; } }

.product-card { transition: transform .15s ease-out, border-color .18s ease, box-shadow .18s ease; }
.product-card:hover { box-shadow: 0 16px 40px rgba(139,92,246,.18); }

/* A soft diagonal light sweep on hover — cheap (CSS-only), reads as premium */
.btn-add-to-cart, .btn-primary, .btn-buy-now, .hero-search button, .auth-card button, .newsletter-form button {
    position: relative; overflow: hidden;
}
.btn-buy-now { position: relative; overflow: hidden; }
.btn-add-to-cart::before, .btn-primary::before, .btn-buy-now::before,
.hero-search button::before, .auth-card button::before, .newsletter-form button::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn-add-to-cart:hover::before, .btn-primary:hover::before, .btn-buy-now:hover::before,
.hero-search button:hover::before, .auth-card button:hover::before, .newsletter-form button:hover::before {
    left: 130%;
}
.product-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
    transition: opacity .3s ease;
}
.product-card:hover::after { opacity: 1; }

/* ============================================================
   MOTION LAYER (v2) — sticky header shrink/blur on scroll
   ============================================================ */
.site-header {
    transition: background-color .35s ease, box-shadow .35s ease,
                backdrop-filter .35s ease, padding .3s ease;
}
.site-header.is-scrolled {
    background-color: rgba(15, 12, 26, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.site-header.is-scrolled .site-header-inner { padding-top: 6px; padding-bottom: 6px; }
.site-header.is-scrolled .site-logo-img { transform: scale(.92); }
.site-logo-img { transition: transform .3s ease; }

/* ============================================================
   MOTION LAYER (v2) — animated nav underline
   ============================================================ */
.site-nav { position: relative; }
.nav-underline {
    position: absolute; bottom: -4px; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, #8b5cf6, #00d9ff);
    border-radius: 2px; opacity: 0; pointer-events: none;
    transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

/* ============================================================
   MOTION LAYER (v2) — scroll-to-top button
   ============================================================ */
#scroll-to-top-btn {
    /* Sits to the LEFT of the WhatsApp + chatbot buttons (both are
       56px wide, anchored at right:24px/bottom:24px & bottom:94px) —
       previously this shared almost the exact same corner and sat
       on top of the chatbot button. */
    position: fixed; right: 92px; bottom: 24px; width: 44px; height: 44px;
    border-radius: 50%; border: none; cursor: pointer; z-index: 89;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, #8b5cf6, #00d9ff);
    box-shadow: 0 8px 22px rgba(139,92,246,.4);
    opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none;
    transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
#scroll-to-top-btn.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#scroll-to-top-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(139,92,246,.5); }
#scroll-to-top-btn:active { transform: translateY(0) scale(.94); }
@media (max-width: 780px) {
    #scroll-to-top-btn { right: 76px; bottom: 16px; width: 40px; height: 40px; }
}
@media (max-width: 480px) {
    #scroll-to-top-btn { right: 64px; bottom: 14px; width: 38px; height: 38px; }
}

/* ============================================================
   MOTION LAYER (v2) — button press feedback (tactile squash)
   ============================================================ */
.btn-primary, .btn-buy-now, .btn-add-to-cart { transition: transform .12s ease, box-shadow .18s ease; }
.btn-primary.is-pressed, .btn-buy-now.is-pressed, .btn-add-to-cart.is-pressed { transform: scale(.94); }

/* ============================================================
   SECONDARY ACTION BUTTON — this class was used all over the
   templates (Withdraw, Reject, Cancel, View, Change Password...)
   but had NO matching rule anywhere, so it rendered as a bare
   unstyled browser button. Sized/weighted to match .btn-primary
   so paired buttons (Add Money + Withdraw, Approve + Reject, etc.)
   line up, with a purple outline/glass treatment so the two don't
   compete, plus the same hover-lift + sweep-highlight animation
   language already used on .btn-primary.
   ============================================================ */
.btn-secondary {
    display: inline-block;
    margin-top: 24px;
    padding: 11px 22px;
    background: rgba(139,92,246,.08);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 8px;
    color: #e4e4e7;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
a.btn-secondary { text-decoration: none; }
.btn-secondary::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn-secondary:hover {
    background: rgba(139,92,246,.16);
    border-color: #8b5cf6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(139,92,246,.22);
}
.btn-secondary:hover::before { left: 130%; }
.btn-secondary:active { transform: translateY(0) scale(.96); }
.btn-secondary:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   MOTION LAYER (v2) — image reveal wipe target (see motion.js
   gsap clip-path tween); base clip-path so there's no flash of
   fully-visible content if GSAP hasn't attached yet.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .product-card-thumb, .category-card img, .product-image, .product-page img {
        will-change: clip-path;
    }
}


/* ============================================================
   ADD MONEY MODAL v2 -- premium SaaS-style 3-step wizard
   ============================================================ */
.am-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    background: rgba(8,8,10,.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    padding: 20px; opacity: 0; transition: opacity .25s ease;
}
.am-overlay.am-open { display: flex; opacity: 1; }
.am-modal {
    width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
    background: #191A20; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 26px;
    transform: scale(.92); opacity: 0; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.am-overlay.am-open .am-modal { transform: scale(1); opacity: 1; }

.am-head { display: flex; align-items: flex-start; justify-content: space-between; }
.am-title { font-size: 19px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.am-subtitle { font-size: 12.5px; color: #A1A1AA; margin-top: 4px; }
.am-close { cursor: pointer; color: #A1A1AA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.am-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Progress indicator */
.am-progress { display: flex; align-items: center; margin: 22px 0 24px; }
.am-progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.am-progress-dot {
    width: 28px; height: 28px; border-radius: 50%; background: #111111; border: 2px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #A1A1AA;
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.am-progress-step.am-done .am-progress-dot { background: #16A34A; border-color: #16A34A; color: #fff; }
.am-progress-step.am-active .am-progress-dot { background: #7C3AED; border-color: #8B5CF6; color: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.25); }
.am-progress-label { font-size: 10.5px; color: #71717a; white-space: nowrap; }
.am-progress-step.am-active .am-progress-label { color: #fff; font-weight: 600; }
.am-progress-line { flex: 1; height: 2px; background: rgba(255,255,255,.1); margin: 0 6px 18px; position: relative; overflow: hidden; }
.am-progress-line::after { content: ''; position: absolute; inset: 0; background: #16A34A; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.am-progress-line.am-filled::after { transform: scaleX(1); }

.am-step { display: none; animation: am-fade-in .3s ease; }
.am-step.am-visible { display: block; }
@keyframes am-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.am-step-heading { font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 12px; }

/* Payment method cards */
.am-method-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px;
    background: #111111; border: 1.5px solid rgba(255,255,255,.08); border-radius: 12px; cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.am-method-card:hover { border-color: rgba(139,92,246,.4); transform: translateY(-1px); }
.am-method-card.am-selected { border-color: #7C3AED; background: rgba(124,58,237,.08); box-shadow: 0 0 0 1px rgba(124,58,237,.3); }
.am-method-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.am-method-info { flex: 1; min-width: 0; }
.am-method-name { font-size: 14.5px; font-weight: 600; color: #fff; }
.am-method-sub { font-size: 11.5px; color: #A1A1AA; margin-top: 2px; }
.am-method-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .2s ease; }
.am-method-card.am-selected .am-method-check { background: #16A34A; border-color: #16A34A; }
.am-method-check svg { opacity: 0; transform: scale(.5); transition: all .2s ease; }
.am-method-card.am-selected .am-method-check svg { opacity: 1; transform: scale(1); }

/* Amount presets */
.am-amount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.am-amount-card {
    padding: 16px; text-align: center; background: #111111; border: 1.5px solid rgba(255,255,255,.08); border-radius: 12px;
    cursor: pointer; font-size: 17px; font-weight: 700; color: #fff; transition: all .2s ease;
}
.am-amount-card:hover { border-color: rgba(139,92,246,.4); transform: translateY(-1px); }
.am-amount-card.am-selected { border-color: #7C3AED; background: rgba(124,58,237,.12); box-shadow: 0 0 0 1px rgba(124,58,237,.3); }
.am-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: .05em; }
.am-divider::before, .am-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }

.am-input-group { position: relative; margin-bottom: 14px; }
.am-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #A1A1AA; display: flex; }
.am-input {
    width: 100%; height: 50px; padding: 0 16px 0 42px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 12px; color: #fff; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.am-input:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.am-input::placeholder { color: #71717a; }
.am-balance-preview { display: flex; justify-content: space-between; padding: 12px 16px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25); border-radius: 10px; font-size: 13px; color: #A1A1AA; }
.am-balance-preview strong { color: #4ade80; }

/* Step 3: payment details card */
.am-detail-card { background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(139,92,246,.05)); border: 1px solid rgba(139,92,246,.3); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.am-detail-label { font-size: 11px; color: #A1A1AA; text-transform: uppercase; letter-spacing: .05em; }
.am-detail-method { font-size: 15px; font-weight: 700; color: #fff; margin-top: 4px; }
.am-detail-dest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.am-detail-dest { font-family: monospace; font-size: 14px; color: #d8b4fe; overflow-wrap: anywhere; }
.am-copy-btn { flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: background .15s ease; }
.am-copy-btn:hover { background: rgba(255,255,255,.15); }
.am-copy-btn.am-copied { background: #16A34A; }

/* Upload area */
.am-upload-area {
    border: 1.5px dashed rgba(255,255,255,.18); border-radius: 12px; padding: 24px 16px; text-align: center;
    cursor: pointer; transition: border-color .2s ease, background .2s ease; background: rgba(255,255,255,.02);
}
.am-upload-area:hover, .am-upload-area.am-dragover { border-color: #8B5CF6; background: rgba(124,58,237,.06); }
.am-upload-icon { color: #A1A1AA; margin-bottom: 8px; }
.am-upload-text { font-size: 13px; color: #d4d4d8; }
.am-upload-text span { color: #A78BFA; font-weight: 600; }
.am-upload-hint { font-size: 11px; color: #71717a; margin-top: 4px; }
.am-upload-preview { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.3); border-radius: 12px; }
.am-upload-preview.am-visible { display: flex; }
.am-upload-preview img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.am-upload-preview-name { flex: 1; min-width: 0; font-size: 13px; color: #4ade80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-upload-actions { display: flex; gap: 6px; flex-shrink: 0; }
.am-upload-actions button { font-size: 11.5px; color: #A1A1AA; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.am-upload-actions button:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.am-textarea { width: 100%; min-height: 60px; padding: 12px 16px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px; color: #fff; font-size: 14px; resize: none; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; font-family: inherit; }
.am-textarea:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.am-textarea::placeholder { color: #71717a; }

.am-label { display: block; font-size: 12.5px; font-weight: 600; color: #d4d4d8; margin-bottom: 6px; }

/* Buttons */
.am-btn-row { display: flex; gap: 10px; margin-top: 18px; }
.am-btn {
    flex: 1; height: 48px; border-radius: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; border: none; position: relative; overflow: hidden;
    transition: transform .15s ease, box-shadow .2s ease;
}
.am-btn:active { transform: translateY(1px); }
.am-btn-primary { background: linear-gradient(135deg, #7C3AED, #8B5CF6); color: #fff; box-shadow: 0 4px 16px rgba(124,58,237,.35); }
.am-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,.45); }
.am-btn-secondary { background: rgba(255,255,255,.06); color: #d4d4d8; border: 1px solid rgba(255,255,255,.1); flex: 0 0 110px; }
.am-btn-secondary:hover { background: rgba(255,255,255,.1); }
.am-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Ripple */
.am-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: am-ripple-anim .6s ease-out; pointer-events: none; }
@keyframes am-ripple-anim { to { transform: scale(3); opacity: 0; } }

/* Loading spinner inside submit button */
.am-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: am-spin .7s linear infinite; display: none; }
.am-btn.am-loading .am-spinner { display: inline-block; }
.am-btn.am-loading .am-btn-label { display: none; }
@keyframes am-spin { to { transform: rotate(360deg); } }

/* Field error */
.am-error { color: #f87171; font-size: 12px; margin-top: 6px; display: none; }
.am-input.am-invalid, .am-method-card.am-invalid { border-color: #ef4444 !important; }

@media (max-width: 480px) {
    .am-modal { padding: 20px; }
    .am-amount-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MY ACCOUNT -- MOBILE / TABLET RESPONSIVE HARDENING
   Covers Wallet, Rewards, Security, Statistics, Settings,
   Notifications, Order Detail -- all share .account-content.
   ============================================================ */
/* .account-content is a <main> element, so without this override it also
   picks up the generic "main { max-width:1200px; margin:0 auto }" rule
   above — auto margins force shrink-to-fit sizing, so the box sized itself
   to its widest child (the transaction table) instead of stretching to
   fill the sidebar grid's column. That's what was pushing Wallet, Orders,
   Notifications etc. off-screen on phones instead of stacking properly. */
.account-content { min-width: 0; max-width: none; margin: 0; }
.account-content .admin-panel { min-width: 0; }

/* Notification cards: let the row wrap instead of squeezing the View button */
.notif-card > div { flex-wrap: wrap; }
.notif-card > div > div:first-child { flex: 1 1 200px; min-width: 0; }
.notif-card > div > div:first-child p { overflow-wrap: anywhere; }
.notif-card .btn-secondary { margin-top: 0; align-self: center; }

/* Wallet warning banners / alert rows: wrap on narrow screens instead of overflowing */
.account-content .alert { overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .account-content h1 { font-size: 20px; }
    .account-content .admin-panel, .account-content .admin-panel.glass-panel { padding: 16px; }

    /* Security score panel: stack the ring above the text instead of side-by-side */
    .account-content .admin-panel.glass-panel[style*="align-items:center"] { flex-direction: column; text-align: center; }

    /* Statistics KPI cards: 2-up grid instead of squeezing 4 across */
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Statistics monthly bar chart: allow horizontal scroll instead of crushing 6 bars */
    .account-content .admin-panel[style*="align-items:flex-end"] {
        overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start !important;
    }
    .account-content .admin-panel[style*="align-items:flex-end"] > div { flex: 0 0 52px !important; }

    /* Settings / generic fixed max-width panels: use full available width on mobile */
    .account-content .admin-panel[style*="max-width:480px"] { max-width: 100% !important; }

    /* Add Money modal: tighten padding and stack method/amount cards comfortably */
    .am-modal { padding: 18px; border-radius: 14px; }
    .am-amount-grid { gap: 8px; }
    .am-btn-row { flex-wrap: wrap; }
    .am-btn-secondary { flex: 1 1 100%; order: 2; }
    .am-btn-primary { flex: 1 1 100%; order: 1; }
}

@media (max-width: 400px) {
    .am-progress-label { display: none; }
    .am-method-sub { display: none; }
}

/* ============================================================
   MY ORDERS -- card-based list with product thumbnails
   ============================================================ */
.orders-scroll-box {
    display: flex; flex-direction: column; gap: 14px; margin-top: 16px;
    max-height: 640px; overflow-y: auto; padding-right: 6px;
}
.orders-scroll-box::-webkit-scrollbar { width: 7px; }
.orders-scroll-box::-webkit-scrollbar-thumb { background: rgba(139,92,246,.45); border-radius: 4px; }
.order-card { padding: 18px 20px; }
.order-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.order-card-number { font-weight: 700; color: #fff; font-size: 14.5px; }
.order-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.order-card-total { margin-left: auto; text-align: right; }
.order-card-total p { font-weight: 700; color: #fff; font-size: 16px; margin-top: 2px; }

.order-card-items { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.order-item-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.order-item-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #0e0e12; }
.order-item-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.order-item-info { flex: 1; min-width: 0; }
.order-item-name { font-size: 13.5px; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-item-linetotal { font-size: 13px; color: #a1a1aa; flex-shrink: 0; }
.order-card-view-btn { display: inline-block; margin-top: 14px; font-size: 13px; }

/* Thin custom scrollbar for the items list when an order has many products */
.order-card-items::-webkit-scrollbar { width: 5px; }
.order-card-items::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 3px; }

@media (max-width: 640px) {
    .order-card { padding: 14px 16px; }
    .orders-scroll-box { max-height: 70vh; }
    .order-card-total { margin-left: 0; text-align: left; }
    .order-item-linetotal { display: none; }
}