/* ==========================================================================
   Cart & Checkout — WooCommerce BLOCK cart/checkout (not the classic
   shortcode forms). The inner UI is rendered client-side by React, so these
   target WooCommerce Blocks' own `wc-block-*` class names.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. THE OVERFLOW FIX — why the checkout was cut off on both sides.

   Storefront ships:
       .alignwide { width:auto; max-width:1000%;
                    margin-left:  calc(25% - 25vw);
                    margin-right: calc(25% - 25vw); }
   That huge negative margin is meant for a full-bleed image inside a narrow
   blog column. WooCommerce puts `alignwide` on the cart/checkout block, so
   the whole checkout got dragged ~25vw past each edge of the viewport and
   clipped. WooCommerce's own counter-rule
   (`alignwide{max-width:var(--wp--style--global--wide-size)}`) never applies
   here, because a classic theme defines no such custom property.

   Beaten on specificity (0,3,0 vs Storefront's 0,1,0) — no !important.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .entry-content .alignwide,
.woocommerce-cart .entry-content .alignwide {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 0;
}

/* Give both pages a normal page rhythm instead of Storefront's blog spacing */
.woocommerce-checkout .site-main,
.woocommerce-cart .site-main {
	padding-block: var(--space-8) var(--space-16);
}

/* ==========================================================================
   1. SHARED BLOCK PRIMITIVES (used by both cart and checkout)
   ========================================================================== */

/* ---- Section / step headings ---- */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-order-summary .wc-block-components-panel__button {
	color: var(--color-navy);
	font-weight: 700;
}
.wc-block-components-checkout-step__title { font-size: 1.15rem; }

/* ---- Trust badges, above the order summary ----
   Injected as a shortcode block (see inc/woocommerce-hooks.php) because the
   checkout is WooCommerce Blocks — there's no classic PHP action inside the
   order-summary block to hook a template part into. Wraps onto a second row
   rather than shrinking below a legible size on a narrow phone. */
.apex-checkout-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.apex-checkout-badges__item {
	height: 40px;
	width: auto;
	display: block;
}

.wc-block-components-checkout-step__description {
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

/* ---- Text inputs (floating-label pattern) ---- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: none;
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(1, 32, 79, .1);
}
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--color-text-muted);
}
.wc-block-components-text-input.is-active label {
	color: var(--color-navy);
	font-weight: 600;
}

/* ---- Checkboxes & radios pick up the brand accent ---- */
.wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-radio-control__input {
	accent-color: var(--color-red);
}

/* ---- Selectable rows: shipping methods, payment methods, saved addresses ---- */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: var(--radius-sm);
	transition: background .15s ease, border-color .15s ease;
}
.wc-block-components-radio-control__option:hover {
	background: var(--color-bg);
}
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--color-navy);
	background: var(--color-bg-alt);
}

/* ---- Panels (coupon toggle, order-summary accordion) ---- */
.wc-block-components-panel__button {
	color: var(--color-navy);
	font-weight: 600;
}
.wc-block-components-panel__button:hover { color: var(--color-red); }

/* ---- Buttons ---- */
.wc-block-components-button:not(.is-link) {
	border-radius: var(--radius-sm);
	font-weight: 700;
	transition: background .15s ease, border-color .15s ease;
}
/* Primary conversion actions are red — Place Order was inheriting a flat
   dark grey from the block defaults */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	background: var(--color-red) !important;
	border-color: var(--color-red) !important;
	color: var(--color-white) !important;
	min-height: 52px;
	font-size: 1rem;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--color-red-dark) !important;
	border-color: var(--color-red-dark) !important;
}
/* Secondary actions (Apply coupon, etc.) stay navy */
.wc-block-components-totals-coupon__button,
.wc-block-components-address-form__button {
	background: var(--color-navy) !important;
	border-color: var(--color-navy) !important;
	color: var(--color-white) !important;
}
.wc-block-components-totals-coupon__button:hover {
	background: var(--color-navy-dark) !important;
	border-color: var(--color-navy-dark) !important;
}
.wc-block-components-button.is-link { color: var(--color-navy); }
.wc-block-components-button.is-link:hover { color: var(--color-red); }

/* ---- Sidebar / order summary card ---- */
.wc-block-components-sidebar { color: var(--color-text); }
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--color-navy);
	font-weight: 600;
}
.wc-block-components-totals-item__label { color: var(--color-text); }
.wc-block-components-totals-item__value { color: var(--color-navy); font-weight: 600; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--color-navy);
	font-weight: 800;
	font-size: 1.15rem;
}
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount { color: var(--color-navy); }
.wc-block-components-product-badge {
	/* Red, not navy — everywhere else on the site a sale/discount is called
	   out in red (the shop grid's "SALE!" ribbon, the PDP save-percent flag);
	   navy here read as just another neutral label, not a deal. */
	background: var(--color-red);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-sm);
	font-weight: 700;
	letter-spacing: .01em;
}
/* The sale badge ("Save £90.00") is itself a `.wc-block-components-product-badge`
   with white text on a navy background — but the amount inside it is ALSO a
   `.wc-block-formatted-money-amount`, and that class's own rule above sets
   navy text directly on the span. A direct rule on an element always wins
   over an inherited value no matter the specificity, so the amount was
   rendering navy-on-navy — invisible — while only the word "Save" (plain
   text, correctly inheriting the badge's white) showed. */
.wc-block-components-product-badge .wc-block-formatted-money-amount {
	color: inherit;
}

/* ---- Notices ---- */
.wc-block-components-notice-banner { border-radius: var(--radius-md); }
.wc-block-components-notice-banner.is-error { border-left-color: var(--color-red); }
.wc-block-components-notice-banner.is-success { border-left-color: var(--color-success); }

/* ---- Terms & privacy line ---- */
.wc-block-checkout__terms a { color: var(--color-navy); font-weight: 600; }
.wc-block-checkout__terms a:hover { color: var(--color-red); }

/* ==========================================================================
   2. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
	.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
	.woocommerce-checkout .entry-content .alignwide,
	.woocommerce-cart .entry-content .alignwide {
		padding-inline: var(--space-4);
	}
}

@media (max-width: 768px) {
	.woocommerce-checkout .site-main,
	.woocommerce-cart .site-main {
		padding-block: var(--space-6) var(--space-12);
	}
	.wc-block-components-checkout-step__title { font-size: 1.05rem; }
	.wc-block-components-checkout-place-order-button,
	.wc-block-cart__submit-button { min-height: 50px; }
}

@media (max-width: 480px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
	.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
	.woocommerce-checkout .entry-content .alignwide,
	.woocommerce-cart .entry-content .alignwide {
		padding-inline: var(--space-3);
	}
}

/* ==========================================================================
   Empty cart
   ==========================================================================
   The cart page uses WooCommerce's BLOCK cart, so its empty state lives in
   the page's block content, not in cart-empty.php. The panel markup is a
   raw-HTML block written by us; the product row below it is WooCommerce's
   `product-new` block, which renders server-side with `.wc-block-grid__*`
   classes rather than the `ul.products` loop — so none of the theme's
   product-card CSS reaches it and it arrived unstyled, with each image at
   its own aspect ratio. Both are styled here. */

.apex-empty-cart {
	text-align: center;
	max-width: 620px;
	margin: var(--space-8) auto var(--space-12);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	box-shadow: var(--shadow-card);
}

.apex-empty-cart__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--space-5);
	border-radius: 50%;
	background: rgba(1, 32, 79, .06);
	color: var(--color-navy);
}
.apex-empty-cart__icon svg { width: 32px; height: 32px; }

/* Same underline fight as the thank-you page: Storefront's
   `.hentry .entry-content a` (0,2,1) beats `.apex-empty-cart a` (0,1,1), so
   the buttons and category pills came out underlined. Match on 0,3,1. */
.entry-content .apex-empty-cart a { text-decoration: none; }
.entry-content .apex-empty-cart__help a { text-decoration: underline; text-underline-offset: 2px; }

.apex-empty-cart__title {
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
	margin-bottom: var(--space-3);
}
.apex-empty-cart__text {
	color: var(--color-text-muted);
	max-width: 44ch;
	margin: 0 auto var(--space-6);
}

.apex-empty-cart__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.apex-empty-cart__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.apex-empty-cart__links a {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-navy);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.45em 1em;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.apex-empty-cart__links a:hover {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.apex-empty-cart__help {
	margin: var(--space-5) 0 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.apex-empty-cart__help a { color: var(--color-red); font-weight: 600; }
.apex-empty-cart__help a:hover { text-decoration: underline; }

.apex-empty-cart__heading {
	font-size: 1.25rem !important;
	margin-bottom: var(--space-6) !important;
}

/* ---- WooCommerce block product grid (empty cart, and any block grid) ---- */

.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6);
	margin: 0 0 var(--space-8) !important;
	padding: 0 !important;
	list-style: none;
}
.wc-block-grid__products::before,
.wc-block-grid__products::after { display: none !important; }

.wc-block-grid__product {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: var(--space-4) !important;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
}
.wc-block-grid__product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* Every image to the same square frame — the default block grid lets each
   product keep its own aspect ratio, which is why the row looked ragged. */
.wc-block-grid__product-image {
	display: block;
	margin-bottom: var(--space-3) !important;
}
.wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-bg);
	border-radius: var(--radius-sm);
}

.wc-block-grid__product-title {
	font-size: 0.95rem !important;
	font-weight: 600;
	color: var(--color-navy);
	line-height: 1.35;
	margin-bottom: var(--space-2) !important;
	/* Two-line clamp keeps every card's price and button on one baseline. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.wc-block-grid__product-title a { color: inherit; }
.wc-block-grid__product-title a:hover { color: var(--color-red); }

.wc-block-grid__product-price {
	font-size: 1.05rem !important;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: var(--space-3) !important;
}
.wc-block-grid__product-price del { color: var(--color-text-muted); font-weight: 500; font-size: 0.85em; margin-right: 6px; }
.wc-block-grid__product-price ins { text-decoration: none; color: var(--color-red); }

.wc-block-grid__product-add-to-cart { margin-top: auto !important; }
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a.button {
	width: 100%;
	background: var(--color-red) !important;
	color: var(--color-white) !important;
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.7em 1.2em;
	font-size: 0.88rem;
	font-weight: 600;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a.button:hover { background: var(--color-red-dark) !important; }

.wc-block-grid__product-onsale {
	background: var(--color-red) !important;
	color: var(--color-white) !important;
	border: 0 !important;
	border-radius: var(--radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 4px 10px;
}

@media (max-width: 1024px) {
	.wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (max-width: 420px) {
	.wc-block-grid__products { grid-template-columns: 1fr; }
	.apex-empty-cart__actions .apex-btn { width: 100%; }
}

/* ==========================================================================
   Order Received (thank-you page)
   ========================================================================== */

.apex-thankyou { max-width: 900px; margin-inline: auto; padding-block: var(--space-8) var(--space-16); }

/* WooCommerce prints its own "Order received" page title above this template.
   The hero below carries the real <h1>, so keeping both left the page with two
   level-1 headings saying the same thing. */
.woocommerce-order-received .entry-header,
.woocommerce-order-received .entry-title,
.woocommerce-order-received .page-title { display: none; }

/* Storefront underlines every link inside post content with
   `.hentry .entry-content a` — specificity 0,2,1, which beats a plain
   `.apex-thankyou .apex-btn` (0,2,0) and underlined all our buttons. Adding
   the `.entry-content` ancestor and the `a` element takes this to 0,3,1 so it
   wins outright rather than depending on load order. */
.entry-content .apex-thankyou a.apex-btn { text-decoration: none; }

/* ---- Success hero ---- */

.apex-thankyou__hero {
	text-align: center;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	box-shadow: var(--shadow-card);
}

.apex-thankyou__mark {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto var(--space-5);
	border-radius: 50%;
	background: rgba(27, 138, 74, .12);
	color: var(--color-success);
}
.apex-thankyou__mark svg { width: 32px; height: 32px; }
.apex-thankyou__mark--fail { background: rgba(210, 49, 32, .12); color: var(--color-red); }

.apex-thankyou__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-success);
	margin-bottom: var(--space-3);
}
.apex-thankyou__hero h1 {
	font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
	margin-bottom: var(--space-3);
}
.apex-thankyou__lead,
.apex-thankyou__hero > p {
	color: var(--color-text-muted);
	max-width: 52ch;
	margin: 0 auto;
	font-size: 0.96rem;
}
.apex-thankyou__lead strong { color: var(--color-navy); }
.apex-thankyou__hero--failed h1 { color: var(--color-red); }

/* ---- Order facts ---- */

.apex-thankyou__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
}
.apex-thankyou__facts li {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.apex-thankyou__fact-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.apex-thankyou__fact-value { font-size: 0.98rem; font-weight: 600; color: var(--color-navy); line-height: 1.35; }
.apex-thankyou__fact-value--mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.apex-thankyou__fact-value--total { color: var(--color-red); font-size: 1.15rem; font-weight: 800; }
.apex-thankyou__fact-value .woocommerce-Price-amount { font-weight: inherit; color: inherit; }

/* ---- What happens next ---- */

.apex-thankyou__next {
	margin-top: var(--space-8);
	background: var(--color-navy);
	background-image: radial-gradient(circle at 100% 0%, var(--color-navy-light), transparent 62%);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
}
.apex-thankyou__next h2 {
	color: var(--color-white);
	font-size: 1.1rem;
	margin-bottom: var(--space-5);
}

/* Numbered because the sequence is real — these genuinely happen in order. */
.apex-thankyou__steps {
	counter-reset: apex-step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}
.apex-thankyou__steps li {
	counter-increment: apex-step;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--space-1) var(--space-4);
	align-items: baseline;
}
.apex-thankyou__steps li::before {
	content: counter(apex-step);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	color: var(--color-white);
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	align-self: start;
}
.apex-thankyou__steps strong { color: var(--color-white); font-size: 0.95rem; font-weight: 600; }
.apex-thankyou__steps span { color: rgba(255, 255, 255, .74); font-size: 0.88rem; line-height: 1.6; }

/* ---- Actions ---- */

.apex-thankyou__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.apex-thankyou__actions--wide { margin-top: var(--space-8); }

/* ---- Order detail table ---- */

.apex-thankyou__detail { margin-top: var(--space-12); }
.apex-thankyou__detail > h2 {
	font-size: 1.15rem;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-5);
	border-bottom: 2px solid var(--color-border);
}
/* WooCommerce prints its own "Order details" / "Billing address" headings
   inside the included template; ours already say it. */
.apex-thankyou__detail .woocommerce-order-details__title,
.apex-thankyou__detail .woocommerce-column__title { display: none; }

.apex-thankyou__detail .woocommerce-table--order-details,
.apex-thankyou__detail table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
	font-size: 0.92rem;
	margin: 0;
}
.apex-thankyou__detail table.shop_table th,
.apex-thankyou__detail table.shop_table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
.apex-thankyou__detail table.shop_table thead th {
	background: var(--color-bg);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.apex-thankyou__detail table.shop_table tfoot th { color: var(--color-navy); font-weight: 600; }
.apex-thankyou__detail table.shop_table tfoot tr:last-child th,
.apex-thankyou__detail table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--color-navy);
	background: var(--color-bg);
}
.apex-thankyou__detail table.shop_table td.woocommerce-table__product-name a { color: var(--color-navy); font-weight: 600; }
.apex-thankyou__detail table.shop_table td.woocommerce-table__product-name a:hover { color: var(--color-red); }
.apex-thankyou__detail .wc-item-meta { margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--color-text-muted); }
.apex-thankyou__detail .wc-item-meta strong { font-weight: 600; }
.apex-thankyou__detail .product-quantity { color: var(--color-text-muted); }

/* Billing / shipping address columns */
.apex-thankyou__detail .woocommerce-customer-details { margin-top: var(--space-6); }
.apex-thankyou__detail .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-4);
	margin: 0;
}
.apex-thankyou__detail .woocommerce-columns--addresses .col-1,
.apex-thankyou__detail .woocommerce-columns--addresses .col-2 {
	width: auto;
	float: none;
	margin: 0;
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.apex-thankyou__detail address {
	font-style: normal;
	border: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* ---- Help panel ---- */

.apex-thankyou__help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: var(--space-8);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-red);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.apex-thankyou__help h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.apex-thankyou__help p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; max-width: 52ch; }
.apex-thankyou__help-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 600px) {
	.apex-thankyou__actions .apex-btn { flex: 1 1 100%; }
	.apex-thankyou__help-actions { width: 100%; }
	.apex-thankyou__help-actions .apex-btn { flex: 1; }
	.apex-thankyou__detail table.shop_table th,
	.apex-thankyou__detail table.shop_table td { padding: var(--space-3); }
}