/* =========================================================
   Ombelo — cart-checkout.css
   Cart (build-guide 06) and checkout (07)
   Loaded only on is_cart() / is_checkout().
   ========================================================= */

.om-cart {
	padding-top: 26px;
}
/* The value strip is a band that has to meet the footer, so the breathing
   room below the content belongs to the shell, not to the wrapper. */
.om-cart > .om-shell {
	padding-bottom: 72px;
}
.om-cart .om-crumbs {
	margin-bottom: 22px;
}

/* ---------- Checkout stepper ---------- */
.om-steps {
	display: flex;
	align-items: flex-start;
	list-style: none;
	max-width: 560px;
	margin: 0 auto 40px;
	padding: 0;
}
.om-steps__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--om-ink-40);
	text-align: center;
}
/* The rail between two circles. */
.om-steps__item + .om-steps__item::before {
	content: "";
	position: absolute;
	top: 19px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--om-line);
}
.om-steps__item.is-active::before,
.om-steps__item.is-done::before {
	background: var(--om-ink);
}
.om-steps__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--om-line);
	background: var(--om-white);
	font-family: var(--om-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--om-ink-40);
}
.om-steps__item.is-active {
	color: var(--om-ink);
}
.om-steps__item.is-active .om-steps__dot {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
	color: var(--om-white);
	box-shadow: 0 0 0 5px var(--om-indigo-wash);
}
.om-steps__item.is-done {
	color: var(--om-ink-60);
}
.om-steps__item.is-done .om-steps__dot {
	background: var(--om-ink);
	border-color: var(--om-ink);
	color: var(--om-white);
}

/* ---------- Layout ---------- */
.om-cart__grid {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	align-items: start;
	gap: 28px;
}

/* ---------- Items column ---------- */
.om-items {
	min-width: 0;
}
.om-items__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 1.5rem;
	margin: 0 0 18px;
}
.om-items__title span {
	font-family: var(--om-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--om-ink-60);
}
/* The amber header strip from the second cart reference. */
.om-items__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 11px 22px;
	border-radius: 12px;
	background: var(--om-amber);
	color: var(--om-ink);
	font-family: var(--om-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.om-items__list {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Line item card ---------- */
.om-line {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(23, 22, 28, 0.03);
}
.om-line__media {
	display: block;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--om-pastel, var(--om-surface));
}
.om-line__media a {
	display: block;
	height: 100%;
}
.om-line__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om-line__body {
	min-width: 0;
	padding-right: 12px;
}
.om-line__name {
	display: block;
	font-family: var(--om-display);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	margin-bottom: 9px;
}
.om-line__name:hover {
	color: var(--om-indigo);
}
.om-line__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.88rem;
	color: var(--om-ink-60);
}
.om-line__meta a {
	text-decoration: none;
}
.om-line__meta a:hover {
	color: var(--om-ink);
	text-decoration: underline;
}
/* Only on lines that are not sold individually (licence products). The
   grid has three columns, so the stepper takes the price's place and the
   price wraps into a fourth, auto-sized one. */
.om-line:has(.om-line__qty) {
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
}
.om-line__qty {
	padding-top: 16px;
}
.om-line__qty .quantity.om-qty {
	padding: 4px;
	border-radius: 12px;
}
.om-line__qty .om-qty__btn {
	width: 32px;
	height: 32px;
	font-size: 1.15rem;
}
.om-line__qty .quantity.om-qty input.qty {
	width: 36px;
	height: 32px;
	font-size: 0.98rem;
}
.om-line__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	margin: 0;
	padding-top: 16px;
	text-align: right;
}
.om-line__price del {
	font-size: 0.88rem;
	color: var(--om-ink-40);
}
.om-line__price ins {
	background: none;
	font-family: var(--om-display);
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--om-ink);
}
.om-line__remove {
	position: absolute;
	top: 12px;
	right: 14px;
	line-height: 0;
}
/* WooCommerce paints a.remove red with !important — meet it there. */
.om-line__remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--om-surface);
	color: var(--om-ink-60) !important;
	font-family: var(--om-body);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.om-line__remove a.remove:hover {
	background: var(--om-blush);
	color: #b3244a !important;
}

.om-items__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
.om-items__back {
	padding: 12px 22px;
	font-size: 0.95rem;
}

/* ---------- Cross-sells ---------- */
.om-cross {
	margin-top: 40px;
}
.om-cross__h {
	font-size: 1.2rem;
	margin: 0 0 18px;
}
/* Compact cards — a suggestion under the cart, not a second shop page. */
.om-products--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.om-products--pair .om-product__media img {
	aspect-ratio: 3 / 2;
}
.om-products--pair .om-product__body {
	gap: 4px;
	padding: 12px 14px 16px;
}
.om-products--pair .om-product__name {
	font-size: 0.95rem;
}
.om-products--pair .om-product__price {
	font-size: 0.95rem;
}

/* ---------- Rail ---------- */
.om-rail {
	position: sticky;
	top: 88px;
	display: grid;
	gap: 16px;
	min-width: 0;
}
.om-coupon,
.om-totals {
	padding: 22px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
}
.om-rail__h {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 15px;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.om-rail__h svg {
	flex: none;
	color: var(--om-indigo);
}
.om-rail__count {
	margin-left: auto;
	font-family: var(--om-body);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--om-ink-40);
}

/* ---------- Coupon ---------- */
.om-coupon__row {
	display: flex;
	gap: 10px;
}
.om-coupon__input {
	flex: 1;
	min-width: 0;
	padding: 13px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-canvas);
	font-family: var(--om-mono);
	font-size: 0.9rem;
	color: var(--om-ink);
}
.om-coupon__input::placeholder {
	color: var(--om-ink-40);
	letter-spacing: 0.04em;
}
.om-coupon__input:focus {
	outline: none;
	background: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
.om-coupon__apply {
	flex: none;
	padding: 13px 22px;
	border-radius: 12px;
	font-size: 0.95rem;
}
.om-coupon__applied {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 7px 7px 7px 14px;
	border-radius: 999px;
	background: #e7f6ee;
	color: #1f6b52;
	font-size: 0.88rem;
	font-weight: 600;
}
.om-coupon__code {
	font-family: var(--om-mono);
	letter-spacing: 0.04em;
}
.om-coupon__amt {
	margin-left: auto;
}
.om-coupon__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(31, 107, 82, 0.14);
	color: inherit;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}
.om-coupon__x:hover {
	background: #1f6b52;
	color: var(--om-white);
}
/* Inline coupon error the cart script injects. */
.om-coupon .coupon-error-notice {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #b3244a;
}

/* ---------- Price details ---------- */
.om-totals__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: 0.94rem;
}
.om-totals__label {
	min-width: 0;
	color: var(--om-ink-60);
}
.om-totals__qty {
	font-family: var(--om-mono);
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-totals__val {
	flex: none;
	font-weight: 500;
}
.om-totals__row--sub {
	margin-top: 6px;
	padding-top: 13px;
	border-top: 1px solid var(--om-line);
}
.om-totals__row--sub .om-totals__label {
	color: var(--om-ink);
}
.om-totals__row--save,
.om-totals__row--save .om-totals__label,
.om-totals__row--save .om-totals__val {
	color: #1f8a5b;
}
.om-totals__row--save .om-totals__val {
	font-weight: 600;
}
.om-totals__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 13px 0 18px;
	padding-top: 15px;
	border-top: 1px solid var(--om-line);
	font-family: var(--om-display);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.om-totals__total strong {
	font-weight: 700;
}
/* The button carries Woo's own classes for gateway compatibility, so this has
   to out-rank `.woocommerce a.button.alt` — Woo's purple. */
.woocommerce .om-totals .om-totals__cta a.om-totals__go,
.om-totals__go {
	display: flex;
	width: 100%;
	padding: 16px 22px;
	border-radius: 14px;
	font-size: 1rem;
	background: var(--om-ink);
	color: var(--om-white);
	text-decoration: none;
}
.woocommerce .om-totals .om-totals__cta a.om-totals__go:hover,
.om-totals__go:hover {
	background: #000;
	color: var(--om-white);
}
.om-totals__secure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-totals__secure svg {
	color: var(--om-ink-40);
}
.om-totals__secure strong {
	color: var(--om-ink-60);
	font-weight: 600;
}
.om-totals__pay {
	justify-content: center;
	margin-top: 10px;
}

/* Phone-only sticky checkout bar. */
.om-totals__bar {
	display: none;
}

/* ---------- Empty cart ---------- */
.om-empty {
	max-width: 540px;
	margin: 12px auto 60px;
	padding: 46px 34px;
	text-align: center;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-empty__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--om-lav);
	color: var(--om-indigo-deep);
}
.om-empty h1 {
	font-size: 1.75rem;
	margin: 0 0 8px;
}
.om-empty p {
	margin: 0 0 24px;
	color: var(--om-ink-60);
}
.om-empty__picks {
	margin-bottom: 26px;
}
.om-empty__picks h2 {
	font-size: 1.35rem;
	text-align: center;
	margin: 0 0 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.om-cart__grid {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
		gap: 22px;
	}
}
@media (max-width: 960px) {
	.om-cart__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.om-rail {
		position: static;
	}
	.om-products--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 720px) {
	/* Clear the fixed checkout bar so it never sits on the footer's last row. */
	.om-has-cart-bar .om-footer {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}
	.om-steps {
		margin-bottom: 32px;
	}
	.om-steps__label {
		font-size: 0.82rem;
	}
	.om-items__head {
		padding: 10px 16px;
	}
	.om-line {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 14px;
		padding: 16px 16px 18px;
	}
	.om-line__media {
		align-self: start;
		width: 68px;
		height: 68px;
	}
	.om-line__body {
		padding-right: 34px;
	}
	.om-line:has(.om-line__qty) {
		grid-template-columns: 68px minmax(0, 1fr);
	}
	/* Phone: stepper on the left of the bottom row, price on the right.
	   Both span the full row and sit at opposite ends of it. */
	.om-line__qty {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		padding-top: 4px;
	}
	.om-line:has(.om-line__qty) .om-line__price {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: end;
		align-self: center;
	}
	.om-line__price {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 10px;
		padding-top: 4px;
	}
	.om-items__foot {
		margin-top: 18px;
	}
	.om-items__back {
		width: 100%;
	}

	/* The rail's button is far below the fold on a phone — keep one in reach. */
	.om-totals__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		background: var(--om-white);
		border-top: 1px solid var(--om-line);
		box-shadow: 0 -8px 24px -14px rgba(23, 22, 28, 0.3);
	}
	.om-totals__barsum {
		display: flex;
		flex-direction: column;
		line-height: 1.25;
		font-size: 0.78rem;
		color: var(--om-ink-40);
	}
	.om-totals__barsum strong {
		font-family: var(--om-display);
		font-size: 1.1rem;
		font-weight: 600;
		color: var(--om-ink);
	}
	.om-totals__bargo {
		padding: 12px 22px;
		border-radius: 12px;
		font-size: 0.95rem;
	}
	.om-empty {
		padding: 36px 22px;
	}
	.om-products--pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Checkout — build-guide 07
   ========================================================= */

/* ---------- Slim chrome (§2.1) ---------- */
.om-header--slim .om-header__row {
	justify-content: space-between;
	min-height: 76px;
}
/* In a 76px bar the stacked stepper has nowhere to put its labels, so each
   step lies down: circle, word, short rule, next circle. */
.om-header--slim .om-steps {
	max-width: none;
	margin: 0;
	align-items: center;
}
.om-header--slim .om-steps__item {
	flex: 0 0 auto;
	flex-direction: row;
	gap: 9px;
	padding-inline: 20px;
	font-size: 0.85rem;
	white-space: nowrap;
}
.om-header--slim .om-steps__dot {
	width: 30px;
	height: 30px;
	font-size: 0.85rem;
}
.om-header--slim .om-steps__item + .om-steps__item::before {
	top: 50%;
	right: auto;
	left: 0;
	width: 22px;
	margin-top: -1px;
	transform: translateX(-50%);
}
.om-header--slim .om-steps__label {
	font-size: 0.82rem;
}
.om-header--slim .om-steps__item.is-active .om-steps__dot {
	box-shadow: 0 0 0 4px var(--om-indigo-wash);
}
.om-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--om-ink-60);
	white-space: nowrap;
}
.om-header__secure svg {
	color: #2f9e6f;
}
.om-footer--slim {
	background: var(--om-canvas);
}
.om-footer--slim .om-footer__bar {
	border-top: 1px solid var(--om-line);
}
/* .om-footer__legal moved to main.css — build-guide 09 §4 put the same row in
   the full footer, so it is no longer a checkout-only object. */

/* ---------- Page + grid (§1) ---------- */
.om-co {
	padding-top: 34px;
}
.om-co > .om-shell {
	max-width: 78rem;
	padding-bottom: 80px;
}
.om-co__notices:empty {
	display: none;
}
.om-co__grid {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	align-items: start;
	gap: 26px;
}
/* A failed Place order (or a failed refresh) makes checkout.js prepend its
   notices to the <form> itself, which here is the grid: the notice took the
   left cell, pushed the fields into the rail's column and the rail under them.
   It gets a row of its own, first, at every width (on a phone the rail's
   #order_review is order -1, so the notice sits below -1). */
.om-co__grid > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	order: -2;
	min-width: 0;
}
.om-co__main {
	display: grid;
	gap: 16px;
	min-width: 0;
}
/* The rail — and not #order_review inside it — is what sticks, so the summary
   and the Place order button travel together. */
.om-co__rail {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 16px;
	min-width: 0;
}
/* WooCommerce's own two-column wrapper is flattened into the left stack; the
   shipping column only takes up room once something is actually hooked in. */
#customer_details {
	display: contents;
}
#customer_details .col-1,
#customer_details .col-2 {
	display: grid;
	gap: 16px;
	min-width: 0;
}
#customer_details .col-2:not(:has(label, input, select, textarea)) {
	display: none;
}
/* The sign-in form holds nothing but hidden inputs — see form-checkout.php. */
.om-loginform {
	display: contents;
}

/* ---------- Cards ---------- */
.om-card {
	padding: 24px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
}
.om-card__h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--om-display);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--om-ink);
}
.om-card__sub {
	margin: 6px 0 18px;
	font-size: 0.89rem;
	color: var(--om-ink-40);
}

/* ---------- Guest / sign in (§2.3) ---------- */
.om-guest {
	padding: 0;
	overflow: hidden;
}
.om-guest__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}
.om-guest__sum::-webkit-details-marker {
	display: none;
}
.om-guest__sum::marker {
	content: "";
}
.om-guest__d[open] .om-guest__sum {
	padding-bottom: 16px;
}
.om-guest__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.om-guest__sub {
	font-size: 0.88rem;
	color: var(--om-ink-40);
}
.om-guest__cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--om-ink);
}
.om-guest__sum:hover .om-guest__cta {
	border-color: var(--om-ink);
}
.om-guest__cta svg {
	transition: transform 0.15s ease;
}
.om-guest__d[open] .om-guest__cta svg {
	transform: rotate(180deg);
}
.om-guest__body {
	padding: 20px 24px 24px;
	border-top: 1px solid var(--om-line);
}
.om-guest__note {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--om-ink-60);
}
.om-guest__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.om-guest__fields .om-field {
	margin: 0;
}
.om-guest__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
	font-size: 0.9rem;
}
.om-guest__lost {
	color: var(--om-indigo);
	text-decoration: none;
}
.om-guest__lost:hover {
	text-decoration: underline;
}
.om-guest__go {
	width: 100%;
	border-radius: 12px;
}
.om-guest--in {
	padding: 18px 24px;
}
.om-guest__signed {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.95rem;
	color: var(--om-ink-60);
}
.om-guest__signed svg {
	color: var(--om-indigo);
}
.om-guest__signed a {
	margin-left: auto;
	font-size: 0.86rem;
	color: var(--om-indigo);
	text-decoration: none;
}

/* ---------- Fields (§2.2) ---------- */
.om-fields__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.om-fields__grid > .form-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}
.om-fields__grid > .form-row-first {
	grid-column: 1 / 2;
}
.om-fields__grid > .form-row-last {
	grid-column: 2 / 3;
}
/* WooCommerce's layout sheet floats half rows at 47% and pads every row
   (`.woocommerce form .form-row-first`, 0-2-1). In the grid the cell already
   sets the width, so the row just fills it. */
.woocommerce .om-co .om-fields__grid > .form-row {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}
.om-co label,
.om-co .om-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--om-ink-60);
}
.woocommerce .om-co .form-row label {
	line-height: 1.45;
}
.om-co abbr.required,
.om-co .required {
	color: var(--om-indigo);
	border: 0;
	text-decoration: none;
}
.om-co .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
/* The second three out-rank WooCommerce's own
   `.woocommerce form .form-row .input-text` (0-3-1), which otherwise paints
   the fields with its dark 1px border and 4px corners. Colour, not the
   `background` shorthand, so a native select keeps core's arrow image. */
.om-co .input-text,
.om-co select,
.om-co textarea,
.woocommerce .om-co .form-row .input-text,
.woocommerce .om-co .form-row select,
.woocommerce .om-co .form-row textarea {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 13px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background-color: var(--om-canvas);
	font-family: var(--om-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--om-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.woocommerce .om-co .form-row select {
	padding-right: 44px;
	background-position: right 15px center;
}
.woocommerce .om-co .form-row .input-text::placeholder {
	color: var(--om-ink-40);
	opacity: 1;
}
/* The show-password eye sits inside the field, so the text stops short of it. */
.woocommerce .om-co .form-row .password-input .input-text {
	padding-right: 48px;
}
.woocommerce .om-co .form-row .show-password-input {
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	opacity: 0.6;
}
.woocommerce .om-co .form-row .show-password-input:hover {
	opacity: 1;
}
.om-co .input-text:focus,
.om-co select:focus,
.om-co textarea:focus,
.woocommerce .om-co .form-row .input-text:focus,
.woocommerce .om-co .form-row select:focus,
.woocommerce .om-co .form-row textarea:focus {
	outline: none;
	background-color: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
.om-co .description {
	display: block;
	margin-top: 7px;
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--om-ink-40);
}
/* Validation (§2.7) — WooCommerce puts these on the row as you leave a field. */
.om-co .form-row.woocommerce-invalid .input-text,
.om-co .form-row.woocommerce-invalid select,
.om-co .form-row.woocommerce-invalid .select2-selection,
.woocommerce .om-co .form-row.woocommerce-invalid .input-text,
.woocommerce .om-co .form-row.woocommerce-invalid select {
	border-color: #d4405f;
	background-color: #fdf2f4;
}
.om-co .form-row.woocommerce-invalid label,
.woocommerce .om-co .form-row.woocommerce-invalid label {
	color: #b3244a;
}
.om-co .form-row.woocommerce-validated .input-text,
.woocommerce .om-co .form-row.woocommerce-validated .input-text,
.woocommerce .om-co .form-row.woocommerce-validated select {
	border-color: #cde9db;
}
/* The same failed Place order also writes each error under its own field. */
.om-co .checkout-inline-error-message,
.woocommerce .om-co .form-row .checkout-inline-error-message {
	margin: 7px 0 0;
	font-size: 0.83rem;
	line-height: 1.45;
	color: #b3244a;
}
/* Under the terms box: in line with the label text, not the checkbox. */
.woocommerce .om-co .om-place .form-row .checkout-inline-error-message {
	padding-left: 29px;
}
/* selectWoo dressed to match the plain inputs. */
.om-co .select2-container .select2-selection--single {
	height: auto;
	padding: 12px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-canvas);
}
.om-co .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--om-ink);
}
.om-co .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
.om-co .select2-container--open .select2-selection--single {
	background: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}

/* ---------- Create-account card ---------- */
/* WooCommerce lays its own checkbox labels out with
   `.woocommerce form .form-row label.checkbox { display: inline }` — four
   selectors deep, so this has to be deeper still to put the box and its
   text on one line. */
.woocommerce .om-co .form-row label.om-check,
.om-co .om-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--om-ink);
	cursor: pointer;
}
.om-co .om-check input[type="checkbox"] {
	flex: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--om-indigo);
}
.om-co .om-check > span {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.om-co .om-check em {
	font-size: 0.86rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: var(--om-ink-40);
}
/* The checkout's "create an account" card is .om-newacct, not .om-account:
   .om-account belongs to the My Account surface, and two page blocks sharing
   one name is exactly how the .om-cart bug happened. */
.om-newacct .create-account {
	margin: 0;
	padding: 0;
}
.om-newacct .om-fields__grid.create-account {
	margin-top: 16px;
}

/* ---------- Payment (§2.4) ---------- */
/* WooCommerce ships an opinionated #payment: mauve panel, a bordered method
   list, and a speech-bubble arrow on the open gateway box. Undoing that paint
   is all that happens here — the ids, classes and markup underneath are core's,
   because that is what the gateways bind to. */
.woocommerce-checkout #payment.om-pay {
	/* .om-pay is also the payment-marks row in main.css (flex, centred), and
	   this card carries the same class — without this the heading and the
	   method list sit side by side. */
	display: block;
	background: var(--om-white);
	border-radius: var(--om-radius);
}
.woocommerce-checkout #payment.om-pay ul.payment_methods {
	padding: 0;
	border-bottom: 0;
}
.woocommerce-checkout #payment.om-pay ul.payment_methods li {
	line-height: inherit;
}
.woocommerce-checkout #payment.om-pay ul.payment_methods li input {
	margin: 0;
}
.woocommerce-checkout #payment.om-pay ul.payment_methods li img,
.woocommerce-checkout #payment.om-pay .payment_method_paypal img {
	float: none;
	max-height: 24px;
	margin: 0;
	vertical-align: middle;
}
.woocommerce-checkout #payment.om-pay ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-checkout #payment.om-pay ul.payment_methods li:not(.woocommerce-notice)::after,
.woocommerce-checkout #payment.om-pay ul.payment_methods::before,
.woocommerce-checkout #payment.om-pay ul.payment_methods::after {
	display: none;
}
.woocommerce-checkout #payment.om-pay div.payment_box {
	width: auto;
	margin: 0;
	padding: 2px 18px 18px;
	border-radius: 0;
	background-color: transparent;
	color: var(--om-ink-60);
	font-size: 0.9rem;
	line-height: 1.55;
}
.woocommerce-checkout #payment.om-pay div.payment_box::before {
	display: none;
}
.woocommerce-checkout #payment.om-pay div.form-row {
	padding: 0;
}
/* PayPal Payments drops its Smart Button host here as <div id="ppc-button-
   ppcp-gateway">, then fills it with its own iframes. Shape, colour, layout
   and which funding sources appear are all plugin settings (build-guide 11 §1
   — set to pill / black / horizontal / PayPal only), because PayPal renders
   the buttons cross-origin and CSS cannot reach inside them. What is left for
   the theme is the box around them: the rail's own width, and the same 14px
   gap the gateway's own copy sits on. */
.woocommerce-checkout #payment.om-pay [id^="ppc-button-"] {
	max-width: 100%;
	margin-top: 14px;
}
.woocommerce-checkout #payment.om-pay [id^="ppc-button-"]:empty {
	margin-top: 0;
}
.om-pay .om-card__h {
	margin-bottom: 16px;
}
.om-pay__lock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-family: var(--om-body);
	font-size: 0.78rem;
	font-weight: 500;
	/* Darker than the #2f9e6f used for the trust icons elsewhere in this file.
	   Those are SVGs — non-text, so 3:1 is the bar and 3.36 clears it. This one
	   is real text at 0.78rem, where 3.36 fails AA. #1b8558 is 4.62:1 on white. */
	color: #1b8558;
}
.om-pay__list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-pm {
	position: relative;
	border: 1px solid var(--om-line);
	border-radius: 14px;
	background: var(--om-white);
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.om-pm:hover {
	border-color: var(--om-ink-40);
}
.om-pm:has(.om-pm__radio:checked) {
	border-color: var(--om-indigo);
	background: var(--om-indigo-wash);
}
.om-pm:focus-within {
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
.om-pm__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.om-co .om-pm__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 16px 18px;
	font-family: var(--om-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--om-ink);
	cursor: pointer;
}
.om-pm__dot {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--om-line);
	border-radius: 50%;
	background: var(--om-white);
	transition: border-color 0.15s ease;
}
.om-pm:has(.om-pm__radio:checked) .om-pm__dot {
	border-color: var(--om-indigo);
}
.om-pm:has(.om-pm__radio:checked) .om-pm__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--om-indigo);
}
.om-pm__title {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.om-pm__note {
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--om-ink-60);
}
.om-pm__icon .om-pm__marks {
	flex-wrap: nowrap;
	gap: 5px;
}
.om-pm__icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.om-pm__icon img {
	max-height: 24px;
	width: auto;
	margin: 0;
	float: none;
}
/* The gateway's own panel — WooCommerce slides it open, so only the paint
   belongs to us. PayPal renders its buttons and iframes in here untouched. */
.om-pm__box {
	margin: 0;
	padding: 2px 18px 18px;
	background: transparent;
	border-radius: 0;
	color: var(--om-ink-60);
	font-size: 0.9rem;
	line-height: 1.55;
}
.om-pm__box::before {
	display: none;
}
.om-pm__box p:first-child {
	margin-top: 0;
}
.om-pm__box p:last-child {
	margin-bottom: 0;
}
.om-pay__none,
.om-pay__free {
	margin: 0;
	font-size: 0.92rem;
	color: var(--om-ink-60);
}

/* ---------- Rail (§2.6) ---------- */
.om-co__rail .om-rail {
	position: static;
	top: auto;
	gap: 0;
}
.om-rail__box,
.om-rail__body {
	display: grid;
	gap: 14px;
	min-width: 0;
}
.om-rail__toggle {
	display: none;
}
/* The rail is a stack of cards, not one long panel — summary, coupon,
   totals and the trust strip each get their own frame, as in the
   reference. */
.om-rail__card {
	min-width: 0;
	padding: 22px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
}
.om-co .om-rail__h {
	margin-bottom: 16px;
}
.om-sum {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-sum__item {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}
.om-sum__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: var(--om-pastel, var(--om-surface));
}
.om-sum__media img {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}
.om-sum__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--om-ink);
	color: var(--om-white);
	font-family: var(--om-mono);
	font-size: 0.7rem;
	line-height: 1;
}
.om-sum__body {
	display: grid;
	gap: 5px;
	min-width: 0;
}
.om-sum__name {
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.35;
}
.om-sum__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-sum__meta .om-chip {
	padding: 2px 8px;
	font-size: 0.68rem;
}
.om-sum__meta dl {
	margin: 0;
}
.om-sum__price {
	flex: none;
	font-weight: 600;
	white-space: nowrap;
}

/* The coupon owns its card, so it drops the frame it wears in the cart. */
.om-rail__card--coupon {
	padding: 18px;
}
.om-rail__card--coupon .om-coupon {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.om-rail__card--coupon .om-coupon__apply {
	padding: 13px 20px;
}
/* In the cart the subtotal rule separates the totals from the line items
   above it; here the card edge already does that, and the Total row is the
   last thing in the card. */
.om-rail__card--totals .om-totals__rows {
	margin-top: 0;
}
.om-rail__card--totals .om-totals__row--sub {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.om-rail__card--totals .om-totals__total {
	margin-bottom: 0;
}

/* ---------- Trust strip ---------- */
.om-rail__card--trust {
	padding: 14px 18px;
}
.om-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--om-ink-60);
}
.om-trust li {
	display: flex;
	align-items: center;
	gap: 7px;
}
.om-trust svg {
	flex: none;
	color: #2f9e6f;
}

/* ---------- Place order (§2.5) ---------- */
.om-place {
	--om-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15m0%200-5.5-5.5M19%2012l-5.5%205.5'/%3E%3C/svg%3E");
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
}
.om-place .woocommerce-terms-and-conditions-wrapper {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--om-ink-60);
}
/* WooCommerce's privacy sentence rides in on the same hook as the terms
   checkbox — it is fine print, so it reads like fine print. */
.om-place .woocommerce-privacy-policy-text {
	margin: 0;
}
.om-place .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--om-ink-40);
}
.om-place .woocommerce-privacy-policy-link {
	color: var(--om-ink-60);
}
.om-place .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
	padding: 0;
}
/* Block with the box hung in the left padding, not flex: WooCommerce's label
   holds the box, a text span, a space and the asterisk, and as flex items
   the asterisk would stand in a column of its own. The second selector
   out-ranks core's `.woocommerce form .form-row label.checkbox { display:
   inline }`, which otherwise runs the text back under the box. */
.om-place .woocommerce-terms-and-conditions-wrapper label,
.woocommerce .om-co .om-place .woocommerce-terms-and-conditions-wrapper label {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 29px;
	font-size: 0.88rem;
	line-height: 1.55;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--om-ink-60);
	cursor: pointer;
}
.om-place .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce .om-co .om-place .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	position: absolute;
	top: 2px;
	left: 0;
	width: 19px;
	height: 19px;
	margin: 0;
	accent-color: var(--om-indigo);
}
/* Covers the refund-policy link build-guide 09 §4 adds to the consent text,
   which carries no WooCommerce class of its own. */
.om-place .woocommerce-terms-and-conditions-wrapper label a,
.om-place .woocommerce-terms-and-conditions-link,
.om-place .woocommerce-privacy-policy-link {
	color: var(--om-ink);
	text-underline-offset: 2px;
}
/* WooCommerce also inlines the whole Terms page here, hidden, and expands it in
   place when the link is clicked. Stock behaviour, but the rail is narrow —
   this gives it a box to live in instead of a wall of text. Build-guide 09 §4. */
.om-place .woocommerce-terms-and-conditions {
	margin: 12px 0 0;
	padding: 14px 16px;
	background: var(--om-canvas);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius-sm);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--om-ink-60);
}
.om-place .woocommerce-terms-and-conditions h2 {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--om-ink);
	margin: 16px 0 6px;
}
.om-place .woocommerce-terms-and-conditions > :first-child {
	margin-top: 0;
}
/* The button keeps WooCommerce's own `button alt` classes so gateways can find
   it, which is why this has to out-rank `.woocommerce button.button.alt`. */
.woocommerce .om-co .om-place button.om-place__btn,
.om-place__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 17px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--om-ink);
	color: var(--om-white);
	font-family: var(--om-body);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}
.woocommerce .om-co .om-place button.om-place__btn:hover,
.om-place__btn:hover {
	background: #000;
	color: var(--om-white);
}
/* checkout.js rewrites this button's text on every gateway change, so the
   arrow has to live outside the text node. */
.om-place__btn::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--om-arrow) center / contain no-repeat;
	mask: var(--om-arrow) center / contain no-repeat;
}
/* The reference pairs the ink button with an outlined one, not a text link. */
.om-place__back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 22px;
	border: 1px solid var(--om-line);
	border-radius: 14px;
	background: var(--om-white);
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--om-ink);
	text-decoration: none;
}
.om-place__back:hover {
	border-color: var(--om-ink-40);
	background: var(--om-surface);
	color: var(--om-ink);
}
.om-place__legal {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	text-align: center;
	color: var(--om-ink-40);
}
.om-place__legal a {
	color: var(--om-ink-60);
}
/* Gateway buttons (PayPal) render right below ours, in .om-place__pay
   (ombelo_place_order). When PayPal or the card button is the chosen method
   the plugin hides #place_order and its own button takes that spot. */
.om-place__pay {
	min-width: 0;
}
.om-place .ppc-button-wrapper,
.om-place #ppc-button-ppcp-gateway {
	margin: 0;
}

/* =========================================================
   Order received — build-guide 07 §3
   ========================================================= */

.om-ty {
	padding-top: 30px;
}
.om-ty > .om-shell {
	max-width: 68rem;
	padding-bottom: 72px;
}
.om-ty__hero {
	text-align: center;
	margin-bottom: 34px;
}
.om-ty__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--om-indigo);
	color: var(--om-white);
	box-shadow: 0 0 0 10px var(--om-indigo-wash);
}
.om-ty--pending .om-ty__mark {
	background: var(--om-amber);
	color: var(--om-ink);
	box-shadow: 0 0 0 10px var(--om-cream);
}
.om-ty--failed .om-ty__mark {
	background: #d4405f;
	color: var(--om-white);
	box-shadow: 0 0 0 10px #fdf2f4;
}
.om-ty__h {
	margin: 0 0 10px;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	letter-spacing: -0.02em;
}
.om-ty__sub {
	max-width: 44rem;
	margin: 0 auto;
	font-size: 1rem;
	color: var(--om-ink-60);
}
.om-ty__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}
.om-ty__keep {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 22px 0 0;
	font-size: 0.9rem;
	color: var(--om-ink-60);
}
.om-ty__keep svg {
	flex: none;
	color: var(--om-indigo);
}
.om-ty__keep a {
	color: var(--om-ink);
}
.om-ty__more {
	margin: 34px 0 0;
	text-align: center;
}

/* The downloads card (.om-dl) and the receipt (.om-receipt) used to live here.
   They moved to main.css in build-guide 08: order/order-details.php also runs
   on the account's view-order endpoint, which loads account.css instead of this
   file, and a receipt that is only styled at the checkout is a receipt that
   breaks the moment someone opens it again a week later. */

/* ---------- The gate: sign in / verify email before the order shows ----------
   Core's own forms (global/form-login.php, checkout/form-verify-email.php),
   centred as one card under the full-width hero (both sit inside core's
   .woocommerce wrapper). Core floats the two login fields side by side at
   47%; here they stack. */
.om-ty__gate .woocommerce > :not(.om-ty__hero) {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}
.om-ty__gate .woocommerce > .woocommerce-info,
.om-ty__gate .woocommerce > .woocommerce-message,
.om-ty__gate .woocommerce > .woocommerce-error {
	margin-bottom: 16px;
}
.om-ty__gate .woocommerce form.login,
.om-ty__gate .woocommerce form.woocommerce-verify-email {
	margin-top: 0;
	margin-bottom: 0;
	padding: 28px;
	border: 1px solid var(--om-line);
	border-radius: 20px;
	background: var(--om-white);
	text-align: left;
}
.om-ty__gate .woocommerce .form-row-first,
.om-ty__gate .woocommerce .form-row-last {
	float: none;
	width: auto;
}
.om-ty__gate .woocommerce form .form-row {
	margin: 0 0 14px;
	padding: 0;
}
.om-ty__gate .woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--om-ink-60);
}
.om-ty__gate .required {
	color: var(--om-indigo);
	border: 0;
	text-decoration: none;
}
.om-ty__gate .woocommerce form .form-row .input-text {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--om-line);
	border-radius: 12px;
	background: var(--om-canvas);
	font-family: var(--om-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--om-ink);
}
.om-ty__gate .woocommerce form .form-row .input-text:focus {
	outline: none;
	background: var(--om-white);
	border-color: var(--om-indigo);
	box-shadow: 0 0 0 3px var(--om-indigo-wash);
}
/* Remember me sits on its own line, the button under it at full width. */
.om-ty__gate .woocommerce form .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--om-ink);
	cursor: pointer;
}
.om-ty__gate input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--om-indigo);
}
.om-ty__gate .woocommerce button.button {
	display: flex;
	width: 100%;
	justify-content: center;
	float: none;
	margin: 0;
	padding: 14px 26px;
	border: 0;
	border-radius: 14px;
	background: var(--om-ink);
	font-family: var(--om-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--om-white);
}
.om-ty__gate .woocommerce button.button:hover {
	background: #000;
	color: var(--om-white);
}
.om-ty__gate .lost_password {
	margin: 4px 0 0;
	text-align: center;
}
.om-ty__gate .lost_password a,
.om-ty__gate form.woocommerce-verify-email > p:not(.form-row) a {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-indigo-deep);
	text-decoration: none;
}
.om-ty__gate .lost_password a:hover {
	text-decoration: underline;
}
.om-ty__gate form.woocommerce-verify-email > p:not(.form-row) {
	margin: 0 0 16px;
	font-size: 0.95rem;
	color: var(--om-ink-60);
}
.om-ty__gate .om-gauth__btn {
	width: 100%;
}
@media (max-width: 600px) {
	.om-ty__gate .woocommerce form.login,
	.om-ty__gate .woocommerce form.woocommerce-verify-email {
		padding: 20px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.om-co__grid {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	}
}
@media (max-width: 900px) {
	.om-co__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	/* The reference layout is desktop-only: on a phone the summary collapses to
	   a handle above the fields, and Place order drops to the very bottom
	   (build-guide 07 §4). Dissolving the rail lets its two halves take those
	   positions independently — #order_review keeps its box because
	   checkout.js blockUIs it when a coupon is removed. */
	.om-co__rail {
		display: contents;
	}
	#order_review {
		order: -1;
	}
	.om-co__main {
		order: 0;
	}
	.om-place {
		order: 1;
		margin-top: 4px;
	}
	/* The handle is a card in its own right here — the summary cards below it
	   are what fold away. */
	.om-rail__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		padding: 16px 18px;
		border: 1px solid var(--om-line);
		border-radius: var(--om-radius);
		background: var(--om-indigo-wash);
		color: var(--om-ink);
		font-family: var(--om-body);
		font-size: 0.95rem;
		font-weight: 600;
		cursor: pointer;
	}
	.om-rail__togglelabel {
		display: inline-flex;
		align-items: center;
		gap: 9px;
	}
	.om-rail__togglelabel > svg:first-child {
		color: var(--om-indigo);
	}
	.om-rail__chev {
		transition: transform 0.15s ease;
	}
	.om-rail.is-open .om-rail__chev {
		transform: rotate(180deg);
	}
	.om-rail__toggle strong {
		font-family: var(--om-display);
		font-size: 1.05rem;
	}
	.om-rail__body {
		display: none;
	}
	.om-rail.is-open .om-rail__body {
		display: grid;
	}
	.om-header--slim .om-header__row {
		flex-wrap: wrap;
		gap: 12px 18px;
		padding-block: 14px;
	}
	.om-header--slim .om-steps {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
	}
	.om-header__secure {
		margin-left: auto;
	}
}
@media (max-width: 560px) {
	.om-co {
		padding-top: 22px;
	}
	.om-card {
		padding: 18px;
	}
	/* The guest card pads its two halves itself; the line above would pad it
	   a second time. */
	.om-guest {
		padding: 0;
	}
	.om-guest--in {
		padding: 18px;
	}
	.om-guest__sum,
	.om-guest__body {
		padding: 18px;
	}
	.om-guest__fields,
	.om-fields__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.om-fields__grid > .form-row-first,
	.om-fields__grid > .form-row-last {
		grid-column: 1 / -1;
	}
	/* Three card marks and a two-line title do not share a phone's width:
	   the marks drop under the title, lined up with it. */
	.om-co .om-pm__label {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.om-pm__title {
		flex: 1;
	}
	.om-pm__icon {
		flex: 0 0 calc(100% - 32px);
		margin-left: 32px;
	}
	.om-rail__card {
		padding: 18px;
	}
	.om-guest__cta {
		padding: 8px 13px;
	}
	/* Three steps, a phone's width: the stepper only fits if the dots and the
	   space around them come down with it. */
	.om-header--slim .om-steps__item {
		padding-inline: 9px;
		gap: 7px;
	}
	.om-header--slim .om-steps__dot {
		width: 24px;
		height: 24px;
		font-size: 0.74rem;
	}
	.om-header--slim .om-steps__label {
		font-size: 0.74rem;
	}
	.om-header--slim .om-steps__item + .om-steps__item::before {
		width: 12px;
	}
	/* The heading and the Sign in button stop competing for the same line. */
	.om-guest__sum {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.om-footer--slim .om-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}