/* ==========================================================
   LA BELLA — CART DRAWER V3
   Premium Purple Glass / Gold Accents / Watermark Identity
   Built to preserve existing EasyOrders cart selectors
   ========================================================== */

[data-cart="panel-inner"]{
    --lb-ink:#0B0710;
    --lb-purple:#6D0482;
    --lb-purple-deep:#2B0635;
    --lb-purple-mid:#4C0A5C;
    --lb-gold:#D4AF37;
    --lb-gold-soft:#E8CE85;
    --lb-gold-pale:#F3E3AE;
    --lb-ivory:#FBF8F5;
    --lb-text:#F8F1E8;
    --lb-muted:rgba(248,241,232,.62);
    --lb-line:rgba(232,206,133,.14);
    --lb-card:rgba(255,255,255,.055);
    --lb-card-strong:rgba(255,255,255,.085);
    --lb-shadow:rgba(0,0,0,.34);

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at 92% 6%, rgba(109,4,130,.36), transparent 32%),
        radial-gradient(circle at 8% 94%, rgba(76,10,92,.30), transparent 36%),
        linear-gradient(160deg, rgba(11,7,16,.92), rgba(43,6,53,.88) 54%, rgba(20,6,25,.94)) !important;

    color:var(--lb-text);

    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);

    border-left:1px solid rgba(232,206,133,.18);

    box-shadow:
        -34px 0 90px rgba(0,0,0,.36),
        inset 1px 0 rgba(255,255,255,.025);

    scrollbar-width:thin;
    scrollbar-color:rgba(212,175,55,.62) transparent;
}

/* ==========================================================
   WATERMARK — LA BELLA LOGO
   ========================================================== */

[data-cart="panel-inner"]::before{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;

    width:min(82%, 430px);
    aspect-ratio:1 / 1;

    right:-16%;
    top:18%;

    background-image:url("https://files.easy-orders.net/1782411168349054070.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    opacity:.055;
    filter:
        grayscale(1)
        sepia(.35)
        brightness(1.35)
        contrast(.88);

    transform:rotate(-8deg);
}

/* cinematic glass aura */
[data-cart="panel-inner"]::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        linear-gradient(120deg, rgba(255,255,255,.025), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(109,4,130,.24), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(212,175,55,.045), transparent 44%);
}

[data-cart="panel-inner"] > *{
    position:relative;
    z-index:1;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

[data-cart="panel-inner"]::-webkit-scrollbar{
    width:5px;
}

[data-cart="panel-inner"]::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--lb-gold), #9D7731);
    border-radius:999px;
}

[data-cart="panel-inner"]::-webkit-scrollbar-track{
    background:transparent;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

[data-cart="panel-inner"]{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

[data-cart="panel-inner"] h1,
[data-cart="panel-inner"] h2,
[data-cart="panel-inner"] h3,
[data-cart="panel-inner"] .font-bold{
    color:var(--lb-gold-pale) !important;
    font-weight:700;
    line-height:1.25;
}

[data-cart="panel-inner"] h2{
    font-size:18px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--lb-gold) !important;
}

[data-cart="panel-inner"] a{
    color:var(--lb-text) !important;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    text-decoration:none;
    transition:color .22s ease, opacity .22s ease;
}

@media (hover:hover){
    [data-cart="panel-inner"] a:hover{
        color:var(--lb-gold-soft) !important;
    }
}

[data-cart="panel-inner"] small,
[data-cart="panel-inner"] span,
[data-cart="panel-inner"] p{
    color:var(--lb-muted);
    line-height:1.65;
}


/* ==========================================================
   PRODUCT ITEMS — PREMIUM GLASS CARDS
   ========================================================== */

[data-cart="panel-inner"] [class*="item"]{
    position:relative;
    margin:10px 0;
    padding:14px !important;

    border:1px solid rgba(255,255,255,.065);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 14px 34px rgba(0,0,0,.13),
        inset 0 1px rgba(255,255,255,.035);

    transition:
        transform .26s cubic-bezier(.22,1,.36,1),
        border-color .26s ease,
        background .26s ease;
}

[data-cart="panel-inner"] [class*="item"]:not(:last-child){
    border-bottom-color:rgba(232,206,133,.10);
}

@media (hover:hover){
    [data-cart="panel-inner"] [class*="item"]:hover{
        transform:translateY(-2px);
        border-color:rgba(212,175,55,.18);
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.095),
                rgba(109,4,130,.055)
            );
    }
}

[data-cart="panel-inner"] img{
    border-radius:14px;
    background:rgba(255,255,255,.025);

    box-shadow:
        0 10px 26px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.045);

    transition:transform .28s cubic-bezier(.22,1,.36,1);
}

@media (hover:hover){
    [data-cart="panel-inner"] [class*="item"]:hover img{
        transform:scale(1.025);
    }
}


/* ==========================================================
   PRICE
   ========================================================== */

[data-cart="panel-inner"] .price,
[data-cart="panel-inner"] [class*="price"]{
    color:var(--lb-gold) !important;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
}


/* ==========================================================
   QUANTITY STEPPER
   ========================================================== */

[data-cart="panel-inner"] input,
[data-cart="panel-inner"] .quantity,
[data-cart="panel-inner"] [class*="quantity"]{
    color:var(--lb-gold-soft);
    font-weight:700;
    font-size:14px;
}

[data-cart="panel-inner"] [class*="quantity"]{
    display:inline-flex;
    align-items:center;
    gap:4px;

    padding:4px;

    border:1px solid rgba(212,175,55,.20);
    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(0,0,0,.12)
        );

    box-shadow:inset 0 1px rgba(255,255,255,.025);
}

[data-cart="panel-inner"] [class*="quantity"] button{
    width:28px;
    height:28px;

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

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.035);
    color:var(--lb-gold-soft);

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .18s ease;
}

@media (hover:hover){
    [data-cart="panel-inner"] [class*="quantity"] button:hover{
        background:rgba(212,175,55,.14);
        color:var(--lb-gold-pale);
        transform:scale(1.05);
    }
}

[data-cart="panel-inner"] [class*="quantity"] input{
    width:32px;
    text-align:center;

    background:transparent;
    border:0;

    color:var(--lb-gold-pale);
}


/* ==========================================================
   ICONS / CLOSE
   ========================================================== */

[data-cart="panel-inner"] svg{
    color:var(--lb-gold-soft);
}

[data-cart="close"]{
    color:var(--lb-gold-soft) !important;

    border-radius:50%;
    transition:
        background .2s ease,
        transform .2s ease,
        color .2s ease;
}

@media (hover:hover){
    [data-cart="close"]:hover{
        background:rgba(212,175,55,.10);
        color:var(--lb-gold) !important;
        transform:rotate(4deg);
    }
}


/* ==========================================================
   SUBTOTAL / TOTAL
   ========================================================== */

[data-cart="panel-inner"] [class*="subtotal"],
[data-cart="panel-inner"] [class*="total"]{
    margin-top:16px;
    padding-top:16px;

    border-top:1px solid rgba(212,175,55,.18);
}

[data-cart="panel-inner"] [class*="subtotal"] .price,
[data-cart="panel-inner"] [class*="total"] .price{
    font-size:23px;
    color:var(--lb-gold-pale) !important;
}


/* ==========================================================
   CHECKOUT CTA — PRIMARY ACTION
   ========================================================== */

[data-cart="panel-inner"] button[type="submit"],
[data-cart="panel-inner"] .checkout-btn{
    position:relative;
    overflow:hidden;

    min-height:52px;
    padding:0 22px;

    background:
        linear-gradient(
            135deg,
            var(--lb-purple),
            var(--lb-purple-deep)
        ) !important;

    color:#FFF5D7 !important;

    border:1px solid rgba(232,206,133,.45);
    border-radius:999px;

    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;

    box-shadow:
        0 16px 36px rgba(0,0,0,.28),
        0 0 28px rgba(109,4,130,.14),
        inset 0 1px rgba(255,255,255,.06);

    cursor:pointer;

    transition:
        transform .26s cubic-bezier(.22,1,.36,1),
        box-shadow .26s ease,
        border-color .26s ease;
}

[data-cart="panel-inner"] button[type="submit"]::before,
[data-cart="panel-inner"] .checkout-btn::before{
    content:"";
    position:absolute;
    top:-70%;
    left:-35%;

    width:30%;
    height:240%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.26),
            transparent
        );

    transform:rotate(12deg);
    transition:left .62s cubic-bezier(.22,1,.36,1);
}

@media (hover:hover){
    [data-cart="panel-inner"] button[type="submit"]:hover,
    [data-cart="panel-inner"] .checkout-btn:hover{
        transform:translateY(-2px);

        border-color:rgba(232,206,133,.72);

        box-shadow:
            0 20px 42px rgba(0,0,0,.32),
            0 0 34px rgba(109,4,130,.22);
    }

    [data-cart="panel-inner"] button[type="submit"]:hover::before,
    [data-cart="panel-inner"] .checkout-btn:hover::before{
        left:125%;
    }
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

[data-cart="empty"]{
    color:var(--lb-muted);
    text-align:center;
    padding:64px 24px;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

[data-cart="panel-inner"] a:focus-visible,
[data-cart="panel-inner"] button:focus-visible,
[data-cart="panel-inner"] input:focus-visible{
    outline:2px solid var(--lb-gold);
    outline-offset:3px;
}


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

@media (max-width:640px){

    [data-cart="panel-inner"]::before{
        width:78%;
        right:-24%;
        top:22%;
        opacity:.045;
    }

    [data-cart="panel-inner"] [class*="item"]{
        padding:12px !important;
        border-radius:16px;
    }

    [data-cart="panel-inner"] h2{
        font-size:16px;
    }

    [data-cart="panel-inner"] button[type="submit"],
    [data-cart="panel-inner"] .checkout-btn{
        min-height:50px;
        width:100%;
    }
}