/*
 * fajerwerkisklep — wygląd HTML-a silnika w skórce eTrade.
 * Markup generują: js/kl-custom.js (popupy magnific, komunikaty, loader), kl-plugins.js (validationEngine,
 * autocomplete, tipsy), partiale silnika (alert_*, paging, personalization, bundles) i treści z panelu
 * (popupy .pop_elem, m.in. weryfikacja wieku). Plików silnika nie zmieniamy — tylko CSS.
 * Klasy BS4/Kallyas (mt-5 = 5px, ml-10, float-right, btn-block…) tłumaczone wyłącznie w kontenerach silnika,
 * bo w Bootstrap 5 mt-5 to 3rem.
 */

/* ---------- Bootstrap 5 w kolorach marki ---------- */
.btn-primary {
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--fs-primary-dark);
	--bs-btn-hover-border-color: var(--fs-primary-dark);
	--bs-btn-active-bg: var(--fs-primary-dark);
	--bs-btn-active-border-color: var(--fs-primary-dark);
}
button.btn,
a.btn {
	width: auto;
}

/* ---------- przyciski z HTML-a silnika ---------- */
.btn-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	padding: 10px 20px;
	transition: all .3s ease-in-out;
}
.btn-element.btn-sm {
	padding: 8px 14px;
	font-size: 13px;
}
.btn-buy {
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-white);
}
.btn-buy:hover,
.btn-buy:focus {
	background-color: var(--fs-primary-dark);
	border-color: var(--fs-primary-dark);
	color: var(--color-white);
}
.btn-fullcolor {
	background-color: var(--color-lighter);
	border: 1px solid var(--color-border-light);
	color: var(--color-heading);
}
.btn-fullcolor:hover,
.btn-fullcolor:focus {
	background-color: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-white);
}
.btn-fullblack {
	background-color: var(--color-dark);
	border: 1px solid var(--color-dark);
	color: var(--color-white);
}
.btn-fullblack:hover {
	background-color: #000;
	color: var(--color-white);
}

/* ---------- popupy magnific (tf.messageBox i inne) ---------- */
.mfp-bg {
	background: #27272e;
	opacity: .7;
}
#pop_con.box-popup {
	float: none;
	margin: 0 auto;
	max-width: 520px;
	background: var(--color-white);
	border-radius: var(--radius-big);
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .12);
	position: relative;
	padding: 0;
}
#pop_con .box-popup-panel {
	padding: 40px;
	color: var(--color-body);
	font-size: var(--font-size-b1);
}
@media only screen and (max-width: 575px) {
	#pop_con .box-popup-panel {
		padding: 30px 20px;
	}
}
#pop_con .mfp-close {
	color: var(--color-heading);
	opacity: 1;
	font-size: 30px;
	top: 6px;
	right: 6px;
}
.mfp-content .box-popup-title,
.mfp-content .styl,
.mfp-content .m_title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: 20px;
	line-height: 1.3;
	text-transform: none;
}
#pop_con .box-popup-panel > :first-child,
#pop_con .box-popup-panel > div:first-child > :first-child {
	padding-right: 32px;
}
.mfp-content .fa-spinner {
	color: var(--color-primary);
	margin-top: 10px;
}
.mfp-content .button,
.mfp-content input[type="submit"],
.mfp-content button[type="submit"]:not(.mfp-close) {
	display: inline-block;
	width: auto;
	min-width: 160px;
	background-color: var(--color-primary);
	border: 0;
	border-radius: 6px;
	color: var(--color-white);
	font-weight: 700;
	padding: 14px 30px;
	line-height: 1.4;
	transition: all .3s ease-in-out;
}
.mfp-content .button:hover,
.mfp-content input[type="submit"]:hover,
.mfp-content button[type="submit"]:not(.mfp-close):hover {
	background-color: var(--fs-primary-dark);
}
.mfp-content .row {
	--bs-gutter-x: 20px;
}

/* pola formularzy w popupach (klasy Kallyas kl-fancy-form) */
.kl-fancy-form {
	position: relative;
	margin-bottom: 15px;
}
.kl-fancy-form .form-control,
.kl-fancy-form input[type="text"],
.kl-fancy-form input[type="email"],
.kl-fancy-form input[type="password"],
.kl-fancy-form textarea,
.kl-fancy-form select {
	height: 58px;
	line-height: 1.4;
	padding: 24px 16px 8px;
	font-size: 15px;
	border: var(--border-width) solid var(--color-border-light);
	border-radius: var(--radius);
	background: var(--color-white);
}
.kl-fancy-form textarea {
	height: auto;
	min-height: 110px;
}
/* lista rozwijana (np. wybór listy zakupów) — tło białe z kolorem nadpisuje strzałkę eTrade */
.kl-fancy-form select {
	padding-right: 40px;
	background: var(--color-white) url(../etrade/images/icons/arrow-icon.png) no-repeat right 16px center;
}
.kl-fancy-form .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: none;
}
.kl-fancy-form > .control-label,
.kl-fancy-form > .kl-fancy-form-label {
	position: absolute;
	top: 9px;
	left: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-body);
	pointer-events: none;
}
.kl-fancy-form[class*="col-"] > .control-label,
.kl-fancy-form[class*="col-"] > .kl-fancy-form-label {
	left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 18px);
}
.kl-fancy-form.focheck > .control-label,
.kl-fancy-form input[type="checkbox"] ~ .control-label {
	position: static;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 400;
	pointer-events: auto;
}

/* natywne checkboxy/radio w HTML-u silnika (eTrade rysuje je przez input + label, silnik ma inne układy) */
.mfp-content input[type="checkbox"],
.mfp-content input[type="radio"],
.pop_elem input[type="checkbox"],
.pop_elem input[type="radio"] {
	opacity: 1;
	position: static;
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	margin: 0 8px 0 0;
	accent-color: var(--color-primary);
}
/* natywne checkboxy zgód w oknach silnika (np. „Zarejestruj przez Facebook”) — większe niż domyślne 13 px */
.mfp-content input[type="checkbox"],
.pop_elem input[type="checkbox"] {
	width: 18px;
	height: 18px;
}
.mfp-content input[type="checkbox"] ~ label,
.mfp-content input[type="radio"] ~ label,
.pop_elem input[type="checkbox"] ~ label,
.pop_elem input[type="radio"] ~ label {
	padding-left: 0;
	font-size: 14px;
	font-weight: 400;
	display: inline;
}
.mfp-content input[type="checkbox"] ~ label::before,
.mfp-content input[type="checkbox"] ~ label::after,
.mfp-content input[type="radio"] ~ label::before,
.mfp-content input[type="radio"] ~ label::after,
.pop_elem input[type="checkbox"] ~ label::before,
.pop_elem input[type="checkbox"] ~ label::after,
.pop_elem input[type="radio"] ~ label::before,
.pop_elem input[type="radio"] ~ label::after {
	display: none;
}

/* zgody w popupach: checkbox w kolumnie, tekst obok, drobny dopisek RODO pod etykietą */
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: start;
}
/* miejsca w siatce przypięte: validationEngine (promptPosition inline) wstawia .formError zaraz za checkboxem,
   czyli przed etykietę — bez tego komunikat zajmował kolumnę etykiety, a etykieta spadała pod checkbox */
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) > input[type="checkbox"] {
	grid-row: 1;
	grid-column: 1;
	margin: 4px 0 0 !important;
}
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) > label {
	grid-row: 1;
	grid-column: 2;
	display: block;
	margin-left: 0 !important;
	line-height: 1.5;
}
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) > small {
	grid-column: 2;
}
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) > .formError {
	grid-row: 2;
	grid-column: 2;
	margin-top: 2px;
}
:is(.mfp-content, .pop_elem) .kl-fancy-form:has(> input[type="checkbox"]) > .fixclear {
	display: none;
}
:is(.mfp-content, .pop_elem) small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--color-body);
}
:is(.mfp-content, .pop_elem) :is(label, small, p, center) a:not(.axil-btn, .button, .btn) {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mfp-content .custom_pop > center {
	margin-bottom: 10px;
	font-weight: 600;
}

/* utility BS4/Kallyas w kontenerach silnika */
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .mt-5 { margin-top: 5px !important; }
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .mb-5 { margin-bottom: 5px !important; }
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .pt-5 { padding-top: 5px !important; }
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .pb-5 { padding-bottom: 5px !important; }
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .pl-5 { padding-left: 5px !important; }
:is(.mfp-content, .pop_elem, [data-ex-widget], .ex-personal-section) .pr-5 { padding-right: 5px !important; }
.ml-5 { margin-left: 5px !important; }
.mr-5 { margin-right: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.mr-10 { margin-right: 10px !important; }
.ml-15 { margin-left: 15px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.pl-20 { padding-left: 20px !important; }
.pr-20 { padding-right: 20px !important; }
.pt-40 { padding-top: 40px !important; }
.pb-15 { padding-bottom: 15px !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.btn-block { display: block; width: 100%; }
.font-weight-bold { font-weight: 700 !important; }
.clear {
	clear: both;
}
.fixclear::after {
	content: "";
	display: table;
	clear: both;
}
.tcolor {
	color: var(--color-primary);
}

/* ---------- ładowanie ---------- */
.loading_icon {
	display: none;
}
/* okienko tworzenia zamówienia: własny ciemny panel — biały tekst nie leży na treści strony pod półprzezroczystą nakładką */
.morder {
	margin: 0 auto;
	position: relative;
	width: 320px;
	max-width: calc(100vw - 32px);
	padding: 30px 24px;
	text-align: center;
	background: var(--color-dark);
	border-radius: var(--radius-big);
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .3);
}
.morder #loader {
	left: auto;
	top: auto;
	margin: 0 auto;
}
.morder .loading-info {
	color: var(--color-white);
	margin-top: 24px;
}
.morder .loading-info a,
.morder .loading-info a:hover {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#loader {
	z-index: 1000;
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 120px;
	height: 120px;
	margin: -60px 0 0 -60px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--color-primary);
	animation: fs-spin 2s linear infinite;
}
#loader::before,
#loader::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 3px solid transparent;
}
#loader::before {
	inset: 5px;
	border-top-color: var(--color-secondary);
	animation: fs-spin 3s linear infinite;
}
#loader::after {
	inset: 15px;
	border-top-color: var(--color-white);
	animation: fs-spin 1.5s linear infinite;
}
@keyframes fs-spin {
	to { transform: rotate(360deg); }
}

/* ---------- komunikaty (alert_success / alert_error) ---------- */
.alert {
	border-radius: var(--radius);
	font-size: var(--font-size-b2);
	position: relative;
}
.alert.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: inherit;
	opacity: .85;
}
.alert.alert-dismissible .close:hover {
	opacity: 1;
}

/* ---------- walidacja formularzy (validationEngine) ---------- */
.formError {
	z-index: 990;
}
.formError .formErrorContent {
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 12px;
	line-height: 1.4;
	border-radius: 4px;
	padding: 4px 10px;
	z-index: 991;
}
.formError.inline {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-top: 4px;
}
.formError.inline .formErrorContent {
	display: inline-block;
	background: none;
	color: var(--fs-primary-dark);
	padding: 0;
}
/* validationEngine ustawia inline opacity: .87 — przy niej czerwony tekst miał kontrast 4,02:1 */
.formError {
	opacity: 1 !important;
}
.formError .formErrorArrow {
	display: none;
}

/* ---------- podpowiedzi (tipsy) ---------- */
.tipsy {
	padding: 5px;
	font-size: 12px;
	position: absolute;
	z-index: 999999999;
}
.tipsy-inner {
	background-color: var(--color-dark);
	color: var(--color-white);
	padding: 6px 10px;
	max-width: 320px;
	text-align: center;
	border-radius: 4px;
}

/* ---------- autouzupełnianie wyszukiwarki ---------- */
/* plugin ustawia szerokość inline (szerokość pola) — na telefonie lista nie może wyjść poza ekran */
.autocomplete-suggestions {
	max-width: calc(100vw - 24px) !important;
	box-sizing: border-box;
	background: var(--color-white);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	box-shadow: var(--shadow-primary);
	overflow: auto;
	padding: 6px 0;
	margin-top: 6px;
	z-index: 9999 !important;
}
/* telefon: jedyne pole to okno wyszukiwania — lista na szerokość ekranu z marginesem 12 px */
@media only screen and (max-width: 575px) {
	.autocomplete-suggestions {
		left: 12px !important;
		width: calc(100vw - 24px) !important;
	}
}
.autocomplete-suggestion {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 8px 18px;
	font-size: 14px;
	color: var(--color-heading);
	cursor: pointer;
}
.autocomplete-selected {
	background: var(--fs-primary-soft);
	color: var(--color-primary);
}
.autocomplete-suggestions strong {
	font-weight: 700;
	color: var(--color-primary);
}

/* ---------- paginacja (paging.phtml) ---------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 30px 0;
}
.pagination li {
	margin: 0;
}
.pagination > li > a,
.pagination > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 6px;
	background: var(--color-lighter);
	color: var(--color-heading);
	font-weight: 500;
}
/* paging.phtml i infinite-scroll.js zagnieżdżają <span> w linkach */
.pagination > li > a span,
.pagination > li > span span {
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	color: inherit;
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li > a:hover {
	background: var(--color-primary);
	color: var(--color-white);
}
@media only screen and (max-width: 575px) {
	.pagination {
		gap: 6px;
	}
	.pagination > li > a,
	.pagination > li > span {
		min-width: 42px;
		height: 42px;
		padding: 0 8px;
	}
}

/* ---------- baner cookies ---------- */
.cowrapper {
	position: fixed;
	bottom: 30px;
	right: -5000px;
	max-width: 460px;
	width: calc(100% - 40px);
	background: var(--color-white);
	border-radius: var(--radius-big);
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .16);
	padding: 24px 28px;
	transition: right .3s ease, visibility 0s linear .3s;
	visibility: hidden;
	z-index: 9999;
}
/* kl-custom.js pokazuje / chowa baner klasą .show — schowany (poza ekranem) nie przyjmuje fokusu */
.cowrapper.show {
	right: 20px;
	visibility: visible;
	transition: right .3s ease, visibility 0s;
}
/* <i> silnika — bez font-style:normal przeglądarka pobierała na każdej stronie kursywę DM Sans (15 KB) */
.cowrapper .cobx {
	font-style: normal;
}
.cowrapper header .cobx-cookie::before {
	content: "\f564" / "";
	font-family: var(--font-awesome);
	font-style: normal;
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	color: var(--color-primary);
}
.cowrapper header {
	display: flex;
	align-items: center;
	column-gap: 12px;
}
.cowrapper header h2 {
	font-size: 20px;
	margin: 0;
	color: var(--color-heading);
}
.cowrapper .codata p {
	font-size: 14px;
	margin: 12px 0 0;
}
.cowrapper .codata p a {
	color: var(--color-primary);
}
.cowrapper .cobuttons {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.cowrapper .cobuttons .btn {
	min-height: 44px;
	border-radius: 6px;
	font-weight: 700;
	padding: 10px 22px;
	background: var(--color-lighter);
	border: 0;
	color: var(--color-heading);
}
.cowrapper .cobuttons .btn-success {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ---------- popupy z panelu (.pop_elem), w tym weryfikacja wieku ---------- */
.age-verification-popup {
	position: fixed;
	inset: 0;
	background: rgba(39, 39, 46, .85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	backdrop-filter: blur(3px);
}
.age-verification-content {
	background: var(--color-white);
	padding: 40px 30px;
	border-radius: var(--radius-big);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
	text-align: center;
	max-width: 450px;
	width: 90%;
}
.age-verification-icon {
	font-size: 48px;
	margin-bottom: 16px;
	display: block;
}
.age-verification-title {
	font-size: 26px;
	margin: 0 0 16px;
	color: var(--color-heading);
}
.age-verification-text {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 28px;
}
.age-verification-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.age-verification-buttons .age-verification-button {
	width: auto;
	border: 0;
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	min-width: 140px;
	transition: all .3s ease;
}
.age-verification-buttons .age-btn-yes {
	background: var(--color-primary);
	color: var(--color-white);
}
.age-verification-buttons .age-btn-yes:hover {
	background: var(--fs-primary-dark);
}
.age-verification-buttons .age-btn-no {
	background: var(--color-lighter);
	color: var(--color-heading);
}
@media only screen and (max-width: 480px) {
	.age-verification-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------- zestawy (bundles/*) i widgety personalizacji (personalization/*) — partiale silnika ---------- */
/* działają w opakowaniach z widoków: .fs-product-bundles (karta produktu bundles/_product, strona główna bundles/_top,
   koszyk bundles/_cart) i .fs-widget-area (karta produktu — widget „Zbliżone parametrami”, strona główna personalization/_recommended);
   tytuł bundli zamienia js/fs-theme.js (bundlesTitle) */
/* odstęp nad pierwszą sekcją daje kontener (.axil-section-gap.pb--0), każda sekcja ma tylko dolny odstęp — pusty widget znika bez śladu */
.fs-widget-area:has([data-ex-widget]:empty) {
	display: none;
}

/* „Często kupowane razem” (partial silnika bundles/_product.phtml + style z bundles/_assets.phtml) w wyglądzie eTrade */
.fs-product-bundles:empty {
	display: none;
}
.fs-product-bundles .ex-bundles-section.hg_section {
	padding-top: 80px !important;
	padding-bottom: 0 !important;
}
@media only screen and (max-width: 767px) {
	.fs-product-bundles .ex-bundles-section.hg_section {
		padding-top: 60px !important;
	}
}
/* kontener jak pozostałe sekcje eTrade (15 px), bez pl-20 / pl-5 z markupu Kallyas */
.fs-product-bundles .ex-bundles-section > .container,
.fs-product-bundles .ex-bundles-section .row > [class*="col-"] {
	padding-left: 15px !important;
	padding-right: 15px !important;
}
.fs-product-bundles .ex-bundles-section .kl-title-block {
	padding: 0 !important;
	margin-bottom: 30px;
}
/* tekst tytułu (wersaliki z emoji) zamienia js/fs-theme.js na zdanie z wyróżnikiem jak .section-title-wrapper */
.fs-product-bundles .ex-bundles-section .tbk__title {
	font-family: var(--font-secondary);
	font-size: var(--h2);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-heading);
	margin: 0;
}
.fs-product-bundles .fs-bundles-all {
	display: block;
	clear: both;
	padding-top: 10px;
	font-weight: 600;
	color: var(--color-primary);
}
.fs-product-bundles .ex-bundles-section .kl-title-block .title-highlighter {
	margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
	.fs-product-bundles .ex-bundles-section .tbk__title {
		font-size: 26px;
	}
}
.fs-product-bundles .ex-bundle-compact {
	gap: 20px;
	padding: 20px 24px;
	margin-bottom: 20px;
	border: 1px solid var(--color-border-light);
	border-radius: 6px;
	background: var(--color-white);
}
.fs-product-bundles .ex-bundle-compact-item {
	gap: 12px;
	padding: 6px;
	border-radius: 6px;
	max-width: 260px;
}
.fs-product-bundles .ex-bundle-compact-item:hover {
	background: var(--color-lighter);
}
.fs-product-bundles .ex-bundle-compact-img {
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 6px;
	object-fit: contain;
	background: var(--fs-img-bg);
}
.fs-product-bundles .ex-bundle-compact-name {
	font-size: 14px;
	line-height: 1.4;
	max-width: 140px;
	color: var(--color-heading);
}
.fs-product-bundles .ex-bundle-compact-price {
	font-size: 14px;
	color: var(--color-primary);
}
.fs-product-bundles .ex-bundle-compact-plus {
	font-size: 22px;
	color: var(--color-body);
}
.fs-product-bundles .ex-bundle-compact-sum {
	font-size: 15px;
	color: var(--color-body);
}
.fs-product-bundles .ex-bundle-compact-sum strong {
	font-family: var(--font-secondary);
	font-size: 20px;
	color: var(--color-primary);
}
.fs-product-bundles .ex-bundle-compact-btn.btn-fullcolor {
	padding: 12px 22px;
	font-size: 14px;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-white);
}
.fs-product-bundles .ex-bundle-compact-btn.btn-fullcolor:hover {
	background-color: var(--fs-primary-dark);
	color: var(--color-white);
}
@media only screen and (max-width: 768px) {
	.fs-product-bundles .ex-bundle-compact {
		padding: 16px;
	}
	.fs-product-bundles .ex-bundle-compact-products {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.fs-product-bundles .ex-bundle-compact-plus {
		align-self: center;
	}
	.fs-product-bundles .ex-bundle-compact-item {
		max-width: none;
	}
	.fs-product-bundles .ex-bundle-compact-name {
		max-width: none;
	}
	.fs-product-bundles .ex-bundle-compact-cta {
		border-top: 2px solid #F6F7FB;
		padding-top: 14px;
	}
}
/* koszyk: sekcja w kolumnie koszyka — odstęp nad nią daje fs-basket.css (.fs-basket .ex-bundles-section) */
.fs-product-bundles.fs-product-bundles-inline .ex-bundles-section.hg_section {
	padding-top: 0 !important;
}
.fs-product-bundles.fs-product-bundles-inline .ex-bundles-section .kl-title-block {
	padding-bottom: 0 !important;
}
/* widget personalizacji (personalization/_widget_loader.phtml, data-style="widget", HTML Kallyas z JS silnika)
   ułożony jak sekcja „Recently Viewed” z kafelkami eTrade */
.fs-widget-area [data-ex-widget] .shop-latest {
	margin: 0;
}
.fs-widget-area [data-ex-widget] .pplist > .nav {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
	padding-right: 120px;
}
.fs-widget-area [data-ex-widget] .pplist > .nav li {
	margin: 0;
}
.fs-widget-area [data-ex-widget] .pplist > .nav span.active {
	display: block;
	font-family: var(--font-secondary);
	font-size: var(--h2);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-heading);
	text-transform: lowercase;
}
.fs-widget-area [data-ex-widget] .pplist > .nav span.active::first-letter {
	text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
	.fs-widget-area [data-ex-widget] .pplist > .nav span.active {
		font-size: 26px;
	}
}
.fs-widget-area [data-ex-widget] .limited-offers-carousel {
	position: relative;
}
.fs-widget-area [data-ex-widget] .hgSlickNav {
	position: absolute;
	top: -84px;
	right: 0;
	display: flex;
	gap: 10px;
}
.fs-widget-area [data-ex-widget] .hgSlickNav-arr {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--color-lighter);
	cursor: pointer;
	transition: .3s;
}
/* .clearfix dodaje ::before/::after, które w układzie flex z gap przesuwały strzałki o 10 px */
.fs-widget-area [data-ex-widget] .hgSlickNav::before,
.fs-widget-area [data-ex-widget] .hgSlickNav::after {
	display: none;
}
/* strzałki jak w karuzelach eTrade (fs-theme.js: fas fa-arrow-left / fa-arrow-right) zamiast SVG z JS silnika */
.fs-widget-area [data-ex-widget] .hgSlickNav-arr::before {
	font-family: var(--font-awesome);
	font-weight: 900;
	font-size: 14px;
	color: var(--color-body);
	content: "\f061";
}
.fs-widget-area [data-ex-widget] .hgSlickNav-prev::before {
	content: "\f060";
}
.fs-widget-area [data-ex-widget] .hgSlickNav-arr:hover::before {
	color: var(--color-white);
}
.fs-widget-area [data-ex-widget] .hgSlickNav-arr svg {
	display: none;
}
.fs-widget-area [data-ex-widget] .hgSlickNav-arr:hover {
	background: var(--color-primary);
}
.fs-widget-area [data-ex-widget] .hg_limited_offers .slick-list {
	margin: 0 -15px;
}
.fs-widget-area [data-ex-widget] .hg_limited_offers .slick-slide {
	padding: 0 15px;
}
.fs-widget-area [data-ex-widget] .hg_limited_offers .slick-track {
	margin-left: 0;
}
.fs-widget-area [data-ex-widget] .product-list-item {
	position: relative;
}
.fs-widget-area [data-ex-widget] .product-list-item > a {
	display: block;
	color: inherit;
}
.fs-widget-area [data-ex-widget] .kw-prodimage {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 24px;
	background: var(--fs-img-bg);
}
.fs-widget-area [data-ex-widget] .kw-prodimage img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 4%;
	transition: transform .5s ease;
}
.fs-widget-area [data-ex-widget] .product-list-item:hover .kw-prodimage img {
	transform: scale(1.1);
}
.fs-widget-area [data-ex-widget] .kw-details-title {
	font-size: var(--font-size-b1);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-body);
	margin-bottom: 10px;
	min-height: 48px;
	transition: .3s;
}
.fs-widget-area [data-ex-widget] .product-list-item > a:hover .kw-details-title {
	color: var(--color-primary);
}
.fs-widget-area [data-ex-widget] .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
}
.fs-widget-area [data-ex-widget] .price ins,
.fs-widget-area [data-ex-widget] .price del {
	background: none;
	color: inherit;
}
.fs-widget-area [data-ex-widget] .price ins {
	text-decoration: none;
	font-family: var(--font-secondary);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-heading);
}
.fs-widget-area [data-ex-widget] .price del {
	font-family: var(--font-secondary);
	font-size: 20px;
	font-weight: 500;
	/* jak stara cena w kafelku (fs.css .old-price): --color-body bez przezroczystości */
	color: var(--color-body);
}
.fs-widget-area [data-ex-widget] .prompric_el {
	display: none;
}
.fs-widget-area [data-ex-widget] .hg_badge_container {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.fs-widget-area [data-ex-widget] .hg_badge_container span {
	line-height: 1;
	padding: 6px 10px 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-white);
	border-radius: 4px;
	background-color: var(--color-primary);
}
.fs-widget-area [data-ex-widget] .hg_badge_container .hg_badge_new {
	background-color: var(--color-dark);
}
/* przyciski nad dolną krawędzią zdjęcia, pokazywane po najechaniu — jak .product-hover-action kafelka eTrade */
.fs-widget-area [data-ex-widget] .kw-actions {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0 !important;
	padding: 0 0 15px !important;
	text-align: center !important;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: .5s;
	z-index: 2;
}
.fs-widget-area [data-ex-widget] .product-list-item:hover .kw-actions,
.fs-widget-area [data-ex-widget] .product-list-item:focus-within .kw-actions {
	padding-bottom: 30px !important;
	opacity: 1;
	visibility: visible;
	transition-delay: .2s;
}
/* z klawiatury (fokus na linku kafelka) przyciski od razu widoczne — inaczej Tab ominąłby je jako ukryte */
.fs-widget-area [data-ex-widget] .product-list-item:focus-within .kw-actions {
	transition: .5s, visibility 0s;
}
@media (hover: none) {
	.fs-widget-area [data-ex-widget] .kw-actions {
		opacity: 1;
		visibility: visible;
	}
}
.fs-widget-area [data-ex-widget] .kw-actions form,
.fs-widget-area [data-ex-widget] .kw-actions > a {
	pointer-events: auto;
}
.fs-widget-area [data-ex-widget] .kw-actions fieldset {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	border: 0;
	padding: 0;
	margin: 0;
}
.fs-widget-area [data-ex-widget] .kw-actions .btn-element {
	height: 40px;
	padding: 0 18px;
	margin: 0 !important;
	border: 0;
	border-radius: 4px;
	font-size: 14px;
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .06);
}
.fs-widget-area [data-ex-widget] .kw-actions .playmovie {
	background: var(--color-white);
	color: var(--color-heading);
}
.fs-widget-area [data-ex-widget] .kw-actions .playmovie:hover {
	background: var(--color-heading);
	color: var(--color-white);
}
/* widgety bez data-style (personalization/_recommended.phtml na stronie głównej): sekcja Kallyas hg_section z tytułem
   .kl-title-block — odstępy, kontener i tytuł jak w sekcjach eTrade strony głównej, strzałki jak w stylu „widget”;
   kilka widgetów w jednym opakowaniu (.fs-widget-stack) — pusty widget (bez danych) nie może ukryć pozostałych */
.fs-widget-area.fs-widget-stack:has([data-ex-widget]) {
	display: block;
}
.fs-widget-area [data-ex-widget] > .hg_section {
	padding: 80px 0 50px !important;
}
@media only screen and (max-width: 767px) {
	.fs-widget-area [data-ex-widget] > .hg_section {
		padding: 60px 0 30px !important;
	}
}
.fs-widget-area [data-ex-widget] > .hg_section > .container,
.fs-widget-area [data-ex-widget] > .hg_section .row > [class*="col-"] {
	padding-left: 15px !important;
	padding-right: 15px !important;
}
.fs-widget-area [data-ex-widget] > .hg_section .kl-title-block {
	padding: 0 120px 0 0 !important;
	margin-bottom: 40px;
}
.fs-widget-area [data-ex-widget] > .hg_section .tbk__title {
	float: none !important;
	margin: 0;
	font-family: var(--font-secondary);
	font-size: var(--h2);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-heading);
	text-transform: lowercase;
}
.fs-widget-area [data-ex-widget] > .hg_section .tbk__title::first-letter {
	text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
	.fs-widget-area [data-ex-widget] > .hg_section .tbk__title {
		font-size: 26px;
	}
}