/* ================================================================
   MOBILE CART v1.0 — WooCommerce Koszyk dla Mobile
   ================================================================
   Zakres: body.woocommerce-cart
   Breakpoints: ≤767px (mobile), max 460px (iPhone 18 Pro Max)
   Zmienne: z /assets/css/color-scheme.css
   Desktop (≥768px): NIE jest modyfikowany — tylko tło formularza
   ================================================================ */


/* ================================================================
   1. TŁO FORMULARZA — GLOBALNE (desktop + mobile)
   ────────────────────────────────────────────────────────────────
   WooCommerce nadpisuje tło przez:
     .woocommerce-page .woocommerce form { background: #fff }
   Kontrujemy łańcuchem body-class + !important (spec. 0,2,1)
   vs WooCommerce (spec. 0,1,1) — wygrywamy bezpiecznie.
   ================================================================ */

body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce-page .woocommerce,
body.woocommerce-cart .woocommerce form,
body.woocommerce-cart .woocommerce-page form,
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form {
	background: var(--background) !important;
	color: var(--text) !important;
}

body.woocommerce-cart table.shop_table {
	background: var(--background) !important;
	border-color: var(--border) !important;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td {
	background: var(--background) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

/* Subtotal & price — zachowaj kolor ceny z color-scheme */
body.woocommerce-cart table.shop_table .woocommerce-Price-amount {
	color: var(--price-color) !important;
}

/* Cross-sells i cart-collaterals (totals) */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	background: var(--background) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}


/* ================================================================
   2. MOBILE CART LAYOUT (≤767px)
   ────────────────────────────────────────────────────────────────
   Tabela koszyka → pionowe karty produktów
   Każdy tr → flex-card z:
     [obraz 80px] [nazwa + cena po prawej]
     [ilość + kwota — poniżej z marginesem = obraz]
     [X usuń — absolute top-right]
   ================================================================ */

@media only screen and (max-width: 767px) {

	/* Wrapper WooCommerce — dopasuj do viewport */
	body.woocommerce-cart .woocommerce {
		padding: 0 16px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 460px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Form — full width, no overflow */
	body.woocommerce-cart form.woocommerce-cart-form {
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	/* ── Tabela → block container ── */
	body.woocommerce-cart table.shop_table,
	body.woocommerce-cart table.shop_table tbody {
		display: block !important;
		width: 100% !important;
		border: none !important;
	}

	/* Ukryj desktop thead */
	body.woocommerce-cart table.shop_table thead {
		display: none !important;
	}

	/* ── Każdy wiersz produktu → karta ── */
	body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 10px 12px !important;
		padding: 16px !important;
		margin-bottom: 10px !important;
		background: var(--surface-card) !important;
		border: 1px solid var(--border) !important;
		border-radius: 14px !important;
		position: relative !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	/* Wiersz actions (kupon + update) */
	body.woocommerce-cart table.shop_table tr.actions {
		display: block !important;
		width: 100% !important;
		padding: 14px 0 !important;
		background: transparent !important;
		border: none !important;
	}

	body.woocommerce-cart table.shop_table tr.actions td.actions {
		display: block !important;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}

	/* Wszystkie td → block domyślnie (nadpisane selektorami poniżej) */
	body.woocommerce-cart table.shop_table td {
		display: block !important;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}

	/* ─────────────────────────────────────────────────────────────
	   KRYTYCZNA POPRAWKA: WooCommerce responsive CSS dodaje
	   td::before { content: attr(data-title) } dla WSZYSTKICH <td>
	   żeby symulować nagłówki kolumn w mobile. Ponieważ td.product-remove
	   i inne td mają position:absolute, ich ::before renderuje się
	   w lewym górnym rogu karty jako ":". Zerujemy to tutaj.
	   ───────────────────────────────────────────────────────────── */
	body.woocommerce-cart table.shop_table td::before {
		content: none !important;
		display: none !important;
	}
	/* Przywróć ::before tylko dla tych td które go faktycznie używają */
	body.woocommerce-cart td.product-price::before,
	body.woocommerce-cart td.product-quantity::before,
	body.woocommerce-cart td.product-subtotal::before {
		content: attr(data-title) ":" !important;
		display: block !important; /* lub flex dla price/subtotal */
	}
	body.woocommerce-cart td.product-price::before,
	body.woocommerce-cart td.product-subtotal::before {
		display: inline-flex !important; /* line z ceną */
	}

	/* ── PRZYCISK USUŃ — absolute top-right ── */
	body.woocommerce-cart td.product-remove {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		width: auto !important;
		z-index: 2 !important;
	}

	body.woocommerce-cart td.product-remove a.remove {
		width: 28px !important;
		height: 28px !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255,255,255,0.12) !important;
		color: var(--text-muted) !important;
		font-size: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
		text-decoration: none !important;
		transition: all 0.18s ease !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	body.woocommerce-cart td.product-remove a.remove:hover,
	body.woocommerce-cart td.product-remove a.remove:active {
		background: rgba(220, 38, 38, 0.2) !important;
		border-color: rgba(220, 38, 38, 0.4) !important;
		color: #DC2626 !important;
	}

	/* ── MINIATURA ── */
	body.woocommerce-cart td.product-thumbnail {
		flex: 0 0 80px !important;
		width: 80px !important;
	}

	body.woocommerce-cart td.product-thumbnail a {
		display: block !important;
	}

	body.woocommerce-cart td.product-thumbnail img {
		width: 80px !important;
		height: 80px !important;
		object-fit: cover !important;
		border-radius: 10px !important;
		display: block !important;
		border: 1px solid var(--border) !important;
		/* CRITICAL FIX: WooCommerce ustawia max-width:100% na .woocommerce img
		   co powoduje collapse do 0px — nadpisujemy z !important */
		max-width: 80px !important;
		min-width: 80px !important;
	}

	/* ── NAZWA PRODUKTU ── */
	body.woocommerce-cart td.product-name {
		flex: 1 1 calc(100% - 104px) !important; /* 80px obraz + 12px gap + 12px padding */
		min-width: 0 !important;
		align-self: flex-start !important;
	}

	body.woocommerce-cart td.product-name a {
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		color: var(--text-product-title) !important;
		display: block !important;
		padding-right: 36px !important; /* margines na X */
		word-break: break-word !important;
	}

	body.woocommerce-cart td.product-name a:hover {
		color: var(--accent) !important;
	}

	/* Warianty (dl.variation) */
	body.woocommerce-cart td.product-name dl.variation {
		font-size: 11px !important;
		margin: 4px 0 0 !important;
		color: var(--text-muted) !important;
	}

	body.woocommerce-cart td.product-name dl.variation dt,
	body.woocommerce-cart td.product-name dl.variation dd {
		display: inline !important;
		margin: 0 !important;
		color: var(--text-muted) !important;
	}

	/* ── CENA JEDNOSTKOWA ── */
	body.woocommerce-cart td.product-price {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important; /* 80px obraz + 12px gap */
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
	}

	body.woocommerce-cart td.product-price::before {
		content: attr(data-title) ":" !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.06em !important;
		color: var(--text-muted) !important;
		flex-shrink: 0 !important;
	}

	/* ── ILOŚĆ ── */
	body.woocommerce-cart td.product-quantity {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important;
	}

	body.woocommerce-cart td.product-quantity::before {
		content: attr(data-title) ":" !important;
		display: block !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.06em !important;
		color: var(--text-muted) !important;
		margin-bottom: 6px !important;
	}

	/* ── KWOTA (SUBTOTAL) ── */
	body.woocommerce-cart td.product-subtotal {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
	}

	body.woocommerce-cart td.product-subtotal::before {
		content: attr(data-title) ":" !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.06em !important;
		color: var(--text-muted) !important;
		flex-shrink: 0 !important;
	}

	body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
		font-size: 15px !important;
		font-weight: 800 !important;
		color: var(--price-color) !important;
	}

	/* ── KONTROLKI ILOŚCI — [−] [liczba] [+] (UX standard: NNG + Apple HIG) ──
	   Technika: display:contents na .qty-buttons → dzieci (.plus/.minus)
	   stają się bezpośrednimi flex-dziećmi .quantity → CSS order
	   nadpisuje kolejność DOM: minus(1) | input(2) | plus(3)
	   ____________________________________________________________ */
	body.woocommerce-cart .quantity {
		display: flex !important;
		align-items: center !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}

	/* Rozbij qty-buttons: dzieci wchodzą do flex .quantity bezpośrednio */
	body.woocommerce-cart .qty-buttons {
		display: contents !important;
	}

	/* Input — środkowy panel */
	body.woocommerce-cart .quantity input.qty,
	body.woocommerce-cart .quantity input.input-text.qty {
		order: 2 !important;
		width: 52px !important;
		height: 40px !important;
		min-width: 52px !important;
		max-width: 52px !important;
		text-align: center !important;
		border-radius: 0 !important;
		border-top: 1px solid var(--border) !important;
		border-bottom: 1px solid var(--border) !important;
		border-left: none !important;
		border-right: none !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		background: rgba(255, 255, 255, 0.07) !important;
		color: var(--text) !important;
		padding: 0 !important;
		margin: 0 !important;
		-webkit-appearance: none !important;
		-moz-appearance: textfield !important;
		/* Usuwa niebieski focus ring przeglądarki */
		outline: none !important;
		box-shadow: none !important;
	}

	body.woocommerce-cart .quantity input.qty:focus,
	body.woocommerce-cart .quantity input.input-text.qty:focus {
		border-color: var(--accent) !important;
		background: rgba(234, 88, 12, 0.06) !important;
		outline: none !important;
		box-shadow: none !important;
	}

	/* Ukryj natywne strzałki number input */
	body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
	body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
		-webkit-appearance: none !important;
		margin: 0 !important;
	}

	/* MINUS — lewy przycisk */
	body.woocommerce-cart .qty-buttons .minus {
		order: 1 !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 10px 0 0 10px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		font-size: 16px !important;
		line-height: 1 !important;
		transition: background 0.15s ease !important;
		-webkit-tap-highlight-color: transparent !important;
		user-select: none !important;
		background: rgba(255, 255, 255, 0.10) !important;
		color: var(--text-secondary) !important;
		border: 1px solid var(--border) !important;
		border-right: none !important;
		margin: 0 !important;
	}

	/* PLUS — prawy przycisk */
	body.woocommerce-cart .qty-buttons .plus {
		order: 3 !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 0 10px 10px 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		font-size: 16px !important;
		line-height: 1 !important;
		transition: background 0.15s ease !important;
		-webkit-tap-highlight-color: transparent !important;
		user-select: none !important;
		background: var(--accent) !important;
		color: #fff !important;
		border: 1px solid var(--accent) !important;
		border-left: none !important;
		margin: 0 !important;
	}

	body.woocommerce-cart .qty-buttons .plus:active {
		background: var(--accent-hover) !important;
		transform: scale(0.94) !important;
	}

	body.woocommerce-cart .qty-buttons .minus:active {
		background: rgba(255, 255, 255, 0.20) !important;
		transform: scale(0.94) !important;
	}

	/* ── SEKCJA ACTIONS (kupon + update) ── */
	body.woocommerce-cart .actions .coupon {
		display: flex !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
		flex-wrap: wrap !important;
		width: 100% !important;
	}

	body.woocommerce-cart .actions .coupon input#coupon_code {
		flex: 1 1 140px !important;
		min-width: 0 !important;
		height: 44px !important;
		border-radius: 10px !important;
		padding: 0 14px !important;
		font-size: 14px !important;
	}

	body.woocommerce-cart .actions .coupon button[name="apply_coupon"] {
		height: 44px !important;
		padding: 0 18px !important;
		border-radius: 10px !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}

	body.woocommerce-cart .actions button[name="update_cart"] {
		width: 100% !important;
		height: 44px !important;
		border-radius: 10px !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		margin-top: 4px !important;
	}

	/* ── CART TOTALS (podsumowanie) ── */
	body.woocommerce-cart .cart-collaterals {
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	body.woocommerce-cart .cart_totals {
		width: 100% !important;
		float: none !important;
		padding: 20px 16px !important;
		background: var(--surface-card) !important;
		border: 1px solid var(--border) !important;
		border-radius: 14px !important;
		margin-top: 12px !important;
		box-sizing: border-box !important;
	}

	body.woocommerce-cart .cart_totals h2 {
		font-size: 16px !important;
		margin-bottom: 14px !important;
		padding-bottom: 12px !important;
		border-bottom: 1px solid var(--border) !important;
	}

	body.woocommerce-cart .cart_totals table {
		width: 100% !important;
		display: table !important; /* zachowaj tabelę w totals */
	}

	body.woocommerce-cart .cart_totals table th,
	body.woocommerce-cart .cart_totals table td {
		background: transparent !important;
		border-color: var(--border) !important;
		padding: 10px 0 !important;
		font-size: 14px !important;
		display: table-cell !important;
	}

	body.woocommerce-cart .wc-proceed-to-checkout {
		padding: 0 !important;
	}

	body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		width: 100% !important;
		min-height: 52px !important;
		border-radius: 26px !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		margin-top: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		text-align: center !important;
		letter-spacing: 0.03em !important;
		box-shadow: 0 8px 24px rgba(234, 88, 12, 0.35) !important;
	}

	/* ── CROSS-SELLS ── */
	body.woocommerce-cart .cross-sells {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* ── Retina subpixel borders ── */
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item,
		body.woocommerce-cart td.product-thumbnail img,
		body.woocommerce-cart .cart_totals {
			border-width: 0.5px !important;
		}
		body.woocommerce-cart .qty-buttons .plus,
		body.woocommerce-cart .qty-buttons .minus {
			border-width: 0.5px !important;
		}
	}

	/* ── iPhone SE / 375px ── */
	@media only screen and (max-width: 375px) {
		body.woocommerce-cart td.product-thumbnail,
		body.woocommerce-cart td.product-thumbnail img {
			width: 68px !important;
			height: 68px !important;
			max-width: 68px !important;
			min-width: 68px !important;
		}
		body.woocommerce-cart td.product-price,
		body.woocommerce-cart td.product-quantity,
		body.woocommerce-cart td.product-subtotal {
			margin-left: 80px !important;
			flex-basis: calc(100% - 80px) !important;
		}
		body.woocommerce-cart .woocommerce {
			padding: 0 12px !important;
		}
	}

	/* ── Fold / 350px ── */
	@media only screen and (max-width: 350px) {
		body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
			padding: 12px !important;
			gap: 8px 10px !important;
		}
		body.woocommerce-cart td.product-thumbnail,
		body.woocommerce-cart td.product-thumbnail img {
			width: 60px !important;
			height: 60px !important;
			max-width: 60px !important;
			min-width: 60px !important;
		}
		body.woocommerce-cart td.product-price,
		body.woocommerce-cart td.product-quantity,
		body.woocommerce-cart td.product-subtotal {
			margin-left: 70px !important;
			flex-basis: calc(100% - 70px) !important;
		}
		body.woocommerce-cart .woocommerce {
			padding: 0 10px !important;
		}
	}

} /* end @media ≤767px */


/* ================================================================
   3. LOGIN & REGISTER FORMS — TŁO + HEADINGS
   ================================================================
   WooCommerce renderuje formularz logowania i rejestracji
   w body.woocommerce-account wrapperze .woocommerce
   Tło nadpisywane przez motywy/WC — kontrujemy przez specyficzność.
   ================================================================ */

/* Tło formularzy logowania i rejestracji (wszystkie viewporty) */
body.woocommerce-account .woocommerce form.woocommerce-form-login,
body.woocommerce-account .woocommerce form.woocommerce-form-register,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account .login,
body.woocommerce-account .register {
	background: var(--background) !important;
	color: var(--text) !important;
	border: none !important;
	box-shadow: none !important;
}

/* Pola formularzy logowania/rejestracji */
body.woocommerce-account form.woocommerce-form-login input,
body.woocommerce-account form.woocommerce-form-register input {
	background: #ffffff !important;
	color: #000000 !important;
}

/* ── NAGŁÓWKI STRON KONTA ── */
/* body class na stronie logowania: .woocommerce-account */
/* .post-title → title "Moje konto" / "Logowanie" / "Zarejestruj się" */

/* Tło "placeholdera" tytułu (h1.post-title lub .page-title) na stronie /moje-konto/ */
body.woocommerce-account .post-title,
body.woocommerce-account h1.page-title,
body.woocommerce-account .entry-title {
	background: var(--background) !important;
	color: var(--accent) !important;
	padding: 0 10px !important;
}

/* Link wewnątrz .post-title (motyw Polaris owija tytuł linkiem) */
body.woocommerce-account .post-title a,
body.woocommerce-account h1.page-title a,
body.woocommerce-account .entry-title a {
	background: var(--background) !important;
	color: var(--accent) !important;
	padding: 0 !important;
}

/* Nagłówki sekcji wewnątrz formularzy ("Logowanie", "Zarejestruj się") */
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce h3 {
	background: var(--background) !important;
	color: var(--accent) !important;
}

/* Sekcja u-column (2 kolumny login+register obok siebie) */
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	background: var(--background) !important;
}


/* ================================================================
   4. TI WOOCOMMERCE WISHLIST — MOBILE LAYOUT
   ================================================================
   Plugin: TI WooCommerce Wishlist (by TIV.NET INC)
   body class: .woocommerce-wishlist (lub .tinvwl-wishlist)
   Tabela: table.tinvwl-table
   Breakpoint: ≤767px → pionowe karty (jak koszyk)
   ================================================================ */

/* Tło strony wishlisty (desktop + mobile) */
body.woocommerce-wishlist .woocommerce,
body.woocommerce-wishlist .tinvwl-wishlist-section,
body.woocommerce-wishlist form {
	background: var(--background) !important;
	color: var(--text) !important;
}

body.woocommerce-wishlist table.tinvwl-table {
	background: var(--background) !important;
	color: var(--text) !important;
}

body.woocommerce-wishlist table.tinvwl-table th,
body.woocommerce-wishlist table.tinvwl-table td {
	background: var(--background) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}

/* Ceny w wishliście */
body.woocommerce-wishlist .woocommerce-Price-amount {
	color: var(--price-color) !important;
	font-weight: 700 !important;
}

/* Przyciski akcji */
body.woocommerce-wishlist .tinvwl_add_to_cart_button,
body.woocommerce-wishlist .button,
body.woocommerce-wishlist button {
	background: var(--accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
}

body.woocommerce-wishlist .tinvwl_add_to_cart_button:hover,
body.woocommerce-wishlist .button:hover {
	background: var(--accent-hover) !important;
}

/* Ikona usuń z wishlisty */
body.woocommerce-wishlist .tinvwl-remove {
	color: var(--text-muted) !important;
}

body.woocommerce-wishlist .tinvwl-remove:hover {
	color: #DC2626 !important;
}

/* ── MOBILE WISHLIST (≤767px) ──
   DOM (TI WooCommerce Wishlist v2.x):
   table (brak klasy tinvwl-table!) > tbody > tr.wishlist_item
   td.product-cb        — checkbox
   td.product-remove    — button[name="tinvwl-remove"] > i.ftinvwl-times
   td.product-thumbnail — a > img
   td.product-name      — a > tekst
   td.product-price     — .woocommerce-Price-amount
   td.product-date      — time.entry-date
   td.product-stock     — p.stock
   td.product-action    — button.button.alt[name="tinvwl-add-to-cart"]
   ================================================================= */
@media only screen and (max-width: 767px) {

	/* Wrapper strony */
	body.woocommerce-wishlist .woocommerce {
		padding: 0 16px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 460px !important;
		margin: 0 auto !important;
	}

	/* Tabela → block (plugin nie dodaje klasy do table, targetujemy po tbody) */
	body.woocommerce-wishlist .tinvwl-wishlist-section table,
	body.woocommerce-wishlist .tinvwl-wishlist-section tbody,
	body.woocommerce-wishlist form table,
	body.woocommerce-wishlist form tbody {
		display: block !important;
		width: 100% !important;
		border: none !important;
		background: transparent !important;
	}

	/* Ukryj desktop thead */
	body.woocommerce-wishlist .tinvwl-wishlist-section thead,
	body.woocommerce-wishlist form thead {
		display: none !important;
	}

	/* Każdy wiersz produktu → karta
	   ADHD-friendly: wyraźne wyodrębnienie

	   TECHNIKA: box-shadow inset zamiast border-left
	   Powód: Retina media query nadpisuje border-width: 0.5px !important
	   co sprawia że border-left 3px znika na wszystkich iPhone'ach.
	   box-shadow: inset nie jest dotknięty przez border-radius ani
	   żadne media queries — zawsze widoczny.

	   Pasek: inset 3px 0 0 (lewy, 3px szeroki, 0 offset)
	   Cienie: odłączone od paska — osobne warstwy box-shadow  */
	body.woocommerce-wishlist tr.wishlist_item {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 8px 12px !important;
		padding: 14px 14px 14px 17px !important; /* +3px z lewej — miejsce na inset pasek */
		margin-bottom: 16px !important;
		background: var(--surface-card) !important;
		/* Subtelny całkowity border */
		border: 1px solid rgba(234, 88, 12, 0.25) !important;
		border-radius: 14px !important;
		position: relative !important;
		box-sizing: border-box !important;
		width: 100% !important;
		/* box-shadow: pasek (inset) + cień zewnętrzny + delikatna poświata */
		box-shadow:
			inset 3px 0 0 var(--accent),
			0 2px 10px rgba(0, 0, 0, 0.40),
			0 0 0 1px rgba(234, 88, 12, 0.12) !important;
	}

	/* Domyślnie wszystkie td → block, bez wnętrzności desktop */
	body.woocommerce-wishlist tr.wishlist_item td {
		display: block !important;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}

	/* ── CHECKBOX (top-left absolute) ── */
	body.woocommerce-wishlist td.product-cb {
		position: absolute !important;
		top: 14px !important;
		left: 14px !important;
		width: 18px !important;
		height: 18px !important;
		z-index: 2 !important;
	}

	body.woocommerce-wishlist td.product-cb input[type="checkbox"] {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		accent-color: var(--accent) !important;
		cursor: pointer !important;
	}

	/* ── USUŃ (top-right absolute) ── */
	body.woocommerce-wishlist td.product-remove {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		width: auto !important;
		z-index: 2 !important;
	}

	body.woocommerce-wishlist td.product-remove button {
		width: 28px !important;
		height: 28px !important;
		border-radius: 50% !important;
		background: rgba(255,255,255,0.08) !important;
		border: 1px solid rgba(255,255,255,0.12) !important;
		color: var(--text-muted) !important;
		font-size: 13px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: all 0.18s ease !important;
		cursor: pointer !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	body.woocommerce-wishlist td.product-remove button:hover,
	body.woocommerce-wishlist td.product-remove button:active {
		background: rgba(220,38,38,0.2) !important;
		border-color: rgba(220,38,38,0.4) !important;
		color: #DC2626 !important;
	}

	/* ── MINIATURA ── */
	body.woocommerce-wishlist td.product-thumbnail {
		flex: 0 0 80px !important;
		width: 80px !important;
		margin-top: 20px !important; /* odskok od checkboxa */
	}

	body.woocommerce-wishlist td.product-thumbnail a {
		display: block !important;
	}

	body.woocommerce-wishlist td.product-thumbnail img {
		width: 80px !important;
		height: 80px !important;
		max-width: 80px !important;
		min-width: 80px !important;
		object-fit: cover !important;
		border-radius: 10px !important;
		display: block !important;
		border: 1px solid var(--border) !important;
	}

	/* ── NAZWA PRODUKTU ── */
	body.woocommerce-wishlist td.product-name {
		flex: 1 1 calc(100% - 104px) !important;
		min-width: 0 !important;
		align-self: flex-start !important;
		margin-top: 20px !important;
		padding-right: 36px !important; /* margines na przycisk X */
	}

	body.woocommerce-wishlist td.product-name a {
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		color: var(--text-product-title) !important;
		word-break: break-word !important;
		display: block !important;
	}

	body.woocommerce-wishlist td.product-name a:hover {
		color: var(--accent) !important;
	}

	/* ── CENA ── */
	body.woocommerce-wishlist td.product-price {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
	}

	body.woocommerce-wishlist td.product-price::before {
		content: "Cena:" !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.06em !important;
		color: var(--text-muted) !important;
		margin-right: 2px !important;
	}

	body.woocommerce-wishlist td.product-price .woocommerce-Price-amount {
		font-size: 14px !important;
		font-weight: 800 !important;
		color: var(--price-color) !important;
	}

	/* ── DATA DODANIA ── */
	body.woocommerce-wishlist td.product-date {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important;
		font-size: 11px !important;
		color: var(--text-muted) !important;
	}

	body.woocommerce-wishlist td.product-date::before {
		content: "Dodano: " !important;
		font-weight: 700 !important;
	}

	/* ── DOSTĘPNOŚĆ ── */
	body.woocommerce-wishlist td.product-stock {
		flex: 0 0 calc(100% - 92px) !important;
		margin-left: 92px !important;
		font-size: 12px !important;
	}

	body.woocommerce-wishlist td.product-stock .in-stock {
		color: var(--success, #16A34A) !important;
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		margin: 0 !important;
	}

	body.woocommerce-wishlist td.product-stock .out-of-stock {
		color: var(--error, #DC2626) !important;
		margin: 0 !important;
	}

	/* ── PRZYCISK KUP TERAZ ── */
	body.woocommerce-wishlist td.product-action {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin-top: 6px !important;
	}

	body.woocommerce-wishlist td.product-action button.button,
	body.woocommerce-wishlist td.product-action a.button {
		width: 100% !important;
		height: 48px !important;
		border-radius: 24px !important;
		font-size: 14px !important;
		font-weight: 800 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		box-sizing: border-box !important;
		box-shadow: 0 6px 18px rgba(234,88,12,0.3) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.04em !important;
		background: var(--accent) !important;
		color: #fff !important;
		border: none !important;
		cursor: pointer !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	body.woocommerce-wishlist td.product-action button.button:active {
		background: var(--accent-hover) !important;
		transform: scale(0.97) !important;
	}

	/* Retina — NIE nadpisujemy border wishlist_item
	   (zrobiłoby to border-width: 0.5px i zniszczyło box-shadow inset pasek) */

	/* iPhone SE / 375px */
	@media only screen and (max-width: 375px) {
		body.woocommerce-wishlist td.product-thumbnail,
		body.woocommerce-wishlist td.product-thumbnail img {
			width: 68px !important;
			height: 68px !important;
			max-width: 68px !important;
			min-width: 68px !important;
		}
		body.woocommerce-wishlist td.product-price,
		body.woocommerce-wishlist td.product-date,
		body.woocommerce-wishlist td.product-stock {
			margin-left: 80px !important;
			flex-basis: calc(100% - 80px) !important;
		}
		body.woocommerce-wishlist td.product-name {
			flex: 1 1 calc(100% - 90px) !important;
		}
	}

} /* end wishlist @media ≤767px */