/**
 * Sklep — komponenty wariantów i subskrypcji (faza LP + umowa: L2, K1, K8; docs/SKLEP.md §2.1).
 * Właściciel: sklep-fundament. Ładowany na każdej stronie (loader global-*.css w inc/assets.php), jak sekcja „SKLEP” w components.css —
 * tabela wariantów może się pojawić na produkcie (P1, P9), w szufladzie, koszyku i koncie.
 *
 *   ts-variants            — tabela wariantów „Wariant · Zawartość · Cena” + przyciski „KUP” i wiersz subskrypcji
 *                            (znacznik: thesybin_shop_variants_table() w inc/shop.php). Szeroki kontener: wiersze-karty tabeli
 *                            z widocznym nagłówkiem (≥ 680 px); < 680 px: karta-wiersz w siatce (nazwa nad zawartością, cena, przycisk); < 580 px: karta na wariant.
 *   ts-btn-outline[aria-disabled="true"] — stan niedostępny pigułki z obrysem („WŁĄCZ SUBSKRYPCJĘ”, K8): fokusowalny, bez zmiany
 *                            po najechaniu, tło i tekst jak ts-cta w stanie niedostępnym (#D9D4CB / #4E5451 = 5.25:1).
 *   Znaczniki LP (K1)      — bez klasy i bez stylu: zwykły tekst w stylu otoczenia (thesybin_ph( 'lp-…' ) zwraca sam tekst).
 *
 * Kontekst ciemny (karta P9): rodzic .ts-on-dark / .ts-surface-dark / .has-primary-background-color.
 */

/* ---------- ts-btn-outline: stan niedostępny ---------- */
.ts-btn-outline[aria-disabled="true"],
.ts-btn-outline[aria-disabled="true"]:focus-visible {
	border-color: var(--ts-disabled-bg);
	background-color: var(--ts-disabled-bg);
	color: var(--wp--preset--color--body-text);
	cursor: not-allowed;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline[aria-disabled="true"],
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline[aria-disabled="true"]:focus-visible {
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.14); /* wypełnienie zamiast białego obrysu aktywnego przycisku */
	color: var(--wp--preset--color--white); /* biały na #274A46 + 14% bieli: 6.52:1; na karcie wiersza (+6%): 5.64:1 */
}

@media (hover: hover) {
	.ts-btn-outline[aria-disabled="true"]:hover {
		border-color: var(--ts-disabled-bg);
		background-color: var(--ts-disabled-bg);
		color: var(--wp--preset--color--body-text);
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline[aria-disabled="true"]:hover {
		border-color: transparent;
		background-color: rgba(255, 255, 255, 0.14);
		color: var(--wp--preset--color--white);
	}
}

/* ---------- ts-variants: tabela wariantów ---------- */
.ts-variants {
	container: ts-variants / inline-size;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sans);
}

.ts-variants .ts-variants__title {
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.ts-variants .ts-variants__table {
	width: 100%;
	margin: -8px 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	font-size: 15px;
	line-height: 1.45;
}

.ts-variants .ts-variants__table :is(th, td) {
	padding: 12px 14px;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
}

.ts-variants .ts-variants__table thead th {
	padding-top: 0;
	padding-bottom: 0;
	color: var(--ts-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.ts-variants .ts-variants__table thead th:first-child {
	padding-left: 19px;
}

.ts-variants .ts-variants__table tbody :is(th, td) {
	border-top: 1px solid var(--ts-cream-line);
	border-bottom: 1px solid var(--ts-cream-line);
	background-color: var(--wp--preset--color--white);
}

.ts-variants .ts-variants__table tbody :is(th, td):first-child {
	padding-left: 18px;
	border-left: 1px solid var(--ts-cream-line);
	border-radius: 16px 0 0 16px;
}

.ts-variants .ts-variants__table tbody :is(th, td):last-child {
	padding-right: 8px;
	border-right: 1px solid var(--ts-cream-line);
	border-radius: 0 16px 16px 0;
}

.ts-variants .ts-variants__table tbody .ts-variants__name {
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.ts-variants .ts-variants__table tbody .ts-variants__price {
	color: var(--wp--preset--color--primary);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

/* Znacznik LP w komórce ceny subskrypcji: ten sam styl komórki, może się zawinąć (K1 — zwykły tekst). */
.ts-variants .ts-variants__table tbody .ts-variants__row--sub .ts-variants__price {
	white-space: normal;
}

.ts-variants .ts-variants__table .ts-variants__act {
	width: 1%;
	text-align: right;
}

.ts-variants .ts-variants__form {
	margin: 0;
}

.ts-variants :is(.ts-variants__buy, .ts-sub-btn) {
	width: 100%;
	min-width: max-content;
	white-space: nowrap;
}

.ts-variants .ts-sub-btn {
	min-height: 48px;
}

.ts-variants .ts-variants__error {
	margin: 12px 0 0;
	color: var(--ts-error);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ts-variants .ts-variants__error:empty {
	display: none;
}

/* Ciemna karta (P9): wiersze półprzezroczyste, tekst biały */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants {
	color: rgba(255, 255, 255, 0.9);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__title,
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__table tbody :is(.ts-variants__name, .ts-variants__price) {
	color: var(--wp--preset--color--white);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__table thead th {
	color: rgba(255, 255, 255, 0.85);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__table tbody :is(th, td) {
	border-color: rgba(255, 255, 255, 0.18);
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.9);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__error {
	color: #FFD3D0; /* na #274A46: 7.19:1 */
}

/* Kontener < 680 px (kolumna zakupu produktu, karta P9, tablet): wiersz = karta w siatce z kolumnami wyrównanymi między wierszami
   (subgrid): nazwa nad zawartością | cena | przycisk. Nagłówek tabeli tylko dla czytników (nazwy kolumn niesie układ karty).
   Role table/row/cell zapisane w HTML (zmiana display nie gubi semantyki tabeli). */
@container ts-variants (max-width: 679px) {
	.ts-variants .ts-variants__table,
	.ts-variants .ts-variants__table thead,
	.ts-variants .ts-variants__table tbody,
	.ts-variants .ts-variants__table tr,
	.ts-variants .ts-variants__table th,
	.ts-variants .ts-variants__table td {
		display: block;
	}

	.ts-variants .ts-variants__table {
		margin: 0;
	}

	.ts-variants .ts-variants__table thead {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ts-variants .ts-variants__table tbody {
		display: grid;
		grid-template-columns: minmax(0, 1fr) max-content max-content;
		gap: 10px 20px;
	}

	.ts-variants .ts-variants__table tbody tr {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-columns: subgrid;
		grid-template-rows: auto auto;
		align-items: center;
		padding: 12px 8px 12px 18px;
		border: 1px solid var(--ts-cream-line);
		border-radius: 16px;
		background-color: var(--wp--preset--color--white);
	}

	.ts-variants .ts-variants__table tbody :is(th, td),
	.ts-variants .ts-variants__table tbody :is(th, td):first-child,
	.ts-variants .ts-variants__table tbody :is(th, td):last-child {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__name {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		white-space: normal;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__content {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__price {
		grid-column: 2;
		grid-row: 1 / span 2;
		text-align: right;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__act {
		grid-column: 3;
		grid-row: 1 / span 2;
		width: auto;
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__table tbody tr {
		border-color: rgba(255, 255, 255, 0.18);
		background-color: rgba(255, 255, 255, 0.06);
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-variants .ts-variants__table tbody :is(th, td) {
		border: 0;
		background: none;
	}
}

/* Kontener < 580 px (telefon, tablet, kolumny 1025–1199 px): karta na wariant — nazwa i cena w pierwszym wierszu, zawartość,
   przycisk na całą szerokość. */
@container ts-variants (max-width: 579px) {
	.ts-variants .ts-variants__table tbody {
		display: block;
	}

	.ts-variants .ts-variants__table tbody tr {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto;
		align-items: baseline;
		gap: 2px 12px;
		padding: 14px 16px 16px;
	}

	.ts-variants .ts-variants__table tbody tr + tr {
		margin-top: 10px;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__name {
		align-self: auto;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__price {
		grid-column: 2;
		grid-row: 1;
		max-width: 60cqi;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__content {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.ts-variants .ts-variants__table tbody .ts-variants__act {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 12px;
	}

	.ts-variants :is(.ts-variants__buy, .ts-sub-btn) {
		min-width: 0;
		white-space: normal;
	}
}