/* Looty Swatches – front */

:root {
	--looty-sw-accent: #b29758;
	--looty-sw-line: rgba(14, 14, 14, .18);
	--looty-sw-dark: #0e0e0e;
}

/* --- Karta produktu --------------------------------------------------- */

/* Tabela wariantów WooCommerce przechodzi na układ blokowy:
   nazwa atrybutu z wybraną wartością w jednej linii, próbki pod spodem. */

.looty-variations,
.looty-variations tbody,
.looty-variations tr,
.looty-variations th,
.looty-variations td {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: left;
}

.looty-variations {
	border-collapse: collapse;
	margin: 0 0 8px;
}

/* Oryginalna etykieta w lewej kolumnie – zastępujemy ją własną. */
.looty-variations th.label {
	display: none;
}

.looty-variations tr + tr {
	margin-top: 16px;
}

/* WooCommerce ukrywa link "Wyczyść" przez visibility:hidden, przez co nadal
   zajmuje miejsce i tworzy pustą przerwę nad przyciskiem zakupu. */
.reset_variations[style*="visibility: hidden"],
.reset_variations[style*="visibility:hidden"] {
	display: none !important;
}

.looty-variations .reset_variations {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(14, 14, 14, .45);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.looty-variations .reset_variations:hover {
	color: var(--looty-sw-dark);
}

/* Ten sam układ, ale oparty na :has() – działa od razu przy renderowaniu,
   bez czekania na JavaScript, więc nie widać przeskoku układu po wczytaniu strony.
   Osobny blok, bo starsze przeglądarki odrzuciłyby cały selektor naraz. */
table.variations:has(.looty-attr),
table.variations:has(.looty-attr) tbody,
table.variations:has(.looty-attr) tr,
table.variations:has(.looty-attr) th,
table.variations:has(.looty-attr) td {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: left;
}

table.variations:has(.looty-attr) {
	border-collapse: collapse;
	margin: 0 0 8px;
}

table.variations:has(.looty-attr) th.label {
	display: none;
}

table.variations:has(.looty-attr) tr + tr {
	margin-top: 16px;
}

.looty-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.looty-attr__chosen {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-height: 18px;
	margin-bottom: 10px;
	font-size: 13px;
	letter-spacing: .02em;
	line-height: 1.4;
}

.looty-attr__label {
	color: rgba(14, 14, 14, .5);
}

.looty-attr__label::after {
	content: ":";
}

.looty-attr__chosen-value {
	color: var(--looty-sw-dark);
}

.looty-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Stan bazowy. Podwójna specyficzność plus !important, bo motywy
   i Elementor stylują <button> skrótem border i własnym tłem. */
.looty-swatches .looty-swatch,
.looty-swatches .looty-swatch:link,
.looty-swatches .looty-swatch:visited,
.looty-swatches .looty-swatch:hover,
.looty-swatches .looty-swatch:focus,
.looty-swatches .looty-swatch:active,
.looty-swatches .looty-swatch:focus-visible,
.looty-swatches .looty-swatch:focus-within {
	position: relative;
	box-sizing: border-box !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var(--looty-sw-line) !important;
	border-radius: 0 !important;
	cursor: pointer;
	line-height: 0;
	margin: 0 !important;
	transform: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .25s ease;
}

/* Stany aktywne – wyłącznie złote obramowanie.
   Przyciski tekstowe reagują też na najechanie, próbki kolorów dopiero na wybór. */
.looty-swatches .looty-swatch--text:hover:not(.is-disabled),
.looty-swatches .looty-swatch--text:focus:not(.is-disabled),
.looty-swatches .looty-swatch--text:active:not(.is-disabled),
.looty-swatches .looty-swatch.is-active {
	border-color: var(--looty-sw-accent) !important;
}

/* obrazek tkaniny / ramy – rozmiar identyczny w każdym stanie.
   Bez obramowania w spoczynku; złota ramka pojawia się dopiero po wyborze. */
.looty-swatches .looty-swatch--image,
.looty-swatches .looty-swatch--image:hover,
.looty-swatches .looty-swatch--image:focus,
.looty-swatches .looty-swatch--image:active,
.looty-swatches .looty-swatch--image:focus-visible {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	padding: 0 !important;
	border-color: transparent !important;
}

.looty-swatches .looty-swatch--image.is-active,
.looty-swatches .looty-swatch--image.is-active:hover,
.looty-swatches .looty-swatch--image.is-active:focus {
	padding: 3px !important;
	border-color: var(--looty-sw-accent) !important;
}

.looty-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* etykieta tekstowa, np. S / M / L */
.looty-swatches .looty-swatch--text,
.looty-swatches .looty-swatch--text:hover,
.looty-swatches .looty-swatch--text:focus,
.looty-swatches .looty-swatch--text:active,
.looty-swatches .looty-swatch--text:focus-visible {
	min-width: 32px !important;
	height: 30px !important;
	padding: 0 10px !important;
}

.looty-swatches .looty-swatch__text,
.looty-swatches .looty-swatch:hover .looty-swatch__text,
.looty-swatches .looty-swatch:focus .looty-swatch__text,
.looty-swatches .looty-swatch:active .looty-swatch__text {
	display: block;
	font-size: 11px;
	line-height: 28px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--looty-sw-dark) !important;
}

/* Żadnego powiększania przy najechaniu – zmienia się wyłącznie obramowanie. */
.looty-swatches .looty-swatch:hover,
.looty-swatches .looty-swatch:focus,
.looty-swatches .looty-swatch:active,
.looty-swatches .looty-swatch.is-active,
.looty-swatches .looty-swatch:hover .looty-swatch__img,
.looty-swatches .looty-swatch:focus .looty-swatch__img,
.looty-swatches .looty-swatch:hover .looty-swatch__text,
.looty-swatches .looty-swatch:focus .looty-swatch__text {
	transform: none !important;
	scale: none !important;
	zoom: normal !important;
	border-width: 1px !important;
}

.looty-swatches .looty-swatch.is-disabled {
	cursor: not-allowed;
	opacity: .3;
	border-color: transparent !important;
}

.looty-swatches .looty-swatch--text.is-disabled {
	border-color: var(--looty-sw-line) !important;
}

.looty-swatch.is-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px));
	opacity: .5;
}

/* --- Listing / loop grid ---------------------------------------------- */

.looty-loop-swatches {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.looty-loop-swatches .looty-loop-swatch,
.looty-loop-swatches .looty-loop-swatch:link,
.looty-loop-swatches .looty-loop-swatch:visited,
.looty-loop-swatches .looty-loop-swatch:hover,
.looty-loop-swatches .looty-loop-swatch:focus,
.looty-loop-swatches .looty-loop-swatch:active,
.looty-loop-swatches .looty-loop-swatch:focus-visible {
	display: block;
	width: 16px;
	height: 16px;
	padding: 2px !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	cursor: pointer;
	line-height: 0;
	transform: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .25s ease;
}

.looty-loop-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.looty-loop-swatches .looty-loop-swatch:hover,
.looty-loop-swatches .looty-loop-swatch:focus,
.looty-loop-swatches .looty-loop-swatch:active,
.looty-loop-swatches .looty-loop-swatch:focus-visible {
	border-color: var(--looty-sw-accent) !important;
}

/* Stan wybrany zostaje po kliknięciu, także po utracie focusa. */
.looty-loop-swatches .looty-loop-swatch.is-active,
.looty-loop-swatches .looty-loop-swatch[data-looty-selected="1"],
.looty-loop-swatches a.looty-loop-swatch[data-looty-selected="1"],
.looty-loop-swatches button.looty-loop-swatch[data-looty-selected="1"] {
	border-color: var(--looty-sw-accent) !important;
}

.looty-loop-swatches__more {
	font-size: 11px;
	letter-spacing: .04em;
	color: rgba(14, 14, 14, .5);
}

@media (max-width: 640px) {
	.looty-swatches .looty-swatch--image,
	.looty-swatches .looty-swatch--image:hover,
	.looty-swatches .looty-swatch--image:focus {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
	}

	.looty-swatches .looty-swatch--text,
	.looty-swatches .looty-swatch--text:hover,
	.looty-swatches .looty-swatch--text:focus {
		min-width: 30px !important;
		height: 28px !important;
		padding: 0 8px !important;
	}

	.looty-swatches .looty-swatch__text {
		line-height: 26px;
	}

	.looty-variations tr + tr {
		margin-top: 20px;
	}
}