/**
 * Košíková časť: dostupnosť + doručenie, cena + body, rezervovaný riadok pre množstvo/košík (ticket 04).
 * Hodnoty podľa React AddToCartArea (theme AddToCartWrapper) a ecommerce Price/Availibility
 * (namerané computed štýly React verzie). 1rem = 10px. Breakpointy: sm 480, md 768.
 */
.wa-pa__purchase {
	--wa-pa-purchase-bg: #FCFCFC;
	--wa-pa-price-color: #00AEEF;
	--wa-pa-price-original: #9E9E9E;
	--wa-pa-purchase-text: #292929;
	--wa-pa-stock-color-instock: #21A73F;
	--wa-pa-stock-color-outofstock: #B1241A;
	--wa-pa-stock-color-onbackorder: #FF7A00;

	display: flex;
	flex-direction: column;
	position: relative;
	margin-top: 2.4rem;
	padding: 1.6rem;
	border: 4px solid #D9D9D9;
	border-radius: 10px;
	background: var(--wa-pa-purchase-bg);
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.wa-pa__purchase {
		padding: 2.4rem;
	}
}

/* Riadok: dostupnosť vľavo, cena vpravo (Flex row, space-between, align flex-end, gap 1.6rem, mt 1rem) */
.wa-pa__purchase-summary {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.6rem;
	width: 100%;
	margin-top: 1rem;
}

/*
 * Availability, same as React: both columns shrink in proportion to their flex-basis
 * (availability = content width, price box = width 100%), so the delivery text wraps
 * the way React wraps it ("Doručíme / najneskôr do / date" on mobile, date on its own line on desktop).
 */
.wa-pa__availability {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-width: auto;
	font-size: 1em;
}

.wa-pa__stock {
	display: flex;
	align-items: center;
	gap: 0.325em;
	color: var(--wa-pa-purchase-text);
}

.wa-pa__stock--instock {
	color: var(--wa-pa-stock-color-instock);
}

.wa-pa__stock--outofstock {
	color: var(--wa-pa-stock-color-outofstock);
}

.wa-pa__stock--onbackorder {
	color: var(--wa-pa-stock-color-onbackorder);
}

.wa-pa__stock-icon {
	display: block;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	line-height: 1em;
}

.wa-pa__stock-text {
	display: block;
	white-space: nowrap;
	font-weight: 700;
}

.wa-pa__delivery {
	display: block;
	color: var(--wa-pa-purchase-text);
}

/*
 * Dátum sa po načítaní prepíše (zástupná hodnota z cache → aktuálny dátum). Pevná minimálna šírka
 * (reálny dátum 69,5–74,5 px pri bold 16 px) drží šírku stĺpca, aby sa nepohla cena vedľa.
 */
.wa-pa__delivery-value {
	display: inline-block;
	min-width: 4.7em;
	font-weight: 700;
}

.wa-pa__delivery.is-hidden {
	visibility: hidden;
}

/* Cena + body (ProductPrice: Flex column, w full, gap 0.15em, align flex-end) */
.wa-pa__pricebox {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15em;
	flex: 0 1 auto; /* React: Flex w="full" with the default flex, basis = width 100% */
	width: 100%;
}

/* PriceWrapper: fontSize base 2.4rem / sm 3.2rem, gap 0.25em, pod md stĺpec (align flex-start), od md riadok (flex-end) */
.wa-pa__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.25em;
	font-size: 2.4rem;
	color: var(--wa-pa-price-color);
	text-align: right;
}

@media (min-width: 480px) {
	.wa-pa__price {
		font-size: 3.2rem;
	}
}

@media (min-width: 768px) {
	.wa-pa__price {
		flex-direction: row;
		align-items: flex-end;
	}
}

.wa-pa__price-current {
	display: block;
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: currentColor;
	background: none;
}

.wa-pa__price-original {
	display: block;
	font-size: 70%;
	font-weight: 400;
	line-height: 1;
	color: var(--wa-pa-price-original);
	opacity: 0.5;
	text-decoration: line-through;
}

.wa-pa__price-original[hidden] {
	display: none;
}

.wa-pa__price-suffix {
	font-size: 50%;
	font-weight: 300;
	line-height: 1;
}

/* Body: fontSize base 1.2rem / sm 1.6rem */
.wa-pa__points {
	display: block;
	font-size: 1.2rem;
	color: var(--wa-pa-purchase-text);
}

.wa-pa__points[hidden] {
	display: none;
}

.wa-pa__points-value {
	font-weight: 700;
}

@media (min-width: 480px) {
	.wa-pa__points {
		font-size: 1.6rem;
	}
}

/*
 * Rezervovaný riadok pre množstvo + „Vložiť do košíka“ (React: Flex height 6rem, mt 1.6rem, gap 1.6rem).
 * Ticket 04 ho naplní; výška ostáva rovnaká, aby obsah neposkočil.
 */
.wa-pa__purchase-actions {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	width: 100%;
	height: 6rem;
	margin-top: 1.6rem;
}

/*
 * Množstvo (ecommerce QuantitySelect.tsx: QuantitySelectWrapper / QuantityButton / QuantityInput).
 * Grid 3.125em | 3ch | 3.125em, výška 100 % riadku, rámik 0.1em var(--base-light), radius 0.375em.
 * Chakra breakpoint sm = 29.6875em (475 px), lg = 62em (992 px).
 */
.wa-pa__qty {
	--qty-radius: 0.375em;
	--qty-btn-bg: var(--white, #fff);
	--qty-btn-color: var(--base, #292929);
	--qty-btn-color-hover: var(--secondary, #ec008c);
	--qty-btn-size: 3.125em;
	--qty-input-size: 3ch;
	--qty-border-size: 0.1em;
	--qty-border-color: var(--base-light, #d9d9d9);

	display: grid;
	grid-template-columns: var(--qty-btn-size) var(--qty-input-size) var(--qty-btn-size);
	grid-template-rows: 100%;
	flex: 0 1 auto;
	width: auto;
	height: 100%;
}

.wa-pa__qty[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.wa-pa__qty-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	min-width: unset;
	height: 100%;
	margin: 0 !important;
	padding: calc(100% / 5) !important;
	border: var(--qty-border-size) solid var(--qty-border-color);
	border-radius: 0;
	background: var(--qty-btn-bg);
	box-shadow: none;
	color: var(--qty-btn-color);
	font: inherit;
	font-size: 1em;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	outline: none !important;
}

.wa-pa__qty-btn:first-child {
	border-radius: var(--qty-radius) 0 0 var(--qty-radius);
	border-right-width: 0;
}

.wa-pa__qty-btn:last-child {
	border-radius: 0 var(--qty-radius) var(--qty-radius) 0;
	border-left-width: 0;
}

.wa-pa__qty-btn > span {
	font-size: 125%;
}

.wa-pa__qty-btn:active {
	background: var(--qty-btn-bg);
	color: var(--qty-btn-color-hover);
}

@media (hover: hover) {
	.wa-pa__qty-btn {
		transition: all 300ms ease-in-out;
	}

	.wa-pa__qty-btn:hover,
	.wa-pa__qty-btn:focus {
		background: var(--qty-btn-bg);
		color: var(--qty-btn-color-hover);
	}
}

/* Klávesnica: React zvýrazní fokus len farbou; viditeľný obrys pridávame iba pri :focus-visible */
.wa-pa__qty-btn:focus-visible {
	color: var(--qty-btn-color-hover);
}

.wa-pa__qty[aria-disabled="true"] .wa-pa__qty-btn,
.wa-pa__qty[aria-disabled="true"] .wa-pa__qty-input {
	cursor: not-allowed;
}

.wa-pa__qty-field {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0;
	padding: calc(100% / 8);
	border-top: var(--qty-border-size) solid var(--qty-border-color);
	border-bottom: var(--qty-border-size) solid var(--qty-border-color);
	border-left: none;
	border-right: none;
	border-radius: 0;
	background: var(--qty-btn-bg);
	color: var(--qty-btn-color);
	text-align: center;
}

.wa-pa__qty-input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 1 1 0%;
	min-width: 0;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0.375rem;
	background: var(--qty-btn-bg) !important;
	box-shadow: none !important;
	color: #000;
	font: inherit;
	font-size: 1em;
	line-height: 1 !important;
	text-align: center;
	user-select: none;
	outline: none !important;
}

.wa-pa__qty-field:focus-within {
	border-color: var(--qty-border-color);
}

/* Fokus v poli: React ho nezvýrazňuje; pri klávesnici sa zafarbí číslo */
.wa-pa__qty-input:focus-visible {
	color: var(--qty-btn-color-hover);
}

/*
 * „Vložiť do košíka“ (ecommerce AddToCartButton + téma variant primary).
 * Pod 475 px len ikona (text je v aria-label), od 475 px šírka 50 %.
 */
.wa-pa__add-to-cart {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0%;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0 0 0 auto;
	padding: 0.5em 1em;
	border: none;
	border-radius: 0.325em;
	background: linear-gradient(260deg, rgb(0, 174, 239) -80%, rgb(236, 0, 140) 105%);
	background-position: 75% center;
	background-size: 125%;
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow 250ms ease-in-out, background-position-x 250ms ease-in-out, opacity 250ms ease-in-out;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

@media screen and (min-width: 29.6875em) {
	.wa-pa__add-to-cart {
		flex: 0 0 50%;
	}
}

@media screen and (min-width: 62em) {
	.wa-pa__add-to-cart {
		font-size: 2rem;
	}
}

.wa-pa__add-to-cart:not([aria-disabled="true"]):hover {
	background-position: 0% center;
	box-shadow: rgba(0, 0, 0, 0.05) 0 0.25em 0.5em;
	color: #fff;
}

.wa-pa__add-to-cart:focus {
	outline: none;
}

.wa-pa__add-to-cart:focus-visible {
	outline: 2px solid var(--wa-pa-price-color);
	outline-offset: 2px;
}

.wa-pa__add-to-cart[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.wa-pa__add-to-cart-content {
	display: flex;
	align-items: center;
}

.wa-pa__add-to-cart-icon {
	display: inline-block;
	flex-shrink: 0;
	align-self: center;
	width: 1.25em;
	height: 1.25em;
	margin-inline-end: 0.5rem;
	line-height: 1em;
	color: currentColor;
	vertical-align: middle;
}

.wa-pa__add-to-cart-label {
	display: none;
}

@media screen and (min-width: 29.6875em) {
	.wa-pa__add-to-cart-icon {
		width: 1em;
		height: 1em;
	}

	.wa-pa__add-to-cart-label {
		display: block;
	}
}

/* Načítavanie (Chakra Button isLoading): spinner v strede, obsah neviditeľný, rozmer tlačidla sa nemení */
.wa-pa__add-to-cart-spinner {
	display: none;
	position: absolute;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 99999px;
	animation: wa-pa-spin 0.45s linear infinite;
}

.wa-pa__add-to-cart[aria-busy="true"] .wa-pa__add-to-cart-spinner {
	display: inline-block;
}

.wa-pa__add-to-cart[aria-busy="true"] .wa-pa__add-to-cart-content {
	opacity: 0;
}

@keyframes wa-pa-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-pa__add-to-cart-spinner {
		animation-duration: 1.5s;
	}
}

/* Hlásenie pre čítačky obrazovky (mimo flex toku, nezaberá gap) */
.wa-pa__purchase-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Blok nedostupnosti: InjectionZone je Box bez vlastných štýlov; ostatné štýly prídu z témy (<style> v šablóne) */
.wa-pa__unavailable {
	display: block;
}