/* Order flow: cart (B-Koszyk), checkout (B-Kasa), order received (B-Zamowienie). */

.order-flow {
	--err: #ff8a7a;
	padding-bottom: clamp(80px, 10vw, 140px);
}

:root[data-theme="light"] .order-flow {
	--err: #b42318;
}

.order-flow__inner {
	padding-top: 32px;
}

.order-flow__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin: clamp(40px, 5vw, 64px) 0 36px;
}

.order-flow__title {
	font-size: clamp(3.5rem, 7vw, 6.75rem);
}

.order-flow__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--text);
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.order-flow__head,
	.cart-layout,
	.checkout-layout {
		animation: flow-in .9s var(--ease-out) both;
	}

	.cart-layout,
	.checkout-layout {
		animation-delay: .1s;
	}
}

@keyframes flow-in {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

/* Steps ------------------------------------------------------------------------ */
.order-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-steps__step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--muted);
}

.order-steps__step--current {
	color: var(--text);
}

.order-steps__step a {
	color: inherit;
	text-decoration: none;
}

.order-steps__step a:hover {
	color: var(--text);
}

.order-steps__bar {
	height: 4px;
	overflow: clip;
	border-radius: 2px;
	background: var(--line);
}

.order-steps__bar i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	background: var(--c, var(--acc));
	transform-origin: 0 50%;
}

.order-steps__step--next .order-steps__bar i {
	transform: scaleX(0);
}

@media (prefers-reduced-motion: no-preference) {
	.order-steps__step--current .order-steps__bar i {
		animation: steps-bar 1.1s cubic-bezier(.65, 0, .35, 1) .2s both;
	}
}

@keyframes steps-bar {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 560px) {
	.order-steps {
		font-size: var(--fs-micro);
	}
}

/* Shared rows and fields --------------------------------------------------------- */
.summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: var(--fs-body);
}

.summary-row--total {
	align-items: baseline;
	font-weight: 700;
}

.summary-row__total {
	font-size: var(--fs-heading-xl);
	font-weight: 500;
	letter-spacing: -.03em;
}

.field--sm {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line2);
	border-radius: 12px;
	background: transparent;
	color: var(--text);
	font: 500 var(--fs-body) var(--font-sans);
}

.field--sm:focus {
	outline: none;
	border-color: var(--acc);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);
}

.field--sm::placeholder {
	color: var(--muted);
}

/* Cart -------------------------------------------------------------------------- */
.cart-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 48px);
}

.cart-lines {
	flex: 2 1 600px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cart-line {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--surface);
	transition: opacity .3s ease, border-color .3s ease;
}

.cart-line[hidden] {
	display: none;
}

.cart-line.is-saving {
	opacity: .7;
}

.cart-line.has-error {
	border-color: var(--err);
}

.cart-line__photo {
	flex: none;
	width: 132px;
	height: 164px;
	overflow: clip;
	border-radius: 16px;
	background: var(--bg2);
}

.cart-line__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-line__body {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cart-line__top {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
}

.cart-line__name {
	margin: 0;
	font-size: var(--fs-heading-s);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1;
}

.cart-line__name a {
	color: var(--text);
	text-decoration: none;
}

.cart-line__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	white-space: nowrap;
}

.cart-line__price strong {
	font-size: var(--fs-title);
	font-weight: 800;
}

.cart-line__price span {
	font-size: var(--fs-small);
}

.cart-line__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 14px 20px;
}

.cart-line__variant {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.cart-line__variant legend {
	margin-bottom: 6px;
	padding: 0;
	font-size: var(--fs-micro);
}

.segmented-mini {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	border: 1px solid var(--line2);
	border-radius: 12px;
}

.segmented-mini label {
	position: relative;
	cursor: pointer;
}

.segmented-mini input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.segmented-mini span {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 9px;
	color: var(--muted);
	font-size: var(--fs-small);
	font-weight: 600;
	transition: background-color .3s ease, color .3s ease;
}

.segmented-mini input:checked + span {
	background: var(--text);
	color: var(--bg);
}

.segmented-mini input:focus-visible + span {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.cart-line__recipient {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cart-line__recipient .eyebrow {
	font-size: var(--fs-micro);
}

.cart-line__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cart-line__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.upsell-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px dashed var(--line2);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font: 600 var(--fs-small) var(--font-sans);
	cursor: pointer;
}

.upsell-chip[hidden] {
	display: none;
}

.upsell-chip:hover {
	border-color: var(--acc);
	color: var(--acc-text);
}

.cart-line__remove {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 6px;
	color: var(--muted);
	font-size: var(--fs-ui);
	font-weight: 600;
	text-decoration: none;
}

.cart-line__remove:hover {
	color: var(--err);
}

.cart-lines__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cart-lines__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--text);
	text-decoration: none;
}

.cart-lines__save[hidden] {
	display: none;
}

.cart-summary {
	position: sticky;
	top: calc(var(--admin-bar) + var(--header-h) + 12px);
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--surface);
}

.cart-summary__title,
.checkout-card__title {
	margin: 0;
	font-size: var(--fs-title-l);
	font-weight: 800;
}

.cart-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cart-summary__coupon {
	padding: 4px 0;
	border-block: 1px solid var(--line);
}

.cart-summary__coupon summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: var(--fs-body-s);
	font-weight: 600;
	cursor: pointer;
}

.cart-summary__coupon-form {
	display: flex;
	gap: 8px;
	padding-bottom: 14px;
}

.cart-summary__coupon-form .field--sm {
	flex: 1;
	text-transform: uppercase;
}

.cart-summary__coupon-form .button {
	min-height: 48px;
	padding: 0 18px;
}

.know-box {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--bg);
}

.know-box h3 {
	margin: 0 0 14px;
}

.know-box__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.know-box__list li {
	display: flex;
	gap: 12px;
	font-size: var(--fs-body-s);
	line-height: 1.45;
}

.know-box__list svg {
	flex: none;
	margin-top: 2px;
	color: var(--acc-text);
}

.know-box__link {
	display: inline-block;
	margin-top: 14px;
	font-size: var(--fs-ui);
	color: var(--acc-text);
}

.cart-summary__pay {
	margin: 0;
	font-size: var(--fs-micro);
}

.cart-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: calc(100% - 32px);
	padding: 10px 10px 10px 20px;
	border-radius: 999px;
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-body-s);
	box-shadow: var(--shadow);
	transform: translateX(-50%);
}

.cart-toast[hidden] {
	display: none;
}

.cart-toast button {
	flex: none;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--acc);
	color: var(--on-acc);
	font: 800 var(--fs-ui) var(--font-sans);
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.cart-toast:not([hidden]) {
		animation: toast-in .5s var(--ease-out) both;
	}

	/* Drops back down the way it rose. */
	.cart-toast.is-leaving {
		animation: toast-out .24s cubic-bezier(.4, 0, 1, 1) both;
	}
}

@keyframes toast-out {
	from { opacity: 1; transform: translate(-50%, 0); }
	to { opacity: 0; transform: translate(-50%, 20px); }
}

@keyframes toast-in {
	from { opacity: 0; transform: translate(-50%, 20px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.cart-empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: clamp(32px, 6vw, 72px);
	border: 1px dashed var(--line2);
	border-radius: 28px;
}

.cart-empty-state svg {
	color: var(--acc-text);
}

.cart-empty-state__title {
	margin: 0;
	font-size: var(--fs-heading-l);
	font-weight: 800;
}

.cart-empty-state p {
	max-width: 520px;
	margin: 0;
}

@media (max-width: 560px) {
	.cart-line {
		padding: 16px;
	}

	.cart-line__photo {
		width: 88px;
		height: 110px;
	}

	.cart-line__top {
		flex-direction: column;
	}

	.cart-line__price {
		align-items: flex-start;
		text-align: left;
	}
}

/* Checkout header ----------------------------------------------------------------- */
.checkout-header {
	position: sticky;
	top: var(--admin-bar);
	z-index: 60;
	border-bottom: 1px solid var(--line);
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}

.checkout-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}

.checkout-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--text);
}

.checkout-header__wordmark {
	height: 16px;
	width: auto;
}

.checkout-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
}

.checkout-header__tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

.checkout-header__phone {
	color: var(--text);
	font-size: var(--fs-ui);
	font-weight: 600;
	text-decoration: none;
}

.is-checkout-form .site-main {
	padding-top: 0;
}

@media (max-width: 720px) {
	.checkout-header__secure,
	.checkout-header__wordmark {
		display: none;
	}
}

/* Checkout ---------------------------------------------------------------------- */
.checkout-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 48px);
}

.checkout-main {
	flex: 3 1 600px;
	min-width: 0;
}

.checkout-main__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.checkout-fs {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--line);
	border-radius: 26px;
	background: var(--surface);
}

.checkout-fs legend {
	float: left;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: var(--fs-title);
	font-weight: 800;
}

.checkout-fs legend + * {
	clear: both;
}

.checkout-fs__n {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line2);
	border-radius: 50%;
	font: 500 var(--fs-small) var(--font-mono);
}

.checkout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
}

.checkout-grid[hidden] {
	display: none;
}

.checkout-help {
	margin: -4px 0 0;
	font-size: var(--fs-small);
	color: var(--muted);
}

/* WooCommerce form rows */
.checkout-layout .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.checkout-layout .form-row-wide,
.checkout-layout .notes {
	grid-column: 1 / -1;
}

.checkout-layout .form-row label {
	font-size: var(--fs-ui);
	font-weight: 600;
}

.checkout-layout .form-row .required {
	color: var(--err);
	text-decoration: none;
}

.checkout-layout .form-row .optional {
	font-weight: 400;
	color: var(--muted);
}

.checkout-layout .woocommerce-input-wrapper {
	display: block;
}

.checkout-layout .input-text,
.checkout-layout select,
.checkout-layout textarea {
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: var(--bg);
	color: var(--text);
	font: 500 var(--fs-body-l) var(--font-sans);
	transition: border-color .3s ease, box-shadow .3s ease;
}

.checkout-layout textarea,
.checkout-layout textarea.input-text {
	min-height: 96px;
	line-height: 1.5;
	padding: 14px 16px;
	resize: vertical;
}

.checkout-layout .input-text:focus,
.checkout-layout select:focus,
.checkout-layout textarea:focus {
	outline: none;
	border-color: var(--acc);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);
}

.checkout-layout .input-text::placeholder,
.checkout-layout textarea::placeholder {
	color: var(--muted);
	opacity: .85;
}

.checkout-layout .woocommerce-invalid .input-text,
.checkout-layout .woocommerce-invalid select {
	border-color: var(--err);
}

.checkout-layout .field-error,
.checkout-layout .checkout-inline-error-message {
	font-size: var(--fs-ui);
	color: var(--err);
}

.checkout-layout .select2-container .select2-selection--single {
	height: 54px;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: var(--bg);
}

.checkout-layout .select2-container .select2-selection__rendered {
	padding-left: 16px;
	color: var(--text);
	line-height: 52px;
}

.checkout-layout .select2-container .select2-selection__arrow {
	top: 0;
	right: 12px;
	width: 24px;
	height: 52px;
}

/* Chevron instead of select2's triangle. */
.checkout-layout .select2-container .select2-selection__arrow b {
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	margin: -7px 0 0 -4px;
	border: solid var(--muted);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .25s ease, margin .25s ease;
}

.checkout-layout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	margin-top: -2px;
	border-color: var(--muted);
	border-width: 0 2px 2px 0;
	transform: rotate(-135deg);
}

.checkout-layout .select2-container--focus .select2-selection--single,
.checkout-layout .select2-container--open .select2-selection--single {
	border-color: var(--acc);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);
}

/* The dropdown is appended to <body>, outside the form. */
.select2-container--open .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
}

.select2-container--open .select2-dropdown--below {
	margin-top: 6px;
}

.select2-container--open .select2-dropdown--above {
	margin-top: -6px;
}

.select2-dropdown .select2-search--dropdown {
	padding: 10px;
}

.select2-dropdown .select2-search__field {
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line2) !important;
	border-radius: 10px;
	background: var(--bg);
	color: var(--text);
	/* 16px: iOS zooms the page into smaller inputs. */
	font: 500 var(--fs-body) var(--font-sans);
	outline: none;
}

.select2-dropdown .select2-search__field:focus {
	border-color: var(--acc) !important;
}

.select2-dropdown .select2-results__options {
	max-height: 260px;
	padding: 0 6px 6px;
	scrollbar-width: thin;
}

.select2-dropdown .select2-results__option {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: var(--fs-body-s);
}

.select2-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown .select2-results__option[data-selected="true"] {
	background: transparent;
	color: var(--acc-text);
	font-weight: 700;
}

.select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown .select2-results__option--highlighted[data-selected] {
	background: color-mix(in srgb, var(--acc) 16%, transparent);
	color: var(--text);
}

/* Checkboxes in the contact form's style (invoice, terms): a rounded box that fills with the accent. */
.check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-size: var(--fs-body-s);
	font-weight: 500;
	color: var(--muted);
	cursor: pointer;
	transition: color .2s ease;
}

.check:hover,
.check:has(input:checked) {
	color: var(--text);
}

.check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.check__box {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--line2);
	border-radius: 7px;
	color: #0b1a2b;
	transition: background-color .25s ease, border-color .25s ease;
}

.check__box svg {
	opacity: 0;
	stroke-width: 3;
	transition: opacity .2s ease;
}

.check input:checked + .check__box {
	border-color: var(--acc);
	background: var(--acc);
}

.check input:checked + .check__box svg {
	opacity: 1;
}

.check input:focus-visible + .check__box {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

/* Invoice on request: a quiet line under the billing fields, details only once asked for. */
.invoice {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px dashed var(--line);
}

.invoice__options {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-left: 34px;
}

.invoice__options[hidden],
.checkout-company[hidden],
.checkout-help[hidden] {
	display: none;
}

.invoice__type {
	display: inline-flex;
	align-self: flex-start;
	gap: 2px;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--line2);
	border-radius: 12px;
}

.invoice__opt {
	position: relative;
	cursor: pointer;
}

.invoice__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.invoice__opt span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: var(--fs-ui);
	font-weight: 600;
	color: var(--muted);
	transition: background-color .25s ease, color .25s ease;
}

.invoice__opt input:checked + span {
	background: var(--text);
	color: var(--bg);
}

.invoice__opt input:focus-visible + span {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.invoice .checkout-help {
	margin: 0;
}

/* Company name and NIP are required for a company invoice (checked on the server). */
.checkout-company .optional {
	font-size: 0;
}

.checkout-company .optional::before {
	content: "*";
	font-size: var(--fs-ui);
	color: var(--err);
}

.checkout-delivery {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.checkout-delivery svg {
	flex: none;
	color: var(--acc-text);
}

/* Single payment method: a row like delivery. */
#payment > .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pay-single {
	margin: 0;
}

.pay-single label {
	cursor: default;
}

.checkout-delivery div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--fs-body-s);
	line-height: 1.5;
}

/* Payment cards (WooCommerce markup) */
.pay-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pay-cards .wc_payment_method {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--line2);
	border-radius: 16px;
	transition: border-color .3s ease, background-color .3s ease;
}

.pay-cards .wc_payment_method:hover {
	border-color: var(--text);
}

.pay-cards .wc_payment_method.is-selected {
	border-color: var(--acc);
	background: color-mix(in srgb, var(--acc) 8%, transparent);
}

.pay-cards .wc_payment_method > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pay-cards .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 60px;
	padding: 16px 48px 16px 16px;
	font-weight: 700;
	cursor: pointer;
}

.pay-cards .wc_payment_method > label::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 20px;
	width: 18px;
	height: 18px;
	border: 2px solid var(--line2);
	border-radius: 50%;
}

.pay-cards .wc_payment_method.is-selected > label::after,
.pay-cards .wc_payment_method > input:checked + label::after {
	border: 6px solid var(--acc);
}

.pay-cards .wc_payment_method > input:focus-visible + label {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 16px;
}

.pay-cards .wc_payment_method > label img {
	max-height: 24px;
	width: auto;
}

.pay-cards .payment_box {
	padding: 0 16px 16px;
	font-size: var(--fs-ui);
	line-height: 1.5;
	color: var(--muted);
}

.pay-cards .payment_box p {
	margin: 0;
}

/* Summary column */
.checkout-aside {
	position: sticky;
	top: calc(var(--admin-bar) + 96px);
	flex: 2 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.checkout-card {
	padding: clamp(22px, 2.6vw, 28px);
	border: 1px solid var(--line);
	border-radius: 26px;
	background: var(--surface);
}

.checkout-card__title {
	margin-bottom: 18px;
	font-size: var(--fs-title);
}

.review-order__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.review-order__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 14px;
}

.review-order__photo {
	width: 56px;
	height: 68px;
	border-radius: 10px;
	object-fit: cover;
}

.review-order__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: var(--fs-body-s);
}

.review-order__text .muted {
	font-size: var(--fs-small);
}

.review-order__price {
	white-space: nowrap;
}

.review-order__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.review-order .summary-row__total {
	font-size: var(--fs-heading-l);
}

.review-order .includes_tax {
	display: block;
	font-size: var(--fs-caption);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--muted);
}

.must-read {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, 2.6vw, 28px);
	border: 1.5px solid var(--acc);
	border-radius: 26px;
	background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 6%, transparent), color-mix(in srgb, var(--acc) 6%, transparent)), var(--surface);
}

.must-read__title {
	margin: 0;
	font-size: var(--fs-title-l);
	font-weight: 800;
}

.must-read > p {
	margin: 0;
	font-size: var(--fs-body-s);
}

.must-read__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.must-read__list li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	font-size: var(--fs-body-s);
	line-height: 1.5;
	color: var(--muted);
}

.must-read__list .mono {
	color: var(--acc-text);
	font-size: var(--fs-caption);
	padding-top: 3px;
}

.must-read__list b {
	display: block;
	color: var(--text);
}

/* WooCommerce terms (checkout/terms.php) */
.must-read__terms {
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-ui);
	line-height: 1.5;
	color: var(--muted);
}

.must-read__terms .woocommerce-privacy-policy-text p {
	margin: 0 0 12px;
}

.must-read__terms .woocommerce-terms-and-conditions {
	max-height: 240px;
	overflow: auto;
	margin-bottom: 12px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.must-read__terms .form-row {
	margin: 0;
}

.must-read__terms .woocommerce-form__label-for-checkbox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--text);
	font-weight: 500;
	cursor: pointer;
}

/* Same box as .check, drawn on the input itself (WooCommerce markup). */
.must-read__terms input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--line2);
	border-radius: 7px;
	background: transparent no-repeat center / 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .25s ease, border-color .25s ease;
}

.must-read__terms input[type="checkbox"]:checked {
	border-color: var(--acc);
	background-color: var(--acc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230b1a2b%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7%27/%3E%3C/svg%3E");
}

.must-read__terms input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.must-read__terms .woocommerce-invalid input[type="checkbox"] {
	border-color: var(--err);
}

.must-read__terms a {
	color: var(--acc-text);
}

/* The flex label would put WooCommerce's "*" in its own column: draw it right after the last word instead,
   and keep the original element for screen readers only. */
.must-read__terms .woocommerce-form__label-for-checkbox .required {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.must-read__terms .woocommerce-terms-and-conditions-checkbox-text::after {
	content: "\00a0*" / "";
	color: var(--err);
	font-weight: 600;
}

.checkout-submit {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.checkout-submit #place_order {
	flex-wrap: wrap;
	min-height: 64px;
	white-space: normal;
	text-align: center;
}

.checkout-submit #place_order[disabled],
.processing .checkout-submit #place_order {
	opacity: .7;
	cursor: progress;
}

/* WooCommerce error list above the form */
.woocommerce-NoticeGroup-checkout {
	flex-basis: 100%;
}

.checkout-layout .blockUI.blockOverlay {
	border-radius: 26px;
	background: color-mix(in srgb, var(--bg) 60%, transparent) !important;
	opacity: 1 !important;
}

@media (max-width: 1000px) {
	.checkout-aside {
		position: static;
	}
}

/* Order received ----------------------------------------------------------------- */
.order-flow--received {
	padding-bottom: 0;
}

.received-hero {
	padding-bottom: clamp(48px, 6vw, 80px);
}

.received-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 28px 64px;
	margin-top: clamp(48px, 6vw, 88px);
}

.received-hero__text {
	flex: 1 1 640px;
	min-width: 0;
}

.received-hero__badge {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin-bottom: 32px;
	border-radius: 50%;
	background: var(--acc);
	color: var(--on-acc);
}

.received-hero__badge--failed {
	background: var(--err);
	color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
	.received-hero__badge {
		animation: received-pop .9s var(--ease-out) .1s both;
	}
}

@keyframes received-pop {
	from { opacity: 0; transform: scale(.4); }
	to { opacity: 1; transform: none; }
}

.received-hero__text .eyebrow {
	margin-bottom: 18px;
}

.received-hero__title {
	font-size: clamp(3rem, 6.6vw, 6.5rem);
}

.received-hero__lead {
	flex: 0 1 400px;
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--muted);
}

.received-hero__lead strong {
	color: var(--text);
}

.received-hero__actions {
	margin-top: 28px;
}

/* Payment data with the order details right next to it. */
.received-top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.received-top--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

@media (max-width: 960px) {
	.received-top {
		grid-template-columns: minmax(0, 1fr);
	}
}

.payment-panel__card {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 3vw, 36px);
	border: 1.5px solid var(--acc);
	border-radius: 28px;
	background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 6%, transparent), color-mix(in srgb, var(--acc) 6%, transparent)), var(--surface);
}

/* Head: what, how much, until when. */
.payment-panel__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 22px;
}

.payment-panel__title {
	margin: 0;
	font-size: var(--fs-ui);
	font-weight: 600;
	color: var(--muted);
}

.payment-panel__amount {
	margin: 0;
	font-size: clamp(2.25rem, 4.4vw, 3.25rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.03em;
}

.payment-panel__deadline {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-small);
}

/* Each way to pay is one quiet list: label on the left, value (copyable where it is typed) on the right. */
.payment-route__title {
	margin: 0 0 4px;
	font-size: var(--fs-lead);
	font-weight: 700;
}

.payment-route__rows {
	margin: 0;
}

.payment-route__row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.payment-route__row:last-child {
	border-bottom: 0;
}

.payment-route__row dt {
	color: var(--muted);
	font-size: var(--fs-small);
}

.payment-route__row dd {
	margin: 0;
	font-size: var(--fs-body-l);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* "albo" between the two ways: a choice, not two more sections. */
.payment-panel__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 18px;
	color: var(--muted);
	font-family: var(--font-serif);
	font-size: var(--fs-lead);
	font-style: italic;
}

.payment-panel__or::before,
.payment-panel__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--line2);
}

.payment-panel__note {
	margin: 18px 0 0;
	color: var(--muted);
	font-size: var(--fs-small);
}

@media (max-width: 520px) {
	.payment-route__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Other gateways print their own details. */
.payment-panel__gateway p {
	margin: 0 0 12px;
	color: var(--muted);
}

.received-vouchers {
	padding-bottom: clamp(64px, 8vw, 110px);
}

.received-vouchers__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 18px;
	font: inherit;
}

/* The one thing to know before paying: the PDF goes out once the payment is in. */
.received-vouchers__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--acc) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
	color: var(--text);
	font-size: var(--fs-small);
	font-weight: 600;
}

.received-vouchers__note svg {
	flex: none;
	color: var(--acc-text);
}


.received-vouchers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 10px;
}

.voucher-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
}

.voucher-row__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent);
	border-radius: 14px;
	color: var(--acc-text);
	background: color-mix(in srgb, var(--acc) 10%, transparent);
}

.voucher-row__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--fs-ui);
}

.voucher-row__name {
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: -.03em;
}

.voucher-row__valid {
	font-size: var(--fs-micro);
}

.voucher-row__state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--acc-text);
}

.voucher-row__state--ok {
	color: #6fa34a;
}

.received-next {
	background: var(--bg2);
}

.received-next__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 80px;
	padding-block: clamp(72px, 9vw, 130px);
}

.received-next__intro {
	flex: 1 1 320px;
	min-width: 0;
}

.received-next__intro .eyebrow {
	margin-bottom: 18px;
}

.received-next__title {
	font-size: clamp(2.75rem, 5vw, 4.75rem);
}

.received-next__intro p:last-child {
	max-width: 380px;
	margin: 22px 0 0;
	font-size: var(--fs-body-l);
	line-height: 1.6;
}

.timeline {
	flex: 2 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	padding-bottom: 36px;
}

.timeline li::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 56px;
	bottom: 6px;
	width: 2px;
	background: var(--line);
}

.timeline li:last-child::before {
	display: none;
}

.timeline__n {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1.5px solid var(--acc);
	border-radius: 50%;
	background: var(--bg);
	font: 500 var(--fs-ui) var(--font-mono);
}

.timeline h3 {
	margin: 12px 0 8px;
	font-size: var(--fs-title);
	font-weight: 800;
}

.timeline p {
	margin: 0;
	line-height: 1.6;
}

.timeline a {
	color: var(--acc-text);
}

.packing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 8px 24px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.packing li {
	display: flex;
	gap: 10px;
	font-size: var(--fs-body-s);
	color: var(--muted);
}

.packing svg {
	flex: none;
	margin-top: 3px;
	color: var(--acc-text);
}

.received-more {
	padding-block: clamp(64px, 8vw, 110px);
}

.received-details__card {
	min-width: 0;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--line);
	border-radius: 26px;
	background: var(--surface);
}

.received-details__title {
	margin: 0 0 18px;
	font-size: var(--fs-title);
	font-weight: 800;
}

.received-details__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px 24px;
	margin: 0;
	font-size: var(--fs-body);
}

.received-details__list dt {
	color: var(--muted);
}

.received-details__list dd {
	margin: 0;
	text-align: right;
}

.received-details__email {
	word-break: break-all;
}

.received-details__total-label,
.received-details__total {
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.received-details__total-label {
	font-weight: 700;
	color: var(--text) !important;
}

.received-details__total {
	font-size: var(--fs-heading-s);
	font-weight: 500;
	letter-spacing: -.03em;
}

.received-details__total .includes_tax {
	display: block;
	font-size: var(--fs-caption);
	letter-spacing: 0;
	color: var(--muted);
}

.received-details__more {
	max-width: 640px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.received-details__more-title {
	margin: 0;
	font-size: var(--fs-heading);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.received-details__more p {
	margin: 0;
	line-height: 1.6;
}

/* Glass fallback for the checkout header. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.checkout-header {
		background: var(--bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Payment details copy on click (order.js): the value is the button; a "Kopiuj" hint and icon mark it. */
.copy-value {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	max-width: 100%;
	margin: -4px -8px;
	padding: 4px 8px;
	border: 1px dashed transparent;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: copy;
	transition: border-color .2s ease, background-color .2s ease;
}

.copy-value:hover,
.copy-value:focus-visible {
	border-color: color-mix(in srgb, var(--acc) 60%, transparent);
	background: color-mix(in srgb, var(--acc) 8%, transparent);
}

.copy-value:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.copy-value:active {
	transform: scale(.98);
}

.copy-value__text {
	overflow-wrap: anywhere;
}

.copy-value__icon {
	flex: none;
	color: var(--acc-text);
}

.copy-value__hint {
	font-size: var(--fs-caption);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acc-text);
}

.copy-value.is-copied {
	border-color: var(--ok, #6fa34a);
}

.copy-value.is-copied .copy-value__hint,
.copy-value.is-copied .copy-value__icon {
	color: var(--ok, #6fa34a);
}