/* =========================================================
   CARRINHO / PEDIDO
========================================================= */

.cart-page { padding-block: var(--space-7) var(--space-10); }
.cart-page h1 { margin-bottom: var(--space-2); }
.cart-page__lead { margin-bottom: var(--space-7); }
.cart-page__actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.cart-clear { min-height: 44px; color: var(--color-brand); font-size: var(--fs-small); font-weight: 700; }

.cart-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; gap: var(--space-9); }
}

.cart-list { display: flex; flex-direction: column; gap: var(--space-4); }

.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.cart-item__media { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body { display: flex; flex-direction: column; gap: 4px; }
.cart-item__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-cocoa); }
.cart-item__variant { font-size: var(--fs-small); color: var(--color-text-soft); }
.cart-item__unit { font-size: var(--fs-xs); color: var(--color-text-soft); }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); flex-wrap: wrap; gap: var(--space-3); }
.cart-item__price { font-size: 1.2rem; font-weight: 800; color: var(--color-brand); }
.cart-item__remove { font-size: var(--fs-xs); color: var(--color-text-soft); font-weight: 600; }
.cart-item__remove:hover { color: var(--color-brand); }
.cart-item .qty-stepper button { width: 36px; height: 36px; }

.cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
}
.cart-summary h2 { font-size: var(--fs-h3); margin-bottom: var(--space-5); }
.cart-summary__row { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--color-text-soft); padding-block: var(--space-2); }
.cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-4); margin-top: var(--space-3); border-top: 1px solid var(--color-border); }
.cart-summary__total strong { font-family: var(--font-body); font-size: 1.4rem; font-weight: 800; color: var(--color-brand); }
.cart-summary__notice { font-size: var(--fs-xs); color: var(--color-text-soft); margin-top: var(--space-5); line-height: var(--lh-normal); }
.cart-summary .btn { margin-top: var(--space-5); }
.cart-summary__continue { display: block; text-align: center; margin-top: var(--space-4); }
.cart-after-checkout { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-blush-soft); border: 1px solid var(--color-brand-soft); }
.cart-after-checkout p { font-size: var(--fs-xs); margin-top: 4px; }
.cart-after-checkout > div { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cart-after-checkout .btn { margin-top: 0; }
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(30, 20, 18, .55); }
.modal__dialog { position: relative; width: min(100%, 440px); padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal__dialog h2 { font-size: var(--fs-h3); }
.modal__dialog p { margin-top: var(--space-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
.btn--danger { background: var(--color-brand); color: white; }
@media (max-width: 480px) {
  .cart-item { grid-template-columns: 72px 1fr; padding: var(--space-3); }
  .cart-item__media { width: 72px; height: 72px; }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; }
}