*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#06091a;
    --panel:rgba(255,255,255,.055);
    --panel2:rgba(255,255,255,.08);
    --line:rgba(255,255,255,.10);
    --text:#ffffff;
    --muted:#aab0c8;
    --purple:#7c3cff;
    --purple2:#4c28d9;
    --blue:#1d7cff;
    --red:#ff4747;
    --green:#3df47b;
}

body{
    min-height:100vh;
    font-family:Inter, Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 5% 20%, rgba(93,42,255,.35), transparent 24%),
        radial-gradient(circle at 78% 20%, rgba(0,117,255,.17), transparent 33%),
        radial-gradient(circle at 50% 100%, rgba(78,30,200,.16), transparent 35%),
        #06091a;
}

a{
    color:inherit;
    text-decoration:none;
}

.cart-bg{
    min-height:100vh;
    padding:26px 52px 34px;
}

.cart-header{
    height:76px;
    max-width:1450px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:25px;
    font-weight:950;
    letter-spacing:.3px;
}

.brand-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(145deg, #8d35ff, #3b17c9);
    border:1px solid rgba(167,118,255,.75);
    box-shadow:0 0 22px rgba(124,60,255,.55);
}

.brand-icon svg{
    width:26px;
    height:26px;
}

.cart-header nav{
    display:flex;
    align-items:center;
    gap:42px;
    font-size:16px;
    font-weight:700;
}

.cart-header nav a{
    color:#f2f3ff;
    transition:.25s;
}

.cart-header nav a:hover{
    color:#9b7cff;
}

.cart-pill{
    min-width:132px;
    height:46px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:9px;
    background:linear-gradient(135deg, rgba(99,69,216,.95), rgba(83,38,173,.95));
    border:1px solid rgba(156,118,255,.35);
    font-weight:900;
    box-shadow:0 12px 30px rgba(124,60,255,.22);
}

.cart-container{
    max-width:1450px;
    margin:0 auto;
}

.page-title{
    padding:26px 0 24px;
}

.page-title h1{
    font-size:36px;
    line-height:1;
    margin-bottom:12px;
}

.page-title p{
    color:#c6c8dc;
    font-size:18px;
}

.page-title a{
    color:#846dff;
}

.cart-table{
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(124,60,255,.12), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow:0 30px 90px rgba(0,0,0,.24);
}

.table-head{
    min-height:66px;
    display:grid;
    grid-template-columns:190px 1.5fr 1fr 1fr 1fr 130px;
    align-items:center;
    gap:18px;
    padding:0 30px;
    border-bottom:1px solid var(--line);
    color:#d3c8ff;
    font-size:17px;
    font-weight:900;
}

.cart-row{
    min-height:166px;
    display:grid;
    grid-template-columns:190px 1.5fr 1fr 1fr 1fr 130px;
    align-items:center;
    gap:18px;
    padding:18px 30px;
    border-bottom:1px solid var(--line);
}

.product-photo{
    width:164px;
    height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    overflow:hidden;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(137,122,255,.55);
    box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.product-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-photo span{
    font-size:40px;
}

.product-info h2{
    font-size:23px;
    margin-bottom:8px;
}

.product-info p{
    color:var(--muted);
    font-size:16px;
    margin-bottom:8px;
}

.product-info span{
    display:block;
    color:#88c7ff;
    font-size:15px;
    margin-bottom:9px;
}

.product-info b{
    color:var(--green);
    font-size:15px;
}

.price,
.sum{
    font-size:18px;
    font-weight:900;
}

.qty-box{
    width:170px;
    height:50px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    border-radius:9px;
    overflow:hidden;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.06);
}

.qty-box a,
.qty-box strong{
    display:grid;
    place-items:center;
    font-size:20px;
    font-weight:800;
}

.qty-box a{
    background:rgba(124,60,255,.13);
    transition:.2s;
}

.qty-box a:hover{
    background:rgba(124,60,255,.35);
}

.delete-one{
    width:50px;
    height:50px;
    justify-self:center;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:linear-gradient(145deg, rgba(255,73,73,.45), rgba(107,27,42,.68));
    color:#ffd6d6;
    font-size:36px;
    line-height:1;
    border:1px solid rgba(255,95,95,.35);
    transition:.25s;
}

.delete-one:hover{
    transform:scale(1.06);
    box-shadow:0 0 26px rgba(255,71,71,.28);
}

.cart-bottom{
    min-height:186px;
    display:grid;
    grid-template-columns:1fr 520px;
    gap:30px;
    align-items:start;
    padding:28px 30px;
}

.clear-cart{
    width:185px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#ff5f69;
    border:1px solid #ff4747;
    border-radius:9px;
    font-weight:900;
    background:rgba(255,71,71,.055);
    transition:.25s;
}

.clear-cart:hover{
    background:rgba(255,71,71,.13);
    box-shadow:0 0 26px rgba(255,71,71,.16);
}

.total-card{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.total-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.total-line span{
    color:#d4d5e3;
    font-size:20px;
}

.total-line b{
    font-size:28px;
    white-space:nowrap;
}

.checkout-link{
    width:100%;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-radius:9px;
    background:linear-gradient(135deg, #6036ff, #6427c9);
    font-size:18px;
    font-weight:950;
    box-shadow:0 22px 50px rgba(98,45,218,.25);
    transition:.25s;
}

.checkout-link:hover{
    transform:translateY(-3px);
    box-shadow:0 26px 64px rgba(98,45,218,.38);
}

.checkout-link span{
    font-size:27px;
}

.feature-strip{
    margin-top:34px;
    min-height:122px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    align-items:center;
    gap:28px;
    padding:24px 30px;
    border:1px solid var(--line);
    border-radius:10px;
    background:
        radial-gradient(circle at 20% 20%, rgba(124,60,255,.10), transparent 35%),
        rgba(255,255,255,.035);
}

.feature-item{
    display:flex;
    align-items:center;
    gap:18px;
}

.feature-item i{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-style:normal;
    font-size:31px;
    color:#8b61ff;
    background:rgba(124,60,255,.10);
    box-shadow:0 14px 35px rgba(0,0,0,.14);
}

.feature-item b{
    display:block;
    font-size:18px;
    margin-bottom:6px;
}

.feature-item span{
    color:var(--muted);
    font-size:16px;
}

.empty-cart{
    min-height:360px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.04);
}

.empty-cart div{
    font-size:70px;
}

.empty-cart h2{
    font-size:32px;
}

.empty-cart p{
    color:var(--muted);
}

.empty-cart a{
    padding:15px 24px;
    border-radius:10px;
    background:linear-gradient(135deg, #6036ff, #6427c9);
    font-weight:900;
}

.cart-footer{
    margin-top:52px;
    padding-top:34px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:#858ba4;
    font-size:16px;
}

@media(max-width:1100px){
    .cart-bg{
        padding:22px;
    }

    .cart-header{
        height:auto;
        flex-wrap:wrap;
    }

    .cart-header nav{
        gap:18px;
        flex-wrap:wrap;
    }

    .table-head{
        display:none;
    }

    .cart-row{
        grid-template-columns:140px 1fr;
        gap:16px;
    }

    .product-photo{
        width:140px;
        height:116px;
    }

    .price,
    .qty-box,
    .sum,
    .delete-one{
        grid-column:2;
        justify-self:start;
    }

    .cart-bottom{
        grid-template-columns:1fr;
    }

    .feature-strip{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:650px){
    .cart-row{
        grid-template-columns:1fr;
    }

    .product-photo{
        width:100%;
        height:210px;
    }

    .price,
    .qty-box,
    .sum,
    .delete-one{
        grid-column:auto;
    }

    .feature-strip{
        grid-template-columns:1fr;
    }

    .total-line{
        flex-direction:column;
        align-items:flex-start;
    }
}