/**
 * Cart page (classic [woocommerce_cart], woocommerce/cart/cart.php).
 *
 * Phone layout: one compact grid per line item (thumbnail, name, remove / unit
 * price, quantity stepper, line total), no "Product:/Price:" labels, and the
 * checkout button pinned to the bottom edge while the totals scroll past.
 * Scoped to body.woocommerce-cart so it outranks Storefront without !important.
 */

/* ── Quantity stepper (all widths) ── */
body.woocommerce-cart .lemon-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--input-bg);
}

body.woocommerce-cart .lemon-cart-qty__btn,
body.woocommerce-cart .lemon-cart-qty__btn:hover,
body.woocommerce-cart .lemon-cart-qty__btn:focus,
body.woocommerce-cart .lemon-cart-qty__btn:active {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

body.woocommerce-cart .lemon-cart-qty__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

body.woocommerce-cart .lemon-cart-qty .quantity {
  margin: 0;
}

body.woocommerce-cart .lemon-cart-qty .qty {
  width: 2rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  appearance: textfield;
}

body.woocommerce-cart .lemon-cart-qty .qty::-webkit-inner-spin-button,
body.woocommerce-cart .lemon-cart-qty .qty::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* Remove control: a 44px target on every width. */
body.woocommerce-cart .product-remove a.remove {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1;
}

/* The pinned checkout bar is phone-only. */
body.woocommerce-cart .lemon-checkout-bar {
  display: none;
}

@media (max-width: 768px) {
  /* Stock Storefront spacing is em-based and stacks to ~200px of air before the table. */
  body.woocommerce-cart .woocommerce-message,
  body.woocommerce-cart .woocommerce-info {
    margin: 0 0 var(--space-xs);
    padding-block: var(--space-xs);
  }

  body.woocommerce-cart .lemon-continue-shopping {
    margin-bottom: var(--space-xs);
  }

  body.woocommerce-cart .lemon-bundle-nudge.woocommerce-info {
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  body.woocommerce-cart article.page {
    margin-bottom: var(--space-md);
  }

  body.woocommerce-cart table.shop_table.cart {
    display: block;
    margin: 0 0 var(--space-xs);
  }

  body.woocommerce-cart table.shop_table.cart thead {
    display: none;
  }

  body.woocommerce-cart table.shop_table.cart tbody {
    display: block;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price remove"
      "thumb qty   total";
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    padding: var(--space-xs);
    border-bottom: 1px solid var(--border);
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  body.woocommerce-cart tr.cart_item td.product-thumbnail {
    grid-area: thumb;
    align-self: start;
  }

  body.woocommerce-cart tr.cart_item td.product-thumbnail img {
    width: 4rem;
    height: auto;
    margin: 0;
  }

  body.woocommerce-cart tr.cart_item td.product-name {
    grid-area: name;
    align-self: start;
    font-size: var(--text-sm);
    line-height: 1.3;
  }

  body.woocommerce-cart tr.cart_item td.product-remove {
    grid-area: remove;
    place-self: start end;

    /* The 44px target overhangs the row's right padding, not its top edge. */
    margin-right: calc(var(--space-2xs) * -1);
  }

  body.woocommerce-cart tr.cart_item td.product-price {
    grid-area: price;
    align-self: start;
    color: var(--muted);
    font-size: var(--text-sm);
  }

  body.woocommerce-cart tr.cart_item td.product-quantity {
    grid-area: qty;
    justify-self: start;
  }

  body.woocommerce-cart tr.cart_item td.product-subtotal {
    grid-area: total;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Actions row (coupon toggle, hidden Update cart): no card, no extra band. */
  body.woocommerce-cart table.shop_table.cart tr:not(.cart_item) {
    display: block;
  }

  body.woocommerce-cart table.shop_table.cart td.actions {
    display: block;
    padding: 0;
    border: 0;
  }

  /* Totals: tight, with the checkout bar fixed to the bottom edge (position:
     sticky can't work here, `.site` clips overflow and becomes its scroller). */
  body.woocommerce-cart {
    padding-bottom: 5rem;
  }

  body.woocommerce-cart .cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    margin: 0;
  }

  body.woocommerce-cart .cart_totals h2 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-base);
  }

  body.woocommerce-cart .cart_totals table.shop_table th,
  body.woocommerce-cart .cart_totals table.shop_table td {
    padding: var(--space-2xs) var(--space-sm);
  }

  body.woocommerce-cart .lemon-checkout-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid var(--border);
    background: var(--bg0);
  }

  body.woocommerce-cart .lemon-checkout-bar__total {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  body.woocommerce-cart .lemon-checkout-bar__total strong {
    color: var(--text);
    font-size: var(--text-lg);
  }

  body.woocommerce-cart .lemon-checkout-bar__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}