/*
 * fajerwerkisklep — marka i układ na szablonie eTrade (etrade/css/style.min.css).
 * Kolory przez zmienne :root eTrade; ikony z pseudo-elementów (var(--font-awesome)) na Font Awesome Free (solid).
 * HTML generowany przez silnik (kl-custom.js, partiale) — w fs-engine.css.
 */

@font-face {
	font-family: "fs-fa";
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	src: url("../fonts/fontawesome6/webfonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fontawesome6/webfonts/fa-solid-900.ttf") format("truetype");
}

:root {
	--color-primary: #DC2F1A;
	--light-primary: var(--fs-primary-dark);
	--color-body: #6E6E6E;
	--color-secondary: #FF9A1F;
	--color-tertiary: #FFD7A8;
	--font-awesome: "fs-fa";
	--fs-primary-dark: #C5240F;
	--fs-primary-soft: #FDECEA;
	--fs-secondary-dark: #F08A0C;
	--fs-on-secondary: #27272E;
	--fs-secondary-text: #B45309;
	--fs-dark-text: #ACACAC;
	--fs-hero-bg: #F9F3EF;
	--fs-hero-dot: #8C8079;
	--fs-img-bg: #F7F7F7; /* tło zapieczone w plikach zdjęć produktów (images/background_fs.jpg) — kontener zdjęcia w tym samym kolorze, bez widocznej ramki */
}

/* biały tekst na pomarańczowym --color-secondary ma kontrast ok. 2:1 — na nim tekst ciemny */
a.axil-btn.btn-bg-secondary,
button.axil-btn.btn-bg-secondary,
a.axil-btn.btn-bg-secondary i,
button.axil-btn.btn-bg-secondary i {
	color: var(--fs-on-secondary);
}
.main-slider-content .subtitle,
.title-highlighter.highlighter-secondary {
	color: var(--fs-secondary-text);
}
.main-slider-content .subtitle i,
.title-highlighter.highlighter-secondary i {
	color: var(--fs-on-secondary);
}

/* eTrade ustawia font-weight na <i> (np. .axil-btn i) — w FA Free waga wybiera krój, więc ustalamy ją po klasie */
.fas,
.fa-solid,
.fa {
	font-weight: 900 !important;
}
.far,
.fa-regular {
	font-weight: 400 !important;
}

/* ---------- fokus klawiatury ---------- */
/* eTrade, Bootstrap i slick zerują outline (a:focus, input:focus, .slick-dots li button:focus) — html body podnosi
   specyficzność ponad ich reguły; obrys tylko przy fokusie z klawiatury (:focus-visible) */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	/* eTrade ma transition: all na polach i przyciskach — bez tego obrys przez ok. 0,4 s „dojeżdża” z grubej ramki w kolorze tekstu;
	   !important — reguły eTrade o wyższej specyficzności (np. linki stopki) */
	transition: none !important;
}
html body :is(.nav-link, .btn, .form-control, .form-select):focus-visible {
	box-shadow: none;
}
/* pola tekstowe: obrys na ramce pola (eTrade przy fokusie zmienia tylko kolor ramki) */
html body :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]), select, textarea):focus-visible {
	outline-offset: -2px;
}
html body :is(.form-control, .form-select):focus {
	border-color: var(--color-primary);
}
/* elementy na czerwonym tle — biały obrys wewnątrz */
html body :is(.axil-btn.btn-bg-primary, .btn-buy, .axil-product .cart-action li.select-option button:not(.notify_me), .axil-product .cart-action li.select-option a, .age-btn-yes, .cowrapper .btn-success, .back-to-top, .mfp-content .button, .mfp-content [type="submit"]):focus-visible {
	outline-color: var(--color-white);
	outline-offset: -4px;
}
/* czarny górny pasek i ciemna stopka: czerwony obrys na #292930 ma ok. 3,3:1 — biały */
html body :is(.axil-header-top, .footer-dark) :focus-visible {
	outline-color: var(--color-white);
}
/* checkbox / radio eTrade: input niewidoczny (opacity 0), pole rysuje label::before */
html body input:is([type="checkbox"], [type="radio"]):focus-visible ~ label::before {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	transition: none;
}

/* przejście do treści (pierwszy element strony) */
.fs-skip-link:not(:focus) {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.fs-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100001;
	padding: 12px 20px;
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-heading);
	font-weight: 700;
	box-shadow: var(--shadow-primary);
}

/* elementy schowane nie przyjmują fokusu: „Do góry” bez .show */
.back-to-top {
	transition: all .3s, visibility 0s linear .3s;
}
.back-to-top:not(.show) {
	visibility: hidden;
}
.back-to-top.show {
	transition: all .3s, visibility 0s;
}

/* ---------- logo (tymczasowe, tekstowe) ---------- */
.fs-logo {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .2px;
	color: var(--color-heading);
	white-space: nowrap;
}
.fs-logo span {
	color: var(--color-primary);
}
.fs-logo:hover {
	color: var(--color-heading);
}
@media only screen and (max-width: 1199px) {
	.fs-logo {
		font-size: 21px;
	}
}
@media only screen and (max-width: 575px) {
	.fs-logo {
		font-size: 19px;
	}
}
/* menu mobilne (panel 250 px): logo nie wchodzi pod przycisk zamknięcia */
.mobile-nav-brand .fs-logo {
	font-size: 15px;
}

/* ---------- czarny górny pasek (header-style-7: kampania po lewej, szybkie linki po prawej) ---------- */
/* eTrade: container-fluid z paddingiem 45 px — w fs .container jak treść strony */
.header-style-7 .axil-header-top {
	padding: 8px 0;
}
.header-style-7 .header-top-text p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 18px;
	row-gap: 2px;
	margin: 0;
	line-height: 1.5;
}
.header-style-7 .header-top-text p i {
	color: var(--color-tertiary);
}
.header-style-7 .header-top-text .fs-top-counter {
	font-weight: 700;
	color: var(--color-tertiary);
}
.header-style-7 .header-top-text #promoCountdown {
	color: var(--color-white);
	white-space: nowrap;
}
.header-style-7 .header-top-text #promoCountdown span {
	font-weight: 400;
	font-size: 12px;
	margin: 0 6px 0 2px;
	color: var(--color-tertiary);
}
.header-style-7 .header-top-text .free_available_sum {
	white-space: nowrap;
}
.header-style-7 .header-top-text a,
.header-style-7 .header-top-link .quick-link li a {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s;
}
.header-style-7 .header-top-text a:hover,
.header-style-7 .header-top-link .quick-link li a:hover {
	color: var(--color-white);
	text-decoration-color: currentColor;
}
.header-style-7 .header-top-link .quick-link li a i {
	color: var(--color-tertiary);
	margin-right: 4px;
}
/* cel dotyku ≥ 40 px bez podwyższania paska (ujemny margines znosi padding) */
.header-style-7 .header-top-link .quick-link li a {
	display: inline-block;
	padding: 9px 0;
	margin: -9px 0;
}
@media only screen and (max-width: 767px) {
	.header-style-7 .header-top-text p {
		justify-content: center;
		font-size: 13px;
	}
}
@media only screen and (max-width: 991px) {
	.header-style-7 .header-top-link .quick-link {
		margin: 0 -10px;
	}
	.header-style-7 .header-top-link .quick-link li {
		padding: 0 10px;
	}
}

/* bootstrap.min.css ustawia :root { scroll-behavior: smooth }, co blokuje $('html,body').animate({scrollTop})
   validationEngine — po błędzie walidacji strona nie przewijała do pierwszego pola z błędem */
:root {
	scroll-behavior: auto;
}

/* ---------- nagłówek (header-style-7 z index-7.html) ---------- */
/* biały pasek przykleja się u góry na każdej stronie (fs-theme.js stickyHeader) — kotwice i fokus nie chowają się pod nim */
html:has(> body.sticky-header) {
	scroll-padding-top: 100px;
}
/* eTrade: container-fluid z paddingiem 45 px — w fs .container jak treść strony; panel „Kategorie” na szerokość kontenera */
.header-style-7 .axil-mainmenu {
	padding: 14px 0;
}
.header-style-7 .axil-mainmenu .container {
	position: relative;
}
.header-style-7 .axil-mainmenu .header-navbar .header-main-nav {
	margin: 0 0 0 40px;
}
.header-style-7 .header-brand {
	flex-shrink: 0;
}
/* logo jako cel dotyku ≥ 40 px (pasek ma 44 px wysokości z ikon / pola wyszukiwarki, więc nie rośnie) */
.header-style-7 .header-brand .fs-logo {
	padding: 7px 0;
}
@media only screen and (max-width: 1199px) {
	.header-style-7 .header-brand .fs-logo {
		padding: 8px 0;
	}
}
.header-style-7 .mainmenu > li > a {
	padding: 12px 0;
	color: var(--color-heading);
}
.header-style-7 .mainmenu > li > a:hover {
	color: var(--fs-primary-dark);
}
/* ≥ 1200: menu w jednej linii, pole wyszukiwarki zajmuje resztę miejsca między menu a ikonami */
@media only screen and (min-width: 1200px) {
	.header-style-7 .axil-mainmenu .header-navbar .header-main-nav {
		flex: 0 0 auto;
		margin-right: 14px;
	}
	.header-style-7 .mainmenu {
		flex-wrap: nowrap;
		margin: 0 -12px;
	}
	.header-style-7 .mainmenu > li {
		margin: 0 12px;
	}
	.header-style-7 .header-action {
		flex: 1 1 auto;
		min-width: 0;
	}
	.header-style-7 .header-action > ul {
		justify-content: flex-end;
	}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.header-style-7 .mainmenu {
		margin: 0 -8px;
	}
	.header-style-7 .mainmenu > li {
		margin: 0 8px;
	}
	.header-style-7 .mainmenu > li > a,
	.header-style-7 .mainmenu > li.dropdown .fs-cat-toggle {
		font-size: 15px;
	}
	.header-style-7 .axil-mainmenu .header-navbar .header-main-nav {
		margin-left: 24px;
	}
	.header-style-7 .fs-logo {
		font-size: 22px;
	}
}
/* przycisk „Kategorie” (eTrade: .dropdown-toggle z ramką przerywaną) — własny przycisk, nie dropdown Bootstrapa */
.header-style-7 .mainmenu > li.dropdown .fs-cat-toggle {
	width: auto;
	gap: 8px;
	background: none;
	color: var(--color-heading);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}
.header-style-7 .mainmenu > li.dropdown .fs-cat-toggle::after {
	content: "\f107";
	margin-left: 0;
	font-family: var(--font-awesome);
	font-weight: 900;
	transition: transform .3s;
}
.header-style-7 .mainmenu > li.dropdown.open .fs-cat-toggle::after {
	transform: rotate(180deg);
}
.header-style-7 .mainmenu > li.dropdown .fs-cat-toggle:hover {
	color: var(--fs-primary-dark);
}
.fs-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fs-cat-list li {
	margin: 0;
	break-inside: avoid;
}
.fs-cat-list a {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-heading);
}
.fs-cat-list a:hover {
	color: var(--fs-primary-dark);
}
/* ≥ 1200: megamenu „Kategorie” — panel pod paskiem, 4 kolumny (lista płynie z góry na dół), linki w kolejności Tab tylko po otwarciu */
@media only screen and (min-width: 1200px) {
	.header-style-7 .mainmenu > li.fs-cat-item {
		position: static;
	}
	.fs-cat-panel {
		position: absolute;
		top: calc(100% + 14px);
		left: 15px;
		right: 15px;
		z-index: 10;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		padding: 30px 40px;
		border-top: 1px solid var(--color-border-light);
		border-radius: 0 0 10px 10px;
		background: var(--color-white);
		box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .1);
		visibility: hidden;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .2s, transform .2s, visibility 0s linear .2s;
	}
	.fs-cat-item.open .fs-cat-panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s, transform .2s, visibility 0s;
	}
	.fs-cat-list {
		column-count: 4;
		column-gap: 40px;
	}
	.fs-cat-list a {
		padding: 10px 0;
		border-bottom: 1px solid #f3f3f3;
	}
	.header-style-7 .fs-nav-extra,
	.header-style-7 .fs-search-toggle {
		display: none;
	}
}
/* przy otwartym panelu bocznym / oknie wyszukiwarki „Do góry” nie rysuje się nad maską (nagłówek eTrade ma własny z-index) */
body.open .back-to-top {
	visibility: hidden;
}

/* < 1200: menu w panelu bocznym (eTrade robi to dopiero < 992 — tu także 992–1199, bo menu z wyszukiwarką nie mieści się w linii),
   „Kategorie” jako rozwijana lista w 1 kolumnie */
@media only screen and (max-width: 1199px) {
	/* eTrade zeruje filter: drop-shadow paska dopiero < 992 — filtr tworzy blok zawierający dla position:fixed,
	   więc panel boczny przy 992–1199 był przycięty do wysokości paska */
	.header-style-7 .axil-mainmenu {
		filter: none;
	}
	.header-style-7 .axil-mainmenu .header-navbar .header-main-nav {
		flex: 1;
		margin: 0;
	}
	.header-style-7 .header-main-nav .mainmenu-nav {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		right: -320px;
		z-index: 100;
		width: 300px;
		max-width: 85vw;
		padding: 20px 24px 20px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--color-white);
		visibility: hidden;
		opacity: 0;
		transition: all .3s ease-in-out;
	}
	.header-style-7 .header-main-nav.open .mainmenu-nav {
		right: 0;
		visibility: visible;
		opacity: 1;
	}
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu {
		display: block;
		height: auto;
		margin: 0;
		overflow: visible;
	}
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu > li {
		margin: 0 !important;
		border-bottom: 1px solid #f3f3f3;
		opacity: 1;
		transform: none;
		transition: none;
	}
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu > li > a,
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu > li.dropdown .fs-cat-toggle {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0;
		border: 0;
		border-radius: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3 !important;
		color: var(--color-heading);
	}
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu > li.dropdown .fs-cat-toggle i {
		color: var(--color-primary);
	}
	.header-style-7 .header-main-nav .mainmenu-nav .mainmenu > li.dropdown .fs-cat-toggle::after {
		margin-left: auto;
	}
	.fs-cat-panel {
		display: none;
		padding: 0 0 8px 26px;
	}
	.fs-cat-item.open .fs-cat-panel {
		display: block;
	}
	.fs-cat-list a {
		display: flex;
		align-items: center;
		min-height: 40px;
		color: var(--color-body);
	}
	.header-style-7 .fs-search-field {
		display: none;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header-style-7 .mobile-close-btn,
	.header-style-7 .mobile-nav-brand,
	.header-style-7 .axil-mobile-toggle {
		display: block;
	}
}
/* pole wyszukiwarki (≥ 1200; poniżej ikona i okno #header-search-modal) — form#search z autocomplete silnika */
.header-style-7 .header-action .fs-search-field {
	flex: 1 1 auto;
	min-width: 140px;
	max-width: 340px;
	margin-left: 20px;
	margin-right: 14px;
}
.header-style-7 .header-action .fs-search-field input {
	width: 100%;
	max-width: none;
	height: 44px;
	padding: 0 48px 0 16px;
	border: 1px solid var(--color-border-light);
	font-size: 15px;
}
.header-style-7 .header-action .fs-search-field input::placeholder {
	color: var(--color-body);
	opacity: 1;
}
.header-style-7 .header-action .fs-search-field .icon {
	right: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: none;
	font-size: 16px;
	color: var(--color-heading);
}
.header-action .shopping-cart .fs-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.header-action .shopping-cart .basket_sum {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-heading);
	white-space: nowrap;
}
/* liczba produktów na ikonie koszyka (poniżej 1400 px kwota .basket_sum tylko dla czytników — nie mieści się obok wyszukiwarki)
   — fs-theme.js przepisuje ją z .basket_sum, który aktualizuje silnik */
.header-action .shopping-cart .fs-cart-count {
	display: none;
}
.header-action .shopping-cart .fs-cart-link {
	position: relative;
}
@media only screen and (max-width: 1399px) {
	.header-action .shopping-cart .basket_sum {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.header-action .shopping-cart .fs-cart-count {
		display: block;
		position: absolute;
		top: 2px;
		right: 0;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border: 2px solid var(--color-white);
		border-radius: 10px;
		background-color: var(--color-primary);
		color: var(--color-white);
		font-size: 11px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}
	.header-action .shopping-cart .fs-cart-count.fs-empty {
		display: none;
	}
}
/* ≥ 1200 ikona bez obszaru 44 px — plakietka nad prawym rogiem ikony (jak .cart-count eTrade) */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.header-action .shopping-cart .fs-cart-count {
		top: -12px;
		right: -14px;
	}
}
/* ikony nagłówka: inline SVG z glifów flaticon eTrade (bez fontu ikon) — rozmiar 1em jak dawny glif */
.header-action .fs-icon {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
/* ikony nagłówka: kółko po najechaniu / otwarciu w kolorze marki (eTrade: --color-secondary — biała ikona na pomarańczu ok. 2:1) */
.header-action > ul > li > a::after,
.axil-mobile-toggle .menu-btn::after {
	background-color: var(--color-primary);
}
.header-action > ul > li > a.open:focus,
.header-action > ul > li > a:hover:focus {
	color: var(--color-white);
}
/* cele dotyku 44 × 44 na telefonie i tablecie (też poziomo — menu w panelu bocznym do 1199 px); przy 320–374 px ikony 40 × 44 */
@media only screen and (max-width: 1199px) {
	.header-action > ul > li > a,
	.header-action > ul > li > button {
		min-width: 44px;
		min-height: 44px;
	}
}
/* ikony jednej wielkości (eTrade style-7: 19 px, glify SVG flaticon wyglądają przy tym drobno) */
.header-style-7 .header-action > ul > li > a,
.header-style-7 .axil-mobile-toggle .menu-btn {
	font-size: 22px;
}
@media only screen and (max-width: 767px) {
	.header-style-7 .header-action > ul,
	.header-style-7 .header-action > ul > li {
		margin: 0;
	}
	.header-style-7 .axil-mobile-toggle {
		margin-left: 0;
	}
}
/* telefon: logo w dwóch liniach (FAJERWERKI / SKLEP.pl), żeby obok zmieściło się pięć ikon po 44 px */
@media only screen and (max-width: 575px) {
	.header-style-7 .header-brand .fs-logo {
		padding: 3px 0;
		font-size: 18px;
		line-height: 1.05;
	}
	.header-style-7 .header-brand .fs-logo span::before {
		content: "\A";
		white-space: pre;
	}
}
/* 320–374 px: ikony 40 × 44, listy zakupów tylko w menu konta (bez miejsca na piątą ikonę) */
@media only screen and (max-width: 374px) {
	.header-action > ul > li > a,
	.header-action > ul > li > button {
		min-width: 40px;
	}
	.header-style-7 .header-action .wishlist {
		display: none;
	}
}
@media only screen and (min-width: 375px) {
	.my-account-dropdown .fs-lists-link {
		display: none;
	}
}
.my-account-dropdown .title {
	text-transform: none;
}

/* przyciski zamknięcia paneli */
@media only screen and (max-width: 1199px) {
	.mobile-close-btn,
	.header-search-modal .card-close {
		width: 40px;
		height: 40px;
	}
	.mobile-nav-brand {
		padding-right: 30px;
	}
}

/* modal wyszukiwarki (telefon) — bez listy wyników z demo eTrade, podpowiedzi daje autocomplete silnika */
.header-search-modal .header-search-wrap {
	height: auto;
	padding-bottom: 10px;
}
/* telefon: okno u góry ekranu (eTrade centruje w pionie) — podpowiedzi pod polem nie chowają się pod klawiaturą ekranową */
@media only screen and (max-width: 575px) {
	.header-search-modal {
		top: 16px;
		transform: translateX(-50%) scale(.8);
	}
	.header-search-modal.open {
		transform: translateX(-50%) scale(1);
	}
}

/* ---------- okruszki ---------- */
.axil-breadcrumb-area.fs-breadcrumb-compact {
	padding: 30px 0;
}
.axil-breadcrumb-area.fs-breadcrumb-compact .axil-breadcrumb {
	margin-bottom: 0;
}
.axil-breadcrumb-area .axil-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 4px;
}
.axil-breadcrumb-area .axil-breadcrumb .axil-breadcrumb-item {
	white-space: nowrap;
}
/* bieżąca strona (np. długa nazwa produktu) zawija się zamiast wychodzić poza ekran */
.axil-breadcrumb-area .axil-breadcrumb .axil-breadcrumb-item.active {
	white-space: normal;
	overflow-wrap: anywhere;
	min-width: 0;
}
/* eTrade: link #999 i aktywny w --color-primary na #F8F8F8 — poniżej 4,5:1 */
.axil-breadcrumb li a {
	color: var(--color-body);
}
@media only screen and (max-width: 991px) {
	.axil-breadcrumb li a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}
.axil-breadcrumb li a:hover {
	color: var(--fs-primary-dark);
}
.axil-breadcrumb li.axil-breadcrumb-item.active {
	color: var(--fs-primary-dark);
}

/* ---------- komunikaty ---------- */
.fs-messages {
	padding: 20px 0 0;
}
.fs-messages .alert {
	margin-bottom: 10px;
}

/* ---------- kafelek produktu (products/_card.phtml) ---------- */
/* zdjęcia są 4:3, 3:2 albo pionowe — kwadrat zostaje dla równej siatki, ale nic nie jest ucinane */
.axil-product .thumbnail > a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	padding: 4%;
	background-color: var(--fs-img-bg);
}
/* miniatury w tabelach (lista zakupów, zamówienie): eTrade ma tu object-fit: cover */
.axil-product-table tbody td.product-thumbnail a img {
	object-fit: contain;
	background-color: var(--fs-img-bg);
}
.axil-product .cart-action li.select-option button {
	position: relative;
	height: 40px;
	line-height: 39px;
	padding: 0 18px;
	display: block;
	width: auto;
	border: 0;
	border-radius: 4px;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: var(--color-white);
	background-color: var(--color-primary);
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .06);
	transition: .3s;
}
.axil-product .cart-action li.select-option button:hover {
	background-color: var(--fs-primary-dark);
}
.axil-product .cart-action li.select-option.fs-gratis button,
.axil-product .cart-action li.select-option button.notify_me {
	background-color: var(--color-secondary);
	color: var(--fs-on-secondary);
}
.axil-product .cart-action li.select-option.fs-gratis button:hover,
.axil-product .cart-action li.select-option button.notify_me:hover {
	background-color: var(--fs-secondary-dark);
}
.axil-product .cart-action li.select-option a,
.axil-product .cart-action li.select-option a:hover {
	color: var(--color-white);
	background-color: var(--color-primary);
}
.axil-product .cart-action li.select-option a::before {
	background-color: var(--color-primary);
}
.axil-product .cart-action form {
	margin: 0;
}
.axil-product .label-block.label-left {
	left: 20px;
	right: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.axil-product .label-block .product-badget {
	background-color: var(--color-primary);
}
.axil-product > .thumbnail .label-block .product-badget {
	box-shadow: none;
}
.axil-product > .thumbnail .label-block.label-right .product-badget {
	box-shadow: 0 8px 16px 0 rgba(232, 50, 30, .25);
}
/* plakietka rabatu wystaje poza kafelek — w slajdach poza kadrem (klony slick) prześwitywała przy krawędzi karuzeli */
.fs-products-carousel .slick-slide:not(.slick-active) .label-block {
	visibility: hidden;
}
.axil-product .label-block .product-badget.fs-badge-new {
	background-color: var(--color-dark);
}
.axil-product .label-block .product-badget.fs-badge-hit,
.label-block .product-badget.fs-badge-hit {
	background-color: var(--color-secondary);
	color: var(--fs-on-secondary);
}
.axil-product .label-block .product-badget.fs-badge-time {
	background-color: var(--fs-primary-dark);
	font-weight: 500;
}
/* kafelki w rzędzie (karuzela, siatka) mają równą wysokość, a cena stoi przy dolnej krawędzi — ceny w rzędzie
   wyrównane bez stałej wysokości tytułu (tytuł w jednej linii nie zostawia pustego miejsca jak w eTrade) */
.fs-products-carousel .slick-track {
	display: flex;
}
.fs-products-carousel .slick-slide {
	float: none;
	height: auto;
}
:is(.fs-products-carousel .slick-slide, .row > *) > .axil-product.product-style-one {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.axil-product.product-style-one .product-content,
.axil-product.product-style-one .product-content .inner {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.axil-product.product-style-one .product-content .product-price-variant {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: auto;
}
.axil-product .product-content .product-price-variant span.price {
	white-space: nowrap;
}
/* stara cena: eTrade #D6D6D6 (1,5:1) */
.axil-product .product-content .product-price-variant span.price.old-price {
	color: var(--color-body);
}
/* akcje kafelka osiągalne z klawiatury (eTrade pokazuje je tylko po najechaniu) */
.axil-product:focus-within .product-hover-action {
	bottom: 30px;
	opacity: 1;
	visibility: visible;
	transition: .5s, visibility 0s;
}
/* wąski kafelek (dwa w rzędzie karuzeli na telefonie < 400 px): przyciski jako ikony — tekst zostaje dla czytników */
.axil-product.product-style-one {
	container: fs-card / inline-size;
}
@container fs-card (max-width: 170px) {
	.axil-product .cart-action {
		flex-wrap: wrap;
		margin: -3px;
	}
	.axil-product .cart-action li {
		margin: 3px;
	}
	.axil-product .cart-action li.select-option button {
		width: 40px;
		padding: 0;
		font-size: 0;
		line-height: 40px;
	}
	.axil-product .cart-action li.select-option button::before {
		content: "\f217" / "";
		font-family: var(--font-awesome);
		font-weight: 900;
		font-size: 16px;
	}
	.axil-product .cart-action li.select-option button.addtobasketgratis::before {
		content: "\f06b" / "";
	}
	.axil-product .cart-action li.select-option button.notify_me::before {
		content: "\f0f3" / "";
	}
	/* ceny w jednej linii, tytuł najwyżej w dwóch — kafelki karuzeli mają równą wysokość, więc najwyższy wyznacza odstęp */
	.axil-product .product-content .product-price-variant span.price {
		font-size: 15px;
	}
	.axil-product .product-content .title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 15px;
	}
}
/* film na telefonie: kl-custom.js (< 480 px) wstawia iframe do .kw-prodimage z szerokością okna i ujemnymi marginesami */
.axil-product .thumbnail .kw-prodimage {
	position: relative;
	display: block;
}
.axil-product .thumbnail .kw-prodimage iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 6px;
	z-index: 2;
}
.axil-product .thumbnail:has(.kw-prodimage iframe) .product-hover-action {
	top: 10px;
	bottom: auto;
	opacity: 1;
	visibility: visible;
	z-index: 3;
}
.axil-product .thumbnail:has(.kw-prodimage iframe) .cart-action li:not(.quickview) {
	display: none;
}
.axil-product .product-price-variant ins,
.axil-product .product-price-variant del {
	background: none;
	color: inherit;
}
.axil-product .product-price-variant ins {
	text-decoration: none;
}
/* procent rabatu pokazuje plakietka; .prompric_el (wypełnia kl-custom.js) zostaje jako hook */
.axil-product .prompric_el {
	display: none;
}
/* bez hovera (telefony, tablety) akcje kafelka widoczne na stałe */
@media (hover: none) {
	.axil-product .product-hover-action,
	.axil-product:hover .product-hover-action,
	.axil-product:focus-within .product-hover-action {
		opacity: 1;
		visibility: visible;
		bottom: 15px;
	}
}

/* ---------- lista produktów (products/list.phtml, shop-sidebar.html / shop.html) ---------- */
/* siatka to ul#infinite-scroll-container > li.product (li.product[data-product-id] czyta public/tracker.js) */
.fs-product-grid {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.fs-product-grid > li {
	margin-top: 0;
	margin-bottom: 0;
}
/* pakiet / karton w siatce: podpis ceny nad ceną, rozmiar kartonu przy nazwie */
.axil-product .product-price-variant .fs-price-label {
	display: inline-block;
	align-self: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-body);
	margin: 4px;
}
.axil-product .product-content .title .fs-carton-size {
	color: var(--color-body);
	font-weight: 400;
	white-space: nowrap;
}
.axil-product .label-block .product-badget.fs-badge-extra {
	background-color: var(--color-secondary);
	color: var(--fs-on-secondary);
}
.axil-shop-top .filter-results {
	white-space: nowrap;
}
#pagination-top .pagination {
	margin: 0 0 30px;
}
/* karuzela z mniejszą liczbą kafelków niż mieści się w rzędzie (np. 1 ostatnio oglądany) — do lewej, nie na środku */
.fs-products-carousel .slick-track {
	margin-left: 0;
}
/* filtry w kolumnie bocznej: ikona +/− z pseudo-elementu eTrade na Font Awesome Free */
.axil-shop-sidebar .title::before {
	font-family: var(--font-awesome);
	font-weight: 900;
	font-size: 14px;
}
.axil-shop-sidebar .title .fs-filter-active,
.mobile_filter .title .fs-filter-active {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--fs-primary-soft);
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}
.axil-shop-sidebar .product-categories ul li.fs-filter-item,
.mobile_filter li.fs-filter-item {
	position: relative;
	padding: 6px 0;
	margin: 0;
}
.fs-filter-item input[type="checkbox"] ~ label {
	font-size: var(--font-size-b2);
	line-height: 20px;
}
.fs-filter-item .fs-filter-count {
	font-weight: 400;
}
.fs-filter-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding: 12px 0;
	background: var(--color-white);
}
.axil-shop-sidebar .fs-filter-heading {
	display: none;
}
.mobile_filter .fs-filter-heading {
	font-size: 24px;
	margin-bottom: 24px;
}
.fs-filter-buttons .axil-btn {
	text-align: center;
}
.product-filter-mobile.mobile_filter_show {
	border: 0;
	min-height: 44px;
	margin-top: 0;
	padding: 12px 0;
}
.product-filter-mobile.mobile_filter_show::after {
	bottom: 11px;
}
/* poniżej 992 px eTrade wysuwa kolumnę boczną (off-canvas); w fs filtry otwiera popup silnika (.mobile_filter_show),
   więc ukryta kolumna nie przyjmuje fokusu klawiatury */
@media only screen and (max-width: 991px) {
	.axil-shop-sidebar:not(.open) {
		visibility: hidden;
	}
}
/* filtry na telefonie: silnik kopiuje HTML .filter do popupu (.mobile_filter) — z tymi samymi id, więc label for
   przełączałby ukryty checkbox w kolumnie bocznej; klikalny jest cały wiersz z checkboxem popupu (rysowanym przez label) */
.mobile_filter {
	text-align: left;
}
.mobile_filter .toggle-list {
	padding-bottom: 24px;
}
.mobile_filter .toggle-list .title {
	font-size: 18px;
	font-weight: 500;
	color: var(--color-dark);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 10px;
	margin-bottom: 12px;
}
.mobile_filter .shop-submenu {
	display: block !important;
}
.mobile_filter .shop-submenu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mfp-content .mobile_filter input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	z-index: 1;
	cursor: pointer;
}
.mfp-content .mobile_filter input[type="checkbox"] ~ label {
	display: inline-block;
	padding-left: 28px;
	font-size: var(--font-size-b2);
	font-weight: 500;
}
.mfp-content .mobile_filter input[type="checkbox"] ~ label::before,
.mfp-content .mobile_filter input[type="checkbox"] ~ label::after {
	display: block;
}
.mobile_filter .fs-filter-buttons {
	flex-direction: row;
	flex-wrap: wrap;
}
.mobile_filter .fs-filter-buttons .axil-btn {
	flex: 1 1 auto;
}
/* pusta lista i opis kategorii */
.fs-empty-list {
	text-align: center;
	padding: 60px 30px;
	border-radius: 6px;
	background: var(--color-lighter);
}
.fs-empty-list .icon i {
	font-size: 54px;
	color: var(--color-primary);
	margin-bottom: 20px;
}
.fs-empty-list .title {
	margin-bottom: 12px;
}
.fs-empty-list p {
	max-width: 520px;
	margin: 0 auto 24px;
}
.fs-category-description {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 2px solid var(--color-lighter);
}
/* opisy z panelu (wspólne z tf, motyw ciemny) mają inline kolory, np. #ff9900 — na jasnym tle 2,1:1 */
.fs-category-description [style*="color"] {
	color: inherit !important;
}
.fs-category-description h1,
.fs-category-description h2 {
	font-size: 28px;
	margin: 30px 0 14px;
}
.fs-category-description h3 {
	font-size: 22px;
	margin: 24px 0 12px;
}
.fs-category-description h4,
.fs-category-description h5 {
	font-size: 18px;
	margin: 20px 0 10px;
}
.fs-category-description > :first-child {
	margin-top: 0;
}
.fs-category-description p,
.fs-category-description li {
	font-size: var(--font-size-b2);
	line-height: 1.7;
}
@media only screen and (max-width: 767px) {
	.fs-category-description h1,
	.fs-category-description h2 {
		font-size: 22px;
	}
	.fs-category-description h3 {
		font-size: 19px;
	}
}

/* ---------- strona główna ---------- */
/* slider produktów jak main-slider-style-4 (index-7): tekst, cena i przycisk po lewej, zdjęcie produktu po prawej;
   eTrade ma jeden slajd z wyciętym zdjęciem PNG — tu do 3 slajdów (slick, fs-theme.js) ze zdjęciami kwadratowymi */
.main-slider-style-4 {
	display: block;
	min-height: 0;
	padding: 50px 0 20px;
	background-color: var(--fs-hero-bg);
}
.main-slider-style-4 .fs-hero-slide {
	padding-bottom: 10px;
}
.main-slider-style-4 .main-slider-content .subtitle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 700;
}
.main-slider-style-4 .main-slider-content .subtitle i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 12px;
	background-color: var(--color-secondary);
}
.main-slider-style-4 .main-slider-content .title {
	margin-bottom: 30px;
	font-size: 52px;
	line-height: 1.15;
	animation: none;
}
@media only screen and (max-width: 1199px) {
	.main-slider-style-4 .main-slider-content .title {
		font-size: 40px;
	}
}
@media only screen and (max-width: 767px) {
	.main-slider-style-4 {
		padding-top: 40px;
	}
	.main-slider-style-4 .main-slider-content .title {
		margin-bottom: 20px;
		font-size: 30px;
	}
}
.main-slider-style-4 .main-slider-content .shop-btn {
	animation: none;
}
.main-slider-style-4 .main-slider-content .shop-btn .axil-btn i {
	margin-right: 8px;
}
.main-slider-style-4 .slide-thumb-area {
	margin: 0;
	text-align: center;
}
.main-slider-style-4 .slide-thumb-area .main-thumb {
	animation: none;
}
.main-slider-style-4 .slide-thumb-area .main-thumb img {
	display: inline-block;
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 4%;
	border-radius: 10px;
	background-color: var(--fs-img-bg);
}
@media only screen and (max-width: 767px) {
	.main-slider-style-4 .main-slider-content .fs-slide-price {
		justify-content: center;
	}
	.main-slider-style-4 .slide-thumb-area {
		padding-top: 30px;
	}
	.main-slider-style-4 .slide-thumb-area .main-thumb img {
		max-width: 300px;
	}
}
.fs-slide-price {
	margin: 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
}
.fs-slide-price span {
	white-space: nowrap;
}
.fs-slide-price .current {
	font-size: 30px;
	font-weight: 700;
	color: var(--color-primary);
}
.fs-slide-price .old {
	font-size: 18px;
	color: var(--color-body);
	text-decoration: line-through;
}
/* kafle najważniejszych kategorii (index-7 „Featured Categories”, categrie-product-4): zdjęcie produktu z kategorii + nazwa */
.fs-home-categories .section-title-border .title {
	margin-bottom: 0;
}
.fs-home-categories .categrie-product-4 {
	margin-bottom: 30px;
}
.fs-home-categories .categrie-product-4 .cate-thumb {
	display: block;
	color: var(--color-heading);
}
.fs-home-categories .categrie-product-4 .cate-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 4%;
	border-radius: 10px;
	background-color: var(--fs-img-bg);
	transition: transform .4s ease-in-out;
}
.fs-home-categories .categrie-product-4 .cate-thumb:hover img {
	transform: scale(1.04);
}
.fs-home-categories .categrie-product-4 .cat-title {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: color .3s;
}
.fs-home-categories .categrie-product-4 .cate-thumb:hover .cat-title {
	color: var(--fs-primary-dark);
}
@media only screen and (max-width: 575px) {
	.fs-home-categories .categrie-product-4 .cat-title {
		font-size: 15px;
	}
}
/* 576–767 px: trzy w rzędzie — dziesiąty kafel zostałby sam w ostatnim rzędzie */
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.fs-home-categories .row > .col:nth-child(10) {
		display: none;
	}
}
.service-box .icon i {
	font-size: 46px;
	line-height: 1;
	color: var(--color-primary);
}
.service-box.service-style-2 .icon i {
	font-size: 34px;
}
/* pasek usług nad stopką: ikony o różnej szerokości — stała kolumna, teksty w jednej linii pionowej */
.service-box.service-style-2 .icon {
	flex: 0 0 44px;
	text-align: center;
}
.slick-loading .slick-list {
	background: none;
}
/* kropki slidera i karuzel: obszar klikalny 40 px wysokości, widoczny pasek / kropka bez zmian */
.main-slider-style-4 .fs-hero-slider .slick-dots {
	position: relative;
	bottom: auto;
	margin: 10px 0 0;
}
.main-slider-style-4 .fs-hero-slider .slick-dots li {
	width: 40px;
	height: 40px;
	margin: 0;
}
.main-slider-style-4 .fs-hero-slider .slick-dots li button {
	width: 40px;
	height: 40px;
	padding: 18px 8px;
	background-clip: content-box;
	background-color: var(--fs-hero-dot);
}
.main-slider-style-4 .fs-hero-slider .slick-dots li.slick-active,
.main-slider-style-4 .fs-hero-slider .slick-dots li.slick-active button {
	width: 50px;
}
.main-slider-style-4 .fs-hero-slider .slick-dots li.slick-active button {
	background-color: var(--color-primary);
}
.fs-products-carousel .slick-dots {
	bottom: -35px;
}
.fs-products-carousel .slick-dots li,
.fs-products-carousel .slick-dots li button,
.fs-products-carousel .slick-dots li button::before {
	width: 40px;
	height: 40px;
	margin: 0;
	line-height: 40px;
}
/* kafle usług w rzędzie równej wysokości (strona główna; 992–1199 px trzy w rzędzie zamiast pięciu) */
.service-area .col > .service-box:not(.service-style-2) {
	height: calc(100% - 30px);
}
.service-box .title a {
	color: inherit;
}
.service-box .title a:hover {
	color: var(--color-primary);
}
.fs-title-with-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 24px;
}
.fs-title-with-link .title-highlighter {
	flex-basis: 100%;
}
.fs-view-all {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-primary);
}
.fs-view-all i {
	margin-left: 4px;
}

/* ---------- sekcje about-us używane na kilku stronach ---------- */
/* przyciski bezpośrednio w .about-content: fundacja (fs-pages.css) i blok „Bezpieczne strzelanie” na karcie produktu
   i pakietu (products/_section_safety.phtml) — tu, bo karta nie ładuje fs-pages.css */
.axil-about-area .about-content > .axil-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	overflow-wrap: anywhere;
}
@media only screen and (max-width: 360px) {
	.axil-about-area .about-content > .axil-btn {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 13px;
	}
}

/* ---------- stopka (ciemna: footer-dark z index-7) ---------- */
.service-box .content p a {
	color: var(--color-body);
}
.service-box .content p a:hover {
	color: var(--color-primary);
}
.axil-footer-widget .fs-adult-note {
	font-size: 13px;
	color: var(--fs-dark-text);
	margin: 0;
}
.axil-footer-widget .fs-adult-note i,
.footer-dark .axil-footer-widget .support-list-item li i {
	color: var(--color-tertiary);
	margin-right: 4px;
}
/* eTrade footer-dark nie ma stanu najechania — domyślny (--color-heading) znikał na ciemnym tle */
.footer-dark .axil-footer-widget .inner ul li a:hover,
.footer-dark .copyright-default .quick-link li a:hover {
	color: var(--color-white);
}
.footer-dark .axil-footer-widget .inner ul li a::after {
	background-color: var(--color-white);
}
.footer-dark .axil-footer-widget .widget-title {
	color: var(--color-white);
}
.fs-payment-list li {
	font-size: 14px;
	font-weight: 700;
	color: var(--fs-dark-text);
}
.fs-payment-list li .fs-pay-icon {
	display: block;
	width: 40px;
	height: auto;
	color: var(--color-white);
}
.fs-referrer {
	text-align: center;
	padding: 10px 0 0;
	font-size: 14px;
	color: var(--fs-dark-text);
}
.fs-referrer b {
	color: var(--color-white);
	overflow-wrap: anywhere;
}
.fs-referrer .axil-btn {
	padding: 4px 14px;
	font-size: 13px;
	margin-left: 8px;
}