@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=DM+Sans:wght@400;500;600;700;800&display=swap');
 
/* =========================================================
   INSANE LABAN — HOMEPAGE
   Mobile first. No !important except where the navbar's own
   stylesheet has to be overridden.
========================================================= */
 
:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --ivory:#f6f3ee;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;
    --ink:#102d4d;
    --ink-soft:#6c757f;
 
    --display:"Playfair Display",Georgia,serif;
    --script:"Great Vibes",cursive;
    --sans:"DM Sans",Arial,sans-serif;
 
    --gut:16px;
    --radius:20px;
}
 
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
 
body{
    margin:0;
    padding:0;
    background:var(--navy-900);
    color:#fff;
    font-family:var(--sans);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
 
img,video{max-width:100%;display:block}
a{text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;border-radius:6px}
 
 
/* =========================================================
   INTRO
========================================================= */
 
#intro-screen{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    transition:opacity .8s ease;
}
 
#intro-video{width:100%;height:100%;object-fit:cover}
 
#skip-intro{
    position:absolute;
    right:22px;
    bottom:26px;
    padding:10px 20px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(5,30,55,.55);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}
 
 
/* =========================================================
   PAGE SHELL
========================================================= */
 
.home-page{
    width:100%;
    margin:0;
    padding:76px 0 50px;
}
 
.shell{
    width:100%;
    padding-inline:var(--gut);
}
 
 
/* =========================================================
   HERO
========================================================= */
 
.hero{
    position:relative;
    width:100%;
    min-height:610px;
    overflow:visible;
    border-radius:0 0 28px 28px;
    background:var(--navy-800);
    box-shadow:0 18px 45px rgba(3,16,40,.45);
}
 
.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:68% center;
    border-radius:inherit;
    z-index:0;
}
 
.hero-overlay{
    position:absolute;
    inset:0;
    border-radius:inherit;
    z-index:1;
    background:
        linear-gradient(
            100deg,
            rgba(3,20,44,.92) 0%,
            rgba(3,22,48,.72) 42%,
            rgba(3,26,56,.22) 78%,
            rgba(3,26,56,.06) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,14,32,.30) 0%,
            rgba(2,14,32,.05) 38%,
            rgba(2,14,32,.72) 100%
        );
}
 
 
/* DELIVERY CHIP */
 
.delivery-card{
    position:absolute;
    top:18px;
    right:16px;
    z-index:6;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    background:rgba(3,20,42,.78);
    backdrop-filter:blur(12px);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
 
.delivery-card i{font-size:17px;color:var(--gold-soft)}
.delivery-card strong{display:block;font-size:12px;font-weight:700}
.delivery-card p{margin:2px 0 0;color:rgba(255,255,255,.7);font-size:11px}
 
 
/* HERO CONTENT */
 
.hero-content{
    position:relative;
    z-index:5;
    padding:86px var(--gut) 48px;
    max-width:520px;
}
 
.hero-tag{
    display:inline-flex;
    align-items:center;
    padding:8px 15px;
    border:1px solid rgba(232,189,104,.6);
    border-radius:999px;
    background:rgba(8,43,75,.35);
    color:var(--gold-soft);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}
 
.hero h1{
    margin:20px 0 0;
    color:#fff;
    font-family:var(--display);
    font-size:clamp(48px,13.5vw,72px);
    font-weight:800;
    line-height:.88;
    letter-spacing:-1.5px;
    text-shadow:0 6px 22px rgba(0,0,0,.35);
}
 
.hero-script{
    display:block;
    margin-top:10px;
    color:var(--gold-soft);
    font-family:var(--script);
    font-size:clamp(34px,9.5vw,52px);
    font-weight:400;
    line-height:1.05;
}
 
.hero-flourish{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    color:var(--gold);
    font-size:10px;
    opacity:.85;
}
 
.hero-flourish::before{
    content:"";
    width:76px;
    height:1px;
    background:currentColor;
}
 
.hero p.hero-copy{
    max-width:31ch;
    margin:18px 0 0;
    color:rgba(255,255,255,.86);
    font-size:15px;
    line-height:1.55;
}
 
 
/* HERO BUTTONS */
 
.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-top:26px;
}
 
.primary-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:15px 24px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    font-size:14px;
    font-weight:700;
    box-shadow:0 12px 28px -10px rgba(84,48,210,.85);
    transition:transform .25s ease,box-shadow .25s ease;
}
 
.primary-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 32px -10px rgba(84,48,210,.95);
}
 
.secondary-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:14px;
    font-weight:600;
}
 
.play-circle{
    width:42px;
    height:42px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--gold-soft);
    border-radius:50%;
    background:rgba(5,30,55,.25);
    color:var(--gold-soft);
    font-size:11px;
}
 
.play-circle i{margin-left:2px}
 
 
/* =========================================================
   PROMISE BAR
========================================================= */
 
.promise-wrap{
    position:relative;
    z-index:20;
    margin-top:-46px;
}
 
.promise-bar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-radius:var(--radius);
    background:var(--ivory);
    color:var(--ink);
    box-shadow:0 22px 48px rgba(3,16,40,.45);
    overflow:hidden;
}
 
.promise-item{
    position:relative;
    padding:18px 6px 14px;
    text-align:center;
}
 
.promise-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:14%;
    width:1px;
    height:72%;
    background:#e1e2e3;
}
 
.promise-item > i{
    display:block;
    color:var(--navy-700);
    font-size:17px;
}
 
.promise-item h3{
    margin:9px 0 5px;
    font-family:var(--sans);
    font-size:11px;
    font-weight:800;
    line-height:1.2;
}
 
.promise-item p{
    margin:0;
    color:var(--ink-soft);
    font-size:9.5px;
    line-height:1.4;
}
 
.promise-item img{
    width:auto;
    height:44px;
    margin:10px auto 0;
    object-fit:contain;
}
 
 
/* =========================================================
   SECTION HEADING
========================================================= */
 
.desserts-section{
    position:relative;
    margin:40px 0 0;
}
 
.section-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}
 
.section-title{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0;
    font-family:var(--sans);
    font-size:clamp(15px,4.4vw,22px);
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#fff;
}
 
.section-title::before,
.section-title::after{
    content:"";
    flex:1;
    max-width:60px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold));
}
 
.section-title::after{
    background:linear-gradient(90deg,var(--gold),transparent);
}
 
.view-all-btn{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 15px;
    border:1px solid rgba(232,189,104,.55);
    border-radius:999px;
    color:var(--gold-soft);
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
}
 
.view-all-btn:hover{
    background:var(--gold);
    color:#08203c;
}
 
 
/* =========================================================
   DECORATIONS
========================================================= */
 
.dessert-decoration{
    position:absolute;
    z-index:1;
    pointer-events:none;
    user-select:none;
    opacity:.85;
}
 
.dessert-decoration img{
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
}
 
.dessert-decoration-pis{left:-14px;top:-26px;width:54px;transform:rotate(-15deg)}
.dessert-decoration-kinder{right:-12px;bottom:96px;width:52px;transform:rotate(9deg)}
.dessert-decoration-ferr{display:none}
 
 
/* =========================================================
   PRODUCT CAROUSEL
========================================================= */
 
.dessert-carousel{position:relative}
 
.dessert-grid{
    position:relative;
    z-index:3;
    display:flex;
    gap:12px;
    padding:2px 0 4px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
}
 
.dessert-grid::-webkit-scrollbar{display:none}
 
.dessert-card{
    position:relative;
    flex:0 0 clamp(148px,42vw,230px);
    scroll-snap-align:start;
    overflow:hidden;
    border-radius:14px;
    background:var(--ivory);
    color:var(--ink);
    box-shadow:0 12px 28px rgba(3,16,40,.35);
    transition:transform .3s ease,box-shadow .3s ease;
}
 
.dessert-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 38px rgba(3,16,40,.5);
}
 
.dessert-image-link{
    display:block;
    overflow:hidden;
    background:#e8edf0;
}
 
.dessert-card img,
.dessert-image{
    width:100%;
    height:150px;
    object-fit:cover;
    transition:transform .45s ease;
}
 
.dessert-card:hover .dessert-image{transform:scale(1.05)}
 
.dessert-image-placeholder{
    height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:#edf0f1;
    color:#7c8790;
    font-size:10px;
}
 
.dessert-image-placeholder i{font-size:22px}
 
.card-content{
    position:relative;
    padding:12px 13px 14px;
}
 
.dessert-tag{
    display:inline-block;
    margin-bottom:7px;
    padding:4px 8px;
    border-radius:999px;
    background:#f0ebff;
    color:#6841df;
    font-size:8px;
    font-weight:700;
    letter-spacing:.4px;
}
 
.card-content h3{
    margin:0 0 5px;
    padding-right:26px;
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    font-weight:800;
    line-height:1.15;
}
 
.card-content p{
    margin:0;
    color:var(--ink-soft);
    font-size:10.5px;
    line-height:1.45;
}
 
.card-price{
    margin-top:10px;
    color:#b8842a;
    font-family:var(--sans);
    font-size:17px;
    font-weight:800;
}
 
.card-arrow{
    position:absolute;
    right:11px;
    top:11px;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eceff1;
    color:var(--ink);
    font-size:9px;
}
 
 
/* ARROWS */
 
.car-arrow{
    position:absolute;
    top:33%;
    z-index:6;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#fff;
    color:var(--ink);
    font-size:12px;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
    transition:transform .2s ease,opacity .2s ease;
}
 
.car-arrow:hover{transform:scale(1.06)}
.car-arrow[disabled]{opacity:.3;cursor:default}
.car-arrow.prev{left:-10px}
.car-arrow.next{right:-10px}
 
 
/* DOTS */
 
.car-dots{
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:18px;
}
 
.car-dots button{
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    cursor:pointer;
}
 
.car-dots button[aria-current="true"]{
    width:9px;
    height:9px;
    background:var(--violet-hi);
}
 
 
/* =========================================================
   EMPTY STATE
========================================================= */
 
.no-products{
    flex:1 1 100%;
    padding:45px 20px;
    border-radius:18px;
    background:var(--ivory);
    color:var(--ink);
    text-align:center;
}
 
.no-products-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:#eeeaff;
    color:#6b3df5;
}
 
.no-products h3{margin:0 0 5px;font-size:18px}
.no-products p{margin:0;color:#777;font-size:12px}
 
 
/* =========================================================
   LOYALTY
========================================================= */
 
.loyalty-section{
    position:relative;
    overflow:hidden;
    margin:42px 0 0;
    padding:26px 20px 0;
    border:1px solid rgba(226,180,83,.3);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 82% 30%,rgba(64,131,192,.42),transparent 45%),
        linear-gradient(125deg,#0a2a50,#062038);
    color:#fff;
    box-shadow:0 22px 50px rgba(3,16,40,.45);
}
 
.loyalty-crown{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(232,189,104,.5);
    border-radius:50%;
    color:var(--gold-soft);
    font-size:20px;
}
 
.loyalty-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0 10px;
    color:var(--gold-soft);
    font-size:10px;
    font-weight:700;
    letter-spacing:2.6px;
    text-transform:uppercase;
}
 
.loyalty-label::after{
    content:"";
    width:40px;
    height:1px;
    background:linear-gradient(90deg,var(--gold),transparent);
}
 
.loyalty-section h2{
    margin:0;
    font-family:var(--display);
    font-size:clamp(26px,7vw,38px);
    font-weight:800;
    line-height:1.08;
}
 
.loyalty-section p{
    max-width:34ch;
    margin:12px 0 20px;
    color:rgba(255,255,255,.78);
    font-size:13.5px;
    line-height:1.55;
}
 
.loyalty-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 22px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    font-size:13px;
    font-weight:700;
    box-shadow:0 12px 26px -10px rgba(84,48,210,.85);
}
 
.loyalty-btn:hover{background:var(--violet-hi)}
 
 
/* PHONE */
 
.loyalty-phone{
    width:min(200px,60%);
    margin:26px auto 0;
    padding:24px 18px 28px;
    border:5px solid #0a1a35;
    border-bottom:0;
    border-radius:26px 26px 0 0;
    background:linear-gradient(170deg,#123163,#071731);
    text-align:center;
    box-shadow:0 -10px 44px -18px rgba(127,87,255,.8);
}
 
.loyalty-phone .phone-label{
    font-family:var(--script);
    font-size:19px;
    color:var(--gold-soft);
}
 
.loyalty-phone .phone-points{
    margin:2px 0;
    font-family:var(--display);
    font-size:42px;
    font-weight:800;
    line-height:1;
}
 
.loyalty-phone .phone-unit{
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
}
 
.loyalty-phone .phone-note{
    margin:12px 0 14px;
    font-family:var(--script);
    font-size:15px;
    line-height:1.3;
    color:rgba(255,255,255,.88);
}
 
.loyalty-phone .phone-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 15px;
    border-radius:999px;
    background:var(--violet);
    color:#fff;
    font-size:11px;
    font-weight:700;
}
 
 
/* =========================================================
   BOTTOM BENEFITS
========================================================= */
 
.bottom-benefits{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:24px 0 0;
    padding:20px 8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius);
    background:rgba(255,255,255,.045);
}
 
.benefit-item{text-align:center}
 
.benefit-item i{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    border:1px solid rgba(232,189,104,.42);
    border-radius:50%;
    color:var(--gold-soft);
    font-size:14px;
}
 
.benefit-item span{
    display:block;
    font-size:11px;
    font-weight:700;
    line-height:1.25;
    color:#fff;
}
 
 
/* =========================================================
   NAVBAR — MOBILE TOP BAR
   (overrides the navbar's own stylesheet, hence !important)
========================================================= */
 
@media (max-width:900px){
 
    .sidebar{
        position:fixed !important;
        top:10px !important;
        left:10px !important;
        right:10px !important;
        width:auto !important;
        height:56px !important;
        padding:0 10px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-radius:18px !important;
        background:rgba(255,255,255,.97) !important;
        box-shadow:0 7px 25px rgba(2,10,25,.28) !important;
        z-index:9999 !important;
    }
 
    .sidebar .logo{
        width:auto !important;
        height:100% !important;
        display:flex !important;
        align-items:center !important;
    }
 
    .sidebar .logo img{
        width:42px !important;
        height:42px !important;
        object-fit:contain !important;
    }
 
    .sidebar .nav-links{display:none !important}
 
    .sidebar .signin{display:flex !important;margin:0 !important}
 
    .sidebar .nav-signin{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:7px !important;
    }
 
    .sidebar .profile-name,
    .sidebar .logout-link{display:none !important}
 
    .sidebar .profile-link{
        width:40px !important;
        height:40px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
 
    .sidebar .profile-link > i{
        width:38px !important;
        height:38px !important;
        margin:0 !important;
        font-size:16px !important;
        background:#f1eaff !important;
        color:#6b3df5 !important;
    }
}
 
 
/* =========================================================
   TABLET
========================================================= */
 
@media (min-width:600px){
 
    :root{--gut:24px}
 
    .promise-item{padding:22px 12px 16px}
    .promise-item h3{font-size:13px}
    .promise-item p{font-size:11px}
    .promise-item img{height:56px}
 
    .dessert-card img,
    .dessert-image,
    .dessert-image-placeholder{height:180px}
 
    .card-content h3{font-size:18px}
    .card-content p{font-size:11.5px}
    .card-price{font-size:19px}
 
    .benefit-item span{font-size:13px}
}
 
 
/* =========================================================
   DESKTOP
========================================================= */
 
@media (min-width:900px){
 
    :root{--gut:0px}
 
    .home-page{
        width:calc(100% - 130px);
        margin-left:110px;
        padding:20px 20px 80px;
    }
 
    .hero{
        min-height:660px;
        border-radius:34px;
    }
 
    .hero-video{object-position:center}
 
    .hero-content{
        position:absolute;
        left:7%;
        top:50%;
        transform:translateY(-50%);
        padding:0;
        width:520px;
        max-width:none;
    }
 
    .hero-buttons{
        flex-direction:row;
        align-items:center;
        gap:22px;
    }
 
    .delivery-card{top:26px;right:26px}
 
    .promise-wrap{
        margin:-58px auto 0;
        width:calc(100% - 70px);
    }
 
    .promise-item{padding:24px 18px 18px}
    .promise-item > i{font-size:20px}
    .promise-item h3{font-size:15px}
    .promise-item p{font-size:12px}
    .promise-item img{height:66px}
 
    .desserts-section{margin-top:80px}
 
    .section-title{font-size:26px;letter-spacing:4px}
    .section-title::before,
    .section-title::after{max-width:180px}
    .view-all-btn{font-size:12px;padding:11px 18px}
 
    /* on desktop the row fits, so no snap-scrolling needed */
    .dessert-grid{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:18px;
        overflow:visible;
    }
 
    .dessert-card{flex:none}
    .car-arrow,
    .car-dots{display:none}
 
    .dessert-card img,
    .dessert-image,
    .dessert-image-placeholder{height:225px}
 
    .card-content{padding:16px}
    .card-content h3{font-size:20px}
    .card-price{font-size:21px}
 
    .dessert-decoration-pis{left:-34px;top:-38px;width:100px}
    .dessert-decoration-kinder{right:-24px;bottom:auto;top:40px;width:100px}
    .dessert-decoration-ferr{display:block;right:16%;bottom:-32px;width:78px;transform:rotate(-8deg)}
 
    .loyalty-section{
        display:grid;
        grid-template-columns:1.2fr .8fr;
        align-items:end;
        margin-top:70px;
        padding:44px 46px 0;
    }
 
    .loyalty-section h2{font-size:44px}
    .loyalty-section p{font-size:15px}
 
    .loyalty-phone{
        justify-self:end;
        width:230px;
        margin:0;
    }
 
    .bottom-benefits{
        margin-top:30px;
        padding:28px 20px;
    }
 
    .benefit-item i{width:44px;height:44px;font-size:16px}
    .benefit-item span{font-size:14px}
}
 
 
@media (min-width:1300px){
    .hero{min-height:720px}
    .hero h1{font-size:96px}
    .hero-script{font-size:56px}
    .hero p.hero-copy{font-size:16px}
}
 
 
/* =========================================================
   MOTION
========================================================= */
 
@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    html{scroll-behavior:auto}
    .dessert-grid{scroll-behavior:auto}
}
 /* =========================================================
   SIGNATURE CARDS — DARK TREATMENT
   Paste at the END of css/home.css, before the MOTION block.

   Brings the homepage carousel in line with the cards on the
   products, cart, orders and confirmation pages.
========================================================= */

.dessert-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    box-shadow:0 14px 32px rgba(3,16,40,.4);
}

.dessert-card:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(232,189,104,.3);
    box-shadow:0 22px 44px rgba(3,16,40,.55);
}


/* IMAGE WELL */

.dessert-image-link{
    background:var(--navy-700);
}

.dessert-image-placeholder{
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.5);
}


/* CONTENT */

.card-content h3{
    color:#fff;
}

.card-content p{
    color:rgba(255,255,255,.5);
}

.card-price{
    color:var(--gold-soft);
}


/* SIGNATURE TAG */

.dessert-tag{
    border:1px solid rgba(127,87,255,.4);
    background:rgba(107,61,245,.2);
    color:#c3aeff;
}


/* EMPTY STATE */

.no-products{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

.no-products h3{color:#fff}

.no-products p{color:rgba(255,255,255,.6)}

.no-products-icon{
    border:1px solid rgba(232,189,104,.4);
    background:rgba(232,189,104,.12);
    color:var(--gold-soft);
}


/* ---------------------------------------------------------
   CAROUSEL ARROWS
   White circles read as bright dots against dark cards, so
   they get the same glass treatment.
--------------------------------------------------------- */

.car-arrow{
    border:1px solid rgba(255,255,255,.16);
    background:rgba(10,34,70,.92);
    color:#fff;
    backdrop-filter:blur(8px);
}

.car-arrow:hover{
    border-color:rgba(232,189,104,.45);
    color:var(--gold-soft);
}