/**
 * Hero block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 */

.sws-hero {
	container: sws-hero / inline-size;
	background: #FBF7F1;
	color: #241E1A;
}

.sws-hero__inner {
	max-width: 73.75rem;
	margin-inline: auto;
	padding: 2rem 1rem 0;
	display: grid;
	gap: 1.75rem;
}

/* Badges */

.sws-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.sws-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem 0.875rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
}

.sws-hero__badge--green {
	background: #EDF1E8;
	color: #4E6B4A;
}

.sws-hero__badge--peach {
	background: #FBEDE4;
	color: #C2542B;
}

/* Heading + lead */

.sws-hero__heading {
	margin: 1.25rem 0 0;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.sws-hero__lead {
	margin: 1rem 0 0;
	max-width: 35rem;
	font-size: 1rem;
	line-height: 1.55;
	color: #5B5049;
	text-wrap: pretty;
}

/* Advantage chips. Mobile: two chips share one row, the third one is dropped.
   Desktop: all three in one row, each on a single line. */

.sws-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.625rem 0 0;
	padding: 0;
	list-style: none;
}

.sws-hero__chip {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: #FFFFFF;
	border: 1px solid #EADFD1;
	border-radius: 1rem;
}

/* Restored at the desktop breakpoint below. */
.sws-hero__chip:nth-child(n+3) {
	display: none;
}

.sws-hero__chip-media {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.sws-hero__chip-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sws-hero__chip-body {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.sws-hero__chip-title {
	display: block;
	font-weight: 700;
}

.sws-hero__chip-text {
	display: block;
	color: #6E635B;
}

/* Main image */

.sws-hero__media {
	margin-top: 1.5rem;
	padding: 1.125rem;
	background: #FFFFFF;
	border: 1px solid #EADFD1;
	border-radius: 1.5rem;
	box-shadow: 0 24px 48px -32px rgba(38, 32, 28, .35);
}

.sws-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.875rem;
	background: #F6EFE4;
}

/* Sale card */

.sws-hero__card {
	background: #FFFFFF;
	border: 1px solid #EADFD1;
	border-radius: 1.625rem;
	box-shadow: 0 30px 60px -34px rgba(38, 32, 28, .4);
	overflow: hidden;
	/*
	 * Parks below whatever the header pins, not at a number that was measured
	 * once: from 1024px up that is the topbar and the header row together, and
	 * a literal here would tuck the card under them.
	 */
	position: sticky;
	top: calc( var( --sws-header-h ) + 1rem );
}

.sws-hero__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.375rem 1.625rem;
	background: #26201C;
	color: #FFFFFF;
}

.sws-hero__card-title {
	display: block;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
}

.sws-hero__card-subtitle {
	display: block;
	margin-top: 0.1875rem;
	font-size: 0.84375rem;
	color: #C9BDB2;
}

/*
 * Client's edit #5: the discount plate must read as the loudest element in the
 * card — larger type than the mockup plus a lift shadow.
 */
.sws-hero__discount {
	flex: none;
	text-align: center;
	padding: 0.625rem 1rem;
	border-radius: 0.875rem;
	background: #C2542B;
	box-shadow: 0 10px 22px -10px rgba(194, 84, 43, .9);
	font-family: Nunito, system-ui, sans-serif;
}

.sws-hero__discount-value {
	display: block;
	font-weight: 900;
	font-size: 1.0625rem;
	line-height: 1.15;
}

.sws-hero__discount-unit {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.sws-hero__card-body {
	padding: 1.5rem 1.625rem 1.625rem;
}

/* Gift plate — also reinforced per the client's edit #5. */

.sws-hero__gift {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	margin: 0;
	padding: 0.9375rem;
	border: 1px solid #C6D2C0;
	border-radius: 1rem;
	background: #EDF1E8;
}

.sws-hero__gift-label {
	flex: none;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: .03em;
	color: #C2371C;
}

.sws-hero__gift-body {
	flex: 1;
	min-width: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.sws-hero__gift-title {
	display: block;
	color: #3E5A3A;
}

.sws-hero__gift-text {
	display: block;
	color: #5E6E59;
}

/*
 * Client's edit, 03.08.2026: show what the gifts actually look like. Pictures
 * only - the plate above carries the wording and the promo-gifts section further
 * down carries names and prices. A strip under the plate rather than inside it,
 * as the client asked.
 *
 * grid-auto-flow: column gives as many equal columns as there are pictures, so
 * three gifts fill the width instead of leaving a hole where the fourth was.
 *
 * Fixed tile height, not a height cap on the image: sources have arrived in both
 * portrait and square crops, and letting each set its own height would give a
 * ragged strip. The theme has no global box-sizing (see the root style.css), so
 * the tile measures 3.25rem of content plus its padding. The height is what
 * keeps the second row cheap: it adds ~70px to a card that is sticky.
 *
 * The sand tile is what anchors the cutouts - every gift PNG has a transparent
 * background and the card behind them is white.
 */
.sws-hero__gift-images {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/*
 * Client's edit, 12.08.2026: five gifts, three on top and two centred below.
 * :has() asks the strip how many pictures it holds, so one to four keep the
 * single row above and only five switch layout - the field is capped at five.
 * Six equal tracks with every tile spanning two give three per row; pinning the
 * fourth tile to track 2 lets the fifth follow it into track 4, and the half
 * tile left over on each side is what centres the pair. Without :has() the
 * strip falls back to one row of five - tighter, but not broken.
 *
 * The tracks are capped rather than 1fr because the picture inside is bound by
 * the tile height, not its width: on the single-column layout the card runs the
 * full width and 1fr tracks stretched each tile to 217px around a 52px cutout.
 * 3.5rem is the track the desktop card already produces, so capping there
 * changes nothing above 782px and nothing on a phone (where the tracks shrink
 * below the cap anyway) - it only stops the tablet from spreading. The row then
 * needs justify-content to stay centred once the tracks stop eating the slack.
 */
.sws-hero__gift-images:has( > :nth-child(5) ) {
	grid-auto-flow: row;
	grid-template-columns: repeat(6, minmax(0, 3.5rem));
	justify-content: center;
}

.sws-hero__gift-images:has( > :nth-child(5) ) > .sws-hero__gift-image {
	grid-column: span 2;
}

.sws-hero__gift-images:has( > :nth-child(5) ) > .sws-hero__gift-image:nth-child(4) {
	grid-column: 2 / span 2;
}

/*
 * A button since 12.08.2026 - the tile opens the picture full size, and a
 * control has to answer the keyboard. Everything below is the plain tile the
 * span used to be, plus the reset a button needs; the theme has no global
 * box-sizing, so border-box is set here or the padding would break the height.
 */
.sws-hero__gift-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 3.875rem;
	padding: 0.3125rem;
	border: 0;
	background: #FBF7F1;
	border-radius: 0.625rem;
	cursor: zoom-in;
}

.sws-hero__gift-image:hover {
	background: #F4EADB;
}

.sws-hero__gift-image:focus-visible {
	outline: 2px solid #C2542B;
	outline-offset: 2px;
}

/*
 * imagequeue wraps every <img> in <picture>. That wrapper has no height of its
 * own, so a percentage height on the image inside would not resolve and the
 * picture would render at natural size - the failure that broke the products
 * gallery twice. Size the wrapper too and let object-fit letterbox. With the
 * plugin off the <img> is the flex item instead and the same rules apply to it.
 */
.sws-hero__gift-image > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.sws-hero__gift-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Price rows */

.sws-hero__prices {
	display: grid;
	gap: 0.5rem;
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The row is two labels, not prose, so it takes a tight line-height of its own
 * instead of inheriting the body's reading one. That inherited value is what
 * made the row 98px tall on a 360px phone: measured on the live site, the three
 * labels need 248px against 240px of room there, so every one of them broke -
 * "4 050" over "грн". nowrap on the labels forbids that break and flex-wrap
 * moves the whole price group to a second line instead, still right-aligned via
 * the auto margin. Same row, 77px. Desktop has 70px of slack and never wraps;
 * it only loses the dead leading (63px -> 54px per row).
 */
.sws-hero__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding: 0.8125rem 1rem;
	border: 1px solid #EADFD1;
	border-radius: 0.875rem;
	line-height: 1.2;
}

/*
 * Client's edit, 03.08.2026: "12 літрів" on its own did not say what is being
 * sold. The outline is lifted from the site logo (attachment 104) into
 * img/autoclave.svg and painted through a mask: the file carries the shape, the
 * colour comes from the theme - the same trick as the topbar clock and pin. The
 * mask sits on ::before and not on the element itself, because masking the
 * element would mask its text with it. :not(:empty) keeps a row with no volume
 * from rendering a lone icon. inline-flex is required: an inline box ignores
 * the width and height of its ::before.
 */
.sws-hero__price-volume {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.sws-hero__price-volume:not(:empty)::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.1875rem;
	background-color: #C2542B;
	-webkit-mask-image: url("../../img/autoclave.svg");
	mask-image: url("../../img/autoclave.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sws-hero__price-values {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-left: auto;
}

.sws-hero__price-old {
	color: #A99C90;
	font-size: 0.875rem;
	white-space: nowrap;
}

.sws-hero__price-now {
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.sws-hero__stock {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	color: #6E635B;
}

.sws-hero__stock::before {
	content: "";
	flex: none;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 999px;
	background: #C2542B;
}

.sws-hero__button {
	width: 100%;
	margin-top: 1.125rem;
	padding: 1rem;
	border: 0;
	border-radius: 0.875rem;
	background: #C2542B;
	color: #FFFFFF;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.0625rem;
	cursor: pointer;
	box-shadow: 0 14px 28px -14px rgba(194, 84, 43, .8);
}

.sws-hero__button:hover,
.sws-hero__button:focus-visible {
	background: #A8441F;
}

.sws-hero__privacy {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: #8C8078;
	text-align: center;
}

/* Desktop. Measures the block, not the window (matches WP's 782px breakpoint). */
@container sws-hero (min-width: 782px) {

	.sws-hero__inner {
		padding: 3.5rem 2rem 0;
		grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
		gap: 2.75rem;
		align-items: start;
	}

	.sws-hero__heading {
		font-size: 2.3125rem;
	}

	.sws-hero__lead {
		font-size: 1.03125rem;
	}

	.sws-hero__chips {
		gap: 0.625rem;
	}

	.sws-hero__chip {
		flex: none;
		flex-wrap: nowrap;
		white-space: nowrap;
		gap: 0.6875rem;
		padding: 0.6875rem 1rem 0.6875rem 0.75rem;
	}

	.sws-hero__chip:nth-child(n+3) {
		display: flex;
	}

	.sws-hero__chip-media {
		width: 1.875rem;
		height: 1.875rem;
	}

	.sws-hero__chip-body {
		font-size: 0.84375rem;
		line-height: 1.35;
	}

	.sws-hero__media {
		margin-top: 2.125rem;
	}
}