/* ==========================================================================
   shop.css - Listing (Sklep, kategoria-produktu), Koszyk, Zamówienie,
   Moje konto. Ładowany warunkowo (zob. functions.php) po main.css - a na
   koszyku/zamówieniu/moje-koncie (to zarazem WP Page -> page.php) także po
   pages.css, więc może dograć styl bez ingerencji w tamte pliki.

   Koszyk i zamówienie to WooCommerce Cart/Checkout Blocks (React, klasy
   wc-block-components-*), NIE klasyczne szablony cart.php/form-checkout.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LISTING - /sklep/ i /kategoria-produktu/*
   -------------------------------------------------------------------------- */

/* WooCommerce nie owija archiwum w .wrap - robimy to sami. */
#primary.content-area {
	max-width: var(--layout-max);
	margin: 0 auto;
	padding: 40px 20px 120px;
}

/* Breadcrumbs - drobne, wyciszone */
.woocommerce-breadcrumb {
	font-size: var(--fs-fine);
	color: var(--c-muted);
	margin-bottom: 32px;
	display: block;
}
.woocommerce-breadcrumb a {
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.woocommerce-breadcrumb a:hover {
	color: var(--c-accent-em);
	border-bottom-color: var(--c-accent-em);
}

/* Nagłówek listingu - duży tytuł z lewej, opis kategorii pod spodem */
.woocommerce-products-header {
	margin-bottom: 8px;
}
.woocommerce-products-header__title.page-title {
	font-size: var(--fs-h1);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-align: left;
	max-width: 20ch;
	/* Dłuższe H1 listingów (SEO etap 2: „Akcesoria z merino: czapki, kominy,
	   szal") łamały się 659/299 px - balance wyrównuje linie i zabezpiecza
	   przed sierotą, gdyby copy nagłówka jeszcze urosło. Ten sam wzorzec co
	   .page-hero h1 (pages.css) i tytuł PDP (product.css). */
	text-wrap: balance;
}
.term-description,
.page-description {
	margin-top: 18px;
	max-width: 62ch;
	color: var(--c-muted);
	font-size: 17px;
	line-height: 1.65;
	font-style: italic;
}
.term-description p,
.page-description p {
	margin: 0;
}
/* Tekst wprowadzający w 2+ akapitach (SEO 09.2026, po akceptacji Tomasza):
   odstęp między akapitami; pojedynczy akapit wygląda jak dotąd. */
.term-description p + p,
.page-description p + p {
	margin-top: 10px;
}

/* Toolbar - licznik wyników (lewo) + sortowanie (prawo), jedna linia
   (markup: inc/listing.php -> merinoshe_listing_toolbar) */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 22px 0;
	margin: 28px 0 40px;
	/* Audyt D1 (#23): rama góra+dół wokół jednego wiersza UI to zdublowana
	   kreska - zostaje tylko dolna granica oddzielająca od siatki. */
	border-bottom: 1px solid rgba(132, 127, 118, .3);
}
.shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 14px;
	color: var(--c-muted);
}

/* Filtry listingu usunięte (2026-08-20) - nawigację robią kafle kategorii. */
.shop-toolbar .woocommerce-ordering {
	margin: 0;
}
.woocommerce-ordering .orderby {
	appearance: none;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--c-plum);
	background-color: var(--c-card);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C3B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	border: 1px solid var(--c-taupe);
	border-radius: 999px;
	padding: 9px 38px 9px 18px;
	transition: border-color .18s ease;
}
.woocommerce-ordering .orderby:hover,
.woocommerce-ordering .orderby:focus {
	outline: none;
	border-color: var(--c-accent);
}

/* Paginacja - pill w stylu KV */
.woocommerce-pagination {
	margin-top: 64px;
	display: flex;
	justify-content: center;
}
.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-plum);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.woocommerce-pagination a.page-numbers:hover {
	background: var(--c-card);
	color: var(--c-accent-em);
}
.woocommerce-pagination .page-numbers.current {
	background: var(--c-plum);
	color: var(--c-cream);
}
.woocommerce-pagination .page-numbers.dots {
	background: none;
}

/* main.css chce ukryć CTA na kafelku (kupno z karty produktu), ale przegrywa
   specyficznością z domyślnym woocommerce.css - dobijamy tu, bez ruszania
   main.css. */
ul.products li.product .button {
	display: none !important;
}

/* Badge "Doprodukowujemy ~7 dni" zamiast Brak w magazynie
   (markup: inc/listing.php -> merinoshe_listing_restock_badge) */
ul.products li.product a {
	position: relative;
}
ul.products li.product.outofstock img {
	opacity: .5;
}
/* Slot na gwiazdki oceny - stała wysokość na KAŻDYM kaflu (markup:
   inc/listing.php -> merinoshe_listing_rating_slot). Woo wstawia .star-rating
   tylko produktom z opiniami, przez co ceny w parze kafli rozjeżdżały się o
   ~18px (audyt M2). Rezerwacja miejsca zamiast ukrywania - odwracalne przy
   decyzji o opiniach (backlog). */
ul.products li.product .loop-rating-slot {
	min-height: 16px;
	margin: 2px 0;
}
ul.products li.product .loop-rating-slot .star-rating {
	margin: 0;
}

.restock-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	background: var(--c-card);
	border: 1px solid rgba(192, 173, 157, .6);
	color: var(--c-plum);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .02em;
	padding: 6px 12px;
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   2. KOSZYK + ZAMÓWIENIE - komponenty wspólne (WooCommerce Blocks)
   Cart i Checkout Block współdzielą te same klasy wc-block-components-*,
   więc stylujemy raz - obowiązuje na obu stronach.
   -------------------------------------------------------------------------- */

.wc-block-cart,
.wc-block-checkout {
	font-family: var(--font-body);
}

/* Karta boczna z podsumowaniem - --c-card, radius 18px */
.wc-block-components-sidebar.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar {
	background: var(--c-card);
	border: 1px solid rgba(192, 173, 157, .35);
	border-radius: 18px;
	padding: 32px;
}

.wc-block-cart__totals-title {
	font-size: 20px;
	margin-bottom: 22px;
}
.wc-block-components-checkout-order-summary__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--c-plum);
	margin: 0;
}
.wc-block-components-checkout-order-summary__title-price {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-accent-em);
}

.wc-block-components-totals-item__label {
	font-family: var(--font-body);
	font-size: var(--fs-support);
	color: var(--c-muted);
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--c-plum);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-size: 19px;
	color: var(--c-plum);
}
.wc-block-components-totals-item__description,
.wc-block-components-totals-footer-item-tax {
	color: var(--c-muted);
	font-size: 13px;
}

/* Panel kuponu - obramowanie daje już wc-block-components-totals-wrapper
   (wc-blocks CSS), więc tu tylko kolor linku "Dodaj kupony". */
.wc-block-components-panel__button {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-accent-em);
}
.wc-block-components-panel__button:hover {
	color: var(--c-accent);
}

/* Inputy tekstowe (kupon, adresy) - radius 12px, border --c-taupe, focus --c-accent */
.wc-block-components-text-input input[type] {
	border-radius: 12px !important;
	border: 1px solid var(--c-taupe) !important;
	font-family: var(--font-body);
	background-color: #fff !important;
}
.wc-block-components-text-input input[type]:focus {
	border-color: var(--c-accent) !important;
	box-shadow: 0 0 0 1px var(--c-accent);
	outline: none; /* natywny niebieski ring Chrome - focus pokazuje box-shadow w KV (audyt M4) */
}
.wc-block-components-text-input label {
	font-family: var(--font-body);
	color: var(--c-muted);
}
.wc-block-components-text-input.is-active label {
	color: var(--c-accent-em);
}

.wc-blocks-components-select__container {
	border-radius: 12px;
}
.wc-blocks-components-select__select {
	border-radius: 12px !important;
	border: 1px solid var(--c-taupe) !important;
	font-family: var(--font-body);
	background-color: #fff;
}
.wc-blocks-components-select__select:focus {
	border-color: var(--c-accent) !important;
	box-shadow: 0 0 0 1px var(--c-accent);
	outline: none;
}

/* Checkboxy (notatka, regulamin) */
.wc-block-components-checkbox__label {
	font-size: var(--fs-support);
	color: var(--c-muted);
}
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
	color: var(--c-accent-em);
}

/* Przyciski akcji - śliwka, pill (klasy .btn są w main.css, ale Woo Blocks
   ma własny komponent .wc-block-components-button - dogrywamy spójnie) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
	background-color: var(--c-plum) !important;
	color: var(--c-cream) !important;
	border: 2px solid var(--c-plum) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	font-family: var(--font-head);
	font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover {
	background-color: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
	transform: translateY(-2px);
}
.wc-block-components-checkout-place-order-button {
	font-size: 17px;
	padding: 20px 32px;
}

/* --------------------------------------------------------------------------
   3. KOSZYK - specyfika tabeli pozycji
   -------------------------------------------------------------------------- */

.wc-block-cart-items {
	width: 100%;
	border-collapse: collapse;
}
.wc-block-cart-items__header th {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-fine);
	letter-spacing: var(--ls-fine);
	text-transform: uppercase;
	color: var(--c-muted);
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(132, 127, 118, .3);
	text-align: left;
}
.wc-block-cart-items__row {
	border-bottom: 1px solid rgba(132, 127, 118, .25);
}
.wc-block-cart-items__row:last-child {
	border-bottom: 0; /* ostatni wiersz bez kreski - koniec tabeli domyka layout (audyt D1) */
}
.wc-block-cart-items__row td {
	padding: 24px 12px 24px 0;
	vertical-align: top;
}
.wc-block-cart-item__image {
	width: 96px; /* Woo daje td 80px MINUS 16px paddingu - img klampował się do 64px (max-width:100%) */
}
.wc-block-cart-item__image img {
	border-radius: 10px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
/* .page-content a (pages.css) ma text-decoration:underline z wyższą
   specyficznością (koszyk/zamówienie to zarazem WP Page) - nadpisujemy. */
.wc-block-components-product-name {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 17px;
	color: var(--c-plum) !important;
	text-decoration: none !important;
}
.wc-block-components-product-name:hover {
	color: var(--c-accent-em) !important;
}
.wc-block-cart-item__prices {
	margin: 6px 0 12px;
}

/* Tap-targety min 44px i font 16px na inpucie (iOS nie zoomuje) - audyt M4. */
.wc-block-components-quantity-selector {
	border: 1.5px solid var(--c-taupe) !important;
	border-radius: 999px !important;
	background: #fff;
	overflow: hidden;
	width: 148px;
	min-height: 44px;
	margin-bottom: 0;
}
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector__button {
	color: var(--c-plum);
	opacity: 1 !important;
	font-family: var(--font-head);
	font-weight: 700 !important;
	font-size: 16px !important;
	min-width: 44px !important; /* Woo trzyma 30px selektorem o wyższej specyficzności */
	min-height: 44px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}
.wc-block-components-quantity-selector__button:hover {
	color: var(--c-accent-em);
	background: var(--c-card);
}
.wc-block-components-quantity-selector__input {
	font-family: var(--font-head);
	font-weight: 600 !important;
	font-size: 16px !important;
	min-height: 44px;
	color: var(--c-plum);
}
/* Banery powiadomień bloków koszyka/checkout (React) - zieleń Woo -> KV */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
	background: var(--c-card) !important;
	border: 1.5px solid var(--c-taupe) !important;
	border-radius: 14px !important;
	color: var(--c-plum) !important;
	font-family: var(--font-body);
}
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--c-plum) !important;
	fill: var(--c-cream) !important;
}
.wc-block-components-notice-banner.is-error {
	border-radius: 14px !important;
	border-color: var(--c-accent-em) !important;
}

/* Mikro-fonty Woo Blocks: "przez Kurier 15 zł" 10,9px, atrybuty pozycji
   ("Kolor: Beż") 11,4px - podbijamy do czytelnego minimum (audyt M4). */
.wc-block-components-totals-shipping__via,
.wc-block-components-product-details,
.wc-block-components-product-details__name,
.wc-block-components-product-details__value {
	font-size: 13px !important;
}

.wc-block-cart-item__remove-link {
	color: var(--c-muted);
	opacity: .7;
}
.wc-block-cart-item__remove-link:hover {
	color: var(--c-accent-em);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. ZAMÓWIENIE - kroki formularza, podsumowanie
   -------------------------------------------------------------------------- */

.wc-block-components-checkout-step {
	padding: 32px 0;
	border-bottom: 1px solid rgba(132, 127, 118, .25);
}
.wc-block-components-checkout-step:first-child {
	padding-top: 0;
}
.wc-block-components-checkout-step:last-of-type {
	border-bottom: 0; /* przed przyciskiem "Kupuję i płacę" kreska dublowała odstęp (audyt D1) */
}
.wc-block-checkout__actions {
	border: 0;
	padding-top: 8px;
}
.wc-block-components-checkout-step__title {
	font-size: 21px;
	margin: 0 0 4px;
}
.wc-block-components-checkout-step__description {
	color: var(--c-muted);
	font-size: 14px;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--fs-support);
}
.wc-block-components-order-summary-item__image img {
	border-radius: 8px;
}

.wc-block-checkout__terms {
	color: var(--c-muted);
	font-size: 14px;
}
.wc-block-checkout__terms a {
	color: var(--c-accent-em);
}

/* --------------------------------------------------------------------------
   5. MOJE KONTO - formularze klasyczne + nawigacja (nisko priorytetowo)
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 4px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(132, 127, 118, .2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0; /* kreska pod ostatnią pozycją listy zbędna (audyt D1) */
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--c-plum);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--c-accent-em);
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account form .form-row label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-plum);
	margin-bottom: 6px;
	display: inline-block;
}
.woocommerce-account .input-text,
.woocommerce-account select,
.woocommerce-account textarea {
	border: 1px solid var(--c-taupe) !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	font-family: var(--font-body);
	font-size: 16px; /* dziedziczone 13,3px zoomowało iOS Safari (audyt M4) */
	background: #fff;
	width: 100%;
}
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	outline: none;
	border-color: var(--c-accent) !important;
}
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
	font-family: var(--font-head);
	font-weight: 600;
	background: var(--c-plum) !important;
	color: var(--c-cream) !important;
	border: 2px solid var(--c-plum) !important;
	border-radius: 999px !important;
	padding: 13px 28px !important;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button:hover {
	background: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
	transform: translateY(-1px);
}
.woocommerce-account table.shop_table {
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-account table.shop_table th {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-fine);
	letter-spacing: var(--ls-fine);
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: left;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(132, 127, 118, .3);
}
.woocommerce-account table.shop_table td {
	padding: 16px 12px 16px 0;
	border-bottom: 1px solid rgba(132, 127, 118, .2);
	font-size: var(--fs-support);
}
.woocommerce-account table.shop_table tr:last-child td {
	border-bottom: 0; /* kreska tuż nad końcem tabeli dublowała się z otoczeniem (audyt D1) */
}

/* Checkbox "Zapamiętaj mnie" - natywne 13x13px to za mały tap-target;
   powiększamy pole i dajemy labelowi padding (audyt M4). */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}
.woocommerce-account #rememberme {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--c-plum);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	/* Desktopowe 120px dolnego oddechu to na telefonie pusty ekran przed
	   stopką (audyt M2, niska). */
	#primary.content-area {
		padding-bottom: 64px;
	}
	.woocommerce-products-header__title.page-title {
		font-size: clamp(28px, 8vw, 40px);
	}
	.shop-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}
	/* Sort select miał 221x32px i font 13px - tap-target min 44px, font 16px
	   (iOS zoomuje selecty <16px tak samo jak inputy). Audyt M2. */
	.shop-toolbar .woocommerce-ordering,
	.woocommerce-ordering .orderby {
		width: 100%;
	}
	.woocommerce-ordering .orderby {
		min-height: 44px;
		padding-block: 11px;
		font-size: 16px;
	}
	.wc-block-components-sidebar.wc-block-cart__sidebar,
	.wc-block-components-sidebar.wc-block-checkout__sidebar {
		padding: 22px;
	}
	.wc-block-cart-items__header th:first-child,
	.wc-block-cart-items__header th:nth-child(2) {
		display: none;
	}
}
/* Najwęższe ekrany (360px): wiersz koszyka (miniatura 80px + pigułka 148px +
   cena) przestaje się mieścić po podbiciu tap-targetów - zwężamy miniaturę
   i input pigułki, przyciski zostają 44px. */
@media (max-width: 480px) {
	.wc-block-cart-item__image {
		width: 76px; /* 64px miniatura + 12px padding (szerokość td liczy się z paddingiem) */
		padding-right: 12px !important;
	}
	.wc-block-cart-item__image img {
		width: 64px;
		height: 64px;
	}
	.wc-block-components-quantity-selector {
		width: 138px;
	}
	.wc-block-cart-items__row td {
		padding-right: 8px;
	}
}
@media (max-width: 400px) {
	.wc-block-components-quantity-selector {
		width: 124px; /* 44+44px przyciski + input na 2 cyfry - inaczej 360px overflowuje */
	}
}

/* --------------------------------------------------------------------------
   7. INSPIRACJE WEB-RESEARCH (2026-08) - listing:
   kafle kategorii (#10), swap zdjęcia na hover (#9), tooltip
   cost-per-wear (#11), focus-states (audyt W18).
   -------------------------------------------------------------------------- */

/* Asymetryczne kafle kategorii Dziecko / Kobieta / Akcesoria na /sklep/
   (markup: inc/listing.php -> merinoshe_shop_category_tiles) */
.shop-cats {
	display: grid;
	grid-template-columns: 5fr 4fr 3fr;
	gap: 24px;
	align-items: start;
	margin: 36px 0 8px;
}
.shop-cat {
	display: block;
	text-decoration: none;
}
.shop-cat:nth-child(1) .sc-img { aspect-ratio: 5 / 4; }
.shop-cat:nth-child(2) { margin-top: 56px; }
.shop-cat:nth-child(2) .sc-img { aspect-ratio: 4 / 5; }
.shop-cat:nth-child(3) { margin-top: 24px; }
.shop-cat:nth-child(3) .sc-img { aspect-ratio: 3 / 4; }
.sc-img {
	width: 100%;
	height: auto; /* atrybut height="1000" (przeciw CLS) nie może nadpisać aspect-ratio */
	object-fit: cover;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
	transition: transform .35s ease;
}
.shop-cat:hover .sc-img { transform: translateY(-4px); }
.sc-name {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-h4);
	letter-spacing: -0.01em;
	color: var(--c-plum);
	transition: color .18s ease;
}
.shop-cat:hover .sc-name { color: var(--c-accent-em); }
.sc-arrow {
	font-size: .8em;
	transition: transform .18s ease;
}
.shop-cat:hover .sc-arrow { transform: translateX(4px); }
/* Mobile: zamiast trzech full-width kafli (łącznie ~1378px wysokości, produkty
   dopiero po 2,5 ekranach scrolla - audyt M2) - kompaktowe poziome karty:
   kwadratowy kadr z lewej, etykieta + strzałka. Całość ~370px, produkty
   startują w okolicy pierwszego ekranu. */
@media (max-width: 720px) {
	.shop-cats { grid-template-columns: 1fr; gap: 12px; margin: 28px 0 8px; }
	.shop-cat:nth-child(2), .shop-cat:nth-child(3) { margin-top: 0; }
	.shop-cats .shop-cat {
		display: grid;
		grid-template-columns: 92px 1fr;
		align-items: center;
		gap: 16px;
		padding: 9px;
		background: var(--c-card);
		border: 1px solid rgba(192, 173, 157, .35);
		border-radius: 14px;
	}
	.shop-cats .shop-cat .sc-img {
		aspect-ratio: 1 / 1;
		height: 92px;
		border-radius: 10px;
	}
	/* Kadr "Kobieta": postać stoi przy prawej krawędzi zdjęcia - dosuwamy
	   kadr, żeby nie była ucięta (audyt M2, niska). */
	.shop-cats .shop-cat:nth-child(2) .sc-img { object-position: 70% center; }
	.shop-cats .sc-name {
		margin-top: 0;
		font-size: 19px;
		justify-content: space-between;
		padding-right: 10px;
	}
	.shop-cat:hover .sc-img { transform: none; }
}
/* Cztery kafle (19.10.2026: doszedł Mężczyzna obok Kobiety). Desktop: ten sam
   rytm co przy trzech - szeroki poziomy Dziecko, dwa pionowe w zygzaku
   (Kobieta niżej, Mężczyzna wyżej), wąski Akcesoria. Tablet: cztery równe
   kolumny bez schodków (przy 768 px wąski kafel nie mieścił etykiety).
   Mobile (<=720): bez zmian, poziome karty jak wyżej. */
@media (min-width: 721px) {
	.shop-cats--4 { grid-template-columns: 5fr 4fr 4fr 3fr; }
	.shop-cats--4 .shop-cat:nth-child(3) { margin-top: 0; }
	.shop-cats--4 .shop-cat:nth-child(3) .sc-img { aspect-ratio: 4 / 5; }
	.shop-cats--4 .shop-cat:nth-child(4) { margin-top: 24px; }
	.shop-cats--4 .shop-cat:nth-child(4) .sc-img { aspect-ratio: 3 / 4; }
}
@media (min-width: 721px) and (max-width: 1100px) {
	.shop-cats--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.shop-cats--4 .shop-cat:nth-child(n) { margin-top: 0; }
	.shop-cats--4 .shop-cat:nth-child(n) .sc-img { aspect-ratio: 4 / 5; }
}

/* Swap zdjęcia na hover kafla (markup: inc/listing.php).
   Drugie zdjęcie (.swap-img) leży nad featured i wchodzi crossfadem;
   kafle bez galerii (bez .has-second) dostają delikatny zoom 1.03. */
ul.products li.product .swap-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
	margin: 0;
}
ul.products li.product.has-second:hover .swap-img { opacity: 1; transform: translateY(-4px); }
ul.products li.product:not(.has-second):hover img { transform: translateY(-4px) scale(1.03); }
/* Na dotyku nie ma hovera - display:none + loading="lazy" = drugie zdjęcie
   w ogóle się nie pobiera (~pół MB mniej na kategorii mobile, audyt 30.09). */
@media (hover: none) {
	ul.products li.product .swap-img { display: none; }
}

/* Audyt W18: widoczne focus-states na listingu */
ul.products li.product a:focus-visible,
.shop-cat:focus-visible,
.woocommerce-ordering .orderby:focus-visible,
.woocommerce-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Reduced motion: wyłącz animacje nowych elementów */
@media (prefers-reduced-motion: reduce) {
	.sc-img, .sc-name, .sc-arrow,
	ul.products li.product .swap-img,
	.shop-cat:hover .sc-img { transform: none; }
	.shop-cat:hover .sc-arrow { transform: none; }
	ul.products li.product.has-second:hover .swap-img { transform: none; }
	ul.products li.product:not(.has-second):hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   8. TEKSTY WPROWADZAJĄCE POD SIATKĄ (2026-09-11, decyzje Tomasza)
   Treść strony „Sklep" i akapity SEO opisów kategorii stały pod H1 w kolumnie
   62ch i na desktopie zostawiały pustą prawą połowę nagłówka. Teraz renderują
   się po siatce produktów (markup: inc/listing.php -> merinoshe_shop_about_after_loop)
   jak rząd benefitów: cienka linia, kicker z lewej, dwa akapity obok siebie
   z prawej - bez pustego pola. Pod H1 zostaje tylko tagline kategorii
   (.term-description, sekcja 1 - pierwszy akapit opisu).
   -------------------------------------------------------------------------- */
.shop-about {
	display: grid;
	grid-template-columns: 3fr 9fr;
	gap: 20px 48px;
	align-items: start;
	margin-top: 96px;
	padding-top: 44px;
	border-top: 1px solid rgba(132, 127, 118, .3);
}
/* Kicker = kopia wzorca .section-kicker z pages.css (13px / .14em / uppercase /
   muted) - pages.css nie ładuje się na listingu, stąd duplikat. Zmiana wzorca
   = zmiana w obu miejscach. */
.shop-about-kicker {
	margin: 0;
	padding-top: 5px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-label);
	line-height: 1.6;
	letter-spacing: var(--ls-kicker);
	text-transform: uppercase;
	color: var(--c-muted);
}
/* .shop-about-text: na /sklep/ to div.page-description z Woo (klasa dodana
   w PHP), na kategoriach własny div. Pełna szerokość, prosty krój i kolor
   akapitów, które klientka faktycznie czyta (--fs-body), dwie kolumny. */
.shop-about .shop-about-text {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 40px;
	margin: 0;
	max-width: none;
	font-style: normal;
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--c-graphite);
}
/* text-wrap: pretty - bez sierot jednowyrazowych w ostatniej linii akapitu
   (krytyk 11.09: „sztuki.", „dni." na 1280-1366px); Firefox ignoruje.
   overflow-wrap: anywhere - długi nierozdzielny ciąg w treści (np. wklejony
   URL) nie rozpycha mobile (krytyk: 229px @390 bez tej reguły). */
.shop-about .shop-about-text p {
	margin: 0;
	max-width: 58ch;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}
.shop-about .shop-about-text a {
	color: var(--c-accent-em);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.shop-about .shop-about-text a:hover {
	color: var(--c-accent);
}
/* Poniżej 1320px kicker idzie nad tekst, a dwie kolumny akapitów dostają
   pełną szerokość - przy 3fr/9fr miara spadała do 29-40ch (krytyk 11.09). */
@media (max-width: 1320px) {
	.shop-about {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.shop-about-kicker {
		padding-top: 0;
	}
}
@media (max-width: 720px) {
	.shop-about {
		margin-top: 56px;
		padding-top: 28px;
	}
	.shop-about .shop-about-text {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
 * Koszyk (audyt W10/W5): pasek darmowej dostawy, cross-sell, pusty koszyk.
 * Doklejone przez render_block na bloku woocommerce/cart (inc/listing.php).
 * ------------------------------------------------------------------------ */

.cart-shipping-bar {
	max-width: none; /* pełna szerokość siatki koszyka (krytyk 10.09: 860px wisiało w powietrzu) */
	margin: 0 auto 24px;
	padding: 18px 22px;
	background: var(--c-card);
	border: 1px solid rgba(192, 173, 157, .35);
	border-radius: 16px;
	/* Owca po lewej, tekst + pasek po prawej (01.09) */
	display: flex;
	flex-wrap: wrap; /* podpowiedź .csb-pick schodzi do własnego wiersza */
	align-items: center;
	gap: 18px;
}
.csb-owca { width: 64px; flex: 0 0 auto; }
.csb-owca.owca-kolor { width: 84px; }
.csb-body { flex: 1 1 0; min-width: 0; } /* basis 0: przy flex-wrap tekst zostaje obok owcy */
.csb-text {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-size: var(--fs-support);
	color: var(--c-graphite);
}
.csb-text strong {
	color: var(--c-accent-em);
	font-weight: 600;
}
.csb-text.csb-done {
	color: var(--c-accent-em);
	font-weight: 600;
}
.csb-track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(192, 173, 157, .3);
	overflow: hidden;
}
.csb-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--c-accent);
	transition: width .3s ease;
}
.cart-shipping-bar.is-done .csb-track {
	background: rgba(155, 86, 106, .18);
}
/* Podpowiedź „Dobierz … - dostawa gratis” z dodaniem jednym kliknięciem
   (21.10.2026, inc/listing.php merinoshe_cart_dobierz_sugestia). */
.csb-pick {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: -4px;
	padding-top: 14px;
	border-top: 1px solid rgba(192, 173, 157, .35);
}
.csb-pick[hidden] { display: none; }
.csb-pick-img { flex: 0 0 48px; width: 48px; height: 60px; border-radius: 8px; overflow: hidden; background: #fff; }
.csb-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csb-pick-text {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-support);
	line-height: 1.4;
	color: var(--c-graphite);
}
.csb-pick-text strong { color: var(--c-accent-em); font-weight: 600; }
.csb-pick-btn { flex: 0 0 auto; padding: 10px 20px; font-size: 14px; }
.csb-pick-btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
	.csb-pick { flex-wrap: wrap; }
	.csb-pick-text { flex: 1 1 calc(100% - 60px); }
	.csb-pick-btn { flex: 1 1 100%; }
}

.cart-cross-sell {
	max-width: 860px;
	margin: 40px auto 0;
	padding-top: 32px;
	border-top: 1px solid rgba(192, 173, 157, .35);
}
.ccs-inner { padding: 0; }
.ccs-title {
	margin: 0 0 16px;
	font-family: var(--font-head);
	font-size: 20px;
	color: var(--c-graphite);
}
.ccs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ccs-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: var(--c-card);
	border: 1px solid rgba(192, 173, 157, .35);
	border-radius: 14px;
	text-decoration: none;
	color: var(--c-graphite);
	transition: border-color .18s ease, transform .18s ease;
}
.ccs-tile:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
}
.ccs-img {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #fff;
}
.ccs-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ccs-name {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.3;
}
.ccs-price {
	font-family: var(--font-head);
	font-size: 14px;
	color: var(--c-accent-em);
}
/* .page-content a (pages.css) podkreśla i koloruje kafle cross-sella
   (koszyk to zarazem WP Page) - nadpisujemy specyficznością, jak wcześniej
   przy .wc-block-components-product-name. Bez ruszania pages.css. */
.page-content .ccs-tile {
	text-decoration: none !important;
	color: var(--c-graphite);
}
.page-content .ccs-tile:hover {
	color: var(--c-graphite);
}
.page-content .ccs-tile .ccs-price {
	color: var(--c-accent-em);
}

.cart-empty-msg {
	max-width: 480px;
	margin: 24px auto;
	padding: 40px 24px;
	text-align: center;
	background: var(--c-card);
	border: 1px solid rgba(192, 173, 157, .35);
	border-radius: 16px;
}
/* margin-top !important: styl Woo Blocks daje tytułowi pustego koszyka 76px z góry (krytyk 10.09: dziura pod owcą) */
.cart-empty-msg .cart-empty-title {
	margin: 0 0 10px !important;
	font-family: var(--font-head);
	font-size: 22px;
	color: var(--c-graphite);
}
.cart-empty-text {
	margin: 0 0 20px;
	font-family: var(--font-body);
	color: var(--c-muted);
}
.cart-empty-cta {
	display: inline-block;
}

@media (max-width: 640px) {
	.ccs-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.ccs-name { font-size: 12px; }
}
/* Na najwęższych ekranach (360px) 3 kolumny dają kafle ~100px i nazwy łamane
   na 3 linie - schodzimy do 2 kolumn (audyt M4, niska). */
@media (max-width: 400px) {
	.ccs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Owca-maskotka na pustym koszyku */
.cart-empty-owca { display: block; margin: 0 auto 18px; width: 160px; }
.cart-empty-owca.owca-kolor { width: auto; height: 200px; margin-bottom: 4px; }
.cart-empty-owca.owca-kolor svg { width: auto; height: 100%; margin: 0 auto; }

/* Woo Blocks (koszyk/checkout): akcenty w tokenach KV - bez tego bloki
   trzymają się domyślnej palety Woo (przeniesione z alt-kv.css po decyzji
   KV Alt 1, 2026-09-01). */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-green: var(--c-plum);
	--wc-primary: var(--c-plum);
	--wc-highlight: var(--c-accent);
}

/* ==========================================================================
   9) Swatche koloru na kaflach + „Pokaż w kolorze" w toolbarze
   (markup: inc/swatche.php, zachowanie: assets/js/listing-kolory.js).
   Kropki jak chipy na PDP (product.css .chip-dot). Tap-target 32px (kafel)
   i 36px (mobile) przy kropce 18px - audyt mobile 25.08 wymagał ≥44px tylko
   dla głównych CTA; tu trzy kropki obok siebie w 2-kolumnowej siatce.
   ========================================================================== */
.tile-kolory {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 6px -7px; /* -7px: pierwsza kropka równo z lewą krawędzią zdjęcia */
}
.tile-kolor {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	-webkit-tap-highlight-color: transparent;
}
.tile-kolor-dot {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dot, #CFC8C0);
	box-shadow: inset 0 0 0 1px rgba(51, 48, 48, .35);
	transition: transform .15s ease, box-shadow .15s ease;
	position: relative;
	overflow: hidden;
}
.tile-kolor:hover .tile-kolor-dot { transform: scale(1.12); }
.tile-kolor.is-active .tile-kolor-dot {
	box-shadow: 0 0 0 2px var(--c-cream, #FCFBF9), 0 0 0 3.5px var(--c-plum);
}
/* Kolor bez zdjęć: kropka przygaszona przez zmieszanie z tłem, kreska pełną
   mocą (przy opacity na całości przekreślenie znikało - krytyk P1-2) */
.tile-kolor[aria-disabled="true"] { cursor: default; }
.tile-kolor[aria-disabled="true"] .tile-kolor-dot {
	transform: none;
	background: color-mix(in srgb, var(--dot, #CFC8C0) 40%, var(--c-cream, #FCFBF9));
	box-shadow: inset 0 0 0 1px rgba(51, 48, 48, .3);
}
.tile-kolor[aria-disabled="true"] .tile-kolor-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 45%, var(--c-plum) 45%, var(--c-plum) 55%, transparent 55%);
}
/* Focus na samej kropce, nie na 32px pudełku wokół niej (krytyk P3-1) */
.tile-kolor:focus-visible { outline: none; }
.tile-kolor:focus-visible .tile-kolor-dot {
	box-shadow: 0 0 0 2px var(--c-cream, #FCFBF9), 0 0 0 4px var(--c-accent);
}
/* Kafel bez zdjęć w żadnym kolorze: pusty slot tej samej wysokości (jak .loop-rating-slot) */
.tile-kolory--pusty { min-height: 32px; }
/* Kolor globalny, którego kafel nie ma (listing-kolory.js ustawia data-brak) */
.tile-kolory { flex-wrap: wrap; }
.tile-kolory[data-brak]::after {
	content: attr(data-brak) " - zdjęcia wkrótce"; /* nazwa koloru z JS, np. „Zieleń - zdjęcia wkrótce" */
	flex: 0 0 100%;
	font-size: 12px;
	line-height: 1.2;
	color: var(--c-muted);
	margin: -2px 0 4px 7px;
}
/* Kafel pętli: zdjęcie ma margin-bottom 14px (main.css) - kropki wchodzą
   w ten odstęp, tytuł zostaje w tym samym miejscu, co bez swatchy. */
ul.products li.product .tile-kolory { margin-top: -6px; }
ul.products li.product a.tile-title-link { display: block; }
ul.products li.product a.tile-title-link:hover .woocommerce-loop-product__title { text-decoration: underline; text-underline-offset: 3px; }

/* Toolbar: licznik | „Pokaż w kolorze" | sortowanie (do prawej) */
.shop-toolbar { justify-content: flex-start; }
.shop-toolbar .woocommerce-ordering { margin-left: auto; }
.shop-kolory {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.shop-kolory-label {
	font-size: 14px;
	color: var(--c-muted);
	margin-right: 2px;
}
.shop-kolor {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(192, 173, 157, .6);
	background: var(--c-card);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--c-plum);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.shop-kolor .tile-kolor-dot { width: 14px; height: 14px; }
.shop-kolor:hover { border-color: var(--c-plum); }
.shop-kolor.is-active {
	background: var(--c-plum);
	border-color: var(--c-plum);
	color: var(--c-card);
}
.shop-kolor.is-active .tile-kolor-dot { box-shadow: 0 0 0 1px rgba(244, 240, 237, .7); }
.shop-kolor:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
@media (max-width: 720px) {
	.shop-kolory { width: 100%; order: 3; }
	.shop-kolory-label { flex: 0 0 100%; margin: 0 0 2px; } /* etykieta w swoim wierszu - trzy chipy mieszczą się w jednym (krytyk P2-4) */
	.tile-kolor { width: 36px; height: 36px; }
	.tile-kolory { margin-left: -9px; }
	.tile-kolory--pusty { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	.tile-kolor:hover .tile-kolor-dot { transform: none; }
}

/* Rotacja kolorów na kaflach (listing-kolory.js sekcja 3, 14.10.2026):
   nakładka z następnym kolorem wchodzi crossfadem nad zdjęcie kafla, potem
   kafel przejmuje to zdjęcie i nakładka znika bez animacji (.no-anim).
   Leży pod .swap-img (hover), bo jest wcześniej w DOM. */
ul.products li.product .rot-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease, transform .35s ease;
}
ul.products li.product .rot-img.is-in { opacity: 1; }
ul.products li.product .rot-img.no-anim { transition: none; }
.tile-kolor-dot { transition: transform .15s ease, box-shadow .3s ease; }

/* Cross-sell koszyka: kafel to div z dwoma linkami (zdjęcie, nazwa) */
.ccs-tile a { text-decoration: none; color: inherit; }
.ccs-tile .ccs-img { display: block; }
.ccs-tile .tile-kolory { margin: 0 0 0 -7px; }
.ccs-tile .tile-kolor { width: 28px; height: 28px; }
.ccs-tile .tile-kolor-dot { width: 14px; height: 14px; }
.ccs-tile a.ccs-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-content .ccs-tile a { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------------------
   InPost PL (wtyczka od 28.09.2026) - wybór paczkomatu w kasie w KV
   zamiast żółto-zielonego stylu wtyczki (front.css InPost).
   -------------------------------------------------------------------------- */
.wc-block-checkout .easypack_show_geowidget,
.woocommerce-checkout .easypack_show_geowidget {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	max-width: none !important;
	margin: 4px 0 20px !important;
	padding: 14px 28px !important;
	background: transparent !important;
	color: var(--c-plum) !important;
	border: 2px solid var(--c-plum) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-family: var(--font-head);
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .18s ease, color .18s ease;
}
.wc-block-checkout .easypack_show_geowidget:hover,
.woocommerce-checkout .easypack_show_geowidget:hover {
	background: var(--c-plum) !important;
	color: var(--c-cream) !important;
}
#easypack_selected_point_data,
#selected-parcel-machine {
	margin: 0 0 16px !important;
	padding: 14px 18px !important;
	background: var(--c-card) !important;
	border: 1px solid var(--c-taupe) !important;
	border-radius: 12px !important;
	min-width: 0 !important;
}
.easypack-visible-point-header,
.ep-chosen-parcel-machine {
	background: none !important;
	padding: 0 !important;
	font-size: 1em !important;
	color: var(--c-graphite);
}
.easypack-woocommerce-checkout-block-alert {
	border: 1px solid var(--c-accent) !important;
	border-radius: 12px;
	padding: 10px 14px !important;
	color: var(--c-accent-em);
}
.easypack-custom-shipping-method-logo img {
	max-height: 22px !important;
	width: auto;
}

/* ==========================================================================
   Tpay w kasie (wtyczka tpay-woocommerce, 28.09.2026). Wtyczka wnosi własną
   paletę (granat #072653, niebieski #2953c6, biały kontener) - tu na tokeny
   KV. Od 21.10.2026 sekcja płatności wygląda jak „Opcje wysyłki” tuż nad nią
   (te same ramki Woo, radio, rozmiar etykiet) - bez białej karty Tpay,
   granatowych napisów i pola kodu w Arialu.
   ========================================================================== */
/* Tpay zeruje ramki Woo (1px transparent !important) - wracamy do ramek
   jak w wysyłce: zaznaczona opcja = wewnętrzna kreska 1,5px, radius 4px. */
.wc-block-checkout .wc-block-components-radio-control:has(label[for*=tpay]),
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(label[for*=tpay]) {
	border: 0 !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted:has(label[for*=tpay]).wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border: 0 !important;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1.5px var(--c-graphite) !important; /* Tpay: none !important */
}
.wc-block-checkout label[for*=tpay] .wc-block-components-radio-control__input:checked {
	border-color: rgba(0, 0, 0, .8) !important;
	background-color: #fff;
}
.wc-block-checkout label[for*=tpay] .wc-block-components-radio-control__input:checked::before {
	background-color: #000;
}
.wc-block-checkout span.payment-label {
	align-items: center;
	gap: 12px;
	margin-top: 0;
	font-size: inherit;
	font-weight: 500;
}
.wc-block-checkout span.payment-label img {
	height: 22px;
	width: auto;
	flex: none;
}
/* Logo Tpay przy przelewie jest szerokim napisem - przy 22px przytłacza
   BLIK i PayPo, tu optycznie ta sama waga. */
.wc-block-checkout span.payment-label img[src$="/tpay.svg"] {
	height: 17px;
}
/* Treść rozwiniętej metody: opis, pole kodu, regulamin - bez białej karty
   i szarych kresek, na tle strony jak reszta kasy. */
.wc-block-checkout [id^="radio-control-wc-payment-method-options-tpay"][id$="__content"] > div > p,
.wc-block-checkout [id^="radio-control-wc-payment-method-options-tpay"][id$="__content"] > div > small > p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-muted);
	margin: 0 0 12px;
}
.wc-block-checkout .tpay-blik0 {
	background: none;
}
.wc-block-checkout [id^="radio-control-wc-payment-method-options-tpay"][id$="__content"] .separator {
	display: none;
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form {
	margin: 0;
	min-height: 0;
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form.active .bottom {
	margin-left: 0;
	padding: 0 0 14px;
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom > div {
	font-size: 14px;
	color: var(--c-muted);
	margin: 0 0 6px;
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom input[type=text] {
	width: 100%;
	max-width: 220px !important;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--c-taupe);
	border-radius: 12px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .12em;
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom input[type=text]::placeholder {
	color: var(--c-taupe);
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom input[type=text]:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 1px var(--c-accent);
	outline: none;
}
.wc-block-checkout .tpay-accept-conditions {
	margin-top: 0;
}
.wc-block-checkout .tpay-accept-conditions p {
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
	margin: 0 0 4px;
}
.wc-block-checkout .tpay-accept-conditions a {
	color: inherit;
}
.wc-block-checkout .powered-by-tpay {
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--c-muted);
}
.wc-block-checkout .powered-by-tpay p {
	margin: 0;
	font-size: inherit;
}
.wc-block-checkout .powered-by-tpay img {
	height: 12px;
	width: auto;
}
.wc-block-checkout .tpay-pbl-container {
	background: none;
	max-width: none;
	padding: 0;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div {
	background: #fff; /* logotypy banków są na białym - kremowy kafel dawał białe wstawki */
	border-color: var(--c-taupe);
	border-radius: 12px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item input:checked + div > div,
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item input:focus-visible + div > div {
	border: 2px solid var(--c-plum);
	border-radius: 12px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div .name,
.wc-block-checkout .tpay-blik0,
.wc-block-checkout span.payment-label,
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom input[type=text] {
	color: var(--c-graphite);
}
.wc-block-checkout .tpay-blik0 .tpay_blik-payment-form .bottom .blik-error {
	color: var(--c-accent-em);
}
/* BLIK na telefonie (21.10.2026): Tpay daje formularzowi min-width: 350px,
   a kolumna płatności przy ekranie 375px ma ~335px - sekcja rozpychała stronę
   do ~406px i ucinała logotypy. Formularz dopasowuje się do kolumny. */
.wc-block-checkout .tpay_blik-payment-form {
	min-width: 0;
	max-width: 100%;
}
.wc-block-checkout .tpay_blik-payment-form .bottom input[type=text] {
	max-width: 100%;
	box-sizing: border-box;
}
/* Kafle banków: 200px minimum dawało na telefonie 1 kafel w rzędzie
   (~30 banków = kilka ekranów przewijania). Tu min. 130px = 2 kolumny na
   375px, 3-4 na desktopie; niższe kafle. */
.wc-block-checkout .tpay-pbl-container .tpay-pbl {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div {
	padding: 4px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div {
	padding: 6px 4px 8px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div .tpay-group-logo-holder {
	height: 48px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div .tpay-group-logo-holder img {
	width: 76px;
}
.wc-block-checkout .tpay-pbl-container .tpay-pbl .tpay-item > div > div .name {
	font-size: 12px;
	line-height: 1.3;
	padding: 0 2px;
}
.wc-block-checkout .wc-block-components-radio-control__input:checked {
	accent-color: var(--c-plum);
}
/* Błąd „Wybierz metodę płatności” ma być ukryty do próby zapłaty - wtyczka
   pokazuje go slideDown (styl inline), a body .woocommerce-error z main.css
   nadpisywał jej display:none. */
body .pbl-error.woocommerce-error,
body .blik0-error {
	display: none;
}