/*
| SUNNO PWA — customer shell stylesheet
|--------------------------------------------------------------------------
| Extracted verbatim from the <style> block that lived inside
| resources/views/layouts/app.blade.php (2,682 lines of it).
|
| WHY IT MOVED
| ------------
| sunno.css already states the rule for this codebase: "This is the ONLY place
| SUNNO overrides the Maxton design system. Anything that needs to look
| different belongs here, never in a view and never in a per-page <style>
| block." The PWA shell was the one holdout — and being inline it was
| re-parsed on every request, uncacheable, and invisible to any diff review
| because a one-line colour change showed up inside a 3,116-line blade file.
|
| Companion files:
|   sunno.css      desktop shells (admin, merchant, auth) on Bootstrap/Maxton
|   sunno-pwa.css  this file — the mobile customer shell, no Bootstrap
|
| NO BOOTSTRAP HERE, ON PURPOSE
| -----------------------------
| The desktop shells load bootstrap.min + bootstrap-extended + five theme
| files + jQuery. Shipping that to a 390px phone to obtain a gradient header
| would cost ~250 KB for no visual gain, and Bootstrap claims .card, .btn,
| .badge, .alert, .nav-item and .nav-link — all six already defined below and
| used across 219 views. The Maxton look comes from its patterns (70px
| gradient header, pill-shaped active nav, rounded-4 cards, Material Icons,
| Noto Sans), and those port over without the framework.
*/

/* ── Reset ────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════
   Every name below already existed and is referenced ~1,500 times across the
   219 customer views (var(--text-muted) alone appears 287 times), so the
   names are frozen. The VALUES are what the Maxton re-theme changes — which
   is the whole point of the exercise: re-skinning the PWA is now an edit to
   this block, not a sweep through blade files.

   The signature gradient is deliberately NOT the vendor's #7928ca -> #ff0080.
   That pink is the Maxton demo's identity. SUNNO's runs from its own navy
   (--blue-700, already the manifest theme-color) through indigo into violet:
   the same energy as the template, unmistakably not a copy of it, and
   continuous with the brand already shipped to installed home screens.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Blue ramp re-centred on indigo. --blue-700 keeps the exact navy the
       brand already used so nothing that hardcodes #1d3a8a drifts. */
    --blue-900: #0f1b4d;
    --blue-800: #162464;
    --blue-700: #1d3a8a;
    --blue-600: #4338ca;
    --blue-500: #4f46e5;
    --blue-400: #818cf8;
    --blue-100: #e0e7ff;
    --blue-50: #eef2ff;
    --amber-500: #f59e0b;
    --amber-400: #fbbf24;
    --amber-100: #fef3c7;
    --green-500: #10b981;
    --green-100: #d1fae5;
    --red-500: #ef4444;
    --red-100: #fee2e2;
    --purple-500: #7c3aed;
    --orange-500: #f97316;

    /* Surfaces. Maxton's light theme is near-white with flat cards; the old
       #f0f2f5 read grey and muddied every card edge against it. */
    --bg: #f6f7fb;
    --bg-card: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-muted: #f1f3f9;
    --text: #2f2e2e;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --border: #e9ecf3;

    /* Maxton's card elevation is a single soft drop, not the layered glass
       the old shell used. Cheaper to composite, and the reason list
       scrolling stuttered on mid-range Android was one backdrop-filter
       layer per card. */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow: 0 .125rem .25rem rgba(15, 23, 42, 0.075);
    --shadow-md: 0 .35rem .8rem rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 .75rem 1.6rem rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-bg-light: rgba(255, 255, 255, 0.92);

    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-full: 9999px;

    --font: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --nav-height: 72px;

    /* Legacy aliases — kept for Livewire components that reference older naming */
    --primary: var(--blue-500);
    --primary-dark: var(--blue-700);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Signature gradients (new) ──────────────────────────────────────
       Header, primary buttons, active nav pill and hero cards all draw from
       here, so the app reads as one surface rather than a dozen hand-mixed
       linear-gradients. */
    --grd-brand: linear-gradient(310deg, #1d3a8a 0%, #4338ca 55%, #7c3aed 100%);
    --grd-accent: linear-gradient(310deg, #d97706, #fbbf24);
    --grd-success: linear-gradient(310deg, #047857, #34d399);
    --grd-danger: linear-gradient(310deg, #be123c, #fb7185);

    /* ── Repairs ────────────────────────────────────────────────────────
       These were referenced by views but never defined anywhere, so they
       resolved to nothing and the declaration was dropped: --spacing in 40
       places, --radius-lg in 8, --danger in 7, --accent in 7,
       --primary-light in 7, --success in 3, plus one each of --bg-muted,
       --ease-smooth and --ease-out. Defining them fixes those views without
       editing them. */
    --spacing: 4px;
    --radius-lg: 20px;
    --primary-light: var(--blue-400);
    --accent: var(--amber-500);
    --success: var(--green-500);
    --danger: var(--red-500);
    --warning: var(--amber-500);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-height) + 20px);
    overflow-x: hidden;
}

/* ── Wallet Hero Section ─────────────────────── */
.wallet-hero {
    background: linear-gradient(160deg, #1a1f4e 0%, #162464 30%, #1d3a8a 60%, #0f2057 100%);
    border-radius: 0 0 32px 32px;
    padding: 20px 20px 28px;
    color: white;
    position: relative;
    overflow: hidden;
}

.wallet-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 130, 255, 0.15) 0%, transparent 70%);
    animation: floatOrb 8s ease-in-out infinite;
}

.wallet-hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
    animation: floatOrb 10s ease-in-out infinite reverse;
}

.wallet-hero .hero-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.wallet-logo {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
}

.wallet-logo span {
    color: var(--amber-400);
}

.wallet-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashback-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: var(--radius-full);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #f472b6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.wallet-balance-section {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.wallet-balance-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wallet-shield {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.wallet-balance {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.wallet-balance .currency {
    font-size: 18px;
    font-weight: 700;
    margin-right: 4px;
    opacity: 0.85;
}

.wallet-eye {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.wallet-detail-link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wallet-detail-link:hover {
    color: white;
}

/* Wallet Actions Row */
.wallet-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.wallet-action-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    text-align: center;
}

.wallet-action-primary {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.wallet-action-primary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* Token + CHIP Row */
.wallet-info-row {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.token-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    transition: all 0.3s ease;
}

.token-badge:hover {
    background: rgba(255, 255, 255, 0.15);
}

.token-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-400), #e67e22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.token-info .token-value {
    font-size: 20px;
    font-weight: 800;
}

.token-info .token-label {
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.chip-financing-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(240, 245, 255, 0.95));
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    flex: 1.2;
    color: var(--text);
    border: 1px solid rgba(124, 58, 237, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chip-financing-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1);
}

.chip-financing-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--blue-700);
    margin-bottom: 6px;
}

.chip-financing-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.chip-financing-label {
    font-size: 10px;
    color: var(--text-muted);
}

/* ── Referral Link Bar ────────────────────────── */
.referral-bar {
    background: var(--bg-card);
    margin: -14px 16px 0;
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    position: relative;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.referral-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.referral-link-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--blue-100), #c7d2fe);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.referral-share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.referral-share-btn:hover {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
    transform: scale(1.05);
}

/* ── Main Content Area ─────────────────────────── */
.main-content {
    padding: 8px 16px 16px;
    max-width: 480px;
    margin: 0 auto;
}

/* ── Promo Banners Grid ────────────────────────── */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.promo-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(0, 0, 0, 0.04);
}

.promo-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(115deg,
            transparent 40%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 60%);
    transform: rotate(25deg);
    transition: all 0.6s;
    opacity: 0;
}

.promo-card:hover::before {
    opacity: 1;
    animation: shimmerSweep 1.5s ease-in-out;
}

.promo-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.08;
    filter: blur(20px);
}

.promo-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    border-color: rgba(37, 99, 235, 0.1);
}

.promo-card:active {
    transform: scale(0.97);
}

.promo-card-icon {
    font-size: 32px;
    margin-bottom: 10px;
    display: inline-block;
    animation: floatEmoji 3s ease-in-out infinite;
}

.promo-card:nth-child(2) .promo-card-icon {
    animation-delay: 0.5s;
}

.promo-card:nth-child(3) .promo-card-icon {
    animation-delay: 1s;
}

.promo-card:nth-child(4) .promo-card-icon {
    animation-delay: 1.5s;
}

.promo-card-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.promo-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.promo-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    animation: glowPulse 2s infinite;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    letter-spacing: 0.5px;
}

/* ── Banner Carousel ──────────────────────────── */
.carousel-container {
    margin-bottom: 20px;
    position: relative;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    min-width: calc(100% - 24px);
    scroll-snap-align: center;
    border-radius: 20px;
    overflow: hidden;
    height: 150px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    transition: transform 0.4s ease;
}

.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: carouselShine 4s ease-in-out infinite;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    width: 22px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* ── Recommended Section ──────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.section-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.section-link {
    font-size: 12px;
    color: var(--blue-500);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.section-link:hover {
    color: var(--blue-700);
}

.recommended-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 20px;
}

.recommended-scroll::-webkit-scrollbar {
    display: none;
}

.recommended-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 76px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.3s ease;
}

.recommended-item:hover {
    transform: translateY(-2px);
}

.recommended-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 2px solid rgba(0, 0, 0, 0.03);
}

.recommended-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
}

.recommended-item:hover .recommended-icon::before {
    opacity: 1;
}

.recommended-item:hover .recommended-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

.recommended-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.3;
    max-width: 70px;
}

/* ── Categories Scroll ─────────────────────────── */
.categories-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 16px;
}

.categories-scroll::-webkit-scrollbar {
    display: none;
}

.category-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    min-width: fit-content;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
    white-space: nowrap;
    border: 1.5px solid var(--border);
    cursor: pointer;
}

.category-pill:hover {
    border-color: var(--blue-400);
    background: var(--blue-50);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.category-pill.active {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3);
}

.category-pill-icon {
    font-size: 18px;
}

/* ── Product Cards (Premium Style) ────────────── */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.product-card {
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
    border: 1.5px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
    border-color: rgba(37, 99, 235, 0.08);
}

.product-img {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
}

.product-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    pointer-events: none;
    opacity: 1;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-img img {
    transform: scale(1.06);
}

/* Heart / Wishlist Button */
.product-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-heart:hover {
    background: white;
    color: #f43f5e;
    transform: scale(1.15);
}

.product-heart.liked {
    color: #f43f5e;
    background: white;
}

.product-heart.liked svg {
    fill: #f43f5e;
}

/* Product Badges (top-left) */
.product-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 4;
}

.pbadge {
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: 0.2px;
}

.pbadge-cashback {
    background: linear-gradient(135deg, var(--orange-500), #ea580c);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}

.pbadge-token {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.pbadge-promo {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.pbadge-shipping {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
}

/* Cart + Add Action Buttons (bottom-right of image) */
.product-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

/* Always visible on mobile, hover-reveal on desktop */
.product-cart-btn {
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s ease;
}

.product-card:hover .product-cart-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Add button always visible */
.product-add-btn {
    opacity: 1;
    transform: translateY(0);
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
    }

    50% {
        box-shadow: 0 3px 16px rgba(16, 185, 129, 0.45);
    }
}

.product-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.product-action-btn:hover {
    transform: scale(1.15);
}

.product-action-btn:active {
    transform: scale(0.92);
}

.product-cart-btn {
    background: rgba(139, 92, 246, 0.9);
    color: white;
}

.product-add-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-weight: 800;
    font-size: 16px;
}

/* Mobile: show cart btn too */
@media (max-width: 640px) {
    .product-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-info {
    padding: 10px 12px 12px;
}

.product-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    letter-spacing: -0.1px;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.product-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--orange-500);
    letter-spacing: -0.3px;
}

.product-price .currency {
    font-size: 11px;
    font-weight: 700;
}

.product-sold {
    font-size: 10px;
    color: var(--text-light);
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 10px;
    color: var(--text-light);
    gap: 4px;
}

.product-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* ── Sponsored Merchants ──────────────────────── */
.sponsored-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.sponsored-card {
    background: linear-gradient(135deg, var(--blue-50), #f0f9ff);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    border: 1px dashed var(--blue-400);
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
}

.sponsored-card:hover {
    background: var(--blue-100);
}

.sponsored-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Search Bar ────────────────────────────────── */
.search-bar {
    background: var(--bg-card);
    border-radius: var(--radius-full);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: transparent;
}

.search-bar input::placeholder {
    color: var(--text-light);
}

.search-icon {
    font-size: 16px;
    color: var(--text-light);
}

/* ── Bottom Navigation ─────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: var(--nav-height);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 8px);
    box-shadow: 0 -2px 24px rgba(15, 23, 42, 0.06);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 500;
    padding: 8px 0;
    transition: all 0.25s ease;
    min-width: 56px;
    position: relative;
}

.nav-item.active {
    color: var(--blue-600);
    font-weight: 600;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: -1px;
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
}

.nav-item.active .nav-icon-wrap svg {
    stroke: var(--blue-600);
}

.nav-icon-wrap {
    font-size: 22px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-wrap svg {
    stroke: var(--text-light);
    transition: stroke 0.25s;
    width: 22px;
    height: 22px;
}

/* Center nav button */
.nav-center {
    position: relative;
    top: -20px;
}

.nav-center-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    border: 4px solid var(--bg-card);
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulseGlow 3s infinite;
}

.nav-center-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45);
}

/* ── Cards ──────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* ── Buttons ────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--blue-600);
    color: white;
}

.btn-primary:hover {
    background: var(--blue-700);
}

.btn-accent {
    background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
    color: white;
}

.btn-danger {
    background: var(--red-500);
    color: white;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

/* ── Form Inputs ────────────────────────────────── */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--bg-card);
    transition: border-color 0.2s;
    outline: none;
}

.form-input:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-error {
    font-size: 12px;
    color: var(--red-500);
    margin-top: 4px;
}

/* ── Badges ──────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.badge-success {
    background: var(--green-100);
    color: #065f46;
}

.badge-warning {
    background: var(--amber-100);
    color: #92400e;
}

.badge-danger {
    background: var(--red-100);
    color: #991b1b;
}

.badge-info {
    background: var(--blue-100);
    color: var(--blue-800);
}

/* ── Transaction Item ──────────────────────────────  */
.tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.tx-item:last-child {
    border-bottom: none;
}

.tx-info {
    flex: 1;
}

.tx-desc {
    font-size: 14px;
    font-weight: 500;
}

.tx-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tx-amount {
    font-size: 15px;
    font-weight: 700;
}

.tx-credit {
    color: var(--green-500);
}

.tx-debit {
    color: var(--red-500);
}

/* ── Stats ──────────────────────────────────────── */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--blue-700);
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Wallet Card (for wallet page) ─────────────── */
.wallet-page-card {
    background: linear-gradient(160deg, #1a1f4e 0%, #162464 30%, #1d3a8a 60%, #0f2057 100%);
    border-radius: var(--radius);
    padding: 24px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.wallet-page-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 130, 255, 0.15) 0%, transparent 70%);
    animation: floatOrb 8s ease-in-out infinite;
}

/* ── Referral Card ─────────────────────────── */
.referral-card {
    background: linear-gradient(160deg, #1a1f4e, #162464, #1d3a8a);
    border-radius: var(--radius);
    padding: 28px 24px;
    color: white;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.referral-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
    animation: floatOrb 6s ease-in-out infinite;
}

.referral-code {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 10px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Badge Neutral ───────────────────────── */
.badge-neutral {
    background: #f1f5f9;
    color: #475569;
}

/* ── Btn Secondary ─────────────────────── */
.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

/* ── Empty State ───────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* ── Alert ──────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background: var(--green-100);
    color: #065f46;
    border-left: 4px solid var(--green-500);
}

.alert-danger {
    background: var(--red-100);
    color: #991b1b;
    border-left: 4px solid var(--red-500);
}

/* ── Table ──────────────────────────────────────── */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--bg);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

/* ── Utility ──────────────────────────────────── */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 8px;
}

.mt-4 {
    margin-top: 16px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-4 {
    margin-bottom: 16px;
}

/* ── Animations ────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

@keyframes shimmerSweep {
    0% {
        transform: rotate(25deg) translateX(-100%);
    }

    100% {
        transform: rotate(25deg) translateX(100%);
    }
}

@keyframes floatEmoji {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 2px 16px rgba(239, 68, 68, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.1);
    }
}

@keyframes carouselShine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 150%;
    }
}

@keyframes staggerIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stagger-in {
    animation: staggerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ══════════════════════════════════════════════════
   DESKTOP TOP NAVIGATION BAR
   ══════════════════════════════════════════════════ */
.desktop-topnav {
    display: none;
}

/* ══════════════════════════════════════════════════
   DESKTOP RESPONSIVE OVERRIDES (≥1024px)
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ── Show desktop top nav, hide bottom nav ─── */
    .desktop-topnav {
        display: block;
        position: sticky;
        top: 0;
        z-index: 200;
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25), 0 0 80px rgba(99, 102, 241, 0.08);
    }

    .desktop-topnav-inner {
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 28px;
        padding: 0 36px;
        height: 60px;
    }

    .desktop-topnav-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: white;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 2px;
        flex-shrink: 0;
        transition: transform 0.3s;
    }

    .desktop-topnav-logo:hover {
        transform: scale(1.04);
    }

    .desktop-topnav-logo img {
        width: 30px;
        height: 30px;
        filter: invert(1) brightness(2);
    }

    .desktop-topnav-logo span span {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .desktop-search {
        flex: 1;
        max-width: 520px;
        position: relative;
    }

    .desktop-search input {
        width: 100%;
        padding: 10px 18px 10px 44px;
        border-radius: var(--radius-full);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: white;
        font-family: var(--font);
        font-size: 13.5px;
        outline: none;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .desktop-search input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .desktop-search input:focus {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(99, 102, 241, 0.6);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), 0 4px 20px rgba(99, 102, 241, 0.1);
        transform: scale(1.01);
    }

    .desktop-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        opacity: 0.45;
        pointer-events: none;
    }

    .desktop-nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
    }

    .desktop-nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 10.5px;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        min-width: 56px;
        letter-spacing: 0.2px;
    }

    .desktop-nav-link:hover {
        color: white;
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-1px);
    }

    .desktop-nav-link.active {
        color: white;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
        box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
    }

    .desktop-nav-link svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        transition: transform 0.25s;
    }

    .desktop-nav-link:hover svg {
        transform: scale(1.1);
    }

    .desktop-nav-link .desktop-badge {
        position: absolute;
        top: 4px;
        right: 8px;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        font-size: 9px;
        font-weight: 800;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        text-align: center;
        line-height: 16px;
        padding: 0 4px;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
        animation: pulse 2s ease-in-out infinite;
    }

    .desktop-nav-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: white;
        margin-left: 10px;
        border: 2px solid rgba(255, 255, 255, 0.15);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
        box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3);
    }

    .desktop-nav-avatar:hover {
        border-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.08);
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
    }

    /* ── Desktop category bar ─── */
    .desktop-categories-bar {
        display: flex;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.88));
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .desktop-categories-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 36px;
        display: flex;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
    }

    .desktop-categories-inner::-webkit-scrollbar {
        display: none;
    }

    .desktop-cat-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 11px 18px;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        font-size: 12.5px;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.3s;
        border-bottom: 2px solid transparent;
        position: relative;
    }

    .desktop-cat-link::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #6366f1, #a855f7);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateX(-50%);
        border-radius: 2px;
    }

    .desktop-cat-link:hover {
        color: white;
    }

    .desktop-cat-link:hover::after {
        width: 70%;
    }

    /* ── Hide mobile bottom nav ─── */
    .bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    /* ── Widen main content ─── */
    .main-content {
        max-width: 1320px !important;
        padding: 28px 36px 40px !important;
    }

    /* ── Desktop Hero Banner ─── */
    .desktop-hero-banner {
        display: block;
        position: relative;
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4338ca 60%, #6366f1 100%);
        padding: 0;
        overflow: hidden;
    }

    .desktop-hero-banner::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
        animation: heroGlow 6s ease-in-out infinite alternate;
    }

    .desktop-hero-banner::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: 5%;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
        animation: heroGlow 8s ease-in-out infinite alternate-reverse;
    }

    @keyframes heroGlow {
        0% {
            transform: translate(0, 0) scale(1);
        }

        100% {
            transform: translate(30px, -20px) scale(1.15);
        }
    }

    .desktop-hero-banner-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 40px 36px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .desktop-hero-text h1 {
        font-size: 36px;
        font-weight: 900;
        color: white;
        line-height: 1.2;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }

    .desktop-hero-text h1 span {
        background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .desktop-hero-text p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.6;
        margin-bottom: 24px;
        max-width: 420px;
    }

    .desktop-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #1e1b4b;
        font-weight: 700;
        font-size: 14px;
        font-family: var(--font);
        border: none;
        border-radius: var(--radius-full);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
    }

    .desktop-hero-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(245, 158, 11, 0.5);
    }

    .desktop-hero-stats {
        display: flex;
        gap: 32px;
        margin-top: 28px;
    }

    .desktop-hero-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .desktop-hero-stat-value {
        font-size: 22px;
        font-weight: 800;
        color: white;
    }

    .desktop-hero-stat-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .desktop-hero-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .desktop-hero-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 20px;
        backdrop-filter: blur(8px);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
        color: white;
        display: block;
    }

    .desktop-hero-card:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }

    .desktop-hero-card-icon {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .desktop-hero-card-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .desktop-hero-card-desc {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.5;
    }

    /* ── Wallet hero → compact horizontal bar ─── */
    .wallet-hero {
        border-radius: 0 !important;
        padding: 14px 36px !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .wallet-hero .hero-glow {
        display: none;
    }

    .wallet-hero::before,
    .wallet-hero::after {
        display: none;
    }

    .desktop-hero-inner {
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Greeting text in desktop */
    .desktop-hero-inner>div:first-child {
        font-size: 12px !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    /* Balance section in desktop */
    .desktop-hero-inner .wallet-balance-section {
        margin-bottom: 0 !important;
        display: flex;
        align-items: center;
        gap: 16px;
        padding-left: 20px;
        margin-left: 20px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .desktop-hero-inner .wallet-balance-section .wallet-detail-link {
        margin-top: 0;
        font-size: 11px;
    }

    .wallet-balance {
        font-size: 26px !important;
        letter-spacing: -0.5px;
    }

    .wallet-balance .currency {
        font-size: 14px !important;
    }

    /* Action buttons in desktop */
    .desktop-hero-inner .wallet-actions {
        margin-bottom: 0 !important;
        padding-left: 20px;
        margin-left: 20px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        gap: 8px !important;
    }

    .wallet-action-btn {
        padding: 8px 22px !important;
        font-size: 12px !important;
        border-radius: var(--radius-full) !important;
        white-space: nowrap;
    }

    /* Token badge in desktop - push to right */
    .desktop-hero-inner .wallet-info-row {
        margin-left: auto;
        padding-left: 20px;
    }

    .desktop-hero-inner .token-badge {
        padding: 10px 16px !important;
        border-radius: var(--radius-full) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* ── Referral bar → centered ─── */
    .referral-bar {
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: -8px !important;
        padding: 10px 36px !important;
    }

    /* ── Product grid → 5 columns with refined cards ─── */
    .product-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 18px !important;
    }

    .product-card {
        border-radius: 14px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden;
    }

    .product-card:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
        border-color: rgba(99, 102, 241, 0.15) !important;
    }

    .product-img {
        aspect-ratio: 1 / 1 !important;
    }

    .product-img img {
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .product-card:hover .product-img img {
        transform: scale(1.06) !important;
    }

    .product-info {
        padding: 12px 14px 16px !important;
    }

    .product-name {
        font-size: 13px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2;
    }

    .product-price {
        font-size: 16px !important;
    }

    .product-meta {
        font-size: 11px !important;
    }

    /* ── Promo grid → 4 columns ─── */
    .promo-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 18px !important;
    }

    /* ── Carousel wider slides ─── */
    .carousel-slide {
        min-width: calc(33.33% - 14px) !important;
        height: 200px !important;
        border-radius: 16px !important;
    }

    /* ── Recommended section → wider ─── */
    .recommended-scroll {
        gap: 24px;
        justify-content: center;
    }

    .recommended-icon {
        width: 72px !important;
        height: 72px !important;
        font-size: 30px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .recommended-icon:hover {
        transform: translateY(-4px) scale(1.08) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    }

    .recommended-label {
        font-size: 11.5px !important;
        max-width: 80px !important;
    }

    /* ── Section headers bigger ─── */
    .section-title {
        font-size: 22px !important;
        letter-spacing: -0.3px;
    }

    /* ── Marketplace desktop sidebar layout ── */
    .desktop-marketplace-wrapper {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 28px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 28px 36px;
    }

    .desktop-sidebar {
        display: block;
        position: sticky;
        top: 120px;
        align-self: start;
        background: var(--bg-card);
        border-radius: 16px;
        padding: 22px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
        border: none;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .desktop-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .desktop-sidebar::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }

    .desktop-sidebar-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .desktop-sidebar-cat {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
        text-decoration: none;
        border: none;
        background: none;
        width: 100%;
        font-family: var(--font);
        text-align: left;
    }

    .desktop-sidebar-cat:hover {
        background: linear-gradient(135deg, #eef2ff, #ede9fe);
        color: #4338ca;
        transform: translateX(4px);
    }

    .desktop-sidebar-cat.active {
        background: linear-gradient(135deg, #eef2ff, #ede9fe);
        color: #4338ca;
        font-weight: 600;
        box-shadow: inset 3px 0 0 #6366f1;
    }

    .desktop-sidebar-cat-icon {
        font-size: 17px;
        width: 28px;
        text-align: center;
    }

    .desktop-sidebar-section {
        margin-bottom: 22px;
    }

    .desktop-sidebar-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 10px;
    }

    .desktop-price-inputs {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .desktop-price-inputs input {
        flex: 1;
        padding: 9px 10px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-size: 13px;
        font-family: var(--font);
        text-align: center;
        outline: none;
        transition: all 0.25s;
        background: var(--bg);
    }

    .desktop-price-inputs input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .desktop-filter-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        font-family: var(--font);
        color: var(--text-muted);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
        text-align: left;
    }

    .desktop-filter-btn:hover {
        border-color: #6366f1;
        background: #eef2ff;
        transform: translateX(2px);
    }

    .desktop-filter-btn.active {
        background: linear-gradient(135deg, #eef2ff, #ede9fe);
        border-color: #6366f1;
        color: #4338ca;
        font-weight: 600;
    }

    /* ── Floating cart bar → centered ─── */
    #floating-cart-bar {
        left: 50% !important;
        transform: translateX(-50%);
        max-width: 440px;
        right: auto !important;
        bottom: 24px !important;
        border-radius: 20px !important;
    }

    /* ── Desktop footer ─── */
    .desktop-footer {
        display: block;
        background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
        color: rgba(255, 255, 255, 0.6);
        padding: 48px 36px 24px;
        margin-top: 48px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .desktop-footer-inner {
        max-width: 1320px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
    }

    .desktop-footer-brand {
        font-size: 26px;
        font-weight: 900;
        color: white;
        margin-bottom: 12px;
        letter-spacing: 2px;
    }

    .desktop-footer-desc {
        font-size: 13px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.4);
        max-width: 300px;
    }

    .desktop-footer-title {
        font-size: 13px;
        font-weight: 700;
        color: white;
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .desktop-footer-link {
        display: block;
        color: rgba(255, 255, 255, 0.45);
        text-decoration: none;
        font-size: 13px;
        padding: 5px 0;
        transition: all 0.25s;
    }

    .desktop-footer-link:hover {
        color: white;
        transform: translateX(4px);
    }

    .desktop-footer-copyright {
        max-width: 1320px;
        margin: 0 auto;
        padding-top: 24px;
        margin-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 12px;
        color: rgba(255, 255, 255, 0.25);
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .desktop-footer-socials {
        display: flex;
        gap: 12px;
    }

    .desktop-footer-social {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        font-size: 14px;
        transition: all 0.25s;
    }

    .desktop-footer-social:hover {
        background: rgba(99, 102, 241, 0.2);
        color: white;
        transform: translateY(-2px);
    }

    /* ── Quick Stats banner desktop ─── */
    .quick-stats {
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── Desktop section separator ─── */
    .desktop-section-divider {
        display: block;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border), transparent);
        margin: 32px 0;
    }
}

/* ── Larger desktop (≥1440px) ─── */
@media (min-width: 1440px) {
    .product-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ── Tablet (768-1023px) transition ─── */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        max-width: 720px !important;
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    .promo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Mobile-only classes ─── */
.mobile-only {
    display: block;
}

.desktop-only,
.desktop-only-flex,
.desktop-only-grid {
    display: none;
}

.desktop-section-divider {
    display: none;
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    .desktop-only-flex {
        display: flex !important;
    }

    .desktop-only-grid {
        display: grid !important;
    }
}

/* ── Pagination ────────────────────────────────── */
/* Livewire renders the Bootstrap pagination view (see config/livewire.php).
   This layout has no Bootstrap CSS, so re-create only what that markup
   needs: the responsive show/hide split and the link chrome. Scoped with
   :has() so the .d-none / .d-sm-none rules never leak to other markup. */
nav:has(.pagination) {
    display: flex;
    justify-content: space-between;
}
nav:has(.pagination) > .d-sm-none { display: flex; flex: 1 1 auto; justify-content: space-between; }
nav:has(.pagination) > .d-none { display: none; }

@media (min-width: 576px) {
    nav:has(.pagination) > .d-sm-none { display: none; }
    nav:has(.pagination) > .d-none {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
    }
}

.pagination {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.page-link {
    display: block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--blue-600);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.page-item.active .page-link {
    color: #fff;
    background: var(--blue-600);
    border-color: var(--blue-600);
}
.page-item.disabled .page-link {
    color: var(--text-light);
    cursor: default;
    pointer-events: none;
}
nav:has(.pagination) .small { font-size: 13px; }
nav:has(.pagination) .text-muted { color: var(--text-muted); }
nav:has(.pagination) .fw-semibold { font-weight: 600; }

/* Moved from the second, trailing <style> block in the same layout. */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MAXTON PATTERN LAYER
   ══════════════════════════════════════════════════════════════════════════
   Everything above this line is the original shell, moved out of the blade
   file unchanged. Everything below is the re-theme.

   It is appended rather than merged in on purpose. The rules above are spread
   across 177 class definitions used by 219 views nobody is reviewing in this
   pass; editing them in place would mean 177 chances to break a page that
   renders fine today. Appending means the re-theme is one contiguous, legible
   block that wins on cascade order alone — no !important, no specificity
   games — and reverting it is deleting from here down.

   Adopted from Maxton's mobile-app template: a fixed 70px gradient header, a
   bottom bar whose ACTIVE item is a filled pill behind the icon (its most
   recognisable trait), circular quick-action tiles, flat cards, Material
   Icons and Noto Sans. Not adopted: its colours.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Icon font ──────────────────────────────────────────────────────────
   Material Icons ships glyphs on a 24px em box and resolves names through
   ligatures, so an unstyled span flashes the literal text ("home",
   "storefront") until the font lands. Pinning the metrics keeps the swap
   from shifting layout. */
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Shell anchors carry no underline.

   The bespoke stylesheet never needed a global `a` reset because the chrome
   used inline <svg> icons — an SVG is an atomic inline, so no decoration is
   drawn across it. Material Icons resolve through ligature TEXT, so the
   moment the nav switched to <i> the browser default came back: the centre
   action button rendered a solid rgb(0,0,238) bar under its glyph.

   Scoped to the three chrome containers rather than set globally on `a`,
   because prose links inside the policy pages should keep their underline. */
.bottom-nav a,
.mobile-top-header a,
.desktop-topnav a {
    text-decoration: none;
}

/* Glyphs produced by the emoji sweep.

   An emoji renders at its element's font-size; .material-icons-outlined pins
   24px. Swapping one for the other without this would resize 513 call sites at
   once — the 56px empty-state marks would shrink, the 11px inline ones would
   balloon. Inheriting reproduces the size each site already had, so the sweep
   changes the glyph and nothing else.

   The -0.125em nudge is what Bootstrap Icons uses: icon fonts sit on the
   baseline differently from emoji, and without it they ride high against
   adjacent text. Mirrored in sunno.css for the desktop shells. */
.mi {
    font-size: inherit;
    line-height: inherit;
    vertical-align: -0.125em;
}

/* ── Mobile top header ──────────────────────────────────────────────────
   Rendered only by <x-shell-header>, never by the layout. Ten views used to
   hand-roll their own top bar out of .wallet-hero + .wallet-header, which is
   why the back link was "← Kembali" on four pages, "← Pesanan" on two and
   "‹ Semua Merchant" on another.

   STICKY, NOT FIXED. Phase 1 shipped this fixed, paired with a
   body.has-shell-header class to reserve the height — which cannot work: a
   Livewire full-page component renders into {{ $slot }} and has no way to put
   a class on <body>. Sticky keeps the element in flow, so it reserves its own
   height, pins on scroll exactly as fixed would, and needs no coordination
   with the layout at all. */
.mobile-top-header {
    position: sticky;
    top: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 16px 0;
    background-image: var(--grd-brand);
}

/* The top row. A column wrapper rather than a plain row because checkout puts
   a four-step progress indicator under the title, inside the same gradient
   band — the default slot carries that, and anything else a page needs to
   hang below the bar. */
.mobile-top-header .header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
}

/* Only pad the bottom when something is actually slotted in, so the plain
   variant stays exactly 70px. */
.mobile-top-header .header-extra:not(:empty) {
    padding-bottom: 14px;
}

/* Trailing pills — order status, item counts. Previously each page inlined
   its own rgba(255,255,255,0.15) chip. */
.mobile-top-header .header-pill {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
}

.mobile-top-header .header-meta {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.75);
}

/* Back variant: [back] [title over subtitle] [trailing]. The old markup was a
   three-column space-between, which cramped "Polisi Pemulangan & Bayaran
   Balik" into a middle column against a date on its right. */
.mobile-top-header .btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.25s;
}

.mobile-top-header .btn-back:active {
    background-color: rgba(255, 255, 255, 0.24);
}

.mobile-top-header .header-heading {
    flex: 1;
    min-width: 0;
}

.mobile-top-header .back-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-top-header .back-subtitle {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
}

.mobile-top-header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

/* The SUNNO mark is dark line art on transparent — the same inversion
   sunno.css applies in the admin sidebar. */
.mobile-top-header .brand img {
    width: 26px;
    height: 26px;
    filter: brightness(0) invert(1);
}

.mobile-top-header .brand .brand-accent {
    color: var(--amber-400);
}

.mobile-top-header .header-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-top-header .header-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.25s;
}

.mobile-top-header .header-link:active {
    background-color: rgba(255, 255, 255, 0.24);
}

.mobile-top-header .header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.mobile-top-header .badge-notify {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background-color: #f01414;
    border-radius: var(--radius-full);
}

/* The header is opt-in per page: a view gets one by rendering
   <x-shell-header>, and gets none by not rendering it. Because it is sticky
   rather than fixed there is nothing for the layout or <body> to reserve, so
   there is no global switch to keep in sync — the two states cannot drift.

   Pages still on their own .wallet-hero (home-page's balance hero,
   merchant-store-page's shop profile) are unaffected. Those are content, not
   chrome, and replacing them is a redesign rather than a refactor. */

/* ── Bottom bar ─────────────────────────────────────────────────────────
   The Maxton tell: the active item is a filled pill BEHIND the icon, not a
   recoloured glyph with a hairline above it. */
.bottom-nav {
    align-items: center;
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.05);
}

.nav-item {
    gap: 2px;
    padding: 6px 0;
    color: var(--text-muted);
}

/* Retire the old top hairline indicator — the pill replaces it. */
.nav-item.active::before {
    content: none;
}

.nav-item.active {
    color: var(--primary);
}

.nav-icon-wrap {
    height: auto;
    padding: 3px 14px;
    border-radius: var(--radius-full);
    background-color: var(--bg-muted);
    color: var(--text-muted);
    transition: all 0.3s var(--ease-spring);
}

.nav-item.active .nav-icon-wrap {
    color: #fff;
    background-image: var(--grd-brand);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
}

.nav-item:active .nav-icon-wrap {
    transform: scale(0.9);
}

/* Views still shipping inline SVG icons keep working — they inherit the pill
   exactly as the Material glyphs do. */
.nav-icon-wrap svg {
    stroke: currentColor;
    width: 20px;
    height: 20px;
}

.nav-item.active .nav-icon-wrap svg {
    stroke: #fff;
}

.nav-item .material-icons-outlined {
    font-size: 22px;
}

/* Raised centre action. Kept — it is SUNNO's own affordance, not Maxton's —
   but re-pointed at the brand gradient so it stops being the only flat blue
   left on the bar. */
.nav-center-btn {
    background: var(--grd-brand);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}

.nav-center-btn:hover {
    box-shadow: 0 8px 28px rgba(79, 70, 229, 0.45);
}

/* ── Bottom-bar labels and badges ───────────────────────────────────────
   Both were previously unnamed: the label was a bare <span> styled by
   .nav-item, the badge an inline style string 300 characters long repeated
   in the markup. handleNearMe() also used to find the label with
   querySelector('span:last-child'), which broke the moment anything else was
   appended to the item — hence the explicit .nav-label hook. */
.nav-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--grd-danger);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* ── Floating cart bar ──────────────────────────────────────────────────
   Same geometry as before; it was 45 lines of inline style across two
   elements, which is why its colours never tracked the tokens. */
#floating-cart-bar {
    position: fixed;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 8px) + 4px);
    left: 16px;
    right: 16px;
    z-index: 99;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: slideUp 0.35s var(--ease-smooth) both;
}

.floating-cart-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.floating-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--grd-brand);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.floating-cart-text {
    flex: 1;
    min-width: 0;
}

.floating-cart-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.floating-cart-sub {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.floating-cart-cta {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    background: var(--grd-success);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

/* The desktop search affordance was an emoji in a span; as a Material glyph
   it needs the metrics reset the emoji did not. */
.desktop-search-icon {
    font-size: 20px;
    line-height: 1;
}

/* ── Quick-action grid (Maxton .inner-link) ─────────────────────────────
   New component, available to any page that wants the circular shortcut row
   the template uses under its hero. */
.inner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    background-color: var(--bg-muted);
    transition: transform 0.2s var(--ease-spring);
}

.inner-link:active {
    transform: scale(0.92);
}

.inner-link.grd-brand,
.inner-link.grd-accent,
.inner-link.grd-success,
.inner-link.grd-danger {
    color: #fff;
}

.inner-link.grd-brand { background-image: var(--grd-brand); }
.inner-link.grd-accent { background-image: var(--grd-accent); }
.inner-link.grd-success { background-image: var(--grd-success); }
.inner-link.grd-danger { background-image: var(--grd-danger); }

.inner-link-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}

/* ── Cards and buttons ──────────────────────────────────────────────────
   Only the two properties Maxton actually changes: a flat single-drop
   elevation, and gradient brand buttons. Padding, radius and margins stay
   exactly as the 219 views expect them. */
.card {
    box-shadow: var(--shadow);
}

.btn-primary {
    background: var(--grd-brand);
    border: 0;
    color: #fff;
}

.btn-primary:active {
    filter: brightness(1.08);
}

/* ── Toasts ─────────────────────────────────────────────────────────────
   The old shell built these with an inline style string in JS, which is why
   they were the one surface that never picked up a token change. Same
   geometry and timing as before, now driven by classes. */
#toast-container {
    position: fixed;
    top: calc(70px + env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.sunno-toast {
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
    pointer-events: auto;
    animation: fadeIn 0.35s ease both;
}

.sunno-toast-success { background: var(--grd-success); }
.sunno-toast-error { background: var(--grd-danger); }

.sunno-toast.is-leaving {
    opacity: 0;
    transform: translateY(-12px);
    transition: all 0.3s ease;
}

/* ── Desktop ────────────────────────────────────────────────────────────
   The template is mobile-only; SUNNO also serves a desktop top bar. Give it
   the same gradient so both form factors read as one product, and drop the
   mobile chrome at the breakpoint the existing rules already use. */
@media (min-width: 1024px) {
    .mobile-top-header {
        display: none;
    }
}

/* The desktop bar keeps its own near-black gradient. It sits directly above
   .desktop-categories-bar, which is rgba(15,23,42,.95) — dropping the bright
   brand gradient in would leave a violet strip floating on near-black. It is
   already in the indigo family (#1e1b4b), so it reads as the same system
   without the clash.

   Its icons were inline SVGs sized by `.desktop-nav-link svg { width: 20px }`.
   That rule no longer matches now they are Material glyphs, which would
   otherwise default to the 24px em box and push the bar taller. */
.desktop-nav-link .material-icons-outlined {
    font-size: 20px;
    transition: transform 0.25s;
}

.desktop-nav-link:hover .material-icons-outlined {
    transform: scale(1.1);
}

.desktop-topnav-logo .material-icons-outlined {
    font-size: 22px;
}

/* ── Motion ─────────────────────────────────────────────────────────────
   The original shell animated regardless of the OS setting, and several of
   these keyframes run forever: pulseGlow on the centre button, floatOrb on
   the wallet hero. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}