/*
 * Classic WooCommerce cart layout (structure only; children skin it).
 * Scoped by body.o-woo-cart (see inc/woo-cart.php). Plain unlayered CSS so it
 * outranks WooCommerce's own unlayered cart rules.
 *
 * Custom properties (set on body.o-woo-cart or any ancestor):
 *   --o-woo-cart-max-width     content width               (80rem)
 *   --o-woo-cart-gutter        inline padding              (1rem)
 *   --o-woo-cart-block-padding block padding               (2rem)
 *   --o-woo-cart-gap           column / section gap        (2rem)
 *   --o-woo-cart-summary-width summary column from 64rem   (24rem)
 *   --o-woo-cart-sticky-top    summary sticky offset       (1.5rem)
 *   --o-woo-cart-thumb         line thumbnail size         (5rem)
 *   --o-woo-cart-border        card and rule border        (1px solid rgb(0 0 0 / 0.12))
 *   --o-woo-cart-surface       card background             (#fff)
 *   --o-woo-cart-radius        card radius                 (0.5rem)
 *   --o-woo-cart-muted         secondary text colour       (currentColor at 65%)
 *   --o-woo-cart-wallet-height max wallet button height    (2.75rem)
 */

body.o-woo-cart .woocommerce:has(> .woocommerce-cart-form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "notices" "items" "summary" "extra" "after";
  align-items: start;
  column-gap: var(--o-woo-cart-gap, 2rem);
  max-width: var(--o-woo-cart-max-width, 80rem);
  margin-inline: auto;
  padding: var(--o-woo-cart-block-padding, 2rem) var(--o-woo-cart-gutter, 1rem);
}

body.o-woo-cart .woocommerce:has(> .woocommerce-cart-form) > * { grid-column: 1 / -1; min-width: 0; }
body.o-woo-cart .woocommerce > .o-woo-cart__header { grid-area: header; }
body.o-woo-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: notices; }
/* The items column is the query container for the line rows (see @container below). */
body.o-woo-cart .woocommerce > .woocommerce-cart-form { grid-area: items; margin: 0; container: o-woo-cart-items / inline-size; }
/* Commerce zones (inc/commerce-zones.php) printed between the grid items. */
body.o-woo-cart .woocommerce > .o-commerce-zone--cart-header { grid-area: header; }
body.o-woo-cart .woocommerce > .o-commerce-zone--cart-after { grid-area: after; margin-top: var(--o-woo-cart-gap, 2rem); }
body.o-woo-cart .woocommerce-cart-form > .o-commerce-zone--cart-items-after,
body.o-woo-cart .cart_totals > .o-commerce-zone--cart-summary-after { margin-top: 1.5rem; }

/* The collaterals box dissolves so the totals and cross-sells become grid items. */
body.o-woo-cart .woocommerce > .cart-collaterals { display: contents; }
body.o-woo-cart .woocommerce > .cart-collaterals::before,
body.o-woo-cart .woocommerce > .cart-collaterals::after { display: none; content: none; }
body.o-woo-cart .cart-collaterals > * { grid-column: 1; min-width: 0; }
body.o-woo-cart .cart-collaterals .cross-sells { grid-area: extra; float: none; width: 100%; margin-top: var(--o-woo-cart-gap, 2rem); }

body.o-woo-cart .cart-collaterals .cart_totals {
  grid-area: summary;
  float: none;
  width: 100%;
  margin-top: var(--o-woo-cart-gap, 2rem);
  padding: 1.25rem;
  border: var(--o-woo-cart-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-cart-radius, 0.5rem);
  background: var(--o-woo-cart-surface, #fff);
}

@media (min-width: 64rem) {
  body.o-woo-cart .woocommerce:has(> .woocommerce-cart-form) {
    grid-template-columns: minmax(0, 1fr) var(--o-woo-cart-summary-width, 24rem);
    grid-template-areas: "header header" "notices notices" "items summary" "extra summary" "after after";
    grid-template-rows: auto auto auto 1fr auto;
  }

  body.o-woo-cart .cart-collaterals .cart_totals {
    position: sticky;
    top: var(--o-woo-cart-sticky-top, 1.5rem);
    margin-top: 0;
  }
}

/* Header ------------------------------------------------------------------ */
.o-woo-cart__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: var(--o-woo-cart-gap, 2rem);
}

.o-woo-cart__title { margin: 0; }
.o-woo-cart__count { margin: 0 0 0.75rem; color: var(--o-woo-cart-muted, color-mix(in srgb, currentColor 65%, transparent)); }
.o-woo-cart__continue { margin-left: auto; }

/* Item list: the cart table renders as a list of card rows ------------------ */
body.o-woo-cart table.shop_table.cart,
body.o-woo-cart table.shop_table.cart tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

body.o-woo-cart table.shop_table.cart tbody {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Column headers stay available to assistive technology only. */
body.o-woo-cart table.shop_table.cart thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.o-woo-cart table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: var(--o-woo-cart-thumb, 5rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name remove"
    "thumb price price"
    "thumb qty subtotal";
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem;
  border: var(--o-woo-cart-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-cart-radius, 0.5rem);
  background: var(--o-woo-cart-surface, #fff);
}

body.o-woo-cart table.shop_table.cart tr.cart_item td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

body.o-woo-cart table.shop_table.cart tr.cart_item td::before { content: none; }

body.o-woo-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; align-self: start; }
body.o-woo-cart table.shop_table.cart td.product-name { grid-area: name; }
body.o-woo-cart table.shop_table.cart td.product-price { grid-area: price; color: var(--o-woo-cart-muted, color-mix(in srgb, currentColor 65%, transparent)); }
body.o-woo-cart table.shop_table.cart td.product-quantity { grid-area: qty; }
body.o-woo-cart table.shop_table.cart tr.cart_item td.product-subtotal { grid-area: subtotal; text-align: right; white-space: nowrap; }
body.o-woo-cart table.shop_table.cart td.product-remove { grid-area: remove; justify-self: end; align-self: start; }

body.o-woo-cart table.shop_table.cart td.product-thumbnail img {
  display: block;
  width: var(--o-woo-cart-thumb, 5rem);
  height: var(--o-woo-cart-thumb, 5rem);
  max-width: none;
  object-fit: cover;
  border-radius: calc(var(--o-woo-cart-radius, 0.5rem) / 2);
}

/* Variation attributes as a quiet meta line. */
body.o-woo-cart table.shop_table.cart td.product-name dl.variation {
  display: block;
  margin: 0.25rem 0 0;
  color: var(--o-woo-cart-muted, color-mix(in srgb, currentColor 65%, transparent));
  font-size: 0.875em;
}

body.o-woo-cart table.shop_table.cart td.product-name dl.variation :is(dt, dd, p) { display: inline; float: none; margin: 0; padding: 0; }
body.o-woo-cart table.shop_table.cart td.product-name dl.variation dt { font-weight: inherit; }
body.o-woo-cart table.shop_table.cart td.product-name dl.variation dd + dt::before { content: " · "; }

body.o-woo-cart table.shop_table.cart td.product-quantity .quantity { display: inline-flex; float: none; margin: 0; }

/* Remove: icon button. Woo's text "×" and its forced red colour are hidden behind an icon mask. */
body.o-woo-cart table.shop_table.cart a.remove {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  background: transparent;
}

body.o-woo-cart table.shop_table.cart a.remove::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--o-woo-cart-remove-color, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.o-woo-cart table.shop_table.cart a.remove:hover { background: var(--o-woo-cart-remove-hover-bg, rgb(0 0 0 / 0.06)); }

/* One-line rows depend on the items column, not the viewport: beside the summary
   at ~64rem the column is too narrow, so rows stay stacked until it reaches 40rem. */
@container o-woo-cart-items (min-width: 40rem) {
  body.o-woo-cart table.shop_table.cart tr.cart_item {
    grid-template-columns: var(--o-woo-cart-thumb, 5rem) minmax(0, 1fr) auto auto 6.5rem 2.25rem;
    grid-template-areas: "thumb name price qty subtotal remove";
    gap: 1.25rem;
  }

  body.o-woo-cart table.shop_table.cart td.product-remove { align-self: center; }
}

/* Actions row: coupon group + quiet update button ---------------------------- */
body.o-woo-cart table.shop_table.cart tr:has(> td.actions) { display: block; }

body.o-woo-cart table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  text-align: left;
}

body.o-woo-cart table.shop_table.cart td.actions::before { content: none; }

body.o-woo-cart .woocommerce table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 18rem;
  max-width: 28rem;
  float: none;
  padding: 0;
  border: 0;
}

body.o-woo-cart .woocommerce table.cart td.actions .coupon .input-text {
  flex: 1 1 12rem;
  width: auto;
  min-width: min(100%, 12rem);
  margin: 0;
  float: none;
}

body.o-woo-cart .woocommerce table.cart td.actions .coupon .button { flex: 1 0 auto; float: none; width: auto; margin: 0; }
body.o-woo-cart .woocommerce table.cart td.actions > .button { float: none; width: auto; margin: 0; }

/* WooCommerce's cart script disables "update" until a quantity changes; hide it until then. */
body.o-woo-cart .woocommerce table.cart td.actions > button[name="update_cart"]:disabled { display: none; }

/* Summary card ---------------------------------------------------------------- */
body.o-woo-cart .cart-collaterals .cart_totals h2 { margin: 0 0 0.75rem; }

body.o-woo-cart .cart-collaterals .cart_totals table.shop_table,
body.o-woo-cart .cart-collaterals .cart_totals table.shop_table tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

body.o-woo-cart .cart-collaterals .cart_totals table.shop_table tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: var(--o-woo-cart-border, 1px solid rgb(0 0 0 / 0.12));
}

body.o-woo-cart .cart-collaterals .cart_totals table.shop_table tr:first-child { border-top: 0; }

body.o-woo-cart .cart-collaterals .cart_totals table.shop_table :is(th, td) {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

body.o-woo-cart .cart-collaterals .cart_totals table.shop_table th { text-align: left; }
body.o-woo-cart .cart-collaterals .cart_totals table.shop_table td { flex: 1 1 auto; text-align: right; }
body.o-woo-cart .cart-collaterals .cart_totals table.shop_table td::before { content: none; }
body.o-woo-cart .cart-collaterals .cart_totals table.shop_table tr.shipping td { flex-basis: 100%; text-align: left; }
body.o-woo-cart .cart-collaterals .cart_totals #shipping_method { margin: 0; padding: 0; list-style: none; }
body.o-woo-cart .cart-collaterals .cart_totals #shipping_method li { margin: 0; }

body.o-woo-cart .cart-collaterals .cart_totals :is(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
  margin: 0.25rem 0 0;
  color: var(--o-woo-cart-muted, color-mix(in srgb, currentColor 65%, transparent));
  font-size: 0.875em;
}

body.o-woo-cart .cart-collaterals .cart_totals tr.order-total td small,
body.o-woo-cart .cart-collaterals .cart_totals tr.order-total td .includes_tax { display: block; font-size: 0.75em; }

/* Checkout + wallet buttons: the primary action first, wallets second, the Pay Later message last. */
body.o-woo-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0 0;
}

body.o-woo-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout > * { margin: 0; }
body.o-woo-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout > .checkout-button { order: -1; display: block; width: 100%; margin: 0; text-align: center; }
body.o-woo-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout > .ppcp-messages { order: 1; }

/* PayPal Payments (SDK v6) hard-codes a 48px inline height on its button hosts; max-height caps it. */
body.o-woo-cart .wc-proceed-to-checkout :is(paypal-button, paypal-pay-later-button, venmo-button) {
  display: block;
  max-height: var(--o-woo-cart-wallet-height, 2.75rem);
}

body.o-woo-cart .wc-proceed-to-checkout [id^="ppc-button-ppcp-gateway"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}