/**
 * Spiżarnia Pupila – Punkty (front)
 *
 * Warstwa wizualna zgodna z systemem marki (DESIGN-SYSTEM-SPIZARNIA-PUPILA.md, v07):
 *  – głęboka zieleń #0E2A1F, złota rycina #9E895E, ciemna sepia #735F38,
 *  – Baskerville również w interfejsie (przyciski, pola, tabele, ceny),
 *  – narożniki 2 px, siatka odstępów 8/16/24/32/48/64,
 *  – jeden wspólny wzorzec komunikatu (.sp-punkty-notice = receptura .sp-notice),
 *  – jedna dominująca nieregularność na moduł: rozdarty brzeg pola salda,
 *  – ruch 180 / 280 / 650 ms i obsługa prefers-reduced-motion.
 *
 * Paleta jest ustalona: wszystkie barwy opisuje system wizualny marki,
 * więc żaden kolor nie pochodzi już z konfiguracji wtyczki.
 *
 * Cały arkusz jest scope'owany do klas .sp-punkty-* — nic nie nadpisuje
 * globalnie elementów motywu (button, input, table).
 */

.sp-punkty-account,
.sp-punkty-panel,
.sp-punkty-badge,
.sp-punkty-thankyou,
.sp-punkty-notice,
.sp-punkty-terms {
	--sp-punkty-ink: #0E2A1F;
	--sp-punkty-gold: #9E895E;
	--sp-punkty-gold-light: #CBB98E;
	--sp-punkty-paper: #F7F4ED;
	--sp-punkty-surface: #FFFFFF;
	--sp-punkty-soft: #F0ECE3;
	--sp-punkty-action: #735F38;
	--sp-punkty-muted: #6F6A63;
	--sp-punkty-line: #D8D1C4;
	--sp-punkty-field-line: #938979;

	--sp-punkty-plus: #36533F;
	--sp-punkty-minus: #8A3B32;
	--sp-punkty-warn: #78591F;
	--sp-punkty-notice-bg: #FBF9F5;

	--sp-punkty-disabled-bg: #E7E1D6;
	--sp-punkty-disabled-text: #625E55;
	--sp-punkty-disabled-line: #B7AFA0;

	--sp-punkty-radius: 2px;
	--sp-punkty-serif: Baskerville, 'SP Baskerville', Georgia, serif;
	--sp-punkty-fast: 180ms;
	--sp-punkty-hover: 280ms;
	--sp-punkty-reveal: 650ms;
	--sp-punkty-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Zaznaczenie tekstu w obrębie modułu — złoto na zieleni (rozdz. 14). */
.sp-punkty-account ::selection,
.sp-punkty-panel ::selection {
	background: #CBB98E;
	color: #0E2A1F;
}

/* --- Znak programu: moneta z łapą ---------------------------------------- */

/*
 * Rycina, nie piktogram. Grawerunek ma precyzyjne kreskowanie i poniżej
 * ~56 px zlewa się w plamę, dlatego moduł dostaje 72 px (system: rycina
 * w module 80–160 px), a hero 120 px. Nigdzie nie schodzimy do 34 px.
 * Bez cienia.
 */
.sp-punkty-coin {
	display: block;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	background-color: var(--sp-punkty-gold, #9E895E);
	-webkit-mask: url(../img/moneta.svg) no-repeat center / contain;
	mask: url(../img/moneta.svg) no-repeat center / contain;
}

.sp-punkty-coin--lg { width: 88px; height: 88px; }
.sp-punkty-coin--sm { width: 56px; height: 56px; }
.sp-punkty-coin--hero { width: 120px; height: 120px; background-color: #CBB98E; }

@supports not ((-webkit-mask-image: url("#a")) or (mask-image: url("#a"))) {
	.sp-punkty-coin { display: none; }
}

/* --- Komunikat na karcie produktu ---------------------------------------- */

/*
 * Karta produktu: len jako powierzchnia, złota krawędź 2 px z lewej,
 * moneta jako rycina. Bez gradientu, bez cienia, narożnik 2 px.
 */
.sp-punkty-badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--sp-punkty-ink, #0E2A1F);
	border: 1px solid var(--sp-punkty-ink, #0E2A1F);
	border-left: 2px solid var(--sp-punkty-gold-light, #CBB98E);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-paper, #F7F4ED);
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
	line-height: 1.45;
	container-type: inline-size;
	container-name: sp-punkty-panel;
}

.sp-punkty-badge__text { display: block; flex: 1 1 240px; min-width: 0; }

.sp-punkty-badge .sp-punkty-coin { background-color: var(--sp-punkty-gold-light, #CBB98E); }

.sp-punkty-value {
	color: var(--sp-punkty-gold-light, #CBB98E);
	font-size: 21px;
	line-height: 1.2;
	white-space: nowrap;
}

.sp-punkty-label { color: var(--sp-punkty-gold-light, #CBB98E); }

/* Link „Szczegóły” — jedno podkreślenie, bez drugiej kreski na hover. */
.sp-punkty-more {
	display: inline-block;
	margin-top: 4px;
	color: var(--sp-punkty-paper, #F7F4ED);
	text-decoration: underline;
	text-underline-offset: 5px;
	white-space: nowrap;
}

.sp-punkty-more:hover,
.sp-punkty-more:focus-visible { color: var(--sp-punkty-gold-light, #CBB98E); }

/* Na ciemnym polu fokus musi być jasny, żeby pozostał widoczny. */
.sp-punkty-badge a:focus-visible,
.sp-punkty-badge .sp-punkty-campaign:focus-visible,
.sp-punkty-panel--guest a:focus-visible,
.sp-punkty-panel--guest .sp-punkty-campaign:focus-visible {
	outline: 1px solid var(--sp-punkty-gold-light, #CBB98E);
	outline-offset: 3px;
}

/* Wariant na listingu: krótka etykieta typograficzna, bez łatki. */
.sp-punkty-loop {
	margin-top: 8px;
	color: var(--sp-punkty-action, #735F38);
	font-family: var(--sp-punkty-serif);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

/*
 * Jasne złoto czyta się wyłącznie na zieleni, ciemna sepia wyłącznie na
 * jasnym tle. Etykieta akcji i rozbicie punktów pojawiają się na obu
 * rodzajach powierzchni, więc kolory trzymamy w tokenach: ciemne pola
 * (komunikat przy produkcie i panel gościa) przestawiają je na wersję
 * jasną, jasny panel koszyka korzysta z wartości domyślnych.
 */
.sp-punkty-badge,
.sp-punkty-panel--guest {
	--campaign-tone: var(--sp-punkty-gold-light, #CBB98E);
	--campaign-hover: var(--sp-punkty-paper, #F7F4ED);
	--split-term: rgba(247, 244, 237, .72);
	--split-line: rgba(203, 185, 142, .35);
}

/*
 * Kampania mnożnikowa. Układ jak dotąd: etykieta akcji z chevronem
 * rozwijającym rozbicie punktów. Zmienia się tylko warstwa wizualna —
 * złota łatka z gwiazdką ustępuje etykiecie typograficznej w sepii
 * (system, rozdz. 15: bez złotych łatek pod krótkimi etykietami).
 */
.sp-punkty-campaign-box { width: 100%; margin-top: 4px; }

.sp-punkty-campaign {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--campaign-tone, var(--sp-punkty-action, #735F38));
	font-family: var(--sp-punkty-serif);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.sp-punkty-campaign-box > .sp-punkty-campaign {
	cursor: pointer;
	list-style: none;
}

.sp-punkty-campaign-box > .sp-punkty-campaign::-webkit-details-marker { display: none; }

/* Strzałka w dół — ta sama cienka kreska co w regulaminie. */
.sp-punkty-campaign-box > .sp-punkty-campaign::after {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--sp-punkty-hover) var(--sp-punkty-ease);
}

.sp-punkty-campaign-box[open] > .sp-punkty-campaign::after { transform: rotate(180deg); }

.sp-punkty-campaign-box > .sp-punkty-campaign:hover { color: var(--campaign-hover, var(--sp-punkty-ink, #0E2A1F)); }


.sp-punkty-split {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.sp-punkty-split li {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid var(--split-line, var(--sp-punkty-line, #D8D1C4));
}

.sp-punkty-split li:last-child { border-bottom: 0; }
.sp-punkty-split__label { flex: 1 1 auto; }
.sp-punkty-split__value { color: var(--campaign-tone, var(--sp-punkty-action, #735F38)); }
.sp-punkty-split__term { flex: 1 0 100%; color: var(--split-term, var(--sp-punkty-muted, #6F6A63)); font-size: 15px; }

/* --- Panel w koszyku, checkoucie i zamówieniu ---------------------------- */

.sp-punkty-panel {
	margin: 0 0 32px;
	padding: 24px;
	background: var(--sp-punkty-surface, #FFFFFF);
	border: 1px solid var(--sp-punkty-line, #D8D1C4);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
	line-height: 1.45;
	container-type: inline-size;
	container-name: sp-punkty-panel;
}

.sp-punkty-panel__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
}

.sp-punkty-panel__head-text { min-width: 0; }

.sp-punkty-panel__title {
	display: block;
	font-size: 26px;
	line-height: 1.2;
}

.sp-punkty-panel__balance {
	display: block;
	margin-top: 4px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 17px;
}

.sp-punkty-panel__balance strong {
	color: var(--sp-punkty-ink, #0E2A1F);
	font-weight: 400;
}

.sp-punkty-panel__sep { color: var(--sp-punkty-line, #D8D1C4); }
.sp-punkty-panel__worth { color: var(--sp-punkty-action, #735F38); }

/* Zapowiedź naliczenia — liczba w sepii, opis w kolorze pomocniczym. */
.sp-punkty-panel__earn {
	margin-left: auto;
	text-align: right;
	flex: 0 0 auto;
}

.sp-punkty-panel__earn-value {
	display: block;
	color: var(--sp-punkty-action, #735F38);
	font-size: 26px;
	line-height: 1.15;
	white-space: nowrap;
}

.sp-punkty-panel__earn-label {
	display: block;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
	line-height: 1.4;
}

.sp-punkty-panel__note {
	margin: 16px 0 0;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
	line-height: 1.45;
}

.sp-punkty-panel__more { margin: 16px 0 0; font-size: 16px; }

.sp-punkty-panel__more a {
	color: var(--sp-punkty-action, #735F38);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Formularz wymiany punktów. */
.sp-punkty-form { margin-top: 20px; }

.sp-punkty-form__label {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
}

.sp-punkty-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

/*
 * Obie akcje trzymają się razem i mają równą szerokość — także wtedy, gdy
 * cały blok zawinie się pod pole. Dzięki temu „Użyj wszystkich” nie odrywa
 * się od „Zastosuj” ani nie zostaje wąskim prostokątem pod szerokim
 * przyciskiem.
 */
.sp-punkty-form__actions {
	display: flex;
	flex: 1 1 240px;
	gap: 8px;
	min-width: 0;
}

.sp-punkty-form__actions > * {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.sp-punkty-form__hint {
	margin: 10px 0 0;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
	line-height: 1.45;
}

.sp-punkty-input {
	flex: 1 1 120px;
	min-width: 96px;
	min-height: 48px;
	padding: 10px 12px;
	background: #FFFDF8;
	border: 1px solid var(--sp-punkty-field-line, #938979);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
	accent-color: var(--sp-punkty-action, #735F38);
}

/* Aktywne pole: jedna cienka krawędź, bez dokładanej grubej ramki. */
.sp-punkty-input:focus-visible {
	outline: 1px solid var(--sp-punkty-action, #735F38);
	outline-offset: -1px;
	border-color: var(--sp-punkty-action, #735F38);
}

/* --- Przyciski ----------------------------------------------------------- */

/*
 * Podział ról: zieleń = akcja zakupowa (zastosuj punkty),
 * ciemna sepia = akcja wsparcia, obrys = akcja pomocnicza,
 * tekst podkreślony = działanie o małej wadze.
 * Jeden dominujący przycisk w module.
 */
.sp-punkty-button,
.sp-punkty-panel .button,
.sp-punkty-pets .button,
.sp-punkty-copy__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 23px;
	background: var(--sp-punkty-ink, #0E2A1F);
	border: 1px solid transparent;
	border-radius: var(--sp-punkty-radius, 2px);
	color: #F7F4ED;
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
	line-height: 1.2;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background var(--sp-punkty-fast), color var(--sp-punkty-fast), box-shadow var(--sp-punkty-fast);
}

.sp-punkty-button--secondary,
.sp-punkty-copy__button {
	background: transparent;
	border-color: var(--sp-punkty-action, #735F38);
	color: var(--sp-punkty-action, #735F38);
}

.sp-punkty-button--support { background: var(--sp-punkty-action, #735F38); color: #FFFFFF; }

/*
 * „Użyj wszystkich” korzysta z wariantu pomocniczego przycisku, więc ma tę
 * samą wysokość, krój i padding co „Zastosuj” — para czyta się jako jedna
 * grupa, a nie dwa różne elementy.
 */
.sp-punkty-max { font-family: var(--sp-punkty-serif); }

@media (hover: hover) and (pointer: fine) {
	.sp-punkty-button:not(:disabled):hover,
	.sp-punkty-panel .button:not(:disabled):hover,
	.sp-punkty-pets .button:not(:disabled):hover {
		background: #244D3B;
		color: #F7F4ED;
		box-shadow: inset 0 -2px 0 var(--sp-punkty-gold-light, #CBB98E);
	}

	.sp-punkty-button--secondary:not(:disabled):hover,
	.sp-punkty-copy__button:not(:disabled):hover,
	.sp-punkty-max:not(:disabled):hover {
		background: var(--sp-punkty-action, #735F38);
		color: #FFFFFF;
	}
}

.sp-punkty-button:focus-visible,
.sp-punkty-max:focus-visible,
.sp-punkty-link-button:focus-visible,
.sp-punkty-filter:focus-visible,
.sp-punkty-copy__button:focus-visible {
	outline: 1px solid var(--sp-punkty-action, #735F38);
	outline-offset: 3px;
}

/* Wspólny stan disabled ma pierwszeństwo przed każdym wariantem. */
.sp-punkty-button:disabled,
.sp-punkty-max:disabled,
.sp-punkty-link-button:disabled,
.sp-punkty-panel .button:disabled {
	background: var(--sp-punkty-disabled-bg, #E7E1D6);
	border: 1px solid var(--sp-punkty-disabled-line, #B7AFA0);
	color: var(--sp-punkty-disabled-text, #625E55);
	opacity: 1;
	box-shadow: none;
	text-decoration: none;
	cursor: not-allowed;
}

/* Wyłączony przycisk tekstowy dostaje pełne pole — tekst nie dotyka krawędzi. */
.sp-punkty-link-button:disabled { padding: 12px 23px; }

/* Busy: rozmiar bez zmian, wskaźnik 1,2 s, opis dostępny. */
.sp-punkty-button[aria-busy="true"] { cursor: progress; }

.sp-punkty-button[aria-busy="true"]::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: sp-punkty-spin 1.2s linear infinite;
}

@keyframes sp-punkty-spin { to { transform: rotate(360deg); } }

/* Przycisk tekstowy — jedno podkreślenie, bez unoszenia. */
.sp-punkty-link-button {
	padding: 0;
	background: none;
	border: 0;
	color: var(--sp-punkty-action, #735F38);
	font-family: var(--sp-punkty-serif);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
}

.sp-punkty-link-button:hover { color: var(--sp-punkty-ink, #0E2A1F); }

.sp-punkty-clear {
	flex: 0 0 auto;
	vertical-align: baseline;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sp-punkty-action, #735F38);
	font-family: var(--sp-punkty-serif);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
}

/*
 * Stan bieżący wymiany: spokojny lniany pasek z akcją odwołania po prawej.
 * Celowo nie jest powiadomieniem — komunikat o wyniku działania pojawia się
 * osobno i to on jest ogłaszany czytnikowi ekranu.
 */
.sp-punkty-panel__active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
	justify-content: space-between;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--sp-punkty-soft, #F0ECE3);
	border-left: 2px solid var(--sp-punkty-plus, #36533F);
	border-radius: var(--sp-punkty-radius, 2px);
	font-size: 17px;
	line-height: 1.45;
}

.sp-punkty-panel__active-text { min-width: 0; }
.sp-punkty-panel__active strong { font-weight: 400; color: var(--sp-punkty-action, #735F38); }

/* --- Panel gościa -------------------------------------------------------- */

/*
 * Jedyna zielona powierzchnia w koszyku: akcent, nie tło każdej sekcji.
 * Kremowy tekst, złota rycina, kremowy przycisk z zielonym tekstem.
 */
.sp-punkty-panel--guest {
	background: var(--sp-punkty-ink, #0E2A1F);
	border-color: var(--sp-punkty-ink, #0E2A1F);
	color: var(--sp-punkty-paper, #F7F4ED);
	padding: 28px 24px;
}

.sp-punkty-panel__guest-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.sp-punkty-panel__guest-text { flex: 1 1 260px; min-width: 0; }

.sp-punkty-panel__guest-text strong {
	display: block;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 8px;
}

.sp-punkty-panel__guest-text em { color: var(--sp-punkty-gold-light, #CBB98E); }

.sp-punkty-panel--guest .sp-punkty-coin { background-color: var(--sp-punkty-gold-light, #CBB98E); }

.sp-punkty-panel--guest .sp-punkty-button {
	background: var(--sp-punkty-paper, #F7F4ED);
	color: var(--sp-punkty-ink, #0E2A1F);
}

.sp-punkty-panel--guest .sp-punkty-button:hover { background: #E3DAC8; color: var(--sp-punkty-ink, #0E2A1F); }
.sp-punkty-panel--guest .sp-punkty-button:focus-visible { outline-color: var(--sp-punkty-gold-light, #CBB98E); }

/* --- Wspólny wzorzec komunikatu (.sp-notice z systemu marki) ------------- */

/*
 * Jedno tło #FBF9F5 we wszystkich stanach, pełna ramka 1 px i lewa krawędź
 * 2 px w kolorze znaczenia. Kolor niosą wyłącznie tytuł, ikona i krawędź.
 */
.sp-punkty-notice {
	--tone: var(--sp-punkty-action, #735F38);
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--sp-punkty-notice-bg, #FBF9F5);
	border: 1px solid var(--sp-punkty-line, #D8D1C4);
	border-left: 2px solid var(--tone);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
	line-height: 1.45;
	text-align: left;
}

.sp-punkty-notice--success { --tone: #36533F; }
.sp-punkty-notice--warn { --tone: #78591F; }
.sp-punkty-notice--error { --tone: #8A3B32; }

.sp-punkty-notice__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	color: var(--tone);
}

.sp-punkty-notice__body { min-width: 0; }

.sp-punkty-notice__title {
	display: block;
	margin-bottom: 4px;
	color: var(--tone);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
}

.sp-punkty-notice__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -11px -12px -11px auto;
	background: none;
	border: 0;
	color: var(--sp-punkty-muted, #6F6A63);
	cursor: pointer;
}

/* Toast to ten sam DOM i te same wymiary — dochodzi tylko cień nakładki. */
.sp-punkty-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	max-width: 420px;
	box-shadow: 0 12px 36px rgba(14, 42, 31, .14);
}

.sp-punkty-message:empty { display: none; }
.sp-punkty-message { margin-top: 16px; }

/* --- Moje konto: nagłówek salda ----------------------------------------- */

.sp-punkty-account {
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--sp-punkty-ink, #0E2A1F);
}

/*
 * Jedna dominująca nieregularność modułu: rozdarty brzeg zielonego pola
 * salda. Maski leżą na pseudoelementach, tekst i fokus są poza maską.
 */
/*
 * Siatka zamiast zawijanego flexa: przy wąskiej kolumnie „Mojego konta”
 * rycina spadała do własnego wiersza i zostawiała w zielonym polu pustkę.
 * Trzy kolumny — saldo, wartość rabatu, rycina — układają się przewidywalnie
 * niezależnie od szerokości kolumny motywu, a gdy wymiana punktów jest
 * wyłączona, środkowa kolumna po prostu znika.
 */
.sp-punkty-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 28px 36px;
	margin: 28px 0 48px;
	padding: 44px 40px;
	background: var(--sp-punkty-ink, #0E2A1F);
	color: var(--sp-punkty-paper, #F7F4ED);
	isolation: isolate;
}

.sp-punkty-hero::before,
.sp-punkty-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 26px;
	background: var(--sp-punkty-ink, #0E2A1F);
	z-index: -1;
	pointer-events: none;
	-webkit-mask: url(../img/tear-a.svg) 0 0 / 100% 100% no-repeat;
	mask: url(../img/tear-a.svg) 0 0 / 100% 100% no-repeat;
}

.sp-punkty-hero::before { top: -25px; }

.sp-punkty-hero::after {
	bottom: -25px;
	transform: rotate(180deg);
	-webkit-mask-image: url(../img/tear-b.svg);
	mask-image: url(../img/tear-b.svg);
}

.sp-punkty-hero__main { grid-column: 1; min-width: 0; }

.sp-punkty-hero__label {
	display: block;
	margin-bottom: 12px;
	color: var(--sp-punkty-gold-light, #CBB98E);
	font-size: 14px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.sp-punkty-hero__points {
	display: block;
	font-size: clamp(56px, 9vw, 76px);
	line-height: 1.05;
	letter-spacing: -1.4px;
}

.sp-punkty-hero__unit {
	display: block;
	margin-top: 8px;
	font-size: 24px;
	font-style: italic;
	color: var(--sp-punkty-gold-light, #CBB98E);
}

.sp-punkty-hero__value {
	grid-column: 2;
	max-width: 260px;
	padding-left: 36px;
	border-left: 1px solid rgba(203, 185, 142, .45);
}

.sp-punkty-hero__value strong {
	display: block;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.15;
}

.sp-punkty-hero__value small {
	display: block;
	margin-top: 8px;
	color: var(--sp-punkty-gold-light, #CBB98E);
	font-size: 15px;
}

.sp-punkty-hero__art { grid-column: 3; justify-self: end; }

/*
 * Stopka salda: statystyki wracają do zielonego pola, żeby nie zostawało
 * puste. Ten sam wzorzec co `.hero-foot` w karcie stylu — wersaliki
 * rozdzielone cienką kreską, bez dodatkowych kart.
 */
.sp-punkty-hero .sp-punkty-stats {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 8px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(203, 185, 142, .45);
}

.sp-punkty-hero .sp-punkty-stats > div {
	flex: 1 1 auto;
	padding: 0 28px;
	border: 0;
	border-left: 1px solid rgba(203, 185, 142, .45);
}

.sp-punkty-hero .sp-punkty-stats > div:first-child { padding-left: 0; border-left: 0; }

.sp-punkty-hero .sp-punkty-stats span { color: var(--sp-punkty-gold-light, #CBB98E); }

.sp-punkty-hero .sp-punkty-stats strong {
	margin-top: 6px;
	color: var(--sp-punkty-paper, #F7F4ED);
	font-size: 30px;
}


/* --- Statystyki ---------------------------------------------------------- */

.sp-punkty-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.sp-punkty-stats > div {
	padding-top: 16px;
	border-top: 1px solid var(--sp-punkty-gold, #9E895E);
}

.sp-punkty-stats span {
	display: block;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.sp-punkty-stats strong {
	display: block;
	margin-top: 8px;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
}

/* --- Sekcje panelu ------------------------------------------------------- */

.sp-punkty-section { margin: 48px 0; }

.sp-punkty-section > h3 {
	margin: 0 0 8px;
	font-family: var(--sp-punkty-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}

.sp-punkty-section > h3 + .sp-punkty-section__lead {
	margin: 0 0 24px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 17px;
	max-width: 60ch;
}

/* --- Zasady zdobywania punktów: siatka 3×2 z rycinami -------------------- */

.sp-punkty-rules {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

/* Pełna ramka 1 px złotem z czterech stron, narożniki 2 px, rycina w polu. */
.sp-punkty-rule {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 24px;
	background: var(--sp-punkty-surface, #FFFFFF);
	border: 1px solid var(--sp-punkty-gold, #9E895E);
	text-align: center;
	border-radius: var(--sp-punkty-radius, 2px);
	transition: transform var(--sp-punkty-hover) var(--sp-punkty-ease), background var(--sp-punkty-hover);
}

@media (hover: hover) and (pointer: fine) {
	.sp-punkty-rule:hover { transform: translateY(-3px); background: #FFFDF8; }
}

.sp-punkty-rule__icon {
	width: 96px;
	height: 96px;
	margin-bottom: 12px;
	object-fit: contain;
}

.sp-punkty-rule__title {
	font-size: 24px;
	line-height: 1.2;
}

.sp-punkty-rule__points {
	color: var(--sp-punkty-action, #735F38);
	font-size: 20px;
	white-space: nowrap;
}

/*
 * Opis dosuwamy do dołu karty: tytuły mają różną liczbę wierszy, a dzięki
 * temu opisy w całym rzędzie zaczynają się na jednej linii i rząd czyta się
 * jak jeden układ, nie sześć osobnych kart.
 */
.sp-punkty-rule__text {
	margin-top: auto;
	padding-top: 8px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 16px;
	line-height: 1.5;
}

/* --- Polecenia ----------------------------------------------------------- */

.sp-punkty-referrals__intro { margin: 0 0 20px; color: var(--sp-punkty-muted, #6F6A63); max-width: 60ch; }

.sp-punkty-copy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.sp-punkty-copy__input {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 48px;
	padding: 10px 12px;
	background: #FFFDF8;
	border: 1px solid var(--sp-punkty-field-line, #938979);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
}

.sp-punkty-referrals__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.sp-punkty-referrals__stats li { padding-top: 16px; border-top: 1px solid var(--sp-punkty-line, #D8D1C4); }

.sp-punkty-referrals__stats strong {
	display: block;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--sp-punkty-action, #735F38);
}

.sp-punkty-referrals__stats span {
	display: block;
	margin-top: 4px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
}

/* --- Pupile -------------------------------------------------------------- */

.sp-punkty-pets__intro { margin: 0 0 20px; color: var(--sp-punkty-muted, #6F6A63); max-width: 60ch; }
.sp-punkty-pets__intro strong { color: var(--sp-punkty-action, #735F38); font-weight: 400; }

.sp-punkty-pets__list { margin: 0 0 28px; padding: 0; list-style: none; }

.sp-punkty-pet {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
}

.sp-punkty-pet:first-child { border-top: 1px solid var(--sp-punkty-line, #D8D1C4); }
.sp-punkty-pet__info { flex: 1 1 200px; min-width: 0; }

.sp-punkty-pet__info strong {
	display: block;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
}

.sp-punkty-pet__info span {
	display: block;
	margin-top: 2px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 16px;
}

.sp-punkty-pet__delete { margin: 0; }

/* Formularz: etykieta nad polem, min. 48 px, jedna wyraźna krawędź. */
.sp-punkty-pet-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	padding: 28px 24px;
	background: var(--sp-punkty-soft, #F0ECE3);
	border-radius: var(--sp-punkty-radius, 2px);
}

.sp-punkty-field { margin: 0; }

.sp-punkty-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
}

.sp-punkty-field abbr { color: var(--sp-punkty-action, #735F38); text-decoration: none; }

.sp-punkty-field input,
.sp-punkty-field select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	background: #FFFDF8;
	border: 1px solid var(--sp-punkty-field-line, #938979);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
	accent-color: var(--sp-punkty-action, #735F38);
}

.sp-punkty-field input:focus-visible,
.sp-punkty-field select:focus-visible {
	outline: 1px solid var(--sp-punkty-action, #735F38);
	outline-offset: -1px;
	border-color: var(--sp-punkty-action, #735F38);
}

.sp-punkty-field small { display: block; margin-top: 6px; color: var(--sp-punkty-muted, #6F6A63); font-size: 15px; }
.sp-punkty-field--submit { display: flex; align-items: flex-end; }

/* --- Filtry historii ----------------------------------------------------- */

/*
 * Wybór opisany tekstem i stanem, nie samym kolorem. Ślad pod aktywną
 * pozycją rysowany jak długopisem — dopasowuje się do każdej linii tekstu.
 */
.sp-punkty-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
}

.sp-punkty-filter {
	display: inline;
	padding-bottom: 5px;
	color: var(--sp-punkty-ink, #0E2A1F);
	font-size: 17px;
	text-decoration: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C57 3.4 126 5.1 199 3.5' fill='none' stroke='%23735F38' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 0% 6px;
	transition: background-size 420ms var(--sp-punkty-ease), color var(--sp-punkty-fast);
}

.sp-punkty-filter.is-active { background-size: 100% 6px; color: var(--sp-punkty-action, #735F38); }

@media (hover: hover) and (pointer: fine) {
	.sp-punkty-filter:hover { background-size: 100% 6px; }
}

@media (hover: none) {
	.sp-punkty-filter { background-size: 100% 6px; opacity: .72; }
	.sp-punkty-filter.is-active { opacity: 1; }
}

/* --- Tabela historii ----------------------------------------------------- */

.sp-punkty-table-wrap { overflow-x: auto; }

.sp-punkty-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
	font-style: normal;
}

.sp-punkty-table caption {
	margin-bottom: 12px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
	text-align: left;
}

.sp-punkty-table thead th {
	padding: 14px 12px;
	background: #FAF8F4;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}

.sp-punkty-table tbody th,
.sp-punkty-table tbody td {
	padding: 16px 12px;
	background: transparent;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
	vertical-align: top;
}

/* Hover obejmuje cały wiersz razem z nagłówkiem wiersza. */
.sp-punkty-table tbody tr:hover { background: #FAF8F4; }

.sp-punkty-table__num { text-align: right; white-space: nowrap; }

.sp-punkty-cell--date { color: var(--sp-punkty-muted, #6F6A63); white-space: nowrap; }
.sp-punkty-cell--expiry { color: var(--sp-punkty-muted, #6F6A63); white-space: nowrap; }

.sp-punkty-desc { display: block; }
.sp-punkty-type { display: block; }

.sp-punkty-note {
	display: block;
	margin-top: 2px;
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 15px;
}

.sp-punkty-order-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--sp-punkty-action, #735F38);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.sp-punkty-plus { color: var(--sp-punkty-plus, #36533F); font-weight: 400; }
.sp-punkty-minus { color: var(--sp-punkty-minus, #8A3B32); font-weight: 400; }

/* Wąski ekran: tabela zmienia się w listę opisanych par. */
@media (max-width: 600px) {
	.sp-punkty-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sp-punkty-table tbody tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4); }
	.sp-punkty-table tbody td { display: flex; gap: 16px; justify-content: space-between; padding: 4px 0; border: 0; }
	.sp-punkty-table tbody td::before { content: attr(data-label); color: var(--sp-punkty-muted, #6F6A63); font-size: 15px; }
	.sp-punkty-table__num { text-align: right; }
}

/* --- Paginacja ----------------------------------------------------------- */

.sp-punkty-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 24px;
	line-height: 1;
}

.sp-punkty-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-action, #735F38);
	font-size: 17px;
	text-decoration: none;
}

.sp-punkty-pagination .page-numbers.current {
	background: var(--sp-punkty-soft, #F0ECE3);
	border-color: var(--sp-punkty-line, #D8D1C4);
	color: var(--sp-punkty-ink, #0E2A1F);
}

.sp-punkty-pagination a.page-numbers:hover { background: #FAF8F4; border-color: var(--sp-punkty-line, #D8D1C4); }

/* --- Stany puste, ładowanie --------------------------------------------- */

.sp-punkty-empty {
	margin: 0;
	padding: 28px 24px;
	background: var(--sp-punkty-soft, #F0ECE3);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-muted, #6F6A63);
	font-size: 17px;
}

.sp-punkty-empty em { color: var(--sp-punkty-ink, #0E2A1F); }

/* Szkielet zachowuje geometrię i delikatnie pulsuje przez 2 s. */
.sp-punkty-skeleton > span {
	display: block;
	height: 16px;
	margin-bottom: 12px;
	background: var(--sp-punkty-soft, #F0ECE3);
	border-radius: var(--sp-punkty-radius, 2px);
	animation: sp-punkty-pulse 2s ease-in-out infinite;
}

.sp-punkty-skeleton > span:nth-child(2) { width: 78%; }
.sp-punkty-skeleton > span:nth-child(3) { width: 54%; }

@keyframes sp-punkty-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* --- Regulamin (details) ------------------------------------------------- */

/*
 * Kolor hover, focus-within i rozwinięcia dostaje całe `details`;
 * samo `summary` pozostaje przezroczyste, żeby nie powstał odcięty pasek.
 */
.sp-punkty-terms {
	margin: 48px 0 0;
	padding: 20px 24px;
	border: 1px solid var(--sp-punkty-line, #D8D1C4);
	border-radius: var(--sp-punkty-radius, 2px);
	transition: background var(--sp-punkty-hover);
}

.sp-punkty-terms:hover,
.sp-punkty-terms:focus-within,
.sp-punkty-terms[open] { background: var(--sp-punkty-soft, #F0ECE3); }

.sp-punkty-terms__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	font-size: 22px;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

.sp-punkty-terms__summary::-webkit-details-marker { display: none; }

.sp-punkty-terms__summary::after {
	content: '';
	width: 20px;
	height: 20px;
	margin-left: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--sp-punkty-hover) var(--sp-punkty-ease);
}

.sp-punkty-terms[open] .sp-punkty-terms__summary::after { transform: rotate(180deg); }

.sp-punkty-terms__body {
	margin-top: 16px;
	background: transparent;
	color: var(--sp-punkty-ink, #0E2A1F);
	font-size: 17px;
	line-height: 1.55;
}

.sp-punkty-terms__body ul { margin: 12px 0; padding-left: 20px; }
.sp-punkty-terms__body li { margin-bottom: 8px; }
.sp-punkty-terms__body li::marker { color: var(--sp-punkty-gold, #9E895E); }

/* --- Podziękowanie za zamówienie ---------------------------------------- */

.sp-punkty-thankyou {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin: 32px 0;
	padding: 28px 24px;
	background: var(--sp-punkty-surface, #FFFFFF);
	border: 1px solid var(--sp-punkty-gold, #9E895E);
	border-radius: var(--sp-punkty-radius, 2px);
	font-family: var(--sp-punkty-serif);
	color: var(--sp-punkty-ink, #0E2A1F);
}

.sp-punkty-thankyou__text { flex: 1 1 260px; min-width: 0; }

.sp-punkty-thankyou__text h2,
.sp-punkty-thankyou__text h3 {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
}

.sp-punkty-thankyou__text p { margin: 0; color: var(--sp-punkty-muted, #6F6A63); font-size: 17px; }

.sp-punkty-thankyou__list { margin: 16px 0 0; padding: 0; list-style: none; }

.sp-punkty-thankyou__list li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--sp-punkty-line, #D8D1C4);
	font-size: 17px;
}

.sp-punkty-thankyou__list li:last-child { border-bottom: 0; }

.sp-punkty-thankyou__value {
	flex: 0 0 auto;
	min-width: 96px;
	color: var(--sp-punkty-plus, #36533F);
	font-size: 21px;
}

.sp-punkty-thankyou__value--used { color: var(--sp-punkty-minus, #8A3B32); }

.sp-punkty-thankyou__link {
	display: inline-block;
	margin-top: 16px;
	color: var(--sp-punkty-action, #735F38);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* --- Shortcode: drobne elementy ----------------------------------------- */

.sp-punkty-inline { color: var(--sp-punkty-action, #735F38); font-family: var(--sp-punkty-serif); white-space: nowrap; }

.sp-punkty-login-notice {
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--sp-punkty-notice-bg, #FBF9F5);
	border: 1px solid var(--sp-punkty-line, #D8D1C4);
	border-left: 2px solid var(--sp-punkty-action, #735F38);
	border-radius: var(--sp-punkty-radius, 2px);
	font-family: var(--sp-punkty-serif);
	font-size: 17px;
}

/* --- Telefon ------------------------------------------------------------- */

/*
 * Rycina zostaje przy saldzie tak długo, jak się mieści — schodzi w dół
 * dopiero sama zapowiedź naliczenia, i to przy naprawdę wąskiej kolumnie.
 * Wcześniejszy próg 480 px rozbijał nagłówek również tam, gdzie miejsca
 * było dosyć.
 */
@container sp-punkty-panel (max-width: 420px) {
	.sp-punkty-panel__head { flex-wrap: wrap; }

	.sp-punkty-panel__earn {
		flex: 1 0 100%;
		margin-left: 0;
		padding-top: 12px;
		text-align: left;
	}
}

@container sp-punkty-panel (max-width: 260px) {
	.sp-punkty-panel__head { flex-direction: column; }
}

@media (max-width: 980px) {
	.sp-punkty-rules { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 850px) {
	.sp-punkty-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 28px; gap: 24px 28px; }
	.sp-punkty-hero__value { grid-column: 1; max-width: none; padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid rgba(203, 185, 142, .45); }
	.sp-punkty-hero__art { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.sp-punkty-hero .sp-punkty-stats > div { padding: 0 20px; }
}

@media (max-width: 600px) {
	.sp-punkty-rules { grid-template-columns: 1fr; }
	.sp-punkty-hero { padding: 28px 20px; }
	.sp-punkty-hero { grid-template-columns: minmax(0, 1fr); }
	.sp-punkty-hero__value { grid-column: 1; }
	.sp-punkty-hero__art { grid-column: 1; grid-row: auto; justify-self: center; }
	.sp-punkty-hero .sp-punkty-stats { gap: 16px 0; }
	.sp-punkty-hero .sp-punkty-stats > div { flex: 1 1 100%; padding: 0; border-left: 0; }
	.sp-punkty-hero .sp-punkty-stats strong { font-size: 26px; }
	.sp-punkty-hero::before, .sp-punkty-hero::after { height: 18px; }
	.sp-punkty-hero::before { top: -17px; }
	.sp-punkty-hero::after { bottom: -17px; }
	.sp-punkty-panel, .sp-punkty-thankyou, .sp-punkty-pet-form { padding: 20px; }
	.sp-punkty-notice { padding: 16px; gap: 11px; }
	.sp-punkty-stats strong { font-size: 34px; }
	.sp-punkty-section > h3 { font-size: 26px; }
}

/* --- Ograniczenie ruchu -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sp-punkty-account *,
	.sp-punkty-panel *,
	.sp-punkty-badge * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.sp-punkty-rule:hover { transform: none; }
	.sp-punkty-filter { transition: none; }
}

/* --- Dynamiczna odpowiedź panelu koszyka -------------------------------- */

/*
 * Skrypt wstawia do `.sp-punkty-message` sam tekst i klasę stanu, dlatego
 * ikona jest tu pseudoelementem — komunikat trzyma wspólną receptrę
 * (neutralne tło, ramka 1 px, lewa krawędź 2 px w kolorze znaczenia)
 * bez potrzeby budowania dodatkowego znacznika w JS.
 */
.sp-punkty-message.is-ok,
.sp-punkty-message.is-error {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 16px;
	padding: 18px 20px;
	background: var(--sp-punkty-notice-bg, #FBF9F5);
	border: 1px solid var(--sp-punkty-line, #D8D1C4);
	border-left: 2px solid var(--tone);
	border-radius: var(--sp-punkty-radius, 2px);
	color: var(--sp-punkty-ink, #0E2A1F);
	font-size: 17px;
	line-height: 1.45;
}

.sp-punkty-message.is-ok { --tone: var(--sp-punkty-plus, #36533F); }
.sp-punkty-message.is-error { --tone: var(--sp-punkty-minus, #8A3B32); }

.sp-punkty-message.is-ok::before,
.sp-punkty-message.is-error::before {
	content: '';
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: var(--tone);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.sp-punkty-message.is-ok {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.sp-punkty-message.is-error {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}

/* --- Przyciski motywu użyte przez wtyczkę ------------------------------- */

/*
 * Motyw nadaje `.button` własne wypełnienie i wersaliki; w obrębie modułu
 * przejmujemy je z powrotem, żeby akcja punktowa wyglądała tak samo
 * niezależnie od miejsca w sklepie.
 */
.sp-punkty-panel .button,
.sp-punkty-pets .button,
.sp-punkty-copy__button,
.sp-punkty-panel__cta {
	box-shadow: none;
	text-shadow: none;
}

.sp-punkty-panel__cta { flex: 0 0 auto; }

/* Akcja zakupowa w koszyku pozostaje jedynym mocnym przyciskiem panelu. */
.sp-punkty-panel .sp-punkty-apply { background: var(--sp-punkty-ink, #0E2A1F); color: #F7F4ED; }

/* ======================================================================== */
/* Zgodność z motywem                                                       */
/* ======================================================================== */

/*
 * Arkusz wtyczki wczytuje się przed `flatsome.css` i przed blokiem inline
 * z Kreatora motywu, więc przy równej specyficzności wygrywa motyw — to on
 * malował przycisk wysyłki na złoto wersalikami (`.button[type="submit"]`),
 * dawał polom tekstowym szarą ramkę (`input[type="text"]`), pochylał
 * nagłówki i barwił kwotę WooCommerce na czarno (`span.amount`).
 *
 * Poniżej odzyskujemy wygląd modułu, podnosząc specyficzność zakresem
 * modułu i powtórzoną klasą. Świadomie bez `!important`: dzięki temu
 * motyw potomny albo kolejna reguła nadal mogą coś nadpisać.
 */

/* --- Nagłówki: motyw pochyla wszystkie h1–h6 ---------------------------- */

.sp-punkty-account .sp-punkty-section > h3,
.sp-punkty-thankyou .sp-punkty-thankyou__text > h2,
.sp-punkty-thankyou .sp-punkty-thankyou__text > h3 {
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
}

/* --- Kwoty WooCommerce -------------------------------------------------- */

/*
 * `wc_price()` zwraca <span class="amount">, któremu motyw sklepu nadaje
 * własny ciemny kolor. Wewnątrz modułu kwota ma dziedziczyć kolor po
 * powierzchni, na której leży — inaczej na zieleni znika.
 */
.sp-punkty-account .amount,
.sp-punkty-panel .amount,
.sp-punkty-badge .amount,
.sp-punkty-thankyou .amount,
.sp-punkty-notice .amount {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* --- Tabela: motyw ustawia wersaliki na każdym `th` --------------------- */

.sp-punkty-account .sp-punkty-table thead th,
.sp-punkty-account .sp-punkty-table tbody th {
	text-transform: none;
	letter-spacing: 0;
	font-style: normal;
}

/* --- Pola formularza ---------------------------------------------------- */

.sp-punkty-account .sp-punkty-field input,
.sp-punkty-account .sp-punkty-field select,
.sp-punkty-account .sp-punkty-copy__input,
.sp-punkty-panel .sp-punkty-input,
.sp-punkty-account .sp-punkty-input {
	width: auto;
	min-height: 48px;
	height: auto;
	padding: 10px 12px;
	background-color: #FFFDF8;
	border: 1px solid var(--sp-punkty-field-line, #938979);
	border-radius: var(--sp-punkty-radius, 2px);
	box-shadow: none;
	color: var(--sp-punkty-ink, #0E2A1F);
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
}

.sp-punkty-account .sp-punkty-field input:focus,
.sp-punkty-account .sp-punkty-copy__input:focus,
.sp-punkty-panel .sp-punkty-input:focus {
	box-shadow: none;
	border-color: var(--sp-punkty-action, #735F38);
}

/*
 * Motyw nadaje polom `width: 100%`, przez co pole liczby rozpychało się na
 * cały rząd i spychało przyciski do kolejnych wierszy. Szerokość wraca do
 * sterowania flexem; pola formularza pupila i link polecający nadal
 * wypełniają swoją kolumnę.
 */
.sp-punkty-account .sp-punkty-field input,
.sp-punkty-account .sp-punkty-field select,
.sp-punkty-account .sp-punkty-copy__input { width: 100%; }

/* --- Przyciski ---------------------------------------------------------- */

/*
 * Przyciski wtyczki noszą własną klasę `sp-punkty-button` obok motywowej
 * `.button`, żeby zachować obsługę motywu, a wygląd trzymać u siebie.
 * Powtórzona klasa daje trzy jednostki specyficzności — o jedną więcej niż
 * najsilniejsza reguła motywu dla tych elementów.
 */
.sp-punkty-account .sp-punkty-button.sp-punkty-button,
.sp-punkty-panel .sp-punkty-button.sp-punkty-button {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	height: auto;
	padding: 12px 23px;
	background-color: var(--sp-punkty-ink, #0E2A1F);
	border: 1px solid transparent;
	border-radius: var(--sp-punkty-radius, 2px);
	color: #F7F4ED;
	font-family: var(--sp-punkty-serif);
	font-size: 18px;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
}

.sp-punkty-account .sp-punkty-button--support.sp-punkty-button,
.sp-punkty-panel .sp-punkty-button--support.sp-punkty-button {
	background-color: var(--sp-punkty-action, #735F38);
	color: #FFFFFF;
}

/*
 * Wariant pomocniczy musi być wymieniony przy obu korzeniach modułu:
 * panel koszyka nie leży wewnątrz `.sp-punkty-account`, więc sama reguła
 * dla panelu klienta zostawiała „Użyj wszystkich” w kolorze akcji głównej.
 */
.sp-punkty-account .sp-punkty-button--secondary.sp-punkty-button,
.sp-punkty-panel .sp-punkty-button--secondary.sp-punkty-button {
	background-color: transparent;
	border-color: var(--sp-punkty-action, #735F38);
	color: var(--sp-punkty-action, #735F38);
}

.sp-punkty-panel--guest .sp-punkty-button.sp-punkty-button {
	background-color: var(--sp-punkty-paper, #F7F4ED);
	color: var(--sp-punkty-ink, #0E2A1F);
}

@media (hover: hover) and (pointer: fine) {

	.sp-punkty-account .sp-punkty-button.sp-punkty-button:not(:disabled):hover,
	.sp-punkty-panel .sp-punkty-button.sp-punkty-button:not(:disabled):hover {
		background-color: #244D3B;
		color: #F7F4ED;
		box-shadow: inset 0 -2px 0 var(--sp-punkty-gold-light, #CBB98E);
	}

	.sp-punkty-account .sp-punkty-button--secondary.sp-punkty-button:not(:disabled):hover,
	.sp-punkty-panel .sp-punkty-button--secondary.sp-punkty-button:not(:disabled):hover {
		background-color: var(--sp-punkty-action, #735F38);
		color: #FFFFFF;
	}

	.sp-punkty-panel--guest .sp-punkty-button.sp-punkty-button:not(:disabled):hover {
		background-color: #E3DAC8;
		color: var(--sp-punkty-ink, #0E2A1F);
	}
}

.sp-punkty-account .sp-punkty-button.sp-punkty-button:disabled,
.sp-punkty-panel .sp-punkty-button.sp-punkty-button:disabled {
	background-color: var(--sp-punkty-disabled-bg, #E7E1D6);
	border-color: var(--sp-punkty-disabled-line, #B7AFA0);
	color: var(--sp-punkty-disabled-text, #625E55);
	opacity: 1;
	box-shadow: none;
}

/* Przycisk „użyj wszystkich” i przyciski tekstowe też są elementami button. */
.sp-punkty-panel .sp-punkty-max,
.sp-punkty-account .sp-punkty-link-button,
.sp-punkty-panel .sp-punkty-clear {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--sp-punkty-serif);
	font-style: normal;
	box-shadow: none;
	text-shadow: none;
}

.sp-punkty-account .sp-punkty-link-button,
.sp-punkty-panel .sp-punkty-clear {
	min-height: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	color: var(--sp-punkty-action, #735F38);
	font-size: 16px;
}



/*
 * W podsumowaniu koszyka motyw ustawia `.cart_totals .button { min-width:100% }`,
 * przez co każdy z pary przycisków żądał całej szerokości rzędu: „Zastosuj”
 * zajmował go w całości, a „Użyj wszystkich” wypadało poza panel.
 *
 * Reguła motywu ma dwie klasy i wczytuje się później, więc taka sama waga
 * po naszej stronie przegrywa. Powtórzona klasa przycisku daje trzecią
 * jednostkę i rozstrzyga to trwale, bez `!important`.
 */
.sp-punkty-form__actions > .sp-punkty-button.sp-punkty-button {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}