/* =========================================================
MC2 DELIVERY
CARRINHO
========================================================= */

/* =========================================================
PÁGINA
========================================================= */

.mc2-carrinho-page {


min-height: 70vh;

padding:
    35px
    20px
    60px;

background:
    #f8fafc;


}

.mc2-carrinho-container {


width:
    min(
        1100px,
        100%
    );

margin:
    0 auto;


}

/* =========================================================
CABEÇALHO
========================================================= */

.mc2-carrinho-header {


display: flex;

align-items: flex-end;

justify-content:
    space-between;

gap: 20px;

margin-bottom:
    28px;


}

.mc2-carrinho-eyebrow {


display: inline-block;

margin-bottom:
    7px;

color:
    #2563eb;

font-size:
    12px;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    0.07em;


}

.mc2-carrinho-header h1 {


margin:
    0;

color:
    #111827;

font-size:
    32px;

line-height:
    1.2;


}

.mc2-carrinho-header p {


margin:
    8px 0 0;

color:
    #6b7280;

font-size:
    14px;


}

.mc2-carrinho-count {


display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

min-height:
    38px;

padding:
    0 14px;

border:
    1px solid #dbeafe;

border-radius:
    999px;

background:
    #eff6ff;

color:
    #1d4ed8;

font-size:
    12px;

font-weight:
    800;

white-space:
    nowrap;


}

/* =========================================================
LAYOUT
========================================================= */

.mc2-carrinho-layout {


display:
    grid;

grid-template-columns:
    minmax(0, 1fr)
    340px;

align-items:
    start;

gap:
    25px;


}

/* =========================================================
PRODUTOS
========================================================= */

.mc2-carrinho-products {


min-width:
    0;


}

.mc2-carrinho-section-title {


margin-bottom:
    12px;


}

.mc2-carrinho-section-title span {


display:
    block;

margin-bottom:
    4px;

color:
    #6b7280;

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    0.05em;


}

.mc2-carrinho-section-title h2 {


margin:
    0;

color:
    #111827;

font-size:
    19px;


}

/* =========================================================
LISTA
========================================================= */

.mc2-carrinho-list {


overflow:
    hidden;

background:
    #ffffff;

border:
    1px solid #e5e7eb;

border-radius:
    16px;

box-shadow:
    0 5px 18px
    rgba(
        15,
        23,
        42,
        0.05
    );


}

/* =========================================================
ITEM
========================================================= */

.mc2-carrinho-item {


display:
    grid;

grid-template-columns:
    88px
    minmax(0, 1fr)
    auto;

align-items:
    center;

gap:
    16px;

padding:
    18px;

border-bottom:
    1px solid #eef0f3;


}

.mc2-carrinho-item:last-child {


border-bottom:
    0;


}

/* =========================================================
IMAGEM
========================================================= */

.mc2-carrinho-item-image {


width:
    88px;

height:
    88px;

overflow:
    hidden;

border-radius:
    13px;

background:
    #f3f4f6;


}

.mc2-carrinho-item-image img {


display:
    block;

width:
    100%;

height:
    100%;

object-fit:
    cover;


}

.mc2-carrinho-item-placeholder {


display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    100%;

height:
    100%;

background:
    #eff6ff;

color:
    #2563eb;

font-size:
    30px;


}

/* =========================================================
CONTEÚDO
========================================================= */

.mc2-carrinho-item-content {


min-width:
    0;


}

.mc2-carrinho-item-content h3 {


margin:
    0 0 5px;

overflow:
    hidden;

color:
    #111827;

font-size:
    15px;

font-weight:
    800;

line-height:
    1.35;

text-overflow:
    ellipsis;

white-space:
    nowrap;


}

.mc2-carrinho-item-unit {


display:
    block;

color:
    #6b7280;

font-size:
    12px;


}

.mc2-carrinho-item-meta {


display:
    flex;

align-items:
    center;

gap:
    10px;

margin-top:
    10px;


}

.mc2-carrinho-item-quantity {


display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

min-width:
    35px;

min-height:
    26px;

padding:
    0 8px;

border-radius:
    7px;

background:
    #eff6ff;

color:
    #1d4ed8;

font-size:
    12px;

font-weight:
    900;


}

.mc2-carrinho-item-subtotal {


color:
    #111827;

font-size:
    14px;

font-weight:
    900;


}

/* =========================================================
REMOVER
========================================================= */

.mc2-carrinho-item-action {


align-self:
    center;


}

.mc2-carrinho-remove {


display:
    inline-flex;

align-items:
    center;

gap:
    5px;

padding:
    8px 10px;

border-radius:
    8px;

color:
    #6b7280;

text-decoration:
    none;

font-size:
    11px;

font-weight:
    700;

transition:
    background
    0.2s ease,
    color
    0.2s ease;


}

.mc2-carrinho-remove:hover {


background:
    #fef2f2;

color:
    #dc2626;


}

/* =========================================================
CONTINUAR COMPRANDO
========================================================= */

.mc2-carrinho-continue {


margin-top:
    14px;


}

.mc2-carrinho-continue-link {


display:
    inline-flex;

align-items:
    center;

min-height:
    40px;

padding:
    0 13px;

border:
    1px solid #dbeafe;

border-radius:
    9px;

background:
    #ffffff;

color:
    #1d4ed8;

text-decoration:
    none;

font-size:
    12px;

font-weight:
    800;

transition:
    background
    0.2s ease,
    border-color
    0.2s ease;


}

.mc2-carrinho-continue-link:hover {


background:
    #eff6ff;

border-color:
    #bfdbfe;


}

/* =========================================================
RESUMO
========================================================= */

.mc2-carrinho-summary {


position:
    sticky;

top:
    20px;

overflow:
    hidden;

background:
    #ffffff;

border:
    1px solid #e5e7eb;

border-radius:
    16px;

box-shadow:
    0 8px 25px
    rgba(
        15,
        23,
        42,
        0.07
    );


}

.mc2-carrinho-summary-header {


padding:
    20px 20px 15px;

border-bottom:
    1px solid #eef0f3;


}

.mc2-carrinho-summary-header span {


display:
    block;

margin-bottom:
    4px;

color:
    #6b7280;

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    0.05em;


}

.mc2-carrinho-summary-header h2 {


margin:
    0;

color:
    #111827;

font-size:
    19px;


}

/* =========================================================
RESUMO BODY
========================================================= */

.mc2-carrinho-summary-body {


padding:
    8px 20px;


}

.mc2-carrinho-summary-row {


display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    15px;

padding:
    12px 0;


}

.mc2-carrinho-summary-row span {


color:
    #6b7280;

font-size:
    13px;


}

.mc2-carrinho-summary-row strong {


color:
    #111827;

font-size:
    13px;

font-weight:
    800;

text-align:
    right;


}

.mc2-carrinho-summary-divider {


height:
    1px;

margin:
    4px 0;

background:
    #eef0f3;


}

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

.mc2-carrinho-summary-total {


display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    15px;

padding:
    15px 0 17px;


}

.mc2-carrinho-summary-total span {


color:
    #111827;

font-size:
    15px;

font-weight:
    800;


}

.mc2-carrinho-summary-total strong {


color:
    #2563eb;

font-size:
    21px;

font-weight:
    900;


}

/* =========================================================
FOOTER DO RESUMO
========================================================= */

.mc2-carrinho-summary-footer {


padding:
    0 20px 20px;


}

.mc2-carrinho-button {


display:
    flex;

align-items:
    center;

justify-content:
    center;

min-height:
    48px;

border-radius:
    10px;

text-decoration:
    none;

font-size:
    13px;

font-weight:
    900;

transition:
    transform
    0.2s ease,
    box-shadow
    0.2s ease,
    background
    0.2s ease;


}

.mc2-carrinho-button:hover {


transform:
    translateY(-1px);


}

/* =========================================================
BOTÃO CHECKOUT
========================================================= */

.mc2-carrinho-button-checkout {


justify-content:
    space-between;

padding:
    0 16px;

background:
    #2563eb;

color:
    #ffffff;

box-shadow:
    0 5px 14px
    rgba(
        37,
        99,
        235,
        0.20
    );


}

.mc2-carrinho-button-checkout:hover {


background:
    #1d4ed8;

box-shadow:
    0 7px 18px
    rgba(
        37,
        99,
        235,
        0.26
    );


}

.mc2-carrinho-button-checkout strong {


font-size:
    20px;


}

/* =========================================================
TEXTO DE SEGURANÇA
========================================================= */

.mc2-carrinho-summary-footer p {


margin:
    11px 0 0;

color:
    #9ca3af;

font-size:
    10px;

line-height:
    1.5;

text-align:
    center;


}

/* =========================================================
CARRINHO VAZIO
========================================================= */

.mc2-carrinho-empty {


display:
    flex;

align-items:
    center;

flex-direction:
    column;

justify-content:
    center;

min-height:
    430px;

padding:
    40px 25px;

background:
    #ffffff;

border:
    1px solid #e5e7eb;

border-radius:
    18px;

box-shadow:
    0 6px 22px
    rgba(
        15,
        23,
        42,
        0.05
    );

text-align:
    center;


}

.mc2-carrinho-empty-icon {


display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    76px;

height:
    76px;

margin-bottom:
    18px;

border-radius:
    50%;

background:
    #eff6ff;

font-size:
    34px;


}

.mc2-carrinho-empty h2 {


margin:
    0;

color:
    #111827;

font-size:
    22px;


}

.mc2-carrinho-empty p {


max-width:
    430px;

margin:
    9px 0 22px;

color:
    #6b7280;

font-size:
    14px;

line-height:
    1.6;


}

.mc2-carrinho-button-primary {


padding:
    0 18px;

background:
    #2563eb;

color:
    #ffffff;

box-shadow:
    0 5px 14px
    rgba(
        37,
        99,
        235,
        0.20
    );


}

.mc2-carrinho-button-primary:hover {


background:
    #1d4ed8;


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {


.mc2-carrinho-layout {

    grid-template-columns:
        1fr;

}


.mc2-carrinho-summary {

    position:
        static;

}


}

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

@media (max-width: 600px) {


.mc2-carrinho-page {

    padding:
        25px
        15px
        45px;

}


.mc2-carrinho-header {

    align-items:
        flex-start;

    flex-direction:
        column;

    margin-bottom:
        22px;

}


.mc2-carrinho-header h1 {

    font-size:
        27px;

}


.mc2-carrinho-layout {

    gap:
        20px;

}


.mc2-carrinho-item {

    grid-template-columns:
        70px
        minmax(0, 1fr);

    gap:
        12px;

    padding:
        15px;

}


.mc2-carrinho-item-image {

    width:
        70px;

    height:
        70px;

}


.mc2-carrinho-item-action {

    grid-column:
        2;

    justify-self:
        start;

    margin-top:
        -3px;

}


.mc2-carrinho-remove {

    padding:
        6px 8px;

}


.mc2-carrinho-item-content h3 {

    white-space:
        normal;

}


.mc2-carrinho-summary-total strong {

    font-size:
        19px;

}


}

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

@media (max-width: 400px) {


.mc2-carrinho-page {

    padding-left:
        12px;

    padding-right:
        12px;

}


.mc2-carrinho-item {

    grid-template-columns:
        60px
        minmax(0, 1fr);

}


.mc2-carrinho-item-image {

    width:
        60px;

    height:
        60px;

}


.mc2-carrinho-item-meta {

    align-items:
        flex-start;

    flex-direction:
        column;

    gap:
        5px;

}


}