/* ==========================================================================
   Cart page (cart.html) + order summary box (also used on checkout.html)
   ========================================================================== */

.cart-page { padding-block: 2.5rem 5rem; }
.cart-page__grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .cart-page__grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: 4rem; align-items: start; } }

.cart-ship { padding: 1rem 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--iron); }
.cart-page__head { display: none; justify-content: space-between; margin-top: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 768px) { .cart-page__head { display: flex; } }
.cart-page__lines .line { padding-block: 1.5rem; }
.cart-page__lines .line + .line { border-top: 1px solid var(--line-dark); }
.cart-page__lines .line__img { width: 6.5rem; }
.cart-page__lines .line__name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.cart-page__lines .line__price { font-size: 1.1rem; }
.cart-page__lines .qty button { width: 2.75rem; height: 2.75rem; }
@media (min-width: 768px) { .cart-page__lines .line__img { width: 8rem; } }
.cart-page__lines { border-bottom: 1px solid var(--line-dark); }
.cart-page__back { display: inline-block; margin-top: 1.5rem; color: var(--ash); }

/* Order summary */
.summary { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--iron); }
@media (min-width: 992px) { .summary { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.summary__title { font-size: 2rem; }
.summary__rows { display: grid; gap: 0.75rem; }
.summary__rows > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.summary__rows dt { color: var(--ash); }
.summary__rows dd { font-family: var(--font-mono); }
.summary__total { padding-top: 1rem; border-top: 1px solid var(--line-dark); font-size: 1.15rem !important; }
.summary__total dt { color: var(--bone) !important; font-weight: 600; }
.coupon { display: flex; gap: 0.5rem; }
.coupon .field { min-height: 2.6rem; padding-block: 0.5rem; font-size: 0.9rem; }
.coupon__msg { min-height: 1.4em; margin-top: -0.75rem; }
.coupon__msg.is-ok { color: var(--ember); }
.coupon__msg.is-bad { color: #ff8a8a; }
.summary__trust { display: grid; gap: 0.5rem; }
.summary__trust li { display: flex; align-items: center; gap: 0.5rem; }

/* Empty */
.cart-empty { display: grid; justify-items: center; gap: 1.25rem; padding-block: 4rem; text-align: center; }
.cart-empty__title { font-size: clamp(3rem, 8vw, 6rem); }

/* Let grid columns shrink on very small phones */
.cart-page__grid > * { min-width: 0; }
@media (max-width: 380px) {
  .cart-page__lines .line__img { width: 5rem; }
  .cart-page__lines .qty button { width: 2.25rem; height: 2.25rem; }
}