/*
 * Opranic 2027: cart, checkout and account.
 * Loaded after the WooCommerce and Fluid Checkout stylesheets (see inc/commerce.php) and scoped under
 * the body class o27-is-commerce. The plugin layout logic is left alone; this file only changes what the
 * customer sees: colours, type, radii, shadows, fields, buttons, option cards and notices.
 *
 * Fluid Checkout reads most of its look from custom properties, so the first block bridges those to the
 * theme tokens. Where the plugin hard-codes a value with !important, the rule here says so in one line.
 * No uppercase transforms anywhere, and nothing functional is hidden.
 */

/* ---------------------------------------------------------------------------------------------
   1. Token bridge: plugin custom properties -> theme tokens
   The longer selector beats the boxed design template, which sets some of these on
   ":root body.woocommerce-page.has-fc-design-template--boxed".
   --------------------------------------------------------------------------------------------- */
:root body.o27-is-commerce.woocommerce-page,
:root body.o27-is-commerce.woocommerce-page.has-fc-design-template--boxed {
	--o27c-field-border: #C9CCD1;
	--o27c-error: #B42318;
	--o27c-error-soft: #FDF1EF;
	--o27c-success: #1D7A46;
	--o27c-orange-tint: #FFF6E8;
	--o27c-card-shadow: 0 1px 2px rgba(21, 24, 28, 0.06), 0 8px 24px rgba(21, 24, 28, 0.06);
	--o27c-focus-ring: 0 0 0 3px rgba(238, 147, 5, 0.35);

	/* WooCommerce core accents (the purple and friends) */
	--woocommerce: var(--o27-orange);
	--wc-primary: var(--o27-orange);
	--wc-primary-text: var(--o27-dark);
	--wc-secondary: var(--o27-grey);
	--wc-secondary-text: var(--o27-text);
	--wc-highlight: var(--o27-orange);
	--wc-highligh-text: var(--o27-dark);
	--wc-subtext: var(--o27-muted);
	--wc-green: var(--o27c-success);
	--wc-red: var(--o27c-error);
	--wc-orange: var(--o27-orange);
	--wc-blue: var(--o27-dark);
	--wc-destructive: var(--o27c-error);
	--wc-form-border-color: var(--o27c-field-border);
	--wc-form-border-radius: 12px;
	--wc-card-border-radius: var(--o27-radius-card);

	/* Fluid Checkout palette */
	--fluidcheckout--color--white: #fff;
	--fluidcheckout--color--lighter-grey: var(--o27-grey);
	--fluidcheckout--color--light-grey: var(--o27-border);
	--fluidcheckout--color--grey: #6B7077;
	--fluidcheckout--color--dark-grey: var(--o27-muted);
	--fluidcheckout--color--darker-grey: var(--o27-heading);
	--fluidcheckout--color--black: var(--o27-dark);
	--fluidcheckout--color--success: var(--o27c-success);
	--fluidcheckout--color--success-highlight: #E8F5EC;
	--fluidcheckout--color--error: var(--o27c-error);
	--fluidcheckout--color--alert: var(--o27-star);
	--fluidcheckout--border-color: var(--o27-border);
	--fluidcheckout--border-color--dark: #9AA0A8;
	--fluidcheckout--page--background-color: #fff;

	/* Sections and the order summary */
	--fluidcheckout--section--border-color: var(--o27-border);
	--fluidcheckout--section--border-radius: var(--o27-radius-card);
	--fluidcheckout--section--background-color: #fff;
	--fluidcheckout--section--shadow-color: rgba(21, 24, 28, 0.07);
	--fluidcheckout--section--shadow-color--large-screen: rgba(21, 24, 28, 0.07);
	--fluidcheckout--section--highlighted-background-color: var(--o27-offwhite);
	--fluidcheckout--section--highlighted-field-background-color: #fff;
	--fluidcheckout--order-summary--border-color: var(--o27-border);
	--fluidcheckout--order-summary--background-color: #fff;
	--fluidcheckout--order-summary--shadow-color: rgba(21, 24, 28, 0.07);
	--fluidcheckout--order-summary--shadow-color--large-screen: rgba(21, 24, 28, 0.07);
	--fluidcheckout--order-summary--cell-border-width: 1px;
	--fluidcheckout--order-summary--cell-border-width--products-list: 0px;
	--fluidcheckout--order-summary--cell-border-width--products: 1px;
	--fluidcheckout--order-summary--cell-border-width--summary: 0px;
	--fluidcheckout--order-summary--cell-border-width--totals-top: 1px;
	--fluidcheckout--order-summary--cell-border-width--totals-bottom: 0px;
	--fluidcheckout--order-summary--cell-border-color: var(--o27-border);
	--fluidcheckout--order-summary--cell-border-color--products: var(--o27-border);
	--fluidcheckout--order-summary--image-border-color: var(--o27-border);
	--fluidcheckout--order-summary--image-border-radius: 12px;
	--fluidcheckout--order-summary--image-shadow-color: transparent;
	--fluidcheckout--order-summary--image-background-color: #fff;
	--fluidcheckout--order-summary--quantity-background-color: var(--o27-dark);
	--fluidcheckout--order-summary--quantity-text-color: #fff;
	--fluidcheckout--order-summary--highlighted-total-background-color: var(--o27-offwhite);
	--fluidcheckout--cart-item--quantity-background-color: #fff;

	/* Fields */
	--fluidcheckout--field--height: 48px;
	--fluidcheckout--field--border-width: 1px;
	--fluidcheckout--field--border-radius: 12px;
	--fluidcheckout--field--border-color: var(--o27c-field-border);
	--fluidcheckout--field--background-color: #fff;
	--fluidcheckout--field--background-color--focus: #fff;
	--fluidcheckout--field--text-color: var(--o27-heading);
	--fluidcheckout--field--font-size: 1rem;
	--fluidcheckout--field--padding-left: 16px;
	--fluidcheckout--field--padding-horizontal: 16px;
	--fluidcheckout--field--box-shadow: none;
	--fluidcheckout--field--box-shadow--focus: var(--o27c-focus-ring);
	--fluidcheckout--select2--inner-spacing: 6px;

	/* Option boxes: shipping, payment, saved addresses */
	--fluidcheckout--option-box--spacing--between-options: 12px;
	--fluidcheckout--option-box--spacing--vertical: 16px;
	--fluidcheckout--option-box--spacing--horizontal: 14px;
	--fluidcheckout--option-box--border-width: 0px;
	--fluidcheckout--option-box--border-color: transparent;
	--fluidcheckout--option-box--border-radius: 16px;
	--fluidcheckout--option-box--label-border-width: 1px;
	--fluidcheckout--option-box--label-border-color: var(--o27-border);
	--fluidcheckout--option-box--label-border-color--hover: #9AA0A8;
	--fluidcheckout--option-box--label-border-color--checked: var(--o27-orange);
	--fluidcheckout--option-box--background-color: #fff;
	--fluidcheckout--option-box--background-color--hover: var(--o27-offwhite);
	--fluidcheckout--option-box--background-color--checked: var(--o27c-orange-tint);
	--fluidcheckout--option-box--label-color--checked: var(--o27-heading);
	--fluidcheckout--option-box--radio-color: #9AA0A8;
	--fluidcheckout--option-box--radio-color--hover: var(--o27-dark);
	--fluidcheckout--option-box--radio-color--checked: var(--o27-orange);
	--fluidcheckout--option-box--radio-icon-color--checked: var(--o27-dark);

	/* Buttons: the theme's primary (orange) and secondary (dark pill) */
	--fluidcheckout--button--height: 52px;
	--fluidcheckout--button--border-radius: 999px;
	--fluidcheckout--button--font-weight: 700;
	--fluidcheckout--button--font-size: 0.9375rem;
	--fluidcheckout--button--primary--background-color: var(--o27-orange);
	--fluidcheckout--button--primary--border-color: var(--o27-orange);
	--fluidcheckout--button--primary--text-color: var(--o27-dark);
	--fluidcheckout--button--primary--background-color--hover: var(--o27-orange-soft);
	--fluidcheckout--button--primary--border-color--hover: var(--o27-orange-soft);
	--fluidcheckout--button--primary--text-color--hover: var(--o27-dark);
	--fluidcheckout--button--secondary--background-color: var(--o27-dark);
	--fluidcheckout--button--secondary--border-color: var(--o27-dark);
	--fluidcheckout--button--secondary--text-color: #fff;
	--fluidcheckout--button--secondary--background-color--hover: var(--o27-orange);
	--fluidcheckout--button--secondary--border-color--hover: var(--o27-orange);
	--fluidcheckout--button--secondary--text-color--hover: var(--o27-dark);

	/* Coupons, progress, header and footer */
	--fluidcheckout--coupon-code--border-radius: 12px;
	--fluidcheckout--coupon-code--border-color: var(--o27-border);
	--fluidcheckout--coupon-code--background-color: var(--o27-offwhite);
	--fluidcheckout--coupon-code--highlight-background-color: var(--o27c-orange-tint);
	--fluidcheckout--discount-section--border-color: var(--o27-border);
	--fluidcheckout--checkout-progress--background-color: transparent;
	--fluidcheckout--checkout-progress--bar-color: var(--o27-border);
	--fluidcheckout--checkout-progress--bar-color--current: var(--o27-orange);
	--fluidcheckout--checkout-progress--bar-color--complete: var(--o27-orange);
	--fluidcheckout--checkout-progress--step-count--text-color: var(--o27-muted);
	--fluidcheckout--header--background-color: var(--o27-dark);
	--fluidcheckout--header--border-width: 0px;
	--fluidcheckout--header--border-width--large-screen: 0px;
	--fluidcheckout--header--shadow-color: rgba(0, 0, 0, 0.38);
	--fluidcheckout--header--shadow-color--large-screen: rgba(0, 0, 0, 0.38);
	--fluidcheckout--footer--background-color: var(--o27-offwhite);
	--fluidcheckout--footer--border-width: 0px;
	--fluidcheckout--footer--border-width--large-screen: 0px;

	/* intl-tel-input (phone field) */
	--iti-border-color: var(--o27c-field-border);
	--iti-hover-color: var(--o27-grey);
	--iti-dropdown-bg: #fff;
	--iti-arrow-color: var(--o27-muted);
	--iti-dialcode-color: var(--o27-muted);
}

/* ---------------------------------------------------------------------------------------------
   2. Page frame
   Cart and checkout are drawn by Fluid Checkout (#main.fc-main, its own slim header and footer);
   the account page is an ordinary theme page (.o27-content) and already has the page wrap.
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce {
	background: #fff;
	color: var(--o27-text);
	font-family: var(--o27-font-body);
	font-size: 1rem;
	line-height: 1.6;
}
/* Plugin sets overflow-x on html and body for checkout; keep the page from scrolling sideways. */
html:has(body.o27-is-commerce) { overflow-x: clip; }

body.o27-is-commerce #main.fc-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--o27-wrap);
	margin-inline: auto;
	padding: 40px var(--o27-pad) 0;
}
body.o27-is-commerce .fc-content { padding-bottom: 96px; }
body.o27-is-commerce .fc-content div.woocommerce:not(div.woocommerce div.woocommerce) { max-width: 100%; }

/* Slim header: the theme's dark surface, the fading orange line, logo and cart total. */
body.o27-is-commerce .fc-checkout-header {
	position: relative;
	top: 0; /* Fluid Checkout pushes its fixed header below the admin bar; this one is not fixed (0.9.51). */
	background-color: var(--o27-dark);
	border: 0;
	box-shadow: var(--o27-shadow-header);
}
body.o27-is-commerce .fc-checkout-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--o27-orange) 50%, transparent 100%);
}
body.o27-is-commerce .fc-checkout-header__inner {
	max-width: var(--o27-wrap);
	min-height: 72px;
	padding-inline: var(--o27-pad);
}
body.o27-is-commerce .fc-checkout__branding img {
	width: auto;
	height: 40px;
	max-width: 100%;
	border-radius: 0;
}
body.o27-is-commerce .fc-checkout__cart-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	/* Below 1000 px Fluid Checkout gives the link a white ground and a shadow: white text on white (0.9.51). */
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
body.o27-is-commerce .fc-checkout__cart-link strong { color: #fff; font-weight: 700; }
body.o27-is-commerce .fc-checkout__cart-link:hover { border-color: var(--o27-orange); color: var(--o27-orange); }
body.o27-is-commerce .fc-checkout__cart-link:hover strong { color: var(--o27-orange); }

/* Cart title: Fluid Checkout hides the page h1; on the cart it is shown in the theme's title style.
   !important mirrors WordPress core .screen-reader-text, which clips with !important. */
body.o27-is-commerce.woocommerce-cart .fc-content > h1.fc-checkout__title.screen-reader-text {
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 32px !important;
	overflow: visible !important;
	font-family: var(--o27-font-head);
	font-weight: 300;
	font-size: 3rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--o27-heading);
}

/* Slim footer */
body.o27-is-commerce .fc-checkout-footer {
	margin-top: 0;
	padding: 40px var(--o27-pad) 48px;
	background: var(--o27-offwhite);
	border-top: 1px solid var(--o27-border);
	color: var(--o27-muted);
	font-size: 0.875rem;
}
body.o27-is-commerce .fc-checkout-footer__inner {
	max-width: var(--o27-wrap);
	margin-inline: auto;
	padding: 0;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 64px;
}
body.o27-is-commerce .fc-checkout-footer .widget { min-width: 0; }
body.o27-is-commerce .fc-checkout-footer .widget-title,
body.o27-is-commerce .fc-checkout-footer .widgettitle {
	margin: 0 0 8px;
	font: 700 0.75rem/1.4 var(--o27-font-body);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--o27-linelabel);
}
body.o27-is-commerce .fc-checkout-footer ul { margin: 0; padding: 0; list-style: none; }
body.o27-is-commerce .fc-checkout-footer li { margin: 0; }
body.o27-is-commerce .fc-checkout-footer a {
	display: inline-block;
	padding: 6px 0;
	color: var(--o27-text);
	text-decoration: none;
}
body.o27-is-commerce .fc-checkout-footer a:hover { color: var(--o27-orange); text-decoration: underline; }

/* Links on commerce pages share the theme's underline accent in running text. */
body.o27-is-commerce .fc-wrapper a:not(.button):not([class*="fc-cart-action"]):not(.fc-checkout__cart-link) {
	text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------------------------
   3. Notices
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	position: relative;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--o27-border);
	border-top: 3px solid var(--o27-orange);
	border-radius: 12px;
	background: var(--o27-offwhite);
	color: var(--o27-text);
	font-size: 0.9375rem;
	line-height: 1.55;
	list-style: none;
	box-shadow: none;
}
/* WooCommerce draws the notice icon with its own icon font; the font is not part of the theme. */
body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}
body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info) .button { float: none; margin: 0; order: 2; }
body.o27-is-commerce .woocommerce-error {
	border-top-color: var(--o27c-error);
	background: var(--o27c-error-soft);
	color: var(--o27-heading);
}
body.o27-is-commerce .woocommerce-error li { margin: 0; padding: 0; }
body.o27-is-commerce .woocommerce-error li + li { margin-top: 6px; }
body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	color: var(--o27-heading);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
body.o27-is-commerce .fc-checkout-notices:empty { display: none; }
/* The empty-cart notice is a calm statement, not an alert. */
body.o27-is-commerce .cart-empty.woocommerce-info {
	display: block;
	margin-bottom: 24px;
	padding: 28px 28px;
	border-top: 1px solid var(--o27-border);
	border-radius: var(--o27-radius-card);
	background: #fff;
	box-shadow: var(--o27c-card-shadow);
	font-family: var(--o27-font-head);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.3;
	color: var(--o27-heading);
}

/* ---------------------------------------------------------------------------------------------
   4. Buttons
   Default: the theme's dark pill (orange on hover). Primary actions: the orange pill.
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .fc-wrapper button.button, .fc-wrapper a.button, .fc-cart-action__proceed-checkout, button.woocommerce-button, .woocommerce-form-login__submit, .woocommerce-form-register__submit),
body.o27-is-commerce .fc-wrapper .fc-coupon_code__collapsible .fc-coupon-code__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--o27-dark);
	border-radius: 999px;
	background: var(--o27-dark);
	color: #fff;
	font: 600 0.9375rem/1.2 var(--o27-font-body);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--o27-ease);
}
body.o27-is-commerce :is(.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .fc-wrapper button.button, .fc-wrapper a.button, button.woocommerce-button):hover,
body.o27-is-commerce .fc-wrapper .fc-coupon_code__collapsible .fc-coupon-code__apply:hover {
	background: var(--o27-orange);
	border-color: var(--o27-orange);
	color: var(--o27-dark);
}

/* Primary actions. The plugin colours some of these with !important through its variables, which are
   bridged above, so no override is needed here. */
body.o27-is-commerce :is(.checkout-button, #place_order, .fc-place-order-button, .fc-step__next-step, .return-to-shop .button, .fc-cart-action__proceed-checkout, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce .button.alt, .woocommerce button.alt),
body.o27-is-commerce .fc-wrapper .wc-proceed-to-checkout .checkout-button {
	min-height: 52px;
	border: 1px solid var(--o27-orange);
	background: var(--o27-orange);
	color: var(--o27-dark);
	font-weight: 700;
}
body.o27-is-commerce :is(.checkout-button, #place_order, .fc-place-order-button, .fc-step__next-step, .return-to-shop .button, .fc-cart-action__proceed-checkout, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce .button.alt, .woocommerce button.alt):not(:disabled):hover,
body.o27-is-commerce .fc-wrapper .wc-proceed-to-checkout .checkout-button:hover {
	border-color: var(--o27-orange-soft);
	background: var(--o27-orange-soft);
	color: var(--o27-dark);
}
body.o27-is-commerce :is(.checkout-button, .fc-place-order-button, .fc-step__next-step, #place_order) { width: 100%; }
body.o27-is-commerce .fc-wrapper .wc-proceed-to-checkout { padding: 20px 0 4px; }
body.o27-is-commerce .fc-wrapper .wc-proceed-to-checkout .checkout-button { display: flex; margin: 0; }
/* A disabled button keeps its colour and dims, so the theme orange stays recognisable. */
body.o27-is-commerce :is(button, .button):disabled,
body.o27-is-commerce :is(button, .button)[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Buttons keep the theme's press feedback. */
body.o27-is-commerce :is(.button, button.button):not(:disabled):active { transform: translateY(1px) scale(0.99); }

/* Focus ring, same as the rest of the theme. !important matches the plugin's own focus outlines. */
body.o27-is-commerce :is(main, .fc-login-form__wrapper) :is(a, button, input[type="checkbox"], input[type="radio"], input[type="number"], summary, [role="button"], [tabindex]):focus-visible,
body.o27-is-commerce div.woocommerce :is(input[type="checkbox"], input[type="radio"], input[type="number"]):focus,
body.o27-is-commerce .fc-wrapper :is(.button, button, a, input):focus-visible {
	outline: 3px solid var(--o27-focus) !important;
	outline-offset: 3px !important;
}

/* Secondary text actions inside the steps. */
body.o27-is-commerce .fc-wrapper .fc-step__substep-edit {
	color: var(--o27-heading);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
body.o27-is-commerce .fc-wrapper .fc-step__substep-edit:hover { color: var(--o27-orange); }
body.o27-is-commerce .fc-wrapper .fc-step__substep-save { min-height: 48px; }

/* ---------------------------------------------------------------------------------------------
   5. Forms: labels, fields, selects, select2, textarea, phone, checkboxes, radios, errors
   Shared by the checkout, the cart shipping calculator and the account forms.
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce :is(.woocommerce form .form-row label, .woocommerce-form-row label, .fc-wrapper label) {
	margin: 0 0 6px;
	color: var(--o27-heading);
	font-family: var(--o27-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
body.o27-is-commerce :is(label .required, .required) {
	color: var(--o27-star);
	font-weight: 700;
	text-decoration: none;
	border: 0;
}
body.o27-is-commerce label .optional { color: var(--o27-muted); font-weight: 400; }
body.o27-is-commerce abbr.required { color: var(--o27-star); border: 0; text-decoration: none; }

body.o27-is-commerce :is(main, .fc-login-form__wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], input.input-text, select, textarea):not(.qty):not(.o27-sr) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--o27c-field-border);
	border-radius: 12px;
	background-color: #fff;
	color: var(--o27-heading);
	font: 400 1rem/1.3 var(--o27-font-body);
	letter-spacing: 0;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.o27-is-commerce :is(main, .fc-login-form__wrapper) textarea,
body.o27-is-commerce :is(main, .fc-login-form__wrapper) textarea.input-text {
	min-height: 120px;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
}
body.o27-is-commerce :is(main, .fc-login-form__wrapper) :is(input, select, textarea)::placeholder { color: #6B7178; opacity: 1; }
body.o27-is-commerce :is(main, .fc-login-form__wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input.input-text, select, textarea):not(.qty):hover { border-color: #9AA0A8; }
body.o27-is-commerce :is(main, .fc-login-form__wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input.input-text, select, textarea):not(.qty):focus {
	border-color: var(--o27-dark);
	background-color: #fff;
	outline: 3px solid var(--o27-focus);
	outline-offset: 2px;
	box-shadow: none;
}

/* Native select (select2 hides it once the script runs): a chevron in the theme's orange. */
body.o27-is-commerce :is(main, .fc-login-form__wrapper) select:not(.select2-hidden-accessible) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23EE9305' stroke-width='2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* Validation: red border and a soft ring, message below the field. */
body.o27-is-commerce div.woocommerce form .form-row[class*="woocommerce-invalid"] :is(input, select, textarea, .select2-selection) {
	border-color: var(--o27c-error);
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}
body.o27-is-commerce div.woocommerce form .form-row.woocommerce-validated:not([class*="woocommerce-invalid"]) :is(input, select, textarea, .select2-selection) {
	border-color: var(--o27c-field-border);
}
body.o27-is-commerce div.woocommerce .form-row .fc-inline-error {
	background: transparent;
	color: var(--o27c-error);
	font-size: 0.8125rem;
	font-weight: 600;
}
body.o27-is-commerce div.woocommerce .form-row .fc-mailcheck-suggestion { background: var(--o27c-orange-tint); }
body.o27-is-commerce div.woocommerce form .form-row .woocommerce-input-wrapper span.description {
	color: var(--o27-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* select2 (country, state): same as a field. */
body.o27-is-commerce .select2-container .select2-selection--single {
	min-height: 48px;
	border: 1px solid var(--o27c-field-border);
	border-radius: 12px;
	background: #fff;
}
body.o27-is-commerce .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--o27-heading);
	font: 400 1rem/2.875rem var(--o27-font-body);
	padding-left: 16px;
}
body.o27-is-commerce .select2-container .select2-selection--single .select2-selection__placeholder { color: #7A8088; }
body.o27-is-commerce .select2-container .select2-selection--single .select2-selection__arrow b { border-top-color: var(--o27-orange); }
body.o27-is-commerce .select2-container--open .select2-selection--single,
body.o27-is-commerce .select2-container--focus .select2-selection--single {
	border-color: var(--o27-dark);
	outline: 3px solid var(--o27-focus);
	outline-offset: 2px;
}
body.o27-is-commerce .select2-dropdown {
	margin-top: 4px;
	border: 1px solid var(--o27-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--o27c-card-shadow);
	overflow: hidden;
	font-family: var(--o27-font-body);
	z-index: 100500;
}
body.o27-is-commerce .select2-search--dropdown { padding: 8px; }
body.o27-is-commerce .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	border: 1px solid var(--o27c-field-border);
	border-radius: 10px;
}
body.o27-is-commerce .select2-results__option { padding: 10px 16px; font-size: 0.9375rem; color: var(--o27-text); }
body.o27-is-commerce .select2-container--default .select2-results__option--highlighted[aria-selected],
body.o27-is-commerce .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--o27c-orange-tint);
	color: var(--o27-heading);
}
body.o27-is-commerce .select2-container--default .select2-results__option[aria-selected="true"],
body.o27-is-commerce .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--o27-grey);
	color: var(--o27-heading);
	font-weight: 600;
}

/* intl-tel-input (phone number with country flag) */
body.o27-is-commerce .iti { display: block; width: 100%; }
body.o27-is-commerce .iti input.iti__tel-input,
body.o27-is-commerce .iti input[type="tel"] { width: 100%; }
body.o27-is-commerce .iti__selected-country { border-radius: 12px 0 0 12px; }
body.o27-is-commerce .iti__selected-country:hover,
body.o27-is-commerce .iti__selected-country:focus { background: var(--o27-grey); }
body.o27-is-commerce .iti__dropdown-content {
	border: 1px solid var(--o27-border);
	border-radius: 12px;
	box-shadow: var(--o27c-card-shadow);
	overflow: hidden;
}
body.o27-is-commerce .iti__country { padding: 10px 14px; }
body.o27-is-commerce .iti__country.iti__highlight { background: var(--o27c-orange-tint); }
body.o27-is-commerce .iti__search-input { min-height: 44px; border-radius: 10px; }

/* Checkboxes and radios: native controls tinted in the theme dark, with orange for the choice cards. */
body.o27-is-commerce :is(main, .fc-login-form__wrapper) input[type="checkbox"],
body.o27-is-commerce :is(main, .fc-login-form__wrapper) input[type="radio"] {
	accent-color: var(--o27-dark);
}
body.o27-is-commerce :is(main, .fc-login-form__wrapper) input[type="checkbox"]:not(.o27-sr):not([style*="display: none"]) {
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	vertical-align: -4px;
	border-radius: 5px;
}
body.o27-is-commerce :is(.woocommerce-form__label-for-checkbox, label.checkbox, .fc-checkbox-field label) {
	display: inline-flex;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--o27-text);
	cursor: pointer;
}
body.o27-is-commerce :is(.woocommerce-form__label-for-checkbox, label.checkbox, .fc-checkbox-field label) input[type="checkbox"] { flex: none; margin-top: 2px; }
body.o27-is-commerce .fc-checkbox-label-text { font-weight: 500; }

/* ---------------------------------------------------------------------------------------------
   6. Quantity control (cart and order summary): the buy box pill
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce .quantity {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--o27c-field-border);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}
body.o27-is-commerce .quantity input.qty,
body.o27-is-commerce .quantity input[type="number"] {
	width: 56px;
	min-height: 0;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--o27-heading);
	font: 600 0.9375rem/1 var(--o27-font-body);
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* The plugin fixes the size, border and radius of the cart and summary quantity box with !important
   (and different heights on the cart and the checkout), so the pill shape needs !important as well. */
body.o27-is-commerce.woocommerce-cart .fc-wrapper div.quantity,
body.o27-is-commerce.woocommerce-checkout .fc-wrapper div.quantity {
	height: 40px !important;
	margin-top: 8px !important;
	border-color: var(--o27c-field-border) !important;
	border-radius: 999px !important;
	background-color: #fff !important;
	overflow: hidden !important;
}
body.o27-is-commerce.woocommerce-cart .fc-wrapper input.qty,
body.o27-is-commerce.woocommerce-checkout .fc-wrapper input.qty {
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	top: 0 !important;
	line-height: 2.375rem !important;
	color: var(--o27-heading) !important;
	font-family: var(--o27-font-body) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
}
body.o27-is-commerce .fc-wrapper .fc-number-spin-button { color: var(--o27-heading); }
body.o27-is-commerce .fc-wrapper .fc-number-spin-button:hover { color: var(--o27-orange); }
body.o27-is-commerce .quantity input.qty:focus { outline: none; box-shadow: none; }
body.o27-is-commerce .quantity:focus-within { border-color: var(--o27-dark); outline: 3px solid var(--o27-focus); outline-offset: 2px; }
body.o27-is-commerce .quantity input::-webkit-inner-spin-button,
body.o27-is-commerce .quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Spinner buttons added by Fluid Checkout's number spinner script (when it runs). */
body.o27-is-commerce .quantity button {
	width: 40px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--o27-heading);
	font-size: 1.125rem;
	cursor: pointer;
}
body.o27-is-commerce .quantity button:hover { color: var(--o27-orange); background: var(--o27-grey); }

/* ---------------------------------------------------------------------------------------------
   7. Cart
   --------------------------------------------------------------------------------------------- */
/* Cards: the items box, cross-sells and the order summary share one surface. */
body.o27-is-commerce .fc-wrapper .fc-cart-section,
body.o27-is-commerce .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner,
body.o27-is-commerce .fc-wrapper .fc-cart-order-review .fc-cart-order-review__inner {
	border: 1px solid var(--o27-border);
	border-radius: var(--o27-radius-card);
	background: #fff;
	box-shadow: var(--o27c-card-shadow);
}
body.o27-is-commerce .fc-wrapper .fc-cart-section { margin: 0 0 24px; overflow: visible; }
body.o27-is-commerce .fc-wrapper .fc-cart-section[data-section-id="cart_items"] { overflow: hidden; }
body.o27-is-commerce .fc-wrapper .fc-cart-section[data-section-visible="no"] { box-shadow: none; }

body.o27-is-commerce table.shop_table { border: 0; border-collapse: collapse; margin: 0; background: transparent; }
body.o27-is-commerce table.shop_table :is(th, td) { border: 0; padding: 12px 24px; vertical-align: top; text-align: left; }
body.o27-is-commerce table.shop_table.cart thead th {
	padding: 18px 24px 14px;
	border-bottom: 1px solid var(--o27-border);
	color: var(--o27-muted);
	font: 600 0.8125rem/1.3 var(--o27-font-body);
	letter-spacing: 0.02em;
	text-transform: none;
}
body.o27-is-commerce table.shop_table.cart thead th.product-subtotal { text-align: right; }

body.o27-is-commerce table.shop_table.cart .cart_item td { padding: 24px; }
body.o27-is-commerce table.shop_table.cart .cart_item + .cart_item td { border-top: 1px solid var(--o27-border); }
body.o27-is-commerce .cart_item img,
body.o27-is-commerce .cross-sells__item img {
	border: 1px solid var(--o27-border);
	border-radius: 16px;
	background: #fff;
	object-fit: contain;
}
body.o27-is-commerce .cart_item .product-details { min-width: 0; }
body.o27-is-commerce .cart-item__product-name,
body.o27-is-commerce .cart-item__name {
	font-family: var(--o27-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--o27-heading);
}
body.o27-is-commerce .cart-item__product-name a {
	color: var(--o27-heading);
	text-decoration: none;
}
body.o27-is-commerce .cart-item__product-name a:hover { color: var(--o27-orange); text-decoration: underline; }
body.o27-is-commerce .cart-item__element { margin: 0 0 8px; }
body.o27-is-commerce .cart-item__price { color: var(--o27-muted); font-size: 0.875rem; font-weight: 500; }
body.o27-is-commerce .cart_item .product-total {
	color: var(--o27-heading);
	font-family: var(--o27-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Variation and meta lines under the product name. */
body.o27-is-commerce :is(.cart-item__meta, .cart-item__element dl.variation, .cart-item__element .variation) {
	margin: 4px 0 8px;
	color: var(--o27-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}
body.o27-is-commerce :is(.cart-item__meta, .variation) :is(dt, dd, p) { margin: 0; display: inline; font-size: inherit; }
body.o27-is-commerce :is(.cart-item__meta, .variation) dt { font-weight: 600; color: var(--o27-text); }
body.o27-is-commerce .cart_item .quantity { margin: 4px 0 4px; }

/* Remove link: a quiet text link with the orange underline. */
body.o27-is-commerce .fc-cart-item-actions { margin: 4px 0 0; }
body.o27-is-commerce a.remove,
body.o27-is-commerce .fc-cart-item-actions > a:not(.button) {
	display: inline;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--o27-muted);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
body.o27-is-commerce a.remove:hover,
body.o27-is-commerce .fc-cart-item-actions > a:not(.button):hover { color: var(--o27c-error); background: transparent; }

/* Coupon: toggle link plus field and button. */
body.o27-is-commerce .fc-cart-coupon-code-form { padding: 20px 24px 24px; border-top: 1px solid var(--o27-border); }
body.o27-is-commerce .fc-wrapper .fc-expansible-form-section .expansible-section__toggle-plus {
	color: var(--o27-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
body.o27-is-commerce .fc-wrapper .fc-expansible-form-section .expansible-section__toggle-plus:hover { color: var(--o27-orange); }
body.o27-is-commerce .fc-wrapper .fc-coupon_code__collapsible input#coupon_code { height: 56px; padding-right: 140px; }
body.o27-is-commerce .fc-wrapper .fc-coupon_code__collapsible .fc-coupon-code__apply {
	/* the plugin sets size and position with !important, so only colour and shape are touched here */
	border-radius: 999px;
}
body.o27-is-commerce .fc-coupon-code-section__message,
body.o27-is-commerce .fc-coupon-code-messages .woocommerce-message { border-radius: 12px; }

/* Actions under the items: continue shopping (text link) and proceed (primary). */
body.o27-is-commerce .fc-wrapper .fc-cart-actions { gap: 16px 24px; }
body.o27-is-commerce .fc-wrapper .fc-cart-action__continue-shopping {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--o27-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}
body.o27-is-commerce .fc-wrapper .fc-cart-action__continue-shopping:hover { color: var(--o27-orange); text-decoration: none; }
body.o27-is-commerce .fc-wrapper .fc-cart-actions .fc-cart-action__proceed-checkout:only-child .checkout-button,
body.o27-is-commerce .fc-wrapper .fc-cart-actions .fc-cart-action__proceed-checkout { width: auto; }

/* Cross-sells */
body.o27-is-commerce .fc-section__header { padding: 24px 24px 8px; }
body.o27-is-commerce .fc-section-title,
body.o27-is-commerce .fc-cart-section .fc-section-title {
	margin: 0;
	font-family: var(--o27-font-head);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--o27-heading);
}
body.o27-is-commerce .fc-wrapper .cross-sells .cross-sells__item { padding: 20px 24px; margin: 0; }
body.o27-is-commerce .fc-wrapper .cross-sells .cross-sells__item + .cross-sells__item { border-top: 1px solid var(--o27-border); }
body.o27-is-commerce .cross-sells .product-title,
body.o27-is-commerce .cross-sells .product-name {
	font-family: var(--o27-font-head);
	font-weight: 600;
	color: var(--o27-heading);
}

/* Empty cart: a clear way back to the shop. */
body.o27-is-commerce .return-to-shop { clear: both; margin: 0; text-align: left; }
body.o27-is-commerce .return-to-shop .button { float: none; min-width: 240px; margin: 0; }
/* Without a sidebar Fluid Checkout centres the notices in a 62.5% column with !important; the empty cart
   is left aligned with the title instead, so the !important is repeated here. */
body.o27-is-commerce.woocommerce-cart:not(.has-fc-sidebar) .woocommerce-notices-wrapper {
	float: none;
	width: 100% !important;
	max-width: 720px;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
   8. Order summary (cart sidebar and checkout sidebar), totals, shipping calculator
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce .fc-checkout-order-review__head,
body.o27-is-commerce .fc-cart-order-review__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 12px;
	border: 0;
}
/* Headings: the plugin uppercases these with long selectors, so the selectors below match their weight. */
body.o27-is-commerce div.woocommerce .fc-wrapper .fc-checkout-order-review-title,
body.o27-is-commerce div.woocommerce .fc-wrapper .fc-cart-order-review-title,
body.o27-is-commerce.woocommerce-checkout div.woocommerce .fc-wrapper .fc-step__substep .fc-step__substep-title,
body.o27-is-commerce.woocommerce-checkout div.woocommerce .fc-wrapper .fc-checkout-order-review-title,
body.o27-is-commerce .fc-step__substep-title {
	margin: 0;
	padding: 0;
	color: var(--o27-heading);
	font-family: var(--o27-font-head);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-transform: none;
}
body.o27-is-commerce div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total th,
body.o27-is-commerce div.woocommerce .form-row .fc-vat-validation__result strong.valid,
body.o27-is-commerce .woocommerce ul.order_details li,
body.o27-is-commerce .fc-wrapper .fc-section-title,
body.o27-is-commerce .fc-progress-bar .fc-progress-bar__count { text-transform: none; }
body.o27-is-commerce .fc-cart-items-count,
body.o27-is-commerce .fc-checkout-order-review__header-link {
	color: var(--o27-muted);
	font-size: 0.875rem;
	font-weight: 500;
}
body.o27-is-commerce .fc-checkout-order-review__header-link {
	color: var(--o27-heading);
	font-weight: 600;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
}
body.o27-is-commerce .fc-checkout-order-review__header-link:hover { color: var(--o27-orange); }

body.o27-is-commerce #order_review { padding: 0; }
body.o27-is-commerce table.shop_table,
body.o27-is-commerce #order_review table.shop_table :is(tr, th, td) { border-radius: 0; }
/* On the checkout the total row is the last thing in the summary card, so the band follows the card corners. */
body.o27-is-commerce.woocommerce-checkout .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner { padding-bottom: 0; }
body.o27-is-commerce.woocommerce-checkout #order_review table.shop_table tr.order-total:last-child th:first-child { border-bottom-left-radius: calc(var(--o27-radius-card) - 1px); }
body.o27-is-commerce.woocommerce-checkout #order_review table.shop_table tr.order-total:last-child td:last-child { border-bottom-right-radius: calc(var(--o27-radius-card) - 1px); }
/* Cells keep the plugin's 20px side padding (it sets it with !important) so the table lines up with the heading. */
body.o27-is-commerce #order_review table.shop_table tbody td { border-top: 1px solid var(--o27-border); }
body.o27-is-commerce #order_review table.shop_table tfoot :is(th, td) {
	border-top: 0;
	color: var(--o27-text);
	font-size: 0.9375rem;
	font-weight: 500;
	background: transparent;
}
body.o27-is-commerce #order_review table.shop_table tfoot th { font-weight: 600; color: var(--o27-heading); }
body.o27-is-commerce #order_review table.shop_table tfoot td { text-align: right; font-variant-numeric: tabular-nums; }
body.o27-is-commerce #order_review table.shop_table tfoot tr:first-child :is(th, td) { border-top: 1px solid var(--o27-border); }
body.o27-is-commerce #order_review table.shop_table tr.order-total :is(th, td) {
	border-top: 1px solid var(--o27-border);
	background: var(--o27-offwhite);
	font-family: var(--o27-font-head);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--o27-heading);
}
body.o27-is-commerce #order_review table.shop_table tr.order-total strong { font-weight: 600; }
body.o27-is-commerce #order_review .wc-proceed-to-checkout { padding: 20px 0 20px; }
body.o27-is-commerce .fc-checkout-order-review__edit-cart { font-weight: 600; }

/* Order summary product rows (checkout): image, name, price, quantity, remove. */
body.o27-is-commerce #order_review .cart-item__name { font-size: 0.9375rem; }

/* Shipping lines and the cart shipping calculator */
body.o27-is-commerce .woocommerce-shipping-destination,
body.o27-is-commerce .woocommerce-shipping-totals td,
body.o27-is-commerce .fc-shipping-method__packages {
	color: var(--o27-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}
body.o27-is-commerce .woocommerce-shipping-destination { margin: 0 0 8px; }
body.o27-is-commerce .shipping-calculator-button {
	color: var(--o27-heading);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
body.o27-is-commerce .shipping-calculator-button:hover { color: var(--o27-orange); }
body.o27-is-commerce .shipping-calculator-form { margin-top: 16px; padding: 20px; border: 1px solid var(--o27-border); border-radius: 16px; background: var(--o27-offwhite); text-align: left; }
body.o27-is-commerce .shipping-calculator-form p { margin: 0 0 14px; }
body.o27-is-commerce .shipping-calculator-form p:last-child { margin-bottom: 0; }

/* Shipping and payment lists as selectable cards (checkout and cart). Plugin colours come from the
   variables above; the list container loses its outer frame and each option gets its own card. */
body.o27-is-commerce .woocommerce ul#shipping_method.shipping-method__options,
body.o27-is-commerce .woocommerce ul#shipping_method {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	list-style: none;
}
body.o27-is-commerce .woocommerce ul#shipping_method li.shipping-method__option { margin: 0 !important; /* plugin margin uses !important */ }
body.o27-is-commerce .woocommerce ul#shipping_method .shipping-method__option .shipping-method__option-label {
	border-radius: 16px;
	background: #fff;
	color: var(--o27-text);
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
body.o27-is-commerce .woocommerce ul#shipping_method .shipping-method__option .shipping-method__option-label:hover { box-shadow: 0 0 0 1px #9AA0A8; }
body.o27-is-commerce .woocommerce ul#shipping_method .shipping-method__option input[type="radio"]:checked + .shipping-method__option-label {
	box-shadow: 0 0 0 1px var(--o27-orange), 0 8px 20px rgba(238, 147, 5, 0.16);
}
body.o27-is-commerce .woocommerce ul#shipping_method .shipping-method__option-price { color: var(--o27-heading); font-variant-numeric: tabular-nums; }
body.o27-is-commerce .shipping-method__option-description { color: var(--o27-muted); }

/* Payment methods: each li is a card; the payment box sits inside it. */
/* The plugin frames the list with !important, so the frame is removed with !important as well. */
body.o27-is-commerce.woocommerce-checkout div.woocommerce .fc-wrapper #payment ul.payment_methods {
	display: grid;
	gap: 12px;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible;
}
body.o27-is-commerce .fc-wrapper #payment .payment_methods > li.wc_payment_method:not(.woocommerce-notice) {
	margin: 0 !important; /* plugin margin uses !important */
	border: 1px solid var(--o27-border);
	border-radius: 16px;
	background-color: #fff !important; /* plugin sets a transparent background with !important */
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.o27-is-commerce .fc-wrapper #payment .payment_methods > li.wc_payment_method:not(.woocommerce-notice):hover { border-color: #9AA0A8; }
body.o27-is-commerce .fc-wrapper #payment .payment_methods > li.wc_payment_method:has(> input[name="payment_method"]:checked) {
	border-color: var(--o27-orange);
	box-shadow: 0 0 0 1px var(--o27-orange), 0 8px 20px rgba(238, 147, 5, 0.16);
}
body.o27-is-commerce .fc-wrapper #payment ul.wc_payment_methods > li.wc_payment_method > label {
	border: 0 !important; /* plugin draws label borders with !important-free rules but resets sides on states */
	border-radius: 0;
	background: transparent;
	color: var(--o27-heading);
	font-weight: 600;
}
body.o27-is-commerce .fc-wrapper #payment ul.wc_payment_methods > li.wc_payment_method > input[name="payment_method"]:checked + label {
	background: var(--o27c-orange-tint);
	color: var(--o27-heading);
}
body.o27-is-commerce .fc-wrapper #payment ul.payment_methods > li.wc_payment_method .payment_box {
	border: 0;
	border-top: 1px solid var(--o27-border);
	background: var(--o27-offwhite);
	color: var(--o27-text);
	font-size: 0.875rem;
}
body.o27-is-commerce .fc-wrapper #payment .payment-method__label-icon img { border-radius: 4px; }

/* Widget areas around the summary (trust and payment logo rows, links). */
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) { margin-top: 24px; color: var(--o27-muted); font-size: 0.875rem; line-height: 1.5; }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) .widget { margin: 0 0 20px; }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) :is(h2, h3, h4, .widget-title, .wp-block-heading, .wp-block-search__label) {
	margin: 0 0 8px;
	padding: 0;
	font: 700 0.75rem/1.4 var(--o27-font-body);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--o27-linelabel);
}
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) ul { margin: 0; padding: 0; list-style: none; }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) li { margin: 0; padding: 0; font-size: 0.875rem; }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) a { display: inline-block; padding: 4px 0; color: var(--o27-text); text-decoration-color: var(--o27-orange); }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) a:hover { color: var(--o27-orange); }
body.o27-is-commerce .fc-widget-area:not(.fc-checkout-footer__inner) img { max-width: 100%; height: auto; border-radius: 6px; }
body.o27-is-commerce .fc-widget-area .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
body.o27-is-commerce .fc-widget-area .wp-block-search__input { flex: 1; min-width: 0; }
body.o27-is-commerce .fc-widget-area .wp-block-search__button { min-height: 48px; padding: 0 20px; border-radius: 999px; }

/* ---------------------------------------------------------------------------------------------
   9. Checkout: progress, steps, contact login, account fields, terms, place order
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce .fc-progress-bar .fc-progress-bar__inner { padding: 0 0 20px; background: transparent; border-radius: 0; }
body.o27-is-commerce .fc-progress-bar .fc-progress-bar__count {
	margin: 0 0 10px;
	font: 600 0.875rem/1.3 var(--o27-font-body);
	letter-spacing: 0.02em;
	text-transform: none;
	text-align: left;
	color: var(--o27-muted);
}
body.o27-is-commerce .fc-progress-bar .fc-progress-bar__current-step { color: var(--o27-heading); }
body.o27-is-commerce .fc-progress-bar--bars .fc-progress-bar__steps,
body.o27-is-commerce .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step { height: 6px; border-radius: 3px; }
/* Text progress variants (when a store chooses them). */
body.o27-is-commerce .fc-progress-bar:not(.fc-progress-bar--bars) .fc-progress-bar__step { font-weight: 600; color: var(--o27-muted); text-transform: none; }
body.o27-is-commerce .fc-progress-bar:not(.fc-progress-bar--bars) .fc-progress-bar__step.is-current { color: var(--o27-heading); }

/* Step sections as calm cards */
body.o27-is-commerce .fc-wrapper .fc-checkout-step {
	border: 1px solid var(--o27-border);
	border-radius: var(--o27-radius-card);
	background: #fff;
	box-shadow: var(--o27c-card-shadow);
}
body.o27-is-commerce .fc-wrapper .fc-step__substep { padding: 28px 28px; border-top-color: var(--o27-border); }
body.o27-is-commerce .fc-wrapper .fc-step__substep-fields-inner { padding: 14px 0 0; }
body.o27-is-commerce .fc-wrapper .fc-step__substep-text { color: var(--o27-muted); font-size: 0.875rem; }
body.o27-is-commerce .fc-wrapper .fc-step__actions { padding: 8px 28px 28px; }
body.o27-is-commerce .fc-wrapper .fc-step__substep-save { margin-top: 20px !important; /* plugin margin uses !important */ }

/* Highlighted address sections get the theme's soft grey instead of the plugin grey. */
body.o27-is-commerce.has-highlighted-shipping-section div.woocommerce form .fc-step__substep[data-substep-id="shipping_address"],
body.o27-is-commerce.has-highlighted-billing-section div.woocommerce form .fc-step__substep[data-substep-id="billing_address"] {
	background-color: var(--o27-offwhite);
}

/* Contact step: login prompt and separator */
body.o27-is-commerce .fc-contact-login__content {
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--o27-offwhite);
	border: 1px solid var(--o27-border);
	color: var(--o27-text);
	font-size: 0.9375rem;
	text-align: center;
}
body.o27-is-commerce .fc-contact-login__cta-text .fc-contact-login__action,
body.o27-is-commerce .fc-contact-login__action {
	color: var(--o27-heading);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	cursor: pointer;
}
body.o27-is-commerce .fc-contact-login__action:hover { color: var(--o27-orange); }
body.o27-is-commerce .fc-contact-login__separator-text { color: var(--o27-muted); font-size: 0.875rem; font-weight: 500; }
body.o27-is-commerce .fc-contact-login__separator::before,
body.o27-is-commerce .fc-contact-login__separator::after { border-color: var(--o27-border); background-color: var(--o27-border); }
body.o27-is-commerce .fc-account-creation-notice,
body.o27-is-commerce .woocommerce-account-fields .fc-account-creation-notice { color: var(--o27-muted); font-size: 0.875rem; }

/* Collapsed "add an optional field" links share the coupon toggle look. */
body.o27-is-commerce .fc-wrapper .fc-expansible-form-section { margin-top: 4px; }

/* Terms, privacy text, place order */
body.o27-is-commerce .woocommerce-privacy-policy-text,
body.o27-is-commerce .woocommerce-terms-and-conditions-wrapper { color: var(--o27-muted); font-size: 0.875rem; line-height: 1.6; }
body.o27-is-commerce .woocommerce-privacy-policy-text p { font-size: 0.875rem; line-height: 1.6; }
body.o27-is-commerce .woocommerce-terms-and-conditions {
	border: 1px solid var(--o27-border);
	border-radius: 12px;
	background: var(--o27-offwhite);
	font-size: 0.875rem;
}
body.o27-is-commerce .woocommerce-terms-and-conditions :is(h1, h2, h3) { font-size: 1.125rem; margin: 16px 0 8px; font-weight: 500; text-transform: none; }
body.o27-is-commerce .woocommerce-terms-and-conditions-link,
body.o27-is-commerce .woocommerce-privacy-policy-link {
	color: var(--o27-heading);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
body.o27-is-commerce .woocommerce-terms-and-conditions-wrapper .form-row { margin: 16px 0 0; }
body.o27-is-commerce .fc-wrapper .fc-place-order { padding: 20px 0 8px; }
body.o27-is-commerce .fc-wrapper .fc-place-order .fc-place-order-button {
	min-height: 56px;
	font-size: 1rem;
}
body.o27-is-commerce .fc-wrapper .fc-checkout-step .fc-place-order__section { padding: 8px 28px 28px; }

/* Login flyout opened from the contact step */
body.o27-is-commerce .fc-login-form__inner,
body.o27-is-commerce [data-flyout-modal] [data-flyout-content] {
	border-radius: var(--o27-radius-card);
	background: #fff;
	box-shadow: 0 24px 64px rgba(21, 24, 28, 0.28);
}
body.o27-is-commerce .fc-login-form__title {
	font-family: var(--o27-font-head);
	font-size: 1.5rem;
	font-weight: 300;
	text-transform: none;
	color: var(--o27-heading);
}

/* ---------------------------------------------------------------------------------------------
   10. Account (guest): login and register as cards. The page is an ordinary theme page.
   --------------------------------------------------------------------------------------------- */
body.o27-is-commerce.woocommerce-account .o27-content__body { padding-bottom: 96px; }
body.o27-is-commerce .u-columns#customer_login,
body.o27-is-commerce .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
	width: 100%;
}
body.o27-is-commerce .u-columns.col2-set::before,
body.o27-is-commerce .u-columns.col2-set::after { content: none; }
body.o27-is-commerce .u-columns .u-column1,
body.o27-is-commerce .u-columns .u-column2,
body.o27-is-commerce .u-columns .col-1,
body.o27-is-commerce .u-columns .col-2 { float: none; width: auto; max-width: none; min-width: 0; margin: 0; }
body.o27-is-commerce.woocommerce-account .u-columns h2 {
	margin: 0 0 16px;
	font-family: var(--o27-font-head);
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
body.o27-is-commerce.woocommerce-account :is(form.woocommerce-form-login, form.woocommerce-form-register, form.lost_reset_password, form.woocommerce-ResetPassword) {
	margin: 0;
	padding: 32px;
	border: 1px solid var(--o27-border);
	border-radius: var(--o27-radius-card);
	background: #fff;
	box-shadow: var(--o27c-card-shadow);
}
body.o27-is-commerce.woocommerce-account .woocommerce-form-row,
body.o27-is-commerce.woocommerce-account form .form-row { margin: 0 0 20px; padding: 0; }
body.o27-is-commerce.woocommerce-account form .form-row { display: block; width: 100%; float: none; }
body.o27-is-commerce.woocommerce-account form .form-row:last-child { margin-bottom: 0; }
body.o27-is-commerce.woocommerce-account form label:not(.woocommerce-form__label-for-checkbox) { display: block; }
/* Remember-me and submit on one tidy row. */
body.o27-is-commerce.woocommerce-account form.woocommerce-form-login p.form-row:not(.woocommerce-form-row) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}
body.o27-is-commerce.woocommerce-account form.woocommerce-form-login p.form-row::before,
body.o27-is-commerce.woocommerce-account form.woocommerce-form-login p.form-row::after { content: none; } /* WooCommerce clearfix would become flex items */
body.o27-is-commerce.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; margin: 0; }
body.o27-is-commerce.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit { margin: 0; }
body.o27-is-commerce.woocommerce-account .woocommerce-LostPassword { margin: 20px 0 0; font-size: 0.9375rem; }
body.o27-is-commerce.woocommerce-account .woocommerce-LostPassword a,
body.o27-is-commerce.woocommerce-account .woocommerce-privacy-policy-link {
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
body.o27-is-commerce.woocommerce-account .woocommerce-form-register p { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 16px; }
body.o27-is-commerce.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text p { font-size: 0.875rem; }
body.o27-is-commerce.woocommerce-account .woocommerce-form-register .form-row:last-child { margin-top: 20px; }
/* Logged-in account navigation (not in the guest fixtures, kept consistent) */
body.o27-is-commerce.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.o27-is-commerce.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 16px;
	border-radius: 12px;
	color: var(--o27-text);
	font-weight: 600;
	text-decoration: none;
}
body.o27-is-commerce.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
body.o27-is-commerce.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--o27c-orange-tint); color: var(--o27-heading); }

/* ---------------------------------------------------------------------------------------------
   11. Phones: the plugin's responsive layout stays; this only tunes type, padding and sizes.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 999px) {
	body.o27-is-commerce .fc-wrapper .fc-sidebar { margin-top: 24px !important; /* plugin margin uses !important */ }
}
@media (max-width: 767px) {
	/* The plugin bleeds some blocks 20px past the column on phones, so its own 20px gutter is kept here. */
	body.o27-is-commerce #main.fc-main { padding: 28px 20px 0; }
	body.o27-is-commerce .fc-content { padding-bottom: 64px; }
	body.o27-is-commerce.woocommerce-cart .fc-content > h1.fc-checkout__title.screen-reader-text { font-size: 2rem; margin-bottom: 20px !important; }
	body.o27-is-commerce .fc-checkout-header__inner { min-height: 64px; }
	body.o27-is-commerce .fc-checkout__branding img { height: 32px; }
	body.o27-is-commerce .fc-progress-bar { margin: 0; }
	body.o27-is-commerce .fc-wrapper .fc-step__substep { padding: 22px 18px; }
	body.o27-is-commerce .fc-wrapper .fc-step__actions { padding: 4px 18px 22px; }
	body.o27-is-commerce .fc-wrapper .fc-checkout-step .fc-place-order__section { padding: 4px 18px 22px; }
	body.o27-is-commerce table.shop_table :is(th, td) { padding-inline: 18px; }
	body.o27-is-commerce table.shop_table.cart .cart_item td { padding: 18px; }
	body.o27-is-commerce .fc-checkout-order-review__head,
	body.o27-is-commerce .fc-cart-order-review__head { padding: 20px 18px 8px; }
	body.o27-is-commerce #order_review table.shop_table :is(th, td) { padding-inline: 18px; }
	body.o27-is-commerce #order_review table.shop_table tbody td { padding: 18px; }
	body.o27-is-commerce #order_review .wc-proceed-to-checkout,
	body.o27-is-commerce .fc-checkout-order-review__actions-mobile { padding-inline: 18px; }
	body.o27-is-commerce .fc-cart-coupon-code-form { padding: 18px; }
	body.o27-is-commerce .fc-wrapper .fc-cart-actions { align-items: stretch; padding: 0; }
	body.o27-is-commerce .fc-checkout-footer { padding: 32px var(--o27-pad) 40px; }
	body.o27-is-commerce .cart-empty.woocommerce-info { padding: 22px 20px; font-size: 1.1875rem; }
	body.o27-is-commerce .return-to-shop .button { width: 100%; }
	body.o27-is-commerce .u-columns#customer_login,
	body.o27-is-commerce .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	body.o27-is-commerce.woocommerce-account :is(form.woocommerce-form-login, form.woocommerce-form-register) { padding: 24px 20px; }
	body.o27-is-commerce.woocommerce-account .u-columns h2 { font-size: 1.5rem; }
	body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info) { align-items: stretch; }
	body.o27-is-commerce :is(.woocommerce-message, .woocommerce-info) .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	body.o27-is-commerce :is(.button, button, a, input, select, textarea) { transition: none; }
	body.o27-is-commerce :is(.button, button.button):not(:disabled):active { transform: none; }
}

/* WooCommerce's stylesheet is loaded on these pages, and its picture rule (height: auto) outranks a single theme
   class. The logo in the footer's collection block keeps its size here too (0.9.37). */
body.o27-is-commerce .o27-footer__collection > .o27-footer__logo { height: 26px; width: auto; }