/* =========================================================
   PÁGINA DEDICADA DO CARRINHO
   Reaproveita os componentes visuais do antigo painel flutuante
   (.cart-item, .cart-total, .cart-checkout, .cart-clear — ver
   header.css) num layout de página cheia em vez de um popover
   estreito de 360px.
========================================================= */

.cart-page__layout{

    display:grid;

    grid-template-columns:1fr min(320px, 100%);

    gap:28px;

    align-items:start;

}

/* Sem itens no carrinho: some com a coluna de resumo (fica só o
   estado vazio, centralizado). */
.cart-page__layout:has(#cart-items:empty){

    grid-template-columns:1fr;

}

/* A lista de itens ocupa a página inteira — sem o limite de "3 itens
   visíveis com scroll interno" do painel estreito do header. */
.cart-page .cart-items{

    max-height:none;

    overflow:visible;

    padding-right:0;

}

.cart-page .cart-item{

    padding:16px 18px;

}

.cart-page__summary{

    position:sticky;

    top:120px;

    padding:22px;

    border-radius:var(--radius-md);

    background:var(--panel);

    border:1px solid var(--border);

}

.cart-page__summary[hidden]{

    display:none;

}

.cart-page .cart-empty{

    padding:60px 0;

}

.cart-page .cart-empty .btn{

    margin-top:8px;

}

@media(max-width:820px){

    .cart-page__layout{

        grid-template-columns:1fr;

    }

    .cart-page__summary{

        position:static;

    }

}