.shopping-cart-page {
    --cart-pink: #ff4f9a;
    --cart-pink-light: #ffd8e9;
    --cart-pink-soft: #fff0f7;
    --cart-blue: #5ca8ff;
    --cart-blue-light: #d9edff;
    --cart-blue-soft: #eff8ff;
    --cart-purple: #6952c8;
    --cart-text: #343070;
    --cart-muted: #77759a;
    --cart-border: #eeeaf7;
    --cart-white: #ffffff;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 35px 24px 65px;
    color: var(--cart-text);
    font-family: inherit;
}

.shopping-cart-page *,
.shopping-cart-page *::before,
.shopping-cart-page *::after {
    box-sizing: border-box;
}

.shopping-cart-page a {
    text-decoration: none;
}

.cart-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    color: var(--cart-muted);
    font-size: 13px;
}

    .cart-breadcrumb a {
        color: var(--cart-purple);
        transition: color .2s ease;
    }

        .cart-breadcrumb a:hover {
            color: var(--cart-pink);
        }

    .cart-breadcrumb span:last-child {
        color: var(--cart-text);
        font-weight: 700;
    }

.cart-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.cart-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--cart-pink);
    font-size: 13px;
    font-weight: 800;
}

.cart-page-header h1 {
    margin: 0 0 12px;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 900;
    color: var(--cart-text);
}

.cart-page-header p {
    margin: 0;
    color: var(--cart-muted);
    font-size: 14px;
    line-height: 1.9;
}

.cart-header-icon {
    width: 85px;
    height: 85px;
    flex: 0 0 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: var(--cart-pink);
    background: linear-gradient( 145deg, var(--cart-pink-soft), var(--cart-blue-soft) );
    font-size: 32px;
    transform: rotate(-5deg);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 25px;
}

.cart-items-section {
    min-width: 0;
}

.cart-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 23px 25px;
    margin-bottom: 16px;
    border: 1px solid var(--cart-border);
    border-radius: 25px;
    background: var(--cart-white);
}

    .cart-section-header h2 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 900;
    }

    .cart-section-header > div > span {
        color: var(--cart-muted);
        font-size: 12px;
    }

.clear-cart-form {
    margin: 0;
}

.clear-cart-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #ffe0e8;
    border-radius: 14px;
    color: #e34c76;
    background: #fff8fa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: .2s ease;
}

    .clear-cart-button:hover {
        background: #ffe9f0;
    }

.cart-items-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-item {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--cart-border);
    border-radius: 27px;
    background: var(--cart-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .cart-item:hover {
        border-color: #e1d9fa;
        box-shadow: 0 10px 30px rgba(75, 53, 132, .045);
    }

.cart-item-image {
    width: 115px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient( 145deg, var(--cart-pink-soft), var(--cart-blue-soft) );
}

    .cart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

.cart-no-image {
    color: var(--cart-blue);
    font-size: 32px;
}

.cart-item-info {
    min-width: 0;
}

.cart-item-name {
    margin: 0 0 13px;
    color: var(--cart-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.cart-item-code {
    margin-bottom: 10px;
    color: var(--cart-muted);
    font-size: 12px;
}

    .cart-item-code span {
        direction: ltr;
        unicode-bidi: plaintext;
        font-weight: 700;
    }

.cart-item-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 13px;
}

.cart-variant {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 11px;
    color: var(--cart-purple);
    background: #f6f3ff;
    font-size: 11px;
}

.cart-color-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
}

.cart-item-unit-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--cart-muted);
    font-size: 12px;
}

    .cart-item-unit-price strong {
        color: var(--cart-text);
        font-size: 14px;
    }

    .cart-item-unit-price span {
        font-size: 11px;
    }

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
}

.cart-item-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
}

    .cart-item-total > span {
        width: 100%;
        margin-bottom: 3px;
        color: var(--cart-muted);
        font-size: 11px;
    }

    .cart-item-total strong {
        color: var(--cart-pink);
        font-size: 20px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .cart-item-total small {
        color: var(--cart-muted);
        font-size: 11px;
    }

.cart-quantity-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.cart-quantity-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px;
    border: 1px solid #e9e5f5;
    border-radius: 15px;
    background: #fcfbff;
}

.quantity-button {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    color: var(--cart-purple);
    background: var(--cart-blue-soft);
    cursor: pointer;
    transition: .2s ease;
}

    .quantity-button:hover {
        color: #fff;
        background: var(--cart-blue);
    }

.cart-quantity-control input {
    width: 45px;
    min-width: 0;
    padding: 4px 0;
    border: none;
    outline: none;
    color: var(--cart-text);
    background: transparent;
    text-align: center;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    appearance: textfield;
    -moz-appearance: textfield;
}

    .cart-quantity-control input::-webkit-inner-spin-button,
    .cart-quantity-control input::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

.update-quantity-button {
    width: 100%;
    padding: 9px;
    border: 1px solid #e1dafa;
    border-radius: 12px;
    color: var(--cart-purple);
    background: #f7f4ff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

    .update-quantity-button:hover {
        color: #fff;
        background: var(--cart-purple);
    }

.remove-cart-form {
    margin: 0;
}

.remove-cart-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 12px;
    color: #dc5479;
    background: #fff4f7;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: .2s ease;
}

    .remove-cart-item:hover {
        background: #ffe3ec;
    }

.back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: var(--cart-purple);
    font-size: 13px;
    font-weight: 800;
}

    .back-to-shop:hover {
        color: var(--cart-pink);
    }

.cart-summary {
    position: sticky;
    top: 25px;
    padding: 25px;
    border: 1px solid #e8e1fa;
    border-radius: 30px;
    background: linear-gradient( 160deg, #fff 0%, #fff9fc 55%, #f5faff 100% );
    box-shadow: 0 15px 45px rgba(75, 53, 132, .06);
}

.cart-summary-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 28px;
}

.summary-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: var(--cart-blue);
    background: var(--cart-blue-soft);
    font-size: 20px;
}

.cart-summary-header h2 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 900;
}

.cart-summary-header p {
    margin: 0;
    color: var(--cart-muted);
    font-size: 11px;
}

.summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--cart-muted);
    font-size: 12px;
}

    .summary-row > strong {
        color: var(--cart-text);
        font-size: 13px;
        text-align: left;
    }

    .summary-row strong small {
        font-size: 10px;
        font-weight: 400;
    }

.shipping-note {
    color: var(--cart-blue);
    font-size: 11px;
}

.summary-divider {
    height: 1px;
    margin: 23px 0;
    background: repeating-linear-gradient( to left, #e7e1f5 0, #e7e1f5 5px, transparent 5px, transparent 10px );
}

.summary-total {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

    .summary-total > span {
        color: var(--cart-text);
        font-size: 13px;
        font-weight: 800;
    }

    .summary-total > div {
        display: flex;
        align-items: baseline;
        gap: 7px;
    }

    .summary-total strong {
        color: var(--cart-pink);
        font-size: 29px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .summary-total > div > span {
        color: var(--cart-muted);
        font-size: 12px;
    }

.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 55px;
    padding: 14px;
    border: none;
    border-radius: 18px;
    color: #fff !important;
    background: linear-gradient(110deg, var(--cart-pink), #ff79b2);
    box-shadow: 0 8px 20px rgba(255, 79, 154, .2);
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .checkout-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(255, 79, 154, .3);
    }

.cart-security-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cart-border);
}

    .cart-security-note > i {
        margin-top: 2px;
        color: #56b89b;
        font-size: 20px;
    }

    .cart-security-note > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cart-security-note strong {
        font-size: 12px;
    }

    .cart-security-note span {
        color: var(--cart-muted);
        font-size: 11px;
        line-height: 1.9;
    }

.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 25px;
    border: 1px dashed #e5ddf7;
    border-radius: 35px;
    background: linear-gradient( 145deg, #fff9fc, #f7fbff );
    text-align: center;
}

.empty-cart-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 35px;
    color: var(--cart-pink);
    background: linear-gradient( 145deg, var(--cart-pink-light), var(--cart-blue-light) );
    font-size: 42px;
}

.empty-cart h2 {
    margin: 0 0 14px;
    font-size: 23px;
    font-weight: 900;
}

.empty-cart p {
    max-width: 450px;
    margin: 0 0 25px;
    color: var(--cart-muted);
    font-size: 13px;
    line-height: 2.1;
}

.continue-shopping-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 13px 24px;
    border-radius: 16px;
    color: #fff !important;
    background: linear-gradient(110deg, var(--cart-blue), #7bbcff);
    box-shadow: 0 8px 20px rgba(92, 168, 255, .2);
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

    .continue-shopping-button:hover {
        transform: translateY(-2px);
    }

.cart-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px 18px;
    border-radius: 15px;
    font-size: 13px;
}

.cart-alert-success {
    color: #247c60;
    background: #eafaf4;
    border: 1px solid #c9f0e1;
}

.cart-alert-error {
    color: #b33e5a;
    background: #fff0f4;
    border: 1px solid #ffd5df;
}

@media (max-width: 1100px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 18px;
    }

    .cart-item {
        grid-template-columns: 95px minmax(0, 1fr) 155px;
        gap: 15px;
        padding: 16px;
    }

    .cart-item-image {
        width: 95px;
        height: 110px;
    }

    .cart-item-total strong {
        font-size: 18px;
    }

    .cart-summary {
        padding: 21px;
    }
}

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

    .cart-summary {
        position: static;
        order: -1;
    }

    .cart-summary-header {
        margin-bottom: 22px;
    }

    .summary-total {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .shopping-cart-page {
        padding: 22px 13px 40px;
    }

    .cart-breadcrumb {
        margin-bottom: 22px;
        font-size: 11px;
    }

    .cart-page-header {
        margin-bottom: 24px;
    }

        .cart-page-header h1 {
            font-size: 25px;
        }

        .cart-page-header p {
            max-width: 290px;
            font-size: 12px;
        }

    .cart-header-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 21px;
        font-size: 23px;
    }

    .cart-section-header {
        padding: 17px;
        border-radius: 21px;
    }

        .cart-section-header h2 {
            font-size: 15px;
        }

    .clear-cart-button {
        padding: 9px;
        font-size: 10px;
    }

    .cart-item {
        grid-template-columns: 85px minmax(0, 1fr);
        gap: 13px;
        padding: 14px;
        border-radius: 22px;
    }

    .cart-item-image {
        width: 85px;
        height: 95px;
        grid-row: 1;
    }

    .cart-item-info {
        grid-column: 2;
        grid-row: 1;
    }

    .cart-item-name {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .cart-item-code {
        margin-bottom: 7px;
        font-size: 10px;
    }

    .cart-item-variants {
        gap: 5px;
        margin-bottom: 8px;
    }

    .cart-variant {
        padding: 5px 7px;
        font-size: 10px;
    }

    .cart-item-unit-price {
        font-size: 10px;
    }

        .cart-item-unit-price strong {
            font-size: 12px;
        }

    .cart-item-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 12px;
        padding-top: 13px;
        border-top: 1px solid var(--cart-border);
    }

    .cart-item-total {
        grid-column: 1 / -1;
    }

        .cart-item-total > span {
            width: auto;
            margin: 0;
        }

        .cart-item-total strong {
            font-size: 20px;
        }

    .cart-quantity-form {
        grid-column: 1;
        grid-row: 2;
    }

    .remove-cart-form {
        grid-column: 2;
        grid-row: 2;
    }

    .update-quantity-button {
        font-size: 10px;
    }

    .cart-summary {
        padding: 20px;
        border-radius: 25px;
    }

    .summary-total strong {
        font-size: 25px;
    }

    .empty-cart {
        padding: 50px 20px;
        border-radius: 27px;
    }

    .empty-cart-icon {
        width: 85px;
        height: 85px;
        border-radius: 28px;
        font-size: 34px;
    }

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

    .empty-cart p {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .cart-item {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
    }

    .cart-item-image {
        width: 70px;
        height: 80px;
    }

    .cart-item-name {
        font-size: 12px;
    }

    .cart-quantity-control {
        gap: 2px;
    }

    .quantity-button {
        width: 26px;
        height: 28px;
        flex-basis: 26px;
    }

    .cart-quantity-control input {
        width: 30px;
        font-size: 12px;
    }
}