/**
 * Pasek koszyka `lukuro-sticky-atc` (plan FW-ATC-001, D10, D11).
 *
 * SZKIELET w `@layer lukuro.modules` ([FW-CSS-001], `docs/css-warstwy.md`): pozycja, siatka
 * ukladow, stany, `:focus-visible`, `safe-area`, rezerwa miejsca. SKORA (tlo, obramowanie,
 * typografia, przycisk) w `@layer lukuro.base` na slotach `--lukuro-color-*` z fallbackiem - projekt nadpisuje ja jedna regula unlayered, a przycisk
 * nosi `.bricks-button`, wiec lapie grupe Button theme styles (standard
 * `~/.claude/kb/bricks/wiki/bricks-stylowanie-custom-elementow.md`).
 *
 * WARSTWY (D9): `z-index: var(--lukuro-sticky-atc-z, 990)` - pod naglowkiem Bricksa (998)
 * i wszystkimi nakladkami pakietu (mapa w `dynamic-navigation/assets/nav-drawer.css`).
 * Wezel `fixed` to `.lukuro-satc__bar`; korzen elementu zostaje w przeplywie z wysokoscia 0.
 *
 * ZMIENNE PUBLICZNE: `--lukuro-sticky-atc-h` (wysokosc paska, pisze skrypt - hak dla czatu
 * i banera), `--lukuro-sticky-atc-z` (warstwa), `--lukuro-sticky-atc-reserve` (nadpisanie
 * rezerwy `body`, np. `0px`, gdy motyw rezerwuje miejsce sam).
 *
 * @package Lukuro
 * @author lukuro
 */

@layer lukuro.modules {

/* ---------------- szkielet ---------------- */

.lukuro-satc {
	display: block;
	height: 0;
}

.lukuro-satc__bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--lukuro-sticky-atc-z, 990);
	box-sizing: border-box;
	padding: 8px 16px;
	/* Wciecie paska gestow iPhone'a na kazdej szerokosci (dziala przy `viewport-fit=cover`). */
	padding-bottom: max(8px, env(safe-area-inset-bottom));
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.lukuro-satc__bar.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.lukuro-satc__bar,
	.lukuro-satc__bar.is-visible {
		transition: none;
	}
}

.lukuro-satc__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1200px;
	margin-inline: auto;
}

.lukuro-satc__info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.lukuro-satc__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lukuro-satc__variant {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lukuro-satc__price[hidden] {
	display: none;
}

.lukuro-satc__media {
	flex: 0 0 auto;
}

.lukuro-satc__swatch {
	display: block;
	box-sizing: border-box;
	width: var(--lukuro-sticky-atc-swatch, 30px);
	height: var(--lukuro-sticky-atc-swatch, 30px);
	border-radius: 50%;
	background-position: center;
	background-size: cover;
}

.lukuro-satc__swatch--custom {
	display: grid;
	place-items: center;
}

.lukuro-satc__swatch--custom::before {
	content: "+";
	line-height: 1;
}

.lukuro-satc__thumb img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.lukuro-satc__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.lukuro-satc__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
}

.lukuro-satc__button[aria-disabled="true"] {
	opacity: 0.6;
}

.lukuro-satc__spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: lukuro-satc-spin 0.8s linear infinite;
}

.lukuro-satc__button[data-state="busy"] {
	cursor: progress;
}

.lukuro-satc__button[data-state="busy"] .lukuro-satc__spinner {
	display: inline-block;
}

@keyframes lukuro-satc-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.lukuro-satc__spinner {
		animation: none;
		border-right-color: currentColor;
		opacity: 0.5;
	}
}

.lukuro-satc__qty {
	display: flex;
	align-items: center;
}

.lukuro-satc__qty-btn {
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

.lukuro-satc__qty-input {
	width: 3em;
	min-height: 44px;
	text-align: center;
	-moz-appearance: textfield;
}

.lukuro-satc__qty-input::-webkit-outer-spin-button,
.lukuro-satc__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lukuro-satc__fav {
	min-width: 44px;
	min-height: 44px;
}

.lukuro-satc__sr,
.lukuro-satc__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lukuro-satc__bar :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Uklad `stacked`: informacje nad przyciskiem na pelna szerokosc. */
.lukuro-satc__bar[data-layout="stacked"] .lukuro-satc__inner {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.lukuro-satc__bar[data-layout="stacked"] .lukuro-satc__button {
	flex: 1 1 auto;
}

/* Uklad `button`: sam przycisk z cena obok etykiety. */
.lukuro-satc__bar[data-layout="button"] .lukuro-satc__actions,
.lukuro-satc__bar[data-layout="button"] .lukuro-satc__button {
	flex: 1 1 auto;
}

/* ---------------- v2 (FW-ATC-002): wezly tylko przy ustawionych kontrolkach ---------------- */

/* Nazwa nad wierszem wariantu (D5): wielokropek na tekstach, cena bez sciskania. */
.lukuro-satc__title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lukuro-satc__row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.lukuro-satc__row > :empty {
	display: none;
}

.lukuro-satc__row > .lukuro-satc__variant,
.lukuro-satc__row > .lukuro-satc__prompt {
	flex: 0 1 auto;
	min-width: 0;
}

.lukuro-satc__row > .lukuro-satc__price {
	flex: none;
	white-space: nowrap;
}

/* Separator „·” tylko miedzy niepustymi czesciami; czytnik ekranu go pomija. */
.lukuro-satc__row > :not(:empty):not([hidden]) ~ :not(:empty):not([hidden])::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: 6px;
}

.lukuro-satc__prompt {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* FW-ATC-004 (D21, `promptOverflow=hide`): tekst bez miejsca na calosc znika atrybutem `hidden`
   (stawia go wylacznie `sticky-atc.js` po pomiarze; tekst zostaje w DOM dla `__live`). Separator
   `·` pomija `[hidden]` regula wyzej. */
.lukuro-satc__variant[hidden],
.lukuro-satc__prompt[hidden] {
	display: none;
}

/* Kropka koloru i pasma na rogu miniatury (D3, D4). */
.lukuro-satc__thumb--swatch {
	position: relative;
	display: block;
}

.lukuro-satc__dot {
	position: absolute;
	right: -4px;
	bottom: -4px;
	box-sizing: border-box;
	width: var(--lukuro-sticky-atc-dot, 16px);
	height: var(--lukuro-sticky-atc-dot, 16px);
	border-radius: 50%;
	background-position: center;
	background-size: cover;
}

.lukuro-satc__strands {
	position: absolute;
	inset-inline: 3px;
	bottom: 3px;
	display: flex;
	gap: 2px;
	height: 7px;
}

.lukuro-satc__strand {
	flex: 1 1 0;
	background-position: center;
	background-size: cover;
}

.lukuro-satc__dot[hidden],
.lukuro-satc__strands[hidden] {
	display: none;
}

/* Ikona przycisku (D7): tylko w stanach dodania; w `busy` wskaznik w jej miejscu (D8). */
.lukuro-satc__icon {
	display: inline-flex;
	flex: none;
	width: var(--lukuro-sticky-atc-icon, 17px);
	height: var(--lukuro-sticky-atc-icon, 17px);
}

.lukuro-satc__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lukuro-satc__icon--added,
.lukuro-satc__button[data-state="added"] .lukuro-satc__icon--add,
.lukuro-satc__button--icon[data-state="busy"] .lukuro-satc__icon {
	display: none;
}

.lukuro-satc__button[data-state="added"] .lukuro-satc__icon--added {
	display: inline-flex;
}

.lukuro-satc__bar[data-variant-state="partial"] .lukuro-satc__icon {
	display: none;
}

.lukuro-satc__button--icon .lukuro-satc__spinner {
	order: -1;
	width: var(--lukuro-sticky-atc-icon, 17px);
	height: var(--lukuro-sticky-atc-icon, 17px);
	box-sizing: border-box;
}

/* Rezerwa miejsca (D11): stala od pierwszego pomiaru, dodatek na koncu dokumentu nie
   przesuwa tresci; przy widocznym pasku fokus i `scrollIntoView` nie koncza pod nim. */
html.lukuro-satc-reserve body {
	padding-bottom: var(--lukuro-sticky-atc-reserve, var(--lukuro-sticky-atc-h, 0px));
}

html.lukuro-satc-visible {
	scroll-padding-bottom: var(--lukuro-sticky-atc-h, 0px);
}

} /* @layer lukuro.modules */

/* ---------------- skora (default pakietu) ---------------- */

@layer lukuro.base;

@layer lukuro.base {

	.lukuro-satc__bar {
		background: var(--lukuro-color-surface, #fff);
		border-top: 1px solid var(--lukuro-color-hairline, #e0e0e0);
		/* Cien zostaje czarny w obu motywach: przyciemnia tresc przewijana POD paskiem. */
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		color: var(--lukuro-color-text, #222);
	}

	.lukuro-satc__variant {
		font-size: 12px;
		line-height: 1.3;
	}

	.lukuro-satc__unavailable {
		color: var(--lukuro-color-text-muted, #666);
	}

	.lukuro-satc__price {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--lukuro-color-primary-text, #111);
	}

	.lukuro-satc__swatch {
		border: 1px solid var(--lukuro-color-border-control, #767676);
	}

	.lukuro-satc__swatch--empty {
		background: transparent;
	}

	.lukuro-satc__swatch--custom {
		background: var(--lukuro-color-surface-subtle, #f5f5f5);
		font-size: 18px;
	}

	.lukuro-satc__thumb img {
		border-radius: 4px;
	}

	.lukuro-satc__title {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
	}

	.lukuro-satc__prompt {
		font-size: 12px;
		line-height: 1.3;
		color: var(--lukuro-color-text-muted, #666);
	}

	.lukuro-satc__dot {
		border: 2px solid var(--lukuro-color-surface, #fff);
		box-shadow: 0 0 0 1px var(--lukuro-color-border-control, #767676);
	}

	.lukuro-satc__strand {
		box-shadow: 0 0 0 1px var(--lukuro-color-border-control, #767676);
	}

	.lukuro-satc__strand--empty {
		background: repeating-linear-gradient(135deg, var(--lukuro-color-surface, #fff) 0 2px, var(--lukuro-color-text-muted, #666) 2px 3px);
	}

	.lukuro-satc__button {
		padding: 0 20px;
		border: 0;
		border-radius: 4px;
		background-color: var(--lukuro-color-primary, #111);
		color: var(--lukuro-color-on-primary, #fff);
		font-weight: 600;
	}

	.lukuro-satc__qty {
		border: 1px solid var(--lukuro-color-border-control, #767676);
		border-radius: 4px;
	}

	.lukuro-satc__qty-btn,
	.lukuro-satc__fav {
		border: 0;
		background: transparent;
		color: var(--lukuro-color-text, #222);
	}

	.lukuro-satc__qty-input {
		border: 0;
		background: transparent;
		color: var(--lukuro-color-text, #222);
	}
}