﻿/* ── SHARED HEADER: ZERO-FLASH PRE-HIDE ─────────────────────────────────
   style.css is a blocking stylesheet, so these rules apply BEFORE the
   browser renders any of the body — eliminating the flash-of-original-
   header (FOSH) that occurs when shared-header.js is loaded with defer.
   Pages that opt out of the shared header add class="sk-no-header" to
   their <html> tag; that class overrides every rule here so their own
   navs remain visible.
   The shared header itself (#sk-top-nav) and the bottom nav are excluded.

   .sk-sub-nav is ALSO excluded — and it was not, which deleted a primary CTA from
   several hubs on every device.

   This rule hides the old page-level headers a page shipped before the shared header
   existed. But a hub's sticky sub-nav (Healthcare "Register Facility", Car Hub "Sell
   Vehicle", Entertainment, Tech Hub, Product) is not an old header — it is the bar that
   holds the hub's main action, and shared-header.js deliberately keeps it alive with
   :not(.sk-sub-nav) in its own hide rule. This one never got the same exclusion, and it
   is !important and render-blocking, so it won.

   The result: any hub whose sub-nav was built as a <nav> element simply had no primary
   CTA at all. Services survived purely because its bar happens to be a
   <div role="navigation"> rather than a <nav> — an accident of markup, not a design.
   Six hubs lost their main call to action to a selector that forgot one class. */
html:not(.sk-no-header) body > nav:not(.bottom-nav):not(#sk-top-nav):not(.sk-sub-nav),
html:not(.sk-no-header) body > header:not(#sk-top-nav):not(.sk-sub-nav) { display: none !important; }

/* Hide home-page floating orphans (hamburger + bell) that belong to the
   original .navbar design and are not caught by the nav selector above. */
html:not(.sk-no-header) .menu-toggle,
html:not(.sk-no-header) #sokoni-bell-btn    { display: none !important; }

/* ── SOKONI Shared Header — critical pre-render styles ───────────────────────
   These mirror shared-header.js's injected CSS so the static #sk-top-nav in
   index.html renders correctly before shared-header.js (defer) executes.
   style.css is render-blocking, guaranteeing zero flash of unstyled content. */
#sk-top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100001;
  height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  background: rgba(10,10,10,0.97);
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
/* Belt-and-suspenders: hide legacy floating nav buttons injected by sokoni-ui-extras.js
   on pages that have the shared header — the shared header already covers these. */
html:not(.sk-no-header) #sokoni-search-btn,
html:not(.sk-no-header) #sokoni-inbox-btn  { display: none !important; }
/* Ensure content starts below the fixed 64px nav on first paint — before
   shared-header.js (defer) can inject its own padding-top rule. */
html:not(.sk-no-header) body {
  padding-top: max(64px, calc(64px + env(safe-area-inset-top, 0px)));
}
#sk-nav-logo {
  display: flex; align-items: center; flex-shrink: 0; text-decoration: none;
}
#sk-nav-logo img {
  height: 68px; width: auto; object-fit: contain; display: block;
  mix-blend-mode: screen;
}
#sk-nav-logo-text {
  font-size: 20px; font-weight: 900; color: #71ff00; letter-spacing: .03em;
}
#sk-nav-search-wrap {
  flex: 1; min-width: 0; max-width: 520px; margin: 0 10px; position: relative;
}
#sk-nav-search {
  width: 100%; padding: 10px 16px 10px 40px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px; color: rgba(255,255,255,0.92); font-size: 14px;
  font-family: inherit; outline: none;
}
#sk-nav-search::placeholder { color: rgba(255,255,255,0.32); font-size: 14px; }
#sk-nav-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; pointer-events: none; opacity: .45;
}
#sk-nav-actions {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: auto;
}
.sk-nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; text-decoration: none; color: inherit; position: relative;
}
#sk-nav-cart {
  display: flex; align-items: center; gap: 5px; padding: 8px 14px;
  border-radius: 22px; background: rgba(113,255,0,0.1); border: 1px solid rgba(113,255,0,0.2);
  color: #71ff00; font-size: 12px; font-weight: 800; text-decoration: none;
}
#sk-nav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(113,255,0,0.12); border: 1px solid rgba(113,255,0,0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #71ff00; text-decoration: none;
}
.sk-badge {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  border-radius: 10px; font-size: 9px; font-weight: 900; line-height: 16px;
  padding: 0 4px; text-align: center; border: 2px solid #0a0a0a; display: none;
}
.sk-badge.visible { display: flex; align-items: center; justify-content: center; }
#sk-notif-badge { background: #ff4d6d; color: #fff; }
#sk-msg-badge   { background: #71ff00; color: #000; }
#sk-activity-badge { background: #fbbf24; color: #000; }
#sk-nav-cart-pip {
  background: #71ff00; color: #000; border-radius: 20px;
  min-width: 16px; height: 16px; font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
@media (max-width: 600px) {
  #sk-top-nav {
    height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 6px;
  }
  #sk-nav-logo { order: 0; }
  #sk-nav-logo img { height: 56px; }
  #sk-nav-actions { order: 1; margin-left: auto; gap: 1px; }
  #sk-nav-search-wrap { order: 2; flex: 1 1 100%; max-width: 100%; margin: 0; }
  #sk-msg-btn { display: none !important; }
  #sk-theme-btn { display: none !important; }
}

 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family: var(--sk-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif);

    background:#0b0b0b;

    color:white;

    scroll-behavior:smooth;

    margin:0;

}

@media(max-width:768px){
  body{ padding-bottom:100px; }
}

/* 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{
    max-width:100%;
    margin-bottom:0;
}


/* PRODUCTS */

/* =========================
   FINAL PRODUCTS GRID FIX
========================= */

.products-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
    gap:12px;
    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:480px){

    .categories{
        grid-template-columns:repeat(2,1fr);
    }

    .products-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

.bottom-nav a{
    text-decoration:none;
}
.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;
}
.logo-section img{

    height:44px;

    width:auto;

    object-fit:contain;

    background:none;

}

.logo-section .main-logo-wm{
    font-size:22px;
    font-weight:900;
    color:#fff;
    letter-spacing:-0.5px;
    line-height:1;
    white-space:nowrap;
}
.logo-section .main-logo-wm em{
    color:#71ff00;
    font-style:normal;
}

/* ============================================================
   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: var(--sk-scroll-bottom, 136px);
    right: var(--sk-fab-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: var(--sk-z-scroll-top, 520);
    box-shadow: 0 4px 16px rgba(113,255,0,0.35);
    transition: opacity .25s, transform .25s, bottom .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: nowrap;             /* single row — chips scroll, never stack */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge */
    padding-bottom: 4px;           /* room for scroll rubber-band */
}
.qlinks-row::-webkit-scrollbar { display: none; }
.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;
    flex-shrink: 0;                /* prevents Safari chip compression */
}
.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(113,255,0,0.06);  border-color: rgba(113,255,0,0.18);  color: #c8ff80; }
.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%20footer.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 {
    height: 52px;
    width: auto;
    margin-bottom: 15px;
    background: none;
}

.footer-brand p {
    color: #d4d4d4;
    line-height: 1.7;
    font-size: 14px;
}

/* SOCIALS */
.socials {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.socials a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.05);
    text-decoration: none;
    transition: all 0.25s;
}

/* The icons are now inline SVG (they used to be Font Awesome glyphs, which render as
   NOTHING if the CDN is slow or blocked — six empty circles). currentColor makes them
   inherit the link colour, so every hover state below still works unchanged. */
.socials a svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;      /* the <a> owns the click, not the glyph */
}
.socials a:focus-visible {
    outline: 2px solid var(--sk-green, #71ff00);
    outline-offset: 2px;
}

.socials a:hover { transform: translateY(-3px); }
/* Keyed on aria-label, not title — the markup now carries a real accessible name
   instead of a tooltip, and these brand hovers must follow it or they silently stop
   matching. */
.socials a[aria-label*="Facebook"]:hover  { background: rgba(24,119,242,0.18);  border-color: rgba(24,119,242,0.5);  color: #4f9cf9; }
.socials a[aria-label*="X"]:hover         { background: rgba(255,255,255,0.1);  border-color: rgba(255,255,255,0.3); color: #fff; }
.socials a[aria-label*="Instagram"]:hover { background: linear-gradient(135deg,rgba(214,41,118,0.2),rgba(131,58,180,0.15)); border-color: rgba(214,41,118,0.45); color: #e1306c; }
.socials a[aria-label*="TikTok"]:hover    { background: rgba(105,201,208,0.12); border-color: rgba(105,201,208,0.4);  color: #69c9d0; }
.socials a[aria-label*="YouTube"]:hover   { background: rgba(255,0,0,0.12);     border-color: rgba(255,0,0,0.35);    color: #ff4444; }
.socials a[aria-label*="WhatsApp"]:hover  { background: rgba(37,211,102,0.12);  border-color: rgba(37,211,102,0.4);  color: #25d366; }

/* 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;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-bottom > p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-legal-links a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: color .2s;
}
.footer-legal-links a:hover { color: #71ff00; }
.footer-legal-links span { color: rgba(255,255,255,0.2); font-size: 11px; }

.footer-credit {
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.4px;
}
.footer-credit span {
    color: rgba(113,255,0,0.55);
    font-weight: 700;
}

/* PAYMENTS */
.payments {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Payment marks.
   Each source PNG has a different aspect ratio (M-Pesa 250x98, Visa 215x68,
   Mastercard 203x119, PayPal 246x70). With `width:auto` every chip came out a
   different width — 53px, 60px, 42px, 64px — so the row looked ragged.

   A FIXED chip with object-fit:contain gives one uniform size and letterboxes each
   mark inside it, so none of them is ever stretched. The chip is near-white because
   the marks are dark-on-light brand artwork: on a 6%-white chip they were muddy and
   the M-Pesa mark was barely readable. Card brands are always presented on light
   ground for exactly this reason. */
.payments img {
    width: 62px;
    height: 38px;
    object-fit: contain;
    background: rgba(255,255,255,0.94);
    padding: 6px 9px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.payments img:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.36);
}

@media (max-width: 420px) {
    .payments { gap: 8px; }
    .payments img { width: 56px; height: 35px; }
}

/* TABLET â€” 3 columns so brand + 4 links have no orphan */
@media(max-width: 950px) {
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
    .footer-brand {
        grid-column: 1 / -1; /* brand spans full width on tablet */
        max-width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 20px;
        align-items: start;
    }
    .footer-logo { margin-bottom: 0; height: 44px; width: auto; }
}

@media(max-width: 600px) {
    .footer {
        padding: 40px 5% 24px;
    }
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .footer-brand {
        grid-column: 1 / -1;
        display: block;
    }
    .footer-logo { height: 40px; width: auto; margin-bottom: 12px; }
    .footer-links h3 { font-size: 14px; margin-bottom: 12px; }
    .footer-links a { font-size: 13px; margin-bottom: 9px; }
}

@media(max-width: 380px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* =========================
   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%20footer.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;

}

/* LOCATION PILL â€” hidden on desktop, shown on phone via mobile.css */
.nav-location { display: none; }

/* 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%20footer.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);     }
}
@keyframes notifOut{
    from{ opacity:1; transform:translateX(0);      }
    to{   opacity:0; transform:translateX(20px);   }
}
.notification{ transition:opacity .3s; }

/* 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{

    height:44px;

    width: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:var(--sk-z-sheet,100010);

}



/* 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:var(--sk-z-sheet,100010);

    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{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align: center;

    color: white;

    position: relative;
    width:100%;
    max-width:340px;
    padding:0 16px;

}

/* ── GLOBAL LOGO SIZE FLOOR ──
   Every hub/page-specific *-nav-logo gets a minimum visible size.
   More-specific page rules can still increase; they cannot go below this. */
[class*="-nav-logo"],
[class*="-nav-logo"] img,
.nav-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(113,255,0,0.2)) !important;
}
img.footer-logo, .footer-logo img {
  height: 52px !important;
  width: auto !important;
  max-width: 200px !important;
}
.inv-nav-logo img,
.so-nav-logo,
.pos-header-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
}

/* LOGO */

.splash-logo{

    width: 240px;
    max-width:72vw;
    height:auto;
    display:block;
    margin:0 auto 20px;

    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:44px;

    height:44px;

    border:1px solid rgba(255,255,255,0.18);

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    line-height:1;

}

.theme-toggle:hover{

    background:rgba(255,255,255,0.15);

    transform:scale(1.08);

}

.light-mode .theme-toggle{

    background:rgba(0,0,0,0.06);

    border:1px solid rgba(0,0,0,0.14);

    color:#111;

}

.light-mode .theme-toggle:hover{

    background:rgba(0,0,0,0.11);

}



/* 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:calc(100% - 32px);
    max-width:900px;
    margin:16px auto;
    border-radius:28px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:32px 20px;
}

.glass-hero-bg{
    position:absolute;
    inset:0;
    background:url("assets/backG1.jpeg") center/cover no-repeat;
    filter:brightness(0.82);
    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:28px 48px;
    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:12px;
    letter-spacing:0.5px;
}

.glass-hero-card h1{
    font-size:52px;
    font-weight:900;
    color:white;
    line-height:1.1;
    margin-bottom:10px;
    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:16px;
    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
========================= */

/* â”€â”€ Premium Features Strip â”€â”€ */
.features-strip{
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    background:linear-gradient(90deg,
        rgba(113,255,0,0.04) 0%,
        rgba(255,255,255,0.025) 50%,
        rgba(0,170,255,0.03) 100%);
    border-top:1px solid rgba(113,255,0,0.1);
    border-bottom:1px solid rgba(113,255,0,0.1);
    margin:0;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:24px 28px;
    flex:1;
    min-width:180px;
    border-right:1px solid rgba(255,255,255,0.06);
    transition:all .25s;
    cursor:default;
    position:relative;
}

.feature-item:last-child{ border-right:none; }

.feature-item:hover{
    background:rgba(113,255,0,0.05);
}

.feature-item:hover .feature-icon{
    background:rgba(113,255,0,0.15);
    border-color:rgba(113,255,0,0.35);
    box-shadow:0 0 20px rgba(113,255,0,0.2);
    transform:scale(1.08);
}

.feature-icon{
    font-size:24px;
    width:50px;
    height:50px;
    background:rgba(113,255,0,0.08);
    border:1px solid rgba(113,255,0,0.18);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .25s;
    box-shadow:0 2px 12px rgba(0,0,0,0.3);
}

.feature-text h4{
    color:white;
    font-size:13px;
    font-weight:800;
    margin-bottom:3px;
}

.feature-text p{
    color:rgba(255,255,255,0.4);
    font-size:11px;
    margin:0;
    padding:0;
}

@media(max-width:768px){
    .features-strip{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0;
        margin:0;
        padding:0;
    }
    .feature-item{
        min-width:0;
        padding:14px 10px;
        gap:0;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        border-right:1px solid rgba(255,255,255,0.06);
        border-bottom:1px solid rgba(255,255,255,0.06);
        border-top:none;
    }
    .feature-item:nth-child(even){ border-right:none; }
    .feature-item:nth-last-child(-n+2){ border-bottom:none; }
    .feature-icon{
        width:38px; height:38px; font-size:18px; border-radius:10px;
        margin:0 auto 8px;
    }
    .feature-text h4{ font-size:11px; margin-bottom:2px; }
    .feature-text p{ font-size:10px; }
}

/* =========================
   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(150px,1fr));
    gap:14px;
    padding:16px 20px 28px;
}

/* Featured shops: horizontal scroll so cards never overlap */
#featuredShopsGrid{
    display:flex;
    flex-direction:row;
    gap:14px;
    padding:6px 20px 20px;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
#featuredShopsGrid::-webkit-scrollbar{ display:none; }
#featuredShopsGrid .seller-card{
    flex:0 0 160px;
    min-width:160px;
    max-width:160px;
    scroll-snap-align:start;
}

.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:104px;
    height:104px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 14px;
    border:3px solid rgba(113,255,0,0.45);
    box-shadow:0 0 0 6px rgba(113,255,0,0.1),0 0 0 10px rgba(113,255,0,0.04),0 6px 20px rgba(0,0,0,0.4);
}

.seller-avatar img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:10px;
}

.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;
}

/* â”€â”€ Follow & Share row on seller cards â”€â”€ */
.seller-follow-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.06);
}
.seller-follow-btn{
    flex:1;
    padding:8px 12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    color:rgba(255,255,255,0.65);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    font-family:inherit;
    transition:all .18s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.seller-follow-btn:hover,.seller-follow-btn.following{
    background:rgba(113,255,0,0.1);
    border-color:rgba(113,255,0,0.4);
    color:#71ff00;
}
.seller-share-btn{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(113,255,0,0.07);
    border:1px solid rgba(113,255,0,0.2);
    border-radius:50%;
    font-size:14px;
    cursor:pointer;
    font-family:inherit;
    transition:background .18s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    flex-shrink:0;
}
.seller-share-btn:hover{background:rgba(113,255,0,0.15);}

.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; }
@media(min-width:769px){
  .cat-page-body{ max-width:1280px; margin:0 auto; padding-left:32px; padding-right:32px; }
}

.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 Sale fs-* card system (shared: index.html + flashsale.html) â”€â”€ */
.fs-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;position:relative;cursor:pointer;transition:transform .16s,border-color .16s;}
.fs-item:hover{transform:translateY(-2px);border-color:rgba(113,255,0,.22);}
.fs-item:active{transform:scale(.97);}
.fs-badge{position:absolute;top:10px;left:10px;z-index:2;background:linear-gradient(135deg,#ff4444,#ff0000);color:white;font-weight:900;font-size:12px;padding:3px 9px;border-radius:7px;}
.fs-img{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.fs-img img{width:100%;height:100%;object-fit:cover;display:block;}
.fs-emoji{font-size:54px;line-height:1;}
.fs-body{padding:10px 10px 4px;display:flex;flex-direction:column;flex:1;}
.fs-seller{font-size:9px;color:rgba(255,255,255,.35);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fs-name{color:white;font-size:13px;font-weight:700;line-height:1.35;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fs-stars{display:flex;align-items:center;gap:3px;margin-bottom:5px;}
.fs-stars .fs-rtxt{font-size:9px;color:rgba(255,255,255,.4);}
.fs-prices{display:flex;align-items:baseline;gap:6px;margin-bottom:7px;flex-wrap:wrap;}
.fs-orig{color:#ff4444;font-size:11px;text-decoration:line-through;}
.fs-sp{color:#71ff00;font-size:17px;font-weight:900;}
.fs-stock{margin-bottom:6px;}
.fs-slabels{display:flex;justify-content:space-between;margin-bottom:3px;}
.fs-slabels span{font-size:9px;color:rgba(255,255,255,.35);}
.fs-slabels .fs-left{color:#ff9800;font-weight:700;}
.fs-bar{background:rgba(255,255,255,.08);border-radius:4px;height:4px;overflow:hidden;}
.fs-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#71ff00,#ff6b00);transition:width .5s;}
.fs-btns{padding:6px 8px 10px;margin-top:auto;display:flex;flex-direction:column;gap:5px;}
.fs-btn-row{display:flex;gap:5px;}
.fs-btn{flex:1;padding:9px 4px;font-size:11px;font-weight:700;border-radius:9px;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:3px;transition:opacity .15s;}
.fs-btn:active{opacity:.7;}
.fs-cart{background:rgba(113,255,0,.1);border:1px solid rgba(113,255,0,.28);color:#71ff00;}
.fs-wish{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.28);color:#ff6060;max-width:48px;flex:0 0 48px;}
.fs-buy{background:linear-gradient(135deg,#71ff00,#4fc800);color:#050f05;font-weight:900;font-size:12px;padding:10px 4px;}
@media(max-width:600px){
  .fs-img{aspect-ratio:1/1;}
  .fs-emoji{font-size:40px;}
  .fs-body{padding:8px 8px 2px;}
  .fs-name{font-size:12px;}
  .fs-sp{font-size:15px;}
  .fs-btns{padding:5px 6px 8px;gap:4px;}
  .fs-btn{font-size:10px;padding:8px 3px;border-radius:8px;}
  .fs-buy{font-size:11px;padding:9px 3px;}
  .fs-wish{max-width:40px;flex:0 0 40px;}
}
@media(max-width:360px){.fs-emoji{font-size:32px;}.fs-btn{font-size:9px;padding:7px 2px;}}
/* â”€â”€ End fs-* card system â”€â”€ */

.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:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    background:#ff3333;
    border-radius:50%;
    border:2.5px solid #0b0b0b;
    font-size:10px;
    font-weight:900;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 8px rgba(255,51,51,0.55);
    line-height:1;
}

/* =========================
   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 removed â€” it breaks Leaflet tile loading on mobile */
    overflow:visible;
}

.map-container h2{ color:white; font-size:18px; font-weight:800; margin-bottom:16px; }

#deliveryMap{
    height:300px;
    border-radius:16px;
    /* overflow:hidden removed — breaks Leaflet tile rendering on iOS Safari (tiles clip via stencil buffer bypass with 3D transforms) */
    overflow:visible;
    min-height:260px;
    width:100%;
    z-index:1;
}

.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-mobile-back{
    display:none;
}

.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:var(--sk-z-sheet,100010);
    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{
        display:block;
        position:relative;
        overflow:hidden;
    }
    .msg-sidebar{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }
    .msg-main{
        position:absolute;
        inset:0;
        width:100%;
        transform:translateX(100%);
        transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
        z-index:10;
        background:#0a0a0a;
    }
    .msg-main.chat-panel-open{
        transform:translateX(0);
    }
    .chat-mobile-back{
        display:flex;
        align-items:center;
        justify-content:center;
        width:36px;
        height:36px;
        background:rgba(255,255,255,0.07);
        border:1px solid rgba(255,255,255,0.1);
        border-radius:10px;
        color:white;
        font-size:18px;
        cursor:pointer;
        flex-shrink:0;
    }
    .chat-input-row input{
        font-size:16px !important;
    }
    .chat-input-row{
        padding:12px 14px;
    }
    .chat-messages-area{
        padding:14px;
    }
    .chat-action-btn{
        width:28px;
        height:28px;
        font-size:12px;
    }
    .chat-actions{
        gap:4px;
    }
    .chat-name{
        font-size:13px;
    }
    .chat-bubble{
        max-width:85%;
    }
    .convo-preview{
        max-width:none;
    }
}

/* =========================
   PRODUCT BADGES
========================= */

.pcard-badge-row{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-bottom:5px;
}

.prod-badge{
    display:inline-flex;
    align-items:center;
    padding:3px 9px;
    border-radius:7px;
    font-size:10px;
    font-weight:900;
    letter-spacing:0.4px;
}

.badge-new{
    background:linear-gradient(135deg,#00aaff,#0066cc);
    color:white;
}

.badge-hot{
    background:linear-gradient(135deg,#ff4400,#ff8800);
    color:white;
}

/* â”€â”€ SELLER VERIFICATION BADGES â”€â”€ */
.vbadge{
    display:inline-flex;align-items:center;gap:4px;
    font-size:9.5px;font-weight:800;letter-spacing:.02em;
    padding:3px 8px;border-radius:20px;white-space:nowrap;
}
.vbadge-seller{
    background:rgba(113,255,0,0.1);border:1px solid rgba(113,255,0,0.35);color:#71ff00;
}
.vbadge-business{
    background:rgba(0,170,255,0.1);border:1px solid rgba(0,170,255,0.3);color:#00aaff;
}
.vbadge-shop{
    background:rgba(255,193,7,0.1);border:1px solid rgba(255,193,7,0.3);color:#ffc107;
}
.vbadge-sameday{
    background:rgba(255,90,0,0.1);border:1px solid rgba(255,90,0,0.3);color:#ff6a1a;
}
/* Larger versions for seller profile page */
.vbadge-lg{font-size:12px;padding:5px 13px;gap:5px;}
/* Row wrapper */
.vbadge-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}

/* =========================
   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;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SELECT â€” global dark theme baseline
   (premium.css `!important` rules take over;
    this covers pages that load style.css only)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M7 9.5L1.5 4h11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    color: white;
    padding: 11px 36px 11px 14px;
    cursor: pointer;
    outline: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    width: 100%;
    transition: border-color .2s, background-color .2s;
}
select:hover {
    border-color: rgba(255,255,255,0.24);
    background-color: rgba(255,255,255,0.09);
}
select:focus {
    border-color: rgba(113,255,0,0.5);
    background-color: rgba(113,255,0,0.05);
    outline: none;
}
select option {
    background: #111;
    color: white;
    font-size: 13px;
    padding: 8px 12px;
}
select optgroup {
    background: #0a0a0a;
    color: rgba(255,255,255,0.45);
    font-style: normal;
    font-weight: 700;
}

.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;
    position:relative;
}
.pcard-shop-ring{
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    color:#fff;
    text-decoration:none;
    z-index:4;
    border:2px solid rgba(8,8,8,0.85);
    box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 0 1.5px rgba(255,255,255,0.18);
    letter-spacing:0.3px;
    transition:transform 0.18s ease,box-shadow 0.18s ease;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
}
.pcard-shop-ring:hover{
    transform:scale(1.18);
    box-shadow:0 4px 14px rgba(0,0,0,0.6),0 0 0 2px rgba(255,255,255,0.3);
}
.pcard-shop-ring:active{ transform:scale(0.93); }

.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{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ff3333;
    color:white;
    border-radius:999px;
    padding:2px 7px;
    font-size:10px;
    font-weight:900;
    min-width:18px;
    height:18px;
    margin-left:6px;
    box-shadow:0 2px 8px rgba(255,51,51,0.5);
    vertical-align:middle;
    line-height:1;
}

.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:0 24px 100px;
}

.reviews-hero{
    text-align:center;
    margin:0 -24px 36px;
    padding:52px 24px 38px;
    background:linear-gradient(135deg,rgba(113,255,0,0.06),rgba(255,193,7,0.04),rgba(0,170,255,0.04),transparent);
    border-bottom:1px solid rgba(255,255,255,0.07);
    position:relative;overflow:hidden;
}
.reviews-hero::before{
    content:'â­ðŸŒŸðŸ’«';position:absolute;right:-12px;top:50%;transform:translateY(-50%);
    font-size:110px;opacity:0.03;white-space:nowrap;pointer-events:none;letter-spacing:-6px;
}
.reviews-hero-badge{
    display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
    background:rgba(255,193,7,0.1);border:1px solid rgba(255,193,7,0.28);
    border-radius:999px;font-size:11px;font-weight:800;color:#ffc107;
    margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em;
}

.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 */

/* â”€â”€ Premium Reviews Teaser â”€â”€ */
.reviews-teaser{
    display:flex;
    gap:40px;
    align-items:flex-start;
    padding:56px 28px;
    background:linear-gradient(135deg,
        rgba(255,193,7,0.07) 0%,
        rgba(10,10,10,0.97)  45%,
        rgba(255,152,0,0.05) 100%);
    border-top:1px solid rgba(255,193,7,0.15);
    border-bottom:1px solid rgba(255,152,0,0.1);
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
}

.reviews-teaser::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 55% 80% at 5% 50%, rgba(255,193,7,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 95% 30%, rgba(255,152,0,0.06) 0%, transparent 55%);
    pointer-events:none;
}

.rt-left{
    flex:0 0 300px;
    min-width:220px;
    position:relative;
    z-index:1;
}

.rt-badge{
    background:rgba(255,193,7,0.12);
    border:1px solid rgba(255,193,7,0.32);
    color:#fbbf24;
    padding:5px 16px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    display:inline-block;
    margin-bottom:16px;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 0 16px rgba(255,193,7,0.12);
}

.rt-left h2{
    font-size:clamp(22px,3.5vw,30px);
    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:14px;
    min-width:0;
    position:relative;
    z-index:1;
}

.rt-card{
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:20px;
    transition:all .25s;
    backdrop-filter:blur(8px);
}

.rt-card:hover{
    border-color:rgba(255,193,7,0.28);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.35),0 0 20px rgba(255,193,7,0.06);
}

.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-wrap{
    position:fixed;
    bottom:90px;
    right:20px;
    z-index:9999;
    display:inline-flex;
    overflow:visible; /* ensure badge pip is never clipped */
}
.chat-toggle-btn{
    position:relative;
    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:block; }

.chat-unread-pip{
    /* Anchor to the top-right corner of the chat button.
       Uses top-right of wrap (which sizes to the button) with positive
       offset to sit on the corner â€” not clipped because wrap has overflow:visible */
    position:absolute;
    top:-8px;
    right:-8px;
    background:#ff3333;
    color:white;
    border-radius:999px;
    min-width:20px;
    height:20px;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #0a0a0a;
    box-shadow:0 2px 8px rgba(255,51,51,0.8);
    z-index:10001;
    pointer-events:none;
    animation:pipPulse 1.8s ease infinite;
    padding:0 5px;
    line-height:1;
    white-space:nowrap;
}
@keyframes pipPulse{
    0%,100%{ box-shadow:0 2px 10px rgba(255,51,51,0.6); }
    50%{ box-shadow:0 2px 18px rgba(255,51,51,0.9),0 0 0 5px rgba(255,51,51,0.15); }
}

.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); }

/* Chat â€” mobile: full width, sits above bottom nav */
@media(max-width:600px){
    .chat-toggle-wrap{
        bottom:76px;
        right:14px;
    }
    .chat-toggle-btn{
        width:auto;
        height:auto;
        padding:10px 16px;
        border-radius:999px;
        gap:6px;
    }
    /* chat-box opens above the toggle button (button ~44px + 76px bottom + 8px gap = 128px) */
    .chat-box-premium{
        width:calc(100vw - 24px);
        left:12px;
        right:12px;
        bottom:132px;
        max-height:calc(100svh - 220px);
        border-radius:18px;
        box-shadow:0 -8px 40px rgba(0,0,0,0.7);
    }
    .chat-messages-premium{
        padding:12px;
        gap:10px;
    }
    .chat-input-premium{
        padding:10px 12px;
    }
    .chat-input-premium input{
        font-size:16px; /* prevents iOS zoom */
    }
}

/* =========================
   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 v2
========================= */

.bottom-nav{
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:9996;
    display:flex;
    align-items:stretch;
    background:rgba(5,5,5,0.98);
    backdrop-filter:blur(40px) saturate(160%);
    -webkit-backdrop-filter:blur(40px) saturate(160%);
    border-top:1px solid rgba(255,255,255,0.06);
    box-shadow:0 -12px 40px rgba(0,0,0,0.5);
    padding-bottom:env(safe-area-inset-bottom,0px);
    height:auto;
    min-height:66px;
}

.bnav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:rgba(255,255,255,0.32);
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.3px;
    transition:color 0.22s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
    min-height:66px;
    border:none;
    background:none;
    cursor:pointer;
    padding:8px 4px 10px;
    -webkit-tap-highlight-color:transparent;
    position:relative;
}

/* floating pill behind active icon */
.active-bnav::before{
    content:'';
    position:absolute;
    top:7px;
    left:50%;
    transform:translateX(-50%);
    width:46px;height:32px;
    background:rgba(113,255,0,0.11);
    border:1px solid rgba(113,255,0,0.22);
    border-radius:14px;
    pointer-events:none;
}

/* glow dot at bottom of active tab */
.active-bnav::after{
    content:'';
    position:absolute;
    bottom:7px;
    left:50%;
    transform:translateX(-50%);
    width:4px;height:4px;
    background:#71ff00;
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(113,255,0,0.7);
}

.bnav-item:active{
    transform:scale(0.85);
}

.bnav-item i{
    font-size:20px;
    color:rgba(255,255,255,0.3);
    transition:color 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), filter 0.22s ease;
    position:relative;z-index:1;
}

/* Emoji icon in bottom nav */
.bnav-emoji{
    font-size:22px;
    line-height:1;
    display:block;
    transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), filter 0.22s ease;
    position:relative;z-index:1;
}

.bnav-item span{
    color:rgba(255,255,255,0.32);
    transition:color 0.22s ease;
    position:relative;z-index:1;
}

.bnav-item:hover i,
.active-bnav i{
    color:#71ff00;
    transform:translateY(-2px) scale(1.12);
    filter:drop-shadow(0 0 5px rgba(113,255,0,0.55));
}

/* Emoji bounce + glow on active/hover */
.bnav-item:hover .bnav-emoji,
.active-bnav .bnav-emoji{
    transform:translateY(-3px) scale(1.18);
    filter:drop-shadow(0 0 6px rgba(113,255,0,0.5));
}

.bnav-item:hover,
.active-bnav{
    color:#71ff00;
}

.bnav-item:hover span,
.active-bnav span{
    color:#71ff00;
}

/* Deals/Flash â€” amber theme */
.bnav-flash{ color:rgba(255,255,255,0.32) !important; }
.bnav-flash i{ color:#ff8800 !important; }
.bnav-flash span{ color:#ff8800 !important; }
.bnav-flash.active-bnav::before{
    background:rgba(255,136,0,0.12);
    border-color:rgba(255,136,0,0.25);
}
.bnav-flash.active-bnav::after{
    background:#ff8800;
    box-shadow:0 0 8px 2px rgba(255,136,0,0.7);
}
.bnav-flash.active-bnav i,
.bnav-flash:hover i{
    color:#ff8800 !important;
    filter:drop-shadow(0 0 5px rgba(255,136,0,0.6));
}

/* =========================
   SOCIAL SECTION
========================= */

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SOKONI COMMUNITY SECTION â€” PREMIUM
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sokoni-social-section{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,
        rgba(168,85,247,0.10) 0%,
        rgba(10,10,10,0.97)  40%,
        rgba(113,255,0,0.06) 100%);
    border-top:1px solid rgba(168,85,247,0.2);
    border-bottom:1px solid rgba(113,255,0,0.15);
    padding:64px 28px;
}

/* Radial glow blobs */
.sokoni-social-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 60% 70% at 10% 50%, rgba(168,85,247,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 90% 20%, rgba(113,255,0,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 60% 90%, rgba(0,170,255,0.06) 0%, transparent 55%);
    pointer-events:none;
}

/* Floating emoji pattern */
.sokoni-social-section::after{
    content:'ðŸ‘¥ ðŸ›’ ðŸ’¬ â­ ðŸ›ï¸ ðŸ’š ðŸŽ¯';
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    font-size:80px;
    opacity:0.025;
    letter-spacing:-8px;
    pointer-events:none;
    white-space:nowrap;
}

.social-section-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    max-width:1200px;
    margin:0 auto;
    align-items:center;
    position:relative;
    z-index:1;
}

.social-badge{
    background:rgba(168,85,247,0.12);
    border:1px solid rgba(168,85,247,0.32);
    color:#c084fc;
    padding:5px 16px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    display:inline-block;
    margin-bottom:16px;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 0 16px rgba(168,85,247,0.15);
}

.social-left h2{
    font-size:clamp(24px,4vw,34px);
    font-weight:900;
    color:white;
    margin-bottom:12px;
    line-height:1.15;
}

.social-left p{
    color:rgba(255,255,255,0.48);
    font-size:14px;
    margin-bottom:24px;
    line-height:1.65;
    max-width:420px;
}

.social-handles{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
}
.social-handles::-webkit-scrollbar{ display:none; }
.social-handle-pill{ flex-shrink:0; scroll-snap-align:start; }

.social-handle-pill{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 17px;
    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.75);
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    transition:all .22s;
    backdrop-filter:blur(8px);
}

.social-handle-pill:hover{
    transform:translateY(-3px);
    color:white;
    box-shadow:0 6px 20px rgba(0,0,0,0.4);
}

/* Platform-specific hover colours */
.social-handle-pill:has(.fa-instagram):hover{
    background:linear-gradient(135deg,rgba(214,41,118,0.18),rgba(131,58,180,0.12));
    border-color:rgba(214,41,118,0.4);
    color:#e1306c;
}
.social-handle-pill:has(.fa-tiktok):hover{
    background:rgba(105,201,208,0.1);
    border-color:rgba(105,201,208,0.35);
    color:#69c9d0;
}
.social-handle-pill:has(.fa-x-twitter):hover{
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.3);
    color:white;
}
.social-handle-pill:has(.fa-facebook-f):hover{
    background:rgba(24,119,242,0.12);
    border-color:rgba(24,119,242,0.35);
    color:#4f9cf9;
}
.social-handle-pill:has(.fa-youtube):hover{
    background:rgba(255,0,0,0.1);
    border-color:rgba(255,0,0,0.3);
    color:#ff4444;
}

.social-whatsapp{
    border-color:rgba(37,211,102,0.28);
    background:rgba(37,211,102,0.06);
    color:#25d366;
}
.social-whatsapp:hover{
    background:rgba(37,211,102,0.14) !important;
    border-color:rgba(37,211,102,0.45) !important;
    color:#25d366 !important;
    box-shadow:0 6px 20px rgba(37,211,102,0.2) !important;
}

/* â”€â”€ Premium share card â”€â”€ */
.social-share-card{
    position:relative;
    background:linear-gradient(145deg,rgba(113,255,0,0.07),rgba(0,200,80,0.04),rgba(255,255,255,0.02));
    border:1px solid rgba(113,255,0,0.22);
    border-radius:28px;
    padding:36px 32px;
    text-align:center;
    backdrop-filter:blur(20px);
    box-shadow:
        0 24px 64px rgba(0,0,0,0.4),
        0 0 0 1px rgba(113,255,0,0.06) inset,
        0 0 40px rgba(113,255,0,0.04);
    overflow:hidden;
}

/* Inner glow accent */
.social-share-card::before{
    content:'';
    position:absolute;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
    width:200px;
    height:200px;
    background:radial-gradient(circle, rgba(113,255,0,0.12) 0%, transparent 70%);
    pointer-events:none;
}

.social-share-card h3{
    color:white;
    font-size:21px;
    font-weight:900;
    margin-bottom:10px;
    position:relative;
}

.social-share-card p{
    color:rgba(255,255,255,0.48);
    font-size:13px;
    line-height:1.6;
    margin-bottom:24px;
    position:relative;
}

.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:900;
    font-size:14px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:all .25s;
    font-family:inherit;
    margin-bottom:10px;
    position:relative;
}

.social-share-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(113,255,0,0.4);
    filter:brightness(1.06);
}

.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.12);
    color:rgba(255,255,255,0.75);
    font-weight:700;
    font-size:13px;
    border-radius:14px;
    text-decoration:none;
    transition:all .25s;
    position:relative;
}

.social-join-btn:hover{
    background:rgba(255,255,255,0.11);
    color:white;
    border-color:rgba(255,255,255,0.22);
    transform:translateY(-1px);
}

/* =========================
   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; 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; }

    /* â”€â”€ Join Community â€” phone overflow fix â”€â”€ */
    .sokoni-social-section{
        padding:40px 16px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }
    .sokoni-social-section::after{ display:none !important; }
    .social-section-content{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        gap:24px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }
    .social-left,
    .social-right{
        min-width:0 !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }
    .social-handles{
        width:100% !important;
        max-width:100% !important;
        padding-bottom:4px !important;
    }
    .social-left p{ max-width:100% !important; }
    .social-left h2{ font-size:22px !important; }
    .social-share-card{
        padding:24px 20px !important;
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
    }
    .social-share-btn,
    .social-join-btn{
        width:100% !important;
        box-sizing:border-box !important;
    }
}

/* =============================================
   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; }

/* Suppress native Ã—-clear button that type="search" adds */
.search-bar input[type="search"]::-webkit-search-cancel-button,
.search-bar input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; display:none; }

/* ---- 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%20footer.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:var(--sk-z-sheet,100010);
    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{
    display:inline-flex;
    align-items:center;
    font-size:10px;
    font-weight:800;
    padding:3px 8px;
    border-radius:7px;
    letter-spacing:0.3px;
}

.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:8px;
    left:8px;
    right:auto;
    z-index:5;
    background:rgba(200,0,0,0.88);
    color:white;
    font-size:10px;
    font-weight:900;
    padding:3px 7px;
    border-radius:6px;
    letter-spacing:0.5px;
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,80,80,0.35);
    pointer-events:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

/* 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 needs top padding to clear the ribbon badge */
.seller-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 20px 22px;
    gap:0;
    overflow:hidden;
}

/* Badge is now a full-width ribbon at the very top â€” never overlaps the avatar */
.seller-badge{
    position:absolute;
    top:0; left:0; right:0;
    font-size:9.5px;
    font-weight:900;
    padding:7px 12px;
    border-radius:0;
    letter-spacing:0.8px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    overflow:hidden;
    flex-shrink:0;
}
/* Cards with a ribbon need extra top padding to clear it */
.seller-card-verified,
.featured-shop-card{
    padding-top:40px!important;
}

/* â”€â”€ SOKONI VERIFIED BADGE â€” premium blue ribbon â”€â”€ */
.verified-badge{
    background:linear-gradient(135deg,#1565c0 0%,#0288d1 55%,#00b4d8 100%);
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    color:#fff;
    box-shadow:0 2px 12px rgba(2,136,209,0.45);
    overflow:hidden;
}

/* shimmer sweep across the ribbon */
.verified-badge::after{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:55%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.38),transparent);
    animation:vbadge-shimmer 2.8s ease-in-out infinite;
    pointer-events:none;
}
@keyframes vbadge-shimmer{
    0%{left:-120%}
    60%{left:160%}
    100%{left:160%}
}

/* verified cards â€” blue glow ring on avatar */
.seller-card-verified{
    border-color:rgba(2,136,209,0.28)!important;
    box-shadow:0 6px 28px rgba(0,0,0,0.28),0 0 24px rgba(2,136,209,0.09)!important;
}
.seller-card-verified .seller-avatar{
    width:120px!important;
    height:120px!important;
    margin-top:12px!important;
    border-color:rgba(2,136,209,0.7)!important;
    box-shadow:0 0 0 5px rgba(2,136,209,0.18),0 0 0 9px rgba(2,136,209,0.07),0 4px 20px rgba(0,0,0,0.35)!important;
}

/* â”€â”€ GET VERIFIED CTA SECTION â”€â”€ */
.get-verified-section{
    margin:0 16px 36px;
    border-radius:28px;
    padding:36px 24px 32px;
    background:linear-gradient(135deg,rgba(21,101,192,0.14) 0%,rgba(2,136,209,0.07) 60%,rgba(0,180,216,0.04) 100%);
    border:1px solid rgba(2,136,209,0.22);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
    position:relative;
    overflow:hidden;
}
.get-verified-section::before{
    content:'';
    position:absolute;
    top:-60px;right:-60px;
    width:200px;height:200px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(2,136,209,0.12) 0%,transparent 70%);
    pointer-events:none;
}
.gv-badge-demo{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 18px;
    background:linear-gradient(135deg,#1565c0,#0288d1,#00b4d8);
    border-radius:999px;
    color:white;
    font-size:13px;
    font-weight:900;
    letter-spacing:0.6px;
    margin-bottom:20px;
    box-shadow:0 4px 24px rgba(2,136,209,0.5),0 0 0 2px rgba(255,255,255,0.12);
    position:relative;
    overflow:hidden;
}
.gv-badge-demo::after{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:55%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
    animation:vbadge-shimmer 2.5s ease-in-out infinite;
}
.gv-badge-demo .gv-check{
    width:18px;height:18px;
    background:rgba(255,255,255,0.2);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:900;
}
.get-verified-section h2{
    font-size:22px;
    font-weight:900;
    color:white;
    margin:0 0 10px;
    line-height:1.25;
}
.get-verified-section>p{
    font-size:14px;
    color:rgba(255,255,255,0.55);
    margin:0 0 24px;
    max-width:320px;
    line-height:1.55;
}
.gv-perks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 16px;
    margin-bottom:28px;
    width:100%;
    max-width:340px;
}
.gv-perk{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(2,136,209,0.18);
    border-radius:14px;
    padding:10px 12px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,0.8);
    text-align:left;
}
.gv-perk-icon{
    font-size:16px;
    flex-shrink:0;
}
.gv-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:15px 32px;
    background:linear-gradient(135deg,#1565c0,#0288d1);
    color:white;
    font-size:15px;
    font-weight:900;
    border-radius:16px;
    text-decoration:none;
    box-shadow:0 8px 28px rgba(2,136,209,0.45);
    transition:0.25s ease;
    letter-spacing:0.3px;
    position:relative;
    overflow:hidden;
}
.gv-cta::before{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:55%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    animation:vbadge-shimmer 3s ease-in-out infinite;
}
.gv-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 40px rgba(2,136,209,0.6);
}
.gv-stats{
    margin-top:18px;
    font-size:12px;
    color:rgba(255,255,255,0.35);
    letter-spacing:0.3px;
}
body.light-mode .get-verified-section{
    background:linear-gradient(135deg,rgba(21,101,192,0.07) 0%,rgba(2,136,209,0.04) 100%);
    border-color:rgba(2,136,209,0.2);
}
body.light-mode .get-verified-section h2{ color:#111; }
body.light-mode .get-verified-section>p{ color:#555; }
body.light-mode .gv-perk{ background:#f4f9ff; border-color:rgba(2,136,209,0.15); color:#333; }
body.light-mode .gv-stats{ color:rgba(0,0,0,0.35); }
body.light-mode .verified-badge{ box-shadow:0 2px 12px rgba(2,136,209,0.4); }
body.light-mode .seller-card-verified{ border-color:rgba(2,136,209,0.25)!important; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   FEATURED / SPOTLIGHT SHOP CARDS
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

.featured-shop-card{
    border-color:rgba(245,166,35,0.3)!important;
    box-shadow:0 6px 28px rgba(0,0,0,0.28),0 0 24px rgba(245,166,35,0.1)!important;
    padding-top:0!important;
    overflow:hidden;
}
.featured-shop-card .seller-avatar{
    border-color:rgba(245,166,35,0.75)!important;
    box-shadow:0 0 0 5px rgba(245,166,35,0.18),0 0 0 9px rgba(245,166,35,0.07),0 6px 20px rgba(0,0,0,0.4)!important;
    margin-top:10px;
}

/* gold ribbon at the top of featured card â€” replaces the old overlapping badge */
.featured-ribbon{
    width:100%;
    background:linear-gradient(135deg,#b8860b 0%,#f5a623 40%,#f7c948 60%,#f5a623 80%,#b8860b 100%);
    color:#1a0f00;
    font-size:9.5px;
    font-weight:900;
    letter-spacing:1.2px;
    padding:8px 12px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
    overflow:hidden;
    margin-bottom:0;
    flex-shrink:0;
}
.featured-ribbon::before{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
    animation:feat-shimmer 2.4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes feat-shimmer{
    0%{left:-120%}
    55%{left:160%}
    100%{left:160%}
}
.featured-ribbon-star{
    font-size:10px;
    color:rgba(26,15,0,0.5);
}

/* Visit button â€” gold tint */
.fs-visit-btn{
    background:linear-gradient(135deg,rgba(245,166,35,0.1),rgba(247,201,72,0.06))!important;
    border-color:rgba(245,166,35,0.28)!important;
    color:#f5a623!important;
}
.fs-visit-btn:hover{
    background:rgba(245,166,35,0.18)!important;
    border-color:rgba(245,166,35,0.5)!important;
    box-shadow:0 8px 20px rgba(245,166,35,0.22)!important;
    color:#f7c948!important;
}
.fs-tagline{
    font-size:11px;
    color:rgba(255,255,255,0.38);
    margin:4px 8px 6px;
    text-align:center;
    line-height:1.4;
}
.fs-rating{
    font-size:12px;
    color:rgba(255,255,255,0.45);
    margin:2px 0 8px;
}

/* "Boost My Shop" promo card */
.featured-shop-promo{
    background:linear-gradient(135deg,rgba(245,166,35,0.08),rgba(247,201,72,0.03))!important;
    border-color:rgba(245,166,35,0.22)!important;
    justify-content:center;
    text-align:center;
}
.fsp-crown{
    font-size:38px;
    margin-bottom:12px;
    filter:drop-shadow(0 4px 12px rgba(245,166,35,0.4));
}
.featured-shop-promo h3{
    font-size:16px!important;
    font-weight:900!important;
    color:white!important;
    margin-bottom:8px!important;
}
.fsp-sub{
    font-size:12px;
    color:rgba(255,255,255,0.42);
    margin:0 0 18px;
    line-height:1.55;
}
.fsp-perks{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:20px;
}
.fsp-perk{
    font-size:12px;
    color:rgba(255,255,255,0.6);
    font-weight:600;
}
.fsp-cta-btn{
    background:linear-gradient(135deg,#f5a623,#f7c948)!important;
    color:#1a0f00!important;
    font-weight:900!important;
    border:none!important;
    box-shadow:0 6px 24px rgba(245,166,35,0.4)!important;
    letter-spacing:0.3px;
}
.fsp-cta-btn:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 12px 36px rgba(245,166,35,0.55)!important;
    color:#1a0f00!important;
}
.fsp-price{
    margin-top:10px;
    font-size:11px;
    color:rgba(245,166,35,0.65);
    font-weight:700;
    letter-spacing:0.3px;
}

/* light mode adjustments */
body.light-mode .featured-shop-card{ border-color:rgba(245,166,35,0.25)!important; }
body.light-mode .featured-shop-promo{ background:linear-gradient(135deg,rgba(245,166,35,0.06),rgba(247,201,72,0.02))!important; }
body.light-mode .featured-shop-promo h3{ color:#111!important; }
body.light-mode .fsp-sub{ color:#666; }
body.light-mode .fsp-perk{ color:#555; }
body.light-mode .fsp-price{ color:rgba(180,110,0,0.8); }
body.light-mode .fs-rating{ color:#666; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   HUB SPOTLIGHT CTA â€” reusable across all hubs
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hub-spotlight-cta{
    background:linear-gradient(135deg,rgba(245,166,35,0.1),rgba(247,201,72,0.04));
    border:1px solid rgba(245,166,35,0.22);
    border-radius:24px;
    padding:32px 24px;
    margin:24px 0 36px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
}
.hub-spotlight-cta::before{
    content:'';
    position:absolute;
    top:-80px;right:-80px;
    width:200px;height:200px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(245,166,35,0.12) 0%,transparent 70%);
    pointer-events:none;
}
.hsc-icon{font-size:44px;flex-shrink:0;filter:drop-shadow(0 4px 14px rgba(245,166,35,0.45));}
.hsc-body{flex:1;min-width:200px;}
.hsc-body h3{font-size:18px;font-weight:900;color:white;margin:0 0 6px;}
.hsc-body p{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;margin:0 0 14px;}
.hsc-perks{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.hsc-perk{font-size:12px;font-weight:700;color:rgba(255,255,255,0.6);}
.hsc-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 26px;
    background:linear-gradient(135deg,#f5a623,#f7c948);
    color:#1a0f00;font-size:14px;font-weight:900;
    border-radius:14px;text-decoration:none;border:none;cursor:pointer;
    box-shadow:0 6px 24px rgba(245,166,35,0.4);
    transition:0.25s ease;font-family:inherit;
    position:relative;overflow:hidden;letter-spacing:0.3px;
}
.hsc-btn::before{
    content:'';
    position:absolute;top:0;left:-100%;width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
    animation:feat-shimmer 3s ease-in-out infinite;
}
.hsc-btn:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(245,166,35,0.55);color:#1a0f00;}
.hsc-price{font-size:11px;color:rgba(245,166,35,0.65);font-weight:700;margin-top:10px;letter-spacing:0.3px;}
@media(max-width:600px){
    .hub-spotlight-cta{flex-direction:column;text-align:center;}
    .hsc-perks{justify-content:center;}
}
body.light-mode .hub-spotlight-cta{background:linear-gradient(135deg,rgba(245,166,35,0.06),rgba(247,201,72,0.02));border-color:rgba(245,166,35,0.2);}
body.light-mode .hsc-body h3{color:#111;}
body.light-mode .hsc-body p{color:#555;}
body.light-mode .hsc-perk{color:#444;}
body.light-mode .hsc-price{color:rgba(180,110,0,0.8);}

/* pv-verified badge on services.html â†’ upgrade to blue */
.pv-verified{
    display:inline-block;font-size:9px;
    background:linear-gradient(135deg,#1565c0,#0288d1)!important;
    color:white!important;
    padding:2px 8px;border-radius:999px;
    border:1px solid rgba(255,255,255,0.2)!important;
    margin-left:5px;vertical-align:middle;font-weight:900;
    box-shadow:0 1px 8px rgba(2,136,209,0.45);
    letter-spacing:0.4px;
}

.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
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* â”€â”€ Premium Splash â”€â”€ */
.splash-screen{
    background: #010101;
    flex-direction: column;
}

/* Particle canvas */
#splashCanvas{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}

/* Logo entrance â€” animates the wrapper card, not the img directly */
.splash-logo{
    display:block;
    margin:0 auto;
}
@keyframes splashLogoIn{
    from{ opacity:0; transform:scale(0.8) translateY(18px); }
    to  { opacity:1; transform:scale(1)   translateY(0); }
}

/* Loader ring â€” slightly larger, premium */
.loader-ring{
    width:52px !important;
    height:52px !important;
    border-width:3px !important;
    border-color:rgba(113,255,0,0.12) !important;
    border-top-color:#71ff00 !important;
    box-shadow:0 0 18px rgba(113,255,0,0.15);
    margin:18px auto 0 !important;
    animation:spin 0.9s linear infinite !important;
}

/* Splash tagline */
.splash-tagline{
    font-size:12px;
    font-weight:800;
    color:rgba(113,255,0,0.75);
    letter-spacing:3px;
    text-transform:uppercase;
    margin-top:16px;
    animation: fadeInUp 0.7s ease 0.55s both;
}

/* "Loading Sokoniâ€¦" text */
.splash-content > p{
    animation: fadeInUp 0.6s ease 0.3s both;
}

@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:translateY(0); }
}

/* Green glow ring behind logo */
.splash-content::before{
    content:'';
    display:block;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(113,255,0,0.1) 0%, transparent 70%);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-60%);
    pointer-events:none;
    animation:splashGlow 2.5s ease-in-out infinite alternate;
}
@keyframes splashGlow{
    from{ opacity:0.5; transform:translate(-50%,-60%) scale(0.9); }
    to  { opacity:1;   transform:translate(-50%,-60%) scale(1.15); }
}

/* 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:10px 6px;
    min-height:44px;
    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:10px 12px;
    min-height:44px;
    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;
}

/* ── Wishlist saved / active state ── */
.pcard-btn--wish-active{
    background:rgba(255,45,85,0.22) !important;
    border-color:rgba(255,45,85,0.55) !important;
    color:#ff2d55 !important;
    box-shadow:0 0 12px rgba(255,45,85,0.25) !important;
}

/* ── Low-stock chip (shown in desktop product-body) ── */
.pcard-stock{
    display:inline-flex;
    align-items:center;
    font-size:9.5px;
    font-weight:800;
    border-radius:6px;
    padding:2px 7px;
    margin-top:4px;
    letter-spacing:0.01em;
}
.pcard-stock--low{
    background:rgba(255,152,0,0.12);
    border:1px solid rgba(255,152,0,0.3);
    color:#ff9800;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   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:#050505 !important; }
body.light-mode .product-card h3{ color:#050505 !important; }
body.light-mode .product-card span.price{ color:#1a8a00 !important; }
body.light-mode .cart-name{ color:#050505 !important; }
body.light-mode .cart-info h2{ color:#050505 !important; }
body.light-mode .wishlist-card h2{ color:#050505 !important; }
body.light-mode .profile-sidebar h2{ color:#050505 !important; }
body.light-mode .profile-orders h2{ color:#050505 !important; }
body.light-mode .profile-order-card h3{ color:#050505 !important; }

/* â”€â”€ GLOBAL LIGHT MODE FONT BRIGHTNESS BOOST â”€â”€
   Makes ALL text sharper and darker on light background.
   Covers anything missed by the specific rules above.   */
body.light-mode{ color:#050505 !important; }
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6{ color:#000 !important; }
body.light-mode p{ color:#111 !important; }
body.light-mode li{ color:#111 !important; }
body.light-mode label{ color:#111 !important; }

/* Force all rgba-white text dark in every element */
body.light-mode [style*="color:rgba(255,255,255,0.9"],
body.light-mode [style*="color:rgba(255,255,255,0.8"],
body.light-mode [style*="color:rgba(255,255,255,0.7"],
body.light-mode [style*="color:rgba(255,255,255,0.6"],
body.light-mode [style*="color:rgba(255,255,255,0.5"]{ color:#111 !important; }
body.light-mode [style*="color:rgba(255,255,255,0.4"]{ color:#333 !important; }
body.light-mode [style*="color:rgba(255,255,255,0.3"]{ color:#555 !important; }
body.light-mode [style*="color:rgba(255,255,255,0.2"]{ color:#777 !important; }

/* Force #71ff00 neon to proper dark green in light */
body.light-mode [style*="color:#71ff00"],
body.light-mode [style*="color: #71ff00"]{ color:#1a8a00 !important; }

/* Dark card backgrounds â†’ white */
body.light-mode [style*="background:rgba(18,18,18"],
body.light-mode [style*="background:rgba(15,15,15"],
body.light-mode [style*="background:rgba(12,12,12"],
body.light-mode [style*="background:#1a1a1a"],
body.light-mode [style*="background:#111111"]{ background:#fff !important; }

/* Subtle section backgrounds */
body.light-mode section,
body.light-mode .section{ background:transparent !important; }

/* â”€â”€ Page background upgrade â€” pure white for maximum contrast â”€â”€ */
body.light-mode{ background:#ffffff !important; }
html.light-mode{ background:#ffffff !important; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SOKONI PREMIUM v3 â€” CREATIVE ALL-PAGE REDESIGN
   Every card, section upgraded to premium classy finish.
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* SELLER CARD â€” glassmorphism */
.seller-card{background:linear-gradient(145deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);border:1px solid rgba(255,255,255,0.09);border-radius:26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform 0.35s cubic-bezier(.34,1.56,.64,1),box-shadow 0.3s ease,border-color 0.3s ease;overflow:hidden;position:relative;}
.seller-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(113,255,0,0.06) 0%,transparent 60%,rgba(0,170,255,0.04) 100%);border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;}
.seller-card:hover::before{opacity:1;}
.seller-card:hover{transform:translateY(-8px) scale(1.015);border-color:rgba(113,255,0,0.22);box-shadow:0 20px 48px rgba(0,0,0,0.4),0 0 0 1px rgba(113,255,0,0.12),0 0 32px rgba(113,255,0,0.08);}
/* SELLER AVATAR â€” glowing ring */
.seller-avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:3px solid rgba(113,255,0,0.45);box-shadow:0 0 0 6px rgba(113,255,0,0.1),0 0 0 10px rgba(113,255,0,0.04),0 6px 20px rgba(0,0,0,0.4);background:rgba(255,255,255,0.06);transition:box-shadow .35s,border-color .35s;display:flex;align-items:center;justify-content:center;}
.seller-avatar img{width:100%;height:100%;object-fit:contain;padding:10px;}
.seller-card:hover .seller-avatar{border-color:rgba(113,255,0,0.75);box-shadow:0 0 0 8px rgba(113,255,0,0.14),0 0 0 13px rgba(113,255,0,0.05),0 0 32px rgba(113,255,0,0.25);}
/* SELLER LOCATION TAG */
.seller-location-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(0,170,255,0.1);border:1px solid rgba(0,170,255,0.18);color:#00aaff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;margin:4px 0 8px;}
/* SELLER TAGS */
.seller-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:6px 0 12px;}
.seller-tag{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.65);font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;transition:background .2s,color .2s;}
.seller-card:hover .seller-tag{background:rgba(113,255,0,0.08);border-color:rgba(113,255,0,0.2);color:#71ff00;}
/* SELLER VISIT BTN */
.seller-visit-btn{display:block;padding:10px 16px;border-radius:14px;background:rgba(113,255,0,0.07);border:1px solid rgba(113,255,0,0.2);color:#71ff00;text-decoration:none;font-size:12px;font-weight:800;text-align:center;transition:all .25s;letter-spacing:.02em;margin-top:auto;}
.seller-visit-btn:hover{background:rgba(113,255,0,0.15);border-color:rgba(113,255,0,0.45);transform:scale(1.02);box-shadow:0 6px 20px rgba(113,255,0,0.18);}
.seller-visit-btn.green-btn{background:linear-gradient(135deg,#71ff00,#4fc800);color:black;border:none;box-shadow:0 4px 16px rgba(113,255,0,0.3);}
.seller-visit-btn.green-btn:hover{background:linear-gradient(135deg,#8fff33,#5fe800);box-shadow:0 8px 28px rgba(113,255,0,0.45);}
/* BECOME SELLER CARD */
.seller-card.become-seller{background:linear-gradient(145deg,rgba(113,255,0,0.06) 0%,rgba(0,170,255,0.04) 50%,rgba(113,255,0,0.03) 100%);border-color:rgba(113,255,0,0.15);}
.seller-card.become-seller:hover{border-color:rgba(113,255,0,0.35);box-shadow:0 20px 48px rgba(0,0,0,0.4),0 0 0 1px rgba(113,255,0,0.2),0 0 40px rgba(113,255,0,0.1);}
.become-icon{font-size:36px;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(113,255,0,0.3));animation:becomePulse 2.5s ease-in-out infinite;}
@keyframes becomePulse{0%,100%{filter:drop-shadow(0 0 10px rgba(113,255,0,0.25));}50%{filter:drop-shadow(0 0 22px rgba(113,255,0,0.55));}}
.become-perks{display:flex;flex-direction:column;gap:4px;margin:8px 0 14px;font-size:11px;color:rgba(255,255,255,0.55);font-weight:600;text-align:left;}
/* SECTION TITLES */
.section-title h2{font-size:22px;font-weight:900;letter-spacing:-0.3px;}
.section-sub{color:rgba(255,255,255,0.38);font-size:12px;margin-top:4px;font-weight:500;}
/* FEATURED SHOPS */
#featuredShopsSection{background:linear-gradient(135deg,rgba(113,255,0,0.03),rgba(0,170,255,0.02),rgba(113,255,0,0.01));border-top:1px solid rgba(113,255,0,0.07);border-bottom:1px solid rgba(113,255,0,0.07);padding:20px 0 10px;}
/* FEATURE STRIP */
/* FEATURES STRIP — 4-item trust belt (authoritative) */
.features-strip{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:0!important;padding:0!important;margin:0!important;background:rgba(255,255,255,0.02)!important;border-top:1px solid rgba(255,255,255,0.07)!important;border-bottom:1px solid rgba(255,255,255,0.07)!important;overflow:visible!important;}
.feature-item{flex:1!important;min-width:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:18px 20px!important;border-right:1px solid rgba(255,255,255,0.06)!important;border-top:none!important;border-bottom:none!important;border-left:none!important;border-radius:0!important;background:transparent!important;text-align:left!important;transition:background .2s!important;}
.feature-item:last-child{border-right:none!important;}
.feature-item:hover{background:rgba(113,255,0,0.04)!important;}
.feature-icon{width:42px!important;height:42px!important;min-width:42px!important;font-size:20px!important;background:rgba(113,255,0,0.08)!important;border:1px solid rgba(113,255,0,0.18)!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;transition:background .2s,border-color .2s!important;}
.feature-item:hover .feature-icon{background:rgba(113,255,0,0.14)!important;border-color:rgba(113,255,0,0.32)!important;}
.feature-text{overflow:hidden;min-width:0;flex:1;}
.feature-text h4{font-size:13px!important;font-weight:800!important;color:rgba(255,255,255,0.9)!important;margin:0 0 3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.feature-text p{font-size:11px!important;color:rgba(255,255,255,0.4)!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
/* MOBILE ≤600px: 2×2 grid */
@media(max-width:600px){
  .features-strip{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .feature-item{flex:none!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:16px 10px!important;gap:8px!important;border-right:1px solid rgba(255,255,255,0.06)!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;}
  .feature-item:nth-child(even){border-right:none!important;}
  .feature-item:nth-last-child(-n+2){border-bottom:none!important;}
  .feature-icon{width:36px!important;height:36px!important;min-width:36px!important;font-size:18px!important;}
  .feature-text h4{font-size:12px!important;white-space:normal!important;text-align:center!important;}
  .feature-text p{font-size:10px!important;white-space:normal!important;text-align:center!important;}
}
/* TABLET 601–900px: row, slightly compact */
@media(min-width:601px) and (max-width:900px){
  .feature-item{padding:16px 14px!important;gap:10px!important;}
  .feature-icon{width:36px!important;height:36px!important;min-width:36px!important;font-size:17px!important;}
  .feature-text h4{font-size:11.5px!important;}
  .feature-text p{font-size:10px!important;}
}
/* DESKTOP ≥900px: row, generous spacing, max-width centered */
@media(min-width:900px){
  .features-strip{max-width:1200px!important;margin:0 auto!important;}
  .feature-item{padding:22px 28px!important;gap:14px!important;}
  .feature-icon{width:46px!important;height:46px!important;min-width:46px!important;font-size:22px!important;}
  .feature-text h4{font-size:14px!important;}
  .feature-text p{font-size:11.5px!important;}
}
body.light-mode .features-strip{background:rgba(0,0,0,0.02)!important;border-color:rgba(0,0,0,0.07)!important;}
body.light-mode .feature-icon{background:rgba(113,255,0,0.08)!important;border-color:rgba(113,255,0,0.22)!important;}
body.light-mode .feature-text h4{color:#111!important;}
body.light-mode .feature-text p{color:rgba(0,0,0,0.4)!important;}
/* B2B STRIP */
.b2b-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;padding:10px 20px 20px;}
.b2b-strip-card{background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.b2b-strip-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(113,255,0,0.4),transparent);opacity:0;transition:opacity .3s;}
.b2b-strip-card:hover::before{opacity:1;}
.b2b-strip-card:hover{transform:translateY(-4px);border-color:rgba(113,255,0,0.2);box-shadow:0 10px 28px rgba(0,0,0,0.3),0 0 0 1px rgba(113,255,0,0.08);}
.b2b-icon{font-size:26px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,border-color .3s;}
.b2b-strip-card:hover .b2b-icon{background:rgba(113,255,0,0.08);border-color:rgba(113,255,0,0.2);}
.b2b-info strong{display:block;font-size:13px;font-weight:800;color:white;margin-bottom:3px;}
.b2b-info p{font-size:10px;color:rgba(255,255,255,0.4);margin:0;line-height:1.4;}
.b2b-arrow{font-size:18px;color:rgba(255,255,255,0.25);margin-left:auto;flex-shrink:0;transition:transform .25s,color .25s;}
.b2b-strip-card:hover .b2b-arrow{transform:translateX(3px);color:#71ff00;}
.b2b-loyalty{border-color:rgba(255,193,7,0.15);background:linear-gradient(145deg,rgba(255,193,7,0.04),rgba(255,255,255,0.01));}
.b2b-loyalty:hover{border-color:rgba(255,193,7,0.3);box-shadow:0 10px 28px rgba(0,0,0,0.3),0 0 0 1px rgba(255,193,7,0.1);}
.b2b-loyalty .b2b-icon{background:rgba(255,193,7,0.08);border-color:rgba(255,193,7,0.18);}
/* FLASH LABEL */
.flash-label{background:linear-gradient(135deg,#ef4444,#dc2626);color:white;font-weight:900;font-size:11px;padding:5px 12px;border-radius:999px;letter-spacing:.05em;box-shadow:0 2px 12px rgba(239,68,68,0.4);animation:flashLabelPulse 1.8s ease-in-out infinite;}
@keyframes flashLabelPulse{0%,100%{box-shadow:0 2px 12px rgba(239,68,68,0.35);}50%{box-shadow:0 4px 22px rgba(239,68,68,0.6);}}
/* GLASS HERO */
.glass-hero{position:relative;padding:32px 20px;overflow:hidden;display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);max-width:900px;margin:16px auto;border-radius:28px;}
.glass-hero-bg{position:absolute;inset:0;background:url("assets/backG1.jpeg") center/cover no-repeat;filter:brightness(0.82);transform:scale(1.04);transition:transform 8s ease;pointer-events:none;}
.glass-btn-green{background:linear-gradient(135deg,#71ff00,#4fc800);color:black;font-weight:900;font-size:13px;padding:13px 24px;border-radius:16px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 24px rgba(113,255,0,0.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;}
.glass-btn-green:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 36px rgba(113,255,0,0.5);}
/* NEW ARRIVALS HORIZONTAL SCROLL */
.new-arrivals-grid{display:flex;flex-direction:row;gap:10px;padding:6px 16px 16px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;}
.new-arrivals-grid::-webkit-scrollbar{display:none;}
.new-arrivals-grid .product-card{flex:0 0 155px;min-width:155px;max-width:155px;scroll-snap-align:start;border-radius:18px;border:1px solid rgba(255,255,255,0.07);background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;}
.new-arrivals-grid .product-card:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(113,255,0,0.2);box-shadow:0 14px 36px rgba(0,0,0,0.4),0 0 0 1px rgba(113,255,0,0.1);}
/* SEE ALL LINK */
.see-all-link{font-size:12px;font-weight:800;color:#71ff00;text-decoration:none;opacity:.75;transition:opacity .2s,background .2s;white-space:nowrap;padding:6px 12px;border-radius:10px;border:1px solid rgba(113,255,0,0.18);background:rgba(113,255,0,0.05);}
.see-all-link:hover{opacity:1;background:rgba(113,255,0,0.1);border-color:rgba(113,255,0,0.35);}
/* FLASH PRODUCT CARDS */
#flashProductsGrid .product-card{border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border:1px solid rgba(239,68,68,0.12);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s;}
#flashProductsGrid .product-card:hover{border-color:rgba(239,68,68,0.3);transform:translateY(-5px);}
/* SECTION TITLE ROW */
.new-arrivals-title-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;}
/* MOBILE */
@media(max-width:768px){.b2b-strip{grid-template-columns:1fr;padding:8px 14px 16px;}.seller-container{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px 14px 20px;}}
@media(max-width:400px){.seller-container{grid-template-columns:repeat(2,1fr);}}
/* DESKTOP */
@media(min-width:900px){.seller-container{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:22px 36px 36px;}.b2b-strip{grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto;}#featuredShopsGrid .seller-card{flex:0 0 210px;min-width:210px;max-width:210px;}.new-arrivals-grid .product-card{flex:0 0 185px;min-width:185px;max-width:185px;}}
/* LIGHT MODE */
body.light-mode .seller-card{background:linear-gradient(145deg,#fff,#f6f8f2);border-color:rgba(0,0,0,0.08);box-shadow:0 2px 16px rgba(0,0,0,0.07);}
body.light-mode .seller-card:hover{border-color:rgba(113,255,0,0.4);box-shadow:0 14px 36px rgba(0,0,0,0.12),0 0 0 1px rgba(113,255,0,0.18);}
body.light-mode .feature-item{background:#fff;border-color:rgba(0,0,0,0.07);box-shadow:0 2px 12px rgba(0,0,0,0.05);}
body.light-mode .b2b-strip-card{background:#fff;border-color:rgba(0,0,0,0.07);}
body.light-mode .seller-visit-btn{background:rgba(113,255,0,0.08);color:#3a8000;border-color:rgba(113,255,0,0.25);}
/* END PREMIUM v3 */

/* â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”
   SOKONI PREMIUM SEARCH â€” global upgrade  (all pages / all bars)
   Targets: .search-bar input Â· input[type="search"] Â· any class
   matching *-search-bar, *-search-input Â· .adm-search
â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â”â” */

/* Positioning context for autocomplete dropdowns */
.search-bar,
[class*="-search-bar"],
[class*="-search-row"],
.adm-toolbar {
  position: relative;
}

/* â”€â”€ Core premium glass input â”€â”€ */
.search-bar input:not([type="date"]):not([type="number"]):not([type="time"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
input[type="search"],
[class*="-search-bar"] input[type="text"],
[class*="-search-bar"] input[type="search"],
[class*="-search-input"],
.adm-search {
  width: 100% !important;
  padding: 13px 18px 13px 44px !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(255%2C255%2C255%2C0.3)' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zm-5.242 1.9a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") !important;
  background-position: left 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  color: white !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

/* â”€â”€ Focus: SOKONI green accent glow â”€â”€ */
.search-bar input:focus,
input[type="search"]:focus,
[class*="-search-bar"] input[type="text"]:focus,
[class*="-search-bar"] input[type="search"]:focus,
[class*="-search-input"]:focus,
.adm-search:focus {
  border-color: rgba(113,255,0,0.45) !important;
  background-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 3px rgba(113,255,0,0.07), 0 4px 20px rgba(0,0,0,0.25) !important;
}

/* â”€â”€ Placeholder â”€â”€ */
.search-bar input::placeholder,
input[type="search"]::placeholder,
[class*="-search-bar"] input[type="text"]::placeholder,
[class*="-search-bar"] input[type="search"]::placeholder,
[class*="-search-input"]::placeholder,
.adm-search::placeholder {
  color: rgba(255,255,255,0.28) !important;
  font-size: 13px;
}

/* â”€â”€ Remove browser default search cancel / results buttons â”€â”€ */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* â”€â”€ Light-mode variant â”€â”€ */
body.light-mode .search-bar input:not([type="date"]):not([type="number"]):not([type="time"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
body.light-mode input[type="search"],
body.light-mode [class*="-search-bar"] input[type="text"],
body.light-mode [class*="-search-bar"] input[type="search"],
body.light-mode [class*="-search-input"],
body.light-mode .adm-search {
  background-color: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #0a0a0a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(0%2C0%2C0%2C0.35)' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zm-5.242 1.9a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") !important;
}
body.light-mode .search-bar input::placeholder,
body.light-mode input[type="search"]::placeholder,
body.light-mode [class*="-search-bar"] input[type="text"]::placeholder,
body.light-mode [class*="-search-bar"] input[type="search"]::placeholder,
body.light-mode [class*="-search-input"]::placeholder,
body.light-mode .adm-search::placeholder {
  color: rgba(0,0,0,0.35) !important;
}
body.light-mode .search-bar input:focus,
body.light-mode input[type="search"]:focus,
body.light-mode [class*="-search-bar"] input[type="text"]:focus,
body.light-mode [class*="-search-bar"] input[type="search"]:focus,
body.light-mode [class*="-search-input"]:focus,
body.light-mode .adm-search:focus {
  border-color: rgba(58,128,0,0.5) !important;
  background-color: rgba(113,255,0,0.04) !important;
  box-shadow: 0 0 0 3px rgba(113,255,0,0.1) !important;
}
/* END PREMIUM SEARCH */

/* ================================================================
   SOKONI POLISH v2 â€” Global Life & Density System
   Loaded globally via style.css append + shared-header.js inject.
   More life : micro-animations Â· glow Â· shimmer Â· hover states
   More density : ~25% tighter spacing Â· more info per viewport
================================================================ */

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   DESIGN TOKENS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
:root {
  --pk-green:       #71ff00;
  --pk-green-dim:   rgba(113,255,0,0.14);
  --pk-green-glow:  rgba(113,255,0,0.35);
  --pk-glass:       rgba(255,255,255,0.04);
  --pk-border:      rgba(255,255,255,0.08);
  --pk-border-g:    rgba(113,255,0,0.22);
  --pk-ease:        cubic-bezier(0.4,0,0.2,1);
  --pk-spring:      cubic-bezier(0.34,1.56,0.64,1);
  --pk-shadow-card: 0 4px 20px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
  --pk-shadow-lift: 0 10px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(113,255,0,0.13);
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   KEYFRAMES
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@keyframes pk-fade-up {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pk-scale-in {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pk-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(113,255,0,0.22); }
  50%      { box-shadow: 0 0 18px 4px rgba(113,255,0,0.18); }
}
@keyframes pk-hero-sweep {
  0%   { transform: translateX(-100%) skewX(-12deg); opacity:0; }
  60%  { opacity: 0.08; }
  100% { transform: translateX(300%) skewX(-12deg); opacity:0; }
}
@keyframes pk-float-sm {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes pk-number-pop {
  0%   { transform: scale(0.8); opacity:0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity:1; }
}
@keyframes pk-border-spin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   BODY â€” AMBIENT BACKGROUND GRADIENT
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body {
  background:
    radial-gradient(ellipse at 10% 15%, rgba(113,255,0,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 88% 78%, rgba(113,255,0,0.025) 0%, transparent 40%),
    #080808 !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   SCROLLBAR â€” GREEN ACCENT
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(113,255,0,0.28); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(113,255,0,0.55); }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   SELECTION
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
::selection      { background: rgba(113,255,0,0.22); color:#fff; }
::-moz-selection { background: rgba(113,255,0,0.22); color:#fff; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   TYPOGRAPHY â€” TIGHTER & SHARPER
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
h1,h2,h3,h4,h5,h6 {
  line-height:1.18 !important;
  letter-spacing:-0.022em !important;
  font-weight:800 !important;
}
p { line-height:1.52; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   SECTION TITLES â€” GREEN ACCENT BAR + TIGHT SPACING
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.section-title {
  margin-top:18px !important;
  padding:0 16px !important;
  margin-bottom:8px !important;
}
.section-title h2,
.section-title h3 {
  position:relative;
  padding-left:12px !important;
}
.section-title h2::before,
.section-title h3::before {
  content:'';
  position:absolute;
  left:0; top:15%; bottom:15%;
  width:3px;
  background:linear-gradient(180deg, #71ff00, #4fc800);
  border-radius:2px;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   CATEGORIES â€” DENSER GRID, CRISPER CARDS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.categories {
  gap:10px !important;
  padding:10px 14px 14px !important;
}
.category-card {
  padding:14px 10px !important;
  border-radius:16px !important;
  transition:transform 0.17s var(--pk-ease), border-color 0.17s ease, background 0.17s ease, box-shadow 0.17s ease !important;
}
.category-card:hover {
  transform:translateY(-4px) scale(1.02) !important;
  border-color:var(--pk-border-g) !important;
  background:rgba(113,255,0,0.07) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(113,255,0,0.10) !important;
}
.category-card:active { transform:scale(0.96) !important; }
.category-card img { width:38px !important; height:38px !important; margin-bottom:7px !important; }
.category-card span { font-size:11px !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   SERVICE ICON CARDS â€” DENSER
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.services-icon-grid {
  gap:8px !important;
  padding:4px 14px 12px !important;
}
.svc-icon-card {
  padding:12px 6px 10px !important;
  border-radius:14px !important;
  gap:5px !important;
  transition:transform 0.17s var(--pk-ease), border-color 0.17s ease, background 0.17s ease, box-shadow 0.17s ease !important;
}
.svc-icon-card:hover {
  transform:translateY(-3px) scale(1.04) !important;
  border-color:rgba(113,255,0,0.28) !important;
  background:rgba(113,255,0,0.07) !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.3) !important;
}
.svc-icon-card:active { transform:scale(0.94) !important; }
.svc-icon-card span { font-size:26px !important; }
.svc-icon-card p    { font-size:10px !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   UNIVERSAL CARD â€” HOVER LIFT + GREEN GLOW
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.product-card,
.seller-card,
[class*="-card"]:not([class*="modal"]):not([class*="n-panel"]):not([class*="nd-item"]):not([class*="mmenu"]):not([class*="toast"]) {
  transition:transform 0.18s var(--pk-ease), box-shadow 0.18s ease, border-color 0.18s ease !important;
  will-change:transform;
}
.product-card:hover, .seller-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:var(--pk-shadow-lift) !important;
  border-color:rgba(113,255,0,0.18) !important;
}
.product-card:active { transform:scale(0.97) !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   PRODUCT CARD â€” TIGHTER INFO DISPLAY
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.product-card h3 { padding:10px 10px 4px !important; font-size:13px !important; }
.price           { padding:0 10px !important; font-size:15px !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   BUTTONS â€” UNIVERSAL MICRO-INTERACTIONS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
button:not([class*="mmenu"]):not([class*="nd-"]):not([class*="n-opt"]):not([disabled]),
.btn:not([disabled]) {
  transition:transform 0.13s var(--pk-ease), box-shadow 0.13s ease, filter 0.13s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}
button:not([disabled]):not([class*="mmenu"]):hover { filter:brightness(1.1) !important; transform:translateY(-1px) !important; }
button:not([disabled]):not([class*="mmenu"]):active { transform:scale(0.95) !important; filter:brightness(0.92) !important; }
.btn:not([disabled]):hover  { filter:brightness(1.1) !important; transform:translateY(-1px) !important; }
.btn:not([disabled]):active { transform:scale(0.95) !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   CTA / PRIMARY BUTTONS â€” GLOW PULSE
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hero button,
[class*="-cta"]:not([disabled]),
[class*="primary-btn"]:not([disabled]),
[class*="submit-btn"]:not([disabled]) {
  animation:pk-glow-pulse 3s ease-in-out infinite !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   INPUTS â€” CRISP FOCUS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea, select {
  transition:border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
textarea:focus, select:focus {
  border-color:rgba(113,255,0,0.5) !important;
  box-shadow:0 0 0 3px rgba(113,255,0,0.10) !important;
  outline:none !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   STATS & NUMBERS â€” GREEN GLOW
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="dash-stat-val"],
[class*="-stat-n"],
[class*="hd-val"],
[class*="-number"]:not(input) {
  color:var(--pk-green) !important;
  text-shadow:0 0 16px rgba(113,255,0,0.28) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   PRICES â€” VIVID GREEN
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.price,
[class*="-price"]:not([class*="price-old"]):not([class*="crossed"]):not(input) {
  color:var(--pk-green) !important;
  text-shadow:0 0 14px rgba(113,255,0,0.22) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   HERO SECTIONS â€” LIGHT SWEEP SHIMMER
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hero,
.glass-hero, .bk-hero, .hc-hero, .sv-hero, .fd-hero,
.car-hero, .ent-hero, .sp-hero, .prop-hero, .bnb-hero,
.law-hero, .ride-hero, .del-hero, .fn-hero {
  position:relative !important;
  overflow:hidden !important;
}
.hero::after,
.glass-hero::after, .bk-hero::after, .hc-hero::after, .sv-hero::after,
.car-hero::after, .ent-hero::after, .sp-hero::after, .fd-hero::after {
  content:'';
  position:absolute;
  top:-20%; left:-30%;
  width:60%; height:140%;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  animation:pk-hero-sweep 5s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
.hero > *, .glass-hero > *, .bk-hero > *,
.hc-hero > *, .sv-hero > *, .car-hero > *,
.ent-hero > *, .sp-hero > * { position:relative; z-index:2; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   BOTTOM NAV â€” ELECTRIC ACTIVE STATE
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.bnav-item { transition:color 0.15s ease, transform 0.12s ease !important; }
.bnav-item.active-bnav {
  color:var(--pk-green) !important;
  text-shadow:0 0 12px rgba(113,255,0,0.4) !important;
}
.bnav-item:hover:not(.active-bnav) { color:rgba(255,255,255,0.75) !important; }
.bnav-item:active { transform:scale(0.88) !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   TAB BUTTONS â€” CRISP TRANSITIONS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="-tab-btn"],
[class*="-filter-btn"] {
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}
[class*="-tab-btn"]:active,
[class*="-filter-btn"]:active { transform:scale(0.94) !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   IMAGES â€” HOVER ZOOM INSIDE CARDS
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.product-card img,
[class*="-card"] img:not([class*="avatar"]):not([class*="logo"]):not([class*="icon"]) {
  transition:transform 0.25s var(--pk-ease) !important;
  will-change:transform;
}
.product-card:hover img,
[class*="-card"]:hover img:not([class*="avatar"]):not([class*="logo"]):not([class*="icon"]) {
  transform:scale(1.05) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   NOTIFICATION DOT â€” LIVE PULSE
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.sk-notif-dot.visible { animation:pk-glow-pulse 2.5s ease-in-out infinite !important; }
#sokoni-bell-badge    { animation:pk-number-pop 0.4s var(--pk-spring) both !important; }
.n-bell-dot.on        { animation:pk-glow-pulse 2.8s ease-in-out infinite !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   FLOATING BUTTONS â€” GENTLE FLOAT
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#sokoni-wa-support      { animation:pk-float-sm 3.5s ease-in-out infinite !important; }
.back-to-top-btn.visible { animation:pk-float-sm 3.5s ease-in-out infinite, bttFadeIn .25s ease both !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   FORMS â€” COMPACT
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
label { font-size:12px !important; font-weight:700 !important; margin-bottom:4px !important; display:block; }
.form-group, .input-group { margin-bottom:12px !important; }

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   MODALS â€” SMOOTH ENTRANCE
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="-modal"].active, [class*="-modal"].open,
[id*="-modal"].active, [id*="-modal"].open {
  animation:pk-scale-in 0.22s var(--pk-ease) both !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   TOAST / ALERTS â€” FADE UP
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="toast"]:not([class*="-track"]):not([class*="toast-track"]),
[id*="toast"]:not([id*="-track"]) {
  animation:pk-fade-up 0.22s var(--pk-ease) both !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   STAT CARDS â€” HOVER SCALE
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="-stat"]:not(p):not(span):not(label):not(input) {
  transition:transform 0.17s ease !important;
}
[class*="-stat"]:not(p):not(span):not(label):not(input):hover {
  transform:scale(1.04) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   BADGES / CHIPS â€” COMPACT
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
[class*="-badge"]:not(input):not(button):not(a[href]):not(select),
[class*="-tag"]:not(input):not(button):not(a[href]):not(select),
[class*="-chip"]:not(input):not(button):not(a[href]):not(select) {
  padding:3px 9px !important;
  font-size:10px !important;
  font-weight:700 !important;
  border-radius:999px !important;
  letter-spacing:0.02em !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   SHARED HEADER (sk-nav) â€” POLISH
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#sk-top-nav { box-shadow:0 2px 20px rgba(0,0,0,0.4), 0 1px 0 rgba(113,255,0,0.06) !important; }
.sk-nav-icon-btn {
  transition:background 0.15s ease, transform 0.12s ease, color 0.15s ease !important;
}
.sk-nav-icon-btn:hover {
  background:rgba(113,255,0,0.10) !important;
  border-color:rgba(113,255,0,0.22) !important;
  transform:scale(1.08) !important;
  color:var(--pk-green) !important;
}
#sk-nav-cart:hover {
  background:rgba(113,255,0,0.15) !important;
  box-shadow:0 0 12px rgba(113,255,0,0.2) !important;
}
#sk-nav-avatar:hover {
  background:rgba(113,255,0,0.15) !important;
  border-color:rgba(113,255,0,0.35) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   CONSTRUCTION HUB â€” AMBER ACCENT POLISH
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cn-tab-btn.active, .cn-tab-btn:hover {
  box-shadow:0 2px 14px rgba(245,158,11,0.3) !important;
}
.ctr-card:hover, .eq-card:hover {
  border-color:rgba(245,158,11,0.35) !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,158,11,0.12) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   HEALTHCARE HUB â€” TEAL ACCENT POLISH
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hc-tab-btn.active, .hc-tab-btn:hover {
  box-shadow:0 2px 14px rgba(0,200,120,0.3) !important;
}
.spec-card:hover, .lab-card:hover {
  border-color:rgba(0,200,120,0.3) !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,120,0.10) !important;
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   MOBILE DENSITY OVERRIDES
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width:767px) {
  section, .section { margin-bottom:14px; }
  .section-title { margin-top:16px !important; }

  .categories {
    grid-template-columns:repeat(4,1fr) !important;
    gap:8px !important;
    padding:8px 12px 12px !important;
  }
  .category-card { padding:12px 8px !important; }
  .category-card img { width:32px !important; height:32px !important; }
  .category-card span { font-size:9.5px !important; }

  .services-icon-grid {
    grid-template-columns:repeat(5,1fr) !important;
    gap:6px !important;
    padding:4px 10px 10px !important;
  }
  .svc-icon-card { padding:10px 4px 8px !important; }
  .svc-icon-card span { font-size:22px !important; }
  .svc-icon-card p    { font-size:9px !important; }

  .product-card h3 { padding:8px 8px 3px !important; font-size:12px !important; }
  .price           { font-size:13px !important; padding:0 8px !important; }

  .hero { padding:20px 16px !important; min-height:150px !important; }
  .hero-text h2 { font-size:28px !important; margin-bottom:6px !important; }
  .hero-text p  { font-size:13px !important; }
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   DESKTOP DENSITY OVERRIDES
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (min-width:768px) {
  .section-title { margin-top:22px !important; }
  .categories { gap:12px !important; padding:12px 20px 16px !important; }

  [class*="-card"]:not([class*="modal"]):not([class*="nd-item"]):hover {
    transform:translateY(-5px) scale(1.008) !important;
    box-shadow:0 14px 44px rgba(0,0,0,0.4), 0 0 0 1px rgba(113,255,0,0.14) !important;
  }
  .hero::after, .glass-hero::after { animation-duration:6.5s !important; }
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   REDUCED MOTION SAFETY
â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* END SOKONI POLISH v2 */


@keyframes promoEmojiFloat {
  0%,100% { transform:translateY(0) scale(1); }
  40%      { transform:translateY(-10px) scale(1.08); }
  70%      { transform:translateY(3px) scale(0.96); }
}

/* ── SOKONI VERIFICATION BADGES ── */
.sk-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.3px; vertical-align:middle; flex-shrink:0; }
.sk-badge-business  { background:rgba(113,255,0,0.12);  border:1px solid rgba(113,255,0,0.3);  color:#71ff00; }
.sk-badge-pro       { background:rgba(0,170,255,0.12);  border:1px solid rgba(0,170,255,0.3);  color:#00aaff; }
.sk-badge-driver    { background:rgba(249,115,22,0.12); border:1px solid rgba(249,115,22,0.3); color:#f97316; }
.sk-badge-doctor    { background:rgba(239,68,68,0.12);  border:1px solid rgba(239,68,68,0.3);  color:#ef4444; }
.sk-badge-lawyer    { background:rgba(168,85,247,0.12); border:1px solid rgba(168,85,247,0.3); color:#a855f7; }
.sk-badge-agent     { background:rgba(234,179,8,0.12);  border:1px solid rgba(234,179,8,0.3);  color:#eab308; }

/* ═══════════════════════════════════════════════════════════
   PHASE 8 — PERFORMANCE (LCP · INP · CLS)
═══════════════════════════════════════════════════════════ */

/* ── CLS: Reserve space in product image containers before image loads.
   Without this the container collapses to 0px, then jumps to full
   height once the image arrives — causing cumulative layout shift. ── */
.product-img-wrap {
  aspect-ratio: 1 / 1;
  /* Shimmer while image is in-flight */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: p8ImgShimmer 1.6s ease infinite;
}
.product-img-wrap.img-failed,
.product-img-wrap:has(img[src]):not(:has(img.p8-loading)) {
  animation: none;
  background: none;
}
@keyframes p8ImgShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── LCP: signal browser to promote animated/interactive cards early ── */
.product-card:hover { will-change: transform; }

/* ── INP: content-visibility on hub/section rows far below fold ──
   Skips style + layout for off-screen sections until scroll.
   contain-intrinsic-size prevents scrollbar jump during lazy reveal. ── */
.hub-section,
.trending-section:not(:first-of-type),
.section-wrap,
.hub-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 480px;
}

/* ── Skeleton product cards (shown while JS populates the grid) ── */
.p8-sk {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  animation: p8Pulse 1.5s ease-in-out infinite;
}
@keyframes p8Pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
.p8-sk-img   { width:100%; aspect-ratio:1/1; background:rgba(255,255,255,0.06); border-radius:10px 10px 0 0; }
.p8-sk-line  { height:10px; border-radius:6px; background:rgba(255,255,255,0.06); margin:10px 10px 6px; }
.p8-sk-line.w70  { width:70%; }
.p8-sk-line.w45  { width:45%; }
.p8-sk-line.w85  { width:85%; }

/* ═══════════════════════════════════════════════════════════
   PHASE 9 — ANIMATIONS & MICRO-INTERACTIONS
═══════════════════════════════════════════════════════════ */

/* ── Skeleton: replace pulse with shimmer sweep ── */
.p8-sk {
  animation: none;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}
.p8-sk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.07) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: p9SkSweep 1.4s ease-in-out infinite;
}
@keyframes p9SkSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Page entrance: body fades in on load ──
   fill-mode:backwards (not both) — 'both' freezes translateY(0) = matrix(identity)
   on <body> after the animation ends. Any non-none transform on <body> breaks
   position:fixed for ALL children (they become fixed relative to body, not viewport).
   'backwards' applies the from-keyframe at start (prevents opacity flash) but does
   NOT freeze the to-state, so <body> gets transform:none restored after 0.38s. */
body.p9-page-in {
  animation: p9PageIn 0.38s ease backwards;
}
@keyframes p9PageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll reveal system ──
   Sections start hidden and slide-up into view.
   IntersectionObserver in script.js adds .p9-in to trigger. ── */
.p9-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.52s cubic-bezier(0.22,1,0.36,1),
              transform 0.52s cubic-bezier(0.22,1,0.36,1);
}
.p9-reveal.p9-in {
  opacity: 1;
  transform: translateY(0);
}
/* stagger siblings inside a reveal parent */
.p9-reveal.p9-in > .p9-child:nth-child(1) { transition-delay: 0s; }
.p9-reveal.p9-in > .p9-child:nth-child(2) { transition-delay: 0.07s; }
.p9-reveal.p9-in > .p9-child:nth-child(3) { transition-delay: 0.14s; }
.p9-reveal.p9-in > .p9-child:nth-child(4) { transition-delay: 0.21s; }
.p9-child {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.p9-reveal.p9-in > .p9-child { opacity: 1; transform: translateY(0); }

/* ── Product card: enhanced hover glow ── */
.product-card:hover {
  border-color: rgba(113,255,0,0.28) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.4),
    0 0 0 1px rgba(113,255,0,0.18),
    0 0 18px rgba(113,255,0,0.08) !important;
}

/* ── Product card: staggered entry when grid renders ── */
.product-card {
  animation: p9CardIn 0.38s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes p9CardIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Each card in the grid gets a tiny stagger via --p9i custom property
   (set by JS on each card element after render) */
.product-card { animation-delay: var(--p9i, 0s); }

/* ── Cart-add flash: lime ring flash on the product tile ── */
@keyframes p9CartFlash {
  0%   { box-shadow: 0 0 0 0 rgba(113,255,0,0.6); border-color: rgba(113,255,0,0.8); }
  60%  { box-shadow: 0 0 0 10px rgba(113,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(113,255,0,0); border-color: inherit; }
}
.p9-cart-flash {
  animation: p9CartFlash 0.55s cubic-bezier(0.22,1,0.36,1) !important;
}

/* ── Wishlist heart pop ── */
@keyframes p9HeartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); filter: drop-shadow(0 0 4px rgba(239,68,68,0.7)); }
  60%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.p9-heart-pop {
  animation: p9HeartPop 0.42s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── Input focus glow ── */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(113,255,0,0.18), 0 0 0 1px rgba(113,255,0,0.35) !important;
  border-color: rgba(113,255,0,0.45) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
}

/* ── Primary button press: subtle scale + glow flash ── */
.pk-btn-primary:active,
.wiz-btn-primary:active,
.checkout-btn:active,
.pos-pay-btn:active {
  transform: scale(0.97) !important;
  box-shadow: 0 0 0 4px rgba(113,255,0,0.25), 0 2px 8px rgba(113,255,0,0.35) !important;
  transition: transform 0.08s, box-shadow 0.08s !important;
}

/* ── Hub icon bounce on hover ── */
.hub-item:hover .hub-icon,
.cat-card:hover .cat-icon,
[class*="hub-"] [class*="-icon"]:hover {
  animation: p9IconBounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes p9IconBounce {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-5px) scale(1.1); }
  70%  { transform: translateY(1px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Notification toast: upgrade entrance to spring slide-up ── */
.notification {
  animation: p9ToastIn 0.42s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes p9ToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Cart count badge pop on update ── */
@keyframes p9BadgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.p9-badge-pop { animation: p9BadgePop 0.38s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Reduce motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  .p9-reveal,
  .product-card,
  .p8-sk::after,
  .notification,
  .p9-cart-flash,
  .p9-heart-pop,
  .p9-badge-pop {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 10 — ENTERPRISE UX REVIEW
   Typography tokens · Empty states · Form validation ·
   Disabled patterns · Keyboard focus · Status chips ·
   Inline loading · Dividers · Tooltips
══════════════════════════════════════════════════════════════ */

/* ── Type-scale & semantic colour tokens ── */
:root {
  /* Type scale */
  --t-xs:   10px;
  --t-sm:   11px;
  --t-base: 13px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   20px;
  --t-2xl:  24px;
  --t-3xl:  30px;

  /* Semantic status colours */
  --c-error:      #ff4d4d;
  --c-error-bg:   rgba(255,77,77,0.10);
  --c-warn:       #ffb020;
  --c-warn-bg:    rgba(255,176,32,0.10);
  --c-info:       #4db8ff;
  --c-info-bg:    rgba(77,184,255,0.10);
  --c-success:    #71ff00;
  --c-success-bg: rgba(113,255,0,0.10);
  --c-muted:      rgba(255,255,255,0.35);
  --c-subtle:     rgba(255,255,255,0.55);

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
}

/* ── Keyboard focus-visible ── */
:focus-visible {
  outline: 2px solid rgba(113,255,0,0.75) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(113,255,0,0.12) !important;
}
:focus:not(:focus-visible) { outline: none !important; }

/* ── Global disabled state ── */
button[disabled],
input[disabled],
textarea[disabled],
select[disabled],
.btn[disabled],
[class*="-btn"][disabled],
[class*="-cta"][disabled] {
  opacity: 0.36 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Section divider ── */
.p10-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%,
              rgba(255,255,255,0.08) 80%, transparent 100%);
  margin: 16px 0;
}
.p10-divider.g {
  background: linear-gradient(90deg, transparent 0%, rgba(113,255,0,0.18) 20%,
              rgba(113,255,0,0.18) 80%, transparent 100%);
}

/* ── Unified empty state ── */
.p10-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 48px;
  text-align: center;
  gap: 12px;
  width: 100%;
}
.p10-empty-icon {
  font-size: 56px;
  line-height: 1;
  filter: opacity(0.65);
  animation: p10EmptyFloat 3.2s ease-in-out infinite;
}
.p10-empty h3 {
  margin: 0 !important;
  font-size: var(--t-xl) !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
}
.p10-empty p {
  margin: 0;
  font-size: var(--t-base);
  color: var(--c-muted);
  max-width: 280px;
  line-height: 1.55;
}
.p10-empty-cta {
  margin-top: 6px;
  padding: 10px 24px;
  background: var(--pk-green);
  color: #080808;
  border: none;
  border-radius: 100px;
  font-size: var(--t-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--pk-ease), box-shadow 0.15s ease;
}
.p10-empty-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(113,255,0,0.32) !important;
}
.p10-empty-cta:active { transform: scale(0.96) !important; }
@keyframes p10EmptyFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-9px) scale(1.03); }
}

/* ── Form validation states ── */
input.p10-invalid,
textarea.p10-invalid,
select.p10-invalid {
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.13) !important;
}
input.p10-valid,
textarea.p10-valid,
select.p10-valid {
  border-color: rgba(113,255,0,0.55) !important;
  box-shadow: 0 0 0 3px rgba(113,255,0,0.09) !important;
}
.p10-error-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-error);
  margin-top: 4px;
  animation: p10FadeSlide 0.18s ease both;
}
.p10-error-msg::before { content: '⚠'; font-size: 10px; flex-shrink: 0; }
.p10-success-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-success);
  margin-top: 4px;
  animation: p10FadeSlide 0.18s ease both;
}
.p10-success-msg::before { content: '✓'; font-size: 11px; flex-shrink: 0; }
.p10-hint {
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-top: 4px;
  line-height: 1.45;
}
@keyframes p10FadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Status chip system ── */
.p10-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 100px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.8;
}
.p10-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.p10-status.s-pending   { color: var(--c-warn);    background: var(--c-warn-bg); }
.p10-status.s-active,
.p10-status.s-delivered { color: var(--c-success);  background: var(--c-success-bg); }
.p10-status.s-processing,
.p10-status.s-shipped   { color: var(--c-info);     background: var(--c-info-bg); }
.p10-status.s-cancelled,
.p10-status.s-rejected  { color: var(--c-error);    background: var(--c-error-bg); }
.p10-status.s-draft,
.p10-status.s-inactive  { color: var(--c-muted);    background: rgba(255,255,255,0.06); }
.p10-status.s-live      {
  color: var(--c-success);
  background: var(--c-success-bg);
  box-shadow: 0 0 0 1px rgba(113,255,0,0.18);
}
.p10-status.s-live::before { animation: p10DotPulse 1.8s ease-in-out infinite; }
@keyframes p10DotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.65); }
}

/* ── Inline button loading spinner ── */
.p10-loading {
  position: relative !important;
  pointer-events: none !important;
  color: transparent !important;
}
.p10-loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.85);
  border-radius: 50%;
  animation: p10Spin 0.6s linear infinite;
}
.p10-loading.pk-green::after {
  border-color: rgba(0,0,0,0.18);
  border-top-color: #080808;
}
@keyframes p10Spin { to { transform: rotate(360deg); } }

/* ── Data-tip tooltips ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.9);
  background: rgba(18,18,18,0.97);
  color: rgba(255,255,255,0.92);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s var(--pk-ease);
  z-index: 9999;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  letter-spacing: 0.01em;
}
[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
[data-tip-right]::after { left: auto; right: 0; transform: translateY(4px) scale(0.9); }
[data-tip-right]:hover::after { transform: translateY(0) scale(1); }

/* ── Extend prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .p10-empty-icon,
  .p10-status.s-live::before,
  .p10-loading::after {
    animation: none !important;
  }
  [data-tip]::after {
    transition: none !important;
  }
}
/* GLASS HERO — MOBILE CLS GUARD
   Pre-applied at ≤600px so first paint matches the mobile.css layout.
   When mobile.css loads asynchronously and applies its !important overrides
   the values are identical → no visual change → zero CLS contribution. */
@media (max-width: 600px) {
  .glass-hero {
    width: calc(100% - 32px);
    margin: 16px auto;
    border-radius: 24px;
    padding: 12px 16px;
    min-height: unset;
  }
  .glass-hero-card {
    border-radius: 20px;
    max-width: 100%;
    width: 100%;
    padding: 22px 18px 18px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.35);
  }
  .glass-hero h1 {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.12;
  }
  .glass-hero-sub {
    font-size: 13px;
    line-height: 1.5;
  }
  .glass-hero-badge {
    font-size: 11px;
    padding: 5px 12px;
  }
  .glass-hero-btns {
    flex-direction: column;
    gap: 8px;
  }
  .glass-hero-btns a,
  .glass-hero-btns button {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 14px;
  }
}

/* ── Avatar images must never distort ────────────────────────────────────────
   .seller-avatar is a fixed square (56x56 / 48x48 on mobile) but its <img> had
   no object-fit, so a non-square source was stretched to fill it. Measured on a
   393px viewport: a 3:2 logo rendered 42x42 — visibly squashed.

   object-fit:cover makes the box crop rather than stretch, whatever the source
   aspect ratio. Fixing the fallback image alone would only have hidden this. */
.seller-avatar img,
.seller-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
