/* =========================================================
   Dlaczego Solofit

   Built the same way as "Dla kogo" (snippet 10277). The
   section asks one question, and the reasons are the
   answers: whole icons in a row under a thin rail of light.
   Picking one lights an angular lamp over it, its outline
   fills with solid yellow that lifts out of the outline, and
   the readout above the row finishes the lead's sentence for
   that reason.

   The reasons are native radio buttons: keyboard, screen
   readers and touch all work without any script. The lamp
   hangs off `.sfw__radio:checked + .sfw__lbl`; the readout
   follows :has(), with a class set by script.js as a separate
   fallback. With neither, the section falls back to a plain
   list with every description under its icon.

   A reason with a link is not a choice but a button, drawn
   apart from the rest: on the home page, Rezerwacja online
   leads to the calendar.

   Up to nine reasons sit in one row from 1200px, in two rows
   on tablets, and three to a row on phones.
   ========================================================= */

.sfw {
	--sfw-bg: var(--e-gv-35cef91, #0D0D0D);
	--sfw-text: var(--e-gv-e561443, #f2f0eb);
	--sfw-accent: var(--e-gv-bdd69cf, #F2B705);
	--sfw-muted: var(--e-gv-17a1878, #8a8a85);
	--sfw-head: var(--e-gv-663f235, "Chakra Petch");
	--sfw-body: var(--e-gv-5a42bf5, "Barlow");

	--sfw-hair: rgba(242, 240, 235, .12);
	--sfw-on: var(--sfw-accent);
	--sfw-lbl: rgba(242, 240, 235, .62);
	--sfw-ico: 56px;
	--sfw-lift: 3px;
	--sfw-bar: 32px;
	--sfw-pt: 12px;
	--sfw-ease: cubic-bezier(.2, .8, .2, 1);

	/* The screen height in pixels, fixed while the page is open (snippet
	   10385), so a phone's browser bars never resize the section. */
	--sfw-screen: var(--sf-screen, 820px);

	/* A full screen, like its neighbours; min-height so it grows rather
	   than clips. */
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--sfw-screen);
	background: var(--sfw-bg);
	color: var(--sfw-text);
	-webkit-tap-highlight-color: transparent;
}

@media (orientation: landscape) and (max-height: 560px) {
	.sfw {
		min-height: 0;
	}
}

.sfw *,
.sfw *::before,
.sfw *::after {
	box-sizing: border-box;
}

.sfw ::selection {
	background: rgba(242, 183, 5, .26);
	color: var(--sfw-text);
}

.sfw__inner {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 4rem 1.15rem;
}

/* ---------- head ---------- */

.sfw__top {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sfw__head {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	max-width: 36rem;
}

.sfw__eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--sfw-body), sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sfw-muted);
}

.sfw__dot {
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--sfw-accent);
}

.sfw__title {
	margin: 0;
	font-family: var(--sfw-head), sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(2.1rem, 8.8vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sfw-text);
	text-wrap: balance;
}

.sfw__title em {
	font-style: italic;
	color: var(--sfw-accent);
}

.sfw__lead {
	max-width: 34rem;
	margin: 0;
	font-family: var(--sfw-body), sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(242, 240, 235, .76);
}

.sfw__colon {
	font-family: var(--sfw-head), sans-serif;
	font-weight: 700;
	color: var(--sfw-on);
}

/* ---------- readout ----------
   Every reason's text is stacked in one grid cell, so the box is always as
   tall as the tallest one and switching never moves anything below it. */

.sfw__readout {
	position: relative;
	display: grid;
	padding-top: 12px;
}

.sfw__readout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--sfw-bar);
	height: 3px;
	background: var(--sfw-on);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
}

.sfw__say {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

.sfw__say-t {
	margin: 0 0 .375rem;
	font-family: var(--sfw-head), sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--sfw-text);
	text-wrap: balance;
}

.sfw__say-d {
	max-width: 38ch;
	margin: 0;
	font-family: var(--sfw-body), sans-serif;
	font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem);
	line-height: 1.5;
	color: rgba(242, 240, 235, .88);
	text-wrap: pretty;
}

@supports selector(:has(*)) {
	.sfw:has(.sfw__opt:nth-child(1) > .sfw__radio:checked) .sfw__say:nth-child(1),
	.sfw:has(.sfw__opt:nth-child(2) > .sfw__radio:checked) .sfw__say:nth-child(2),
	.sfw:has(.sfw__opt:nth-child(3) > .sfw__radio:checked) .sfw__say:nth-child(3),
	.sfw:has(.sfw__opt:nth-child(4) > .sfw__radio:checked) .sfw__say:nth-child(4),
	.sfw:has(.sfw__opt:nth-child(5) > .sfw__radio:checked) .sfw__say:nth-child(5),
	.sfw:has(.sfw__opt:nth-child(6) > .sfw__radio:checked) .sfw__say:nth-child(6),
	.sfw:has(.sfw__opt:nth-child(7) > .sfw__radio:checked) .sfw__say:nth-child(7),
	.sfw:has(.sfw__opt:nth-child(8) > .sfw__radio:checked) .sfw__say:nth-child(8),
	.sfw:has(.sfw__opt:nth-child(9) > .sfw__radio:checked) .sfw__say:nth-child(9),
	.sfw:has(.sfw__opt:nth-child(10) > .sfw__radio:checked) .sfw__say:nth-child(10) {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Kept apart from the list above on purpose: a browser that does not know
   :has() drops that whole list, and this rule has to survive it. */
.sfw--js .sfw__say.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---------- the picker ----------
   Scoped with extra weight so the theme's form styles cannot reach the
   fieldset, legend, label or radio. */

.sfw .sfw__pick {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sfw .sfw__ask {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: 1.3;
	color: inherit;
}

.sfw__ask-q {
	font-family: var(--sfw-head), sans-serif;
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sfw-text);
}

.sfw__ask-hint {
	font-family: var(--sfw-body), sans-serif;
	font-size: .875rem;
	color: rgba(242, 240, 235, .55);
}

.sfw__opts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: .75rem;
	align-items: start;
}

.sfw__opt {
	position: relative;
	min-width: 0;
	touch-action: manipulation;
}

/* The whole cell is the radio: it sits over the option, invisible. */
.sfw .sfw__opt > input.sfw__radio[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.sfw .sfw__lbl {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: var(--sfw-pt) .25rem .5rem;
	border-top: 1px solid var(--sfw-hair);
	text-align: center;
	font-size: inherit;
	line-height: inherit;
	color: var(--sfw-lbl);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.sfw__name {
	position: relative;
	z-index: 1;
	max-width: 100%;
	font-family: var(--sfw-head), sans-serif;
	font-weight: 600;
	font-size: clamp(.875rem, 3.85vw, .9375rem);
	line-height: 1.25;
	color: inherit;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* The lamp: a beam falling from a short bar on the rail. It stops just below
   the icon and never reaches the name. */
.sfw__lbl::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: min(76%, calc(var(--sfw-ico) * 1.7));
	height: calc(var(--sfw-pt) + var(--sfw-ico) + 2px);
	transform: translateX(-50%);
	clip-path: polygon(calc(50% - var(--sfw-bar) / 2) 0, calc(50% + var(--sfw-bar) / 2) 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
	background:
		radial-gradient(50% 12% at 50% 94%, rgba(242, 183, 5, .16), rgba(242, 183, 5, 0)),
		linear-gradient(rgba(242, 183, 5, .2), rgba(242, 183, 5, 0) 88%);
	opacity: 0;
	pointer-events: none;
}

.sfw__lbl::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -1px;
	left: 50%;
	width: var(--sfw-bar);
	height: 3px;
	margin-left: calc(var(--sfw-bar) / -2);
	background: var(--sfw-on);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
	transform: scaleX(0);
}

/* ---------- icons ----------
   Two copies of each icon, whole, in a fixed square. The echo is the icon's
   outline and never moves; the face is the solid shape, shown only for the
   chosen reason, lifted up and right along 45 degrees out of its own
   outline so a sliver of outline reads as depth.

   The echo is stroked in a solid colour and dimmed as a whole with opacity.
   The uploaded icons contain some shapes twice, and a translucent stroke
   would add up where those overlap. */

.sfw__ico {
	position: relative;
	z-index: 1;
	flex: none;
	display: block;
	width: var(--sfw-ico);
	height: var(--sfw-ico);
}

.sfw__ico::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: radial-gradient(closest-side, rgba(242, 183, 5, .3), rgba(242, 183, 5, 0));
	opacity: 0;
}

.sfw__ico-echo,
.sfw__ico-face {
	position: absolute;
	inset: 0;
	display: block;
}

.sfw__ico .sf-ico {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sfw__ico-echo {
	--ico-ink: transparent;
	--ico-accent: transparent;
	--ico-paper: transparent;
	--ico-line: currentColor;
	--ico-line-w: 1.5px;
	color: var(--sfw-text);
	opacity: .42;
}

.sfw__ico-face {
	--ico-ink: currentColor;
	--ico-accent: currentColor;
	--ico-paper: currentColor;
	--ico-line: none;
	--ico-line-w: 0;
	color: var(--sfw-on);
	opacity: 0;
}

/* ---------- chosen ---------- */

.sfw__radio:checked + .sfw__lbl {
	color: var(--sfw-text);
}

.sfw__radio:checked + .sfw__lbl::before,
.sfw__radio:checked + .sfw__lbl .sfw__ico::before {
	opacity: 1;
}

.sfw__radio:checked + .sfw__lbl::after {
	transform: scaleX(1);
}

.sfw__radio:checked + .sfw__lbl .sfw__ico-echo {
	color: var(--sfw-on);
	opacity: .55;
}

.sfw__radio:checked + .sfw__lbl .sfw__ico-face {
	opacity: 1;
	transform: translate(var(--sfw-lift), calc(var(--sfw-lift) * -1));
}

/* Hover only brightens; it never chooses. */
@media (hover: hover) and (pointer: fine) {
	.sfw__opt:hover .sfw__lbl {
		color: var(--sfw-text);
	}

	.sfw__opt:hover .sfw__radio:not(:checked) + .sfw__lbl .sfw__ico-echo {
		opacity: .85;
	}
}

.sfw__radio:focus-visible + .sfw__lbl {
	outline: 2px solid var(--sfw-on);
	outline-offset: 4px;
	border-radius: 3px;
}

/* ---------- a reason that is a button ----------
   Not one of the choices: it leads somewhere, on the home page to the
   booking calendar. So it looks like neither a hovered reason (which only
   brightens) nor a chosen one (the lamp and the solid yellow icon): a
   framed panel standing on the rail, the icon dark on a solid yellow
   octagon, the name in yellow and a small call to action with an arrow. */

.sfw .sfw__go,
.sfw .sfw__go:hover,
.sfw .sfw__go:focus,
.sfw .sfw__go:active,
.sfw .sfw__go:visited {
	color: var(--sfw-text);
	text-decoration: none;
}

.sfw .sfw__go {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: calc(var(--sfw-pt) - 1px) .375rem .75rem;
	border: 1px solid rgba(242, 183, 5, .5);
	border-radius: 3px;
	background: linear-gradient(rgba(242, 183, 5, .13), rgba(242, 183, 5, .03) 75%);
	text-align: center;
}

.sfw__ico--go {
	background: var(--sfw-on);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.sfw__ico--go::before {
	display: none;
}

.sfw__ico--go .sfw__ico-face {
	inset: 21%;
	color: var(--sfw-bg);
	opacity: 1;
}

.sfw__go .sfw__name {
	color: var(--sfw-on);
}

.sfw__go-cta {
	display: block;
	max-width: 100%;
	font-family: var(--sfw-head), sans-serif;
	font-weight: 600;
	font-size: .625rem;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-wrap: balance;
	color: rgba(242, 240, 235, .8);
}

/* The last word and the arrow never part. */
.sfw__go-end {
	white-space: nowrap;
}

.sfw__go-cta .sfw__arrow {
	display: inline-block;
	width: .75rem;
	height: .75rem;
	margin-left: .35em;
	vertical-align: -.1em;
}

@media (hover: hover) and (pointer: fine) {
	.sfw .sfw__go:hover {
		border-color: var(--sfw-on);
		background: linear-gradient(rgba(242, 183, 5, .2), rgba(242, 183, 5, .06) 75%);
		box-shadow: 0 0 24px -6px rgba(242, 183, 5, .45);
	}

	.sfw .sfw__go:hover .sfw__go-cta {
		color: var(--sfw-text);
	}

	.sfw .sfw__go:hover .sfw__arrow {
		transform: translateX(3px);
	}
}

.sfw .sfw__go:focus-visible {
	outline: 2px solid var(--sfw-on);
	outline-offset: 4px;
}

/* ---------- link ----------
   The colour is pinned on every state: the theme's reset turns links navy on
   hover and on tap, and that rule outranks a single class. */

.sfw__more {
	margin: 0;
}

.sfw .sfw__link,
.sfw .sfw__link:hover,
.sfw .sfw__link:focus,
.sfw .sfw__link:active,
.sfw .sfw__link:visited {
	color: var(--sfw-on);
}

.sfw__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	font-family: var(--sfw-head), sans-serif;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.sfw__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 1.6rem;
	bottom: .6rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.sfw__arrow {
	width: 1rem;
	height: 1rem;
}

@media (hover: hover) {
	.sfw__link:hover::after {
		opacity: 1;
	}

	.sfw__link:hover .sfw__arrow {
		transform: translateX(3px);
	}
}

.sfw__link:focus-visible {
	outline: 2px solid var(--sfw-on);
	outline-offset: 4px;
	border-radius: 3px;
}

/* ---------- plain-list fallback ---------- */

.sfw__desc {
	display: none;
	margin: .25rem 0 0;
	font-family: var(--sfw-body), sans-serif;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(242, 240, 235, .74);
	text-align: center;
	text-wrap: pretty;
}

@supports not selector(:has(*)) {
	.sfw:not(.sfw--js) .sfw__readout {
		display: none;
	}

	.sfw:not(.sfw--js) .sfw__desc {
		display: block;
	}
}

@media print {
	.sfw__readout {
		display: none;
	}

	.sfw__desc {
		display: block;
	}

	.sfw__lbl::before,
	.sfw__ico::before {
		display: none;
	}
}

/* ---------- sizes ---------- */

@media (max-width: 359.98px) {
	.sfw__opts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.sfw__inner {
		padding-inline: 2rem;
	}

	.sfw__head,
	.sfw__readout {
		max-width: 64%;
	}
}

/* Tablets: two even rows. */
@media (min-width: 820px) {
	.sfw {
		--sfw-ico: 72px;
		--sfw-bar: 40px;
		--sfw-pt: 20px;
	}

	.sfw__opts {
		grid-template-columns: repeat(var(--sfw-cols-md, 4), minmax(0, 13rem));
		column-gap: clamp(1rem, 1.8vw, 1.5rem);
		row-gap: 1rem;
		margin-top: .875rem;
	}

	.sfw__name {
		font-size: .9375rem;
	}
}

@media (min-width: 1025px) {
	.sfw {
		--sfw-ico: clamp(84px, 6.6vw, 104px);
		--sfw-lift: 4px;
		--sfw-bar: 44px;
		--sfw-pt: 28px;
	}

	.sfw__inner {
		gap: 2.25rem;
		padding: clamp(4rem, calc(var(--sfw-screen) * .08), 6.5rem) 3rem;
	}

	.sfw__top {
		gap: 2rem;
	}

	.sfw__head {
		max-width: min(48rem, 60%);
	}

	.sfw__title {
		font-size: clamp(2.8rem, 4.2vw, 4rem);
	}

	.sfw__lead {
		font-size: 1.08rem;
	}

	.sfw__readout {
		max-width: min(40rem, 58%);
	}

	.sfw .sfw__lbl {
		gap: .875rem;
	}

	.sfw .sfw__go {
		gap: .875rem;
		padding-bottom: 1rem;
	}

	.sfw__name {
		font-size: 1rem;
	}

	.sfw__go-cta {
		font-size: .6875rem;
		letter-spacing: .14em;
	}
}

/* Wide screens: every reason in one row, sharing the full width. */
@media (min-width: 1200px) {
	.sfw__opts {
		grid-template-columns: repeat(var(--sfw-cols, 8), minmax(0, 1fr));
	}

	/* Nine in a row: the gaps close a little and the names stay at 15px
	   until there is room for 16, so the longest word, "Profesjonalny",
	   never breaks, even at 1200px. */
	.sfw--dense .sfw__opts {
		column-gap: clamp(.75rem, 1.1vw, 1.25rem);
	}

	.sfw--dense .sfw__name {
		font-size: clamp(.9375rem, 1.25vw, 1rem);
	}
}

/* ---------- motion ----------
   Only opacity, transform and colour ever move, and only when the visitor has
   not asked for less motion. */

@media (prefers-reduced-motion: no-preference) {
	.sfw .sfw__lbl {
		transition: color .18s ease;
	}

	.sfw__lbl::before,
	.sfw__ico::before {
		transition: opacity .24s ease;
	}

	.sfw__lbl::after {
		transition: transform .24s var(--sfw-ease);
	}

	.sfw__ico-echo {
		transition: color .18s ease, opacity .18s ease;
	}

	.sfw__ico-face {
		transition: opacity .16s ease-in, transform .2s ease-in;
	}

	.sfw__radio:checked + .sfw__lbl .sfw__ico-face {
		transition: opacity .24s ease .04s, transform .3s var(--sfw-ease) .04s;
	}

	.sfw .sfw__go {
		transition: border-color .2s ease, box-shadow .2s ease;
	}

	.sfw__go-cta {
		transition: color .2s ease;
	}

	.sfw__arrow {
		transition: transform .2s ease;
	}

	.sfw__link::after {
		transition: opacity .2s ease;
	}

	/* Leaving: fade out, then drop out of the accessibility tree. */
	.sfw__say {
		transition: opacity .16s ease-in, transform .16s ease-in, visibility 0s linear .16s;
	}

	/* Arriving: visible at once, then fade in. */
	.sfw--js .sfw__say.is-active {
		transition: opacity .24s var(--sfw-ease) .08s, transform .28s var(--sfw-ease) .08s, visibility 0s;
	}
}

@supports selector(:has(*)) {
	@media (prefers-reduced-motion: no-preference) {
		.sfw:has(.sfw__opt:nth-child(1) > .sfw__radio:checked) .sfw__say:nth-child(1),
		.sfw:has(.sfw__opt:nth-child(2) > .sfw__radio:checked) .sfw__say:nth-child(2),
		.sfw:has(.sfw__opt:nth-child(3) > .sfw__radio:checked) .sfw__say:nth-child(3),
		.sfw:has(.sfw__opt:nth-child(4) > .sfw__radio:checked) .sfw__say:nth-child(4),
		.sfw:has(.sfw__opt:nth-child(5) > .sfw__radio:checked) .sfw__say:nth-child(5),
		.sfw:has(.sfw__opt:nth-child(6) > .sfw__radio:checked) .sfw__say:nth-child(6),
		.sfw:has(.sfw__opt:nth-child(7) > .sfw__radio:checked) .sfw__say:nth-child(7),
		.sfw:has(.sfw__opt:nth-child(8) > .sfw__radio:checked) .sfw__say:nth-child(8),
		.sfw:has(.sfw__opt:nth-child(9) > .sfw__radio:checked) .sfw__say:nth-child(9),
		.sfw:has(.sfw__opt:nth-child(10) > .sfw__radio:checked) .sfw__say:nth-child(10) {
			transition: opacity .24s var(--sfw-ease) .08s, transform .28s var(--sfw-ease) .08s, visibility 0s;
		}
	}
}

/* ---------- forced colours ---------- */

@media (forced-colors: active) {
	.sfw__lbl::before,
	.sfw__ico::before {
		display: none;
	}

	.sfw__ico-echo {
		color: CanvasText;
		opacity: 1;
	}

	.sfw__ico-face,
	.sfw__radio:checked + .sfw__lbl .sfw__ico-echo {
		color: Highlight;
	}

	.sfw__lbl::after,
	.sfw__readout::before,
	.sfw__ico--go {
		forced-color-adjust: none;
		background: Highlight;
	}

	.sfw__ico--go .sfw__ico-face {
		color: HighlightText;
	}

	.sfw__radio:focus-visible + .sfw__lbl {
		outline-color: Highlight;
	}
}