/* ==========================================================================
   Cart: cart-head · cart-main (empty state, or items + summary with promo code and checkout, or the free-order
   confirmation). Rendered from the LexHost cart by js/cart.js; promo + checkout by cart/script.js.
   ========================================================================== */

.cart-head { background: var(--color-hero-bg); }
.cart-head h1 { font-size: var(--text-4xl); margin-block: var(--space-3) var(--space-1); }

.cart-main__grid { display: grid; gap: var(--space-6); align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4);
  background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.cart-item__img { width: calc(var(--space-20) * 1.2); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); }
.cart-item__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cart-item__name { font-size: var(--text-lg); }
.cart-item__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-item__desc { font-size: var(--text-sm); color: var(--color-text); }
.cart-item__confirm { grid-column: 1 / -1; }
/* No product image (e.g. product packs): the text takes the image's column too */
.cart-item:has(> .cart-item__img[hidden]) .cart-item__info { grid-column: 1 / 3; }
.cart-item__remove { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--color-danger); cursor: pointer; }
.cart-item__remove:hover { text-decoration: underline; }
.cart-item__qty { justify-self: start; }
.cart-item__error { grid-column: 1 / -1; }
.cart-item[aria-busy="true"] { opacity: 0.7; }
.cart-item__kind { margin-bottom: var(--space-1); }
.cart-item__units { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.cart-item__total { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-heading); }

.cart-summary {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.cart-summary h2 { font-size: var(--text-2xl); }
.cart-summary__rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.cart-summary__rows div { display: flex; justify-content: space-between; }
.cart-summary__rows dd { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); }
.cart-summary__rows dd { font-size: var(--text-xl); }
.cart-summary__rows [data-kind="discount"] dt, .cart-summary__rows [data-kind="discount"] dd { color: var(--color-success); }
.cart-summary__rows [data-kind="total"] { padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); }
.cart-summary__rows [data-kind="total"] dt { font-weight: var(--weight-medium); color: var(--color-heading); }
.cart-summary__rows [data-kind="total"] dd { font-size: var(--text-2xl); }

/* Promo code: form, or the code on the cart */
.cart-promo { padding-block: var(--space-4); border-block: var(--border-width) solid var(--color-border); }
.cart-promo__form { display: flex; flex-direction: column; gap: var(--space-2); }
.cart-promo__row { display: flex; gap: var(--space-2); }
.cart-promo__row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.cart-promo__row .input::placeholder { text-transform: none; }
.cart-promo__applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cart-promo__code { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-heading); }
.cart-promo__code .icon { color: var(--color-success); }
.cart-promo__code span { color: var(--color-success); }
.cart-promo__message { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-promo .add-status { flex-basis: 100%; }

/* Checkout: ship-to and payment choice cards, note, Place order */
.cart-checkout, .cart-checkout__details { display: flex; flex-direction: column; gap: var(--space-4); }
.cart-checkout__choices { display: grid; gap: var(--space-2); }
.cart-checkout__add { justify-self: start; margin-top: var(--space-2); font-size: var(--text-sm); }
.cart-checkout .choice-card { grid-template-columns: auto minmax(0, 1fr); }
.cart-checkout__secure { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

/* Free order placed: the confirmation replaces the cart (and the empty state behind it) */
.cart-main[data-state="placed"] .cart-empty:not(.cart-placed) { display: none; }
.cart-placed .icon-circle { color: var(--color-success); }
.cart-placed__items { width: 100%; text-align: left; }
.cart-placed__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.cart-summary__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-summary__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Empty cart */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--container-narrow); margin-inline: auto;
  padding: var(--space-10) var(--space-6); text-align: center;
  background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.cart-empty h2 { font-size: var(--text-2xl); }
.cart-empty p { color: var(--color-text-muted); }

@media (min-width: 640px) {
  .cart-item { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .cart-item__img { grid-column: 1; }
  .cart-item__info { grid-column: 2; }
  .cart-item__qty { grid-column: 3; }
  .cart-item__total { grid-column: 4; }
}
@media (min-width: 1024px) {
  .cart-main__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-10); }
  .cart-summary { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
}