/**
 * Checkout.
 *
 * Loaded only on the checkout page (fg_enqueue_checkout_styles() in
 * functions.php). Markup: woocommerce/checkout/form-checkout.php
 *
 * ---------------------------------------------------------------------------
 * TWO THINGS TO KNOW BEFORE EDITING
 * ---------------------------------------------------------------------------
 *
 * 1. LOAD ORDER WORKS AGAINST US.
 *    header.php calls get_template_part('exthead') AFTER wp_head(), so the
 *    external stylesheets from www.fangraphs.com/dist/css/ always load after
 *    this file:
 *        8. fg-checkout-css     <- this file
 *       12. blog-style.css      <- the rules being overridden
 *    A rule of EQUAL specificity therefore loses. Overrides here are one level
 *    more specific (usually via `form.checkout`). That is load-bearing.
 *
 * 2. OVERRIDE EVERY DECLARATION, NOT JUST THE ONE YOU CARE ABOUT.
 *    blog-style.css bundles several properties per rule. Overriding `width`
 *    while leaving their `max-width` in place is what pinned the order summary
 *    to half its card. The known offenders, all reset below:
 *        .fp__woo-commerce .form-row            { min-width:300px; max-width:400px }
 *        .fp__woo-commerce .checkout .col-1/-2  { width:50% }
 *        table.woocommerce-checkout-review-order-table
 *                                               { max-width:500px; padding:10px;
 *                                                 background:#efefef }
 *        .fullpostentry                         { max-width:600px; georgia 12pt }
 */

:root {
	--fg-green: #50ae26;
	--fg-green-dark: #46991f;
	--fg-ink: #1c1e21;
	--fg-muted: #6b7280;
	--fg-line: #e2e5e8;
	--fg-field: #b8bfc6; /* input borders; darkened from the original #cfd4d9 for contrast */
	--fg-surface: #ffffff;
	--fg-radius: 0; /* square corners across the store, per design */
}

/* -------------------------------------------------------------------------
 * Container.
 *
 * page-woo.php:14 wraps the_content() -- and therefore the whole
 * [woocommerce_checkout] shortcode -- in .fullpostentry, which blog-style.css
 * caps at 600px and sets in georgia/12pt. That is article typography around a
 * payment form. (page-woo-myaccount.php already fights the same rule inline.)
 *
 * The column is capped at 560px on purpose. A checkout form should be one
 * readable measure wide; stretching it does not help anyone.
 * ---------------------------------------------------------------------- */
/*
 * #content carries the column width so the page's "Checkout" heading -- which
 * page-woo.php renders OUTSIDE .fullpostentry -- lines up with the cards.
 * Centring only the form left the title stranded at the far left.
 */
body.fg-checkout-page #content {
	max-width: 580px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/*
 * The page title ("Checkout", the h2 page-woo.php renders above the content).
 *
 * blog-style.css gives every heading `border-bottom: 3px solid #50ae26;
 * max-width: 500px`, so its green underline stopped 80px short of the 580px
 * column. Let it span the full column.
 *
 * The bottom margin also carries the gap between the title and the first card.
 * That spacing used to come incidentally from the login/coupon notice lines --
 * which form-login.php only renders for logged-OUT visitors, so logged-in
 * customers had the first card jammed against the title bar.
 */
body.fg-checkout-page #content > h2 {
	max-width: none;
	width: 100%;
	margin: 0 0 18px;
	box-sizing: border-box;
}

body.fg-checkout-page .fullpostentry,
body.fg-checkout-page #blogcontent,
body.fg-checkout-page .fp__woo-commerce #blogcontent {
	max-width: none;
	width: 100%;
	padding: 0; /* #blogcontent ships 10px side padding; the gutter is owned by #content alone */
	box-sizing: border-box;
}

body.fg-checkout-page .fullpostentry {
	padding: 0;
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.fp__woo-commerce .fg-checkout__col {
	max-width: none;
	color: var(--fg-ink);
}

.fp__woo-commerce .fg-checkout,
.fp__woo-commerce .fg-checkout *,
.fp__woo-commerce .fg-card,
.fp__woo-commerce .fg-card * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */
.fp__woo-commerce .fg-card {
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	margin: 0 0 14px;
}

/*
 * Card titles are <h2>, and blog-style.css gives EVERY heading
 *   .fp__woo-commerce h1,h2,h3… { border-bottom: 3px solid #50ae26;
 *                                 max-width: 500px }
 * which is why the divider was green, 3px, and stopped short of the card edge.
 * Both have to be reset, along with the global 5px heading side margins.
 */
.fp__woo-commerce .fg-card__title {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fg-ink);
	background: none;
	text-transform: none;
	letter-spacing: 0;
}

.fp__woo-commerce .fg-card__body {
	padding: 18px;
}

/* -------------------------------------------------------------------------
 * Order summary
 * ---------------------------------------------------------------------- */
/*
 * `table-layout: fixed` matters here. With the default auto layout a table
 * grows past `width:100%` to fit its content, so the long product name kept the
 * summary wider than its card and pushed the amounts over the right edge.
 * Fixed layout makes the declared widths authoritative and forces the name to
 * wrap instead.
 */
.fp__woo-commerce form.checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	max-width: none;
	table-layout: fixed;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	background-color: transparent;
}

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

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table th,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table td {
	padding: 9px 0;
	border: 0;
	background: none;
	font-size: 14px;
	vertical-align: top;
}

/*
 * Cell roles, NOT element names.
 *
 * WooCommerce's review-order.php uses <td> for BOTH cells of the product row
 * (td.product-name and td.product-total) and only switches to <th> for the
 * tfoot labels. Styling on the bare `td` selector therefore hit the product
 * name as well, pinning it to 115px with nowrap -- which is why the title ran
 * straight through the price instead of wrapping.
 *
 * Label column: flexible and wrapping. Amount column: fixed and unbreakable.
 */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table td.product-name,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot th {
	width: auto;
	text-align: left;
	font-weight: 400;
	color: var(--fg-ink);
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Fixed width, not a percentage: under table-layout:fixed a percentage would
   collapse this below the width of "$80.00 / year". */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table td.product-total,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot td {
	width: 115px;
	padding-left: 12px;
	text-align: right;
	white-space: nowrap;
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tbody tr:first-child th,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tbody tr:first-child td {
	padding-top: 0;
}

.fp__woo-commerce .fg-summary__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.fp__woo-commerce .fg-summary__thumb {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 0;
	overflow: hidden;
	background: var(--fg-line);
}

.fp__woo-commerce .fg-summary__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fp__woo-commerce .fg-summary__name {
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Totals */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td {
	border-top: 1px solid var(--fg-line);
	padding-top: 12px;
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 18px;
	font-weight: 700;
	padding-top: 12px;
	border-top: 1px solid var(--fg-line);
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	color: var(--fg-green);
}

/*
 * Shipping methods (physical carts). cart-shipping.php renders them as
 * <ul class="woocommerce-shipping-methods"> with a radio + label per method.
 * woocommerce.css normally strips the list chrome, but this theme disables it
 * (`woocommerce_enqueue_styles => __return_false`), so the ul kept its default
 * bullet and ~40px indent -- which pushed "Free Shipping" past the card edge.
 */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods li + li {
	margin-top: 6px;
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods label {
	display: inline;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--fg-ink);
}

/* Method names ("Flat rate: $5.00") can exceed the 115px amount column, so let
   this one cell wrap instead of clipping. Column width is unaffected -- under
   table-layout:fixed it is set by the first row. */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	white-space: normal;
}

/* Recurring totals stay -- this is an auto-renewing subscription and the
   renewal amount must remain visible -- but quietly, so they do not compete
   with the amount being charged today. */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr[class*="recurring"] th,
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr[class*="recurring"] td {
	font-size: 12px;
	font-weight: 400;
	color: var(--fg-muted);
	border-top: 0;
	padding-top: 4px;
	padding-bottom: 0;
}

/* Plan switches: the "first charge on DATE" explainer row printed by
   fg_switch_first_charge_row(). Full-width prose, overriding tfoot's
   right-aligned 115px value-column treatment. */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.fg-switch-charge-note td {
	width: auto;
	white-space: normal;
	text-align: left;
	padding: 0 0 2px;
	border-top: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fg-muted);
}

/* The divider is on this inner div: its margin-top is the breathing room
   between the recurring-total row and the line (a td border can't have one). */
.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.fg-switch-charge-note .fg-switch-charge-note__inner {
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--fg-line);
}

.fp__woo-commerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.fg-switch-charge-note strong {
	color: var(--fg-ink);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Coupon widget.
 *
 * Sits between the order summary and the details card. Deliberately quiet: the
 * prompt is a known abandonment trigger (people leave to hunt for a code), but
 * gift cards are a real product here so it has to stay reachable.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce .fg-coupon {
	margin: -4px 0 14px;
	padding: 0 2px;
}

.fp__woo-commerce .fg-coupon__toggle {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-green);
	cursor: pointer;
	text-decoration: underline;
}

.fp__woo-commerce .fg-coupon__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.fp__woo-commerce .fg-coupon__panel[hidden] {
	display: none;
}

.fp__woo-commerce form.checkout .fg-coupon__input {
	flex: 1 1 160px;
	width: auto;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	font-size: 16px;
	text-transform: uppercase;
}

.fp__woo-commerce .fg-coupon__apply {
	flex: 0 0 auto;
	padding: 11px 20px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-ink);
	cursor: pointer;
}

.fp__woo-commerce .fg-coupon__apply:hover:not(:disabled) {
	border-color: var(--fg-green);
	color: var(--fg-green);
}

.fp__woo-commerce .fg-coupon__apply:disabled {
	opacity: 0.55;
	cursor: default;
}

.fp__woo-commerce .fg-coupon__msg {
	flex: 1 1 100%;
	margin: 0;
	font-size: 13px;
	color: var(--fg-muted);
}

.fp__woo-commerce .fg-coupon__msg--error {
	color: #d63638;
}

/* -------------------------------------------------------------------------
 * Fields
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout .col2-set,
.fp__woo-commerce form.checkout .col2-set .col-1,
.fp__woo-commerce form.checkout .col2-set .col-2 {
	width: 100%;
	display: block;
	float: none;
	padding: 0;
}

.fp__woo-commerce form.checkout .form-row {
	min-width: 0;
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
}

.fp__woo-commerce form.checkout .form-row:last-child {
	margin-bottom: 0;
}

/*
 * Breathing room between the billing group and the account group.
 *
 * ZIP is the last .form-row inside .woocommerce-billing-fields, so the
 * :last-child rule above zeroes its bottom margin -- which landed the "Account
 * username" label tight underneath it. Restore the rhythm, plus a little extra
 * so the change of subject reads.
 */
.fp__woo-commerce form.checkout .woocommerce-account-fields {
	margin-top: 22px;
}

.fp__woo-commerce form.checkout .woocommerce-billing-fields > h3,
.fp__woo-commerce form.checkout .woocommerce-account-fields > h3,
.fp__woo-commerce form.checkout #order_review_heading {
	display: none;
}

/*
 * "Ship to a different address?" (physical carts). It is a checkbox toggle that
 * WooCommerce renders inside an <h3>, so it caught the theme's global heading
 * rule -- 3px green underline capped at max-width:500px, stopping short of the
 * column -- and sat flush against the first shipping field. Unlike the headings
 * hidden above, this one must stay: it IS the control.
 */
.fp__woo-commerce form.checkout h3#ship-to-different-address {
	display: block;
	max-width: none;
	width: 100%;
	margin: 18px 0 18px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 3px solid var(--fg-green);
	box-sizing: border-box;
}

.fp__woo-commerce form.checkout h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-ink);
	cursor: pointer;
}

.fp__woo-commerce form.checkout h3#ship-to-different-address input[type="checkbox"] {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--fg-green);
}

.fp__woo-commerce form.checkout .form-row label {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-ink);
}

.fp__woo-commerce form.checkout .form-row .required {
	color: #d63638;
	border: 0;
	text-decoration: none;
}

.fp__woo-commerce form.checkout .form-row input.input-text,
.fp__woo-commerce form.checkout .form-row select {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	font-size: 16px; /* 16px stops iOS Safari zooming on focus */
	line-height: 1.3;
	color: var(--fg-ink);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * The country field is a select2 widget, not a plain <select>. Its own CSS
 * fixes the control at 28px tall and line-heights the label to match, so simply
 * adding padding pushed the text through the top border. Height has to go to
 * auto and the arrow has to be re-centred.
 */
.fp__woo-commerce form.checkout .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 46px;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	box-sizing: border-box;
}

.fp__woo-commerce form.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.3;
	font-size: 16px;
	/* !important because blog-style.css forces
	   `.fp__woo-commerce .select2-selection__rendered { color:#000 !important }`
	   (the "flashes right, then turns black" bug in dark mode). Both being
	   important, higher specificity -- ours -- wins. */
	color: var(--fg-ink) !important;
}

.fp__woo-commerce form.checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	height: 20px;
	transform: translateY(-50%);
}

.fp__woo-commerce form.checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
}

.fp__woo-commerce form.checkout .form-row input.input-text::placeholder {
	color: #9aa1a9;
}

.fp__woo-commerce form.checkout .form-row input.input-text:focus,
.fp__woo-commerce form.checkout .form-row select:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

/* Pair short fields two-across once there is room for them to stay legible. */
@media (min-width: 480px) {
	.fp__woo-commerce form.checkout .form-row-first,
	.fp__woo-commerce form.checkout .form-row-last {
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	.fp__woo-commerce form.checkout .form-row-first {
		margin-right: 12px;
	}
}

/*
 * Password reveal.
 *
 * WooCommerce injects its own <button class="show-password-input"> next to
 * password fields, styled by woocommerce.css -- which this theme disables via
 * `woocommerce_enqueue_styles => __return_false`. The result was a raw 16x6px
 * browser button with an outset border sitting under the password field: the
 * little grey artefact visible in every screenshot of this page. Hide theirs
 * and use the labelled one added by checkout.js instead.
 */
/*
 * NOT scoped to form.checkout: WooCommerce's password-strength-meter script
 * injects this button at runtime next to EVERY password field on the page,
 * including the returning-customer login form, which sits outside the checkout
 * form. Scoping to form.checkout left the login one visible and unstyled.
 * This stylesheet only loads on checkout, so an unscoped selector is safe here.
 */
.fp__woo-commerce .show-password-input {
	display: none;
}

.fp__woo-commerce .fg-reveal-wrap {
	position: relative;
	display: block;
}

.fp__woo-commerce .fg-reveal {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	color: var(--fg-muted);
	line-height: 0;
}

.fp__woo-commerce .fg-reveal:hover {
	color: var(--fg-ink);
}

/* The eye / eye-off SVGs are injected by checkout.js; only one shows at a time.
   Eye while hidden ("click to show"), eye-off while revealed ("click to hide"). */
.fp__woo-commerce .fg-reveal__eye,
.fp__woo-commerce .fg-reveal__eye-off {
	display: none;
	line-height: 0;
}

.fp__woo-commerce .fg-reveal:not( .fg-reveal--on ) .fg-reveal__eye,
.fp__woo-commerce .fg-reveal--on .fg-reveal__eye-off {
	display: block;
}

/* -------------------------------------------------------------------------
 * Validation.
 *
 * WooCommerce flags empty required fields .woocommerce-invalid before the
 * customer has touched anything, and blog-style.css paints that with a 3px red
 * outline -- so the form looked full of errors on first paint. Hold the styling
 * back until a submit is attempted (checkout.js adds .fg-validated).
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout .woocommerce-invalid input {
	outline: none;
}

.fp__woo-commerce form.checkout.fg-validated .woocommerce-invalid input.input-text {
	border-color: #d63638;
	outline: none;
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12);
}

/* -------------------------------------------------------------------------
 * Gift delivery (Smart Coupons). Renders when the cart holds a gift card /
 * coupon product, inside the details section's col-2. The plugin ships its
 * own stylesheet that loads AFTER this file, so every rule here carries the
 * form.checkout scoping for the specificity edge -- same discipline as the
 * blog-style.css overrides.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout .gift-certificate.sc_info_box {
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-shadow: none;
	margin: 14px 0 0;
	/* !important because the plugin ships `.sc_info_box { padding: .5em 1em 0
	   !important }` -- ZERO bottom padding, forced -- which no amount of
	   specificity outranks and left the last textarea flush against the
	   card's bottom border. */
	padding: 15px 18px 18px !important;
}

/* Plugin heading catches the theme's green h3 underline -- card title style. */
.fp__woo-commerce form.checkout .gift-certificate.sc_info_box h3 {
	max-width: none;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-ink);
	text-align: left;
}

.fp__woo-commerce form.checkout .gift-certificate-show-form > p {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--fg-ink);
	text-align: left;
}

/* Radio rows: left-aligned, green accents, no plugin divider line. */
.fp__woo-commerce form.checkout .gift-certificate ul.show_hide_list,
.fp__woo-commerce form.checkout .gift-certificate ul.single_multi_list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	text-align: left;
}

.fp__woo-commerce form.checkout .gift-certificate ul.show_hide_list li,
.fp__woo-commerce form.checkout .gift-certificate ul.single_multi_list li {
	list-style: none;
	display: flex;
	/* wrap: the one-person/different-people sub-<ul> is a CHILD of the
	   "Gift to someone else" <li>; without this it rides the flex row and
	   renders BESIDE its parent label instead of underneath it. */
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	text-align: left;
}

/* The revealed sub-list drops to its own full-width line, indented past the
   parent radio (16px control + 8px gap). The plugin hides it via its own
   stylesheet and reveals it with an inline display from JS, so layout has
   to live here, on the always-present rules. */
.fp__woo-commerce form.checkout .gift-certificate ul.show_hide_list ul.single_multi_list {
	flex: 1 1 100%;
	margin: 2px 0 0 24px;
}

.fp__woo-commerce form.checkout .gift-certificate ul.single_multi_list li:last-child {
	margin-bottom: 0;
}

/* Custom-drawn radios: the browser-default control wearing accent-color
   rendered as a heavy dark ring here; drawing it removes the guesswork.
   border-radius is the circle itself, not corner rounding. */
.fp__woo-commerce form.checkout .gift-certificate input[type="radio"] {
	appearance: none;
	/* Hard clamp: some engines (Safari notably) stretch appearance:none
	   radios vertically; nothing may resize this box. */
	min-width: 18px;
	max-width: 18px;
	min-height: 18px;
	max-height: 18px;
	aspect-ratio: 1;
	line-height: 1;

	-webkit-appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
	border: 2px solid var(--fg-field);
	border-radius: 50%;
	background: var(--fg-surface);
	cursor: pointer;
}

.fp__woo-commerce form.checkout .gift-certificate input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fg-green);
	transform: scale( 0 );
	transition: transform 0.1s ease;
}

.fp__woo-commerce form.checkout .gift-certificate input[type="radio"]:checked {
	border-color: var(--fg-green);
}

.fp__woo-commerce form.checkout .gift-certificate input[type="radio"]:checked::before {
	transform: scale( 1 );
}

.fp__woo-commerce form.checkout .gift-certificate input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
}

.fp__woo-commerce form.checkout .gift-certificate label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-ink);
	cursor: pointer;
}

/* Recipient form: fields matching the rest of the checkout. The textarea
   otherwise renders in the browser's monospace default. */
.fp__woo-commerce form.checkout .gift-certificate .form_table,
.fp__woo-commerce form.checkout .gift-certificate .email_amount,
.fp__woo-commerce form.checkout .gift-certificate .email,
.fp__woo-commerce form.checkout .gift-certificate .message_row,
.fp__woo-commerce form.checkout .gift-certificate .sc_message {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* "Send Recurring Product Discount coupon of 100%" -- the plugin describing
   its internal coupon above every email field. Meaningless to the buyer. */
.fp__woo-commerce form.checkout .gift-certificate .email_amount .amount {
	display: none;
}

/* With the jargon line gone, consecutive recipient blocks ("Send to
   different people") need their own separator. */
.fp__woo-commerce form.checkout .gift-certificate .form_table + .form_table {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fg-line);
}

/* Number each per-person block: "Gift 1", "Gift 2", ... Scoped to the
   multi-recipient container only -- the #...-single form is ONE address for
   every gift in the order, so a number there would be wrong. CSS counters,
   because the blocks are plugin markup we don't render. */
.fp__woo-commerce form.checkout .gift-certificate #gift-certificate-receiver-form-multi {
	counter-reset: fg-gift;
}

.fp__woo-commerce form.checkout .gift-certificate #gift-certificate-receiver-form-multi .form_table {
	counter-increment: fg-gift;
}

.fp__woo-commerce form.checkout .gift-certificate #gift-certificate-receiver-form-multi .form_table::before {
	content: "Gift " counter( fg-gift );
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

/* checkout.js stamps each block with the product actually being gifted
   ("Membership Gift Card 1") via data-fg-label; the counter text above is
   the no-JS fallback. */
.fp__woo-commerce form.checkout .gift-certificate #gift-certificate-receiver-form-multi .form_table[data-fg-label]::before {
	content: attr( data-fg-label );
}

.fp__woo-commerce form.checkout .gift-certificate input.gift_receiver_email,
.fp__woo-commerce form.checkout .gift-certificate textarea.gift_receiver_message {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0 0 12px;
	padding: 12px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fg-ink);
}

.fp__woo-commerce form.checkout .gift-certificate textarea.gift_receiver_message {
	margin-bottom: 0;
	resize: vertical;
	min-height: 96px;
}

.fp__woo-commerce form.checkout .gift-certificate input.gift_receiver_email:focus,
.fp__woo-commerce form.checkout .gift-certificate textarea.gift_receiver_message:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

.fp__woo-commerce form.checkout .gift-certificate .gift-certificate-receiver-detail-form {
	/* Same divider treatment as between the recipient blocks, so the radio
	   choices and the first block get the boundary the later blocks have. */
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fg-line);
}

/* -------------------------------------------------------------------------
 * Payment
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout #payment,
.fp__woo-commerce form.checkout .woocommerce-checkout-payment {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.fp__woo-commerce form.checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fp__woo-commerce form.checkout #payment ul.payment_methods > li {
	flex: 1 1 140px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
}

/* One gateway means there is nothing to choose between -- drop the chrome. */
.fp__woo-commerce form.checkout #payment ul.payment_methods > li:only-child {
	border: 0;
	flex-basis: 100%;
}

.fp__woo-commerce form.checkout #payment ul.payment_methods > li:only-child > label {
	display: none;
}

.fp__woo-commerce form.checkout #payment ul.payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.fp__woo-commerce form.checkout #payment div.payment_box {
	background: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--fg-ink);
}

/* -------------------------------------------------------------------------
 * Saved payment methods (returning customers with cards on file): tidy
 * radio rows with the store's drawn radios, matching the gift section.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods li {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods li label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--fg-ink);
	cursor: pointer;
}

/* Same custom-drawn radio as the gift section -- the browser default was
   rendering the heavy blue ring. */
.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods input[type="radio"] {
	appearance: none;
	/* Hard clamp: some engines (Safari notably) stretch appearance:none
	   radios vertically; nothing may resize this box. */
	min-width: 18px;
	max-width: 18px;
	min-height: 18px;
	max-height: 18px;
	aspect-ratio: 1;
	line-height: 1;

	-webkit-appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
	border: 2px solid var(--fg-field);
	border-radius: 50%; /* the circle itself, not corner rounding */
	background: var(--fg-surface);
	cursor: pointer;
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fg-green);
	transform: scale( 0 );
	transition: transform 0.1s ease;
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods input[type="radio"]:checked {
	border-color: var(--fg-green);
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods input[type="radio"]:checked::before {
	transform: scale( 1 );
}

.fp__woo-commerce form.checkout #payment ul.woocommerce-SavedPaymentMethods input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
}

/* The Stripe card form lives in a <fieldset> that only gets content mounted
   when "Use a new payment method" is chosen; until then the browser's
   default fieldset border drew it as a stray empty box under the list. */
.fp__woo-commerce form.checkout #payment fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.fp__woo-commerce form.checkout #payment div.payment_box::before {
	display: none;
}

/*
 * "Save payment information to my account" (and any other checkbox row the
 * gateway renders inside the payment box). The theme's blanket
 * `.form-row input { display:block; width:100% }` stacked the checkbox on its
 * own line above the label -- same failure as "Remember me" on the login form.
 * Stripe's own inline width:auto only fixes the width, not the display.
 */
.fp__woo-commerce form.checkout #payment .form-row.woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.fp__woo-commerce form.checkout #payment .form-row.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 2px 0 0; /* optically aligns with the first text line */
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--fg-green);
}

.fp__woo-commerce form.checkout #payment .form-row.woocommerce-SavedPaymentMethods-saveNew label {
	display: inline;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fg-ink);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Pay button
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout #payment .form-row.place-order {
	margin: 18px 0 0;
	padding: 0;
}

.fp__woo-commerce form.checkout #place_order {
	display: block;
	width: 100%;
	padding: 17px 24px;
	border: 0;
	border-radius: 0;
	background: var(--fg-green);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fp__woo-commerce form.checkout #place_order:hover,
.fp__woo-commerce form.checkout #place_order:focus {
	background: var(--fg-green-dark);
	opacity: 1;
}

.fp__woo-commerce .fg-checkout__reassurance {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--fg-muted);
}

.fp__woo-commerce .fg-checkout__lock {
	flex: 0 0 11px;
	width: 11px;
	height: 9px;
	position: relative;
	border: 1.5px solid var(--fg-muted);
	border-radius: 2px;
	margin-top: 3px;
}

.fp__woo-commerce .fg-checkout__lock::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -6px;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border: 1.5px solid var(--fg-muted);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.fp__woo-commerce .fg-checkout__terms {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fg-muted);
	text-align: center;
}

.fp__woo-commerce .fg-checkout__terms a {
	color: var(--fg-muted);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * WooCommerce notices: errors ("Your card number is incomplete."), messages
 * ("Coupon has been removed.") and info.
 *
 * Where they come from: templates/notices/error.php renders errors as
 * <ul class="woocommerce-error" role="alert"> with one <li> per notice;
 * success.php renders <div class="woocommerce-message">. Checkout validation
 * failures arrive via the checkout AJAX response and are injected at the top of
 * the form; coupon/cart notices are printed above it by wc_print_notices().
 *
 * Their old look -- grey slab, heavy drop shadow -- was blog-style.css:
 *   { background-color:#eee; box-shadow: 0 3px 3px rgba(0,0,0,.3), …;
 *     padding: 20px 10px; margin-top: 40px }
 * Restyled to match the cards: same border, radius and type scale, with a
 * coloured accent edge for severity.
 *
 * NOTE: this block must stay ABOVE the login/coupon toggle rules below. Those
 * make their .woocommerce-info a bare inline line, tie on specificity, and rely
 * on winning by file order.
 * ---------------------------------------------------------------------- */
body.fg-checkout-page .fp__woo-commerce .woocommerce-error,
body.fg-checkout-page .fp__woo-commerce .woocommerce-message,
body.fg-checkout-page .fp__woo-commerce .woocommerce-info {
	box-shadow: none;
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
	margin: 0 0 14px;
	padding: 13px 16px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: left;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-error {
	border-left-color: #d63638;
	color: #b32d2e;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-error li + li {
	margin-top: 6px;
}

/* -------------------------------------------------------------------------
 * Notices above the form.
 *
 * The login prompt matters (returning members) and the coupon toggle has to
 * stay (gift cards), but neither should look like a wall between the customer
 * and the form. Quiet inline links, centred, above the first card.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce .woocommerce-form-login-toggle,
.fp__woo-commerce .woocommerce-form-coupon-toggle {
	max-width: none;
	margin: 0;
}

/*
 * blog-style.css styles .woocommerce-info as a raised slab:
 *   { background-color:#eee;
 *     box-shadow: 0 3px 3px rgba(0,0,0,.3), 0 6px 6px rgba(0,0,0,.1);
 *     padding:20px 10px; margin-top:40px }
 *
 * box-shadow has to be reset explicitly -- clearing background/border/padding
 * alone left a floating drop-shadowed rectangle around the two links.
 */
.fp__woo-commerce .woocommerce-form-login-toggle .woocommerce-info,
.fp__woo-commerce .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	background-color: transparent;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 8px;
	margin: 0;
	font-size: 14px;
	color: var(--fg-muted);
	text-align: center;
}

.fp__woo-commerce .woocommerce-form-login-toggle .woocommerce-info::before,
.fp__woo-commerce .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.fp__woo-commerce .woocommerce-form-login-toggle a,
.fp__woo-commerce .woocommerce-form-coupon-toggle a {
	color: var(--fg-green);
	font-weight: 700;
}

.fp__woo-commerce form.checkout_coupon,
.fp__woo-commerce form.login {
	max-width: none;
	margin: 0 auto 14px;
	padding: 18px;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	box-sizing: border-box;
}

/*
 * The login form lives OUTSIDE form.checkout, so none of the field styling
 * above reaches it. Match it here so the returning-customer path looks like the
 * rest of the page -- and so the reveal button that checkout.js adds has a
 * properly sized box to sit in.
 */
.fp__woo-commerce form.login .form-row {
	min-width: 0;
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
}

.fp__woo-commerce form.login label {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-ink);
}

.fp__woo-commerce form.login input[type="text"],
.fp__woo-commerce form.login input[type="password"] {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	font-size: 16px;
	line-height: 1.3;
	color: var(--fg-ink);
	box-sizing: border-box;
}

.fp__woo-commerce form.login input[type="text"]:focus,
.fp__woo-commerce form.login input[type="password"]:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

/*
 * "Remember me". blog-style.css applies `display:block; width:100%;
 * padding:10px 5px` to EVERY input inside a .form-row, checkboxes included --
 * which stretched the checkbox into a full-width block box (the tick glyph
 * draws centred inside it, so it appeared floating mid-page) and pushed the
 * label text onto its own line. Restore it to a normal inline checkbox sitting
 * beside its text.
 */
.fp__woo-commerce form.login label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	/* The checkbox label and the Login button share one <p class="form-row">,
	   so with the button's own margin zeroed this bottom margin is the only
	   thing separating them. */
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 400;
}

.fp__woo-commerce form.login input[type="checkbox"] {
	display: inline-block;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--fg-green);
}

.fp__woo-commerce form.login button[type="submit"] {
	margin: 0; /* the theme's global button[type=submit] rule adds its own */
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--fg-green);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/*
 * "Lost your password?". It is a bare <p> rather than a .form-row, so the
 * form-row resets above never touched it and it kept the article-typography
 * paragraph margins -- a large blank band around one small link.
 *
 * Every direct child <p> gets its margin set explicitly. (An earlier attempt
 * used .form-row:last-of-type to trim the button row, which matches nothing:
 * :last-of-type counts element type, and the last <p> in the form is the
 * lost-password one, which is not a .form-row.)
 */
.fp__woo-commerce form.login > p {
	margin: 0 0 14px;
}

.fp__woo-commerce form.login .lost_password {
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.fp__woo-commerce form.login .lost_password a {
	color: var(--fg-green);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Order-attribution element holds only hidden inputs but is an unknown element,
 * so it renders inline as a stray box. Hidden inputs still submit when their
 * parent is display:none.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce wc-order-attribution-inputs {
	display: none;
}

/* -------------------------------------------------------------------------
 * Order confirmation (the order-received endpoint).
 *
 * Everything renders inside div.woocommerce-order (checkout/thankyou.php), so
 * that is the scope -- my-account order views share some of these classes and
 * are deliberately untouched. The page gets body.fg-checkout-page from
 * fg_checkout_body_class() and this stylesheet from the checkout enqueue.
 *
 * Without this, the page rendered raw: the order overview as a bulleted list,
 * unstyled tables, italic address -- woocommerce.css normally handles all of
 * it and this theme disables woocommerce.css.
 * ---------------------------------------------------------------------- */

/* Success lead: same language as the site notices -- card with a green edge. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-thankyou-order-received {
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
	margin: 0 0 14px;
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fg-ink);
}

/* Order overview: was a browser-default bulleted list. Now a card of
   label/value rows. Each li is "Label: <strong>value</strong>". */
body.fg-checkout-page .fp__woo-commerce ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 14px;
	padding: 6px 18px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
}

body.fg-checkout-page .fp__woo-commerce ul.woocommerce-order-overview li {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	font-size: 14px;
	color: var(--fg-muted);
	border-bottom: 1px solid var(--fg-line);
}

body.fg-checkout-page .fp__woo-commerce ul.woocommerce-order-overview li:last-child {
	border-bottom: 0;
}

body.fg-checkout-page .fp__woo-commerce ul.woocommerce-order-overview li strong {
	color: var(--fg-ink);
	font-weight: 700;
	text-align: right;
}

/* Sections (order details, billing address, and Subscriptions' related
   tables) become cards. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-order section,
body.fg-checkout-page .fp__woo-commerce .woocommerce-order-details,
body.fg-checkout-page .fp__woo-commerce .woocommerce-customer-details {
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	margin: 0 0 14px;
	padding: 18px;
}

/* Section headings: the theme's global h2 rule gives them a 3px green
   underline capped at 500px. Match the checkout card titles instead. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-order h2 {
	max-width: none;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-ink);
}

/* Tables: same treatment as the checkout order summary. Covers the order
   details table and any Subscriptions related-orders tables. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	background-color: transparent;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table thead {
	display: none;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table th,
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table td {
	padding: 10px 0;
	border: 0;
	background: none;
	font-size: 14px;
	vertical-align: top;
	text-align: left;
	font-weight: 400;
	color: var(--fg-ink);
	overflow-wrap: anywhere;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table td:last-child {
	text-align: right;
	white-space: nowrap;
	padding-left: 12px;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tbody tr:first-child th,
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tbody tr:first-child td {
	padding-top: 0;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table a {
	color: var(--fg-ink);
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tfoot tr:first-child th,
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tfoot tr:first-child td {
	border-top: 1px solid var(--fg-line);
	padding-top: 12px;
}

/* The last tfoot row is the order total. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tfoot tr:last-child th,
body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tfoot tr:last-child td {
	border-top: 1px solid var(--fg-line);
	padding-top: 12px;
	font-size: 17px;
	font-weight: 700;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-order table.shop_table tfoot tr:last-child td {
	color: var(--fg-green);
}

/* Billing address: <address> is italic by default. */
body.fg-checkout-page .fp__woo-commerce .woocommerce-customer-details address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	border: 0;
	padding: 0;
	margin: 0;
}

body.fg-checkout-page .fp__woo-commerce .woocommerce-customer-details p {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--fg-muted);
}

/* Order barcode (woocommerce-order-barcodes plugin). */
body.fg-checkout-page .fp__woo-commerce .woocommerce-order-barcodes-container {
	margin: 0 0 14px;
	padding: 14px 0 6px;
}

/* -------------------------------------------------------------------------
 * Express checkout (Apple Pay / Google Pay / Link).
 *
 * The gateway prints #wc-stripe-express-checkout-element first in the column
 * (woocommerce_checkout_before_customer_details), then the "— OR —" separator;
 * Stripe's JS reveals them only when a wallet is actually available, so
 * `display` is left alone. The !importants override the plugin's inline
 * margins.
 * ---------------------------------------------------------------------- */
.fp__woo-commerce form.checkout #wc-stripe-express-checkout-element {
	margin: 0 !important;
	clear: both;
}

.fp__woo-commerce form.checkout #wc-stripe-express-checkout-button-separator {
	margin: 14px 0 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * SelectWoo dropdown panel (country / state).
 *
 * The open dropdown -- search field and results list -- is appended to <body>,
 * NOT inside form.checkout, so the field styling above never reached it: the
 * search input rendered at select2's stubby default height and the results
 * list wore a chunky default scrollbar. Scoped to the body class instead.
 * ---------------------------------------------------------------------- */
body.fg-checkout-page .select2-dropdown {
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	color: var(--fg-ink);
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.10 );
}

body.fg-checkout-page .select2-search--dropdown {
	padding: 8px;
}

/* Normal input-box sizing for the search field; 16px also stops iOS zooming. */
body.fg-checkout-page .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--fg-ink);
	-webkit-appearance: none;
	appearance: none;
}

body.fg-checkout-page .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba( 80, 174, 38, 0.15 );
	outline: none;
}

/* Results list: bounded height with a slim, quiet scrollbar. */
body.fg-checkout-page .select2-results__options {
	max-height: 280px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--fg-field) transparent;
}

body.fg-checkout-page .select2-results__options::-webkit-scrollbar {
	width: 5px;
}

body.fg-checkout-page .select2-results__options::-webkit-scrollbar-thumb {
	background: var(--fg-field);
}

body.fg-checkout-page .select2-results__options::-webkit-scrollbar-track {
	background: transparent;
}

body.fg-checkout-page .select2-results__option {
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.35;
}

/* Highlighted option: the theme's green highlight rule is .fp__woo-commerce
   scoped and misses the body-appended dropdown, leaving select2's default
   blue. */
body.fg-checkout-page .select2-results__option--highlighted[aria-selected],
body.fg-checkout-page .select2-results__option--highlighted {
	background: var(--fg-green);
	color: #fff;
}

/* Form rows must never be scroll containers. Something in the site-wide CSS
   gives them overflow:auto, and the country row's select2 widget runs ~4px
   taller than the row's computed height -- producing a scrollbar over four
   pixels beside the Country field on mobile. */
.fp__woo-commerce form.checkout .form-row,
body.fg-checkout-page .fp__woo-commerce form.checkout p.form-row {
	overflow: visible;
	max-height: none;
}

/* The 4px that made the row "scrollable" at all: the select2 container is
   inline-block and sits on the text baseline, reserving descender space below
   itself. Block display removes the phantom height entirely. */
.fp__woo-commerce form.checkout .form-row .select2-container {
	display: block;
	vertical-align: top;
}

/* Same edge-flush fix as the cart: the theme zeroes #content's side padding on
   small screens. */
@media (max-width: 700px) {
	body.fg-checkout-page #content {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Dark mode ("theme-fg" cookie -> body.dark-mode; the external styles turn
 * #wrapper near-black). Every rule in this file reads the tokens, so dark
 * support is this flip. Anything hardcoded light above was converted to a
 * token when this block landed -- keep it that way.
 * ---------------------------------------------------------------------- */
body.dark-mode {
	--fg-ink: #e8eaed;
	--fg-muted: #9aa1a8;
	--fg-line: #3a3d41;
	--fg-field: #5b6167;
	--fg-surface: #242628;
}