
.section-cart { position: relative; display: grid; grid-template-columns: 1fr 517px; gap: 24px; margin-top: 40px; }
.section-cart > .left > h1 { color: #494949; padding: 0px 16px; }
.section-cart > .left > .groups { display: flex; flex-direction: column; gap: 40px; }
.section-cart > .left > .groups > .group { display: flex; flex-direction: column; gap: 12px; }
.section-cart > .left > .groups > .group > .provider { color: #808080; padding: 0px 16px; display: flex; justify-content: space-between; align-items: center; }
.section-cart > .left > .groups > .group > .provider > .tally { background-color: #f5f5f5; color: #808080; padding: 8px 16px; border-radius: 4px; }
.section-cart > .left > .groups > .group > .provider > .tally > span { font-weight: 700; }
.section-cart > .left > .groups > .group > .items { display: flex; flex-direction: column; gap: 24px; }
.section-cart > .left > .groups > .group > .items > .item { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 16px; background-color: #f5f5f5; border-radius: 24px; }
.section-cart > .left > .groups > .group > .items > .item > picture > img { object-fit: cover; border-radius: 16px; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top { display: flex; justify-content: space-between; gap: 90px }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > svg { flex-shrink: 0; cursor: pointer; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > svg rect { transition: fill 0.4s; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > svg path { transition: fill 0.4s; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > svg g { transition: opacity 0.4s; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > a:hover svg rect { fill: #6B27FF; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > a:hover svg path { fill: #fff; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > a:hover svg g { opacity: 1.0; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > .left > .name { font-weight: 900; }
.section-cart > .left > .groups > .group > .items > .item > .right > .top > .left > .category { color: #494949; }
.section-cart > .left > .groups > .group > .items > .item > .right > .price { display: flex; align-items: flex-end; gap: 16px; margin-top: 8px; }
.section-cart > .left > .groups > .group > .items > .item > .right > .price > .lowest { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #494949; }
.section-cart > .left > .groups > .group > .items > .item > .right > .price > .lowest > span { text-decoration: line-through; }
.section-cart > .left > .groups > .group > .items > .item > .right > .price > .lowest svg { width: 18px; height: 18px; }
.section-cart > .left > .groups > .group > .items > .item > .right > .price > .total { font-weight: 600; color: #6b27ff; }
.section-cart > .left > .groups > .group > .items > .item .calories-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; }
.section-cart > .left > .groups > .group > .items > .item .calories-row .calories { background-color: #fff; padding: 8px 12px; border-radius: 8px; flex-shrink: 0; }
.section-cart > .left > .groups > .group > .items > .item .calories-row > .info { display: flex; gap: 8px; align-items: center; }
.section-cart > .left > .groups > .group > .items > .item .calories-row > .info > svg { flex-shrink: 0; }
.section-cart > .left > .groups > .group > .items > .item .calories-row > .info > .right { color: #494949; }
.section-cart > .left > .groups > .group > .items > .item .calories-row > .info > .right > .bold { font-weight: 700; }
.section-cart > .left > .groups > .group > .items > .item > .mobile { display: none; }
.section-cart > .left > .groups > .group > .items > .item > .mobile > .spaced svg { display: none; }
.section-cart > .left > .groups > .group > .items > .item > .mobile > .spaced { flex-shrink: 0; }
.section-cart > .right { position: sticky; top: 120px; height: fit-content; }
.section-cart > .right > .top { border-radius: 40px; border: 1px solid #6b27ff; padding: 32px; }
.section-cart > .right > .top > h2 { color: #494949; font-weight: 900; padding-left: 24px; }
.section-cart > .right > .top > .total { display: flex; justify-content: space-between; align-items: baseline; padding: 0px 24px; }
.section-cart > .right > .top > .total > .price { color: #6b27ff; font-weight: 700; }
.section-cart > .right > .top > .form-group { margin-top: 30px; }
.section-cart > .right > .top > .form-group .input-custom-checkbox { width: 20px; height: 20px; margin-top: 5px; }
.section-cart > .right > .top > .form-group .input-custom-checkbox::after { width: calc(100% - 10px); height: calc(100% - 10px); }
.section-cart > .right > .top > .form-group .checkbox-text { color: #8f8f8f; }
.section-cart > .right > .top > .form-group .validation-info { display: none; }
.section-cart > .right > .top > .form-group.invalid .validation-info { display: block; color: #ff0000; padding-left: 32px; }
.section-cart > .right > .top > a { max-width: 100%; margin-top: 24px; }
.section-cart > .right > .bottom { display: flex; flex-direction: column; gap: 16px; padding: 16px 32px; background-color: #f5f5f5; border-radius: 40px; color: #494949; margin-top: 24px; }
.section-cart > .right > .bottom > .break { height: 1px; background-color: #49494933; }
.section-cart > .right > .bottom > .element { display: flex; align-items: center; gap: 16px; font-weight: 600; padding: 0px 30px; }
.section-cart > .right > .bottom > .element > .pfp { width: 48px; height: 48px; background-color: #efe7ff; border-radius: 9999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #6b27ff; }
.section-cart > .right > .bottom > .element > .right > .name { color: #6b27ff; }
.section-cart > .right > .bottom > .element > .btn-coupon { display: flex; align-items: center; gap: 16px; font-weight: 700; padding: 16px 30px; width: 100%; cursor: pointer }
.section-cart > .right > .bottom > .element > .btn-coupon.inactive { display: none; }
.section-cart > .right > .bottom > .element > .btn-coupon > svg { flex-shrink: 0; }
.section-cart > .right > .bottom > .element > .input-coupon { display: none; align-items: center; gap: 10px; background-color: #fff; padding: 13px 20px; border-radius: 9999px; width: 100%; }
.section-cart > .right > .bottom > .element > .input-coupon.active { display: flex; }
.section-cart > .right > .bottom > .element > .input-coupon > form { display: flex; width: 100%; }
.section-cart > .right > .bottom > .element > .input-coupon > form > input { width: 100%; outline: none; border: none; color: #49494980 }
.section-cart > .right > .bottom > .element > .input-coupon > form > input::placeholder { color: #49494980 }
.section-cart > .right > .bottom > .element > .input-coupon > form > .badge { font-weight: 700; color: #fff; background-color: #49494980; padding: 5px 10px; outline: none; border: none; border-radius: 9999px; cursor: not-allowed; }
.section-cart > .right > .bottom > .element > .input-coupon > form > input:not(:placeholder-shown) ~ .badge { background-color: #6b27ff; cursor: pointer; }
.section-cart > .right > .bottom > .element > .curr-coupon {display: none;}
.section-cart > .right > .bottom > .element > .curr-coupon.active {display: flex; align-items: center; gap: 12px;}
.section-cart > .right > .bottom > .element > .curr-coupon > a:hover svg rect { fill: #6B27FF; }
.section-cart > .right > .bottom > .element > .curr-coupon > a:hover svg path { fill: #fff; }
.section-cart > .right > .bottom > .element > .curr-coupon > a:hover svg g { opacity: 1.0; }

@media (max-width: 1600px) {
    .section-cart { grid-template-columns: 1fr 450px; }
    .section-cart > .left > .groups > .group > .items > .item { gap: 30px; }
    .section-cart > .right > .top { padding: 24px; }
    .section-cart > .right > .bottom { padding: 16px 24px; }
}

@media (max-width: 1500px) {
    .section-cart > .left > .groups > .group > .items > .item { gap: 5px 20px; }
}

@media (max-width: 1400px) {
    .section-cart { grid-template-columns: 1fr 400px; }
    .section-cart > .left > .groups > .group > .items > .item { grid-template-columns: 170px 1fr; }
    .section-cart > .left > .groups > .group > .items > .item > picture > img { width: 100%; height: auto; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row.desktop { display: none; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row.mobile { display: flex; grid-column: span 2; gap: 10px; }
}

@media (max-width: 1100px) {
    .section-cart > .left > .groups > .group > .items > .item .calories-row > .info > svg { display: none; }
    .section-cart > .left > .groups > .group > .items > .item > .right > .top { gap: 40px; }
    .section-cart > .left > .groups > .group > .items > .item > .right > .price { flex-direction: column-reverse; align-items: flex-start; gap: 0px; }
}

@media (max-width: 1000px) {
    .section-cart { grid-template-columns: 1fr 350px; }
    .section-cart > .left > .groups > .group > .items > .item > .right > .top { gap: 10px; }
    .section-cart > .right > .top { padding: 16px; }
    .section-cart > .right > .bottom { padding: 12px 16px; }
    .section-cart > .right > .bottom > .element > .btn-coupon { padding: 16px 10px; }
}

@media all and (max-width: 900px) {
    .section-cart > .left > .groups > .group > .items > .item { grid-template-columns: 1fr; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row.mobile { grid-column: auto; flex-direction: column; align-items: flex-start; }
}

@media all and (max-width: 800px) {
    .section-cart { margin-top: 20px; order: 0; grid-template-columns: 1fr; }
    .section-cart > .left > .groups > .group > .items > .item { grid-template-columns: 200px 1fr; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row > .info > svg { display: block; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row.mobile { grid-column: span 2;}
}

@media all and (max-width: 600px) {
    .section-cart > .left > .groups > .group > .items > .item { grid-template-columns: 1fr; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row.mobile { grid-column: auto; } 
    .section-cart > .left > .groups > .group > .items > .item > .right > .top > .left { width: 100%; }
    .section-cart > .left > .groups > .group > .items > .item > .right > .top > a { display: none; }
    .section-cart > .left > .groups > .group > .items > .item > .right > .top > a > svg { display: none; }
    .section-cart > .left > .groups > .group > .items > .item > .mobile > .spaced svg { display: block; }
    .section-cart > .left > .groups > .group > .items > .item > .mobile > .spaced { width: 100%; display: flex; justify-content: space-between; align-items: center; }
}

@media all and (max-width: 450px) {
    .section-cart > .left > .groups { margin-top: 10px; }
    .section-cart > .left > .groups > .group > .provider { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
    .section-cart > .left > .groups > .group > .items > .item .calories-row > .info > svg { display: none; }
    .section-cart > .right > .bottom > .element { padding: 0px 10px; }
    .section-cart > .right > .bottom > .element > .btn-coupon { padding: 12px 20px; }
}