/* meblejaniszewski.pl - pasek z wymiarami NA ZDJECIU produktu (listing)
   Wzorzec: inventio.info.pl - bialy zaokraglony pasek przy dolnej krawedzi zdjecia.
   Wersja 2, 01.09.2026 (poprzednia byla pod zdjeciem). */

/* kontener zdjecia musi byc punktem odniesienia dla nakladki */
.product-thumbnail,
.woocommerce-loop-image-link {
	position: relative;
}

.mj-wymiary {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	max-width: calc(100% - 20px);
	padding: 7px 14px;
	box-sizing: border-box;

	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .10);

	line-height: 1;
	pointer-events: none;   /* klikniecie ma otwierac produkt, nie zatrzymywac sie na pasku */
	white-space: nowrap;
	overflow: hidden;
}

.mj-wymiar {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: #3a3a3a;
}

/* delikatny separator miedzy pozycjami */
.mj-wymiar + .mj-wymiar {
	padding-left: 6px;
	border-left: 1px solid rgba(0, 0, 0, .10);
	margin-left: 0;
}

.mj-wymiar svg {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .75;
}

.mj-wymiar b {
	font-weight: 500;
	color: #1b1b1b;
}

.mj-wymiar i {
	font-style: normal;
	color: #6f6f6f;
}

/* Karta ma efekt zamiany zdjecia przy najechaniu - pasek ma zostac czytelny */
.product-thumbnail:hover .mj-wymiary {
	background: #fff;
}

@media (max-width: 991px) {
	.mj-wymiary {
		bottom: 8px;
		padding: 6px 10px;
		gap: 4px;
	}
	.mj-wymiar {
		font-size: 11.5px;
		gap: 3px;
	}
	.mj-wymiar svg {
		width: 11px;
		height: 11px;
		flex: 0 0 11px;
	}
	.mj-wymiar + .mj-wymiar {
		padding-left: 4px;
	}
}

/* bardzo waskie ekrany - dwie kolumny produktow, pasek musi sie zmiescic */
@media (max-width: 480px) {
	.mj-wymiary {
		padding: 5px 8px;
	}
	.mj-wymiar {
		font-size: 10.5px;
	}
	.mj-wymiar i {
		display: none;   /* sama liczba, jednostka domyslna to cm */
	}
}

@media print {
	.mj-wymiary {
		position: static;
		transform: none;
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

/* =====================================================================
   Najechanie na karte w listingu.
   Motyw unosi blok tytul+cena o 2rem (.entry-content-wrap -> translateY(-2rem)),
   przez co zachodzil on na pasek. Pasek jedzie w gore razem z nim.
   Motyw wylacza to uniesienie ponizej 768px - tam pasek tez zostaje w miejscu.
   ===================================================================== */
.mj-wymiary {
	transition: transform .3s ease, background-color .2s ease;
}

@media screen and (min-width: 768px) {
	.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .mj-wymiary,
	.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .mj-wymiary,
	.wc-block-grid__product.woo-archive-action-on-hover:hover .mj-wymiary,
	.wc-block-grid__product.woo-archive-action-on-hover:focus-within .mj-wymiary {
		transform: translate(-50%, -2rem);
	}
}

/* =====================================================================
   Karta produktu - wiersz z wymiarami pod tytulem (wzorzec inventio).
   Te same ikony co w listingu, ale z podpisem i bez nakladki na zdjeciu.
   ===================================================================== */
.mj-wymiary-karta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 1.2em;
	line-height: 1;
}

.mj-wymiary-karta .mj-wymiar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 999px;
	background: #fafafa;
	font-size: 13px;
	color: #3a3a3a;
}

/* w listingu sasiadujace pozycje maja kreske rozdzielajaca - tu nie */
.mj-wymiary-karta .mj-wymiar + .mj-wymiar {
	padding-left: 13px;
	margin-left: 0;
}

.mj-wymiary-karta .mj-wymiar em {
	font-style: normal;
	color: #6f6f6f;
}

.mj-wymiary-karta .mj-wymiar b {
	font-weight: 600;
	color: #1b1b1b;
}

.mj-wymiary-karta .mj-wymiar i {
	font-style: normal;
	color: #6f6f6f;
}

.mj-wymiary-karta .mj-wymiar svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

@media (max-width: 480px) {
	.mj-wymiary-karta .mj-wymiar {
		padding: 7px 10px;
		font-size: 12px;
	}
	.mj-wymiary-karta .mj-wymiar i {
		display: inline;   /* na karcie produktu jednostka zostaje */
	}
}