/* ============================================================================
   common-core — cart + checkout

   STRUCTURAL ONLY. Every colour, font and radius comes from the brand's Crayon
   Box in the brand plugin's design-system.css — ground rules 3, 4 and 6. No
   new tokens were needed for this module; the 15 in HANDOVER-IMPLEMENTATION.md
   §6 and §6b cover it.

   FOUR THINGS TO KNOW BEFORE EDITING
   ----------------------------------
   1. Mavron is a DARK brand (--cc-text #ffffff, --cc-bg-subtle #111111).
      No rule may assume "surface" means white or "text" means dark. Shades
      *between* surface and text — row separators, table header fill, hover —
      are mixed from --cc-text with color-mix() so they self-invert, each
      preceded by a flat fallback for browsers without it.

   2. Nothing may be hidden unless JavaScript ran. Every hiding rule sits
      under .is-enhanced, which only a script adds. The "Update cart" button
      in particular is hidden ONLY because JS is driving it — with JS off it
      must stay visible or the cart becomes unusable. Never move a hiding
      rule outside that gate.

   3. Never overflow:hidden on the totals card or the actions area. Express
      checkout (Apple/Google Pay) and BNPL messaging (Klarna, Clearpay) are
      third-party rendered, sometimes in iframes, and clipping is how those
      silently half-render. Same lesson as the Google button on the login card.

   4. Specificity: WooCommerce's own cart rules are mostly `.woocommerce
      table.shop_table ...` (0,2,1). A plain `.cc-cart table.shop_table` ties
      with that and is then decided by stylesheet load order, which differs
      per site — that exact tie caused the card-inside-a-card bug on the login
      page. Where a rule must win, the class is doubled (`.cc-cart.cc-cart`)
      to add a class without adding meaning. That is deliberate, not a typo,
      and it is why there is no !important in this file.
   ============================================================================ */

.cc-cart,
.cc-checkout {
  font-family: var(--cc-font-body, sans-serif);
  color: var(--cc-text, #1a1a1a);
}

.cc-cart *,
.cc-cart *::before,
.cc-cart *::after,
.cc-checkout *,
.cc-checkout *::before,
.cc-checkout *::after { box-sizing: border-box; }

/* ── Page layout ──────────────────────────────────────────────────────────
   Mobile is one column and needs no grid at all. The desktop grid uses
   `order` rather than explicit grid-row placement: the notices wrapper is
   only present when there is a notice, and explicit rows would reserve an
   empty first row (plus its gap) on every clean page load. */

@media (min-width: 992px) {
  .cc-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 30px 32px;
    align-items: start;
  }

  /* .cart-collaterals is a plain wrapper with no semantics, so dissolving it
     lets the totals sit beside the table while cross-sells run full width
     underneath — impossible while they share one sidebar. */
  .cc-cart .cart-collaterals { display: contents; }

  .cc-cart > .woocommerce-notices-wrapper { grid-column: 1 / -1; order: 1; }
  .cc-cart > form.woocommerce-cart-form   { grid-column: 1;      order: 2; }
  .cc-cart .cart_totals                   { grid-column: 2;      order: 2; }
  .cc-cart .cross-sells                   { grid-column: 1 / -1; order: 3; }

  /* Follows the customer down a long cart. top offset clears a sticky header
     on the brands that have one. */
  .cc-cart .cart_totals {
    position: sticky;
    top: 24px;
  }
}

/* ── The line-item table (desktop) ────────────────────────────────────── */

.cc-cart.cc-cart table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
}

.cc-cart.cc-cart table.shop_table th,
.cc-cart.cc-cart table.shop_table td {
  border: 0;
  background: transparent;
}

.cc-cart.cc-cart table.shop_table thead th {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--cc-border-subtle, #e0e0e0);
  font-family: var(--cc-font-body, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cc-text-muted, #6e6e73);
}

.cc-cart.cc-cart table.shop_table tbody tr.cart_item td {
  padding: 18px 12px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.16);
  border-bottom: 1px solid color-mix(in srgb, var(--cc-text, #1a1a1a) 12%, transparent);
  vertical-align: middle;
}

.cc-cart .product-thumbnail img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--cc-radius-input, 10px);
}

.cc-cart .product-name a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cc-text, #1a1a1a);
  text-decoration: none;
}

.cc-cart .product-name a:hover { color: var(--cc-accent, #767676); }

/* Variation / personalisation lines. Kept, not hidden: on Eden this is the
   customer's own engraving text, and on Forgebury the variant they picked. */
.cc-cart .product-name .variation,
.cc-cart .product-name dl.variation {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cc-text-muted, #6e6e73);
}

.cc-cart .product-price,
.cc-cart .product-subtotal {
  font-size: 14.5px;
  color: var(--cc-text, #1a1a1a);
}

.cc-cart .product-subtotal { font-weight: 600; }

.cc-cart.cc-cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--cc-text-muted, #6e6e73);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.cc-cart.cc-cart td.product-remove a.remove:hover {
  background: rgba(127, 127, 127, 0.12);
  background: color-mix(in srgb, var(--cc-danger, #b3261e) 12%, transparent);
  color: var(--cc-danger, #b3261e);
}

/* ── Quantity stepper ─────────────────────────────────────────────────────
   The wrapper is WooCommerce's own .quantity; .cc-qty is added by the script,
   so the stock number input is what a no-JS visitor gets. */

.cc-cart .quantity.cc-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: 999px;
  overflow: hidden;
}

.cc-cart .cc-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-text, #1a1a1a);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cc-cart .cc-qty__btn:hover:not(:disabled) {
  background: rgba(127, 127, 127, 0.12);
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 8%, transparent);
}

/* Disabled means a bound from WooCommerce was hit — on Forgebury the lower
   bound is the product's minimum order quantity, so this is load-bearing
   rather than decorative. */
.cc-cart .cc-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cc-cart .cc-qty__btn:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: -2px;
}

.cc-cart.cc-cart .quantity.cc-qty input.qty {
  width: 46px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--cc-text, #1a1a1a);
  /* The stepper is the affordance; native spinners would be a second, uglier
     one sitting inside it. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.cc-cart .quantity.cc-qty input.qty::-webkit-outer-spin-button,
.cc-cart .quantity.cc-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cc-cart .quantity.cc-qty input.qty:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: -2px;
}

/* ── Actions row: coupon + update ─────────────────────────────────────── */

.cc-cart.cc-cart td.actions {
  padding: 20px 12px 0;
  border: 0;
  background: transparent;
}

.cc-cart .cc-coupon__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--cc-accent, #767676);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc-cart .cc-coupon__toggle:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 3px;
  border-radius: 4px;
}

.cc-cart .cc-coupon__panel[hidden] { display: none; }

.cc-cart.cc-cart .cc-coupon__panel .coupon {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 8px 0 0;
  padding: 0;
  float: none;
}

.cc-cart.cc-cart .cc-coupon__panel input#coupon_code {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-input, 10px);
  background: transparent;
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 3%, transparent);
  font-family: inherit;
  font-size: 16px;
  color: var(--cc-text, #1a1a1a);
}

.cc-cart.cc-cart .cc-coupon__panel button[name="apply_coupon"] {
  flex: none;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-input, 10px);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-text, #1a1a1a);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cc-cart.cc-cart .cc-coupon__panel button[name="apply_coupon"]:hover {
  border-color: var(--cc-accent, #767676);
  background: color-mix(in srgb, var(--cc-accent, #767676) 10%, transparent);
}

/* THE hiding rule. Gated behind .is-enhanced because with JS off this button
   is the only way to change a quantity. */
.cc-cart.is-enhanced button[name="update_cart"],
.cc-cart.is-enhanced input[name="update_cart"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Busy state while WooCommerce processes a quantity change. Pointer-events
   off prevents a second submit landing mid-request. */
.cc-cart.is-updating form.woocommerce-cart-form,
.cc-cart.is-updating .cart_totals {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── Totals card ─────────────────────────────────────────────────────────
   No overflow:hidden — express-pay buttons and BNPL widgets live in here. */

.cc-cart.cc-cart .cart_totals {
  width: 100%;
  float: none;
  padding: 22px 22px 24px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-card, 16px);
  background: var(--cc-surface, #ffffff);
  box-shadow: var(--cc-shadow-card, 0 18px 40px -22px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04));
}

.cc-cart .cart_totals > h2 {
  margin: 0 0 16px;
  font-family: var(--cc-font-heading, sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cc-text, #1a1a1a);
}

.cc-cart.cc-cart .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
}

.cc-cart.cc-cart .cart_totals table.shop_table th,
.cc-cart.cc-cart .cart_totals table.shop_table td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.14);
  border-bottom: 1px solid color-mix(in srgb, var(--cc-text, #1a1a1a) 10%, transparent);
  background: transparent;
  font-size: 14.5px;
  vertical-align: top;
}

.cc-cart.cc-cart .cart_totals table.shop_table th {
  font-weight: 500;
  text-align: left;
  color: var(--cc-text-muted, #6e6e73);
}

.cc-cart.cc-cart .cart_totals table.shop_table td { text-align: right; }

.cc-cart.cc-cart .cart_totals .order-total th,
.cc-cart.cc-cart .cart_totals .order-total td {
  padding-top: 14px;
  border-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--cc-text, #1a1a1a);
}

.cc-cart .cart_totals .woocommerce-shipping-destination,
.cc-cart .cart_totals .shipping-calculator-button {
  font-size: 13px;
  color: var(--cc-text-muted, #6e6e73);
}

.cc-cart .wc-proceed-to-checkout { padding: 16px 0 0; }

.cc-cart.cc-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--cc-radius-input, 10px);
  background: var(--cc-accent, #444444);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  /* --cc-on-accent, never --cc-text: all three brands use a gold accent and
     white on gold measures ~2.2:1, a WCAG AA failure. See §6b. */
  color: var(--cc-on-accent, #1a1a1a);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cc-cart.cc-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--cc-accent-hover, #2b2b2b);
}

.cc-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 3px;
}

/* ── Cross-sells ─────────────────────────────────────────────────────────
   Forgebury previously hid these outright (REVENUE-AUDIT.md A4 flags it as
   lost revenue). Removing that rule brings them back, so they need to look
   deliberate rather than like an accident. */

.cc-cart .cross-sells { margin: 8px 0 0; }

.cc-cart .cross-sells > h2 {
  margin: 0 0 16px;
  font-family: var(--cc-font-heading, sans-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--cc-text, #1a1a1a);
}

/* ── Mobile: table becomes cards ──────────────────────────────────────────
   No markup change is needed. WooCommerce already emits data-title on the
   price / quantity / subtotal cells, and the row becomes a grid. */

@media (max-width: 991px) {
  .cc-cart.cc-cart table.shop_table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cc-cart.cc-cart table.shop_table,
  .cc-cart.cc-cart table.shop_table tbody,
  .cc-cart.cc-cart table.shop_table tr,
  .cc-cart.cc-cart table.shop_table td {
    display: block;
    width: 100%;
  }

  .cc-cart.cc-cart table.shop_table tbody tr.cart_item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: center;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--cc-border-subtle, #e0e0e0);
    border-radius: var(--cc-radius-card, 16px);
    background: var(--cc-surface, #ffffff);
  }

  .cc-cart.cc-cart table.shop_table tbody tr.cart_item td {
    padding: 0;
    border: 0;
  }

  .cc-cart.cc-cart tr.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .cc-cart.cc-cart tr.cart_item td.product-name      { grid-column: 2; grid-row: 1; }
  .cc-cart.cc-cart tr.cart_item td.product-remove    { grid-column: 3; grid-row: 1; text-align: right; align-self: start; }
  .cc-cart.cc-cart tr.cart_item td.product-price     { grid-column: 2 / -1; grid-row: 2; }
  .cc-cart.cc-cart tr.cart_item td.product-quantity  { grid-column: 2; grid-row: 3; padding-top: 8px; }
  .cc-cart.cc-cart tr.cart_item td.product-subtotal  { grid-column: 3; grid-row: 3; padding-top: 8px; text-align: right; }

  .cc-cart .product-thumbnail img { width: 76px; height: 76px; }

  /* Price and subtotal are two money values in one card, so they get their
     labels back. Product and Quantity are self-evident from the layout. */
  .cc-cart.cc-cart tr.cart_item td.product-price::before,
  .cc-cart.cc-cart tr.cart_item td.product-subtotal::before {
    content: attr(data-title) ": ";
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-muted, #6e6e73);
  }

  .cc-cart.cc-cart tr.cart_item td.product-name::before,
  .cc-cart.cc-cart tr.cart_item td.product-quantity::before { content: none; }

  .cc-cart.cc-cart td.actions { padding: 6px 0 0; }

  .cc-cart .cart_totals { margin-top: 22px; }

  .cc-cart.cc-cart .cc-coupon__panel .coupon { max-width: none; }
}

/* ── Checkout ─────────────────────────────────────────────────────────────
   Deliberately restrained. The cart is a browsing surface and can carry a
   redesign; checkout is the money step, so this is layout and legibility
   only — no re-ordering of fields, no restyling of the payment box, nothing
   that could change what a customer believes they are agreeing to. */

@media (min-width: 992px) {
  .cc-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 32px;
    align-items: start;
  }

  .cc-checkout form.woocommerce-checkout > #customer_details { grid-column: 1; }

  .cc-checkout form.woocommerce-checkout > h3#order_review_heading,
  .cc-checkout form.woocommerce-checkout > #order_review {
    grid-column: 2;
  }

  .cc-checkout #order_review {
    position: sticky;
    top: 24px;
    padding: 20px;
    border: 1px solid var(--cc-border-subtle, #e0e0e0);
    border-radius: var(--cc-radius-card, 16px);
    background: var(--cc-surface, #ffffff);
  }
}

.cc-checkout .woocommerce-billing-fields h3,
.cc-checkout .woocommerce-shipping-fields h3,
.cc-checkout #order_review_heading {
  font-family: var(--cc-font-heading, sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cc-text, #1a1a1a);
}

.cc-checkout.cc-checkout .input-text,
.cc-checkout.cc-checkout select {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-input, 10px);
  background: transparent;
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 3%, transparent);
  font-family: inherit;
  /* 16px floor: anything smaller makes iOS Safari zoom the viewport on focus,
     which mid-checkout throws the customer into a zoomed, scrolled page. */
  font-size: 16px;
  color: var(--cc-text, #1a1a1a);
}

.cc-checkout.cc-checkout .input-text:focus,
.cc-checkout.cc-checkout select:focus {
  outline: none;
  border-color: var(--cc-accent, #767676);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-focus-ring, var(--cc-accent, #767676)) 28%, transparent);
}

.cc-checkout.cc-checkout #place_order {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--cc-radius-input, 10px);
  background: var(--cc-accent, #444444);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-on-accent, #1a1a1a);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cc-checkout.cc-checkout #place_order:hover { background: var(--cc-accent-hover, #2b2b2b); }

.cc-checkout #place_order:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 3px;
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cc-cart *,
  .cc-checkout * { transition: none; }
}