/* DoorFloor - kafelki produktów na listach (2026-10-05), według projektu „DoorFloor refresh".
   Wszystko pod body.df-kafelki (kafelki.php) - bez tej klasy listing wygląda jak dotąd.
   Kadry zdjęć (proporcje, przycinanie) ustala doorfloor.css; tutaj tylko oprawa kafelka. */

body.df-kafelki [data-products] {
	--df-k-forest: var(--theme-palette-color-1, #23563f);
	--df-k-forest-dark: #173c2d;
	--df-k-ink: var(--theme-palette-color-4, #10271f);
	--df-k-line: #d9e4df;
	--df-k-mist: #eef3f1;
	--df-k-muted: #6c7b76;
	--grid-columns-gap: 18px;
}

/* siatka katalogu; karuzele (.flexy-items) liczą szerokość slajdów same i odstępu nie znoszą */
body.df-kafelki [data-products]:not(.flexy-items) {
	gap: 18px;
}

/* ---------- karta ---------- */

body.df-kafelki [data-products] .product {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* Blocksy środkuje zawartość kafelka */
	min-width: 0;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: #fff;
	box-shadow: none;
	text-align: left;
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

@media (hover: hover) {
	body.df-kafelki [data-products] .product:hover {
		transform: translateY(-5px);
		border-color: var(--df-k-line);
		box-shadow: 0 18px 54px rgba(18, 50, 38, .09);
	}

	/* karuzela przycina wszystko, co wystaje poza slajd - zostaje sama ramka */
	body.df-kafelki [data-products].flexy-items .product:hover {
		transform: none;
		box-shadow: none;
	}
}

/* karuzela: karta wypełnia slajd, żeby ceny w rzędzie stały na jednej wysokości */
body.df-kafelki [data-products].flexy-items .flexy-item {
	display: flex;
}

body.df-kafelki [data-products].flexy-items .flexy-item > .product {
	flex: 1 1 auto;
	width: 100%;
}

/* ---------- zdjęcie w szarej ramce ---------- */

body.df-kafelki [data-products] .product > figure {
	position: relative;
	width: auto; /* Blocksy rozciąga zdjęcie na dopełnienie kafelka, którego już nie ma */
	max-width: 100%;
	margin: 0;
	padding: 10px;
	border-radius: 15px;
	background: #f3f5f4;
	overflow: hidden;
}

body.df-kafelki [data-products] .product > figure .ct-media-container {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

/* plakietki: Bestseller, Nowość, promocja, brak w magazynie */
body.df-kafelki [data-products] .product > figure :is(.onsale, .out-of-stock-badge) {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	right: auto;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ulubione zawsze na wierzchu; porównanie i szybki podgląd pokazują się po najechaniu */
body.df-kafelki [data-products] .product > figure .ct-woo-card-extra {
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 12px;
	left: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button {
	width: 38px;
	height: 38px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: none;
	color: var(--df-k-ink);
	opacity: 1;
	transform: none;
	transition: opacity .2s ease, background .2s ease, color .2s ease;
}

body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button:hover,
body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button[data-button-state="active"] {
	background: var(--df-k-forest);
	color: #fff;
}

@media (hover: hover) {
	body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button:not(.ct-wishlist-button-archive) {
		opacity: 0;
	}

	body.df-kafelki [data-products] .product:hover > figure .ct-woo-card-extra .ct-button,
	body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button:focus-visible {
		opacity: 1;
	}
}

/* ---------- treść ---------- */

body.df-kafelki [data-products] .product > :not(figure) {
	margin-left: 8px;
	margin-right: 8px;
}

body.df-kafelki [data-products] .df-kafelek__meta {
	display: block;
	margin-top: 16px;
	margin-bottom: 7px;
	color: var(--df-k-muted);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
}

body.df-kafelki [data-products] .product > .woocommerce-loop-product__title {
	--theme-font-size: 16px;
	display: -webkit-box;
	min-height: 2.7em;
	margin-top: 0;
	margin-bottom: 12px;
	overflow: hidden;
	color: var(--df-k-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.015em;
	text-align: left;
	text-transform: none; /* „16 X 16 Mm" po zamianie każdego słowa na wielką literę */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* kafelek bez linijki „kategoria · marka" - tytuł sam trzyma odstęp od zdjęcia */
body.df-kafelki [data-products] .product > figure + .woocommerce-loop-product__title {
	margin-top: 16px;
}

body.df-kafelki [data-products] .df-kafelek__parametry {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

body.df-kafelki [data-products] .df-kafelek__parametry span {
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--df-k-mist);
	color: #53645e;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
}

/* kategorie pod nazwą zastępuje linijka nad nazwą */
body.df-kafelki [data-products] .product > .entry-meta {
	display: none;
}

/* ---------- cena i przycisk ---------- */

body.df-kafelki [data-products] .product > .ct-woo-card-actions {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	width: auto;
	margin-top: auto;
	margin-bottom: 8px;
	padding: 0;
	border: 0;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .price {
	--theme-font-size: 20px;
	/* flex z zawijaniem: „cena brutto" schodzi do własnego wiersza bez względu na to, jak cenę układa Blocksy */
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	column-gap: 5px;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--df-k-forest);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	opacity: 1;
	transform: none;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .price .price-unit {
	color: var(--df-k-muted);
	font-size: 11px;
	font-weight: 500;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .price del {
	display: block;
	color: var(--df-k-muted);
	font-size: 12px;
	font-weight: 400;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .price ins {
	text-decoration: none;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .price:not(:empty)::after {
	content: "cena brutto";
	/* Blocksy rysuje tym pseudoelementem pionową kreskę (absolute, 1 px) - zdejmujemy ją */
	position: static;
	flex: 0 0 100%;
	width: auto;
	height: auto;
	margin-top: 3px;
	background: none;
	opacity: 1;
	color: var(--df-k-muted);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
}

/* okrągły przycisk: koszyk przy „Dodaj do koszyka", strzałka tam, gdzie trzeba wejść w produkt */
body.df-kafelki [data-products] .product > .ct-woo-card-actions .button {
	position: static;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--df-k-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
	overflow: hidden;
	transition: transform .2s ease, background-color .2s ease;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .button.add_to_cart_button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.5 10.2a2 2 0 0 0 2 1.5h7.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .button:hover {
	background-color: var(--df-k-forest-dark);
	transform: rotate(8deg) scale(1.05);
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .button.loading {
	opacity: .55;
	pointer-events: none;
}

/* Po dodaniu Blocksy chowa przycisk i pokazuje link „Zobacz koszyk". Link dostaje ten sam
   okrągły kształt z ptaszkiem - napis rozpychałby wiersz, a sam przycisk by po prostu zniknął. */
body.df-kafelki [data-products] .product > .ct-woo-card-actions .button.added {
	display: none;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .added_to_cart {
	display: block;
	flex: 0 0 auto;
	align-self: flex-end;
	width: 42px;
	height: 42px;
	min-height: 0;
	max-height: 42px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--df-k-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

body.df-kafelki [data-products] .product > .ct-woo-card-actions .added_to_cart:hover {
	background-color: var(--df-k-forest-dark);
}

/* ---------- telefon ---------- */

@media (max-width: 689.98px) {
	body.df-kafelki [data-products] {
		--grid-columns-gap: 10px;
	}

	body.df-kafelki [data-products]:not(.flexy-items) {
		gap: 10px;
	}

	body.df-kafelki [data-products] .product {
		padding: 6px;
		border-radius: 15px;
	}

	body.df-kafelki [data-products] .product > figure {
		padding: 6px;
		border-radius: 11px;
	}

	body.df-kafelki [data-products] .product > :not(figure) {
		margin-left: 6px;
		margin-right: 6px;
	}

	body.df-kafelki [data-products] .df-kafelek__meta {
		margin-top: 12px;
	}

	body.df-kafelki [data-products] .product > .woocommerce-loop-product__title {
		--theme-font-size: 15px;
		min-height: 0;
		font-size: 15px;
	}

	body.df-kafelki [data-products] .df-kafelek__parametry {
		margin-bottom: 12px;
	}

	body.df-kafelki [data-products] .product > .ct-woo-card-actions {
		margin-bottom: 6px;
	}

	body.df-kafelki [data-products] .product > .ct-woo-card-actions .price {
		--theme-font-size: 18px;
		font-size: 18px;
	}

	body.df-kafelki [data-products] .product > figure .ct-woo-card-extra .ct-button {
		width: 34px;
		height: 34px;
	}

	/* dwie kolumny na telefonie (katalog drzwi) i karuzele: kafelek jest wąski, więc bez pigułek */
	body.df-kafelki.term-drzwi [data-products] .df-kafelek__meta,
	body.df-kafelki [data-products].flexy-items .df-kafelek__meta {
		font-size: 10px;
	}

	body.df-kafelki.term-drzwi [data-products] .product > .woocommerce-loop-product__title,
	body.df-kafelki [data-products].flexy-items .product > .woocommerce-loop-product__title {
		--theme-font-size: 13px;
		min-height: 2.7em;
		font-size: 13px;
	}

	body.df-kafelki.term-drzwi [data-products] .df-kafelek__parametry,
	body.df-kafelki [data-products].flexy-items .df-kafelek__parametry {
		display: none;
	}

	body.df-kafelki.term-drzwi [data-products] .product > .ct-woo-card-actions .price,
	body.df-kafelki [data-products].flexy-items .product > .ct-woo-card-actions .price {
		--theme-font-size: 15px;
		font-size: 15px;
	}

	body.df-kafelki.term-drzwi [data-products] .product > .ct-woo-card-actions :is(.button, .added_to_cart),
	body.df-kafelki [data-products].flexy-items .product > .ct-woo-card-actions :is(.button, .added_to_cart) {
		width: 36px;
		height: 36px;
		max-height: 36px;
	}
}

/* ---------- Szybki podgląd (ikona oka na kafelku) ----------
   Blocksy ustawia opis absolutnie, więc wysokość okna wyznacza zdjęcie. Reguła galerii z karty
   produktu (doorfloor.css, --df-gal-h) obowiązywała też tutaj i dawała okno wysokie na 240-360 px,
   z opisem przewijanym w tej szczelinie. Okno dostaje własną wysokość, a zdjęcie pokazujemy
   w całości w szarej ramce - jak na kafelku. */

.quick-view-modal .ct-quick-view-card {
	--df-qv-h: min(660px, calc(100vh - 90px));
	width: min(1000px, 100%);
	max-width: 1000px;
	border-radius: 20px;
}

.quick-view-modal .ct-quick-view-content {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.quick-view-modal .woocommerce-product-gallery {
	align-self: stretch;
	padding: 14px;
}

.quick-view-modal .woocommerce-product-gallery .flexy-item .ct-media-container {
	border-radius: 15px;
	background: #f3f5f4;
}

.quick-view-modal.quick-view-modal .woocommerce-product-gallery .flexy-item img {
	width: 100%;
	height: calc(var(--df-qv-h) - 28px);
	padding: 14px;
	border-radius: 15px;
	aspect-ratio: auto !important;
	object-fit: contain;
	background: none;
}

.quick-view-modal .entry-summary {
	padding: 34px 32px 28px;
}

.quick-view-modal .ct-toggle-close {
	z-index: 5;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
}

.quick-view-modal .df-kafelek__meta {
	display: block;
	margin: 0 0 8px;
	color: #6c7b76;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.quick-view-modal .entry-summary .entry-title {
	--theme-font-size: 24px;
	margin: 0 0 12px;
	padding-right: 28px; /* miejsce na krzyżyk */
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-transform: none;
}

.quick-view-modal .entry-summary > .price {
	--theme-font-size: 24px;
	margin: 0 0 14px;
	color: var(--theme-palette-color-1, #23563f);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}

.quick-view-modal .entry-summary > .price .price-unit {
	color: #6c7b76;
	font-size: 13px;
	font-weight: 500;
}

.quick-view-modal .df-kafelek__parametry {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}

.quick-view-modal .df-kafelek__parametry span {
	padding: 6px 10px;
	border-radius: 999px;
	background: #eef3f1;
	color: #53645e;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

/* opis: sam pierwszy akapit, najwyżej cztery linie - reszta jest na stronie produktu */
.quick-view-modal .woocommerce-product-details__short-description {
	margin: 0 0 18px;
}

.quick-view-modal .woocommerce-product-details__short-description > * {
	display: none;
}

.quick-view-modal .woocommerce-product-details__short-description > p:first-of-type {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--theme-palette-color-3, #42504b);
	font-size: 14px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

/* Kalkulator paczek i montażu potrzebuje skryptów z karty produktu, których na liście nie ma.
   To samo dotyczy wynajmu skrzynki (wybór terminu). W podglądzie zostaje ilość z przyciskiem;
   liczenie metrów, montaż i skrzynka są na stronie produktu. */
.quick-view-modal .df-calc,
.quick-view-modal .df-toolbox,
.quick-view-modal .df-toolbox-termin,
.quick-view-modal .product_meta {
	display: none;
}

.quick-view-modal .entry-summary form.cart {
	margin: 0 0 12px;
}

.quick-view-modal .entry-summary .ct-quick-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin-top: 14px;
	border: 1px solid #d9e4df;
	border-radius: 100px;
	background: #fff;
	color: var(--theme-palette-color-4, #10271f);
	font-size: 14px;
	font-weight: 600;
}

.quick-view-modal .entry-summary .ct-quick-more:hover {
	border-color: var(--theme-palette-color-1, #23563f);
	color: var(--theme-palette-color-1, #23563f);
}

@media (max-width: 689.98px) {
	.quick-view-modal .ct-quick-view-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.quick-view-modal .woocommerce-product-gallery {
		padding: 10px;
	}

	.quick-view-modal.quick-view-modal .woocommerce-product-gallery .flexy-item img {
		height: min(300px, 38vh);
	}

	.quick-view-modal .entry-summary {
		padding: 20px 18px;
	}

	.quick-view-modal .entry-summary .entry-title {
		--theme-font-size: 20px;
		font-size: 20px;
	}
}

/* ---------- Przycisk „Dodaj do koszyka" na karcie produktu (2026-10-05) ----------
   Nawiązanie do okrągłego przycisku z kafelka: ten sam koszyk, ta sama zieleń, ten sam ruch
   ikony po najechaniu. Obejmuje kartę produktu, pływający pasek, szybki podgląd i konfigurator. */

body.df-kafelki .single_add_to_cart_button,
body.df-kafelki .dk-cena__przycisk,
.quick-view-modal .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	background-color: var(--theme-palette-color-1, #23563f);
	color: #fff;
	box-shadow: 0 10px 30px rgba(35, 86, 63, .16);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body.df-kafelki .single_add_to_cart_button::after,
body.df-kafelki .dk-cena__przycisk::after,
.quick-view-modal .single_add_to_cart_button::after {
	content: "";
	/* ::before zajmuje Blocksy (warstwa efektu najechania: absolute, ukryta), więc ikona siedzi
	   w ::after i przechodzi przed napis przez order */
	order: -1;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.5 10.2a2 2 0 0 0 2 1.5h7.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

body.df-kafelki .single_add_to_cart_button:hover,
body.df-kafelki .dk-cena__przycisk:hover,
.quick-view-modal .single_add_to_cart_button:hover {
	background-color: #173c2d;
	color: #fff;
	box-shadow: 0 14px 34px rgba(35, 86, 63, .24);
	transform: translateY(-2px);
}

body.df-kafelki .single_add_to_cart_button:hover::after,
body.df-kafelki .dk-cena__przycisk:hover::after,
.quick-view-modal .single_add_to_cart_button:hover::after {
	transform: rotate(8deg) scale(1.1);
}

/* przycisk nieaktywny (brak wariantu, trwa dodawanie) stoi w miejscu */
body.df-kafelki .single_add_to_cart_button:is(.disabled, :disabled, .loading),
body.df-kafelki .dk-cena__przycisk:disabled,
.quick-view-modal .single_add_to_cart_button:is(.disabled, :disabled, .loading) {
	box-shadow: none;
	transform: none;
}