/* ==========================================================================
   Product page — Variant 1 "Karta na zdjęciu" in Golden Hour styling
   ========================================================================== */

:root {
	/* Glass dense enough that 13px text on it stays readable over bright sky. */
	--glass-bg: rgba(11, 26, 43, .72);
	--glass-line: rgba(244, 239, 232, .16);
	--glass-shadow: 0 40px 90px -40px rgba(11, 26, 43, .8);
	/* Photo shading only where text sits: a band under the header, a corner behind the title. The photo
	   itself keeps its colour; the title is white over the photo in both schemes. */
	--hero-top: rgba(11, 26, 43, .55);
	--hero-scrim: rgba(11, 26, 43, .82);
	--hero-text: #ffffff;
	--hero-muted: rgba(255, 255, 255, .86);
	--hero-warm: #f3b58f;
	--backdrop: rgba(11, 26, 43, .78);
	--hero-gap: clamp(20px, 3vh, 36px);
}

:root[data-theme="light"] {
	--glass-bg: rgba(255, 255, 255, .86);
	--glass-line: rgba(255, 255, 255, .75);
	--glass-shadow: 0 40px 90px -50px rgba(11, 26, 43, .45);
	/* Light band under the header (dark header text), navy corner behind the white title. */
	--hero-top: rgba(244, 246, 248, .78);
	--hero-scrim: rgba(11, 26, 43, .66);
	--backdrop: rgba(236, 232, 225, .82);
}

/* Light scheme: a light band under the overlay header, so the header switches to dark text. */
:root[data-theme="light"] .has-overlay-header .site-header:not(.is-solid) {
	color: var(--text);
}

:root[data-theme="light"] .has-overlay-header .site-header:not(.is-solid) .button--header {
	background: var(--text);
	color: #ffffff;
}

/* Hero: exactly one viewport on desktop; title block and card fit inside with spacing. */
.product-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: max(600px, var(--screen));
	overflow: clip;
	background: var(--bg);
	color: var(--hero-text);
}

.product-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.product-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--hero-top) 0, rgba(0, 0, 0, 0) 200px),
		radial-gradient(85% 75% at 0% 100%, var(--hero-scrim) 0%, rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}

.product-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: inherit;
	display: flex;
	/* One shared bottom line: the card's lower edge and the title's last baseline sit on the same inset. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: calc(var(--header-h) + var(--hero-gap));
	padding-bottom: var(--hero-gap);
}

.product-hero__intro {
	flex: 1 1 480px;
	min-width: 0;
	max-width: 680px;
	align-self: flex-end;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	color: var(--hero-muted);
}

.crumbs a {
	color: var(--hero-text);
	text-decoration: none;
}

.crumbs a:hover {
	text-decoration: underline;
}

.product-hero__eyebrow {
	margin-bottom: 16px;
	color: var(--hero-warm);
}

.product-hero__title {
	font-size: clamp(3.25rem, 7vw, 6.875rem);
	color: var(--hero-text);
	/* The line box ends below the letters; trimming it to the baseline puts the letters on the shared line. */
	text-box: trim-end cap alphabetic;
}

.product-hero__lead {
	max-width: 520px;
	margin-top: 22px;
	font-size: var(--fs-lead);
	color: var(--hero-muted);
}

.product-hero__lead p {
	margin: 0;
}

/* Glass purchase card: never scrolls inside; a long recipient list scrolls on its own (.recipients). */
.buy-card {
	flex: 0 1 470px;
	min-width: min(100%, 340px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.6vh, 18px);
	padding: clamp(20px, 2.6vh, 28px);
	border: 1px solid var(--glass-line);
	border-radius: 28px;
	background: var(--glass-bg);
	color: var(--text);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	backdrop-filter: blur(22px) saturate(140%);
	box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.buy-card {
		background: var(--surface);
	}
}

.buy-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
}

.buy-card__price strong {
	font-size: var(--fs-display-s);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}

.buy-card__unit,
.buy-card__omnibus,
.buy-card__note {
	margin: 0;
	font-size: var(--fs-small);
}

.buy-card__omnibus {
	margin-top: -12px;
}

.buy-card__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.buy-card__label {
	padding: 0;
	line-height: 1.3;
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* A legend sits outside the fieldset's flex flow, so the group gap does not reach it. */
legend.buy-card__label {
	margin-bottom: 12px;
}

/* Duration switcher (Golden Hour .seg) */
.seg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seg__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line2);
	border-radius: 12px;
	color: var(--text);
	font-size: var(--fs-ui);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.seg__item:hover {
	border-color: var(--text);
}

.seg__item[aria-current="page"] {
	background: var(--text);
	border-color: var(--text);
	color: var(--bg);
}

.dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--dot, var(--acc));
}

/* Variant cards (Golden Hour .opt) */
.opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.opt {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--line2);
	border-radius: 16px;
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease;
}

.opt:hover {
	border-color: var(--text);
}

.opt:has(.opt__input:checked) {
	border-color: var(--acc);
	background: color-mix(in srgb, var(--acc) 10%, transparent);
}

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

.opt__radio {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid var(--line2);
	border-radius: 50%;
	box-sizing: border-box;
	transition: border-color .3s ease;
}

.opt__input:checked + .opt__radio {
	border-color: var(--acc);
}

.opt__input:checked + .opt__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--acc);
}

.opt__input:focus-visible + .opt__radio {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.opt__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.opt__desc {
	font-size: var(--fs-ui);
	color: var(--muted);
}

.opt__price {
	white-space: nowrap;
}

/* Quantity + recipients */
.buy-card__qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line2);
	border-radius: 999px;
}

.qty__btn {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	font-size: var(--fs-title-s);
	line-height: 1;
	cursor: pointer;
}

.qty__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.qty__input {
	width: 40px;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: var(--fs-body);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* Names: one field per voucher in a horizontal slider, so the card keeps its height with any quantity.
   The padding keeps the focus ring inside the scroll box. */
.recipients-slider {
	position: relative;
}

.recipients {
	display: flex;
	margin: -4px;
	padding: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 4px;
	scrollbar-width: none;
}

.recipients::-webkit-scrollbar {
	display: none;
}

.recipient {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.recipient + .recipient {
	margin-left: 8px;
}

.recipients__nav {
	position: absolute;
	top: -7px;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
}

.recipients__nav[hidden] {
	display: none;
}

.recipients__pos {
	min-width: 3.4em;
	font-size: var(--fs-small);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.recipients__arrow {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--line2);
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
}

.recipients__arrow:hover:not(:disabled) {
	border-color: var(--text);
}

.recipients__arrow:disabled {
	opacity: .3;
	cursor: default;
}

/* The character counter moves left of the arrows. */
.recipients-slider.is-multi .recipient__label {
	padding-right: 128px;
}

.recipient__label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
	font-size: var(--fs-ui);
	font-weight: 600;
}

.recipient__label .muted {
	font-weight: 400;
}

.field {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: transparent;
	color: var(--text);
	font: 500 var(--fs-body)/1.2 var(--font-sans);
}

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

/* One ring drawn inside the field's box, so a scrolling list cannot clip it. */
.field {
	transition: border-color .2s ease, box-shadow .2s ease;
}

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

/* Light mode: a light accent on a white glass card barely shows, so the chosen variant and the field in use
   take the darker accent (--acc-text) for edges and a deeper tint. */
:root[data-theme="light"] .opt:has(.opt__input:checked) {
	border-color: var(--acc-text);
	background: color-mix(in srgb, var(--acc) 24%, #ffffff);
	box-shadow: inset 0 0 0 1px var(--acc-text);
}

:root[data-theme="light"] .opt__input:checked + .opt__radio {
	border-color: var(--acc-text);
}

:root[data-theme="light"] .opt__input:checked + .opt__radio::after {
	background: var(--acc-text);
}

:root[data-theme="light"] .field {
	background: rgba(255, 255, 255, .7);
}

:root[data-theme="light"] .field:focus,
:root[data-theme="light"] .field:focus-visible {
	border-color: var(--acc-text);
	background: #ffffff;
	box-shadow: 0 0 0 1px var(--acc-text), 0 0 0 5px color-mix(in srgb, var(--acc) 45%, transparent);
}

.buy-card__submit[aria-busy="true"] {
	opacity: .7;
	pointer-events: none;
}

.button--sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: var(--fs-caption);
}

/* Feature strip right under the hero (no overlap, so the hero fits the viewport). */
.product-features {
	position: relative;
	z-index: 2;
	padding-top: clamp(28px, 4vw, 48px);
}

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

/* One strip split by hairlines rather than three boxed cards. */
.product-features__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-block: 1px solid var(--line);
}

.feature-card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 6px 18px;
	padding: clamp(22px, 2.6vw, 34px) clamp(4px, 2vw, 32px);
}

.feature-card + .feature-card {
	border-left: 1px solid var(--line);
}

.feature-card__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
	border-radius: 50%;
	color: var(--acc-text);
	background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%);
}

.feature-card__title {
	margin: 4px 0 0;
	font-size: var(--fs-title-s);
	font-weight: 600;
	font-stretch: 112%;
	letter-spacing: -.01em;
}

.feature-card p {
	margin: 0;
	max-width: 34ch;
	font-size: var(--fs-body-s);
	line-height: 1.55;
	color: var(--muted);
}

/* Stacked strip: hairlines between rows instead of columns. */
@media (max-width: 860px) {
	.product-features__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.feature-card + .feature-card {
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}

/* Details: description, places, facts + sticky preview */
.product-details {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 72px;
	padding-top: clamp(80px, 9vw, 128px);
	padding-bottom: clamp(80px, 9vw, 128px);
}

.product-details__main {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.product-details__side {
	flex: 1 1 380px;
	min-width: 0;
	position: sticky;
	top: calc(var(--admin-bar) + var(--header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.places__lead {
	margin: 14px 0 10px;
	color: var(--muted);
	font-size: var(--fs-body-s);
}

.places__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.places__list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-body-l);
}

.recipient__optional {
	font-weight: 400;
	color: var(--muted);
}

.places__list .muted {
	font-size: var(--fs-ui);
}

.places__note {
	margin: 12px 0 0;
	font-size: var(--fs-small);
}


.prose--flush {
	max-width: 680px;
	padding-bottom: 0;
	margin-top: 14px;
	color: var(--muted);
}

.prose--flush h2,
.prose--flush h3 {
	color: var(--text);
}

.prose--flush hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2em 0;
}

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

.facts div {
	padding: 16px 0;
	border-top: 1px solid var(--line);
}

.facts dt {
	margin-bottom: 6px;
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--warm);
}

.facts dd {
	margin: 0;
	font-size: var(--fs-body-s);
	color: var(--muted);
}

/* Live preview: canvas only (no text in the DOM), tilts on hover like the Golden Hour concept */
.preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.preview-head__title {
	margin: 0;
	font-size: var(--fs-title);
	font-weight: 800;
}

.voucher-preview {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.voucher-preview__sheet,
.voucher-zoom__sheet {
	position: relative;
	aspect-ratio: 210 / 297;
	overflow: clip;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(11, 26, 43, .08);
}

.voucher-preview__sheet {
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.voucher-preview:hover .voucher-preview__sheet {
		transform: perspective(1400px) rotateX(2deg) rotateY(-3deg);
	}
}

.voucher-preview__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Transparent layer above the canvas: no drag, no "save image", no selection of the canvas itself. */
.voucher-preview__guard {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.voucher-preview__status {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 24px;
	color: #4b5e72;
	font-size: var(--fs-ui);
	text-align: center;
}

.voucher-preview__status[hidden] {
	display: none;
}

.voucher-preview__caption {
	margin: 0;
	font-size: var(--fs-small);
}

.voucher-zoom {
	width: min(720px, 94vw, calc(90vh * 210 / 297));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.voucher-zoom::backdrop {
	background: var(--backdrop);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Beside the sheet's top-right corner, in reach and never off screen; on narrow screens on the sheet. */
.voucher-zoom__close {
	position: absolute;
	top: 0;
	right: -64px;
	z-index: 2;
	color: #f4efe8;
	background: rgba(11, 26, 43, .72);
}

@media (max-width: 900px) {
	.voucher-zoom__close {
		top: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.voucher-zoom[open] {
		animation: zoom-in .5s cubic-bezier(.22, 1, .36, 1) both;
	}

	/* Leaves the way it came: shrinks back and fades. */
	.voucher-zoom[open].is-closing {
		animation: zoom-out .24s cubic-bezier(.4, 0, 1, 1) both;
	}

	.voucher-zoom.is-closing::backdrop,
	.cart-drawer.is-closing::backdrop {
		animation: backdrop-out .28s ease both;
	}
}

@keyframes zoom-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(.96); }
}

@keyframes zoom-in {
	from { opacity: 0; transform: scale(.94); }
	to { opacity: 1; transform: none; }
}

/* Added-to-cart drawer */
.cart-drawer {
	margin: 0 0 0 auto;
	width: min(460px, 100vw);
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 28px;
	border: 0;
	border-left: 1px solid var(--line);
	background: var(--bg);
	color: var(--text);
}

.cart-drawer[open] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cart-drawer::backdrop {
	background: var(--backdrop);
}

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

.cart-drawer__title {
	margin: 0;
	font-size: var(--fs-title);
	font-weight: 800;
}

.cart-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.cart-drawer__list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-body-s);
}

.cart-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.cart-drawer[open] {
		animation: drawer-in .5s cubic-bezier(.22, 1, .36, 1) both;
	}

	/* Slides back out to the right, where it came from. */
	.cart-drawer[open].is-closing {
		animation: drawer-out .28s cubic-bezier(.4, 0, 1, 1) both;
	}
}

@keyframes drawer-out {
	from { transform: none; }
	to { transform: translateX(100%); }
}

@keyframes drawer-in {
	from { transform: translateX(100%); }
	to { transform: none; }
}

/* Other flights */
.product-others {
	padding-top: clamp(72px, 8vw, 112px);
	padding-bottom: clamp(72px, 8vw, 112px);
	background: var(--bg2);
}

.product-others__title {
	margin-bottom: 28px;
	font-size: clamp(2rem, 3.8vw, 3.25rem);
}

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

.other {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	padding: 18px;
	overflow: clip;
	border-radius: 20px;
	background: var(--surface);
	color: #ffffff;
	text-decoration: none;
}

.other__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}

.other:hover .other__img {
	transform: scale(1.05);
}

.other::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 26, 43, 0) 45%, rgba(11, 26, 43, .85) 100%);
}

.other__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--fs-title);
}

.other__text .eyebrow {
	color: #f3b58f;
}

/* Short or narrow screens: the card stacks under the title and the hero grows with it. */
@media (max-width: 900px), (max-height: 620px) {
	.product-hero {
		height: auto;
		min-height: var(--screen);
		align-items: stretch;
	}

	.product-hero__inner {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		gap: 28px;
	}

	.product-hero__intro {
		flex: 0 0 auto;
		align-self: stretch;
	}

	.buy-card {
		flex: 0 0 auto;
		max-height: none;
		overflow: visible;
	}
}

/* Phones and tablets: the photo is a window across the top with the title at its foot; the card starts
   below it on a solid surface, overlapping the photo's edge, so neither hides the other. */
@media (max-width: 900px) {
	.product-hero {
		--photo-h: min(62svh, 560px);
		display: block;
		min-height: 0;
		background: var(--bg);
	}

	.product-hero__photo {
		height: var(--photo-h);
	}

	.product-hero::after {
		bottom: auto;
		height: var(--photo-h);
		background:
			linear-gradient(180deg, var(--hero-top) 0, rgba(0, 0, 0, 0) 120px),
			linear-gradient(0deg, var(--hero-scrim) 0, rgba(0, 0, 0, 0) 60%);
	}

	.product-hero__inner {
		min-height: 0;
		gap: 0;
		padding-top: 0;
		padding-bottom: 8px;
	}

	.product-hero__intro {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: var(--photo-h);
		padding: calc(var(--header-h) + 16px) 0 64px;
	}

	.buy-card {
		margin-top: -36px;
		background: var(--surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-color: var(--line);
	}
}

@media (max-width: 780px) {

	.buy-card {
		padding: 22px;
		border-radius: 22px;
	}

	.product-details__side {
		position: static;
	}
}

/* Add-to-cart error in place of the payment note (product.js). */
.buy-card__note.is-error {
	color: var(--err);
	font-weight: 600;
}

/* Glass fallbacks: solid surfaces when the person asks for less transparency or more contrast, and system
   colours in forced-colours mode (glass and box-shadow rings disappear there). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.buy-card {
		background: var(--surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-color: var(--line2);
	}

	.product-hero {
		--hero-scrim: rgba(11, 26, 43, .9);
	}
}

@media (forced-colors: active) {
	.buy-card {
		border: 1px solid CanvasText;
	}

	.opt:has(.opt__input:checked) {
		outline: 2px solid Highlight;
	}

	.field:focus,
	.field:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

/* Touch: the chosen variant presses in; the names slider arrows get a 44px hit area around the 30px circle. */
.opt:active {
	transform: scale(.985);
	transition: transform 60ms ease;
}

.recipients__arrow {
	position: relative;
}

.recipients__arrow::before {
	content: "";
	position: absolute;
	inset: -7px;
}

/* Notices (e.g. after a no-JS add to cart) inside the title block, below the overlay header. */
.product-hero__notices {
	max-width: 560px;
	margin-bottom: 20px;
	color: var(--text);
}

.product-hero__notices .woocommerce-notices-wrapper > * {
	margin: 0 0 8px;
}