/* ==========================================================================
   Tomex: sklep i kategorie produktow (woocommerce/archive-product.php,
   template-parts/shop/). Zasada "ciemna rama, jasny sklep" (rekomendacja przyjeta
   2026-10-10): ciemny pas z tytulem i rzedem kategorii, produkty na jasnym tle,
   kafelki jak na stronie glownej (zdjecie, nazwa, cena, "Zobacz produkt", telefon).
   Wszystko w zakresie body.tx-sklep. Reguly dla ul.products i li.product nadpisuja
   domyslne style WooCommerce i Astry (float, szerokosci, marginesy) tylko tutaj.
   ========================================================================== */

/* --- Podstawa ------------------------------------------------------------- */

body.tx-sklep {
	background: var(--tx-paper);
}

/* Astra ogranicza kontener list WooCommerce (max 1540 px, margines 32 px z boku);
   pas tytulowy i jasna czesc maja siegac krawedzi ekranu. */
body.tx-sklep #content.site-content > .ast-container {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.tx-sklep .tk {
	--tk-wrap: 1240px;
	--tk-header-clear: 104px;
	display: block;
	overflow-x: clip;
	color: var(--tx-ink);
	font-family: var(--tx-font-body);
	font-size: var(--tx-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Naglowek serwisu jest przyklejony nad trescia: do 1199 px konczy sie na 78 px,
   od 1200 px (menu komputerowe) na 106 px. */
@media (min-width: 1200px) {
	body.tx-sklep .tk {
		--tk-header-clear: 140px;
	}
}

body.tx-sklep .tk *,
body.tx-sklep .tk *::before,
body.tx-sklep .tk *::after {
	box-sizing: border-box;
}

body.tx-sklep .tk ::selection {
	background: var(--tx-green);
	color: var(--tx-on-green);
}

body.tx-sklep .tk :focus-visible {
	outline: 3px solid var(--tx-green-ink);
	outline-offset: 3px;
}

body.tx-sklep .tk a {
	-webkit-tap-highlight-color: transparent;
}

/* WooCommerce i Astra zeruja obwodke fokusu linkow w kafelkach; widoczny fokus wraca tutaj. */
body.tx-sklep .tk ul.products li.product a:focus-visible,
body.tx-sklep .tk .tk-dept:focus-visible {
	outline: 3px solid var(--tx-green-ink);
	outline-offset: 3px;
}



body.tx-sklep .tk .th-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

body.tx-sklep .tk-wrap {
	width: min(100% - 2 * var(--tx-gutter), var(--tk-wrap));
	margin-inline: auto;
}

body.tx-sklep .tk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Pas tytulowy: ciemny, z brylami wegla -------------------------------- */

body.tx-sklep .tk-band {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: var(--tk-header-clear) 0 clamp(32px, 4.5vw, 52px);
	background: var(--tx-coal-950);
	color: var(--tx-text);
	text-align: center;
}

body.tx-sklep .tk-band::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: max(100%, 760px);
	aspect-ratio: 1900 / 1069;
	background: var(--tk-bg-sm, none) center / cover no-repeat;
	pointer-events: none;
	transform: scaleX(-1);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%);
	mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%);
}

@media (min-width: 1024px) {
	body.tx-sklep .tk-band::before {
		background-image: var(--tk-bg, none);
	}
}

body.tx-sklep .tk .tk-title {
	margin: 0;
	color: var(--tx-white);
	font-family: var(--tx-font-display);
	font-size: clamp(2.375rem, 1.7rem + 2.9vw, 4rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: none;
	text-wrap: balance;
}

body.tx-sklep .tk .tk-lead {
	margin: 10px 0 0;
	color: var(--tx-text-2);
	font-size: var(--tx-fs-lead);
}

/* --- Kategorie: na jasnym tle pod pasem tytulowym ----------------------------
   Zasada wlasciciela (2026-10-11): na telefonie wszystkie kategorie widoczne od razu, bez przesuwania
   palcem w bok; kolko wyboru w rogu (jak przy zaznaczaniu), wybrana karta wypelniona. */

body.tx-sklep .tk-nav {
	margin-bottom: clamp(28px, 4vw, 44px);
}

body.tx-sklep .tk .tk-nav__list {
	--tk-nav-gap: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tk-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Telefon: 3 w rzedzie (5 kategorii = 3 + 2, wysrodkowane); przy duzym pismie mniej w rzedzie. */
body.tx-sklep .tk .tk-nav__list li {
	display: flex;
	flex: 0 0 max(6rem, calc((100% - 2 * var(--tk-nav-gap)) / 3));
	margin: 0;
}

/* Tablet i komputer: piec rownych kart w jednym rzedzie (najwyzej 12rem kazda, wysrodkowane). */
@media (min-width: 768px) {
	body.tx-sklep .tk .tk-nav__list {
		--tk-nav-gap: 12px;
	}

	body.tx-sklep .tk .tk-nav__list li {
		flex: 0 1 calc((100% - 4 * var(--tk-nav-gap)) / 5);
		min-width: 7rem;
		max-width: 12rem;
	}
}

body.tx-sklep .tk .tk-dept {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 14px 10px 12px;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.05);
	transition:
		border-color var(--tx-fast) var(--tx-ease),
		background-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-sklep .tk .tk-dept:active {
	transform: scale(0.97);
}

/* Kolko wyboru w lewym gornym rogu. */
body.tx-sklep .tk-dept__radio {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 18px;
	height: 18px;
	border: 2px solid var(--tx-ink-2);
	border-radius: 50%;
	background: #ffffff;
	transition: border-color var(--tx-fast) var(--tx-ease), box-shadow var(--tx-fast) var(--tx-ease);
}

/* Grafika kategorii bez tla (od wlasciciela): stoi wprost na karcie, bez ramki i podkladki. */
body.tx-sklep .tk-dept__well {
	display: block;
	flex: none;
	width: 64px;
	height: 64px;
}

body.tx-sklep .tk .tk-dept__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.tx-sklep .tk-dept__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

body.tx-sklep .tk-dept__name {
	font-family: var(--tx-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

body.tx-sklep .tk-dept__count {
	color: var(--tx-ink-2);
	font-size: 0.8125rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Wybrana kategoria: karta w kolorze wegla, kolko wypelnione zielenia. */
body.tx-sklep .tk .tk-dept.is-current {
	border-color: var(--tx-coal-900);
	background: var(--tx-coal-900);
	color: var(--tx-white);
	box-shadow: 0 10px 22px -14px rgb(9 11 8 / 0.8);
}

body.tx-sklep .tk .tk-dept.is-current .tk-dept__count {
	color: var(--tx-green);
}

body.tx-sklep .tk .tk-dept.is-current .tk-dept__radio {
	border-color: var(--tx-green);
	background: var(--tx-coal-900);
	box-shadow: inset 0 0 0 3px var(--tx-coal-900), inset 0 0 0 10px var(--tx-green);
}

@media (hover: hover) and (pointer: fine) {
	body.tx-sklep .tk .tk-dept:not(.is-current):hover {
		border-color: var(--tx-ink-2);
	}

	body.tx-sklep .tk .tk-dept:not(.is-current):hover .tk-dept__radio {
		border-color: var(--tx-green-ink);
	}
}

/* Telefon (po regulach bazowych, zeby je nadpisac): wezsze karty, wiec mniejsze zdjecie i pismo nazwy, zeby slowa ("workowany") miescily sie w calosci. */
@media (max-width: 767px) {
	body.tx-sklep .tk .tk-dept {
		gap: 6px;
		padding: 12px 6px 10px;
	}

	body.tx-sklep .tk-dept__well {
		width: 56px;
		height: 56px;
	}

	body.tx-sklep .tk-dept__name {
		font-size: 0.875rem;
	}

	body.tx-sklep .tk-dept__radio {
		top: 8px;
		left: 8px;
		width: 16px;
		height: 16px;
	}
}

/* --- Produkty: jasna czesc ------------------------------------------------- */

body.tx-sklep .tk-products {
	padding: clamp(28px, 4vw, 48px) 0 var(--tx-section);
	background: var(--tx-paper);
}

body.tx-sklep .tk-group + .tk-group {
	margin-top: clamp(40px, 5vw, 64px);
}

body.tx-sklep .tk-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--tx-line-light);
}

body.tx-sklep .tk-group__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(47 109 20 / 0.1);
	color: var(--tx-green-ink);
}

body.tx-sklep .tk-group__icon .th-icon {
	width: 22px;
	height: 22px;
}

body.tx-sklep .tk .tk-group__title {
	margin: 0;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: var(--tx-fs-h3);
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

body.tx-sklep .tk .tk-group__note {
	flex-basis: 100%;
	margin: 0;
	color: var(--tx-ink-2);
	font-size: var(--tx-fs-small);
	line-height: 1.4;
}

@media (min-width: 640px) {
	body.tx-sklep .tk .tk-group__note {
		flex-basis: auto;
		margin-left: auto;
		text-align: right;
	}
}

/* Siatka: WooCommerce i Astra ustawiaja ul.products jako float z clearfixem;
   tutaj siatka CSS, pseudo-elementy clearfixa wylaczone (inaczej bylyby polami siatki). */
body.tx-sklep .tk ul.products.tk-grid {
	--tk-gap: 12px;
	display: grid;
	/* Kolumny od wielkosci pisma: zwykle pismo daje 2 kafelki w rzedzie na telefonie i 4 od 768 px,
	   powiekszone (np. 200% w ustawieniach telefonu) automatycznie 1 na telefonie i 2 na tablecie,
	   zamiast przyciskow wystajacych z kafelka (test 2026-10-11). Najwyzej 4 w rzedzie. */
	grid-template-columns: repeat(auto-fill, minmax(max(9.5rem, (100% - 3 * var(--tk-gap)) / 4), 1fr));
	gap: var(--tk-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tx-sklep .tk ul.products.tk-grid::before,
body.tx-sklep .tk ul.products.tk-grid::after {
	display: none;
	content: none;
}

@media (min-width: 768px) {
	body.tx-sklep .tk ul.products.tk-grid {
		--tk-gap: 16px;
	}
}

@media (min-width: 1280px) {
	body.tx-sklep .tk ul.products.tk-grid {
		--tk-gap: 20px;
	}
}

/* --- Kafelek produktu ------------------------------------------------------ */

body.tx-sklep .tk ul.products li.product.tk-tile {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--tx-line-light);
	border-radius: var(--tx-r-lg);
	background: #ffffff;
	color: var(--tx-ink);
	text-align: left;
	box-shadow: 0 1px 2px rgb(21 25 18 / 0.06), 0 14px 30px -20px rgb(21 25 18 / 0.35);
	transition: transform var(--tx-base) var(--tx-ease), box-shadow var(--tx-base) var(--tx-ease);
}

body.tx-sklep .tk .tk-tile__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #ffffff;
}

body.tx-sklep .tk ul.products li.product .tk-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	box-shadow: none;
	transition: transform 600ms var(--tx-ease), filter var(--tx-base) var(--tx-ease);
}

body.tx-sklep .tk-tile__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--tx-paper);
	color: var(--tx-ink-2);
}

body.tx-sklep .tk-tile__fallback .th-icon {
	width: 40%;
	height: 40%;
}

body.tx-sklep .tk-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 14px 12px;
	border-top: 1px solid var(--tx-line-light);
}

body.tx-sklep .tk ul.products li.product .tk-tile__name {
	margin: 0;
	padding: 0;
	color: var(--tx-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-size: clamp(1rem, 0.8rem + 2.6cqi, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	text-wrap: pretty;
}

/* Cel dotyku 44 px bez zmiany ukladu. */
body.tx-sklep .tk .tk-tile__name a {
	display: inline-block;
	margin-block: -12px;
	padding-block: 12px;
	color: var(--tx-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.tx-sklep .tk .tk-tile__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 6px 0 0;
	color: var(--tx-alert-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

body.tx-sklep .tk-tile__stock::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

body.tx-sklep .tk ul.products li.product .tk-tile__price {
	display: block;
	margin: 10px 0 0;
	color: var(--tx-green-ink);
	font-family: var(--tx-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

body.tx-sklep .tk .tk-tile__amount {
	font-size: 1.375rem;
	font-size: clamp(1.375rem, 0.95rem + 5.4cqi, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

body.tx-sklep .tk .tk-tile__amount .woocommerce-Price-amount,
body.tx-sklep .tk .tk-tile__amount bdi {
	color: inherit;
	font: inherit;
}

/* Cena promocyjna z WooCommerce: stara przekreslona, mniejsza, nowa jak zwykle. */
body.tx-sklep .tk .tk-tile__amount del {
	margin-right: 6px;
	color: var(--tx-ink-2);
	font-size: 0.6em;
	font-weight: 600;
	opacity: 1;
}

body.tx-sklep .tk .tk-tile__amount ins {
	text-decoration: none;
}

body.tx-sklep .tk .tk-tile__unit {
	font-size: 0.9375rem;
	font-size: clamp(0.9375rem, 0.8rem + 1.6cqi, 1.125rem);
	font-weight: 600;
}

body.tx-sklep .tk .tk-tile__second {
	margin: 6px 0 0;
	color: var(--tx-ink-2);
	font-size: 0.875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

body.tx-sklep .tk ul.products li.product .tk-tile__second strong {
	display: inline;
	color: var(--tx-ink);
	font-weight: 700;
	white-space: nowrap;
}

body.tx-sklep .tk ul.products li.product.is-out .tk-tile__price {
	color: var(--tx-ink-2);
}

body.tx-sklep .tk ul.products li.product.is-out .tk-tile__img {
	filter: grayscale(0.7);
	opacity: 0.85;
}

body.tx-sklep .tk .tk-tile__actions {
	display: grid;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

/* --- Przyciski kafelka ------------------------------------------------------ */

body.tx-sklep .tk .tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	width: 100%;
	min-height: 48px;
	padding: 0.7em 0.6em;
	border: 2px solid transparent;
	border-radius: var(--tx-r);
	font-family: var(--tx-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--tx-fast) var(--tx-ease),
		border-color var(--tx-fast) var(--tx-ease),
		color var(--tx-fast) var(--tx-ease),
		transform var(--tx-fast) var(--tx-ease);
}

body.tx-sklep .tk .tk-btn:active {
	transform: scale(0.97);
}

body.tx-sklep .tk .tk-btn--primary {
	border-color: var(--tx-green-press);
	background: var(--tx-green);
	color: var(--tx-on-green);
}

body.tx-sklep .tk .tk-btn--call {
	min-height: 44px;
	border-color: var(--tx-line-light);
	background: transparent;
	color: var(--tx-ink);
	font-variant-numeric: tabular-nums;
}

body.tx-sklep .tk .tk-btn--call .th-icon {
	width: 18px;
	height: 18px;
	color: var(--tx-green-ink);
}

/* Waski kafelek (telefon 360 px): przyciski mieszcza sie w jednej linii. */
@container (max-width: 179px) {
	body.tx-sklep .tk .tk-btn {
		padding-inline: 0.45em;
		font-size: 0.875rem;
	}

	body.tx-sklep .tk .tk-btn--call .th-icon {
		width: 16px;
		height: 16px;
	}
}

@container (min-width: 260px) {
	body.tx-sklep .tk-tile__body {
		padding: 18px 20px 20px;
	}

	body.tx-sklep .tk .tk-tile__second {
		font-size: 0.9375rem;
	}

	body.tx-sklep .tk .tk-btn--primary {
		font-size: 1rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	body.tx-sklep .tk ul.products li.product.tk-tile:hover {
		box-shadow: 0 1px 2px rgb(21 25 18 / 0.08), 0 22px 40px -22px rgb(21 25 18 / 0.45);
		transform: translateY(-3px);
	}

	body.tx-sklep .tk ul.products li.product.tk-tile:hover .tk-tile__img {
		transform: scale(1.04);
	}

	body.tx-sklep .tk .tk-tile__name a:hover {
		color: var(--tx-green-ink);
	}

	body.tx-sklep .tk .tk-btn--primary:hover {
		border-color: var(--tx-green-hover);
		background: var(--tx-green-hover);
	}

	body.tx-sklep .tk .tk-btn--call:hover {
		border-color: var(--tx-ink);
		color: var(--tx-ink);
	}
}

/* --- Komunikaty WooCommerce (np. dodanie do koszyka) ------------------------- */

body.tx-sklep .tk .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 24px;
}

@media (prefers-reduced-motion: reduce) {
	body.tx-sklep .tk .tk-btn,
	body.tx-sklep .tk .tk-dept,
	body.tx-sklep .tk ul.products li.product.tk-tile,
	body.tx-sklep .tk ul.products li.product .tk-tile__img {
		transition-duration: 0s;
	}

	body.tx-sklep .tk .tk-btn:active,
	body.tx-sklep .tk .tk-dept:active,
	body.tx-sklep .tk ul.products li.product.tk-tile:hover,
	body.tx-sklep .tk ul.products li.product.tk-tile:hover .tk-tile__img {
		transform: none;
	}
}