/**
 * XSHIELD1 — Cart & Checkout
 * ---------------------------------------------------------------------------
 * Shared between the cart page (Module 7) and checkout page (Module 8) so
 * the shop → cart → checkout flow feels like one continuous surface.
 * Cart-specific rules are grouped first, checkout-specific rules will be
 * appended under their own marked section when Module 8 ships.
 * Depends on tokens.css + base.css only — .xs-btn / .xs-btn--primary /
 * .xs-btn--outline come from base.css.
 */

/* ---------------------------------------------------------------------------
 * Page shell
 * ------------------------------------------------------------------------ */
.xs-cart-page {
  padding-block: var(--xs-space-7) var(--xs-space-9);
}

.xs-cart-page__title {
  margin: 0 0 var(--xs-space-6);
  font-size: var(--xs-fs-3xl);
  font-weight: var(--xs-fw-bold);
  letter-spacing: var(--xs-ls-tight);
}

/* ---------------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------------ */
.xs-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--xs-space-5);
  padding: var(--xs-space-8) 0;
}

.xs-cart-empty__message {
  margin: 0;
  font-size: var(--xs-fs-lg);
  color: var(--xs-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Grid: items + summary sidebar
 * ------------------------------------------------------------------------ */
.xs-cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--xs-space-8);
  align-items: start;
}

/* ---------------------------------------------------------------------------
 * Cart items list
 * ------------------------------------------------------------------------ */
.xs-cart-items {
  display: flex;
  flex-direction: column;
}

.xs-cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto 32px;
  align-items: center;
  gap: var(--xs-space-4);
  padding-block: var(--xs-space-5);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  transition: opacity var(--xs-duration-base) var(--xs-ease-standard);
}

.xs-cart-item.is-removing {
  opacity: 0;
}

.xs-cart-item.is-updating {
  opacity: 0.5;
  pointer-events: none;
}

.xs-cart-item__photo {
  width: 80px;
  height: 80px;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--xs-color-surface);
  flex-shrink: 0;
}

.xs-cart-item__photo img,
.xs-cart-item-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xs-cart-item__details {
  min-width: 0;
}

.xs-cart-item__name {
  font-weight: var(--xs-fw-semibold);
  font-size: var(--xs-fs-base);
  margin-bottom: var(--xs-space-1);
}

.xs-cart-item__name a {
  color: var(--xs-color-text);
}

.xs-cart-item__name a:hover {
  color: var(--xs-color-brand);
}

.xs-cart-item__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xs-cart-item__meta-row {
  font-size: var(--xs-fs-xs);
  color: var(--xs-color-text-muted);
}

.xs-cart-item__price-mobile {
  display: none;
  margin-top: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  color: var(--xs-color-text-muted);
}

.xs-cart-item__price {
  font-size: var(--xs-fs-sm);
  color: var(--xs-color-text-muted);
  white-space: nowrap;
}

.xs-cart-item__qty .xs-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  overflow: hidden;
}

.xs-qty-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--xs-color-surface);
  color: var(--xs-color-text);
  border: none;
  cursor: pointer;
  font-size: var(--xs-fs-md);
  line-height: 1;
  transition: background-color var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-qty-btn:hover {
  background-color: var(--xs-color-border);
}

.xs-qty-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: var(--xs-border-width) solid var(--xs-color-border);
  border-right: var(--xs-border-width) solid var(--xs-color-border);
  text-align: center;
  font-size: var(--xs-fs-sm);
  font-weight: var(--xs-fw-semibold);
  -moz-appearance: textfield;
}

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

.xs-cart-item__subtotal {
  font-weight: var(--xs-fw-bold);
  white-space: nowrap;
}

.xs-cart-item__remove {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--xs-color-text-muted);
  font-size: var(--xs-fs-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--xs-duration-fast) var(--xs-ease-standard),
              background-color var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-cart-item__remove:hover {
  color: var(--xs-color-brand);
  background-color: var(--xs-red-100);
}

/* ---------------------------------------------------------------------------
 * Coupon row
 * ------------------------------------------------------------------------ */
.xs-cart-coupon {
  display: flex;
  align-items: center;
  gap: var(--xs-space-3);
  padding-top: var(--xs-space-6);
  flex-wrap: wrap;
}

.xs-cart-coupon input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  padding: 0 var(--xs-space-4);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
  font-family: var(--xs-font-sans);
}

.xs-cart-coupon input[type="text"]:focus-visible {
  outline: 2px solid var(--xs-color-focus-ring);
  outline-offset: 1px;
}

.xs-cart-coupon .xs-btn {
  height: 44px;
}

.xs-cart-coupon__message {
  font-size: var(--xs-fs-sm);
  font-weight: var(--xs-fw-medium);
}

.xs-cart-coupon__message.is-error {
  color: var(--xs-danger);
}

.xs-cart-coupon__message.is-success {
  color: var(--xs-success);
}

/* ---------------------------------------------------------------------------
 * Summary sidebar
 * ------------------------------------------------------------------------ */
.xs-cart-summary {
  position: sticky;
  top: calc(var(--xs-header-height) + var(--xs-space-5));
  background-color: var(--xs-color-surface);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  padding: var(--xs-space-6);
}

.xs-cart-summary__title {
  margin: 0 0 var(--xs-space-5);
  font-size: var(--xs-fs-lg);
  font-weight: var(--xs-fw-bold);
}

.xs-cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--xs-space-3);
  font-size: var(--xs-fs-sm);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
}

.xs-cart-summary__row--total {
  border-bottom: none;
  padding-top: var(--xs-space-4);
  font-size: var(--xs-fs-lg);
  font-weight: var(--xs-fw-bold);
}

.xs-cart-summary__shipping-label {
  display: block;
  font-size: var(--xs-fs-sm);
  color: var(--xs-color-text-muted);
  margin-bottom: var(--xs-space-2);
}

/* Empty by default (see xshield1_get_coupon_summary_html()) — an empty div
 * takes up no visible space, so no separate hidden/reveal toggle is needed;
 * a row only appears once a valid coupon is applied and PHP/JS populate it. */
.xs-cart-summary__coupon-amount {
  color: var(--xs-success);
  font-weight: var(--xs-fw-bold);
}

.xs-cart-summary__checkout {
  width: 100%;
  margin-top: var(--xs-space-5);
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .xs-cart-grid {
    grid-template-columns: 1fr;
  }

  .xs-cart-summary {
    position: static;
  }
}

@media (max-width: 640px) {
  .xs-cart-item {
    grid-template-columns: 64px 1fr 32px;
    grid-template-areas:
      "photo details remove"
      "photo qty      subtotal";
    row-gap: var(--xs-space-3);
  }

  .xs-cart-item__photo {
    grid-area: photo;
    width: 64px;
    height: 64px;
  }

  .xs-cart-item__details {
    grid-area: details;
  }

  .xs-cart-item__price {
    display: none;
  }

  .xs-cart-item__price-mobile {
    display: block;
  }

  .xs-cart-item__qty {
    grid-area: qty;
  }

  .xs-cart-item__subtotal {
    grid-area: subtotal;
    justify-self: end;
  }

  .xs-cart-item__remove {
    grid-area: remove;
    justify-self: end;
  }
}

/* =============================================================================
 * CHECKOUT (Module 8)
 * ---------------------------------------------------------------------------
 * Most of the checkout page's markup comes straight from WooCommerce's own
 * field/hook system (woocommerce_form_field, woocommerce_checkout_order_review,
 * woocommerce_checkout_payment) rather than our own templates, so a lot of
 * this section targets WooCommerce's stock classes directly with our tokens
 * rather than classes we control. That's intentional — see
 * inc/woocommerce/checkout-functions.php for why.
 * ========================================================================== */

.xs-checkout-page {
  padding-block: var(--xs-space-7) var(--xs-space-9);
}

/* ---------------------------------------------------------------------------
 * Secure checkout banner — replaces the plain "Checkout" title. Thin,
 * dark, bold, with a subtle moving highlight so it reads as "alive"
 * rather than a static label. Respects prefers-reduced-motion.
 * ------------------------------------------------------------------------ */
.xs-checkout-banner {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--xs-space-6);
  background-color: var(--xs-color-bg-inverse);
  border-radius: 0;
}

.xs-checkout-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(205, 24, 29, 0.35) 45%,
    transparent 90%
  );
  animation: xs-checkout-banner-sweep 5s ease-in-out infinite;
}

@keyframes xs-checkout-banner-sweep {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .xs-checkout-banner::before {
    animation: none;
    display: none;
  }
}

.xs-checkout-banner__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xs-space-2) var(--xs-space-3);
  padding: var(--xs-space-3) var(--xs-space-5);
}

.xs-checkout-banner__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--xs-red-500);
}

.xs-checkout-banner__title {
  margin: 0;
  font-size: var(--xs-fs-base);
  font-weight: var(--xs-fw-bold);
  letter-spacing: var(--xs-ls-wide);
  text-transform: uppercase;
  color: var(--xs-color-text-inverse);
}

.xs-checkout-banner__divider {
  display: none;
  width: var(--xs-border-width);
  align-self: stretch;
  background-color: var(--xs-gray-700);
}

.xs-checkout-banner__note {
  margin: 0;
  font-size: var(--xs-fs-xs);
  color: var(--xs-gray-300);
}

.xs-checkout-banner__dot {
  margin: 0 var(--xs-space-1);
  color: var(--xs-gray-600);
}

.xs-checkout-banner__note a {
  color: var(--xs-color-text-inverse);
  font-weight: var(--xs-fw-semibold);
  text-decoration: underline;
}

.xs-checkout-banner__note a:hover {
  color: var(--xs-red-500);
}

@media (min-width: 560px) {
  .xs-checkout-banner__divider {
    display: block;
  }
}

.xs-checkout-login-notice {
  padding: var(--xs-space-5);
  background-color: var(--xs-color-surface);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
}

/* ---------------------------------------------------------------------------
 * Grid: main fields + order review sidebar
 * ------------------------------------------------------------------------ */
.xs-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--xs-space-8);
  align-items: start;
}

.xs-checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--xs-space-7);
}

/* ---------------------------------------------------------------------------
 * Section cards (Contact information / Shipping address)
 * ------------------------------------------------------------------------ */
.xs-checkout-section {
  padding: var(--xs-space-6);
  background-color: var(--xs-color-bg);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
}

.xs-checkout-section__title {
  margin: 0 0 var(--xs-space-5);
  font-size: var(--xs-fs-lg);
  font-weight: var(--xs-fw-bold);
}

.xs-checkout-guest-note,
.xs-checkout-create-account {
  margin-top: var(--xs-space-4);
  font-size: var(--xs-fs-sm);
  color: var(--xs-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Billing address toggle + conditionally-revealed section
 * ---------------------------------------------------------------------------
 * Checkbox styled the same as the terms/warranties checkbox
 * (.xs-terms-checkbox-row further below) for visual consistency between
 * the two checkout checkboxes. The billing fields section reuses
 * .xs-checkout-fields as-is — same field styling as the Shipping Address
 * form above it, just under its own sub-heading and a top border to read
 * as a distinct sub-section within the same card rather than a jarring
 * jump straight into a second unlabeled field grid. Both are toggled by
 * assets/js/checkout.js's syncBillingFieldsState().
 * ------------------------------------------------------------------------ */
.xs-checkout-billing-toggle {
  margin: var(--xs-space-5) 0;
}

.xs-checkout-billing-toggle label {
  display: flex;
  align-items: flex-start;
  gap: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  line-height: 1.5;
  color: var(--xs-color-text);
  cursor: pointer;
}

.xs-checkout-billing-toggle input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--xs-color-brand);
}

/**
 * Collapsed via max-height + overflow, not the [hidden] attribute or
 * display:none — deliberately. WooCommerce only skins the Country/State
 * <select>s inside with selectWoo (its select2 fork) for elements jQuery
 * considers ":visible" at the moment its own init runs on page load;
 * display:none (which [hidden] triggers) makes offsetWidth/offsetHeight
 * both 0, so jQuery counts it as not-visible and skips it — leaving a
 * plain, unstyled <select> that renders with the OS's native menu style
 * instead of WooCommerce's own skin. max-height:0 + overflow:hidden only
 * zeroes offsetHeight; offsetWidth stays intact, so jQuery still counts
 * it as visible and WooCommerce initializes it normally and identically
 * to the Shipping fields above — no manual re-init needed on our end.
 */
.xs-checkout-billing-fields {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.xs-checkout-billing-fields.is-open {
  max-height: none;
  overflow: visible;
  margin-top: var(--xs-space-5);
  padding-top: var(--xs-space-5);
  border-top: var(--xs-border-width) solid var(--xs-color-border);
}

.xs-checkout-billing-fields__title {
  margin: 0 0 var(--xs-space-5);
  font-size: var(--xs-fs-md);
  font-weight: var(--xs-fw-bold);
}

/* ---------------------------------------------------------------------------
 * WooCommerce form fields (woocommerce_form_field output)
 * ------------------------------------------------------------------------ */
.xs-checkout-fields .form-row {
  margin-bottom: var(--xs-space-4);
}

.xs-checkout-fields .form-row:last-child {
  margin-bottom: 0;
}

.xs-checkout-fields .form-row-first,
.xs-checkout-fields .form-row-last {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

.xs-checkout-fields .form-row-first {
  margin-right: 4%;
}

.xs-checkout-fields label {
  display: block;
  margin-bottom: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  font-weight: var(--xs-fw-semibold);
}

.xs-checkout-fields label .required {
  color: var(--xs-color-brand);
  text-decoration: none;
  margin-left: 2px;
}

.xs-checkout-fields label .optional {
  color: var(--xs-color-text-muted);
  font-weight: var(--xs-fw-regular);
  font-size: var(--xs-fs-xs);
}

.xs-checkout-fields input.input-text,
.xs-checkout-fields select,
.xs-checkout-fields textarea {
  width: 100%;
  height: 44px;
  padding: 0 var(--xs-space-4);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
  font-family: var(--xs-font-sans);
  background-color: var(--xs-color-bg);
  color: var(--xs-color-text);
}

.xs-checkout-fields textarea {
  height: auto;
  padding-block: var(--xs-space-3);
  min-height: 90px;
  resize: vertical;
}

.xs-checkout-fields input.input-text:focus-visible,
.xs-checkout-fields select:focus-visible,
.xs-checkout-fields textarea:focus-visible {
  outline: 2px solid var(--xs-color-focus-ring);
  outline-offset: 1px;
}

.xs-checkout-fields .woocommerce-invalid input.input-text,
.xs-checkout-fields .woocommerce-invalid select {
  border-color: var(--xs-danger);
}

.xs-checkout-fields .select2-container .select2-selection--single {
  height: 44px;
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
}

.xs-checkout-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: var(--xs-space-4);
}

.xs-checkout-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

/* ---------------------------------------------------------------------------
 * Address autocomplete (Mapbox) — WooCommerce core renders the actual
 * suggestion dropdown itself (see inc/woocommerce/mapbox-address-
 * autocomplete.php); this just matches the small "Powered by Mapbox" credit
 * to the rest of the checkout's muted-footnote styling instead of leaving
 * it in Woo's own default look.
 * ------------------------------------------------------------------------ */
.xs-mapbox-branding {
  font-size: var(--xs-fs-xs);
  color: var(--xs-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Order review sidebar
 * ------------------------------------------------------------------------ */
.xs-checkout-summary {
  position: sticky;
  top: calc(var(--xs-header-height) + var(--xs-space-5));
  background-color: var(--xs-color-surface);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  padding: var(--xs-space-6);
}

.xs-checkout-summary__title {
  margin: 0 0 var(--xs-space-5);
  font-size: var(--xs-fs-lg);
  font-weight: var(--xs-fw-bold);
}

/* Cart review table (templates/checkout/review-order.php output) */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--xs-space-5);
}

.woocommerce-checkout-review-order-table thead {
  display: none;
}

/* ---------------------------------------------------------------------------
 * tbody/tfoot rows as independent flexbox rows (not a real table anymore)
 * ---------------------------------------------------------------------------
 * WooCommerce's table gives every row exactly two cells (label/name | value/
 * price), which is what every row EXCEPT Shipping actually wants. A real
 * <table> with auto layout ties every row's column widths together — a
 * <tr> still gets sized by the table's own auto-layout column-width
 * algorithm regardless of any display/width override placed directly on
 * that row or its cells, confirmed via direct DOM inspection on the live
 * checkout: the Shipping row's dropdown was rendering at exactly the label
 * column's width, not the row's full available width.
 *
 * A first attempt fixed that with `display: grid` on <tbody>/<tfoot> plus
 * `display: contents` on every <tr> (relying on CSS Grid's implicit
 * auto-placement to lay out every row in a shared 2-column track, with the
 * Shipping row opting out via `grid-column: 1/-1`). That worked in initial
 * testing but turned out to be unreliable in practice — `display: contents`
 * on table rows combined with WooCommerce's own AJAX-driven DOM replacement
 * (every address-field change swaps out #order_review's entire HTML) hit a
 * real cross-browser rendering quirk that intermittently broke the
 * Shipping row's interactivity.
 *
 * Plain flexbox per row is the more robust fix: no auto-placement, no
 * cross-row coordination, no `display: contents` — each <tr> independently
 * decides its own layout via its own CSS rule, so there's nothing for two
 * rows' column math to get entangled over. Normal rows (product line
 * items, Subtotal, coupon, tax, Total) are `display: flex; justify-content:
 * space-between` (label left, value right, exactly like the old 2-column
 * table); the Shipping row alone overrides to `display: block` further
 * below so its label and dropdown stack full-width instead.
 * ------------------------------------------------------------------------ */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
}

.woocommerce-checkout-review-order-table tbody > tr,
.woocommerce-checkout-review-order-table tfoot > tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xs-space-3);
  width: 100%;
  box-sizing: border-box;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  display: block;
  padding-block: var(--xs-space-2);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  font-size: var(--xs-fs-sm);
  text-align: left;
  vertical-align: top;
}

.woocommerce-checkout-review-order-table .product-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--xs-fw-semibold);
}

.woocommerce-checkout-review-order-table .product-name dl {
  margin: var(--xs-space-1) 0 0;
  font-weight: var(--xs-fw-regular);
}

.woocommerce-checkout-review-order-table .product-name dl dt,
.woocommerce-checkout-review-order-table .product-name dl dd {
  display: inline;
  margin: 0;
  font-size: var(--xs-fs-xs);
  color: var(--xs-color-text-muted);
}

/* WooCommerce's own wc_get_formatted_cart_item_data() wraps every value in
 * a <p>, which is block-level by default — that's what was forcing each
 * Year / Make / Model / Vehicle attribute onto its own line no matter what
 * display rule was set on the parent <dd>. Unwrapping it here is what
 * actually collapses the list back into one condensed row. */
.woocommerce-checkout-review-order-table .product-name dl dd p {
  display: inline;
  margin: 0;
}

.woocommerce-checkout-review-order-table .product-name dl dd::after {
  content: '  ';
}

/* The source dt text already reads "Years:", "Make:", etc. — no ::after
 * colon needed here, that was producing a double colon ("Years::"). */

/* Years/Make/Model above already spell out the vehicle; this field just
 * repeats them concatenated as one string, which read as a redundant
 * extra line under every product. */
.woocommerce-checkout-review-order-table .product-name dl dt.variation-Vehicle,
.woocommerce-checkout-review-order-table .product-name dl dd.variation-Vehicle {
  display: none;
}

.woocommerce-checkout-review-order-table .product-total {
  flex: 0 0 auto;
  text-align: right;
  font-weight: var(--xs-fw-semibold);
  white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  flex: 0 0 auto;
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * Shipping row — full width, stacked, instead of the flex row above
 * ---------------------------------------------------------------------------
 * WooCommerce renders this as an ordinary <tr><th>Shipping</th><td>...</td>
 * </tr>, which — left as the flex row every other row gets above — would
 * squeeze the dropdown into just the value side next to the "Shipping"
 * label. Overriding just this row to `display: block` (instead of flex)
 * lets its th/td stack as ordinary full-width blocks: label on top,
 * dropdown below, using the full width of the sidebar instead of a
 * cramped fraction of it. Every other row (product line items, Subtotal,
 * coupon, tax, Total) isn't touched here and keeps the normal flex-row
 * layout above.
 * ------------------------------------------------------------------------ */
.woocommerce-checkout-review-order-table tfoot tr.shipping,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
  display: block;
}

.woocommerce-checkout-review-order-table tfoot tr.shipping > th,
.woocommerce-checkout-review-order-table tfoot tr.shipping > td,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding-inline: 0;
  border-bottom: none;
}

.woocommerce-checkout-review-order-table tfoot tr.shipping > th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > th {
  font-weight: var(--xs-fw-semibold);
  padding-bottom: var(--xs-space-2);
}

.woocommerce-checkout-review-order-table tfoot tr.shipping > td,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > td {
  padding-bottom: var(--xs-space-2);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: none;
  padding-top: var(--xs-space-4);
  font-size: var(--xs-fs-lg);
  font-weight: var(--xs-fw-bold);
}

/* ---------------------------------------------------------------------------
 * Coupon form inside order review
 * ---------------------------------------------------------------------------
 * WooCommerce prints the "Have a coupon?" toggle via wc_print_notice(),
 * which wraps it in its own notice markup (.woocommerce-info, sometimes
 * additionally inside a .woocommerce-notices-wrapper) nested *inside*
 * .woocommerce-form-coupon-toggle — not on the same element as it. A
 * compound selector like .woocommerce-form-coupon-toggle.woocommerce-info
 * only matches if both classes land on one element, which they didn't
 * here, so WooCommerce's own woocommerce.css kept drawing its decorative
 * ::before icon glyph (the misaligned/overlapping box in review). Targeting
 * every descendant — and every descendant's ::before — inside the toggle
 * wrapper removes the icon regardless of exactly which element carries the
 * notice class.
 * ------------------------------------------------------------------------ */
.woocommerce-form-coupon {
  margin-bottom: var(--xs-space-5);
}

.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-message,
.woocommerce-form-coupon-toggle .woocommerce-notices-wrapper {
  position: static;
  padding: 0 !important;
  margin: 0 0 var(--xs-space-5);
  background: none;
  border: none;
  font-size: var(--xs-fs-sm);
  color: var(--xs-color-text);
  list-style: none;
}

.woocommerce-form-coupon-toggle::before,
.woocommerce-form-coupon-toggle *::before {
  content: none !important;
  display: none !important;
}

.woocommerce-form-coupon-toggle .showcoupon {
  color: var(--xs-color-brand);
  font-weight: var(--xs-fw-semibold);
  text-decoration: underline;
}

.woocommerce-form-coupon-toggle .showcoupon:hover {
  color: var(--xs-color-brand-hover);
}

.woocommerce-form-coupon .form-row {
  display: flex;
  gap: var(--xs-space-2);
}

.woocommerce-form-coupon input[type="text"] {
  flex: 1;
  height: 40px;
  padding: 0 var(--xs-space-3);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
}

/* ---------------------------------------------------------------------------
 * Shipping methods (templates/cart/cart-shipping.php)
 * ---------------------------------------------------------------------------
 * Left-reading base list styling — always applied, so options still look
 * right even before checkout.js has wrapped them in the dropdown below (or
 * on the rare package with only one method, which JS intentionally leaves
 * unwrapped since there's nothing to collapse).
 * ------------------------------------------------------------------------ */
.woocommerce-shipping-totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--xs-space-3);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.woocommerce-shipping-totals ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  text-align: left;
}

.woocommerce-shipping-totals ul#shipping_method input[type="radio"] {
  margin-top: 3px;
  margin-right: 0;
  accent-color: var(--xs-color-brand);
  flex-shrink: 0;
}

.woocommerce-shipping-totals ul#shipping_method label {
  text-align: left;
}

/* ---------------------------------------------------------------------------
 * Shipping dropdown — <details>/<summary> wrapper added by checkout.js
 * around ul#shipping_method whenever there's more than one rate, so the
 * full list of carriers/prices only shows on demand instead of always
 * taking up space in the order summary.
 * ------------------------------------------------------------------------ */
.xs-shipping-dropdown {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  background-color: var(--xs-color-bg);
}

/* ---------------------------------------------------------------------------
 * `display: flex` used to be set directly on `.xs-shipping-dropdown__summary`
 * (the <summary> element itself). That's a documented WebKit bug, not just
 * a cosmetic one: overriding a <summary>'s box away from its native
 * `list-item` display — flex included — can stop WebKit from painting the
 * summary's own content at all (see github.com/polkadot-js/apps/issues/775).
 * Both mobile Safari and mobile Chrome on iOS run WebKit, which is exactly
 * why the dropdown never appeared on a real iPhone in either browser, while
 * a desktop Chrome window (Blink, no such bug) resized to the same width
 * always looked fine — that comparison tests viewport width, not engine.
 *
 * Fix: keep `<summary>` itself at `display: block` (still not the native
 * `list-item`, but block alone doesn't trigger the WebKit content bug the
 * way flex does — widely-used workaround) and move the actual flex label +
 * chevron layout onto an inner `.xs-shipping-dropdown__summary-inner` span
 * that checkout.js wraps the label text in. WebKit has no problem laying
 * out flex content INSIDE a normally-rendered element — the bug is
 * specific to flex on the interactive <summary> box itself.
 *
 * The native open/close toggle is a separate, related WebKit bug (any
 * non-`list-item` display on <summary> disables it) — already handled in
 * checkout.js with an explicit click handler that toggles `open` directly
 * instead of relying on the browser's native (Safari-broken) behavior.
 * ------------------------------------------------------------------------ */
.xs-shipping-dropdown__summary {
  display: block;
  padding: var(--xs-space-3) var(--xs-space-4);
  font-size: var(--xs-fs-sm);
  font-weight: var(--xs-fw-semibold);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.xs-shipping-dropdown__summary::-webkit-details-marker {
  display: none;
}

.xs-shipping-dropdown__summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xs-space-3);
}

.xs-shipping-dropdown__summary-inner::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--xs-color-text-muted);
  border-bottom: 2px solid var(--xs-color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-shipping-dropdown[open] .xs-shipping-dropdown__summary-inner::after {
  transform: rotate(-135deg);
}

.xs-shipping-dropdown[open] .xs-shipping-dropdown__summary {
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
}

.xs-shipping-dropdown ul#shipping_method {
  padding: var(--xs-space-3) var(--xs-space-4);
  gap: var(--xs-space-3);
}

/* Payment methods (templates/checkout/payment.php) */
#payment {
  background-color: transparent;
  margin-top: var(--xs-space-5);
}

ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--xs-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--xs-space-3);
}

li.wc_payment_method {
  padding: var(--xs-space-4);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
  background-color: var(--xs-color-bg);
  transition: border-color var(--xs-duration-fast) var(--xs-ease-standard);
}

li.wc_payment_method:has(input:checked),
li.wc_payment_method.is-selected {
  border-color: var(--xs-color-brand);
}

li.wc_payment_method label {
  font-weight: var(--xs-fw-semibold);
  font-size: var(--xs-fs-sm);
  cursor: pointer;
}

li.wc_payment_method input[type="radio"] {
  margin-right: var(--xs-space-2);
  accent-color: var(--xs-color-brand);
}

.payment_box {
  margin-top: var(--xs-space-3);
  padding: var(--xs-space-4);
  background-color: var(--xs-color-surface);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
}

.payment_box p:first-child {
  margin-top: 0;
}

.payment_box p:last-child {
  margin-bottom: 0;
}

/* Terms + place order */
.woocommerce-terms-and-conditions-wrapper {
  margin: var(--xs-space-5) 0;
  font-size: var(--xs-fs-xs);
  color: var(--xs-color-text-muted);
}

.woocommerce-terms-and-conditions-wrapper a {
  color: var(--xs-color-text);
  text-decoration: underline;
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--xs-space-2);
}

.xs-terms-checkbox-row {
  margin: var(--xs-space-4) 0;
}

.xs-terms-checkbox-row label {
  display: flex;
  align-items: flex-start;
  gap: var(--xs-space-2);
  font-size: var(--xs-fs-sm);
  line-height: 1.5;
  color: var(--xs-color-text);
  cursor: pointer;
}

.xs-terms-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--xs-color-brand);
}

#place_order:disabled,
#place_order.xs-is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#place_order {
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Defensive corner-squaring
 * ---------------------------------------------------------------------------
 * WooCommerce's own bundled stylesheet (woocommerce.css) ships rounded
 * corners on buttons, inputs, and the Select2 dropdown it powers the
 * country field with. Our own rules above already zero these out by class,
 * but WooCommerce's stylesheet can register after ours depending on plugin
 * updates, so these are pinned with !important as a floor — every edge on
 * checkout stays straight regardless of load order.
 * ------------------------------------------------------------------------ */
body.woocommerce-checkout .button,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .select2-container .select2-selection--single,
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-checkout .select2-results__option,
body.woocommerce-checkout li.wc_payment_method,
body.woocommerce-checkout .payment_box,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .xs-checkout-section,
body.woocommerce-checkout .xs-checkout-summary,
body.woocommerce-checkout table.shop_table {
  border-radius: 0 !important;
}

/* WooCommerce error/notice wrappers, wherever the checkout emits them */
.woocommerce-NoticeGroup,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  padding: var(--xs-space-4);
  margin-bottom: var(--xs-space-5);
  border-radius: 0;
  font-size: var(--xs-fs-sm);
  list-style: none;
}

.woocommerce-error {
  background-color: var(--xs-red-100);
  color: var(--xs-color-brand);
  border: var(--xs-border-width) solid var(--xs-color-brand);
}

.woocommerce-message,
.woocommerce-info {
  background-color: var(--xs-color-surface);
  border: var(--xs-border-width) solid var(--xs-color-border);
}

/* ---------------------------------------------------------------------------
 * WooCommerce order-details output (order/order-details.php)
 * ---------------------------------------------------------------------------
 * Used by both a successful Order Tracking page lookup and My Account >
 * Orders > (single order). Previously completely unstyled — mirrors the
 * .xs-order-received__details table treatment used on the checkout
 * thank-you page for visual consistency between the two.
 * ------------------------------------------------------------------------ */
.woocommerce-order-details__title {
  margin: 0 0 var(--xs-space-4);
  font-size: var(--xs-fs-xl);
  font-weight: var(--xs-fw-bold);
}

table.order_details,
table.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--xs-space-7);
  font-size: var(--xs-fs-sm);
}

table.order_details th,
table.order_details td,
table.woocommerce-table th,
table.woocommerce-table td {
  padding-block: var(--xs-space-3);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  text-align: left;
}

table.order_details tfoot th,
table.woocommerce-table tfoot th {
  font-weight: var(--xs-fw-semibold);
}

.woocommerce-customer-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--xs-space-5);
  margin-bottom: var(--xs-space-7);
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--xs-fs-sm);
  line-height: var(--xs-lh-loose);
  padding: var(--xs-space-5);
  background-color: var(--xs-color-surface);
  border-radius: 0;
}

.woocommerce-column__title {
  font-size: var(--xs-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--xs-ls-wide);
  color: var(--xs-color-text-muted);
  margin: 0 0 var(--xs-space-2);
}

/* ---------------------------------------------------------------------------
 * Shipment tracking info (Order Tracking page + My Account order view)
 * ------------------------------------------------------------------------ */
.xs-order-tracking-info {
  margin-bottom: var(--xs-space-7);
  padding: var(--xs-space-5);
  background-color: var(--xs-color-surface);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: 0;
}

.xs-order-tracking-info__title {
  margin: 0 0 var(--xs-space-3);
  font-size: var(--xs-fs-md);
  font-weight: var(--xs-fw-bold);
}

.xs-order-tracking-info__row {
  margin: 0;
  font-size: var(--xs-fs-sm);
}

.xs-order-tracking-info__label {
  font-weight: var(--xs-fw-semibold);
  margin-right: var(--xs-space-2);
}

.xs-order-tracking-info__number {
  color: var(--xs-color-link);
}

a.xs-order-tracking-info__number:hover {
  color: var(--xs-color-link-hover);
}

/* ---------------------------------------------------------------------------
 * Order received (thank you)
 * ------------------------------------------------------------------------ */
.xs-order-received {
  max-width: 720px;
}

.xs-order-received__title {
  margin: 0 0 var(--xs-space-3);
  font-size: var(--xs-fs-3xl);
  font-weight: var(--xs-fw-bold);
}

.xs-order-received__subtitle {
  margin: 0 0 var(--xs-space-6);
  color: var(--xs-color-text-muted);
}

.xs-order-received__status--failed {
  padding: var(--xs-space-4);
  border: var(--xs-border-width) solid var(--xs-danger);
  background-color: var(--xs-red-100);
  border-radius: 0;
  color: var(--xs-color-brand);
}

.xs-order-received__meta {
  list-style: none;
  margin: 0 0 var(--xs-space-7);
  padding: var(--xs-space-5);
  background-color: var(--xs-color-surface);
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--xs-space-4);
}

.xs-order-received__meta-label {
  display: block;
  font-size: var(--xs-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--xs-ls-wide);
  color: var(--xs-color-text-muted);
  margin-bottom: var(--xs-space-1);
}

.xs-order-received__meta-value {
  font-weight: var(--xs-fw-semibold);
}

.xs-order-received__details {
  margin-bottom: var(--xs-space-7);
}

.xs-order-received__details table {
  width: 100%;
  border-collapse: collapse;
}

.xs-order-received__details th,
.xs-order-received__details td {
  padding-block: var(--xs-space-3);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  font-size: var(--xs-fs-sm);
  text-align: left;
}

.xs-order-received__details address {
  font-style: normal;
  font-size: var(--xs-fs-sm);
  line-height: var(--xs-lh-loose);
}

/* ---------------------------------------------------------------------------
 * Checkout mobile
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .xs-checkout-grid {
    grid-template-columns: 1fr;
  }

  .xs-checkout-summary {
    position: static;
  }

  .xs-checkout-fields .form-row-first,
  .xs-checkout-fields .form-row-last {
    width: 100%;
    margin-right: 0;
  }

  .xs-checkout-banner {
    margin-bottom: var(--xs-space-5);
  }

  .xs-checkout-banner__inner {
    padding: var(--xs-space-3) var(--xs-space-4);
  }

  .xs-checkout-banner__note {
    flex-basis: 100%;
  }
}