/**
 * Cart page styles — Nordhauser theme
 *
 * Loaded only on is_cart() via inc/enqueue.php. Depends on main.css + shop.css
 * + category.css (for .cat-head and .subcat reuse). Together with those, the
 * cart page inherits the project's tokens, button styles, and chrome.
 *
 * Structure:
 *   .cart-page                 — outer section wrapper
 *     .cat-head--cart          — page head band (composes .cat-head from category.css)
 *     .cart-page-grid          — 2-col Grid (items + totals card)
 *       .cart-items-col        — col 1, holds the WC cart form + table
 *       .cart-totals-col       — col 2, holds the sticky totals card
 *   .cart-empty                — separate empty-state section
 *     .cart-empty__lede        — big H1 + intro + CTA
 *     .cart-empty-recent       — recently-viewed scroller (composes .related2 from shop.css)
 *
 * Responsive breakpoints follow project convention (Gotcha 33):
 *   Desktop ≥1024 — base
 *   Tablet 640-1023 — single column, totals below
 *   Mobile <640 — table rows reflow to stacked cards
 */

/* ----------------------------------------------------------------------------
 * Section wrappers
 * ------------------------------------------------------------------------- */
.cart-page {
  padding: 32px 0 64px;
}
.cart-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.cart-items-col,
.cart-totals-col { min-width: 0; }

/* ----------------------------------------------------------------------------
 * Page head — composes .cat-head from category.css. The two stat columns
 * already work with .cat-head .stats grid; nothing extra needed here.
 * ------------------------------------------------------------------------- */
.cat-head--cart {
  /* Tighter than category cat-head (no description body to lead into). */
  padding: 24px 0 28px;
}
.cat-head--cart .stats {
  /* 2 stats instead of 3 — let the grid auto-fit so each cell stays wide. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ----------------------------------------------------------------------------
 * Cart items table
 *
 * WC ships <table class="shop_table cart"> + classes per cell
 * (.product-remove, .product-thumbnail, .product-name, .product-price,
 * .product-quantity, .product-subtotal). We grid-layout each <tr> on desktop
 * and stack as cards on mobile.
 * ------------------------------------------------------------------------- */
.cart-page .shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.cart-page .shop_table.cart thead {
  /* WC's <thead> is a vestige; our row layout doesn't need it visually but
     screen readers benefit from it staying in DOM. Hide visually only. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.cart-page .shop_table.cart tbody tr.cart_item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 110px 130px 110px 28px;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--bone-300);
}
.cart-page .shop_table.cart tbody tr.cart_item:last-of-type {
  border-bottom: 1px solid var(--bone-300);
}
.cart-page .shop_table.cart tbody td {
  padding: 0;
  border: 0;
  vertical-align: middle;
}

/* Thumb */
.cart-page td.product-thumbnail {
  order: -2;
}
.cart-page td.product-thumbnail a,
.cart-page td.product-thumbnail img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bone-200);
}

/* Name */
.cart-page td.product-name {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-900);
}
.cart-page td.product-name a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.cart-page td.product-name a:hover { color: var(--green-800); }
.cart-page td.product-name dl.variation {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.cart-page td.product-name dl.variation dt,
.cart-page td.product-name dl.variation dd {
  display: inline;
  margin: 0;
}
.cart-page td.product-name dl.variation dt { font-weight: 500; }
.cart-page td.product-name dl.variation dt::after { content: ":\00a0"; }
.cart-page td.product-name .backorder_notification {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--terra-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Price column (per-unit) */
.cart-page td.product-price {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-700);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quantity stepper — .nh-qty pill (canonical rules in shop.css). The cell
   just needs to center the pill horizontally; the pill carries its own
   width / height / border / button styling. */
.cart-page td.product-quantity {
  display: flex;
  justify-content: center;
}
.cart-page td.product-quantity .nh-qty {
  margin: 0;
}

/* Subtotal */
.cart-page td.product-subtotal {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Remove × — WC renders <a class="remove">×</a> */
.cart-page td.product-remove {
  order: 99;
  text-align: right;
}
.cart-page td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bone-200);
  color: var(--ink-500);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-page td.product-remove a.remove:hover {
  background: var(--terra-50);
  color: var(--terra-600);
}

/* Actions row (coupon + hidden update button) */
.cart-page .shop_table.cart tbody tr:last-child td.actions {
  display: block;
  padding: 18px 0 0;
  border-top: 0;
}
.cart-update-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* Coupon disclosure — a <details> with custom chevron + body */
.cart-coupon {
  margin: 0 0 8px;
}
.cart-coupon > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-800);
  cursor: pointer;
  padding: 8px 0;
}
.cart-coupon > summary::-webkit-details-marker { display: none; }
.cart-coupon[open] > summary .cart-coupon__chev { transform: rotate(180deg); }
.cart-coupon__chev { transition: transform 0.18s ease; }
.cart-coupon__body {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.cart-coupon__body input.input-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bone-100);
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
  color: var(--ink-900);
}
.cart-coupon__body input.input-text:focus {
  outline: none;
  border-color: var(--green-700);
}
.cart-coupon__body .btn-secondary {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bone-200);
  color: var(--ink-900);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-coupon__body .btn-secondary:hover { background: var(--bone-300); }

/* Loading state — WC's cart.js adds .processing during AJAX update */
.cart-page .processing {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}

/* ----------------------------------------------------------------------------
 * Cart totals card (sticky aside)
 * ------------------------------------------------------------------------- */
.cart-totals-card {
  background: var(--bone-100);
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
  padding: 22px 24px 24px;
}
.cart-totals-card--sticky {
  position: sticky;
  top: 92px;
}
.cart-totals__h {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.cart-totals__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.cart-totals__table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bone-300);
}
.cart-totals__table tr:last-child { border-bottom: 0; }
.cart-totals__table th,
.cart-totals__table td {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
}
.cart-totals__table td {
  text-align: right;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.cart-totals__table tr.cart-discount td .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--terra-600);
}
.cart-totals__table tr.shipping ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.cart-totals__table tr.shipping ul#shipping_method li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.cart-totals__table tr.shipping label {
  font-size: 13px;
  color: var(--ink-700);
}
.cart-totals__table .woocommerce-shipping-destination {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-500);
}

/* Order total — bigger, terra emphasis on amount */
.cart-totals__total {
  margin-top: 4px;
  padding-top: 14px !important;
  border-top: 2px solid var(--ink-900) !important;
  border-bottom: 0 !important;
}
.cart-totals__total th {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
}
.cart-totals__total td {
  font-size: 22px;
  font-weight: 800;
  color: var(--terra-600);
  letter-spacing: -0.01em;
}

/* Proceed-to-checkout CTA slot */
.cart-totals__cta {
  margin-top: 18px;
}
.cart-totals__cta .btn-primary {
  width: 100%;
}

/* btn-primary--lg variant — bigger CTA for the proceed button */
.btn-primary--lg {
  padding: 14px 24px;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Shipping calculator — light restyle of WC defaults */
.cart-page .shipping-calculator-button,
.cart-totals-card .shipping-calculator-button {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-800);
  text-decoration: none;
}
.cart-page .shipping-calculator-button:hover,
.cart-totals-card .shipping-calculator-button:hover { color: var(--green-900); }
.cart-page .shipping-calculator-form,
.cart-totals-card .shipping-calculator-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--bone-300);
}
.cart-page .shipping-calculator-form .form-row,
.cart-totals-card .shipping-calculator-form .form-row {
  margin: 0 0 10px;
}
.cart-page .shipping-calculator-form .input-text,
.cart-page .shipping-calculator-form select,
.cart-totals-card .shipping-calculator-form .input-text,
.cart-totals-card .shipping-calculator-form select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--bone-100);
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
}

/* ----------------------------------------------------------------------------
 * Empty cart
 * ------------------------------------------------------------------------- */
.cart-empty {
  padding: 56px 0 80px;
}
.cart-empty__lede {
  max-width: 720px;
  margin: 0 0 40px;
}
.cart-empty__lede .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra-600);
  margin-bottom: 14px;
}
.cart-empty__lede h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 20px;
}
.cart-empty__lede .intro {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 24px;
}
.cart-empty__cta {
  /* Inherits .btn-primary terra background; no overrides needed. */
}

/* WC notices rendered inside .cart-empty__lede (above the CTA via
   wc_print_notices() in cart-empty.php). The default WC chrome — green
   left border, check icon via ::before, padded background — fights the
   minimal empty-state composition. Strip it so the notice reads as plain
   intro-style text matching the typography we previously had on .intro. */
.cart-empty .woocommerce-notices-wrapper:not(:empty) {
  margin: 0 0 24px;
}
.cart-empty .woocommerce-message,
.cart-empty .woocommerce-info,
.cart-empty .woocommerce-error {
  list-style: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-700);
}
.cart-empty .woocommerce-message::before,
.cart-empty .woocommerce-info::before,
.cart-empty .woocommerce-error::before {
  display: none;
}
/* Inline link instead of button-pill for the .restore-item / .button anchors
   inside the notice. Quiet underline, terra emphasis on hover. */
.cart-empty .woocommerce-message a,
.cart-empty .woocommerce-info a,
.cart-empty .woocommerce-error a {
  display: inline;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 0 4px;
  font-size: inherit;
  font-weight: 600;
  color: var(--green-800);
  text-decoration: underline;
  text-decoration-color: var(--bone-400);
  text-underline-offset: 3px;
  border-radius: 0;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.cart-empty .woocommerce-message a:hover,
.cart-empty .woocommerce-info a:hover,
.cart-empty .woocommerce-error a:hover {
  color: var(--green-900);
  text-decoration-color: var(--green-700);
}

/* Recently-viewed band — composes .pdp-head + .related2 from shop.css.
   Top divider visually separates the lede block (eyebrow + H1 + CTA) from
   the carousel below; same hairline + spacing as the seo-block on category
   pages so the rhythm matches across surfaces. */
.cart-empty-recent {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--bone-300);
}
/* PDP renders arrows inline-styled; here we restyle via the shared `.arr`
   class for cleaner separation of concerns. */
.cart-empty-recent .pdp-head__arrows {
  display: flex;
  gap: 10px;
  justify-self: end;
  align-self: end;
}
.cart-empty-recent .arr {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--bone-400);
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-700);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cart-empty-recent .arr:hover {
  background: var(--bone-100);
  border-color: var(--ink-700);
  color: var(--ink-900);
}

/* ----------------------------------------------------------------------------
 * Responsive — tablet (≤1023)
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cart-page-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  /* Totals card moves below items, no longer sticky (no parallel scroll). */
  .cart-totals-card--sticky {
    position: static;
  }
  .cart-page .shop_table.cart tbody tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) 100px 110px 100px 28px;
    gap: 14px;
  }
  .cart-page td.product-thumbnail a,
  .cart-page td.product-thumbnail img {
    width: 72px;
    height: 72px;
  }
  .cart-empty__lede h1 { font-size: 48px; }
  /* 3 cards visible at tablet, half-card peek for swipe affordance. */
  .cart-empty-recent .related2-card {
    flex-basis: calc((100% - 14px * 2.5) / 3);
  }
  /* Hide arrows on tablet+mobile — touch swipe is the affordance. */
  .cart-empty-recent .pdp-head__arrows { display: none; }
}

/* ----------------------------------------------------------------------------
 * Responsive — mobile (≤639)
 *
 * Cart rows reflow from 6-col grid to a 2-row card:
 *   Row 1: thumb (left) + name (flexes) + remove (right)
 *   Row 2: qty stepper (left) + subtotal (right)
 * Per-unit price is hidden on mobile (subtotal carries the meaning). Each
 * data-title comes from WC's <td data-title="…"> attribute pattern.
 * ------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .cart-page { padding: 24px 0 48px; }
  .cart-page .shop_table.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name   remove"
      "thumb qty    subtotal";
    gap: 8px 14px;
    align-items: center;
    padding: 14px 0;
  }
  .cart-page td.product-thumbnail { grid-area: thumb; order: 0; }
  .cart-page td.product-thumbnail a,
  .cart-page td.product-thumbnail img {
    width: 64px;
    height: 64px;
  }
  .cart-page td.product-name { grid-area: name; }
  .cart-page td.product-remove { grid-area: remove; order: 0; }
  .cart-page td.product-quantity {
    grid-area: qty;
    justify-content: flex-start;
  }
  .cart-page td.product-subtotal { grid-area: subtotal; }
  /* Hide per-unit price on mobile — subtotal alone is the conversion signal. */
  .cart-page td.product-price { display: none; }

  /* Coupon body stacks input above button on narrow screens. */
  .cart-coupon__body {
    flex-direction: column;
    max-width: none;
  }
  .cart-coupon__body .btn-secondary { width: 100%; }

  .cart-totals-card { padding: 18px 18px 20px; }
  .cart-totals__total td { font-size: 20px; }

  .cart-empty { padding: 40px 0 60px; }
  .cart-empty__lede h1 { font-size: 32px; }
  .cart-empty__lede .intro { font-size: 15px; }
  /* 1.6 cards on phones — half-card peek encourages swipe. */
  .cart-empty-recent .related2-card {
    flex-basis: calc((100% - 14px * 0.6) / 1.6);
  }
}