*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial,sans-serif;

    background:#0b0b0b;

    color:white;

    scroll-behavior:smooth;

    padding-bottom:100px;

    margin:0;

}

/* LOGO SECTION */

.logo-section{

    display:flex;

    align-items:center;

    background:none;

    padding:0;

    border:none;

    box-shadow:none;

}

.logo-section h1{
    color:#1DBF73;
}

.search-bar{
    flex:1;
    margin:0 20px;
}

.search-bar input{

    width:100%;

    padding:13px 18px;

    border:none;

    border-radius:14px;

    background:#f5f5f5;

    font-size:16px;

    outline:none;

    box-shadow:

    0 4px 12px rgba(0,0,0,0.06);

}

.cart-btn{
    background:#F8A000;
    border:none;
    color:white;
    padding:12px 18px;
    border-radius:12px;
    cursor:pointer;
}


/* HERO */

.hero{

    margin:20px;

    border-radius:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 40px;

    color:white;

    background-image:url("assets/backG2.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:200px;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.22);

    border-radius:25px;

}

.hero-text h2{

    font-size:52px;
    line-height:1.1;
    color:black;
    margin-bottom:12px;
    text-shadow:0 4px 20px rgba(0,0,0,0.45);

}

.hero-text p{

    margin:12px 0;
    font-size:16px;
    color:black;

}

/* SHOP NOW BUTTON */

.hero button{

    margin-top:18px;

    padding:16px 34px;

    border:none;

    animation:pulseBtn 2s infinite;

    border-radius:16px;

    background:

    linear-gradient(

        135deg,

        #71ff00,

        #9dff00

    );

    color:black;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s ease;

    box-shadow:

    0 10px 25px rgba(113,255,0,0.22);

}

/* BUTTON PULSE */

@keyframes pulseBtn{

    0%{

        box-shadow:

        0 0 0 rgba(113,255,0,0.35);

    }



    50%{

        box-shadow:

        0 0 12px rgba(113,255,0,0.28);

    }



    100%{

        box-shadow:

        0 0 0 rgba(113,255,0,0.35);

    }

}

/* HOVER */

.hero button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 14px 35px rgba(113,255,0,0.35);

}



/* CLICK */

.hero button:active{

    transform:scale(0.97);

}

/* HERO IMAGE */

.hero-image img{

    width:100%;

    max-width:520px;

    object-fit:contain;

    animation:floatHero 4s ease-in-out infinite;

    transition:0.4s ease;

}

/* HERO FLOAT */

@keyframes floatHero{

    0%{

        transform:translateY(0px);

    }



    50%{

        transform:translateY(-18px);

    }



    100%{

        transform:translateY(0px);

    }

}

/* SECTION TITLE */

.section-title{
    padding:0 20px;
    margin-top:30px;
}


/* CATEGORIES */

.categories{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    padding:20px;
}

.category-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    padding:20px 12px;
    border-radius:20px;
    text-align:center;
    transition:0.35s ease;
    cursor:pointer;
    backdrop-filter:blur(10px);
    text-decoration:none;
    display:block;
    color:white;
}

.category-card:hover{
    transform:translateY(-5px);
    border-color:rgba(113,255,0,0.3);
    background:rgba(113,255,0,0.06);
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.category-card img{
    width:52px;
    height:52px;
    object-fit:contain;
    margin-bottom:10px;
}


/* SELLERS */

.seller-container{
    display:flex;
    gap:20px;
    padding:20px;
}

.seller-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    padding:20px;
    border-radius:20px;
    width:200px;
    text-align:center;
    color:white;
}

.seller-card img{
    width:70px;
    margin-bottom:10px;
}


/* PRODUCTS */

/* =========================
   FINAL PRODUCTS GRID FIX
========================= */

.products-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:10px;
    padding:10px 12px 80px;
}

/* PRODUCT CARD */

.product-card{
    background:#151515;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
    transition:0.3s ease;
    position:relative;
    display:flex;
    flex-direction:column;
}

/* HOVER */

.product-card:hover{
    transform:translateY(-6px);
}

/* IMAGE */

.product-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

/* TITLE */

.product-card h3{
    padding:15px 15px 5px;
    color:white;
    font-size:18px;
}

/* PRICE */

.price{
    padding:0 15px;
    color:#71ff00;
    font-size:20px;
    font-weight:bold;
}

/* BUTTON AREA */

.product-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:15px;
    margin-top:auto;
}

/* BUTTON */

.product-btn{
    border:none;
    padding:12px;
    border-radius:12px;
    font-weight:bold;
    cursor:pointer;
}

/* BUTTON COLORS */

.view-btn{
    background:#222;
    color:white;
}

.add-cart-btn{
    background:#71ff00;
    color:black;
}

.wishlist-btn{
    background:#ff2d55;
    color:white;
}

.buy-btn{
    background:#ff9800;
    color:white;
}

/* REMOVE SKELETONS */

.skeleton-card{
    display:none;
}

/* PRODUCT CARD */

.product-card{

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    overflow:hidden;

    transition:0.4s ease;

    position:relative;

    backdrop-filter:blur(18px);

}

/* PREMIUM GLOW */

.product-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-120%;

    width:220%;

    height:220%;

    background:

    linear-gradient(

        45deg,

        transparent,

        rgba(113,255,0,0.08),

        transparent

    );



    transform:rotate(25deg);

    transition:0.8s ease;

}



/* HOVER */

.product-card:hover::before{

    top:100%;

    left:100%;

}



/* PRODUCT HOVER */

.product-card:hover{

    transform:

    translateY(-8px)

    scale(1.02);

}


/* HOVER */

.product-card:hover::before{

    top:100%;

    left:100%;

}

.product-card:hover{
    transform:translateY(-5px);
}

/* PRODUCT IMAGE */

.product-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:18px 18px 0 0;

    transition:0.4s ease;

}

/* IMAGE HOVER */

.product-card:hover img{

    transform:scale(1.04);

}

.product-card h3{
    padding:15px;
    color:white;
}

.price{
    padding:0 15px;
    color:#1DBF73;
    font-weight:bold;
}

.product-card button{
    margin:15px;
    width:calc(100% - 30px);
    padding:12px;
    border:none;
    border-radius:12px;
    background:#1DBF73;
    color:white;
    cursor:pointer;
}


/* BOTTOM NAV */

/* bottom-nav base — overridden by premium definition below */


/* RESPONSIVE */

@media(max-width:900px){

    .categories{
        grid-template-columns:repeat(2,1fr);
    }

    .products-grid{
        grid-template-columns:1fr;
    }
}

.bottom-nav a{
    text-decoration:none;
    color:white;
    font-weight:700;
}
.cart-section{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    margin:20px;
    padding:20px;
    border-radius:20px;
    color:white;
}

.cart-section h2{
    margin-bottom:15px;
}

.cart-section ul{
    list-style:none;
}

.cart-section li{
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.cart-section li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

.cart-section li button{
    background:red;
    color:white;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
}

.cart-total{
    margin-top:20px;
    color:#1DBF73;
}
.checkout-btn{
    margin-top:20px;
    width:100%;
    padding:15px;
    border:none;
    background:#1DBF73;
    color:white;
    border-radius:12px;
    cursor:pointer;
}
.bottom-nav a{
    text-decoration:none;
    color:white;
    font-weight:700;
}
.logo-section img{

    width:230px;

    height:auto;

    object-fit:contain;

    background:none;

}

/* ============================================================
   PRODUCT CARD — TAPPABLE WHOLE-CARD
============================================================ */

.product-card {
    cursor: pointer;
}

/* ============================================================
   PRODUCT BUTTONS — COMPACT (emoji-only, new arrivals + category)
============================================================ */

.product-buttons-compact {
    display: flex;
    gap: 7px;
    padding: 8px 12px 12px;
    align-items: center;
}

.product-buttons-compact{
    display:flex;
    gap:4px;
    padding:4px 6px 8px;
    overflow:visible;
}

.product-buttons-compact .product-btn {
    flex: 1;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    transition: filter 0.18s ease, transform 0.15s ease;
    font-family: inherit;
}

.product-buttons-compact .product-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

.product-buttons-compact .add-cart-btn {
    background: rgba(113,255,0,0.08);
    border: 1px solid rgba(113,255,0,0.25);
    color: #71ff00;
}

.product-buttons-compact .wishlist-btn {
    background: rgba(255,45,85,0.08);
    border: 1px solid rgba(255,45,85,0.25);
    color: #ff4d6d;
    flex: 0 0 32px;
}

.product-buttons-compact .buy-btn {
    background: rgba(255,140,0,0.08);
    border: 1px solid rgba(255,140,0,0.25);
    color: #ff9800;
}

/* ============================================================
   BACK TO TOP BUTTON
============================================================ */

.back-to-top-btn {
    position: fixed;
    bottom: 80px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #71ff00, #4fc800);
    color: black;
    border: none;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    box-shadow: 0 4px 16px rgba(113,255,0,0.35);
    transition: opacity .25s, transform .25s;
}

.back-to-top-btn.visible {
    display: flex;
    animation: bttFadeIn .25s ease;
}

.back-to-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(113,255,0,0.45);
}

@keyframes bttFadeIn {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   SERVICES ICON GRID (home page)
============================================================ */

.services-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    padding: 4px 18px 16px;
}

.svc-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 16px 8px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    text-decoration: none;
    transition: transform .2s, border-color .2s, background .2s;
    cursor: pointer;
}
.svc-icon-card:hover {
    transform: translateY(-3px);
    background: rgba(113,255,0,0.07);
    border-color: rgba(113,255,0,0.2);
}
.svc-icon-card span { font-size: 30px; line-height: 1; }
.svc-icon-card p    { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.65); text-align: center; }
.svc-more span      { font-size: 22px !important; color: rgba(255,255,255,0.3); }
.svc-more p         { color: rgba(255,255,255,0.35) !important; }

/* ── Featured Cleaning & Laundry card ── */
.svc-featured {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(113,255,0,0.07), rgba(0,170,255,0.04)) !important;
    border-color: rgba(113,255,0,0.22) !important;
    justify-content: flex-start;
    text-align: left;
}
.svc-featured:hover {
    background: linear-gradient(135deg, rgba(113,255,0,0.12), rgba(0,170,255,0.07)) !important;
    border-color: rgba(113,255,0,0.4) !important;
}
.svc-featured span { font-size: 38px !important; flex-shrink: 0; }
.svc-feat-title { font-size: 13px !important; font-weight: 900 !important; color: #71ff00 !important; text-align: left; margin-bottom: 2px; }
.svc-feat-sub   { font-size: 10px !important; font-weight: 600 !important; color: rgba(255,255,255,0.45) !important; text-align: left; }

/* ============================================================
   QUICK LINKS STRIP (home page)
============================================================ */
.qlinks-section { padding: 0 18px 12px; }
.qlinks-label {
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 10px; padding: 0 2px;
}
.qlinks-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.qlink {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 10px; border: 1px solid transparent;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform .15s, filter .15s; white-space: nowrap;
}
.qlink:hover { transform: translateY(-2px); filter: brightness(1.15); }
.qlink span:first-child { font-size: 15px; }
.qlink-lime   { background: rgba(113,255,0,0.06);   border-color: rgba(113,255,0,0.16);   color: #71ff00; }
.qlink-green  { background: rgba(0,200,120,0.06);   border-color: rgba(0,200,120,0.16);   color: #00c878; }
.qlink-blue   { background: rgba(0,170,255,0.06);   border-color: rgba(0,170,255,0.16);   color: #00aaff; }
.qlink-purple { background: rgba(124,58,237,0.06);  border-color: rgba(124,58,237,0.18);  color: #a78bfa; }
.qlink-violet { background: rgba(168,85,247,0.06);  border-color: rgba(168,85,247,0.16);  color: #c084fc; }
.qlink-amber  { background: rgba(245,158,11,0.06);  border-color: rgba(245,158,11,0.16);  color: #f59e0b; }
.qlink-orange { background: rgba(249,115,22,0.06);  border-color: rgba(249,115,22,0.16);  color: #fb923c; }
.qlink-red    { background: rgba(239,68,68,0.06);   border-color: rgba(239,68,68,0.16);   color: #ef4444; }

/* ============================================================
   B2B STRIP (home page)
============================================================ */

.b2b-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 4px 28px 16px;
}

.b2b-strip-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    text-decoration: none;
    transition: transform .2s, border-color .2s;
    cursor: pointer;
}
.b2b-strip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,170,255,0.25);
    background: rgba(0,170,255,0.05);
}
.b2b-icon       { font-size: 26px; flex-shrink: 0; }
.b2b-info       { flex: 1; }
.b2b-info strong{ display: block; font-size: 13px; font-weight: 800; color: white; margin-bottom: 3px; }
.b2b-info p     { font-size: 11px; color: rgba(255,255,255,0.4); }
.b2b-arrow      { font-size: 16px; color: rgba(255,255,255,0.25); flex-shrink: 0; }
.b2b-loyalty    { border-color: rgba(255,193,7,0.15); }
.b2b-loyalty:hover { border-color: rgba(255,193,7,0.3); background: rgba(255,193,7,0.05); }

/* ============================================================
   CATEGORY CARDS — new types
============================================================ */

.cat-services { background: linear-gradient(135deg, rgba(113,255,0,0.08), rgba(0,255,128,0.05)); }
.cat-digital  { background: linear-gradient(135deg, rgba(0,170,255,0.08), rgba(80,0,255,0.05)); }
.cat-b2b      { background: linear-gradient(135deg, rgba(255,152,0,0.08), rgba(255,200,0,0.05)); }

/* ============================================================
   DIGITAL PRODUCT BADGE
============================================================ */

.badge-digital {
    background: linear-gradient(135deg, rgba(0,170,255,0.2), rgba(80,0,255,0.15));
    border: 1px solid rgba(0,170,255,0.35);
    color: #00aaff;
}

/* ============================================================
   PREMIUM FOOTER */

.footer {
    position: relative;

    background:
    linear-gradient(
    135deg,
    #07120a 0%,
    #0b0b0b 35%,
    #121212 70%,
    #1a1205 100%
    );

    color: white;
    padding: 55px 7% 20px;
    overflow: hidden;

    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* DARK MARKET BACKGROUND */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,0.82),
        rgba(0,0,0,0.9)),
        url('assets/sokoni footer.png');
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    z-index: 0;
}

/* GREEN + ORANGE GLOW */
.footer::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 500px;
    background: radial-gradient(circle,
    rgba(94,255,0,0.12),
    transparent 70%);
    top: -200px;
    right: -150px;
    z-index: 0;
}

.footer-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 35px;
    align-items: start;
}

.footer-brand {
    max-width: 280px;
}

.footer-logo {
    width: 180px;
    margin-bottom: 15px;
    background: none;
}

.footer-brand p {
    color: #d4d4d4;
    line-height: 1.7;
    font-size: 14px;
}

/* SOCIALS */
.socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.socials a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.socials a:hover {
    background: #71ff00;
    color: black;
    border-color: #71ff00;
}

/* LINKS */
.footer-links h3 {
    color: #71ff00;
    margin-bottom: 18px;
    font-size: 17px;
    position: relative;
}

.footer-links h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 40px;
    height: 2px;
    background: #ff9800;
}

.footer-links a {
    display: block;
    color: #d4d4d4;
    margin-bottom: 12px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #71ff00;
    transform: translateX(5px);
}

/* BOTTOM */
.footer-bottom {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: #cfcfcf;
    font-size: 14px;
}

/* PAYMENTS */
.payments {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.payments img {
    height: 34px;
    width: auto;
    object-fit: contain;

    background: rgba(255,255,255,0.06);
    padding: 6px 10px;

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);

    transition: 0.3s ease;
}

.payments img:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.12);
}

/* MOBILE */
@media(max-width: 950px) {

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media(max-width: 600px) {

    .footer {
        padding: 45px 6% 20px;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-logo {
        width: 150px;
    }
}

/* =========================
   PREMIUM HEADER / NAVBAR
========================= */

.navbar{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 10px 5%;

    overflow: hidden;

    min-height: 60px;

    background:
    linear-gradient(
    135deg,
    #07120a 0%,
    #0b0b0b 35%,
    #121212 70%,
    #1a1205 100%
    );

    border-bottom: 1px solid rgba(255,255,255,0.06);

}

/* HEADER BACKGROUND */

.navbar::before{

    content: "";

    pointer-events:none;

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
    rgba(0,0,0,0.88),
    rgba(0,0,0,0.93)
    ),
    url("assets/sokoni footer.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.95;

    z-index: 0;

}

/* SOFT GREEN GLOW */

.navbar::after{

    content: "";

    pointer-events:none;

    position: absolute;

    width: 450px;

    height: 450px;

    background:
    radial-gradient(circle,
    rgba(94,255,0,0.04),
    transparent 70%);

    top: -180px;

    left: -120px;

    z-index: 0;

}

/* KEEP CONTENT ABOVE BACKGROUND */

.navbar *{

    position: relative;

    z-index: 2;

}

/* SEARCH BAR */

.search-bar{

    flex: 1;

    max-width: 700px;

}

/* SEARCH INPUT */

.search-bar input{

    width: 100%;

    padding: 18px 22px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 40px;

    background: rgba(255,255,255,0.06);

    color: white;

    font-size: 16px;

    outline: none;

}

/* PLACEHOLDER */

.search-bar input::placeholder{

    color: rgba(255,255,255,0.6);

}

/* CART BUTTON */

.cart-btn{

    background: linear-gradient(
    135deg,
    #ff9800,
    #ffb300
    );

    color: white;

    border: none;

    padding: 13px 22px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;

}

.cart-btn:hover{

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(255,152,0,0.25);

}
/* PRODUCT DETAILS */

.product-details{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    padding:60px;

    color:white;

}



.product-image img{

    width:100%;

    border-radius:25px;

}



.product-info h1{

    font-size:45px;

    margin-bottom:20px;

}



.product-info h2{

    color:#71ff00;

    margin-bottom:25px;

}



.product-info p{

    color:#ccc;

    line-height:1.8;

    margin-bottom:30px;

}



.buy-btn{

    background:#71ff00;

    color:black;

    border:none;

    padding:16px 28px;

    border-radius:14px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

/* BUTTON PULSE */

@keyframes pulseBtn{

    0%{

        box-shadow:

        0 0 0 rgba(113,255,0,0.4);

    }



    50%{

        box-shadow:

        0 0 12px rgba(113,255,0,0.28);

    }



    100%{

        box-shadow:

        0 0 0 rgba(113,255,0,0.4);

    }

}

/* AUTH PAGES */

.auth-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(

        rgba(0,0,0,0.82),

        rgba(0,0,0,0.82)

    ),

    url("assets/sokoni footer.png");

    background-size:cover;

    background-position:center;

}



.auth-box{

    width:400px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    padding:40px;

    border-radius:25px;

    text-align:center;

    color:white;

}



.auth-logo{

    width:180px;

    margin-bottom:20px;

}



.auth-box h2{

    margin-bottom:10px;

}



.auth-box p{

    color:#ccc;

    margin-bottom:25px;

}



.auth-box input{

    width:100%;

    padding:15px;

    margin-bottom:18px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,0.08);

    color:white;

    outline:none;

}

.auth-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}



.switch-auth{

    margin-top:20px;

}



.switch-auth a{

    color:#71ff00;

    text-decoration:none;

}

/* NAV ACTIONS */

.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

}



/* LOGIN BUTTON */

.login-btn{

    background:#71ff00;

    color:black;

    border:none;

    padding:12px 18px;

    border-radius:12px;

    font-weight:bold;

    cursor:pointer;

}

/* PROFILE BOX */

.profile-box{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

}



/* LOGOUT BUTTON */

.profile-box button{

    background:red;

    color:white;

    border:none;

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

}

/* PRODUCT ACTIONS */

.product-actions{

    display:flex;

    gap:10px;

    padding:15px;

}



/* BUY BUTTON */

.product-actions button:first-child{

    flex:1;

}



/* WISHLIST */

.wishlist-btn{

    width:55px;

    border:none;

    border-radius:12px;

    background:#111;

    color:#ff4d6d;

    font-size:20px;

    cursor:pointer;

}

/* NAVBAR WISHLIST BUTTON */

.wishlist-nav-btn{

    background:#111;

    color:#ff4d6d;

    border:1px solid rgba(255,255,255,0.08);

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* PRODUCT PAGE */

.product-page{

    padding:60px 8%;

    min-height:100vh;

    background:#0d0d0d;

    color:white;

}



.product-view{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



.product-view img{

    width:100%;

    border-radius:24px;

}



.product-info h1{

    font-size:45px;

    margin-bottom:20px;

}



.product-info h2{

    color:#71ff00;

    margin-bottom:20px;

}



.product-info p{

    color:#ccc;

    line-height:1.8;

    margin-bottom:25px;

}



.product-info button{

    background:#71ff00;

    color:black;

    border:none;

    padding:16px 30px;

    border-radius:14px;

    font-weight:bold;

    cursor:pointer;

}

/* CHECKOUT PAGE */

.checkout-page{

    min-height:100vh;

    padding:60px 8%;

    background:#0d0d0d;

    color:white;

}



.checkout-container{

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:40px;

}



.checkout-form{

    background:#161616;

    padding:35px;

    border-radius:24px;

}



.checkout-form h2{

    margin-bottom:25px;

}



.checkout-form input,

.checkout-form textarea{

    width:100%;

    padding:16px;

    margin-bottom:18px;

    border:none;

    border-radius:14px;

    background:#222;

    color:white;

}



.checkout-form textarea{

    height:120px;

    resize:none;

}



.payment-options{

    display:flex;

    gap:15px;

    margin:20px 0;

}



.payment-options button{

    flex:1;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#222;

    color:white;

    cursor:pointer;

}



.place-order-btn{

    width:100%;

    background:#71ff00;

    color:black;

    border:none;

    padding:18px;

    border-radius:14px;

    font-weight:bold;

    cursor:pointer;

    font-size:16px;

}



/* ORDER SUMMARY */

.order-summary{

    background:#161616;

    padding:35px;

    border-radius:24px;

}



.checkout-item{

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:20px;

}



.checkout-item img{

    width:70px;

    height:70px;

    object-fit:cover;

    border-radius:12px;

}

/* NOTIFICATIONS */

#notificationContainer{

    position:fixed;

    top:25px;

    right:25px;

    z-index:9999;

    display:flex;

    flex-direction:column;

    gap:15px;

}



/* NOTIFICATION */

.notification{

    min-width:300px;

    padding:18px 22px;

    border-radius:16px;

    color:white;

    font-weight:600;

    animation:slideIn 0.4s ease;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.25);

}



/* SUCCESS */

.notification.success{

    background:#1DBF73;

}



/* ERROR */

.notification.error{

    background:#ff4d6d;

}



/* ANIMATION */

@keyframes slideIn{

    from{

        opacity:0;

        transform:translateX(100px);

    }



    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* PRODUCT ACTIONS */

.product-actions{

    display:flex;

    gap:12px;

    padding:15px;

}



.buy-half-btn,

.wishlist-half-btn{

    flex:1;

    border:none;

    padding:14px;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s ease;

}



/* BUY */

.buy-half-btn{

    background:#71ff00;

    color:black;

}



/* WISHLIST */

.wishlist-half-btn{

    background:#1b1b1b;

    color:#ff4d6d;

    border:1px solid rgba(255,255,255,0.08);

}



/* HOVER */

.buy-half-btn:hover,

.wishlist-half-btn:hover{

    transform:translateY(-2px);

}

/* WISHLIST PAGE */

.wishlist-page{

    padding:40px 7%;

    min-height:100vh;

    background:#0f0f0f;

    color:white;

}



.wishlist-page h1{

    margin-bottom:30px;

}



/* GRID */

.wishlist-container{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}



/* CARD */

.wishlist-card{

    background:#161616;

    border-radius:18px;

    overflow:hidden;

    padding:20px;

    border:1px solid rgba(255,255,255,0.06);

    transition:0.3s;

}



.wishlist-card:hover{

    transform:translateY(-5px);

}



.wishlist-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:12px;

}



.wishlist-card h3{

    margin-top:15px;

}



.wishlist-card p{

    color:#71ff00;

    margin:10px 0;

}



/* ACTIONS */

.wishlist-actions{

    display:flex;

    gap:12px;

}



.wishlist-actions button{

    flex:1;

    padding:12px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

}



/* ADD */

.wishlist-actions button:first-child{

    background:#71ff00;

    color:black;

}



/* REMOVE */

.remove-btn{

    background:#ff3b3b;

    color:white;

}



/* EMPTY */

.empty-state{

    text-align:center;

    padding:100px 0;

}
/* PRODUCT BUTTONS */

.product-buttons{

    display:flex;

    gap:7px;

    padding:8px 12px 12px;

    align-items:center;

}



/* ALL BUTTONS */

.product-btn{

    border:none;

    padding:11px 8px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:0.2s ease;

}



/* VIEW */

.view-btn{

    background:#232323;

    color:white;

    flex:1;

}



/* CART */

.add-cart-btn{

    background:#71ff00;

    color:black;

    flex:1;

}



/* WISHLIST */

.wishlist-btn{

    width:38px;

    height:38px;

    flex-shrink:0;

    padding:0;

    font-size:17px;

    background:#1e1212;

    color:#ff4d6d;

    border:1px solid rgba(255,77,109,0.2);

    display:flex;

    align-items:center;

    justify-content:center;

}



/* BUY */

.buy-btn{

    background:#ff9800;

    color:white;

    flex:1;

}



/* HOVER */

.product-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:

    0 4px 12px rgba(0,0,0,0.2);

}



/* CLICK EFFECT */

.product-btn:active{

    transform:scale(0.96);

}

.main-logo{

    width:240px;

    height:auto;

    object-fit:contain;

    background:none;

    display:block;

}

/* SHOP LAYOUT */

.shop-layout{

    display:grid;

    grid-template-columns:

    240px 1fr 260px;

    gap:30px;

    align-items:start;

    padding:40px;

}


/* PRODUCTS SIDE */

.products-side{

    width:100%;

}



/* CART SIDE */

.cart-side{

    position:sticky;

    top:110px;

}



/* CART */

.cart-section{

    background:#161616;

    border-radius:24px;

    padding:25px;

    color:white;

    border:1px solid rgba(255,255,255,0.06);

}



/* CART ITEMS */

.cart-section li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,0.08);

}



/* REMOVE BUTTON */

.cart-section li button{

    background:#ff4d4d;

    color:white;

    border:none;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;

}



/* MOBILE */

@media(max-width:950px){

    .shop-layout{

        grid-template-columns:1fr;

    }



    .cart-side{

        position:relative;

        top:0;

    }

}

/* PRODUCT MODAL */

.product-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}



/* MODAL CONTENT */

.modal-content{

    width:100%;

    max-width:950px;

    background:#151515;

    border-radius:28px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    position:relative;

    border:1px solid rgba(255,255,255,0.08);

}



/* IMAGE */

.modal-left{

    background:#0f0f0f;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}



.modal-left img{

    width:100%;

    max-width:400px;

    border-radius:24px;

}



/* RIGHT */

.modal-right{

    padding:40px;

    color:white;

}



.modal-right h2{

    font-size:42px;

    margin-bottom:15px;

}



.modal-price{

    color:#71ff00;

    font-size:28px;

    font-weight:bold;

    margin-bottom:20px;

}



.modal-description{

    color:#cfcfcf;

    line-height:1.7;

}



/* BUTTONS */

.modal-buttons{

    display:flex;

    gap:12px;

    margin-top:30px;

}



.modal-buttons button{

    flex:1;

    padding:16px;

    border:none;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

}



.modal-cart-btn{

    background:#71ff00;

    color:black;

}



.modal-buy-btn{

    background:#ff9800;

    color:white;

}



.modal-buttons button:hover{

    transform:translateY(-3px);

}



/* CLOSE */

.close-modal{

    position:absolute;

    top:20px;

    right:25px;

    font-size:38px;

    color:white;

    cursor:pointer;

}



/* MOBILE */

@media(max-width:850px){

    .modal-content{

        grid-template-columns:1fr;

    }



    .modal-right{

        padding:25px;

    }



    .modal-right h2{

        font-size:30px;

    }

}

/* PREMIUM PRODUCT PAGE */

.premium-product-view{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



/* IMAGE */

.premium-product-gallery{

    background:#151515;

    border-radius:30px;

    padding:30px;

    border:1px solid rgba(255,255,255,0.06);

}



.main-product-image{

    width:100%;

    border-radius:24px;

    transition:transform 0.4s ease;

    cursor:zoom-in;

}



/* HOVER ZOOM */

.main-product-image:hover{

    transform:scale(1.15);

}



/* PREMIUM FLOATING ZOOM */

@keyframes floatingZoom{

    0%{

        transform:scale(1);

    }



    25%{

        transform:scale(1.03);

    }



    50%{

        transform:scale(1.07);

    }



    75%{

        transform:scale(1.03);

    }



    100%{

        transform:scale(1);

    }

}

/* PREMIUM ZOOM */

.main-product-image:hover{

    transform:scale(1.08);

}

.main-product-image:hover{

    transform:scale(1.03);

}



/* INFO */

.premium-product-info h1{

    font-size:52px;

    margin:12px 0;

}



.premium-product-info h2{

    color:#71ff00;

    font-size:34px;

    margin-bottom:25px;

}



.product-tag{

    color:#ff9800;

    font-weight:600;

}



.premium-description{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:30px;

}



/* OPTIONS */

.product-option{

    margin-bottom:28px;

}



.product-option h3{

    margin-bottom:14px;

}



/* SIZES */

.sizes{

    display:flex;

    gap:12px;

}



.sizes button{

    width:55px;

    height:55px;

    border:none;

    border-radius:14px;

    background:#1a1a1a;

    color:white;

    cursor:pointer;

    transition:0.3s;

}



.sizes button:hover{

    background:#71ff00;

    color:black;

}



/* QUANTITY */

.quantity-box{

    display:flex;

    align-items:center;

    gap:18px;

}



.quantity-box button{

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#1a1a1a;

    color:white;

    font-size:22px;

    cursor:pointer;

}



.quantity-box span{

    font-size:22px;

    font-weight:bold;

}



/* ACTIONS */

.premium-product-actions{

    display:flex;

    gap:14px;

    margin-top:35px;

}



.premium-product-actions button{

    flex:1;

    padding:18px;

    border:none;

    border-radius:16px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s ease;

}



/* CART */

.premium-cart-btn{

    background:#71ff00;

    color:black;

}



/* BUY */

.premium-buy-btn{

    background:#ff9800;

    color:white;

}



/* HOVER */

.premium-product-actions button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 12px 25px rgba(0,0,0,0.22);

}



/* FEATURES */

.product-features{

    margin-top:35px;

    display:grid;

    gap:12px;

    color:#d4d4d4;

}



/* MOBILE */

@media(max-width:900px){

    .premium-product-view{

        grid-template-columns:1fr;

    }



    .premium-product-info h1{

        font-size:38px;

    }

}

/* RELATED PRODUCTS */

.related-section{

    margin-top:90px;

}



.related-section h2{

    font-size:34px;

    margin-bottom:30px;

}



/* GRID */

.related-products{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}



/* CARD */

.related-card{

    background:#151515;

    border-radius:24px;

    overflow:hidden;

    padding:20px;

    transition:0.3s ease;

    border:1px solid rgba(255,255,255,0.06);

    cursor:pointer;

}



/* HOVER */

.related-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 18px 35px rgba(0,0,0,0.25);

}



/* IMAGE */

.related-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:18px;

}



/* TITLE */

.related-card h3{

    margin-top:18px;

}



/* PRICE */

.related-card p{

    color:#71ff00;

    margin-top:10px;

    font-weight:bold;

}

/* REVIEWS */

.reviews-section{

    margin-top:90px;

}



.reviews-section h2{

    font-size:34px;

    margin-bottom:30px;

    color:white;

}



/* REVIEW CARD */

.review-card{

    background:#151515;

    border-radius:24px;

    padding:25px;

    margin-bottom:20px;

    border:1px solid rgba(255,255,255,0.06);

}



/* STARS */

.review-top{

    color:#ffb400;

    font-size:22px;

    margin-bottom:16px;

}



/* REVIEW TEXT */

.review-card p{

    color:#d4d4d4;

    line-height:1.7;

}



/* NAME */

.review-card span{

    display:block;

    margin-top:18px;

    color:#71ff00;

    font-weight:bold;

}

/* THUMBNAILS */

.thumbnail-gallery{

    display:flex;

    gap:14px;

    margin-top:22px;

    flex-wrap:wrap;

}



/* THUMB IMAGE */

.thumb-img{

    width:85px;

    height:85px;

    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:0.3s ease;

    border:2px solid transparent;

}



/* HOVER */

.thumb-img:hover{

    transform:scale(1.08);

    border-color:#71ff00;

}

/* CART PAGE */

.cart-page{

    padding:40px;

    color:white;

}



/* CART TITLE */

.cart-page h1{

    font-size:42px;

    margin-bottom:40px;

}



/* CART CARD */

.cart-card{

    display:flex;

    align-items:center;

    gap:24px;

    background:#151515;

    padding:22px;

    border-radius:24px;

    margin-bottom:24px;

    border:1px solid rgba(255,255,255,0.06);

}



/* IMAGE */

.cart-card img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:18px;

}



/* INFO */

.cart-info h2{

    margin-bottom:12px;

}



/* PRICE */

.cart-info p{

    color:#71ff00;

    font-size:20px;

    font-weight:bold;

}



/* REMOVE BUTTON */

.remove-btn{

    margin-top:16px;

    padding:10px 20px;

    border:none;

    border-radius:12px;

    background:#ff3d3d;

    color:white;

    cursor:pointer;

}



/* TOTAL */

.cart-total{

    margin-top:40px;

    background:#151515;

    padding:30px;

    border-radius:24px;

}



/* CHECKOUT BUTTON */

.checkout-btn{

    margin-top:20px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:16px;

    background:#71ff00;

    color:black;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

}



/* EMPTY */

.empty-cart{

    text-align:center;

    padding:100px 20px;

}

/* SUCCESS PAGE */

.success-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0b0b0b;

    padding:20px;

}



/* BOX */

.success-box{

    background:#151515;

    padding:60px;

    border-radius:32px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.06);

    max-width:600px;

    width:100%;

}



/* ICON */

.success-icon{

    font-size:90px;

    margin-bottom:25px;

}



/* TITLE */

.success-box h1{

    font-size:42px;

    margin-bottom:20px;

}



/* TEXT */

.success-box p{

    color:#cfcfcf;

    font-size:18px;

    margin-bottom:30px;

}



/* ORDER */

.order-number{

    background:#1d1d1d;

    padding:18px;

    border-radius:16px;

    margin-bottom:35px;

    color:#71ff00;

    font-weight:bold;

}



/* BUTTON */

.continue-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    background:#71ff00;

    color:black;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;

}



/* HOVER */

.continue-btn:hover{

    transform:translateY(-3px);

}
/* M-PESA MODAL */

.mpesa-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.7);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



/* BOX */

.mpesa-box{

    width:100%;

    max-width:420px;

    background:#151515;

    padding:40px;

    border-radius:28px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.08);

}



/* TITLE */

.mpesa-box h2{

    margin-bottom:14px;

}



/* TEXT */

.mpesa-box p{

    color:#cfcfcf;

    margin-bottom:24px;

}



/* INPUT */

.mpesa-box input{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:#1f1f1f;

    color:white;

    margin-bottom:24px;

}



/* BUTTON */

.mpesa-pay-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:16px;

    background:#71ff00;

    color:black;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;

}



/* HOVER */

.mpesa-pay-btn:hover{

    transform:translateY(-3px);

}

/* FILTER BAR */

.filter-bar{

    display:flex;

    gap:14px;

    padding:20px;

    flex-wrap:wrap;

}



/* FILTER BUTTONS */

.filter-bar button{

    padding:12px 22px;

    border:none;

    border-radius:14px;

    background:#161616;

    color:white;

    cursor:pointer;

    transition:0.3s ease;

    border:1px solid rgba(255,255,255,0.06);

}



/* HOVER */

.filter-bar button:hover{

    background:#71ff00;

    color:black;

    transform:translateY(-2px);

}

/* WISHLIST PAGE */

.wishlist-page{

    padding:40px;

    color:white;

}



/* TITLE */

.wishlist-page h1{

    font-size:42px;

    margin-bottom:40px;

}



/* GRID */

.wishlist-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}



/* CARD */

.wishlist-card{

    background:#151515;

    border-radius:24px;

    padding:20px;

    border:1px solid rgba(255,255,255,0.06);

}



/* IMAGE */

.wishlist-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;

}



/* TITLE */

.wishlist-card h2{

    margin-top:18px;

}



/* PRICE */

.wishlist-card p{

    color:#71ff00;

    margin-top:10px;

    font-weight:bold;

}



/* BUTTONS */

.wishlist-buttons{

    display:flex;

    gap:12px;

    margin-top:18px;

}



/* ADD TO CART */

.wishlist-cart-btn{

    flex:1;

    padding:12px;

    border:none;

    border-radius:14px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}



/* REMOVE */

.wishlist-remove-btn{

    flex:1;

    padding:12px;

    border:none;

    border-radius:14px;

    background:#ff3d3d;

    color:white;

    cursor:pointer;

}

/* AUTH PAGE */

.auth-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}



/* BOX */

.auth-box{

    width:100%;

    max-width:420px;

    background:#151515;

    padding:40px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,0.06);

}



/* TITLE */

.auth-box h1{

    margin-bottom:30px;

}



/* INPUTS */

.auth-box input{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:#1f1f1f;

    color:white;

    margin-bottom:20px;

}



/* BUTTON */

.auth-box button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:16px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

    margin-bottom:20px;

}

/* PROFILE PAGE */

.profile-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}



/* CARD */

.profile-card{

    width:100%;

    max-width:520px;

    background:#151515;

    padding:50px;

    border-radius:32px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.06);

}



/* AVATAR */

.profile-avatar{

    width:120px;

    height:120px;

    background:#71ff00;

    color:black;

    font-size:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin:auto;

    margin-bottom:30px;

}



/* NAME */

.profile-card h1{

    margin-bottom:10px;

}



/* EMAIL */

.profile-card p{

    color:#cfcfcf;

    margin-bottom:30px;

}



/* ACTIONS */

.profile-actions{

    display:grid;

    gap:16px;

    margin-bottom:30px;

}



/* BUTTONS */

.profile-actions button,

.profile-logout{

    width:100%;

    padding:16px;

    border:none;

    border-radius:16px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}



/* LOGOUT */

.profile-logout{

    background:#ff3d3d;

    color:white;

}

/* SELLER STATS */

.seller-stats{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:50px;

}



/* CARD */

.seller-stat-card{

    background:#151515;

    padding:30px;

    border-radius:24px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.06);

}



/* NUMBER */

.seller-stat-card h3{

    font-size:42px;

    color:#71ff00;

    margin-bottom:10px;

}



/* TEXT */

.seller-stat-card p{

    color:#cfcfcf;

}

/* PREMIUM PRODUCT MODAL */

.premium-product-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.82);

    backdrop-filter:blur(14px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    padding:20px;

}



/* BOX */

.premium-modal-box{

    width:100%;

    max-width:1200px;

    background:#111111;

    border-radius:34px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    border:1px solid rgba(255,255,255,0.06);

    position:relative;

}



/* CLOSE */

.close-modal{

    position:absolute;

    top:22px;

    right:30px;

    font-size:38px;

    color:white;

    cursor:pointer;

    z-index:10;

}



/* LEFT */

.premium-modal-left{

    padding:35px;

    background:#0f0f0f;

}



/* IMAGE WRAPPER */

.modal-image-wrapper{

    width:100%;

    height:520px;

    border-radius:28px;

    overflow:hidden;

    background:#191919;

}



/* MAIN IMAGE */

.premium-modal-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s ease;

}



/* HOVER */

.premium-modal-image:hover{

    transform:scale(1.08);

}



/* THUMBNAILS */

.modal-thumbnails{

    display:flex;

    gap:14px;

    margin-top:22px;

}



/* THUMB */

.modal-thumb{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    border:2px solid transparent;

    transition:0.3s ease;

}



/* HOVER */

.modal-thumb:hover{

    border-color:#71ff00;

    transform:scale(1.05);

}



/* RIGHT */

.premium-modal-right{

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



/* BADGE */

.modal-badge{

    color:#71ff00;

    font-weight:bold;

    margin-bottom:18px;

}



/* TITLE */

.premium-modal-right h1{

    font-size:48px;

    margin-bottom:20px;

}



/* PRICE */

.premium-modal-price{

    font-size:34px;

    color:#71ff00;

    font-weight:bold;

    margin-bottom:22px;

}



/* RATING */

.modal-rating{

    margin-bottom:25px;

    color:#ffd700;

}



/* DESCRIPTION */

.premium-modal-description{

    color:#d0d0d0;

    line-height:1.8;

    margin-bottom:30px;

}



/* FEATURES */

.modal-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-bottom:35px;

    color:#d6d6d6;

}



/* BUTTONS */

.premium-modal-buttons{

    display:flex;

    gap:18px;

}



/* CART BUTTON */

.modal-cart-btn{

    flex:1;

    padding:18px;

    border:none;

    border-radius:18px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;

}



/* BUY BUTTON */

.modal-buy-btn{

    flex:1;

    padding:18px;

    border:none;

    border-radius:18px;

    background:white;

    color:black;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;

}



/* HOVER */

.modal-cart-btn:hover,

.modal-buy-btn:hover{

    transform:translateY(-3px);

}



/* MOBILE */

@media(max-width:900px){

    .premium-modal-box{

        grid-template-columns:1fr;

    }



    .modal-image-wrapper{

        height:380px;

    }



    .premium-modal-right h1{

        font-size:34px;

    }

}

/* RECOMMENDED */

.recommended-section{
    margin-top:90px;
    padding:40px;

}



/* GRID */

.recommended-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

}



/* CARD */

.recommended-card{

    background:rgba(255,255,255,0.04);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:26px;

    padding:20px;

    transition:0.35s ease;

    overflow:hidden;

}



/* HOVER */

.recommended-card:hover{

    transform:

    translateY(-8px)

    scale(1.02);

}



/* IMAGE */

.recommended-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:18px;

}



/* TITLE */

.recommended-card h3{

    margin-top:18px;

}



/* PRICE */

.recommended-card p{

    color:#71ff00;

    margin:12px 0;

    font-weight:bold;

}



/* BUTTON */

.recommended-card button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}

/* CHAT TOGGLE */

.chat-toggle{

    position:fixed;

    bottom:30px;

    right:30px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#71ff00;

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    cursor:pointer;

    z-index:99999;

    box-shadow:

    0 0 30px rgba(113,255,0,0.45);

}



/* CHAT BOX */

.chat-box{

    position:fixed;

    bottom:120px;

    right:30px;

    width:360px;

    height:520px;

    background:#111111;

    border-radius:28px;

    overflow:hidden;

    display:none;

    flex-direction:column;

    z-index:99999;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:

    0 10px 50px rgba(0,0,0,0.5);

}



/* HEADER */

.chat-header{

    padding:20px;

    background:#71ff00;

    color:black;

    font-weight:bold;

}



/* MESSAGES */

.chat-messages{

    flex:1;

    padding:20px;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:14px;

}



/* BOT */

.bot-message{

    background:#1e1e1e;

    padding:14px;

    border-radius:16px;

    max-width:80%;

}



/* USER */

.user-message{

    background:#71ff00;

    color:black;

    padding:14px;

    border-radius:16px;

    align-self:flex-end;

    max-width:80%;

}



/* INPUT AREA */

.chat-input-area{

    display:flex;

    padding:16px;

    gap:12px;

    border-top:

    1px solid rgba(255,255,255,0.08);

}



/* INPUT */

.chat-input-area input{

    flex:1;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#1f1f1f;

    color:white;

}



/* BUTTON */

.chat-input-area button{

    padding:14px 18px;

    border:none;

    border-radius:14px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}

/* SPLASH SCREEN */

.splash-screen{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#0b0b0b;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

/* HIDE SPLASH */

.splash-hidden{

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/* CONTENT */

.splash-content{

    text-align: center;

    color: white;

}

/* LOGO */

.splash-logo{

    width: 220px;

    margin-bottom: 25px;

    animation: pulseLogo 2s infinite;

}

/* LOADER */

.loader-ring{

    width: 60px;

    height: 60px;

    border: 4px solid rgba(255,255,255,0.1);

    border-top: 4px solid #71ff00;

    border-radius: 50%;

    margin: auto;

    animation: spin 1s linear infinite;

}

/* ANIMATIONS */

@keyframes spin{

    100%{

        transform: rotate(360deg);

    }

}

@keyframes pulseLogo{

    0%{

        transform: scale(1);

    }

    50%{

        transform: scale(1.025);

    }

    100%{

        transform: scale(1);

    }

}

/* SKELETON LOADER */

.skeleton-card{

    height:380px;

    border-radius:28px;

    background:

    linear-gradient(

        90deg,

        rgba(255,255,255,0.04) 25%,

        rgba(255,255,255,0.08) 50%,

        rgba(255,255,255,0.04) 75%

    );



    background-size:400% 100%;

    animation:skeletonLoad 1.4s ease infinite;

}



/* GRID */

#productsContainer{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}



/* ANIMATION */

@keyframes skeletonLoad{

    0%{

        background-position:100% 0;

    }



    100%{

        background-position:-100% 0;

    }

}

/* HERO SLIDER */

.hero-slider{

    position:relative;

    width:100%;

    height:88vh;

    overflow:hidden;

}



/* SLIDE */

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:1s ease;

}



/* ACTIVE */

.active-slide{

    opacity:1;

    z-index:2;

}



/* IMAGE */

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* OVERLAY */

.slide-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to right,

        rgba(0,0,0,0.75),

        rgba(0,0,0,0.25)

    );

}



/* CONTENT */

.slide-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    z-index:5;

    max-width:600px;

}



/* TITLE */

.slide-content h1{

    font-size:72px;

    margin-bottom:20px;

    line-height:1.1;

}



/* TEXT */

.slide-content p{

    font-size:22px;

    color:#d0d0d0;

    margin-bottom:28px;

}



/* BUTTON */

.slide-content button{

    padding:18px 34px;

    border:none;

    border-radius:18px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

    font-size:18px;

}



/* MOBILE */

@media(max-width:768px){

    .slide-content h1{

        font-size:42px;

    }



    .slide-content p{

        font-size:18px;

    }

}

/* LIVE POPUP */

.live-popup{

    position:fixed;

    bottom:30px;

    left:30px;

    background:#111111;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:22px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:16px;

    z-index:99999;

    min-width:320px;

    opacity:0;

    transform:translateY(120px);

    transition:0.6s ease;

    box-shadow:

    0 10px 40px rgba(0,0,0,0.45);

}



/* SHOW */

.show-live-popup{

    opacity:1;

    transform:translateY(0);

}



/* IMAGE */

.live-popup img{

    width:65px;

    height:65px;

    border-radius:16px;

    object-fit:cover;

}



/* TEXT */

.live-popup-text h4{

    margin-bottom:6px;

    font-size:16px;

}



/* SMALL */

.live-popup-text p{

    color:#a0a0a0;

    font-size:14px;

}

/* PRODUCT TOP */

.product-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}



/* HOT BADGE */

.hot-badge{

    background:#ff3d3d;

    color:white;

    padding:8px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:bold;

    box-shadow:

    0 0 18px rgba(255,61,61,0.45);

}



/* VIEW COUNTER */

.view-counter{

    color:#a0a0a0;

    margin-top:8px;

    margin-bottom:10px;

    font-size:14px;

}

/* QUICK VIEW MODAL */

.quick-view-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}



/* BOX */

.quick-view-box{

    width:420px;

    background:#111111;

    border-radius:30px;

    padding:30px;

    position:relative;

    text-align:center;

    border:1px solid rgba(255,255,255,0.08);

    animation:quickViewPop 0.35s ease;

}



/* POP */

@keyframes quickViewPop{

    from{

        transform:scale(0.8);

        opacity:0;

    }



    to{

        transform:scale(1);

        opacity:1;

    }

}



/* CLOSE */

.close-quick-view{

    position:absolute;

    top:18px;

    right:22px;

    font-size:24px;

    cursor:pointer;

}



/* IMAGE */

.quick-view-box img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:22px;

    margin-bottom:24px;

}



/* TITLE */

.quick-view-box h2{

    margin-bottom:12px;

}



/* PRICE */

.quick-view-box p{

    color:#71ff00;

    font-size:22px;

    margin-bottom:24px;

}



/* BUTTON */

.quick-view-box button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:18px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}

/* HEART ANIMATION */

.wishlist-btn{

    position:relative;

    overflow:hidden;

}



/* ACTIVE */

.wishlist-active{

    animation:heartPop 0.5s ease;

}



/* POP */

@keyframes heartPop{

    0%{

        transform:scale(1);

    }



    30%{

        transform:scale(1.35);

    }



    60%{

        transform:scale(0.9);

    }



    100%{

        transform:scale(1);

    }

}

/* CATEGORY SIDEBAR */

.category-sidebar{

    width:240px;

    background:rgba(255,255,255,0.04);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:24px;

    height:fit-content;

    flex-shrink:0;

}



/* TITLE */

.category-sidebar h2{

    margin-bottom:22px;

}



/* BUTTONS */

.category-sidebar button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:16px;

    background:#1a1a1a;

    color:white;

    margin-bottom:14px;

    cursor:pointer;

    transition:0.3s ease;

    text-align:left;

}



/* HOVER */

.category-sidebar button:hover{

    background:#71ff00;

    color:black;

    transform:translateX(6px);

}

/* MOBILE */

@media(max-width:900px){

    .category-sidebar{

        position:relative;

        width:100%;

        top:0;

        left:0;

        margin-bottom:30px;

    }



    .products-section{

        margin-left:0;

    }

}

/* PRODUCTS SECTION */

.products-section{

    padding:20px;

}

/* CART SIDE */

.cart-side{

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:24px;

    height:fit-content;

}



/* CART ITEMS */

#cartItems{

    margin-top:20px;

}



/* ITEM */

.cart-item{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:15px;

}



/* TOTAL */

.cart-total{

    margin-top:20px;

    color:#71ff00;

}



/* CHECKOUT */

.checkout-btn{

    width:100%;

    margin-top:20px;

    padding:16px;

    border:none;

    border-radius:18px;

    background:#ff9800;

    color:white;

    font-weight:bold;

    cursor:pointer;

}

/* HOVER */

.product-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    box-shadow:

    0 20px 60px rgba(113,255,0,0.18);

}



/* IMAGE ZOOM */

.product-card:hover img{

    transform:scale(1.08);

}



/* IMAGE */

.product-card img{

    transition:0.5s ease;

}

/* PRODUCT BADGES */

.product-badges{

    position:absolute;

    top:16px;

    left:16px;

    display:flex;

    gap:10px;

    z-index:20;

}



/* BADGE */

.product-badges span{

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:bold;

    color:white;

}



/* NEW */

.badge-new{

    background:#00c853;

    box-shadow:

    0 0 18px rgba(0,200,83,0.45);

}



/* HOT */

.badge-hot{

    background:#ff3d3d;

    box-shadow:

    0 0 18px rgba(255,61,61,0.45);

}

/* FLYING IMAGE */

.flying-product{

    position:fixed;

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:18px;

    z-index:999999;

    pointer-events:none;

    transition:

    all 1s cubic-bezier(

        0.22,

        1,

        0.36,

        1

    );

}



/* CART SHAKE */

.cart-bounce{

    animation:cartBounce 0.5s ease;

}



@keyframes cartBounce{

    0%{

        transform:scale(1);

    }



    30%{

        transform:scale(1.18);

    }



    60%{

        transform:scale(0.92);

    }



    100%{

        transform:scale(1);

    }

}

/* SKELETON LOADER */

.skeleton-card{

    height:420px;

    border-radius:28px;

    background:linear-gradient(

        90deg,

        rgba(255,255,255,0.04) 25%,

        rgba(255,255,255,0.09) 50%,

        rgba(255,255,255,0.04) 75%

    );

    background-size:200% 100%;

    animation:skeletonLoading 1.4s infinite;

}



/* ANIMATION */

@keyframes skeletonLoading{

    0%{

        background-position:200% 0;

    }



    100%{

        background-position:-200% 0;

    }

}

/* THEME TOGGLE */

.theme-toggle{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#1a1a1a;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:0.3s ease;

}



/* HOVER */

.theme-toggle:hover{

    transform:scale(1.08);

}



/* LIGHT MODE */

.light-mode{

    background:#f5f5f5;

    color:#111111;

}



/* BODY */

.body.light-mode{
    background:#f5f5f5;
    color:#111;
}



/* NAVBAR */

.light-mode .navbar{

    background:white;

    border-bottom:1px solid #e5e5e5;

}



/* SEARCH */

.light-mode .search-bar input{

    background:#ffffff;

    color:#111111;

    border:1px solid #dcdcdc;

}



/* PRODUCT CARD */

.light-mode .product-card{

    background:white;

    border:1px solid #e5e5e5;

}



/* CATEGORY */

.light-mode .category-sidebar{

    background:white;

    border:1px solid #e5e5e5;

}



/* CART */

.light-mode .cart-side{

    background:white;

    border:1px solid #e5e5e5;

}



/* RECOMMENDED */

.light-mode .recommended-card{

    background:white;

    border:1px solid #e5e5e5;

}



/* BUTTONS */

.light-mode button{

    color:#111111;

}



/* TITLES */

.light-mode h1,

.light-mode h2,

.light-mode h3,

.light-mode p,

.light-mode span,

.light-mode a{

    color:#111111;

}

/* CLEAN PRODUCT GRID */

#productsContainer{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    width:100%;

    padding:20px;

}

/* CARD */

.product-card{

    background:#151515;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.08);

}

/* IMAGE */

.product-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

/* TITLE */

.product-card h3{

    padding:15px;

    color:white;

}

/* PRICE */

.price{

    padding:0 15px;

    color:#71ff00;

    font-weight:bold;

}

/* BUTTONS */

.product-buttons{

    display:flex;

    gap:10px;

    padding:15px;

}

/* BUTTON */

.product-btn{

    flex:1;

    border:none;

    padding:12px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

}

.add-cart-btn{

    background:#71ff00;

    color:black;

}

.buy-btn{

    background:#ff9800;

    color:white;

}

/* =========================
   PRODUCTS GRID FIX
========================= */

.products-grid,
#productsContainer{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));

    gap:20px;

    width:100%;

    padding:20px;

}

/* PRODUCT CARD */

.product-card{

    background:#111;

    border-radius:20px;

    overflow:hidden;

    padding:15px;

    display:flex;

    flex-direction:column;

    min-height:320px;

    box-shadow:
    0 0 20px rgba(0,0,0,0.4);

    transition:0.3s;
}

/* IMAGE */

.product-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:15px;

}

/* TITLE */

.product-card h3{

    color:white;

    margin-top:15px;

    font-size:18px;

    text-align:center;

}

/* PRICE */

.product-card .price{

    color:#71ff00;

    font-weight:bold;

    margin-top:8px;

}

/* BUTTONS */

.product-buttons{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.product-btn{

    border:none;

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

}

.add-cart-btn{

    background:#71ff00;

    color:black;

}

.buy-btn{

    background:orange;

    color:white;

}

.products-side{

    width:100%;

    display:block;

}

#productsContainer{

    min-height:500px;

    display:grid !important;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    width:100%;

    visibility:visible !important;

    opacity:1 !important;

}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:900px){

    /* SHOP LAYOUT */

    .shop-layout{

        grid-template-columns:1fr;

        padding:20px;

    }



    /* SIDEBAR */

    .category-sidebar{

        width:100%;

    }



    /* CART */

    .cart-side{

        width:100%;

    }



    /* HERO */

    .hero-slider{

        height:70vh;

    }



    .slide-content{

        left:20px;

        right:20px;

    }



    .slide-content h1{

        font-size:42px;

    }



    .slide-content p{

        font-size:17px;

    }



    /* NAVBAR */

    .navbar{

        flex-direction:column;

        gap:20px;

        padding:20px;

    }



    /* SEARCH */

    .search-bar{

        width:100%;

    }



    .search-bar input{

        width:100%;

    }



    /* ACTIONS */

    .nav-actions{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

    }



    /* PRODUCTS */

    .products-grid{

        grid-template-columns:1fr;

    }



    /* RECOMMENDED */

    .recommended-grid{

        grid-template-columns:1fr;

    }



    /* FOOTER */

    .footer-container{

        grid-template-columns:1fr;

        gap:40px;

    }



    /* MODAL */

    .quick-view-box{

        width:95%;

        padding:20px;

    }



    .quick-view-box img{

        height:240px;

    }

}

/* MOBILE MENU BUTTON */

.menu-toggle{

    display:none;

    position:fixed;

    top:24px;

    left:20px;

    z-index:9999999;

    font-size:32px;

    color:white;

    background:#111111;

    width:55px;

    height:55px;

    border-radius:16px;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}



/* MOBILE MENU */

.mobile-menu{

    position:fixed;

    top:0;

    left:-100%;

    width:280px;

    height:100vh;

    background:#111111;

    z-index:9999998;

    padding:120px 30px;

    transition:0.4s ease;

    display:flex;

    flex-direction:column;

    gap:24px;

}



/* ACTIVE */

.mobile-menu.active-menu{

    left:0;

}



/* LINKS */

.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:20px;

    font-weight:bold;

}



/* MOBILE ONLY */

@media(max-width:900px){

    .menu-toggle{

        display:flex;

    }

}

/* ACTIVE */

.mobile-menu.active-menu{

    left:0;

}



/* LINKS */

.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:18px;

}



/* MOBILE */

@media(max-width:900px){

    .menu-toggle{

        display:block;

    }

}

/* =========================
   MOBILE MENU
========================= */

.menu-toggle{

    display:none;

    position:fixed;

    top:20px;

    left:20px;

    width:55px;

    height:55px;

    background:#71ff00;

    color:black;

    border-radius:16px;

    z-index:9999999;

    justify-content:center;

    align-items:center;

    font-size:32px;

    cursor:pointer;

    font-weight:bold;

    box-shadow:
    0 10px 30px rgba(113,255,0,0.35);

}



/* MOBILE MENU */

.mobile-menu{

    position:fixed;

    top:0;

    left:-100%;

    width:280px;

    height:100vh;

    background:#111111;

    z-index:9999998;

    padding:120px 30px;

    display:flex;

    flex-direction:column;

    gap:24px;

    transition:0.4s ease;

}



/* ACTIVE */

.mobile-menu.active-menu{

    left:0;

}



/* LINKS */

.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:20px;

    font-weight:bold;

}



/* MOBILE */

@media(max-width:900px){

    .menu-toggle{

        display:flex;

    }

}

/* ACTIVE HEART */

.wishlist-active{

    background:#ff2d55 !important;

    color:white !important;

    transform:scale(1.06);

    box-shadow:
    0 0 20px rgba(255,45,85,0.45);

}

/* SEARCH */

.search-bar{

    position:relative;

}



/* SUGGESTIONS */

.search-suggestions{

    position:absolute;

    top:65px;

    left:0;

    width:100%;

    background:#111111;

    border-radius:20px;

    overflow:hidden;

    z-index:99999;

    display:none;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.4);

}



/* ITEM */

.search-item{

    padding:16px 20px;

    cursor:pointer;

    transition:0.3s ease;

    color:white;

}



/* HOVER */

.search-item:hover{

    background:#1f1f1f;

}

/* QUICK VIEW */

.quick-view-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

    padding:20px;

}



/* BOX */

.quick-view-box{

    width:100%;

    max-width:420px;

    background:#151515;

    border-radius:28px;

    padding:30px;

    text-align:center;

    position:relative;

}



/* IMAGE */

.quick-view-box img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:20px;

    margin-bottom:20px;

}



/* TITLE */

.quick-view-box h2{

    color:white;

    margin-bottom:12px;

}



/* PRICE */

.quick-view-box p{

    color:#71ff00;

    font-size:24px;

    font-weight:bold;

    margin-bottom:25px;

}



/* BUTTON */

.quick-view-box button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:#71ff00;

    color:black;

    font-weight:bold;

    cursor:pointer;

}



/* CLOSE */

.close-quick-view{

    position:absolute;

    top:16px;

    right:18px;

    color:white;

    font-size:28px;

    cursor:pointer;

}

/* =========================
   GLASS HERO BANNER
========================= */

.glass-hero{
    width:100%;
    min-height:400px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:60px 20px;
}

.glass-hero-bg{
    position:absolute;
    inset:0;
    background:url("assets/backG1.jpeg") center/cover no-repeat;
    filter:brightness(0.5);
    transform:scale(1.04);
    transition:transform 8s ease;
}

.glass-hero:hover .glass-hero-bg{
    transform:scale(1.08);
}

.glass-hero-card{
    position:relative;
    z-index:2;
    background:rgba(255,255,255,0.07);
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:32px;
    padding:52px 64px;
    text-align:center;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12);
    max-width:700px;
    width:100%;
}

.glass-hero-badge{
    display:inline-block;
    background:rgba(113,255,0,0.12);
    border:1px solid rgba(113,255,0,0.35);
    color:#71ff00;
    padding:6px 20px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:22px;
    letter-spacing:0.5px;
}

.glass-hero-card h1{
    font-size:52px;
    font-weight:900;
    color:white;
    line-height:1.1;
    margin-bottom:18px;
    text-shadow:0 4px 24px rgba(0,0,0,0.45);
}

.glass-hero-card h1 span{
    color:#71ff00;
    text-shadow:0 0 30px rgba(113,255,0,0.4);
}

.glass-hero-sub{
    color:rgba(255,255,255,0.72);
    font-size:16px;
    margin-bottom:36px;
    line-height:1.6;
}

.glass-hero-btns{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
}

.glass-btn-green{
    padding:16px 38px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:15px;
    border-radius:16px;
    text-decoration:none;
    transition:0.3s ease;
    box-shadow:0 8px 28px rgba(113,255,0,0.3);
}

.glass-btn-green:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 38px rgba(113,255,0,0.5);
}

.glass-btn-outline{
    padding:16px 38px;
    background:rgba(255,255,255,0.08);
    color:white;
    font-weight:700;
    font-size:15px;
    border-radius:16px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,0.22);
    transition:0.3s ease;
}

.glass-btn-outline:hover{
    background:rgba(255,255,255,0.16);
    transform:translateY(-3px);
}

@media(max-width:600px){
    .glass-hero-card{
        padding:36px 24px;
    }
    .glass-hero-card h1{
        font-size:34px;
    }
    .glass-hero-btns{
        flex-direction:column;
    }
    .glass-btn-green,
    .glass-btn-outline{
        width:100%;
        text-align:center;
    }
}

/* LIGHT MODE — GLASS HERO */

.light-mode .glass-hero-card{
    background:rgba(255,255,255,0.22);
    border-color:rgba(255,255,255,0.4);
    box-shadow:0 24px 64px rgba(0,0,0,0.2);
}

/* =========================
   FEATURES STRIP
========================= */

.features-strip{
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    background:rgba(255,255,255,0.03);
    border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin:0;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 28px;
    flex:1;
    min-width:180px;
    border-right:1px solid rgba(255,255,255,0.06);
    transition:0.3s ease;
    cursor:default;
}

.feature-item:last-child{ border-right:none; }

.feature-item:hover{
    background:rgba(113,255,0,0.04);
}

.feature-icon{
    font-size:26px;
    width:48px;
    height:48px;
    background:rgba(113,255,0,0.08);
    border:1px solid rgba(113,255,0,0.15);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.feature-text h4{
    color:white;
    font-size:13px;
    font-weight:700;
    margin-bottom:3px;
}

.feature-text p{
    color:rgba(255,255,255,0.42);
    font-size:12px;
    margin:0;
    padding:0;
}

@media(max-width:768px){
    .feature-item{ min-width:50%; border-bottom:1px solid rgba(255,255,255,0.06); }
}

/* =========================
   PREMIUM CATEGORIES
========================= */

.categories-section{ padding:10px 0 0; }

.section-title{ padding:30px 28px 10px; }
.section-title h2{ font-size:26px; font-weight:800; }
.section-sub{ color:rgba(255,255,255,0.45); font-size:14px; margin-top:4px; }

.categories{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
    padding:16px 28px 28px;
}

.category-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;
    padding:22px 12px;
    text-align:center;
    cursor:pointer;
    transition:0.35s ease;
    backdrop-filter:blur(12px);
}

.category-card:hover{
    background:rgba(113,255,0,0.08);
    border-color:rgba(113,255,0,0.3);
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(113,255,0,0.1);
}

.cat-icon-wrap{
    width:64px;
    height:64px;
    margin:0 auto 12px;
    background:rgba(255,255,255,0.06);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.cat-icon-wrap img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.category-card p{
    color:white;
    font-size:13px;
    font-weight:600;
    margin:0;
}

@media(max-width:900px){ .categories{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .categories{ grid-template-columns:repeat(2,1fr); } }

/* =========================
   PREMIUM SELLER CARDS
========================= */

.seller-section{ padding:10px 0; }

.seller-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:10px;
    padding:16px 28px 28px;
}

.seller-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:24px;
    padding:28px 20px;
    text-align:center;
    transition:0.35s ease;
    backdrop-filter:blur(12px);
}

.seller-card:hover{
    transform:translateY(-6px);
    border-color:rgba(113,255,0,0.2);
    box-shadow:0 14px 36px rgba(0,0,0,0.25);
}

.seller-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 14px;
    border:3px solid rgba(113,255,0,0.3);
}

.seller-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.seller-card h3{
    color:white;
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}

.seller-stars{ font-size:13px; margin-bottom:4px; }

.seller-rating-text{
    color:rgba(255,255,255,0.45);
    font-size:12px;
    margin-bottom:16px;
}

.seller-visit-btn{
    display:block;
    padding:10px 20px;
    border-radius:12px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:0.3s;
}

.seller-visit-btn:hover{
    background:rgba(113,255,0,0.1);
    border-color:rgba(113,255,0,0.3);
    color:#71ff00;
}

.seller-visit-btn.green-btn{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    border:none;
    font-weight:800;
}

.seller-visit-btn.green-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(113,255,0,0.35);
    color:black;
}

.become-seller .become-icon{
    font-size:40px;
    margin-bottom:14px;
}

/* =========================
   SHOP LAYOUT
========================= */

.shop-layout{
    display:grid;
    grid-template-columns:200px 1fr 280px;
    gap:0;
    padding:0 0 40px;
    align-items:start;
}

/* CATEGORY SIDEBAR */

.category-sidebar{
    padding:28px 16px;
    position:sticky;
    top:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.category-sidebar h2{
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,0.4);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
}

.cat-filter-btn{
    width:100%;
    padding:12px 16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:14px;
    color:rgba(255,255,255,0.7);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    transition:0.25s ease;
}

.cat-filter-btn:hover,
.cat-filter-btn.active-filter{
    background:rgba(113,255,0,0.1);
    border-color:rgba(113,255,0,0.3);
    color:#71ff00;
}

/* PRODUCTS SIDE */

.products-side{ padding:20px; }

/* CART SIDE */

.cart-side{
    padding:20px 16px;
    position:sticky;
    top:20px;
}

.cart-section{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    overflow:hidden;
    backdrop-filter:blur(16px);
}

.cart-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.cart-header h2{
    font-size:16px;
    font-weight:700;
    color:white;
}

.cart-count-badge{
    background:rgba(113,255,0,0.15);
    color:#71ff00;
    border:1px solid rgba(113,255,0,0.3);
    border-radius:999px;
    padding:2px 10px;
    font-size:13px;
    font-weight:700;
}

#cartItems{
    list-style:none;
    max-height:320px;
    overflow-y:auto;
    padding:8px 0;
}

#cartItems::-webkit-scrollbar{ width:4px; }
#cartItems::-webkit-scrollbar-thumb{ background:rgba(113,255,0,0.2); border-radius:4px; }

.cart-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    gap:8px;
}

.cart-info{ flex:1; }
.cart-name{ display:block; font-size:13px; color:white; font-weight:600; }
.cart-price{ display:block; font-size:12px; color:#71ff00; margin-top:2px; }

.remove-cart-btn{
    background:rgba(255,61,61,0.12);
    border:none;
    color:#ff6b6b;
    border-radius:8px;
    padding:4px 8px;
    cursor:pointer;
    font-size:12px;
    transition:0.2s;
}

.remove-cart-btn:hover{ background:rgba(255,61,61,0.25); }

.cart-footer{
    padding:16px 20px;
    border-top:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cart-total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    font-size:14px;
}

.cart-total-amount{
    font-weight:800;
    font-size:18px;
    color:#71ff00;
}

.checkout-btn{
    display:block;
    text-align:center;
    padding:14px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    border-radius:14px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.checkout-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(113,255,0,0.35);
}

.wishlist-side-btn{
    display:block;
    text-align:center;
    padding:12px;
    background:rgba(255,45,85,0.1);
    border:1px solid rgba(255,45,85,0.2);
    color:#ff6b8a;
    font-weight:700;
    border-radius:14px;
    text-decoration:none;
    font-size:13px;
    transition:0.3s;
}

.wishlist-side-btn:hover{
    background:rgba(255,45,85,0.2);
    transform:translateY(-2px);
}

.empty-cart{
    color:rgba(255,255,255,0.3);
    font-size:13px;
    text-align:center;
    padding:24px;
    display:block;
}

@media(max-width:1100px){
    .shop-layout{ grid-template-columns:180px 1fr; }
    .cart-side{ display:none; }
}

@media(max-width:768px){
    .shop-layout{ grid-template-columns:1fr; }
    .category-sidebar{ flex-direction:row; flex-wrap:wrap; position:static; }
    .cat-filter-btn{ width:auto; }
}

/* =========================
   LIGHT MODE — HOME
========================= */

.light-mode .features-strip{
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.08);
}

.light-mode .feature-item:hover{ background:rgba(113,255,0,0.06); }
.light-mode .feature-text h4{ color:#111; }
.light-mode .feature-text p{ color:rgba(0,0,0,0.45); }

.light-mode .category-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}

.light-mode .category-card:hover{
    background:rgba(113,255,0,0.06);
}

.light-mode .category-card p{ color:#111; }

.light-mode .seller-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}

.light-mode .seller-card h3{ color:#111; }

.light-mode .cart-section{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}

.light-mode .cart-header h2{ color:#111; }
.light-mode .cart-name{ color:#111; }

.light-mode .cat-filter-btn{
    background:#f4f6f8;
    border-color:rgba(0,0,0,0.1);
    color:#444;
}

.light-mode .section-sub{ color:rgba(0,0,0,0.45); }

/* =========================
   CATEGORY PAGE
========================= */

.cat-page-header{
    position:relative;
    padding:60px 28px 40px;
    text-align:center;
    overflow:hidden;
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.cat-page-bg{
    position:absolute;
    inset:0;
    background:url("assets/backG2.jpeg") center/cover;
    filter:brightness(0.18);
}

.cat-page-info{
    position:relative;
    z-index:1;
}

.cat-page-icon{
    font-size:52px;
    margin-bottom:12px;
    display:block;
}

.cat-page-header h1{
    font-size:40px;
    font-weight:900;
    color:white;
    margin-bottom:8px;
}

.cat-count-text{
    color:rgba(255,255,255,0.45);
    font-size:14px;
    margin-bottom:24px;
}

.cat-nav-pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:16px;
}

.cat-pill{
    padding:8px 18px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.65);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:0.25s;
}

.cat-pill:hover,.cat-pill-active{
    background:rgba(113,255,0,0.12);
    border-color:rgba(113,255,0,0.35);
    color:#71ff00;
}

.cat-page-body{ padding-bottom:80px; }

.cat-sort-bar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px 28px 10px;
    flex-wrap:wrap;
}

.sort-label{
    color:rgba(255,255,255,0.4);
    font-size:13px;
    font-weight:600;
}

@keyframes cardFadeIn{
    from{ opacity:0; transform:translateY(16px); }
    to{   opacity:1; transform:translateY(0); }
}

/* =========================
   CART PAGE
========================= */

.cart-page-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
    padding:32px 28px 80px;
    max-width:1300px;
    margin:0 auto;
    align-items:start;
}

.cart-page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.cart-page-header h1{
    font-size:28px;
    font-weight:800;
    color:white;
}

.clear-cart-btn{
    padding:8px 18px;
    background:rgba(255,61,61,0.1);
    border:1px solid rgba(255,61,61,0.25);
    border-radius:10px;
    color:#ff6b6b;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:0.25s;
}

.clear-cart-btn:hover{ background:rgba(255,61,61,0.2); }

.cart-page-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    padding:16px;
    margin-bottom:12px;
    transition:0.3s;
    backdrop-filter:blur(12px);
}

.cart-page-card:hover{
    border-color:rgba(113,255,0,0.15);
    transform:translateX(4px);
}

.cart-card-img{
    width:90px;
    height:90px;
    border-radius:14px;
    object-fit:cover;
    flex-shrink:0;
}

.cart-card-info{ flex:1; }

.cart-card-info h3{
    color:white;
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
}

.cart-card-cat{
    color:rgba(255,255,255,0.38);
    font-size:12px;
    margin-bottom:6px;
}

.cart-card-price{
    color:#71ff00;
    font-size:18px;
    font-weight:800;
}

.cart-card-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
}

.cart-move-wish{
    background:rgba(255,45,85,0.1);
    border:1px solid rgba(255,45,85,0.2);
    border-radius:10px;
    padding:6px 10px;
    font-size:16px;
    cursor:pointer;
    transition:0.25s;
}

.cart-move-wish:hover{ background:rgba(255,45,85,0.2); }

.cart-remove-btn{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    color:rgba(255,255,255,0.55);
    padding:7px 14px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:0.25s;
    display:flex;
    align-items:center;
    gap:5px;
}

.cart-remove-btn:hover{
    background:rgba(255,61,61,0.15);
    border-color:rgba(255,61,61,0.3);
    color:#ff6b6b;
}

/* ORDER SUMMARY */

.cart-summary-box{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:28px;
    backdrop-filter:blur(16px);
    position:sticky;
    top:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.cart-summary-box h2{
    color:white;
    font-size:18px;
    font-weight:800;
    margin-bottom:4px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgba(255,255,255,0.65);
    font-size:14px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.summary-row:last-of-type{ border-bottom:none; }

.summary-free{ color:#71ff00; font-weight:700; }

.summary-total{
    color:white;
    font-weight:800;
    font-size:16px;
}

.cart-checkout-btn{
    display:block;
    text-align:center;
    padding:16px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    border-radius:14px;
    text-decoration:none;
    font-size:15px;
    transition:0.3s;
    box-shadow:0 8px 24px rgba(113,255,0,0.25);
}

.cart-checkout-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(113,255,0,0.4);
}

.cart-continue-btn{
    display:block;
    text-align:center;
    padding:12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.65);
    font-weight:600;
    border-radius:14px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.cart-continue-btn:hover{
    background:rgba(255,255,255,0.1);
    color:white;
}

.cart-trust{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:4px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.06);
}

.trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,0.38);
    font-size:12px;
}

.trust-item i{ color:rgba(113,255,0,0.6); }

.cart-empty-state,.wish-empty-state{
    text-align:center;
    padding:80px 20px;
    color:white;
}

.cart-empty-state h2,.wish-empty-state h2{
    font-size:24px;
    font-weight:800;
    margin-bottom:10px;
}

.cart-empty-state p,.wish-empty-state p{
    color:rgba(255,255,255,0.42);
    margin-bottom:28px;
}

.cart-shop-now-btn{
    display:inline-block;
    padding:14px 32px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    border-radius:14px;
    text-decoration:none;
    font-size:15px;
    transition:0.3s;
}

.cart-shop-now-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(113,255,0,0.35); }

@media(max-width:900px){
    .cart-page-layout{ grid-template-columns:1fr; }
}

/* =========================
   WISHLIST PAGE
========================= */

.wish-page-header{
    padding:40px 28px 20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.wish-page-header h1{
    font-size:32px;
    font-weight:900;
    color:white;
    margin-bottom:6px;
}

.wish-count-text{
    color:rgba(255,255,255,0.42);
    font-size:14px;
}

.wish-page-body{ padding:24px 28px 80px; }

.wish-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
}

.wish-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;
    overflow:hidden;
    transition:0.35s ease;
    backdrop-filter:blur(12px);
}

.wish-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,45,85,0.25);
    box-shadow:0 14px 36px rgba(0,0,0,0.3);
}

.wish-card-img-wrap{
    position:relative;
    overflow:hidden;
}

.wish-card-img-wrap img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:0.4s ease;
}

.wish-card:hover .wish-card-img-wrap img{ transform:scale(1.04); }

.wish-remove-icon{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(0,0,0,0.55);
    border:none;
    color:white;
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.25s;
    backdrop-filter:blur(8px);
}

.wish-remove-icon:hover{ background:rgba(255,61,61,0.7); }

.wish-card-body{ padding:16px; }

.wish-card-body h3{
    color:white;
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
}

.wish-card-cat{
    color:rgba(255,255,255,0.38);
    font-size:12px;
    margin-bottom:6px;
}

.wish-card-price{
    color:#71ff00;
    font-size:18px;
    font-weight:800;
    margin-bottom:14px;
}

.wish-card-btns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.wish-add-cart-btn{
    padding:10px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:13px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition:0.25s;
}

.wish-add-cart-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(113,255,0,0.3); }

.wish-buy-btn{
    padding:10px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    font-weight:700;
    font-size:13px;
    border-radius:12px;
    cursor:pointer;
    transition:0.25s;
}

.wish-buy-btn:hover{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.25);
}

/* =========================
   NOTIFICATION (shared)
========================= */

#notificationContainer{
    position:fixed;
    top:24px;
    right:24px;
    z-index:999999;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
}

.notification{
    padding:14px 20px;
    border-radius:14px;
    background:#151515;
    color:white;
    font-size:14px;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 30px rgba(0,0,0,0.4);
    animation:notifIn 0.35s ease;
}

@keyframes notifIn{
    from{ opacity:0; transform:translateX(40px); }
    to{   opacity:1; transform:translateX(0); }
}

.notification.success{ border-left:4px solid #71ff00; }
.notification.error{   border-left:4px solid #ff3d3d; }

/* =========================
   FLASH SALE BAR
========================= */

.flash-sale-bar{
    background:linear-gradient(90deg,#1a0000,#2d0000,#1a0000);
    border-bottom:1px solid rgba(255,68,0,0.3);
    padding:10px 28px;
}

.flash-sale-inner{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    max-width:1400px;
    margin:0 auto;
}

.flash-label{
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
    font-weight:900;
    font-size:13px;
    padding:4px 14px;
    border-radius:999px;
    letter-spacing:1px;
    flex-shrink:0;
}

.flash-msg{ color:rgba(255,255,255,0.6); font-size:13px; }

.flash-countdown{
    display:flex;
    align-items:center;
    gap:6px;
}

.cd-block{
    background:rgba(255,68,0,0.15);
    border:1px solid rgba(255,68,0,0.3);
    border-radius:10px;
    padding:6px 10px;
    text-align:center;
    min-width:46px;
}

.cd-block span{ color:white; font-size:18px; font-weight:800; display:block; line-height:1; }
.cd-block small{ color:rgba(255,255,255,0.4); font-size:9px; letter-spacing:1px; }
.cd-sep{ color:rgba(255,255,255,0.4); font-size:18px; font-weight:800; }

.flash-btn{
    margin-left:auto;
    padding:8px 20px;
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
    font-weight:800;
    font-size:13px;
    border-radius:10px;
    text-decoration:none;
    transition:0.3s;
    white-space:nowrap;
}

.flash-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,68,0,0.35); }

.flash-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 28px 10px;
}

.flash-timer-mini{
    color:rgba(255,255,255,0.55);
    font-size:14px;
    font-weight:700;
    background:rgba(255,68,0,0.1);
    border:1px solid rgba(255,68,0,0.2);
    padding:6px 14px;
    border-radius:10px;
}

.flash-discount-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
    font-weight:900;
    font-size:13px;
    padding:4px 10px;
    border-radius:8px;
    z-index:2;
}

/* FLASH SALE PAGE HEADER */

.fs-header{
    position:relative;
    padding:60px 28px 50px;
    text-align:center;
    overflow:hidden;
}

.fs-header-bg{
    position:absolute;
    inset:0;
    background:url("assets/backG1.jpeg") center/cover;
    filter:brightness(0.2);
}

.fs-header-content{ position:relative;z-index:1; }

.fs-lightning{
    font-size:56px;
    margin-bottom:12px;
    animation:flashPulse 2.4s ease-in-out infinite;
}

@keyframes flashPulse{
    0%,100%{ text-shadow:0 0 0 rgba(255,136,0,0); }
    50%{ text-shadow:0 0 10px rgba(255,136,0,0.3); }
}

.fs-header h1{
    font-size:48px;
    font-weight:900;
    color:white;
    margin-bottom:10px;
}

.fs-header p{ color:rgba(255,255,255,0.5); font-size:16px; margin-bottom:28px; }

.fs-countdown-big{
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
}

.fs-cd-block{
    background:rgba(255,68,0,0.15);
    border:1px solid rgba(255,68,0,0.35);
    border-radius:16px;
    padding:16px 22px;
    text-align:center;
    min-width:80px;
}

.fs-cd-block span{ color:white; font-size:36px; font-weight:900; display:block; line-height:1; }
.fs-cd-block small{ color:rgba(255,255,255,0.4); font-size:10px; letter-spacing:1.5px; }
.fs-cd-sep{ color:rgba(255,255,255,0.4); font-size:32px; font-weight:900; }

/* =========================
   NAV POINTS + MESSAGES
========================= */

.nav-points-btn{
    display:flex;
    align-items:center;
    gap:5px;
    background:rgba(113,255,0,0.08);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:10px;
    padding:8px 14px;
    color:#71ff00;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:0.25s;
}

.nav-points-btn:hover{ background:rgba(113,255,0,0.15); }

.nav-messages-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    font-size:18px;
    text-decoration:none;
    transition:0.25s;
}

.nav-messages-btn:hover{ background:rgba(255,255,255,0.12); }

.unread-dot{
    position:absolute;
    top:4px;
    right:4px;
    width:8px;
    height:8px;
    background:#ff4444;
    border-radius:50%;
    border:2px solid #0b0b0b;
}

/* =========================
   ORDER TRACKING PAGE
========================= */

.track-page{ max-width:900px; margin:0 auto; padding:32px 24px 100px; }

.track-hero{ text-align:center; margin-bottom:40px; }
.track-hero h1{ font-size:32px; font-weight:900; color:white; margin-bottom:8px; }
.track-hero p{ color:rgba(255,255,255,0.4); font-size:15px; }

.track-my-orders h2{ font-size:20px; font-weight:800; color:white; margin-bottom:16px; }

.order-summary-card{
    background:#000;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:20px;
    margin-bottom:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    transition:0.3s;
}

.order-summary-card:hover{ border-color:rgba(113,255,0,0.25); transform:translateX(4px); }

.osc-id{ color:white; font-weight:800; font-size:16px; }
.osc-date,.osc-items{ color:rgba(255,255,255,0.4); font-size:13px; margin-top:3px; }
.osc-total{ color:#71ff00; font-weight:800; font-size:18px; }
.osc-status{ font-size:13px; font-weight:600; margin-top:4px; }
.osc-view-btn{ color:rgba(255,255,255,0.35); font-size:12px; margin-top:6px; display:block; }

.status-placed,.status-processing{ color:#ffc107; }
.status-shipped,.status-out_for_delivery{ color:#00aaff; }
.status-delivered{ color:#71ff00; }

.track-empty{ text-align:center; padding:60px 20px; color:white; }
.track-empty h3{ font-size:20px; margin-bottom:8px; }
.track-empty p{ color:rgba(255,255,255,0.4); margin-bottom:16px; }

/* ORDER DETAIL PANEL */

.order-detail-panel{
    background:#000;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:24px;
    padding:28px;
    margin:28px 0;
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.detail-header h2{ color:white; font-size:22px; font-weight:900; margin-bottom:6px; }
.detail-date{ color:rgba(255,255,255,0.4); font-size:13px; }
.detail-total{ color:#71ff00; font-size:26px; font-weight:900; }

/* TRACKING STEPS */

.track-steps{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:24px;
}

.track-step{
    display:flex;
    align-items:flex-start;
    gap:16px;
    position:relative;
    padding-bottom:24px;
}

.track-step:last-child{ padding-bottom:0; }

.track-step::before{
    content:"";
    position:absolute;
    left:15px;
    top:32px;
    bottom:0;
    width:2px;
    background:rgba(255,255,255,0.08);
}

.track-step:last-child::before{ display:none; }

.step-dot{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    flex-shrink:0;
    z-index:1;
}

.step-done .step-dot{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    box-shadow:0 0 16px rgba(113,255,0,0.3);
}

.step-pending .step-dot{
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.3);
}

.step-label{
    color:white;
    font-weight:700;
    font-size:15px;
}

.step-time{ color:rgba(255,255,255,0.4); font-size:12px; margin-top:2px; }
.step-pending .step-label{ color:rgba(255,255,255,0.35); }

.track-item-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.track-item-card img{
    width:56px;
    height:56px;
    border-radius:12px;
    object-fit:cover;
}

.tic-name{ color:white; font-weight:600; font-size:14px; }
.tic-price{ color:#71ff00; font-weight:800; font-size:14px; margin-top:3px; }

.detail-actions{
    display:flex;
    gap:12px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.06);
}

.detail-msg-btn{
    padding:12px 22px;
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    border-radius:12px;
    color:#71ff00;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:0.25s;
}

.detail-msg-btn:hover{ background:rgba(113,255,0,0.18); }

.detail-close-btn{
    padding:12px 22px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:rgba(255,255,255,0.55);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:0.25s;
}

.detail-close-btn:hover{ background:rgba(255,255,255,0.1); }

/* MAP */

.map-container{
    margin:28px 0;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:24px;
    overflow:hidden;
}

.map-container h2{ color:white; font-size:18px; font-weight:800; margin-bottom:16px; }

#deliveryMap{
    height:280px;
    border-radius:16px;
    overflow:hidden;
}

.map-address{ color:rgba(255,255,255,0.4); font-size:13px; margin-top:12px; text-align:center; }

/* =========================
   MESSAGES PAGE
========================= */

.messages-page{
    display:grid;
    grid-template-columns:300px 1fr;
    height:calc(100vh - 80px);
    overflow:hidden;
}

.msg-sidebar{
    background:rgba(255,255,255,0.03);
    border-right:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.msg-sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.msg-sidebar-header h2{ color:white; font-size:18px; font-weight:800; }

.new-msg-btn{
    padding:7px 14px;
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    border-radius:10px;
    color:#71ff00;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:0.25s;
}

.new-msg-btn:hover{ background:rgba(113,255,0,0.18); }

.convo-list{ overflow-y:auto; flex:1; }

.convo-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.04);
    transition:0.2s;
}

.convo-item:hover,.convo-active{ background:rgba(113,255,0,0.05); }

.convo-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:16px;
    flex-shrink:0;
}

.convo-name{ color:white; font-weight:700; font-size:14px; }
.convo-preview{ color:rgba(255,255,255,0.35); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

.convo-badge{
    background:#ff4444;
    color:white;
    border-radius:999px;
    padding:2px 7px;
    font-size:11px;
    font-weight:800;
    margin-left:auto;
    flex-shrink:0;
}

.msg-main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#0a0a0a;
}

.msg-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    text-align:center;
    color:white;
}

.msg-empty-state h3{ font-size:20px; margin-bottom:8px; }
.msg-empty-state p{ color:rgba(255,255,255,0.35); font-size:14px; }

.chat-header-bar{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.02);
}

.chat-avatar-big{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:18px;
    flex-shrink:0;
}

.chat-name{ color:white; font-weight:800; font-size:15px; }
.chat-role{ color:rgba(255,255,255,0.4); font-size:12px; }

.chat-messages-area{
    flex:1;
    overflow-y:auto;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chat-bubble{
    max-width:70%;
    padding:12px 16px;
    border-radius:18px;
    font-size:14px;
    line-height:1.5;
}

.bubble-buyer{
    align-self:flex-end;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    border-bottom-right-radius:4px;
}

.bubble-seller{
    align-self:flex-start;
    background:rgba(255,255,255,0.08);
    color:white;
    border:1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius:4px;
}

.bubble-time{
    font-size:10px;
    opacity:0.5;
    margin-top:4px;
    text-align:right;
}

.chat-input-row{
    display:flex;
    gap:10px;
    padding:16px 20px;
    border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.02);
}

.chat-input-row input{
    flex:1;
    padding:12px 16px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:14px;
    color:white;
    font-size:14px;
    outline:none;
}

.chat-input-row input:focus{ border-color:rgba(113,255,0,0.4); }

.chat-send-btn{
    width:44px;
    height:44px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    border:none;
    border-radius:12px;
    color:black;
    font-size:16px;
    cursor:pointer;
    transition:0.25s;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.chat-send-btn:hover{ transform:scale(1.08); }

/* MODAL */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(8px);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modal-box{
    background:rgba(20,20,20,0.98);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:24px;
    padding:32px;
    width:100%;
    max-width:420px;
    box-shadow:0 24px 60px rgba(0,0,0,0.6);
}

.modal-box h2{ color:white; font-size:20px; font-weight:800; margin-bottom:6px; }

.modal-input{
    width:100%;
    padding:14px 16px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:white;
    font-size:14px;
    outline:none;
    margin-bottom:12px;
    font-family:inherit;
}

.modal-input:focus{ border-color:rgba(113,255,0,0.4); }

.modal-confirm-btn{
    flex:1;
    padding:13px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
    transition:0.25s;
}

.modal-cancel-btn{
    flex:1;
    padding:13px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:rgba(255,255,255,0.6);
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    transition:0.25s;
}

/* =========================
   LOYALTY POINTS (PROFILE)
========================= */

.points-stat-card{ border-color:rgba(113,255,0,0.2) !important; }

.profile-points-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(113,255,0,0.15);
    border-radius:24px;
    padding:28px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    backdrop-filter:blur(12px);
}

.points-tier-badge{
    display:inline-block;
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    color:#71ff00;
    padding:5px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

.points-total{
    font-size:32px;
    font-weight:900;
    color:white;
    margin-bottom:14px;
}

.points-progress-wrap{
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    height:8px;
    overflow:hidden;
    margin-bottom:10px;
}

.points-progress-bar{
    background:linear-gradient(90deg,#71ff00,#4fc800);
    height:100%;
    border-radius:999px;
    transition:width 1s ease;
    box-shadow:0 0 12px rgba(113,255,0,0.4);
}

.points-next{ color:rgba(255,255,255,0.4); font-size:13px; }

.points-rewards{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.reward-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    padding:12px 14px;
}

.reward-icon{ font-size:22px; flex-shrink:0; }

.reward-info{
    flex:1;
    display:flex;
    flex-direction:column;
}

.reward-info strong{ color:white; font-size:14px; }
.reward-info span{ color:rgba(255,255,255,0.4); font-size:12px; }

.reward-locked{
    padding:4px 10px;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.3);
    white-space:nowrap;
}

.reward-unlocked{
    padding:4px 10px;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
    background:rgba(113,255,0,0.12);
    color:#71ff00;
    white-space:nowrap;
}

.profile-order-status{ font-size:12px; font-weight:600; }

@media(max-width:768px){
    .profile-points-card{ grid-template-columns:1fr; }
    .messages-page{ grid-template-columns:1fr; }
    .msg-sidebar{ height:300px; }
}

/* =========================
   PRODUCT BADGES
========================= */

.prod-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:3;
    padding:4px 11px;
    border-radius:8px;
    font-size:11px;
    font-weight:900;
    letter-spacing:0.5px;
}

.badge-new{
    background:linear-gradient(135deg,#00aaff,#0066cc);
    color:white;
}

.badge-hot{
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
}

/* =========================
   NEW ARRIVALS SECTION
========================= */

.new-arrivals-section{
    padding:0 0 10px;
}

.new-arrivals-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 28px 10px;
}

.see-all-link{
    color:#71ff00;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    padding:8px 16px;
    border-radius:10px;
    border:1px solid rgba(113,255,0,0.25);
    background:rgba(113,255,0,0.07);
    transition:0.25s;
    white-space:nowrap;
}

.see-all-link:hover{
    background:rgba(113,255,0,0.14);
    border-color:rgba(113,255,0,0.4);
}

.new-arrivals-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
    padding:10px 28px 20px;
}

/* =========================
   RECOMMENDED (OVERRIDE)
========================= */

.recommended-section{
    margin-top:10px !important;
    padding:0 0 20px !important;
}

.recommended-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
    gap:20px !important;
    padding:12px 28px 0 !important;
}

/* =========================
   MARKETPLACE STATS
========================= */

.marketplace-stats{
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:0;
    padding:36px 28px;
    background:rgba(113,255,0,0.03);
    border-top:1px solid rgba(113,255,0,0.08);
    border-bottom:1px solid rgba(113,255,0,0.08);
    margin:20px 0 0;
}

.mstat-item{
    text-align:center;
    padding:12px 20px;
    flex:1;
    min-width:140px;
}

.mstat-num{
    font-size:36px;
    font-weight:900;
    color:#71ff00;
    margin-bottom:6px;
    line-height:1;
}

.mstat-label{
    color:rgba(255,255,255,0.45);
    font-size:13px;
    font-weight:600;
}

/* =========================
   LIVE POPUP (REAL PRODUCTS)
========================= */

#livePopup{
    position:fixed;
    bottom:100px;
    left:20px;
    z-index:99999;
    display:none;
    animation:slideInLeft 0.45s ease;
}

@keyframes slideInLeft{
    from{ opacity:0; transform:translateX(-60px); }
    to{   opacity:1; transform:translateX(0); }
}

.live-popup-inner{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(15,15,15,0.95);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:16px;
    padding:12px 16px;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    backdrop-filter:blur(16px);
    max-width:290px;
}

.live-popup-img{
    width:52px;
    height:52px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
}

.live-popup-text{
    font-size:13px;
    color:rgba(255,255,255,0.7);
    line-height:1.4;
}

.live-popup-text strong{ color:white; }
.live-popup-text span{ color:rgba(255,255,255,0.9); font-weight:600; }

.live-popup-price{
    color:#71ff00;
    font-weight:800;
    font-size:14px;
    margin-top:3px;
}

/* =========================
   SECTION TITLE OVERRIDE
========================= */

.section-title{
    padding:24px 28px 10px;
    margin-top:0;
}

.section-title h2{
    font-size:24px;
    font-weight:800;
    color:white;
}

/* =========================
   CATEGORY CARD (FIX AS LINK)
========================= */

a.category-card{
    display:block;
    text-decoration:none;
}

@media(max-width:768px){
    .new-arrivals-grid{ grid-template-columns:repeat(2,1fr); }
    .recommended-grid{ grid-template-columns:repeat(2,1fr) !important; }
    .marketplace-stats{ flex-direction:row; }
    .mstat-item{ min-width:50%; }
}

/* =========================
   TRENDING SECTION (FULL WIDTH)
========================= */

.trending-section{
    padding:0 0 40px;
}

.trending-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:28px 28px 16px;
    flex-wrap:wrap;
}

.trending-title-col h2{
    font-size:26px;
    font-weight:900;
    color:white;
    margin-bottom:4px;
}

.trending-filters{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.location-filter-select{
    padding:9px 14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    color:white;
    font-size:13px;
    font-weight:600;
    outline:none;
    cursor:pointer;
    transition:0.25s;
    font-family:inherit;
}

.location-filter-select:hover,
.location-filter-select:focus{
    border-color:rgba(113,255,0,0.35);
    background:rgba(113,255,0,0.07);
}

.location-filter-select option{
    background:#151515;
    color:white;
}

.products-grid-full{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:22px;
    padding:0 28px 20px;
}

/* =========================
   PRODUCT CARD — PREMIUM
========================= */

.product-img-wrap{
    width:100%;
    overflow:hidden;
    border-radius:0;
}

.product-img-wrap img{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
    content-visibility:auto;
}

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

.product-body{
    padding:14px 16px 16px;
}

.product-top-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
}

.product-name{
    color:white;
    font-size:15px;
    font-weight:700;
    line-height:1.3;
    flex:1;
}

.product-location-tag{
    background:rgba(0,153,255,0.1);
    border:1px solid rgba(0,153,255,0.2);
    color:#00aaff;
    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:8px;
    white-space:nowrap;
    flex-shrink:0;
}

.product-desc-text{
    color:rgba(255,255,255,0.38);
    font-size:12px;
    line-height:1.4;
    margin:4px 0 8px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
}

.product-card .price{
    padding:0;
    margin-bottom:12px;
    font-size:20px;
}

.product-boosted{
    border-color:rgba(0,153,255,0.3) !important;
    box-shadow:0 0 0 1px rgba(0,153,255,0.15), 0 12px 36px rgba(0,0,0,0.3) !important;
}

.badge-sponsored{
    background:linear-gradient(135deg,#0066cc,#00aaff);
    color:white;
    font-size:11px;
}

/* =========================
   NAV PROFILE AVATAR
========================= */

.nav-profile-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:2px solid rgba(255,255,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:16px;
    font-weight:800;
    color:white;
    transition:0.3s ease;
    flex-shrink:0;
}

.nav-profile-avatar:hover{
    border-color:rgba(113,255,0,0.5);
    background:rgba(113,255,0,0.1);
}

.nav-profile-logged-in{
    background:linear-gradient(135deg,#71ff00,#4fc800) !important;
    color:black !important;
    border-color:transparent !important;
    font-size:15px;
}

/* =========================
   MESSAGES — UNREAD/READ/SPAM
========================= */

.msg-tabs{
    display:flex;
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:0 12px;
}

.msg-tab{
    flex:1;
    padding:11px 8px;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    color:rgba(255,255,255,0.42);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
    font-family:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.msg-tab:hover{ color:rgba(255,255,255,0.75); }

.active-tab{
    color:white !important;
    border-bottom-color:#71ff00;
}

.tab-badge{
    background:#ff4444;
    color:white;
    border-radius:999px;
    padding:1px 6px;
    font-size:10px;
    font-weight:800;
}

.convo-empty{
    text-align:center;
    padding:48px 20px;
    color:rgba(255,255,255,0.25);
}

.convo-empty i{ font-size:36px; margin-bottom:10px; display:block; }
.convo-empty p{ font-size:13px; }

.convo-unread-item{
    background:rgba(113,255,0,0.04);
}

.convo-name-bold{
    font-weight:800 !important;
    color:white !important;
}

.convo-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    flex-shrink:0;
}

.convo-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

.dot-unread{ background:#71ff00; }
.dot-read{ background:rgba(255,255,255,0.15); }

.chat-actions{
    display:flex;
    gap:6px;
    margin-left:auto;
}

.chat-action-btn{
    width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05);
    color:rgba(255,255,255,0.55);
    font-size:13px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
}

.chat-action-btn:hover{
    background:rgba(255,255,255,0.12);
    color:white;
}

.spam-btn:hover{
    background:rgba(255,68,0,0.15) !important;
    border-color:rgba(255,68,0,0.3) !important;
    color:#ff6b6b !important;
}

.delete-btn:hover{
    background:rgba(255,61,61,0.15) !important;
    border-color:rgba(255,61,61,0.3) !important;
    color:#ff6b6b !important;
}

.read-receipt{
    color:rgba(0,100,255,0.8);
    font-size:10px;
    margin-left:4px;
}

/* =========================
   BOOST MANAGER (SELLER)
========================= */

.boost-manager-body{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.boost-duration-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:end;
}

.boost-cost-preview{
    background:rgba(0,153,255,0.07);
    border:1px solid rgba(0,153,255,0.2);
    border-radius:12px;
    padding:13px 16px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.boost-cost-label{
    color:rgba(255,255,255,0.45);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.boost-cost-value{
    color:#00aaff;
    font-size:18px;
    font-weight:800;
}

.boost-go-btn{
    padding:15px;
    background:linear-gradient(135deg,#0066cc,#00aaff);
    color:white;
    font-weight:800;
    font-size:15px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 6px 20px rgba(0,153,255,0.2);
}

.boost-go-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,153,255,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){
    .trending-topbar{ flex-direction:column; }
    .trending-filters{ justify-content:flex-start; }
    .products-grid-full{ grid-template-columns:repeat(2,1fr); padding:0 14px 20px; }
    .boost-duration-row{ grid-template-columns:1fr; }
}

@media(max-width:480px){
    .products-grid-full{ grid-template-columns:1fr; }
    .trending-filters .cat-filter-btn{ font-size:11px; padding:7px 10px; }
}

/* =========================
   18+ AGE GATE
========================= */

.age-gate-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(0,0,0,0.92);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.age-gate-box{
    background:rgba(15,15,15,0.99);
    border:1px solid rgba(255,68,0,0.3);
    border-radius:28px;
    padding:40px 36px;
    max-width:480px;
    width:100%;
    text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,68,0,0.1);
}

.age-gate-logo img{
    width:120px;
    margin:0 auto 16px;
    display:block;
}

.age-gate-warning{
    background:rgba(255,68,0,0.12);
    border:1px solid rgba(255,68,0,0.3);
    color:#ff8800;
    padding:6px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    display:inline-block;
    margin-bottom:16px;
    letter-spacing:0.5px;
}

.age-gate-box h2{
    color:white;
    font-size:24px;
    font-weight:900;
    margin-bottom:12px;
}

.age-gate-box p{
    color:rgba(255,255,255,0.5);
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
}

.age-gate-dob label{
    display:block;
    color:rgba(255,255,255,0.6);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:10px;
}

.dob-inputs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:14px;
}

.dob-inputs input{
    width:70px;
    padding:12px 8px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    color:white;
    font-size:16px;
    font-weight:700;
    text-align:center;
    outline:none;
    font-family:inherit;
}

.dob-inputs input::-webkit-outer-spin-button,
.dob-inputs input::-webkit-inner-spin-button{ -webkit-appearance:none; }

.dob-inputs input:focus{ border-color:rgba(255,136,0,0.5); }
.dob-inputs span{ color:rgba(255,255,255,0.4); font-size:20px; font-weight:800; }

.age-gate-error{
    background:rgba(255,61,61,0.12);
    border:1px solid rgba(255,61,61,0.28);
    color:#ff6b6b;
    padding:10px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}

.age-gate-btns{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}

.age-confirm-btn{
    padding:15px;
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
    font-weight:900;
    font-size:15px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:0.3s;
    font-family:inherit;
}

.age-confirm-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,68,0,0.35); }

.age-leave-btn{
    color:rgba(255,255,255,0.35);
    text-decoration:none;
    font-size:13px;
    transition:0.2s;
}

.age-leave-btn:hover{ color:rgba(255,255,255,0.6); }

.age-gate-legal{
    color:rgba(255,255,255,0.2);
    font-size:11px;
    line-height:1.5;
    margin-top:20px;
    border-top:1px solid rgba(255,255,255,0.06);
    padding-top:16px;
}

.cat-filter-adult{
    border-color:rgba(255,136,0,0.3) !important;
    color:#ff8800 !important;
}

.cat-filter-adult:hover{
    background:rgba(255,136,0,0.1) !important;
    border-color:rgba(255,136,0,0.5) !important;
}

.cat-pill-adult{
    border-color:rgba(255,136,0,0.3) !important;
    color:#ff8800 !important;
}

.adult-category-note{
    background:rgba(255,136,0,0.08);
    border:1px solid rgba(255,136,0,0.25);
    border-radius:12px;
    padding:12px 16px;
    color:#ff8800;
    font-size:13px;
    line-height:1.5;
    margin-bottom:16px;
}

/* =========================
   REVIEWS PAGE
========================= */

.reviews-page{
    max-width:1000px;
    margin:0 auto;
    padding:32px 24px 100px;
}

.reviews-hero{
    text-align:center;
    margin-bottom:36px;
}

.reviews-hero h1{
    font-size:36px;
    font-weight:900;
    color:white;
    margin-bottom:8px;
}

.reviews-hero p{
    color:rgba(255,255,255,0.42);
    font-size:15px;
    margin-bottom:28px;
}

.reviews-platform-stats{
    display:flex;
    gap:0;
    justify-content:center;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    overflow:hidden;
    max-width:500px;
    margin:0 auto;
}

.rps-item{
    flex:1;
    padding:20px;
    border-right:1px solid rgba(255,255,255,0.06);
    text-align:center;
}

.rps-item:last-child{ border-right:none; }

.rps-num{
    font-size:28px;
    font-weight:900;
    color:#71ff00;
    margin-bottom:4px;
}

.rps-label{
    color:rgba(255,255,255,0.4);
    font-size:12px;
    font-weight:600;
}

.rps-stars{
    color:#ffc107;
    font-size:14px;
    margin-top:4px;
}

.reviews-tabs{
    display:flex;
    gap:8px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.rev-tab{
    padding:10px 22px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:rgba(255,255,255,0.55);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.25s;
    font-family:inherit;
}

.rev-tab:hover{ background:rgba(255,255,255,0.1); color:white; }

.active-rev-tab{
    background:rgba(113,255,0,0.1) !important;
    border-color:rgba(113,255,0,0.3) !important;
    color:#71ff00 !important;
}

.write-review-box{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:28px;
    margin-bottom:32px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.write-review-box h3{
    color:white;
    font-size:18px;
    font-weight:800;
}

.star-picker{
    display:flex;
    gap:8px;
}

.star-pick{
    font-size:32px;
    color:rgba(255,255,255,0.15);
    cursor:pointer;
    transition:0.2s;
    line-height:1;
}

.star-pick:hover,
.star-active{
    color:#ffc107;
    transform:scale(1.15);
}

.review-textarea{
    width:100%;
    padding:14px 16px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:14px;
    color:white;
    font-size:14px;
    font-family:inherit;
    outline:none;
    resize:vertical;
    min-height:100px;
    line-height:1.5;
}

.review-textarea:focus{ border-color:rgba(113,255,0,0.4); }
.review-textarea::placeholder{ color:rgba(255,255,255,0.3); }

.reviews-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.review-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    padding:22px;
    transition:0.3s;
}

.review-card:hover{
    border-color:rgba(255,193,7,0.2);
    transform:translateX(4px);
}

.review-top{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.review-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:17px;
    flex-shrink:0;
}

.review-name{
    color:white;
    font-weight:700;
    font-size:15px;
    margin-bottom:2px;
}

.review-date{
    color:rgba(255,255,255,0.35);
    font-size:12px;
}

.review-stars{
    margin-left:auto;
    color:#ffc107;
    font-size:18px;
    letter-spacing:1px;
}

.review-comment{
    color:rgba(255,255,255,0.75);
    font-size:14px;
    line-height:1.6;
    margin-bottom:14px;
}

.review-helpful{
    display:flex;
    gap:8px;
}

.helpful-btn{
    padding:6px 14px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    color:rgba(255,255,255,0.45);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
    font-family:inherit;
}

.helpful-btn:hover{
    background:rgba(255,255,255,0.1);
    color:white;
}

.reviews-empty{
    text-align:center;
    padding:60px 20px;
    color:white;
}

.reviews-empty h3{ font-size:20px; margin:12px 0 8px; }
.reviews-empty p{ color:rgba(255,255,255,0.35); }

/* HOMEPAGE REVIEWS TEASER */

.reviews-teaser{
    display:flex;
    gap:40px;
    align-items:flex-start;
    padding:48px 28px;
    background:rgba(255,193,7,0.03);
    border-top:1px solid rgba(255,193,7,0.08);
    border-bottom:1px solid rgba(255,193,7,0.08);
    flex-wrap:wrap;
}

.rt-left{
    flex:0 0 280px;
    min-width:220px;
}

.rt-badge{
    background:rgba(255,193,7,0.1);
    border:1px solid rgba(255,193,7,0.25);
    color:#ffc107;
    padding:5px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
    margin-bottom:14px;
}

.rt-left h2{
    font-size:28px;
    font-weight:900;
    color:white;
    margin-bottom:8px;
    line-height:1.2;
}

.rt-right{
    flex:1;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
    min-width:0;
}

.rt-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    padding:20px;
    transition:0.3s;
}

.rt-card:hover{
    border-color:rgba(255,193,7,0.2);
    transform:translateY(-4px);
}

.rt-card-top{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.rt-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffc107,#ff8800);
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
    flex-shrink:0;
}

.rt-name{
    color:white;
    font-weight:700;
    font-size:14px;
}

.rt-stars{ color:#ffc107; font-size:13px; }

.rt-comment{
    color:rgba(255,255,255,0.6);
    font-size:13px;
    line-height:1.5;
    font-style:italic;
}

/* =========================
   KRA TAX SECTION (SELLER)
========================= */

.kra-pin-row{
    display:flex;
    align-items:flex-end;
    gap:16px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.kra-pin-status{
    font-size:13px;
    font-weight:700;
    padding-bottom:4px;
}

.flash-input{
    width:100%;
    padding:13px 16px;
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:white;
    font-size:14px;
    outline:none;
    font-family:inherit;
    letter-spacing:1px;
}

.flash-input:focus{ border-color:rgba(0,153,255,0.4); }

.tax-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
    margin-bottom:16px;
}

.tax-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:16px;
    padding:18px;
}

.tax-card-label{
    color:rgba(255,255,255,0.45);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:6px;
}

.tax-card-value{
    color:white;
    font-size:20px;
    font-weight:800;
}

.tax-card-note{
    color:rgba(255,255,255,0.3);
    font-size:11px;
    margin-top:4px;
}

.tax-orange{ color:#ff8800; }
.tax-red{ color:#ff4444; }

.tax-card-total{
    border-color:rgba(255,68,68,0.25);
    background:rgba(255,68,68,0.04);
}

.tax-disclaimer{
    background:rgba(255,193,7,0.06);
    border:1px solid rgba(255,193,7,0.2);
    border-radius:12px;
    padding:14px 16px;
    color:rgba(255,255,255,0.5);
    font-size:12px;
    line-height:1.6;
    margin-top:8px;
}

/* =========================
   SUCCESS PAGE
========================= */

.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:radial-gradient(circle at 50% 40%, rgba(113,255,0,0.06), transparent 60%), #0a0a0a;
}

.success-box{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(113,255,0,0.15);
    border-radius:32px;
    padding:48px 40px;
    max-width:500px;
    width:100%;
    text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(113,255,0,0.08);
    backdrop-filter:blur(20px);
}

.success-animation{
    margin-bottom:24px;
}

.success-circle{
    width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-size:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    animation:successPop 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow:0 0 40px rgba(113,255,0,0.4);
}

@keyframes successPop{
    from{ transform:scale(0); opacity:0; }
    to{   transform:scale(1); opacity:1; }
}

.success-box h1{
    color:white;
    font-size:28px;
    font-weight:900;
    margin-bottom:10px;
}

.success-box p{
    color:rgba(255,255,255,0.45);
    font-size:15px;
    margin-bottom:20px;
    line-height:1.5;
}

.success-order-id{
    background:rgba(113,255,0,0.08);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:12px;
    padding:12px 20px;
    color:#71ff00;
    font-size:14px;
    font-weight:700;
    margin-bottom:16px;
}

.success-points-earned{
    background:rgba(255,193,7,0.08);
    border:1px solid rgba(255,193,7,0.2);
    border-radius:12px;
    padding:12px 16px;
    color:#ffc107;
    font-size:14px;
    font-weight:600;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.success-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}

.success-track-btn{
    display:block;
    padding:14px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    border-radius:14px;
    text-decoration:none;
    font-size:15px;
    transition:0.3s;
}

.success-track-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(113,255,0,0.35); }

.success-continue-btn{
    display:block;
    padding:13px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.65);
    font-weight:600;
    border-radius:14px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.success-continue-btn:hover{ background:rgba(255,255,255,0.12); color:white; }

.success-footer-note{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.3);
    font-size:12px;
}

@media(max-width:600px){
    .reviews-teaser{ flex-direction:column; }
    .rt-left{ flex:none; }
    .tax-grid{ grid-template-columns:1fr 1fr; }
    .age-gate-box{ padding:28px 20px; }
    .dob-inputs input{ width:58px; }
}

/* =========================
   SMART CHAT BOT
========================= */

.chat-toggle-btn{
    position:fixed;
    bottom:90px;
    right:20px;
    z-index:9999;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    border-radius:999px;
    padding:14px 20px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(113,255,0,0.35);
    transition:0.3s ease;
    user-select:none;
}

.chat-toggle-btn:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 36px rgba(113,255,0,0.5); }
.chat-toggle-btn i{ font-size:18px; }
.chat-toggle-label{ display:none; }

@media(min-width:500px){ .chat-toggle-label{ display:block; } }

.chat-unread-pip{
    position:absolute;
    top:-4px;
    right:-4px;
    background:#ff4444;
    color:white;
    border-radius:50%;
    width:20px;
    height:20px;
    font-size:11px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #0a0a0a;
}

.chat-box-premium{
    position:fixed;
    bottom:160px;
    right:20px;
    z-index:9998;
    width:340px;
    max-height:480px;
    background:#111;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    animation:chatSlideIn 0.35s ease;
}

@keyframes chatSlideIn{
    from{ opacity:0; transform:translateY(20px) scale(0.97); }
    to{   opacity:1; transform:translateY(0)    scale(1); }
}

.chat-box-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 16px;
    background:linear-gradient(135deg,rgba(113,255,0,0.12),rgba(0,0,0,0));
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.chat-bot-avatar img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:contain;
    border:2px solid rgba(113,255,0,0.3);
    background:rgba(113,255,0,0.08);
}

.chat-bot-name{ color:white; font-weight:800; font-size:14px; }

.chat-bot-status{
    color:rgba(255,255,255,0.45);
    font-size:11px;
    display:flex;
    align-items:center;
    gap:5px;
}

.online-dot{
    width:7px;
    height:7px;
    background:#71ff00;
    border-radius:50%;
    display:inline-block;
    animation:pulse 2s ease infinite;
}

@keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.4; }
}

.chat-close-btn{
    margin-left:auto;
    background:none;
    border:none;
    color:rgba(255,255,255,0.4);
    font-size:16px;
    cursor:pointer;
    padding:4px 8px;
    border-radius:8px;
    transition:0.2s;
}

.chat-close-btn:hover{ background:rgba(255,255,255,0.08); color:white; }

.chat-messages-premium{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chat-messages-premium::-webkit-scrollbar{ width:3px; }
.chat-messages-premium::-webkit-scrollbar-thumb{ background:rgba(113,255,0,0.2); border-radius:3px; }

.bot-msg-wrap{ display:flex; }
.bot-bubble{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.08);
    color:white;
    padding:12px 14px;
    border-radius:16px 16px 16px 4px;
    font-size:13px;
    line-height:1.5;
    max-width:90%;
}

.user-bubble-wrap{ display:flex; justify-content:flex-end; }
.user-bubble{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    padding:10px 14px;
    border-radius:16px 16px 4px 16px;
    font-size:13px;
    font-weight:600;
    max-width:85%;
}

/* Thinking dots */
.bot-bubble.thinking{
    display:flex;
    gap:5px;
    align-items:center;
    padding:14px 18px;
}

.bot-bubble.thinking span{
    width:7px;
    height:7px;
    background:rgba(255,255,255,0.5);
    border-radius:50%;
    display:inline-block;
    animation:bounce 1.2s ease infinite;
}

.bot-bubble.thinking span:nth-child(2){ animation-delay:0.2s; }
.bot-bubble.thinking span:nth-child(3){ animation-delay:0.4s; }

@keyframes bounce{
    0%,80%,100%{ transform:translateY(0); }
    40%{ transform:translateY(-6px); }
}

.chat-quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px;
}

.chat-quick-replies button{
    padding:6px 12px;
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    border-radius:999px;
    color:#71ff00;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
    font-family:inherit;
}

.chat-quick-replies button:hover{ background:rgba(113,255,0,0.2); }

.chat-input-premium{
    display:flex;
    gap:8px;
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.02);
}

.chat-input-premium input{
    flex:1;
    padding:10px 14px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:white;
    font-size:13px;
    outline:none;
    font-family:inherit;
}

.chat-input-premium input:focus{ border-color:rgba(113,255,0,0.4); }
.chat-input-premium input::placeholder{ color:rgba(255,255,255,0.3); }

.chat-input-premium button{
    width:38px;
    height:38px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    border:none;
    border-radius:10px;
    color:black;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.25s;
    flex-shrink:0;
}

.chat-input-premium button:hover{ transform:scale(1.08); }

@media(max-width:400px){
    .chat-box-premium{ width:calc(100vw - 20px); right:10px; bottom:150px; }
}

/* =========================
   MARKETING POP-UPS
========================= */

.mkt-popup-overlay{
    position:fixed;
    inset:0;
    z-index:99998;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.mkt-popup-box{
    background:rgba(12,12,12,0.98);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:28px;
    padding:40px 32px;
    max-width:420px;
    width:100%;
    text-align:center;
    position:relative;
    box-shadow:0 24px 64px rgba(0,0,0,0.6);
    animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}

@keyframes popIn{
    from{ transform:scale(0.85); opacity:0; }
    to{   transform:scale(1);    opacity:1; }
}

.mkt-close{
    position:absolute;
    top:16px;
    right:16px;
    background:rgba(255,255,255,0.06);
    border:none;
    color:rgba(255,255,255,0.5);
    width:30px;
    height:30px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
}

.mkt-close:hover{ background:rgba(255,255,255,0.12); color:white; }

.mkt-popup-logo{
    width:100px;
    margin:0 auto 16px;
    display:block;
}

.mkt-popup-box h2{
    color:white;
    font-size:24px;
    font-weight:900;
    margin-bottom:10px;
}

.mkt-popup-box p{
    color:rgba(255,255,255,0.5);
    font-size:14px;
    margin-bottom:20px;
    line-height:1.5;
}

.mkt-popup-perks{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:22px;
    text-align:left;
}

.mkt-perk{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,0.7);
    font-size:14px;
}

.mkt-perk i{ color:#71ff00; width:16px; }

.mkt-popup-cta{
    display:block;
    padding:15px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:15px;
    border-radius:14px;
    text-decoration:none;
    margin-bottom:10px;
    transition:0.3s;
    cursor:pointer;
    border:none;
    width:100%;
    font-family:inherit;
}

.mkt-popup-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(113,255,0,0.35); }

.mkt-popup-skip{
    background:none;
    border:none;
    color:rgba(255,255,255,0.3);
    font-size:13px;
    cursor:pointer;
    font-family:inherit;
    margin-top:4px;
}

/* Promo toast */
.sokoni-promo-toast{
    position:fixed;
    bottom:90px;
    left:16px;
    z-index:9997;
    animation:slideInLeft 0.4s ease;
}

.spt-inner{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(12,12,12,0.97);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:14px;
    padding:12px 16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
    max-width:280px;
}

.spt-logo{ width:28px; height:28px; border-radius:6px; object-fit:contain; flex-shrink:0; }
.spt-inner span{ color:white; font-size:13px; font-weight:500; flex:1; line-height:1.4; }
.spt-inner button{ background:none; border:none; color:rgba(255,255,255,0.35); cursor:pointer; font-size:14px; flex-shrink:0; }

/* =========================
   FOOTER — PREMIUM
========================= */

.footer-links a{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,0.5);
    text-decoration:none;
    font-size:13px;
    padding:4px 0;
    transition:0.2s;
}

.footer-links a:hover{
    color:#71ff00;
    transform:translateX(4px);
}

.footer-links a i{ width:14px; flex-shrink:0; }

.footer-social-mini{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}

.footer-social-mini a{
    color:#71ff00;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.footer-social-mini span{
    color:rgba(255,255,255,0.2);
}

/* =========================
   BOTTOM NAV — PREMIUM
========================= */

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:9996;
    display:flex;
    align-items:center;
    background:rgba(8,8,8,0.97);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(255,255,255,0.1);
    padding:0;
    height:66px;
}

.bnav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:rgba(255,255,255,0.85);
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    transition:0.2s ease;
    height:100%;
    border:none;
    background:none;
    cursor:pointer;
    padding:10px 0;
    letter-spacing:0.3px;
}

.bnav-item i{
    font-size:21px;
    color:white;
}

.bnav-item span{
    color:rgba(255,255,255,0.85);
}

.bnav-item:hover,
.active-bnav{
    color:#71ff00;
}

.bnav-item:hover i,
.active-bnav i{
    color:#71ff00;
}

.bnav-item:hover span,
.active-bnav span{
    color:#71ff00;
}

.bnav-flash{
    color:#ff8800 !important;
}

.bnav-flash i{ color:#ff8800 !important; }
.bnav-flash span{ color:#ff8800 !important; }

/* =========================
   SOCIAL SECTION
========================= */

.sokoni-social-section{
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:48px 28px;
}

.social-section-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:1200px;
    margin:0 auto;
    align-items:center;
}

.social-badge{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.6);
    padding:5px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
    margin-bottom:14px;
}

.social-left h2{
    font-size:30px;
    font-weight:900;
    color:white;
    margin-bottom:10px;
}

.social-left p{
    color:rgba(255,255,255,0.45);
    font-size:15px;
    margin-bottom:22px;
    line-height:1.5;
}

.social-handles{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.social-handle-pill{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 16px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:0.25s;
}

.social-handle-pill:hover{
    background:rgba(255,255,255,0.12);
    transform:translateY(-2px);
}

.social-whatsapp{ border-color:rgba(37,211,102,0.3); }
.social-whatsapp:hover{ background:rgba(37,211,102,0.1); color:#25d366; }

.social-share-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(113,255,0,0.15);
    border-radius:24px;
    padding:32px;
    text-align:center;
}

.social-share-card h3{
    color:white;
    font-size:20px;
    font-weight:800;
    margin-bottom:10px;
}

.social-share-card p{
    color:rgba(255,255,255,0.45);
    font-size:14px;
    line-height:1.5;
    margin-bottom:20px;
}

.social-share-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:15px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:0.3s;
    font-family:inherit;
    margin-bottom:10px;
}

.social-share-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(113,255,0,0.35); }

.social-join-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:13px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    color:white;
    font-weight:700;
    font-size:14px;
    border-radius:14px;
    text-decoration:none;
    transition:0.3s;
}

.social-join-btn:hover{ background:rgba(255,255,255,0.12); }

/* =========================
   PWA INSTALL PROMPT
========================= */

.pwa-install-prompt{
    position:fixed;
    bottom:74px;
    left:16px;
    right:16px;
    z-index:9995;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(12,12,12,0.97);
    border:1px solid rgba(113,255,0,0.25);
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter:blur(16px);
    max-width:500px;
    margin:0 auto;
}

.pwa-logo{ width:36px; height:36px; border-radius:8px; object-fit:contain; flex-shrink:0; }

.pwa-text{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.pwa-text strong{ color:white; font-size:14px; }
.pwa-text span{ color:rgba(255,255,255,0.45); font-size:12px; }

.pwa-install-btn{
    padding:8px 18px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:13px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    font-family:inherit;
    transition:0.25s;
}

.pwa-install-btn:hover{ transform:scale(1.04); }

.pwa-dismiss-btn{
    background:none;
    border:none;
    color:rgba(255,255,255,0.35);
    font-size:16px;
    cursor:pointer;
    padding:4px;
    flex-shrink:0;
}

/* =========================
   DELIVERY MANAGEMENT
========================= */

.delivery-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
}

.del-stat-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    padding:24px;
    text-align:center;
    backdrop-filter:blur(12px);
    transition:0.3s;
}

.del-stat-card:hover{ transform:translateY(-4px); border-color:rgba(113,255,0,0.2); }
.del-stat-card h3{ font-size:36px; font-weight:900; margin-bottom:6px; color:#71ff00; }
.del-stat-card p{ color:rgba(255,255,255,0.45); font-size:13px; font-weight:600; }
.del-stat-card .stat-icon{ font-size:24px; margin-bottom:8px; }

.delivery-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
    flex-wrap:wrap;
}

.drow-id{ color:white; font-weight:800; font-size:15px; margin-bottom:4px; }
.drow-meta{ color:rgba(255,255,255,0.4); font-size:12px; margin-bottom:4px; }
.drow-phone{ color:rgba(255,255,255,0.6); font-size:13px; }
.drow-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.drow-status{ font-size:12px; font-weight:700; }

/* Responsive social + delivery */
@media(max-width:900px){
    .social-section-content{ grid-template-columns:1fr; }
    .delivery-stats{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
    .delivery-stats{ grid-template-columns:1fr 1fr; }
    .social-handles{ gap:6px; }
    .social-handle-pill{ font-size:12px; padding:7px 12px; }
}

/* =============================================
   PREMIUM CATEGORY CARDS (categories-premium)
   ============================================= */

.categories-premium{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
    padding:14px 28px 32px;
}

.cat-card-premium{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 16px;
    border-radius:20px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    text-decoration:none;
    overflow:hidden;
    transition:0.35s ease;
    cursor:pointer;
    backdrop-filter:blur(12px);
}

.cat-card-premium:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,0.18);
    box-shadow:0 14px 36px rgba(0,0,0,0.3);
}

/* Animated glow blob */
.ccp-glow{
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    opacity:0.12;
    right:-20px;
    top:-20px;
    filter:blur(24px);
    transition:0.4s ease;
    pointer-events:none;
}

.cat-card-premium:hover .ccp-glow{
    opacity:0.25;
    transform:scale(1.3);
}

/* Icon container */
.ccp-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:rgba(255,255,255,0.07);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:26px;
    overflow:hidden;
}

.ccp-icon img{
    width:36px;
    height:36px;
    object-fit:contain;
}

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

.ccp-info h3{
    color:white;
    font-size:14px;
    font-weight:700;
    margin-bottom:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ccp-info p{
    color:rgba(255,255,255,0.4);
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ccp-arrow{
    color:rgba(255,255,255,0.25);
    font-size:18px;
    flex-shrink:0;
    transition:0.3s;
}

.cat-card-premium:hover .ccp-arrow{
    color:white;
    transform:translateX(4px);
}

/* ── Per-category colour accents ── */
.cat-fashion      { border-color:rgba(255,100,180,0.2); }
.cat-fashion      .ccp-glow { background:#ff64b4; }
.cat-fashion:hover{ border-color:rgba(255,100,180,0.4); }

.cat-electronics  { border-color:rgba(0,180,255,0.2); }
.cat-electronics  .ccp-glow { background:#00b4ff; }
.cat-electronics:hover{ border-color:rgba(0,180,255,0.4); }

.cat-beauty       { border-color:rgba(255,160,80,0.2); }
.cat-beauty       .ccp-glow { background:#ffa050; }
.cat-beauty:hover { border-color:rgba(255,160,80,0.4); }

.cat-printing     { border-color:rgba(113,255,0,0.2); }
.cat-printing     .ccp-glow { background:#71ff00; }
.cat-printing:hover{ border-color:rgba(113,255,0,0.4); }

.cat-accessories  { border-color:rgba(200,160,255,0.2); }
.cat-accessories  .ccp-glow { background:#c8a0ff; }
.cat-accessories:hover{ border-color:rgba(200,160,255,0.4); }

.cat-cars         { border-color:rgba(255,80,80,0.2); }
.cat-cars         .ccp-glow { background:#ff5050; }
.cat-cars:hover   { border-color:rgba(255,80,80,0.4); }

.cat-luxury       { border-color:rgba(255,215,0,0.25); }
.cat-luxury       .ccp-glow { background:#ffd700; }
.cat-luxury:hover { border-color:rgba(255,215,0,0.45); }

.cat-food         { border-color:rgba(80,220,80,0.2); }
.cat-food         .ccp-glow { background:#50dc50; }
.cat-food:hover   { border-color:rgba(80,220,80,0.4); }

.cat-sports       { border-color:rgba(255,130,0,0.2); }
.cat-sports       .ccp-glow { background:#ff8200; }
.cat-sports:hover { border-color:rgba(255,130,0,0.4); }

.cat-health       { border-color:rgba(0,220,180,0.2); }
.cat-health       .ccp-glow { background:#00dcb4; }
.cat-health:hover { border-color:rgba(0,220,180,0.4); }

.cat-home         { border-color:rgba(140,200,255,0.2); }
.cat-home         .ccp-glow { background:#8cc8ff; }
.cat-home:hover   { border-color:rgba(140,200,255,0.4); }

.cat-books        { border-color:rgba(255,200,100,0.2); }
.cat-books        .ccp-glow { background:#ffc864; }
.cat-books:hover  { border-color:rgba(255,200,100,0.4); }

.cat-agri         { border-color:rgba(100,200,50,0.2); }
.cat-agri         .ccp-glow { background:#64c832; }
.cat-agri:hover   { border-color:rgba(100,200,50,0.4); }

.cat-bnb          { border-color:rgba(255,100,100,0.2); }
.cat-bnb          .ccp-glow { background:#ff6464; }
.cat-bnb:hover    { border-color:rgba(255,100,100,0.4); }

.cat-property     { border-color:rgba(80,160,255,0.2); }
.cat-property     .ccp-glow { background:#50a0ff; }
.cat-property:hover{ border-color:rgba(80,160,255,0.4); }

.cat-all          { border-color:rgba(113,255,0,0.15); }
.cat-all          .ccp-glow { background:#71ff00; }
.cat-all:hover    { border-color:rgba(113,255,0,0.35); background:rgba(113,255,0,0.06); }

/* Responsive */
@media(max-width:900px){ .categories-premium{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px){ .categories-premium{ grid-template-columns:repeat(2,1fr); gap:10px; padding:10px 14px 24px; } }
@media(max-width:360px){ .categories-premium{ grid-template-columns:repeat(2,1fr); } .ccp-info p{ display:none; } }

/* ==============================================
   PRODUCT BUTTONS — BALANCED (final override)
   ============================================== */

.product-buttons{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:8px;
    padding:0;
    margin-top:14px;
    align-items:stretch;
}

.product-btn{
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    font-family:inherit;
    transition:0.25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:11px 8px;
    line-height:1;
    white-space:nowrap;
}

/* Cart — green, left column, full width */
.add-cart-btn{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
}

.add-cart-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(113,255,0,0.35);
}

/* Wishlist — icon only, square, middle column */
.wishlist-btn{
    background:rgba(255,45,85,0.12);
    border:1px solid rgba(255,45,85,0.25);
    color:#ff2d55;
    width:42px;
    padding:11px 0;
    font-size:16px;
}

.wishlist-btn:hover{
    background:rgba(255,45,85,0.22);
    transform:scale(1.08);
}

/* Buy — orange, right column, full width */
.buy-btn{
    background:linear-gradient(135deg,#ff8c00,#ff6000);
    color:white;
}

.buy-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(255,140,0,0.35);
}

.product-btn:active{
    transform:scale(0.96) !important;
}

/* =========================
   COMPREHENSIVE LIGHT MODE
========================= */

/* ---- BODY & BASE ---- */
body.light-mode{
    background:#f0f4f8;
    color:#111;
}

/* ---- NAVBAR ---- */
body.light-mode .navbar{
    background:rgba(255,255,255,0.97);
    border-bottom-color:rgba(0,0,0,0.08);
}
body.light-mode .navbar *{ color:#111; }
body.light-mode .search-bar input{
    background:#fff;
    color:#111;
    border-color:rgba(0,0,0,0.12);
}
body.light-mode .search-bar input::placeholder{ color:rgba(0,0,0,0.4); }
body.light-mode .search-suggestions{ background:#fff; border:1px solid rgba(0,0,0,0.08); }
body.light-mode .search-item{ color:#111; }
body.light-mode .search-item:hover{ background:#f5f5f5; }

/* ---- SECTION TITLES ---- */
body.light-mode .section-title h2,
body.light-mode .new-arrivals-title-row h2,
body.light-mode .trending-title-col h2,
body.light-mode .recommended-section h2,
body.light-mode .related-section h2,
body.light-mode .reviews-section h2{ color:#111; }

/* ---- PRODUCT CARDS ---- */
body.light-mode .product-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
body.light-mode .product-card h3,
body.light-mode .product-name{ color:#111 !important; }
body.light-mode .product-card p,
body.light-mode .product-desc-text{ color:#555 !important; }
body.light-mode .view-counter{ color:#777; }
body.light-mode .product-location-tag{ color:#0077cc; }

/* ---- CATEGORY CARDS ---- */
body.light-mode .category-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
    color:#111;
}
body.light-mode .category-card:hover{
    background:#f0fff0;
    border-color:rgba(113,255,0,0.4);
}

/* ---- RECOMMENDED / RELATED CARDS ---- */
body.light-mode .recommended-card,
body.light-mode .related-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .recommended-card h3,
body.light-mode .related-card h3{ color:#111; }

/* ---- SELLER STAT CARDS (index page) ---- */
body.light-mode .seller-stat-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .seller-stat-card p{ color:#444; }

/* ---- PRODUCT MODALS ---- */
body.light-mode .premium-product-modal{ background:rgba(0,0,0,0.6); }
body.light-mode .premium-modal-box{ background:#fff; }
body.light-mode .premium-modal-right h1,
body.light-mode .modal-right h2{ color:#111; }
body.light-mode .premium-modal-description,
body.light-mode .modal-description{ color:#444; }
body.light-mode .modal-features{ color:#444; }
body.light-mode .modal-badge{ color:#22a000; }
body.light-mode .premium-modal-left{ background:#f4f4f4; }
body.light-mode .modal-image-wrapper{ background:#eee; }
body.light-mode .close-modal{ color:#111; }

/* ---- QUICK VIEW MODAL ---- */
body.light-mode .quick-view-modal{ background:rgba(0,0,0,0.5); }
body.light-mode .quick-view-box{ background:#fff; }
body.light-mode .quick-view-box h2{ color:#111; }
body.light-mode .close-quick-view{ color:#111; }

/* ---- BOTTOM NAV ---- */
body.light-mode .bottom-nav{
    background:rgba(255,255,255,0.97);
    border-top-color:rgba(0,0,0,0.1);
}
body.light-mode .bottom-nav a,
body.light-mode .bnav-item,
body.light-mode .bnav-item i,
body.light-mode .bnav-item span{ color:#333 !important; }
body.light-mode .bnav-item:hover,
body.light-mode .active-bnav,
body.light-mode .bnav-item:hover i,
body.light-mode .active-bnav i,
body.light-mode .bnav-item:hover span,
body.light-mode .active-bnav span{ color:#22a000 !important; }
body.light-mode .bnav-flash,
body.light-mode .bnav-flash i,
body.light-mode .bnav-flash span{ color:#e07000 !important; }

/* ---- FILTER BAR ---- */
body.light-mode .filter-bar button,
body.light-mode .cat-filter-btn{
    background:#fff;
    color:#333;
    border-color:rgba(0,0,0,0.1);
}
body.light-mode .filter-bar button:hover,
body.light-mode .cat-filter-btn:hover{ background:#22a000; color:#fff; }
body.light-mode .cat-filter-active{ background:#22a000 !important; color:#fff !important; }

/* ---- LIVE POPUP ---- */
body.light-mode .live-popup,
body.light-mode .live-popup-inner{
    background:#fff;
    border-color:rgba(0,0,0,0.1);
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
}
body.light-mode .live-popup-text{ color:#444; }
body.light-mode .live-popup-text strong{ color:#111; }

/* ---- MARKETPLACE STATS ---- */
body.light-mode .marketplace-stats{
    background:rgba(113,255,0,0.04);
    border-color:rgba(113,255,0,0.15);
}
body.light-mode .mstat-label{ color:rgba(0,0,0,0.5); }

/* ---- SOCIAL SECTION ---- */
body.light-mode .sokoni-social-section{
    background:#fff;
    border-color:rgba(0,0,0,0.06);
}
body.light-mode .social-left h2,
body.light-mode .social-share-card h3{ color:#111; }
body.light-mode .social-left p,
body.light-mode .social-share-card p{ color:#555; }
body.light-mode .social-badge{
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.1);
    color:#555;
}
body.light-mode .social-handle-pill{
    background:#fff;
    border-color:rgba(0,0,0,0.1);
    color:#333;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
body.light-mode .social-share-card{
    background:#f8fdf0;
    border-color:rgba(113,255,0,0.25);
}
body.light-mode .social-join-btn{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.1);
    color:#333;
}

/* ---- REVIEWS ---- */
body.light-mode .reviews-hero h1,
body.light-mode .write-review-box h3{ color:#111; }
body.light-mode .reviews-hero p{ color:#666; }
body.light-mode .reviews-platform-stats{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .rps-item{ border-right-color:rgba(0,0,0,0.06); }
body.light-mode .rps-label{ color:#666; }
body.light-mode .write-review-box{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .review-textarea{
    background:#f5f5f5;
    border-color:rgba(0,0,0,0.1);
    color:#111;
}
body.light-mode .review-textarea::placeholder{ color:rgba(0,0,0,0.35); }
body.light-mode .rev-tab{
    background:#fff;
    border-color:rgba(0,0,0,0.1);
    color:#555;
}
body.light-mode .rev-tab:hover{ background:#f0f0f0; color:#111; }
body.light-mode .review-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .review-card p{ color:#444; }
body.light-mode .star-pick{ color:rgba(0,0,0,0.15); }

/* ---- PROFILE PAGE ---- */
body.light-mode .profile-page{ background:#f0f4f8; }
body.light-mode .profile-sidebar,
body.light-mode .profile-content .profile-stat-card,
body.light-mode .profile-orders,
body.light-mode .profile-points-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .profile-sidebar h2{ color:#111; }
body.light-mode .profile-sidebar p{ color:#555; }
body.light-mode .profile-stat-card p{ color:#555; }
body.light-mode .profile-order-card{
    background:#f9f9f9;
    border-color:rgba(0,0,0,0.07);
}
body.light-mode .profile-order-card h3{ color:#111; }
body.light-mode .profile-order-card p{ color:#666; }
body.light-mode .profile-orders h2{ color:#111; }
body.light-mode .points-tier-badge{ background:rgba(113,255,0,0.1); border-color:rgba(113,255,0,0.3); }
body.light-mode .points-total{ color:#111; }
body.light-mode .points-next{ color:#666; }
body.light-mode .reward-item{ background:#f5f5f5; border-color:rgba(0,0,0,0.07); }
body.light-mode .reward-info strong{ color:#111; }
body.light-mode .reward-info span{ color:#666; }
body.light-mode .reward-locked{ background:rgba(0,0,0,0.05); color:#888; }

/* ---- CART PAGE ---- */
body.light-mode .cart-page{ color:#111; }
body.light-mode .cart-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .cart-info h2{ color:#111; }
body.light-mode .cart-total{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
    color:#111;
}

/* ---- WISHLIST PAGE ---- */
body.light-mode .wishlist-page{ color:#111; }
body.light-mode .wishlist-page h1{ color:#111; }
body.light-mode .wishlist-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .wishlist-card h2{ color:#111; }

/* ---- CHECKOUT + AUTH ---- */
body.light-mode .checkout-page{ background:#f0f4f8; color:#111; }
body.light-mode .checkout-form,
body.light-mode .order-summary{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .checkout-form h2,
body.light-mode .order-summary h2{ color:#111; }
body.light-mode .checkout-form input,
body.light-mode .checkout-form textarea{
    background:#f5f5f5;
    color:#111;
    border:1px solid rgba(0,0,0,0.1);
}
body.light-mode .auth-container{
    background:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),
    url("assets/sokoni footer.png") center/cover;
}
body.light-mode .auth-box{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
}
body.light-mode .auth-box h1,
body.light-mode .auth-box h2{ color:#111; }
body.light-mode .auth-box p{ color:#555; }
body.light-mode .auth-box input{
    background:#f5f5f5;
    color:#111;
    border:1px solid rgba(0,0,0,0.1);
}

/* ---- FLASH SALE PAGE ---- */
body.light-mode .fs-header{ filter:none; }
body.light-mode .flash-discount-badge{ background:linear-gradient(135deg,#e65000,#ff8800); }
body.light-mode section[style*="padding:28px"]{
    background:#f0f4f8;
}

/* ---- FOOTER ---- */
body.light-mode .footer{
    background:linear-gradient(135deg,#f8fdf4,#f0f8f0);
    border-top:1px solid rgba(0,0,0,0.08);
}
body.light-mode .footer::before{ opacity:0.06; }
body.light-mode .footer-brand p,
body.light-mode .footer-links a{ color:#444; }
body.light-mode .footer-links h3{ color:#22a000; }
body.light-mode .footer-bottom p{ color:#555; }
body.light-mode .socials a{
    border-color:rgba(0,0,0,0.15);
    color:#333;
}

/* ---- GLASS HERO BANNER ---- */
body.light-mode .glass-hero-card{
    background:rgba(255,255,255,0.85);
    border-color:rgba(0,0,0,0.1);
    box-shadow:0 24px 64px rgba(0,0,0,0.12);
}

/* ---- NAV PROFILE AVATAR ---- */
body.light-mode .nav-profile-avatar{
    background:rgba(0,0,0,0.06);
    border-color:rgba(0,0,0,0.12);
    color:#111;
}

/* ---- PAYMENT OPTIONS (checkout) ---- */
body.light-mode .payment-options button{
    background:#f0f0f0;
    color:#111;
    border:1px solid rgba(0,0,0,0.1);
}

/* =========================
   PRODUCT BUTTONS — EQUAL 3-WAY (global fix)
========================= */

/* product-body: top padding for content, bottom comes from button row padding */
.product-body{
    padding:14px 0 0 !important;
    overflow:visible !important;
}

.product-body .product-top-row,
.product-body .product-name,
.product-body .product-desc-text,
.product-body .price,
.product-body .view-counter{
    padding-left:14px;
    padding-right:14px;
}

.product-body .price{ padding-bottom:10px; }

/* ─────────────────────────────────────────────
   PRODUCT CARD BUTTONS — ghost style matching
   the Share / Offer buttons below them
───────────────────────────────────────────── */

/* Container row — same left/right/bottom padding as the share row */
.product-card .product-buttons{
    display:flex !important;
    gap:6px !important;
    padding:4px 10px 12px !important;
    margin-top:auto !important;
    border-top:none !important;
    overflow:visible !important;   /* must NOT be hidden — kills border-radius */
}

/* Base button reset — NO overflow:hidden (it prevented rounded corners in WebKit) */
.product-card .product-btn{
    flex:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:0 !important;
    padding:7px 6px !important;
    font-size:11px !important;
    font-weight:700 !important;
    border-radius:8px !important;   /* same as Share button */
    cursor:pointer !important;
    transition:filter .18s ease, transform .15s ease !important;
    white-space:nowrap !important;
    line-height:1.2 !important;
    font-family:inherit !important;
    overflow:visible !important;
}

.product-card .product-btn:hover{
    filter:brightness(1.2) !important;
    transform:translateY(-1px) !important;
}
.product-card .product-btn:active{
    transform:scale(0.95) !important;
}

/* Ghost colours — identical formula to Share & Offer row */
.product-card .add-cart-btn{
    background:rgba(113,255,0,0.08) !important;
    border:1px solid rgba(113,255,0,0.25) !important;
    color:#71ff00 !important;
}
.product-card .wishlist-btn{
    background:rgba(255,45,85,0.08) !important;
    border:1px solid rgba(255,45,85,0.25) !important;
    color:#ff4d6d !important;
    flex:0 0 auto !important;
    width:34px !important;
    padding:7px 0 !important;
    font-size:14px !important;
    overflow:visible !important;
}
.product-card .buy-btn{
    background:rgba(255,140,0,0.08) !important;
    border:1px solid rgba(255,140,0,0.25) !important;
    color:#ff9800 !important;
}
.product-card .view-btn{
    background:rgba(255,255,255,0.05) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    color:rgba(255,255,255,0.6) !important;
}

/* Light mode */
body.light-mode .product-card .product-buttons{ border-top:none !important; }
body.light-mode .product-card .add-cart-btn{ background:rgba(113,255,0,0.08) !important; border-color:rgba(113,255,0,0.35) !important; }
body.light-mode .product-card .wishlist-btn{ background:rgba(255,45,85,0.07) !important;  border-color:rgba(255,45,85,0.3)  !important; }
body.light-mode .product-card .buy-btn{      background:rgba(255,140,0,0.07) !important;  border-color:rgba(255,140,0,0.3)  !important; }

/* =========================
   DISTANCE BADGE ON PRODUCT CARDS
========================= */

.distance-badge{
    display:inline-flex;
    align-items:center;
    font-size:11px;
    font-weight:700;
    padding:3px 10px 8px 14px;
    letter-spacing:0.2px;
}

.dist-near{ color:#71ff00; }
.dist-mid{ color:rgba(255,255,255,0.5); }
.dist-far{ color:rgba(255,255,255,0.3); }

/* =========================
   ABANDONED CART RECOVERY TOAST
========================= */

.abandoned-cart-toast{
    position:fixed;
    bottom:80px;
    left:20px;
    z-index:99998;
    display:flex;
    align-items:center;
    gap:12px;
    background:#111;
    border:1px solid rgba(113,255,0,0.3);
    border-radius:18px;
    padding:14px 16px;
    max-width:340px;
    box-shadow:0 12px 40px rgba(0,0,0,0.6);
    animation:toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.act-icon{ font-size:24px; flex-shrink:0; }
.act-body{ flex:1; min-width:0; }
.act-body strong{ display:block; color:white; font-size:13px; font-weight:800; margin-bottom:2px; }
.act-body p{ color:rgba(255,255,255,0.45); font-size:12px; }

.act-btn{
    padding:8px 14px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:12px;
    border-radius:10px;
    text-decoration:none;
    white-space:nowrap;
    flex-shrink:0;
}

.act-close{
    background:none;
    border:none;
    color:rgba(255,255,255,0.3);
    cursor:pointer;
    font-size:14px;
    padding:0;
    flex-shrink:0;
    transition:0.2s;
}

.act-close:hover{ color:white; }

/* =========================
   SAVED SEARCH PILLS
========================= */

.saved-search-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    color:rgba(255,255,255,0.65);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
    font-family:inherit;
}

.saved-search-pill:hover{
    background:rgba(113,255,0,0.1);
    border-color:rgba(113,255,0,0.3);
    color:#71ff00;
}

/* =========================
   VERIFIED SELLER BADGE ON CARDS
========================= */

.seller-verified-badge{
    display:inline-block;
    font-size:10px;
    font-weight:800;
    color:#00aaff;
    background:rgba(0,170,255,0.1);
    border:1px solid rgba(0,170,255,0.25);
    border-radius:999px;
    padding:2px 8px;
    margin:0 14px 6px;
    letter-spacing:0.3px;
}

/* =========================
   STAR RATINGS ON CARDS
========================= */

.product-rating-row{
    display:flex;
    align-items:center;
    gap:6px;
    padding:2px 14px 6px;
}

.product-stars{
    color:#ffc107;
    font-size:12px;
    letter-spacing:1px;
}

.product-rating-count{
    font-size:11px;
    color:rgba(255,255,255,0.4);
    font-weight:600;
}

/* =========================
   PRICE CHANGE BADGE ON CARDS
========================= */

.price-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding-left:14px;
    padding-right:14px;
    padding-bottom:8px;
}

.price-change-badge{
    font-size:10px;
    font-weight:800;
    padding:3px 8px;
    border-radius:999px;
    letter-spacing:0.3px;
    white-space:nowrap;
}

.price-up{
    background:rgba(255,68,68,0.12);
    border:1px solid rgba(255,68,68,0.25);
    color:#ff6b6b;
}

.price-down{
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    color:#71ff00;
}

/* =========================
   WISHLIST DEMAND BADGE
========================= */

.wishlist-demand-badge{
    font-size:11px;
    color:rgba(255,77,109,0.8);
    font-weight:700;
    padding:3px 14px 8px;
    letter-spacing:0.2px;
}

.demand-hot{
    color:#ff4d6d;
    font-weight:900;
}

/* =========================
   COMPARE BUTTON ON CARDS
========================= */

.compare-icon-btn{
    position:absolute;
    top:12px;
    left:12px;
    z-index:6;
    width:28px;
    height:28px;
    border-radius:8px;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.7);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
    line-height:1;
}

.compare-icon-btn:hover,
.compare-icon-btn.compare-active{
    background:rgba(113,255,0,0.25);
    border-color:rgba(113,255,0,0.5);
    color:#71ff00;
}

/* =========================
   COMPARE BAR (floating)
========================= */

.compare-bar{
    position:fixed;
    bottom:66px; /* above bottom-nav */
    left:0; right:0;
    z-index:9990;
    background:rgba(10,10,10,0.97);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(113,255,0,0.2);
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    box-shadow:0 -8px 32px rgba(0,0,0,0.5);
    animation:slideUpBar 0.3s ease;
}

@keyframes slideUpBar{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}

.cb-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    flex:1;
}

.cb-title{
    font-size:13px;
    font-weight:800;
    color:#71ff00;
    white-space:nowrap;
}

.cb-item{
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    padding:5px 10px;
    font-size:12px;
    color:white;
    font-weight:600;
}

.cb-item img{
    width:28px;
    height:28px;
    border-radius:6px;
    object-fit:cover;
}

.cb-item button{
    background:none;
    border:none;
    color:rgba(255,255,255,0.4);
    cursor:pointer;
    font-size:11px;
    padding:0;
    line-height:1;
    transition:0.15s;
}

.cb-item button:hover{ color:#ff4444; }

.cb-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.cb-compare-btn{
    padding:10px 20px;
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-weight:800;
    font-size:13px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:0.2s;
    font-family:inherit;
    white-space:nowrap;
}

.cb-compare-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(113,255,0,0.3); }

.cb-clear-btn{
    padding:10px 14px;
    background:rgba(255,61,61,0.1);
    border:1px solid rgba(255,61,61,0.2);
    color:#ff6b6b;
    font-size:12px;
    font-weight:700;
    border-radius:10px;
    cursor:pointer;
    font-family:inherit;
    transition:0.2s;
}

.cb-clear-btn:hover{ background:rgba(255,61,61,0.2); }

/* =========================
   COMPARE MODAL
========================= */

.compare-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.88);
    backdrop-filter:blur(16px);
    z-index:99999;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
}

.compare-modal-box{
    width:100%;
    max-width:900px;
    background:#0e0e0e;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    padding:32px;
    position:relative;
    margin:auto;
    animation:modalPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.compare-modal-title{
    font-size:20px;
    font-weight:900;
    color:white;
    margin-bottom:20px;
}

.compare-modal-close{
    position:absolute;
    top:18px; right:22px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    color:white;
    width:34px; height:34px;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
    font-family:inherit;
}

.compare-modal-close:hover{ background:rgba(255,61,61,0.15); color:#ff6b6b; }

.compare-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.compare-table th{
    padding:12px 16px;
    text-align:center;
    font-weight:800;
    color:#71ff00;
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:rgba(113,255,0,0.04);
}

.compare-table th:first-child{
    text-align:left;
    color:rgba(255,255,255,0.45);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.compare-row-label{
    padding:12px 16px;
    color:rgba(255,255,255,0.45);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    vertical-align:middle;
    white-space:nowrap;
}

.compare-row-val{
    padding:12px 16px;
    text-align:center;
    color:rgba(255,255,255,0.8);
    border-bottom:1px solid rgba(255,255,255,0.04);
    vertical-align:middle;
}

.compare-table tr:last-child td{ border-bottom:none; }
.compare-table tr:hover td{ background:rgba(255,255,255,0.02); }

/* =========================
   BULK UPLOAD SECTION
========================= */

.bulk-upload-area{
    border:2px dashed rgba(113,255,0,0.25);
    border-radius:18px;
    padding:40px 20px;
    text-align:center;
    cursor:pointer;
    transition:0.3s ease;
    background:rgba(113,255,0,0.03);
    margin-bottom:16px;
}

.bulk-upload-area:hover{
    border-color:rgba(113,255,0,0.5);
    background:rgba(113,255,0,0.06);
}

.bulk-upload-icon{ font-size:40px; margin-bottom:10px; }

.bulk-upload-text{
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,0.7);
    line-height:1.6;
}

.bulk-upload-text span{ font-size:12px; color:rgba(255,255,255,0.35); }

.bulk-template-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

/* Q&A SELLER ROW */
.qa-seller-row{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:14px;
    padding:16px;
    margin-bottom:12px;
}

.qa-product-tag{
    font-size:10px;
    font-weight:800;
    color:#71ff00;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:6px;
    background:rgba(113,255,0,0.08);
    border:1px solid rgba(113,255,0,0.15);
    border-radius:6px;
    padding:2px 8px;
    display:inline-block;
}

.qa-question-text{
    font-size:14px;
    font-weight:700;
    color:white;
    margin-bottom:4px;
}

.qa-asker-info{
    font-size:11px;
    color:rgba(255,255,255,0.35);
    margin-bottom:12px;
}

.qa-answer-area{
    display:flex;
    gap:10px;
    align-items:flex-end;
}

.qa-answer-input{
    flex:1;
    padding:10px 14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    color:white;
    font-size:13px;
    outline:none;
    resize:none;
    font-family:inherit;
    min-height:60px;
}

.qa-answer-input:focus{ border-color:rgba(113,255,0,0.35); }

/* Light mode */
body.light-mode .compare-bar{ background:rgba(255,255,255,0.97); border-top-color:rgba(113,255,0,0.2); }
body.light-mode .cb-title{ color:#22a000; }
body.light-mode .cb-item{ background:#f5f5f5; border-color:rgba(0,0,0,0.1); color:#111; }
body.light-mode .compare-modal-box{ background:#fff; border-color:rgba(0,0,0,0.08); }
body.light-mode .compare-modal-title{ color:#111; }
body.light-mode .compare-row-label{ color:#888; }
body.light-mode .compare-row-val{ color:#333; }
body.light-mode .compare-table th:first-child{ color:#888; }
body.light-mode .bulk-upload-area{ background:rgba(113,255,0,0.04); border-color:rgba(113,255,0,0.2); }
body.light-mode .bulk-upload-text{ color:#444; }

/* =========================
   OUT-OF-STOCK CARD STYLING
========================= */

.oos-card{ opacity:0.72; }

.oos-overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(4px);
    color:white;
    font-size:13px;
    font-weight:900;
    padding:10px 22px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.2);
    z-index:10;
    pointer-events:none;
    letter-spacing:0.5px;
    white-space:nowrap;
}

.oos-card .product-btn:disabled{
    opacity:0.35;
    cursor:not-allowed !important;
}

.oos-card .product-btn:disabled:hover{
    filter:none !important;
    background:inherit !important;
}

/* =========================
   NEW ARRIVALS — BIGGER CART & BUY BUTTONS
========================= */

/* New Arrivals — taller buttons, cart+buy proportionally wider */
.new-arrivals-grid .product-card .product-btn{
    padding:16px 12px !important;
    font-size:13px !important;
    font-weight:800 !important;
}

/* Cart and Buy take proportionally more width than Wish */
.new-arrivals-grid .product-card .add-cart-btn,
.new-arrivals-grid .product-card .buy-btn{
    flex:1.3 !important;
}

.new-arrivals-grid .product-card .wishlist-btn{
    flex:0.75 !important;
    padding:16px 6px !important;
}

/* =========================
   KEBS BADGES
========================= */

.kebs-badge{
    position:absolute;
    top:46px;
    left:12px;
    z-index:4;
    font-size:10px;
    font-weight:800;
    padding:3px 8px;
    border-radius:8px;
    letter-spacing:0.3px;
    pointer-events:none;
}

.kebs-certified{
    background:rgba(0,180,100,0.18);
    border:1px solid rgba(0,200,120,0.4);
    color:#00c864;
}

.kebs-unverified{
    background:rgba(255,152,0,0.14);
    border:1px solid rgba(255,152,0,0.3);
    color:#ff9800;
}

/* =========================
   18+ AGE RESTRICTION BADGE ON CARDS
========================= */

.adult-card-badge{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    background:rgba(220,0,0,0.82);
    color:white;
    font-size:10px;
    font-weight:900;
    padding:4px 8px;
    border-radius:8px;
    letter-spacing:0.5px;
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,100,100,0.4);
    pointer-events:none;
}

/* Age-gate overlay for product card buttons */
.product-card.adult-card .product-btn.add-cart-btn::before,
.product-card.adult-card .product-btn.buy-btn::before{
    content:"🔞 ";
    font-size:10px;
}

/* =========================
   FEATURED SELLER CARDS — PREMIUM
========================= */

.seller-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 20px 22px;
    gap:0;
}

.seller-badge{
    position:absolute;
    top:14px;
    right:14px;
    font-size:10px;
    font-weight:800;
    padding:3px 9px;
    border-radius:999px;
    letter-spacing:0.3px;
}

.verified-badge{
    background:rgba(113,255,0,0.1);
    border:1px solid rgba(113,255,0,0.25);
    color:#71ff00;
}

.seller-location-tag{
    font-size:11px;
    color:rgba(255,255,255,0.4);
    margin:2px 0 8px;
}

.seller-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:16px;
}

.seller-tag{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    padding:3px 10px;
    font-size:11px;
    color:rgba(255,255,255,0.6);
}

.seller-visit-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding:12px 20px;
    border-radius:14px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:0.25s ease;
    margin-top:auto;
}

.seller-visit-btn:hover{
    background:rgba(113,255,0,0.12);
    border-color:rgba(113,255,0,0.35);
    color:#71ff00;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(113,255,0,0.15);
}

.seller-visit-btn.green-btn{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    border:none;
    font-weight:900;
    box-shadow:0 6px 20px rgba(113,255,0,0.25);
}

.seller-visit-btn.green-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(113,255,0,0.4);
    color:black;
}

.become-perks{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:18px;
    align-items:center;
}

.become-perks span{
    font-size:12px;
    color:rgba(255,255,255,0.5);
}

/* Light mode seller cards */
body.light-mode .seller-card{
    background:#fff;
    border-color:rgba(0,0,0,0.08);
    box-shadow:0 4px 20px rgba(0,0,0,0.07);
}
body.light-mode .seller-card h3{ color:#111; }
body.light-mode .seller-location-tag{ color:#666; }
body.light-mode .seller-tag{ background:#f5f5f5; border-color:rgba(0,0,0,0.1); color:#555; }
body.light-mode .seller-rating-text{ color:#666; }
body.light-mode .seller-visit-btn{ background:#f5f5f5; border-color:rgba(0,0,0,0.1); color:#333; }
body.light-mode .seller-visit-btn:hover{ background:rgba(113,255,0,0.1); color:#22a000; }
body.light-mode .become-perks span{ color:#666; }
body.light-mode .verified-badge{ background:rgba(113,255,0,0.08); }

/* ═══════════════════════════════════════
   PWA LIFE — Enhanced Splash & Ambient
═══════════════════════════════════════ */

/* Splash: animated gradient background */
.splash-screen{
    background: radial-gradient(ellipse at 50% 40%, #0f2a00 0%, #0b0b0b 70%);
    animation: splashBg 3s ease-in-out infinite alternate;
}
@keyframes splashBg{
    from{ background: radial-gradient(ellipse at 50% 40%, #0f2a00 0%, #0b0b0b 70%); }
    to  { background: radial-gradient(ellipse at 50% 60%, #001a2e 0%, #0b0b0b 70%); }
}

/* Splash particle canvas */
#splashCanvas{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}

/* Splash tagline */
.splash-tagline{
    font-size:13px;
    font-weight:700;
    color:rgba(113,255,0,0.7);
    letter-spacing:2px;
    text-transform:uppercase;
    margin-top:14px;
    animation: fadeInUp 0.8s ease 0.4s both;
}
@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:translateY(0); }
}

/* Network status toast */
#networkToast{
    position:fixed;
    top:70px;
    left:50%;
    transform:translateX(-50%) translateY(-100px);
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:50px;
    padding:8px 20px;
    font-size:13px;
    font-weight:700;
    color:white;
    z-index:99990;
    display:flex;
    align-items:center;
    gap:8px;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events:none;
    white-space:nowrap;
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
#networkToast.show{ transform:translateX(-50%) translateY(0); }
#networkToast.online { border-color:rgba(113,255,0,0.4); }
#networkToast.offline{ border-color:rgba(255,80,80,0.4); }

/* PWA Install prompt — enhanced */
.pwa-install-prompt{
    border-radius:20px !important;
    animation: pwaSlideIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes pwaSlideIn{
    from{ transform:translateY(120%); opacity:0; }
    to  { transform:translateY(0);    opacity:1; }
}
.pwa-install-prompt::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(113,255,0,0.06) 0%,transparent 60%);
    pointer-events:none;
}

/* Ambient hero pulse ring */
#heroAmbientRing{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:300px;height:300px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(113,255,0,0.08) 0%,transparent 70%);
    pointer-events:none;
    animation:ambientPulse 4s ease-in-out infinite;
}
@keyframes ambientPulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1);   opacity:0.6; }
    50%    { transform:translate(-50%,-50%) scale(1.18); opacity:1;   }
}

/* Pull-to-refresh indicator */
#pullRefreshIndicator{
    position:fixed;
    top:0;left:50%;
    transform:translateX(-50%) translateY(-60px);
    background:linear-gradient(135deg,#71ff00,#4fc800);
    color:black;
    font-size:12px;
    font-weight:900;
    padding:8px 20px;
    border-radius:0 0 20px 20px;
    z-index:99980;
    transition:transform 0.3s ease;
    display:flex;align-items:center;gap:6px;
}
#pullRefreshIndicator.visible{ transform:translateX(-50%) translateY(0); }

/* Category card entrance animation */
@keyframes cardEntrance{
    from{ opacity:0; transform:translateY(20px) scale(0.97); }
    to  { opacity:1; transform:translateY(0)    scale(1);    }
}
.cat-card-animate{
    animation:cardEntrance 0.4s ease both;
}

/* Story ring glow */
.story-ring-glow{
    box-shadow:0 0 0 2px #71ff00, 0 0 12px rgba(113,255,0,0.5);
    animation:storyGlowPulse 2s ease-in-out infinite;
}
@keyframes storyGlowPulse{
    0%,100%{ box-shadow:0 0 0 2px #71ff00,0 0 12px rgba(113,255,0,0.4); }
    50%    { box-shadow:0 0 0 3px #71ff00,0 0 20px rgba(113,255,0,0.7); }
}

/* Floating action button bounce */
@keyframes fabBounce{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-6px); }
}

/* Online indicator dot */
.online-dot{
    display:inline-block;
    width:8px;height:8px;
    background:#71ff00;
    border-radius:50%;
    animation:onlineBlink 2s ease-in-out infinite;
}
@keyframes onlineBlink{
    0%,100%{ opacity:1; transform:scale(1);   }
    50%    { opacity:0.4; transform:scale(0.8); }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM PRODUCT CARD BUTTONS  (pcard-*)
   Replaces old inline-style approach. Applied via buildProductCard().
═══════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.pcard-actions{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:10px 10px 12px;
    border-top:1px solid rgba(255,255,255,0.06);
    margin-top:auto;
}
.pcard-actions--compact{
    padding:8px 8px 10px;
    gap:0;
    border-top:1px solid rgba(255,255,255,0.06);
}

/* ── Button row ── */
.pcard-row{
    display:flex;
    gap:5px;
    width:100%;
}
.pcard-row--secondary{
    /* slightly smaller secondary row */
    gap:5px;
}

/* ── Base button ── */
.pcard-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:9px 6px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    font-family:inherit;
    transition:all .18s cubic-bezier(0.34,1.56,0.64,1);
    white-space:nowrap;
    min-width:0;
    border:1px solid transparent;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pcard-btn span{
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.pcard-btn:hover{ transform:translateY(-2px); }
.pcard-btn:active{ transform:scale(0.95) translateY(0); }
.pcard-btn:disabled{
    opacity:0.35;
    cursor:not-allowed;
    transform:none !important;
    pointer-events:none;
}

/* ── Cart button (ghost green) ── */
.pcard-btn--cart{
    background:rgba(113,255,0,0.09);
    border-color:rgba(113,255,0,0.28);
    color:#71ff00;
}
.pcard-btn--cart:hover{
    background:rgba(113,255,0,0.18);
    box-shadow:0 4px 14px rgba(113,255,0,0.2);
}

/* ── Wishlist button (icon only — no flex:1) ── */
.pcard-btn--wish{
    flex:0 0 auto;
    padding:9px 11px;
    background:rgba(255,45,85,0.08);
    border-color:rgba(255,45,85,0.25);
    color:#ff4d6d;
    font-size:14px;
}
.pcard-btn--wish:hover{
    background:rgba(255,45,85,0.16);
    box-shadow:0 4px 12px rgba(255,45,85,0.2);
}

/* ── Buy Now button (solid primary — most important CTA) ── */
.pcard-btn--buy{
    background:linear-gradient(135deg,#71ff00,#4fc800);
    border-color:transparent;
    color:#050f05;
    font-weight:900;
    letter-spacing:0.01em;
}
.pcard-btn--buy:hover{
    filter:brightness(1.08);
    box-shadow:0 4px 18px rgba(113,255,0,0.35);
}

/* ── Share button ── */
.pcard-btn--share{
    background:rgba(37,211,102,0.09);
    border-color:rgba(37,211,102,0.22);
    color:#25d366;
    font-size:11px;
}
.pcard-btn--share:hover{ background:rgba(37,211,102,0.18); }

/* ── Offer / Chat button ── */
.pcard-btn--offer{
    background:rgba(255,152,0,0.09);
    border-color:rgba(255,152,0,0.22);
    color:#ff9800;
    font-size:11px;
}
.pcard-btn--offer:hover{ background:rgba(255,152,0,0.18); }

/* ── Compact variant — slightly smaller text/padding ── */
.pcard-actions--compact .pcard-btn{
    padding:8px 5px;
    font-size:11px;
    border-radius:9px;
}
.pcard-actions--compact .pcard-btn--wish{
    padding:8px 10px;
}

/* ── Light mode overrides ── */
body.light-mode .pcard-actions{
    border-top-color:rgba(0,0,0,0.08);
}
body.light-mode .pcard-btn--cart{
    background:rgba(34,160,0,0.08);
    border-color:rgba(34,160,0,0.25);
    color:#22a000;
}
body.light-mode .pcard-btn--cart:hover{
    background:rgba(34,160,0,0.16);
}
body.light-mode .pcard-btn--wish{
    background:rgba(220,38,38,0.07);
    border-color:rgba(220,38,38,0.22);
    color:#dc2626;
}
body.light-mode .pcard-btn--buy{
    background:linear-gradient(135deg,#22a000,#2ecc00);
    color:#fff;
}
body.light-mode .pcard-btn--share{
    background:rgba(22,163,74,0.08);
    border-color:rgba(22,163,74,0.22);
    color:#16a34a;
}
body.light-mode .pcard-btn--offer{
    background:rgba(234,88,12,0.08);
    border-color:rgba(234,88,12,0.22);
    color:#ea580c;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE VISIBILITY ENHANCEMENT
   Darkens ALL secondary text, fixes rgba-white leaks,
   strengthens borders and improves every card, form and label.
═══════════════════════════════════════════════════════════ */

/* ── Global base ── */
body.light-mode{ background:#f0f4f8; color:#111; }
body.light-mode *{ -webkit-font-smoothing:antialiased; }

/* ── All text darker ── */
body.light-mode p,
body.light-mode span:not(.badge):not(.tag):not([style*="background"]),
body.light-mode li,
body.light-mode label,
body.light-mode td,
body.light-mode th{ color:#222 !important; }

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5{ color:#0a0a0a !important; }

/* Sub-titles & descriptions */
body.light-mode .section-sub,
body.light-mode .product-desc-text,
body.light-mode .seller-rating-text,
body.light-mode .view-counter,
body.light-mode .product-location-tag,
body.light-mode .mstat-label,
body.light-mode .footer-brand p,
body.light-mode .footer-links a,
body.light-mode .footer-bottom p,
body.light-mode .social-left p,
body.light-mode .social-share-card p,
body.light-mode .live-popup-text{ color:#333 !important; }

/* Profile & order secondary text */
body.light-mode .profile-sidebar p,
body.light-mode .profile-stat-card p,
body.light-mode .profile-order-card p,
body.light-mode .points-next,
body.light-mode .reward-info span,
body.light-mode .rps-label{ color:#444 !important; }

/* Review comments */
body.light-mode .review-card p,
body.light-mode .rt-comment{ color:#333 !important; }

/* Auth boxes */
body.light-mode .auth-box p{ color:#444 !important; }

/* ── All inputs & textareas ── */
body.light-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.light-mode textarea,
body.light-mode select{
    background:#fff !important;
    color:#111 !important;
    border-color:rgba(0,0,0,0.18) !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder{ color:rgba(0,0,0,0.45) !important; }
body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus{ border-color:rgba(34,160,0,0.5) !important; outline:none; }

/* ── Cards — stronger borders & pure white ── */
body.light-mode .product-card,
body.light-mode .recommended-card,
body.light-mode .related-card,
body.light-mode .seller-card,
body.light-mode .category-card,
body.light-mode .review-card,
body.light-mode .cart-card,
body.light-mode .wishlist-card,
body.light-mode .profile-order-card,
body.light-mode .checkout-form,
body.light-mode .order-summary,
body.light-mode .auth-box,
body.light-mode .write-review-box{
    background:#fff !important;
    border-color:rgba(0,0,0,0.14) !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.07) !important;
}

/* ── Sections & containers ── */
body.light-mode .cart-side,
body.light-mode .category-sidebar,
body.light-mode .profile-sidebar,
body.light-mode .profile-content .profile-stat-card,
body.light-mode .profile-orders,
body.light-mode .profile-points-card,
body.light-mode .reviews-platform-stats,
body.light-mode .social-share-card,
body.light-mode .quick-view-box,
body.light-mode .premium-modal-box{
    background:#fff !important;
    border-color:rgba(0,0,0,0.12) !important;
}

/* ── Navbar & bottom nav ── */
body.light-mode .navbar,
body.light-mode nav.navbar{ background:rgba(255,255,255,0.98) !important; border-bottom-color:rgba(0,0,0,0.1) !important; }
body.light-mode .bottom-nav{ background:rgba(255,255,255,0.98) !important; border-top-color:rgba(0,0,0,0.1) !important; }
body.light-mode .navbar *,
body.light-mode .bottom-nav a,
body.light-mode .bnav-item{ color:#222 !important; }
body.light-mode .bnav-item:hover,
body.light-mode .active-bnav{ color:#22a000 !important; }

/* ── Filter chips & buttons ── */
body.light-mode .cat-filter-btn,
body.light-mode .filter-bar button,
body.light-mode .ptrend-pill,
body.light-mode .sh-filter-chip,
body.light-mode .lc-filter-btn{
    background:#fff !important;
    color:#222 !important;
    border-color:rgba(0,0,0,0.14) !important;
}
body.light-mode .cat-filter-btn:hover,
body.light-mode .filter-bar button:hover,
body.light-mode .ptrend-pill:hover,
body.light-mode .ptrend-pill.active,
body.light-mode .cat-filter-active{ background:#22a000 !important; color:#fff !important; border-color:#22a000 !important; }

/* ── Seller & feature cards ── */
body.light-mode .seller-card h3{ color:#111 !important; }
body.light-mode .seller-location-tag{ color:#444 !important; }
body.light-mode .seller-tag{ background:rgba(0,0,0,0.06) !important; color:#333 !important; border-color:rgba(0,0,0,0.1) !important; }
body.light-mode .feature-text h4{ color:#111 !important; }
body.light-mode .feature-text p{ color:#444 !important; }
body.light-mode .features-strip{ background:#f8fdf8 !important; border-color:rgba(0,0,0,0.06) !important; }

/* ── Marketplace stats strip ── */
body.light-mode .marketplace-stats{ background:#fff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 2px 12px rgba(0,0,0,0.06) !important; }
body.light-mode .mstat-num{ color:#111 !important; }
body.light-mode .mstat-item{ border-right-color:rgba(0,0,0,0.08) !important; }

/* ── Quick links ── */
body.light-mode .qlink{ background:#fff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 2px 8px rgba(0,0,0,0.06) !important; }
body.light-mode .qlink span:last-child{ color:#222 !important; }
body.light-mode .qlinks-label{ color:#444 !important; }

/* ── Flash sale section ── */
body.light-mode .flash-section,
body.light-mode .flash-sale-bar{ background:#fff !important; border-color:rgba(0,0,0,0.08) !important; }
body.light-mode .flash-time{ color:#111 !important; }

/* ── Social section ── */
body.light-mode .sokoni-social-section{ background:#fff !important; }
body.light-mode .social-badge{ background:rgba(0,0,0,0.06) !important; color:#333 !important; border-color:rgba(0,0,0,0.12) !important; }
body.light-mode .social-handle-pill{ background:#f8f8f8 !important; border-color:rgba(0,0,0,0.12) !important; color:#222 !important; }
body.light-mode .social-left h2,
body.light-mode .social-share-card h3{ color:#111 !important; }

/* ── Reviews teaser ── */
body.light-mode .reviews-teaser{ background:#fff !important; border-color:rgba(0,0,0,0.08) !important; }
body.light-mode .rt-badge{ background:rgba(0,0,0,0.06) !important; color:#333 !important; }
body.light-mode .rt-card{ background:#f8f8f8 !important; border-color:rgba(0,0,0,0.1) !important; }
body.light-mode .rt-name{ color:#111 !important; }
body.light-mode .rt-comment{ color:#333 !important; }

/* ── B2B strip ── */
body.light-mode .b2b-strip-card{ background:#fff !important; border-color:rgba(0,0,0,0.1) !important; }
body.light-mode .b2b-info strong{ color:#111 !important; }
body.light-mode .b2b-info p{ color:#444 !important; }
body.light-mode .b2b-arrow{ color:#22a000 !important; }

/* ── Footer ── */
body.light-mode .footer{ background:linear-gradient(135deg,#f4fdf0,#f0f8f0) !important; }
body.light-mode .footer-links a{ color:#333 !important; }
body.light-mode .footer-links a:hover{ color:#22a000 !important; }
body.light-mode .footer-links h3{ color:#22a000 !important; }
body.light-mode .footer-bottom{ border-top-color:rgba(0,0,0,0.1) !important; }
body.light-mode .footer-bottom p{ color:#444 !important; }
body.light-mode .socials a{ background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.12) !important; color:#333 !important; }
body.light-mode .socials a:hover{ background:#22a000 !important; color:#fff !important; }

/* ── Product buttons in light mode ── */
body.light-mode .product-btn{ border-color:rgba(0,0,0,0.15) !important; color:#222 !important; background:#fff !important; }
body.light-mode .product-btn:hover{ background:#22a000 !important; color:#fff !important; border-color:#22a000 !important; }
body.light-mode .add-to-cart-btn{ background:linear-gradient(135deg,#22a000,#2ecc00) !important; color:#fff !important; border:none !important; }

/* ── Glass hero ── */
body.light-mode .glass-hero{ background:linear-gradient(135deg,#f0fdf0,#e8f5e8) !important; }
body.light-mode .glass-hero-badge{ color:#111 !important; background:rgba(0,0,0,0.06) !important; }
body.light-mode .glass-hero-card{ background:rgba(255,255,255,0.9) !important; border-color:rgba(0,0,0,0.1) !important; }

/* ── Search suggestions ── */
body.light-mode .search-suggestions{ background:#fff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 8px 24px rgba(0,0,0,0.1) !important; }
body.light-mode .search-item{ color:#222 !important; }
body.light-mode .search-item:hover{ background:#f0f0f0 !important; }

/* ── Trending section ── */
body.light-mode .ptrend-h2,
body.light-mode .trending-title{ color:#0a0a0a !important; }
body.light-mode .ptrend-label{ color:#444 !important; }
body.light-mode .ptrend-see-all{ color:#22a000 !important; }
body.light-mode .ptrend-count{ color:#555 !important; }
body.light-mode .ptrend-grid,
body.light-mode .trending-section{ background:transparent !important; }

/* ── RGBA white leaks — elements that use rgba(255,255,255,x) in dark mode ── */
body.light-mode [style*="color:rgba(255,255,255,0.4)"],
body.light-mode [style*="color:rgba(255,255,255,0.5)"],
body.light-mode [style*="color:rgba(255,255,255,0.6)"],
body.light-mode [style*="color:rgba(255,255,255,0.7)"]{ color:#333 !important; }
body.light-mode [style*="color:rgba(255,255,255,0.3)"],
body.light-mode [style*="color:rgba(255,255,255,0.2)"]{ color:#666 !important; }
body.light-mode [style*="color:white"],
body.light-mode [style*="color:#fff"],
body.light-mode [style*="color:#ffffff"]{ color:#111 !important; }
body.light-mode [style*="background:rgba(255,255,255,0.0"],
body.light-mode [style*="background:rgba(255,255,255,0.03"],
body.light-mode [style*="background:rgba(255,255,255,0.04"],
body.light-mode [style*="background:rgba(255,255,255,0.05"]{ background:rgba(0,0,0,0.03) !important; }
body.light-mode [style*="background:#0a0a0a"],
body.light-mode [style*="background:#080808"],
body.light-mode [style*="background:#111"]{ background:#fff !important; }
body.light-mode [style*="border-color:rgba(255,255,255,0.0"],
body.light-mode [style*="border:1px solid rgba(255,255,255"]{ border-color:rgba(0,0,0,0.12) !important; }

/* ── Section-title lines ── */
body.light-mode .section-title h2,
body.light-mode .new-arrivals-title-row h2,
body.light-mode .ptrend-header h2{ color:#0a0a0a !important; }
body.light-mode .section-title::after,
body.light-mode .mgr-section-h::after{ background:rgba(0,0,0,0.12) !important; }

/* ── See-all links ── */
body.light-mode .see-all-link{ color:#22a000 !important; }
body.light-mode .see-all-link:hover{ color:#1a8000 !important; }

/* ── Price text ── */
body.light-mode .price,
body.light-mode .ch-price-day,
body.light-mode .lc-rate-num{ color:#22a000 !important; }
body.light-mode .price del,
body.light-mode .original-price{ color:#999 !important; }

/* ── Badges & tags ── */
body.light-mode .product-badge,
body.light-mode .discount-badge{ background:linear-gradient(135deg,#e65000,#ff5500) !important; color:#fff !important; }
body.light-mode .stock-badge.in-stock{ color:#22a000 !important; }
body.light-mode .stock-badge.low-stock{ color:#e65000 !important; }

/* ── Live popup / activity toasts ── */
body.light-mode .live-popup{ background:#fff !important; border-color:rgba(0,0,0,0.1) !important; box-shadow:0 8px 28px rgba(0,0,0,0.12) !important; }
body.light-mode .live-popup-text strong{ color:#111 !important; }

/* ── Ensure overrides beat inline styles on common patterns ── */
body.light-mode .product-name{ color:#111 !important; }
body.light-mode .product-card h3{ color:#111 !important; }
body.light-mode .product-card span.price{ color:#22a000 !important; }
body.light-mode .cart-name{ color:#111 !important; }
body.light-mode .cart-info h2{ color:#111 !important; }
body.light-mode .wishlist-card h2{ color:#111 !important; }
body.light-mode .profile-sidebar h2{ color:#111 !important; }
body.light-mode .profile-orders h2{ color:#111 !important; }
body.light-mode .profile-order-card h3{ color:#111 !important; }