/*
 * Storefront: the price element and buy action inside the site's own layout.
 * Tokens come from customer.css (.gc-customer). The element sets no outer
 * margins of its own so the theme's block spacing owns the rhythm around it.
 */
.gc-store {
	margin: 0;
}

.gc-store-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.gc-offer {
	padding: 24px;
	border: 1px solid var(--gc-surface-border, #d5dcea);
	border-radius: var(--gc-radius-panel, 16px);
	background: var(--gc-surface, #fff);
}

.gc-offer h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

/* Price element: amount due first, regular price struck beside it on a sale. */
.gc-offer-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.gc-offer-price strong {
	order: 1;
	font-family: var(--gc-font-display, inherit);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.gc-offer-price s {
	order: 2;
	color: var(--gc-meta, #5f6b80);
	font-size: 16px;
	text-decoration: line-through;
}

.gc-offer-price span,
.gc-checkout-identity,
.gc-checkout-legal {
	order: 3;
	color: var(--gc-meta, #5f6b80);
	font-size: 14px;
}

.gc-checkout-action,
.gc-checkout-form {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.gc-checkout-form label {
	display: grid;
	gap: 6px;
	font-size: 15px;
}

.gc-checkout-form input {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--gc-surface-border, #d5dcea);
	border-radius: var(--gc-radius-field, 10px);
	font: inherit;
	color: var(--gc-ink, #0c0e0f);
}

.gc-checkout-action button,
.gc-checkout-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--gc-primary-bg, #0c0e0f);
	border-radius: var(--gc-radius-action, 100px);
	background: var(--gc-primary-bg, #0c0e0f);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.gc-checkout-action button:hover,
.gc-checkout-form button:hover {
	background: var(--gc-primary-hover, #26292c);
	border-color: var(--gc-primary-hover, #26292c);
}

.gc-checkout-action button:focus,
.gc-checkout-form button:focus {
	outline: none;
}

.gc-checkout-action button:focus-visible,
.gc-checkout-form button:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gc-ink, #0c0e0f);
}

.is-gcommerce-checkout-loading,
.gc-checkout-action button[disabled],
.gc-checkout-form button[disabled] {
	cursor: wait;
	background: #e3e3e5;
	border-color: #e3e3e5;
	color: var(--gc-absent, #a8b1c2);
}

/* Inline error: a dot and a sentence right after the button, never a toast. */
.gc-checkout-error,
.gcommerce-checkout-message--error {
	min-height: 1.4em;
	color: var(--gc-ink, #0c0e0f);
	font-size: 14px;
}

.gcommerce-checkout-message {
	display: block;
	margin-top: 8px;
	color: var(--gc-meta, #5f6b80);
	font-size: 14px;
}

.gcommerce-checkout-message--error:not(:empty)::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--gc-error, #d63638);
	vertical-align: middle;
}

.gc-discount-note {
	margin: 0;
	color: var(--gc-meta, #5f6b80);
	font-size: 14px;
}

.gc-discount-note--applies {
	color: #146c43;
}

.gc-checkout-legal {
	margin: 0;
	line-height: 1.5;
}

/* Return notice: dot, state, sentence. */
.gc-store-notice {
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 1px solid var(--gc-surface-border, #d5dcea);
	border-radius: var(--gc-radius-panel, 16px);
	background: var(--gc-surface, #fff);
	color: var(--gc-ink, #0c0e0f);
	font-size: 15px;
}

.gc-store-notice::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--gc-idle, #c4cee2);
	vertical-align: middle;
}

.gc-store-notice--success::before {
	background: var(--gc-ok, #00a32a);
}

.gc-store-notice--pending::before {
	background: var(--gc-warn, #dba617);
}

.gc-store-notice--error::before {
	background: var(--gc-error, #d63638);
}

.gc-checkout-status--global {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	width: min(40rem, calc(100% - 32px));
	margin: 0;
}

.gc-checkout-status--global[hidden] {
	display: none;
}

.gc-checkout-return .gc-button {
	display: flex;
	margin-top: 24px;
}