/* ══════════════════════════════════════════════════════════════════
   umowywit-sklep.css — sklep i archiwa produktów na telefonie

   Docelowe miejsce: wp-content/themes/salient-new/umowywit-sklep.css
   Ładowany na: /sklep/ (page-id-7809), archiwum produktów,
   kategorie i tagi produktów.

   Pomiary przed zmianą (iPhone 13, 390 × 844):
   - tekst wstępu 20 px / waga 300, margines boczny 0 px,
     30 znaków w linii, pierwszy akapit 10 linii i 300 px wysokości
   - listing w dwóch kolumnach po 164 px, miniatura 164 × 164,
     tytuł 18 px łamany na 5 linii, przycisk 164 × 40 z fontem 12 px,
     karty o różnej wysokości (337 i 314 px), strona 7868 px
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	/* ── Tekst wstępu ──────────────────────────────────────────────
	   20 px przy wadze 300 to ustawienie pod desktopową kolumnę ~700 px.
	   Na 350 px treści daje 30 znaków w linii — połowa tego, co się
	   dobrze czyta. 16 px / 400 daje ok. 45 znaków i skraca pierwszy
	   akapit z 10 linii do 7. */
	.wpb_text_column .wpb_wrapper p {
		margin: 0 0 16px !important;
		padding: 0 20px;
		font-size: 16px !important;
		line-height: 1.65 !important;
		font-weight: 400 !important;
		color: #1F2421 !important;
	}
	h1.vc_custom_heading {
		padding: 0 20px;
		font-size: 28px !important;
		line-height: 1.15 !important;
	}
	.wpb_wrapper blockquote {
		font-size: 17px !important;
		line-height: 1.6 !important;
	}

	/* ── Listing: jeden produkt w wierszu, karta pozioma ────────────
	   Karta pionowa na pełną szerokość dałaby miniaturę 350 × 350
	   i listing na 9000 px. Pozioma z miniaturą 96 px ma ok. 130 px
	   wysokości. Zdjęcia produktów to niemal identyczne makiety
	   dokumentów — decyduje nazwa i cena, nie obrazek. */
	ul.products {
		display: flex !important;
		flex-direction: column !important;
		/* Kontener strony ma już 23 px marginesu bocznego — własny
		   padding dokładałby się do niego i karty siadałyby 43 px
		   od krawędzi, podczas gdy tekst wstępu zaczyna się na 19 px. */
		gap: 10px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	ul.products li.product {
		display: grid !important;
		grid-template-columns: 96px 1fr !important;
		column-gap: 14px !important;
		align-items: start !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 12px !important;
		background: #FFFFFF !important;
		border: 1px solid #ECECEC !important;
		border-radius: 10px !important;
		text-align: left !important;
	}

	/* Salient trzyma miniaturę i przycisk w jednym wrapperze, a tytuł
	   i cenę poza nim. Bez spłaszczenia wrappera nie da się ułożyć ich
	   w dwóch kolumnach jednej siatki. */
	ul.products li.product > .product-wrap {
		display: contents !important;
	}
	ul.products li.product > .product-wrap > a {
		grid-column: 1 !important;
		grid-row: 1 / span 3 !important;
		display: block !important;
	}
	ul.products li.product img {
		width: 96px !important;
		height: 96px !important;
		margin: 0 !important;
		object-fit: cover;
		border-radius: 8px !important;
	}

	ul.products li.product h2.woocommerce-loop-product__title {
		grid-column: 2 !important;
		grid-row: 1 !important;
		margin: 0 0 5px !important;
		padding: 0 !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		text-align: left !important;
	}

	ul.products li.product span.price {
		grid-column: 2 !important;
		grid-row: 2 !important;
		margin: 0 0 9px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		text-align: left !important;
	}
	ul.products li.product span.price .amount,
	ul.products li.product span.price .amount * {
		font-size: 15px !important;
		font-weight: 700 !important;
	}
	ul.products li.product span.price .woocommerce-price-suffix,
	ul.products li.product span.price small {
		font-size: 12px !important;
		font-weight: 400 !important;
		color: #767676 !important;
		/* Przy widełkach cenowych („3999,00 zł – 5999,00 zł") dopisek
		   łamał się w środku na „(z / VAT)". */
		white-space: nowrap !important;
	}
	ul.products li.product span.price .amount {
		white-space: nowrap !important;
	}

	ul.products li.product .product-add-to-cart {
		grid-column: 2 !important;
		grid-row: 3 !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   PRZYCISK KUPNA — WSZYSTKIE SZEROKOŚCI

   Salient trzyma przycisk w nakładce `position: absolute` z `top: -68px`,
   pokazywanej dopiero po najechaniu kursorem. Na telefonie nie ma
   najechania, więc nakładka wisiała nad kartą i wychodziła poza jej
   krawędź; na desktopie klient nie widzi ceny z przyciskiem, dopóki
   nie trafi myszą w kafelek. Sprowadzamy przycisk do normalnego
   przepływu na każdej szerokości — zawsze widoczny, zielony,
   na pełną szerokość karty.
   ══════════════════════════════════════════════════════════════════ */
ul.products li.product .product-add-to-cart {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}
ul.products li.product .product-add-to-cart a.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	background: #00822B !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	transform: none !important;
	letter-spacing: 0 !important;
	transition: background-color .15s ease;
}
ul.products li.product .product-add-to-cart a.button:hover {
	background: #006B23 !important;
	color: #FFFFFF !important;
}
ul.products li.product .product-add-to-cart a.button span {
	font-size: 13.5px !important;
	text-transform: none !important;
}
/* Motyw wymusza wersaliki regułą z `#ajax-content-wrap` — żeby ją
   przebić, trzeba tego samego identyfikatora. */
#ajax-content-wrap ul.products li.product .product-add-to-cart a.button,
#ajax-content-wrap ul.products li.product .product-add-to-cart a.button span {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Podgląd („Quick View") nosi klasę `.button`, więc łapał style przycisku
   kupna i robił drugi zielony pasek pod kartą. Na telefonie nie ma jak go
   uruchomić, na desktopie dubluje wejście na kartę produktu. */
ul.products li.product .product-add-to-cart a.nectar_quick_view,
ul.products li.product a.nectar_quick_view.button {
	display: none !important;
}

/* Na telefonie przycisk jest trzecim wierszem siatki i nie potrzebuje
   własnego odstępu — ten daje już `margin` ceny. */
@media (max-width: 767px) {
	ul.products li.product .product-add-to-cart {
		margin: 0 !important;
	}
}

/* Od tabletu w górę: przycisk na dół kafelka.
   W markupie Salienta miniatura i przycisk siedzą razem w `.product-wrap`,
   a nazwa i cena są poza nim — po wyjęciu przycisku z nakładki lądował
   on między zdjęciem a nazwą. Spłaszczamy wrapper i ustawiamy kolejność:
   zdjęcie → nazwa → cena → przycisk. */
@media (min-width: 768px) {
	ul.products li.product {
		display: flex !important;
		flex-direction: column !important;
	}
	ul.products li.product > .product-wrap {
		display: contents !important;
	}
	ul.products li.product > .product-wrap > a { order: 1; }
	ul.products li.product h2.woocommerce-loop-product__title { order: 2; }
	ul.products li.product span.price { order: 3; }
	ul.products li.product .product-add-to-cart {
		order: 4;
		margin-top: auto !important;
		padding-top: 12px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   PUSTY KOSZYK (/koszyk/)

   WooCommerce w tym motywie renderuje go jako czarne pudełko
   z komunikatem i czarny przycisk w wersalikach — element, którego
   klient nie widzi nigdzie indziej w sklepie.
   ══════════════════════════════════════════════════════════════════ */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .woocommerce-info {
	display: block !important;
	max-width: 560px;
	margin: 0 auto 18px !important;
	padding: 18px 20px !important;
	background: #F7F9F8 !important;
	border: 1px solid #ECECEC !important;
	border-radius: 10px !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	color: #0F1512 !important;
	text-align: center;
}
body.woocommerce-cart .cart-empty::before,
body.woocommerce-cart .woocommerce-info::before {
	display: none !important;
	content: none !important;
}
body.woocommerce-cart .return-to-shop {
	max-width: 560px;
	margin: 0 auto !important;
	text-align: center;
}
body.woocommerce-cart .return-to-shop .button,
#ajax-content-wrap body.woocommerce-cart .return-to-shop .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px !important;
	padding: 0 24px !important;
	background: #00822B !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
body.woocommerce-cart .return-to-shop .button:hover {
	background: #006B23 !important;
	color: #FFFFFF !important;
}

@media (max-width: 767px) {
	body.woocommerce-cart .cart-empty,
	body.woocommerce-cart .woocommerce-info,
	body.woocommerce-cart .return-to-shop {
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
	body.woocommerce-cart .return-to-shop .button {
		display: flex !important;
		width: 100% !important;
	}
}