/* =========================================================
   MC2 DELIVERY — carrinho.css
   FASE 4 — PADRONIZAÇÃO VISUAL
   Cores, raios e sombras usam o Design System global.
========================================================= */

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

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

.mc2-carrinho-page {


min-height: 70vh;

padding:
    35px
    20px
    60px;

background:
    var(--mc2-bg, #F9FAFB);


}

.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:
    var(--mc2-info);

font-size:
    12px;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    0.07em;


}

.mc2-carrinho-header h1 {


margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    32px;

line-height:
    1.2;


}

.mc2-carrinho-header p {


margin:
    8px 0 0;

color:
    var(--mc2-text-secondary, #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 var(--mc2-info-border);

border-radius:
    var(--mc2-radius-pill, 999px);

background:
    var(--mc2-danger-soft);

color:
    var(--mc2-info-hover);

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:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    0.05em;


}

.mc2-carrinho-section-title h2 {


margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    19px;


}

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

.mc2-carrinho-list {


overflow:
    hidden;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

box-shadow:
    var(--mc2-shadow-sm);


}

/* =========================================================
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 var(--mc2-border-soft, #EEF0F3);


}

.mc2-carrinho-item:last-child {


border-bottom:
    0;


}

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

.mc2-carrinho-item-image {


width:
    88px;

height:
    88px;

overflow:
    hidden;

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-surface-soft, #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:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info, #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:
    var(--mc2-text, #111827);

font-size:
    15px;

font-weight:
    800;

line-height:
    1.35;

text-overflow:
    ellipsis;

white-space:
    nowrap;


}

.mc2-carrinho-item-unit {


display:
    block;

color:
    var(--mc2-text-secondary, #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:
    var(--mc2-danger-soft);

color:
    var(--mc2-info-hover);

font-size:
    12px;

font-weight:
    900;


}

.mc2-carrinho-item-subtotal {


color:
    var(--mc2-text, #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:
    var(--mc2-radius-sm, 8px);

color:
    var(--mc2-text-secondary, #6B7280);

text-decoration:
    none;

font-size:
    11px;

font-weight:
    700;

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


}

.mc2-carrinho-remove:hover {


background:
    var(--mc2-danger-soft, #FEF2F2);

color:
    var(--mc2-danger, #B91C1C);


}

/* =========================================================
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 var(--mc2-info-border, #DBEAFE);

border-radius:
    var(--mc2-radius-md, 12px);

background: 
    var(--mc2-info);

color:
    var(--mc2-surface);

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:
    var(--mc2-info-hover);

border-color:
    var(--mc2-info-border);


}

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

.mc2-carrinho-summary {


position:
    sticky;

top:
    20px;

overflow:
    hidden;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

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


}

.mc2-carrinho-summary-header {


padding:
    20px 20px 15px;

border-bottom:
    1px solid var(--mc2-border-soft, #EEF0F3);


}

.mc2-carrinho-summary-header span {


display:
    block;

margin-bottom:
    4px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    0.05em;


}

.mc2-carrinho-summary-header h2 {


margin:
    0;

color:
    var(--mc2-text, #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:
    var(--mc2-text-secondary, #6B7280);

font-size:
    13px;


}

.mc2-carrinho-summary-row strong {


color:
    var(--mc2-text, #111827);

font-size:
    13px;

font-weight:
    800;

text-align:
    right;


}

.mc2-carrinho-summary-divider {


height:
    1px;

margin:
    4px 0;

background:
    var(--mc2-border-soft, #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:
    var(--mc2-text, #111827);

font-size:
    15px;

font-weight:
    800;


}

.mc2-carrinho-summary-total strong {


color:
    var(--mc2-info, #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:
    var(--mc2-radius-md, 12px);

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:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

box-shadow:
    0 5px 14px
    rgba(var(--mc2-info-rgb), 0.20);


}

.mc2-carrinho-button-checkout:hover {


background:
    var(--mc2-info-hover, #1D4ED8);

box-shadow:
    0 7px 18px
    rgba(var(--mc2-info-rgb), 0.26);


}

.mc2-carrinho-button-checkout strong {


font-size:
    20px;


}

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

.mc2-carrinho-summary-footer p {


margin:
    11px 0 0;

color:
    var(--mc2-text-muted, #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:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-xl, 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:
    var(--mc2-info-soft, #EFF6FF);

font-size:
    34px;


}

.mc2-carrinho-empty h2 {


margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    22px;


}

.mc2-carrinho-empty p {


max-width:
    430px;

margin:
    9px 0 22px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    14px;

line-height:
    1.6;


}

.mc2-carrinho-button-primary {


padding:
    0 18px;

background:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

box-shadow:
    0 5px 14px
    rgba(var(--mc2-info-rgb), 0.20);


}

.mc2-carrinho-button-primary:hover {


background:
    var(--mc2-info-hover, #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;

}


}