/**
 * Toner karta — layout (React product-area/containers/Toners/index.tsx).
 * Základ písma karty je 16px (1em); 1rem = 10px. Breakpointy (efektívna Chakra téma = ecommerce):
 * xs 23.4375em (375 px), sm 29.6875em (475 px), md 48em (768 px), lg 62em (992 px).
 *
 * Grid: base 1 stĺpec, riadky „10em 1fr“ (jeden obrázok) / „auto 1fr“ (galéria), gap 2em;
 * md: stĺpce minmax(5em, 10em) | minmax(12.5em, 1fr), lg: minmax(10em, 20em) | minmax(12.5em, 1fr).
 */
.wa-pa__toner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 10em 1fr;
	align-items: center;
	gap: 2em;
}

.wa-pa__toner--gallery {
	grid-template-rows: auto 1fr;
	align-items: stretch;
}

.wa-pa__toner-media {
	position: relative;
	min-width: 0;
	height: 100%; /* Chakra height {base: 100%, md: undefined} = 100% na všetkých šírkach */
}

.wa-pa__toner--gallery .wa-pa__toner-media {
	height: auto;
	align-self: start;
}

.wa-pa__toner-content {
	min-width: 0;
}

/* Jeden obrázok: Chakra Image w=full h=100% objectFit contain, objectPosition top center */
.wa-pa__toner-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: top center;
}

/* Štítky (DynamicArea labels.rectangle / labels.badge): absolútne v rohoch, štítky pod sebou */
.wa-pa__toner-labels {
	position: absolute;
	top: 0;
	z-index: 10;
}

.wa-pa__toner-labels--start {
	left: 0;
}

.wa-pa__toner-labels--end {
	right: 0;
}

.wa-pa__toner-labels .wa-product-labels {
	flex-direction: column;
	align-items: flex-start;
}

/* Galéria na mobile: hlavný obrázok s pevnou výškou 10em (React sx pre max-width 47.98em) */
@media (max-width: 767.98px) {
	.wa-pa--toners .wa-pa__gallery-stage {
		aspect-ratio: auto !important;
		height: 10em !important;
	}

	.wa-pa--toners .wa-pa__gallery-feature .splide__slide {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* Info: H1 1.35em / sm 1.65em / md 2.25em (React Toners), logo mt 1.2rem, krátky popis mt 1em */
.wa-pa--toners .wa-pa__title {
	font-size: 1.35em;
}

@media (min-width: 29.6875em) {
	.wa-pa--toners .wa-pa__title {
		font-size: 1.65em;
	}
}

@media (min-width: 768px) {
	.wa-pa__toner {
		grid-template-columns: minmax(5em, 10em) minmax(12.5em, 1fr);
		grid-template-rows: 1fr;
	}

	.wa-pa__toner--gallery {
		align-items: start;
	}

	.wa-pa--toners .wa-pa__title {
		font-size: 2.25em;
	}
}

@media (min-width: 992px) {
	.wa-pa__toner {
		grid-template-columns: minmax(10em, 20em) minmax(12.5em, 1fr);
	}
}

/* Logo je v Reacte inline obrázok (riadok s pätkou písma → +6 px pod logom), nie blok ako pri elektre */
.wa-pa--toners .wa-pa__brand {
	display: inline;
	vertical-align: baseline;
}

.wa-pa__toner-desc {
	margin-top: 1em;
}