/* ──────────────────────────────────────────────
   CAEPS Cart & Checkout
   Targets WooCommerce Block Cart (wc-block-*)
   + Impreza classic fallbacks (w-cart-*)
   ────────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   WooCommerce BLOCK Cart
   ══════════════════════════════════════════════ */

.wc-block-cart-items__header span {
    font-size: 20px !important;
}

/* ── Table Headers ── */

.wc-block-cart-items__header th,
.wc-block-cart-items__header span {
	color: #101E30 !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

/* ── Product Name ── */

a.wc-block-components-product-name {
	color: #101E30 !important;
	font-weight: 600;
	text-decoration: none !important;
}

a.wc-block-components-product-name:hover {
	color: #5881AB !important;
}

/* ── Product Price ── */

.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: #4B4C4D !important;
}

/* Subscription "for 1 year" text */
.wc-block-cart-item__prices .price {
	color: #4B4C4D;
}

/* ── Product Meta (Team Name, Billing) ── */

.wc-block-components-product-metadata {
	color: #727f9f;
	font-size: 0.88em;
	margin-top: 0.4em;
}

.wc-block-components-product-details__name {
	color: #4B4C4D !important;
	font-weight: 600;
}

.wc-block-components-product-details__value {
	color: #4B4C4D !important;
}

/* ── Item Total ── */

.wc-block-cart-item__total .wc-block-components-product-price__value {
	color: #101E30 !important;
	font-weight: 700;
	font-size: 1.05em;
}

/* ── Quantity Selector ── */

.wc-block-components-quantity-selector {
	border: 1px solid #e3e7f0 !important;
	border-radius: 0.3em;
	overflow: hidden;
}

.wc-block-components-quantity-selector__input {
	color: #4B4C4D !important;
	background: #fff !important;
	font-weight: 600;
}

.wc-block-components-quantity-selector__button {
	color: #153F67 !important;
	background: #F0F3F5 !important;
	border: none !important;
	transition: all 0.2s ease !important;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: #fff !important;
	background: #153F67 !important;
}

.wc-block-components-quantity-selector__button:disabled {
	color: #727f9f !important;
	opacity: 0.5;
}

/* ── Remove Item Link ── */

.wc-block-cart-item__remove-link {
	color: #727f9f !important;
	fill: #727f9f !important;
	transition: all 0.2s ease !important;
}

.wc-block-cart-item__remove-link:hover {
	color: #c00 !important;
	fill: #c00 !important;
}

.wc-block-cart-item__remove-link svg {
	fill: inherit;
}

/* ── Cart Sidebar / Totals ── */

.wc-block-cart__sidebar {
	color: #4B4C4D;
}

/* "Cart totals" heading */
.wc-block-cart__totals-title {
	color: #101E30 !important;
	font-weight: 700;
	font-size: 1.05em !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Totals labels */
.wc-block-components-totals-item__label {
	color: #4B4C4D !important;
	font-weight: 600;
}

/* Total amount */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: #101E30 !important;
	font-weight: 700;
	font-size: 1.1em;
}

.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: #101E30 !important;
	font-weight: 700;
	font-size: 1.1em;
}

/* Subtotal / other rows */
.wc-block-components-totals-item .wc-block-formatted-money-amount {
	color: #4B4C4D !important;
}

/* ── Coupon Panel ── */

.wc-block-components-totals-coupon {
	color: #4B4C4D !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: #153F67 !important;
	font-weight: 600;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button svg {
	fill: #153F67;
}

/* Coupon input */
.wc-block-components-totals-coupon__content input {
	color: #4B4C4D !important;
	background: #fff !important;
	border: 1px solid #e3e7f0 !important;
}

/* Coupon apply button */
.wc-block-components-totals-coupon__content .wc-block-components-button {
	background: #153F67 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0.3em;
	font-weight: 700;
}

.wc-block-components-totals-coupon__content .wc-block-components-button:hover {
	background: #FCB316 !important;
	color: #153F67 !important;
}

/* Same height as the coupon code input. WooCommerce gives buttons a 3em
   min-height, which at the theme's 20px button size is 60px against the
   input's 50px; dropping it lets the button stretch to match the input. */
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	min-height: 0 !important;
}

/* ── Proceed to Checkout Button ── */

.wc-block-cart__submit-button,
.wc-block-cart__submit-button.contained {
	background: #153F67 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0.3em !important;
	padding: 0.9em 2em !important;
	font-weight: 700 !important;
	font-size: 1em !important;
	text-align: center;
	text-decoration: none !important;
	display: block;
	width: 100%;
	cursor: pointer;
	transition: all 0.2s ease !important;
	line-height: 1.4;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button.contained:hover {
	background: #FCB316 !important;
	color: #153F67 !important;
}

.wc-block-cart__submit-button .wc-block-components-button__text {
	color: inherit !important;
	font-weight: inherit;
	display: inline !important;
}

.wc-block-cart__submit-button .wc-block-components-button__text::after {
	content: '';
	background-color: #FCB316;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background-image: url(/wp-content/uploads/2026/01/arrow-right.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	transition: all 0.2s ease !important;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
}

.wc-block-cart__submit-button:hover .wc-block-components-button__text::after {
	background-color: #153F67;
}

/* ── Notices ── */

.wc-block-components-notice-banner {
	color: #4B4C4D;
}

.wc-block-components-notice-banner a {
	color: #153F67;
	font-weight: 700;
}

.wc-block-components-notice-banner a:hover {
	color: #5881AB;
}

/* ── Row Dividers ── */

.wc-block-components-totals-wrapper {
	border-color: #e3e7f0 !important;
}


/* ══════════════════════════════════════════════
   Impreza Classic Cart Fallbacks (w-cart-*)
   ══════════════════════════════════════════════ */

/* Table headers */
.w-cart-table .shop_table.cart th {
	color: #101E30 !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

/* Product name */
.w-cart-table td.product-name a {
	color: #101E30 !important;
	font-weight: 600;
	text-decoration: none !important;
}

.w-cart-table td.product-name a:hover {
	color: #5881AB !important;
}

/* Price & subtotal */
.w-cart-table td.product-price,
.w-cart-table td.product-subtotal {
	color: #101E30 !important;
	font-weight: 600;
}

/* Quantity */
.w-cart-table .quantity input.qty,
.woocommerce .quantity input.qty {
	color: #4B4C4D !important;
	background: #fff !important;
}

/* Cart totals */
.w-cart-totals h2 {
	color: #101E30 !important;
	font-weight: 700;
}

/* Checkout button (Impreza) */
.w-cart-totals .wc-proceed-to-checkout .w-btn,
.w-cart-totals .wc-proceed-to-checkout a {
	background: #153F67 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0.3em;
	padding: 0.9em 2em !important;
	font-weight: 700;
	text-decoration: none !important;
	display: block;
	width: 100%;
	text-align: center;
	transition: all 0.2s ease !important;
}

.w-cart-totals .wc-proceed-to-checkout .w-btn:hover,
.w-cart-totals .wc-proceed-to-checkout a:hover {
	background: #FCB316 !important;
	color: #153F67 !important;
}

/* Secondary buttons */
.woocommerce .actions .button,
.woocommerce .coupon .button {
	background: transparent !important;
	color: #153F67 !important;
	border: 2px solid #153F67 !important;
	border-radius: 0.3em;
	padding: 0.6em 1.4em !important;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease !important;
}

.woocommerce .actions .button:hover,
.woocommerce .coupon .button:hover {
	background: #153F67 !important;
	color: #fff !important;
}


/* ══════════════════════════════════════════════
   Checkout Page — Block Checkout
   ══════════════════════════════════════════════ */

/* ── Place Order Button ── */

.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.contained {
	background: #153F67 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0.3em !important;
	padding: 0.9em 2em !important;
	font-weight: 700 !important;
	font-size: 1em !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.2s ease !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button.contained:hover {
	background: #FCB316 !important;
	color: #153F67 !important;
}

.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: inherit !important;
	font-weight: inherit;
	display: inline !important;
}

/* ── Return to Cart Link ── */

.wc-block-components-checkout-return-to-cart-button {
	color: #153F67 !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
	color: #FCB316 !important;
}

.wc-block-components-checkout-return-to-cart-button svg {
	fill: currentColor;
}


/* ══════════════════════════════════════════════
   Checkout — Membership Add-on Fields
   ══════════════════════════════════════════════ */

.caeps-checkout-addon-fields {
	margin-top: 1.5em;
}

.caeps-checkout-addon-fields h3 {
	color: #101E30;
	font-weight: 700;
	font-size: 1.05em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1em;
	padding-top: 1em;
	border-top: 1px solid #e3e7f0;
}

/* Block checkout: text/textarea fields with floating labels */
.caeps-checkout-addon-field {
	margin-bottom: 1em;
}

.caeps-checkout-addon-field input[type="text"],
.caeps-checkout-addon-field textarea,
.caeps-checkout-addon-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65em 0.75em;
	border: 1px solid #e3e7f0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95em;
	color: #4B4C4D;
	background: #fff;
}

.caeps-checkout-addon-field input[type="text"]:focus,
.caeps-checkout-addon-field textarea:focus,
.caeps-checkout-addon-field select:focus {
	outline: none;
	border-color: #153F67;
	box-shadow: 0 0 0 1px #153F67;
}

.caeps-checkout-addon-field textarea {
	resize: vertical;
	min-height: 60px;
}

/* A textarea under a floating label.
   WooCommerce gives its text INPUTS the top padding that keeps typed text
   clear of the floated label, but has no textarea rule, and the theme sets
   textarea line-height to 0 — so the first line of a follow-up textarea
   ("Reason (optional)") ran straight into its own label. Same font and top
   clearance as the inputs. Four classes: plugin CSS loads before the
   theme's, so a weaker selector loses. */
.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field textarea {
	padding: 24px 12px 10px;
	font-size: 16px;
	line-height: 1.5;
	min-height: 96px;
}

/* Select field */
.caeps-checkout-addon-field--select label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: #4B4C4D;
	margin-bottom: 0.3em;
}

.caeps-checkout-addon-field--select select {
	appearance: auto;
}

/* Radio & Checkbox groups */
.caeps-checkout-addon-field--radio,
.caeps-checkout-addon-field--checkbox {
	margin-bottom: 1em;
}

.caeps-checkout-addon-field__group-label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: #4B4C4D;
	margin-bottom: 0.4em;
}

.caeps-checkout-addon-field__option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	color: #4B4C4D;
	padding: 0.3em 0;
	cursor: pointer;
}

.caeps-checkout-addon-field__option input {
	accent-color: #153F67;
}

/* Classic checkout: checkbox group */
.caeps-checkout-checkbox-group {
	margin-bottom: 1em;
}

.caeps-checkout-checkbox-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.caeps-checkout-checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	padding: 0.3em 0;
	cursor: pointer;
}

.caeps-checkout-checkbox-option input {
	accent-color: #153F67;
}

/* Required-field indicator on the block-checkout Organization Name label */
.caeps-org-name-required {
	color: #cc1818;
	margin-left: 2px;
	font-weight: 600;
}

/* Breathing room above the Org Name field so it doesn't crowd against
 * the Primary Contact Email field's help text directly above it. */
.caeps-org-name-checkout {
	margin-top: 20px;
}

/* Inline validation error — mimics WC block-checkout's native field error UI. */
.caeps-org-name-checkout.has-error > input {
	border-color: #cc1818;
	box-shadow: 0 0 0 1px #cc1818;
}

.caeps-org-name-checkout.has-error > label {
	color: #cc1818;
}

.caeps-org-name-error {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #cc1818;
}

.caeps-org-name-error__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.caeps-org-name-error__text {
	display: inline-block;
}

/* Helper text under the relabelled "Primary Contact Email" field. */
.caeps-primary-contact-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #50575e;
}

/* ─── Required-field markers ────────────────────────────────────────────────
 * WooCommerce's `abbr.required` convention is only dressed by WC's own form
 * CSS, which does not reach markup injected into the block checkout or printed
 * by this plugin. Those markers fell through to the theme's bare `abbr` rules:
 * full-size, black, and underlined — and a trailing one at the end of a long
 * sentence would wrap onto a line of its own.
 *
 * `!important` is deliberate here. This plugin's CSS is enqueued BEFORE the
 * theme's, so an equal-specificity rule loses, and this is a small presentational
 * marker rather than layout worth escalating a selector war over. Scoped to
 * WooCommerce contexts so it cannot leak into unrelated forms.
 * ------------------------------------------------------------------------- */
.woocommerce abbr.required,
.woocommerce abbr.required[title],
.woocommerce-page abbr.required,
.woocommerce-page abbr.required[title],
.caeps-accuracy abbr.required,
.caeps-accuracy abbr.required[title] {
	color: #b91c1c !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: 0 !important;
	background: none !important;
	vertical-align: super !important;
	cursor: inherit !important;
}

/* ─── Terms notice folded into an agreement card ─────────────────────────────
 * Shared by the paid-tier accuracy card and the Resident/Fellow eligibility
 * card. Both render an empty `.caeps-accuracy__terms` slot; the script in
 * CAEPS_Accuracy_Attestation copies WooCommerce's terms/privacy notice into
 * whichever slot is present and suppresses the original, so the agreement reads
 * as one block instead of a card followed by a loose line of text.
 * ------------------------------------------------------------------------- */
.caeps-accuracy__terms {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}

.caeps-accuracy__terms p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Never render a bare divider: an empty slot has nothing to separate, and a
   rule with nothing under it reads as a rendering fault. */
.caeps-accuracy__terms:empty {
	display: none;
}

/* The suppressed original. !important because this plugin's CSS is enqueued
   before the theme's, and a half-hidden duplicate notice is worse than either
   outcome. */
.caeps-accuracy-terms-src--moved {
	display: none !important;
}

/* ── Country/Region spacing ───────────────────────────────────────────────
   Country/Region is moved below First/Last name (see
   CAEPS_Checkout::move_country_below_name), and WooCommerce zeroes that
   field's top margin on the assumption it is the first thing in the step:

     .wc-block-components-form .wc-block-components-checkout-step
       .wc-block-components-country-input { margin-top: 0 }

   The address form uses `gap: 0 12px` — no row gap — so each field supplies
   its own vertical rhythm and the zeroed country sat flush against the name
   row. 16px restores WooCommerce's own base value for this field.

   Four classes plus !important to clear that 3-class rule regardless of
   stylesheet load order, and :not(:first-child) so this undoes itself if the
   field order is ever put back. */
.wc-block-components-form .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-country-input:not(:first-child) {
	margin-top: 16px !important;
}

/* ── Add-on field inline errors ───────────────────────────────────────────
   Required add-on fields (Declarations and friends) used to fail only on the
   server, one field per submission, as a notice at the top of the page. These
   are the per-field messages the pre-submit check writes instead. */
.caeps-checkout-addon-fields .caeps-addon-error {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #cc1818;
}

.caeps-checkout-addon-fields .caeps-addon-error[hidden] {
	display: none;
}

/* Flag the group itself, since a checkbox/radio group has no single input to
   put a red border on. */
.caeps-checkout-addon-fields .caeps-addon-field--invalid > .caeps-checkout-addon-field__group-label,
.caeps-checkout-addon-fields .caeps-addon-field--invalid > label {
	color: #cc1818;
}

/* ══════════════════════════════════════════════
   Block Cart — universal font size
   WooCommerce sizes cart text with the theme's
   --wp--preset--font-size--small / x-small presets,
   which resolve to 13px / ~11px here. Bring the cart
   up to the site body size (16px). Scoped to the cart
   block so checkout is untouched.
   ══════════════════════════════════════════════ */

/* Line items (name, price, details, item total) sit a step above body size */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-metadata .wc-block-components-product-details,
.wp-block-woocommerce-cart .wc-block-components-product-details__name,
.wp-block-woocommerce-cart .wc-block-components-product-details__value,
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
	font-size: 18px !important;
	line-height: 1.5;
}

/* Quantity, coupon and totals rows stay at body size */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wp-block-woocommerce-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-totals-item__description {
	font-size: 16px !important;
	line-height: 1.5;
}

/* Product name keeps its semibold weight */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-weight: 600;
}

/* Space the name / price / billing lines a little now the text is larger */
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-components-product-metadata {
	margin-top: 0.25em;
}

/* "Cart totals" heading matches the line-item table headers */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.4;
}

/* Bigger "$" on the bold amounts (line-item totals and Total due
   today). In Open Sans bold the "$" reads smaller than the digits.
   The block prints "$495.00" as one text string, so ::first-letter
   (needs inline-block) is the only way to size just the symbol. */
.wp-block-woocommerce-cart :is(.wc-block-cart-item__total, .wc-block-components-totals-footer-item) .wc-block-formatted-money-amount {
	display: inline-block;
}

.wp-block-woocommerce-cart :is(.wc-block-cart-item__total, .wc-block-components-totals-footer-item) .wc-block-formatted-money-amount::first-letter {
	font-size: 1.2em;
	line-height: 1;
}

/* ══════════════════════════════════════════════
   Checkout — consistent label casing
   Section headings and field labels mixed sentence case,
   Title Case and ALL CAPS. Show them all capitalized
   (Title Case). Payment method names, checkbox sentences,
   product names and typed values are left as they are.
   ══════════════════════════════════════════════ */

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout .caeps-org-affiliation h3,
.wp-block-woocommerce-checkout .caeps-checkout-addon-fields h3,
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label,
.wp-block-woocommerce-checkout .caeps-fty label,
.wp-block-woocommerce-checkout .caeps-checkout-addon-field__group-label,
.wp-block-woocommerce-checkout .caeps-checkout-addon-field__option {
	text-transform: capitalize !important;
}

/* ══════════════════════════════════════════════
   Order Received / My Account > Subscription —
   "Related subscriptions" and "Related orders"
   WooCommerce Subscriptions wraps these headings in a
   <header>, where the theme's h2:last-child rule strips
   the bottom margin, so they sat right on the table.
   Give them the normal h2 gap.
   ══════════════════════════════════════════════ */

header:has(+ .woocommerce-orders-table) > h2 {
	margin-bottom: var(--h2-margin-bottom, 1.5rem);
}

/* ══════════════════════════════════════════════
   WooCommerce notices with an action button
   e.g. My Account "Your account is using a temporary
   password… [Resend]" and "You have no active
   subscriptions. [Browse products]".
   WooCommerce prints the button before the message, so it
   sat crammed against the start of the text. Show the
   message on the left and the button on the right, both
   vertically centered; the message wraps beside the
   button. At 480px and below the button drops under the
   message, left-aligned. Applies on Dashboard and
   Account details (WooCommerce shows the notice on both).
   ══════════════════════════════════════════════ */

.woocommerce-info:has(> .button),
.woocommerce-message:has(> .button) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	font-size: 16px;
	line-height: 1.5;
}

.woocommerce-info:has(> .button) > .button,
.woocommerce-message:has(> .button) > .button {
	order: 2;
	flex-shrink: 0;
	margin: 0 0 0 auto;
}

@media (max-width: 480px) {
	.woocommerce-info:has(> .button),
	.woocommerce-message:has(> .button) {
		flex-direction: column;
		align-items: flex-start;
	}

	.woocommerce-info:has(> .button) > .button,
	.woocommerce-message:has(> .button) > .button {
		margin: 0;
	}
}

/* ══════════════════════════════════════════════
   Empty cart
   The Cart page's empty state is now the WooCommerce
   message plus a "Browse Memberships" button (the stock
   "New in store" product grid was removed from the page).
   Centre the message and size it as a heading.
   ══════════════════════════════════════════════ */

.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 2em 0 3em;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	text-align: center;
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 1.25em;
}

.wp-block-woocommerce-empty-cart-block .caeps-empty-cart__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ══════════════════════════════════════════════
   My Account tables on tablet / mobile (767px and below)
   Orders, Payment methods, Subscriptions, Memberships and
   any other "shop_table_responsive" table in My Account.
   Impreza hides the table header at this width but doesn't
   show WooCommerce's per-cell labels, so the values ran
   together with nothing saying what they were. Show each
   row as a list: label (from data-title) on the left, value
   on the right, action buttons underneath.
   ══════════════════════════════════════════════ */

@media (max-width: 767px) {
	.woocommerce-MyAccount-content table.shop_table_responsive:has(td[data-title]),
	.woocommerce-MyAccount-content table.shop_table_responsive:has(td[data-title]) tbody,
	.woocommerce-MyAccount-content table.shop_table_responsive:has(td[data-title]) tbody tr {
		display: block;
		width: 100%;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive:has(td[data-title]) tbody tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--caeps-color-border, #e3e7f0);
	}

	.woocommerce-MyAccount-content table.shop_table_responsive:has(td[data-title]) tbody tr:first-child {
		border-top: 1px solid var(--caeps-color-border, #e3e7f0);
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td)[data-title] {
		display: flow-root;
		padding: 6px 0;
		border: 0;
		text-align: right !important; /* Impreza sets text-align: inherit !important */
		font-weight: inherit;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td)[data-title]::before {
		content: attr(data-title);
		float: left;
		margin-right: 16px;
		font-weight: 700;
		text-align: left;
	}

	/* Action buttons: no label, left-aligned under the details. */
	.woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td)[class*="actions"] {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		padding: 10px 0 0;
		text-align: left !important;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td)[class*="actions"]::before {
		content: none;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tbody :is(th, td)[class*="actions"] .button {
		margin: 0;
	}
}

/* ══════════════════════════════════════════════
   My Account tables, 768px and up: action buttons
   (e.g. Membership Overview "Billing" + "View", Orders
   "View" + "Pay"). When the actions column is too narrow
   they wrap onto two lines and sat touching each other.
   Give them a little space both ways. (767px and below,
   the rule above already spaces them.)
   ══════════════════════════════════════════════ */

@media (min-width: 768px) {
	.woocommerce-MyAccount-content table.shop_table td[class*="actions"] .button {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.woocommerce-MyAccount-content table.shop_table td[class*="actions"] .button ~ .button {
		margin-left: 8px;
	}
}

/* ══════════════════════════════════════════════
   My Account label / value tables on tablet / mobile
   (767px and below): Membership Details, Team details,
   Subscription details and Member profile fields.
   Each row is "label cell + value cell"; once the cells
   stack, the label looked the same as the value. Make the
   label bold (matches the table labels above and the order
   totals labels).
   ══════════════════════════════════════════════ */

@media (max-width: 767px) {
	.woocommerce-MyAccount-content table:is(.my_membership_settings, .my_team_details, .subscription_details, .my_profile) tbody tr > td:first-child:not(:only-child) {
		font-weight: 700;
	}
}

/* ══════════════════════════════════════════════
   My Account > Payment methods > Add payment method
   The Stripe gateway adds an invisible input
   (#wc-stripe-hidden-style-input) that it reads styles from.
   It's absolutely positioned at full section width, starting
   from the form's left edge, so it ran past the right side
   of the screen and gave the page a horizontal scroll on
   small desktop / tablet (grey strip on the right). Keep it
   inside the payment form. Only its position changes, not
   the styles Stripe reads.
   ══════════════════════════════════════════════ */

.woocommerce-PaymentBox .wc-upe-form {
	position: relative;
}

#wc-stripe-hidden-style-input {
	left: 0 !important;
	max-width: 100%;
}

/* Payment method options list (Add payment method, and the
   pay / change-payment page): no list bullet or indent, so
   the radio buttons line up with the form and the button. */
ul.woocommerce-PaymentMethods.payment_methods,
#payment ul.payment_methods {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ul.woocommerce-PaymentMethods.payment_methods > li,
#payment ul.payment_methods > li {
	list-style: none;
}

/* ══════════════════════════════════════════════
   Residents & Fellows: Eligibility Application fields
   (checkout and renewal). The grid's inline style is "1fr 1fr",
   and a 1fr column can't shrink below its content, so on phones
   the month picker ("Expected end of training") pushed the
   "Program director's name" field off the side and they
   overlapped. Let both columns shrink, and stack the fields in
   one column at 600px and below.
   ══════════════════════════════════════════════ */

.caeps-app-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* beats the inline style */
}

.caeps-app-grid > .form-row > :is(input, select, textarea) {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* iOS centres the month value; line it up with the other fields. */
.caeps-app-grid input[type="month"]::-webkit-date-and-time-value {
	text-align: left;
}

@media (max-width: 600px) {
	.caeps-app-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ══════════════════════════════════════════════
   Checkout · Membership Information: labels above the text fields
   The label floated inside the box cut long labels short on phones
   ("If You Were Referred, Please Indicate By …"). The section's
   checkbox groups and selects already put their label above the
   field, so its text fields do the same, and a long label wraps
   onto a second line. WooCommerce's own checkout fields keep their
   floating labels. The long selectors beat WooCommerce's is-active
   rules and the textarea rule above.
   ══════════════════════════════════════════════ */

.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field > label,
.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field.is-active > label {
	order: -1; /* the input comes first in the markup */
	position: static;
	transform: none;
	transition: none;
	max-width: none;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	margin: 0 0 0.4em;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.4;
	color: #4B4C4D;
}

.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field.caeps-addon-field--invalid > label {
	color: #cc1818;
}

/* No floated label to clear inside the box any more. */
.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field input[type="text"],
.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field.is-active input[type="text"] {
	padding-top: 12px;
	padding-bottom: 12px;
}

.wp-block-woocommerce-checkout .caeps-checkout-addon-fields .wc-block-components-text-input.caeps-checkout-addon-field textarea {
	padding: 10px 12px;
}

/* ── Order received (thank-you) page ─────────────────────────────────────
 * The theme's custom CSS centres text in a 1000px column
 * (.wpb_text_column :is(p, ul, h2, …)), but only the text. The order table,
 * the related-subscriptions table and the billing address stayed at full
 * page width, flush left, so the page read as two misaligned columns
 * (QA, 13 October 2026, order #82490). Every block now sits in the same
 * column as the summary box above it. */
.woocommerce-order > section,
.woocommerce-order > .woocommerce-customer-details {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-order .woocommerce-table--order-details {
	width: 100%;
}
/* "Related subscriptions" sits inside a <header>, so the theme's
 * section > h2 size (1.4rem) missed it and it rendered as a page title. */
.woocommerce-order section header > h2 {
	font-size: 1.4rem;
}
/* Billing address: the phone and email lines picked up the column
 * centring on their own and jumped to the right of the address. Keep them
 * under it, in a box that matches the summary and the order table. */
.woocommerce-order .woocommerce-customer-details address {
	background: var(--color-content-bg-alt, #f0f3f5);
	padding: 24px;
	font-style: normal;
}
.woocommerce-order .woocommerce-customer-details address p {
	max-width: none;
	margin: 8px 0 0;
}

/* ══════════════════════════════════════════════
   Product pages: no "Description" tab label
   Reviews is removed (remove_reviews_tab()), so Description
   is normally the only tab and the tab strip is just the
   word "Description" above the text. CAEPS asked for it to
   go. Hidden only while it is the only tab — a product that
   gains a second tab keeps its tabs. The text still shows:
   WooCommerce's tab script opens the first panel without
   needing the strip to be visible.
   ══════════════════════════════════════════════ */

.woocommerce-tabs ul.tabs.wc-tabs:has(> li:only-child) {
	display: none;
}

/* And keep that lone panel open. WooCommerce's tab script hides every
   panel, then opens the one the URL asks for; a #reviews or #comment-N
   link asks for the Reviews tab, which CAEPS removes, so nothing opened
   and, with the label hidden, the description could not be reached. */
.woocommerce-tabs:has(> ul.tabs.wc-tabs > li:only-child) > .panel {
	display: block !important;
}

/* ── Header: hamburger menu on the far right ─────────────────────────────
 * Once the main menu collapses to its hamburger, it sat between the Join
 * button and the account/cart icon. Requested: the menu is the last item
 * on the right (mobile QA, 17 October 2026). Keyed on Impreza's own
 * mobile-menu state (.type_mobile), so it follows the theme's switch point.
 * The hamburger's padding moves into the page gutter so its icon lines up
 * with the right edge, as the account icon did. */
.l-header .l-subheader-cell.at_right > .w-nav.type_mobile {
	order: 2;
}
.l-header .l-subheader-cell.at_right > .w-nav.type_mobile ~ .w-hwrapper {
	order: 1;
}
.l-header .l-subheader-cell.at_right > .w-nav.type_mobile .w-nav-control {
	margin-right: -0.8em;
}
/* Phones: the account/cart icon lost the menu's padding that used to sit
 * between it and the Join button, so it gets the same 13px. */
@media (max-width: 768px) {
	.l-header .l-subheader-cell.at_right > .w-nav.type_mobile ~ .w-hwrapper {
		margin-left: 13px;
	}
}