/* ==========================================================================
   15 — CART AND CHECKOUT (WooCommerce markup)
   --------------------------------------------------------------------------
   `07-cart-checkout.css` is the kit's own `.aly-*` component file for these two
   pages. This is its bridge: WooCommerce renders the real cart and checkout
   with its own markup, and none of the kit's rules reach it — the same gap
   `11-woocommerce-bridge.css` exists to close for the loop and the product
   page.

   `06-pages.md` §5 and §6 both draw the same shape: the working column on one
   side, an order summary panel on the other, sticky on desktop. WooCommerce
   ships both pages as a single stacked column, so the summary sat below a
   screenful of line items or form fields — the one thing a shopper wants kept
   in view while they work.

   Loaded only in cart/checkout/account context (see aly_enqueue_assets()).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CART — CartLines beside the SummaryPanel (spec §6.4)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.7fr) 300px; column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-3)); inline-size: auto; width: auto; }
  .woocommerce-cart .woocommerce:not(:has(.cart-collaterals)) { display: block; }
}

/* The table becomes a list of lines. */
.woocommerce-cart table.shop_table.cart { border: 0; background: transparent; box-shadow: none; }
.woocommerce-cart table.shop_table.cart thead { display: none; }
.woocommerce-cart table.shop_table.cart, .woocommerce-cart table.shop_table.cart tbody { display: block; inline-size: 100%; }
.woocommerce-cart table.shop_table.cart tr.cart_item {
  /* qty track = the stepper's real 132px (see .quantity below); at 104px it ran 16px under the × chip. */
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 132px 28px; grid-template-areas: "thumb name price qty remove"; align-items: center; gap: var(--space-3);
  background: var(--surface-white); border-radius: 10px; box-shadow: var(--elevation-hairline); padding: var(--space-3); margin-block-end: var(--space-2);
}
.woocommerce-cart table.shop_table.cart td { display: block; padding: 0; border: 0; background: transparent; } /* no hello-elementor odd-row tint on a line */
.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail img { inline-size: 64px; block-size: 64px; object-fit: contain; border-radius: var(--radius-sm); background: var(--cream-50); mix-blend-mode: multiply; }
.woocommerce-cart table.shop_table.cart td.product-name { grid-area: name; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); }
.woocommerce-cart table.shop_table.cart td.product-name a { color: inherit; text-decoration: none; }
.woocommerce-cart table.shop_table.cart td.product-name .variation { font-size: 11px; color: var(--color-text-muted); margin: 2px 0 0; }
.woocommerce-cart table.shop_table.cart td.product-price { display: none; }
.woocommerce-cart table.shop_table.cart td.product-subtotal { grid-area: price; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--color-text); }
.woocommerce-cart table.shop_table.cart td.product-quantity { grid-area: qty; }
/* block-size is the 44px touch-target hard rule (--touch-target-min), not the design's nominal 40px — the two
   .aly-qty__btn elements (injected by js/cart-qty.js) are real, clickable stepper buttons, not decoration, so
   each is sized to the same 44px minimum rather than relying on an inset-expansion trick. inline-size is widened
   from the design's nominal 104px to 132px (44 + 44 + 44) for the same reason — at 104px, two 44px buttons left
   the number input only 16px wide. */
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity { display: inline-flex; align-items: center; inline-size: 132px; block-size: var(--touch-target-min); background: var(--gold-500); border-radius: var(--radius-sm); }
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity input.qty { border: 0; background: transparent; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; block-size: 100%; flex: 1 1 auto; min-inline-size: var(--touch-target-min); padding: 0; color: var(--ink-900); }
.woocommerce-cart table.shop_table.cart td.product-quantity .aly-qty__btn { inline-size: var(--touch-target-min); block-size: var(--touch-target-min); flex: 0 0 auto; border: 0; background: var(--gold-500); color: var(--ink-900); font-size: 18px; line-height: 1; font-weight: var(--fw-bold); cursor: pointer; border-radius: var(--radius-sm); }
.woocommerce-cart table.shop_table.cart td.product-quantity .aly-qty__btn:hover { background: var(--gold-400); }
.woocommerce-cart table.shop_table.cart td.product-quantity .aly-qty__btn:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: -2px; }
.woocommerce-cart table.shop_table.cart td.product-remove { grid-area: remove; }
/* WooCommerce prints a.remove with an inline color style (style="color:#a00;"), so the !important pair below is
   what it takes to win — same justification as .woocommerce a.remove in 11-woocommerce-bridge.css. */
/* The visible chip stays 28px per the design; the 44px touch-target hard rule is met the same way as
   .aly-btn--icon in 03-buttons.css — an invisible ::before expands the tap area via negative inset. */
.woocommerce-cart table.shop_table.cart td.product-remove a.remove { position: relative; inline-size: 28px; block-size: 28px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--cream-50); color: var(--ink-600) !important; font-size: 18px; line-height: 1; text-decoration: none; }
.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before { content: ""; position: absolute; inset: calc((28px - var(--touch-target-min)) / 2); }
.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover { background: var(--coral-wash); color: var(--clay) !important; }
.woocommerce-cart table.shop_table.cart td.actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-block-start: var(--space-2); }
.woocommerce-cart table.shop_table.cart td.actions .coupon { display: flex; gap: var(--space-2); }
.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text { block-size: var(--touch-target-min); border-radius: var(--radius-sm); box-shadow: var(--elevation-hairline); border: 0; padding-inline: 12px; }
@media (max-width: 767px) {
  .woocommerce-cart table.shop_table.cart tr.cart_item { grid-template-columns: 56px minmax(0, 1fr) 28px; grid-template-areas: "thumb name remove" "thumb qty price"; }
  .woocommerce-cart table.shop_table.cart td.product-subtotal { justify-self: end; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img { inline-size: 56px; block-size: 56px; }
}
/* woocommerce-smallscreen.css (≤768px) turns the table into labelled rows: "Product:", "Quantity:",
   "Subtotal:" via td::before, every cell right-aligned with !important, odd rows tinted, and the
   thumbnail hidden. The line layout above already says what each cell is, so all four are undone.
   The !important answers the plugin's own !important on text-align. */
@media (max-width: 768px) {
  .woocommerce-cart table.shop_table.cart tr.cart_item td::before { content: none; display: none; }
  .woocommerce-cart table.shop_table.cart tr.cart_item td { text-align: start !important; background: transparent; }
  /* WooCommerce hides it with `.woocommerce #content table.cart .product-thumbnail` (an id), hence the #content form. */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail,
  .woocommerce-cart #content table.shop_table.cart tr.cart_item td.product-thumbnail { display: block; }
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal { text-align: end !important; }
}

/* Summary panel */
.woocommerce-cart .cart-collaterals .cart_totals { float: none; inline-size: auto; width: 100%; background: var(--surface-white); border-radius: var(--radius-panel); box-shadow: var(--elevation-hairline); padding: var(--space-4); }
/* 0,4,1: 11-woocommerce-bridge's `.woocommerce .cart-collaterals .cart_totals h2` (0,3,1) set it to Inter. */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals > h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 19px; color: var(--color-text); margin: 0 0 var(--space-3); }
.woocommerce-cart .cart_totals table.shop_table { background: transparent; box-shadow: none; border-radius: 0; border: 0; }
/* SummaryRows: no cell grid, no stripes, no uppercase. woocommerce.css draws a top rule on every row
   (`.woocommerce-cart .cart-collaterals .cart_totals tr td`, 0,3,2), 11-woocommerce-bridge upper-cases
   every shop_table th, and hello-elementor's reset rules and tints the cells; 0,4,2 holds against all. */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td { border: 0; background: transparent; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-body); padding: var(--space-2) 0; vertical-align: top; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th { text-align: start; }
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td { border-block-start: 1px solid var(--cream-300); padding-block-start: var(--space-3); font-size: 19px; font-weight: var(--fw-bold); color: var(--color-text); }
@media (max-width: 768px) {
  /* woocommerce-smallscreen labels each value via td::before and hides the th; keep the label quiet. */
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table td::before { font-weight: var(--fw-regular); color: var(--color-text-body); }
  .woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td::before { font-weight: var(--fw-bold); color: var(--color-text); }
}
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { padding: var(--space-2) 0; border: 0; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); color: var(--color-text-body); }
.woocommerce-cart .cart_totals table.shop_table td { text-align: end; font-variant-numeric: tabular-nums; }
.woocommerce-cart .cart_totals tr.fee th, .woocommerce-cart .cart_totals tr.fee td, .woocommerce-cart .cart_totals tr.cart-discount th, .woocommerce-cart .cart_totals tr.cart-discount td { color: var(--palm); font-weight: var(--fw-semibold); }
/* Savings row (spec: "Savings (palm, only when non-zero)"). --palm on --surface-white measures 5.72:1 — PASS
   (tools/contrast.py '#3E7050' '#FFFEFB'). */
.woocommerce-cart .cart_totals tr.aly-savings th, .woocommerce-cart .cart_totals tr.aly-savings td { color: var(--palm); }
.woocommerce-cart .cart_totals tr.aly-points-earned td { display: grid; justify-items: end; }
.aly-points-earned__value { font-weight: var(--fw-semibold); color: var(--gold-text-on-white); }
.aly-points-earned__note { font-size: 11px; color: var(--color-text-muted); }
.woocommerce-cart .cart_totals tr.order-total th, .woocommerce-cart .cart_totals tr.order-total td { border-block-start: 1px solid var(--cream-300); padding-block-start: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.woocommerce-cart .wc-proceed-to-checkout { padding-block-start: var(--space-3); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; inline-size: 100%; block-size: 48px; align-items: center; justify-content: center; }
.aly-cart-note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; }

/* --------------------------------------------------------------------------
   2. CHECKOUT — form beside a sticky order summary

   `form.checkout`'s children are, in order: a hidden div, the attribution
   element, a paragraph, `#customer_details`, the "Ship to a different address"
   heading, `#order_review_heading` and `#order_review`.

   Everything defaults to column one; only the summary heading and panel are
   pulled into column two. The panel is given an explicit row span so it starts
   beside the form rather than below whatever row it would otherwise land in,
   and `align-self: start` keeps it its own height so `position: sticky` has
   somewhere to travel.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--space-7);
    align-items: start;
  }

  .woocommerce-checkout form.checkout > * { grid-column: 1; }

  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: 0;
  }

  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2 / span 20;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--nav-height) + var(--space-3));
  }
}

.woocommerce-checkout #order_review_heading {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.woocommerce-checkout #order_review {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-hairline);
  padding: var(--space-4);
}

.woocommerce-checkout #order_review table.shop_table {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   "Ship to a different address?" is a CHECKBOX, not a heading.

   WooCommerce wraps that checkbox and its label in an <h3>, so it inherited
   the h3 treatment and rendered at 28px — bigger than "Billing details" above
   it, and the loudest thing on the page for an optional toggle. The element
   stays an h3 (it is WooCommerce's markup and changing it would mean
   overriding a template to move one checkbox), but it is dressed as the form
   control it actually is.
   -------------------------------------------------------------------------- */
.woocommerce-checkout h3#ship-to-different-address {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--color-text);
  margin-block: var(--space-5) var(--space-2);
}

.woocommerce-checkout h3#ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------
   3. Shared: the two order tables

   The checkout review, matching the ledger and orders tables in
   14-account.css. The cart's totals are the SummaryPanel instead (plain rows,
   total under a top rule; spec §6.4) and are styled in section 1 — this block
   used to include them and repainted them as an uppercase bordered table.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #order_review table.shop_table th {
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  text-align: start;
  padding: var(--space-3);
  border-block-end: var(--border-width) solid var(--cream-150);
}

.woocommerce-checkout #order_review table.shop_table td {
  padding: var(--space-3);
  border-block-end: var(--border-width) solid var(--cream-150);
  color: var(--color-text-body);
}

/* The total is the number people look for. */
.woocommerce-checkout #order_review table.shop_table tr.order-total td,
.woocommerce-checkout #order_review table.shop_table tr.order-total th {
  border-block-end: 0;
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount,
.woocommerce-checkout #order_review tr.order-total .woocommerce-Price-amount {
  font-weight: var(--fw-bold);
}

/* Horizontal rules only: hello-elementor's reset rules every cell and tints odd rows, which drew a
   grid with a grey label column. The points-earned value stacks its "when you pay by card" hint. */
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { border-inline: 0; border-block-start: 0; background: transparent; }
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #order_review tr.aly-points-earned td { display: grid; justify-items: end; }

/* 4. Empty basket (markup: woocommerce/cart/cart-empty.php)

   10-utilities.css defines the base `.aly-empty-state` component used across
   the kit; the cart page's own copy below is cart-specific (spec §6.4 sizes
   and gold-wash disc) and, loading after it in the cascade, wins on the
   properties it repeats. */
.aly-empty-state { text-align: center; padding-block: var(--space-9); display: grid; gap: var(--space-3); justify-items: center; }
.aly-empty-state__icon { inline-size: 56px; block-size: 56px; border-radius: var(--radius-circle); background: var(--gold-wash); color: var(--gold-text-on-cream); display: grid; place-items: center; }
.aly-empty-state__icon svg { inline-size: 1.5rem; block-size: 1.5rem; display: block; }
.aly-empty-state__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; margin: 0; color: var(--color-text); }
.aly-empty-state__body { margin: 0; color: var(--color-text-body); max-inline-size: 40ch; }

/* --------------------------------------------------------------------------
   5. THE PAYMENT PANEL

   WooCommerce core paints `.woocommerce-checkout-payment` in #ebe9eb and each
   open `.payment_box` in #dfdcde — a lavender-grey pair that predates the
   block editor and matches no theme anyone has ever shipped. On this cream and
   gold storefront it read as a purple box bolted to the summary panel, and it
   is the last thing a shopper looks at before paying.

   Mapped onto the same surface/sunk pair every other panel on the site uses.
   The gateways' own branded controls are untouched — Apple Pay, Google Pay and
   Link have brand rules of their own, and restyling them would break those.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent;
  border-radius: var(--radius-md);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-block-end: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding-block: var(--space-2);
  margin: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--color-surface-sunk);
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  padding: var(--space-3);
  margin-block-start: var(--space-2);
}

/* Core draws a little pointer triangle above the open box in the same
   lavender; it has to follow the box or it floats detached. */
.woocommerce-checkout #payment div.payment_box::before {
  border-block-end-color: var(--color-surface-sunk);
}

.woocommerce-checkout #payment .place-order {
  padding: var(--space-4) 0 0;
  margin: 0;
}

.woocommerce-checkout #payment #place_order {
  inline-size: 100%;
  display: flex;
}

/* The terms/privacy line under the button is legal microcopy, not body copy. */
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   The two-column cart grid only makes sense when there are two columns.

   With an empty basket WooCommerce renders no `.cart-collaterals`, so the
   empty state was left sitting in a 788px first column and centred on THAT
   rather than on the page — off to the left, with a 320px hole beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce:not(:has(.cart-collaterals)) {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   6. CHECKOUT REVISION (spec §6.4): steps bar, headings, fields, payment tiles
   -------------------------------------------------------------------------- */
.aly-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.aly-steps__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.aly-steps__num { inline-size: 26px; block-size: 26px; border-radius: var(--radius-circle); display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold); background: var(--cream-150); color: var(--ink-600); }
/* --color-text-on-dark is the theme's white token (00-tokens.css) — the brief's
   literal #FFFFFF on the palm-filled done badge, tokenized per the no-hardcoded-hex rule. */
.aly-steps__item.is-done .aly-steps__num { background: var(--palm); color: var(--color-text-on-dark); }
.aly-steps__item.is-current { color: var(--color-text); font-weight: var(--fw-semibold); }
.aly-steps__item.is-current .aly-steps__num { background: var(--gold-500); color: var(--ink-900); }
.aly-steps__item + .aly-steps__item::before { content: ""; inline-size: 24px; block-size: 1px; background: var(--cream-300); margin-inline-end: 4px; }

/* h3.aly-checkout__heading scoped (0,2,1): the kit's `.elementor-kit-4271 h3` (0,1,1) set "Payment" in Inter. */
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout h3.aly-checkout__heading, .woocommerce-checkout #order_review_heading {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 var(--space-3);
}
/* WooCommerce's own wc-address-i18n.js shows/hides the city/country field wrappers with an
   inline `display` style whenever the billing country changes, so a plain (non-!important)
   rule here would be overridden the moment that locale script runs. */
.woocommerce-checkout .aly-hidden-field { display: none !important; }
.woocommerce-checkout .form-row label { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
/* A checkbox's sentence ("Save payment information to my account for future purchases.") is not a field
   label: sentence case, body size, beside its box. */
.woocommerce-checkout .form-row.woocommerce-SavedPaymentMethods-saveNew { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; }
.woocommerce-checkout .form-row.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--gold-600); }
.woocommerce-checkout .form-row.woocommerce-SavedPaymentMethods-saveNew label { flex: 1 1 auto; inline-size: auto; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--color-text-body); margin: 0; }
/* The same for every other checkbox sentence (WooCommerce's label.checkbox, e.g. the Customer Reviews
   consent line under the payment tiles). */
.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox:not(#ship-to-different-address label) { font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--color-text-body); }
.woocommerce-checkout #payment .cr-customer-consent { margin: var(--space-3) 0 var(--space-4); }
.woocommerce-checkout .form-row .input-text, .woocommerce-checkout .form-row .select2-selection { block-size: 48px; border: 0; border-radius: var(--radius-sm); box-shadow: var(--elevation-hairline); background: var(--surface-white); padding-inline: 12px; font-size: 15px; }
/* :focus-visible, not :focus — matches the kit's own input treatment (css/04-forms.css:71-76)
   and these are plain WooCommerce text inputs with no JS-driven programmatic focus that would
   need the ring on every focus; --gold-500 alone measured under the kit's 3:1 non-text minimum
   here (~2.1:1 on white), so this swaps to the kit's solid --color-focus-outline ring, same as
   .aly-input. */
.woocommerce-checkout .form-row .input-text:focus-visible { outline: none; border-color: var(--color-focus-outline); box-shadow: 0 0 0 3px var(--focus-ring-tint), 0 0 0 1px var(--color-focus-outline); }
.woocommerce-checkout .form-row.woocommerce-invalid .input-text { box-shadow: inset 0 0 0 2px var(--clay); }
.woocommerce-checkout .woocommerce-error li { color: var(--clay); }

/* Payment tiles */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method { position: relative; margin-block-end: var(--space-2); border-radius: var(--radius-md); box-shadow: var(--elevation-hairline); background: var(--surface-white); padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px 16px 14px 48px; font-weight: var(--fw-semibold); color: var(--color-text); cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::before { content: ""; inline-size: 22px; block-size: 22px; background: var(--ink-700); -webkit-mask: var(--aly-pay-icon) center / contain no-repeat; mask: var(--aly-pay-icon) center / contain no-repeat; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe > label { --aly-pay-icon: url("../assets/icons/card.svg"); }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod > label { --aly-pay-icon: url("../assets/icons/wallet.svg"); }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] { position: absolute; inset-inline-start: 16px; inset-block-start: 18px; margin: 0; accent-color: var(--gold-600); }
/* inset ring is --color-focus-outline, not --gold-500 — gold-500 measured ~1.8:1 on --gold-wash,
   under the kit's 3:1 non-text minimum for a selection indicator; the wash itself still carries
   the "selected" cue, the ring just needs to be visible on its own. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) { background: var(--gold-wash); box-shadow: inset 0 0 0 2px var(--color-focus-outline); }
/* inline-size auto: woocommerce.css gives the box width:100% of the tile, so the 48px indent pushed it (and
   Stripe's card element) 48px past the tile's edge; at 390 the page grew to 423px and scrolled sideways. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box { inline-size: auto; width: auto; min-inline-size: 0; margin: 0 16px 14px 48px; background: transparent; padding: 0; font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box input { max-inline-size: 100%; }
@media (max-width: 480px) {
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box { margin-inline: 16px; }
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box::before { display: none; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box p:first-child { margin: 0 0 var(--space-2); }

/* Summary panel */
.woocommerce-checkout #order_review { border-radius: var(--radius-panel); padding: var(--space-4); }
.woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); padding: var(--space-2) 0; border: 0; font-weight: var(--fw-regular); }
.woocommerce-checkout #order_review table.shop_table thead { display: none; }
.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-name { color: var(--color-text); }
.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-total, .woocommerce-checkout #order_review table.shop_table tfoot td { text-align: end; font-variant-numeric: tabular-nums; }
.woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal th { border-block-start: 1px solid var(--cream-150); padding-block-start: var(--space-3); }
.woocommerce-checkout #order_review table.shop_table tr.fee th, .woocommerce-checkout #order_review table.shop_table tr.fee td { color: var(--palm); font-weight: var(--fw-semibold); }
.woocommerce-checkout #order_review table.shop_table tr.order-total th, .woocommerce-checkout #order_review table.shop_table tr.order-total td { border-block-start: 1px solid var(--cream-300); padding-block-start: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.woocommerce-checkout #payment #place_order { block-size: 48px; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* 7. ORDER CONFIRMATION (woocommerce/checkout/thankyou.php) */
.aly-confirm { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding-block: var(--space-6); }
.aly-confirm__disc { inline-size: 64px; block-size: 64px; border-radius: var(--radius-circle); background: var(--palm); color: var(--color-text-on-dark); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 28px; }
.aly-confirm__disc svg { inline-size: 30px; block-size: 30px; }
.aly-confirm__disc--failed { background: var(--clay); }
.aly-confirm__title { font-size: 2rem; margin: 0; color: var(--color-text); }
.aly-confirm__meta { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.aly-confirm__points { margin: 0; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--gold-wash); color: var(--gold-text-on-cream); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.aly-confirm__grid { inline-size: 100%; display: grid; gap: var(--space-4); text-align: start; margin-block-start: var(--space-4); }
@media (min-width: 1024px) { .aly-confirm__grid { grid-template-columns: minmax(0, 1.6fr) 320px; align-items: start; } }
.aly-confirm__panel { background: var(--surface-white); border-radius: var(--radius-panel); box-shadow: var(--elevation-hairline); padding: var(--space-4); display: grid; gap: var(--space-3); }
.aly-confirm__panel-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; margin: 0; color: var(--color-text); }
.aly-confirm__panel .woocommerce-order-details__title, .aly-confirm__panel .woocommerce-column__title, .aly-confirm__panel .woocommerce-order-overview { display: none; }
.aly-confirm__panel table.shop_table { box-shadow: none; background: transparent; border: 0; }
.aly-confirm__panel table.shop_table th, .aly-confirm__panel table.shop_table td { border: 0; padding: var(--space-2) 0; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
.aly-confirm__panel table.shop_table tfoot tr:last-child th, .aly-confirm__panel table.shop_table tfoot tr:last-child td { border-block-start: 1px solid var(--cream-300); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.aly-confirm__panel .woocommerce-customer-details { display: none; }
/* Held at strength: the kit's `.elementor-kit-4271 h2` (0,1,1) set the panel titles in Inter, and
   woocommerce.css / hello-elementor's reset drew a cell grid with a tinted label column. */
.aly-confirm .aly-confirm__panel h2.aly-confirm__panel-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table { border: 0; border-radius: 0; }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table th,
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table td { border: 0; border-block-end: 1px solid var(--cream-150); background: transparent; padding: var(--space-2) 0; font-size: var(--fs-sm); font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: var(--color-text-body); text-align: start; }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table td:last-child,
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table tfoot td { text-align: end; font-variant-numeric: tabular-nums; color: var(--color-text); }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table thead th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table thead th:last-child { text-align: end; }
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table tfoot tr:last-child th,
.woocommerce .aly-confirm .aly-confirm__panel table.shop_table tfoot tr:last-child td { border-block-end: 0; border-block-start: 1px solid var(--cream-300); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.aly-confirm__address { font-style: normal; color: var(--color-text); line-height: 1.5; }
.aly-confirm__note, .aly-confirm__pay { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.aly-confirm__panel .button { display: flex; justify-content: center; }