/* ============================================================
   GAMEZONE - Main Stylesheet
   Dark gaming marketplace matching design screenshot
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --bg-primary:    #0d0d1a;
    --bg-secondary:  #13131f;
    --bg-card:       #1a1a2e;
    --bg-card-hover: #1e1e35;
    --border:        #2a2a3e;
    --border-light:  #333355;
    --primary:       #6d28d9;
    --primary-hover: #7c3aed;
    --primary-glow:  rgba(109,40,217,0.3);
    --text:          #e2e8f0;
    --text-muted:    #8892a4;
    --text-dim:      #666;
    --gold:          #f59e0b;
    --success:       #10b981;
    --danger:        #ef4444;
    --info:          #0ea5e9;
    --warning:       #f59e0b;
    --radius:        10px;
    --radius-sm:     6px;
    --radius-lg:     14px;
    --shadow:        0 4px 24px rgba(0,0,0,0.4);
    --transition:    0.2s ease;
    --header-h:      62px;
}

[data-theme="light"] {
    --bg-primary:    #f0f2f5;
    --bg-secondary:  #ffffff;
    --bg-card:       #ffffff;
    --bg-card-hover: #f8f9fa;
    --border:        #e2e8f0;
    --border-light:  #cbd5e1;
    --text:          #1e293b;
    --text-muted:    #64748b;
    --text-dim:      #94a3b8;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    max-width: 100%;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }
main { overflow-x: hidden; }

/* --- Preloader --- */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}
#preloader::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(109,40,217,.12) 0%, transparent 70%);
    animation: pl-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; position: relative; z-index: 2; }
.preloader-logo {
    font-family: 'Rajdhani', sans-serif; font-size: 2.6rem; font-weight: 800;
    margin-bottom: 28px; letter-spacing: -.02em;
    background: linear-gradient(135deg, #fff 0%, #c084fc 55%, var(--primary) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 24px rgba(109,40,217,.5));
    animation: pl-glow 2s ease-in-out infinite alternate;
}
.preloader-bar {
    width: 200px; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,.07);
    margin: 0 auto 20px; overflow: hidden;
}
.preloader-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), #c084fc, var(--primary), transparent);
    background-size: 300% 100%; border-radius: 3px;
    animation: pl-slide 1.6s ease-in-out infinite;
}
.preloader-dots { display: flex; justify-content: center; gap: 8px; }
.preloader-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary); display: block;
    animation: pl-dot 1.2s ease-in-out infinite;
}
.preloader-dots span:nth-child(2) { animation-delay: .2s; background: #9333ea; }
.preloader-dots span:nth-child(3) { animation-delay: .4s; background: #c084fc; }
@keyframes pl-pulse {
    0%, 100% { transform: scale(.85); opacity: .5; }
    50%  { transform: scale(1.15); opacity: 1; }
}
@keyframes pl-glow {
    from { filter: drop-shadow(0 0 8px rgba(109,40,217,.3)); }
    to   { filter: drop-shadow(0 0 28px rgba(192,132,252,.6)); }
}
@keyframes pl-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes pl-dot {
    0%, 60%, 100% { transform: scale(1); opacity: .35; }
    30% { transform: scale(1.7); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   HEADER
   ============================================================ */
.gz-header {
    position: sticky; top: 0; z-index: 1050;
    height: var(--header-h);
    background: rgba(13,13,26,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
}
.gz-header .container-fluid > .d-flex { height: var(--header-h); align-items: center; }

/* Logo */
.gz-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-wrap { display: flex; align-items: center; gap: 8px; }
.logo-icon { font-size: 1.4rem; color: var(--primary); }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; }
.logo-white { color: #fff; }
.logo-purple { color: var(--primary); }
.logo-sub { font-size: .55rem; letter-spacing: .12em; color: var(--text-muted); font-weight: 500; }

/* Nav Links */
.gz-navbar { gap: 2px !important; }
.gz-navbar .nav-link {
    color: var(--text-muted); font-size: .82rem; font-weight: 500;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.gz-navbar .nav-link:hover,
.gz-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,0.06); }
.nav-hot-badge {
    display: inline-block; background: #ef4444; color: #fff;
    font-size: .6rem; font-weight: 700; padding: 1px 5px;
    border-radius: 4px; margin-left: 3px; vertical-align: middle;
    letter-spacing: .05em;
}

/* Search */
.gz-search { max-width: 440px; }
.search-form-inner {
    display: flex; align-items: center;
    background: #1a1a2e; border: 1px solid var(--border);
    border-radius: 8px; padding: 0 12px; gap: 8px;
    transition: border-color var(--transition);
}
.search-form-inner:focus-within { border-color: var(--primary); }
.search-icon { color: var(--text-muted); font-size: .85rem; flex-shrink: 0; }
.search-input-main {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text); font-size: .83rem; padding: 9px 0;
}
.search-input-main::placeholder { color: var(--text-muted); }
.search-submit-btn {
    background: var(--primary); color: #fff; border: none;
    padding: 5px 12px; border-radius: 6px; font-size: .78rem;
    font-weight: 600; flex-shrink: 0;
}
.search-submit-btn:hover { background: var(--primary-hover); }

/* Icon Buttons */
.icon-btn {
    position: relative; background: none; border: none; outline: none;
    color: var(--text-muted); font-size: 1rem; padding: 6px 8px;
    border-radius: 8px; transition: color var(--transition), background var(--transition);
    display: flex; align-items: center;
}
.icon-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.icon-badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--primary); color: #fff;
    font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}
.badge-red { background: #ef4444 !important; }

/* Auth Buttons */
.btn-login, .btn-register {
    border: none; border-radius: 7px; font-size: .8rem;
    font-weight: 600; padding: 6px 14px; cursor: pointer;
    transition: var(--transition);
}
.btn-login { background: transparent; border: 1px solid var(--border-light); color: var(--text-muted); }
.btn-login:hover { border-color: var(--primary); color: var(--primary); }
.btn-register { background: var(--primary); color: #fff; }
.btn-register:hover { background: var(--primary-hover); }

/* User Button */
.user-btn-header {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 8px; padding: 5px 10px; cursor: pointer;
    transition: border-color var(--transition);
}
.user-btn-header:hover { border-color: var(--primary); }
.user-avatar-header { width: 28px; height: 28px; object-fit: cover; }
.user-info-header { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-name-header { font-size: .8rem; font-weight: 600; color: #fff; }
.user-role-header { font-size: .65rem; color: var(--text-muted); }

/* Sell Your Item Float */
.sell-item-float {
    position: fixed; top: 12px; right: 16px; z-index: 1100;
}
.sell-item-btn {
    display: flex; align-items: center;
    background: var(--primary); color: #fff;
    padding: 8px 16px; border-radius: 8px;
    font-size: .82rem; font-weight: 600;
    box-shadow: 0 4px 20px var(--primary-glow);
    transition: background var(--transition), box-shadow var(--transition);
}
.sell-item-btn:hover { background: var(--primary-hover); color: #fff; box-shadow: 0 6px 24px var(--primary-glow); }

/* Dropdowns */
.gz-dropdown {
    background: #1a1a2e; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px 0; min-width: 200px;
}
.gz-dropdown .dropdown-item {
    color: var(--text-muted); font-size: .83rem; padding: 8px 16px;
    transition: var(--transition);
}
.gz-dropdown .dropdown-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
.gz-dropdown .dropdown-item.active { color: var(--primary); background: rgba(109,40,217,0.1); }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.homepage-wrapper { padding: 12px 0 0; }

/* Section Blocks */
.section-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.sidebar-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.section-title { font-size: .95rem; font-weight: 700; margin: 0; color: #fff; }
.view-all-link { font-size: .78rem; color: var(--primary); font-weight: 600; transition: color var(--transition); }
.view-all-link:hover { color: var(--primary-hover); }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider-wrap { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.hero-swiper { border-radius: var(--radius-lg); }
.hero-slide {
    position: relative;
    min-height: 400px;
    background: linear-gradient(135deg,#0d0d1a 0%,#160e2a 40%,#0d1322 100%);
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
}
.hero-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; opacity: 0.65;
    transition: transform 6s ease, opacity .6s ease;
}
.swiper-slide-active .hero-bg-img { transform: scale(1.04); }
.hero-slide-overlay, .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        100deg,
        rgba(10,10,22,0.88) 0%,
        rgba(10,10,22,0.60) 45%,
        rgba(10,10,22,0.30) 100%
    );
}
/* Extra bottom fade so stats bar reads cleanly */
.hero-overlay::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(to top, rgba(10,10,22,0.75) 0%, transparent 100%);
}
.hero-content {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 36px 36px 20px;
    gap: 24px;
    flex: 1;
}
.hero-left { flex: 1; max-width: 500px; }
.hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.4rem; font-weight: 800; line-height: 1.12;
    color: #fff; margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.text-gradient {
    background: linear-gradient(90deg, #a855f7, var(--primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle {
    color: rgba(255,255,255,.72); font-size: .9rem; margin-bottom: 24px;
    line-height: 1.65; max-width: 380px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-hero-primary {
    display: inline-flex; align-items: center;
    background: var(--primary); color: #fff;
    padding: 11px 24px; border-radius: 9px;
    font-weight: 700; font-size: .9rem;
    box-shadow: 0 4px 24px var(--primary-glow);
    transition: var(--transition); letter-spacing: .01em;
}
.btn-hero-primary:hover { background: var(--primary-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px var(--primary-glow); }
.btn-hero-outline {
    display: inline-flex; align-items: center;
    border: 1.5px solid rgba(255,255,255,0.3); color: #fff;
    padding: 11px 24px; border-radius: 9px;
    font-weight: 600; font-size: .9rem;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
    transition: var(--transition);
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,.5); color: #fff; transform: translateY(-2px); }

/* Sale / promo card */
.hero-right { flex-shrink: 0; }
.hero-sale-card {
    background: rgba(10,10,22,0.65);
    border: 1px solid rgba(109,40,217,0.4);
    border-radius: 14px; padding: 22px 26px;
    text-align: center; backdrop-filter: blur(12px);
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.sale-tag {
    display: inline-block; color: rgba(255,255,255,.5);
    font-size: .62rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 8px;
}
.sale-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.05;
    margin-bottom: 6px;
}
.sale-percent { color: rgba(255,255,255,.6); font-size: .82rem; margin-bottom: 16px; }
.sale-percent span { color: #fbbf24; font-size: 1.4rem; font-weight: 800; display: block; line-height: 1.2; }
.btn-shop-now {
    display: block; background: linear-gradient(135deg, var(--primary), #7c3aed); color: #fff;
    padding: 10px 20px; border-radius: 9px;
    font-weight: 700; font-size: .88rem;
    box-shadow: 0 4px 18px var(--primary-glow);
    transition: var(--transition);
}
.btn-shop-now:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

/* Hero Stats Bar */
.ds-stats-bar {
    position: relative; z-index: 2;
    display: flex; gap: 10px;
    margin-top: 14px;
    margin-bottom: 24px;
}
.ds-stat {
    display: flex; align-items: center; gap: 14px;
    flex: 1; padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ds-stat-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.ds-stat-body { flex: 1; }
.ds-stat-num { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.2; display: flex; align-items: baseline; }
.ds-stat-lbl { display: block; font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.ds-stat-badge {
    margin-left: auto; font-size: .7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
}
.ds-stat-badge.up { color: #34d399; }
.ds-stat-badge.active { color: #34d399; }

/* Swiper Pagination — centered at bottom of content area */
.hero-pagination {
    bottom: 70px !important;
    left: 36px !important;
    width: auto !important;
}
.hero-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.35); width: 22px; height: 4px;
    border-radius: 2px; opacity: 1; transition: all .3s ease;
    margin: 0 3px !important;
}
.hero-pagination .swiper-pagination-bullet-active {
    background: var(--primary); width: 36px;
}
/* Navigation — centered vertically on the slide content (not over stats) */
.hero-prev, .hero-next {
    top: calc(50% - 31px) !important; /* offset so they sit in image area, not stats */
    bottom: auto !important;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    transition: var(--transition);
}
.hero-prev { left: 14px !important; right: auto !important; }
.hero-next { right: 14px !important; left: auto !important; }
.hero-prev::after, .hero-next::after { font-size: .75rem !important; color: #fff; font-weight: 700; }
.hero-prev:hover, .hero-next:hover { background: var(--primary); border-color: var(--primary); }

/* ============================================================
   CATEGORIES
   ============================================================ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}
@media (max-width: 1400px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px; border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    cursor: pointer; transition: var(--transition);
    text-align: center;
}
.cat-card:hover { border-color: var(--primary); background: rgba(109,40,217,0.06); transform: translateY(-2px); }
.cat-icon-wrap {
    width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px; flex-shrink: 0;
}
.cat-name { font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.cat-count { font-size: .65rem; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   FEATURED PRODUCTS GRID
   ============================================================ */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 1200px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .featured-grid { grid-template-columns: 1fr 1fr; } }

.featured-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    transition: var(--transition);
    display: flex; flex-direction: column;
}
.featured-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(109,40,217,0.15); }

.featured-img-wrap { position: relative; height: 140px; overflow: hidden; }
.featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.featured-card:hover .featured-img { transform: scale(1.05); }
.featured-img-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #0d0d1a);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 2rem;
}

.featured-badge {
    position: absolute; top: 8px; left: 8px;
    font-size: .65rem; font-weight: 800;
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: .08em;
}
.featured-badge.hot { background: #ef4444; color: #fff; }
.featured-badge.new { background: #10b981; color: #fff; }

.instant-badge {
    position: absolute; top: 8px; right: 32px;
    background: var(--primary); color: #fff;
    font-size: .6rem; padding: 2px 5px; border-radius: 4px;
}
.level-badge {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.7); color: #fff;
    font-size: .6rem; padding: 2px 6px; border-radius: 4px;
    font-weight: 600;
}
.wishlist-btn-card {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.5); border: none; outline: none;
    color: var(--gold); width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; cursor: pointer; transition: var(--transition);
    z-index: 2;
}
.wishlist-btn-card:hover { background: var(--gold); color: #000; }

.featured-info { padding: 10px; flex: 1; display: flex; flex-direction: column; }
.featured-game { font-size: .65rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.featured-title { font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3; flex: 1; }
.featured-meta { margin: 4px 0; }
.featured-rating { font-size: .68rem; color: var(--text-muted); }
.featured-rating i { color: var(--gold); margin-right: 2px; font-size: .6rem; }
.featured-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.featured-price { font-size: .95rem; font-weight: 800; color: var(--primary); }
.add-cart-btn {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; transition: var(--transition); flex-shrink: 0;
}
.add-cart-btn:hover { background: var(--primary-hover); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
    display: flex; gap: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.trust-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-item i { font-size: 1.2rem; flex-shrink: 0; }
.trust-item span { display: block; font-size: .78rem; font-weight: 600; color: var(--text); }
.trust-item small { display: block; font-size: .68rem; color: var(--text-muted); }

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Top Sellers */
.ds-seller-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.ds-seller-row:last-child { border-bottom: none; padding-bottom: 0; }
.ds-seller-row:hover .ds-s-name { color: var(--primary); }
.ds-rank-ico { width: 24px; text-align: center; flex-shrink: 0; font-weight: 700; color: #fff; }
.ds-s-av {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.ds-s-info { flex: 1; min-width: 0; }
.ds-s-name { font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
.ds-s-rating { display: flex; align-items: center; }
.ds-s-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.ds-s-sales { font-size: .85rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px; }
.ds-s-sales span { font-size: .6rem; color: var(--text-muted); font-weight: 500; }
.ds-online-pill2 { font-size: .65rem; color: var(--success); display: flex; align-items: center; gap: 3px; }

/* Live Activity */
.ds-live-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ds-live-row:last-child { border-bottom: none; }
.ds-live-av {
    width: 34px; height: 34px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0; background: var(--bg-primary);
}
.ds-live-av img { width: 100%; height: 100%; object-fit: cover; }
.ds-live-info { flex: 1; min-width: 0; }
.ds-live-txt { font-size: .75rem; color: var(--text-muted); line-height: 1.3; }
.ds-live-txt b { color: #fff; font-weight: 700; margin-right: 2px; }
.ds-live-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.ds-live-price { font-size: .8rem; font-weight: 700; color: #fff; }
.ds-live-time { font-size: .65rem; color: var(--text-muted); }
.ds-trend-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.ds-trend-row:last-child { border-bottom: none; }
.ds-trend-row:hover .ds-trend-name { color: var(--primary); }
.ds-trend-rank { font-size: .8rem; font-weight: 700; color: var(--text-muted); width: 18px; flex-shrink: 0; }
.ds-trend-img-wrap { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.ds-trend-img { width: 100%; height: 100%; object-fit: cover; }
.ds-trend-name { flex: 1; font-size: .8rem; font-weight: 600; color: var(--text); transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-trend-stat { font-size: .75rem; color: #ef4444; display: flex; align-items: center; gap: 4px; font-weight: 700; }

/* Why Choose Us */
.why-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.why-item:last-child { border-bottom: none; }
.why-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .9rem;
}
.why-item span { display: block; font-size: .82rem; font-weight: 700; color: var(--text); }
.why-item small { display: block; font-size: .68rem; color: var(--text-muted); }

/* ============================================================
   OLD PRICE BADGE
   ============================================================ */
.featured-old-price { font-size: .7rem; color: var(--text-dim); text-decoration: line-through; display: block; line-height: 1; }

/* ============================================================
   BROWSE BY TYPE
   ============================================================ */
.type-browse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 992px) { .type-browse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .type-browse-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.type-browse-card {
    position: relative; border-radius: 12px; overflow: hidden;
    height: 130px; display: block;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.type-browse-card:hover { border-color: var(--primary); }
.type-browse-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.type-browse-card:hover .type-browse-img { transform: scale(1.08); }
.type-browse-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,13,26,0.3) 0%, rgba(13,13,26,0.85) 100%);
}
.type-browse-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 10px 12px; display: flex; flex-direction: column;
}
.type-browse-icon { font-size: .9rem; color: var(--primary); margin-bottom: 4px; }
.type-browse-info strong { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.2; }
.type-browse-info span { font-size: .68rem; color: rgba(255,255,255,0.6); }

/* ============================================================
   PLATFORM STATS BAR
   ============================================================ */
.platform-stats-bar {
    display: flex; gap: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.pstat-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 14px 12px; border-right: 1px solid var(--border);
}
.pstat-item:last-child { border-right: none; }
.pstat-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .9rem;
}
.pstat-num {
    display: block; font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1;
}
.pstat-item small { display: block; font-size: .65rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 1199px) { .platform-stats-bar { flex-wrap: wrap; } .pstat-item { flex: 0 0 33.33%; border-bottom: 1px solid var(--border); } }
@media (max-width: 576px) { .pstat-item { flex: 0 0 50%; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 992px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial-card {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    transition: var(--transition);
}
.testimonial-card:hover { border-color: var(--primary); }
.t-stars { display: flex; gap: 2px; }
.t-text { font-size: .8rem; color: var(--text-muted); line-height: 1.6; flex: 1; margin: 0; font-style: italic; }
.t-author { display: flex; align-items: center; gap: 8px; }
.t-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.t-name { display: block; font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.t-role { display: block; font-size: .68rem; color: var(--text-muted); }

/* ============================================================
   COUPON BOX
   ============================================================ */
.coupon-codes-list { display: flex; flex-direction: column; gap: 8px; }
.coupon-chip {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-secondary); border: 1px dashed var(--border-light);
    border-radius: 8px; padding: 8px 12px; cursor: pointer;
    transition: var(--transition);
}
.coupon-chip:hover { border-color: var(--primary); background: rgba(109,40,217,0.06); }
.coupon-chip code { font-weight: 800; color: var(--primary); font-size: .82rem; flex: 1; font-family: monospace; }
.coupon-chip small { font-size: .68rem; color: var(--text-muted); flex: 2; }
.coupon-chip i { color: var(--text-dim); font-size: .75rem; }
.coupon-chip:hover i { color: var(--primary); }

/* ============================================================
   3D CARD EFFECT
   ============================================================ */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.18s ease;
    will-change: transform;
}
.card-3d:hover {
    box-shadow: 0 24px 60px rgba(109,40,217,0.25), 0 8px 24px rgba(0,0,0,0.5);
}

/* ============================================================
   GIFT CARDS
   ============================================================ */
.giftcard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 1200px) { .giftcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .giftcard-grid { grid-template-columns: repeat(2, 1fr); } }

.giftcard-card {
    border-radius: 12px; overflow: hidden;
    background: var(--bg-secondary); border: 1px solid var(--border);
    display: flex; flex-direction: column;
    transition: var(--transition);
    cursor: pointer;
}
.giftcard-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.gc-img-wrap {
    position: relative; height: 110px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.gc-img { max-width: 85%; max-height: 80%; object-fit: contain; position: relative; z-index: 1; }
.gc-shine {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.gc-info { padding: 10px; flex: 1; display: flex; flex-direction: column; }
.gc-name { font-size: .82rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.gc-desc { font-size: .68rem; color: var(--text-muted); }
.gc-badge {
    margin: 0 10px 10px; text-align: center;
    background: var(--primary); color: #fff;
    border-radius: 6px; padding: 5px;
    font-size: .75rem; font-weight: 700;
    transition: var(--transition);
}
.giftcard-card:hover .gc-badge { background: var(--primary-hover); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .how-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.how-step {
    text-align: center; padding: 20px 12px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 12px; position: relative;
    transition: var(--transition);
}
.how-step:hover { border-color: var(--primary); }
.how-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 16px var(--primary-glow);
}
.how-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem; font-weight: 800;
    background: linear-gradient(135deg, var(--primary), rgba(109,40,217,0.2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1; margin-bottom: 8px;
}
.how-title { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.how-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ============================================================
   NEWS GRID (Homepage)
   ============================================================ */
.news-grid-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 576px) { .news-grid-home { grid-template-columns: 1fr; } }

.news-card-home {
    display: flex; flex-direction: column;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    transition: var(--transition);
}
.news-card-home:hover { border-color: var(--primary); transform: translateY(-2px); }
.news-card-home.news-card-featured {
    grid-column: span 2;
    flex-direction: row;
}
@media (max-width: 576px) { .news-card-home.news-card-featured { flex-direction: column; grid-column: span 1; } }

.news-thumb-wrap {
    position: relative; overflow: hidden;
    flex-shrink: 0;
}
.news-card-home:not(.news-card-featured) .news-thumb-wrap { height: 130px; }
.news-card-home.news-card-featured .news-thumb-wrap { width: 220px; min-height: 140px; }
@media (max-width: 576px) { .news-card-home.news-card-featured .news-thumb-wrap { width: 100%; height: 160px; } }

.news-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.news-card-home:hover .news-thumb { transform: scale(1.04); }
.news-cat-tag {
    position: absolute; top: 8px; left: 8px;
    background: var(--primary); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.news-info-home { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.news-title-home { font-size: .83rem; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.news-excerpt-home { font-size: .75rem; color: var(--text-muted); line-height: 1.5; flex: 1; margin-bottom: 8px; }
.news-meta-home { display: flex; gap: 12px; font-size: .7rem; color: var(--text-dim); }

/* ============================================================
   MINI GAME GRID (Sidebar)
   ============================================================ */
.mini-game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.mini-game-card {
    border-radius: 8px; overflow: hidden;
    aspect-ratio: 1/1;
    border: 1px solid var(--border);
    display: block;
    transition: var(--transition);
}
.mini-game-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.mini-game-card:hover { border-color: var(--primary); }
.mini-game-card:hover img { transform: scale(1.1); }

/* ============================================================
   PROMO BANNER (Sidebar)
   ============================================================ */
.promo-banner-block { padding: 0; overflow: hidden; }
.promo-banner-link { position: relative; display: block; }
.promo-banner-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.promo-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,13,26,0.85) 0%, rgba(109,40,217,0.5) 100%);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.promo-banner-link:hover .promo-banner-overlay { background: linear-gradient(135deg, rgba(13,13,26,0.75) 0%, rgba(109,40,217,0.7) 100%); }
.promo-banner-content { text-align: center; }
.promo-banner-content strong { display: block; font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.promo-banner-content span { display: block; font-size: .75rem; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.promo-banner-btn {
    display: inline-block; background: var(--primary); color: #fff;
    padding: 7px 20px; border-radius: 7px;
    font-size: .8rem; font-weight: 700;
    box-shadow: 0 4px 16px var(--primary-glow);
    transition: var(--transition);
}
.promo-banner-link:hover .promo-banner-btn { background: var(--primary-hover); }

/* Trending rank number */
.trending-rank { font-size: .72rem; font-weight: 700; color: var(--text-dim); flex-shrink: 0; width: 22px; }

/* ============================================================
   PRODUCT CARDS (general reusable)
   ============================================================ */
.card-dark {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.product-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; transition: var(--transition);
    display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(109,40,217,0.15); transform: translateY(-2px); }
.product-card-img { position: relative; height: 160px; overflow: hidden; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.product-card-title { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.product-card-price { font-size: 1rem; font-weight: 800; color: var(--primary); }
.product-card-old-price { font-size: .75rem; color: var(--text-dim); text-decoration: line-through; }

/* ============================================================
   USER / SELLER DASHBOARD
   ============================================================ */
.user-dashboard-wrapper, .seller-area-wrapper { padding-top: 16px; }
.dash-sidebar {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    position: sticky; top: 74px;
}
.dash-user-info { padding: 16px; text-align: center; border-bottom: 1px solid var(--border); }
.dash-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; margin: 0 auto 10px;
    border: 2px solid var(--primary);
}
.avatar-placeholder {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700;
    margin: 0 auto 10px;
    border: 2px solid var(--primary);
}
.dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.dash-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: .83rem; font-weight: 500; color: var(--text-muted);
    transition: var(--transition);
}
.dash-nav-link i { width: 16px; text-align: center; }
.dash-nav-link:hover, .dash-nav-link.active { color: #fff; background: rgba(109,40,217,0.1); }
.dash-nav-link.active { color: var(--primary) !important; }
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--bg-secondary); border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
}
.admin-sidebar-logo {
    padding: 18px 16px;
    border-bottom: 1px solid var(--border);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem; font-weight: 700;
}
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; flex: 1; }
.admin-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: .83rem; color: var(--text-muted);
    transition: var(--transition);
}
.admin-nav-link i { width: 16px; text-align: center; }
.admin-nav-link:hover, .admin-nav-link.active { color: #fff; background: rgba(109,40,217,0.12); }
.admin-nav-link.active { color: var(--primary) !important; }
.admin-nav-divider { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); padding: 12px 14px 4px; }
.admin-content { flex: 1; min-width: 0; }
.admin-topbar {
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
    padding: 10px 24px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 500;
}
.admin-main { padding: 24px; }
.admin-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px;
    display: flex; align-items: center; gap: 14px;
}
.admin-stat-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

/* ============================================================
   TABLES
   ============================================================ */
.table { color: var(--text); }
.table th { color: var(--text-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-color: var(--border); }
.table td { border-color: var(--border); vertical-align: middle; font-size: .83rem; }
.table-dark { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.02); }
.table-hover tbody tr:hover { background: rgba(109,40,217,0.05); }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
    background: var(--bg-secondary); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    background: var(--bg-secondary); border-color: var(--primary);
    color: var(--text); box-shadow: 0 0 0 3px var(--primary-glow);
}
.form-control::placeholder { color: var(--text-dim); }
.form-label { font-size: .83rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; font-weight: 600; }
.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; }

/* ============================================================
   MODALS (Auth) — Gaming redesign
   ============================================================ */
.modal-content:not(.am-content) { background: var(--bg-card); border-color: var(--border); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }

/* Dialog sizing */
.auth-modal-dialog { max-width: 420px; }

/* Modal content */
.auth-modal-content {
    background: linear-gradient(160deg, #13131f 0%, #0d0d1a 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(109,40,217,0.15);
}
.auth-modal-content::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), #9333ea, #6d28d9);
}

/* Close button */
.auth-close-btn {
    position: absolute; top: 14px; right: 14px; z-index: 10;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; transition: var(--transition);
}
.auth-close-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Brand header */
.auth-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 28px 28px 20px;
}
.auth-brand-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #9333ea);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff;
    box-shadow: 0 0 20px var(--primary-glow);
    flex-shrink: 0;
}
.auth-brand-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1;
}
.auth-brand-name span { color: var(--primary); }
.auth-brand-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; letter-spacing: .05em; }

/* Tab switcher */
.auth-tabs {
    display: flex; position: relative;
    background: rgba(255,255,255,0.04);
    margin: 0 20px 4px;
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border);
}
.auth-tab {
    flex: 1; padding: 9px 12px;
    background: none; border: none;
    color: var(--text-muted); font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 600; cursor: pointer;
    border-radius: 7px; transition: color 0.2s;
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-tab.active { color: #fff; }
.auth-tab-indicator {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-radius: 7px;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 12px var(--primary-glow);
}
.auth-tab-indicator.right { transform: translateX(100%); }

/* Alert */
.auth-alert {
    margin: 10px 20px 0;
    padding: 10px 14px; border-radius: 8px; font-size: .85rem;
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5;
}
.auth-alert.success {
    background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6ee7b7;
}

/* Body */
.auth-body { padding: 18px 20px 16px; }

/* Fields */
.auth-field { margin-bottom: 14px; }
.auth-field label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .05em;
}
.auth-field .req { color: var(--primary); }
.auth-field-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.auth-field-header label { margin-bottom: 0; }
.auth-forgot-link { font-size: .78rem; color: var(--primary); transition: opacity .2s; }
.auth-forgot-link:hover { opacity: .8; }

/* Input wrap */
.auth-input-wrap {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 9px; overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(109,40,217,0.18);
}
.auth-input-icon {
    padding: 0 12px; color: var(--text-muted); font-size: .85rem;
    flex-shrink: 0; pointer-events: none;
}
.auth-input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text); font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 500;
    padding: 10px 12px 10px 0;
}
.auth-input::placeholder { color: var(--text-dim); }
.auth-eye-btn {
    background: none; border: none; color: var(--text-muted);
    padding: 0 12px; cursor: pointer; font-size: .85rem;
    transition: color .2s; height: 100%;
}
.auth-eye-btn:hover { color: var(--primary); }

/* Remember me checkbox */
.auth-remember { margin-bottom: 16px; }
.auth-check-label {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: .85rem; color: var(--text-muted);
    user-select: none;
}
.auth-check-label input[type="checkbox"] { display: none; }
.auth-checkmark {
    width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
    border: 2px solid var(--border); background: rgba(255,255,255,0.04);
    position: relative; transition: var(--transition);
}
.auth-check-label input:checked + .auth-checkmark {
    background: var(--primary); border-color: var(--primary);
}
.auth-check-label input:checked + .auth-checkmark::after {
    content: ''; position: absolute; left: 3px; top: 0px;
    width: 5px; height: 9px;
    border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* Submit button */
.auth-submit-btn {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border: none; border-radius: 10px; color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 700; letter-spacing: .04em;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 16px var(--primary-glow);
    margin-top: 4px;
}
.auth-submit-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, var(--primary) 100%);
    box-shadow: 0 6px 24px var(--primary-glow);
    transform: translateY(-1px);
}
.auth-submit-btn:active { transform: translateY(0); }
.auth-submit-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.auth-back-btn {
    width: 100%; padding: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); margin-top: 8px;
}
.auth-back-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Switch text */
.auth-switch-text {
    text-align: center; font-size: .82rem; color: var(--text-muted); margin-top: 14px; margin-bottom: 0;
}
.auth-switch-text a { color: var(--primary); font-weight: 600; }
.auth-switch-text a:hover { text-decoration: underline; }

/* Forgot header */
.auth-forgot-header { text-align: center; margin-bottom: 20px; }
.auth-forgot-icon {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
    background: rgba(109,40,217,0.15); border: 1px solid rgba(109,40,217,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--primary);
}
.auth-forgot-header h6 { color: #fff; font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.auth-forgot-header p { color: var(--text-muted); font-size: .82rem; margin: 0; }

/* Trust bar */
.auth-trust {
    display: flex; justify-content: center; gap: 20px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.auth-trust span {
    font-size: .72rem; color: var(--text-dim);
    display: flex; align-items: center; gap: 5px;
}
.auth-trust span i { color: var(--success); font-size: .65rem; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#gz-toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
}
.gz-toast-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 18px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow); font-size: .85rem;
    animation: slideIn 0.3s ease;
    max-width: 320px;
}
.gz-toast-item.success { border-left: 3px solid var(--success); }
.gz-toast-item.error { border-left: 3px solid var(--danger); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================
   FOOTER
   ============================================================ */
.gz-footer {
    background: var(--bg-primary); border-top: 1px solid var(--border);
    margin-top: 0; padding: 60px 0 20px;
    position: relative;
}
.gz-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.5), transparent);
}
.footer-brand { padding-right: 20px; }
.footer-brand .logo-text { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.footer-brand .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #7c3aed, #ec4899); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; }
.footer-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.footer-stats .stat-item { display: flex; flex-direction: column; }
.footer-stats .stat-value { font-size: 1.2rem; font-weight: 800; color: #fff; font-family: 'Rajdhani', sans-serif; }
.footer-stats .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.03); color: var(--text-muted);
    transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.05);
}
.footer-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
.footer-heading { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 20px; position: relative; display: inline-block; }
.footer-heading::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 20px; height: 2px; background: var(--primary); border-radius: 2px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: .9rem; color: var(--text-muted); transition: all 0.3s ease; display: inline-block; }
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.footer-trust li { font-size: .9rem; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.footer-trust li i { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-copy { font-size: .85rem; color: var(--text-muted); }
.footer-payment { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.02); padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.footer-pm-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-logo-wrap { display: inline-flex; align-items: center; opacity: .7; transition: opacity .2s; }
.pm-logo-wrap:hover { opacity: 1; }
.pm-logo-wrap img { height: 24px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.pm-text-badge { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); }

/* ============================================================
   PAGE-SPECIFIC: PRODUCT LISTING
   ============================================================ */
.listing-page .filter-card, .marketplace-page .filter-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); position: sticky; top: 74px;
}
.page-header h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.pagination .page-link {
    background: var(--bg-card); border-color: var(--border);
    color: var(--text-muted);
}
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ============================================================
   PAGE-SPECIFIC: PRODUCT DETAIL
   ============================================================ */
.product-description, .product-details { line-height: 1.8; font-size: .88rem; }
.review-item { transition: var(--transition); }
.price-block .fs-2 { font-family: 'Rajdhani', sans-serif; }

/* ============================================================
   NEWS / BLOG
   ============================================================ */
.news-card { border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); transition: var(--transition); }
.news-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(109,40,217,0.1); }
.post-content { font-size: .9rem; line-height: 1.9; }
.post-content img { max-width: 100%; border-radius: 8px; margin: 16px 0; }

/* ============================================================
   SELLER / USER PROFILE pages
   ============================================================ */
.timeline-simple .tl-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .83rem; }

/* ============================================================
   PAYMENT PAGES
   ============================================================ */
.checkout-page, .success-page, .failed-page { min-height: 70vh; padding: 40px 0; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.badge { font-weight: 600; font-size: .7rem; }
hr { border-color: var(--border); }
.border-bottom { border-color: var(--border) !important; }
.bg-dark { background: var(--bg-secondary) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================================
   FOOTER (extra classes from footer.php)
   ============================================================ */
.footer-logo { font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--text); }
.footer-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.footer-top { padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.footer-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-trust li { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.footer-copy { font-size: .78rem; color: var(--text-muted); }
.footer-payment { font-size: .78rem; }
.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--border); color: var(--text-muted);
    transition: var(--transition); margin-left: 6px;
}
.social-link:hover { background: var(--primary); color: #fff; }
.stat-item .stat-value { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; color: #fff; }
.stat-item .stat-label { font-size: .68rem; color: var(--text-muted); }

/* Back to Top */
.back-to-top {
    position: fixed; bottom: 24px; left: 24px; z-index: 900;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    opacity: 0; visibility: hidden;
    transition: var(--transition); cursor: pointer;
    box-shadow: 0 4px 16px var(--primary-glow);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--primary-hover); }

/* ============================================================
   ALERT TOAST (flash messages)
   ============================================================ */
.alert-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9998;
    padding: 14px 20px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    font-size: .85rem; font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: opacity 0.4s ease, transform 0.4s ease;
    max-width: 360px;
}
.alert-toast-success { background: var(--bg-card); border-left: 4px solid var(--success); color: var(--text); }
.alert-toast-danger, .alert-toast-error { background: var(--bg-card); border-left: 4px solid var(--danger); color: var(--text); }
.alert-toast-warning { background: var(--bg-card); border-left: 4px solid var(--warning); color: var(--text); }
.alert-toast i { font-size: 1rem; }
.alert-toast-success i { color: var(--success); }
.alert-toast-danger i, .alert-toast-error i { color: var(--danger); }

/* ============================================================
   MOBILE NAV — Hamburger + Offcanvas
   ============================================================ */

/* Hamburger button */
.gz-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 7px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.gz-hamburger:hover { border-color: var(--primary); }
.gz-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-muted);
    border-radius: 2px;
    transition: background 0.2s;
}
.gz-hamburger:hover span { background: var(--primary); }

/* Offcanvas backdrop */
.gz-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s;
}
.gz-offcanvas-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

/* Offcanvas drawer */
.gz-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #0f0f20;
    border-right: 1px solid var(--border);
    z-index: 1300;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.gz-offcanvas.open { transform: translateX(0); }
.gz-offcanvas-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 20px;
}
.gz-offcanvas-inner::-webkit-scrollbar { width: 3px; }
.gz-offcanvas-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Offcanvas head */
.gz-offcanvas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.gz-offcanvas-head .gz-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.gz-offcanvas-head .logo-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}
.gz-offcanvas-close {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.gz-offcanvas-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

/* User strip */
.gz-offcanvas-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(109,40,217,0.08);
    border-bottom: 1px solid var(--border);
}

/* Auth buttons strip */
.gz-offcanvas-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.gz-mob-btn-login {
    padding: 8px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.gz-mob-btn-login:hover { border-color: var(--primary); color: var(--primary); }
.gz-mob-btn-register {
    padding: 8px;
    border-radius: 7px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.gz-mob-btn-register:hover { background: var(--primary-hover); }

/* Search in offcanvas */
.gz-offcanvas-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.mob-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    gap: 8px;
}
.mob-search-wrap:focus-within { border-color: var(--primary); }
.mob-search-wrap i { color: var(--text-muted); font-size: .8rem; }
.mob-search-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: .83rem;
    padding: 9px 0;
    font-family: 'Rajdhani', sans-serif;
}
.mob-search-wrap input::placeholder { color: var(--text-dim); }

/* Sections */
.gz-offcanvas-section { padding: 10px 0; border-bottom: 1px solid var(--border); }
.gz-offcanvas-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 6px 16px 4px;
}

/* Nav links */
.gz-mob-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.gz-mob-link i, .gz-mob-link img { width: 18px; flex-shrink: 0; }
.gz-mob-link i { text-align: center; font-size: .85rem; color: var(--text-dim); }
.gz-mob-link:hover, .gz-mob-link.active {
    background: rgba(109,40,217,0.1);
    color: #fff;
}
.gz-mob-link.active i { color: var(--primary); }
.gz-mob-link.text-danger:hover { background: rgba(239,68,68,0.1); }

/* Sell CTA */
.gz-offcanvas-sell {
    padding: 16px;
    margin-top: auto;
}
.gz-mob-sell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    text-decoration: none;
    transition: background 0.2s;
}
.gz-mob-sell-btn:hover { background: var(--primary-hover); color: #fff; }

/* ── Mobile header tweaks ── */
@media (max-width: 575.98px) {
    .gz-search { min-width: 0; }
    .btn-register { padding: 6px 10px; font-size: .75rem; }
    .logo-sub { display: none; }
}
@media (max-width: 399px) {
    .gz-header .gap-2 { gap: 6px !important; }
    .icon-btn { padding: 5px 6px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── 1199px ── */
@media (max-width: 1199px) {
    .sell-item-float { display: none; }
    .hero-title { font-size: 1.9rem; }
    .hero-content { padding: 28px 24px 16px; }
    .hero-stats { padding: 0 24px; }
    .hero-stat { padding: 0 12px; }
    .hero-sale-card { min-width: 150px; padding: 16px 18px; }
    .sale-title { font-size: 1.7rem; }
    .trust-bar { flex-wrap: wrap; }
    .trust-item { flex: 0 0 50%; border-bottom: 1px solid var(--border); }
    .hero-pagination { left: 24px !important; }
}

/* ── 991px ── */
@media (max-width: 991px) {
    /* Homepage sidebar stacks below — give it some top spacing */
    .col-xl-4 .sidebar-block:first-child { margin-top: 0; }
}

/* ── 767px — tablet/phone boundary ── */
@media (max-width: 767px) {
    /* Hero: stack content vertically, hide sale card */
    .hero-slide { min-height: 300px; }
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px 12px;
        gap: 0;
    }
    .hero-left { max-width: 100%; width: 100%; }
    .hero-title { font-size: 1.45rem; margin-bottom: 8px; }
    .hero-subtitle { font-size: .82rem; margin-bottom: 14px; line-height: 1.55; }
    .btn-hero-primary, .btn-hero-outline { padding: 9px 16px; font-size: .82rem; }
    .hero-sale-card { display: none; }

    /* Hero stats: 2×2 grid */
    .hero-stats { flex-wrap: wrap; padding: 0; height: auto; }
    .hero-stat {
        flex: 0 0 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding: 10px 16px;
        gap: 8px;
    }
    .hero-stat:nth-child(1),
    .hero-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.07); }
    .hero-stat:nth-child(3),
    .hero-stat:nth-child(4) { border-bottom: none; }
    .hero-stat i { font-size: .88rem; }
    .hero-stat span { font-size: .82rem; }

    /* Swiper nav: hide on touch (swipe instead), pagination centered */
    .hero-prev, .hero-next { display: none !important; }
    .hero-pagination { bottom: 8px !important; left: 50% !important; transform: translateX(-50%); width: auto !important; }

    /* Featured grid stays 2-col */
    .featured-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .featured-img-wrap { height: 120px; }
    .featured-title { font-size: .78rem; }
    .featured-price { font-size: .9rem; }
    .featured-info { padding: 10px; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }

    /* Trust bar: single column */
    .trust-bar { flex-direction: column; }
    .trust-item { border-right: none; }

    /* Admin sidebar */
    .admin-sidebar { width: 200px; }

    /* Section spacing */
    .section-block, .sidebar-block { padding: 14px; }
    .section-header { margin-bottom: 12px; }

    /* Testimonials: 1 col */
    .testimonial-grid { grid-template-columns: 1fr 1fr; }

    /* How grid: 2 cols */
    .how-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .how-step { padding: 14px 12px; }
    .how-desc { font-size: .78rem; }

    /* Gift cards: 2 cols */
    .giftcard-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 575px ── */
@media (max-width: 575px) {
    .hero-slide { min-height: 270px; }
    .hero-title { font-size: 1.28rem; }
    .hero-subtitle { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-btns { gap: 8px; }
    .btn-hero-primary { font-size: .78rem; padding: 7px 13px; }
    .btn-hero-outline { font-size: .78rem; padding: 7px 13px; }

    /* Featured: tighter */
    .featured-img-wrap { height: 100px; }
    .featured-info { padding: 8px; }
    .featured-game { font-size: .6rem; }
    .featured-title { font-size: .72rem; }
    .featured-price { font-size: .82rem; }
    .featured-old-price { font-size: .7rem; }
    .add-cart-btn { width: 26px; height: 26px; font-size: .72rem; }

    /* Categories: 4 cols still fine */
    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .cat-icon-wrap { width: 40px; height: 40px; }
    .cat-icon-wrap img { width: 26px !important; height: 26px !important; }
    .cat-name { font-size: .65rem; }
    .cat-count { font-size: .58rem; }

    /* Testimonials */
    .testimonial-grid { grid-template-columns: 1fr; }

    /* Type browse: 2×2 */
    .type-browse-card { height: 110px; }
    .type-browse-info strong { font-size: .75rem; }

    /* Pop games */
    .pop-game-name { font-size: .75rem; }
    .pop-game-count { font-size: .6rem; }

    /* Platform stats: 2 cols */
    .pstat-item { flex: 0 0 50%; }
    .pstat-num { font-size: 1.1rem; }
    .pstat-icon { width: 30px; height: 30px; font-size: .78rem; }

    /* How */
    .how-step { padding: 12px 10px; }
    .how-icon-wrap { width: 40px; height: 40px; font-size: 1.1rem; }
    .how-title { font-size: .85rem; }

    /* Gift cards */
    .gc-img { max-width: 70%; }
    .gc-name { font-size: .78rem; }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hero-title { font-size: 1.15rem; }
    .admin-sidebar { display: none; }

    /* Product cards: 2 per row */
    .pcard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Collapse platform stats to 2 per row properly */
    .platform-stats-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .pstat-item { flex: unset; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .pstat-item:nth-child(2n) { border-right: none; }
    .pstat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ============================================================
   PRODUCT CARD (.pcard)
   ============================================================ */
.pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.pcard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.pcard:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(109,40,217,0.25), 0 2px 8px rgba(0,0,0,0.4);
}

/* Image area */
.pcard-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0d0d1a;
}
.pcard-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
}
.pcard:hover .pcard-img { transform: scale(1.06); }

/* Badges */
.pcard-badges {
    position: absolute; top: 8px; left: 8px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 2;
}
.pcard-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: .65rem; font-weight: 700; letter-spacing: .03em;
    line-height: 1.6;
}
.pcard-badge-sale   { background: var(--danger);  color: #fff; }
.pcard-badge-hot    { background: var(--gold);     color: #000; }
.pcard-badge-instant{ background: var(--primary);  color: #fff; }

/* Level badge */
.pcard-level {
    position: absolute; bottom: 8px; left: 8px; z-index: 2;
    background: rgba(0,0,0,0.7); color: var(--gold);
    font-size: .65rem; font-weight: 700;
    padding: 2px 7px; border-radius: 20px;
    border: 1px solid var(--gold);
}

/* Wishlist button */
.pcard-wish {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
    color: #aaa; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
    padding: 0;
}
.pcard-wish:hover, .pcard-wish.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pcard-wish.active i { font-weight: 900; }

/* Category tag */
.pcard-cattag {
    position: absolute; bottom: 8px; right: 8px; z-index: 2;
    background: rgba(109,40,217,0.8); color: #fff;
    font-size: .6rem; font-weight: 600; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase;
    max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Body */
.pcard-body {
    padding: 12px 13px 13px;
    display: flex; flex-direction: column; gap: 6px;
    flex: 1;
}

/* Seller */
.pcard-seller {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; color: var(--text-muted);
    text-decoration: none; transition: color 0.2s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard-seller:hover { color: var(--primary); }
.pcard-seller i { font-size: .65rem; color: var(--primary); }
.pcard-seller-lvl { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-size:.52rem; flex-shrink:0; margin-left:2px; }

/* Title */
.pcard-title {
    font-size: .85rem; font-weight: 600; color: var(--text);
    text-decoration: none; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.pcard-title:hover { color: var(--primary); }

/* Chips */
.pcard-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.pcard-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .6rem; font-weight: 500;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    color: var(--text-muted);
}
.pcard-chip i { font-size: .55rem; }
.pcard-chip-rank { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: var(--gold); }
.pcard-chip-dt   { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); color: #10b981; }

/* Rating */
.pcard-rating {
    display: flex; align-items: center; gap: 4px;
    font-size: .7rem; min-height: 16px;
}
.pcard-rating-num { font-weight: 700; color: var(--gold); font-size: .75rem; }
.pcard-rating-count { color: var(--text-muted); font-size: .65rem; }
.pcard-no-review { color: var(--text-dim); font-size: .7rem; font-style: italic; }

/* Footer */
.pcard-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.pcard-prices { display: flex; flex-direction: column; gap: 1px; }
.pcard-old-price { font-size: .68rem; color: var(--text-dim); text-decoration: line-through; }
.pcard-price { font-size: 1rem; font-weight: 700; color: #fff; }
.pcard-buy {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.pcard-buy:hover { background: var(--primary-hover); transform: scale(1.1); color: #fff; }

/* ── Rank overlay pill (account cards) ── */
.pcard-rank-overlay {
    position: absolute; bottom: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 20px;
    border: 1px solid transparent;
    backdrop-filter: blur(6px);
}
.pcard-rank-overlay i { font-size: .55rem; }

/* ── Account stats grid ── */
.pcard-acct-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 2px 0;
}
.pcard-acct-stat {
    display: flex; align-items: center; gap: 5px;
    font-size: .65rem; font-weight: 500; color: var(--text-muted);
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 7px;
    overflow: hidden; white-space: nowrap; min-width: 0;
}
.pcard-acct-stat span { overflow: hidden; text-overflow: ellipsis; }
.pcard-acct-stat i { font-size: .58rem; color: var(--primary); flex-shrink: 0; }
.pcard-acct-skin i { color: #ec4899; }
.pcard-acct-be   i { color: #3b82f6; }
.pcard-acct-riotid {
    grid-column: 1 / -1;
    background: rgba(109,40,217,.06);
    border-color: rgba(109,40,217,.2);
    color: var(--text);
    font-family: monospace;
    font-size: .63rem;
}

/* ── Rare items strip ── */
.pcard-rare-items {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 2px;
}
.pcard-rare-badge {
    display: inline-flex; align-items: center;
    font-size: .58rem; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22);
    color: #ef4444;
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-rare-more {
    background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.22); color: var(--primary);
}

/* Light theme adjustments */
[data-theme="light"] .pcard-acct-stat { background: rgba(0,0,0,.03); border-color: #e2e8f0; }
[data-theme="light"] .pcard-rare-badge { background: rgba(239,68,68,.06); }

/* ── Product show page — Account details block ── */
.pd3-acct-block {
    background: rgba(10,0,30,.55);
    border: 1px solid rgba(139,92,246,.15);
    border-radius: 18px;
    padding: 18px;
    margin-top: 18px;
    backdrop-filter: blur(10px);
    position: relative; overflow: hidden;
}
.pd3-acct-block::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,.5), transparent);
}
.pd3-acct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.pd3-acct-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 14px 8px;
    background: rgba(124,58,237,.07);
    border: 1px solid rgba(139,92,246,.16);
    border-radius: 14px; text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
    cursor: default;
}
.pd3-acct-tile:hover {
    border-color: rgba(139,92,246,.4);
    box-shadow: 0 0 20px rgba(124,58,237,.12), inset 0 0 20px rgba(124,58,237,.04);
    transform: translateY(-2px);
    background: rgba(124,58,237,.12);
}
.pd3-acct-tile-icon { font-size: 1.2rem; margin-bottom: 2px; }
.pd3-acct-tile-val  { font-size: .95rem; font-weight: 800; color: #e9d5ff; line-height: 1.1; }
.pd3-acct-tile-lbl  { font-size: .6rem; color: #4b5563; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

.pd3-acct-riotid {
    display: flex; align-items: center;
    margin-top: 12px; padding: 11px 14px;
    background: rgba(124,58,237,.06);
    border: 1px solid rgba(139,92,246,.14);
    border-radius: 12px; flex-wrap: wrap; gap: 6px;
}
.pd3-acct-rare { margin-top: 14px; }
.pd3-acct-rare-lbl {
    font-size: .78rem; font-weight: 700; color: #e2e8f0;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.pd3-acct-rare-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pd3-rare-pill {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22);
    color: #fbbf24;
    transition: border-color .2s, box-shadow .2s;
}
.pd3-rare-pill:hover { border-color: rgba(245,158,11,.45); box-shadow: 0 0 10px rgba(245,158,11,.14); }

/* ── Rare tag input (seller forms) ── */
.rare-tag-wrap {
    min-height: 42px; padding: 6px 10px;
    background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px;
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
    cursor: text; transition: border-color .2s;
}
.rare-tag-wrap:focus-within { border-color: var(--primary); }
.rare-tag-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.rare-tag-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .73rem; font-weight: 600; padding: 2px 8px 2px 10px;
    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
    color: #ef4444; border-radius: 20px;
}
.rare-tag-pill button {
    background: none; border: none; cursor: pointer; padding: 0;
    color: #ef4444; opacity: .7; font-size: .65rem; line-height: 1;
    display: flex; align-items: center;
}
.rare-tag-pill button:hover { opacity: 1; }
.rare-tag-input {
    background: none; border: none; outline: none; color: var(--text);
    font-size: .83rem; min-width: 180px; flex: 1;
}
.rare-tag-input::placeholder { color: var(--text-dim); }

/* ============================================================
   LISTING PAGE
   ============================================================ */
.listing-page { padding: 24px 0 40px; min-height: 70vh; overflow-x: hidden; }

/* Header */
.listing-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.listing-header-left { display: flex; align-items: center; gap: 14px; }
.listing-header-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(109,40,217,0.18); border: 1px solid rgba(109,40,217,0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.1rem;
    flex-shrink: 0;
}
.listing-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; }
.listing-sub { font-size: .8rem; color: var(--text-muted); margin: 2px 0 0; }

/* Sort chips */
.listing-header-right { gap: 6px; }
.sort-chip {
    padding: 5px 12px; border-radius: 20px; font-size: .75rem; font-weight: 500;
    color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border);
    text-decoration: none; transition: all 0.2s ease; white-space: nowrap;
}
.sort-chip:hover { border-color: var(--primary); color: var(--primary); }
.sort-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Filter Sidebar ── */
.filter-sidebar {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px;
    position: sticky; top: calc(var(--header-h) + 12px);
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.filter-sidebar::-webkit-scrollbar { width: 4px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.filter-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.filter-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.filter-section-title {
    font-size: .75rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 10px;
    display: flex; align-items: center;
}
.filter-section-title i { color: var(--primary); }

/* Search inside filter */
.filter-search-wrap {
    position: relative;
}
.filter-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .8rem; pointer-events: none;
}
.filter-search-input {
    width: 100%; padding: 8px 10px 8px 30px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-size: .82rem; transition: border-color 0.2s;
}
.filter-search-input:focus { outline: none; border-color: var(--primary); }
.filter-search-input::placeholder { color: var(--text-dim); }

/* Price range */
.price-range-row {
    display: flex; align-items: center; gap: 6px;
}
.price-range-sep { color: var(--text-muted); font-size: .85rem; flex-shrink: 0; }
.filter-input {
    flex: 1; min-width: 0;
    padding: 7px 9px; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: .8rem; transition: border-color 0.2s;
}
.filter-input:focus { outline: none; border-color: var(--primary); }
.filter-input::placeholder { color: var(--text-dim); }
input[type="number"].filter-input { -moz-appearance: textfield; }
input[type="number"].filter-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Delivery radio */
.delivery-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.delivery-opt {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 8px; border-radius: var(--radius-sm);
    background: var(--bg-secondary); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .75rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s; text-align: center;
    white-space: nowrap;
}
.delivery-opt input[type="radio"] { display: none; }
.delivery-opt:hover { border-color: var(--primary); color: var(--primary); }
.delivery-opt.active { background: rgba(109,40,217,0.18); border-color: var(--primary); color: #fff; }
.delivery-opt i { color: var(--primary); font-size: .7rem; }

/* Sort select (mobile) */
.filter-select {
    width: 100%; padding: 8px 10px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-size: .82rem; cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--primary); }

/* Filter action buttons */
.filter-actions { display: flex; gap: 8px; margin-top: 4px; }
.filter-apply-btn {
    flex: 1; padding: 8px 12px;
    background: var(--primary); color: #fff; border: none;
    border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.filter-apply-btn:hover { background: var(--primary-hover); }
.filter-reset-btn {
    padding: 8px 14px; background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: .8rem; font-weight: 500;
    text-decoration: none; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.filter-reset-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Category filter list */
.cat-filter-list { display: flex; flex-direction: column; gap: 3px; }
.cat-filter-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 8px;
    text-decoration: none; color: var(--text-muted);
    font-size: .8rem; font-weight: 500;
    transition: all 0.18s ease;
    border: 1px solid transparent;
}
.cat-filter-item:hover { background: rgba(109,40,217,0.08); color: var(--text); border-color: var(--border); }
.cat-filter-item.active { background: rgba(109,40,217,0.15); color: #fff; border-color: rgba(109,40,217,0.35); }
.cat-filter-icon {
    width: 30px; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cat-filter-count {
    margin-left: auto; font-size: .68rem;
    background: rgba(255,255,255,0.07); border-radius: 10px;
    padding: 1px 7px; color: var(--text-muted);
}
.cat-filter-item.active .cat-filter-count { background: rgba(109,40,217,0.3); color: #e0d4ff; }

/* Type filter */
.type-filter-list { display: flex; flex-direction: column; gap: 3px; }
.type-filter-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 8px;
    text-decoration: none; color: var(--text-muted);
    font-size: .8rem; font-weight: 500;
    transition: all 0.18s ease;
    border: 1px solid transparent;
}
.type-filter-item i { width: 16px; color: var(--primary); font-size: .8rem; }
.type-filter-item:hover { background: rgba(109,40,217,0.08); color: var(--text); border-color: var(--border); }
.type-filter-item.active { background: rgba(109,40,217,0.15); color: #fff; border-color: rgba(109,40,217,0.35); }

/* ── Listing Pagination ── */
.listing-pagination {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px;
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.pg-btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: .82rem; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none;
    transition: all 0.18s ease;
}
.pg-btn:hover:not(.disabled) { border-color: var(--primary); color: var(--primary); background: rgba(109,40,217,0.08); }
.pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.pg-dots { color: var(--text-dim); font-size: .85rem; padding: 0 4px; }
.pg-info { font-size: .75rem; color: var(--text-muted); margin-left: 8px; }

/* ── Empty State ── */
.listing-empty {
    text-align: center; padding: 60px 20px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.listing-empty-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(109,40,217,0.12); margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.8rem;
}
.listing-empty h5 { color: var(--text); font-size: 1.1rem; margin-bottom: 8px; }
.listing-empty p { color: var(--text-muted); font-size: .875rem; }
.listing-empty a { color: var(--primary); }

/* ============================================================
   POPULAR GAMES SECTION (Popüler Oyunlar)
   ============================================================ */
.pop-games-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.pop-game-card {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; aspect-ratio: 3/4;
    background: var(--bg-card); border: 1px solid var(--border);
    cursor: pointer; text-decoration: none;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pop-game-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 12px 36px rgba(109,40,217,0.3);
}
.pop-game-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.pop-game-card:hover .pop-game-img { transform: scale(1.08); }
.pop-game-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.pop-game-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 12px 12px;
}
.pop-game-name {
    display: block; font-size: .85rem; font-weight: 700; color: #fff;
    margin-bottom: 4px; line-height: 1.25;
}
.pop-game-count {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; color: rgba(255,255,255,0.65);
}
.pop-game-count i { color: var(--primary); }
.pop-game-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--primary); color: #fff;
    font-size: .6rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase;
}
.pop-game-rank {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    color: var(--gold); font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* ── Responsive additions ── */
@media (max-width: 1199px) {
    .pcard-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .pop-games-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .filter-sidebar { position: static; max-height: none; }
    .pop-games-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: collapse filter sidebar, add toggle button */
.mob-filter-toggle {
    display: none;
    align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: border-color .2s;
    margin-bottom: 12px; width: 100%;
}
.mob-filter-toggle:hover { border-color: var(--primary); color: var(--primary); }
.mob-filter-toggle i { color: var(--primary); }
@media (max-width: 767px) {
    .mob-filter-toggle { display: flex; }
    .filter-sidebar { display: none; }
    .filter-sidebar.mob-open { display: block; }
    .pcard-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .listing-header { flex-direction: column; align-items: flex-start; }
    .pop-games-grid { grid-template-columns: repeat(2, 1fr); }
    .listing-pagination { gap: 4px; }
    .pg-btn { min-width: 32px; height: 32px; font-size: .75rem; }
}
@media (max-width: 480px) {
    .pcard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pop-games-grid { grid-template-columns: repeat(2, 1fr); }
    .sort-chip { font-size: .7rem; padding: 4px 9px; }
}

/* ============================================================
   PRODUCT DETAIL PAGE — Dark Theme
   ============================================================ */
.product-detail-page { padding: 32px 0 60px; min-height: 70vh; }

/* Image gallery */
.product-img-swiper { border-radius: var(--radius-lg); overflow: hidden; }
.product-img-swiper .swiper-button-next,
.product-img-swiper .swiper-button-prev {
    width: 36px; height: 36px;
    background: rgba(13,13,26,0.8); border-radius: 50%;
    color: #fff;
}
.product-img-swiper .swiper-button-next::after,
.product-img-swiper .swiper-button-prev::after { font-size: .8rem !important; }

.product-thumb-swiper { margin-top: 10px; }
.product-thumb-swiper .swiper-slide {
    opacity: 0.55; transition: opacity 0.2s; cursor: pointer;
}
.product-thumb-swiper .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--primary); border-radius: 6px; }

/* Product Info Card */
.product-info-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    position: sticky; top: calc(var(--header-h) + 12px);
}
.product-price-big {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.4rem; font-weight: 800;
    color: var(--primary); line-height: 1;
}
.product-old-price-line {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.product-old-price-line del { color: var(--text-dim); font-size: .88rem; }
.product-discount-badge {
    background: #ef4444; color: #fff;
    font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}

/* Buy button */
.btn-buy-now {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff; border: none; border-radius: var(--radius);
    padding: 14px 24px; font-size: .95rem; font-weight: 700;
    width: 100%; cursor: pointer;
    box-shadow: 0 6px 24px var(--primary-glow);
    transition: all 0.2s ease;
}
.btn-buy-now:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--primary-glow); background: var(--primary-hover); color: #fff; }
.btn-buy-now:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Seller card */
.product-seller-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px;
}
.seller-avatar-big {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
}

/* Trust badges */
.product-trust-badges {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px;
}
.trust-badge-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; flex: 1; text-align: center;
}
.trust-badge-item i { font-size: 1.1rem; }
.trust-badge-item span { font-size: .7rem; color: var(--text-muted); }

/* Description / details block */
.product-desc-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px;
}
.product-desc-block h5 {
    font-size: .95rem; font-weight: 700; color: var(--text);
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.product-desc-block h5 i { color: var(--primary); }
.product-description, .product-details {
    font-size: .88rem; color: var(--text-muted);
    line-height: 1.9;
}

/* Features list */
.product-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.product-features li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .85rem; color: var(--text-muted);
}
.product-features li i { color: var(--success); margin-top: 2px; flex-shrink: 0; }

/* Reviews section */
.review-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
.review-item {
    padding: 14px 0; border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.review-item:last-child { border-bottom: none; padding-bottom: 0; }
.reviewer-avatar-sm {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.review-rating-stars i { color: var(--gold); font-size: .8rem; }
.review-rating-stars i.text-muted { color: var(--border) !important; }

/* Offer collapse form */
.offer-collapse-form {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; margin-top: 10px;
}

/* Product meta chips (platform, region, etc.) */
.product-meta-list {
    display: flex; flex-direction: column; gap: 8px;
    font-size: .83rem;
}
.product-meta-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--border);
}
.product-meta-row:last-child { border-bottom: none; }
.product-meta-row .meta-key { color: var(--text-muted); }
.product-meta-row .meta-val { font-weight: 600; color: var(--text); }

/* ============================================================
   ADMIN PANEL — Extra CSS
   ============================================================ */
.admin-wrapper {
    display: flex; min-height: 100vh;
}
.admin-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.admin-content {
    flex: 1; padding: 24px;
}

/* Stat cards (matching dashboard) */
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px;
    display: flex; align-items: center; gap: 14px;
    transition: var(--transition);
}
.stat-card:hover { border-color: var(--primary); }
.stat-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.stat-info .stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1;
}
.stat-info .stat-label { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

.stat-primary { border-left: 3px solid var(--primary); }
.stat-primary .stat-icon { background: rgba(109,40,217,0.15); color: var(--primary); }
.stat-success { border-left: 3px solid var(--success); }
.stat-success .stat-icon { background: rgba(16,185,129,0.15); color: var(--success); }
.stat-warning { border-left: 3px solid var(--warning); }
.stat-warning .stat-icon { background: rgba(245,158,11,0.15); color: var(--warning); }
.stat-info { border-left: 3px solid var(--info); }
.stat-info .stat-icon { background: rgba(14,165,233,0.15); color: var(--info); }
.stat-danger { border-left: 3px solid var(--danger); }
.stat-danger .stat-icon { background: rgba(239,68,68,0.15); color: var(--danger); }

/* Admin card header */
.card-header-gz {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.card-header-gz h6 { font-size: .9rem; font-weight: 700; margin: 0; }

/* Sidebar brand */
.sidebar-brand {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid var(--border);
}
.brand-link { text-decoration: none; }
.brand-name {
    display: block; font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem; font-weight: 800; color: #fff;
}
.brand-sub { display: block; font-size: .65rem; color: var(--text-muted); letter-spacing: .06em; }

/* Sidebar nav */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; flex: 1; overflow-y: auto; }
.nav-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); padding: 10px 8px 4px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: .83rem; color: var(--text-muted);
    text-decoration: none; transition: var(--transition);
}
.nav-item i { width: 16px; text-align: center; flex-shrink: 0; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(109,40,217,0.12); }
.nav-item.active { color: var(--primary) !important; }
.nav-item .badge { margin-left: auto; }
.sidebar-spacer { flex: 1; min-height: 20px; }

/* Alert cards */
.alert-card {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-radius: var(--radius);
    border: 1px solid; font-size: .83rem; font-weight: 500;
}
.alert-card-warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: var(--warning); }
.alert-card-info { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.3); color: var(--info); }
.alert-card-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: var(--danger); }

/* Seller items in admin */
.seller-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.seller-item:last-child { border-bottom: none; }
.seller-item:hover { background: rgba(255,255,255,0.02); }

/* Tables in admin */
.gz-table { margin: 0; }
.gz-table thead th {
    background: var(--bg-secondary); font-size: .73rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); padding: 10px 14px;
    border-color: var(--border);
}
.gz-table tbody td { padding: 12px 14px; vertical-align: middle; border-color: var(--border); font-size: .83rem; }
.gz-table tbody tr:hover { background: rgba(109,40,217,0.04); }

/* Topbar */
.gz-topbar {
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
    padding: 10px 24px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 500;
}

/* Admin forms */
.gz-input {
    background: var(--bg-secondary) !important; border: 1px solid var(--border) !important;
    color: var(--text) !important; border-radius: 8px;
    transition: border-color 0.2s;
}
.gz-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }
.gz-input::placeholder { color: var(--text-dim) !important; }

/* ============================================================
   WISHLIST PAGE
   ============================================================ */
.wishlist-page { padding: 32px 0 60px; min-height: 70vh; }
.wishlist-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.wishlist-header h2 { font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700; margin: 0; }
.wishlist-count {
    background: var(--primary); color: #fff;
    font-size: .75rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.wishlist-empty {
    text-align: center; padding: 80px 20px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.wishlist-empty-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(239,68,68,0.1); margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    color: #ef4444; font-size: 2rem;
}

/* ============================================================
   PUBLIC SELLER PROFILE
   ============================================================ */
.seller-profile-page { padding: 32px 0 60px; }
.seller-profile-header {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
    margin-bottom: 24px;
}
.seller-profile-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: #fff; flex-shrink: 0;
    border: 3px solid var(--primary-glow);
}
.seller-profile-name { font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; }
.seller-profile-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(109,40,217,0.15); border: 1px solid rgba(109,40,217,0.3);
    color: var(--primary); font-size: .75rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.seller-stat-box {
    text-align: center; padding: 12px;
    background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border);
}
.seller-stat-box .stat-n { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 800; color: #fff; display: block; }
.seller-stat-box small { font-size: .7rem; color: var(--text-muted); }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-page { padding: 32px 0 60px; min-height: 70vh; }
.search-hero {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
    margin-bottom: 28px; text-align: center;
}
.search-hero h1 { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; font-weight: 800; }
.search-results-count { font-size: .85rem; color: var(--text-muted); margin-bottom: 16px; }

/* ============================================================
   NOTIFICATIONS PAGE
   ============================================================ */
.notifications-page { padding: 32px 0 60px; min-height: 70vh; }
.notification-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    transition: var(--transition); cursor: pointer;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: rgba(255,255,255,0.02); }
.notification-item.unread { background: rgba(109,40,217,0.05); }
.notification-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .95rem;
}
.notification-content .notif-title { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.notification-content .notif-body { font-size: .78rem; color: var(--text-muted); }
.notification-content .notif-time { font-size: .7rem; color: var(--text-dim); margin-top: 4px; }
.unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); flex-shrink: 0; margin-top: 6px;
}

/* ============================================================
   BLOG / NEWS PAGES
   ============================================================ */
.news-page { padding: 32px 0 60px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.blog-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: var(--transition);
}
.blog-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(109,40,217,0.1); }
.blog-card-img { height: 200px; overflow: hidden; position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-cat-tag {
    display: inline-block; background: var(--primary); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em;
}
.blog-card-title { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 8px; }
.blog-card-title:hover { color: var(--primary); }
.blog-card-excerpt { font-size: .8rem; color: var(--text-muted); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.blog-card-meta { font-size: .72rem; color: var(--text-dim); display: flex; gap: 12px; }
.blog-card-meta i { color: var(--primary); }

/* Single blog post */
.blog-post-page { padding: 32px 0 60px; }
.post-header { margin-bottom: 28px; }
.post-title { font-family: 'Rajdhani', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.3; color: #fff; }
.post-featured-img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 28px; }
.post-content {
    font-size: .9rem; line-height: 1.9; color: var(--text-muted);
}
.post-content h2, .post-content h3, .post-content h4 { color: var(--text); margin: 24px 0 12px; }
.post-content img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.post-content a { color: var(--primary); }
.post-content blockquote {
    border-left: 3px solid var(--primary);
    padding: 12px 20px; margin: 20px 0;
    background: rgba(109,40,217,0.06);
    border-radius: 0 8px 8px 0;
    color: var(--text-muted);
}

/* ============================================================
   CHECKOUT / PAYMENT PAGES
   ============================================================ */
.checkout-page { padding: 40px 0 60px; min-height: 70vh; }
.checkout-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
.checkout-card-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 20px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
.checkout-card-title i { color: var(--primary); }
.order-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: .85rem;
}
.order-line:last-child { border-bottom: none; }
.order-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0 0; font-weight: 700; font-size: 1rem;
}
.order-total .total-price { font-size: 1.4rem; color: var(--primary); font-family: 'Rajdhani', sans-serif; }

.coupon-form { display: flex; gap: 8px; }
.coupon-form input { flex: 1; }

/* ============================================================
   EXTRA UTILITY CLASSES
   ============================================================ */
.gz-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0;
}
.gz-section-sub { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }

.page-breadcrumb {
    font-size: .78rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 16px;
}
.page-breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.page-breadcrumb a:hover { color: var(--primary); }
.page-breadcrumb i { font-size: .65rem; }

/* Font monospace helper */
.font-monospace { font-family: 'Courier New', Courier, monospace !important; }

/* Btn extra sizes */
.btn-xs { padding: 3px 8px; font-size: .72rem; }

/* Admin active nav fix */
.admin-sidebar .nav-item.text-danger:hover { color: var(--danger) !important; }

/* Responsive admin */
@media (max-width: 991px) {
    .admin-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 1050;
        transform: translateX(-100%); transition: transform 0.3s ease;
        width: 240px !important;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .sidebar-overlay {
        position: fixed; inset: 0; z-index: 1040;
        background: rgba(0,0,0,0.6);
    }
    .admin-wrapper { flex-direction: column; }
    .admin-content { padding: 16px; }
}

/* ============================================================
   BOOTSTRAP DARK-MODE OVERRIDES
   Force Bootstrap components to respect dark theme variables.
   Applied when data-theme="dark" (default).
   ============================================================ */

/* Target both dark default and explicit dark theme */
:root,
[data-theme="dark"] {
    color-scheme: dark;
}

/* Bootstrap card override */
[data-theme="dark"] .card,
:root .card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
:root .card-header,
:root .card-footer {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .card-body,
:root .card-body {
    color: var(--text) !important;
}

/* Bootstrap table override */
[data-theme="dark"] .table,
:root .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(109,40,217,0.07);
    --bs-table-border-color: var(--border);
    --bs-table-color: var(--text);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .table > :not(caption) > * > *,
:root .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .table thead th,
:root .table thead th,
[data-theme="dark"] .table th,
:root .table th {
    background: rgba(255,255,255,0.04) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] tbody tr:hover td,
:root tbody tr:hover td {
    background: rgba(109,40,217,0.08) !important;
}

/* Bootstrap modal override — skip auth modal */
[data-theme="dark"] .modal-content:not(.am-content),
:root .modal-content:not(.am-content) {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
:root .modal-header,
:root .modal-footer {
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Bootstrap dropdown override */
[data-theme="dark"] .dropdown-menu,
:root .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .dropdown-item,
:root .dropdown-item {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
:root .dropdown-item:hover,
:root .dropdown-item:focus {
    background: rgba(109,40,217,0.12) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .dropdown-divider,
:root .dropdown-divider {
    border-color: var(--border) !important;
}

/* Bootstrap nav/tabs override */
[data-theme="dark"] .nav-tabs,
:root .nav-tabs { border-color: var(--border) !important; }
[data-theme="dark"] .nav-tabs .nav-link,
:root .nav-tabs .nav-link { color: var(--text-muted) !important; border-color: transparent !important; }
[data-theme="dark"] .nav-tabs .nav-link.active,
:root .nav-tabs .nav-link.active {
    background: var(--bg-card) !important;
    border-color: var(--border) var(--border) var(--bg-card) !important;
    color: var(--text) !important;
}

/* Bootstrap list-group override */
[data-theme="dark"] .list-group-item,
:root .list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .list-group-item:hover,
:root .list-group-item:hover { background: var(--bg-card-hover) !important; }

/* Bootstrap alert override */
[data-theme="dark"] .alert,
:root .alert { border-radius: 8px; }

/* Bootstrap badge — keep readable */
[data-theme="dark"] .badge.bg-light,
:root .badge.bg-light { background: rgba(255,255,255,0.15) !important; color: var(--text) !important; }

/* Bootstrap bg-white / bg-light overrides */
[data-theme="dark"] .bg-white,
:root .bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] .bg-light,
:root .bg-light { background: var(--bg-secondary) !important; }
[data-theme="dark"] .text-dark,
:root .text-dark { color: var(--text) !important; }
[data-theme="dark"] .border,
:root .border { border-color: var(--border) !important; }
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
:root .border-top,
:root .border-bottom,
:root .border-start,
:root .border-end { border-color: var(--border) !important; }

/* Input/form controls already handled but reinforce */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
:root .form-control,
:root .form-select {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .form-control::placeholder,
:root .form-control::placeholder { color: var(--text-dim) !important; }
[data-theme="dark"] .form-label,
:root .form-label { color: var(--text-muted); }
[data-theme="dark"] .form-text,
:root .form-text { color: var(--text-dim); }
[data-theme="dark"] .input-group-text,
:root .input-group-text {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Light mode resets — only override when explicitly light */
[data-theme="light"] .card { background: #fff !important; border-color: #e2e8f0 !important; color: #1e293b !important; }
[data-theme="light"] .table { color: #1e293b; }
[data-theme="light"] .table > :not(caption) > * > * { color: #1e293b; background-color: transparent; }
[data-theme="light"] .form-control, [data-theme="light"] .form-select { background: #fff !important; border-color: #cbd5e1 !important; color: #1e293b !important; }
[data-theme="light"] .dropdown-menu { background: #fff !important; }
[data-theme="light"] .dropdown-item { color: #334155 !important; }
[data-theme="light"] .modal-content { background: #fff !important; color: #1e293b !important; }
[data-theme="light"] .text-muted { color: #64748b !important; }

/* ============================================================
   PRODUCT DETAIL — IMAGE GALLERY
   ============================================================ */
.pd-gallery-wrap { border-radius: var(--radius-lg); overflow: hidden; }

/* Main swiper */
.pd-main-swiper {
    background: #0a0a14;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.pd-img-zoom { display: block; position: relative; overflow: hidden; }
.pd-main-img {
    width: 100%;
    height: 440px;
    object-fit: contain;
    background: linear-gradient(135deg, #13131f 0%, #1a1a2e 100%);
    display: block;
    transition: transform 0.35s ease;
}
.pd-img-zoom:hover .pd-main-img { transform: scale(1.03); }

/* Zoom icon */
.pd-zoom-icon {
    position: absolute;
    bottom: 12px; right: 14px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pd-img-zoom:hover .pd-zoom-icon { opacity: 1; }

/* Nav buttons */
.pd-nav-btn {
    width: 36px !important; height: 36px !important;
    background: rgba(109,40,217,0.85) !important;
    border-radius: 50% !important;
    color: #fff !important;
}
.pd-nav-btn::after { font-size: .75rem !important; font-weight: 900 !important; }
.pd-nav-btn:hover { background: var(--primary) !important; }

/* Pagination bullets */
.pd-pagination { bottom: 10px !important; }
.pd-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.5); }
.pd-pagination .swiper-pagination-bullet-active { background: var(--primary) !important; }

/* Image counter badge */
.pd-img-counter {
    position: absolute;
    top: 12px; left: 14px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: .78rem;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 10;
    backdrop-filter: blur(4px);
}

/* Thumbnail strip */
.pd-thumb-strip { padding: 4px 0; }
.pd-thumb-swiper { overflow: hidden; }
.pd-thumb-slide {
    width: 88px !important;
    height: 68px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.pd-thumb-slide.swiper-slide-thumb-active { border-color: var(--primary); }
.pd-thumb-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.pd-thumb-slide:hover .pd-thumb-img { transform: scale(1.08); }
.pd-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    transition: opacity 0.2s;
}
.pd-thumb-slide.swiper-slide-thumb-active .pd-thumb-overlay { opacity: 0; }

/* Fallback single image */
.pd-fallback-img {
    height: 380px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #13131f, #1a1a2e);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.pd-fallback-img img {
    max-height: 340px; max-width: 90%;
    object-fit: contain; opacity: 0.85;
}
.pd-fallback-badge {
    position: absolute;
    bottom: 14px; left: 50%; transform: translateX(-50%);
    background: rgba(109,40,217,0.75);
    color: #fff;
    font-size: .75rem;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ============================================================
   HOME SIDEBAR — GIFT CARD STORE
   ============================================================ */
.gift-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.gift-card-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    text-decoration: none;
    display: flex; flex-direction: column;
    align-items: center; gap: 5px;
}
.gift-card-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.gift-card-img-wrap {
    width: 44px; height: 32px;
    border-radius: 4px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
}
.gift-card-img-wrap img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.gift-card-name {
    font-size: .67rem;
    color: var(--text-muted);
    line-height: 1.2;
    font-weight: 600;
}

/* ============================================================
   HOME SIDEBAR — PLATFORM QUICK LINKS
   ============================================================ */
.platform-links { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.platform-link-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.platform-link-item:hover {
    border-color: var(--primary);
    background: rgba(109,40,217,0.08);
}
.platform-link-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.platform-link-info { flex: 1; min-width: 0; }
.platform-link-title {
    font-size: .82rem; font-weight: 700; color: var(--text);
    display: block; line-height: 1.2;
}
.platform-link-sub {
    font-size: .7rem; color: var(--text-muted); line-height: 1.3;
    display: block; margin-top: 2px;
}
.platform-link-arr { color: var(--text-dim); font-size: .7rem; }
.platform-link-item:hover .platform-link-arr { color: var(--primary); }

/* ============================================================
   HOME SIDEBAR — MINI REVIEWS
   ============================================================ */
.mini-review-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mini-review-item {
    display: flex; gap: 10px;
    padding: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.mini-review-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.mini-review-body { flex: 1; min-width: 0; }
.mini-review-name { font-size: .78rem; font-weight: 700; color: var(--text); }
.mini-review-stars { color: var(--gold); font-size: .6rem; line-height: 1; margin: 2px 0; }
.mini-review-text { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.mini-review-time { font-size: .65rem; color: var(--text-dim); margin-top: 3px; }

/* ============================================================
   HOME SIDEBAR — NEWSLETTER
   ============================================================ */
.newsletter-box {
    background: linear-gradient(135deg, rgba(109,40,217,0.15), rgba(147,51,234,0.08));
    border: 1px solid rgba(109,40,217,0.35);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    margin-top: 0;
}
.newsletter-box .newsletter-icon {
    font-size: 2rem; margin-bottom: 8px; color: var(--primary);
}
.newsletter-box h6 {
    font-size: .9rem; font-weight: 800; color: #fff;
    margin-bottom: 4px;
}
.newsletter-box p {
    font-size: .75rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5;
}
.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .8rem;
    padding: 9px 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: 'Rajdhani', sans-serif;
}
.newsletter-input::placeholder { color: var(--text-dim); }
.newsletter-input:focus { border-color: var(--primary); }
.newsletter-btn {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px;
    font-size: .82rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.newsletter-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* ============================================================
   PRODUCT DETAIL v2  (pdv2-*)
   ============================================================ */

/* ── Page wrapper ── */
.pdv2-page { padding: 20px 0 40px; }

/* ── Gallery ── */
.pdv2-gallery-wrap { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }

.pdv2-main-swiper {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #12122a;
    border: 1px solid var(--border);
}
.pdv2-img-link {
    display: block;
    position: relative;
    line-height: 0;
    overflow: hidden;
}
.pdv2-main-img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    background: #12122a;
    display: block;
    transition: transform 0.3s;
}
.pdv2-img-link:hover .pdv2-main-img { transform: scale(1.03); }
.pdv2-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pdv2-img-link:hover .pdv2-zoom-hint { opacity: 1; }

/* Nav buttons */
.pdv2-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(109,40,217,0.85);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.pdv2-nav-btn:hover { background: var(--primary); transform: translateY(-50%) scale(1.1); }
.pdv2-prev { left: 10px; }
.pdv2-next { right: 10px; }

/* Counter badge */
.pdv2-img-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.6);
    color: #ccc;
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 10;
    pointer-events: none;
}

/* Thumbnail strip */
.pdv2-thumb-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}
.pdv2-thumb-nav {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: .72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.pdv2-thumb-nav:hover { background: var(--primary); color: #fff; }

.pdv2-thumb-swiper { flex: 1; overflow: hidden; }
.pdv2-thumb-slide {
    width: 72px !important;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: #12122a;
    flex-shrink: 0;
}
.pdv2-thumb-slide.active,
.pdv2-thumb-slide:hover { border-color: var(--primary); }
.pdv2-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback (no images) */
.pdv2-fallback-img {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #12122a;
    border: 1px solid var(--border);
}
.pdv2-fallback-img img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    display: block;
}

/* ── Badges row ── */
.pdv2-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pdv2-cat-badge {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(109,40,217,0.18);
    color: var(--primary);
    border: 1px solid rgba(109,40,217,0.3);
}
.pdv2-type-badge {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
}

/* ── Title ── */
.pdv2-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 12px;
    font-family: 'Rajdhani', sans-serif;
}

/* ── Rating row ── */
.pdv2-rating-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .85rem;
    color: var(--text-muted);
}
.pdv2-rating-val { font-weight: 800; color: #f59e0b; font-size: .95rem; }
.pdv2-review-count { color: var(--text-muted); text-decoration: none; }
.pdv2-review-count:hover { color: var(--primary); }
.pdv2-sep { color: var(--border); }
.pdv2-views-count { font-size: .8rem; color: var(--text-dim); }

/* ── Specs table ── */
.pdv2-specs-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.pdv2-spec-row {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    font-size: .85rem;
    border-bottom: 1px solid var(--border);
}
.pdv2-spec-row:last-child { border-bottom: none; }
.pdv2-spec-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.pdv2-spec-key {
    width: 110px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: .8rem;
}
.pdv2-spec-val { flex: 1; color: var(--text); font-weight: 600; }
.pdv2-instant-badge {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── Section blocks ── */
.pdv2-section { border-top: 1px solid var(--border); padding-top: 16px; }
.pdv2-section-title {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.pdv2-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pdv2-avg-rating {
    font-size: .85rem;
    font-weight: 700;
    color: #f59e0b;
}
.pdv2-description {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}
.pdv2-description::-webkit-scrollbar { width: 4px; }
.pdv2-description::-webkit-scrollbar-track { background: transparent; }
.pdv2-description::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Features grid ── */
.pdv2-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pdv2-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    color: var(--text-muted);
}
.pdv2-feature-item .fa-check-circle { color: #10b981; font-size: .85rem; flex-shrink: 0; margin-top: 2px; }

/* ── Reviews ── */
.pdv2-review-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.pdv2-review-item:last-child { border-bottom: none; }
.pdv2-review-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdv2-review-body { flex: 1; }
.pdv2-review-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: .85rem;
}
.pdv2-review-stars { display: flex; gap: 2px; }
.pdv2-review-stars .fa-star { color: #f59e0b; font-size: .75rem; }
.pdv2-review-stars .fa-star.opacity-25 { opacity: 0.25; }
.pdv2-review-text { font-size: .83rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ── Buy panel ── */
.pdv2-buy-panel { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }

/* Seller card */
.pdv2-seller-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.pdv2-seller-top { display: flex; gap: 12px; margin-bottom: 12px; }
.pdv2-seller-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.pdv2-seller-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    border: none;
}
.pdv2-seller-meta { flex: 1; }
.pdv2-seller-name {
    font-size: .92rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}
.pdv2-verified { color: #3b82f6; font-size: .8rem; }
.pdv2-seller-level {
    font-size: .72rem;
    color: #f59e0b;
    font-weight: 700;
    margin-bottom: 4px;
}
.pdv2-seller-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.pdv2-seller-rating .star-rating { font-size: .72rem; }
.pdv2-seller-online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #10b981;
    font-weight: 600;
}
.pdv2-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    display: inline-block;
    animation: pdv2-pulse 2s infinite;
}
@keyframes pdv2-pulse {
    0%, 100% { box-shadow: 0 0 4px #10b981; }
    50% { box-shadow: 0 0 10px #10b981; }
}
.pdv2-seller-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdv2-btn-seller-view {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(109,40,217,0.15);
    color: var(--primary);
    border: 1px solid rgba(109,40,217,0.3);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.pdv2-btn-seller-view:hover { background: rgba(109,40,217,0.28); color: var(--primary); }
.pdv2-btn-seller-msg {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card2, #1a1a2e);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pdv2-btn-seller-msg:hover { border-color: var(--primary); color: var(--primary); }

/* Price box */
.pdv2-price-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.pdv2-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.pdv2-price-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}
.pdv2-old-price {
    font-size: .82rem;
    color: var(--text-dim);
    margin-right: 6px;
}
.pdv2-discount-pct {
    font-size: .72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    margin-right: 4px;
    vertical-align: middle;
}
.pdv2-price-big {
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: -0.01em;
}

/* Buy / Cart buttons */
.pdv2-btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: .95rem;
    font-weight: 800;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(109,40,217,0.35);
    margin-bottom: 8px;
}
.pdv2-btn-buy:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(109,40,217,0.5);
    color: #fff;
}
.pdv2-btn-buy.disabled, .pdv2-btn-buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.pdv2-btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: .88rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    margin-bottom: 10px;
}
.pdv2-btn-cart:hover { border-color: var(--primary); color: var(--primary); }

/* Secure badge */
.pdv2-secure-badge {
    text-align: center;
    font-size: .75rem;
    color: var(--text-dim);
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* Trust list */
.pdv2-trust-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pdv2-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.pdv2-trust-item:last-child { border-bottom: none; }
.pdv2-trust-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Offer button */
.pdv2-btn-offer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary);
    border: 1px dashed rgba(109,40,217,0.5);
    font-size: .85rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.pdv2-btn-offer:hover { background: rgba(109,40,217,0.1); border-color: var(--primary); }

/* Offer form */
.pdv2-offer-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}
.pdv2-offer-form .form-control {
    background: rgba(0,0,0,0.25);
    border-color: var(--border);
    color: var(--text);
    font-size: .83rem;
    font-family: 'Rajdhani', sans-serif;
}
.pdv2-offer-form .form-control:focus { border-color: var(--primary); box-shadow: none; }
.pdv2-offer-form .form-label { color: var(--text-muted); }

/* Footer links */
.pdv2-footer-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 6px;
}
.pdv2-footer-link {
    font-size: .75rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.pdv2-footer-link:hover { color: var(--text-muted); }

/* ── Bottom "more" sections ── */
.pdv2-more-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
}
.pdv2-seller-products-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .pdv2-main-img { height: 300px; }
    .pdv2-fallback-img img { height: 280px; }
    .pdv2-price-big { font-size: 1.6rem; }
    .pdv2-seller-products-scroll { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
    /* Buy panel not sticky on mobile */
    .pdv2-buy-panel.sticky-lg-top { position: static !important; }
    .pdv2-gallery-wrap.sticky-lg-top { position: static !important; }
    /* Tighten buy panel on mobile */
    .pdv2-price-box { padding: 14px; }
    .pdv2-seller-card { padding: 14px; }
}
@media (max-width: 575.98px) {
    .pdv2-main-img { height: 220px; }
    .pdv2-fallback-img img { height: 220px; }
    .pdv2-features-grid { grid-template-columns: 1fr; }
    .pdv2-price-big { font-size: 1.35rem; }
    .pdv2-title { font-size: 1.2rem; }
    .pdv2-seller-products-scroll { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .pdv2-more-section { padding: 14px; }
    .pdv2-thumb-slide { width: 60px !important; height: 46px; }
    .pdv2-spec-key { width: 90px; }
}

/* ============================================================
   NEWS PAGES
   ============================================================ */

/* Page header shared */
.gz-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.gz-page-sub {
    color: var(--text-dim);
    margin: 4px 0 0;
    font-size: .92rem;
}

/* Search bar */
.news-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.news-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-dim);
    font-size: .85rem;
    pointer-events: none;
}
.news-search-wrap input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 8px 14px 8px 34px;
    font-size: .9rem;
    width: 220px;
    outline: none;
    transition: border-color .2s;
}
.news-search-wrap input::placeholder { color: var(--text-dim); }
.news-search-wrap input:focus { border-color: var(--primary); }

/* Grid */
.news-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* Card */
.news-index-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.news-index-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(109,40,217,.15);
}

/* Thumbnail */
.news-index-thumb-link {
    display: block;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.news-index-thumb {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.news-index-card:hover .news-index-thumb { transform: scale(1.04); }

.news-index-thumb-placeholder {
    width: 100%;
    height: 190px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 2rem;
}

/* Category badge over image */
.news-index-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Body */
.news-index-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-index-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
.news-index-title a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s;
}
.news-index-title a:hover { color: var(--primary); }

.news-index-excerpt {
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0 0 12px;
    flex: 1;
}

.news-index-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--text-dim);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.news-index-meta span { display: flex; align-items: center; gap: 4px; }

.news-index-readmore {
    margin-left: auto;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: gap .2s;
}
.news-index-readmore:hover { gap: 8px; color: var(--primary-light, #7c3aed); }

/* ── News Detail (show page) ── */
.news-page { min-height: 60vh; }

.news-detail-hero {
    position: relative;
    width: 100%;
    max-height: 460px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: 28px;
}
.news-detail-hero img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
}
.news-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,20,.85) 30%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}
.news-detail-cat-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
    width: fit-content;
}
.news-detail-hero-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Meta bar */
.news-detail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    color: var(--text-dim);
    font-size: .85rem;
}
.news-detail-meta span { display: flex; align-items: center; gap: 6px; }
.news-detail-meta .news-share {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.news-share-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Article body */
.news-article-body {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.85;
}
.news-article-body h1,
.news-article-body h2,
.news-article-body h3,
.news-article-body h4 {
    color: var(--text);
    font-weight: 700;
    margin-top: 1.6em;
    margin-bottom: .6em;
}
.news-article-body p { color: var(--text-dim); margin-bottom: 1.1em; }
.news-article-body a { color: var(--primary); }
.news-article-body img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.news-article-body blockquote {
    border-left: 3px solid var(--primary);
    padding: 10px 18px;
    margin: 18px 0;
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
    color: var(--text-dim);
    font-style: italic;
}
.news-article-body ul,
.news-article-body ol { color: var(--text-dim); padding-left: 1.4em; margin-bottom: 1em; }
.news-article-body li { margin-bottom: .4em; }

/* Tags row */
.news-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0; border-top: 1px solid var(--border); }
.news-tag {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: .78rem;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.news-tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Sidebar */
.news-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}
.news-sidebar-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}
.news-recent-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.news-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-recent-thumb {
    width: 64px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.news-recent-thumb-placeholder {
    width: 64px;
    height: 50px;
    background: var(--bg-secondary);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: .9rem;
}
.news-recent-info a {
    color: var(--text);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    display: block;
    transition: color .2s;
}
.news-recent-info a:hover { color: var(--primary); }
.news-recent-date { color: var(--text-dim); font-size: .75rem; margin-top: 4px; }

/* Sidebar marketplace links */
.news-sidebar-links { display: flex; flex-direction: column; gap: 8px; }

/* Responsive */
@media (max-width: 767.98px) {
    .news-index-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .news-detail-hero-title { font-size: 1.3rem; }
    .news-detail-hero-overlay { padding: 18px; }
    .gz-page-title { font-size: 1.35rem; }
    .news-search-wrap input { width: 160px; }
}
@media (max-width: 480px) {
    .news-index-grid { grid-template-columns: 1fr; }
    .news-index-thumb { height: 170px; }
    .news-detail-meta { gap: 12px; }
    .news-detail-meta .news-share { margin-left: 0; width: 100%; }
}

/* ============================================================
   DASHBOARD — ENHANCED COMPONENTS
   ============================================================ */

/* Page header greeting bar */
.dash-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.dash-page-title {
    font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0;
}
.dash-page-sub { font-size: .82rem; color: var(--text-muted); margin: 2px 0 0; }
.dash-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Enhanced stat cards with gradient icon */
.ds-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex; align-items: center; gap: 16px;
    transition: var(--transition);
    position: relative; overflow: hidden;
}
.ds-stat::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--ds-color, var(--primary));
    opacity: 0; transition: opacity var(--transition);
}
.ds-stat:hover { border-color: var(--ds-color, var(--primary)); transform: translateY(-2px); }
.ds-stat:hover::after { opacity: 1; }
.ds-stat-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: color-mix(in srgb, var(--ds-color, var(--primary)) 15%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--ds-color, var(--primary)); flex-shrink: 0;
}
.ds-stat-body { flex: 1; min-width: 0; }
.ds-stat-num { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.ds-stat-label { font-size: .75rem; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ds-stat-change { font-size: .72rem; margin-top: 4px; }
.ds-stat-change.up { color: var(--success); }
.ds-stat-change.down { color: var(--danger); }

/* Dashboard panels */
.dash-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.dash-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.dash-panel-title { font-size: .92rem; font-weight: 700; color: var(--text); margin: 0; }
.dash-panel-link { font-size: .78rem; color: var(--primary); font-weight: 600; }
.dash-panel-link:hover { color: var(--primary-hover); }
.dash-panel-body { padding: 0; }
.dash-panel-footer { padding: 14px 20px; border-top: 1px solid var(--border); }

/* Order row with thumbnail */
.order-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.order-row:last-child { border-bottom: none; }
.order-row:hover { background: rgba(255,255,255,0.02); }
.order-thumb {
    width: 48px; height: 48px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg-secondary); border: 1px solid var(--border);
}
.order-thumb-placeholder {
    width: 48px; height: 48px; border-radius: 8px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: .9rem; flex-shrink: 0;
}
.order-info { flex: 1; min-width: 0; }
.order-num { font-size: .82rem; font-weight: 700; color: var(--primary); }
.order-product { font-size: .78rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-seller { font-size: .72rem; color: var(--text-muted); }
.order-amount { font-size: .9rem; font-weight: 700; color: var(--text); flex-shrink: 0; }
.order-date-col { font-size: .72rem; color: var(--text-muted); flex-shrink: 0; text-align: right; }

/* ── Order Timeline Cards ─────────────────────────────────────── */
.ord-tl-list { display: flex; flex-direction: column; gap: 0; }
.ord-tl-card {
    display: block; text-decoration: none; color: inherit;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    transition: background .18s;
}
.ord-tl-card:last-child { border-bottom: none; }
.ord-tl-card:hover { background: rgba(109,40,217,.04); color: inherit; }
.ord-tl-card--cancelled { opacity: .75; }

.ord-tl-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ord-tl-num {
    font-size: .75rem; font-weight: 700; color: var(--primary);
    font-family: monospace; letter-spacing: .3px; flex-shrink: 0;
}
.ord-tl-prod {
    flex: 1; font-size: .85rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ord-tl-price { font-size: .85rem; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.ord-tl-date  { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }

/* Stepper */
.ord-tl-steps { display: flex; align-items: center; gap: 0; margin-top: 4px; }
.ord-tl-step  { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ord-tl-conn  { flex: 1; height: 2px; background: var(--border); transition: background .3s; }
.ord-tl-conn.done { background: var(--primary); }

.ord-tl-dot {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; color: var(--text-muted);
    flex-shrink: 0; transition: all .3s; position: relative;
}
.ord-tl-step.done .ord-tl-dot {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.ord-tl-step.active .ord-tl-dot {
    background: rgba(109,40,217,.12); border-color: var(--primary); color: var(--primary);
    box-shadow: 0 0 0 5px rgba(109,40,217,.12);
    animation: ord-tl-pulse 2s ease infinite;
}
@keyframes ord-tl-pulse {
    0%,100% { box-shadow: 0 0 0 5px rgba(109,40,217,.12); }
    50%      { box-shadow: 0 0 0 9px rgba(109,40,217,.04); }
}

.ord-tl-label {
    font-size: .64rem; color: var(--text-muted); text-align: center; line-height: 1.25;
    white-space: nowrap;
}
.ord-tl-step.done   .ord-tl-label { color: var(--text); font-weight: 600; }
.ord-tl-step.active .ord-tl-label { color: var(--primary); font-weight: 700; }

/* Cancelled badge replaces stepper */
.ord-tl-cancelled {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: .72rem; color: #ef4444;
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
    border-radius: 20px; padding: 3px 10px;
}

/* Mobile */
@media (max-width: 480px) {
    .ord-tl-label  { font-size: .58rem; }
    .ord-tl-dot    { width: 22px; height: 22px; }
    .ord-tl-price  { display: none; }
}

/* Status pill badges */
.status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .72rem; font-weight: 700; text-transform: capitalize;
    white-space: nowrap;
}
.status-pill.completed  { background: rgba(16,185,129,.15); color: #10b981; }
.status-pill.paid       { background: rgba(109,40,217,.15);  color: #a78bfa; }
.status-pill.pending    { background: rgba(245,158,11,.15);  color: #f59e0b; }
.status-pill.cancelled  { background: rgba(239,68,68,.15);   color: #ef4444; }
.status-pill.processing { background: rgba(14,165,233,.15);  color: #0ea5e9; }
.status-pill.open       { background: rgba(14,165,233,.15);  color: #0ea5e9; }
.status-pill.in_progress{ background: rgba(245,158,11,.15);  color: #f59e0b; }
.status-pill.resolved   { background: rgba(16,185,129,.15);  color: #10b981; }
.status-pill.closed     { background: rgba(102,102,102,.15); color: #999; }
.status-pill.accepted   { background: rgba(16,185,129,.15);  color: #10b981; }
.status-pill.rejected   { background: rgba(239,68,68,.15);   color: #ef4444; }
.status-pill.active     { background: rgba(16,185,129,.15);  color: #10b981; }
.status-pill.inactive   { background: rgba(102,102,102,.15); color: #999; }

/* Offer cards */
.offer-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
    transition: var(--transition);
}
.offer-card:hover { border-color: var(--primary); }
.offer-product-img {
    width: 52px; height: 52px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg-secondary); border: 1px solid var(--border);
}
.offer-info { flex: 1; min-width: 0; }
.offer-product-title { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-meta { font-size: .72rem; color: var(--text-muted); }
.offer-price-col { text-align: right; flex-shrink: 0; }
.offer-price { font-size: 1rem; font-weight: 800; color: var(--primary); display: block; }
.offer-original { font-size: .72rem; color: var(--text-dim); text-decoration: line-through; }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center;
}
.empty-state-icon {
    width: 72px; height: 72px; border-radius: 18px;
    background: rgba(109,40,217,0.08); border: 1px solid rgba(109,40,217,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--primary); margin-bottom: 20px;
}
.empty-state h6 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.empty-state p { font-size: .85rem; color: var(--text-muted); margin: 0 0 20px; max-width: 280px; }

/* ============================================================
   WISHLIST GRID
   ============================================================ */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.wishlist-item-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); position: relative;
}
.wishlist-item-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(109,40,217,.12); }
.wishlist-img-wrap { height: 140px; overflow: hidden; position: relative; }
.wishlist-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.wishlist-item-card:hover .wishlist-img-wrap img { transform: scale(1.05); }
.wishlist-remove-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(239,68,68,.85); border: none;
    color: #fff; font-size: .7rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.wishlist-remove-btn:hover { background: #ef4444; transform: scale(1.1); }
.wishlist-item-info { padding: 12px; }
.wishlist-item-cat { font-size: .65rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.wishlist-item-title { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.wishlist-item-price { font-size: .95rem; font-weight: 800; color: var(--primary); }
.wishlist-item-footer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }

/* ============================================================
   PROFILE SETTINGS
   ============================================================ */
.profile-avatar-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 20px;
    text-align: center; margin-bottom: 16px;
}
.profile-avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px; }
.profile-avatar-img {
    width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary); display: block;
}
.profile-avatar-placeholder {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #9333ea);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 700; color: #fff;
    border: 3px solid var(--primary);
}
.profile-avatar-edit {
    position: absolute; bottom: 0; right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary); color: #fff;
    border: 2px solid var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; cursor: pointer; transition: var(--transition);
}
.profile-avatar-edit:hover { background: var(--primary-hover); transform: scale(1.1); }
.profile-username { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.profile-email { font-size: .8rem; color: var(--text-muted); margin: 0; }
.profile-joined { font-size: .72rem; color: var(--text-dim); margin-top: 8px; }

.settings-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.settings-card-head {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.settings-card-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(109,40,217,.12); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.settings-card-title { font-size: .92rem; font-weight: 700; color: var(--text); margin: 0; }
.settings-card-body { padding: 20px; }

/* ============================================================
   SUPPORT TICKETS
   ============================================================ */
.ticket-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 20px;
    display: flex; align-items: flex-start; gap: 14px;
    transition: var(--transition); text-decoration: none;
}
.ticket-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.ticket-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background: rgba(109,40,217,.1); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ticket-info { flex: 1; min-width: 0; }
.ticket-subject { font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-meta { font-size: .75rem; color: var(--text-muted); }
.ticket-num { font-size: .72rem; color: var(--primary); font-weight: 700; }
.ticket-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Ticket detail */
.ticket-detail-head {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px;
}
.ticket-msgs-wrap { display: flex; flex-direction: column; gap: 14px; }
.ticket-msg {
    display: flex; gap: 12px;
}
.ticket-msg.admin-msg { flex-direction: row-reverse; }
.ticket-msg-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; border: 2px solid var(--border);
}
.ticket-msg.admin-msg .ticket-msg-avatar { background: var(--success); }
.ticket-msg-bubble {
    max-width: 75%; padding: 12px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
}
.ticket-msg.admin-msg .ticket-msg-bubble {
    background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.2);
    border-radius: 14px 14px 4px 14px;
}
.ticket-msg-text { font-size: .88rem; color: var(--text); line-height: 1.6; }
.ticket-msg-time { font-size: .68rem; color: var(--text-dim); margin-top: 6px; }
.ticket-reply-form {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px; margin-top: 16px;
}
.ticket-reply-form textarea {
    min-height: 100px; resize: vertical;
}

/* ============================================================
   SELLER DASHBOARD — EARNINGS CHART AREA
   ============================================================ */
.earnings-summary-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px;
}
.earn-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    text-align: center;
}
.earn-box-amount { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; }
.earn-box-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.earn-box-icon { font-size: 1.4rem; margin-bottom: 10px; }

/* Seller product list rows */
.seller-product-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.seller-product-row:last-child { border-bottom: none; }
.seller-product-row:hover { background: rgba(255,255,255,0.015); }
.seller-prod-img {
    width: 52px; height: 52px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg-secondary); border: 1px solid var(--border);
}
.seller-prod-info { flex: 1; min-width: 0; }
.seller-prod-title { font-size: .88rem; font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seller-prod-meta { font-size: .72rem; color: var(--text-muted); }
.seller-prod-price { font-size: .95rem; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.seller-prod-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ============================================================
   APPLY / KYC PAGES
   ============================================================ */
.apply-hero {
    background: linear-gradient(135deg, rgba(109,40,217,.15) 0%, rgba(147,51,234,.08) 100%);
    border: 1px solid rgba(109,40,217,.25);
    border-radius: var(--radius-lg); padding: 32px;
    margin-bottom: 24px; text-align: center; position: relative; overflow: hidden;
}
.apply-hero::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(109,40,217,.2) 0%, transparent 70%);
}
.apply-hero-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), #9333ea);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(109,40,217,.4);
}
.apply-hero h3 { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.apply-hero p { color: var(--text-muted); font-size: .9rem; max-width: 500px; margin: 0 auto; }

.apply-benefits {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 24px 0;
}
.apply-benefit-item {
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; text-align: center;
}
.apply-benefit-item i { font-size: 1.4rem; color: var(--primary); margin-bottom: 8px; }
.apply-benefit-item span { display: block; font-size: .8rem; font-weight: 600; color: var(--text); }
.apply-benefit-item small { font-size: .7rem; color: var(--text-muted); }

.apply-form-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.apply-form-head {
    padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.apply-form-body { padding: 24px; }

/* ============================================================
   CHECKOUT / PAYMENT
   ============================================================ */
.checkout-wrap {
    max-width: 960px; margin: 0 auto; padding: 32px 16px;
}
.checkout-header {
    text-align: center; margin-bottom: 32px;
}
.checkout-header h2 { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.checkout-steps {
    display: flex; align-items: center; justify-content: center; gap: 0;
    margin-bottom: 32px;
}
.checkout-step {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--text-muted);
}
.checkout-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: var(--text-dim);
    transition: var(--transition);
}
.checkout-step.active .checkout-step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.checkout-step.done .checkout-step-num { background: var(--success); border-color: var(--success); color: #fff; }
.checkout-step-line { width: 40px; height: 2px; background: var(--border); margin: 0 4px; }
.checkout-step.done + .checkout-step-line { background: var(--success); }

.checkout-order-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px;
}
.checkout-order-head {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    font-size: .85rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.checkout-product-row {
    display: flex; gap: 14px; align-items: center; padding: 16px 20px;
}
.checkout-product-img {
    width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
    background: var(--bg-secondary); border: 1px solid var(--border); flex-shrink: 0;
}
.checkout-price-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; border-top: 1px solid var(--border);
}
.checkout-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; background: rgba(109,40,217,.06);
    border-top: 2px solid rgba(109,40,217,.2);
}
.checkout-total-label { font-size: .92rem; font-weight: 700; color: var(--text); }
.checkout-total-price { font-size: 1.3rem; font-weight: 800; color: var(--primary); }

.checkout-pay-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
.checkout-pay-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.pay-trust-badges {
    display: flex; align-items: center; gap: 12px; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid var(--border);
}
.pay-trust-item { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-muted); }
.pay-trust-item i { color: var(--success); }

/* ============================================================
   SUCCESS / FAILED PAGES
   ============================================================ */
.result-page {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.result-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 48px 40px;
    text-align: center; max-width: 560px; width: 100%;
    position: relative; overflow: hidden;
}
.result-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.result-card.success::before { background: linear-gradient(90deg, var(--success), #34d399); }
.result-card.failed::before { background: linear-gradient(90deg, var(--danger), #f87171); }
.result-icon {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; font-size: 2rem;
}
.result-icon.success { background: rgba(16,185,129,.15); color: #10b981; border: 2px solid rgba(16,185,129,.3); }
.result-icon.failed  { background: rgba(239,68,68,.15);   color: #ef4444; border: 2px solid rgba(239,68,68,.3); }
.result-title { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.result-sub { font-size: .9rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; max-width: 380px; margin-left: auto; margin-right: auto; }
.result-order-details {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px 20px; text-align: left; margin-bottom: 28px;
}
.result-order-details dl { margin: 0; }
.result-order-details dt { color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.result-order-details dd { color: var(--text); font-size: .88rem; font-weight: 600; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PRODUCT LISTING — ENHANCED
   ============================================================ */
.listing-page { padding: 20px 0; }
.listing-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap; gap: 12px;
}
.listing-header-left { display: flex; align-items: center; gap: 14px; }
.listing-header-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(109,40,217,.12); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.listing-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0; }
.listing-sub { font-size: .8rem; color: var(--text-muted); margin: 2px 0 0; }
.sort-chip {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    font-size: .75rem; font-weight: 600; color: var(--text-muted);
    transition: var(--transition); cursor: pointer; white-space: nowrap;
}
.sort-chip:hover { border-color: var(--primary); color: var(--primary); }
.sort-chip.active { background: rgba(109,40,217,.12); border-color: var(--primary); color: var(--primary); }

/* Filter sidebar */
.filter-sidebar {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    position: sticky; top: 74px;
}
.filter-section {
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.filter-section:last-child { border-bottom: none; }
.filter-section-title { font-size: .78rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.filter-search-wrap { position: relative; }
.filter-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: .78rem; }
.filter-search-input {
    width: 100%; background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); padding: 8px 10px 8px 30px;
    font-size: .83rem; outline: none; transition: border-color var(--transition);
}
.filter-search-input:focus { border-color: var(--primary); }
.filter-input {
    flex: 1; background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); padding: 8px 10px;
    font-size: .83rem; outline: none; transition: border-color var(--transition);
}
.filter-input:focus { border-color: var(--primary); }
.price-range-row { display: flex; align-items: center; gap: 8px; }
.price-range-sep { color: var(--text-dim); font-size: .8rem; }
.delivery-opts { display: flex; flex-direction: column; gap: 6px; }
.delivery-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    font-size: .82rem; color: var(--text-muted);
    border: 1px solid transparent; transition: var(--transition);
}
.delivery-opt input[type=radio] { display: none; }
.delivery-opt.active, .delivery-opt:hover { color: var(--primary); background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.2); }

/* Products grid in listing */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* ============================================================
   NOTIFICATIONS PAGE
   ============================================================ */
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    transition: background var(--transition); text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,.02); }
.notif-item.unread { background: rgba(109,40,217,.04); }
.notif-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.notif-body { flex: 1; min-width: 0; }
.notif-message { font-size: .85rem; color: var(--text); line-height: 1.5; }
.notif-time { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
.notif-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
    flex-shrink: 0; margin-top: 5px;
}

/* ============================================================
   SELLER PUBLIC PROFILE
   ============================================================ */
.seller-profile-hero {
    position: relative; overflow: hidden; margin-bottom: 0;
    min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
}
.seller-banner-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.seller-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,20,.92) 0%, rgba(10,10,20,.45) 60%, rgba(10,10,20,.25) 100%);
}
.seller-hero-content {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 20px;
    padding-bottom: 28px; padding-top: 48px;
}
.seller-store-avatar {
    width: 72px; height: 72px; border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), #9333ea);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 700; color: #fff;
    border: 3px solid rgba(255,255,255,.2); flex-shrink: 0;
}
.seller-verified-badge {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem; flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — DASHBOARD & PAGES
   ============================================================ */
@media (max-width: 991.98px) {
    .apply-benefits { grid-template-columns: repeat(2,1fr); }
    .earnings-summary-bar { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767.98px) {
    .apply-benefits { grid-template-columns: 1fr; }
    .earnings-summary-bar { grid-template-columns: 1fr; }
    .result-card { padding: 32px 20px; }
    .checkout-wrap { padding: 20px 12px; }
    .wishlist-grid { grid-template-columns: repeat(2,1fr); }
    .dash-page-title { font-size: 1.1rem; }
    .products-grid { grid-template-columns: repeat(2,1fr); }
    .offer-card { flex-wrap: wrap; }
    .offer-price-col { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; }
}
@media (max-width: 480px) {
    .wishlist-grid { grid-template-columns: 1fr 1fr; }
    .products-grid { grid-template-columns: repeat(2,1fr); }
    .earn-box-amount { font-size: 1.2rem; }
}

/* ============================================================
   WOW EFFECTS — Animations, Glow, Reveal, Ticker
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes float-orb {
    0%, 100% { transform: translateY(0)   scale(1);    opacity: .45; }
    50%       { transform: translateY(-28px) scale(1.08); opacity: .6;  }
}
@keyframes float-orb-slow {
    0%, 100% { transform: translateY(0) rotate(0deg);   opacity: .3; }
    50%       { transform: translateY(-18px) rotate(12deg); opacity: .5; }
}
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes reveal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ticker-scroll {
    0%   { opacity: 0; transform: translateX(-12px); }
    10%  { opacity: 1; transform: translateX(0); }
    85%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(12px); }
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.6); opacity: .5; }
}
@keyframes shimmer-slide {
    0%   { left: -100%; }
    100% { left: 200%; }
}
@keyframes border-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109,40,217,0); }
    50%       { box-shadow: 0 0 0 3px rgba(109,40,217,.35), 0 0 24px rgba(109,40,217,.25); }
}
@keyframes announce-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@keyframes pop-in {
    0%   { transform: scale(0.8); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Announcement Bar ────────────────────────────────────── */
.announce-bar {
    background: linear-gradient(90deg, #4f46e5, #6d28d9, #9333ea, #6d28d9, #4f46e5);
    background-size: 300% 100%;
    animation: announce-bg 6s linear infinite;
    color: #fff;
    font-size: .8rem; font-weight: 600;
    text-align: center; padding: 9px 16px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; overflow: hidden; position: relative;
    letter-spacing: .01em;
}
@keyframes announce-bg {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
.announce-bar a {
    color: #fff; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.5);
    padding-bottom: 1px; white-space: nowrap;
    transition: border-color .2s;
}
.announce-bar a:hover { border-color: #fff; }
.announce-bar .announce-code {
    background: rgba(255,255,255,.2); border-radius: 4px;
    padding: 1px 7px; font-family: monospace; font-size: .82rem;
    border: 1px solid rgba(255,255,255,.3);
}
.announce-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,.7);
    cursor: pointer; font-size: .9rem; line-height: 1; padding: 2px;
    transition: color .2s;
}
.announce-close:hover { color: #fff; }

/* ── Hero Orbs ───────────────────────────────────────────── */
.hero-orb {
    position: absolute; border-radius: 50%;
    pointer-events: none; z-index: 1;
}
.hero-orb-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle at 40% 40%, rgba(109,40,217,.55), rgba(109,40,217,.0) 70%);
    top: -100px; right: 8%;
    animation: float-orb 9s ease-in-out infinite;
}
.hero-orb-2 {
    width: 220px; height: 220px;
    background: radial-gradient(circle at 50% 50%, rgba(79,70,229,.5), transparent 70%);
    bottom: 20px; right: 28%;
    animation: float-orb 12s ease-in-out infinite reverse;
    animation-delay: -4s;
}
.hero-orb-3 {
    width: 140px; height: 140px;
    background: radial-gradient(circle at 50% 50%, rgba(147,51,234,.6), transparent 70%);
    top: 30%; right: 3%;
    animation: float-orb-slow 7s ease-in-out infinite;
    animation-delay: -2s;
}

/* ── Scroll Reveal ───────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-fade {
    opacity: 0;
    transition: opacity .6s ease;
}
.reveal-fade.visible { opacity: 1; }

/* ── Typing Text ─────────────────────────────────────────── */
.typing-cursor {
    display: inline-block;
    width: 3px; height: 1em;
    background: var(--primary);
    margin-left: 4px;
    vertical-align: middle;
    border-radius: 1px;
    animation: blink-cursor .75s step-end infinite;
}

/* ── Live Purchase Ticker ────────────────────────────────── */
.live-ticker-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 56px;
    display: flex; align-items: center; gap: 12px;
    overflow: hidden;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981; flex-shrink: 0;
    animation: pulse-dot 1.4s ease-in-out infinite;
}
.live-ticker-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #10b981; white-space: nowrap; flex-shrink: 0;
}
.live-ticker-msg {
    font-size: .8rem; color: var(--text-muted); flex: 1;
    animation: ticker-scroll 4s ease forwards;
}
.live-ticker-msg strong { color: var(--text); }

/* ── Card Hover Glow ─────────────────────────────────────── */
.featured-card:hover {
    box-shadow: 0 0 0 1.5px rgba(109,40,217,.4),
                0 16px 48px rgba(109,40,217,.22),
                0 4px 16px rgba(0,0,0,.4) !important;
    border-color: rgba(109,40,217,.3) !important;
}
.pop-game-card:hover {
    box-shadow: 0 0 0 1.5px rgba(109,40,217,.35),
                0 12px 36px rgba(109,40,217,.2);
}
.giftcard-card:hover {
    box-shadow: 0 0 0 1.5px rgba(109,40,217,.35),
                0 12px 40px rgba(0,0,0,.35);
    transform: perspective(700px) translateZ(14px) !important;
}

/* Shimmer sweep on hover */
.featured-card .featured-img-wrap { overflow: hidden; position: relative; }
.featured-card .featured-img-wrap::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: skewX(-15deg);
    transition: none; pointer-events: none;
}
.featured-card:hover .featured-img-wrap::after {
    animation: shimmer-slide .6s ease forwards;
}

/* ── Pcard glow ──────────────────────────────────────────── */
.pcard:hover {
    box-shadow: 0 0 0 1px rgba(109,40,217,.25),
                0 12px 40px rgba(109,40,217,.18),
                0 4px 16px rgba(0,0,0,.35) !important;
}

/* ── Neon badge on active featured card ──────────────────── */
.featured-badge.hot {
    animation: border-glow-pulse 2.5s ease-in-out infinite;
}

/* ── Section title gradient underline ────────────────────── */
.gz-section-glow {
    position: relative; display: inline-block;
}
.gz-section-glow::after {
    content: '';
    position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--primary), #9333ea, transparent);
    border-radius: 2px;
}

/* ── Pop-in animation for toast/ticker ───────────────────── */
.pop-in { animation: pop-in .35s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Stats bar glow ──────────────────────────────────────── */
.pstat-item:hover .pstat-icon {
    transform: scale(1.12);
    transition: transform .2s ease;
}
.pstat-icon { transition: transform .2s ease; }

/* ============================================================
   DS — NEW HOMEPAGE DESIGN SYSTEM
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────── */
.ds-page { background: var(--bg-primary); min-height: 100vh; overflow-x: hidden; }
.ds-container { max-width: 1420px; margin: 0 auto; padding: 24px 24px 56px; overflow-x: hidden; }

/* ── Shared buttons ───────────────────────────────── */
.ds-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff !important; border:none; border-radius:10px;
  padding:11px 22px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(124,58,237,.38);
  transition:all .2s;
}
.ds-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,.55); }

.ds-btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); color:#e2e8f0 !important;
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:11px 22px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:all .2s;
}
.ds-btn-ghost:hover { background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.45); }

/* ── Shared block styles ──────────────────────────── */
.ds-card-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:18px; margin-bottom:24px;
}
.ds-sb-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:16px;
}
.ds-full-block { margin-bottom:24px; }

.ds-block-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.ds-block-title {
  font-size:14px; font-weight:700; color:var(--text-primary);
  display:flex; align-items:center; gap:8px; margin:0;
}
.ds-link-all {
  font-size:12px; color:#7c3aed; text-decoration:none;
  font-weight:500; display:flex; align-items:center; gap:4px; transition:color .2s;
}
.ds-link-all:hover { color:#a78bfa; }

/* ── Verified icon ────────────────────────────────── */
.ds-vc { color:#7c3aed; font-size:.65rem; margin-left:4px; }

/* ── Live pulse dot ───────────────────────────────── */
.ds-live-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.2);
  animation:pulse-dot 1.4s infinite;
}
.ds-live-pulse {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#a78bfa;
}

/* ── Online dot ───────────────────────────────────── */
.ds-online-dot {
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.25); flex-shrink:0;
}

/* ════════════════════════════════════════════════════
   TOP GRID (Hero col + Sidebar)
════════════════════════════════════════════════════ */
.ds-top-grid {
  display:grid; grid-template-columns:1fr 290px; gap:20px; align-items:start;
  margin-bottom:24px;
}
.ds-hero-wrap { min-width:0; overflow:hidden; }
.ds-sidebar    { min-width:0; }

/* ── HERO ─────────────────────────────────────────── */
.ds-hero {
  background:linear-gradient(135deg,#0a0a1a 0%,#0f0a20 55%,#0a0a1a 100%);
  border:1px solid var(--border); border-radius:16px;
  position:relative; overflow:hidden; margin-bottom:16px;
  min-height:400px; display:flex; align-items:center;
  max-width:100%;
}
.ds-orb {
  position:absolute; border-radius:50%; pointer-events:none;
}
.ds-orb-1 {
  width:360px; height:360px;
  background:radial-gradient(circle,rgba(124,58,237,.22) 0%,transparent 70%);
  right:-80px; top:-80px;
}
.ds-orb-2 {
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(109,40,217,.18) 0%,transparent 70%);
  left:30%; bottom:-60px;
}

.ds-hero-content {
  display:flex; align-items:center; position:relative; z-index:2; padding:40px 40px 28px;
  width:100%; max-width:100%;
}
@media (min-width:993px) {
  .ds-hero-slider-wrap .ds-hero-content { padding-right:300px; }
}
.ds-hero-left  { flex:1; min-width:0; padding-right:16px; }
.ds-hero-right { flex-shrink:0; width:360px; position:relative; height:100%; display: flex; align-items: center; justify-content: center; }
.ds-hero-right > img {
    position: absolute; right: -40px; top: -20px; bottom: -20px; width: auto; height: 120%;
    object-fit: cover; z-index: 1; opacity: 0.8;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
}

.ds-hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3);
  border-radius:20px; padding:4px 14px; font-size:11px; font-weight:700;
  color:#a78bfa; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px;
}
.ds-hero-h1 {
  font-size:clamp(1.9rem,3.5vw,3rem); font-weight:900; line-height:1.1;
  color:#fff; margin-bottom:14px; letter-spacing:-0.5px;
}
.ds-hero-accent {
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ds-hero-sub { color:#9ca3af; font-size:14px; margin-bottom:22px; line-height:1.6; }
.ds-hero-btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }

.ds-hero-trust-row { display:flex; flex-direction:column; gap:8px; }
.ds-hero-trust-item {
  display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#d1d5db;
}
.ds-hero-trust-item i { color:#7c3aed; margin-top:2px; width:14px; flex-shrink:0; }
.ds-hero-trust-item span { display:block; font-weight:600; font-size:12px; }
.ds-hero-trust-item small { display:block; color:#6b7280; font-size:10px; }

.ds-hero-char {
  position:absolute; right:0; bottom:0; height:260px; width:auto;
  object-fit:contain; filter:drop-shadow(0 0 40px rgba(124,58,237,.3));
}

/* ── Promo float card ─────────────────────────────── */
.ds-promo-float {
  position:relative; z-index:3;
  background:var(--bg-card);
  border:1px solid rgba(124,58,237,.3); border-radius:16px;
  padding:24px 30px; min-width:280px; text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  margin: auto;
}
.hero-sw-prev, .hero-sw-next { transition: background 0.2s; }
.hero-sw-prev:hover, .hero-sw-next:hover { background: var(--primary) !important; }
.hero-sw-prev::after, .hero-sw-next::after { font-size: 1rem !important; font-weight: 900; }
.hero-pag { bottom: 15px !important; }
.hero-pag .swiper-pagination-bullet { background: #fff; opacity: 0.3; }
.hero-pag .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }
.ds-pf-label { font-size:10px; font-weight:700; color:#a78bfa; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:3px; }
.ds-pf-sub   { font-size:9px; color:#6b7280; margin-bottom:10px; }
.ds-pf-pct   { font-size:2rem; font-weight:900; color:#fff; line-height:1; }
.ds-pf-pct span { color:#f59e0b; }
.ds-pf-off   { font-size:1rem; font-weight:800; color:#fff; letter-spacing:2px; margin-bottom:10px; }

.ds-countdown { display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:12px; }
.ds-cd-box {
  background:rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.3);
  border-radius:8px; padding:5px 8px; text-align:center; min-width:40px;
}
.ds-cd-box span { display:block; font-size:1.1rem; font-weight:700; color:#fff; line-height:1; }
.ds-cd-box small { font-size:9px; color:#9ca3af; }
.ds-cd-sep { font-size:1.1rem; font-weight:700; color:#7c3aed; }

.ds-pf-btn {
  display:block; background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff !important; border-radius:8px; padding:7px 14px;
  font-size:12px; font-weight:600; text-decoration:none; text-align:center; transition:all .2s;
}
.ds-pf-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,58,237,.45); }

/* ── Stats bar ────────────────────────────────────── */
.ds-stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.ds-stat {
  background:var(--bg-card); padding:14px 16px;
  display:flex; align-items:center; gap:10px;
}
.ds-stat-icon {
  width:38px; height:38px; border-radius:10px;
  background:rgba(124,58,237,.15); display:flex; align-items:center;
  justify-content:center; color:#7c3aed; font-size:.95rem; flex-shrink:0;
}
.ds-stat-body { flex:1; min-width:0; }
.ds-stat-num { font-size:1rem; font-weight:700; color:#fff; line-height:1; }
.ds-stat-lbl { font-size:10px; color:#6b7280; margin-top:3px; }
.ds-stat-badge {
  font-size:10px; font-weight:600; padding:3px 7px; border-radius:6px; flex-shrink:0;
}
.ds-stat-badge.up { color:#22c55e; background:rgba(34,197,94,.12); }
.ds-stat-badge.active {
  color:#22c55e; background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25); border-radius:20px; padding:3px 10px;
}

/* ── Feature grid ─────────────────────────────────── */
.ds-feat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;
}
.ds-feat-box {
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  padding:14px; display:flex; align-items:center; gap:10px; transition:border-color .2s;
}
.ds-feat-box:hover { border-color:rgba(124,58,237,.4); }
.ds-feat-ico {
  width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0;
}
.ds-feat-ico.purple { background:rgba(124,58,237,.2); color:#a78bfa; }
.ds-feat-ico.green  { background:rgba(34,197,94,.2);  color:#22c55e; }
.ds-feat-ico.yellow { background:rgba(245,158,11,.2); color:#f59e0b; }
.ds-feat-ico.blue   { background:rgba(14,165,233,.2); color:#0ea5e9; }
.ds-feat-ttl { font-size:12px; font-weight:600; color:#e2e8f0; line-height:1.3; }
.ds-feat-sub { font-size:10px; color:#6b7280; margin-top:2px; }

/* ── Popular Games slider ─────────────────────────── */
.ds-pop-wrap { position:relative; margin-top: 10px; overflow:hidden; }
.ds-pg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width:36px; height:36px; border-radius:50%; background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.1); color:#fff; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ds-pg-arrow:hover { background:var(--primary); border-color:var(--primary); }
.ds-pg-prev { left: -18px; }
.ds-pg-next { right: -18px; }
.ds-sec-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ds-pg-track {
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; padding:4px 2px 14px;
}
.ds-pg-track::-webkit-scrollbar { display:none; }
/* Card base */
.ds-pg-card {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 275px;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b1c;
  border: 1px solid rgba(255,255,255,0.07);
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease;
}
/* Inset glowing border on hover — uses ::after so it renders above everything */
.ds-pg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid var(--primary);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 10;
  pointer-events: none;
}
.ds-pg-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(124,58,237,.45), 0 4px 16px rgba(0,0,0,.6); }
.ds-pg-card:hover::after { opacity: 1; }

/* Image */
.ds-pg-img { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.ds-pg-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .45s ease; }
.ds-pg-card:hover .ds-pg-img img { transform: scale(1.08); }

/* Gradient — heavier dark zone at bottom for readability */
.ds-pg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7,5,18,1)   0%,
    rgba(7,5,18,.92) 28%,
    rgba(7,5,18,.45) 55%,
    rgba(7,5,18,.10) 78%,
    transparent 100%
  );
  z-index: 2;
}

/* HOT badge — gradient pill with glow */
.ds-pg-hot {
  position: absolute;
  top: 11px;
  left: 11px;
  background: linear-gradient(135deg, #ff7a00, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 5;
  letter-spacing: .4px;
  box-shadow: 0 2px 10px rgba(239,68,68,.55);
}

/* Listing count — glassy pill top-right */
.ds-pg-cnt-badge {
  position: absolute;
  top: 11px;
  right: 11px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  z-index: 5;
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

/* Info panel */
.ds-pg-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 14px 15px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Game name */
.ds-pg-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price row */
.ds-pg-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 1px;
}
.ds-pg-price-label {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  font-weight: 500;
}
.ds-pg-price-val {
  font-size: 14px;
  font-weight: 800;
  color: #a855f7;
  text-shadow: 0 0 14px rgba(168,85,247,.5);
  letter-spacing: .2px;
}

/* CTA row */
.ds-pg-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  transition: color .22s ease, gap .22s ease;
  margin-top: 3px;
}
.ds-pg-cta i { font-size: 10px; transition: transform .22s ease; }
.ds-pg-card:hover .ds-pg-cta { color: #c084fc; gap: 8px; }
.ds-pg-card:hover .ds-pg-cta i { transform: translateX(3px); }

/* ── Categories + New Listings ───────────────────── */
.ds-cat-new-grid {
  display:grid; grid-template-columns:190px 1fr; gap:12px; margin-bottom:24px;
}
.ds-cat-list { display:flex; flex-direction:column; gap:2px; }
.ds-cat-row {
  display:flex; align-items:center; gap:9px; padding:7px 9px;
  border-radius:8px; text-decoration:none; transition:background .15s;
}
.ds-cat-row:hover { background:rgba(124,58,237,.1); }
.ds-cat-ico { width:28px; height:28px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.ds-cat-ico img { width:100%; height:100%; object-fit:cover; }
.ds-cat-nm  { font-size:12px; font-weight:500; color:#d1d5db; flex:1; min-width:0; }
.ds-cat-cnt {
  font-size:10px; color:#6b7280; background:rgba(255,255,255,.05);
  border-radius:5px; padding:2px 6px; flex-shrink:0;
}

.ds-new-block { padding:14px; }
.ds-new-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.ds-new-card {
  position: relative;
  background: #0d0d20;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease;
  display: flex;
  flex-direction: column;
}
.ds-new-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid var(--primary);
  opacity: 0;
  transition: opacity .24s ease;
  z-index: 10;
  pointer-events: none;
}
.ds-new-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(124,58,237,.32), 0 2px 10px rgba(0,0,0,.5); }
.ds-new-card:hover::after { opacity: 1; }

/* Image */
.ds-new-img { position: relative; height: 100px; overflow: hidden; flex-shrink: 0; }
.ds-new-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .38s ease; }
.ds-new-card:hover .ds-new-img img { transform: scale(1.08); }

.ds-new-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,7,20,.05) 0%, rgba(8,7,20,.6) 75%, rgba(8,7,20,.92) 100%);
  z-index: 1;
}

/* "YENİ" badge — top left */
.ds-new-bdg {
  position: absolute;
  top: 7px;
  left: 7px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(124,58,237,.5);
}

/* Instant delivery badge — top right */
.ds-inst-bdg {
  position: absolute;
  top: 7px;
  right: 7px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(16,185,129,.45);
}

/* Discount % badge — bottom-right of image */
.ds-new-disc-bdg {
  position: absolute;
  bottom: 7px;
  right: 7px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 3;
  letter-spacing: .3px;
}

/* Info */
.ds-new-info  { padding: 9px 10px 10px; display: flex; flex-direction: column; flex: 1; gap: 3px; }

.ds-new-game  {
  font-size: 9px;
  color: #a855f7;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.ds-new-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.ds-new-price-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.ds-new-old  { font-size: 10px; color: #6b7280; text-decoration: line-through; }
.ds-new-price {
  font-size: 13px;
  font-weight: 800;
  color: #a855f7;
  text-shadow: 0 0 10px rgba(168,85,247,.4);
}

/* ── Custom Cards Section ─────────────────────────── */
.ds-cc-section { margin-bottom: 24px; }
.ds-cc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ds-cc-card {
  position: relative;
  display: block;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;
  background: #0e0d24;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease;
  border: 1px solid rgba(255,255,255,.07);
}
.ds-cc-card:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0,0,0,.55); }

/* Dark gradient overlay */
.ds-cc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6,5,18,.92) 0%, rgba(6,5,18,.7) 55%, rgba(6,5,18,.35) 100%);
  z-index: 1;
}

/* Colored radial glow accent at right */
.ds-cc-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Content */
.ds-cc-inner {
  position: relative;
  z-index: 3;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
}

.ds-cc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ds-cc-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.ds-cc-sub {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 8px 18px;
  border-radius: 24px;
  margin-top: 6px;
  transition: opacity .2s, transform .2s;
  letter-spacing: .2px;
}
.ds-cc-card:hover .ds-cc-btn { opacity: .9; transform: translateX(3px); }

/* Responsive */
@media (max-width: 900px) {
  .ds-cc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .ds-cc-grid { grid-template-columns: 1fr; gap: 10px; }
  .ds-cc-card { min-height: 150px; }
  .ds-cc-title { font-size: 17px; }
  .ds-cc-inner { padding: 18px 16px; }
}

/* ── Mini trust bar ───────────────────────────────── */
.ds-mini-trust {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-top:20px;
}
.ds-mt-item {
  background:var(--bg-card); padding:13px 14px;
  display:flex; align-items:center; gap:10px;
}
.ds-mt-item i { color:#7c3aed; font-size:1rem; flex-shrink:0; }
.ds-mt-item b { display:block; font-size:11px; font-weight:600; color:#e2e8f0; }
.ds-mt-item span { display:block; font-size:10px; color:#6b7280; margin-top:1px; }

/* ── Sidebar: Seller rows ─────────────────────────── */
.ds-seller-row {
  display:flex; align-items:center; gap:9px; padding:7px 6px;
  border-radius:8px; text-decoration:none; transition:background .15s;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.ds-seller-row:last-child { border-bottom:none; }
.ds-seller-row:hover { background:rgba(124,58,237,.08); }
.ds-rank-ico { width:22px; text-align:center; font-size:.85rem; flex-shrink:0; }
.ds-s-av {
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.ds-s-info { flex:1; min-width:0; }
.ds-s-name { font-size:12px; font-weight:600; color:#e2e8f0; display:flex; align-items:center; gap:4px; }
.ds-s-stat { font-size:10px; color:#6b7280; margin-top:1px; }

/* ── Sidebar: Live activity ───────────────────────── */
.ds-live-row {
  display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.ds-live-row:last-child { border-bottom:none; }
.ds-live-av { width:34px; height:34px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--bg-2,#1a1a2e); }
.ds-live-av img { width:100%; height:100%; object-fit:cover; }
.ds-live-info  { flex:1; min-width:0; }
.ds-live-txt   { font-size:11px; color:#d1d5db; line-height:1.35; }
.ds-live-txt b { color:#fff; }
.ds-live-time  { font-size:10px; color:#6b7280; margin-top:2px; }
.ds-live-price { font-size:12px; font-weight:700; color:#22c55e; flex-shrink:0; }

/* ── Sidebar: Trending ────────────────────────────── */
.ds-trend-row {
  display:flex; align-items:center; gap:9px; padding:7px 6px;
  border-radius:8px; text-decoration:none; transition:background .15s;
}
.ds-trend-row:hover { background:rgba(124,58,237,.08); }
.ds-trend-rank { font-size:11px; font-weight:700; color:#6b7280; width:20px; flex-shrink:0; }
.ds-trend-img  { width:30px; height:30px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.ds-trend-name { font-size:12px; font-weight:600; color:#e2e8f0; flex:1; min-width:0; }
.ds-trend-stat { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:#22c55e; flex-shrink:0; }
.ds-trend-stat i { font-size:.6rem; }

/* ════════════════════════════════════════════════════
   FULL-WIDTH SECTIONS
════════════════════════════════════════════════════ */
/* Reviews */
.ds-review-track {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 14px;
}
.ds-review-track::-webkit-scrollbar { height: 4px; display: block; }
.ds-review-track::-webkit-scrollbar-track { background: var(--bg-primary); }
.ds-review-track::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
.ds-rev-card {
  flex-shrink:0; min-width:320px; width: 320px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:16px; transition:border-color .2s;
  display: flex; flex-direction: column; gap: 12px;
}
.ds-rev-card:hover { border-color:rgba(124,58,237,.38); }
.ds-rev-top   { display:flex; gap:12px; }
.ds-rev-av    {
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; overflow: hidden;
  justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; background: var(--bg-primary);
}
.ds-rev-av img { width: 100%; height: 100%; object-fit: cover; }
.ds-rev-info  { flex: 1; }
.ds-rev-stars { display: flex; color:#f59e0b; font-size:.65rem; margin-bottom:6px; align-items: center; gap: 2px; }
.ds-rev-txt   { font-size:13px; color:#9ca3af; line-height:1.4; margin-bottom:0; font-style: italic; }
.ds-rev-foot  { display:flex; flex-direction: column; gap:4px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }
.ds-rev-role  { font-size:10px; color:#7c3aed; font-weight:700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 4px; }
.ds-rev-name  { font-size:14px; font-weight:700; color:#fff; }
.ds-rev-ok    { font-size:11px; color:#22c55e; display: flex; align-items: center; gap: 4px; }

/* ── Review Carousel (creator-card style) ───────────── */
.rv-swiper-outer { position:relative; padding:4px 0 6px; }
.rv-card-new {
  position:relative; height:290px; border-radius:20px; overflow:hidden;
  border:1px solid rgba(139,92,246,.15); user-select:none;
}
.rv-card-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .5s ease;
}
.rv-card-new:hover .rv-card-bg { transform:scale(1.06); }
.rv-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.12) 100%);
}
.rv-stars-badge {
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.45);
  color:#f59e0b; font-size:.6rem; font-weight:700;
  padding:4px 10px; border-radius:20px; letter-spacing:.06em;
  display:flex; align-items:center; gap:5px;
}
.rv-stars-badge i { font-size:.55rem; }
.rv-card-content {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
}
.rv-quote {
  font-size:.82rem; color:rgba(255,255,255,.9); font-style:italic;
  line-height:1.55; margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.rv-user-row { display:flex; align-items:center; gap:10px; }
.rv-avatar {
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(124,58,237,.7); background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:#fff;
}
.rv-avatar img { width:100%; height:100%; object-fit:cover; }
.rv-user-info { flex:1; min-width:0; }
.rv-username { font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-game { font-size:.6rem; color:#a78bfa; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.rv-verified { font-size:.6rem; color:#22c55e; display:flex; align-items:center; gap:3px; white-space:nowrap; flex-shrink:0; }
.reviewSwiper .swiper-button-prev,
.reviewSwiper .swiper-button-next {
  width:34px; height:34px; border-radius:50%;
  background:rgba(22,16,40,.75); border:1px solid rgba(124,58,237,.45);
  color:#fff; top:50%; margin-top:-17px;
}
.reviewSwiper .swiper-button-prev::after,
.reviewSwiper .swiper-button-next::after { font-size:.7rem; font-weight:900; }
.reviewSwiper .swiper-button-prev { left:6px; }
.reviewSwiper .swiper-button-next { right:6px; }

/* Recent Products */
/* ── Recently Sold Products ───────────────────────── */
.ds-recent-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 14px;
}
.ds-recent-track::-webkit-scrollbar { display: none; }

.ds-recent-card {
  flex-shrink: 0;
  width: 255px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: transform .26s ease, box-shadow .26s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ds-recent-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid #10b981;
  opacity: 0;
  transition: opacity .26s ease;
  z-index: 10;
  pointer-events: none;
}
.ds-recent-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(16,185,129,.22), 0 4px 14px rgba(0,0,0,.5); }
.ds-recent-card:hover::after { opacity: 1; }

/* Image zone */
.ds-recent-img { position: relative; height: 145px; overflow: hidden; flex-shrink: 0; }
.ds-recent-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .38s ease; }
.ds-recent-card:hover .ds-recent-img img { transform: scale(1.07); }

.ds-recent-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,22,.08) 0%, rgba(10,9,22,.65) 70%, rgba(10,9,22,.95) 100%);
  z-index: 1;
}

/* "Satıldı" badge — top left, green */
.ds-recent-sold-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(16,185,129,.5);
  letter-spacing: .3px;
}
/* "Yeni" variant — purple */
.ds-recent-new-badge {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  box-shadow: 0 2px 10px rgba(124,58,237,.5);
}

/* Time badge — top right, glass */
.ds-recent-time {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.75);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.1);
}

/* Category label bottom of image */
.ds-recent-game {
  position: absolute;
  bottom: 9px;
  left: 12px;
  right: 12px;
  color: rgba(255,255,255,.65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  z-index: 2;
  text-transform: uppercase;
}

/* Body */
.ds-recent-body { padding: 13px 14px 13px; display: flex; flex-direction: column; flex: 1; gap: 8px; }

.ds-recent-title {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price row */
.ds-recent-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.ds-recent-price-label {
  font-size: 10px;
  color: rgba(255,255,255,.38);
  font-weight: 500;
  margin-bottom: 2px;
}
.ds-recent-price {
  font-size: 17px;
  font-weight: 800;
  color: #10b981;
  text-shadow: 0 0 14px rgba(16,185,129,.4);
  line-height: 1;
}
.ds-recent-verified {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Seller row */
.ds-recent-seller {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}
.ds-recent-store {
  font-size: 11px;
  color: #9ca3af;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-recent-check {
  color: var(--primary);
  font-size: 13px;
  flex-shrink: 0;
}

.ds-recent-av {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Two-col row: Live sales + Promo ─────────────── */
.ds-two-col-row {
  display:grid; grid-template-columns:320px 1fr; gap:16px; margin-bottom:20px;
}

/* Live Sales */
.ds-ls-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.ds-ls-row:last-child { border-bottom:none; }
.ds-ls-img  { width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.ds-ls-info { flex:1; min-width:0; }
.ds-ls-name { font-size:13px; color:#e2e8f0; }
.ds-ls-item { font-size:11px; color:#9ca3af; }
.ds-ls-right{ text-align:right; flex-shrink:0; }
.ds-ls-price{ font-size:13px; font-weight:700; color:#fff; }
.ds-ls-time { font-size:10px; color:#6b7280; }

/* Big Promo Banner */
.ds-promo-big {
  background:linear-gradient(135deg,#0f0a1e 0%,#1a0a2e 55%,#0f0a1e 100%);
  border:1px solid rgba(124,58,237,.42); border-radius:16px;
  padding:28px 32px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.ds-promo-glow-orb {
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.28) 0%,transparent 70%);
  right:-80px; top:50%; transform:translateY(-50%); pointer-events:none;
}
.ds-promo-body { position:relative; z-index:1; }
.ds-promo-tag  { font-size:13px; font-weight:600; color:#a78bfa; letter-spacing:1px; margin-bottom:6px; }
.ds-promo-big-pct {
  font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:900; color:#fff; line-height:1; margin-bottom:8px;
}
.ds-promo-kd { font-size:13px; color:#9ca3af; }
.ds-promo-kd span {
  background:rgba(124,58,237,.25); border:1px solid rgba(124,58,237,.45);
  color:#a78bfa; padding:2px 10px; border-radius:6px; font-size:14px; font-weight:700;
}
.ds-promo-mini-stats {
  display:flex; gap:20px; margin-top:22px; position:relative; z-index:1;
}
.ds-pmini-n { font-size:1.1rem; font-weight:700; color:#fff; }
.ds-pmini-l { font-size:11px; color:#6b7280; margin-top:2px; }
.ds-pmini-l i { color:#7c3aed; margin-right:3px; }

/* ── Guarantee bar ────────────────────────────────── */
.ds-guarantee-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:24px;
}
.ds-gb-item {
  background:var(--bg-card); padding:20px;
  display:flex; align-items:center; gap:16px; border:1px solid var(--border); border-radius:14px;
  transition:border-color .2s;
}
.ds-gb-item:hover { border-color: rgba(124,58,237,.4); }
.ds-gb-ico {
  width:46px; height:46px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.ds-gb-ico.purple { background:rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.3); color:#a78bfa; box-shadow: 0 0 15px rgba(124,58,237,.2); }
.ds-gb-ttl { font-size:14px; font-weight:700; color:#fff; margin-bottom:2px; }
.ds-gb-sub { font-size:11px; color:#9ca3af; line-height: 1.4; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — HOME PAGE (ds-)
════════════════════════════════════════════════════ */

/* ── 1200px ── */
@media (max-width:1200px) {
  .ds-top-grid { grid-template-columns:1fr 260px; gap:16px; }
  .ds-pg-card  { width:182px; height:250px; }
}

/* ── 992px ── */
@media (max-width:992px) {
  .ds-top-grid      { grid-template-columns:1fr; }
  .ds-hero-right    { display:none; }
  .ds-hero          { min-height:220px !important; }
  .ds-hero-content  { padding:28px 22px !important; }
  .ds-hero-h1       { font-size:2rem; }
  .ds-stats-bar     { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ds-feat-grid     { grid-template-columns:repeat(2,1fr); }
  .ds-mini-trust    { grid-template-columns:repeat(2,1fr); }
  .ds-cat-new-grid  { grid-template-columns:1fr; }
  .ds-two-col-row   { grid-template-columns:1fr; }
  .ds-guarantee-bar { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ds-review-track  { gap:12px; }
  .ds-recent-track  { gap:10px; }
}

/* ── 768px ── */
@media (max-width:768px) {
  .ds-container     { padding:14px 14px 40px; }
  .ds-hero          { min-height:180px !important; border-radius:12px; }
  .ds-hero-content  { padding:20px 16px !important; flex-direction:column !important; gap:0; }
  .hero-sw-prev, .hero-sw-next { display:none !important; }
  .ds-hero-h1       { font-size:1.75rem; }
  .ds-hero-eyebrow  { font-size:.68rem; }
  .ds-hero-sub      { font-size:.82rem; margin-bottom:16px; }
  .ds-hero-btns     { gap:8px; }
  .ds-hero-trust-row{ display:none !important; }
  .ds-promo-float   { display:none !important; }
  .ds-stats-bar     { gap:8px; padding:10px; border-radius:10px; }
  .ds-stat          { padding:10px 12px; }
  .ds-stat-num      { font-size:1.3rem; }
  .ds-feat-grid     { grid-template-columns:repeat(2,1fr); gap:8px; }
  .ds-feat-box      { padding:12px 14px; gap:10px; }
  .ds-pg-arrow      { display:none; }
  .ds-pop-wrap      { margin:0; overflow:hidden; }
  .ds-pg-track      { gap:12px; padding-right:32px; overscroll-behavior-x:contain; scroll-padding-left:4px; }
  .ds-pg-card       { width:162px; height:228px; border-radius:12px; }
  .ds-pg-name       { font-size:13px; }
  .ds-pg-price-val  { font-size:12px; }
  .ds-pg-cnt-badge  { font-size:9px; padding:3px 7px; }
  .ds-new-grid      { grid-template-columns:repeat(2,1fr); gap:8px; }
  .ds-new-card      { border-radius:11px; }
  .ds-new-img       { height:105px; }
  .ds-new-title     { font-size:.75rem; }
  .ds-review-track  { gap:10px; }
  .ds-rev-card      { padding:14px; min-width:200px; }
  .ds-recent-track      { gap:10px; }
  .ds-recent-card       { width:210px; border-radius:12px; }
  .ds-recent-img        { height:130px; }
  .ds-recent-price      { font-size:15px; }
  .ds-recent-verified   { display:none; }
  .ds-guarantee-bar { padding:14px; border-radius:10px; }
  .ds-gb-item       { padding:12px 14px; }
}

/* ── 576px ── */
@media (max-width:576px) {
  .ds-hero-h1       { font-size:1.5rem; }
  .ds-stats-bar     { grid-template-columns:repeat(2,1fr); }
  .ds-stat          { padding:10px; }
  .ds-stat-num      { font-size:1.1rem; }
  .ds-stat-badge    { display:none; }
  .ds-feat-grid     { gap:8px; }
  .ds-feat-box      { padding:10px 12px; gap:8px; font-size:.78rem; }
  .ds-feat-ico      { width:30px; height:30px; font-size:.8rem; }
  .ds-feat-ttl      { font-size:.8rem; }
  .ds-feat-sub      { font-size:.68rem; }
  .ds-block-title   { font-size:13px; }
  .ds-pg-card       { width:150px; height:212px; }
  .ds-pg-track      { gap:10px; }
  .ds-new-grid      { grid-template-columns:repeat(2,1fr); }
  .ds-guarantee-bar { grid-template-columns:1fr; }
  .ds-mini-trust    { grid-template-columns:1fr; }
  .ds-sb-block      { padding:12px; }
  .ds-sb-promo      { padding:16px 14px; }
  .ds-sb-promo-pct  { font-size:2rem; }
  .ds-seller-row    { padding:8px 0; }
  .ds-live-row      { gap:8px; }
  .ds-trend-row     { padding:6px 0; }
  .ds-promo-big     { padding:22px 18px; }
  .ds-two-col-row   { gap:12px; }
}

/* ── 480px ── */
@media (max-width:480px) {
  .ds-container      { padding:10px 10px 32px; }
  .ds-hero           { min-height:180px; }
  .ds-hero-content   { padding:18px 14px; }
  .ds-hero           { min-height:160px !important; }
  .ds-hero-content   { padding:16px 14px !important; }
  .ds-hero-h1        { font-size:1.3rem !important; }
  .ds-hero-sub       { font-size:.78rem; margin-bottom:12px; }
  .ds-btn-primary, .ds-btn-ghost { font-size:.78rem; padding:9px 16px; }
  .ds-stats-bar      { grid-template-columns:repeat(2,1fr); gap:6px; padding:8px; }
  .ds-stat           { padding:8px 10px; border-radius:8px; flex-direction:column; align-items:flex-start; gap:4px; }
  .ds-stat-icon      { width:28px; height:28px; font-size:.75rem; }
  .ds-stat-num       { font-size:1rem; }
  .ds-stat-lbl       { font-size:.62rem; }
  .ds-feat-grid      { grid-template-columns:repeat(2,1fr); gap:6px; }
  .ds-feat-box       { padding:8px 10px; }
  .ds-pg-card        { width:142px; height:200px; border-radius:12px; }
  .ds-pg-name        { font-size:12px; }
  .ds-pg-price-val   { font-size:11px; }
  .ds-pg-info        { padding:14px 11px 12px; gap:4px; }
  .ds-pg-hot         { font-size:9px; padding:3px 8px; top:9px; left:9px; }
  .ds-pg-cnt-badge   { font-size:9px; padding:3px 7px; top:9px; right:9px; }
  .ds-pg-cta         { font-size:10px; }
  .ds-new-grid       { grid-template-columns:repeat(2,1fr); gap:7px; }
  .ds-new-img        { height:90px; }
  .ds-new-info       { padding:7px 8px 8px; }
  .ds-new-title      { font-size:.70rem; }
  .ds-new-price      { font-size:.78rem; }
  .ds-new-bdg        { font-size:8px; padding:2px 7px; }
  .ds-inst-bdg       { font-size:8px; padding:2px 6px; }
  .ds-cat-row        { padding:6px 8px; font-size:.78rem; }
  .ds-cat-ico img    { width:22px; height:22px; }
  .ds-cat-cnt        { font-size:.68rem; }
  .ds-review-track   { gap:8px; padding-bottom:8px; }
  .ds-rev-card       { padding:12px; min-width:180px; max-width:220px; }
  .ds-rev-txt        { font-size:.78rem; }
  .ds-recent-card        { width:190px; border-radius:11px; }
  .ds-recent-img         { height:115px; }
  .ds-recent-title       { font-size:.72rem; }
  .ds-recent-price       { font-size:.85rem; }
  .ds-recent-body        { padding:10px 11px; gap:6px; }
  .ds-recent-sold-badge  { font-size:9px; padding:3px 8px; top:8px; left:8px; }
  .ds-recent-time        { font-size:9px; padding:3px 7px; top:8px; right:8px; }
  .ds-ls-row         { padding:8px 0; }
  .ds-promo-big      { padding:16px 14px; border-radius:12px; }
  .ds-promo-big-pct  { font-size:1.6rem; }
  .ds-promo-mini-stats { grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 0 0; }
  .ds-pmini-n        { font-size:1rem; }
  .ds-guarantee-bar  { gap:8px; padding:10px; }
  .ds-gb-item        { padding:10px 12px; gap:8px; }
  .ds-gb-ico         { width:32px; height:32px; font-size:.8rem; }
  .ds-gb-ttl         { font-size:12px; }
  .ds-gb-sub         { font-size:.68rem; }
}

/* ── 380px ── */
@media (max-width:380px) {
  .ds-hero-h1   { font-size:1.15rem; }
  .ds-pg-card   { width:134px; height:190px; }
  .ds-pg-name   { font-size:11px; }
  .ds-pg-cta    { display:none; }
  .ds-new-grid  { grid-template-columns:1fr 1fr; }
  .ds-stats-bar { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PRODUCT PAGE v3 — DARK NEON GAMING REDESIGN
   ============================================================ */

/* ── Keyframes ── */
@keyframes pd3BuyPulse  { 0%,100%{box-shadow:0 0 24px rgba(124,58,237,.5),0 4px 20px rgba(124,58,237,.3)} 50%{box-shadow:0 0 48px rgba(124,58,237,.8),0 4px 30px rgba(124,58,237,.5)} }
@keyframes pd3Shimmer   { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes pd3PricePop  { 0%,100%{text-shadow:0 0 20px rgba(192,132,252,.4)} 50%{text-shadow:0 0 40px rgba(192,132,252,.8),0 0 80px rgba(124,58,237,.3)} }
@keyframes pd3OnlinePls { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.5} }
@keyframes pd3BadgeFade { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
@keyframes pd3TrustIn   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes pd3RbarFill  { from{width:0} }

/* Page wrapper */
.pd3-page { background: var(--bg-primary); min-height: 100vh; }

/* Game banner */
.pd3-game-banner {
  position: relative; width: 100%; height: 320px; overflow: hidden; background: #060012;
}
.pd3-banner-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: brightness(.55) saturate(1.2);
  transition: transform 8s ease;
}
.pd3-game-banner:hover .pd3-banner-img { transform: scale(1.04); }
.pd3-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,0,18,.2) 0%, rgba(6,0,18,.6) 60%, rgba(6,0,18,1) 100%);
}
.pd3-banner-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.12) 0%, transparent 60%);
}
.pd3-banner-cat {
  position: absolute; top: 20px; left: 24px;
  background: rgba(124,58,237,.9); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 6px;
  box-shadow: 0 0 16px rgba(124,58,237,.5);
  animation: pd3BadgeFade .4s ease both;
}

/* Container */
.pd3-container { max-width: 1420px; margin: 0 auto; padding: 0 24px 80px; }

/* Breadcrumb */
.pd3-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0 22px; font-size: .78rem; color: #4b5563;
}
.pd3-breadcrumb a { color: #4b5563; text-decoration: none; transition: color .2s; }
.pd3-breadcrumb a:hover { color: #a78bfa; }
.pd3-breadcrumb i { font-size: .55rem; color: #374151; }
.pd3-breadcrumb span { color: #94a3b8; }

/* ── MAIN 3-COL GRID ── */
.pd3-main-grid {
  display: grid;
  grid-template-columns: 370px 1fr 300px;
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}

/* ── Gallery col ── */
.pd3-gallery-wrap {
  background: rgba(10,0,30,.7);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(124,58,237,.08);
  transition: border-color .3s, box-shadow .3s;
}
.pd3-gallery-wrap:hover {
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 0 60px rgba(124,58,237,.14);
}
.pd3-main-swiper { position: relative; height: 300px; overflow: hidden; }
.pd3-img-link { display: block; position: relative; height: 100%; overflow: hidden; }
.pd3-main-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.pd3-img-link:hover .pd3-main-img { transform: scale(1.04); }

/* shimmer overlay on hover */
.pd3-img-link::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-100%); transition: none; pointer-events: none;
}
.pd3-img-link:hover::after { animation: pd3Shimmer .7s ease forwards; }

.pd3-zoom-icon {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  color: #fff; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; opacity: 0; transition: opacity .25s, transform .25s;
  border: 1px solid rgba(255,255,255,.1);
}
.pd3-img-link:hover .pd3-zoom-icon { opacity: 1; transform: scale(1.08); }
.pd3-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.7); backdrop-filter: blur(8px); color: #fff;
  font-size: .75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.pd3-nav-btn:hover { background: #7c3aed; border-color: #7c3aed; box-shadow: 0 0 16px rgba(124,58,237,.5); }
.pd3-prev { left: 12px; }
.pd3-next { right: 12px; }
.pd3-img-counter {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  color: #e2e8f0; font-size: .7rem; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
}
.pd3-thumb-row {
  display: flex; gap: 8px; padding: 10px 12px;
  overflow-x: auto; scrollbar-width: none;
  background: rgba(0,0,0,.2); border-top: 1px solid rgba(139,92,246,.12);
}
.pd3-thumb-row::-webkit-scrollbar { display: none; }
.pd3-thumb-item {
  flex: 0 0 64px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color .2s, box-shadow .2s;
  opacity: .65; transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.pd3-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.pd3-thumb-item:hover { opacity: 1; }
.pd3-thumb-item.active { border-color: #7c3aed; opacity: 1; box-shadow: 0 0 10px rgba(124,58,237,.4); }
.pd3-thumb-more {
  background: rgba(124,58,237,.1); border: 2px dashed rgba(139,92,246,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: #6b7280; border-radius: 8px;
}
.pd3-fallback-img { height: 300px; overflow: hidden; position: relative; }
.pd3-fallback-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd3-video-btn {
  width: 100%; padding: 12px;
  background: rgba(124,58,237,.06);
  border: none; border-top: 1px solid rgba(139,92,246,.12);
  color: #a78bfa; font-size: .83rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, color .2s;
}
.pd3-video-btn:hover { background: rgba(124,58,237,.15); color: #c4b5fd; }

/* ── Info col ── */
.pd3-info-col { padding: 0; }
.pd3-badges-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pd3-cat-badge {
  background: rgba(124,58,237,.15); color: #a78bfa;
  border: 1px solid rgba(124,58,237,.35);
  font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px;
}
.pd3-type-badge {
  font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px; border: 1px solid;
}
.pd3-title {
  font-size: 1.6rem; font-weight: 800; color: #f1f5f9; line-height: 1.2; margin-bottom: 14px;
  background: linear-gradient(135deg, #fff 0%, #e9d5ff 60%, #c084fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 20px rgba(139,92,246,.2));
}
.pd3-rating-row {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: .85rem;
}
.pd3-stars { display: flex; gap: 3px; }
.pd3-star-on  { color: #f59e0b; }
.pd3-star-off { color: #374151; }
.pd3-rating-val { font-weight: 700; color: #f59e0b; }
.pd3-review-link { color: #6b7280; text-decoration: none; transition: color .2s; }
.pd3-review-link:hover { color: #a78bfa; }
.pd3-sep { color: #374151; }
.pd3-views { color: #6b7280; font-size: .8rem; }
.pd3-instant-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,185,129,.12); color: #34d399;
  border: 1px solid rgba(16,185,129,.28);
  font-size: .78rem; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; margin-bottom: 16px;
  box-shadow: 0 0 12px rgba(16,185,129,.1);
}
.pd3-instant-pill--timed {
  background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.25);
  box-shadow: 0 0 12px rgba(245,158,11,.08);
}

/* Specs */
.pd3-specs {
  border: 1px solid rgba(139,92,246,.15); border-radius: 14px;
  overflow: hidden; margin-bottom: 22px;
  background: rgba(10,0,30,.5);
}
.pd3-spec-row {
  display: flex; align-items: center; padding: 10px 16px; gap: 14px;
  border-bottom: 1px solid rgba(139,92,246,.08);
  transition: background .15s;
}
.pd3-spec-row:last-child { border-bottom: none; }
.pd3-spec-row:hover { background: rgba(124,58,237,.06); }
.pd3-spec-k { min-width: 120px; color: #6b7280; font-size: .8rem; font-weight: 500; }
.pd3-spec-v { color: #e2e8f0; font-size: .83rem; }
.pd3-spec-highlight { color: #c084fc; font-weight: 700; }
.pd3-instant-txt { color: #34d399; font-weight: 700; font-size: .82rem; }

.pd3-desc-block, .pd3-features-block { margin-bottom: 22px; }
.pd3-block-title {
  font-size: .78rem; font-weight: 800; color: #94a3b8;
  margin-bottom: 12px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.pd3-block-title::after { content: ''; flex: 1; height: 1px; background: rgba(139,92,246,.1); }
.pd3-desc-text { font-size: .85rem; color: #6b7280; line-height: 1.7; }
.pd3-feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.pd3-feat-item {
  display: flex; align-items: center; gap: 8px; font-size: .81rem; color: #94a3b8;
  background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.12);
  padding: 7px 10px; border-radius: 8px;
}
.pd3-feat-item i { color: #10b981; flex-shrink: 0; }

/* ── BUY PANEL ── */
.pd3-buy-col { position: relative; }
.pd3-buy-sticky { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 12px; }

/* Seller mini card */
.pd3-seller-mini {
  background: rgba(10,0,30,.8); backdrop-filter: blur(16px);
  border: 1px solid rgba(139,92,246,.2); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.pd3-smi-left { display: flex; gap: 12px; align-items: center; }
.pd3-smi-av {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(139,92,246,.3); box-shadow: 0 0 12px rgba(124,58,237,.2);
}
.pd3-smi-av-init {
  display: flex !important; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
}
.pd3-smi-info { flex: 1; min-width: 0; }
.pd3-smi-name {
  font-size: .88rem; font-weight: 700; color: #f1f5f9;
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.pd3-verified-ic { color: #3b82f6; font-size: .7rem; }
.pd3-smi-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.pd3-online-dot {
  width: 7px; height: 7px; background: #10b981; border-radius: 50%;
  animation: pd3OnlinePls 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(16,185,129,.6);
}
.pd3-online-lbl { font-size: .7rem; color: #10b981; font-weight: 600; }
.pd3-smi-stars { display: flex; align-items: center; gap: 3px; font-size: .72rem; }
.pd3-smi-stars span { color: #f1f5f9; font-weight: 700; margin-left: 3px; }
.pd3-smi-stars small { color: #4b5563; }
.pd3-smi-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd3-btn-profile {
  display: block; text-align: center; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8; font-size: .76rem; font-weight: 600; padding: 9px;
  border-radius: 10px; transition: all .2s;
}
.pd3-btn-profile:hover { background: rgba(255,255,255,.1); color: #e2e8f0; border-color: rgba(255,255,255,.2); }
.pd3-btn-msg {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.4);
  color: #c4b5fd; font-size: .76rem; font-weight: 600; padding: 9px;
  border-radius: 10px; cursor: pointer; transition: all .2s;
}
.pd3-btn-msg:hover { background: rgba(124,58,237,.35); color: #e9d5ff; border-color: rgba(124,58,237,.6); box-shadow: 0 0 14px rgba(124,58,237,.25); }

/* Price box */
.pd3-price-box {
  background: rgba(10,0,30,.9); backdrop-filter: blur(20px);
  border: 1px solid rgba(139,92,246,.25); border-radius: 18px;
  padding: 20px; position: relative; overflow: hidden;
}
.pd3-price-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #7c3aed, #c084fc, #db2777, #7c3aed);
  background-size: 200% 100%;
  animation: pd3Shimmer 3s linear infinite;
}
.pd3-price-top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pd3-old-price { color: #4b5563; font-size: .9rem; text-decoration: line-through; }
.pd3-disc-badge {
  background: rgba(239,68,68,.12); color: #f87171;
  border: 1px solid rgba(239,68,68,.25); font-size: .7rem; font-weight: 800;
  padding: 3px 8px; border-radius: 6px;
}
.pd3-price-big {
  font-size: 2.2rem; font-weight: 900; color: #e9d5ff; margin-bottom: 18px; line-height: 1;
  animation: pd3PricePop 3s ease-in-out infinite;
}
.pd3-btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
  border: none; color: #fff; font-size: .95rem; font-weight: 800;
  border-radius: 12px; cursor: pointer; text-decoration: none; margin-bottom: 8px;
  animation: pd3BuyPulse 2.5s ease-in-out infinite;
  transition: transform .15s, opacity .2s; position: relative; overflow: hidden;
  letter-spacing: .02em;
}
.pd3-btn-buy::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.pd3-btn-buy:hover::before { left: 150%; }
.pd3-btn-buy:hover { opacity: .92; transform: translateY(-1px); color: #fff; }
.pd3-btn-buy:active { transform: scale(.98); }
.pd3-btn-buy:disabled { opacity: .5; animation: none; cursor: not-allowed; }
.pd3-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.3);
  color: #c4b5fd; font-size: .88rem; font-weight: 700;
  border-radius: 12px; cursor: pointer; margin-bottom: 8px;
  transition: all .2s;
}
.pd3-btn-cart:hover { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.5); box-shadow: 0 0 16px rgba(124,58,237,.2); }
.pd3-btn-wishlist {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 9px; background: transparent; border: none;
  color: #4b5563; font-size: .82rem; cursor: pointer; transition: color .2s;
}
.pd3-btn-wishlist:hover { color: #db2777; }

/* Protection box */
.pd3-protection-box {
  background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.18);
  border-radius: 16px; padding: 16px;
}
.pd3-prot-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pd3-prot-ic {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(5,150,105,.15));
  border: 1px solid rgba(16,185,129,.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #10b981; font-size: .9rem; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(16,185,129,.2);
}
.pd3-prot-title { font-size: .85rem; font-weight: 700; color: #e2e8f0; }
.pd3-prot-sub { font-size: .72rem; color: #6b7280; margin-top: 2px; }
.pd3-prot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.pd3-prot-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: .79rem; color: #94a3b8;
}
.pd3-prot-list li i { color: #10b981; font-size: .68rem; }

/* Offer */
.pd3-btn-offer {
  width: 100%; padding: 11px; background: transparent;
  border: 1px dashed rgba(139,92,246,.25); color: #6b7280;
  font-size: .82rem; font-weight: 600; border-radius: 12px;
  cursor: pointer; transition: all .2s;
}
.pd3-btn-offer:hover { border-color: rgba(139,92,246,.5); color: #a78bfa; background: rgba(124,58,237,.05); }
.pd3-offer-form { display: flex; flex-direction: column; gap: 10px; }
.pd3-offer-lbl { font-size: .76rem; color: #6b7280; font-weight: 600; }
.pd3-offer-inp, .pd3-offer-txt {
  background: rgba(255,255,255,.04); border: 1px solid rgba(139,92,246,.2);
  border-radius: 10px; color: #e2e8f0; padding: 10px 12px;
  font-size: .83rem; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.pd3-offer-inp:focus, .pd3-offer-txt:focus {
  outline: none; border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.pd3-panel-links {
  display: flex; gap: 20px; justify-content: center; padding-top: 4px;
}
.pd3-panel-links a { color: #374151; font-size: .76rem; text-decoration: none; transition: color .2s; }
.pd3-panel-links a:hover { color: #ef4444; }

/* ── 3 INFO CARDS ── */
.pd3-info-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 28px;
}
.pd3-icard {
  background: rgba(10,0,30,.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(139,92,246,.15); border-radius: 18px;
  overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.pd3-icard:hover { border-color: rgba(139,92,246,.3); box-shadow: 0 0 30px rgba(124,58,237,.08); }
.pd3-icard-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid rgba(139,92,246,.1);
  font-size: .88rem; font-weight: 700; color: #e2e8f0;
  background: rgba(124,58,237,.05);
}
.pd3-icard-body { padding: 14px 18px; }
.pd3-icard-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  font-size: .82rem; color: #6b7280;
  border-bottom: 1px solid rgba(139,92,246,.06);
}
.pd3-icard-item:last-child { border-bottom: none; }
.pd3-icard-item i { font-size: .78rem; flex-shrink: 0; }

/* Rank display */
.pd3-rank-display { display: flex; justify-content: center; margin-bottom: 16px; }
.pd3-rank-circle {
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(124,58,237,.25), rgba(109,40,217,.1));
  border: 2px solid rgba(124,58,237,.4); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(124,58,237,.2);
}
.pd3-rank-name { font-size: .65rem; font-weight: 900; letter-spacing: .04em; color: #e9d5ff; text-align: center; }
.pd3-rank-lv { font-size: .65rem; color: #6b7280; margin-top: 2px; }
.pd3-pstats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pd3-pstat {
  background: rgba(124,58,237,.07); border: 1px solid rgba(139,92,246,.12);
  border-radius: 10px; padding: 12px; text-align: center;
}
.pd3-pstat-v { font-size: 1rem; font-weight: 800; color: #e9d5ff; }
.pd3-pstat-l { font-size: .68rem; color: #4b5563; margin-top: 3px; }

/* Seller info card */
.pd3-seller-info-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.pd3-sinfo-av {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(139,92,246,.3);
}
.pd3-sinfo-av-i { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #fff; }
.pd3-sinfo-name { font-size: .9rem; font-weight: 700; color: #f1f5f9; display: flex; align-items: center; gap: 6px; }
.pd3-sinfo-level { font-size: .7rem; color: #6b7280; margin: 3px 0; }
.pd3-sinfo-stars { display: flex; align-items: center; gap: 3px; font-size: .72rem; }
.pd3-sinfo-stars span { color: #f1f5f9; font-weight: 700; margin-left: 3px; }
.pd3-sinfo-stars small { color: #4b5563; }
.pd3-sstats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 14px; }
.pd3-sstat {
  background: rgba(124,58,237,.07); border: 1px solid rgba(139,92,246,.12);
  border-radius: 10px; padding: 10px; text-align: center;
}
.pd3-sstat-v { font-size: .92rem; font-weight: 800; color: #e9d5ff; }
.pd3-sstat-l { font-size: .65rem; color: #4b5563; margin-top: 3px; }
.pd3-sinfo-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px;
  background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25);
  border-radius: 10px; color: #c4b5fd; font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.pd3-sinfo-btn:hover { background: rgba(124,58,237,.2); color: #e9d5ff; box-shadow: 0 0 14px rgba(124,58,237,.2); }

/* ── TRUST BAR ── */
.pd3-trust-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.15); border-radius: 18px;
  overflow: hidden; margin-bottom: 36px;
}
.pd3-tbar-item {
  display: flex; gap: 14px; align-items: center; padding: 20px 18px;
  background: rgba(10,0,30,.75); backdrop-filter: blur(10px);
  transition: background .25s;
  animation: pd3TrustIn .5s ease both;
}
.pd3-tbar-item:nth-child(1) { animation-delay: .05s; }
.pd3-tbar-item:nth-child(2) { animation-delay: .1s; }
.pd3-tbar-item:nth-child(3) { animation-delay: .15s; }
.pd3-tbar-item:nth-child(4) { animation-delay: .2s; }
.pd3-tbar-item:hover { background: rgba(124,58,237,.08); }
.pd3-tbar-ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.pd3-tbar-ttl { font-size: .84rem; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; }
.pd3-tbar-sub { font-size: .71rem; color: #4b5563; line-height: 1.4; }

/* ── REVIEWS ── */
.pd3-reviews-wrap { margin-bottom: 40px; }
.pd3-section-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
}
.pd3-section-ttl {
  font-size: 1.25rem; font-weight: 800; color: #f1f5f9; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.pd3-section-ttl::before {
  content: ''; width: 4px; height: 22px;
  background: linear-gradient(180deg, #7c3aed, #c084fc);
  border-radius: 2px; display: block;
}
.pd3-rev-cnt-badge { color: #4b5563; font-weight: 400; font-size: 1rem; }
.pd3-view-all-lnk { font-size: .82rem; color: #7c3aed; text-decoration: none; transition: color .2s; }
.pd3-view-all-lnk:hover { color: #a78bfa; }

.pd3-reviews-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }

.pd3-rating-sum {
  background: rgba(10,0,30,.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(139,92,246,.15); border-radius: 18px;
  padding: 28px 22px; display: flex; flex-direction: column; align-items: center;
}
.pd3-big-num {
  font-size: 3.5rem; font-weight: 900; color: #e9d5ff; line-height: 1;
  text-shadow: 0 0 30px rgba(192,132,252,.4);
}
.pd3-big-stars { display: flex; gap: 4px; margin: 10px 0 5px; }
.pd3-big-stars .pd3-star-on { font-size: 1.1rem; }
.pd3-big-of { font-size: .8rem; color: #4b5563; margin-bottom: 20px; }
.pd3-rbar-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pd3-rbar-row { display: flex; align-items: center; gap: 8px; }
.pd3-rbar-lbl { font-size: .74rem; color: #6b7280; min-width: 34px; display: flex; align-items: center; gap: 3px; }
.pd3-rbar-track {
  flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden;
}
.pd3-rbar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  animation: pd3RbarFill .8s ease both;
}
.pd3-rbar-num { font-size: .7rem; color: #4b5563; min-width: 30px; text-align: right; }

.pd3-rev-cards { display: flex; flex-direction: column; gap: 14px; }
.pd3-rev-card {
  display: flex; gap: 14px;
  background: rgba(10,0,30,.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(139,92,246,.1); border-radius: 16px; padding: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.pd3-rev-card:hover { border-color: rgba(139,92,246,.25); box-shadow: 0 0 20px rgba(124,58,237,.06); }
.pd3-rev-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: .95rem; flex-shrink: 0;
  box-shadow: 0 0 12px rgba(124,58,237,.3);
}
.pd3-rev-body { flex: 1; }
.pd3-rev-toprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.pd3-rev-name { font-size: .88rem; font-weight: 700; color: #e2e8f0; }
.pd3-rev-verified {
  font-size: .68rem; color: #3b82f6; font-weight: 600;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2);
  padding: 2px 7px; border-radius: 4px;
}
.pd3-rev-time { font-size: .7rem; color: #374151; margin-left: auto; }
.pd3-rev-stars { display: flex; gap: 3px; margin-bottom: 8px; font-size: .8rem; }
.pd3-rev-txt { font-size: .83rem; color: #6b7280; line-height: 1.6; margin: 0; }
.btn-appeal-review { background: none; border: none; padding: 0; font-size: .74rem; color: #374151; cursor: pointer; transition: color .2s; }
.btn-appeal-review:hover { color: #ef4444; }
.pd3-no-rev { text-align: center; padding: 50px; color: #374151; }
.pd3-more-reviews-btn {
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25);
  color: #a78bfa; padding: 11px 30px; border-radius: 10px;
  font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.pd3-more-reviews-btn:hover { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.5); box-shadow: 0 0 16px rgba(124,58,237,.2); }

/* ── RELATED PRODUCTS ── */
.pd3-related-wrap { margin-bottom: 44px; }
.pd3-related-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }

/* ── RESPONSIVE ── */
@media (max-width: 1280px) {
  .pd3-main-grid { grid-template-columns: 330px 1fr 280px; gap: 20px; }
}
@media (max-width: 1100px) {
  .pd3-main-grid    { grid-template-columns: 300px 1fr 260px; gap: 16px; }
  .pd3-related-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 992px) {
  .pd3-main-grid      { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pd3-buy-col        { grid-column: 1 / -1; }
  .pd3-buy-sticky     { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .pd3-seller-mini, .pd3-price-box, .pd3-protection-box { flex: 1 1 260px; }
  .pd3-trust-bar      { grid-template-columns: repeat(2,1fr); }
  .pd3-related-grid   { grid-template-columns: repeat(3,1fr); }
  .pd3-reviews-layout { grid-template-columns: 1fr; }
  .pd3-rating-sum     { flex-direction: row; flex-wrap: wrap; gap: 18px; padding: 18px; align-items: center; }
  .pd3-rbar-list      { flex: 1 1 200px; }
}

/* ═══ MOBILE REDESIGN ═══ */
@media (max-width: 768px) {
  .pd3-game-banner                      { display: none; }
  .pd3-page--no-images .pd3-game-banner { display: block; height: 200px; }
  .pd3-page--no-images .pd3-gallery-col { display: none; }
  .pd3-container  { padding: 0 0 110px; }
  .pd3-breadcrumb { flex-wrap: nowrap; overflow: hidden; gap: 4px; padding: 10px 16px 8px; font-size: .72rem; }
  .pd3-breadcrumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
  .pd3-main-grid   { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; }
  .pd3-gallery-col { order: 1; width: 100%; flex-shrink: 0; }
  .pd3-info-col    { order: 2; padding: 0; }
  .pd3-buy-col     { order: 3; padding: 0; }
  .pd3-gallery-wrap { border: none; border-radius: 0; }
  .pd3-main-swiper  { height: 280px; }
  .pd3-fallback-img { height: 240px; }
  .pd3-fallback-img img { object-fit: contain; padding: 16px; }
  .pd3-thumb-row { padding: 8px 16px 6px; gap: 8px; }
  .pd3-thumb-item { flex: 0 0 52px; height: 40px; }
  .pd3-video-btn  { display: none; }
  .pd3-badges-row   { padding: 14px 16px 0; gap: 6px; }
  .pd3-title        { font-size: 1.25rem; line-height: 1.3; padding: 10px 16px 0; margin: 0; -webkit-text-fill-color: unset; color: #f1f5f9; }
  .pd3-rating-row   { flex-wrap: wrap; gap: 6px; font-size: .8rem; padding: 8px 16px 0; }
  .pd3-instant-pill { margin: 10px 16px 0; font-size: .78rem; }
  .pd3-specs         { margin: 14px 16px 0; border-radius: 14px; }
  .pd3-spec-row      { padding: 9px 14px; }
  .pd3-spec-k        { min-width: 80px; font-size: .76rem; }
  .pd3-spec-v        { font-size: .8rem; }
  .pd3-desc-block, .pd3-features-block, .pd3-acct-block { padding: 0 16px; margin-top: 16px; }
  .pd3-block-title   { font-size: .82rem; }
  .pd3-desc-text     { font-size: .82rem; }
  .pd3-feat-grid     { grid-template-columns: 1fr; gap: 6px; }
  .pd3-acct-grid     { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .pd3-acct-tile     { padding: 10px 8px; border-radius: 10px; }
  /* ── Buy panel — full-width using gap+padding (no horizontal margin overflow) ── */
  .pd3-buy-col::before { content:''; display:block; height:1px; background:linear-gradient(90deg,transparent,rgba(139,92,246,.2),transparent); margin:24px 16px 0; }
  .pd3-buy-sticky     { position:static; display:flex; flex-direction:column; gap:12px; padding:0 16px; }
  .pd3-seller-mini, .pd3-price-box, .pd3-protection-box { flex:none; width:100%; margin:0; }
  .pd3-price-box      { order:10; }
  .pd3-seller-mini    { order:20; }
  .pd3-protection-box { order:30; }
  .pd3-btn-offer      { order:40; width:100%; margin:0; }
  #pd3OfferBox        { order:41; }
  .pd3-panel-links    { order:50; padding:4px 0 0; justify-content:center; gap:24px; }
  /* ── Price box on mobile ── */
  .pd3-price-box { padding:18px; }
  .pd3-price-big { font-size:1.85rem; margin-bottom:16px; }
  .pd3-btn-buy   { padding:15px; font-size:.95rem; letter-spacing:.02em; }
  .pd3-btn-cart  { margin-top:0; }
  .pd3-btn-wishlist { margin-top:0; }
  /* ── Seller mini card on mobile ── */
  .pd3-smi-left  { align-items:center; }
  .pd3-smi-name  { flex-wrap:wrap; word-break:break-word; max-width:100%; }
  .pd3-smi-btns  { grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  /* ── Protection box on mobile ── */
  .pd3-protection-box { padding:16px; }
  .pd3-prot-head { gap:12px; margin-bottom:10px; }
  .pd3-prot-list li { font-size:.8rem; padding:2px 0; }
  /* ── 3 info cards — always visible single column ── */
  .pd3-info-cards { display:grid !important; grid-template-columns:1fr; gap:10px; padding:0 16px; margin:24px 0 8px; }
  .pd3-icard { animation:none !important; opacity:1 !important; transform:none !important; }
  /* ── Trust bar bottom spacing ── */
  .pd3-trust-bar { margin:20px 16px 20px; }
  .pd3-trust-bar      { grid-template-columns: repeat(2,1fr); margin: 20px 16px 20px; }
  .pd3-tbar-item      { padding: 14px 12px; }
  .pd3-tbar-ic        { width: 38px; height: 38px; font-size: .82rem; border-radius: 10px; }
  .pd3-reviews-wrap   { padding: 0 16px; }
  .pd3-reviews-layout { grid-template-columns: 1fr; }
  .pd3-rating-sum     { flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 16px; align-items: center; }
  .pd3-rbar-list      { flex: 1 1 160px; }
  .pd3-big-num        { font-size: 2.6rem; }
  .pd3-rev-card       { padding: 14px; gap: 10px; }
  .pd3-rev-verified   { display: none; }
  .pd3-rev-time       { font-size: .68rem; }
  .pd3-related-wrap   { padding: 0 16px; }
  .pd3-related-grid   { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .pd3-related-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pd3-section-hdr    { padding: 0 0 4px; }
}
@media (max-width: 576px) {
  .pd3-main-swiper  { height: 240px; }
  .pd3-fallback-img { height: 200px; }
  .pd3-price-big    { font-size: 1.65rem; }
  .pd3-big-num      { font-size: 2.2rem; }
  .pd3-acct-grid    { grid-template-columns: repeat(2,1fr); }
  .pd3-tbar-ttl     { font-size: .76rem; }
  .pd3-tbar-sub     { font-size: .66rem; }
  .pd3-related-grid { gap: 8px; }
}
@media (max-width: 480px) {
  .pd3-main-swiper  { height: 210px; }
  .pd3-price-big    { font-size: 1.5rem; }
  .pd3-big-num      { font-size: 2rem; }
  .pd3-tbar-sub     { display: none; }
  .pd3-related-grid { gap: 6px; }
  .pd3-breadcrumb a:not(:first-child):not(:last-child) { display: none; }
  .pd3-breadcrumb i:not(:last-of-type) { display: none; }
}

/* ── Sticky mobile buy bar ── */
.pd3-mob-buy-bar { display: none; }
@media (max-width: 768px) {
  .pd3-mob-buy-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; bottom: 62px; left: 0; right: 0; z-index: 400;
    background: rgba(10,0,30,.95); backdrop-filter: blur(20px);
    border-top: 1px solid rgba(139,92,246,.2);
    padding: 10px 16px;
    box-shadow: 0 -4px 30px rgba(124,58,237,.15);
    transform: translateY(110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .pd3-mob-buy-bar.is-visible { transform: translateY(0); }
  .pd3-mob-price { flex: 1; min-width: 0; }
  .pd3-mob-price-lbl { font-size: .68rem; color: #4b5563; line-height: 1; margin-bottom: 2px; }
  .pd3-mob-price-val { font-size: 1.2rem; font-weight: 900; color: #e9d5ff; line-height: 1; }
  .pd3-mob-btn {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    font-size: .9rem; font-weight: 800; padding: 12px 22px;
    border-radius: 12px; border: none; text-decoration: none; cursor: pointer;
    box-shadow: 0 0 20px rgba(124,58,237,.5); white-space: nowrap;
  }
}

/* Light theme overrides for pd3 */
[data-theme="light"] .pd3-gallery-wrap  { background: #fff; border-color: #e2e8f0; box-shadow: 0 2px 20px rgba(0,0,0,.06); }
[data-theme="light"] .pd3-gallery-wrap:hover { border-color: #c4b5fd; box-shadow: 0 4px 30px rgba(124,58,237,.1); }
[data-theme="light"] .pd3-thumb-row     { background: #f8f9fa; border-top-color: #e2e8f0; }
[data-theme="light"] .pd3-specs         { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-spec-row      { border-bottom-color: #f1f5f9; }
[data-theme="light"] .pd3-spec-row:hover { background: rgba(124,58,237,.03); }
[data-theme="light"] .pd3-spec-k        { color: #64748b; }
[data-theme="light"] .pd3-spec-v        { color: #1e293b; }
[data-theme="light"] .pd3-title         { background: linear-gradient(135deg,#1e293b 0%,#6d28d9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
[data-theme="light"] .pd3-desc-text     { color: #64748b; }
[data-theme="light"] .pd3-feat-item     { background: rgba(16,185,129,.04); border-color: rgba(16,185,129,.15); color: #334155; }
[data-theme="light"] .pd3-seller-mini   { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-smi-name      { color: #1e293b; }
[data-theme="light"] .pd3-price-box     { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-price-big     { color: #1e293b; text-shadow: none; animation: none; }
[data-theme="light"] .pd3-btn-cart      { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.25); }
[data-theme="light"] .pd3-protection-box { background: rgba(16,185,129,.04); border-color: rgba(16,185,129,.2); }
[data-theme="light"] .pd3-prot-title    { color: #1e293b; }
[data-theme="light"] .pd3-prot-list li  { color: #64748b; }
[data-theme="light"] .pd3-icard         { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-icard:hover   { border-color: #c4b5fd; }
[data-theme="light"] .pd3-icard-head    { background: #f8f9fa; border-bottom-color: #f1f5f9; color: #1e293b; }
[data-theme="light"] .pd3-icard-item    { color: #64748b; }
[data-theme="light"] .pd3-pstat         { background: rgba(124,58,237,.05); border-color: #e2e8f0; }
[data-theme="light"] .pd3-pstat-v       { color: #1e293b; }
[data-theme="light"] .pd3-sstat         { background: rgba(124,58,237,.05); border-color: #e2e8f0; }
[data-theme="light"] .pd3-sstat-v       { color: #1e293b; }
[data-theme="light"] .pd3-sinfo-btn     { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); color: #6d28d9; }
[data-theme="light"] .pd3-trust-bar     { background: #e2e8f0; border-color: #e2e8f0; }
[data-theme="light"] .pd3-tbar-item     { background: #fff; }
[data-theme="light"] .pd3-tbar-item:hover { background: rgba(124,58,237,.03); }
[data-theme="light"] .pd3-tbar-ttl      { color: #1e293b; }
[data-theme="light"] .pd3-tbar-sub      { color: #64748b; }
[data-theme="light"] .pd3-rating-sum    { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-big-num       { color: #1e293b; text-shadow: none; }
[data-theme="light"] .pd3-rev-card      { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-rev-card:hover { border-color: #c4b5fd; }
[data-theme="light"] .pd3-rev-name      { color: #1e293b; }
[data-theme="light"] .pd3-rev-txt       { color: #64748b; }
[data-theme="light"] .pd3-mob-buy-bar   { background: rgba(255,255,255,.96); border-top-color: #e2e8f0; box-shadow: 0 -4px 20px rgba(0,0,0,.1); }
[data-theme="light"] .pd3-mob-price-val { color: #1e293b; }
[data-theme="light"] .pd3-section-ttl   { color: #1e293b; }
[data-theme="light"] .pd3-breadcrumb a  { color: #94a3b8; }
[data-theme="light"] .pd3-breadcrumb span { color: #64748b; }

/* ════════════════════════════════════════════════════════════
   PD3 EXTRA — BEAUTY & UNIQUE ENHANCEMENTS
   ════════════════════════════════════════════════════════════ */

/* New keyframes */
@keyframes pd3GridFade  { from{opacity:0} to{opacity:.55} }
@keyframes pd3ScanPulse { 0%,100%{transform:translateY(-200%);opacity:0} 40%{opacity:.6} 100%{opacity:0} }
@keyframes pd3NeonPop   { 0%,100%{text-shadow:0 0 18px rgba(192,132,252,.4)} 50%{text-shadow:0 0 36px rgba(192,132,252,.9),0 0 70px rgba(124,58,237,.4)} }
@keyframes pd3CornerIn  { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes pd3FloatUp   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes pd3HaloSpin  { to{transform:rotate(360deg)} }

/* ── Dot-grid overlay on banner for gaming aesthetic ── */
.pd3-game-banner::before {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: radial-gradient(circle, rgba(139,92,246,.18) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: pd3GridFade .8s ease both;
}

/* ── Subtle scan-line sweep on the banner ── */
.pd3-game-banner::after {
    content: '';
    position: absolute; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(124,58,237,.07), transparent);
    animation: pd3ScanPulse 6s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* ── Subtle dot-grid page background ── */
.pd3-page {
    background-image:
        linear-gradient(rgba(124,58,237,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* ── Gallery card — position + neon border animation ── */
.pd3-gallery-wrap { position: relative; }
.pd3-gallery-wrap::before,
.pd3-gallery-wrap::after {
    content: ''; position: absolute;
    width: 22px; height: 22px;
    pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .4s ease;
    border-style: solid; border-color: rgba(124,58,237,.6);
}
.pd3-gallery-wrap::before { top: 14px; left: 14px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.pd3-gallery-wrap::after  { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.pd3-gallery-wrap:hover::before,
.pd3-gallery-wrap:hover::after { opacity: 1; animation: pd3CornerIn .3s ease both; }

/* ── Product title — neon glow pulse ── */
.pd3-title { animation: pd3NeonPop 4s ease-in-out infinite; }

/* ── Price big — animated cursor text effect ── */
.pd3-price-big::after {
    content: ''; display: inline-block; width: 2px; height: 1.1em;
    background: #c084fc; margin-left: 4px; vertical-align: middle;
    animation: pd3OnlinePls .9s ease-in-out infinite;
    border-radius: 1px; opacity: .6;
}

/* ── Buy button — scanline overlay inside button ── */
.pd3-btn-buy::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: repeating-linear-gradient(
        0deg, transparent 0px, transparent 3px,
        rgba(255,255,255,.025) 3px, rgba(255,255,255,.025) 4px
    );
}

/* ── Seller mini card — avatar float animation ── */
.pd3-smi-av { animation: pd3FloatUp 3.5s ease-in-out infinite; }

/* ── Protection icon — halo ring ── */
.pd3-prot-ic::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px dashed rgba(16,185,129,.25);
    animation: pd3HaloSpin 6s linear infinite;
}
.pd3-prot-ic { position: relative; }

/* ── Info cards — staggered entrance ── */
.pd3-icard:nth-child(1) { animation: pd3TrustIn .4s ease .05s both; }
.pd3-icard:nth-child(2) { animation: pd3TrustIn .4s ease .12s both; }
.pd3-icard:nth-child(3) { animation: pd3TrustIn .4s ease .19s both; }

/* ── Trust bar icon glow colors ── */
.pd3-tbar-ic[style*="#6d28d9"] { box-shadow: 0 0 16px rgba(109,40,217,.2); }
.pd3-tbar-ic[style*="#10b981"] { box-shadow: 0 0 16px rgba(16,185,129,.2); }
.pd3-tbar-ic[style*="#3b82f6"] { box-shadow: 0 0 16px rgba(59,130,246,.2); }
.pd3-tbar-ic[style*="#f59e0b"] { box-shadow: 0 0 16px rgba(245,158,11,.2); }

/* ── Review cards — hover lift ── */
.pd3-rev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124,58,237,.1);
}
.pd3-rev-card { transition: border-color .2s, box-shadow .2s, transform .2s; }

/* ── Review avatar — random gradient pop ── */
.pd3-rev-av { box-shadow: 0 0 16px rgba(124,58,237,.25); }

/* ── Section title — glowing vertical bar ── */
.pd3-section-ttl { position: relative; }
.pd3-section-ttl::before { box-shadow: 0 0 10px rgba(124,58,237,.5); }

/* ── Rating bars — color gradient per star count ── */
.pd3-rbar-row:first-child .pd3-rbar-fill  { background: linear-gradient(90deg, #10b981, #34d399); }
.pd3-rbar-row:nth-child(2) .pd3-rbar-fill { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.pd3-rbar-row:nth-child(3) .pd3-rbar-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pd3-rbar-row:nth-child(4) .pd3-rbar-fill { background: linear-gradient(90deg, #f97316, #fb923c); }
.pd3-rbar-row:nth-child(5) .pd3-rbar-fill { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ── Rank circle — glow matching rank color ── */
.pd3-rank-circle { transition: box-shadow .3s; }

/* ── Spec table — left accent line ── */
.pd3-spec-row { position: relative; }
.pd3-spec-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: transparent; transition: background .2s;
    border-radius: 2px;
}
.pd3-spec-row:hover::before { background: rgba(124,58,237,.5); }

/* ── Related products — section separator ── */
.pd3-related-wrap + .pd3-related-wrap { padding-top: 8px; position: relative; }
.pd3-related-wrap + .pd3-related-wrap::before {
    content: ''; display: block; height: 1px; margin-bottom: 32px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.2), transparent);
}

/* ── Offer input focus glow ── */
.pd3-offer-inp:focus, .pd3-offer-txt:focus {
    box-shadow: 0 0 0 3px rgba(124,58,237,.12), 0 0 20px rgba(124,58,237,.06);
}

/* ── Product Report Modal category buttons ── */
.pr-cat-btn {
    display: flex; align-items: center;
    background: rgba(255,255,255,.04); border: 1px solid rgba(139,92,246,.15);
    border-radius: 10px; color: #94a3b8; font-size: .78rem; font-weight: 600;
    padding: 10px 12px; cursor: pointer; text-align: left; width: 100%;
    transition: all .2s;
}
.pr-cat-btn:hover { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); color: #e2e8f0; }
.pr-cat-btn.selected { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); color: #f87171; }
.pr-cat-btn.selected i { color: #f87171 !important; }

/* ────────────────────────────────────────────────────────────
   IMAGE LIGHTBOX — ANIMATED GLASSMORPHISM
   ────────────────────────────────────────────────────────────*/
#pdLightboxOverlay {
    display: flex !important;
    position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center; flex-direction: column; gap: 16px;
    background: rgba(3,0,10,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .32s ease, visibility .32s ease;
    padding: 24px;
    cursor: zoom-out;
}
#pdLightboxOverlay.pd3-lb-open {
    visibility: visible; opacity: 1; pointer-events: all;
}

/* Image: scale + fade in with spring easing */
#pdLightboxImg {
    max-width: 90vw; max-height: 82vh; object-fit: contain;
    border-radius: 14px; display: block; cursor: default;
    box-shadow: 0 0 80px rgba(124,58,237,.22), 0 30px 80px rgba(0,0,0,.9);
    border: 1px solid rgba(139,92,246,.2);
    transform: scale(.86); opacity: 0;
    transition: transform .44s cubic-bezier(.34,1.56,.64,1) .06s, opacity .3s ease .06s;
}
#pdLightboxOverlay.pd3-lb-open #pdLightboxImg {
    transform: scale(1); opacity: 1;
}

/* Close button */
.pd3-lb-close {
    position: absolute; top: 18px; right: 20px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12); color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; cursor: pointer; z-index: 1;
    transition: background .22s, color .22s, transform .28s cubic-bezier(.34,1.56,.64,1), border-color .22s;
}
.pd3-lb-close:hover {
    background: rgba(239,68,68,.2); color: #f87171;
    border-color: rgba(239,68,68,.4);
    transform: rotate(90deg) scale(1.08);
}

/* Hint text */
.pd3-lb-hint {
    font-size: .7rem; color: rgba(255,255,255,.22);
    letter-spacing: .06em; text-align: center; cursor: default;
    opacity: 0; transition: opacity .4s ease .35s; pointer-events: none;
    user-select: none;
}
#pdLightboxOverlay.pd3-lb-open .pd3-lb-hint { opacity: 1; }

/* ── Mobile lightbox adjustments ── */
@media (max-width: 768px) {
    #pdLightboxImg { max-width: 95vw; max-height: 78vh; border-radius: 10px; }
    .pd3-lb-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: .85rem; }
    .pd3-lb-hint { font-size: .65rem; }
}

/* ────────────────────────────────────────────────────────────
   MOBILE PERFECTION — MICRO POLISH
   ────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
    /* Page bg grid on mobile */
    .pd3-page { background-size: 24px 24px; }

    /* Seller card — horizontal layout on mobile */
    .pd3-seller-mini { flex-direction: column; }
    .pd3-smi-left { flex-direction: row; align-items: center; gap: 14px; }
    .pd3-smi-av   { animation: none; } /* disable float on mobile */

    /* Price box gradient on mobile */
    .pd3-price-box::before { height: 1px; }

    /* Buy button — full width prominent */
    .pd3-btn-buy { font-size: .95rem; letter-spacing: .03em; }

    /* Title animation off on mobile (perf) */
    .pd3-title { animation: none; color: #f1f5f9; }

    /* Price cursor blink off on mobile */
    .pd3-price-big::after { display: none; }

    /* Spec row accent line visible on mobile */
    .pd3-spec-row::before { display: none; }

    /* Banner effects off on mobile (perf) */
    .pd3-game-banner::before,
    .pd3-game-banner::after { display: none; }

    /* Section title underline still visible */
    .pd3-section-ttl::after { animation: pd3RbarFill .5s ease .1s both; }

    /* Account tiles — tighter on mobile */
    .pd3-acct-tile { padding: 12px 6px; border-radius: 12px; }
    .pd3-acct-tile:hover { transform: none; }
    .pd3-acct-tile-val { font-size: .88rem; }

    /* Trust bar — full-width item layout */
    .pd3-tbar-item { flex-direction: row; gap: 12px; }
    .pd3-tbar-ic   { flex-shrink: 0; border-radius: 10px; }

    /* Review cards on mobile — simpler hover */
    .pd3-rev-card:hover { transform: none; }

    /* Info cards enter animation off on mobile */
    .pd3-icard { animation: none !important; }

    /* Mob buy bar — neon glow bottom */
    .pd3-mob-buy-bar { box-shadow: 0 -2px 30px rgba(124,58,237,.2), 0 -1px 0 rgba(139,92,246,.3); }
    .pd3-mob-btn     { animation: pd3BuyPulse 2.5s ease-in-out infinite; }

    /* Sticky bar z-index above mobile nav */
    .pd3-mob-buy-bar { bottom: 62px; }
}

@media (max-width: 480px) {
    .pd3-acct-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .pd3-trust-bar { border-radius: 14px; }
    .pd3-price-box { border-radius: 14px; }
    .pd3-seller-mini { border-radius: 14px; }
    .pd3-protection-box { border-radius: 12px; }
    .pd3-gallery-wrap::before, .pd3-gallery-wrap::after { display: none; }
}

/* ============================================================
   SELLER PUBLIC PROFILE — sp- prefix
   ============================================================ */

.sp-page { background: var(--bg-primary); }

/* Banner */
.sp-banner { position: relative; height: 280px; overflow: hidden; }
.sp-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.6); }
.sp-banner-default { width: 100%; height: 100%; background: linear-gradient(135deg,#0d0d1a 0%,#1a0d3a 50%,#0d1a2e 100%); }
.sp-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,13,26,0) 50%, rgba(13,13,26,1) 100%); }

.sp-container { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.sp-hero-wrap { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding-bottom: 0; }
.sp-hero {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 0 20px;
  transform: translateY(-40px);
  margin-bottom: -40px;
}
.sp-hero-av-wrap { position: relative; flex-shrink: 0; }
.sp-hero-av {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-card);
}
.sp-hero-av-init {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}
.sp-av-online {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}
.sp-hero-meta { flex: 1; padding-bottom: 4px; }
.sp-hero-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sp-hero-name { font-size: 1.5rem; font-weight: 900; color: var(--text); margin: 0; }
.sp-verified-ic { color: #3b82f6; font-size: 1rem; }
.sp-level-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}
.sp-elite-badge {
  background: linear-gradient(135deg,#b45309,#f59e0b);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.sp-hero-rating-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .82rem; }
.sp-star-on  { color: var(--gold); }
.sp-star-off { color: var(--border-light); }
.sp-rating-val { font-weight: 700; color: var(--gold); }
.sp-rating-cnt { color: var(--text-muted); }
.sp-online-pill {
  background: rgba(16,185,129,.15);
  color: var(--success);
  border: 1px solid rgba(16,185,129,.3);
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 12px;
}
.sp-hero-sub-row { display: flex; gap: 16px; font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; }
.sp-hero-actions { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; flex-shrink: 0; }
.sp-btn-follow {
  background: var(--primary);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.sp-btn-follow:hover { background: var(--primary-hover); }
.sp-btn-msg {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: .83rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
.sp-btn-msg:hover { background: rgba(255,255,255,.13); }
.sp-btn-fav {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  text-align: center;
  transition: color .2s;
}
.sp-btn-fav:hover { color: #ec4899; }

/* Stats bar */
.sp-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.sp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 10px;
  background: var(--bg-secondary);
  text-align: center;
}
.sp-stat-icon { font-size: .85rem; margin-bottom: 2px; }
.sp-stat-val { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.sp-stat-lbl { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Body */
.sp-body { padding: 28px 20px 60px; }
.sp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.sp-main-col { display: flex; flex-direction: column; gap: 28px; }

/* Sections */
.sp-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sp-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.sp-section-ttl { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px; }
.sp-count-badge {
  background: rgba(109,40,217,.2);
  color: #a78bfa;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.sp-sort-wrap select {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sp-products-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sp-empty-box { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.sp-btn-more {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid rgba(109,40,217,.35);
  border-radius: var(--radius-sm);
  transition: background .2s;
  margin-bottom: 16px;
}
.sp-btn-more:hover { background: rgba(109,40,217,.1); }

/* Reviews layout */
.sp-reviews-layout { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 16px; }
.sp-rating-sum { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.03); border-radius: var(--radius); padding: 16px; }
.sp-big-num { font-size: 2.6rem; font-weight: 900; color: var(--text); line-height: 1; }
.sp-big-stars { display: flex; gap: 4px; margin: 8px 0 4px; font-size: .9rem; }
.sp-rbar-list { width: 100%; display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.sp-rbar-row { display: flex; align-items: center; gap: 8px; }
.sp-rbar-lbl { font-size: .7rem; color: var(--text-muted); min-width: 26px; }
.sp-rbar-track { flex: 1; height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.sp-rbar-fill { height: 100%; background: var(--gold); border-radius: 3px; }
.sp-rbar-num { font-size: .7rem; color: var(--text-muted); min-width: 20px; text-align: right; }
.sp-rev-list { display: flex; flex-direction: column; gap: 12px; }
.sp-rev-card { display: flex; gap: 10px; }
.sp-rev-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#6d28d9,#a855f7); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .88rem; flex-shrink: 0; }
.sp-rev-body { flex: 1; }
.sp-rev-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-rev-top strong { font-size: .85rem; color: var(--text); }
.sp-rev-verified { font-size: .7rem; color: #3b82f6; }
.sp-rev-time { font-size: .7rem; color: var(--text-muted); margin-left: auto; }
.sp-rev-stars { display: flex; gap: 2px; font-size: .72rem; margin-bottom: 5px; }
.sp-rev-txt { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Sidebar */
.sp-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 74px; }
.sp-side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sp-side-card-ttl { padding: 14px 16px; font-size: .88rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.sp-about-txt { font-size: .82rem; color: var(--text-muted); line-height: 1.65; padding: 14px 16px 0; margin: 0; }
.sp-about-details { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); margin-top: 12px; }
.sp-about-row { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text-muted); }
.sp-about-row span:last-child { color: var(--text); font-weight: 600; }
.sp-kyc-pill { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.sp-kyc-yes { background: rgba(16,185,129,.15); color: var(--success); }
.sp-kyc-no { background: rgba(239,68,68,.1); color: var(--danger); }
.sp-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 12px 16px 16px;
  padding: 10px;
  background: #25d366;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.sp-whatsapp-btn:hover { opacity: .88; color: #fff; }
.sp-badges-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 14px 16px; }
.sp-badge-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .72rem; color: var(--text-muted); }
.sp-badge-ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.sp-activity-list { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-activity-item { display: flex; align-items: center; gap: 10px; }
.sp-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-activity-txt { flex: 1; }
.sp-activity-txt span { font-size: .8rem; color: var(--text); display: block; }
.sp-activity-txt small { font-size: .68rem; color: var(--text-muted); }
.sp-activity-price { font-size: .8rem; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* Responsive — Seller Profile */
@media (max-width: 1100px) {
  .sp-stats-bar     { grid-template-columns: repeat(3,1fr); }
  .sp-products-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .sp-layout  { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; }
}
@media (max-width: 768px) {
  .sp-banner  { height: 180px; }
  .sp-container { padding: 0 12px; }
  .sp-hero    { gap: 14px; padding-bottom: 16px; }
  .sp-hero-av { width: 72px; height: 72px; font-size: 1.6rem; }
  .sp-hero-name { font-size: 1.2rem; }
  .sp-stats-bar { grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 16px; border-radius: 10px; }
  .sp-stat-val  { font-size: 1.1rem; }
  .sp-products-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .sp-hero         { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sp-hero-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sp-stats-bar    { grid-template-columns: repeat(2,1fr); }
  .sp-reviews-layout { grid-template-columns: 1fr; }
  .sp-products-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sp-banner       { height: 140px; }
  .sp-container    { padding: 0 8px; }
  .sp-stats-bar    { grid-template-columns: repeat(2,1fr); gap: 6px; padding: 10px; }
  .sp-stat-val     { font-size: .95rem; }
  .sp-stat-lbl     { font-size: .62rem; }
  .sp-products-grid { grid-template-columns: 1fr; }
  .sp-hero-name    { font-size: 1rem; }
  .sp-hero-actions .sp-btn-follow,
  .sp-hero-actions .sp-btn-msg { font-size: .78rem; padding: 7px 14px; }
}


/* ============================================================
   SELLERS LISTING — sl- prefix
   ============================================================ */

.sl-page { background: var(--bg-primary); min-height: 100vh; }

/* Hero */
.sl-hero {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 60%, #0d0d1a 100%);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
  overflow: hidden;
  position: relative;
}
.sl-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: 200px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(109,40,217,.18) 0%, transparent 70%);
  pointer-events: none;
}
.sl-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.sl-hero-text { flex: 1; }
.sl-hero-ttl {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}
.sl-hero-badge { font-size: 1.6rem; }
.sl-hero-sub { font-size: .95rem; color: var(--text-muted); margin-bottom: 20px; max-width: 480px; }
.sl-hero-trust-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-trust-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
}
.sl-hero-img-wrap { flex-shrink: 0; }
.sl-hero-trophy {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-trophy-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,40,217,.4) 0%, transparent 70%);
}
.sl-trophy-ic {
  font-size: 5rem;
  background: linear-gradient(135deg,#7c3aed,#a855f7,#f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(109,40,217,.5));
}

.sl-container { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.sl-body { padding: 28px 0 60px; }
.sl-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }

/* Filter sidebar */
.sl-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 74px;
}
.sl-filter-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.sl-clear-link { font-size: .75rem; color: var(--text-muted); text-decoration: none; }
.sl-clear-link:hover { color: var(--danger); }
.sl-filter-group { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sl-filter-lbl { display: block; font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.sl-filter-sel {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .82rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sl-star-filter { display: flex; gap: 6px; }
.sl-star-opt { font-size: 1.1rem; color: var(--border-light); cursor: pointer; transition: color .15s; }
.sl-star-opt.active, .sl-star-opt:hover { color: var(--gold); }
.sl-range-row { display: flex; align-items: center; gap: 8px; }
.sl-range-inp {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .82rem;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}
.sl-range-sep { font-size: .75rem; color: var(--text-muted); }
.sl-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  margin: 14px 16px;
  padding: 11px;
  background: linear-gradient(135deg,#6d28d9,#a855f7);
  border: none;
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity .2s;
}
.sl-apply-btn:hover { opacity: .9; }

/* Main */
.sl-main { display: flex; flex-direction: column; gap: 20px; }
.sl-topbar { display: flex; align-items: center; justify-content: space-between; }
.sl-result-count { font-size: .88rem; color: var(--text-muted); }
.sl-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.sl-empty h5 { color: var(--text); margin-bottom: 8px; }

/* Seller card grid */
.sl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sl-seller-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.sl-seller-card:hover { border-color: rgba(109,40,217,.4); transform: translateY(-3px); }
.sl-card-banner { position: relative; height: 100px; overflow: hidden; }
.sl-card-banner-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.sl-card-banner-default { width: 100%; height: 100%; background: linear-gradient(135deg,#0d0d1a,#1a0d3a); }
.sl-card-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 30%,rgba(26,26,46,.95) 100%); }
.sl-rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  gap: 1px;
}
.sl-rank-1 { background: linear-gradient(135deg,#b45309,#f59e0b); box-shadow: 0 0 12px rgba(245,158,11,.5); }
.sl-rank-2 { background: linear-gradient(135deg,#6b7280,#9ca3af); }
.sl-rank-3 { background: linear-gradient(135deg,#92400e,#b45309); }
.sl-rank-badge i { font-size: .7rem; }
.sl-rank-num {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.sl-card-body { padding: 14px; }
.sl-card-av-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.sl-card-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sl-card-av-init { display: flex !important; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; }
.sl-card-meta { flex: 1; min-width: 0; }
.sl-card-name { font-size: .85rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-card-rating-row { display: flex; align-items: center; gap: 3px; font-size: .7rem; margin: 3px 0; }
.sl-star-on  { color: var(--gold); }
.sl-star-off { color: var(--border-light); }
.sl-card-rating-row span { color: var(--text); font-weight: 600; margin-left: 2px; }
.sl-card-rating-row small { color: var(--text-muted); }
.sl-online-pill {
  display: inline-block;
  background: rgba(16,185,129,.12);
  color: var(--success);
  font-size: .65rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}
.sl-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; }
.sl-cstat { text-align: center; }
.sl-cstat-v { font-size: .82rem; font-weight: 800; color: var(--text); }
.sl-cstat-l { font-size: .62rem; color: var(--text-muted); }
.sl-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg,#6d28d9,#a855f7);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.sl-view-btn:hover { opacity: .9; color: #fff; }

/* Pagination */
.sl-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.sl-pag-btn {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.sl-pag-btn:hover { border-color: var(--primary); color: var(--primary); }
.sl-pag-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sl-pag-dots { padding: 0 4px; color: var(--text-muted); }

/* Responsive */
/* Responsive — Sellers Listing */
@media (max-width: 1100px) {
  .sl-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .sl-layout  { grid-template-columns: 1fr; }
  .sl-sidebar { position: static; }
  .sl-grid    { grid-template-columns: repeat(3,1fr); }
  .sl-hero-ttl { font-size: 1.7rem; }
}
@media (max-width: 680px) {
  .sl-grid          { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .sl-hero-img-wrap { display: none; }
  .sl-hero          { padding: 28px 0; }
  .sl-hero-ttl      { font-size: 1.4rem; }
  .sl-container     { padding: 0 12px; }
  .sl-card-banner   { height: 80px; }
  .sl-card-av       { width: 52px; height: 52px; font-size: 1.2rem; }
  .sl-card-name     { font-size: .88rem; }
  .sl-card-stats    { grid-template-columns: repeat(2,1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .sl-grid       { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .sl-container  { padding: 0 8px; }
  .sl-card       { border-radius: 12px; }
  .sl-card-banner { height: 70px; }
  .sl-card-av    { width: 46px; height: 46px; font-size: 1rem; }
  .sl-card-name  { font-size: .82rem; }
  .sl-card-stats { gap: 6px; }
  .sl-stat-val   { font-size: .82rem; }
  .sl-stat-lbl   { font-size: .62rem; }
  .sl-hero-ttl   { font-size: 1.2rem; }
}
@media (max-width: 380px) {
  .sl-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CHECKOUT PAGE — co- prefix
   ============================================================ */

.co-page { background: var(--bg-primary); min-height: 100vh; }

/* Steps bar */
.co-steps-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.co-steps-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
}
.co-step { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .83rem; font-weight: 600; }
.co-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}
.co-step-active .co-step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.co-step-active { color: var(--text); }
.co-step-done .co-step-circle { background: var(--success); border-color: var(--success); color: #fff; }
.co-step-done { color: var(--text); }
.co-step-line { flex: 1; height: 1px; background: var(--border); margin: 0 14px; }
.co-step-line-done { background: var(--success); }
.co-steps-ssl { margin-left: auto; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

/* Container + layout */
.co-container { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.co-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding-top: 24px; align-items: start; }

/* Cards */
.co-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.co-card-hdr {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 15px 20px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  flex-wrap: wrap;
}
.co-hdr-sub { color: var(--text-muted); font-size: .78rem; font-weight: 400; margin-left: 8px; }
.co-card-body { padding: 18px 20px; }

/* Product row */
.co-product-row { display: flex; gap: 16px; align-items: flex-start; }
.co-product-img-wrap { position: relative; flex-shrink: 0; }
.co-product-img { width: 130px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.co-product-img-ph {
  width: 130px;
  height: 90px;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.co-product-rank-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,.75);
  color: var(--gold);
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.co-product-info { flex: 1; }
.co-cat-badge { background: rgba(109,40,217,.2); color: #a78bfa; font-size: .65rem; font-weight: 700; letter-spacing: .07em; padding: 2px 8px; border-radius: 3px; }
.co-product-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 8px 0; line-height: 1.3; }
.co-product-specs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.co-spec { font-size: .75rem; color: var(--text-muted); background: rgba(255,255,255,.05); padding: 3px 8px; border-radius: 4px; }
.co-spec-instant { color: var(--success); background: rgba(16,185,129,.12); }
.co-seller-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.co-seller-av-sm { width: 22px; height: 22px; border-radius: 50%; }
.co-seller-av-init-sm { display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; color: #fff; }
.co-seller-name-sm { font-size: .8rem; font-weight: 600; color: var(--text); }
.co-seller-badge-sm { font-size: .65rem; background: rgba(245,158,11,.15); color: var(--gold); border: 1px solid rgba(245,158,11,.3); padding: 1px 6px; border-radius: 10px; font-weight: 600; }
.co-seller-stars-sm { display: flex; align-items: center; gap: 2px; font-size: .65rem; }
.co-seller-stars-sm span { color: var(--text); font-weight: 600; margin-left: 2px; }
.co-star-on  { color: var(--gold); }
.co-star-off { color: var(--border-light); }
.co-product-price-col { flex-shrink: 0; text-align: right; }
.co-old-price { color: var(--text-muted); font-size: .8rem; text-decoration: line-through; display: block; }
.co-product-price { font-size: 1.25rem; font-weight: 800; color: var(--text); }

/* Protection grid */
.co-protection-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.co-prot-item { display: flex; gap: 12px; align-items: flex-start; }
.co-prot-ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.co-prot-ttl { font-size: .84rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.co-prot-sub { font-size: .75rem; color: var(--text-muted); line-height: 1.45; }

/* Coupon */
.co-coupon-row { display: flex; gap: 10px; }
.co-coupon-inp {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: .85rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}
.co-coupon-inp::placeholder { color: var(--text-muted); }
.co-coupon-inp:focus { outline: none; border-color: var(--primary); }
.co-coupon-btn {
  background: var(--primary);
  border: none;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.co-coupon-btn:hover { background: var(--primary-hover); }
.co-coupon-msg { font-size: .8rem; margin-top: 8px; }
.co-coupon-ok { color: var(--success); }
.co-coupon-err { color: var(--danger); }

/* Payment methods */
.co-pay-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.co-pay-method { cursor: pointer; }
.co-pay-method-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
  position: relative;
}
.co-pay-method.active .co-pay-method-inner { border-color: var(--primary); background: rgba(109,40,217,.1); }
.co-pay-ic { font-size: 1.1rem; color: var(--primary); width: 22px; text-align: center; flex-shrink: 0; }
.co-pay-logo { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .9rem; color: #fff; flex-shrink: 0; }
.co-pay-logo-papara { background: #7c3aed; }
.co-pay-logo-paytr  { background: #0ea5e9; }
.co-pay-name { font-size: .8rem; font-weight: 700; color: var(--text); }
.co-pay-sub  { font-size: .68rem; color: var(--text-muted); }
.co-pay-check { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: .62rem; color: #fff; opacity: 0; transition: opacity .15s; }
.co-pay-method.active .co-pay-check { opacity: 1; }
.co-pay-ssl-note { font-size: .75rem; color: var(--text-muted); text-align: center; padding: 8px 0 0; }
.co-pay-method-disabled { cursor: not-allowed; opacity: .55; }
.co-pay-method-disabled .co-pay-method-inner { border-style: dashed; }

/* Bottom stats */
.co-bottom-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.co-bstat { background: var(--bg-card); padding: 18px 14px; }
.co-bstat-val { font-size: 1.2rem; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.co-bstat-lbl { font-size: .75rem; color: var(--text-muted); margin-bottom: 2px; }
.co-bstat-sub { font-size: .68rem; color: var(--text-dim); }

/* Sidebar */
.co-osum-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.co-osum-hdr {
  padding: 14px 18px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.co-osum-rows { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.co-osum-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--text-muted); }
.co-osum-row span:last-child { color: var(--text); font-weight: 600; }
.co-osum-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.co-total-price { font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.co-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 36px);
  margin: 0 18px 12px;
  padding: 13px;
  background: linear-gradient(135deg,#6d28d9,#a855f7);
  border: none;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(109,40,217,.35);
}
.co-pay-btn:hover { opacity: .92; }
.co-pay-btn:disabled { opacity: .65; cursor: not-allowed; }
.co-osum-ssl-note { padding: 0 18px 16px; font-size: .72rem; color: var(--text-muted); text-align: center; line-height: 1.5; }

.co-side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.co-side-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.co-side-hdr-link { font-size: .75rem; color: var(--text-muted); text-decoration: none; }
.co-side-hdr-link:hover { color: var(--primary); }
.co-seller-banner { height: 60px; overflow: hidden; }
.co-seller-banner-bg { width: 100%; height: 100%; background: linear-gradient(135deg,#0d0d1a,#1a0d3a); }
.co-seller-info-body { padding: 0 16px 16px; }
.co-seller-info-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; }
.co-seller-av-md { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.co-seller-av-init-md { display: flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 800; color: #fff; }
.co-seller-nm { font-size: .88rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; }
.co-seller-trust-badge { font-size: .65rem; background: rgba(245,158,11,.15); color: var(--gold); border: 1px solid rgba(245,158,11,.3); padding: 1px 7px; border-radius: 10px; font-weight: 700; }
.co-seller-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; }
.co-ssel-stat { text-align: center; }
.co-ssel-v { font-size: .85rem; font-weight: 800; color: var(--text); }
.co-ssel-l { font-size: .62rem; color: var(--text-muted); }
.co-msg-seller-btn {
  width: 100%;
  padding: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
.co-msg-seller-btn:hover { background: rgba(255,255,255,.12); }
.co-why-grid { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-why-item { display: flex; gap: 10px; align-items: flex-start; }
.co-why-ic { font-size: .95rem; flex-shrink: 0; margin-top: 2px; }
.co-why-ttl { font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.co-why-sub { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }

/* Responsive — Checkout */
@media (max-width: 1000px) {
  .co-layout      { grid-template-columns: 1fr; }
  .co-pay-methods { grid-template-columns: repeat(2,1fr); }
  .co-sidebar     { position: static; }
}
@media (max-width: 768px) {
  .co-page        { padding: 0; }
  .co-container   { padding: 0 12px 40px; }
  .co-steps-bar   { padding: 10px 12px; gap: 8px; }
  .co-step-lbl    { display: none; }
  .co-step-sep    { width: 24px; }
  .co-steps-ssl   { display: none; }
  .co-layout      { gap: 14px; padding-top: 14px; }
  .co-product-row { flex-direction: column; gap: 10px; }
  .co-product-thumb { width: 100%; height: 140px; border-radius: 8px; flex-shrink: 0; }
  .co-protection-grid { grid-template-columns: repeat(2,1fr); }
  .co-pay-methods { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .co-bottom-stats { grid-template-columns: repeat(2,1fr); }
  .co-seller-banner { height: 60px; }
  .co-osum-total-row { font-size: 1rem; }
}
@media (max-width: 576px) {
  .co-container    { padding: 0 8px 30px; }
  .co-protection-grid { grid-template-columns: 1fr; }
  .co-pay-method   { flex-direction: column; align-items: flex-start; padding: 12px; }
  .co-pay-methods  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .co-bottom-stats { grid-template-columns: repeat(2,1fr); gap: 1px; }
  .co-coupon-row   { flex-direction: column; gap: 8px; }
  .co-coupon-input, .co-coupon-btn { width: 100%; }
  .co-card-hdr     { padding: 12px 14px; font-size: .82rem; }
}
@media (max-width: 480px) {
  .co-pay-methods      { grid-template-columns: 1fr; }
  .co-product-thumb    { height: 110px; }
  .co-product-cat-bdg  { font-size: .6rem; }
  .co-product-ttl      { font-size: .88rem; }
  .co-btn-pay          { font-size: .88rem; padding: 13px; }
  .co-why-grid         { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   HOME PAGE – MISSING UTILITY CLASSES (ds- additions)
   ============================================================ */

/* Seller sidebar row – right column */
.ds-s-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Online pill variant used in seller rows */
.ds-online-pill2 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16,185,129,.15);
  color: #10b981;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Sales count text under online pill */
.ds-s-sales {
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Star rating row under seller name */
.ds-s-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

/* Sidebar promo block */
.ds-sb-promo {
  background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 60%, #312e81 100%);
  border: 1px solid rgba(109,40,217,.4);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ds-sb-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(245,158,11,.1) 0%, transparent 65%);
  pointer-events: none;
}
.ds-sb-promo-tag {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.ds-sb-promo-pct {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 8px;
}
.ds-sb-promo-pct span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}
.ds-sb-promo-kd {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.ds-sb-promo-kd span {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: .05em;
}
.ds-sb-promo-btn {
  display: block;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  font-size: .82rem;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}
.ds-sb-promo-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #000;
}

/* Empty state placeholder */
.ds-empty-state {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: .82rem;
}
.ds-empty-state i {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 6px;
  opacity: .5;
}

/* ============================================================
   GLOBAL MOBILE IMPROVEMENTS
   ============================================================ */

/* Prevent horizontal scroll everywhere */
html, body { overflow-x: hidden; max-width: 100%; }

/* Better touch targets — all interactive elements min 44px */
@media (max-width: 768px) {
  a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

  /* Header compaction */
  .gz-header .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
  .gz-search { max-width: none; }
  .search-input-main { font-size: .82rem; padding: 8px 12px 8px 36px; }
  .gz-logo .logo-icon { width: 32px; height: 32px; font-size: .85rem; }

  /* Card block headers */
  .ds-block-head  { margin-bottom: 10px; }
  .ds-block-title { font-size: 13px; }
  .ds-link-all    { font-size: 11px; }

  /* Scrollable track common styles */
  .ds-pg-track,
  .ds-review-track,
  .ds-recent-track { padding-bottom: 10px; }

  /* Seller row better tap area */
  .ds-seller-row { padding: 10px 0; min-height: 48px; }
  .ds-live-row   { min-height: 44px; }
  .ds-trend-row  { min-height: 40px; }

  /* Page gutters */
  .pd3-container { padding-left: 10px; padding-right: 10px; }
  .sp-container  { padding-left: 10px; padding-right: 10px; }
  .sl-container  { padding-left: 10px; padding-right: 10px; }
}

/* Bottom padding on mobile so footer doesn't clip last content */
@media (max-width: 768px) {
  main { padding-bottom: 16px; }
}

/* Slider track snap — mobile */
@media (max-width: 768px) {
  .ds-pg-track,
  .ds-review-track,
  .ds-recent-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ds-pg-card,
  .ds-rev-card,
  .ds-recent-card { scroll-snap-align: start; }
}

/* ============================================================
   HOME PAGE — BOTTOM SECTIONS (hs- prefix)
   ============================================================ */

/* Two-column row wrapper */
.hs-bottom-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* ── Live Sales Panel ── */
.hs-live-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hs-live-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 4px;
  position: relative;
  flex-shrink: 0;
}
.hs-live-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: hs-pulse-ring 1.5s ease-out infinite;
}
@keyframes hs-pulse-ring {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hs-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.hs-live-row:last-child { border-bottom: none; padding-bottom: 0; }
.hs-live-thumb {
  width: 42px; height: 42px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,.06);
}
.hs-live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-live-meta { flex: 1; min-width: 0; }
.hs-live-user {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-live-product {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-live-end { text-align: right; flex-shrink: 0; }
.hs-live-price {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}
.hs-live-ago {
  font-size: .68rem;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.hs-live-ago i { font-size: .35rem; }

/* ── Promo Banner ── */
.hs-promo-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #07071a 0%, #130730 40%, #07071a 100%);
  border: 1px solid rgba(109,40,217,.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 28px 32px;
  min-height: 220px;
}

/* Glow orbs */
.hs-promo-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hs-promo-orb-1 {
  width: 400px; height: 400px;
  left: -80px; top: -120px;
  background: radial-gradient(circle, rgba(109,40,217,.25) 0%, transparent 60%);
}
.hs-promo-orb-2 {
  width: 300px; height: 300px;
  right: -60px; bottom: -80px;
  background: radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 60%);
}

/* Laser lines */
.hs-promo-laser {
  position: absolute;
  height: 1px;
  left: 0; right: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(109,40,217,.5) 40%, rgba(168,85,247,.8) 60%, transparent 100%);
  pointer-events: none;
}
.hs-laser-1 { top: 30%; }
.hs-laser-2 { bottom: 30%; opacity: .6; }

/* Character image */
.hs-promo-char {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 130%;
  max-height: 360px;
  object-fit: contain;
  opacity: .55;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  filter: drop-shadow(0 0 30px rgba(109,40,217,.5));
  z-index: 0;
}

/* Left content */
.hs-promo-content {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.hs-promo-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hs-promo-pct {
  font-size: 3.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 0 0 30px rgba(109,40,217,.6);
}
.hs-promo-pct span {
  display: block;
  font-size: 1.4rem;
  color: #a855f7;
  font-weight: 800;
}
.hs-promo-coupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(109,40,217,.18);
  border: 1px solid rgba(109,40,217,.45);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 18px;
}
.hs-promo-coupon strong {
  color: #fff;
  font-weight: 800;
  letter-spacing: .05em;
}
.hs-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 6px 20px rgba(109,40,217,.5);
}
.hs-promo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(109,40,217,.65);
  color: #fff;
}

/* Right stat cards */
.hs-promo-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.hs-pstat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(13,13,26,.65);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 18px;
  backdrop-filter: blur(10px);
  min-width: 180px;
}
.hs-pstat-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(109,40,217,.2);
  border: 1px solid rgba(109,40,217,.3);
  display: flex; align-items: center; justify-content: center;
  color: #a78bfa;
  font-size: .9rem;
  flex-shrink: 0;
}
.hs-pstat-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.hs-pstat-lbl {
  font-size: .72rem;
  color: var(--text-muted);
}

/* ── Guarantee Bar ── */
.hs-guarantee {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.hs-gb-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.hs-gb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
}
.hs-gb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.hs-gb-card.purple::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.hs-gb-card.purple:hover   { border-color: rgba(124,58,237,.35); box-shadow: 0 8px 24px rgba(109,40,217,.2); }
.hs-gb-card.yellow::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.hs-gb-card.yellow:hover   { border-color: rgba(245,158,11,.3); box-shadow: 0 8px 24px rgba(245,158,11,.15); }
.hs-gb-card.green::before  { background: linear-gradient(90deg, #059669, #10b981); }
.hs-gb-card.green:hover    { border-color: rgba(16,185,129,.3); box-shadow: 0 8px 24px rgba(16,185,129,.15); }
.hs-gb-card.blue::before   { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.hs-gb-card.blue:hover     { border-color: rgba(14,165,233,.3); box-shadow: 0 8px 24px rgba(14,165,233,.15); }

.hs-gb-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.hs-gb-card.purple .hs-gb-icon { background: rgba(124,58,237,.12); color: #a78bfa; border: 1px solid rgba(124,58,237,.25); }
.hs-gb-card.yellow .hs-gb-icon { background: rgba(245,158,11,.1);  color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.hs-gb-card.green  .hs-gb-icon { background: rgba(16,185,129,.1);  color: #34d399; border: 1px solid rgba(16,185,129,.25); }
.hs-gb-card.blue   .hs-gb-icon { background: rgba(14,165,233,.1);  color: #38bdf8; border: 1px solid rgba(14,165,233,.25); }

.hs-gb-title {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.hs-gb-desc {
  font-size: .73rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hs-bottom-row { grid-template-columns: 300px 1fr; }
}
@media (max-width: 900px) {
  .hs-bottom-row { grid-template-columns: 1fr; }
  .hs-promo-banner { min-height: 200px; }
  .hs-guarantee { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hs-promo-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
  .hs-promo-stats  { flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }
  .hs-pstat        { min-width: 0; flex: 1 1 140px; padding: 10px 12px; }
  .hs-promo-char   { display: none; }
  .hs-guarantee    { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hs-gb-card      { padding: 14px 12px; gap: 10px; }
  .hs-gb-icon      { width: 38px; height: 38px; font-size: .9rem; }
  .hs-gb-title     { font-size: .82rem; }
  .hs-gb-desc      { font-size: .68rem; }
}
@media (max-width: 480px) {
  .hs-promo-pct  { font-size: 2.4rem; }
  .hs-pstat      { padding: 8px 10px; }
  .hs-pstat-val  { font-size: .9rem; }
  .hs-pstat-lbl  { font-size: .65rem; }
  .hs-guarantee  { grid-template-columns: 1fr; }
}

/* ── Smooth scrolling & focus states ── */
* { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Image lazy-load shimmer ── */
img[loading="lazy"] { background: linear-gradient(90deg, #1a1a2e 25%, #232338 50%, #1a1a2e 75%); }
img[loading="lazy"].loaded { background: none; }

/* ============================================================
   AUTH MODAL — am- prefix
   ============================================================ */

/* Override Bootstrap modal sizing & background conflicts */
.am-dialog {
  max-width: 880px !important;
  width: 96% !important;
  margin: auto !important;
}
/* Override Bootstrap's flex-direction:column and bg on .modal-content */
.am-content {
  display: flex !important;
  flex-direction: row !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(109,40,217,.3) !important;
  background: #0c0c1e !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(109,40,217,.2) !important;
  min-height: 600px;
  position: relative;
  padding: 0 !important;
}

/* ── Close button ── */
.am-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.am-close:hover { background: rgba(239,68,68,.25); color: #f87171; border-color: rgba(239,68,68,.4); }

/* ════════════════════════════════
   LEFT PANEL
════════════════════════════════ */
.am-left {
  width: 310px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 22px 20px;
  background: linear-gradient(160deg, #08081a 0%, #12063a 50%, #08081a 100%);
  border-right: 1px solid rgba(109,40,217,.25);
}

/* Animated glow orbs */
.am-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.am-orb-1 {
  width: 380px; height: 380px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(109,40,217,.28) 0%, transparent 60%);
  animation: am-orb-drift 6s ease-in-out infinite alternate;
}
.am-orb-2 {
  width: 280px; height: 280px;
  bottom: -80px; right: -80px;
  background: radial-gradient(circle, rgba(168,85,247,.2) 0%, transparent 60%);
  animation: am-orb-drift 8s ease-in-out infinite alternate-reverse;
}
@keyframes am-orb-drift {
  from { transform: translate(0,0); }
  to   { transform: translate(20px, 15px); }
}

/* Subtle grid texture overlay */
.am-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109,40,217,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Logo */
.am-logo {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.am-logo-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff;
  box-shadow: 0 6px 20px rgba(109,40,217,.55);
  flex-shrink: 0;
}
.am-logo-name {
  font-size: .78rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.am-logo-sub {
  font-size: .65rem;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Left heading */
.am-left-heading {
  position: relative; z-index: 1;
  margin-bottom: 6px;
  text-align: center;
}
.am-left-heading h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 8px;
}
.am-accent { color: #a855f7; }
.am-left-heading p {
  font-size: .75rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
}

/* Game visual — large controller/crystal area */
.am-visual {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  min-height: 180px;
}
/* Glow ring behind image */
.am-glow-ring {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.45) 0%, rgba(109,40,217,.15) 45%, transparent 70%);
  animation: am-pulse 3s ease-in-out infinite;
}
@keyframes am-pulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50%     { transform: scale(1.12); opacity: 1; }
}
/* Outer ring */
.am-glow-ring::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(139,92,246,.2);
  animation: am-pulse 3s ease-in-out infinite reverse;
}
.am-hero-img {
  max-height: 170px;
  max-width: 240px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 28px rgba(139,92,246,.7)) drop-shadow(0 8px 16px rgba(0,0,0,.6));
}
/* Floating gem crystal */
.am-crystal {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.8rem;
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 3;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.8));
  animation: am-float 4s ease-in-out infinite;
}
@keyframes am-float {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-8px); }
}

/* Stats row */
.am-stats {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(109,40,217,.2);
  border: 1px solid rgba(109,40,217,.2);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.am-stat-item {
  background: rgba(255,255,255,.03);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.am-stat-item > i {
  font-size: .7rem;
  color: #a78bfa;
}
.am-stat-val {
  font-size: .78rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.am-stat-lbl {
  font-size: .55rem;
  color: #6b7280;
  line-height: 1.3;
}

/* Testimonial */
.am-testimonial {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.am-quote-ic { color: #7c3aed; font-size: .85rem; margin-bottom: 6px; display: block; }
.am-testi-text {
  font-size: .73rem;
  color: #d1d5db;
  line-height: 1.5;
  margin: 0 0 10px;
  font-style: italic;
}
.am-testi-foot { display: flex; align-items: center; gap: 10px; }
.am-avatar-stack { display: flex; flex-direction: row; }
.am-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: #fff;
  border: 2px solid #08081a;
  margin-left: -7px;
  flex-shrink: 0;
}
.am-avatar-stack .am-av:first-child { margin-left: 0; }
.am-testi-count { font-size: .72rem; color: #9ca3af; }
.am-count-bold { font-weight: 800; color: #a78bfa; margin-right: 3px; }

/* ════════════════════════════════
   RIGHT PANEL
════════════════════════════════ */
.am-right {
  flex: 1;
  min-width: 0;
  background: #0f0f1f;
  padding: 32px 30px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Welcome */
.am-welcome { margin-bottom: 16px; }
.am-welcome h4 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.2;
}
.am-welcome p {
  font-size: .8rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Tab switcher */
.am-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
  background: rgba(255,255,255,.04);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
}
.am-tab {
  padding: 10px 16px;
  border: none;
  border-radius: 9px;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
  color: #6b7280;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.am-tab:hover { color: #d1d5db; background: rgba(255,255,255,.06); }
.am-tab.active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 16px rgba(109,40,217,.45);
}

/* Alert */
.am-alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 14px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
}
.am-alert.success {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: #6ee7b7;
}

/* Form */
.am-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.am-field { margin-bottom: 13px; }
.am-label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.am-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.am-forgot-link { font-size: .73rem; color: #7c3aed; text-decoration: none; transition: color .2s; }
.am-forgot-link:hover { color: #a78bfa; }

/* Input */
.am-input-wrap { position: relative; }
.am-inp-ic {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  color: #4b5563;
  pointer-events: none;
  z-index: 1;
}
.am-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 11px 40px 11px 38px;
  font-size: .84rem;
  color: #e2e8f0;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  display: block;
}
.am-input::placeholder { color: #374151; }
.am-input:focus {
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 3px rgba(124,58,237,.14);
  background: rgba(255,255,255,.07);
}
.am-eye-btn {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #4b5563;
  font-size: .82rem;
  cursor: pointer;
  padding: 4px;
  transition: color .2s;
  z-index: 1;
}
.am-eye-btn:hover { color: #9ca3af; }

/* Password strength */
.am-pw-strength {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
}
.am-pw-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.am-pw-fill {
  height: 100%;
  width: 0%;
  background: #10b981;
  border-radius: 4px;
  transition: width .35s ease, background .35s ease;
}
.am-pw-label {
  font-size: .68rem;
  font-weight: 700;
  color: #10b981;
  white-space: nowrap;
}

/* Checkbox */
.am-check-field { margin-bottom: 16px; }
.am-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .79rem;
  color: #9ca3af;
  line-height: 1.4;
  user-select: none;
}
.am-check-label input[type="checkbox"] { display: none; }
.am-checkmark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  margin-top: 1px;
}
.am-check-label input:checked ~ .am-checkmark,
.am-check-label input:checked + .am-checkmark {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 2px 8px rgba(109,40,217,.4);
}
.am-check-label input:checked ~ .am-checkmark::after,
.am-check-label input:checked + .am-checkmark::after {
  content: '';
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-2px);
  display: block;
}
.am-link { color: #a78bfa; text-decoration: none; }
.am-link:hover { color: #c4b5fd; text-decoration: underline; }

/* Submit */
.am-submit-btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 6px 22px rgba(109,40,217,.5);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.am-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(109,40,217,.65); }
.am-submit-btn:active { transform: translateY(0); }
.am-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.am-back-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: transparent;
  color: #9ca3af;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.am-back-btn:hover { border-color: rgba(255,255,255,.22); color: #d1d5db; background: rgba(255,255,255,.04); }

/* Divider */
.am-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: .78rem;
}
.am-divider::before,
.am-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.am-divider span { color: #4b5563; white-space: nowrap; }

/* Social buttons */
.am-social-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.am-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: .73rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d1d5db;
}
.am-google  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.am-google:hover  { background: rgba(66,133,244,.14); border-color: rgba(66,133,244,.35); color: #fff; }
.am-discord { background: rgba(88,101,242,.08); border-color: rgba(88,101,242,.2); color: #c5c9ff; }
.am-discord:hover { background: rgba(88,101,242,.2); border-color: rgba(88,101,242,.45); color: #fff; }
.am-steam   { background: rgba(198,212,223,.05); border-color: rgba(198,212,223,.15); color: #c6d4df; }
.am-steam:hover   { background: rgba(198,212,223,.12); border-color: rgba(198,212,223,.32); color: #fff; }

/* Trust bar */
.am-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}
.am-trust-item { display: flex; align-items: flex-start; gap: 6px; }
.am-trust-item > i { font-size: .72rem; color: #7c3aed; margin-top: 1px; flex-shrink: 0; }
.am-trust-ttl { font-size: .63rem; font-weight: 700; color: #d1d5db; line-height: 1.2; }
.am-trust-sub { font-size: .57rem; color: #4b5563; line-height: 1.3; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .am-dialog  { max-width: 480px !important; }
  .am-left    { display: none !important; }
  .am-content { min-height: auto !important; }
  .am-right   { padding: 26px 22px 18px; }
  .am-welcome h4 { font-size: 1.25rem; }
  .am-trust   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .am-social-btns { grid-template-columns: 1fr; }
  .am-social-btn  { justify-content: flex-start; padding: 10px 14px; font-size: .8rem; }
}
@media (max-width: 480px) {
  .am-dialog  { max-width: 100% !important; margin: 10px !important; width: calc(100% - 20px) !important; }
  .am-content { border-radius: 16px !important; }
  .am-right   { padding: 20px 16px 16px; }
  .am-row-2   { grid-template-columns: 1fr; }
  .am-tabs    { gap: 6px; }
  .am-tab     { padding: 9px 10px; font-size: .79rem; }
  .am-trust   { grid-template-columns: repeat(2, 1fr); }
  .am-social-btns { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */
.mob-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 62px;
  background: rgba(13, 13, 26, 0.97);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid rgba(109, 40, 217, 0.25);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(109,40,217,.12);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch safe area */
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  color: #6b7280;
  text-decoration: none;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: color .18s, background .18s;
  position: relative;
}
.mob-nav-item i {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .2s;
}
.mob-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mob-nav-item:hover {
  color: #a78bfa;
  background: rgba(109,40,217,.08);
}
.mob-nav-item.active {
  color: #7c3aed;
}
.mob-nav-item.active i {
  transform: scale(1.15);
}
/* Active item — glowing dot indicator */
.mob-nav-item.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  border-radius: 0 0 4px 4px;
}
/* Center raised "Market" button */
.mob-nav-center {
  margin-top: -18px;
  color: #9ca3af;
}
.mob-nav-center-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 18px rgba(109,40,217,.55), 0 0 0 3px rgba(13,13,26,1), 0 0 0 4px rgba(109,40,217,.3);
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.mob-nav-center i { font-size: inherit; }
.mob-nav-center:hover .mob-nav-center-btn,
.mob-nav-center.active .mob-nav-center-btn {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(109,40,217,.7), 0 0 0 3px rgba(13,13,26,1), 0 0 0 4px rgba(124,58,237,.5);
}
.mob-nav-center.active::before { display: none; }
/* Push page content above bottom bar on mobile */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { bottom: 76px; }
}
/* Hide on large screens (already handled by d-lg-none but just in case) */
@media (min-width: 992px) {
  .mob-bottom-nav { display: none !important; }
}

/* ============================================================
   GLOBAL MOBILE OVERFLOW PREVENTION
   ============================================================ */
/* Belt-and-suspenders: ensure no element causes horizontal scroll */
@media (max-width: 992px) {
  /* All page wrappers */
  .listing-page,
  .pd3-page,
  .sp-page,
  .sl-page,
  .co-page,
  .product-detail-page,
  .ds-page { overflow-x: hidden !important; }

  /* Grids that use fixed-width sidebars — collapse them */
  .ds-top-grid { grid-template-columns: 1fr !important; }

  /* Hero: never taller than needed */
  .ds-hero { min-height: 220px !important; }
  .ds-hero-content { padding: 24px 18px !important; flex-direction: column !important; gap: 0 !important; }
  .ds-hero-right { display: none !important; }

  /* Stats bar / feat grid — 2-col max */
  .ds-stats-bar { grid-template-columns: repeat(2,1fr) !important; }
  .ds-feat-grid  { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 768px) {
  /* Tighter hero */
  .ds-hero { min-height: 180px !important; }
  .ds-hero-content { padding: 18px 14px !important; }

  /* Trust row hidden — prevents flex overflow */
  .ds-hero-trust-row { display: none !important; }

  /* Promo float always hidden */
  .ds-promo-float { display: none !important; }

  /* Horizontal slider arrows hidden — prevent layout shift */
  .hero-sw-prev, .hero-sw-next,
  .ds-pg-prev, .ds-pg-next { display: none !important; }

  /* Listing page container */
  .listing-page .container-fluid { overflow-x: hidden; }
}

/* ============================================================
   END OF STYLESHEET
   ============================================================ */


/* ============================================================
   DARK/LIGHT THEME — COMPREHENSIVE COMPONENT FIXES
   ============================================================ */

/* ── CSS Variable aliases ─────────────────────────────────────
   Several views use shorthand vars. These make them resolve
   correctly everywhere.                                        */
:root {
    --bg:          var(--bg-primary);
    --card:        var(--bg-card);
    --bg-tertiary: var(--bg-card);
    --muted:       var(--text-muted);
    --primary-rgb: 109, 40, 217;
}
[data-theme="light"] {
    --bg:          #f0f2f5;
    --card:        #ffffff;
    --bg-tertiary: #f8f9fa;
    --muted:       #64748b;
}

/* ── btn-close visibility in dark modals ─────────────────── */
.modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="light"] .btn-close { filter: none; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Select option — browser default override ─────────────── */
select option { background: var(--bg-card); color: var(--text); }

/* ── Form check (checkbox / radio) ───────────────────────── */
.form-check-label { color: var(--text); }
.form-check-input { background-color: var(--bg-secondary); border-color: var(--border); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
input[type="range"] { accent-color: var(--primary); }

/* ── Textarea ─────────────────────────────────────────────── */
textarea.form-control { color: var(--text) !important; background: var(--bg-secondary) !important; }
textarea.form-control::placeholder { color: var(--text-dim) !important; }

/* ── hr dividers ──────────────────────────────────────────── */
hr { border-color: var(--border); opacity: 1; }

/* ── pre / code ───────────────────────────────────────────── */
pre, code { background: var(--bg-secondary); color: var(--text); border-radius:6px; padding:2px 6px; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link { background: var(--bg-secondary); border-color: var(--border); color: var(--text-muted); }
.pagination .page-link:hover { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .page-item.disabled .page-link { background: var(--bg-secondary); border-color: var(--border); color: var(--text-dim); opacity:.5; }

/* ── text-muted utility ───────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }

/* ── Progress bar ─────────────────────────────────────────── */
.progress { background: var(--bg-card); }
.progress-bar { background: var(--primary); }

/* ── Accordion ────────────────────────────────────────────── */
.accordion-item { background: var(--bg-secondary); border-color: var(--border); color: var(--text); }
.accordion-button { background: var(--bg-secondary); color: var(--text); box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: rgba(109,40,217,.1); color: var(--text); }
.accordion-button::after { filter: brightness(0) invert(1) opacity(.6); }
.accordion-body { background: var(--bg-secondary); color: var(--text); }

/* ── Light-mode button resets ─────────────────────────────── */
[data-theme="light"] .btn-outline-secondary { border-color: #cbd5e1; color: #334155; background: transparent; }
[data-theme="light"] .btn-outline-secondary:hover { background: #f1f5f9; color: #1e293b; }
[data-theme="light"] .btn-outline-danger { border-color: #ef4444; color: #ef4444; }
[data-theme="light"] .btn-outline-info { border-color: #0ea5e9; color: #0ea5e9; }

/* ── Light-mode navbar dropdown ───────────────────────────── */
[data-theme="light"] .gz-dropdown { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 20px rgba(0,0,0,.08) !important; }
[data-theme="light"] .gz-dropdown .dropdown-item { color: #334155 !important; }
[data-theme="light"] .gz-dropdown .dropdown-item:hover { background: #f1f5f9 !important; color: #1e293b !important; }
[data-theme="light"] .gz-dropdown .dropdown-item.active { background: rgba(109,40,217,.08) !important; color: var(--primary) !important; }

/* ── Light-mode mobile offcanvas ──────────────────────────── */
[data-theme="light"] .gz-offcanvas { background: #ffffff; color: #1e293b; }
[data-theme="light"] .gz-offcanvas-head { border-bottom-color: #e2e8f0; }
[data-theme="light"] .gz-offcanvas-label { color: #64748b; }
[data-theme="light"] .gz-mob-link { color: #334155; }
[data-theme="light"] .gz-mob-link:hover { color: var(--primary); background: rgba(109,40,217,.06); }
[data-theme="light"] .gz-offcanvas-section { border-top-color: #e2e8f0; }

/* ── Light-mode header icons ──────────────────────────────── */
[data-theme="light"] .icon-btn { color: #334155; background: #f1f5f9; }
[data-theme="light"] .icon-btn:hover { color: var(--primary); }
[data-theme="light"] .user-btn-header { background: #f1f5f9; }
[data-theme="light"] .user-name-header { color: #1e293b; }
[data-theme="light"] .user-role-header { color: #64748b; }

/* ── Light-mode dashboard panels ─────────────────────────── */
[data-theme="light"] .dash-sidebar { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .dash-nav-link { color: #334155; }
[data-theme="light"] .dash-nav-link:hover { background: rgba(109,40,217,.06); color: var(--primary); }
[data-theme="light"] .dash-nav-link.active { background: rgba(109,40,217,.1); color: var(--primary); }
[data-theme="light"] .dash-panel { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .dash-panel-head { border-color: #e2e8f0; }
[data-theme="light"] .dash-page-title { color: #1e293b; }
[data-theme="light"] .dash-page-sub { color: #64748b; }

/* ── Light-mode product page ──────────────────────────────── */
[data-theme="light"] .pd3-page { background: #f0f2f5; }
[data-theme="light"] .pd3-title { color: #1e293b; }
[data-theme="light"] .pd3-desc-text { color: #334155; }
[data-theme="light"] .pd3-specs { background: #f8f9fa; border-color: #e2e8f0; }
[data-theme="light"] .pd3-spec-row { border-color: #e2e8f0; }
[data-theme="light"] .pd3-spec-k { color: #64748b; }
[data-theme="light"] .pd3-spec-v { color: #1e293b; }
[data-theme="light"] .pd3-icard { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-icard-head { border-color: #e2e8f0; background: #f8f9fa; }
[data-theme="light"] .pd3-icard-item { color: #334155; }
[data-theme="light"] .pd3-rev-card { background: #f8f9fa; }
[data-theme="light"] .pd3-rev-txt { color: #334155; }
[data-theme="light"] .pd3-rev-name { color: #1e293b; }
[data-theme="light"] .pd3-rev-av { background: var(--primary); color: #fff; }
[data-theme="light"] .pd3-trust-bar { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-seller-mini { background: #f8f9fa; border-color: #e2e8f0; }
[data-theme="light"] .pd3-buy-sticky { background: #fff; }
[data-theme="light"] .pd3-price-box { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .pd3-protection-box { background: #f8f9fa; border-color: #e2e8f0; }
[data-theme="light"] .pd3-prot-list li { color: #334155; }
[data-theme="light"] .pd3-breadcrumb a { color: #64748b; }

/* ── Light-mode order rows ────────────────────────────────── */
[data-theme="light"] .order-row { border-color: #e2e8f0; }
[data-theme="light"] .order-row:hover { background: #f8f9fa; }
[data-theme="light"] .order-thumb-placeholder { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
[data-theme="light"] .order-product { color: #1e293b; }
[data-theme="light"] .order-seller { color: #64748b; }

/* ── Light-mode order timeline ────────────────────────────── */
[data-theme="light"] .ord-tl-card { background: #fff; }
[data-theme="light"] .ord-tl-card:hover { background: rgba(109,40,217,.02); }
[data-theme="light"] .ord-tl-dot { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
[data-theme="light"] .ord-tl-step.done .ord-tl-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="light"] .ord-tl-conn { background: #e2e8f0; }
[data-theme="light"] .ord-tl-conn.done { background: var(--primary); }
[data-theme="light"] .ord-tl-label { color: #64748b; }
[data-theme="light"] .ord-tl-step.done .ord-tl-label { color: #1e293b; }
[data-theme="light"] .ord-tl-step.active .ord-tl-label { color: var(--primary); }

/* ── Light-mode chat / messages ───────────────────────────── */
[data-theme="light"] .chat-wrap { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .chat-sidebar { border-color: #e2e8f0; }
[data-theme="light"] .chat-sidebar-head { background: #f8f9fa; border-color: #e2e8f0; }
[data-theme="light"] .chat-sidebar-search input { background: #fff; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .conv-item { border-color: #e2e8f0; }
[data-theme="light"] .conv-item:hover { background: #f8f9fa; }
[data-theme="light"] .conv-name { color: #1e293b; }
[data-theme="light"] .conv-preview { color: #64748b; }
[data-theme="light"] .bubble.theirs { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .chat-input { background: #f8f9fa; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .chat-header { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .chat-input-wrap { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .chat-attach-btn { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .date-divider span { background: #fff; }
[data-theme="light"] .date-divider::before { background: #e2e8f0; }
[data-theme="light"] .chat-header-name { color: #1e293b; }
[data-theme="light"] .chat-empty-state { color: #64748b; }

/* ── Dark-mode: headings always readable ─────────────────── */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); }
[data-theme="dark"] label { color: var(--text-muted); }

/* ── Cart button states ─────────────────────────────────────────────────── */
.pcard-buy { border: none; cursor: pointer; transition: background .15s, transform .12s; }
.pcard-buy.in-cart { background: rgba(34,197,94,.18); color: #22c55e; }
.pcard-buy.in-cart:hover { background: rgba(34,197,94,.28); }

/* ── Message Sidebar Panel ──────────────────────────────────────────────── */
.msg-sidebar-panel {
  position:fixed; top:0; right:-390px; width:370px; height:100vh;
  background:var(--bg-card); border-left:1px solid var(--border);
  z-index:9100; display:flex; flex-direction:column;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-6px 0 24px rgba(0,0,0,.4);
}
.msg-sidebar-panel.open { right:0; }
.msg-sidebar-backdrop {
  position:fixed; inset:0; z-index:9099;
  background:rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.msg-sidebar-backdrop.open { opacity:1; pointer-events:all; }

.msg-sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--border);
  background:var(--bg-secondary); flex-shrink:0;
}
.msg-sidebar-title {
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:.95rem; color:var(--text);
}
.msg-sidebar-title i { color:var(--primary); font-size:1rem; }
.msg-sb-total-badge {
  background:var(--primary); color:#fff;
  font-size:.6rem; font-weight:700;
  padding:2px 6px; border-radius:10px; min-width:18px; text-align:center;
}
.msg-sidebar-all-link {
  font-size:.75rem; color:var(--primary); text-decoration:none;
  display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.msg-sidebar-all-link:hover { text-decoration:underline; }
.msg-sidebar-close {
  width:28px; height:28px; border-radius:7px;
  background:transparent; border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
}
.msg-sidebar-close:hover { background:rgba(124,58,237,.15); color:var(--primary); border-color:rgba(124,58,237,.4); }

.msg-sidebar-body { flex:1; overflow-y:auto; overflow-x:hidden; }
.msg-sb-loading {
  display:flex; align-items:center; justify-content:center;
  height:100px; color:var(--text-muted); font-size:1.2rem;
}
.msg-sb-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:50px 20px; color:var(--text-muted); font-size:.85rem; text-align:center;
}
.msg-sb-empty i { font-size:2rem; opacity:.3; display:block; }

/* Conversation row */
.msg-sb-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border);
  text-decoration:none; transition:background .12s; position:relative;
}
.msg-sb-item:hover { background:rgba(124,58,237,.06); }
.msg-sb-item.has-unread { background:rgba(124,58,237,.05); }
.msg-sb-item.has-unread .msg-sb-preview { font-weight:600; color:var(--text); }

.msg-sb-av {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--primary); color:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}
.msg-sb-av img { width:100%; height:100%; object-fit:cover; }
.msg-sb-meta { flex:1; min-width:0; }
.msg-sb-name { font-size:.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-sb-preview { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.msg-sb-right { flex-shrink:0; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.msg-sb-time { font-size:.68rem; color:var(--text-muted); white-space:nowrap; }
.msg-sb-badge {
  width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#fff;
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Footer */
.msg-sidebar-foot {
  padding:12px 18px; border-top:1px solid var(--border);
  background:var(--bg-secondary); flex-shrink:0;
}
.msg-sidebar-new-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:9px; border-radius:10px;
  background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.35);
  color:var(--primary); font-size:.82rem; font-weight:600;
  text-decoration:none; transition:all .15s;
}
.msg-sidebar-new-btn:hover { background:rgba(124,58,237,.25); color:var(--primary); }

@media(max-width:480px) {
  .msg-sidebar-panel { width:100%; right:-100%; }
}

/* ============================================================
   DASHBOARD GLOBAL POLISH
   ============================================================ */

/* Panel upgrades */
.dash-panel { box-shadow: 0 2px 20px rgba(0,0,0,.18); }
.dash-panel-head {
    background: linear-gradient(90deg, rgba(109,40,217,.06) 0%, transparent 60%);
    border-left: 3px solid var(--primary);
    padding-left: 17px;
}
.dash-panel-body.pbody-form,
.dash-panel-body.p-4 { padding: 24px !important; }

/* Active nav indicator */
.dash-nav-link { border-left: 3px solid transparent; }
.dash-nav-link.active {
    background: rgba(109,40,217,.14) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary);
    font-weight: 600;
}

/* Form controls inside panels & settings cards */
.dash-panel .form-control,  .dash-panel .form-select,
.settings-card .form-control, .settings-card .form-select,
.modal .form-control, .modal .form-select {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: .88rem;
    transition: border-color .2s, box-shadow .2s;
}
.dash-panel .form-control:focus,  .dash-panel .form-select:focus,
.settings-card .form-control:focus, .settings-card .form-select:focus,
.modal .form-control:focus, .modal .form-select:focus {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}
.dash-panel .form-label,
.settings-card .form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: .025em;
}

/* Table inside panels */
.dash-panel .table { color: var(--text); font-size: .84rem; margin: 0; }
.dash-panel .table thead th {
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.4);
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px; white-space: nowrap;
}
.dash-panel .table tbody td {
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 12px 14px; vertical-align: middle;
}
.dash-panel .table tbody tr:last-child td { border-bottom: none; }
.dash-panel .table tbody tr:hover td { background: rgba(109,40,217,.04); }

/* Preset amount pills (used in donation widget) */
.amount-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.amount-preset {
    padding: 6px 18px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.amount-preset:hover,
.amount-preset.selected {
    border-color: var(--primary); color: var(--primary);
    background: rgba(109,40,217,.12);
}

/* Panel info list */
.panel-info-list { list-style: none; padding: 20px; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.panel-info-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .83rem; line-height: 1.55; color: var(--text);
}
.panel-info-list li i { width: 18px; margin-top: 2px; flex-shrink: 0; }

/* Cart / wishlist page item rows — gaming aesthetic */
.cart-item-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; margin-bottom: 12px;
    transition: border-color .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}
.cart-item-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--primary); opacity: 0;
    transition: opacity .2s;
}
.cart-item-row:hover { border-color: rgba(109,40,217,.35); box-shadow: 0 4px 20px rgba(109,40,217,.08); }
.cart-item-row:hover::before { opacity: 1; }

/* Stat card icon hover */
.ds-stat:hover .ds-stat-icon { transform: scale(1.1) rotate(-5deg); }
.ds-stat-icon { transition: transform .2s; }

/* Light theme overrides */
[data-theme="light"] .dash-panel { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
[data-theme="light"] .dash-panel .form-control,
[data-theme="light"] .dash-panel .form-select,
[data-theme="light"] .settings-card .form-control,
[data-theme="light"] .settings-card .form-select,
[data-theme="light"] .modal .form-control,
[data-theme="light"] .modal .form-select {
    background: #f8fafc; border-color: #e2e8f0; color: #1e293b;
}
[data-theme="light"] .dash-panel .form-control:focus,
[data-theme="light"] .dash-panel .form-select:focus,
[data-theme="light"] .settings-card .form-control:focus,
[data-theme="light"] .settings-card .form-select:focus,
[data-theme="light"] .modal .form-control:focus,
[data-theme="light"] .modal .form-select:focus {
    background: #fff; border-color: #6d28d9;
    box-shadow: 0 0 0 3px rgba(109,40,217,.08);
}
[data-theme="light"] .dash-panel .table thead th { background: rgba(0,0,0,.04); color: #64748b; }
[data-theme="light"] .dash-panel .table tbody td { border-color: #f1f5f9; }
[data-theme="light"] .dash-panel .table tbody tr:hover td { background: rgba(109,40,217,.03); }
[data-theme="light"] .panel-info-list li { color: #334155; }
[data-theme="light"] .cart-item-row { background: #fff; border-color: #e2e8f0; }


/* ═══════════════════════════════════════════════════════════
   STREAMER PAGES
═══════════════════════════════════════════════════════════ */

/* Streamer listing cards */
.streamer-card-link { display:block; transition:.2s; }
.streamer-card-link:hover { transform:translateY(-3px); }
.streamer-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.streamer-card-link:hover .streamer-card {
    box-shadow: 0 8px 32px rgba(109,40,217,.18);
    border-color: rgba(109,40,217,.3);
}
.streamer-card-banner {
    height: 90px;
    background: linear-gradient(135deg, rgba(109,40,217,.4) 0%, rgba(16,185,129,.2) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}
.streamer-card-platform-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
}
.streamer-platform-twitch { background:rgba(145,70,255,.25);color:#9146ff;border:1px solid rgba(145,70,255,.4); }
.streamer-platform-kick   { background:rgba(83,252,24,.15);color:#53fc18;border:1px solid rgba(83,252,24,.3); }
.streamer-platform-youtube{ background:rgba(255,0,0,.2);color:#ff4444;border:1px solid rgba(255,0,0,.3); }
.streamer-platform-other  { background:rgba(109,40,217,.2);color:#a78bfa;border:1px solid rgba(109,40,217,.3); }
.streamer-card-body { padding: 0 16px 16px; }
.streamer-card-avatar-wrap { margin-top: -28px; margin-bottom: 10px; }
.streamer-card-avatar,
.streamer-card-avatar-fallback {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px solid var(--bg-secondary);
    object-fit: cover;
}
.streamer-card-avatar-fallback {
    background: linear-gradient(135deg,#6d28d9,#9333ea);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.streamer-card-name { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.streamer-card-bio  { font-size: .78rem; color: var(--text-muted); margin: 0 0 10px; min-height: 30px; }
.streamer-card-stats { display:flex; gap:12px; margin-bottom:12px; }
.streamer-stat { display:flex; flex-direction:column; gap:1px; font-size:.75rem; }
.streamer-stat span { font-weight:700; color:var(--text); }
.streamer-stat small { color:var(--text-muted); }
.streamer-card-btn {
    background: linear-gradient(90deg,rgba(239,68,68,.1),rgba(109,40,217,.1));
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: #ef4444;
    transition: .2s;
}
.streamer-card-link:hover .streamer-card-btn {
    background: linear-gradient(90deg,rgba(239,68,68,.2),rgba(109,40,217,.2));
}

/* Streamer public profile */
.streamer-profile-banner {
    height: 260px;
    background: linear-gradient(135deg,rgba(109,40,217,.6) 0%,rgba(16,185,129,.3) 100%);
    background-size: cover;
    background-position: center;
}
.streamer-profile-banner-overlay {
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 24px;
}
.streamer-profile-head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.streamer-profile-avatar-wrap { flex-shrink:0; }
.streamer-profile-avatar,
.streamer-profile-avatar-fallback {
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.3);
    object-fit: cover;
}
.streamer-profile-avatar-fallback {
    background: linear-gradient(135deg,#6d28d9,#9333ea);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.streamer-profile-name { font-size:1.6rem; font-weight:800; color:#fff; margin:0 0 8px; }
.streamer-platform-pill {
    display:inline-flex; align-items:center;
    font-size:.75rem; font-weight:700;
    padding:3px 12px; border-radius:20px;
    border: 1px solid transparent;
}
.streamer-channel-link {
    font-size:.8rem; color:rgba(255,255,255,.7);
    text-decoration:none; transition:.2s;
}
.streamer-channel-link:hover { color:#fff; }

/* Streamer profile sections */
.streamer-section-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
}
.streamer-section-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Donation feed */
.streamer-donations-list { display:flex; flex-direction:column; gap:12px; }
.streamer-donation-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary, rgba(255,255,255,.03));
    border-radius: 10px;
    border: 1px solid var(--border);
}
.streamer-donation-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,rgba(109,40,217,.3),rgba(239,68,68,.2));
    color: var(--primary);
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.streamer-donation-details { flex:1; min-width:0; }
.streamer-donation-name { font-size:.85rem; font-weight:700; color:var(--text); }
.streamer-donation-msg  { font-size:.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.streamer-donation-amount { font-size:.95rem; font-weight:900; color:#10b981; flex-shrink:0; }

/* Donate widget */
.streamer-donate-widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 90px;
}
.streamer-donate-widget-head {
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    background: linear-gradient(90deg,rgba(239,68,68,.08),transparent);
    border-bottom: 1px solid var(--border);
}
.streamer-donate-widget-body { padding: 20px; }
.streamer-donate-balance {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(16,185,129,.07);
    border-radius: 8px;
    border: 1px solid rgba(16,185,129,.2);
}


/* ── Notification Dropdown ── */
.notif-dropdown .dropdown-menu { border-radius:14px; }
#notifList a:first-child { border-top:none; }
#notifList::-webkit-scrollbar { width:4px; }
#notifList::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ============================================================
   CREATOR WALL — cw- prefix
   Streamer section above footer (homepage)
   ============================================================ */

.cw-section {
  position: relative;
  padding: 100px 0 80px;
  background: var(--bg-primary);
  overflow: hidden;
}

/* Purple radial glow behind header */
.cw-glow {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1000px;
  height: 750px;
  background: radial-gradient(circle, rgba(139,92,246,.22) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* ── Header ── */
.cw-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px 60px;
}
.cw-badge {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.25);
  color: #c084fc;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 26px;
}
.cw-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, #d8b4fe 45%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 24px;
}
.cw-subtitle {
  font-size: 1.1rem;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* ── Platform filter buttons ── */
.cw-platforms {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cw-platform-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 180px;
  height: 64px;
  padding: 0 30px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  backdrop-filter: blur(10px);
}
.cw-platform-btn i { font-size: 1.35rem; transition: transform .35s; }
.cw-platform-btn:hover { transform: translateY(-4px) scale(1.04); }
.cw-platform-btn:hover i { transform: rotate(-10deg) scale(1.15); }
.cw-platform-btn.active { transform: scale(1.08); }

/* Light sweep */
.cw-platform-btn::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  transition: .8s;
}
.cw-platform-btn:hover::before { left: 150%; }

/* All — solid purple (matches the other solid-filled buttons) */
.cw-btn-all {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 0 24px rgba(109,40,217,.45);
}
.cw-btn-all.active {
  box-shadow: 0 0 0 2px rgba(124,58,237,.6), 0 0 30px rgba(109,40,217,.8), 0 0 60px rgba(109,40,217,.35);
}

/* Twitch */
.cw-btn-twitch {
  background: linear-gradient(135deg, #9146ff, #6d28d9);
  box-shadow: 0 0 24px rgba(145,70,255,.45);
}
.cw-btn-twitch.active {
  box-shadow: 0 0 0 2px rgba(145,70,255,.65), 0 0 30px rgba(145,70,255,.8), 0 0 60px rgba(145,70,255,.3);
}

/* Kick */
.cw-btn-kick {
  background: linear-gradient(135deg, #53fc18, #22c55e);
  color: #111;
  box-shadow: 0 0 24px rgba(83,252,24,.4);
}
.cw-btn-kick.active {
  box-shadow: 0 0 0 2px rgba(83,252,24,.7), 0 0 30px rgba(83,252,24,.75), 0 0 60px rgba(83,252,24,.3);
}

/* YouTube */
.cw-btn-youtube {
  background: linear-gradient(135deg, #ff3131, #dc2626);
  box-shadow: 0 0 24px rgba(255,49,49,.45);
}
.cw-btn-youtube.active {
  box-shadow: 0 0 0 2px rgba(255,49,49,.65), 0 0 30px rgba(255,49,49,.8), 0 0 60px rgba(255,49,49,.3);
}

/* ── Creator Wall grid ── */
.cw-wall {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 18px;
  padding: 0 40px;
}

/* ── Creator Card ── */
.cw-card {
  position: relative;
  height: 360px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(139,92,246,.15);
  cursor: pointer;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, border-color .4s;
}
.cw-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(109,40,217,.35);
  border-color: rgba(139,92,246,.55);
}
.cw-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.cw-card:hover .cw-card-img { transform: scale(1.08); }

/* Gradient overlay — dark fade up from bottom */
.cw-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 25px;
  background: linear-gradient(180deg, transparent 0%, rgba(5,8,22,.96) 100%);
}
.cw-live-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 11px;
}
.cw-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-meta {
  font-size: .76rem;
  color: #94a3b8;
  margin-bottom: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-actions {
  display: flex;
  gap: 9px;
}
.cw-watch-btn,
.cw-support-btn {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  overflow: hidden;
}
.cw-watch-btn:hover,
.cw-support-btn:hover { opacity: .88; transform: scale(1.03); }
.cw-support-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1600px) {
  .cw-wall { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 1400px) {
  .cw-wall { grid-template-columns: repeat(7, 1fr); gap: 16px; padding: 0 32px; }
}
@media (max-width: 1200px) {
  .cw-wall { grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0 24px; }
  .cw-card { height: 330px; }
}
@media (max-width: 992px) {
  .cw-section { padding: 70px 0 56px; }
  .cw-wall { grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 0 20px; }
  .cw-card { height: 310px; border-radius: 20px; }
  .cw-header { padding-bottom: 44px; }
  .cw-platform-btn { min-width: 150px; height: 56px; font-size: .9rem; padding: 0 22px; }
  .cw-platform-btn i { font-size: 1.2rem; }
}
@media (max-width: 768px) {
  .cw-section { padding: 60px 0 44px; }
  .cw-header { padding: 0 16px 40px; }
  .cw-title { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .cw-subtitle { font-size: .95rem; }
  .cw-platforms { gap: 12px; }
  .cw-platform-btn { min-width: 136px; height: 54px; font-size: .84rem; padding: 0 18px; border-radius: 16px; }
  .cw-platform-btn i { font-size: 1.1rem; }
  /* Horizontal scroll strip on mobile */
  .cw-wall {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    padding: 4px 16px 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cw-wall::-webkit-scrollbar { display: none; }
  .cw-card {
    flex: 0 0 190px;
    height: 290px;
    border-radius: 18px;
    scroll-snap-align: start;
  }
  .cw-name { font-size: .92rem; }
  .cw-meta { display: none; }
  .cw-overlay { padding: 18px 14px 14px; }
  .cw-actions { gap: 7px; }
  .cw-watch-btn, .cw-support-btn { height: 34px; font-size: .72rem; border-radius: 9px; }
}
@media (max-width: 576px) {
  .cw-section { padding: 44px 0 32px; }
  .cw-badge { font-size: .7rem; padding: 8px 15px; }
  .cw-card { flex: 0 0 162px; height: 256px; }
  .cw-platforms { gap: 9px; }
  .cw-platform-btn { min-width: 112px; height: 48px; font-size: .8rem; padding: 0 15px; border-radius: 14px; }
  .cw-platform-btn i { font-size: 1.05rem; }
  .cw-live-tag { font-size: .6rem; padding: 4px 9px; }
  .cw-name { font-size: .84rem; }
}

[data-theme="light"] .cw-section { background: #f8fafc; }
[data-theme="light"] .cw-badge { background: rgba(109,40,217,.08); }
[data-theme="light"] .cw-overlay { background: linear-gradient(180deg, transparent 0%, rgba(10,10,30,.92) 100%); }


/* ==========================================================
   PAGE ANIMATIONS
========================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.animate-in { animation: fadeInUp 0.45s cubic-bezier(.25,.46,.45,.94) both; }
.anim-scale { animation: fadeInScale 0.4s cubic-bezier(.25,.46,.45,.94) both; }
.anim-d1 { animation-delay: .06s; }
.anim-d2 { animation-delay: .13s; }
.anim-d3 { animation-delay: .20s; }
.anim-d4 { animation-delay: .27s; }
.anim-d5 { animation-delay: .34s; }
.anim-d6 { animation-delay: .41s; }
.anim-d7 { animation-delay: .48s; }

/* ==========================================================
   SELLER PORTAL V2 - Modern Sidebar
========================================================== */
.seller-sidebar-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden;
    position: sticky; top: 74px;
    box-shadow: 0 8px 40px rgba(0,0,0,.28);
}
.seller-sidebar-header {
    background: linear-gradient(160deg, rgba(109,40,217,.16) 0%, rgba(109,40,217,.04) 100%);
    border-bottom: 1px solid rgba(109,40,217,.14);
    padding: 22px 16px 16px;
    text-align: center;
    position: relative;
}
.seller-sidebar-header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), #c084fc, #6d28d9, #c084fc, var(--primary));
    background-size: 300% 100%;
    animation: seller-shimmer 3s linear infinite;
}
@keyframes seller-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.seller-avatar-ring {
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.seller-avatar-ring::before {
    content: '';
    position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary), #c084fc, #9333ea, var(--primary));
    animation: seller-ring-spin 4s linear infinite; z-index: 0;
}
.seller-avatar-ring img,
.seller-avatar-ring .seller-avatar-fallback {
    position: relative; z-index: 1;
    width: 74px; height: 74px; border-radius: 50%;
    border: 3px solid var(--bg-card); object-fit: cover;
}
.seller-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
    font-size: 1.7rem; font-weight: 800; color: #fff;
}
@keyframes seller-ring-spin { to { transform: rotate(360deg); } }
.seller-store-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.08rem; font-weight: 800; color: var(--text);
    margin-bottom: 2px; line-height: 1.2;
}
.seller-store-username { font-size: .78rem; color: var(--text-dim); margin-bottom: 10px; }
.seller-status-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.seller-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.seller-status-pill.active    { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25); }
.seller-status-pill.pending   { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.seller-status-pill.suspended { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.seller-kyc-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 700; color: #10b981;
    background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.22);
    padding: 3px 10px; border-radius: 20px;
}
.seller-mini-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--border);
    border-top: 1px solid var(--border);
}
.seller-mini-stat { background: var(--bg-card); padding: 12px 10px; text-align: center; }
.seller-mini-stat-num { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1; }
.seller-mini-stat-lbl {
    font-size: .62rem; color: var(--text-dim); margin-top: 3px;
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
}
.seller-earn-widget {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(5,150,105,.05));
    border-bottom: 1px solid var(--border);
}
.seller-earn-label {
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(16,185,129,.65); margin-bottom: 3px;
}
.seller-earn-amount {
    font-size: 1.55rem; font-weight: 900; color: #10b981;
    letter-spacing: -.03em; line-height: 1.1; margin-bottom: 6px;
}
.seller-earn-link {
    font-size: .72rem; color: rgba(16,185,129,.55);
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.seller-earn-link:hover { color: #10b981; }
.seller-nav-v2 { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.seller-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px; border-radius: 10px;
    font-size: .84rem; font-weight: 600; color: var(--text-muted);
    transition: background .18s, color .18s, transform .18s; text-decoration: none;
    border: 1px solid transparent;
}
.seller-nav-link i { width: 18px; text-align: center; flex-shrink: 0; font-size: .88rem; }
.seller-nav-link:hover { color: #e2e8f0; background: rgba(109,40,217,.09); transform: translateX(2px); }
.seller-nav-link.active {
    color: #c4b5fd;
    background: linear-gradient(135deg, rgba(109,40,217,.18), rgba(109,40,217,.07));
    border-color: rgba(109,40,217,.2);
}
.seller-nav-link.active i { color: #a78bfa; }
.seller-nav-badge {
    margin-left: auto; flex-shrink: 0;
    font-size: .64rem; font-weight: 800;
    padding: 2px 8px; border-radius: 20px;
}
.seller-nav-badge.danger  { background: rgba(239,68,68,.18);  color: #ef4444; }
.seller-nav-badge.warning { background: rgba(245,158,11,.18); color: #f59e0b; }
.seller-nav-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ==========================================================
   SELLER STAT CARDS V2
========================================================== */
.seller-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; padding: 20px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}
.seller-stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--sc-color, var(--primary));
    opacity: 0; transition: opacity .22s;
}
.seller-stat-card::after {
    content: '';
    position: absolute; top: -24px; right: -24px;
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--sc-color, var(--primary));
    opacity: .07; filter: blur(18px); pointer-events: none;
}
.seller-stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--sc-color, var(--primary));
    box-shadow: 0 10px 36px rgba(0,0,0,.22);
}
.seller-stat-card:hover::before { opacity: 1; }
.seller-stat-icon {
    width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
    background: rgba(109,40,217,.14);
    background: color-mix(in srgb, var(--sc-color, var(--primary)) 14%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: var(--sc-color, var(--primary));
    transition: transform .2s;
}
.seller-stat-card:hover .seller-stat-icon { transform: scale(1.12) rotate(-6deg); }
.seller-stat-body { flex: 1; min-width: 0; }
.seller-stat-num {
    font-size: 1.85rem; font-weight: 900;
    color: var(--text); line-height: 1; letter-spacing: -.04em;
}
.seller-stat-label {
    font-size: .68rem; color: var(--text-muted); margin-top: 5px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}

/* ==========================================================
   SELLER LEVEL CARD V2
========================================================== */
.seller-level-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; margin-bottom: 24px; overflow: hidden;
}
.seller-level-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(109,40,217,.07) 0%, transparent 60%);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--lv-color, var(--primary));
}
.seller-level-head-title { font-size: .92rem; font-weight: 700; color: var(--text); margin: 0; }
.seller-level-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 800;
    padding: 4px 12px; border-radius: 20px;
}
.seller-level-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.seller-level-stat {
    padding: 16px 10px; text-align: center;
    border-right: 1px solid var(--border);
}
.seller-level-stat:last-child { border-right: none; }
.seller-level-stat-num { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.seller-level-stat-lbl {
    font-size: .65rem; color: var(--text-muted); margin-top: 4px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.seller-level-progress { padding: 14px 20px; border-top: 1px solid var(--border); }
.seller-progress-bar {
    height: 6px; border-radius: 3px; background: var(--border);
    overflow: hidden; margin: 6px 0;
}
.seller-progress-fill {
    height: 100%; border-radius: 3px;
    transition: width .6s cubic-bezier(.25,.46,.45,.94);
}
.seller-progress-meta { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 4px; }

/* KYC banner */
.seller-kyc-banner {
    display: flex; align-items: center; gap: 14px;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.2);
    border-radius: 14px; padding: 16px 20px; margin-bottom: 24px;
    animation: fadeInUp .4s ease both;
}
.seller-kyc-banner-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(245,158,11,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #f59e0b;
}
.seller-kyc-banner-text { flex: 1; }
.seller-kyc-banner-title { font-size: .9rem; font-weight: 700; color: #f59e0b; margin-bottom: 2px; }
.seller-kyc-banner-sub { font-size: .78rem; color: var(--text-muted); }

/* Light overrides */
[data-theme="light"] .seller-sidebar-v2 { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .seller-sidebar-header { background: linear-gradient(160deg, rgba(109,40,217,.08) 0%, rgba(109,40,217,.02) 100%); }
[data-theme="light"] .seller-mini-stat { background: #fff; }
[data-theme="light"] .seller-earn-widget { background: linear-gradient(135deg, rgba(16,185,129,.07), rgba(5,150,105,.03)); }
[data-theme="light"] .seller-stat-card { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
[data-theme="light"] .seller-level-card { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* ==========================================================
   HOMEPAGE V2 — hp- prefix
========================================================== */
.hp-container { max-width: 1440px; margin: 0 auto; padding: 0 24px 64px; }
.hp-section { margin-bottom: 48px; }
.hp-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.hp-sec-title { font-family: 'Rajdhani',sans-serif; font-size: .95rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.hp-sec-title i { font-size: .95rem; color: var(--primary); }
.hp-see-all { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: gap .18s, color .18s; white-space: nowrap; }
.hp-see-all:hover { gap: 9px; color: #c084fc; }
.hp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s cubic-bezier(.25,.46,.45,.94), transform .55s cubic-bezier(.25,.46,.45,.94); }
.hp-revealed { opacity: 1; transform: none; }
.hp-empty { text-align: center; padding: 30px 20px; color: var(--text-muted); font-size: .85rem; }
.hp-empty i { font-size: 1.8rem; margin-bottom: 8px; display: block; opacity: .3; }

/* ── Hero ── */
.hp-hero-section { position: relative; overflow: hidden; height: 560px; background: #0a0a12; }
.hp-swiper, .hp-swiper .swiper-container { height: 100%; }
.hp-slide { height: 560px; position: relative; overflow: hidden; }
.hp-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transform: scale(1.05); transition: transform 8s ease; }
.swiper-slide-active .hp-slide-bg { transform: scale(1); }
.hp-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,18,.95) 0%, rgba(10,10,18,.72) 38%, rgba(10,10,18,.28) 65%, rgba(10,10,18,.05) 100%); }
.hp-hero-inner { position: relative; z-index: 2; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 44px; display: flex; align-items: center; }
.hp-hero-content { max-width: 600px; }
.hp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c084fc; background: rgba(192,132,252,.08); border: 1px solid rgba(192,132,252,.2); padding: 5px 14px; border-radius: 20px; margin-bottom: 18px; }
.hp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #c084fc; display: inline-block; animation: hp-pulse 1.4s ease-in-out infinite; }
@keyframes hp-pulse { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.4)} }
.hp-hero-h1 { font-family: 'Rajdhani',sans-serif; font-size: 3.6rem; font-weight: 900; line-height: 1.04; color: #fff; margin: 0 0 14px; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.hp-hero-sub { font-size: .98rem; color: #94a3b8; line-height: 1.65; margin: 0 0 26px; max-width: 480px; }
.hp-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hp-btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff; background: linear-gradient(135deg,#7c3aed 0%,#9333ea 100%); box-shadow: 0 4px 22px rgba(124,58,237,.45); transition: transform .18s, box-shadow .18s; }
.hp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(124,58,237,.6); color: #fff; }
.hp-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; color: #e2e8f0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); transition: background .18s, border-color .18s; }
.hp-btn-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.26); color: #fff; }
.hp-btn-price { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 12px; font-weight: 900; font-size: 1.05rem; color: #a78bfa; background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); }
.hp-trust-pills { display: flex; gap: 18px; flex-wrap: wrap; }
.hp-trust-pills span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #94a3b8; }
.hp-trust-pills span i { color: #a78bfa; }
.hp-swiper-pag { position: absolute; bottom: 18px !important; left: 44px !important; right: auto !important; width: auto !important; }
.hp-swiper-pag .swiper-pagination-bullet { background: rgba(255,255,255,.38); opacity: 1; width: 6px; height: 6px; transition: width .2s, background .2s; }
.hp-swiper-pag .swiper-pagination-bullet-active { background: #c084fc; width: 22px; border-radius: 3px; }
.hp-swiper-prev, .hp-swiper-next { color: #fff !important; background: rgba(0,0,0,.42) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.12) !important; top: 50% !important; }
.hp-swiper-prev::after, .hp-swiper-next::after { font-size: .78rem !important; }
.hp-swiper-prev { left: 12px !important; }
.hp-swiper-next { right: 12px !important; }

/* ── Particles ── */
.hp-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hp-particle { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(124,58,237,.55); animation: hp-rise var(--d) var(--del) linear infinite; }
@keyframes hp-rise { 0%{bottom:-10px;opacity:0;transform:scale(.5)} 10%{opacity:.8} 90%{opacity:.25} 100%{bottom:100%;opacity:0;transform:scale(1.3) translateX(40px)} }

/* ── Promo Float ── */
.hp-promo-float { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(10,10,18,.88); backdrop-filter: blur(16px); border: 1px solid rgba(124,58,237,.35); border-radius: 18px; padding: 18px 22px 16px; text-align: center; min-width: 180px; box-shadow: 0 12px 48px rgba(0,0,0,.7),0 0 40px rgba(124,58,237,.14); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hp-pf-label { font-size: .64rem; font-weight: 800; letter-spacing: .1em; color: #c084fc; text-transform: uppercase; }
.hp-pf-sub { font-size: .58rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; }
.hp-pf-pct { font-family: 'Rajdhani',sans-serif; font-size: 2.6rem; font-weight: 900; color: #fff; line-height: 1; }
.hp-pf-pct span { font-size: .88rem; font-weight: 700; color: #a78bfa; }
.hp-countdown { display: flex; align-items: center; gap: 4px; }
.hp-cd-box { background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.25); border-radius: 7px; padding: 5px 8px; text-align: center; min-width: 40px; }
.hp-cd-box span { display: block; font-size: .95rem; font-weight: 800; color: #fff; line-height: 1; }
.hp-cd-box small { display: block; font-size: .5rem; color: rgba(255,255,255,.42); text-transform: uppercase; margin-top: 2px; }
.hp-cd-sep { font-size: 1rem; font-weight: 800; color: #7c3aed; }
.hp-pf-cta { display: block; width: 100%; padding: 9px; border-radius: 10px; font-size: .76rem; font-weight: 700; text-decoration: none; text-align: center; color: #fff; background: linear-gradient(135deg,#7c3aed,#9333ea); transition: opacity .15s; }
.hp-pf-cta:hover { opacity: .88; color: #fff; }

/* ── Stats Bar ── */
.hp-stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 20px 0 32px; }
.hp-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; transition: border-color .2s, transform .2s; }
.hp-stat-card:hover { border-color: rgba(124,58,237,.3); transform: translateY(-2px); }
.hp-stat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%,rgba(124,58,237,.055) 0%,transparent 60%); pointer-events: none; }
.hp-stat-ico { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(124,58,237,.12); background: color-mix(in srgb, var(--c,#7c3aed) 12%, transparent); color: var(--c,#7c3aed); }
.hp-stat-body { flex: 1; min-width: 0; }
.hp-stat-num { font-size: 1.28rem; font-weight: 900; color: var(--text); line-height: 1; }
.hp-stat-lbl { font-size: .65rem; color: var(--text-muted); margin-top: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hp-stat-badge { flex-shrink: 0; font-size: .6rem; font-weight: 700; color: #10b981; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); padding: 2px 7px; border-radius: 20px; }
.hp-badge-live { animation: hp-pulse 2s ease-in-out infinite; }

/* ── Trust Bar ── */
.hp-trust-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 36px; }
.hp-trust-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; transition: border-color .2s; }
.hp-trust-item:hover { border-color: rgba(124,58,237,.25); }
.hp-trust-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.hp-ti-purple { background: rgba(124,58,237,.12); color: #a78bfa; }
.hp-ti-green  { background: rgba(16,185,129,.12);  color: #34d399; }
.hp-ti-yellow { background: rgba(245,158,11,.12);  color: #fbbf24; }
.hp-ti-blue   { background: rgba(59,130,246,.12);  color: #60a5fa; }
.hp-trust-txt b { display: block; font-size: .8rem; font-weight: 700; color: var(--text); }
.hp-trust-txt span { display: block; font-size: .68rem; color: var(--text-muted); margin-top: 2px; }

/* ── Category Carousel ── */
.hp-cat-carousel-wrap { position: relative; overflow: hidden; }
.hp-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,18,.75); backdrop-filter: blur(8px); color: #fff; font-size: .74rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.hp-carousel-btn:hover { background: rgba(124,58,237,.5); border-color: rgba(124,58,237,.5); }
.hp-carousel-prev { left: 4px; }
.hp-carousel-next { right: 4px; }
.hp-cat-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.hp-cat-track::-webkit-scrollbar { display: none; }
.hp-cat-card { flex-shrink: 0; width: 150px; border-radius: 14px; overflow: hidden; position: relative; text-decoration: none; display: block; background: var(--bg-card); border: 1px solid var(--border); scroll-snap-align: start; transition: transform .22s, border-color .22s, box-shadow .22s; aspect-ratio: 2/3; }
.hp-cat-card:hover { transform: translateY(-5px) scale(1.025); border-color: rgba(124,58,237,.4); box-shadow: 0 12px 36px rgba(0,0,0,.45); }
.hp-cat-img { position: absolute; inset: 0; }
.hp-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .32s; }
.hp-cat-card:hover .hp-cat-img img { transform: scale(1.07); }
.hp-cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.14) 50%,transparent 80%); }
.hp-cat-hot { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .56rem; font-weight: 800; background: rgba(239,68,68,.88); color: #fff; padding: 2px 7px; border-radius: 20px; }
.hp-cat-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .56rem; font-weight: 800; background: rgba(0,0,0,.62); color: rgba(255,255,255,.75); padding: 2px 7px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); }
.hp-cat-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 10px; }
.hp-cat-name { font-size: .82rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 3px; }
.hp-cat-price { font-size: .63rem; color: rgba(255,255,255,.55); font-weight: 600; }

/* ── Game-Cover Cards ── */
.hp-product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; }
.hp-game-card { border-radius: 14px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; display: block; position: relative; aspect-ratio: 2/3; transition: transform .22s, border-color .22s, box-shadow .22s; }
.hp-game-card:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(124,58,237,.4); box-shadow: 0 14px 42px rgba(0,0,0,.5); }
.hp-gc-img { position: absolute; inset: 0; }
.hp-gc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hp-game-card:hover .hp-gc-img img { transform: scale(1.07); }
.hp-gc-grad { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.04) 70%,transparent 90%); }
.hp-gc-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .58rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; }
.hp-gb-new { background: rgba(124,58,237,.88); color: #fff; }
.hp-gb-discount { background: rgba(239,68,68,.88); color: #fff; }
.hp-gb-instant { background: rgba(245,158,11,.9); color: #fff; font-size: .68rem; }
.hp-gc-star { position: absolute; top: 8px; right: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: rgba(245,158,11,.9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .62rem; }
.hp-gc-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 10px 10px 12px; }
.hp-gc-cat { font-size: .56rem; color: #a78bfa; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.hp-gc-title { font-size: .76rem; font-weight: 700; color: #e2e8f0; line-height: 1.3; margin-bottom: 8px; }
.hp-gc-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hp-gc-price-wrap { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.hp-gc-old { font-size: .58rem; color: rgba(255,255,255,.38); text-decoration: line-through; }
.hp-gc-price { font-size: .9rem; font-weight: 900; color: #fff; white-space: nowrap; }
.hp-gc-buy { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: rgba(124,58,237,.7); color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.hp-game-card:hover .hp-gc-buy { background: #7c3aed; transform: scale(1.1); }

/* ── Main 2-col Grid ── */
.hp-main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.hp-main-left { min-width: 0; }
.hp-sidebar { min-width: 0; }
.hp-sb-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 20px; overflow: hidden; }
.hp-sb-block .hp-sec-head { margin-bottom: 14px; }

/* ── Sidebar Cat List ── */
.hp-cat-list { display: flex; flex-direction: column; }
.hp-cat-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; border-bottom: 1px solid var(--border); transition: padding-left .15s; }
.hp-cat-row:last-child { border-bottom: none; }
.hp-cat-row:hover { padding-left: 4px; }
.hp-cat-row:hover .hp-cat-row-nm { color: var(--primary); }
.hp-cat-row-img { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-secondary); }
.hp-cat-row-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-cat-row-nm { flex: 1; font-size: .8rem; font-weight: 600; color: var(--text); transition: color .15s; }
.hp-cat-row-cnt { font-size: .65rem; font-weight: 700; color: rgba(124,58,237,.85); background: rgba(124,58,237,.1); border-radius: 20px; padding: 2px 8px; }

/* ── Sellers ── */
.hp-seller-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; border-bottom: 1px solid var(--border); transition: padding-left .15s; }
.hp-seller-row:last-child { border-bottom: none; }
.hp-seller-row:hover { padding-left: 4px; }
.hp-seller-rank { width: 22px; text-align: center; flex-shrink: 0; font-size: .85rem; font-weight: 800; color: var(--text); }
.hp-seller-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; color: #fff; }
.hp-seller-info { flex: 1; min-width: 0; }
.hp-seller-name { font-size: .8rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 4px; transition: color .15s; }
.hp-seller-row:hover .hp-seller-name { color: var(--primary); }
.hp-seller-stars { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.hp-seller-stars i { font-size: .5rem; }
.hp-seller-stars span { font-size: .6rem; color: var(--text-muted); margin-left: 3px; }
.hp-seller-sales { text-align: right; flex-shrink: 0; font-size: .85rem; font-weight: 800; color: var(--text); line-height: 1; }
.hp-seller-sales small { display: block; font-size: .56rem; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* ── Live Activity ── */
.hp-live-pulse-sm { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: hp-pulse 1s ease-in-out infinite; flex-shrink: 0; }
.hp-live-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.hp-live-row:last-child { border-bottom: none; }
.hp-live-av { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-secondary); }
.hp-live-av img { width: 100%; height: 100%; object-fit: cover; }
.hp-live-info { flex: 1; min-width: 0; }
.hp-live-info b { display: block; font-size: .75rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-live-info span { display: block; font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-live-right { text-align: right; flex-shrink: 0; }
.hp-live-price { font-size: .8rem; font-weight: 800; color: #10b981; }
.hp-live-ago { font-size: .6rem; color: var(--text-muted); }

/* ── Trend ── */
.hp-trend-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--border); transition: padding-left .15s; }
.hp-trend-row:last-child { border-bottom: none; }
.hp-trend-row:hover { padding-left: 4px; }
.hp-trend-rank { font-size: .7rem; font-weight: 800; color: var(--text-muted); width: 20px; flex-shrink: 0; }
.hp-trend-img { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.hp-trend-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-trend-name { flex: 1; font-size: .8rem; font-weight: 700; color: var(--text); }
.hp-trend-stat { font-size: .66rem; font-weight: 700; color: #ef4444; display: flex; align-items: center; gap: 3px; }
.hp-trend-stat i { font-size: .52rem; }

/* ── Promo Widget ── */
.hp-promo-widget { background: linear-gradient(160deg,rgba(124,58,237,.2) 0%,rgba(10,10,18,.8) 100%) !important; border-color: rgba(124,58,237,.24) !important; position: relative; overflow: hidden; text-align: center; padding: 26px 18px !important; }
.hp-pw-orb { position: absolute; top: -44px; right: -44px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle,rgba(124,58,237,.35) 0%,transparent 70%); pointer-events: none; }
.hp-pw-tag { font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: #c084fc; text-transform: uppercase; margin-bottom: 6px; }
.hp-pw-pct { font-family: 'Rajdhani',sans-serif; font-size: 2.8rem; font-weight: 900; color: #fff; line-height: 1; }
.hp-pw-pct span { font-size: .95rem; color: #a78bfa; }
.hp-pw-code { font-size: .74rem; color: rgba(255,255,255,.55); margin: 8px 0; }
.hp-pw-code strong { color: #fff; background: rgba(124,58,237,.3); padding: 2px 10px; border-radius: 6px; border: 1px solid rgba(124,58,237,.4); }
.hp-pw-btn { display: block; padding: 10px 16px; border-radius: 10px; font-size: .78rem; font-weight: 700; background: linear-gradient(135deg,#7c3aed,#9333ea); color: #fff; text-decoration: none; margin-top: 12px; transition: opacity .15s; }
.hp-pw-btn:hover { opacity: .88; color: #fff; }
.hp-pw-img { position: absolute; right: -8px; bottom: -4px; width: 110px; opacity: .65; pointer-events: none; mask-image: linear-gradient(to top,black 40%,transparent 100%); -webkit-mask-image: linear-gradient(to top,black 40%,transparent 100%); }

/* ── Custom Cards ── */
.hp-cc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 16px; }
.hp-cc-card { border-radius: 16px; overflow: hidden; position: relative; min-height: 180px; text-decoration: none; display: block; background: var(--bg-card); background-size: cover; background-position: center; transition: transform .22s, box-shadow .22s; }
.hp-cc-card:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0,0,0,.55); }
.hp-cc-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 60%,transparent 100%); }
.hp-cc-content { position: relative; z-index: 2; padding: 20px; }
.hp-cc-badge { display: inline-block; font-size: .63rem; font-weight: 800; letter-spacing: .07em; padding: 3px 10px; border-radius: 20px; border: 1px solid; margin-bottom: 8px; }
.hp-cc-title { font-size: 1.12rem; font-weight: 800; color: #fff; margin-bottom: 5px; line-height: 1.25; }
.hp-cc-sub { font-size: .8rem; color: rgba(255,255,255,.62); margin-bottom: 12px; }
.hp-cc-btn { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 8px; font-size: .76rem; font-weight: 700; color: #fff; transition: opacity .15s; }
.hp-cc-btn:hover { opacity: .88; }
.hp-cc-glow { position: absolute; inset: 0; pointer-events: none; }

/* ── Recent Cards ── */
.hp-recent-track { display: grid; grid-template-columns: repeat(auto-fill,minmax(195px,1fr)); gap: 14px; }
.hp-recent-card { border-radius: 14px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; display: block; transition: transform .22s, border-color .22s, box-shadow .22s; }
.hp-recent-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,.3); box-shadow: 0 10px 36px rgba(0,0,0,.35); }
.hp-rc-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.hp-rc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hp-recent-card:hover .hp-rc-img img { transform: scale(1.07); }
.hp-rc-grad { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%); }
.hp-rc-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .58rem; font-weight: 800; padding: 3px 8px; border-radius: 20px; background: rgba(16,185,129,.85); color: #fff; }
.hp-rc-time { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .56rem; color: rgba(255,255,255,.68); background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 20px; }
.hp-rc-cat { position: absolute; bottom: 8px; left: 8px; z-index: 2; font-size: .52rem; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.hp-rc-body { padding: 12px 14px; }
.hp-rc-title { font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.hp-rc-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hp-rc-price { font-size: .9rem; font-weight: 900; color: #10b981; }
.hp-rc-seller { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hp-rc-av { width: 20px; height: 20px; border-radius: 50%; background: rgba(124,58,237,.5); display: flex; align-items: center; justify-content: center; font-size: .56rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.hp-rc-seller span { font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Sell CTA ── */
.hp-sell-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; background: linear-gradient(135deg,rgba(124,58,237,.18) 0%,rgba(10,10,18,.6) 50%,rgba(147,51,234,.12) 100%); border: 1px solid rgba(124,58,237,.24); border-radius: 20px; padding: 48px 52px; position: relative; overflow: hidden; margin-bottom: 36px; }
.hp-sell-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.hp-sell-orb-1 { width: 320px; height: 320px; top: -100px; right: 240px; background: radial-gradient(circle,rgba(124,58,237,.28) 0%,transparent 70%); }
.hp-sell-orb-2 { width: 220px; height: 220px; bottom: -80px; right: -60px; background: radial-gradient(circle,rgba(192,132,252,.18) 0%,transparent 70%); }
.hp-sell-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: #c084fc; background: rgba(192,132,252,.1); border: 1px solid rgba(192,132,252,.2); padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; }
.hp-sell-title { font-family: 'Rajdhani',sans-serif; font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 10px; }
.hp-sell-sub { font-size: .9rem; color: #94a3b8; line-height: 1.65; margin-bottom: 24px; max-width: 540px; }
.hp-sell-stats { display: flex; gap: 36px; margin-bottom: 24px; }
.hp-sell-stat-num { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1; }
.hp-sell-stat-lbl { font-size: .64rem; color: rgba(255,255,255,.48); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; font-weight: 700; }
.hp-sell-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 12px; background: linear-gradient(135deg,#7c3aed,#9333ea); color: #fff; font-weight: 800; font-size: .95rem; text-decoration: none; box-shadow: 0 6px 24px rgba(124,58,237,.4); transition: transform .18s, box-shadow .18s; }
.hp-sell-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(124,58,237,.6); color: #fff; }
.hp-sell-visual { position: relative; z-index: 1; }
.hp-sell-cards { display: flex; flex-direction: column; gap: 10px; }
.hp-sc { background: rgba(255,255,255,.055); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 22px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .88rem; color: #e2e8f0; white-space: nowrap; min-width: 200px; }
.hp-sc i { width: 22px; text-align: center; font-size: 1rem; }
.hp-sc-1 { transform: rotate(-1.5deg); } .hp-sc-1 i { color: #a78bfa; }
.hp-sc-2 { transform: rotate(.8deg);  } .hp-sc-2 i { color: #34d399; }
.hp-sc-3 { transform: rotate(-1deg); } .hp-sc-3 i { color: #fbbf24; }

/* ── Guarantee ── */
.hp-guarantee { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 52px; }
.hp-gb { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; border: 1px solid; }
.hp-gb-purple { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.18); }
.hp-gb-yellow { background: rgba(245,158,11,.07);  border-color: rgba(245,158,11,.18); }
.hp-gb-green  { background: rgba(16,185,129,.07);  border-color: rgba(16,185,129,.18); }
.hp-gb-blue   { background: rgba(59,130,246,.07);  border-color: rgba(59,130,246,.18); }
.hp-gb-ico { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.hp-gb-purple .hp-gb-ico { background: rgba(124,58,237,.15); color: #a78bfa; }
.hp-gb-yellow .hp-gb-ico { background: rgba(245,158,11,.15);  color: #fbbf24; }
.hp-gb-green  .hp-gb-ico { background: rgba(16,185,129,.15);  color: #34d399; }
.hp-gb-blue   .hp-gb-ico { background: rgba(59,130,246,.15);  color: #60a5fa; }
.hp-gb b { display: block; font-size: .82rem; font-weight: 700; color: var(--text); }
.hp-gb span { display: block; font-size: .68rem; color: var(--text-muted); margin-top: 2px; }

/* ── Responsive ── */
@media(max-width:1200px){
    .hp-main-grid { grid-template-columns: 1fr 284px; }
    .hp-guarantee { grid-template-columns: repeat(2,1fr); }
    .hp-sell-cta { padding: 36px 40px; gap: 32px; }
}
@media(max-width:992px){
    .hp-hero-section,.hp-slide { height: 460px; }
    .hp-main-grid { grid-template-columns: 1fr; }
    .hp-sidebar { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
    .hp-sb-block { margin-bottom: 0; }
    .hp-trust-bar,.hp-stats-bar { grid-template-columns: repeat(2,1fr); }
    .hp-sell-cta { grid-template-columns: 1fr; }
    .hp-sell-visual { display: none; }
    .hp-hero-h1 { font-size: 2.6rem; }
    .hp-hero-inner { padding: 0 30px; }
}
@media(max-width:768px){
    .hp-container { padding: 0 16px 48px; }
    .hp-hero-section,.hp-slide { height: 380px; }
    .hp-hero-h1 { font-size: 2rem; }
    .hp-hero-sub { font-size: .88rem; }
    .hp-hero-inner { padding: 0 20px; }
    .hp-product-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
    .hp-sidebar { grid-template-columns: 1fr; }
    .hp-guarantee { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .hp-sell-cta { padding: 26px 24px; }
    .hp-sell-title { font-size: 1.8rem; }
    .hp-sell-stats { gap: 22px; }
    .hp-sell-stat-num { font-size: 1.25rem; }
    .hp-recent-track { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:576px){
    .hp-hero-section,.hp-slide { height: 320px; }
    .hp-hero-h1 { font-size: 1.65rem; }
    .hp-trust-pills { display: none; }
    .hp-trust-bar { grid-template-columns: repeat(2,1fr); gap: 8px; }
    .hp-stats-bar { grid-template-columns: repeat(2,1fr); gap: 8px; }
    .hp-product-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
    .hp-recent-track { grid-template-columns: 1fr; }
    .hp-guarantee { grid-template-columns: 1fr; }
    .hp-hero-inner { padding: 0 16px; }
}

/* ── Light mode ── */
[data-theme="light"] .hp-slide-overlay { background: linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 38%,rgba(255,255,255,.22) 65%,transparent 100%); }
[data-theme="light"] .hp-hero-h1 { color: #0f172a; text-shadow: none; }
[data-theme="light"] .hp-hero-sub { color: #475569; }
[data-theme="light"] .hp-trust-pills span { color: #475569; }
[data-theme="light"] .hp-eyebrow { background: rgba(124,58,237,.07); color: #7c3aed; }
[data-theme="light"] .hp-promo-float { background: rgba(255,255,255,.92); }
[data-theme="light"] .hp-pf-pct { color: #0f172a; }
[data-theme="light"] .hp-pf-label { color: #7c3aed; }
[data-theme="light"] .hp-stat-card { background: #fff; }
[data-theme="light"] .hp-sell-cta { background: linear-gradient(135deg,rgba(124,58,237,.07) 0%,rgba(249,250,251,.95) 60%,rgba(147,51,234,.04) 100%); }
[data-theme="light"] .hp-sell-title { color: #0f172a; }
[data-theme="light"] .hp-sell-sub { color: #64748b; }
[data-theme="light"] .hp-sc { background: rgba(124,58,237,.05); border-color: rgba(124,58,237,.14); color: #1e293b; }
[data-theme="light"] .hp-promo-widget { background: linear-gradient(160deg,rgba(124,58,237,.09) 0%,rgba(248,250,252,.95) 100%) !important; }
[data-theme="light"] .hp-pw-pct { color: #0f172a; }
[data-theme="light"] .hp-pw-tag { color: #7c3aed; }

/* ==========================================================
   HERO SLIDER V2  (hs2-)  — fixes height, image, design
========================================================== */
.hs2-section {
    position: relative; overflow: hidden;
    height: 600px; background: #0d0117;
}
/* Swiper — explicit pixel height, NOT percentage */
.hs2-swiper { width: 100%; height: 600px; }
.hs2-swiper .swiper-wrapper { height: 600px; }
.hs2-slide {
    height: 600px; position: relative; overflow: hidden;
}

/* Full-bleed image via <img> — always visible, no height dependency */
.hs2-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    z-index: 0;
}

/* Overlay layers */
.hs2-overlay-dark {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(5,0,20,.52);
}
.hs2-overlay-grad {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(
        100deg,
        rgba(5,0,20,.96) 0%,
        rgba(5,0,20,.78) 32%,
        rgba(5,0,20,.38) 58%,
        rgba(5,0,20,.08) 80%,
        transparent 100%
    );
}
.hs2-overlay-vign {
    position: absolute; inset: 0; z-index: 3;
    background: radial-gradient(ellipse at 70% 50%, transparent 40%, rgba(5,0,20,.55) 100%);
}

/* Content */
.hs2-content {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 64px; max-width: 680px;
}
@keyframes hs2In {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.hs2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #e0aaff;
    background: rgba(192,132,252,.1); border: 1px solid rgba(192,132,252,.25);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 18px;
    animation: hs2In .55s ease both;
    width: fit-content;
}
.hs2-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c084fc; display: inline-block;
    animation: hs2-pulse 1.4s ease-in-out infinite;
}
@keyframes hs2-pulse { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.4)} }
.hs2-title {
    font-family: 'Rajdhani',sans-serif;
    font-size: clamp(2.2rem,4.5vw,3.8rem);
    font-weight: 900; line-height: 1.04; color: #fff;
    margin: 0 0 14px; text-shadow: 0 2px 30px rgba(0,0,0,.7);
    animation: hs2In .55s .09s ease both;
}
.hs2-sub {
    font-size: clamp(.88rem,1.5vw,.98rem); color: #b0bec5;
    line-height: 1.7; margin: 0 0 28px; max-width: 480px;
    animation: hs2In .55s .18s ease both;
}
.hs2-btns {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
    animation: hs2In .55s .27s ease both;
}
.hs2-btn-primary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 30px; border-radius: 12px; font-weight: 700;
    font-size: .96rem; text-decoration: none; color: #fff;
    background: linear-gradient(135deg,#7c3aed 0%,#9333ea 100%);
    box-shadow: 0 4px 24px rgba(124,58,237,.5);
    transition: transform .18s, box-shadow .18s;
}
.hs2-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 38px rgba(124,58,237,.65); color: #fff; }
.hs2-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 12px; font-weight: 700;
    font-size: .96rem; text-decoration: none; color: #e2e8f0;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    transition: background .18s, border-color .18s;
}
.hs2-btn-ghost:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); color: #fff; }
.hs2-btn-price {
    display: inline-flex; align-items: center;
    padding: 13px 22px; border-radius: 12px; font-weight: 900;
    font-size: 1.05rem; color: #a78bfa;
    background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.32);
}
.hs2-trust {
    display: flex; gap: 20px; flex-wrap: wrap;
    animation: hs2In .55s .36s ease both;
}
.hs2-trust span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.6);
}
.hs2-trust span i { color: #9333ea; font-size: .8rem; }

/* Pagination */
.hs2-pag {
    position: absolute !important; bottom: 22px !important;
    left: 64px !important; right: auto !important; width: auto !important; z-index: 20;
}
.hs2-pag .swiper-pagination-bullet {
    background: rgba(255,255,255,.4); opacity: 1;
    width: 7px; height: 7px; transition: width .2s, background .2s;
}
.hs2-pag .swiper-pagination-bullet-active {
    background: #c084fc; width: 26px; border-radius: 4px;
}
/* Navigation */
.hs2-prev, .hs2-next {
    color: #fff !important;
    background: rgba(0,0,0,.38) !important; backdrop-filter: blur(6px);
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important; border: 1px solid rgba(255,255,255,.14) !important;
    transition: background .18s, border-color .18s !important;
    z-index: 20;
}
.hs2-prev:hover, .hs2-next:hover { background: rgba(124,58,237,.55) !important; border-color: rgba(124,58,237,.5) !important; }
.hs2-prev::after, .hs2-next::after { font-size: .82rem !important; }
.hs2-prev { left: 14px !important; }
.hs2-next { right: 14px !important; }

/* Particles (inside hs2-section) */
.hs2-particles {
    position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.hs2-particles span {
    position: absolute; left: var(--x); bottom: -8px;
    width: var(--s); height: var(--s); border-radius: 50%;
    background: rgba(147,51,234,.6);
    animation: hs2-rise var(--d) var(--del) linear infinite;
}
@keyframes hs2-rise {
    0%   { bottom:-8px; opacity:0; transform:scale(.4); }
    8%   { opacity:.9; }
    92%  { opacity:.2; }
    100% { bottom:100%; opacity:0; transform:scale(1.4) translateX(35px); }
}

/* Promo float */
.hs2-promo {
    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    z-index: 20;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(8,0,28,.85); backdrop-filter: blur(18px);
    border: 1px solid rgba(147,51,234,.38);
    border-radius: 18px; padding: 20px 22px;
    text-align: center; min-width: 172px;
    box-shadow: 0 14px 52px rgba(0,0,0,.7), 0 0 40px rgba(124,58,237,.18);
}
.hs2-promo-label {
    font-size: .62rem; font-weight: 800; letter-spacing: .1em;
    color: #c084fc; text-transform: uppercase;
}
.hs2-promo-pct {
    font-family: 'Rajdhani',sans-serif;
    font-size: 2.8rem; font-weight: 900; color: #fff; line-height: 1;
}
.hs2-promo-pct small {
    display: block; font-size: .78rem; font-weight: 700;
    color: #a78bfa; line-height: 1.2;
}
.hs2-countdown { display: flex; align-items: center; gap: 4px; }
.hs2-countdown b { color: #7c3aed; font-size: 1rem; font-weight: 900; }
.hs2-cd {
    background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.26);
    border-radius: 7px; padding: 5px 9px; text-align: center; min-width: 40px;
}
.hs2-cd span { display: block; font-size: .95rem; font-weight: 800; color: #fff; line-height: 1; }
.hs2-cd em { display: block; font-size: .48rem; color: rgba(255,255,255,.4); font-style: normal; text-transform: uppercase; margin-top: 2px; letter-spacing: .06em; }
.hs2-promo-btn {
    display: block; width: 100%; padding: 9px;
    border-radius: 10px; font-size: .76rem; font-weight: 700;
    text-decoration: none; text-align: center; color: #fff;
    background: linear-gradient(135deg,#7c3aed,#9333ea);
    transition: opacity .15s;
}
.hs2-promo-btn:hover { opacity: .88; color: #fff; }

/* Responsive */
@media(max-width:992px){
    .hs2-section,.hs2-swiper,.hs2-swiper .swiper-wrapper,.hs2-slide { height: 480px; }
    .hs2-content { padding: 0 36px; }
    .hs2-pag { left: 36px !important; }
}
@media(max-width:768px){
    .hs2-section,.hs2-swiper,.hs2-swiper .swiper-wrapper,.hs2-slide { height: 400px; }
    .hs2-content { padding: 0 22px; max-width: 100%; }
    .hs2-title { font-size: 1.9rem; }
    .hs2-trust { display: none; }
    .hs2-pag { left: 22px !important; bottom: 14px !important; }
}
@media(max-width:480px){
    .hs2-section,.hs2-swiper,.hs2-swiper .swiper-wrapper,.hs2-slide { height: 340px; }
    .hs2-title { font-size: 1.55rem; }
    .hs2-sub { font-size: .82rem; }
    .hs2-btns { gap: 8px; }
    .hs2-btn-primary,.hs2-btn-ghost { padding: 10px 18px; font-size: .86rem; }
    .hs2-content { padding: 0 16px; }
}
[data-theme="light"] .hs2-overlay-dark { background: rgba(255,255,255,.4); }
[data-theme="light"] .hs2-overlay-grad { background: linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.78) 32%,rgba(255,255,255,.38) 58%,transparent 80%); }
[data-theme="light"] .hs2-overlay-vign { background: none; }
[data-theme="light"] .hs2-title { color: #0f172a; text-shadow: none; }
[data-theme="light"] .hs2-sub { color: #475569; }
[data-theme="light"] .hs2-trust span { color: #475569; }
[data-theme="light"] .hs2-eyebrow { background: rgba(124,58,237,.08); color: #7c3aed; }

/* ════════════════════════════════════════════════════════════
   CREATOR WALL v2 — enhanced glow & per-platform effects
════════════════════════════════════════════════════════════ */

/* Section — richer dark background */
.cw-section {
    position: relative;
    background: linear-gradient(180deg, #030008 0%, #0a0012 45%, #06000f 100%);
    overflow: hidden;
}

/* Animated ambient orb layer */
.cw-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 45% at 18% 55%, rgba(124,58,237,.2) 0%, transparent 65%),
        radial-gradient(ellipse 50% 38% at 82% 28%, rgba(192,132,252,.12) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 50% 95%, rgba(109,40,217,.16) 0%, transparent 55%);
    animation: cwBgShift 20s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes cwBgShift {
    0%,100% { opacity: 1;   transform: scale(1); }
    33%      { opacity: .72; transform: scale(1.06); }
    66%      { opacity: .9;  transform: scale(.96); }
}

/* Enhanced central glow orb */
.cw-glow {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 110%;
    background: radial-gradient(ellipse 70% 60% at 50% 28%, rgba(139,92,246,.28) 0%, rgba(109,40,217,.12) 38%, transparent 65%);
    filter: blur(55px);
    z-index: 1;
    animation: cwGlowPulse 9s ease-in-out infinite;
}
@keyframes cwGlowPulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* Section title — ambient glow filter */
.cw-title {
    filter: drop-shadow(0 0 28px rgba(139,92,246,.38));
}

/* ── Card — shimmer sweep on hover ── */
.cw-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,.0) 30%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.0) 70%,
        transparent 100%
    );
    transform: translateX(-100%);
    transition: transform .75s ease;
    z-index: 8;
    pointer-events: none;
    border-radius: inherit;
}
.cw-card:hover::before { transform: translateX(220%); }

/* Card — stronger lift with scale */
.cw-card:hover {
    transform: translateY(-14px) scale(1.025);
}

/* Subtle per-platform default border tint */
.cw-card[data-platform="twitch"]  { border-color: rgba(145,71,255,.22); }
.cw-card[data-platform="kick"]    { border-color: rgba(83,252,24,.22); }
.cw-card[data-platform="youtube"] { border-color: rgba(255,49,49,.22); }

/* Per-platform hover neon glow */
.cw-card[data-platform="twitch"]:hover {
    border-color: rgba(145,71,255,.75) !important;
    box-shadow:
        0 0 0 1px rgba(145,71,255,.4),
        0 0 24px rgba(145,71,255,.55),
        0 0 70px rgba(145,71,255,.22),
        0 28px 56px rgba(0,0,0,.65);
}
.cw-card[data-platform="kick"]:hover {
    border-color: rgba(83,252,24,.65) !important;
    box-shadow:
        0 0 0 1px rgba(83,252,24,.42),
        0 0 24px rgba(83,252,24,.5),
        0 0 70px rgba(83,252,24,.18),
        0 28px 56px rgba(0,0,0,.65);
}
.cw-card[data-platform="youtube"]:hover {
    border-color: rgba(255,49,49,.65) !important;
    box-shadow:
        0 0 0 1px rgba(255,49,49,.4),
        0 0 24px rgba(255,49,49,.5),
        0 0 70px rgba(255,49,49,.18),
        0 28px 56px rgba(0,0,0,.65);
}
.cw-card[data-platform="other"]:hover {
    border-color: rgba(192,132,252,.65) !important;
    box-shadow:
        0 0 0 1px rgba(192,132,252,.4),
        0 0 24px rgba(192,132,252,.5),
        0 0 70px rgba(192,132,252,.18),
        0 28px 56px rgba(0,0,0,.65);
}

/* Card image — more dramatic zoom + saturation boost */
.cw-card:hover .cw-card-img {
    transform: scale(1.12);
    filter: brightness(1.08) saturate(1.22);
}

/* Overlay — taller, more dramatic fade-up */
.cw-overlay {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(5,0,20,.38) 32%,
        rgba(5,0,20,.86) 62%,
        rgba(5,0,20,.97) 100%
    );
    padding: 55px 20px 20px;
}

/* Live tag — pulsing red glow */
.cw-live-tag {
    animation: cwLivePulse 2.2s ease-in-out infinite;
}
@keyframes cwLivePulse {
    0%,100% { box-shadow: 0 0 6px rgba(239,68,68,.5); }
    50%      { box-shadow: 0 0 16px rgba(239,68,68,.85), 0 0 28px rgba(239,68,68,.3); }
}

/* Name — subtle glow on hover */
.cw-card:hover .cw-name {
    text-shadow: 0 0 18px rgba(216,180,254,.5);
}

/* Support button — glassmorphism upgrade */
.cw-support-btn {
    background: rgba(168,85,247,.12) !important;
    border: 1px solid rgba(168,85,247,.3);
    color: #d8b4fe !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s, box-shadow .25s, border-color .25s, transform .2s;
}
.cw-support-btn:hover {
    background: rgba(168,85,247,.26) !important;
    border-color: rgba(168,85,247,.6);
    box-shadow: 0 0 22px rgba(168,85,247,.45);
    opacity: 1 !important;
    transform: scale(1.04) !important;
}

/* Watch button — per-platform glow on hover */
.cw-card[data-platform="twitch"] .cw-watch-btn:hover {
    box-shadow: 0 0 20px rgba(145,71,255,.65);
    opacity: 1 !important;
}
.cw-card[data-platform="kick"] .cw-watch-btn:hover {
    box-shadow: 0 0 20px rgba(83,252,24,.55);
    opacity: 1 !important;
}
.cw-card[data-platform="youtube"] .cw-watch-btn:hover {
    box-shadow: 0 0 20px rgba(255,49,49,.55);
    opacity: 1 !important;
}

/* Platform filter buttons — more vivid active glow */
.cw-btn-all.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow:
        0 0 0 2px rgba(124,58,237,.65),
        0 0 32px rgba(124,58,237,.72),
        0 0 64px rgba(124,58,237,.25);
}
.cw-btn-twitch.active {
    box-shadow:
        0 0 0 2px rgba(145,70,255,.72),
        0 0 32px rgba(145,70,255,.85),
        0 0 70px rgba(145,70,255,.32);
}
.cw-btn-kick.active {
    box-shadow:
        0 0 0 2px rgba(83,252,24,.78),
        0 0 32px rgba(83,252,24,.82),
        0 0 70px rgba(83,252,24,.32);
}
.cw-btn-youtube.active {
    box-shadow:
        0 0 0 2px rgba(255,49,49,.72),
        0 0 32px rgba(255,49,49,.85),
        0 0 70px rgba(255,49,49,.32);
}

/* Light theme — desaturate the dark bg */
[data-theme="light"] .cw-section {
    background: linear-gradient(180deg, #f0ecff 0%, #f8f6ff 45%, #ede9ff 100%);
}
[data-theme="light"] .cw-section::before { opacity: .35; }
[data-theme="light"] .cw-glow { opacity: .3; }
[data-theme="light"] .cw-title { filter: none; }

/* ════════════════════════════════════════════════════════════
   HERO SLIDER v2 — contained layout + product panel
════════════════════════════════════════════════════════════ */

/* Wrapper — same container sizing as hp-container */
.hs2-wrap {
    max-width: 1440px;
    margin: 16px auto 0;
    padding: 0 20px;
}

/* Section — rounded corners now that it's contained */
.hs2-section {
    border-radius: 20px;
    overflow: hidden;
}

/* ── Featured products right panel ── */
.hs2-pp {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 272px;
}

.hs2-pp-head {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #f59e0b;
    padding-left: 2px;
    margin-bottom: 2px;
}

.hs2-pp-card {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(8,0,25,.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(139,92,246,.22);
    border-radius: 14px;
    padding: 10px 12px;
    text-decoration: none;
    transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.hs2-pp-card:hover {
    background: rgba(12,0,36,.85);
    border-color: rgba(139,92,246,.5);
    transform: translateX(-5px);
    box-shadow: 0 4px 22px rgba(109,40,217,.28);
}

.hs2-pp-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(139,92,246,.2);
}

.hs2-pp-info { flex: 1; min-width: 0; }

.hs2-pp-name {
    font-size: .8rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    line-height: 1.3;
}

.hs2-pp-price {
    font-size: .92rem;
    font-weight: 800;
    background: linear-gradient(135deg, #c084fc, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hs2-pp-arr {
    color: rgba(139,92,246,.45);
    font-size: .68rem;
    flex-shrink: 0;
}

.hs2-pp-more {
    display: block;
    text-align: center;
    padding: 9px;
    font-size: .74rem;
    font-weight: 700;
    color: rgba(167,139,250,.75);
    text-decoration: none;
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 10px;
    background: rgba(109,40,217,.08);
    transition: color .2s, border-color .2s, background .2s;
    margin-top: 2px;
}
.hs2-pp-more:hover {
    color: #c084fc;
    border-color: rgba(139,92,246,.42);
    background: rgba(109,40,217,.16);
}

/* Responsive — hide product panel and reduce border-radius on smaller screens */
@media (max-width: 1280px) {
    .hs2-pp { width: 240px; right: 22px; }
    .hs2-pp-img { width: 44px; height: 44px; }
    .hs2-pp-name { font-size: .76rem; }
    .hs2-pp-price { font-size: .84rem; }
}
@media (max-width: 992px) {
    .hs2-wrap { padding: 0 12px; margin-top: 10px; }
    .hs2-section { border-radius: 14px; }
}
@media (max-width: 576px) {
    .hs2-wrap { padding: 0 8px; margin-top: 6px; }
    .hs2-section { border-radius: 10px; }
}

/* hero neon slider effects removed */

/* ════════════════════════════════════════════════════════════
   GLOBAL NEON BACKGROUND  (.neon-bg)
   Fixed behind all content, visible through page scroll
════════════════════════════════════════════════════════════ */

.neon-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* ── Star-dot grid — faint repeating dots ── */
.neon-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(167,139,250,.18) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: nbDotPulse 12s ease-in-out infinite;
}
@keyframes nbDotPulse {
    0%,100% { opacity: .45; }
    50%     { opacity: .75; }
}


/* ── Floating neon orbs ── */
.neon-bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

/* Orb 1 — deep purple, top-left, large */
.nb-1 {
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(124,58,237,.28) 0%, rgba(109,40,217,.12) 50%, transparent 70%);
    top: -8%; left: -6%;
    animation: nbF1 22s ease-in-out infinite;
}

/* Orb 2 — hot pink, mid-right */
.nb-2 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(219,39,119,.22) 0%, rgba(168,85,247,.1) 50%, transparent 70%);
    top: 30%; right: -8%;
    animation: nbF2 28s ease-in-out infinite;
}

/* Orb 3 — violet, bottom-center */
.nb-3 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(109,40,217,.24) 0%, rgba(124,58,237,.1) 50%, transparent 70%);
    bottom: -10%; left: 28%;
    animation: nbF3 20s ease-in-out infinite;
}

/* Orb 4 — cyan, top-right */
.nb-4 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(6,182,212,.16) 0%, rgba(14,165,233,.07) 50%, transparent 70%);
    top: 5%; right: 12%;
    animation: nbF4 32s ease-in-out infinite;
}

/* Orb 5 — pink-purple, mid-left */
.nb-5 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(168,85,247,.2) 0%, rgba(192,132,252,.08) 50%, transparent 70%);
    top: 58%; left: 6%;
    animation: nbF5 24s ease-in-out infinite;
}

/* Orb 6 — deep blue-purple, bottom-right */
.nb-6 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(79,70,229,.18) 0%, rgba(67,56,202,.07) 50%, transparent 70%);
    bottom: 5%; right: 5%;
    animation: nbF6 18s ease-in-out infinite;
}

/* Each orb drifts on its own path via transform — GPU-accelerated, no repaint */
@keyframes nbF1 {
    0%,100% { transform: translate(0,0)      scale(1);    opacity: .9; }
    30%     { transform: translate(80px,-70px)  scale(1.12); opacity: 1;  }
    65%     { transform: translate(-55px,90px)  scale(.9);   opacity: .75; }
}
@keyframes nbF2 {
    0%,100% { transform: translate(0,0)        scale(1);    opacity: .8; }
    38%     { transform: translate(-110px,-90px) scale(1.14); opacity: 1;  }
    70%     { transform: translate(70px,110px)  scale(.88);  opacity: .7; }
}
@keyframes nbF3 {
    0%,100% { transform: translate(0,0)       scale(1);    opacity: .85; }
    28%     { transform: translate(90px,-110px) scale(1.1);  opacity: 1;   }
    62%     { transform: translate(-80px,65px)  scale(.92);  opacity: .7;  }
}
@keyframes nbF4 {
    0%,100% { transform: translate(0,0)       scale(1);    opacity: .7;  }
    42%     { transform: translate(-75px,85px)  scale(1.12); opacity: .9;  }
    74%     { transform: translate(100px,-65px) scale(.9);   opacity: .6;  }
}
@keyframes nbF5 {
    0%,100% { transform: translate(0,0)      scale(1);    opacity: .75; }
    33%     { transform: translate(85px,-95px) scale(1.08); opacity: .95; }
    66%     { transform: translate(-55px,70px) scale(.93);  opacity: .6;  }
}
@keyframes nbF6 {
    0%,100% { transform: translate(0,0)        scale(1);    opacity: .65; }
    45%     { transform: translate(-90px,-70px)  scale(1.1);  opacity: .85; }
    76%     { transform: translate(65px,90px)    scale(.9);   opacity: .55; }
}

/* Light theme — hide neon bg entirely */
[data-theme="light"] .neon-bg { display: none; }

/* ════════════════════════════════════════════════════════════
   RECENT SALES — 2-row cap
════════════════════════════════════════════════════════════ */
.hp-recent-2row {
    /* auto-fill minmax(195px) → ~4 cols at 800px left col width  */
    /* 2 rows × (card height ~192px + 14px gap) = ~400px cap      */
    max-height: 410px;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   FOR YOU SECTION  (.hp-fy-)
════════════════════════════════════════════════════════════ */
.hp-fy-section {
    position: relative;
}

/* Section header */
.hp-fy-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-fy-title {
    gap: 8px;
    display: flex;
    align-items: center;
}
.hp-fy-title i {
    color: #f59e0b;
    animation: fyMagic 2.4s ease-in-out infinite;
}
@keyframes fyMagic {
    0%,100% { transform: rotate(-12deg) scale(1);   color: #f59e0b; }
    50%      { transform: rotate( 12deg) scale(1.2); color: #fbbf24; }
}

.hp-fy-badge {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(251,191,36,.1));
    border: 1px solid rgba(245,158,11,.35);
    color: #fbbf24;
    vertical-align: middle;
}

.hp-fy-sub {
    font-size: .72rem;
    color: var(--text-muted);
    padding-left: 2px;
}
.hp-fy-sub b {
    color: #a78bfa;
    font-weight: 700;
}

/* Card — inherit hp-game-card style, add "For You" sparkle */
.hp-fy-card {
    position: relative;
}

/* Sparkle dot that pulses in the corner of "For You" cards */
.hp-fy-sparkle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px #f59e0b, 0 0 14px rgba(245,158,11,.5);
    animation: fySparkle 1.8s ease-in-out infinite;
    z-index: 5;
}
@keyframes fySparkle {
    0%,100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.6); opacity: .65; }
}

/* Hover — golden border glow for "For You" cards */
.hp-fy-card:hover {
    border-color: rgba(245,158,11,.45);
    box-shadow:
        0 0 0 1px rgba(245,158,11,.3),
        0 0 20px rgba(245,158,11,.2),
        0 18px 40px rgba(0,0,0,.45);
}

/* Light mode */
[data-theme="light"] .hp-fy-badge {
    background: rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.25);
}
[data-theme="light"] .hp-fy-sub { color: #64748b; }