/* ═══════════════════════════════════════════════════════════════
   PRODUCT SECTION — Radiant Rebel Night Sky Theme
   Matches Category & Footer "Descent into Space" Palette
   Background: Deep Navy -> Void
   Accent:     Gold       #C8A96A
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;600&display=swap');

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
    /* Updated to match Night Sky Palette */
    --ps-bg:          #0d1f3c; /* Navy 700 - Atmosphere */
    --ps-bg-dark:     #02050b; /* Navy 900 - The Void */
    --ps-bg-surface:  #0a1628; /* Navy 800 - Deep Space */
    --ps-bg-card:     #060d1a; /* Navy 900 (Tinted) */
    
    --ps-gold:        #C8A96A;
    --ps-gold-lt:     #E6C88C;
    --ps-gold-dk:     #a8864a;
    --ps-orange:      #d84315;
    --ps-orange-lt:   #ff6f47;
    
    --ps-text:        #f5ecd7;
    --ps-muted:       #9ca3af;
    --ps-blue:        #7ec8ff;
    --ps-blue-dk:     #0066b2;
    
    --ps-border:      rgba(200,169,106,0.25);
    --ps-glow-gold:   rgba(200,169,106,0.25);
    --ps-glow-orange: rgba(216,67,21,0.35);
    
    --ps-radius:      12px;
    --ps-radius-sm:   8px;
    
    --ps-transition:  all 0.38s cubic-bezier(0.4,0,0.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION WRAPPER — Deep Space Atmosphere
═══════════════════════════════════════════════════════════════ */
.por-1{
    border-radius: 50px;
}
/* .product-section {
     Replaced with matching Night Sky Gradient 
    background: linear-gradient(180deg, var(--ps-bg) 0%, var(--ps-bg-dark) 100%);
    Subtle star texture overlay 
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--ps-bg) 0%, var(--ps-bg-dark) 100%);
    background-attachment: local, scroll;
    
    position: relative;
    padding: 48px 0 60px;
    font-family: 'DM Sans', sans-serif;
    z-index: 1;
} */




/* Gold hairline top rule */
.product-section::before {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ps-gold), var(--ps-gold-lt), var(--ps-gold), transparent);
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}

/* gold glow top */
.product-section::after {
    content: "";
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    height: 280px;
    background: radial-gradient(circle, rgba(200,169,106,0.08), transparent 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

.product-section .main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.product-section .section-header {
    padding-left:40px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.product-section .section-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(200,169,106,0.35), transparent);
}

.product-section .section-header h2 {
    
font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 20px rgba(200,169,106,0.15);
}

.product-section .section-header h2::after {
    content: "";
    display: block;
    margin-top: 7px;
    width: 110px;
    height: 3px;
    border-radius: 100px;
    background: linear-gradient(90deg, transparent, var(--ps-gold), var(--ps-gold-lt), var(--ps-gold), transparent);
    box-shadow: 0 0 12px rgba(200,169,106,0.5), 0 0 24px rgba(200,169,106,0.2);
    animation: ps-bar-breathe 5s ease-in-out infinite;
}

@keyframes ps-bar-breathe {
    0%,100% { transform: scaleX(1);    opacity: 0.9; }
    50%      { transform: scaleX(1.06); opacity: 1;   }
}
.carousel-control-next-icon, .carousel-control-prev-icon{
        width: 14px;
    height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   BANNER SECTION
═══════════════════════════════════════════════════════════════ */
.product-section .banner-section {
    border-radius: var(--ps-radius);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    /* Updated background for Night Sky */
    background: rgba(0, 0, 0, 0);
    /* border: 1px solid var(--ps-border); */
    box-shadow: inset 0 0 10px rgba(255,255,255,0.03), 0 10px 40px rgba(0,0,0,0.6);
    /* padding: 20px; */
    margin-left: 30px;
    margin-right: 30px;
}

.product-section .banner-section::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,169,106,0.12), transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}

.product-section .banner-section img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: var(--ps-radius-sm);
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(200,169,106,0.25), 0 10px 30px rgba(0,0,0,0.7);
    transition: var(--ps-transition);
}

.product-section .banner-section img:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 0 3px rgba(200,169,106,0.7), 0 0 0 8px rgba(200,169,106,0.15), 0 18px 48px rgba(0,0,0,0.8);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD — 3D Extruded Glass Slab (Dark Mode Optimized)
═══════════════════════════════════════════════════════════════ */

/* ── Per-card color themes (Kept for variety) ──────────────── */
.product-section .product-card.card-violet {
    --ps-ci:        rgba(130, 70,  255, 0.55);
    --ps-ci2:       rgba(0,   190, 255, 0.50);
    --ps-ct:        rgba(220, 70,  160, 0.42);
    --ps-cb:        rgba(0,   245, 160, 0.36);
    --ps-slab-r:    rgba(60,  20,  120, 0.90);
    --ps-slab-b:    rgba(30,  10,   80, 0.95);
    --ps-slab-rb:   rgba(20,   5,   60, 0.98);
    --ps-rim-top:   rgba(200, 160, 255, 0.55);
    --ps-rim-left:  rgba(180, 130, 255, 0.30);
}
.product-section .product-card.card-fire {
    --ps-ci:        rgba(255, 130,   0, 0.52);
    --ps-ci2:       rgba(255,  45,  95, 0.46);
    --ps-ct:        rgba(255, 195,   0, 0.38);
    --ps-cb:        rgba(190,  45, 255, 0.40);
    --ps-slab-r:    rgba(120,  40,   0, 0.90);
    --ps-slab-b:    rgba( 80,  20,   0, 0.95);
    --ps-slab-rb:   rgba( 60,  10,   0, 0.98);
    --ps-rim-top:   rgba(255, 200, 120, 0.55);
    --ps-rim-left:  rgba(255, 160,  80, 0.30);
}
.product-section .product-card.card-ocean {
    --ps-ci:        rgba(0,   225, 195, 0.52);
    --ps-ci2:       rgba(0,    95, 255, 0.48);
    --ps-ct:        rgba(0,   195, 255, 0.38);
    --ps-cb:        rgba(75,  255, 135, 0.36);
    --ps-slab-r:    rgba(0,    60,  90, 0.90);
    --ps-slab-b:    rgba(0,    30,  60, 0.95);
    --ps-slab-rb:   rgba(0,    15,  40, 0.98);
    --ps-rim-top:   rgba(120, 230, 255, 0.55);
    --ps-rim-left:  rgba( 80, 200, 220, 0.30);
}
.product-section .product-card.card-ember {
    --ps-ci:        rgba(255,  60,  60, 0.50);
    --ps-ci2:       rgba(255, 165,   0, 0.48);
    --ps-ct:        rgba(255, 100,   0, 0.40);
    --ps-cb:        rgba(255, 220,   0, 0.34);
    --ps-slab-r:    rgba(110,  20,   0, 0.90);
    --ps-slab-b:    rgba( 70,  10,   0, 0.95);
    --ps-slab-rb:   rgba( 50,   5,   0, 0.98);
    --ps-rim-top:   rgba(255, 180, 120, 0.55);
    --ps-rim-left:  rgba(255, 130,  80, 0.30);
}

/* ── Default / fallback ────────────────────────────────────── */
.product-section .product-card {
    --ps-ci:        rgba(130, 70,  255, 0.55);
    --ps-ci2:       rgba(0,   190, 255, 0.50);
    --ps-ct:        rgba(220, 70,  160, 0.42);
    --ps-cb:        rgba(0,   245, 160, 0.36);
    --ps-slab-r:    rgba(60,  20,  120, 0.90);
    --ps-slab-b:    rgba(30,  10,   80, 0.95);
    --ps-slab-rb:   rgba(20,   5,   60, 0.98);
    --ps-rim-top:   rgba(200, 160, 255, 0.55);
    --ps-rim-left:  rgba(180, 130, 255, 0.30);

    /* Darker Glass Background for better contrast against Space */
    background: linear-gradient(155deg,
        rgba(13, 31, 60, 0.70) 0%,   /* Dark Navy Tint */
        rgba(2,  5,  11, 0.40) 100%  /* Fade to Black */
    );
    backdrop-filter:         blur(28px);
    -webkit-backdrop-filter: blur(28px);

    border-top:   1px solid rgba(255, 255, 255, 0.18);
    border-left:  1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(0,   0,   0,   0.35);
    border-bottom:1px solid rgba(0,   0,   0,   0.45);

    border-radius: var(--ps-radius);
    padding:    25px;
    height:     400px;
    position:   relative;
    overflow:   hidden;
    transition: var(--ps-transition);
    margin:     15px;

    box-shadow:
        /* ── FRONT FACE — lit top & left rim ───────────── */
        inset 0   2px  0   var(--ps-rim-top),
        inset 2px 0    0   var(--ps-rim-left),
        inset 0  -2px  0   rgba(0, 0, 0, 0.55),
        inset -2px 0   0   rgba(0, 0, 0, 0.40),

        /* ── MULTICOLOR INNER COLOR BLEED ──────────────── */
        inset -10px  0    32px var(--ps-ci),
        inset  10px  0    32px var(--ps-ci2),
        inset  0     10px 26px var(--ps-ct),
        inset  0    -10px 26px var(--ps-cb),

        /* ── CENTER DEPTH — makes face feel recessed ────── */
        inset 0 0 70px rgba(0, 0, 0, 0.42),

        /* ── RIGHT SLAB FACE (3 layers = visible thickness) */
        5px   0px  0 -1px var(--ps-slab-r),
        7px   1px  2px -1px rgba(0, 0, 0, 0.50),
        9px   2px  5px -2px rgba(0, 0, 0, 0.30),

        /* ── BOTTOM SLAB FACE ───────────────────────────── */
        0px   5px  0 -1px var(--ps-slab-b),
        1px   7px  2px -1px rgba(0, 0, 0, 0.50),
        2px   9px  5px -2px rgba(0, 0, 0, 0.30),

        /* ── CORNER ANCHOR — bottom-right slab join ─────── */
        6px   6px  0 -1px var(--ps-slab-rb),
        8px   8px  4px -1px rgba(0, 0, 0, 0.55),
        10px  10px 8px -2px rgba(0, 0, 0, 0.35),

        /* ── OUTER ELEVATION SHADOW ─────────────────────── */
        0  20px 56px rgba(0, 0, 0, 0.72),
        0   8px 20px rgba(0, 0, 0, 0.50),
        0   2px  6px rgba(0, 0, 0, 0.35),

        /* ── OUTER HAIRLINE ─────────────────────────────── */
        0 0 0 0.5px rgba(255, 255, 255, 0.09);
}

/* ── Top shimmer hairline ──────────────────────────────────── */
.product-section .product-card::before {
    content:  "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--ps-rim-top),
        rgba(255,255,255,0.55),
        var(--ps-rim-top),
        transparent
    );
    pointer-events: none;
    z-index: 3;
}

/* ── Frosted top-left sheen ────────────────────────────────── */
.product-section .product-card::after {
    content:  "";
    position: absolute;
    inset:    0;
    border-radius: var(--ps-radius);
    background: linear-gradient(138deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 30%,
        transparent 52%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Hover — extrude further, intensify everything ─────────── */
.product-section .product-card:hover {
    transform: translateY(-10px) translateX(-2px) scale(1.028);

    border-top:    1px solid rgba(255, 255, 255, 0.26);
    border-left:   1px solid rgba(255, 255, 255, 0.18);
    border-right:  1px solid rgba(0,   0,   0,   0.45);
    border-bottom: 1px solid rgba(0,   0,   0,   0.55);

    box-shadow:
        inset 0    3px  0   var(--ps-rim-top),
        inset 3px  0    0   var(--ps-rim-left),
        inset 0   -3px  0   rgba(0, 0, 0, 0.65),
        inset -3px 0    0   rgba(0, 0, 0, 0.50),

        inset -18px  0    48px var(--ps-ci),
        inset  18px  0    48px var(--ps-ci2),
        inset  0     18px 40px var(--ps-ct),
        inset  0    -18px 40px var(--ps-cb),

        inset 0 0 90px rgba(0, 0, 0, 0.28),

        7px   0px   0 -1px var(--ps-slab-r),
        10px  1px   3px -1px rgba(0, 0, 0, 0.55),
        13px  3px   7px -2px rgba(0, 0, 0, 0.35),

        0px   7px   0 -1px var(--ps-slab-b),
        1px   10px  3px -1px rgba(0, 0, 0, 0.55),
        3px   13px  7px -2px rgba(0, 0, 0, 0.35),

        8px   8px   0 -1px var(--ps-slab-rb),
        11px  11px  5px -1px rgba(0, 0, 0, 0.62),
        14px  14px 10px -2px rgba(0, 0, 0, 0.40),

        0  32px 72px rgba(0, 0, 0, 0.82),
        0  14px 28px rgba(0, 0, 0, 0.56),
        0   4px  8px rgba(0, 0, 0, 0.38),

        0 0 0 0.5px rgba(255, 255, 255, 0.15);
}

/* ── Title & image on hover ────────────────────────────────── */
.product-section .product-card:hover .product-title {
    color: var(--ps-gold-lt);
}
.product-section .product-card:hover .product-image {
    background: radial-gradient(circle at 50% 40%,
        rgba(200, 169, 106, 0.13), transparent 70%), #0a1628;
}


/* ── Image Wrapper ──────────────────────────────────────────── */
.product-section .product-card .product-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: #f0ede8;
    flex-shrink: 0;
}

/* ── Product Image ──────────────────────────────────────────── */
.product-section .product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    margin-bottom: 0;
    background: #0a1628; /* Updated bg */
    padding: 0;
    border: none;
    transition: transform 0.4s ease;
    margin-bottom:10px;
}
 
.product-section .product-card:hover .product-image {
    transform: scale(1.04);
    background: #0a1628;
}
.product-section .product-badge{
    display:none;
}
/* ── Title ──────────────────────────────────────────────────── */
.product-section .product-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a8c8e8;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    cursor: pointer;
    transition: color 0.3s ease;
}

.product-section .product-card:hover .product-title { color: var(--ps-gold-lt); }

/* ── Meta ───────────────────────────────────────────────────── */
.product-section .product-meta {
    font-size: 0.6rem;
    color: var(--ps-muted);
    margin-bottom: 10px;
}

/* ── Rating ─────────────────────────────────────────────────── */
.product-section .product-rating { margin-bottom: 10px; }
.product-section .star { color: #f5b942; font-size: 0.88rem; }
.product-section .rating-count { color: var(--ps-muted); font-size: 0.8rem; margin-left: 5px; }

/* ── Price ──────────────────────────────────────────────────── */
.product-section .product-price-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.product-section .product-price {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ps-gold);
    line-height: 1;
    text-shadow: 0 0 18px rgba(200,169,106,0.3);
}

.product-section .product-price sup { font-size: 1rem; color: var(--ps-gold-dk); }

.product-section .sale {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #1db954, #15803d);
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(29,185,84,0.3);
}

/* ── Bottom Badges ──────────────────────────────────────────── */
.product-section .buttom-badge.round {
    background: linear-gradient(135deg, #db2686, #a0175d);
    color: #fff;
    width: 57px; height: 57px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    text-align: center;
    box-shadow: 0 4px 16px rgba(219,38,134,0.45), 0 0 0 2px rgba(255,255,255,0.12);
}

.product-section .buttom-badge.square {
    display:none;
}

.product-section .deal {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.05em;
    margin: 0;
}

.product-section .buttom-badge.square .deal { color: #db2686; }

/* ── Buttons ────────────────────────────────────────────────── */
/* ── Add to Cart Button ─────────────────────────────────────── */
.product-section .btn-add-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    background: linear-gradient(135deg, #e8420a 0%, #c13008 50%, #9a2206 100%);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: var(--ps-radius-sm);
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;

    /* layered shadow — depth + glow */
    box-shadow:
        inset 0  1px 0 rgba(255, 160, 100, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.40),
        0 4px 16px rgba(216, 67, 21, 0.45),
        0 8px 32px rgba(216, 67, 21, 0.25),
        0 0 0 0.5px rgba(255, 100, 50, 0.20);

    transition: var(--ps-transition);
}

/* shimmer sweep */
.product-section .btn-add-cart::before {
    content: "";
    position: absolute;
    top: 0; left: -110%;
    width: 65%; height: 100%;
    background: linear-gradient(
        118deg,
        transparent 20%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 80%
    );
    transform: skewX(-22deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.product-section .btn-add-cart:hover::before { left: 140%; }

/* top hairline highlight — glass rim */
.product-section .btn-add-cart::after {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 150, 0.55), transparent);
    pointer-events: none;
}

/* hover */
.product-section .btn-add-cart:hover {
    transform: translateY(-3px) scale(1.018);
    filter: brightness(1.12);
    box-shadow:
        inset 0  1px 0 rgba(255, 160, 100, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.40),
        0  8px 24px rgba(216, 67, 21, 0.60),
        0 16px 48px rgba(216, 67, 21, 0.35),
        0 0 0 0.5px rgba(255, 120, 60, 0.35),
        0 0 40px rgba(216, 67, 21, 0.20);
}

/* press */
.product-section .btn-add-cart:active {
    transform: translateY(0) scale(0.978);
    filter: brightness(0.95);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 2px 8px rgba(216, 67, 21, 0.40),
        0 0 0 0.5px rgba(255, 100, 50, 0.20);
}

/* optional icon pill inside button */
.product-section .btn-add-cart .btn-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.3s ease;
}
.product-section .btn-add-cart:hover .btn-icon {
    transform: rotate(-12deg) scale(1.15);
}
.product-section .btn-quick-view {
    background: transparent;
    color: var(--ps-muted);
    border: 1px solid rgba(200,169,106,0.3);
    padding: 8px;
    font-size: 0.82rem;
    width: 100%;
    border-radius: var(--ps-radius-sm);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: var(--ps-transition);
}

.product-section .btn-quick-view:hover {
    background: rgba(200,169,106,0.08);
    border-color: var(--ps-gold);
    color: var(--ps-gold-lt);
    box-shadow: 0 0 12px rgba(200,169,106,0.25), 0 0 24px rgba(200,169,106,0.1);
}

.product-card a { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL CONTROLS
═══════════════════════════════════════════════════════════════ */
.product-section .carousel-control-prev,
.product-section .carousel-control-next {
    width: 40px; height: 40px;
    background: rgba(2,5,11,0.85); /* Darker control bg */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200,169,106,0.4);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--ps-transition);
}

.product-section .carousel-control-prev:hover,
.product-section .carousel-control-next:hover {
    background: linear-gradient(135deg, var(--ps-gold), var(--ps-gold-lt));
    color: var(--ps-bg-dark);
    box-shadow: 0 0 12px rgba(200,169,106,0.6), 0 0 24px rgba(200,169,106,0.3);
    transform: translateY(-50%) scale(1.15);
}

.product-section .carousel-control-prev { left: -20px; }
.product-section .carousel-control-next { right: -20px; }

.product-section .carousel-indicators { margin-bottom: -28px; }

.product-section .carousel-indicators button {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(200,169,106,0.25);
    border: none;
    transition: all 0.3s ease;
}

.product-section .carousel-indicators button.active {
    width: 26px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-gold-lt));
}

/* ═══════════════════════════════════════════════════════════════
   BANNER ADS
═══════════════════════════════════════════════════════════════ */
.banner-ads-container {
    background: linear-gradient(180deg, var(--ps-bg) 0%, var(--ps-bg-dark) 100%);
    padding: 20px 0;
    border-top:    1px solid rgba(200,169,106,0.2);
    border-bottom: 1px solid rgba(200,169,106,0.2);
    position: relative;
    z-index: 1;
}

.banner-ads-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(200,169,106,0.05), transparent 70%);
    pointer-events: none;
}

.banner-ads-row {
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.banner-ad-item {
    width: 100%;
    max-width: 1400px;
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(200,169,106,0.18), 0 10px 40px rgba(0,0,0,0.55);
    transition: var(--ps-transition);
}

.banner-ad-item:hover {
    box-shadow: 0 0 0 2.5px rgba(200,169,106,0.5), 0 16px 56px rgba(0,0,0,0.65);
}

.banner-ad-item img { width: 100%; height: auto; display: block; border-radius: var(--ps-radius); }

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB + SHOP
═══════════════════════════════════════════════════════════════ */
.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.88rem;
    padding-top: 12px !important;
    margin-bottom: 9px !important;
    font-family: 'DM Sans', sans-serif;
}

.breadcrumb a {
    color: var(--ps-gold);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.25s;
}

.breadcrumb a:hover { color: var(--ps-gold-lt); }
.breadcrumb a i { margin-right: 10px; }
.breadcrumb-item.active { color: var(--ps-gold-lt); font-weight: 700; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ps-border);
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    color: var(--ps-text);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 20px rgba(200,169,106,0.12);
}

.item-count { color: var(--ps-gold); font-size: 0.95rem; font-weight: 700; }
.sort-dropdown { min-width: 200px; }
a.page-link { color: var(--ps-orange); }
.active > .page-link, .page-link.active { background: var(--ps-orange); border-color: var(--ps-orange); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
    background: linear-gradient(145deg, #0a1628, #02050b); /* Deep space */
    padding: 1.5rem;
    border-radius: var(--ps-radius);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
}

.shop-by-header {
    font-size: 0.78rem;
    color: var(--ps-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    font-family: 'DM Sans', sans-serif;
}

.active-filters {
    background: rgba(200,169,106,0.06);
    border: 1px solid rgba(200,169,106,0.18);
    padding: 1rem;
    border-radius: var(--ps-radius-sm);
    margin-bottom: 1.5rem;
}

.active-filters h6 {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    color: var(--ps-text);
    letter-spacing: 0.06em;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--ps-gold-dk), var(--ps-gold));
    color: #0f172a;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(200,169,106,0.3);
}

.filter-tag i { margin-right: 0.5rem; }

.reset-filters {
    color: var(--ps-gold);
    text-decoration: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: color 0.25s;
}
.reset-filters:hover { color: var(--ps-gold-lt); }

.filter-section {
    border-bottom: 1px solid rgba(200,169,106,0.15);
    padding: 1.1rem 0;
}
.filter-section:last-child { border-bottom: none; }

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    color: var(--ps-text);
    font-family: 'DM Sans', sans-serif;
    transition: color 0.25s;
}
.filter-header:hover { color: var(--ps-gold-lt); }
.filter-header i { transition: transform 0.3s; }
.filter-header.collapsed i { transform: rotate(180deg); }

.out-of-stock-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    color: var(--ps-text);
}

.toggle-switch {
    position: relative;
    width: 50px; height: 24px;
    background: rgba(200,169,106,0.12);
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid rgba(200,169,106,0.22);
    transition: background 0.3s;
}
.toggle-switch.active { background: var(--ps-gold-dk); border-color: var(--ps-gold); }
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: var(--ps-text);
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: left 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.toggle-switch.active::after { left: 28px; }

.filter-option {
    display: flex;
    align-items: center;
    padding: 0.45rem 0;
    cursor: pointer;
    color: var(--ps-muted);
    transition: color 0.2s;
}
.filter-option:hover { color: var(--ps-gold-lt); }
.filter-option input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--ps-gold);
}
.filter-option label { cursor: pointer; flex: 1; margin: 0; font-size: 0.9rem; }
.filter-count { color: var(--ps-muted); font-size: 0.82rem; }

.load-more {
    color: var(--ps-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 0.5rem;
    transition: color 0.25s;
}
.load-more:hover { color: var(--ps-gold-lt); }

/* ═══════════════════════════════════════════════════════════════
   QUICK VIEW MODAL — Dark Fireworks Theme
═══════════════════════════════════════════════════════════════ */

#quickViewModal .modal-content {
    background: linear-gradient(145deg, var(--ps-bg-card), var(--ps-bg-surface));
    border: 1px solid var(--ps-border);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px var(--ps-border-soft),
        inset 0 1px 0 var(--ps-border-soft),
        0 32px 80px rgba(0,0,0,0.8);
    color: var(--ps-text);
    font-family: var(--font-body);
}

#quickViewModal .modal-header {
    padding: 20px 30px 0;
    border-bottom: none;
    position: relative;
}

/* gold hairline top on modal */
#quickViewModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ps-gold), var(--ps-gold-lt), var(--ps-gold), transparent);
    opacity: 0.5;
    border-radius: 18px 18px 0 0;
}

#quickViewModal .modal-body { padding: 20px 30px 30px; }

#quickViewModal .btn-close {
    filter: invert(1) brightness(0.65);
    opacity: 0.7;
    transition: opacity 0.25s;
}
#quickViewModal .btn-close:hover { opacity: 1; }

/* ── Modal content elements ────────────────────────────────── */
#modalProductTitle {
    color: var(--ps-text);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#modalProductMeta { color: whitesmoke !important; font-size: 0.9rem; }

#modalProductPrice {
    color: var(--ps-gold) !important;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    text-shadow: 0 0 18px var(--ps-glow-gold);
}

#modalProductImage {
    border-radius: var(--ps-radius);
    box-shadow:
        0 0 0 2px var(--ps-border),
        0 10px 32px rgba(0,0,0,0.6);
    background: linear-gradient(145deg, var(--ps-bg-card), var(--ps-bg-surface));
    padding: 12px;
    border: 1px solid var(--ps-border-soft);
    max-width: 100%;
    height: auto;
}

#descriptionContent {
    line-height: 1.65;
    margin-bottom: 10px;
    color: var(--ps-muted);
    font-size: 0.9rem;
}

#readMoreBtn,
#readLessBtn {
    font-size: 13px;
    padding: 0;
    border: none;
    color: var(--ps-gold) !important;
    text-decoration: underline !important;
    background: transparent;
    cursor: pointer;
    transition: color 0.25s;
    font-family: var(--font-body);
    font-weight: 600;
}
#readMoreBtn:hover,
#readLessBtn:hover { color: var(--ps-gold-lt) !important; }

/* ── Quantity input group ──────────────────────────────────── */
.input-group .btn-outline-secondary {
    border-color: var(--ps-border);
    color: var(--ps-text);
    background: rgba(200,169,106,0.05);
    transition: var(--ps-transition);
}
.input-group .btn-outline-secondary:hover {
    background: var(--ps-gold);
    border-color: var(--ps-gold);
    color: var(--ps-bg-dark);
}

.input-group .form-control {
    background: rgba(200,169,106,0.05);
    border-color: var(--ps-border);
    color: var(--ps-text);
    text-align: center;
}
.input-group .form-control:focus {
    border-color: var(--ps-gold);
    box-shadow: 0 0 0 3px var(--ps-glow-gold);
    background: rgba(200,169,106,0.08);
    color: var(--ps-text);
}

/* ── Add to Cart button ────────────────────────────────────── */
#modalAddToCart {
    background: linear-gradient(135deg, var(--ps-orange), #bf360c) !important;
    border: none;
    box-shadow: 0 4px 20px var(--ps-glow-orange);
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: var(--ps-transition);
    color: #fff;
    position: relative;
    overflow: hidden;
}

#modalAddToCart::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}

#modalAddToCart:hover {
    background: linear-gradient(135deg, var(--ps-orange-lt), var(--ps-orange)) !important;
    box-shadow: 0 6px 32px var(--ps-glow-orange);
    transform: scale(1.015) translateY(-1px);
    color: #fff;
}

#modalAddToCart:hover::before { left: 100%; }

/* ── Wishlist / secondary buttons in modal ─────────────────── */
#modalWishlistBtn,
.modal-secondary-btn {
    background: transparent;
    border: 1px solid var(--ps-border);
    color: var(--ps-muted);
    border-radius: var(--ps-radius-sm);
    transition: var(--ps-transition);
    font-family: var(--font-body);
    font-weight: 600;
}

#modalWishlistBtn:hover,
.modal-secondary-btn:hover {
    border-color: var(--ps-gold);
    color: var(--ps-gold-lt);
    background: var(--ps-glow-gold);
}

/* ── Wholesaler price rows in modal ────────────────────────── */
.modal-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--ps-radius-sm);
    background: rgba(200,169,106,0.04);
    border: 1px solid var(--ps-border-soft);
    margin-bottom: 6px;
    cursor: pointer;
    transition: var(--ps-transition);
}

.modal-price-row:hover {
    background: rgba(200,169,106,0.09);
    border-color: var(--ps-border);
}

.modal-price-row.selected {
    background: rgba(200,169,106,0.12);
    border-color: var(--ps-gold);
    box-shadow: 0 0 0 1px rgba(200,169,106,0.14);
}

.modal-price-row .price-label { color: var(--ps-muted); font-size: 13px; }
.modal-price-row .price-val   { color: var(--ps-gold); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }

/* ── Stock status in modal ─────────────────────────────────── */
.modal-stock.in-stock   { color: #4ade80; font-weight: 600; font-size: 13px; }
.modal-stock.out-of-stock { color: #f87171; font-weight: 600; font-size: 13px; }

/* ── Divider inside modal ──────────────────────────────────── */
.modal-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ps-border), transparent);
    margin: 16px 0;
}

/* ── Modal scrollbar ───────────────────────────────────────── */
#quickViewModal .modal-content::-webkit-scrollbar { width: 5px; }
#quickViewModal .modal-content::-webkit-scrollbar-track { background: rgba(200,169,106,0.04); }
#quickViewModal .modal-content::-webkit-scrollbar-thumb { background: var(--ps-gold-dk); border-radius: 3px; }
#quickViewModal .modal-content::-webkit-scrollbar-thumb:hover { background: var(--ps-gold); }

/* ═══════════════════════════════════════════════════════════════
   POPUP / FIRST-VISIT MODAL — Dark Fireworks Theme
═══════════════════════════════════════════════════════════════ */

.modern-modal {
    background: linear-gradient(145deg, var(--ps-bg-card), var(--ps-bg-surface)) !important;
    border: 1px solid var(--ps-border) !important;
    box-shadow:
        0 0 0 1px var(--ps-border-soft),
        0 32px 80px rgba(0,0,0,0.85) !important;
    color: var(--ps-text);
    font-family: var(--font-body);
}

.modal-content.modern-modal {
    width: 52vw;
    max-width: 1200px;
    margin: auto;
    min-height: 400px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

/* gold hairline top on popup modal */
.modal-content.modern-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ps-gold), var(--ps-gold-lt), var(--ps-gold), transparent);
    opacity: 0.5;
    z-index: 5;
    pointer-events: none;
}

.modal-body.p-0.text-center { padding: 0; }

.modal-dialog.modal-dialog-centered {
    width: 90vw;
    max-width: 1200px;
    min-width: 350px;
    margin: auto;
}

div#firstVisitModal { padding-top: 0; }

/* ── Modern close button ───────────────────────────────────── */
button.modern-close {
    position: absolute;
    right: 18px; top: 12px;
    z-index: 10;
    background: rgba(2,5,11,0.75);
    border: 1px solid var(--ps-border);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ps-transition);
    padding: 0;
}

button.modern-close span {
    font-size: 28px;
    color: var(--ps-gold-lt);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.modern-close:hover {
    background: var(--ps-gold-dk) !important;
    border-color: var(--ps-gold);
    box-shadow: 0 0 14px var(--ps-glow-gold);
    transform: rotate(90deg);
}

.modern-close:hover { background: rgba(200,169,106,0.15) !important; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .modal-content.modern-modal,
    .modal-dialog.modal-dialog-centered {
        width: 98vw;
        max-width: 98vw;
        min-width: unset;
    }
    .modal-content.modern-modal { min-height: 200px; }
    button.modern-close { width: 36px; height: 36px; right: 10px; top: 8px; }
    button.modern-close span { font-size: 22px; }
    #quickViewModal .modal-header { padding: 16px 18px 0; }
    #quickViewModal .modal-body   { padding: 16px 18px 22px; }
    #modalProductTitle { font-size: 1.2rem; }
    #modalProductPrice { font-size: 1.55rem; }
}

@media (max-width: 767px) {
    #quickViewModal .modal-dialog { margin: 10px; }
    #quickViewModal .modal-body   { padding: 14px 16px 20px; }
    #quickViewModal .row          { flex-direction: column-reverse; }
    #modalProductPrice            { font-size: 1.8rem !important; }
}

@media (max-width: 500px) {
    .modal-content.modern-modal,
    .modal-dialog.modal-dialog-centered {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
    }
    .modal-content.modern-modal {
        min-height: 120px;
        border-radius: 12px 12px 0 0;
    }
    button.modern-close { width: 30px; height: 30px; right: 8px; top: 6px; }
    button.modern-close span { font-size: 18px; }
    .input-group .btn-outline-secondary { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #modalAddToCart,
    #modalAddToCart::before,
    button.modern-close,
    .modal-price-row,
    #modalWishlistBtn { transition: none !important; }
    #modalAddToCart:hover { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE PRODUCT SLIDER — 3D Glass Slab Cards
   Matches desktop product.css aesthetic
   Gold: #C8A96A  |  Navy: #0f172a  |  Text: #f5ecd7
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;600;700&display=swap');

/* ── Section header ─────────────────────────────────────────── */
.mobile .section-header {
    padding: 8px 16px !important;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile .section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ps-text);
    white-space: nowrap;
    text-align: left;
    text-shadow: 0 0 20px rgba(200,169,106,.2);
}

.mobile .section-header h2::after {
    content: '';
    display: block;
    margin-top: 5px;
    width: 70px;
    height: 2px;
    border-radius: 100px;
    background: linear-gradient(90deg, transparent, var(--ps-gold), var(--ps-gold-lt), var(--ps-gold), transparent);
    box-shadow: 0 0 8px rgba(200,169,106,.5);
    animation: ps-bar-breathe 4s ease-in-out infinite;
}

/* ── Horizontal scroll strip ────────────────────────────────── */
.mobile div#productSlider {
    display: flex;
    gap: 12px;
    padding: 8px 16px 22px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ps-gold) rgba(200,169,106,.06);
    width: 100%;
    position: relative;
}

.mobile #productSlider::-webkit-scrollbar { height: 4px; }
.mobile #productSlider::-webkit-scrollbar-track { background: rgba(200,169,106,.06); border-radius: 2px; }
.mobile #productSlider::-webkit-scrollbar-thumb { background: var(--ps-gold); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   3D GLASS SLAB CARD — PER-CARD COLOR THEMES
═══════════════════════════════════════════════════════════════ */

/* Violet (default) */
.mobile .product-card.card-violet,
.mobile .product-card:nth-child(4n+1) {
    --ps-ci:     rgba(130, 70,  255, 0.55);
    --ps-ci2:    rgba(0,   190, 255, 0.50);
    --ps-ct:     rgba(220, 70,  160, 0.42);
    --ps-cb:     rgba(0,   245, 160, 0.36);
    --ps-slab-r: rgba(60,  20,  120, 0.90);
    --ps-slab-b: rgba(30,  10,   80, 0.95);
    --ps-slab-c: rgba(20,   5,   60, 0.98);
    --ps-rim-t:  rgba(200, 160, 255, 0.55);
    --ps-rim-l:  rgba(180, 130, 255, 0.30);
}

/* Fire */
.mobile .product-card.card-fire,
.mobile .product-card:nth-child(4n+2) {
    --ps-ci:     rgba(255, 130,   0, 0.52);
    --ps-ci2:    rgba(255,  45,  95, 0.46);
    --ps-ct:     rgba(255, 195,   0, 0.38);
    --ps-cb:     rgba(190,  45, 255, 0.40);
    --ps-slab-r: rgba(120,  40,   0, 0.90);
    --ps-slab-b: rgba( 80,  20,   0, 0.95);
    --ps-slab-c: rgba( 60,  10,   0, 0.98);
    --ps-rim-t:  rgba(255, 200, 120, 0.55);
    --ps-rim-l:  rgba(255, 160,  80, 0.30);
}

/* Ocean */
.mobile .product-card.card-ocean,
.mobile .product-card:nth-child(4n+3) {
    --ps-ci:     rgba(0,   225, 195, 0.52);
    --ps-ci2:    rgba(0,    95, 255, 0.48);
    --ps-ct:     rgba(0,   195, 255, 0.38);
    --ps-cb:     rgba(75,  255, 135, 0.36);
    --ps-slab-r: rgba(0,    60,  90, 0.90);
    --ps-slab-b: rgba(0,    30,  60, 0.95);
    --ps-slab-c: rgba(0,    15,  40, 0.98);
    --ps-rim-t:  rgba(120, 230, 255, 0.55);
    --ps-rim-l:  rgba( 80, 200, 220, 0.30);
}

/* Ember */
.mobile .product-card.card-ember,
.mobile .product-card:nth-child(4n+4) {
    --ps-ci:     rgba(255,  60,  60, 0.50);
    --ps-ci2:    rgba(255, 165,   0, 0.48);
    --ps-ct:     rgba(255, 100,   0, 0.40);
    --ps-cb:     rgba(255, 220,   0, 0.34);
    --ps-slab-r: rgba(110,  20,   0, 0.90);
    --ps-slab-b: rgba( 70,  10,   0, 0.95);
    --ps-slab-c: rgba( 50,   5,   0, 0.98);
    --ps-rim-t:  rgba(255, 180, 120, 0.55);
    --ps-rim-l:  rgba(255, 130,  80, 0.30);
}

/* ── Base card shell ─────────────────────────────────────────── */
.mobile .product-card {
    flex-shrink: 0;
    border-radius: var(--ps-radius);
    padding: 22px 20px 20px;
    margin:10px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    height:300px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;

    /* glass face - Darker for Space Theme */
    background: linear-gradient(155deg,
        rgba(13, 31, 60, 0.70) 0%,   /* Dark Navy Tint */
        rgba(2,  5,  11, 0.40) 100%  /* Fade to Black */
    );
    backdrop-filter:         blur(28px);
    -webkit-backdrop-filter: blur(28px);

    border-top:    1px solid rgba(255, 255, 255, 0.18);
    border-left:   1px solid rgba(255, 255, 255, 0.12);
    border-right:  1px solid rgba(0,   0,   0,   0.32);
    border-bottom: 1px solid rgba(0,   0,   0,   0.42);

    box-shadow:
        /* front face rims */
        inset 0   2px 0   var(--ps-rim-t),
        inset 2px 0   0   var(--ps-rim-l),
        inset 0  -2px 0   rgba(0,0,0,.55),
        inset -2px 0  0   rgba(0,0,0,.40),
        /* inner color bleed */
        inset -8px  0   26px var(--ps-ci),
        inset  8px  0   26px var(--ps-ci2),
        inset  0    8px 20px var(--ps-ct),
        inset  0   -8px 20px var(--ps-cb),
        /* center depth */
        inset 0 0 55px rgba(0,0,0,.42),
        /* right slab */
        4px  0px  0 -1px var(--ps-slab-r),
        6px  1px  2px -1px rgba(0,0,0,.50),
        8px  2px  4px -2px rgba(0,0,0,.28),
        /* bottom slab */
        0px  4px  0 -1px var(--ps-slab-b),
        1px  6px  2px -1px rgba(0,0,0,.50),
        2px  8px  4px -2px rgba(0,0,0,.28),
        /* corner anchor */
        5px  5px  0 -1px var(--ps-slab-c),
        7px  7px  3px -1px rgba(0,0,0,.55),
        9px  9px  7px -2px rgba(0,0,0,.35),
        /* outer elevation */
        0 16px 44px rgba(0,0,0,.70),
        0  6px 16px rgba(0,0,0,.48),
        /* outer hairline */
        0 0 0 0.5px rgba(255,255,255,.09);
}

/* top shimmer hairline */
.mobile .product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--ps-rim-t),
        rgba(255,255,255,.55),
        var(--ps-rim-t),
        transparent
    );
    pointer-events: none;
    z-index: 3;
}

/* frosted top-left sheen */
.mobile .product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--ps-radius);
    background: linear-gradient(138deg,
        rgba(255,255,255,.09) 0%,
        rgba(255,255,255,.03) 30%,
        transparent 52%
    );
    pointer-events: none;
    z-index: 1;
}

/* hover — deeper extrusion */
.mobile .product-card:hover {
    transform: translateY(-9px) translateX(-2px) scale(1.03);
    border-top:    1px solid rgba(255,255,255,.26);
    border-left:   1px solid rgba(255,255,255,.18);
    border-right:  1px solid rgba(0,0,0,.44);
    border-bottom: 1px solid rgba(0,0,0,.54);
    box-shadow:
        inset 0   3px 0   var(--ps-rim-t),
        inset 3px 0   0   var(--ps-rim-l),
        inset 0  -3px 0   rgba(0,0,0,.65),
        inset -3px 0  0   rgba(0,0,0,.50),
        inset -14px  0   38px var(--ps-ci),
        inset  14px  0   38px var(--ps-ci2),
        inset  0    14px 32px var(--ps-ct),
        inset  0   -14px 32px var(--ps-cb),
        inset 0 0 75px rgba(0,0,0,.28),
        6px  0px   0 -1px var(--ps-slab-r),
        9px  1px   3px -1px rgba(0,0,0,.55),
        12px 3px   6px -2px rgba(0,0,0,.33),
        0px  6px   0 -1px var(--ps-slab-b),
        1px  9px   3px -1px rgba(0,0,0,.55),
        3px  12px  6px -2px rgba(0,0,0,.33),
        7px  7px   0 -1px var(--ps-slab-c),
        10px 10px  5px -1px rgba(0,0,0,.62),
        13px 13px  9px -2px rgba(0,0,0,.40),
        0 28px 60px rgba(0,0,0,.80),
        0 12px 24px rgba(0,0,0,.54),
        0  3px  7px rgba(0,0,0,.36),
        0 0 0 0.5px rgba(255,255,255,.15);
}

/* ── Card internals ─────────────────────────────────────────── */
.mobile .product-badge {
    position: absolute;
    top: 9px; left: 9px;
    background: linear-gradient(135deg, #0f172a, #1b2a40);
    color: var(--ps-gold-lt);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    z-index: 4;
    border: 1px solid rgba(200,169,106,.22);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mobile .product-image {
    width: 100%;
    height: 114px;
    object-fit: contain;
    border-radius: var(--ps-radius-sm);
    margin-bottom: 9px;
    background:
        radial-gradient(circle at 50% 40%, rgba(200,169,106,.08), transparent 70%),
        rgba(2,5,11,.6); /* Darker bg */
    padding: 6px;
    border: 1px solid rgba(200,169,106,.07);
    position: relative;
    z-index: 2;
    transition: background .3s;
}

.mobile .product-card:hover .product-image {
    background:
        radial-gradient(circle at 50% 40%, rgba(200,169,106,.13), transparent 70%),
        rgba(2,5,11,.6);
}

.mobile .product-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.35;
    height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #a8c8e8;
    transition: color .25s;
    position: relative;
    z-index: 2;
}

.mobile .product-card:hover .product-title { color: var(--ps-gold-lt); }

.mobile .product-meta {
    font-size: 9px;
    color: var(--ps-muted);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mobile .product-price-section {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 9px;
    position: relative;
    z-index: 2;
}

.mobile .product-price {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ps-gold);
    text-shadow: 0 0 12px rgba(200,169,106,.28);
}

.mobile .sale {
    font-size: 9px;
    font-weight: 800;
    background: linear-gradient(135deg, #1db954, #15803d);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
}

/* ── Add to Cart button ──────────────────────────────────────── */
.mobile .btn-add-cart {
    width: 100%;
    background: linear-gradient(135deg, var(--ps-orange), #bf360c);
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: var(--ps-radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(216,67,21,.4);
    transition: var(--ps-transition);
    letter-spacing: .04em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.mobile .btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transition: left .5s ease;
}

.mobile .btn-add-cart:hover {
    background: linear-gradient(135deg, var(--ps-orange-lt), var(--ps-orange));
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(216,67,21,.55);
}

.mobile .btn-add-cart:hover::before { left: 100%; }

/* ── Quick View button ───────────────────────────────────────── */
.mobile .btn-quick-view {
    width: 100%;
    background: transparent;
    color: var(--ps-muted);
    border: 1px solid rgba(200,169,106,.22);
    padding: 6px;
    border-radius: var(--ps-radius-sm);
    font-size: 10px;
    cursor: pointer;
    transition: var(--ps-transition);
    position: relative;
    z-index: 2;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
}

.mobile .btn-quick-view:hover {
    background: rgba(200,169,106,.07);
    border-color: var(--ps-gold);
    color: var(--ps-gold-lt);
    box-shadow: 0 0 10px rgba(200,169,106,.18);
}

/* ── Sidebar overlay / filter toggle (unchanged) ────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 9998;
}
.sidebar-overlay.show { display: block; }

.filter-toggle-btn {
    position: fixed;
    right: 4px;
    bottom: 75px;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ps-orange), #bf360c);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 54px; height: 54px;
    font-size: 1.4rem;
    box-shadow: 0 4px 20px rgba(216,67,21,.45);
    cursor: pointer;
    transition: var(--ps-transition);
}
.filter-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(216,67,21,.55); }

/* ── Breadcrumb row ──────────────────────────────────────────── */
.breadcrumb-row { display: flex; align-items: center; justify-content: space-between; }

/* ── Misc mobile section ─────────────────────────────────────── */
.mobile .product-section { padding: 10px; background: none; }
.mobile .banner-section  { min-height: 180px; margin-bottom: 15px; }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP / MOBILE TOGGLE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) { .desktop { display: none !important; } }
@media (min-width: 992px) { .mobile  { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════════ */

/* ── XL ≥ 1400px ──────────────────────────────────────────── */
@media (min-width: 1400px) {
    .product-section { padding:0 0 20px; }
    .product-section .section-header h2 { font-size: 2.9rem; font-family: 'Fredoka', sans-serif;}
    .product-section .product-image { height: 160px; }
    .product-section .product-price { font-size: 1.9rem; }
}

/* ── LG 1200–1399px ───────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .product-section { padding: 54px 0 62px; }
    .product-section .section-header h2 { font-size: 1.95rem; }
    .product-section .product-image { height: 196px; }
}

/* ── MD 992–1199px ────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-section { padding: 44px 0 60px; }
    .product-section .section-header h2 { font-size: 1.7rem; }
    .product-section .product-image { height: 175px; }
    .product-section .product-price { font-size: 1.55rem; }
    .product-section .carousel-control-prev { left: -14px; }
    .product-section .carousel-control-next { right: -14px; }
}

/* ── Tablets ≤ 991px ──────────────────────────────────────── */
@media (max-width: 991px) {
    .product-section { padding: 32px 0 40px; }
    .product-section .section-header h2 { font-size: 1.5rem; }
    .product-section .banner-section { min-height: 260px; }
    .sidebar {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 82vw; max-width: 340px;
        height: 100vh;
        z-index: 9999;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        border-radius: 0 var(--ps-radius) var(--ps-radius) 0;
    }
    .sidebar.show { display: block; transform: translateX(0); }
}

@media (min-width: 769px) {
    .filter-toggle-btn { display: none !important; }
    .sidebar-overlay   { display: none !important; }
    .sidebar {
        display: block !important;
        position: static !important;
        height: auto !important;
        transform: none !important;
        border-radius: var(--ps-radius);
    }
}

/* ── 576–767px ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .product-section { padding: 24px 0 30px; }
    .product-section .section-header h2 { font-size: 1.35rem; }
    .mobile .product-card { width: 152px; height: 276px;}
    .mobile .product-image { height: 115px; }
    .mobile .section-header h2 { font-size: 1.1rem; }
    .mobile #productSlider { gap: 10px; padding: 8px 4px 14px; }
    .mobile .banner-section { min-height: 120px; }
    .product-section .buttom-badge.round { width: 52px; height: 52px; font-size: 9px; }
    .banner-ads-container { padding: 14px 0; }
    #quickViewModal .modal-dialog { margin: 10px; }
    #quickViewModal .modal-body   { padding: 14px 18px 22px; }
    #quickViewModal .row          { flex-direction: column-reverse; }
    #modalProductPrice            { font-size: 1.8rem !important; }
    .modal-content.modern-modal,
    .modal-dialog.modal-dialog-centered { width: 98vw; max-width: 98vw; min-width: unset; }
    button.modern-close { width: 34px; height: 34px; right: 8px; top: 6px; }
    button.modern-close span { font-size: 22px; }
}

/* ── ≤ 575px ──────────────────────────────────────────────── */
@media (max-width: 575px) {
    .product-section .main-container { padding: 0 12px; }
    .product-section .section-header h2 { font-size: 1.2rem; }
    .mobile .product-card { width: 160px;padding: 26px;  }
    .mobile .product-image { height: 100px; }
    .mobile .section-header h2 { font-size: 1rem; }
    .mobile #productSlider { gap: 8px; padding: 6px 3px 12px; }
    .mobile .product-price { font-size: 1rem; }
    .mobile .btn-add-cart { font-size: 9px; padding: 7px 6px; }
    .banner-ads-container { padding: 10px 0; }
    .filter-toggle-btn { width: 48px; height: 48px; font-size: 1.3rem; margin-right: 14px; }
}

/* ── ≤ 399px ──────────────────────────────────────────────── */
@media (max-width: 399px) {
    .product-section .main-container { padding: 0 8px; }
    .product-section .section-header h2 { font-size: 1.05rem; }
    .mobile .product-card { width: 155px; padding: 24px; }
    .mobile .product-image { height: 86px; }
    .mobile .product-title { font-size: 11px; height: 30px; }
    .mobile .product-price { font-size: 0.95rem; }
    .mobile .btn-add-cart  { font-size: 8.5px; padding: 6px 4px; }
    .mobile .btn-quick-view { font-size: 8.5px; }
    .mobile #productSlider { gap: 6px; }
    .filter-toggle-btn { width: 42px; height: 42px; font-size: 1.1rem; margin-right: 10px; }
    .product-section .banner-section img { object-position: 50% 40%; max-width:250px; }
}

/* ── Landscape Phone ──────────────────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
    .product-section { padding: 16px 0 20px; }
    .product-section .section-header h2 { font-size: 1.1rem; }
    .mobile .banner-section { min-height: 80px; }
    .mobile .product-card { width: 140px; }
    .mobile .product-image { height: 90px; }
}

/* ── Popup ≤ 900px ────────────────────────────────────────── */
@media (max-width: 900px) {
    .modal-content.modern-modal,
    .modal-dialog.modal-dialog-centered { width: 98vw; max-width: 98vw; min-width: unset; }
    .modal-content.modern-modal { min-height: 200px; }
    button.modern-close { width: 32px; height: 32px; right: 8px; top: 6px; }
    button.modern-close span { font-size: 24px; }
}

/* ── Popup ≤ 500px ────────────────────────────────────────── */
@media (max-width: 500px) {
    .modal-content.modern-modal,
    .modal-dialog.modal-dialog-centered { width: 100vw; max-width: 100vw; margin: 0; }
    .modal-content.modern-modal { min-height: 120px; }
    button.modern-close { width: 28px; height: 28px; right: 4px; top: 2px; }
    button.modern-close span { font-size: 18px; }
        .product-section .banner-section img {max-width:250px; }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .product-section .product-card,
    .product-section .btn-add-cart,
    .product-section .btn-add-cart::before,
    .product-section .banner-section img,
    .banner-ad-item,
    .mobile .product-card { transition: none !important; }
    .product-section .product-card:hover { transform: none; }
    .product-section .section-header h2::after { animation: none; }
}

.breadcrumb-item+.breadcrumb-item::before{
    color: var(--ps-muted);
}

@media (max-width: 768px) {
    .filter-toggle-btn {
        display: flex !important;
    }
}