/**
 * Unified checkout styles (enqueued only on /checkout/).
 */

.store-unified-checkout {
	--checkout-gap: var(--space-6, 1.5rem);
	--checkout-pad: clamp(1rem, 3vw, 1.75rem);
	--checkout-sticky-h: 4.75rem;
	background: var(--color-surface, #ffffff);
}

.store-unified-checkout .site-main--checkout {
	min-height: 60vh;
	padding-block: var(--checkout-pad) calc(var(--checkout-pad) + var(--checkout-sticky-h));
}

@media (min-width: 900px) {
	.store-unified-checkout .site-main--checkout {
		padding-block-end: var(--checkout-pad);
	}
}

/* —— Header / footer chrome —— */
.checkout-header {
	border-bottom: 1px solid var(--color-border, #e5e1db);
	background: var(--color-surface-elevated, #fff);
}

.checkout-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 1rem);
	max-width: 72rem;
	margin-inline: auto;
	padding: 0.875rem var(--checkout-pad);
}

.checkout-header__brand {
	font-weight: 700;
	font-size: var(--font-size-md, 1rem);
	color: var(--color-text, #1a1a1a);
	text-decoration: none;
}

.checkout-header__logo {
	text-decoration: none;
	color: inherit;
}

.checkout-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6b6560);
}

.checkout-header__lock {
	display: inline-flex;
	color: var(--color-text-muted, #6b6560);
}

.checkout-header__help {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.checkout-footer {
	border-top: 1px solid var(--color-border, #e5e1db);
	background: var(--color-surface-elevated, #fff);
	margin-block-start: auto;
}

.checkout-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	max-width: 72rem;
	margin-inline: auto;
	padding: 1rem var(--checkout-pad);
}

.checkout-footer__copy {
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6b6560);
}

.checkout-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.checkout-footer__nav a {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6b6560);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* —— Shell —— */
.checkout {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: var(--checkout-pad);
}

.checkout.is-loading .checkout__lines,
.checkout.is-loading .checkout__totals {
	opacity: 0.55;
}

.checkout__notices:empty {
	display: none;
}

.checkout__notice {
	margin: 0 0 var(--space-4, 1rem);
	padding: 0.75rem 1rem;
	border-radius: var(--radius-subtle, 0.375rem);
	border: 1px solid var(--color-notice-border, #f0c2c2);
	background: var(--color-notice-bg, #fff5f5);
	color: var(--color-danger, #b42318);
}

.checkout__notice--success {
	border-color: var(--color-notice-success-border, #b7e0c2);
	background: var(--color-notice-success-bg, #f2fbf5);
	color: var(--color-success, #067647);
}

.checkout__empty {
	text-align: center;
	padding: clamp(2rem, 8vw, 4rem) 1rem;
	background: var(--color-surface-elevated, #fff);
	border-radius: var(--radius-subtle, 0.375rem);
	border: 1px solid var(--color-border, #e5e1db);
}

.checkout__empty-title {
	margin: 0 0 0.5rem;
	font-size: var(--font-size-xl, 1.5rem);
}

.checkout__empty-text {
	margin: 0 0 1.25rem;
	color: var(--color-text-muted, #6b6560);
}

.checkout__empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1.25rem;
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-primary, #1a1a1a);
	color: var(--color-surface-elevated, #fff);
	text-decoration: none;
	font-weight: 600;
}

.checkout__layout {
	display: grid;
	gap: var(--checkout-gap);
}

@media (min-width: 900px) {
	.checkout__layout {
		/* RTL: first column is on the right → form, then sticky summary on the left */
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
		align-items: start;
	}

	.checkout__main {
		order: 1;
	}

	.checkout__summary {
		position: sticky;
		top: 1rem;
		order: 2;
	}

	.checkout__title--mobile,
	.checkout__summary-toggle {
		display: none;
	}
}

@media (max-width: 899px) {
	.checkout__title--desktop {
		display: none;
	}

	.checkout__summary-panel {
		display: none;
	}

	.checkout.is-summary-open .checkout__summary-panel {
		display: block;
		margin-block-start: 0.75rem;
	}
}

.checkout__title {
	margin: 0 0 1rem;
	font-size: var(--font-size-xl, 1.5rem);
	font-weight: 700;
}

.checkout__summary,
.checkout__main {
	background: var(--color-surface-elevated, #fff);
	border: 1px solid var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	padding: 1.25rem;
}

.checkout__summary-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.75rem;
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: start;
}

.checkout__summary-toggle-total {
	font-weight: 700;
}

.checkout__section {
	margin-block-end: 1.75rem;
	padding-block-end: 1.75rem;
	border-bottom: 1px solid var(--color-border, #e5e1db);
}

.checkout__section:last-of-type {
	border-bottom: 0;
	margin-block-end: 0;
	padding-block-end: 0;
}

.checkout__section-title {
	margin: 0 0 1rem;
	font-size: var(--font-size-lg, 1.125rem);
	font-weight: 650;
}

.checkout__grid--2 {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 560px) {
	.checkout__grid--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.checkout__field {
	margin: 0 0 0.85rem;
	display: grid;
	gap: 0.35rem;
}

.checkout__field[hidden] {
	display: none !important;
}

.checkout__field label {
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 550;
}

.checkout__req {
	color: var(--color-danger, #b42318);
}

.checkout__input,
.checkout__textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-surface-elevated, #fff);
	font: inherit;
	color: inherit;
}

.checkout__textarea {
	min-height: 5rem;
	resize: vertical;
}

.checkout__input:focus-visible,
.checkout__textarea:focus-visible,
.checkout__qty-btn:focus-visible,
.checkout__place:focus-visible,
.checkout__coupon-apply:focus-visible,
.checkout__linkish:focus-visible,
.checkout__choice:focus-within {
	outline: 2px solid var(--color-focus, #1a1a1a);
	outline-offset: 2px;
}

.checkout__input[aria-invalid='true'] {
	border-color: var(--color-danger, #b42318);
}

.checkout__field-error {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-danger, #b42318);
}

.checkout__linkish {
	display: inline-flex;
	margin: 0 0 0.85rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text, #1a1a1a);
	font: inherit;
	font-size: var(--font-size-sm, 0.875rem);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
	min-height: 2.75rem;
	align-items: center;
}

.checkout__check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: var(--font-size-sm, 0.875rem);
	margin: 0.5rem 0 0;
}

.checkout__check--club {
	margin: 0.35rem 0 0.85rem;
	font-weight: 550;
}

.checkout__check input {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.1rem;
	flex-shrink: 0;
}

/* —— Lines —— */
.checkout__lines {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.checkout__line {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: start;
	transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease;
}

.checkout__line.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.checkout__line.is-removing {
	opacity: 0;
	transform: translateY(-0.35rem);
}

.checkout__line-media img {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: var(--radius-subtle, 0.375rem);
	display: block;
	background: var(--color-surface, #ffffff);
}

.checkout__line-name {
	margin: 0 0 0.2rem;
	font-weight: 600;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__line-meta {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	color: var(--color-text-muted, #6b6560);
}

.checkout__line-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 0.75rem;
	margin: 0 0 0.5rem;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__line-unit {
	color: var(--color-text-muted, #6b6560);
	font-weight: 400;
}

.checkout__line-total {
	font-weight: 650;
	margin-inline-start: auto;
}

.checkout__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	overflow: hidden;
}

.checkout__qty-btn,
.checkout__qty-input {
	min-height: 2.75rem;
	min-width: 2.75rem;
	border: 0;
	background: var(--color-surface-elevated, #fff);
	font: inherit;
	text-align: center;
}

.checkout__qty-input {
	width: 3rem;
	border-inline: 1px solid var(--color-border, #e5e1db);
	-moz-appearance: textfield;
}

.checkout__qty-input::-webkit-outer-spin-button,
.checkout__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.checkout__line-remove {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--color-text-muted, #6b6560);
	cursor: pointer;
	border-radius: var(--radius-subtle, 0.375rem);
}

/* —— Coupon / totals —— */
.checkout__coupon {
	margin-block-end: 1rem;
}

.checkout__coupon-toggle {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--font-size-sm, 0.875rem);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
	color: var(--color-text-muted, #6b6560);
}

.checkout__coupon-form {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 0.5rem;
}

.checkout__coupon-apply {
	flex-shrink: 0;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-surface, #ffffff);
	font: inherit;
	cursor: pointer;
}

.checkout__coupon-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.checkout__coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.55rem;
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-surface, #ffffff);
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__coupon-chip button {
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
	color: var(--color-text-muted, #6b6560);
	min-height: 2.75rem;
	padding-inline: 0.25rem;
}

.checkout__totals {
	margin: 0;
	display: grid;
	gap: 0.45rem;
}

.checkout__totals-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__totals-row dt,
.checkout__totals-row dd {
	margin: 0;
}

.checkout__totals-row--discount dd {
	color: var(--color-success, #067647);
}

.checkout__totals-row--total {
	margin-block-start: 0.35rem;
	padding-block-start: 0.65rem;
	border-top: 1px solid var(--color-border, #e5e1db);
	font-size: var(--font-size-md, 1rem);
	font-weight: 700;
}

/* —— Choices (shipping / payment) —— */
.checkout__shipping-list,
.checkout__payment-list {
	display: grid;
	gap: 0.55rem;
}

.checkout__choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	cursor: pointer;
	min-height: 2.75rem;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.checkout__choice.is-selected {
	border-color: var(--color-primary, #1a1a1a);
	background: color-mix(in srgb, var(--color-primary, #1a1a1a) 5%, white);
}

.checkout__choice-title {
	display: block;
	font-weight: 600;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__ship-meta {
	display: block;
	margin-block-start: 0.15rem;
	font-size: 0.8rem;
	color: var(--color-text-muted, #6b6560);
}

.checkout__choice-price {
	font-weight: 650;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__hint,
.checkout__payment-empty {
	margin: 0;
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6b6560);
}

.checkout__legal {
	margin: 0 0 1rem;
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6b6560);
}

.checkout__legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.checkout__place {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-primary, #1a1a1a);
	color: var(--color-surface-elevated, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 160ms ease, transform 160ms ease;
}

.checkout__place:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.checkout__actions--desktop {
	margin-block-start: 0.5rem;
}

@media (max-width: 899px) {
	.checkout__actions--desktop {
		display: none;
	}
}

/* —— Sticky mobile bar —— */
.checkout__sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	padding: 0.65rem var(--checkout-pad);
	padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--color-surface-elevated, #fff) 92%, transparent);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--color-border, #e5e1db);
	transition: transform 180ms ease, opacity 180ms ease;
}

.checkout__sticky.is-keyboard {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

.checkout__sticky-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	max-width: 72rem;
	margin-inline: auto;
}

.checkout__sticky-total {
	margin: 0;
	display: grid;
	gap: 0.1rem;
	font-size: var(--font-size-sm, 0.875rem);
}

.checkout__sticky-total strong {
	font-size: var(--font-size-md, 1rem);
}

.checkout__sticky .checkout__place {
	width: auto;
	min-width: 9.5rem;
	padding-inline: 1rem;
}

@media (min-width: 900px) {
	.checkout__sticky {
		display: none !important;
	}
}

/* —— Club —— */
.checkout-club {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-start: 0.75rem;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--color-border, #e5e1db);
	border-radius: var(--radius-subtle, 0.375rem);
	background: var(--color-surface, #ffffff);
	text-align: center;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.checkout-club__text {
	margin: 0 0 0.75rem;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
	text-align: center;
	max-width: 28rem;
}

.checkout-club.is-enrolled {
	border-style: solid;
	border-color: var(--color-success, #067647);
	background: var(--color-notice-success-bg, #f2fbf5);
}

.checkout-club.is-enrolled .checkout-club__status {
	border: 0;
	background: transparent;
	padding: 0;
}

.checkout-club__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-block-end: 0.5rem;
}

.checkout-club__actions[hidden] {
	display: none !important;
}

.checkout-club__terms {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--color-text-muted, #6b6560);
	text-align: center;
	max-width: 28rem;
}

.checkout-club__terms a {
	color: inherit;
}

.checkout-club__status {
	margin: 0.65rem 0 0;
	font-size: var(--font-size-sm, 0.875rem);
	text-align: center;
}

.checkout-club__status.is-success {
	color: var(--color-success, #067647);
	animation: checkout-club-pop 220ms ease;
}

.store-auth-google--checkout {
	min-height: 2.75rem;
	justify-content: center;
	width: min(100%, 22rem);
}

@keyframes checkout-club-pop {
	from {
		opacity: 0;
		transform: translateY(0.25rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.checkout__line,
	.checkout__choice,
	.checkout__place,
	.checkout__sticky,
	.checkout-club,
	.checkout-club__status.is-success {
		transition: none !important;
		animation: none !important;
	}
}