/*
Theme Name: Jeszcze Się Przyda (Storefront Child)
Template: storefront
Description: Motyw potomny Storefront - uklad i interakcje wzorowane na to.mikup.pl (belka fixed, menu kategorii z kafelkami), kolorystyka rdzawo-brazowa z jeszczesieprzyda.pl.
Version: 2.0.0
*/

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/instrument-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/instrument-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/bricolage-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/bricolage-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
	/* Odcien wziety z logo (probkowanie pikseli), ale podniesione nasycenie:
	   pierwotny #d68227 na bialym tle czytal sie jako sploway braz, nie jako
	   kolor marki. 2026-09-09, redesign "galeria". */
	--jsp-rust-light: #ff9a4d;
	--jsp-rust: #f2610f;
	--jsp-rust-dark: #8a3d06;
	--jsp-grad: linear-gradient(90deg, var(--jsp-rust-light) 0%, var(--jsp-rust) 55%, var(--jsp-rust-dark) 100%);
	--jsp-red: #e2071c;
	--jsp-dark: #141210;
	--jsp-border: #e3dfd9;
	--jsp-bg-soft: #ffffff;
	--jsp-muted: #6f6a64;
	--jsp-shadow-light: 0 4px 12px rgba(20, 18, 16, 0.05);
	--jsp-shadow-hover: 0 10px 26px -12px rgba(20, 18, 16, 0.28);
	/* Wspolne tlo pod zdjeciami produktow. Jedno na caly sklep - rozne tla
	   pod zdjeciami byly najmocniejszym sygnalem "taniej" strony. */
	--jsp-tile-bg: #f1eee9;
	--jsp-font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--jsp-font-display: 'Bricolage Grotesque', 'Trebuchet MS', var(--jsp-font-ui);
}

body {
	font-family: var(--jsp-font-ui);
	margin: 0 !important;
	transition: padding-top 0.3s ease;
	color: var(--jsp-dark);
}

/* !important: Storefront's own .hentry .entry-content a / .site-footer a /
   .widget-area .widget a rules (higher specificity than a plain "a"
   selector) set text-decoration:underline and were winning on ordinary
   content pages (Kontakt, Regulamin, ...), leaving default-looking
   underlined links even though this rule already existed. */
a { color: var(--jsp-rust-dark); text-decoration: none !important; }

/* ==========================================================================
   Fixed nav: logo / search / account+cart row, category bar below.
   Layout and interaction pattern mirrors to.mikup.pl's #m-global-nav-root
   (m-nav-fixed-wrapper / m-nav-top-row / m-nav-menu / m-nav-subgrid), just
   renamed jsp-* and recolored rust/brown instead of purple.
   ========================================================================== */

.jsp-nav-fixed-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 9999;
	box-shadow: 0 2px 15px rgba(26, 26, 26, 0.08);
	box-sizing: border-box;
	font-family: var(--jsp-font-ui);
}
/* Decorative accent strip, colors sampled from the logo. */
.jsp-nav-fixed-wrapper::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--jsp-grad);
}

/* WP admin bar is also position:fixed;top:0 - push our own fixed wrapper
   below it (only relevant to logged-in staff, not real visitors) so it
   doesn't cover the accent strip / top of the header. */
body.admin-bar .jsp-nav-fixed-wrapper { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .jsp-nav-fixed-wrapper { top: 46px; }
}

.jsp-nav-top-row {
	display: flex;
	align-items: center;
	padding: 10px 40px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	gap: 20px;
}

.jsp-nav-left { flex: 1; min-width: 0; }
.jsp-nav-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.jsp-nav-center { flex: 2; display: flex; align-items: center; justify-content: center; }

.jsp-nav-logo,
.custom-logo-link {
	display: inline-block;
	text-decoration: none;
	outline: none;
}
/* Storefront's own "a:focus,input:focus,textarea:focus,button:focus{outline:
   2px solid #7f54b3}" has higher specificity (element+pseudo-class) than a
   plain ".custom-logo-link{outline:none}" (class only), so it was still
   winning and drawing a purple frame around the logo after every click.
   Match its specificity by targeting :focus explicitly. */
.jsp-nav-logo:focus,
.custom-logo-link:focus {
	outline: none;
}
.jsp-nav-logo img,
.custom-logo-link img { max-height: 64px; width: auto; display: block; margin: 0; }
.jsp-nav-left,
.jsp-nav-center,
.jsp-nav-right { display: flex; align-items: center; }
.jsp-nav-left { justify-content: flex-start; }
.jsp-nav-logo,
.custom-logo-link { margin: 0; line-height: 0; }
.jsp-nav-logo-text {
	font-weight: 700;
	font-size: 1.5em;
	color: var(--jsp-rust-dark);
}

.jsp-nav-search { position: relative; width: 100%; max-width: 500px; }
.jsp-nav-search form { display: block; margin: 0; }
.jsp-nav-search input {
	width: 100%;
	padding: 10px 20px;
	border: 1px solid var(--jsp-border);
	border-radius: 8px;
	background: #f6f6f6;
	font-size: 14px;
	color: var(--jsp-dark);
	outline: none;
	box-sizing: border-box;
	font-family: inherit;
	margin: 0;
	height: 46px;
	border-radius: 999px;
}
.jsp-nav-search input:focus { border-color: var(--jsp-rust); background: #fff; }

/* Live search suggestions (search-suggest.js), positioned to hang below the
   input regardless of where .jsp-nav-search sits in the header row. */
.jsp-search-suggestions {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--jsp-border);
	border-radius: 10px;
	box-shadow: 0 15px 30px rgba(26, 26, 26, 0.14);
	z-index: 1001;
	overflow: hidden;
}
.jsp-search-suggestions.is-open { display: block; }
.jsp-search-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	border-bottom: 1px solid var(--jsp-border);
}
.jsp-search-suggestion:last-child { border-bottom: none; }
.jsp-search-suggestion:hover,
.jsp-search-suggestion.is-highlighted { background: #f6f6f6; }
.jsp-search-suggestion img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: #f5f5f5;
}
.jsp-search-suggestion-info { min-width: 0; }
.jsp-search-suggestion-name {
	display: block;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--jsp-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jsp-search-suggestion-price { font-size: 0.8em; color: var(--jsp-rust-dark); font-weight: 700; }
.jsp-search-suggestions-more {
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--jsp-rust-dark);
	text-decoration: none;
	background: #f6f6f6;
}
.jsp-search-suggestions-more:hover { text-decoration: underline; }
.jsp-search-suggestions-empty {
	padding: 14px;
	font-size: 0.85em;
	color: var(--jsp-muted);
	text-align: center;
}

.jsp-nav-icon-btn {
	position: relative;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Bez szarego kola pod spodem - dwa wypelnione krazki obok pustego pola
	   szukania byly najciezszym elementem calego naglowka. Zostaje sama
	   kreska, kolor dopiero po najechaniu. */
	background: none;
	color: var(--jsp-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}
.jsp-nav-icon-btn:hover { background: none; color: var(--jsp-rust); }
.jsp-nav-icon-btn svg { width: 25px; height: 25px; }

.jsp-nav-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--jsp-rust);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px #fff;
}

/* -------- category bar -------- */
/* position:relative lives here (not on .jsp-nav-item) so the dropdown below,
   an absolutely-positioned child several levels down, resolves its
   left:0;right:0 against the full-width bar instead of against its own
   li - which only stretches as wide as that one category button's text. */
.jsp-nav-menu { position: relative; background: #fff; display: flex; justify-content: center; border-top: 1px solid var(--jsp-border); }
.jsp-nav-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.jsp-nav-item { }

.jsp-nav-link {
	background: none;
	border: none;
	outline: none;
	padding: 14px 22px;
	font-family: var(--jsp-font-ui);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--jsp-dark);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: 0.2s ease;
}
/* .jsp-nav-link is a <button>, so it was also catching the generic
   "button:hover { background-color: var(--jsp-rust-dark) }" rule further
   down this file (meant for real buttons like "Dodaj do koszyka") - that
   painted a solid rust box behind the category name on hover. Cancel it
   back to plain/transparent here. */
.jsp-nav-link:hover {
	background: none !important;
	color: var(--jsp-rust);
	border-bottom-color: transparent;
}
/* Same specificity issue as the logo above - button:focus{outline:2px solid
   #7f54b3} from Storefront beats a plain .jsp-nav-link{outline:none}. */
.jsp-nav-link:focus {
	outline: none;
}
.jsp-nav-item.jsp-active > .jsp-nav-link {
	color: var(--jsp-rust);
	border-image: none;
	border-bottom: 3px solid var(--jsp-rust);
}

.jsp-nav-dropdown {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	overflow: hidden;
	visibility: hidden;
	box-shadow: 0 15px 30px rgba(26, 26, 26, 0.14);
	z-index: 1000;
}
.jsp-nav-item.jsp-active .jsp-nav-dropdown {
	grid-template-rows: 1fr;
	visibility: visible;
	border-top: 1px solid var(--jsp-border);
}
.jsp-dropdown-inner { min-height: 0; }

.jsp-nav-subgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 20px;
	padding: 26px 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.jsp-nav-sub-card {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s ease;
}
.jsp-nav-sub-card:hover { transform: scale(1.03); }

.jsp-nav-img-box {
	width: 100%;
	height: 90px;
	background: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	border: 1px solid var(--jsp-border);
	box-shadow: var(--jsp-shadow-light);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.jsp-nav-sub-card:hover .jsp-nav-img-box { box-shadow: var(--jsp-shadow-hover); border-color: var(--jsp-rust); }
.jsp-nav-img-box img { width: 64px; height: 64px; object-fit: contain; display: block; }

.jsp-nav-sub-card span {
	font-size: 13px;
	font-weight: 700;
	color: var(--jsp-dark);
	text-align: center;
	line-height: 1.2;
}
.jsp-nav-sub-card:hover span { color: var(--jsp-rust-dark); }

@media (max-width: 782px) {
	/* Compact, centered-logo top bar (m.mikup.pl-style): account/cart icons
	   drop out entirely here since the feed's own bottom action row
	   (Koszyk/Konto buttons, see the mobile feed section further down)
	   already covers both, and duplicating them wastes vertical space on a
	   screen this narrow. */
	.jsp-nav-top-row {
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 8px 16px;
		gap: 8px;
	}
	.jsp-nav-left { flex: none; width: 100%; text-align: center; }
	.jsp-nav-center { flex: none; width: 100%; order: 0; margin-top: 0; }
	.jsp-nav-right { display: none; }
	.jsp-nav-logo img,
	.custom-logo-link img { max-height: 40px; margin: 0 auto; }
	.jsp-nav-search input { padding: 8px 16px; font-size: 13px; }

	.jsp-nav-list { flex-direction: column; width: 100%; }
	.jsp-nav-dropdown { position: static; box-shadow: none; }
}

/* ==========================================================================
   Product grid: image-only tiles, name+price revealed on hover. Column
   count is fluid (auto-fill), not a fixed 3 - it fits as many 310px-plus
   tiles as the row has room for, so a wide monitor shows more tiles per
   row and a narrow one shows fewer, all from one rule with no breakpoints.
   310px is a hard floor, not a stylistic choice: each tile carries two
   140px-wide corner buttons (badge/damage-btn on the left, add-to-cart on
   the right, both 10px-inset) that start overlapping below ~300px of tile
   width - see the .jsp-product-tile .add_to_cart_button rules below.
   ========================================================================== */

.jsp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 28px;
	margin: 0;
	padding: 4px 0 8px;
	background: none;
	border: none;
}

/* Storefront's own .col-full caps content at ~66.5em (~1064px) everywhere,
   which would flatten this fluid grid back down to a fixed-looking 3
   columns on any monitor - widen just the product-listing page types
   (shop, category archives, search results), leaving that cap alone for
   ordinary content pages (Kontakt, Regulamin, ...) where a wide text
   measure would hurt readability. */
body.post-type-archive-product .col-full,
body.tax-product_cat .col-full,
body.search-results .col-full {
	max-width: 1700px;
}
.jsp-product-tile {
	position: relative;
	background: var(--jsp-tile-bg);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(20, 18, 16, 0.04), 0 14px 30px -18px rgba(20, 18, 16, 0.30);
	transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	/* height:0 + padding-bottom:100% forces a square that's *always*
	   exactly the tile's own width, with zero dependency on content -
	   unlike aspect-ratio, which (per spec) yields to content that wants
	   more space whenever overflow is visible. That "content wins" clause
	   is exactly what a bottom-anchored absolutely-positioned child
	   (.add_to_cart_button, bottom:10px/top:auto - a classic
	   auto-height-container circular dependency) was triggering, quietly
	   inflating the tile taller than its image. overflow stays visible
	   here (unlike the old li-based version) specifically so the corner
	   badge below can poke out past the edge. */
	height: 0;
	padding-bottom: 100%;
	/* Bylo `visible`, zeby plakietka promocji mogla wystawac poza krawedz.
	   Plakietki siedza teraz w srodku, wiec nic nie ma prawa wychodzic. */
	overflow: hidden;
}
.jsp-product-tile:hover,
.jsp-product-tile:focus-within {
	box-shadow: 0 4px 10px rgba(20, 18, 16, 0.06), 0 26px 50px -22px rgba(20, 18, 16, 0.42);
	transform: translateY(-4px);
}
.jsp-product-tile a.woocommerce-loop-product__link {
	display: block;
	position: absolute;
	inset: 0;
}
.jsp-product-tile img {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/* `contain` + margines zamiast `cover`: zdjecia w sklepie z odzysku maja
	   rozne proporcje i rozne tla, a kadrowanie ucinalo polowe przedmiotu.
	   Wspolne biale tlo kafelka scala je w jedna sciane. */
	object-fit: cover;
	padding: 0;
	display: block;
	border-radius: 16px;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jsp-product-tile:hover img,
.jsp-product-tile:focus-within img { transform: scale(1.04); }

.jsp-product-tile .jsp-product-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Dolny padding rezerwuje pas na przyciski (koszyk / uszkodzenie), zeby
	   nigdy nie weszly na nazwe ani cene, ile by sie nie zawinela. */
	padding: 14px 16px 62px;
	/* Panel z rozmyciem zamiast plaskiego gradientu - zdjecie prosvieca pod
	   spodem, wiec podpis czyta sie jak warstwa NA zdjeciu, a nie jak biala
	   plachta doklejona do dolu kafelka. */
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-top: 1px solid rgba(20, 18, 16, 0.06);
	color: var(--jsp-dark);
	/* 2026-09-09 redesign: w spoczynku kafelek to samo zdjecie. Nazwa, cena i
	   przyciski wjezdzaja dopiero po najechaniu (lub po wejsciu klawiatura -
	   :focus-within). Wyjatek dla urzadzen bez kursora nizej. */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}
.jsp-product-tile:hover .jsp-product-overlay,
.jsp-product-tile:focus-within .jsp-product-overlay {
	opacity: 1;
	transform: none;
}

.jsp-product-tile .woocommerce-loop-product__title {
	font-family: var(--jsp-font-ui);
	font-size: 0.88em;
	font-weight: 500;
	line-height: 1.35;
	margin: 0 0 6px;
	color: var(--jsp-dark) !important;
}
/* !important throughout this block: WooCommerce's own .price / amount
   rules (e.g. ul.products li.product .price) are more specific than a
   single .jsp-product-tile .price selector and were winning, rendering the
   price in WooCommerce's default muted gray - invisible against the dark
   overlay backdrop. */
.jsp-product-tile .price,
.jsp-product-tile .price .woocommerce-Price-amount,
.jsp-product-tile .price bdi {
	color: var(--jsp-dark) !important;
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-size: 1.28em;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
}
.jsp-product-tile .price ins {
	color: var(--jsp-red) !important;
	text-decoration: none;
}
.jsp-product-tile .price ins .woocommerce-Price-amount,
.jsp-product-tile .price ins bdi {
	color: var(--jsp-red) !important;
}
.jsp-product-tile .price del {
	color: var(--jsp-muted) !important;
	font-size: 0.62em;
	font-weight: 400;
	margin-right: 6px;
}
.jsp-product-tile .price del .woocommerce-Price-amount,
.jsp-product-tile .price del bdi {
	color: var(--jsp-muted) !important;
}
.jsp-product-tile .jsp-omnibus-lowest-price {
	color: var(--jsp-muted);
	display: block;
	font-family: var(--jsp-font-ui);
	font-size: 0.58em;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	margin-top: 5px;
}
/* Domyslna interlinia (1.618 Storefronta) mnozyla sie przez trzy bloki
   w srodku .price i sama zjadala 100px wysokosci kafelka. */
.jsp-product-tile .price {
	display: block;
	line-height: 1.2;
}
.jsp-product-tile .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Przycisk na calej szerokosci panelu - o to prosil uzytkownik ("po
   najechaniu ladny przycisk dodaj do koszyka"). Przycisk "Stan produktu"
   (dawniej "Uszkodzenie") siada nad nim; :has() pozwala zarezerwowac na
   niego miejsce TYLKO na kafelkach, ktore go faktycznie maja. */
.jsp-product-tile .add_to_cart_button {
	left: 14px;
	right: 14px;
	bottom: 14px;
	height: 42px;
	font-size: 0.76em !important;
	letter-spacing: 0.08em;
	box-shadow: 0 6px 16px -6px rgba(242, 97, 15, 0.7);
}

/* Po dodaniu do koszyka WooCommerce dokleja obok przycisku link "Zobacz
   koszyk". Jest to zwykly element w normalnym przeplywie, a kafelek ma
   height:0 + padding-bottom:100% (kwadrat niezalezny od tresci), wiec link
   ladowal w lewym gornym rogu, na plakietce stanu. Zamiast tego podmieniamy
   nim przycisk w tym samym miejscu: pomaranczowe "Dodaj do koszyka" staje
   sie ciemnym "Zobacz koszyk". Zostaje widoczny takze po zjechaniu myszka -
   to potwierdzenie akcji, nie ozdoba. */
.jsp-product-tile .add_to_cart_button.added { display: none; }
.jsp-product-tile .added_to_cart {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	justify-content: center;
	z-index: 4;
	height: 42px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--jsp-dark);
	color: #fff;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.jsp-product-tile .added_to_cart:hover { background: var(--jsp-rust); color: #fff; }
/* Badge and button share one fixed box size (width/height/flex-centering)
   so they are pixel-identical regardless of their text length - "Promocja!"
   is shorter than "Dodaj do koszyka" and would otherwise render narrower
   even with matching padding, since both elements size to their own content
   by default. border:none !important cancels WooCommerce core's own
   ".onsale { border: 1px solid #6d6d6d }", which was silently adding 2px
   of extra height only to the badge. */
.jsp-product-tile .onsale,
.jsp-product-tile .add_to_cart_button {
	height: 38px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	border: none !important;
	border-radius: 999px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}
.jsp-product-tile .onsale {
	/* Do srodka kafelka i do prawego gornego rogu - lewy zajmuje plakietka
	   stanu. Nic juz nie wystaje poza krawedz (patrz overflow:hidden wyzej). */
	position: absolute;
	top: 14px;
	left: 14px;
	height: 26px;
	padding: 0 11px !important;
	/* !important na kazdej z tych wlasciwosci: dalej w pliku stoi ogolna
	   regula `.onsale { background-color: ... !important; font-weight: 700;
	   text-transform: uppercase; font-size: 0.75em }` (dla plakietki na
	   karcie produktu) i bez tego wygrywala tutaj. */
	font-size: 0.64em !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	background-color: var(--jsp-dark) !important;
	/* WooCommerce's own default .onsale rule sets text-transform:uppercase;
	   omitting our own declaration isn't enough to beat it, needs to be
	   explicitly overridden. */
	text-transform: none !important;
	z-index: 3;
}
.jsp-product-tile .star-rating { display: none; }

.jsp-product-tile .add_to_cart_button {
	/* Pokes past the tile's BOTTOM edge only, stays inset horizontally
	   (right:10px) so it never overflows the sides. The overlay's enlarged
	   bottom padding (above) keeps this clear of the price/name text. */
	position: absolute;
	right: 14px;
	bottom: 14px;
	background: var(--jsp-rust);
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	z-index: 2;
}
.jsp-product-tile:hover .add_to_cart_button,
.jsp-product-tile:focus-within .add_to_cart_button {
	opacity: 1;
	transform: translateY(0);
}
.jsp-product-tile .add_to_cart_button:hover { background: var(--jsp-rust-dark); }

/* "Uszkodzenie" button: only rendered by PHP (jsp_render_damage_button) when
   the product actually has a _jsp_damage_description meta value. Mirrors
   "Dodaj do koszyka" onto the opposite (bottom-left) corner - same 10px
   inset, same -10px bottom overflow, same 140x38 size (joined into that
   shared rule below) - so the two read as a matched pair. Muted brownish-
   gray (--jsp-muted) rather than an accent color, since this is a neutral
   "more info" action, not a second call to action. */
/* No narrow-viewport override needed anymore: .jsp-grid's auto-fill floor
   (310px, see above) guarantees a tile is never narrower than what these
   two 140px corner buttons need, at any screen width. */

.jsp-product-tile .jsp-damage-panel {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.96);
	color: #fff;
	padding: 18px;
	border-radius: 10px;
	z-index: 6;
	display: none;
	flex-direction: column;
}
.jsp-product-tile .jsp-damage-panel.is-open { display: flex; }
.jsp-product-tile .jsp-damage-title {
	font-weight: 700;
	font-size: 0.95em;
	margin-bottom: 10px;
}
.jsp-product-tile .jsp-damage-text {
	font-size: 0.85em;
	line-height: 1.5;
	overflow-y: auto;
}

/* No fixed-column mobile override here anymore - auto-fill above already
   drops to a single 310px+ column on narrow viewports on its own, and a
   forced repeat(2,1fr) on a phone-width screen would make tiles narrower
   than the 310px corner-button floor and bring back the overlap. */

/* ==========================================================================
   Sorting dropdown + pagination: pill style lifted from to.mikup.pl's own
   pagination.css (rounded white pills, lift-and-highlight on hover, solid
   accent-colored "current" pill), recolored rust instead of blue/purple.
   ========================================================================== */
.storefront-sorting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0 8px;
}
.storefront-sorting .woocommerce-ordering { margin: 0; order: 1; }
.storefront-sorting .woocommerce-pagination { margin: 0; order: 2; }

.woocommerce-ordering { margin: 0 0 24px; }
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 45px;
	padding: 0 36px 0 18px;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233b2313' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--jsp-dark);
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid var(--jsp-border);
	box-shadow: 0 2px 5px rgba(26,26,26,0.04);
	cursor: pointer;
	transition: all 0.2s ease;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
	border-color: var(--jsp-rust);
	color: var(--jsp-rust-dark);
	outline: none;
}

.woocommerce-pagination { margin: 40px 0; }
.woocommerce-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers li { display: contents; }
/* !important throughout this block: Storefront's own default pagination
   CSS (.woocommerce-pagination .page-numbers li .page-numbers {...}) has
   one more class in its selector chain than a plain
   ".woocommerce-pagination .page-numbers a" rule, so it wins on
   specificity regardless of source order - notably border-left-width:0
   (assumes pills sit flush together with no gap, which isn't true here -
   left every pill missing its left border once gap:10px was added) and a
   dark #2c2d33 fill on .current that clashed with our accent gradient. */
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 16px !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--jsp-dark) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	font-family: inherit;
	border: 1px solid var(--jsp-border) !important;
	transition: all 0.2s ease;
	box-shadow: 0 2px 5px rgba(26,26,26,0.04);
	/* Replace the browser's default black focus ring (shown after a click,
	   not just keyboard nav) with one that matches the rest of the site. */
	outline: none;
}
.woocommerce-pagination .page-numbers a:hover {
	border-color: var(--jsp-rust) !important;
	color: var(--jsp-rust-dark) !important;
	background: #f6f6f6 !important;
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(193,113,47,0.15);
}
.woocommerce-pagination .page-numbers a:focus-visible {
	box-shadow: 0 0 0 3px rgba(208,128,48,0.35);
}
.woocommerce-pagination .page-numbers .current {
	background: var(--jsp-grad) !important;
	color: #fff !important;
	/* Same border weight/color family as the plain pills (instead of
	   transparent) so the active pill still reads as "bordered" like its
	   siblings, just filled with the accent gradient. */
	border: 1px solid var(--jsp-rust-dark) !important;
	box-shadow: 0 2px 6px rgba(160,80,0,0.25);
}
.woocommerce-pagination .page-numbers .next,
.woocommerce-pagination .page-numbers .prev {
	font-size: 20px;
	background: #f5f5f5 !important;
}

/* ==========================================================================
   Buttons / prices elsewhere on the site (single product page, cart, etc.)
   ========================================================================== */
.price ins { color: var(--jsp-red); font-weight: 700; text-decoration: none; }
.price del { color: var(--jsp-muted); opacity: 1; }
.onsale { background-color: var(--jsp-red) !important; color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 0.75em; }
.jsp-omnibus-lowest-price { font-size: 0.75em; color: var(--jsp-muted); margin-top: 2px; }

.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit {
	background-color: var(--jsp-rust);
	color: #fff;
	border-radius: 4px;
	border: none;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background-color: var(--jsp-rust-dark);
	color: #fff;
}

/* ==========================================================================
   Footer menu bar
   ========================================================================== */
.jsp-footer { background: #f5f5f5; border-top: 1px solid var(--jsp-border); padding: 10px 0; }
.jsp-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 16px 0 8px;
	gap: 24px;
}
.jsp-footer-nav a {
	color: var(--jsp-dark);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
}
.jsp-footer-nav a:hover { color: var(--jsp-rust-dark); }
.jsp-footer-copy { text-align: center; color: var(--jsp-muted); font-size: 0.8em; margin: 0 0 12px; }

/* ==========================================================================
   Cart drawer: slides in from the right on cart-icon click (cart-drawer.js),
   built and populated entirely client-side against the WooCommerce Store
   API, so no server markup for it lives in header.php.
   ========================================================================== */
.jsp-cart-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.45);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.jsp-cart-backdrop.is-visible { opacity: 1; pointer-events: auto; }

body.jsp-cart-open { overflow: hidden; }

.jsp-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	/* 1/4 of the viewport on wide screens, never so narrow it stops being
	   usable (min-width) and never wider than the viewport on small/mobile
	   screens (max-width, where min-width would otherwise win outright). */
	width: 25vw;
	min-width: 380px;
	max-width: 92vw;
	background: #fff;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 30px rgba(26, 26, 26, 0.18);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	font-family: var(--jsp-font-ui);
}
.jsp-cart-drawer.is-open { transform: translateX(0); }

.jsp-cart-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--jsp-border);
	flex-shrink: 0;
}
.jsp-cart-drawer-head h2 { margin: 0; font-size: 1.15em; color: var(--jsp-dark); }
.jsp-cart-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--jsp-muted);
	cursor: pointer;
	padding: 0 4px;
}
.jsp-cart-close:hover { color: var(--jsp-rust-dark); }

.jsp-cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.jsp-cart-loading, .jsp-cart-empty { color: var(--jsp-muted); text-align: center; margin: 30px 0; }

/* Three fixed-ish columns (image / name+price / qty+remove) instead of the
   old flex-with-stacked-qty-row layout. Before this, a short product name
   left a big empty gap before the right-aligned "Usuń" link while a long,
   2-line-wrapping name pushed the whole qty row down by a different amount
   each time - rows never lined up with each other ("rozjeżdżały się").
   Putting qty+remove in their own fixed-width right column means that
   column sits in the exact same X position on every row regardless of how
   the name wraps. */
.jsp-cart-line {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--jsp-border);
}
.jsp-cart-line-img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	background: #f5f5f5;
}
.jsp-cart-line-info { min-width: 0; }
.jsp-cart-line-name {
	display: block;
	color: var(--jsp-dark);
	font-weight: 700;
	font-size: 0.92em;
	text-decoration: none;
	margin-bottom: 4px;
	overflow-wrap: break-word;
}
.jsp-cart-line-name:hover { color: var(--jsp-rust-dark); }
.jsp-cart-line-price { color: var(--jsp-rust-dark); font-weight: 700; font-size: 0.9em; }
.jsp-cart-line-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.jsp-cart-line-qty { display: flex; align-items: center; gap: 6px; }
.jsp-qty-btn {
	/* Plain <button> elements carry their own UA padding/line-height, which
	   at this small a size left the −/+ glyphs squashed into a corner
	   instead of centered - flex + padding:0 pins them dead-center
	   regardless of the browser's button defaults. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid var(--jsp-border);
	background: #f6f6f6;
	color: var(--jsp-dark);
	font-size: 15px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	flex-shrink: 0;
}
.jsp-qty-btn:hover { border-color: var(--jsp-rust); color: var(--jsp-rust-dark); }
.jsp-qty-val { min-width: 16px; text-align: center; font-weight: 700; font-size: 0.85em; font-variant-numeric: tabular-nums; }
.jsp-cart-remove {
	background: none;
	border: none;
	color: var(--jsp-muted);
	text-decoration: underline;
	font-size: 0.8em;
	cursor: pointer;
	padding: 0;
}
.jsp-cart-remove:hover { color: var(--jsp-red); }
.jsp-cart-line.is-updating { opacity: 0.5; }

/* Coupon form */
.jsp-cart-coupon { padding: 16px 0; border-bottom: 1px solid var(--jsp-border); }
.jsp-cart-coupon-row { display: flex; gap: 8px; }
.jsp-cart-coupon-input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--jsp-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.85em;
	color: var(--jsp-dark);
	background: #f6f6f6;
}
.jsp-cart-coupon-input:focus { outline: none; border-color: var(--jsp-rust); }
.jsp-cart-coupon-apply {
	flex-shrink: 0;
	background: var(--jsp-rust);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	font-size: 0.82em;
	font-weight: 700;
	cursor: pointer;
}
.jsp-cart-coupon-apply:hover { background: var(--jsp-rust-dark); }
.jsp-cart-coupon-apply:disabled { opacity: 0.6; cursor: default; }
.jsp-cart-coupon-msg { font-size: 0.8em; margin-top: 6px; color: var(--jsp-muted); }
.jsp-cart-coupon-msg.is-error { color: var(--jsp-red); }
.jsp-cart-coupon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jsp-cart-coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f6f6f6;
	border: 1px solid var(--jsp-border);
	border-radius: 999px;
	padding: 5px 6px 5px 12px;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--jsp-rust-dark);
}
.jsp-cart-coupon-remove {
	background: rgba(26, 26, 26, 0.08);
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	line-height: 1;
	font-size: 13px;
	color: var(--jsp-dark);
	cursor: pointer;
}
.jsp-cart-coupon-remove:hover { background: var(--jsp-red); color: #fff; }

/* Shipping / payment info blocks: progress bar + short summary line +
   graphical method chips, with the full breakdown tucked behind an
   expand button instead of always shown. */
.jsp-cart-info-block { padding: 16px 0; border-bottom: 1px solid var(--jsp-border); }
.jsp-cart-info-msg { font-size: 0.9em; color: var(--jsp-dark); margin-bottom: 8px; }
.jsp-cart-info-msg strong { color: var(--jsp-rust-dark); }
.jsp-cart-progress { height: 6px; border-radius: 999px; background: var(--jsp-border); overflow: hidden; margin-bottom: 10px; }
.jsp-cart-progress-bar { height: 100%; background: var(--jsp-grad); border-radius: 999px; transition: width 0.3s ease; }
.jsp-cart-summary-line { font-size: 0.88em; color: var(--jsp-dark); margin-bottom: 12px; }
.jsp-cart-summary-line strong { color: var(--jsp-rust-dark); }
.jsp-cart-info-title { font-weight: 700; color: var(--jsp-dark); margin-bottom: 10px; font-size: 0.95em; }

.jsp-cart-method-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.jsp-cart-method-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f6f6f6;
	border: 1px solid var(--jsp-border);
	border-radius: 999px;
	padding: 7px 12px 7px 8px;
	font-size: 0.78em;
	font-weight: 700;
	color: var(--jsp-dark);
}
.jsp-cart-method-chip svg { color: var(--jsp-rust-dark); flex-shrink: 0; }
.jsp-icon-blik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jsp-rust-dark);
	color: #fff;
	border-radius: 4px;
	padding: 2px 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.jsp-cart-expand-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--jsp-rust-dark);
	font-weight: 700;
	font-size: 0.82em;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
}
.jsp-cart-expand-btn:hover { text-decoration: underline; }
.jsp-expand-arrow { display: inline-block; transition: transform 0.2s ease; font-size: 0.9em; }
.jsp-cart-expand-btn.is-active .jsp-expand-arrow { transform: rotate(180deg); }

.jsp-cart-detail-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
	overflow: hidden;
}
.jsp-cart-detail-panel.is-expanded { grid-template-rows: 1fr; margin-top: 12px; }
.jsp-cart-detail-panel > * { min-height: 0; overflow: hidden; }
.jsp-cart-info-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.85em; color: var(--jsp-muted); }
.jsp-cart-info-list li { padding: 2px 0; }
.jsp-cart-info-link { display: inline-block; font-size: 0.82em; font-weight: 700; color: var(--jsp-rust-dark); text-decoration: none; margin-top: 4px; }
.jsp-cart-info-link:hover { text-decoration: underline; }
.jsp-cart-payment-detail-item { padding: 6px 0; }
.jsp-cart-payment-detail-item strong { display: block; font-size: 0.85em; color: var(--jsp-dark); margin-bottom: 2px; }
.jsp-cart-payment-detail-item p { margin: 0; font-size: 0.82em; color: var(--jsp-muted); line-height: 1.4; }

/* Suggested products: small image-only tiles, name/price/add-to-cart
   revealed on hover - same interaction language as the main shop grid
   (.jsp-product-tile), just scaled down for the drawer. */
.jsp-cart-suggested { padding-top: 16px; }
.jsp-cart-suggested-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jsp-suggest-tile {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}
.jsp-suggest-tile-link { display: block; width: 100%; height: 100%; }
.jsp-suggest-tile-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsp-suggest-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 8px;
	background: linear-gradient(to top, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.94) 55%, rgba(26,26,26,0) 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.jsp-suggest-tile:hover .jsp-suggest-tile-overlay,
.jsp-suggest-tile:focus-within .jsp-suggest-tile-overlay {
	opacity: 1;
	pointer-events: auto;
}
.jsp-suggest-tile-name {
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.jsp-suggest-tile-price { color: #ffd7b0; font-size: 0.75em; font-weight: 700; margin-bottom: 5px; }
.jsp-suggest-tile-add {
	width: 100%;
	background: var(--jsp-rust);
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 5px 0;
	font-size: 0.68em;
	font-weight: 700;
	cursor: pointer;
}
.jsp-suggest-tile-add:hover { background: var(--jsp-rust-dark); }
.jsp-suggest-tile-add:disabled { opacity: 0.6; cursor: default; }

.jsp-cart-drawer-foot {
	flex-shrink: 0;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--jsp-border);
	background: #fff;
}
.jsp-cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.05em; color: var(--jsp-dark); }
.jsp-cart-total strong { color: var(--jsp-rust-dark); font-size: 1.15em; }
.jsp-cart-actions { display: flex; gap: 10px; }
.jsp-cart-actions .button {
	flex: 1;
	text-align: center;
	padding: 12px 10px;
	border-radius: 8px !important;
	font-size: 0.85em;
	font-weight: 700;
}
.jsp-cart-view { background: #f6f6f6 !important; color: var(--jsp-dark) !important; border: 1px solid var(--jsp-border) !important; }
.jsp-cart-view:hover { border-color: var(--jsp-rust) !important; color: var(--jsp-rust-dark) !important; }
.jsp-cart-checkout { background: var(--jsp-rust) !important; color: #fff !important; }
.jsp-cart-checkout:hover { background: var(--jsp-rust-dark) !important; }

@media (max-width: 480px) {
	.jsp-cart-suggested-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Single product page: hero (gallery | title+price+cart+shipping+actions),
   then a two-column description (manufacturer | damage), then full-width
   notes. Replaces Storefront/WooCommerce's default tabbed-description
   layout entirely (see woocommerce/content-single-product.php).
   ========================================================================== */
.jsp-single-product {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}

.jsp-product-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 50px;
}
.jsp-product-hero-gallery img { border-radius: 10px; }
.jsp-product-hero-gallery .onsale {
	background: var(--jsp-red) !important;
	text-transform: none !important;
	border-radius: 6px !important;
}

.jsp-product-hero-summary { min-width: 0; }
.jsp-product-hero-summary .product_title {
	font-size: 1.8em;
	color: var(--jsp-dark);
	margin: 0 0 12px;
	line-height: 1.25;
}
.jsp-product-hero-summary .price {
	display: block;
	font-size: 1.4em;
	color: var(--jsp-rust-dark);
	font-weight: 700;
	margin-bottom: 22px;
}
.jsp-product-hero-summary .price ins { color: var(--jsp-red); text-decoration: none; font-weight: 700; }
.jsp-product-hero-summary .price del { color: var(--jsp-muted); opacity: 1; margin-right: 10px; font-size: 0.75em; }

.jsp-product-cart-row { margin-bottom: 22px; }
.jsp-product-cart-row form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jsp-product-cart-row .quantity { margin: 0; }
.jsp-product-cart-row input.qty {
	width: 64px;
	padding: 13px 10px;
	border: 1px solid var(--jsp-border);
	border-radius: 8px;
	text-align: center;
	font-family: inherit;
	font-size: 1em;
	box-sizing: border-box;
}
.jsp-product-cart-row .single_add_to_cart_button {
	background: var(--jsp-rust) !important;
	color: #fff !important;
	padding: 14px 32px !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 1em !important;
	border: none !important;
}
.jsp-product-cart-row .single_add_to_cart_button:hover { background: var(--jsp-rust-dark) !important; }

/* The Stripe plugin auto-injects a large Apple Pay/Google Pay "Express
   Checkout" widget right after the add-to-cart form (hooked into
   woocommerce_after_add_to_cart_form, so it lands inside .jsp-product-cart-
   row) - replaced by the small payment-method icon row below instead. Not
   disabled at the gateway-settings level, just hidden here so the cart/
   checkout pages (where it's more useful) keep it. */
.jsp-product-cart-row [id*="express-checkout"] { display: none !important; }

.jsp-product-payment-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.jsp-product-payment-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f6f6f6;
	border: 1px solid var(--jsp-border);
	border-radius: 999px;
	padding: 7px 12px 7px 8px;
	font-size: 0.78em;
	font-weight: 700;
	color: var(--jsp-dark);
}
.jsp-product-payment-chip svg { color: var(--jsp-rust-dark); flex-shrink: 0; }

.jsp-product-shipping-info {
	background: #f6f6f6;
	border: 1px solid var(--jsp-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 20px;
	font-size: 0.9em;
}
.jsp-product-shipping-row { color: var(--jsp-dark); margin-bottom: 4px; }
.jsp-product-shipping-row strong { color: var(--jsp-rust-dark); }
.jsp-product-shipping-link { display: inline-block; margin-top: 4px; font-size: 0.9em; font-weight: 700; color: var(--jsp-rust-dark); text-decoration: none; }
.jsp-product-shipping-link:hover { text-decoration: underline; }

.jsp-product-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jsp-product-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #f6f6f6;
	border: 1px solid var(--jsp-border);
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 0.85em;
	font-weight: 700;
	font-family: inherit;
	color: var(--jsp-dark);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.jsp-product-action:hover { border-color: var(--jsp-rust); color: var(--jsp-rust-dark); }
.jsp-product-action svg { flex-shrink: 0; }

.jsp-product-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--jsp-border);
	margin-bottom: 40px;
}
.jsp-product-col-title {
	font-size: 1.2em;
	color: var(--jsp-dark);
	margin: 0 0 16px;
}
.jsp-product-col-damage .jsp-product-col-title { color: var(--jsp-dark); }
.jsp-product-desc-text,
.jsp-damage-full-text {
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--jsp-dark);
}
.jsp-no-damage { font-size: 0.9em; color: var(--jsp-muted); font-style: italic; }

.jsp-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}
.jsp-photo-grid-item {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}
.jsp-photo-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.jsp-photo-grid-item:hover img { transform: scale(1.06); }

.jsp-product-notes {
	background: #f6f6f6;
	border-radius: 10px;
	padding: 26px;
	margin-bottom: 40px;
}
.jsp-product-notes .jsp-product-col-title { margin-bottom: 12px; }
.jsp-product-notes-text { font-size: 0.92em; line-height: 1.6; color: var(--jsp-dark); }

@media (min-width: 783px) {
	/* Desktop only - keep the two-column hero readable if this width range
	   is ever hit with a narrower custom container than 1200px elsewhere. */
	.jsp-product-hero,
	.jsp-product-columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media print {
	.jsp-nav-fixed-wrapper,
	.jsp-footer,
	.jsp-cart-backdrop,
	.jsp-cart-drawer,
	.jsp-product-actions,
	.jsp-product-cart-row {
		display: none !important;
	}
}

/* ==========================================================================
   Mobile browsing feed - styled after m.mikup.pl's app-like vertical swipe
   feed: one full-screen product per scroll-snapped slide, infinite-loaded
   (feed-mobile.js). This *replaces* the product grid (shop/category/search)
   and the desktop hero/columns/notes (single-product) below the mobile
   breakpoint - it doesn't layer on top of either (see the display:none
   pairs right below). "Dodaj do koszyka" on each slide takes the spot
   m.mikup.pl uses for its "Oferta" button, since this shop sells directly
   rather than linking out to a marketplace listing.
   ========================================================================== */
.jsp-feed,
.jsp-mobile-sheet-backdrop,
.jsp-mobile-sheet,
.jsp-menu-overlay,
.jsp-menu-panel,
.jsp-gallery-overlay {
	display: none;
}

@media (max-width: 782px) {
	.jsp-product-hero,
	.jsp-product-columns,
	.jsp-product-notes,
	.jsp-grid,
	.storefront-sorting {
		display: none;
	}
	.jsp-single-product { padding: 0; max-width: none; }
	.jsp-feed { display: block; }

	/* The always-expanded vertical category list only makes sense when it's
	   the sole way to browse categories on mobile - now that every page
	   with a feed also has the "Menu" bottom-sheet button for that, hide the
	   bar sitewide on mobile so the header stays as compact as m.mikup.pl's. */
	.jsp-nav-menu { display: none; }
}

.jsp-feed {
	height: calc(100vh - var(--jsp-header-h, 120px));
	height: calc(100dvh - var(--jsp-header-h, 120px));
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}
.jsp-feed-loading,
.jsp-feed-end,
.jsp-feed-error {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--jsp-muted);
	font-size: 0.9em;
	text-align: center;
	padding: 0 30px;
}
.jsp-feed-end p, .jsp-feed-error p { margin: 0; }
.jsp-feed-end-menu-btn {
	background: var(--jsp-rust);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-size: 0.95em;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
.jsp-feed-end-menu-btn:active { background: var(--jsp-rust-dark); }

.jsp-feed-slide {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.jsp-mobile-product-image {
	position: relative;
	flex: 1;
	min-height: 0;
	background: #f5f5f5;
	overflow: hidden;
	cursor: pointer;
}
/* contain, not cover - cover was cropping both left and right edges off
   any product photo wider/squarer than this tall slide (reported: "obie
   strony są przycięte"). The container's own background color fills the
   letterbox gaps above/below instead, so the whole photo stays visible. */
.jsp-mobile-product-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jsp-mobile-onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--jsp-red);
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
	padding: 6px 14px;
	border-radius: 6px;
}

.jsp-mobile-product-info {
	flex-shrink: 0;
	background: var(--jsp-dark);
	padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
	box-sizing: border-box;
}
.jsp-mobile-product-title {
	color: #fff;
	font-size: 1.15em;
	line-height: 1.3;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jsp-mobile-product-price {
	color: #ffd7b0;
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: 14px;
}
.jsp-mobile-product-price ins { color: #ffd7b0; text-decoration: none; }
.jsp-mobile-product-price del { color: rgba(255, 255, 255, 0.55); font-size: 0.8em; margin-right: 8px; }

/* Omnibus-directive disclosure, only present when the product is on sale -
   pulled up against the price's own bottom margin so spacing on non-sale
   slides (which never render this element) is unaffected. */
.jsp-mobile-lowest-price {
	margin: -10px 0 14px;
	font-size: 0.7em;
	color: rgba(255, 255, 255, 0.55);
}

.jsp-mobile-add-to-cart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--jsp-rust);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px;
	font-size: 1em;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 14px;
}
.jsp-mobile-add-to-cart:active { background: var(--jsp-rust-dark); }
.jsp-mobile-add-to-cart:disabled { opacity: 0.7; }

.jsp-mobile-action-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
.jsp-mobile-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 10px;
	padding: 10px 4px;
	color: #fff;
	text-decoration: none;
	font-family: inherit;
	cursor: pointer;
}
.jsp-mobile-action svg { flex-shrink: 0; }
.jsp-mobile-action span { font-size: 0.66em; font-weight: 700; text-align: center; line-height: 1.2; }
.jsp-mobile-action:active { background: rgba(255, 255, 255, 0.16); }

.jsp-mobile-action-cart { position: relative; }
.jsp-mobile-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--jsp-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-sizing: border-box;
}

/* Bottom sheets: Opis / Uszkodzenie / Menu content, reusing the exact same
   jsp_render_manufacturer_column() / jsp_render_damage_column() output the
   desktop two-column section uses, just presented as a slide-up sheet. */
.jsp-mobile-sheet-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.55);
	z-index: 10100;
}
.jsp-mobile-sheet-backdrop.is-open { display: block; }

.jsp-mobile-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 80vh;
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -10px 30px rgba(26, 26, 26, 0.2);
	z-index: 10101;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	flex-direction: column;
}
.jsp-mobile-sheet.is-open { display: flex; transform: translateY(0); }
.jsp-mobile-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--jsp-border);
	flex-shrink: 0;
}
.jsp-mobile-sheet-head h2 { margin: 0; font-size: 1.1em; color: var(--jsp-dark); }
.jsp-mobile-sheet-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--jsp-muted);
	cursor: pointer;
	padding: 0 4px;
}
.jsp-mobile-sheet-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.jsp-mobile-panel-subtitle { font-size: 1em; color: var(--jsp-dark); margin: 20px 0 10px; }

.jsp-mobile-sheet-close-wide {
	flex-shrink: 0;
	width: calc(100% - 40px);
	box-sizing: border-box;
	background: #f5f5f5;
	border: none;
	border-radius: 10px;
	color: var(--jsp-dark);
	font-weight: 700;
	font-family: inherit;
	font-size: 0.95em;
	padding: 13px;
	margin: 8px 20px calc(14px + env(safe-area-inset-bottom));
	cursor: pointer;
}
.jsp-mobile-sheet-close-wide:active { background: var(--jsp-border); }

body.jsp-mobile-sheet-open { overflow: hidden; }

/* ---- Menu: left-sliding side panel (matches m.mikup.pl's own Menu panel
   shape/structure), distinct from the Opis/Uszkodzenie bottom sheets above -
   promotions-only toggle, sort cycle, expandable category groups with
   thumbnails, light/dark toggle, contact link. ---- */
.jsp-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10100;
}
.jsp-menu-overlay.is-open { display: block; }

.jsp-menu-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 82%;
	max-width: 320px;
	background: var(--jsp-dark);
	z-index: 10101;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	flex-direction: column;
	overflow: hidden;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
.jsp-menu-panel.is-open { display: flex; transform: translateX(0); }

.jsp-menu-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 18px 14px;
	flex-shrink: 0;
}
.jsp-menu-panel-head h2 { margin: 0; color: #fff; font-size: 1.15em; }
.jsp-menu-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.jsp-menu-panel-body { flex: 1; overflow-y: auto; padding: 0 14px 14px; }

.jsp-menu-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.07);
	border: none;
	border-radius: 12px;
	padding: 13px 14px;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.88em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	margin-bottom: 8px;
}
.jsp-menu-btn svg, .jsp-menu-btn .jsp-icon-blik { flex-shrink: 0; }
.jsp-menu-btn.is-active { background: var(--jsp-grad); }
.jsp-menu-btn-check {
	margin-left: auto;
	opacity: 0;
}
.jsp-menu-btn.is-active .jsp-menu-btn-check { opacity: 1; }
.jsp-menu-expand-arrow { margin-left: auto; transition: transform 0.2s ease; }
.jsp-menu-btn.is-expanded .jsp-menu-expand-arrow { transform: rotate(180deg); }

.jsp-menu-sep { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 12px 0; }

.jsp-menu-cat-section {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.jsp-menu-cat-section.is-open { grid-template-rows: 1fr; margin-bottom: 8px; }
.jsp-menu-cat-section > div { min-height: 0; overflow: hidden; }

.jsp-menu-cat-group { margin-bottom: 14px; padding: 0 2px; }
.jsp-menu-cat-group-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.jsp-menu-cat-group-head img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	border-radius: 5px;
	background: #fff;
	display: block;
	flex-shrink: 0;
}
.jsp-menu-cat-title {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
}
.jsp-menu-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jsp-menu-cat-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: #fff;
	padding: 8px 2px;
	border-radius: 10px;
}
.jsp-menu-cat-link:active { background: rgba(255, 255, 255, 0.08); }
.jsp-menu-cat-link.is-selected { background: var(--jsp-grad); color: #fff; }
.jsp-menu-cat-link img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	display: block;
}
.jsp-menu-cat-link span { font-size: 0.66em; text-align: center; line-height: 1.2; }

.jsp-menu-info-section {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.jsp-menu-info-section.is-open { grid-template-rows: 1fr; margin-bottom: 8px; }
.jsp-menu-info-section > div { min-height: 0; overflow: hidden; }
.jsp-menu-info-link {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 0.85em;
	font-weight: 600;
	padding: 11px 10px;
	border-radius: 8px;
}
.jsp-menu-info-link:active { background: rgba(255, 255, 255, 0.08); }

.jsp-menu-close-wide {
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	font-family: inherit;
	padding: 13px;
	margin: 8px 14px 14px;
	width: calc(100% - 28px);
	cursor: pointer;
}

/* ---- Light theme: now the default (per request; m.mikup.pl itself
   defaults to dark, but this shop doesn't) -
   the "Tryb jasny/ciemny" toggle in the menu panel flips this attribute on
   <html>, persisted in localStorage by feed-mobile.js. Only the two
   components that actually use the dark "app" look need overrides - the
   Opis/Uszkodzenie bottom sheets are already light/white regardless. ---- */
html[data-jsp-theme="light"] .jsp-mobile-product-info { background: #fff; }
html[data-jsp-theme="light"] .jsp-mobile-product-title { color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-mobile-product-price { color: var(--jsp-rust-dark); }
html[data-jsp-theme="light"] .jsp-mobile-product-price ins { color: var(--jsp-rust-dark); }
html[data-jsp-theme="light"] .jsp-mobile-product-price del { color: var(--jsp-muted); }
html[data-jsp-theme="light"] .jsp-mobile-lowest-price { color: var(--jsp-muted); }
html[data-jsp-theme="light"] .jsp-mobile-action { background: #f5f5f5; color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-mobile-action:active { background: #d6d6d6; }

html[data-jsp-theme="light"] .jsp-menu-panel { background: #fff; }
html[data-jsp-theme="light"] .jsp-menu-panel-head h2 { color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-close { color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-btn { background: #f5f5f5; color: var(--jsp-dark); }
/* The plain light-theme .jsp-menu-btn rule above has higher specificity
   (extra html[] attribute selector) than the base, un-themed
   .jsp-menu-btn.is-active{background:var(--jsp-grad)} rule, so it was
   winning and leaving the active button's light beige background in place
   under white is-active text - invisible. Re-declare the gradient here,
   scoped to light theme, so it actually wins. */
html[data-jsp-theme="light"] .jsp-menu-btn.is-active { background: var(--jsp-grad); color: #fff; }
html[data-jsp-theme="light"] .jsp-menu-sep { background: var(--jsp-border); }
html[data-jsp-theme="light"] .jsp-menu-cat-title { color: var(--jsp-muted); }
html[data-jsp-theme="light"] .jsp-menu-cat-link { color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-cat-link:active { background: #f5f5f5; }
html[data-jsp-theme="light"] .jsp-menu-cat-link.is-selected { color: #fff; }
html[data-jsp-theme="light"] .jsp-menu-close-wide { background: #f5f5f5; color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-info-link { color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-info-link:active { background: #f5f5f5; }

/* ---- Image tap → full-screen gallery of every photo for that product ---- */
.jsp-gallery-overlay {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 10200;
	flex-direction: column;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
.jsp-gallery-overlay.is-open { display: flex; }
.jsp-gallery-close {
	position: absolute;
	top: calc(16px + env(safe-area-inset-top));
	right: 16px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.jsp-gallery-track {
	flex: 1;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.jsp-gallery-track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: start;
}
.jsp-gallery-dots {
	position: absolute;
	bottom: calc(20px + env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.jsp-gallery-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}
.jsp-gallery-dot.is-active { background: #fff; }

/* Cena "nowego" (2026-09-09) - kafelek, karta produktu i slajd feedu. */
.jsp-new-retail{font-size:.8em;line-height:1.3;margin-top:3px;color:#6b7280}
.jsp-new-retail s{opacity:.85}
.jsp-new-retail b{font-weight:700;color:#0f6b66}
.jsp-feed-slide .jsp-new-retail{font-size:.9rem;margin-top:2px}
html[data-jsp-theme="dark"] .jsp-new-retail{color:#b8c0bb}
html[data-jsp-theme="dark"] .jsp-new-retail b{color:#5fc2b8}

/* ==========================================================================
   Audyt 2026-09-09 - poprawki wizualne
   ========================================================================== */

/* Galeria produktu: Storefront zweza .woocommerce-product-gallery do ~41%
   szerokosci (float) - w naszej kolumnie 50% dawalo to ~190 px zdjecia przy
   1280 px. Kolumna ma byc galeria w calosci. */
.jsp-product-hero { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.jsp-product-hero .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin-bottom: 0;
}
.jsp-product-hero .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.jsp-product-hero .flex-control-thumbs li { width: 16.66%; }
@media (max-width: 900px) { .jsp-product-hero { grid-template-columns: 1fr; } }

/* Koszyk (blok WooCommerce) na telefonie: tabela pozycji wychodzila poza
   kolumne (398 px w 330 px) i obcinala sume oraz "Oszczedzasz". */
.wc-block-cart .wc-block-cart-items { table-layout: fixed; width: 100%; max-width: 100%; }
.wc-block-cart .wc-block-cart-items td,
.wc-block-cart .wc-block-cart-items th { overflow-wrap: anywhere; min-width: 0; }
.wc-block-cart .wc-block-components-product-name { overflow-wrap: anywhere; }
@media (max-width: 480px) {
	.wc-block-cart .wc-block-cart-item__total { padding-left: 4px; }
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__image { width: 64px; }
}

/* Ekspresowa kasa (Stripe): pusta ramka + osierocone "LUB" przez kilka
   sekund, zanim (jesli w ogole) zamontuja sie Apple/Google Pay. Chowamy do
   czasu pojawienia sie realnego przycisku. */
.wc-block-components-express-payment:not(:has(button, iframe)) { display: none; }
.wc-block-components-express-payment:not(:has(button, iframe)) + .wc-block-components-express-payment-continue-rule { display: none; }

/* Podpowiedz o przytrzymaniu w menu kategorii (feed). */
.jsp-menu-hint { margin: 0 0 10px; font-size: 0.82rem; color: #8a8f8c; line-height: 1.35; }

/* Chipy aktywnych kategorii nad feedem. */
.jsp-feed-chips {
	position: fixed;
	left: 10px; right: 10px;
	top: 64px;
	z-index: 30;
	display: flex; flex-wrap: wrap; gap: 6px;
	pointer-events: none;
}
.jsp-feed-chips[hidden] { display: none; }
.jsp-feed-chip {
	pointer-events: auto;
	border: 0; border-radius: 999px;
	padding: 6px 12px;
	font: 600 0.82rem/1 inherit;
	background: rgba(26,26,26,0.86); color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.jsp-feed-chip span[aria-hidden] { margin-left: 4px; opacity: 0.8; }
.jsp-feed-chip-clear { background: rgba(255,255,255,0.92); color: #1a1a1a; }

/* Blokada przewijania strony pod aktywnym feedem (telefon). */
body.jsp-feed-active { overflow: hidden; height: 100dvh; }


/* ==========================================================================
   Tryb ciemny calego sklepu na telefonie (audyt 2026-09-09). Do tej pory
   "ciemny" znaczyl tylko panel produktu w feedzie i menu - naglowek, pasek
   szukania, tlo zdjecia, arkusze, koszyk, kasa i stopka zostawaly jasne.
   Ograniczone do szerokosci mobilnych: przelacznik istnieje tylko w menu
   feedu, desktop pozostaje jasny. Paleta: cieple ciemne braze (ten sam
   "rdzawy" akcent co w jasnym), nie neutralna czern.
   ========================================================================== */
@media (max-width: 782px) {
	html[data-jsp-theme="dark"] body { background: #141210; color: #eae3da; }
	html[data-jsp-theme="dark"] .site-content, html[data-jsp-theme="dark"] .content-area, html[data-jsp-theme="dark"] .entry-content, html[data-jsp-theme="dark"] .page .entry-title, html[data-jsp-theme="dark"] .woocommerce-notices-wrapper { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-nav-fixed-wrapper, html[data-jsp-theme="dark"] .jsp-nav-top-row { background: #1b1714; border-color: #2c2622; }
	html[data-jsp-theme="dark"] .jsp-nav-logo-text { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-nav-icon-btn { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-nav-icon-btn:hover, html[data-jsp-theme="dark"] .jsp-nav-icon-btn:active { background: rgba(208, 128, 48, 0.22); }
	html[data-jsp-theme="dark"] .jsp-nav-search input { background: #241f1b; border-color: #3a322c; color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-nav-search input::placeholder { color: #8f867d; }
	html[data-jsp-theme="dark"] .jsp-search-suggestions { background: #241f1b; color: #eae3da; border-color: #3a322c; }
	html[data-jsp-theme="dark"] .jsp-search-suggestion:hover, html[data-jsp-theme="dark"] .jsp-search-suggestion.is-active { background: #2c2622; }
	html[data-jsp-theme="dark"] .jsp-mobile-product-image { background: #0f0d0b; }
	html[data-jsp-theme="dark"] .jsp-feed { background: #141210; }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet { background: #1b1714; color: #eae3da; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet-head { border-color: #2c2622; }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet-head h2 { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet-close { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet-close-wide { background: #2c2622; color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-mobile-sheet-close-wide:active { background: #3a322c; }
	html[data-jsp-theme="dark"] .jsp-product-desc-text, html[data-jsp-theme="dark"] .jsp-damage-full-text, html[data-jsp-theme="dark"] .jsp-product-notes-text, html[data-jsp-theme="dark"] .jsp-mobile-panel-subtitle { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-no-damage { color: #b8ada2; }
	html[data-jsp-theme="dark"] .jsp-menu-hint { color: #8f867d; }
	html[data-jsp-theme="dark"] .jsp-feed-chip-clear { background: #eae3da; color: #1b1714; }
	html[data-jsp-theme="dark"] .jsp-footer { background: #1b1714; border-color: #2c2622; }
	html[data-jsp-theme="dark"] .jsp-footer-nav a, html[data-jsp-theme="dark"] .jsp-footer-copy { color: #b8ada2; }
	html[data-jsp-theme="dark"] .wp-block-woocommerce-cart, html[data-jsp-theme="dark"] .wp-block-woocommerce-checkout, html[data-jsp-theme="dark"] .wc-block-cart, html[data-jsp-theme="dark"] .wc-block-checkout { color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-components-sidebar-layout .wc-block-components-sidebar, html[data-jsp-theme="dark"] .wc-block-components-totals-wrapper, html[data-jsp-theme="dark"] .wc-block-components-panel, html[data-jsp-theme="dark"] .wc-block-components-order-summary, html[data-jsp-theme="dark"] .wc-block-components-checkout-step, html[data-jsp-theme="dark"] .wc-block-components-express-payment { background: transparent; border-color: #2c2622; color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-cart-items th, html[data-jsp-theme="dark"] .wc-block-components-checkout-step__description, html[data-jsp-theme="dark"] .wc-block-components-product-metadata, html[data-jsp-theme="dark"] .wc-block-components-totals-item__description { color: #b8ada2; }
	html[data-jsp-theme="dark"] .wc-block-components-product-name, html[data-jsp-theme="dark"] .wc-block-components-product-price, html[data-jsp-theme="dark"] .wc-block-components-totals-item, html[data-jsp-theme="dark"] .wc-block-components-order-summary-item, html[data-jsp-theme="dark"] .wc-block-components-checkout-step__title, html[data-jsp-theme="dark"] .wc-block-components-title, html[data-jsp-theme="dark"] .wc-block-components-shipping-rates-control__package, html[data-jsp-theme="dark"] .wc-block-components-radio-control__option, html[data-jsp-theme="dark"] .wc-block-components-radio-control__label, html[data-jsp-theme="dark"] .wc-block-components-payment-method-label, html[data-jsp-theme="dark"] .wc-block-components-checkbox__label, html[data-jsp-theme="dark"] .wc-block-components-formatted-money-amount { color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-components-text-input input, html[data-jsp-theme="dark"] .wc-block-components-select select, html[data-jsp-theme="dark"] .wc-block-components-select-input select, html[data-jsp-theme="dark"] .wc-block-components-textarea textarea, html[data-jsp-theme="dark"] .wc-block-components-combobox input, html[data-jsp-theme="dark"] .wc-block-components-country-input select, html[data-jsp-theme="dark"] .wc-block-components-state-input select { background: #241f1b; color: #eae3da; border-color: #3a322c; }
	html[data-jsp-theme="dark"] .wc-block-components-text-input label, html[data-jsp-theme="dark"] .wc-block-components-select label, html[data-jsp-theme="dark"] .wc-block-components-combobox label { color: #b8ada2; }
	html[data-jsp-theme="dark"] .wc-block-components-text-input.is-active label, html[data-jsp-theme="dark"] .wc-block-components-combobox.is-active label { color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-components-button:not(.is-secondary) { background: var(--jsp-rust); color: #fff; }
	html[data-jsp-theme="dark"] .wc-block-components-button.is-secondary, html[data-jsp-theme="dark"] .wc-block-components-button.is-link { color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-cart__submit-container, html[data-jsp-theme="dark"] .wc-block-components-radio-control__option, html[data-jsp-theme="dark"] .wc-block-components-payment-method-label { background: transparent; }
	html[data-jsp-theme="dark"] .wc-block-cart-item__image img, html[data-jsp-theme="dark"] .wc-block-components-order-summary-item__image img { background: #fff; border-radius: 6px; }
	html[data-jsp-theme="dark"] .wc-block-components-notice-banner { background: #241f1b; color: #eae3da; border-color: #3a322c; }
	html[data-jsp-theme="dark"] hr, html[data-jsp-theme="dark"] .wc-block-components-express-payment-continue-rule { border-color: #2c2622; color: #8f867d; }
}

/* Pola formularza kasy: WooCommerce Blocks styluje je selektorem z atrybutem
   (input[type=email] itd.) o wyzszej specyficznosci niz nasz - stad
   !important tylko tutaj, na tle i kolorze tekstu. */
@media (max-width: 782px) {
	html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="text"],
	html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="email"],
	html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="tel"],
	html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="number"],
	html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="url"],
	html[data-jsp-theme="dark"] .wc-block-components-combobox input,
	html[data-jsp-theme="dark"] .wc-block-components-textarea textarea,
	html[data-jsp-theme="dark"] .wc-block-components-select select,
	html[data-jsp-theme="dark"] .wc-block-components-country-input select,
	html[data-jsp-theme="dark"] .wc-block-components-state-input select {
		background-color: #241f1b !important;
		color: #eae3da !important;
		border-color: #3a322c !important;
	}
	html[data-jsp-theme="dark"] .wc-block-components-text-input input::placeholder { color: #8f867d; }
}

/* ==========================================================================
   Stan produktu (2026-09-09): badge na kafelku, slajdzie i karcie; meta na
   karcie (stan / producent / EAN); przyciski filtra w menu feedu.
   ========================================================================== */
.jsp-condition-badge {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.3;
	color: #fff;
	background: #6b7280;
	white-space: nowrap;
}
.jsp-condition-badge.jsp-cond-nowy { background: #1f7a4d; }
.jsp-condition-badge.jsp-cond-jak_nowy { background: #0f6b66; }
.jsp-condition-badge.jsp-cond-slady_uzytkowania { background: #b26a00; }
.jsp-condition-badge.jsp-cond-uszkodzony { background: var(--jsp-red); }
.jsp-condition-badge-tile { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.jsp-condition-badge-slide { align-self: flex-start; margin: 2px 0 6px; }

/* --- redesign 2026-09-09: plakietka stanu na kafelku --- */
.jsp-condition-badge-tile {
	top: 14px;
	left: auto;
	right: 14px;
	box-shadow: none;
	font-size: 0.64em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 11px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.22s ease, transform 0.28s ease;
}
.jsp-product-tile:hover .jsp-condition-badge-tile,
.jsp-product-tile:focus-within .jsp-condition-badge-tile {
	opacity: 1;
	transform: none;
}
/* Wyjatek swiadomy: uszkodzenie widac ZAWSZE, takze w spoczynku. Schowanie
   tej informacji pod najechaniem w sklepie z odzysku to problem zaufania,
   nie estetyki. */
.jsp-condition-badge-tile.jsp-cond-uszkodzony {
	opacity: 1;
	transform: none;
}

/* Urzadzenia bez kursora (tablet, laptop dotykowy): najechanie nie istnieje,
   wiec podpis i przyciski musza byc widoczne od razu - inaczej zostaje sciana
   bezimiennych zdjec bez cen. Telefon ma osobny feed i tu nie wchodzi. */
@media (hover: none) {
	.jsp-product-tile .jsp-product-overlay,
	.jsp-product-tile .add_to_cart_button,
	.jsp-condition-badge-tile {
		opacity: 1;
		transform: none;
	}
}


.jsp-product-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 14px; font-size: 0.92em; }
.jsp-product-meta > div { display: contents; }
.jsp-product-meta dt { color: var(--jsp-muted); font-weight: 600; }
.jsp-product-meta dd { margin: 0; color: var(--jsp-dark); }
.jsp-product-meta dd a { color: var(--jsp-rust-dark); }

.jsp-menu-cond-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.jsp-menu-cond {
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	color: inherit;
	border-radius: 999px;
	padding: 6px 12px;
	font: 600 0.82rem/1 inherit;
	cursor: pointer;
}
.jsp-menu-cond.is-active { background: var(--jsp-grad); color: #fff; border-color: transparent; }
html[data-jsp-theme="light"] .jsp-menu-cond { border-color: var(--jsp-border); background: #f5f5f5; color: var(--jsp-dark); }
html[data-jsp-theme="light"] .jsp-menu-cond.is-active { background: var(--jsp-grad); color: #fff; border-color: transparent; }
@media (max-width: 782px) {
	html[data-jsp-theme="dark"] .jsp-product-meta dd { color: #eae3da; }
	html[data-jsp-theme="dark"] .jsp-product-meta dt { color: #b8ada2; }
}

/* --- redesign 2026-09-09: typografia naglowkow --- */
h1, h2, h3,
.jsp-section-title,
.woocommerce-products-header__title,
.product_title {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.jsp-product-hero .price,
.jsp-product-hero .price bdi,
.summary .price,
.summary .price bdi {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* --- redesign 2026-09-09: pasek metod platnosci (oryginalne logotypy) --- */
.jsp-pay-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsp-pay-row li {
	height: 34px;
	min-width: 54px;
	padding: 0 9px;
	border: 1px solid var(--jsp-border);
	border-radius: 6px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.jsp-pay-row img {
	max-height: 20px;
	max-width: 46px;
	width: auto;
	height: auto;
	display: block;
}
.jsp-footer-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: center;
	margin: 18px 0 0;
}
.jsp-footer-pay .jsp-pay-label {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jsp-muted);
}

/* --- karta produktu: dostawa jako rozwijany przycisk (2026-09-09) --------
   Bylo: sztywna ramka "Czas dostawy / Koszt dostawy", do ktorej z gory
   dotykal pasek ikon platnosci. Teraz jeden przycisk z realna, najtansza
   kwota; szczegoly po kliknieciu. <details>/<summary> zamiast wlasnego JS -
   dziala z klawiatury i bez skryptu. */
.jsp-product-payment-icons,
.jsp-product-hero-summary .jsp-pay-row { margin-bottom: 18px; }

.jsp-ship {
	border: 1px solid var(--jsp-border);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	margin: 0 0 18px;
}
.jsp-ship[open] { box-shadow: var(--jsp-shadow-light); }
.jsp-ship-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	transition: background 0.2s ease;
}
.jsp-ship-summary::-webkit-details-marker { display: none; }
/* Podswietlenie tylko przy prawdziwym kursorze (2026-09-10): na telefonie
   :hover "przykleja sie" po stuknieciu i pole zostawalo podswietlone. */
@media (hover: hover) {
	.jsp-ship-summary:hover { background: #faf9f8; }
}
.jsp-ship-summary:focus-visible { outline: 2px solid var(--jsp-rust); outline-offset: -2px; }
.jsp-ship-icon { display: flex; color: var(--jsp-rust); flex-shrink: 0; }
.jsp-ship-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jsp-ship-lead { font-size: 0.95em; color: var(--jsp-dark); }
.jsp-ship-lead b { font-family: var(--jsp-font-display); font-weight: 800; font-size: 1.08em; }
.jsp-ship-lead .woocommerce-Price-amount { font-family: var(--jsp-font-display); }
.jsp-ship-sub { font-size: 0.8em; color: var(--jsp-muted); }
.jsp-ship-chevron { display: flex; color: var(--jsp-muted); transition: transform 0.25s ease; flex-shrink: 0; }
.jsp-ship[open] .jsp-ship-chevron { transform: rotate(180deg); }

.jsp-ship-body { padding: 4px 16px 16px; border-top: 1px solid var(--jsp-border); }
.jsp-ship-list { list-style: none; margin: 0; padding: 0; }
.jsp-ship-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--jsp-border);
}
.jsp-ship-list li:last-child { border-bottom: none; }
.jsp-ship-opt-icon { display: flex; color: var(--jsp-muted); flex-shrink: 0; }
.jsp-ship-opt-name { flex: 1; font-size: 0.9em; min-width: 0; }
.jsp-ship-opt-cost {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.jsp-ship-note { font-size: 0.8em; color: var(--jsp-muted); margin: 12px 0 0; line-height: 1.5; }
.jsp-ship-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--jsp-rust-dark);
	text-decoration: none;
}
.jsp-ship-link:hover { text-decoration: underline; }

/* --- koszyk i kasa (bloki WooCommerce), 2026-09-09 ----------------------
   Blokowy checkout renderuje sie Reactem i przychodzi z wlasnymi, bardzo
   ogolnymi stylami. Ponizej tylko to, co potrzebne, zeby wygladal jak reszta
   sklepu: te same promienie, ta sama linia, ten sam akcent i te same kroje. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart { font-family: var(--jsp-font-ui); }

.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.wc-block-components-checkout-step__title { font-size: 1.05rem; }
.wc-block-components-checkout-step__description { color: var(--jsp-muted); }

/* Pola formularza */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__container {
	border-radius: 10px !important;
	border-color: var(--jsp-border) !important;
	background: #fff;
	font-family: var(--jsp-font-ui);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__container:focus-within {
	border-color: var(--jsp-rust) !important;
	box-shadow: 0 0 0 3px rgba(242, 97, 15, 0.14) !important;
	outline: none !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label { color: var(--jsp-muted); }

/* Wybor dostawy i platnosci jako karty, nie goła lista */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 12px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control__option:hover { background: #faf9f8; }
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--jsp-rust) !important;
	background: #fffaf6;
}
.wc-block-components-radio-control__input:checked { accent-color: var(--jsp-rust); }

/* Podsumowanie zamowienia */
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 16px;
	border-color: var(--jsp-border);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.wc-block-components-product-price__value { font-weight: 600; }

/* Glowny przycisk - ten sam ksztalt i kolor co "Dodaj do koszyka" */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	background: var(--jsp-rust) !important;
	color: #fff !important;
	font-family: var(--jsp-font-ui) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 20px -8px rgba(242, 97, 15, 0.65);
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--jsp-rust-dark) !important; }
.wc-block-components-button.is-link { color: var(--jsp-rust-dark) !important; }

/* Notki i bledy w kolorach motywu */
.wc-block-components-validation-error { color: var(--jsp-red); }
.wc-block-components-notice-banner.is-error { border-color: var(--jsp-red); }

/* Lista realnych stawek wysylki w szufladzie koszyka (2026-09-09). */
.jsp-cart-rate-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.jsp-cart-rate-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jsp-cart-payment .jsp-pay-row { margin-top: 10px; }
.jsp-cart-payment .jsp-pay-row li { height: 30px; min-width: 46px; padding: 0 7px; }
.jsp-cart-payment .jsp-pay-row img { max-height: 16px; max-width: 38px; }

/* Ten sam problem, co kiedys z linkami w menu kategorii: to jest <button>,
   wiec lapal ogolna regule `button:hover { background-color: ... }` ze
   Storefronta i po najechaniu robil sie pomaranczowa pigulka. Dla przelacznika
   szczegolow to o wiele za mocny sygnal. */
.jsp-cart-expand-btn:hover,
.jsp-cart-expand-btn:focus {
	background: none !important;
	color: var(--jsp-rust) !important;
	text-decoration: underline;
}

/* =========================================================================
   Druga tura poprawek po ocenie uzytkownika (2026-09-09 wieczorem)
   ========================================================================= */

/* --- naglowek: ikony jeszcze wieksze ------------------------------------ */
.jsp-nav-icon-btn { width: 52px; height: 52px; }
.jsp-nav-icon-btn svg { width: 28px; height: 28px; }
.jsp-nav-cart-count { top: 4px; right: 2px; min-width: 19px; height: 19px; line-height: 19px; font-size: 10.5px; }

/* --- kafelek: trojkat ostrzegawczy zamiast napisu "Stan produktu" -------
   Widoczny ZAWSZE, nie tylko po najechaniu - to ostrzezenie o stanie rzeczy,
   a nie ozdoba. Klikniecie otwiera panel z opisem (product-tile.js). */
/* Plakietka stanu ustepuje miejsca trojkatowi, gdy oba sa na kafelku. */
/* Panel z opisem nie musi juz rezerwowac pasa na przycisk pod cena. */

/* --- ikony platnosci: wieksze + dymek z wyjasnieniem -------------------- */
.jsp-pay-row li {
	position: relative;
	height: 44px;
	min-width: 66px;
	padding: 0 11px;
	cursor: help;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jsp-pay-row li:hover,
.jsp-pay-row li:focus-visible {
	border-color: var(--jsp-rust);
	box-shadow: 0 4px 14px -6px rgba(20, 18, 16, 0.3);
	outline: none;
}
.jsp-pay-row img { max-height: 26px; max-width: 58px; }
.jsp-pay-tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	width: 250px;
	transform: translateX(-50%) translateY(5px);
	background: var(--jsp-dark);
	color: #fff;
	border-radius: 12px;
	padding: 11px 13px;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.22s ease, visibility 0.18s;
	z-index: 60;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
}
.jsp-pay-tip b { display: block; margin-bottom: 3px; font-size: 12.5px; }
.jsp-pay-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--jsp-dark);
}
.jsp-pay-row li:hover .jsp-pay-tip,
.jsp-pay-row li:focus-visible .jsp-pay-tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
}
/* Skrajne ikony: dymek trzymamy przy krawedzi, zeby nie wychodzil poza ekran. */
.jsp-pay-row li:first-child .jsp-pay-tip { left: 0; transform: translateX(0) translateY(5px); }
.jsp-pay-row li:first-child:hover .jsp-pay-tip,
.jsp-pay-row li:first-child:focus-visible .jsp-pay-tip { transform: translateX(0); }
.jsp-pay-row li:first-child .jsp-pay-tip::after { left: 30px; }
.jsp-pay-row li:last-child .jsp-pay-tip { left: auto; right: 0; transform: translateX(0) translateY(5px); }
.jsp-pay-row li:last-child:hover .jsp-pay-tip,
.jsp-pay-row li:last-child:focus-visible .jsp-pay-tip { transform: translateX(0); }
.jsp-pay-row li:last-child .jsp-pay-tip::after { left: auto; right: 24px; }

/* --- szuflada koszyka: dostawa w ksztalcie karty produktu ---------------- */
.jsp-cart-shipping .jsp-ship { margin: 0; }
.jsp-cart-shipping .jsp-ship-summary { padding: 12px 14px; }
.jsp-cart-shipping .jsp-ship-body { padding: 2px 14px 14px; }
.jsp-cart-payment .jsp-pay-row li { height: 38px; min-width: 56px; padding: 0 9px; }
.jsp-cart-payment .jsp-pay-row img { max-height: 21px; max-width: 46px; }
/* W waskiej szufladzie dymek na cala szerokosc bloku zamiast 250px. */
.jsp-cart-payment .jsp-pay-tip { width: 210px; }

/* --- kasa i koszyk: oddech pod belka + czytelniejsze opcje --------------- */
body.woocommerce-checkout .site-content,
body.woocommerce-cart .site-content,
body.woocommerce-account .site-content { padding-top: 34px; }
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .entry-title { margin-bottom: 28px; }

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label {
	font-weight: 500;
	font-size: 0.98rem;
}
/* Logotypy metod platnosci przy kasie byly ledwo widoczne (ok. 16px). */
.wc-block-components-radio-control__option img,
.wc-block-components-radio-control-accordion-option img,
.wc-block-components-payment-method-icons img,
.wc-block-components-payment-method-label img {
	max-height: 26px !important;
	width: auto !important;
	height: auto !important;
}
.wc-block-components-radio-control__option-layout { gap: 10px; }

/* --- panel "Stan produktu" na kafelku ------------------------------------
   Byl ciemny (rgba(26,26,26,.96) + bialy tekst), ale sama tresc usterki
   renderuje sie w .jsp-damage-full-text, ktora ma wlasna regule `color:
   var(--jsp-dark)` - napisana dla BIALEJ kolumny na karcie produktu. Efekt:
   ciemny tekst na ciemnym tle, czyli opis usterki byl niewidoczny.
   Zamiast dokladac wyjatek, panel dostaje ten sam jasny wyglad co podpis
   kafelka - jeden jezyk wizualny zamiast dwoch. */
.jsp-product-tile .jsp-damage-panel {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	color: var(--jsp-dark) !important;
	border-radius: 16px !important;
	padding: 20px 18px !important;
	cursor: pointer;
}
.jsp-product-tile .jsp-damage-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #b45309;
	font-family: var(--jsp-font-ui);
	font-size: 0.78em !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px !important;
}
.jsp-product-tile .jsp-damage-text,
.jsp-product-tile .jsp-damage-panel .jsp-damage-full-text {
	color: var(--jsp-dark) !important;
	font-size: 0.86em;
	line-height: 1.55;
	overflow-y: auto;
}
.jsp-product-tile .jsp-damage-panel::after {
	content: "Kliknij, aby zamknąć";
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.68em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jsp-muted);
}

/* --- trojkat "Stan produktu": dopracowanie (2026-09-09) ------------------
   Byl obrysem 1,5 px w 36 px kolku - na tym rozmiarze ksztalt sie gubil, a
   biale kolko na jasnym zdjeciu bylo ledwo widoczne. Teraz wypelniony
   bursztynowy trojkat z wybitym na bialo wykrzyknikiem, kolko z cienka
   obwodka i miekkim cieniem, zeby odcinalo sie takze od bialego tla. */

/* Kola wozka w naglowku zostaja pomaranczowe takze po najechaniu na
   przycisk - inaczej caly znak robilby sie jednolicie pomaranczowy i
   gubil dwutonowosc wziete z logo. */
.jsp-nav-icon-btn:hover svg circle[fill] { fill: var(--jsp-rust-dark); }

/* =========================================================================
   Miernik stanu + metka z ceną (2026-09-09, po wizualizacji)
   -------------------------------------------------------------------------
   Miernik zastąpił trójkąt ostrzegawczy: pokazuje średnią z oceny wizualnej
   i technicznej, a kliknięcie otwiera panel z obiema ocenami i opisem
   usterek. Metka z ceną wisi w prawym dolnym rogu i po najechaniu ustępuje
   miejsca przyciskowi "Dodaj do koszyka" w tym samym kształcie.
   ========================================================================= */

/* --- miernik --- */
.jsp-product-tile .jsp-cond-meter {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 3px;
	width: auto;
	height: auto;
	padding: 7px 9px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	/* Kolory warstw leżących NA ZDJĘCIU są stałe, nie z tokenów motywu:
	   zdjęcie wygląda tak samo w trybie jasnym i ciemnym, więc to, co na nim
	   leży, też musi. Token, który się przełącza, dał już raz białą metkę z
	   białym tekstem. */
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 9px rgba(20, 18, 16, 0.2);
	cursor: pointer;
	opacity: 1;
	transform: none;
	transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s ease;
}
.jsp-product-tile .jsp-cond-meter:hover {
	background: #fff;
	transform: scale(1.07);
	box-shadow: 0 4px 14px rgba(20, 18, 16, 0.28);
}
.jsp-product-tile .jsp-cond-meter:focus-visible { outline: 2px solid var(--jsp-rust); outline-offset: 3px; }
.jsp-product-tile .jsp-cond-meter i {
	display: block;
	width: 11px;
	height: 4px;
	border-radius: 2px;
	background: rgba(20, 18, 16, 0.16);
}
.jsp-cond-meter.jsp-cond-nowy i.on              { background: #5f7a4a; }
.jsp-cond-meter.jsp-cond-jak_nowy i.on          { background: #3f7a6d; }
.jsp-cond-meter.jsp-cond-slady_uzytkowania i.on { background: #e0921f; }
.jsp-cond-meter.jsp-cond-uszkodzony i.on        { background: #e2071c; }

/* --- panel stanu --- */
.jsp-product-tile .jsp-damage-panel {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	color: #141210 !important;
	border-radius: 16px !important;
	padding: 18px 17px !important;
	cursor: pointer;
	z-index: 7;
}
.jsp-product-tile .jsp-damage-title {
	font-family: var(--jsp-font-ui);
	font-size: 0.72em !important;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #6f6a64;
	margin-bottom: 11px !important;
}
.jsp-damage-panel.jsp-cond-slady_uzytkowania .jsp-damage-title { color: #b06f0c; }
.jsp-damage-panel.jsp-cond-uszkodzony .jsp-damage-title { color: var(--jsp-red); }
.jsp-cond-scores { margin-bottom: 12px; }
.jsp-cond-scores > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(20, 18, 16, 0.08);
	font-size: 0.82em;
}
.jsp-cond-scores b {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
}
.jsp-cond-scores b small { font-size: 0.7em; color: #6f6a64; font-weight: 400; }
.jsp-product-tile .jsp-damage-text,
.jsp-product-tile .jsp-damage-panel .jsp-damage-full-text,
.jsp-product-tile .jsp-damage-panel .jsp-no-damage {
	color: #141210 !important;
	font-size: 0.84em;
	line-height: 1.5;
	overflow-y: auto;
}
.jsp-product-tile .jsp-damage-panel::after {
	content: "Kliknij, aby zamknąć";
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.66em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6f6a64;
}

/* --- metka z ceną i przycisk w jej kształcie --- */
.jsp-product-tile .jsp-price-tag,
.jsp-product-tile .add_to_cart_button,
.jsp-product-tile .added_to_cart {
	position: absolute;
	right: 13px;
	bottom: 13px;
	left: auto;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 138px;
	width: auto;
	height: 42px;
	padding: 0 14px 0 20px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	box-shadow: 0 5px 16px rgba(20, 18, 16, 0.3);
	transform: rotate(-3deg);
	transform-origin: 100% 100%;
	text-decoration: none;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
}
/* dziurka na sznurek - to ona robi z prostokąta metkę */
.jsp-product-tile .jsp-price-tag::before,
.jsp-product-tile .add_to_cart_button::before,
.jsp-product-tile .added_to_cart::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.jsp-product-tile .jsp-price-tag {
	background: var(--jsp-rust);
	color: #fff;
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-size: 1.05em;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.jsp-product-tile .jsp-price-tag .woocommerce-Price-amount,
.jsp-product-tile .jsp-price-tag bdi { color: #fff !important; }
.jsp-product-tile .jsp-price-tag ins { text-decoration: none; color: #fff !important; }
.jsp-product-tile .jsp-price-tag del,
.jsp-product-tile .jsp-price-tag del bdi {
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 0.66em;
	font-weight: 400;
	margin-right: 5px;
}
.jsp-product-tile .jsp-price-tag .jsp-omnibus-lowest-price,
.jsp-product-tile .jsp-price-tag .screen-reader-text { display: none; }

.jsp-product-tile .add_to_cart_button,
.jsp-product-tile .added_to_cart {
	background: #1c1917 !important;
	color: #fff !important;
	font-family: var(--jsp-font-ui) !important;
	font-size: 0.72em !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.jsp-product-tile .add_to_cart_button:hover,
.jsp-product-tile .added_to_cart:hover { background: #000 !important; }

/* Podmiana metki na przycisk. ŚWIADOMIE bez obrotu 3D: `preserve-3d` +
   `backface-visibility` okazały się zawodne wewnątrz kafelka (element
   nadrzędny z własnym transformem spłaszcza kontekst 3D i rewers nigdy się
   nie pokazuje - sprawdzone na żywo). Ten sam efekt "przekręcenia" robi
   dwuwymiarowe ściśnięcie w pionie, a treść podmienia się dokładnie wtedy,
   gdy metka jest najcieńsza. Działa w każdej przeglądarce. */
@keyframes jsp-tag-flip {
	0%   { transform: rotate(-3deg) scaleY(1); }
	50%  { transform: rotate(-3deg) scaleY(0.04); }
	100% { transform: rotate(-3deg) scaleY(1); }
}
.jsp-product-tile .jsp-price-tag { opacity: 1; transition: opacity 0s linear 0.16s; }
.jsp-product-tile .add_to_cart_button { opacity: 0; transition: opacity 0s linear 0.16s; }
.jsp-product-tile:hover .jsp-price-tag,
.jsp-product-tile:focus-within .jsp-price-tag { opacity: 0; }
.jsp-product-tile:hover .add_to_cart_button,
.jsp-product-tile:focus-within .add_to_cart_button { opacity: 1; }
.jsp-product-tile:hover .jsp-price-tag,
.jsp-product-tile:hover .add_to_cart_button,
.jsp-product-tile:focus-within .jsp-price-tag,
.jsp-product-tile:focus-within .add_to_cart_button {
	animation: jsp-tag-flip 0.34s ease;
}
/* Po dodaniu do koszyka przycisk znika, a "Zobacz koszyk" zostaje na stałe -
   to potwierdzenie akcji, nie stan przejściowy. */
.jsp-product-tile .add_to_cart_button.added { display: none; }
.jsp-product-tile .added_to_cart { opacity: 1; }
.jsp-product-tile:has(.added_to_cart) .jsp-price-tag { opacity: 0; }

/* Podpis rezerwuje pas na metkę i pokazuje cenę tak jak wcześniej. */
.jsp-product-tile .jsp-product-overlay { padding-bottom: 70px; }
/* Plakietka stanu wypada - miernik mówi to samo, tylko dokładniej. */
.jsp-condition-badge-tile { display: none; }

@media (prefers-reduced-motion: reduce) {
	.jsp-product-tile:hover .jsp-price-tag,
	.jsp-product-tile:hover .add_to_cart_button,
	.jsp-product-tile:focus-within .jsp-price-tag,
	.jsp-product-tile:focus-within .add_to_cart_button { animation: none; }
}

/* Bez kursora (tablet, laptop dotykowy) metka zostaje na cenie, a przycisk
   pokazuje się obok niej - nie ma czym wywołać podmiany. */
@media (hover: none) {
	.jsp-product-tile .jsp-price-tag { opacity: 1 !important; animation: none !important; }
	.jsp-product-tile .add_to_cart_button {
		opacity: 1 !important;
		animation: none !important;
		right: auto;
		left: 13px;
		min-width: 0;
		padding: 0 14px !important;
	}
	.jsp-product-tile .add_to_cart_button::before { display: none; }
}

/* Wcześniejsza reguła `.jsp-product-tile:hover .add_to_cart_button` ustawia
   `transform: translateY(0)` i ma wyższą swoistość niż deklaracja przechylenia
   wyżej - bez tego przycisk po najechaniu prostował się i gubił kształt metki
   (a animacja kończyła się szarpnięciem). */
.jsp-product-tile:hover .add_to_cart_button,
.jsp-product-tile:focus-within .add_to_cart_button,
.jsp-product-tile:hover .added_to_cart,
.jsp-product-tile:focus-within .added_to_cart { transform: rotate(-3deg); }

/* =========================================================================
   Metka promocji + naprawa klikalności przycisku (2026-09-09)
   ========================================================================= */

/* BŁĄD, który to naprawia: `.jsp-price-tag` leży dokładnie na przycisku
   "Dodaj do koszyka", ma ten sam z-index i stoi PÓŹNIEJ w drzewie, więc
   malowała się nad nim i przechwytywała każde kliknięcie - także przy
   `opacity: 0`, bo przezroczystość nie wyłącza trafiania w element.
   Metka jest czystą dekoracją (aria-hidden), więc przepuszcza kliknięcia. */
.jsp-product-tile .jsp-price-tag,
.jsp-product-tile .jsp-sale-tag { pointer-events: none; }

/* --- czerwona metka promocji --- */
.jsp-product-tile .jsp-sale-tag {
	position: absolute;
	right: 13px;
	bottom: 13px;
	left: auto;
	z-index: 5; /* pod pomarańczową (6), żeby dało się za nią schować */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	min-width: 138px;
	width: auto;
	height: 42px;
	padding: 7px 14px 0 20px;
	margin: 0;
	border: 0;
	border-radius: 5px;
	background: var(--jsp-red);
	color: #fff;
	/* Cień z czerwonym podbiciem - metka odcina się od zdjęcia także wtedy,
	   gdy pod nią jest coś ciemnego. */
	box-shadow: 0 6px 18px rgba(226, 7, 28, 0.45), 0 2px 6px rgba(20, 18, 16, 0.25);
	/* W spoczynku wystaje ponad pomarańczową; po najechaniu zjeżdża dokładnie
	   pod nią i znika, bo obie metki mają ten sam rozmiar i to samo miejsce. */
	transform: translateY(-31px) rotate(-8deg);
	transform-origin: 100% 100%;
	transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
	white-space: nowrap;
}
.jsp-product-tile .jsp-sale-tag::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 15px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.jsp-product-tile .jsp-sale-tag b {
	font-family: var(--jsp-font-ui);
	font-size: 0.66em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
}
.jsp-product-tile .jsp-sale-tag s,
.jsp-product-tile .jsp-sale-tag s bdi {
	color: #fff !important;
	font-size: 0.86em;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	text-decoration-thickness: 1.5px;
}
.jsp-product-tile:hover .jsp-sale-tag,
.jsp-product-tile:focus-within .jsp-sale-tag {
	transform: translateY(0) rotate(-3deg);
}

/* Plakietka "Promocja!" w rogu zdjęcia jest już zbędna - czerwona metka
   mówi to samo i od razu podaje cenę sprzed obniżki. */
.jsp-product-tile:has(.jsp-sale-tag) .onsale { display: none; }

@media (prefers-reduced-motion: reduce) {
	.jsp-product-tile .jsp-sale-tag { transition: none; }
}

/* Bez kursora obie metki zostają widoczne obok siebie - nie ma czym wywołać
   chowania. */
@media (hover: none) {
	.jsp-product-tile .jsp-sale-tag { transform: translateY(-31px) rotate(-8deg) !important; }
}

/* =========================================================================
   Karta produktu, koszyk, kasa - tura poprawek 2026-09-09 (noc)
   ========================================================================= */

/* --- 1. Plakietka promocji na karcie produktu w kształcie metki ---------- */
.jsp-product-hero-gallery .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	height: 34px;
	min-width: 0;
	padding: 0 14px 0 22px !important;
	border-radius: 5px !important;
	background: var(--jsp-red) !important;
	color: #fff !important;
	font-family: var(--jsp-font-ui) !important;
	font-size: 0.68em !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase !important;
	box-shadow: 0 6px 18px rgba(226, 7, 28, 0.42), 0 2px 6px rgba(20, 18, 16, 0.25);
	transform: rotate(-4deg);
	transform-origin: 0 0;
}
/* dziurka na sznurek - ta sama, co na metkach w siatce */
.jsp-product-hero-gallery .onsale::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- 2. Większa galeria i miniaturki ------------------------------------ */
.jsp-product-hero { gap: 40px; }
.jsp-product-hero-gallery img { border-radius: 14px; }
/* UWAGA na kolejność: FlexSlider nadaje miniaturkom atrybuty width/height z
   naturalnych wymiarów obrazka, a szerokość <li> MUSI być podana wprost.
   Próba ustawienia `li { width: auto }` razem z `img { width: 100% }` daje
   zależność cykliczną - przeglądarka zwija miniaturki do 10 px (sprawdzone
   na żywo). Dlatego procent na <li>, tak jak było, tylko większy: 16,66%
   (6 w rzędzie) -> 22% (4 w rzędzie plus odstępy). */
.jsp-product-hero .flex-control-thumbs {
	margin: 14px 0 0;
	padding: 0;
	display: block;
}
.jsp-product-hero .flex-control-thumbs li {
	width: 22%;
	margin: 0 4% 0 0;
	list-style: none;
}
.jsp-product-hero .flex-control-thumbs li:nth-child(4n) { margin-right: 0; }
.jsp-product-hero .flex-control-thumbs li img {
	width: 100% !important;
	height: auto !important;
	border-radius: 10px;
	opacity: 1;
	border: 1px solid var(--jsp-border);
	box-sizing: border-box;
	transition: border-color 0.18s ease;
}
.jsp-product-hero .flex-control-thumbs li img:hover,
.jsp-product-hero .flex-control-thumbs li img.flex-active {
	border-color: var(--jsp-rust);
}

/* --- 3. Przyciski akcji: białe tło, bez zmiany tła po najechaniu -------- */
.jsp-product-action,
.jsp-product-action:hover,
.jsp-product-action:focus,
.jsp-product-action:active {
	background: #fff !important;
}
.jsp-product-action:hover {
	border-color: var(--jsp-rust);
	color: var(--jsp-rust-dark);
}

/* --- Koszyk: „Może Ci się przyda” w kształcie kafelków ze sklepu -------- */
.jsp-suggest-tile { background: #fff; }
.jsp-suggest-tag {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 24px;
	padding: 0 8px 0 13px;
	border-radius: 4px;
	background: var(--jsp-rust);
	color: #fff;
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-size: 0.68em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(20, 18, 16, 0.3);
	transform: rotate(-3deg);
	transform-origin: 100% 100%;
	pointer-events: none;
	transition: opacity 0.18s ease;
}
.jsp-suggest-tag .woocommerce-Price-amount,
.jsp-suggest-tag bdi { color: #fff !important; }
.jsp-suggest-tile:hover .jsp-suggest-tag,
.jsp-suggest-tile:focus-within .jsp-suggest-tag { opacity: 0; }
.jsp-suggest-tile-overlay {
	/* Biały panel z rozmyciem zamiast ciemnego gradientu - te kafelki były
	   ostatnim miejscem w sklepie ze starym wyglądem podpisu. */
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	justify-content: flex-end !important;
	gap: 5px;
}
.jsp-suggest-tile-name {
	color: var(--jsp-dark) !important;
	text-shadow: none !important;
	font-weight: 500 !important;
}
.jsp-suggest-tile-add {
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- Kasa: logotypy przy grupie Stripe ---------------------------------- */
/* Sama etykieta zmienia się w PHP (filtr gettext); tu doklejamy pod nią
   znaki tego, co w tej grupie faktycznie siedzi. Pliki są te same, których
   używa stopka - oryginały od operatorów. */
#radio-control-wc-payment-method-options-stripe ~ .wc-block-components-radio-control__label::after,
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-stripe) .wc-block-components-radio-control__label::after {
	content: "";
	display: block;
	margin-top: 7px;
	height: 22px;
	background-image:
		url("assets/pay/visa.svg"),
		url("assets/pay/mastercard.svg"),
		url("assets/pay/blik.svg"),
		url("assets/pay/klarna.svg");
	background-repeat: no-repeat;
	background-size: auto 22px, auto 22px, auto 22px, auto 22px;
	background-position: left center, 42px center, 84px center, 140px center;
}

/* Miniaturki galerii - podejscie odporne na to, co je zwijalo do 10 px.
   Ani reguly z tego pliku, ani zadna inna reguła CSS nie dopasowywały się do
   tych <li> przy odczycie z CSSOM, a mimo to miały float:left i szerokość
   ~9,5 px - czyli wygrywało coś poza zwykłą kaskadą (FlexSlider ustawia na
   miniaturkach atrybuty width/height i własne style). Dlatego wprost i z
   !important, plus `min-width: 0` na elemencie siatki - bez tego minimalny
   rozmiar treści rozpycha albo zwija ścieżkę (ta sama pułapka, co przy
   kolumnach z długimi nazwami produktów). */
.jsp-product-hero .flex-control-nav.flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 10px !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.jsp-product-hero .flex-control-nav.flex-control-thumbs > li {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: block !important;
	list-style: none !important;
}
.jsp-product-hero .flex-control-nav.flex-control-thumbs > li img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block !important;
	border-radius: 10px;
	border: 1px solid var(--jsp-border);
	box-sizing: border-box;
	opacity: 1 !important;
	cursor: pointer;
	transition: border-color 0.18s ease;
}
.jsp-product-hero .flex-control-nav.flex-control-thumbs > li img:hover,
.jsp-product-hero .flex-control-nav.flex-control-thumbs > li img.flex-active {
	border-color: var(--jsp-rust);
}

/* Kontener miniaturek ma clearfix ::before/::after ze Storefronta. W siatce
   pseudoelementy stają się PEŁNOPRAWNYMI elementami siatki - zajmowały
   pierwszą komórkę i wypychały wszystkie miniaturki o jedną kolumnę, a
   ostatnia zawijała się do nowego wiersza. */
.jsp-product-hero .flex-control-nav.flex-control-thumbs::before,
.jsp-product-hero .flex-control-nav.flex-control-thumbs::after {
	content: none !important;
	display: none !important;
}

/* Obwódka fokusu tylko dla klawiatury (2026-09-09, prośba użytkownika:
   „zlikwiduj tą niebieską ramkę podczas klikania w przyciski").
   Storefront rysuje `outline: 2px solid #7f54b3` na każdym :focus, więc
   ramka pojawiała się także po kliknięciu myszką. `:focus-visible` to
   dokładnie ta różnica: zostaje dla Taba, znika dla kliknięcia.
   ŚWIADOMIE nie ruszam pól formularzy - tam widoczne zaznaczenie aktywnego
   pola jest potrzebne również przy klikaniu. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.jsp-product-action:focus:not(:focus-visible),
.jsp-nav-icon-btn:focus:not(:focus-visible),
.wc-block-components-button:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Pseudoelement z logotypami przy grupie Stripe potrzebuje JAWNEJ szerokości:
   jako blok wewnątrz etykiety, która sama jest elementem flex, zwijał się do
   zera i mimo poprawnych tł nic nie było widać. */
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-stripe) .wc-block-components-radio-control__label {
	display: block;
}
#radio-control-wc-payment-method-options-stripe ~ .wc-block-components-radio-control__label::after,
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-stripe) .wc-block-components-radio-control__label::after {
	width: 190px;
	max-width: 100%;
	flex: none;
}

/* =========================================================================
   Propozycje produktow (2026-09-09)
   ========================================================================= */

/* --- pelna strona koszyka: prawdziwe kafelki sklepu, bez wlasnych stylow -- */
.jsp-cart-suggest-section {
	margin: 56px 0 0;
	padding-top: 40px;
	border-top: 1px solid var(--jsp-border);
}
.jsp-cart-suggest-title {
	font-family: var(--jsp-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 1.5em;
	margin: 0 0 22px;
}

/* --- szuflada: wieksze zdjecia (2 w rzedzie zamiast 3) i ten sam
       mechanizm metka -> przycisk co na kafelkach w siatce --------------- */
.jsp-cart-suggested-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.jsp-suggest-tile { border-radius: 12px; box-shadow: 0 1px 2px rgba(20,18,16,.04), 0 10px 22px -14px rgba(20,18,16,.28); }
.jsp-suggest-tile-link img { border-radius: 12px; }

.jsp-suggest-tile-overlay {
	padding: 10px 11px 44px !important;
	inset: auto 0 0 0 !important;
	border-radius: 0 0 12px 12px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}
.jsp-suggest-tile:hover .jsp-suggest-tile-overlay,
.jsp-suggest-tile:focus-within .jsp-suggest-tile-overlay { opacity: 1; transform: none; }
.jsp-suggest-tile-name { margin-bottom: 0 !important; }

/* Metka i przycisk w tym samym miejscu i kształcie - podmiana w połowie
   „obrotu”, dokładnie jak na kafelkach w siatce. */
.jsp-suggest-tag,
.jsp-suggest-tile-add {
	position: absolute !important;
	right: 8px !important;
	bottom: 8px !important;
	left: auto !important;
	z-index: 4;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 96px;
	height: 28px !important;
	padding: 0 9px 0 14px !important;
	border-radius: 4px !important;
	border: 0 !important;
	white-space: nowrap;
	box-shadow: 0 3px 12px rgba(20, 18, 16, 0.32);
	transform: rotate(-3deg);
	transform-origin: 100% 100%;
	transition: opacity 0s linear 0.16s;
}
.jsp-suggest-tag::before,
.jsp-suggest-tile-add::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.jsp-suggest-tag {
	background: var(--jsp-rust) !important;
	color: #fff !important;
	font-family: var(--jsp-font-display);
	font-weight: 800;
	font-size: 0.7em !important;
	font-variant-numeric: tabular-nums;
	opacity: 1;
	pointer-events: none;
}
.jsp-suggest-tile-add {
	background: #1c1917 !important;
	color: #fff !important;
	font-family: var(--jsp-font-ui) !important;
	font-size: 0.62em !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	cursor: pointer;
}
.jsp-suggest-tile:hover .jsp-suggest-tag,
.jsp-suggest-tile:focus-within .jsp-suggest-tag { opacity: 0; }
.jsp-suggest-tile:hover .jsp-suggest-tile-add,
.jsp-suggest-tile:focus-within .jsp-suggest-tile-add { opacity: 1; }
.jsp-suggest-tile:hover .jsp-suggest-tag,
.jsp-suggest-tile:hover .jsp-suggest-tile-add,
.jsp-suggest-tile:focus-within .jsp-suggest-tag,
.jsp-suggest-tile:focus-within .jsp-suggest-tile-add {
	animation: jsp-tag-flip 0.34s ease;
}
.jsp-suggest-tile-add:hover { background: #000 !important; }

@media (hover: none) {
	.jsp-suggest-tile-overlay { opacity: 1 !important; transform: none !important; }
	.jsp-suggest-tag { opacity: 1 !important; animation: none !important; }
	.jsp-suggest-tile-add { opacity: 1 !important; animation: none !important; right: auto !important; left: 8px !important; min-width: 0; padding: 0 9px !important; }
	.jsp-suggest-tile-add::before { display: none; }
}

/* =========================================================================
   Propozycje: jeden rzad na calej szerokosci (koszyk) + mniejsze kafelki
   dopasowane do szerokosci szuflady (2026-09-10)
   ========================================================================= */

/* --- strona koszyka: pelna szerokosc okna i JEDEN rzad ------------------ */
/* Tresc strony jest ograniczona przez .col-full (~1064 px). Sekcja wychodzi
   poza ten limit ujemnymi marginesami liczonymi ze szerokosci okna.
   `overflow-x: clip` na kontenerze zabezpiecza przed poziomym paskiem
   przewijania, ktory bierze sie z tego, ze 100vw liczy takze szerokosc
   pionowego paska. */
body.woocommerce-cart #content { overflow-x: clip; }
body.woocommerce-cart .jsp-cart-suggest-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
	max-width: none;
}
.jsp-cart-suggest-section .jsp-grid {
	/* Jeden rzad, ale NADAL SIATKA, nie flex. Kafelek wymusza kwadrat przez
	   `height: 0; padding-bottom: 100%`, a procentowy padding liczy sie od
	   szerokosci bloku nadrzednego: w siatce to szerokosc SCIEZKI (~234 px),
	   w flexie - caly rzad (~1076 px). Przy flexie kafelki wychodzily
	   234 x 1072 px, czyli cztery i pol raza wyzsze niz szersze.
	   `grid-auto-flow: column` uklada wszystko w jednym wierszu bez utraty
	   tej wlasnosci; waski ekran przewija rzad w bok zamiast go lamac. */
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: clamp(190px, 19vw, 250px);
	gap: 20px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximity;
	/* miejsce na cien i podniesienie kafelka po najechaniu */
	padding: 8px 2px 16px;
	scrollbar-width: thin;
}
.jsp-cart-suggest-section .jsp-grid > .jsp-product-tile {
	width: auto;
	scroll-snap-align: start;
}

/* --- szuflada: mniejsze kafelki, liczba kolumn wg dostepnej szerokosci --- */
.jsp-cart-suggested-grid {
	display: grid !important;
	/* auto-fill zamiast sztywnych 2 lub 3 kolumn - szuflada ma inna szerokosc
	   na telefonie i na monitorze, wiec niech sama policzy, ile sie zmiesci. */
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)) !important;
	gap: 10px !important;
}
.jsp-suggest-tile { border-radius: 10px; }
.jsp-suggest-tile-link img { border-radius: 10px; }
.jsp-suggest-tile-overlay { padding: 7px 8px 32px !important; border-radius: 0 0 10px 10px; }
.jsp-suggest-tile-name { font-size: 0.62em !important; -webkit-line-clamp: 2; }
.jsp-suggest-tag,
.jsp-suggest-tile-add {
	right: 6px !important;
	bottom: 6px !important;
	min-width: 0;
	height: 22px !important;
	padding: 0 7px 0 12px !important;
	border-radius: 3px !important;
}
.jsp-suggest-tag { font-size: 0.6em !important; }
.jsp-suggest-tile-add { font-size: 0.52em !important; letter-spacing: 0.04em; }
.jsp-suggest-tag::before,
.jsp-suggest-tile-add::before { left: 4px; width: 4px; height: 4px; margin-top: -2px; }

/* =========================================================================
   Stronicowanie dopasowane do reszty sklepu (2026-09-10)
   -------------------------------------------------------------------------
   Bylo: biale pudelka 48x48 z ramka i promieniem 10 px, aktywna strona na
   GRADIENCIE, hover z podniesieniem o 3 px i pomaranczowa poswiata. Wszystkie
   trzy rzeczy wypadly z reszty interfejsu przy przebudowie: gradienty zniknely
   z chromu, ramki zastapil cien albo nic, a jedyny mocny akcent na ekranie ma
   byc jeden. Teraz: okragle przyciski jak ikony w naglowku, plaski pomaranczowy
   akcent na aktywnej stronie, strzalki krojem ikonowym.
   ========================================================================= */
.woocommerce-pagination { margin: 8px 0 40px; }
.woocommerce-pagination ul.page-numbers { gap: 8px !important; align-items: center; }

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	min-width: 44px !important;
	width: 44px;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: none !important;
	color: var(--jsp-dark) !important;
	font-family: var(--jsp-font-ui) !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	box-shadow: none !important;
	transform: none !important;
	transition: background 0.18s ease, color 0.18s ease !important;
}
.woocommerce-pagination .page-numbers a:hover {
	background: #f2efea !important;
	color: var(--jsp-dark) !important;
	border: 0 !important;
	transform: none !important;
	box-shadow: none !important;
}
.woocommerce-pagination .page-numbers a:focus-visible {
	outline: 2px solid var(--jsp-rust) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}
.woocommerce-pagination .page-numbers .current {
	background: var(--jsp-rust) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 6px 16px -6px rgba(242, 97, 15, 0.65) !important;
}
/* Strzalki: ten sam krazek, tylko wyciszony kolorem, a nie innym tlem. */
.woocommerce-pagination .page-numbers .prev,
.woocommerce-pagination .page-numbers .next {
	font-size: 0 !important;
	background: none !important;
	color: var(--jsp-muted) !important;
	position: relative;
}
.woocommerce-pagination .page-numbers .prev::before,
.woocommerce-pagination .page-numbers .next::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	/* Strzalka rysowana w SVG w kolorze tekstu strony - ten sam ksztalt i ta
	   sama grubosc kreski (1,5) co reszta zestawu ikon. */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236f6a64" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>');
}
.woocommerce-pagination .page-numbers .prev::before { transform: scaleX(-1); }
.woocommerce-pagination .page-numbers .prev:hover,
.woocommerce-pagination .page-numbers .next:hover { background: #f2efea !important; }
.woocommerce-pagination .page-numbers .prev:hover::before,
.woocommerce-pagination .page-numbers .next:hover::before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f2610f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>');
}
/* Wielokropek miedzy numerami: nie jest przyciskiem, wiec bez krazka. */
.woocommerce-pagination .page-numbers span.dots {
	width: auto !important;
	min-width: 20px !important;
	color: var(--jsp-muted) !important;
	background: none !important;
}

/* Lista sortowania stoi w tym samym rzedzie co stronicowanie - pigulka, jak
   pole szukania i filtry stanu, zeby rzad czytal sie jako jedna rodzina. */
.woocommerce-ordering select,
.storefront-sorting select {
	border-radius: 999px !important;
	border: 1px solid var(--jsp-border) !important;
	background-color: #fff !important;
	padding: 10px 38px 10px 18px !important;
	height: 44px;
	font-family: var(--jsp-font-ui) !important;
	font-size: 0.88em !important;
	color: var(--jsp-dark) !important;
}
.woocommerce-ordering select:focus { border-color: var(--jsp-rust) !important; outline: none !important; }

/* =========================================================================
   Metki-filtry obok wyszukiwarki (2026-09-10)
   ========================================================================= */
.jsp-nav-center { gap: 14px; }
.jsp-nav-search { flex: 1 1 240px; max-width: 420px; }
.jsp-filter-tags {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 3px 0;
}
.jsp-filter-tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px 0 20px;
	border-radius: 4px;
	border: 1px solid var(--jsp-border);
	background: #fff;
	color: var(--jsp-dark);
	font: 600 11px/1 var(--jsp-font-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transform: rotate(-2deg);
	transform-origin: 100% 100%;
	box-shadow: 0 2px 8px rgba(20, 18, 16, 0.1);
	transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
/* dziurka na sznurek - ten sam detal, co na metkach z cena */
.jsp-filter-tag::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: rgba(20, 18, 16, 0.22);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.jsp-filter-tag:hover {
	transform: rotate(-2deg) translateY(-2px);
	box-shadow: 0 5px 14px rgba(20, 18, 16, 0.18);
	color: var(--jsp-dark);
}
.jsp-filter-tag:focus-visible { outline: 2px solid var(--jsp-rust); outline-offset: 3px; }

/* Wlaczony filtr: metka wypelnia sie kolorem swojego znaczenia. Dziurka
   robi sie jasna, zeby zostala widoczna na ciemnym tle. */
.jsp-filter-tag.is-on { color: #fff; border-color: transparent; }
.jsp-filter-tag.is-on::before { background: rgba(255, 255, 255, 0.32); }
.jsp-filter-new.is-on { background: #1c1917; box-shadow: 0 4px 14px -4px rgba(20, 18, 16, 0.55); }
.jsp-filter-sale.is-on { background: var(--jsp-red); box-shadow: 0 4px 14px -4px rgba(226, 7, 28, 0.6); }

/* Stan: kolor metki mowi, jak mocno uszkodzone rzeczy sa jeszcze pokazywane. */
.jsp-filter-cond-nowy { background: #5f7a4a !important; box-shadow: 0 4px 14px -4px rgba(95, 122, 74, 0.6); }
.jsp-filter-cond-jak_nowy { background: #3f7a6d !important; box-shadow: 0 4px 14px -4px rgba(63, 122, 109, 0.6); }
.jsp-filter-cond-slady_uzytkowania { background: #e0921f !important; box-shadow: 0 4px 14px -4px rgba(224, 146, 31, 0.6); }
.jsp-filter-cond-uszkodzony { background: var(--jsp-red) !important; box-shadow: 0 4px 14px -4px rgba(226, 7, 28, 0.6); }

.jsp-filter-clear {
	background: none;
	border-style: dashed;
	color: var(--jsp-muted);
	box-shadow: none;
	padding-left: 12px;
}
.jsp-filter-clear::before { display: none; }
.jsp-filter-clear:hover { color: var(--jsp-red); border-color: var(--jsp-red); box-shadow: none; }

@media (max-width: 1100px) {
	/* Ponizej tej szerokosci metki nie zmieszcza sie obok wyszukiwarki -
	   schodza pod nia i przewijaja sie w bok, zamiast lamac naglowek. */
	.jsp-nav-center { flex-wrap: wrap; }
	.jsp-nav-search { flex: 1 1 100%; max-width: 500px; }
	.jsp-filter-tags {
		flex: 1 1 100%;
		justify-content: center;
		overflow-x: auto;
		padding: 3px 2px 5px;
		scrollbar-width: none;
	}
	.jsp-filter-tags::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jsp-filter-tag:hover { transform: rotate(-2deg); }
}

/* Pole szukania nie moze sie zwijac pod naciskiem metek - flex potrafi
   scisnac element ponizej jego bazy, a przy dluzszej etykiecie filtra
   wyszukiwarka zostawala z niego okragla plamka. */
.jsp-nav-search { min-width: 210px; }

/* Komunikat WooCommerce o braku wynikow - filtr moze go legalnie wywolac,
   wiec nie moze wygladac jak domyslny niebieski pasek z innego motywu. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: #faf9f8 !important;
	border: 1px solid var(--jsp-border) !important;
	border-left: 3px solid var(--jsp-rust) !important;
	border-radius: 12px !important;
	color: var(--jsp-dark) !important;
	font-family: var(--jsp-font-ui);
	font-size: 0.92em;
	/* WooCommerce rysuje ikone jako ::before ustawione absolutnie - nadpisanie
	   samego paddingu wsunelo tekst pod nia. Lewy padding musi zostawic na nia
	   miejsce. */
	padding: 16px 20px 16px 54px !important;
	margin: 24px 0 !important;
	position: relative;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	left: 20px !important;
	top: 17px !important;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { color: var(--jsp-rust) !important; }
.woocommerce-error { border-left-color: var(--jsp-red) !important; }
.woocommerce-info a,
.woocommerce-message a { color: var(--jsp-rust-dark) !important; font-weight: 600; }

/* =========================================================================
   Metki-filtry: jednakowa szerokosc + zielone Nowosci (2026-09-10)
   ========================================================================= */
.jsp-filter-tag {
	/* Wszystkie metki tej samej wielkosci - inaczej "Stan" (4 znaki) byla o
	   polowe wezsza od "Promocje" i rzad wygladal na przypadkowy. */
	min-width: 104px;
	justify-content: center;
	padding: 0 14px 0 22px;
}
.jsp-filter-new.is-on {
	background: #5f7a4a;
	box-shadow: 0 4px 14px -4px rgba(95, 122, 74, 0.6);
}
.jsp-filter-clear { min-width: 104px; padding: 0 14px; }

/* --- stan przy podpowiedziach wyszukiwarki --- */
.jsp-search-suggestion { position: relative; }
.jsp-search-suggestion-cond {
	position: relative;
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px 0 17px;
	border-radius: 4px;
	color: #fff;
	font: 600 9.5px/1 var(--jsp-font-ui);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-3deg);
	transform-origin: 100% 50%;
	box-shadow: 0 2px 8px rgba(20, 18, 16, 0.24);
	background: #6b7280;
}
/* dziurka na sznurek - ten sam detal, co na pozostalych metkach */
.jsp-search-suggestion-cond::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.jsp-search-suggestion-cond.jsp-cond-nowy { background: #5f7a4a; }
.jsp-search-suggestion-cond.jsp-cond-jak_nowy { background: #3f7a6d; }
.jsp-search-suggestion-cond.jsp-cond-slady_uzytkowania { background: #e0921f; }
.jsp-search-suggestion-cond.jsp-cond-uszkodzony { background: var(--jsp-red); }

/* Lista podpowiedzi byla dokladnie tak szeroka jak pole szukania (210 px po
   zwezeniu na rzecz metek-filtrow). Po dodaniu metki stanu na nazwe produktu
   zostawalo kilkadziesiat pikseli i kazda ucinala sie do "Waga ...".
   Lista moze byc szersza od pola - i tak wisi nad trescia strony. */
.jsp-search-suggestions {
	min-width: 360px;
	max-width: min(460px, calc(100vw - 32px));
}
.jsp-search-suggestion-info { flex: 1 1 auto; min-width: 0; }
.jsp-search-suggestion-name { max-width: 100%; }

@media (max-width: 782px) {
	/* Na telefonie pole szukania jest na cala szerokosc, wiec lista tez -
	   sztywne 360 px moglo wystawac poza ekran. */
	.jsp-search-suggestions { min-width: 0; max-width: none; }
}

/* =========================================================================
   Stan jako PIĘĆ KRESEK - jedyna wersja stanu (2026-09-10)
   -------------------------------------------------------------------------
   Obok miernika na kafelku stała jeszcze kolorowa metka stanu - dwie wersje
   tej samej informacji. Użytkownik: "jedna wersja stanu wystarczy".
   Zostały kreski, wszędzie: kafelek (klikalny miernik z panelem, reguły
   wyżej), karta produktu, podpowiedzi wyszukiwarki i feed mobilny
   (statyczny miernik poniżej). Kolory kresek biorą się z reguł
   `.jsp-cond-meter.jsp-cond-KLUCZ i.on` wyżej.
   ========================================================================= */
.jsp-cond-meter-static {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 6px 9px;
	border-radius: 999px;
	/* Stałe kolory, jak na kafelku: miernik ma wyglądać tak samo w trybie
	   jasnym i ciemnym. */
	background: #fff;
	box-shadow: 0 1px 6px rgba(20, 18, 16, 0.16), inset 0 0 0 1px rgba(20, 18, 16, 0.06);
	vertical-align: middle;
	flex-shrink: 0;
	line-height: 0;
}
.jsp-cond-meter-static i {
	display: block;
	width: 11px;
	height: 4px;
	border-radius: 2px;
	background: rgba(20, 18, 16, 0.16);
}

/* --- w podpowiedziach wyszukiwarki --- */
.jsp-cond-meter-suggest { margin-left: auto; padding: 5px 7px; }
.jsp-cond-meter-suggest i { width: 9px; }

/* --- w feedzie mobilnym (slajd) --- */
.jsp-cond-meter-slide { align-self: flex-start; margin: 2px 0 8px; }

/* --- wiersz "Stan" na karcie produktu --- */
.jsp-meta-cond { line-height: 1; }

/* Stare warianty (napis, potem kolorowa metka) nie są już nigdzie
   renderowane. */
.jsp-condition-badge,
.jsp-cond-mark { display: none; }

/* =========================================================================
   Naglowek: wieksza wyszukiwarka, szersze podpowiedzi, metki przy koncie
   (2026-09-10)
   ========================================================================= */
/* Rzad naglowka byl ograniczony do 1200 px - po dolozeniu czterech metek
   filtrow nie zostawalo miejsca ani na nie, ani na wieksze pole szukania.
   Siatka produktow i tak jest szersza (do 1700 px), wiec szerszy naglowek
   jest spojny z reszta. */
.jsp-nav-top-row { max-width: 1500px; }
.jsp-nav-left { flex: 0 0 auto; }
.jsp-nav-center { flex: 1 1 auto; justify-content: flex-start; }

.jsp-nav-search {
	flex: 1 1 320px;
	min-width: 240px;
	max-width: 560px;
}
.jsp-nav-search input {
	height: 52px;
	font-size: 15px;
	padding: 0 24px;
}

/* Podpowiedzi szersze od pola - wisza nad trescia, wiec moga byc. */
.jsp-search-suggestions {
	min-width: 440px;
	max-width: min(600px, calc(100vw - 32px));
}
.jsp-search-suggestion { padding: 12px 16px; }
.jsp-search-suggestion img { width: 48px; height: 48px; }
.jsp-search-suggestion-name { font-size: 0.9em; }

/* Metki dosuniete w prawo, do samego przycisku konta. */
.jsp-filter-tags { margin-left: auto; }
.jsp-filter-tag { height: 36px; }

/* Slot na "Wyczysc" trzyma szerokosc takze wtedy, gdy nie ma czego czyscic. */
.jsp-filter-tag.is-idle {
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 1250px) {
	/* Ponizej tej szerokosci metki nie zmieszcza sie obok wieksze pola
	   szukania - schodza pod nie i przewijaja sie w bok. */
	.jsp-nav-center { flex-wrap: wrap; }
	.jsp-nav-search { flex: 1 1 100%; max-width: 640px; }
	.jsp-filter-tags {
		flex: 1 1 100%;
		margin-left: 0;
		justify-content: center;
		overflow-x: auto;
	}
	/* Na waskim ekranie pusty slot tylko zabiera miejsce w przewijanym rzedzie. */
	.jsp-filter-tag.is-idle { display: none; }
}

/* Metki o wlos wezsze (105 -> 96 px, nadal wszystkie rowne), zeby caly rzad -
   logo, wieksze pole szukania, cztery metki i ikony - zmiescil sie w jednej
   linii juz od ~1160 px, a nie dopiero od 1250 px. */
.jsp-filter-tag { min-width: 96px; }
.jsp-filter-clear { min-width: 96px; }

@media (max-width: 1250px) {
	/* Przywrocenie jednej linii w zakresie, ktory teraz sie miesci. */
	.jsp-nav-center { flex-wrap: nowrap; }
	.jsp-nav-search { flex: 1 1 240px; max-width: 560px; }
	.jsp-filter-tags { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; overflow: visible; }
	.jsp-filter-tag.is-idle { display: inline-flex; }
}
@media (max-width: 1160px) {
	/* Ponizej tej szerokosci naprawde brakuje miejsca - metki pod pole. */
	.jsp-nav-center { flex-wrap: wrap; }
	.jsp-nav-search { flex: 1 1 100%; max-width: 640px; }
	.jsp-filter-tags {
		flex: 1 1 100%;
		margin-left: 0;
		justify-content: center;
		overflow-x: auto;
		/* Bez tego kontener z overflow rysowal pasek przewijania obok metek. */
		scrollbar-width: none;
	}
	.jsp-filter-tags::-webkit-scrollbar { display: none; }
	.jsp-filter-tag.is-idle { display: none; }
}

/* KOREKTA progu zawijania. Moje wcześniejsze 1250 px było szacunkiem i było
   za niskie: pomiar na żywo pokazał, że przy oknie 1170 px ikony konta i
   koszyka wypadały za prawą krawędź. Realne zapotrzebowanie jednej linii to
   logo (~390) + pole (240) + metki (415) + ikony (110) + odstępy i padding
   (~115) = ~1270 px. Poniżej tego metki schodzą pod pole - inaczej
   „dosunięcie do konta” kosztowałoby zniknięcie samego konta. */
@media (max-width: 1269px) {
	.jsp-nav-center { flex-wrap: wrap; }
	.jsp-nav-search { flex: 1 1 100%; max-width: 640px; }
	.jsp-filter-tags {
		flex: 1 1 100%;
		margin-left: 0;
		justify-content: center;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.jsp-filter-tags::-webkit-scrollbar { display: none; }
	/* Pusty slot w przewijanym rzedzie tylko zabiera miejsce. */
	.jsp-filter-tag.is-idle { display: none; }
}

/* Logo mniejsze (64 -> 48 px wysokosci), zeby caly rzad naglowka zmiescil sie
   w jednej linii takze na ~1170 px. Plik loga ma 1800x300, wiec 48 px
   wysokosci to ~288 px szerokosci zamiast ~384 - zwalnia to blisko 100 px
   dokladnie tam, gdzie ich brakowalo. Prog zawijania obnizony odpowiednio;
   dokladna wartosc wzieta z pomiaru po zmianie, nie z szacunku. */
.jsp-nav-logo img,
.custom-logo-link img { max-height: 48px; }

@media (max-width: 1269px) {
	/* Przywrocenie jednej linii w zakresie, ktory po zmniejszeniu loga znowu
	   sie miesci. */
	.jsp-nav-center { flex-wrap: nowrap; }
	.jsp-nav-search { flex: 1 1 240px; max-width: 560px; }
	.jsp-filter-tags {
		flex: 0 0 auto;
		margin-left: auto;
		justify-content: flex-end;
		overflow: visible;
	}
	.jsp-filter-tag.is-idle { display: inline-flex; }
}
@media (max-width: 1169px) {
	.jsp-nav-center { flex-wrap: wrap; }
	.jsp-nav-search { flex: 1 1 100%; max-width: 640px; }
	.jsp-filter-tags {
		flex: 1 1 100%;
		margin-left: 0;
		justify-content: center;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.jsp-filter-tags::-webkit-scrollbar { display: none; }
	.jsp-filter-tag.is-idle { display: none; }
}

/* =========================================================================
   Kasa: wybór Paczkomatu pod opcjami wysyłki + porządki w formularzu
   (2026-09-10)
   -------------------------------------------------------------------------
   Pole "Wybrany Paczkomat" jest zarejestrowane przez Additional Checkout
   Fields API w lokalizacji "order", a ta renderuje się w bloku "Dodatkowe
   informacje o zamówieniu" - czyli PO opcjach płatności. Klient wybierał
   automat już po wybraniu metody płatności, co jest odwrotnie niż powinno.

   Przestawiamy to kolejnością elementów flexa, a nie przenoszeniem bloków w
   treści strony: próba przeniesienia bloków checkoutu skończyła się już raz
   ZDUBLOWANYM przyciskiem "Kupuję i płacę" (WooCommerce przypina akcje do
   kolumny głównej). Tu wszystkie te sekcje są rodzeństwem w jednym <form>,
   więc `order` wystarczy i nie dotyka Reacta ani treści strony.

   Marginesy są bezpieczne: każdy krok ma tylko `margin-bottom`, żaden nie ma
   `margin-top`, więc przejście z bloku na flexa niczego nie sumuje.
   ========================================================================= */
.wc-block-checkout__form { display: flex; flex-direction: column; }
/* Storefront wiesza clearfix na wielu kontenerach - jako elementy flexa
   pseudoelementy stałyby się pustymi "kafelkami" w środku kolejki. */
.wc-block-checkout__form::before,
.wc-block-checkout__form::after { content: none !important; }
/* Wszystko przed płatnościami zostaje w kolejności z dokumentu (ta sama
   wartość `order` = kolejność DOM), reszta dostaje jawne miejsca. */
.wc-block-checkout__form > * { order: 2; }
.wc-block-checkout__form > .wc-block-checkout__order-fields { order: 3; }
.wc-block-checkout__form > .wc-block-checkout__payment-method { order: 4; }
.wc-block-checkout__form > .wc-block-checkout__order-notes { order: 5; }
.wc-block-checkout__form > .wc-block-checkout__terms { order: 6; }
.wc-block-checkout__form > .wc-block-checkout__actions { order: 7; }

/* Gdy Paczkomat nie jest wybraną metodą, WooCommerce chowa samo pole
   (inline `display: none`), ale nagłówek sekcji zostaje - i dziś wisi nad
   pustym miejscem. Chowamy całą sekcję, kiedy nie ma w niej ani jednego
   widocznego pola. */
.wc-block-checkout__order-fields:not(:has(.wc-block-components-address-form > :not([style*="display: none"]))) {
	display: none !important;
}

/* --- każdy krok jako karta, tak jak kafelki i panel podsumowania --------- */
.wc-block-checkout__form .wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid var(--jsp-border);
	border-radius: 16px;
	padding: 20px 22px 22px;
	margin: 0 0 16px;
	box-shadow: 0 2px 10px -7px rgba(20, 18, 16, 0.35);
}
.wc-block-checkout__form .wc-block-components-checkout-step__title { font-size: 1.12rem; margin: 0 0 4px; }
.wc-block-checkout__form .wc-block-components-checkout-step__heading { margin: 0 0 14px; }
.wc-block-checkout__form .wc-block-checkout__order-notes { padding: 14px 22px; margin-bottom: 20px; }

/* --- opcje wysyłki i płatności ------------------------------------------
   Trzy rzeczy naraz, bo to jeden problem: sekcja jest kartą z ramką, więc
   ramka na każdej opcji dawała ramkę w ramce (2026-09-10). Niezaznaczone
   opcje są przezroczystymi wierszami BEZ tła i BEZ obrysu (szare tło też
   zostało zgłoszone jako zbędne), a jedyna
   ramka na ekranie należy do opcji WYBRANEJ - i to ona zastępuje kółko
   radio, którego użytkownik nie chciał.

   Kółko jest chowane, ale ZOSTAJE ogniskowalne (1×1 px, opacity 0), bo
   inaczej metody dostawy i płatności przestałyby być wybieralne z
   klawiatury. Focus rysujemy na całym wierszu. */
.wc-block-components-radio-control > .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: 12px !important;
	box-shadow: none !important;
	background: transparent !important;
	border-bottom: 0 !important;
	margin: 0 0 4px !important;
}
.wc-block-components-radio-control-accordion-option { padding: 0 !important; }
/* Opcja płatności to opakowanie z zagnieżdżoną etykietą - tło i obrys idą
   na opakowanie, etykieta ma zostać przezroczysta. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	border-bottom: 0 !important;
	border-radius: 12px !important;
}
.wc-block-components-radio-control > .wc-block-components-radio-control__option:hover,
.wc-block-components-radio-control-accordion-option:hover { background: #faf6f1 !important; }
.wc-block-components-radio-control > .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control > .wc-block-components-radio-control__option--checked-option-highlighted:hover,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted:hover {
	box-shadow: inset 0 0 0 1.5px var(--jsp-rust) !important;
	background: #fff6ee !important;
}
.wc-block-components-radio-control__option--checked-option-highlighted .wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__label { font-weight: 600; }

/* Kółko radio: niewidoczne, ale wciąż istniejące dla klawiatury. */
.wc-block-components-radio-control__input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
}
.wc-block-components-radio-control__option { padding-left: 16px !important; }
.wc-block-components-radio-control > .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:focus-visible),
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--jsp-rust-dark) !important;
}
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control-accordion-option::after { display: none !important; }

/* Opis produktu w podsumowaniu zamówienia - klient dopiero co go czytał na
   karcie produktu, a tutaj rozpycha kolumnę i zasłania kwoty. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata { display: none !important; }

/* --- przycisk płatności na całą szerokość kolumny ------------------------ */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	width: 100%;
	height: 54px;
}

@media (max-width: 782px) {
	.wc-block-checkout__form .wc-block-components-checkout-step { padding: 16px 14px 18px; border-radius: 14px; }
	.wc-block-checkout__form .wc-block-checkout__order-notes { padding: 12px 14px; }

	/* Tryb ciemny na telefonie: karty są tam przezroczyste (regula wyzej),
	   wiec cien i jasne ramki opcji trzeba zdjac osobno - tokeny motywu sie
	   nie przelaczaja. */
	html[data-jsp-theme="dark"] .wc-block-checkout__form .wc-block-components-checkout-step { box-shadow: none; }
	html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option,
	html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option {
		box-shadow: none !important;
		background: transparent !important;
	}
	html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option:hover,
	html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option:hover { background: #2b2521 !important; }
	html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option--checked-option-highlighted,
	html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
		box-shadow: inset 0 0 0 1.5px var(--jsp-rust) !important;
		background: #2e211a !important;
	}
}

/* --- pole "Wybrany Paczkomat" -------------------------------------------
   Blokowy checkout uklada etykiete NA polu (floating label). Tutaj pole jest
   tylko do odczytu i ma wlasna podpowiedz ("Kliknij, aby wybrac Paczkomat na
   mapie"), wiec etykieta ladowala dokladnie na tej podpowiedzi - dwa napisy
   jeden na drugim. Etykieta idzie nad pole.

   Kiedy widget mapy apaczka.pl sie zaladowal, surowe pole tekstowe jest
   zbedne: trzyma wartosc w formacie "ID|Nazwa", ktorego i tak nie pokazuje
   sie klientowi, a wybor robi sie w rozwijanej liscie obok. Chowamy je
   WIZUALNIE, ale zostawiamy w drzewie i ogniskowalne - walidacja bloku
   ustawia na nim fokus, gdy wymagane pole jest puste. Warunek `:has()`
   pilnuje, zeby przy niezaladowanym widgecie zostalo widoczne zwykle pole,
   zamiast pustego miejsca. */
.wc-block-components-address-form__jsp-paczkomat-point-id { display: flex; flex-direction: column; }
.wc-block-components-address-form__jsp-paczkomat-point-id > label {
	position: static !important;
	transform: none !important;
	order: -1;
	margin: 0 0 8px !important;
	padding: 0 !important;
	max-width: none !important;
	font-size: 0.9rem !important;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jsp-dark) !important;
}
.wc-block-components-address-form__jsp-paczkomat-point-id:has(.apaczkaComboBoxWrapper) > input#order-jsp-paczkomat-point-id {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}
.wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxWrapper {
	border: 1px solid var(--jsp-border) !important;
	border-radius: 10px !important;
	background: #fff !important;
	align-items: center;
	min-height: 48px;
}
/* Widget rysuje wlasna, szara ramke 1px wokol samej listy i przycisku -
   po oprawieniu calosci w nasza ramke robila sie ramka w ramce. */
.wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBox,
.wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxButton {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBox {
	padding: 0 14px !important;
	font-size: 0.95rem !important;
}
.wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxButton {
	padding: 0 14px 0 12px !important;
	border-left: 1px solid var(--jsp-border) !important;
	font-weight: 600;
}
@media (max-width: 782px) {
	html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id > label { color: #eae3da !important; }
	html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxWrapper {
		background: #241f1b !important;
		border-color: #3a322c !important;
	}
	html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBox { color: #eae3da; }
	html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxButton { border-left-color: #3a322c; }
}

/* =========================================================================
   Kasa: bez ramek wokół list opcji + przyklejone podsumowanie (2026-09-10)
   ========================================================================= */

/* Ramkę wokół CAŁEJ grupy opcji (wszystkie metody płatności / obie stawki
   wysyłki) WooCommerce rysuje pseudoelementem ::after na
   .wc-block-components-radio-control--highlight-checked - absolutnie,
   inset 0. Dlatego sam element raportuje `border: 0` i ramki nie było
   widać w stylach elementu. */
.wc-block-components-radio-control--highlight-checked::before,
.wc-block-components-radio-control--highlight-checked::after {
	content: none !important;
	display: none !important;
}

/* Sekcje "Opcje wysyłki" i "Opcje płatności" SĄ kartami, dokładnie jak
   pozostałe (użytkownik 2026-09-10: "ważne aby to wyglądało jednakowo").
   Wewnątrz karty wiersze opcji są przezroczyste i bez obrysu, a ramkę ma
   tylko opcja wybrana - dlatego nie wraca ramka w ramce. */

/* --- podsumowanie zamówienia jedzie w dół razem ze stroną ---------------
   Sticky nie działał, bo rodzicielski Storefront daje `overflow-x: hidden`
   na `body` i `.site` - to robi z `.site` kontener przewijania, więc
   podsumowanie "przyklejało się" do elementu, który nigdy się nie
   przewija. `clip` też blokuje poziomy pasek, ale NIE tworzy kontenera
   przewijania. Przeglądarki bez `clip` odrzucą tę deklarację i zostaną
   przy `hidden` ze Storefronta - bez przyklejenia, ale bez regresji.
   Zakres tylko kasa: reszty sklepu to nie dotyczy. */
body.woocommerce-checkout,
body.woocommerce-checkout .site { overflow-x: clip; }

@media (min-width: 783px) {
	/* `--jsp-header-h` ustawia skrypt nagłówka (wysokość stałego paska
	   zależy od szerokości ekranu), więc podsumowanie zawsze zatrzymuje się
	   pod nim, a nie pod nim znika. */
	.wc-block-checkout__sidebar {
		position: sticky !important;
		top: calc(var(--jsp-header-h, 120px) + 20px) !important;
		align-self: flex-start !important;
		max-height: calc(100vh - var(--jsp-header-h, 120px) - 40px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	body.admin-bar .wc-block-checkout__sidebar {
		top: calc(var(--jsp-header-h, 120px) + 52px) !important;
		max-height: calc(100vh - var(--jsp-header-h, 120px) - 72px);
	}
}


/* =========================================================================
   Karta produktu: propozycje produktów (2026-09-10)
   -------------------------------------------------------------------------
   Ten sam rząd prawdziwych kafelków co na stronie koszyka (reguły
   `.jsp-cart-suggest-section` wyżej): pełna szerokość okna, jeden
   przewijany rząd. Na telefonie sekcja znika razem z resztą karty - tam
   zamiast karty jest feed, który sam przewija do kolejnych produktów.
   ========================================================================= */
/* W szerokosci tresci, jak kolumny "Opis / Stan produktu" nad nia - NIE
   na pelna szerokosc okna jak w koszyku. Rozciagniecie ujemnymi marginesami
   bylo tu przycinane z lewej przez kontener strony (lewa krawedz sekcji
   wypadala na -7 px, znikala pierwsza litera naglowka i kawalek kafelka). */
body.single-product .jsp-product-suggest { max-width: none; }
@media (max-width: 782px) {
	.jsp-product-suggest { display: none; }
}

/* =========================================================================
   Telefon: metki w menu, kreski stanu ze strzałkami, metki na zdjęciu i przy
   koszyku; oceny Wygląd / Technicznie osobno (2026-09-10)
   ========================================================================= */

/* --- oceny osobno: karta produktu i panel stanu na telefonie --- */
.jsp-cond-breakdown { display: grid; gap: 8px; }
.jsp-cond-breakdown-row {
	display: grid;
	grid-template-columns: 92px auto auto;
	justify-content: start;
	align-items: center;
	gap: 10px;
}
.jsp-cond-breakdown-name { color: var(--jsp-muted); font-size: 0.95em; }
.jsp-cond-breakdown-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.jsp-mobile-cond-breakdown {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
}
html[data-jsp-theme="light"] .jsp-mobile-cond-breakdown { background: #f6f4f1; }
@media (max-width: 782px) {
	html[data-jsp-theme="dark"] .jsp-cond-breakdown-name { color: #b8ada2; }
}

@media (max-width: 782px) {
	/* Na telefonie metki-filtry nie siedzą w nagłówku - są w menu. */
	.jsp-filter-tags { display: none !important; }
}

/* --- menu: metki (filtry, kolejność) --- */
.jsp-menu-tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 12px; padding: 2px 2px 4px; }
button.jsp-filter-tag {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	min-width: 112px;
	height: 38px;
	justify-content: center;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.jsp-menu-tags .jsp-filter-new.is-on { background: #5f7a4a; box-shadow: 0 4px 14px -4px rgba(95, 122, 74, 0.6); }
.jsp-menu-sort-tag { min-width: 150px; }
.jsp-menu-sort-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 10px;
	padding: 14px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
}
.jsp-menu-sort-list[hidden] { display: none; }
html[data-jsp-theme="light"] .jsp-menu-sort-list { background: #f5f5f5; }
.jsp-menu-sort-option.is-on { background: var(--jsp-rust); color: #fff; border-color: transparent; }

/* --- menu: stan jako kreski ze strzałkami --- */
.jsp-menu-cond-stepper { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.jsp-cond-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
	color: inherit;
	font: 400 1.5rem/1 var(--jsp-font-ui);
	cursor: pointer;
}
.jsp-cond-step:disabled { opacity: 0.3; cursor: default; }
html[data-jsp-theme="light"] .jsp-cond-step { border-color: var(--jsp-border); background: #f5f5f5; color: var(--jsp-dark); }
.jsp-cond-stepper-meter { padding: 9px 12px; }
.jsp-cond-stepper-meter i { width: 16px; height: 5px; }
.jsp-cond-stepper-label { font-weight: 700; font-size: 0.9em; font-variant-numeric: tabular-nums; }

/* --- zdjęcie w feedzie: "Promocja" jako czerwona metka, jak na kafelku --- */
.jsp-mobile-onsale {
	top: 18px;
	left: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px 0 23px;
	border-radius: 5px;
	background: var(--jsp-red);
	color: #fff;
	font-size: 1em;
	font-weight: 400;
	box-shadow: 0 6px 18px rgba(226, 7, 28, 0.45), 0 2px 6px rgba(20, 18, 16, 0.25);
	transform: rotate(-6deg);
	transform-origin: 0 100%;
	white-space: nowrap;
}
.jsp-mobile-onsale::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.jsp-mobile-onsale b {
	font-family: var(--jsp-font-ui);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.jsp-mobile-onsale s {
	font-size: 0.88em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration-thickness: 1.5px;
}

/* --- "Dodaj do koszyka" w feedzie jako pomarańczowa metka --- */
.jsp-mobile-add-to-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 210px;
	height: 48px;
	margin: 4px auto 18px;
	padding: 0 22px 0 30px;
	border-radius: 6px;
	background: var(--jsp-rust);
	color: #fff;
	font: 700 0.8em/1 var(--jsp-font-ui);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(242, 97, 15, 0.45), 0 2px 6px rgba(20, 18, 16, 0.25);
	transform: rotate(-3deg);
	transition: background 0.15s ease;
}
.jsp-mobile-add-to-cart::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.jsp-mobile-add-to-cart:disabled { opacity: 1; }
.jsp-mobile-add-to-cart.is-flipping { animation: jsp-tag-flip 0.34s ease; }
.jsp-mobile-add-to-cart.is-in-cart,
.jsp-mobile-add-to-cart.is-in-cart:active { background: #1c1917; box-shadow: 0 6px 18px rgba(20, 18, 16, 0.4); }
/* Na ciemnym tle feedu czarna metka potrzebuje jasnego obrysu, żeby nie
   zlała się z tłem. */
html[data-jsp-theme="dark"] .jsp-mobile-add-to-cart.is-in-cart { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
	.jsp-mobile-add-to-cart.is-flipping { animation: none; }
}

/* =========================================================================
   Menu telefonu: bez brązowego tła po stuknięciu, kategorie jak m.mikup.pl
   (2026-09-10)
   ========================================================================= */

/* Ogólna reguła `button:hover { background: var(--jsp-rust-dark) }` (brąz)
   łapała każdy przycisk bez własnego stanu :hover, a na telefonie :hover
   "przykleja się" po stuknięciu - metka kolejności robiła się brązowa po
   każdej zmianie. Każdy element menu dostaje jawnie SWÓJ kolor. */
button.jsp-filter-tag,
.jsp-cond-step,
.jsp-menu-btn,
.jsp-menu-cat-link { -webkit-tap-highlight-color: transparent; }

button.jsp-filter-tag:not(.is-on):hover,
button.jsp-filter-tag:not(.is-on):focus,
button.jsp-filter-tag:not(.is-on):active { background-color: #fff !important; color: var(--jsp-dark) !important; }
.jsp-menu-tags button.jsp-filter-new.is-on:hover,
.jsp-menu-tags button.jsp-filter-new.is-on:focus,
.jsp-menu-tags button.jsp-filter-new.is-on:active { background-color: #5f7a4a !important; color: #fff !important; }
button.jsp-filter-sale.is-on:hover,
button.jsp-filter-sale.is-on:focus,
button.jsp-filter-sale.is-on:active { background-color: var(--jsp-red) !important; color: #fff !important; }
button.jsp-menu-sort-option.is-on:hover,
button.jsp-menu-sort-option.is-on:focus,
button.jsp-menu-sort-option.is-on:active { background-color: var(--jsp-rust) !important; color: #fff !important; }

button.jsp-cond-step:hover,
button.jsp-cond-step:focus,
button.jsp-cond-step:active { background: rgba(255, 255, 255, 0.07) !important; color: inherit !important; }
html[data-jsp-theme="light"] button.jsp-cond-step:hover,
html[data-jsp-theme="light"] button.jsp-cond-step:focus,
html[data-jsp-theme="light"] button.jsp-cond-step:active { background: #f5f5f5 !important; color: var(--jsp-dark) !important; }

button.jsp-menu-btn:not(.is-active):hover,
button.jsp-menu-btn:not(.is-active):focus,
button.jsp-menu-btn:not(.is-active):active { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; }
html[data-jsp-theme="light"] button.jsp-menu-btn:not(.is-active):hover,
html[data-jsp-theme="light"] button.jsp-menu-btn:not(.is-active):focus,
html[data-jsp-theme="light"] button.jsp-menu-btn:not(.is-active):active { background: #f5f5f5 !important; color: var(--jsp-dark) !important; }

/* Klawiatura nadal widzi, gdzie jest - obrys zamiast koloru tła. */
button.jsp-filter-tag:focus-visible,
button.jsp-cond-step:focus-visible { outline: 2px solid var(--jsp-rust); outline-offset: 3px; }

/* --- stan w chipie nad feedem: kreski zamiast cyfr --- */
.jsp-cond-meter-chip { padding: 3px 6px; margin: 0 2px; box-shadow: none; }
.jsp-cond-meter-chip i { width: 8px; height: 3px; }

/* --- kategorie: układ z menu m.mikup.pl --- */
.jsp-menu-cat-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 0; }
.jsp-menu-cat-group-title {
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.14);
	font: 800 12px/1.2 var(--jsp-font-ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
html[data-jsp-theme="light"] .jsp-menu-cat-group-title { color: var(--jsp-dark); border-bottom-color: var(--jsp-border); }
.jsp-menu-cat-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	color: inherit;
	-webkit-touch-callout: none;
}
.jsp-menu-cat-link .jsp-menu-cat-name { font-size: 13px; line-height: 1.25; text-align: left; }
.jsp-menu-cat-thumb {
	display: block;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.08);
}
.jsp-menu-cat-link .jsp-menu-cat-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 7px;
}
html[data-jsp-theme="light"] .jsp-menu-cat-thumb { background: #f0ede9; }

/* Stan w menu: strzałki i kreski na środku (2026-09-10). */
.jsp-menu-cond-stepper { justify-content: center; }

/* =========================================================================
   Logo na środku (telefon), przycisk "Usuń" w koszyku (2026-09-10)
   ========================================================================= */
@media (max-width: 782px) {
	.jsp-nav-left { justify-content: center; }
	.jsp-nav-left .custom-logo-link { margin-left: auto; margin-right: auto; }
}

/* --- strona koszyka (blok): kosz jako przycisk z napisem "Usuń" --- */
.wc-block-cart .wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 8px !important;
	padding: 6px 13px 6px 9px !important;
	border: 1px solid var(--jsp-border) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--jsp-muted) !important;
	font: 600 12px/1 var(--jsp-font-ui) !important;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wc-block-cart .wc-block-cart-item__remove-link svg { width: 16px; height: 16px; fill: currentColor; }
.wc-block-cart .wc-block-cart-item__remove-link::after { content: "Usuń"; }
.wc-block-cart .wc-block-cart-item__remove-link:hover,
.wc-block-cart .wc-block-cart-item__remove-link:focus,
.wc-block-cart .wc-block-cart-item__remove-link:active {
	color: var(--jsp-red) !important;
	border-color: var(--jsp-red) !important;
	background: #fff5f5 !important;
}

/* --- szuflada koszyka: ten sam przycisk --- */
.jsp-cart-remove {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px 5px 8px;
	border: 1px solid var(--jsp-border);
	border-radius: 999px;
	background: #fff;
	color: var(--jsp-muted);
	font: 600 11px/1 var(--jsp-font-ui);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.jsp-cart-remove svg { flex-shrink: 0; }
button.jsp-cart-remove:hover,
button.jsp-cart-remove:focus,
button.jsp-cart-remove:active {
	color: var(--jsp-red) !important;
	border-color: var(--jsp-red) !important;
	background: #fff5f5 !important;
}
.jsp-qty-btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 782px) {
	html[data-jsp-theme="dark"] .wc-block-cart .wc-block-cart-item__remove-link,
	html[data-jsp-theme="dark"] .jsp-cart-remove {
		background: transparent !important;
		border-color: #3a322c !important;
		color: #b8ada2 !important;
	}
}

/* WooCommerce (blocks/cart.css) wymusza na tym przycisku 24x24 px - przy
   naszym paddingu tresc miala 0 px szerokosci, ikona znikala, a napis
   "Usun" nie mial gdzie sie zmiescic. Rozmiar wynika z tresci. */
.wc-block-cart .wc-block-cart-item__remove-link {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box;
}
.wc-block-cart .wc-block-cart-item__remove-link svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.wc-block-cart .wc-block-cart-item__remove-link::after { content: "Usuń"; display: inline !important; }

/* =========================================================================
   Ciemny motyw także na komputerze (2026-09-10)
   -------------------------------------------------------------------------
   Do tej pory ciemne reguły działały tylko do 782 px. Poniżej te same
   reguły bez ograniczenia szerokości (skopiowane automatycznie - wyłącznie
   takie, których każdy selektor zaczyna się od html[data-jsp-theme="dark"],
   więc nie ma tu żadnych reguł układu), a pod nimi to, czego komputer
   potrzebuje dodatkowo. Przełącznik: przycisk przy koncie w nagłówku.
   ========================================================================= */
html[data-jsp-theme="dark"] { color-scheme: dark; }
html[data-jsp-theme="dark"] body { background: #141210; color: #eae3da; }
html[data-jsp-theme="dark"] .site-content,
html[data-jsp-theme="dark"] .content-area,
html[data-jsp-theme="dark"] .entry-content,
html[data-jsp-theme="dark"] .page .entry-title,
html[data-jsp-theme="dark"] .woocommerce-notices-wrapper { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-fixed-wrapper,
html[data-jsp-theme="dark"] .jsp-nav-top-row { background: #1b1714; border-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-nav-logo-text { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-icon-btn { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-icon-btn:hover,
html[data-jsp-theme="dark"] .jsp-nav-icon-btn:active { background: rgba(208, 128, 48, 0.22); }
html[data-jsp-theme="dark"] .jsp-nav-search input { background: #241f1b; border-color: #3a322c; color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-search input::placeholder { color: #8f867d; }
html[data-jsp-theme="dark"] .jsp-search-suggestions { background: #241f1b; color: #eae3da; border-color: #3a322c; }
html[data-jsp-theme="dark"] .jsp-search-suggestion:hover,
html[data-jsp-theme="dark"] .jsp-search-suggestion.is-active { background: #2c2622; }
html[data-jsp-theme="dark"] .jsp-mobile-product-image { background: #0f0d0b; }
html[data-jsp-theme="dark"] .jsp-feed { background: #141210; }
html[data-jsp-theme="dark"] .jsp-mobile-sheet { background: #1b1714; color: #eae3da; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); }
html[data-jsp-theme="dark"] .jsp-mobile-sheet-head { border-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-mobile-sheet-head h2 { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-mobile-sheet-close { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-mobile-sheet-close-wide { background: #2c2622; color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-mobile-sheet-close-wide:active { background: #3a322c; }
html[data-jsp-theme="dark"] .jsp-product-desc-text,
html[data-jsp-theme="dark"] .jsp-damage-full-text,
html[data-jsp-theme="dark"] .jsp-product-notes-text,
html[data-jsp-theme="dark"] .jsp-mobile-panel-subtitle { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-no-damage { color: #b8ada2; }
html[data-jsp-theme="dark"] .jsp-menu-hint { color: #8f867d; }
html[data-jsp-theme="dark"] .jsp-feed-chip-clear { background: #eae3da; color: #1b1714; }
html[data-jsp-theme="dark"] .jsp-footer { background: #1b1714; border-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-footer-nav a,
html[data-jsp-theme="dark"] .jsp-footer-copy { color: #b8ada2; }
html[data-jsp-theme="dark"] .wp-block-woocommerce-cart,
html[data-jsp-theme="dark"] .wp-block-woocommerce-checkout,
html[data-jsp-theme="dark"] .wc-block-cart,
html[data-jsp-theme="dark"] .wc-block-checkout { color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-components-sidebar-layout .wc-block-components-sidebar,
html[data-jsp-theme="dark"] .wc-block-components-totals-wrapper,
html[data-jsp-theme="dark"] .wc-block-components-panel,
html[data-jsp-theme="dark"] .wc-block-components-order-summary,
html[data-jsp-theme="dark"] .wc-block-components-checkout-step,
html[data-jsp-theme="dark"] .wc-block-components-express-payment { background: transparent; border-color: #2c2622; color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-cart-items th,
html[data-jsp-theme="dark"] .wc-block-components-checkout-step__description,
html[data-jsp-theme="dark"] .wc-block-components-product-metadata,
html[data-jsp-theme="dark"] .wc-block-components-totals-item__description { color: #b8ada2; }
html[data-jsp-theme="dark"] .wc-block-components-product-name,
html[data-jsp-theme="dark"] .wc-block-components-product-price,
html[data-jsp-theme="dark"] .wc-block-components-totals-item,
html[data-jsp-theme="dark"] .wc-block-components-order-summary-item,
html[data-jsp-theme="dark"] .wc-block-components-checkout-step__title,
html[data-jsp-theme="dark"] .wc-block-components-title,
html[data-jsp-theme="dark"] .wc-block-components-shipping-rates-control__package,
html[data-jsp-theme="dark"] .wc-block-components-radio-control__option,
html[data-jsp-theme="dark"] .wc-block-components-radio-control__label,
html[data-jsp-theme="dark"] .wc-block-components-payment-method-label,
html[data-jsp-theme="dark"] .wc-block-components-checkbox__label,
html[data-jsp-theme="dark"] .wc-block-components-formatted-money-amount { color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-components-text-input input,
html[data-jsp-theme="dark"] .wc-block-components-select select,
html[data-jsp-theme="dark"] .wc-block-components-select-input select,
html[data-jsp-theme="dark"] .wc-block-components-textarea textarea,
html[data-jsp-theme="dark"] .wc-block-components-combobox input,
html[data-jsp-theme="dark"] .wc-block-components-country-input select,
html[data-jsp-theme="dark"] .wc-block-components-state-input select { background: #241f1b; color: #eae3da; border-color: #3a322c; }
html[data-jsp-theme="dark"] .wc-block-components-text-input label,
html[data-jsp-theme="dark"] .wc-block-components-select label,
html[data-jsp-theme="dark"] .wc-block-components-combobox label { color: #b8ada2; }
html[data-jsp-theme="dark"] .wc-block-components-text-input.is-active label,
html[data-jsp-theme="dark"] .wc-block-components-combobox.is-active label { color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-components-button:not(.is-secondary) { background: var(--jsp-rust); color: #fff; }
html[data-jsp-theme="dark"] .wc-block-components-button.is-secondary,
html[data-jsp-theme="dark"] .wc-block-components-button.is-link { color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-cart__submit-container,
html[data-jsp-theme="dark"] .wc-block-components-radio-control__option,
html[data-jsp-theme="dark"] .wc-block-components-payment-method-label { background: transparent; }
html[data-jsp-theme="dark"] .wc-block-cart-item__image img,
html[data-jsp-theme="dark"] .wc-block-components-order-summary-item__image img { background: #fff; border-radius: 6px; }
html[data-jsp-theme="dark"] .wc-block-components-notice-banner { background: #241f1b; color: #eae3da; border-color: #3a322c; }
html[data-jsp-theme="dark"] hr,
html[data-jsp-theme="dark"] .wc-block-components-express-payment-continue-rule { border-color: #2c2622; color: #8f867d; }
html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="text"],
html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="email"],
html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="tel"],
html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="number"],
html[data-jsp-theme="dark"] .wc-block-components-text-input input[type="url"],
html[data-jsp-theme="dark"] .wc-block-components-combobox input,
html[data-jsp-theme="dark"] .wc-block-components-textarea textarea,
html[data-jsp-theme="dark"] .wc-block-components-select select,
html[data-jsp-theme="dark"] .wc-block-components-country-input select,
html[data-jsp-theme="dark"] .wc-block-components-state-input select {
		background-color: #241f1b !important;
		color: #eae3da !important;
		border-color: #3a322c !important; }
html[data-jsp-theme="dark"] .wc-block-components-text-input input::placeholder { color: #8f867d; }
html[data-jsp-theme="dark"] .jsp-product-meta dd { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-product-meta dt { color: #b8ada2; }
html[data-jsp-theme="dark"] .wc-block-checkout__form .wc-block-components-checkout-step { box-shadow: none; }
html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option,
html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option {
		box-shadow: none !important;
		background: transparent !important; }
html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option:hover,
html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option:hover { background: #2b2521 !important; }
html[data-jsp-theme="dark"] .wc-block-components-radio-control > .wc-block-components-radio-control__option--checked-option-highlighted,
html[data-jsp-theme="dark"] .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
		box-shadow: inset 0 0 0 1.5px var(--jsp-rust) !important;
		background: #2e211a !important; }
html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id > label { color: #eae3da !important; }
html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxWrapper {
		background: #241f1b !important;
		border-color: #3a322c !important; }
html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBox { color: #eae3da; }
html[data-jsp-theme="dark"] .wc-block-components-address-form__jsp-paczkomat-point-id .apaczkaComboBoxButton { border-left-color: #3a322c; }
html[data-jsp-theme="dark"] .jsp-cond-breakdown-name { color: #b8ada2; }
html[data-jsp-theme="dark"] .wc-block-cart .wc-block-cart-item__remove-link,
html[data-jsp-theme="dark"] .jsp-cart-remove {
		background: transparent !important;
		border-color: #3a322c !important;
		color: #b8ada2 !important; }

/* --- przełącznik w nagłówku --- */
button.jsp-theme-toggle {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
button.jsp-theme-toggle:hover,
button.jsp-theme-toggle:focus,
button.jsp-theme-toggle:active { background: none !important; }
button.jsp-theme-toggle:focus-visible { outline: 2px solid var(--jsp-rust); outline-offset: 3px; }
.jsp-theme-toggle .jsp-theme-icon-sun { display: none; }
html[data-jsp-theme="dark"] .jsp-theme-toggle .jsp-theme-icon-sun { display: block; }
html[data-jsp-theme="dark"] .jsp-theme-toggle .jsp-theme-icon-moon { display: none; }

/* --- logo: podświetlenie w ciemnym motywie (ta sama technika co to.mikup.pl,
       w kolorach JSP) --- */
html[data-jsp-theme="dark"] .custom-logo-link img {
	filter: brightness(1.15) drop-shadow(0 0 10px rgba(242, 97, 15, 0.45)) drop-shadow(0 0 4px rgba(255, 154, 77, 0.35));
}

/* --- ciemny motyw: szare zamiast białych przycisków --- */
html[data-jsp-theme="dark"] .jsp-filter-tag:not(.is-on) {
	background: #2b2521;
	border-color: #3a322c;
	color: #eae3da;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-jsp-theme="dark"] .jsp-filter-tag::before { background: rgba(255, 255, 255, 0.2); }
html[data-jsp-theme="dark"] .jsp-filter-clear { background: none; color: #b8ada2; }
html[data-jsp-theme="dark"] button.jsp-filter-tag:not(.is-on):hover,
html[data-jsp-theme="dark"] button.jsp-filter-tag:not(.is-on):focus,
html[data-jsp-theme="dark"] button.jsp-filter-tag:not(.is-on):active { background-color: #2b2521 !important; color: #eae3da !important; }
html[data-jsp-theme="dark"] .jsp-product-action {
	background: #2b2521 !important;
	border-color: #3a322c !important;
	color: #eae3da !important;
}
html[data-jsp-theme="dark"] .jsp-cond-meter-static {
	background: #2b2521;
	box-shadow: inset 0 0 0 1px #3a322c;
}
html[data-jsp-theme="dark"] .jsp-cond-meter-static i { background: rgba(255, 255, 255, 0.14); }
html[data-jsp-theme="dark"] .wc-block-cart .wc-block-cart-item__remove-link,
html[data-jsp-theme="dark"] .jsp-cart-remove {
	background: #2b2521 !important;
	border-color: #3a322c !important;
	color: #eae3da !important;
}

/* =========================================================================
   Koszyk bez opisów produktów (2026-09-10) - jak podsumowanie zamówienia.
   ========================================================================= */
.wc-block-cart .wc-block-components-product-metadata { display: none !important; }

/* =========================================================================
   Telefon: licznik na przycisku "Koszyk" jako mała metka w rogu (2026-09-10)
   ========================================================================= */
.jsp-mobile-cart-count {
	top: 3px;
	right: 0;
	min-width: 24px;
	height: 17px;
	padding: 0 5px 0 10px;
	border-radius: 3px;
	background: var(--jsp-rust);
	color: #fff;
	font: 800 10px/17px var(--jsp-font-ui);
	font-variant-numeric: tabular-nums;
	transform: rotate(-8deg);
	transform-origin: 100% 50%;
	box-shadow: 0 2px 6px rgba(20, 18, 16, 0.35);
}
.jsp-mobile-cart-count::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* =========================================================================
   Ciemny motyw na komputerze - uzupełnienie (2026-09-10)
   -------------------------------------------------------------------------
   Miejsca wykryte skanem na żywo (jasne tło albo ciemny tekst na ciemnym).
   Paleta: tło #141210, powierzchnia #1b1714, wyżej #241f1b, szare przyciski
   #2b2521, linie #2c2622/#3a322c, tekst #eae3da, przygaszony #b8ada2,
   akcent #ff9a4d. Metki z ceną, mierniki na zdjęciach i logotypy płatności
   zostają jasne - leżą na zdjęciach albo potrzebują białego tła.
   ========================================================================= */
html[data-jsp-theme="dark"] h1,
html[data-jsp-theme="dark"] h2,
html[data-jsp-theme="dark"] h3,
html[data-jsp-theme="dark"] h4,
html[data-jsp-theme="dark"] .product_title,
html[data-jsp-theme="dark"] .jsp-product-col-title,
html[data-jsp-theme="dark"] .jsp-product-col-damage .jsp-product-col-title,
html[data-jsp-theme="dark"] .jsp-cart-suggest-title,
html[data-jsp-theme="dark"] .jsp-cart-drawer-head h2 { color: #eae3da; }

/* --- menu kategorii pod nagłówkiem + rozwijane podkategorie --- */
html[data-jsp-theme="dark"] .jsp-nav-menu { background: #1b1714; border-top-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-nav-menu a,
html[data-jsp-theme="dark"] .jsp-nav-menu button { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-menu a:hover { color: #ff9a4d; }
html[data-jsp-theme="dark"] .jsp-nav-dropdown { background: #1b1714; border-color: #2c2622; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
html[data-jsp-theme="dark"] .jsp-nav-sub-card,
html[data-jsp-theme="dark"] .jsp-nav-sub-card span { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-nav-img-box { background: #241f1b; border-color: #3a322c; }

/* --- kafelki: tło pod zdjęciem i podpis po najechaniu --- */
html[data-jsp-theme="dark"] .jsp-product-tile { background: #241f1b; }
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-product-overlay { background: rgba(27, 23, 20, 0.9); }
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-product-overlay,
html[data-jsp-theme="dark"] .jsp-product-tile .woocommerce-loop-product__title,
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-product-overlay .price,
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-product-overlay .price bdi { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-omnibus-lowest-price { color: #b8ada2; }

/* --- sortowanie na liście --- */
html[data-jsp-theme="dark"] .woocommerce-ordering select {
	background-color: #241f1b !important;
	border-color: #3a322c !important;
	color: #eae3da !important;
}

/* --- stronicowanie --- */
html[data-jsp-theme="dark"] .woocommerce-pagination .page-numbers a { background: #241f1b; color: #eae3da; border-color: #3a322c; }

/* --- podpowiedzi wyszukiwarki --- */
html[data-jsp-theme="dark"] .jsp-search-suggestion-name { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-search-suggestion-price { color: #ff9a4d; }
html[data-jsp-theme="dark"] .jsp-search-suggestions-more { background: #1b1714; color: #ff9a4d; border-color: #2c2622; }

/* --- karta produktu --- */
html[data-jsp-theme="dark"] .jsp-product-hero-summary .price,
html[data-jsp-theme="dark"] .jsp-product-hero-summary .price bdi,
html[data-jsp-theme="dark"] .jsp-product-hero-summary .price .woocommerce-Price-currencySymbol { color: #ff9a4d; }
html[data-jsp-theme="dark"] .jsp-product-meta dd a { color: #ff9a4d; }
html[data-jsp-theme="dark"] .jsp-ship { background: #1b1714; border-color: #3a322c; color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-ship-lead,
html[data-jsp-theme="dark"] .jsp-ship-lead .woocommerce-Price-amount { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-ship-link { color: #ff9a4d; }
html[data-jsp-theme="dark"] .storefront-sticky-add-to-cart { background: #1b1714; border-color: #2c2622; color: #eae3da; }
html[data-jsp-theme="dark"] .storefront-sticky-add-to-cart__content-title,
html[data-jsp-theme="dark"] .storefront-sticky-add-to-cart__content-title strong { color: #eae3da; }

/* --- szuflada koszyka --- */
html[data-jsp-theme="dark"] .jsp-cart-coupon-input { background: #241f1b; border-color: #3a322c; color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-cart-coupon-input::placeholder { color: #8f867d; }
html[data-jsp-theme="dark"] .jsp-cart-drawer-foot { background: #1b1714; border-top-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-cart-drawer-foot .jsp-cart-total,
html[data-jsp-theme="dark"] .jsp-cart-drawer-foot .jsp-cart-total strong { color: #eae3da; }
html[data-jsp-theme="dark"] .button.jsp-cart-view { background: #2b2521 !important; border-color: #3a322c !important; color: #eae3da !important; }
html[data-jsp-theme="dark"] .jsp-suggest-tile { background: #241f1b; }
html[data-jsp-theme="dark"] .jsp-suggest-tile-overlay { background: rgba(27, 23, 20, 0.9) !important; }
html[data-jsp-theme="dark"] .jsp-suggest-tile-name { color: #eae3da !important; }

/* --- stopka --- */
html[data-jsp-theme="dark"] .jsp-footer a,
html[data-jsp-theme="dark"] .site-footer a,
html[data-jsp-theme="dark"] footer a { color: #d8cfc6; }
html[data-jsp-theme="dark"] .jsp-footer a:hover,
html[data-jsp-theme="dark"] footer a:hover { color: #ff9a4d; }

/* Podpis kafelka w ciemnym motywie: reguly kafelka ustawiaja kolor nazwy i
   ceny z !important, wiec ciemna wersja tez musi. */
html[data-jsp-theme="dark"] .jsp-product-tile .woocommerce-loop-product__title,
html[data-jsp-theme="dark"] .jsp-product-tile .price,
html[data-jsp-theme="dark"] .jsp-product-tile .price .woocommerce-Price-amount,
html[data-jsp-theme="dark"] .jsp-product-tile .price bdi,
html[data-jsp-theme="dark"] .jsp-product-tile .price .woocommerce-Price-currencySymbol { color: #eae3da !important; }
html[data-jsp-theme="dark"] .jsp-product-tile .price ins,
html[data-jsp-theme="dark"] .jsp-product-tile .price ins .woocommerce-Price-amount,
html[data-jsp-theme="dark"] .jsp-product-tile .price ins bdi { color: #ff6b5e !important; }
html[data-jsp-theme="dark"] .jsp-product-tile .price del,
html[data-jsp-theme="dark"] .jsp-product-tile .price del .woocommerce-Price-amount,
html[data-jsp-theme="dark"] .jsp-product-tile .price del bdi { color: #8f867d !important; }
/* metki z cena leza na zdjeciu i maja zostac biale na pomaranczowym */
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-price-tag .woocommerce-Price-amount,
html[data-jsp-theme="dark"] .jsp-product-tile .jsp-price-tag bdi { color: #fff !important; }

/* =========================================================================
   Szuflada koszyka: ciemny motyw i bez ruchu w bok; licznik jako metka
   (2026-09-10)
   ========================================================================= */
/* Szuflada miała stałe 380 px - na telefonie 375 px wystawała o 5 px, a
   ukryte dymki przy logotypach płatności (.jsp-pay-tip) wychodziły poza nią
   do ~410 px, więc środek przesuwał się palcem w bok. */
.jsp-cart-drawer { max-width: 100vw; overflow-x: hidden; }
.jsp-cart-drawer-body { overflow-x: hidden; }

html[data-jsp-theme="dark"] .jsp-cart-drawer { background: #1b1714; color: #eae3da; box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55); }
html[data-jsp-theme="dark"] .jsp-cart-drawer-head { border-bottom-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-cart-drawer-head button,
html[data-jsp-theme="dark"] .jsp-cart-drawer-close { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-cart-line { border-bottom-color: #2c2622; }
html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-line-name,
html[data-jsp-theme="dark"] .jsp-cart-drawer h3,
html[data-jsp-theme="dark"] .jsp-cart-drawer h4,
html[data-jsp-theme="dark"] .jsp-cart-drawer p,
html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-section-title { color: #eae3da; }
html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-line-price,
html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-line-price bdi { color: #ff9a4d; }
html[data-jsp-theme="dark"] .jsp-qty-btn { background: #2b2521; border-color: #3a322c; color: #eae3da; }

/* --- licznik koszyka jako metka: telefon (dolny pasek) i komputer --- */
.jsp-mobile-cart-count,
.jsp-nav-cart-count {
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}
/* cyfra siedziała za wysoko - krój ma wysoki wydłużenie górne */
.jsp-mobile-cart-count { padding-top: 1px; box-sizing: border-box; }

.jsp-nav-cart-count {
	top: -2px !important;
	right: -10px !important;
	min-width: 26px !important;
	height: 18px !important;
	padding: 1px 5px 0 11px !important;
	border-radius: 3px !important;
	background: var(--jsp-rust);
	color: #fff;
	font: 800 10.5px/1 var(--jsp-font-ui) !important;
	font-variant-numeric: tabular-nums;
	transform: rotate(-8deg);
	transform-origin: 100% 50%;
	box-shadow: 0 2px 6px rgba(20, 18, 16, 0.35) !important;
	box-sizing: border-box;
}
.jsp-nav-cart-count::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Szuflada: `min-width: 380px` wygrywa z `max-width` (tak dziala CSS przy
   konflikcie), wiec na telefonie 375 px szuflada i tak miala 380 px. */
.jsp-cart-drawer { min-width: min(380px, 100vw); }

html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-summary-line,
html[data-jsp-theme="dark"] .jsp-cart-drawer .jsp-cart-info-title { color: #eae3da; }

/* Cyfra na metce siedziala ~1,2 px za wysoko (wysokie wydluzenie gorne kroju). */
.jsp-mobile-cart-count { padding-top: 3px !important; }
.jsp-nav-cart-count { padding-top: 3px !important; }

/* Korekta: 3 px przesunelo cyfre o ~0,7 px za nisko - 2 px wyrownuje. */
.jsp-mobile-cart-count { padding-top: 2px !important; }
.jsp-nav-cart-count { padding-top: 2px !important; }

/* Dymki przy logotypach platnosci w szufladzie na telefonie: dotyk ich nie
   wywola, a niewidoczne i tak wystawaly poza szuflade (zrodlo przesuwania
   w bok). */
@media (max-width: 782px) {
	.jsp-cart-drawer .jsp-pay-tip { display: none; }
}

/* Pole "Dostawa od ..." - bez bialego podswietlenia w ciemnym motywie i bez
   systemowego blysku przy stuknieciu (2026-09-10). */
.jsp-ship-summary { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
	html[data-jsp-theme="dark"] .jsp-ship-summary:hover { background: #241f1b; }
}

/* Metka licznika znika przy pustym koszyku (2026-09-10). */
.jsp-nav-cart-count.is-empty,
.jsp-mobile-cart-count.is-empty { display: none !important; }

/* =========================================================================
   Kafelek: uwagi w dymku pod miernikiem (2026-09-10)
   -------------------------------------------------------------------------
   Miernik NIE znika juz po najechaniu na kafelek (usuniety zabłąkany
   selektor `.jsp-product-tile:hover .jsp-damage-btn`, doklejony do reguly
   panelu - dawal przyciskowi display:none). Panel uwag to dymek pod
   miernikiem: pojawia sie po najechaniu na miernik ALBO po kliknieciu
   (klasa is-open z product-tile.js). Chowa sie z opoznieniem 0,15 s, zeby
   dalo sie przejechac kursorem z miernika na dymek i przeczytac dluzszy
   tekst. Ukryty nie przechwytuje klikniec w kafelek.
   ========================================================================= */
.jsp-product-tile .jsp-damage-panel {
	display: flex !important;
	inset: auto !important;
	top: 40px !important;
	left: 10px !important;
	right: 10px !important;
	max-height: calc(100% - 54px);
	padding: 14px 15px 12px !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 34px rgba(20, 18, 16, 0.32), 0 2px 6px rgba(20, 18, 16, 0.18);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	overflow: visible;
}
/* strzalka dymka wskazujaca miernik */
.jsp-product-tile .jsp-damage-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 22px;
	width: 14px;
	height: 14px;
	background: rgba(255, 255, 255, 0.96);
	transform: rotate(45deg);
	border-radius: 2px;
}
.jsp-product-tile .jsp-damage-btn:hover + .jsp-damage-panel,
.jsp-product-tile .jsp-damage-btn:focus-visible + .jsp-damage-panel,
.jsp-product-tile .jsp-damage-panel:hover,
.jsp-product-tile .jsp-damage-panel.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}
/* "Kliknij, aby zamknac" tylko przy dymku otwartym kliknieciem */
.jsp-product-tile .jsp-damage-panel::after { display: none; }
.jsp-product-tile .jsp-damage-panel.is-open::after { display: block; }
.jsp-product-tile .jsp-damage-panel .jsp-damage-text { overflow-y: auto; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
	.jsp-product-tile .jsp-damage-panel { transition: none; }
}

/* Zdjecia uszkodzen wklejone w uwagi: w dymku dopasowane do jego szerokosci
   (bez paska przewijania w poziomie), nizsze, zeby tekst zostal na wierzchu. */
.jsp-product-tile .jsp-damage-panel .jsp-damage-text { overflow-x: hidden; }
.jsp-product-tile .jsp-damage-panel img,
.jsp-product-tile .jsp-damage-panel figure {
	max-width: 100% !important;
	height: auto !important;
	margin: 6px 0 0 !important;
}
.jsp-product-tile .jsp-damage-panel img {
	max-height: 140px;
	width: auto !important;
	object-fit: contain;
	border-radius: 6px;
}