/* ============================================================================
   /cart/ — the WooCommerce cart, drawn in the site design.

   The cart is one of the three pages render.php deliberately does not take
   over. php/_shell.php has the reasoning: the JavaScript under these pages is
   what makes payment work, so nothing is stripped here and WooCommerce's own
   markup is left exactly as it is. This file restyles that markup in place.

   Which is why the selectors look the way they do. Astra's WooCommerce
   compatibility sheets are still loaded and half of their cart rules are
   written through `#content` -- `.woocommerce-page #content table.cart img`
   and the like. An ID beats any number of classes, so every rule that has to
   win an argument with them carries `body.woocommerce-cart #content` in front
   of it. This file is enqueued last, so an exact tie goes to us as well.

   Companion: php/_cart.php, which adds the page heading, the continue-shopping
   link, and the pe-cart-filled / pe-cart-empty body class this grid keys off.
   ========================================================================= */

/* --- the page around it -------------------------------------------------- */

body.woocommerce-cart {
  background: var(--surface-page);
}

body.woocommerce-cart .site-content {
  padding: 8px 0 96px;
  font-family: var(--font-body);
  color: var(--text-primary);
}

body.woocommerce-cart .site-content,
body.woocommerce-cart #primary,
body.woocommerce-cart .ast-article-single {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.woocommerce-cart #primary,
body.woocommerce-cart .ast-article-single,
body.woocommerce-cart .entry-content {
  margin: 0;
  padding: 0;
}

/* The header bar is 1160 wide with 24px gutters; the page under it matches. */
body.woocommerce-cart .ast-container {
  max-width: 1160px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Astra's own "Cart" title. php/_cart.php draws the designed one instead. */
body.woocommerce-cart .entry-header {
  display: none;
}

/* --- the designed page heading ------------------------------------------- */

body.woocommerce-cart #content .pe-cart-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 0 8px;
  text-align: center;
}

body.woocommerce-cart #content .pe-cart-head .pe-cart-eyebrow {
  margin-bottom: 12px;
  color: var(--text-accent);
}

body.woocommerce-cart #content .pe-cart-head h1 {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  color: var(--text-primary);
}

body.woocommerce-cart #content .pe-cart-head p {
  margin: 0;
  color: var(--text-secondary);
}

/* --- two columns: the items, and the summary beside them ----------------- */

body.pe-cart-filled #content .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  align-items: start;
  column-gap: 32px;
  row-gap: 24px;
}

body.pe-cart-filled #content .entry-content > .woocommerce > .woocommerce-notices-wrapper,
body.pe-cart-filled #content .entry-content > .woocommerce > .pe-cart-head {
  grid-column: 1 / -1;
}

body.woocommerce-cart #content .woocommerce-cart-form {
  grid-column: 1;
  margin: 0;
}

/* Astra floats the totals into a 48% column of its own. */
body.woocommerce-cart #content .cart-collaterals {
  grid-column: 2;
  float: none;
  width: auto;
  margin: 0;
}

body.woocommerce-cart #content .cart-collaterals .cart_totals {
  float: none;
  width: auto;
  margin: 0;
}

/* Cross-sells are removed in php/_cart.php; this is the belt to that braces. */
body.woocommerce-cart #content .cross-sells {
  display: none;
}

/* --- the item list, as one card ------------------------------------------ */

body.woocommerce-cart #content table.cart {
  display: block;
  width: 100%;
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

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

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

body.woocommerce-cart #content table.cart tbody > tr {
  display: block;
  background: transparent;
}

/* The responsive shop table stamps its column name in front of every cell
   below 768px. The layout below says what each figure is without them. */
body.woocommerce-cart #content table.shop_table_responsive tr td::before {
  content: none;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto 110px 34px;
  grid-template-areas:
    "thumb name  qty sub remove"
    "thumb price qty sub remove";
  align-items: center;
  column-gap: 20px;
  row-gap: 2px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
  vertical-align: middle;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-thumbnail {
  grid-area: thumb;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-name {
  grid-area: name;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-price {
  grid-area: price;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-quantity {
  grid-area: qty;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-subtotal {
  grid-area: sub;
  text-align: right;
}

body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-remove {
  grid-area: remove;
  text-align: right;
}

/* thumbnail ---------------------------------------------------------------- */

/* Astra sizes this one twice over, width in its shop-table rules and height in
   its layout ones, so both have to be said here. */
body.woocommerce-cart #content table.cart td.product-thumbnail img {
  display: block;
  width: 76px;
  height: 76px;
  min-width: 0;
  max-width: none;
  margin: 0;
  object-fit: cover;
  background: var(--ink-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

body.woocommerce-cart #content table.cart td.product-thumbnail a {
  display: block;
  width: 76px;
}

/* name and unit price ------------------------------------------------------ */

body.woocommerce-cart #content table.cart td.product-name,
body.woocommerce-cart #content table.cart td.product-name a {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 16.5px;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-decoration: none;
}

body.woocommerce-cart #content table.cart td.product-name a:hover {
  color: var(--text-accent);
}

/* Variation and backorder lines WooCommerce prints under the name. */
body.woocommerce-cart #content table.cart td.product-name dl.variation,
body.woocommerce-cart #content table.cart td.product-name .backorder_notification {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  color: var(--text-secondary);
}

body.woocommerce-cart #content table.cart td.product-price {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px;
  color: var(--text-secondary);
}

body.woocommerce-cart #content table.cart td.product-price::after {
  content: " each";
  color: var(--text-muted);
}

/* quantity ----------------------------------------------------------------- */

body.woocommerce-cart #content table.cart td.product-quantity .quantity {
  display: block;
  float: none;
  margin: 0;
}

/* Astra caps every text input at max-height: 35px, which a taller field loses
   to however tall it is told to be. */
body.woocommerce-cart #content table.cart td.product-quantity input.qty {
  width: 88px;
  height: 46px;
  max-height: none;
  margin: 0;
  padding: 0 6px 0 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  text-align: center;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: none;
}

body.woocommerce-cart #content table.cart td.product-quantity input.qty:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* subtotal ----------------------------------------------------------------- */

body.woocommerce-cart #content table.cart td.product-subtotal {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--text-primary);
}

/* remove ------------------------------------------------------------------- */

body.woocommerce-cart #content table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-out);
}

body.woocommerce-cart #content table.cart td.product-remove a.remove:hover {
  color: var(--danger);
  background: var(--white);
  border-color: var(--danger);
}

/* --- the card's footer: coupon and update -------------------------------- */

body.woocommerce-cart #content table.cart td.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 22px;
  text-align: left;
  background: var(--ink-50);
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

body.woocommerce-cart #content table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  float: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart #content table.cart td.actions .coupon input#coupon_code {
  width: 190px;
  height: 44px;
  max-height: none;
  margin: 0;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: none;
}

body.woocommerce-cart #content table.cart td.actions .coupon input#coupon_code::placeholder {
  color: var(--text-muted);
}

body.woocommerce-cart #content table.cart td.actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* Repeats .btn-md .btn-secondary rather than adding classes to markup we do
   not own. */
body.woocommerce-cart #content table.cart td.actions button.button,
body.woocommerce-cart #content table.cart td.actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 0 22px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14.5px;
  line-height: 1;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  text-transform: none;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

body.woocommerce-cart #content table.cart td.actions button.button:hover,
body.woocommerce-cart #content table.cart td.actions button:hover {
  color: var(--text-primary);
  background: var(--white);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm);
}

/* Update cart stays disabled until a quantity actually changes. */
body.woocommerce-cart #content table.cart td.actions button.button:disabled,
body.woocommerce-cart #content table.cart td.actions button[disabled] {
  height: 44px;
  padding: 0 22px;
  opacity: 0.45;
  border-color: var(--border-strong);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- the summary --------------------------------------------------------- */

body.woocommerce-cart #content .cart_totals {
  position: sticky;
  top: 88px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Astra draws this as a tinted bar bled to the card's edges. */
body.woocommerce-cart #content .cart_totals h2 {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  background: none;
  border: 0;
}

body.woocommerce-cart #content .cart_totals table {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.woocommerce-cart #content .cart_totals table tbody {
  display: block;
}

body.woocommerce-cart #content .cart_totals table tbody > tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
}

body.woocommerce-cart #content .cart_totals table tbody > tr > th {
  display: block;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 15px;
  text-align: left;
  color: var(--text-secondary);
}

body.woocommerce-cart #content .cart_totals table tbody > tr > td {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15.5px;
  text-align: right;
  color: var(--text-primary);
}

body.woocommerce-cart #content .cart_totals table tbody > tr.cart-discount > td {
  color: var(--success);
}

body.woocommerce-cart #content .cart_totals table tbody > tr.order-total {
  padding-bottom: 0;
  border-bottom: 0;
}

body.woocommerce-cart #content .cart_totals table tbody > tr.order-total > th {
  font-weight: var(--weight-semibold);
  font-size: 16px;
  color: var(--text-primary);
}

body.woocommerce-cart #content .cart_totals table tbody > tr.order-total > td {
  font-weight: var(--weight-bold);
  font-size: 24px;
  letter-spacing: var(--tracking-tight);
}

body.woocommerce-cart #content .cart_totals .woocommerce-Price-amount {
  white-space: nowrap;
}

body.woocommerce-cart #content .cart_totals small,
body.woocommerce-cart #content .cart_totals .includes_tax {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* The shipping calculator, if this store ever ships anything. */
body.woocommerce-cart #content .cart_totals .shipping-calculator-form,
body.woocommerce-cart #content .cart_totals ul#shipping_method {
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 14px;
}

/* --- proceed to checkout -------------------------------------------------- */

body.woocommerce-cart #content .wc-proceed-to-checkout {
  padding: 0;
}

/* Repeats .btn-lg .btn-primary, full width. */
body.woocommerce-cart #content .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
  text-decoration: none;
  text-transform: none;
  transition: all var(--duration-base) var(--ease-out);
}

body.woocommerce-cart #content .wc-proceed-to-checkout a.checkout-button:hover {
  color: var(--text-inverse);
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(59, 130, 246, 0.28);
}

body.woocommerce-cart #content .wc-proceed-to-checkout a.checkout-button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--duration-fast);
}

/* The express-checkout buttons the payment gateways hang off the same hook
   keep their own look; they only need the room around them. */
body.woocommerce-cart #content .wc-proceed-to-checkout > *:not(a.checkout-button) {
  margin-top: 14px;
}

body.woocommerce-cart #content .pe-cart-continue {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14.5px;
  text-align: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

body.woocommerce-cart #content .pe-cart-continue:hover {
  color: var(--text-accent);
}

/* --- the empty cart ------------------------------------------------------- */

body.pe-cart-empty #content .entry-content > .woocommerce {
  text-align: center;
}

body.pe-cart-empty #content .pe-cart-head {
  padding-bottom: 24px;
}

body.pe-cart-empty #content p.return-to-shop {
  margin: 0;
}

body.pe-cart-empty #content p.return-to-shop a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
  text-decoration: none;
  text-transform: none;
  transition: all var(--duration-base) var(--ease-out);
}

body.pe-cart-empty #content p.return-to-shop a.button:hover {
  color: var(--text-inverse);
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(59, 130, 246, 0.28);
}

/* --- narrower ------------------------------------------------------------- */

@media (max-width: 1000px) {
  body.pe-cart-filled #content .entry-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  body.woocommerce-cart #content .cart-collaterals {
    grid-column: 1;
  }

  body.woocommerce-cart #content .cart_totals {
    position: static;
  }
}

@media (max-width: 640px) {
  body.woocommerce-cart .site-content {
    padding-bottom: 64px;
  }

  body.woocommerce-cart #content .pe-cart-head {
    padding-top: 44px;
  }

  body.woocommerce-cart #content table.cart tbody > tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    grid-template-areas:
      "thumb name  remove"
      "thumb price remove"
      "qty   sub   sub";
    column-gap: 14px;
    row-gap: 14px;
    padding: 16px;
  }

  body.woocommerce-cart #content table.cart td.product-thumbnail img,
  body.woocommerce-cart #content table.cart td.product-thumbnail a {
    width: 64px;
  }

  body.woocommerce-cart #content table.cart td.product-thumbnail img {
    height: 64px;
  }

  body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-name,
  body.woocommerce-cart #content table.cart tbody > tr.cart_item > td.product-price {
    align-self: start;
  }

  body.woocommerce-cart #content table.cart td.product-quantity input.qty {
    width: 80px;
    height: 42px;
  }

  body.woocommerce-cart #content table.cart td.actions {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  body.woocommerce-cart #content table.cart td.actions .coupon {
    width: 100%;
  }

  body.woocommerce-cart #content table.cart td.actions .coupon input#coupon_code {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.woocommerce-cart #content .cart_totals {
    padding: 20px;
  }
}