/* Shopping cart —
   single-step checkout, straight to Shopify's hosted checkout. */

.cart__label {
  font-size: var(--text-ui); /* nearest token to the drawn 15px Light */
  font-weight: var(--weight-light);
}

.cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line item whose variant has gone out of stock since it was added —
   stays in the cart (still removable) rather than vanishing silently;
   quantity dims via the same .u-dimmed convention as elsewhere on the
   site, price/subtotal show — instead of a stale number */
.cart__item--unavailable .cart__name,
.cart__item--unavailable .cart__remove {
  color: #d33;
}

.cart__item--unavailable .cart__remove-box {
  border-color: #d33;
}

/* photo left, price/qty column right, name under the photo,
   subtotal bottom right — matches the frame's rhythm */
.cart__item {
  position: relative; /* anchors .cart__remove */
  display: grid;
  grid-template-columns: 45% 1fr;
  grid-template-areas:
    'img meta'
    'name meta'
    'name subtotal';
  column-gap: 12%;
  align-items: start;
  padding-block: var(--space-1);
}

.cart__item:first-child,
.cart__item + .cart__item {
  border-top: var(--border-thin);
}

/* sized to its 26px visible box only, no hit-slop padding — deliberately
   under the 44px WCAG 2.5.5 target */
.cart__remove {
  position: absolute;
  top: var(--space-1); /* matches .cart__item's own top padding, so it lines up with .cart__img */
  right: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cart__remove-box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--border-thin); /* sharp square, no radius — deliberate */
}

.cart__img {
  grid-area: img;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: var(--space-2);
}

.cart__img--empty {
  background: #ececec;
}

.cart__meta {
  grid-area: meta;
  display: grid;
  justify-items: start;
  row-gap: var(--space-1);
}

.cart__price {
  margin-bottom: var(--space-1);
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-semibold);
}

.cart__stock {
  font-size: var(--text-caption);
  font-weight: var(--weight-light);
}

.cart__subtotal,
.cart__totals dd {
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
}

.cart__name {
  grid-area: name;
  align-self: end;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-ui); /* 16px SemiBold */
  font-weight: var(--weight-semibold);
}

.cart__subtotal {
  grid-area: subtotal;
  align-self: end;
  justify-self: start; /* lines up with .product__qty's own left edge above it */
  display: flex;
  justify-content: space-between;
  width: 100%; /* stretches to the column's full width so the value has room to push right */
}

.cart__subtotal .cart__label {
  margin-right: 0.5em;
}

/* the shared stepper at the cart's smaller size (104x41 vs 140x53) */
.cart .product__qty {
  width: 6.5rem;
  height: 2.5625rem;
  font-size: var(--text-body); /* 20px */
}

/* ---- user (signed-in greeting + address pre-fill, or Login) ---- */

.cart__user-section {
  padding-top: var(--space-2);
  border-top: var(--border-thin);
}

.cart__user-hint {
  margin-bottom: var(--space-2);
  font-size: 0.75rem; /* 12px, off the token scale */
  font-weight: var(--weight-light);
}

.cart__user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cart__newsletter-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-thin);
}

.cart__newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
}

.cart__newsletter input {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem; /* 4px, off the token scale */
  border: var(--border-thick);
  accent-color: var(--color-ink); /* native checked-state fill, browser default is gray/blue */
}

.cart__address-detail {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* stretches to the address text's own height (flex row default), cycle
   button at the top, edit pencil at the bottom */
.cart__address-controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 44px tap target (WCAG 2.5.5) around a smaller 20px glyph, same
   convention as .cart__remove */
.cart__address-edit,
.cart__address-add {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: inherit;
}

.cart__address-cycle {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  font-size: 1.1875rem; /* 19px — off the token scale (nearest are --text-ui/16px and --text-body/20px) */
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.cart__address-lines {
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.cart__address-label {
  font-weight: var(--weight-semibold);
}

/* reserves room for the tallest of the customer's saved addresses (line
   count computed server-side, cart.php) so cycling with ↔ never shifts
   the content below — 1lh = this element's own line-height */
.cart__address-lines--lines-1 { min-height: calc(1 * 1lh); }
.cart__address-lines--lines-2 { min-height: calc(2 * 1lh); }
.cart__address-lines--lines-3 { min-height: calc(3 * 1lh); }
.cart__address-lines--lines-4 { min-height: calc(4 * 1lh); }
.cart__address-lines--lines-5 { min-height: calc(5 * 1lh); }
.cart__address-lines--lines-6 { min-height: calc(6 * 1lh); }
.cart__address-lines--lines-7 { min-height: calc(7 * 1lh); }
.cart__address-lines--lines-8 { min-height: calc(8 * 1lh); }

/* ---- promo code ---- */

.cart__promo {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-thin);
}

.cart__promo-label {
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
}

.cart__promo-input {
  width: 100%;
  border: 0;
  border-bottom: 3px solid #fff200; /* same accent weight/color as .addresses__card--default */
  border-radius: 0;
  background: #fff200;
  padding-left: var(--space-1); /* 8px */
  font-size: var(--text-ui);
  transition: background-color 0.4s ease, border-bottom-color 0.4s ease;
}

.cart__promo-input:focus-visible {
  outline: none;
}

.cart__promo-input.is-valid {
  background: #13ff79; /* same green as .site-header--cart's tint */
  border-bottom-color: #13ff79;
}

.cart__promo-input.is-invalid {
  background: #d33;
  border-bottom-color: #d33;
}

/* wins over is-valid/is-invalid on source order (same specificity) —
   text is already --color-ink (pure black) by default in every state,
   so only the yellow needs forcing back */
.cart__promo-input.cart__promo-input--already {
  background: #fff200;
  border-bottom-color: #fff200;
}

/* hand-drawn pill border, stretched per button size */
.drawn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent url('../img/cart-pill.png') center / 100% 100% no-repeat;
  cursor: pointer;
  /* Checkout and the cart's Login are <a>s while Use code is a <button> —
     without this the anchors alone carry the default link underline */
  text-decoration: none;
}

/* inverted: cart-pill-filled.png is the same drawing with its interior
   flood-filled, so the hand-drawn edge is pixel-identical and only the
   fill changes. Matches .auth__login/.account__link (auth.css). */
@media (hover: hover) {
  .drawn-pill:hover {
    background-image: url('../img/cart-pill-filled.png');
    color: var(--color-paper);
  }
}

.drawn-pill:focus-visible {
  background-image: url('../img/cart-pill-filled.png');
  color: var(--color-paper);
}

.cart__promo-add {
  min-width: 6.5625rem; /* 105px */
  height: 1.875rem;     /* 30px */
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
}

/* ---- totals ---- */

.cart__totals {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--space-1);
  margin: var(--space-4) 0 0;
  font-size: var(--text-ui);
}

.cart__totals dt {
  font-weight: var(--weight-medium);
}

.cart__totals dt:nth-of-type(4),
.cart__totals dd:nth-of-type(4) {
  margin-top: var(--space-1); /* stacks on the grid's own 8px row-gap → 16px above the line, isolated to this row */
  padding-top: var(--space-2);
  border-top: var(--border-thin);
  font-size: var(--text-body); /* 20px */
}

.cart__totals dd {
  margin: 0;
  text-align: right;
}

/* same box/font as .account__link (auth.css) — same pill family, same size */
.cart__checkout {
  display: flex; /* block-level override of .drawn-pill's inline-flex, so margin:auto can center it */
  color: inherit;
  margin: var(--space-5) auto 3.75rem; /* bottom 60px, off the token scale */
  width: 10.75rem;
  height: 3rem;
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-semibold);
}

/* same viewport-height box as .cart__empty below, so swapping between
   the two once loadCart() resolves doesn't jump/resize the page */
.cart__loading {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 3.625rem - 1.5rem);
  min-height: calc(100svh - 3.625rem - 1.5rem);
}

/* author-origin display:grid above always beats the browser's own
   [hidden]{display:none} UA rule, regardless of specificity — same fix
   as .product-card[hidden] (shop.css) */
.cart__loading[hidden] {
  display: none;
}

.cart__loading-gif {
  width: 16.875rem; /* 270px */
  height: 30rem;    /* 480px */
  transform: translateY(-20%);
}

/* same viewport-relative technique as .page.auth--full (auth.css), so
   .auth__return lands in the same spot as on the login page. Also
   subtracts .page's own top padding — this sits inside <main class="page">
   rather than on it directly, so that padding must be accounted for here. */
.cart__empty {
  position: relative;
  min-height: calc(100vh - 3.625rem - 1.5rem);
  min-height: calc(100svh - 3.625rem - 1.5rem);
  padding-top: var(--space-4);
  text-align: center;
}

.cart__empty-icon {
  margin-inline: auto;
}

.cart__empty-text {
  margin-top: var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

/* Desktop: /cart is a real destination (the popover is disabled there,
   header.php) but the layout above is the mobile column — uncapped, its
   45% photo track paints kilopixel images. Keep the validated mobile
   proportions as a centred column; rem cap so it rides the fluid root. */
@media (min-width: 72rem) {
  .page.cart {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
  }

  .cart__user-hint {
    font-size: var(--text-ui); /* same size as the line items' "Price" label */
  }
}