/**
 * Košíková časť toner karty (React Toners/AddToCartArea.tsx + téma AddToCartWrapper/AddToCartButton,
 * ecommerce Product/Attributes, Attribute, Price, Availibility, DropdownSelect linkedProductsDropdownStyles).
 * 1rem = 10px, 1em = 16px. Breakpointy: sm 29.6875em (475 px), md 48em (768 px), lg 62em (992 px).
 *
 * Pod md: stĺpec (vlastnosti, varianta + cena, dostupnosť + množstvo/košík, nedostupný blok), gap 2.4rem.
 * Od md: grid „auto | 1fr“ — vlastnosti (riadky 1–3) | varianta + cena (riadok 1) / dostupnosť + akcie (riadky 2–3).
 */
.wa-pa__toner-cart {
	--wa-pa-pink-50: #FFF9FD;
	--wa-pa-purple-500: #6C5EC1;
	--wa-pa-stock-color-instock: #21A73F;
	--wa-pa-stock-color-outofstock: #B1241A;
	--wa-pa-stock-color-onbackorder: #FF7A00;
	--wa-pa-price-color: #00AEEF;
	--wa-pa-price-original: #9E9E9E;
	--wa-pa-purchase-text: #292929;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	column-gap: 2.8rem;
	margin-top: 1.5em;
	padding: 1.6rem;
	border: 0.25em solid transparent;
	border-radius: 0.625em;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
}

/* Variant primary (téma AddToCartWrapper baseStyle): ružové pozadie, gradientný rámik */
.wa-pa__toner-cart--primary {
	background: linear-gradient(var(--wa-pa-pink-50), var(--wa-pa-pink-50)) padding-box, linear-gradient(256deg, var(--wa-pa-purple-500) -20%, var(--wa-pa-pink-500) 140%) border-box;
}

/* Variant secondary: biele pozadie, sivý rámik */
.wa-pa__toner-cart--secondary {
	background: #fff;
	border-color: #D9D9D9;
}

@media (min-width: 768px) {
	.wa-pa__toner-cart {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		padding: 2.4rem;
	}
}

/* --- Vlastnosti (Flex wrapper + ProductAttributes grid) -------------------- */
.wa-pa__toner-props {
	display: flex;
	width: 100%;
	height: 100%;
	grid-area: 1 / 1 / span 3 / 1;
}

@media (min-width: 768px) {
	.wa-pa__toner-props {
		padding-right: 1.75em;
		border-right: 0.125em solid rgba(0, 0, 0, 0.1);
	}
}

.wa-pa__attrs {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-content: space-between;
	align-items: start;
	gap: 1em;
	width: 100%;
	height: fit-content;
}

@media (min-width: 29.6875em) {
	.wa-pa__attrs {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.wa-pa__attrs {
		grid-template-columns: 1fr;
	}
}

/* Attribute (showLabel): grid „1fr auto“, label = ikona + „Názov:“, hodnota 0.9em */
.wa-pa__attr {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1em;
	font-size: 1em;
}

.wa-pa__attr-label {
	display: flex;
	align-items: center;
	gap: 0.325em;
}

.wa-pa__icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	line-height: 1em;
	fill: currentColor;
	color: currentColor;
	vertical-align: middle;
}

.wa-pa__attr-icon {
	color: #333333;
}

.wa-pa__attr-name {
	font-size: 1em;
	font-weight: 600;
	color: var(--wa-pa-gray-900);
}

.wa-pa__attr-value {
	display: flex;
	align-items: center;
	font-size: 0.9em;
	color: var(--wa-pa-gray-900);
}

/* --- Varianta + cena -------------------------------------------------------- */
.wa-pa__toner-head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	grid-area: 1 / 2 / 1 / 2;
}

@media (min-width: 29.6875em) {
	.wa-pa__toner-head {
		flex-direction: row;
	}
}

.wa-pa__variants {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 100%;
	min-width: 0; /* react-select: hodnota v poli sa oreže (ellipsis), stĺpec sa zúži rovnako ako cena */
}

.wa-pa__variants-title {
	font-weight: 600;
}

/* Cena (ProductPrice: Flex w full, column, gap 0.15em, align base flex-start / sm flex-end; priceProps 1.65em / sm 2em) */
.wa-pa--toners .wa-pa__toner-cart .wa-pa__pricebox {
	flex: 0 1 auto;
	align-items: flex-start;
	width: 100%;
}

.wa-pa--toners .wa-pa__toner-cart .wa-pa__price {
	font-size: 1.65em;
}

/* Body bez pointsProps (React Toners): veľkosť písma karty */
.wa-pa--toners .wa-pa__toner-cart .wa-pa__points {
	font-size: 1em;
}

@media (min-width: 29.6875em) {
	.wa-pa--toners .wa-pa__toner-cart .wa-pa__pricebox {
		align-items: flex-end;
	}

	.wa-pa--toners .wa-pa__toner-cart .wa-pa__price {
		font-size: 2em;
	}
}

/* Dropdown „Zvoľte variantu“ (linkedProductsDropdownStyles): ružový rámik, oddeľovač, menu, zvolená možnosť */
.wa-pa__select--variants .wa-pa__select-control,
.wa-pa__select--variants .wa-pa__select-control:hover {
	border-color: var(--wa-pa-pink-500);
}

.wa-pa__select--variants .wa-pa__select-separator {
	border-left-color: var(--wa-pa-pink-500);
}

.wa-pa .wa-pa__select--variants .wa-pa__select-list {
	border-color: var(--wa-pa-pink-500);
	box-shadow: none;
}

.wa-pa .wa-pa__select--variants .wa-pa__select-option[aria-selected="true"],
.wa-pa .wa-pa__select--variants .wa-pa__select-option[aria-selected="true"]:hover {
	background: var(--wa-pa-pink-500);
	color: #fff;
}

.wa-pa__select--variants .wa-pa__select-control:has(.wa-pa__select-value:focus-visible) {
	border-color: var(--wa-pa-pink-500);
	box-shadow: 0 0 0 1px var(--wa-pa-pink-500);
}

/* --- Dostupnosť + množstvo / košík ------------------------------------------ */
.wa-pa__toner-buy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
	width: 100%;
	grid-area: 2 / 2 / 4 / 2;
}

.wa-pa__toner-buy--unavailable {
	grid-area: 2 / 2 / 2 / 2;
}

/* Grid „auto 1fr“, gap 3.125em, výška 3.125em (max 51.27px); od md flex-basis 75 % (v stĺpci sa zmenší ako v Reacte) */
.wa-pa__toner-actions {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 3.125em;
	width: 100%;
	height: 3.125em;
	max-height: 51.27px;
}

@media (min-width: 768px) {
	.wa-pa__toner-actions {
		flex-basis: 75%;
	}
}

.wa-pa--toners .wa-pa__toner-actions .wa-pa__add-to-cart {
	flex: 1;
	width: 100%;
	height: 100%;
	margin-left: auto;
	font-size: 1.1em;
	line-height: 1.25;
	white-space: normal; /* AddToCartButton cez __css nemá nowrap Chakra Buttonu → v úzkom stĺpci sa text zalomí */
}

@media (min-width: 768px) {
	.wa-pa--toners .wa-pa__toner-actions .wa-pa__add-to-cart {
		font-size: 1.15em;
	}
}

@media (min-width: 992px) {
	.wa-pa--toners .wa-pa__toner-actions .wa-pa__add-to-cart {
		font-size: 1.25em;
	}
}

/* AddToCartButton variant secondary (téma): sivé tlačidlo, tmavý text */
.wa-pa--toners .wa-pa__add-to-cart--secondary {
	padding: 0.325em 0.75em;
	background: #D9D9D9;
	color: #292929;
	transition: box-shadow 250ms ease-in-out, background 250ms ease-in-out, opacity 250ms ease-in-out;
}

.wa-pa--toners .wa-pa__add-to-cart--secondary:not([aria-disabled="true"]):hover {
	background: #D0D0D0;
	box-shadow: rgba(0, 0, 0, 0.05) 0 0.25em 0.5em;
	color: #292929;
}

.wa-pa--toners .wa-pa__toner-cart .wa-pa__unavailable {
	grid-area: 3 / 2;
}