/* ============================================================
   JJ Stuff — Cart

   Written against the markup WooCommerce ACTUALLY renders, not the
   static prototype's. The previous version of this file styled
   `.freeship-bar`, `.summary` and `.cart-actions`; the template emits
   `.free-ship-bar`, `.cart-summary` and `.cart-form-actions`. Nothing
   errored — the rules simply matched nothing, which is why the page
   rendered as unstyled WooCommerce defaults.

   Two structural facts drive everything below:

   1. The cart is a SHORTCODE inside page.php, so it renders within
      `.page-content > .story__inner` — an 820px prose column built for
      About/Contact. Left alone it squeezes the cart grid and stacks
      120px of dead padding above it. Both wrappers are neutralised here
      rather than in page.php, so no other page is affected.

   2. `.cart` is a grid, and WooCommerce's notices are DIRECT CHILDREN of
      it. Without an explicit span they land in grid cells — which is why
      the "added to cart" notice and the free-shipping bar sat side by
      side. Anything that is not the form or the summary must span.

   Specificity note: CSS is glob-enqueued alphabetically, so cart.css
   loads BEFORE pages.css and theme.css. Equal-specificity rules there
   would win. Everything here is scoped under `body.woocommerce-cart` to
   sit above them without resorting to !important.
   ============================================================ */

/* --- Escape the prose wrapper -------------------------------- */

body.woocommerce-cart .page-content,
body.woocommerce-cart .page-content .story__inner {
  max-width: none;
  padding: 0;
}

body.woocommerce-cart .cart-intro {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 24px) 0;
}
body.woocommerce-cart .cart-intro p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* --- Layout --------------------------------------------------- */

body.woocommerce-cart .cart {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 24px) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}

/* Notices and the free-shipping bar are grid children. Span them, or
   they get dealt into columns like line items. */
body.woocommerce-cart .cart > .woocommerce-notices-wrapper,
body.woocommerce-cart .cart > .woocommerce-message,
body.woocommerce-cart .cart > .woocommerce-info,
body.woocommerce-cart .cart > .woocommerce-error,
body.woocommerce-cart .cart > .free-ship-bar,
body.woocommerce-cart .cart > .cart-empty {
  grid-column: 1 / -1;
}

/* --- Free-shipping progress ----------------------------------- */

body.woocommerce-cart .free-ship-bar {
  background: var(--coral-pale);
  border: 1px solid var(--coral-lt);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
}
body.woocommerce-cart .free-ship-bar p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--coral-cta-dark);
}
body.woocommerce-cart .free-ship-bar__track {
  height: 6px;
  background: #fff;
  border-radius: 6px;
  margin-top: 9px;
  overflow: hidden;
}
body.woocommerce-cart .free-ship-bar__fill {
  height: 100%;
  background: var(--coral-cta);
  border-radius: 6px;
  transition: width .3s;
}
body.woocommerce-cart .free-ship-bar--done p { color: var(--gold-text); }

/* --- Line items ----------------------------------------------- */

body.woocommerce-cart .cart-items { display: block; }

body.woocommerce-cart .cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--cream);
}
body.woocommerce-cart .cart-item:first-child { padding-top: 4px; }

body.woocommerce-cart .cart-item__img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--linen);
}
body.woocommerce-cart .cart-item__img a,
body.woocommerce-cart .cart-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

body.woocommerce-cart .cart-item__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
body.woocommerce-cart .cart-item__cat a { color: inherit; text-decoration: none; }

body.woocommerce-cart .cart-item__title {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.2;
  margin: 3px 0;
}
body.woocommerce-cart .cart-item__title a {
  color: var(--navy);
  text-decoration: none;
}
body.woocommerce-cart .cart-item__title a:hover { color: var(--coral-cta); }

body.woocommerce-cart .cart-item__meta {
  font-size: 12px;
  color: var(--muted);
}
body.woocommerce-cart .cart-item__meta p { margin: 0; }

body.woocommerce-cart .cart-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
body.woocommerce-cart .cart-item__price {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--navy);
}
body.woocommerce-cart .cart-item__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* WooCommerce renders woocommerce_quantity_input() as
   `.quantity > input.qty` — a native number input, with no +/- buttons.
   The old `.mini-qty button` rules styled buttons that never existed. */
body.woocommerce-cart .mini-qty .quantity { margin: 0; float: none; }
body.woocommerce-cart .mini-qty input.qty {
  width: 68px;
  height: 38px;
  padding: 0 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  background: var(--warm-white);
  border: 2px solid var(--cream);
  border-radius: var(--radius-sm);
}
body.woocommerce-cart .mini-qty input.qty:focus {
  outline: 2px solid var(--coral-cta);
  outline-offset: 1px;
  border-color: transparent;
}

body.woocommerce-cart a.cart-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}
body.woocommerce-cart a.cart-remove:hover { color: var(--coral-cta); }

/* --- Coupon + update row -------------------------------------- */

body.woocommerce-cart .cart-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}
body.woocommerce-cart .cart-form-actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The label duplicates the input's placeholder on screen. Keep it for
   screen readers rather than deleting it from the template. */
body.woocommerce-cart .cart-form-actions .coupon label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.woocommerce-cart .cart-form-actions .coupon input#coupon_code {
  width: 190px;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--navy);
  background: var(--warm-white);
  border: 2px solid var(--cream);
  border-radius: var(--radius-sm);
}
body.woocommerce-cart .cart-form-actions .coupon input#coupon_code:focus {
  outline: 2px solid var(--coral-cta);
  outline-offset: 1px;
  border-color: transparent;
}

/* --- Summary column ------------------------------------------- */

body.woocommerce-cart .cart-summary {
  background: var(--warm-white);
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 74px;
}

/* `.cart_totals` is WooCommerce's own markup, emitted by the
   woocommerce_cart_collaterals hook. It must keep that class — core's
   cart.js replaces `.cart_totals` wholesale on update — so it is styled
   in place rather than reshaped. */
body.woocommerce-cart .cart-summary .cart_totals h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--navy);
}
body.woocommerce-cart .cart-summary .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: 14px;
}
body.woocommerce-cart .cart-summary .cart_totals table.shop_table th,
body.woocommerce-cart .cart-summary .cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--cream);
  padding: 11px 0;
  background: none;
  vertical-align: top;
}
body.woocommerce-cart .cart-summary .cart_totals table.shop_table th {
  width: 42%;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
}
body.woocommerce-cart .cart-summary .cart_totals table.shop_table td {
  text-align: right;
  color: var(--navy);
}
body.woocommerce-cart .cart-summary .cart_totals .order-total th,
body.woocommerce-cart .cart-summary .cart_totals .order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--cream);
  padding-top: 14px;
  font-family: var(--font-head);
}
body.woocommerce-cart .cart-summary .cart_totals .order-total td {
  font-size: 22px;
}
body.woocommerce-cart .cart-summary .cart_totals .order-total th {
  font-size: 17px;
  color: var(--navy);
}

/* Shipping destination + calculator toggle */
body.woocommerce-cart .cart-summary .woocommerce-shipping-destination {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
body.woocommerce-cart .cart-summary .shipping-calculator-button {
  font-size: 12px;
  font-weight: 700;
  color: var(--coral-cta);
}
body.woocommerce-cart .cart-summary .shipping-calculator-form {
  margin-top: 10px;
}
body.woocommerce-cart .cart-summary ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.woocommerce-cart .cart-summary ul#shipping_method li {
  margin: 0 0 4px;
  font-size: 13px;
}

/* Checkout button + the Stripe express buttons that follow it */
body.woocommerce-cart .cart-summary .wc-proceed-to-checkout {
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.woocommerce-cart .cart-summary .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 16px;
}

/* --- Empty state ---------------------------------------------- */

body.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 56px 0;
  color: var(--muted);
}
body.woocommerce-cart .cart-empty h2 {
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 8px;
}

/* --- Responsive ----------------------------------------------- */

@media (max-width: 900px) {
  body.woocommerce-cart .cart {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  body.woocommerce-cart .cart-summary { position: static; }
}

@media (max-width: 520px) {
  body.woocommerce-cart .cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 12px 14px;
  }
  body.woocommerce-cart .cart-item__img { width: 72px; height: 72px; }
  body.woocommerce-cart .cart-item__right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  body.woocommerce-cart .cart-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body.woocommerce-cart .cart-form-actions .coupon { width: 100%; }
  body.woocommerce-cart .cart-form-actions .coupon input#coupon_code {
    flex: 1;
    width: auto;
  }
}