/**
 * US checkout field-level validation messages (see assets/js/checkout-us.js).
 * The message span is appended inside the .form-row, below the input.
 */
/* .woocommerce form .form-row .ae-phone-error {
	display: block;
	width: 100%;
	margin-top: 6px;
	color: #b22222;
	font-size: 13px;
	line-height: 1.4;
} */

/**
 * PW Gift Cards: never paint the redeem box in the payment panel.
 *
 * The box is RENDERED in the right-hand payment panel and BELONGS under the totals
 * beside the coupon. ae_pwgc_slot fires inside #payment (woocommerce/checkout/payment.php)
 * and the JS in functions-additions.php then relocates the node — a deliberate workaround,
 * because the hooks around the totals table sit between <tfoot> rows and a <div> parked
 * there is hoisted straight back out by the HTML parser. See placeGiftCard() there.
 *
 * What the customer saw was the gap between those two steps: the box painted in the
 * sidebar, then vanished when the JS moved it. On load (a 150ms timeout) and again after
 * EVERY update_order_review, because the payment panel is one of WooCommerce's AJAX
 * fragments and each refresh delivers a brand new copy of the box back into it.
 *
 * Hiding it here closes the gap rather than delaying anything. A delay would still show the
 * box in the wrong place first, just later; this way the node still travels, it is simply
 * never visible in the place it passes through. Once the JS lands it in the coupon panel it
 * is outside #payment, so this rule stops matching and it shows normally.
 *
 * WHY THIS FILE. The same rule is emitted from functions-additions.php as an inline
 * wp_head style, which is its natural home — but that file is enormous and had not reached
 * the server, so the fix never took effect. This stylesheet is 300-odd bytes and is already
 * enqueued on checkout (filemtime-versioned) by the code that IS deployed, so uploading it
 * alone is enough. Either copy is sufficient; both together are harmless. Do not delete one
 * without checking the other is live.
 *
 * #pwgc-redeem-gift-card-form is the id that is actually present. The rule this replaces
 * named #pwgc-redeem-gift-card-container, which is the CART page's wrapper — the checkout
 * template emits only <div id="pwgc-redeem-gift-card-form">, so it matched nothing here and
 * the box painted every time. The container id is kept alongside in case a future plugin
 * version wraps the checkout form the way the cart one is.
 *
 * Scoped to #payment, NOT to #order_review or .shipping-details-col: placeCoupon() falls
 * back to appending the coupon wrapper — gift card box inside it — straight into
 * #order_review when the totals table is missing, and a column-scoped rule would then hide
 * the RELOCATED box and leave the store with no gift-card field at all. Nothing but the
 * un-relocated server copy is ever inside #payment.
 */
.woocommerce-checkout #payment #pwgc-redeem-gift-card-form,
.woocommerce-checkout #payment #pwgc-redeem-gift-card-container {
	display: none !important;
}

/* ===========================================================================
   Checkout text contrast
   ---------------------------------------------------------------------------
   The muted text on this page was hard to read, and one token is most of the
   reason. --color-gray is #888888, which is 3.54:1 against white -- below the
   4.5:1 WCAG AA asks for normal text, and it is used at 12px on the PRODUCT /
   PRICE / QUANTITY / SUBTOTAL header row, where small size makes it worse.

   Fixed at the TOKEN rather than on each rule. custom-css.css reaches these
   colours through var( --color-gray, ... ), so redefining the variable lifts
   every one of them at once and leaves the design system intact -- there is no
   list of selectors here to fall out of step with the ones over there.

   Scoped to body.ae-checkout so the rest of the site is untouched. If the
   darker grey reads well here it can be promoted to the global token later;
   doing that now would change every page at once on the strength of one
   screenshot.

   Contrast ratios below are against the page's white background.
   =========================================================================== */

body.ae-checkout {
	/* 3.54:1 -> 5.92:1. Used at 12px on the PRODUCT / PRICE / QUANTITY /
	   SUBTOTAL header row, where small uppercase type needs more headroom over
	   the 4.5:1 minimum than a first pass at #6a6a6a (4.83:1) gave it. */
	--color-gray: #5f5f5f;

	/* 7.46:1 -> 9.73:1. The Subtotal / Sales Tax labels and the gift card's
	   number-and-balance line. It already passed AA, so this is legibility
	   rather than compliance -- and it keeps a clear step below the near-black
	   #1a1a1a on the order total, so the hierarchy still reads. */
	--color-gray-dark: #3f3f3f;
}

/* Both tokens are darkened above. --color-gray-dark already passed AA at 7.46:1,
   so raising it is about legibility rather than compliance -- but it is kept a
   clear step lighter than the #1a1a1a on the order total, so "Subtotal" and
   "Sales Tax" still read as subordinate to "Total" rather than flattening into
   one block of near-black. */

/* Placeholders were the other half of it, and the cause is not the colour.
   Firefox applies its own opacity to ::placeholder on top of whatever colour is
   set, so a grey that measures fine in the stylesheet still renders washed out.
   opacity:1 is what stops that; the colour is then stated explicitly rather
   than left to each browser's default, which varies from #757575 to near
   #a9a9a9. */
body.ae-checkout ::placeholder {
	color: #5f5f5f;
	opacity: 1;
}

body.ae-checkout ::-webkit-input-placeholder {
	color: #5f5f5f;
	opacity: 1;
}

/* --- Weight, where colour alone was never going to be enough --------------
   Two places on this page are set in type small or light enough that darkening
   them still left them looking faint next to the rest of the card. Contrast is
   a ratio between two colours; it says nothing about stroke thickness, and a
   12px uppercase label at weight 400 reads lighter than 14px body text at the
   same colour. These lift the stroke rather than the colour. */

/* The column header row: 12px, uppercase, letter-spaced. All three make type
   look thinner, and it is the row the eye uses to parse the table. */
body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table thead th {
	font-weight: 600;
}

/* "Have a coupon?" / "Have a gift card?" and the outlined buttons under them.
   Brand red on white is only about 5.7:1, and at weight 400 in an outlined
   button it reads as disabled rather than as an action. */
body.ae-checkout .ae-coupon-after-totals label,
body.ae-checkout .ae-coupon-after-totals > label,
body.ae-checkout .ae-order-items #pwgc-redeem-gift-card-form label {
	color: var( --color-gray-dark, #3f3f3f );
	font-weight: 600;
}

body.ae-checkout .ae-coupon-after-totals button,
body.ae-checkout .ae-coupon-after-totals input[type="submit"],
body.ae-checkout .ae-order-items #pwgc-redeem-gift-card-form input[type="submit"] {
	font-weight: 600;
}

/* ===========================================================================
   Order totals: full-width table, split 50/50
   ---------------------------------------------------------------------------
   WHY THIS FILE AND NOT custom-css.css.

   The same rules are in custom-css.css and are correct there, but that file is
   135 KB on the server and about 9 KB LONGER than the copy in the repo -- it
   carries content that exists only live. So it cannot safely be uploaded whole,
   and pasting into it by hand has not happened. Net effect: the fix has never
   actually reached the server.

   This file is 7 KB, is already enqueued on checkout, and diverges from the
   server copy by almost nothing, so it can be uploaded as a whole file with no
   risk of destroying anything. That is the same reasoning that created this
   file in the first place -- see the note at the top of it, where a rule in
   functions-additions.php never took effect because that file was too big to
   land reliably.

   It also loads LATER than custom-css.css, theme.css and aecb-checkout.css
   (second-to-last of the theme's sheets), so equal-specificity rules here win
   on source order regardless of what those contain.

   WHAT IT DOES.

     table-layout:fixed is the mechanism, and the reason earlier attempts did
     nothing. Under the default `auto`, a percentage column width is only a
     hint -- the browser sizes columns to their content and overrides it. That
     is why the amounts kept landing wherever the figures ended rather than at
     the halfway mark, however many !importants were added. `fixed` makes the
     declared widths binding.

     The trade-off: under `fixed`, content that does not fit WRAPS rather than
     widening its column, so a long coupon code or shipping method name breaks
     onto a second line instead of eating into the other half. Hence the
     wrapping properties on the cells -- without them long text would overflow
     its half instead of wrapping.
   =========================================================================== */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table,
body.ae-checkout .ae-order-items table.ae-order-totals__table {
	width: 100% !important;
	max-width: none !important;
	table-layout: fixed !important;
}

/* Left half: labels. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot th {
	width: 50% !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word;
}

/* Right half: amounts, on the outer edge of their own 50%. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot td {
	width: 50% !important;
	text-align: right !important;
	white-space: normal !important;
	overflow-wrap: break-word;
}

/* The shipping cell holds a radio list, not a figure, so the alignment has to
   reach the list items themselves. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method,
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method li {
	margin-left: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
	text-align: right !important;
}

/* The coupon row's Remove control. */
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon {
	margin-left: 8px;
	color: var( --color-gray, #6a6a6a );
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon:hover,
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon:focus {
	color: var( --color-primary, #b22222 );
	text-decoration: underline;
}