/* ==========================================
HOME PREMIUM HERO CAROUSEL
========================================== */

.hero-premium-viewport{

    width:100%;

    overflow:hidden;

    padding-left:16px;

    box-sizing:border-box;

}

.hero-premium-track{

    display:flex;

    gap:18px;

    transition:transform .8s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

.hero-premium-card{

    flex:0 0 92%;

    text-decoration:none;

    border-radius:28px;

    overflow:hidden;

    background:#fff;

    box-shadow:
    0 12px 35px rgba(0,0,0,.14);

    position:relative;

}

.hero-premium-card img{

    display:block;

    width:100%;

    height:330px;

    object-fit:cover;

}

.hero-premium-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:22px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.18),
        transparent
    );

}

.hero-premium-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#0B6DFF;

    color:#fff;

    padding:8px 16px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

    backdrop-filter:blur(12px);

    box-shadow:
    0 8px 18px rgba(11,109,255,.28);

}

.hero-premium-overlay h2{

    margin:0;

    color:#fff;

    font-size:1.35rem;

    font-weight:800;

    line-height:1.25;

}

.hero-premium-price{

    margin-top:10px;

    color:#2EE86B;

    font-size:1.4rem;

    font-weight:900;

}

.hero-premium-dots{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:18px;

}

.hero-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#c8d0da;

    transition:.3s;

}

.hero-dot.active{

    width:30px;

    border-radius:999px;

    background:#0B6DFF;

}

.hero-premium-loading,
.hero-premium-empty{

    min-height:320px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#666;

    padding:40px;

}
/* ==========================================
PREMIUM BADGE OVERRIDE
========================================== */

.hero-premium-card{
    position:relative;
}

.hero-premium-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:22px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.25) 45%,
        transparent 100%
    );
}

.hero-premium-badge{

    position:absolute !important;

    top:18px !important;
    right:18px !important;
    left:auto !important;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:14px 22px;

    background:#1d3557;

    border:3px solid #d4af37;

    border-radius:22px;

    color:#fff;

    font-size:1.05rem;
    font-weight:800;

    box-shadow:
        0 10px 25px rgba(0,0,0,.30);

    z-index:50;
}
.hero-premium-badge{

    position:absolute !important;

    top:18px !important;
    right:18px !important;
    left:auto !important;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:9px 18px;      /* was 14px 22px */

    background:#1d3557;

    border:3px solid #d4af37;

    border-radius:18px;    /* was 22px */

    color:#fff;

    font-size:1rem;
    font-weight:800;
    line-height:1;

    box-shadow:0 10px 25px rgba(0,0,0,.30);

    z-index:50;
}
.hero-premium-badge{

    position:absolute;

    top:18px;
    right:18px;

    height:52px;
    min-width:52px;

    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#17365d;

    border:2px solid #c9a33d;

    border-radius:14px;

    color:#fff;

    font-family:"Poppins",sans-serif;
    font-size:0.95rem;
    font-weight:700;

    line-height:1;

    box-shadow:0 8px 20px rgba(0,0,0,.22);

    z-index:50;

    transition:all .25s ease;
}

.hero-premium-badge:hover{

    background:#214b7d;

    transform:translateY(-2px);

}

.hero-premium-badge:active{

    transform:scale(.95);

}
/* ==============================
FORCE PREMIUM BADGE TO BOTTOM
============================== */

.hero-premium-overlay{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
}

.hero-premium-badge{

    position:static !important;

    display:inline-flex !important;

    align-items:center;

    gap:4px;

    margin-top:8px;

    padding:4px 10px;

    background:#D4AF37 !important;

    color:#111 !important;

    font-size:12px;

    font-weight:700;

    border-radius:999px;

    width:max-content;

    box-shadow:0 2px 8px rgba(0,0,0,.2);

    top:auto !important;

    right:auto !important;

    left:auto !important;

    bottom:auto !important;

    transform:none !important;

}
.hero-premium-badge{

    display:inline-flex;
    align-items:center;
    gap:4px;

    margin-top:4px;

    padding:1px 8px;

    background:rgba(212,175,55,.15);

    border:1px solid rgba(212,175,55,.9);

    color:#FFD700;

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    line-height:1;

    border-radius:30px;

    width:max-content;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    box-shadow:0 0 8px rgba(212,175,55,.25);

}
.hero-premium-badge{

    display:inline-flex;
    align-items:center;
    gap:3px;

    margin-top:2px;

    padding:0 7px;

    height:18px;

    line-height:18px;

    background:transparent;

    border:1px solid #D4AF37;

    color:#D4AF37;

    font-size:8px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.8px;

    border-radius:999px;

    width:max-content;

    box-shadow:none;

}
.hero-premium-badge{

    color:#FFFFFF !important;

}
.premium-section,
#premiumGrid,
.hero-premium-viewport{
    min-height:390px;
}
.category-section{
    margin:-16px 28px 22px;
}
.category-section{
    margin:22px 0 !important;
}
/* ==========================================
   TIGHT GAP: PREMIUM CAROUSEL → CATEGORY CHIPS
   ========================================== */

.premium-section,
#premiumGrid,
.hero-premium-viewport {
    min-height: 0 !important;
}

.category-section {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

.category-scroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ==========================================
   HOMEPAGE — FLAT UNIFORM WHITE CANVAS
   ========================================== */

/* Remove section-level containers */
.premium-section,
.category-section,
.featured-carousel-wrapper,
.featured-carousel,
#newListings {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Premium section should blend into page */
.premium-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Category chips float directly on white background */
.category-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove the inset appearance of category chips */
.category-scroll {
    margin: 0 !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* New listings section blends into same white canvas */
#newListings {
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove any outer wrapper styling around listing rows */
.listing-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   NEXORA HOMEPAGE — FLAT WHITE CANVAS
   ========================================================= */

/* 1. The actual homepage sections should have NO container */
#premiumSection,
#premiumGrid,
.category-section,
.category-scroll,
#newListings {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* 2. Remove section-level spacing that creates the
      "inside a container" appearance */
#premiumSection {
    margin: 0 !important;
    padding: 0 !important;
}

.category-section {
    margin: 0 !important;
    padding: 0 !important;
}

#newListings {
    margin: 0 !important;
    padding: 0 16px !important;
}


/* 3. Categories sit directly on the white page */
.category-scroll {
    margin: 0 !important;
    padding: 10px 16px !important;
}


/* 4. Remove the artificial premium section height */
#premiumSection,
#premiumGrid,
.hero-premium-viewport {
    min-height: 0 !important;
}


/* 5. IMPORTANT:
      Remove the large outer card/container effect
      from the premium carousel viewport */
.hero-premium-viewport {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* 6. Keep the actual premium listing card,
      but don't make it look like another outer container */
.hero-premium-card {
    box-shadow: none !important;
}


/* 7. New listings area is transparent.
      Individual product cards remain untouched. */
#newListings > * {
    box-shadow: none !important;
}


/* 8. Make sure pseudo-elements aren't creating
      hidden section backgrounds */
#premiumSection::before,
#premiumSection::after,
.category-section::before,
.category-section::after,
#newListings::before,
#newListings::after {
    content: none !important;
    display: none !important;
}
/* ==========================================
   PREMIUM CAROUSEL — EQUAL LEFT/RIGHT PEEKS
   ========================================== */

.hero-premium-viewport {
    width: 100% !important;
    overflow: hidden !important;
}

.hero-premium-track {
    display: flex !important;
    gap: 16px !important;
}

.hero-premium-card {
    flex: 0 0 calc(100% - 64px) !important;
    width: calc(100% - 64px) !important;
    max-width: none !important;
}