/*
 * Silent Heroes — Sekcja "Naklejki" (coverflow)
 * Ryszard-Ryś gratis do zamówienia. Strona główna sklepu.
 * Zależności: tokens.css (zmienne --sh-*).
 */

.sh-nkl {
	background: var(--sh-white);
	padding: var(--sh-space-20) var(--sh-gutter) var(--sh-space-16);
	overflow: hidden;
}

.sh-nkl-inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* -------- HEAD (tekst + licznik) -------- */
.sh-nkl-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sh-space-8);
}

.sh-nkl-head-text { max-width: 720px; }

/* <br> w tytule: ukryty na desktop (tytuł w jednej linii), widoczny na mobile */
.sh-nkl-br { display: none; }

.sh-nkl-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--sh-fs-xs);
	font-weight: var(--sh-fw-bold);
	letter-spacing: var(--sh-tracking-wider);
	text-transform: uppercase;
	color: var(--sh-red);
	margin-bottom: var(--sh-space-4);
}
.sh-nkl-eyebrow-line {
	width: 28px;
	height: 2px;
	background: var(--sh-red);
	flex: none;
}
.sh-nkl-eyebrow-star { color: var(--sh-black-2); font-size: 0.9em; }

.sh-nkl-title {
	margin: 0;
	font-size: var(--sh-fs-3xl);
	font-weight: var(--sh-fw-bold);
	line-height: var(--sh-lh-tight);
	letter-spacing: var(--sh-tracking-tight);
	color: var(--sh-black);
}
.sh-nkl-title em {
	font-style: normal;
	color: var(--sh-red);
}

.sh-nkl-sub {
	margin: var(--sh-space-4) 0 0;
	font-size: 0.95rem;
	line-height: var(--sh-lh-normal);
	color: var(--sh-muted);
	max-width: 640px;
}

/* -------- STAGE (coverflow) -------- */
.sh-nkl-stage {
	position: relative;
	height: 400px;
	margin-top: var(--sh-space-6);
}

.sh-nkl-track {
	position: absolute;
	inset: 0;
}

.sh-nkl-slide {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 340px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform: translate(-50%, -50%);
	transition: transform .55s var(--sh-ease-out), opacity .45s var(--sh-ease-out), filter .45s var(--sh-ease-out);
	will-change: transform, opacity, filter;
}
.sh-nkl-slide img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}
/* offset>0 = wyszarzone/zanikające sąsiady (ustawiane też inline przez JS jako fallback) */
.sh-nkl-slide:not(.is-active) { cursor: pointer; }
.sh-nkl-slide.is-active {
	cursor: default;
}
.sh-nkl-slide.is-hidden {
	opacity: 0 !important;
	pointer-events: none;
}
.sh-nkl-slide:focus-visible {
	outline: none;
}
.sh-nkl-slide:focus-visible img {
	filter: drop-shadow(0 0 0 3px rgba(204,27,27,.55));
}

/* -------- ARROWS -------- */
.sh-nkl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--sh-radius-full);
	background: var(--sh-white);
	border: 1px solid var(--sh-border);
	box-shadow: var(--sh-shadow);
	color: var(--sh-black);
	cursor: pointer;
	transition: background var(--sh-duration) var(--sh-ease), color var(--sh-duration) var(--sh-ease), border-color var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease);
}
.sh-nkl-arrow svg { width: 22px; height: 22px; }
.sh-nkl-prev { left: 0; }
.sh-nkl-next { right: 0; }
.sh-nkl-arrow:hover {
	background: var(--sh-red);
	border-color: var(--sh-red);
	color: var(--sh-white);
	box-shadow: var(--sh-shadow-md);
}
.sh-nkl-arrow:focus-visible {
	outline: none;
	box-shadow: var(--sh-focus-ring);
}

/* -------- FLOAT (środkowy ryś delikatnie pływa) -------- */
@keyframes sh-nkl-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}
.sh-nkl-slide.is-active img {
	animation: sh-nkl-float 5s ease-in-out infinite;
}

/* -------- FOOTER BAR (pill + note) -------- */
.sh-nkl-footer {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--sh-space-4);
	margin-top: var(--sh-space-6);
	padding-top: var(--sh-space-6);
	border-top: 1px solid var(--sh-border);
}
.sh-nkl-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sh-red);
	color: var(--sh-white);
	font-size: var(--sh-fs-xs);
	font-weight: var(--sh-fw-bold);
	letter-spacing: var(--sh-tracking-wide);
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 5px;
	white-space: nowrap;
}
.sh-nkl-pill-star { font-size: 0.95em; }
.sh-nkl-footer-note {
	font-size: 13px;
	color: var(--sh-muted);
	white-space: nowrap;
}
.sh-nkl-footer-note span[aria-hidden] {
	color: var(--sh-red);
	font-weight: var(--sh-fw-bold);
}

/* dots (pod sceną — w miejscu dawnego podpisu) */
.sh-nkl-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.sh-nkl-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--sh-radius-full);
	background: var(--sh-gray-300);
	cursor: pointer;
	transition: background var(--sh-duration) var(--sh-ease), width var(--sh-duration) var(--sh-ease);
}
.sh-nkl-dot:hover { background: var(--sh-gray-500); }
.sh-nkl-dot.is-active {
	background: var(--sh-red);
	width: 22px;
}
.sh-nkl-dot:focus-visible {
	outline: none;
	box-shadow: var(--sh-focus-ring);
}

/* -------- RESPONSYWNOŚĆ -------- */
@media (max-width: 760px) {
	.sh-nkl { padding: var(--sh-space-16) var(--sh-gutter) var(--sh-space-12); }
	.sh-nkl-stage { height: 320px; }
	.sh-nkl-slide { width: 240px; }
	.sh-nkl-arrow { width: 42px; height: 42px; }
	.sh-nkl-br { display: inline; } /* tytuł znów w 2 liniach na mobile */
	.sh-nkl-footer { justify-content: center; text-align: center; }
	.sh-nkl-eyebrow-extra { display: none; } /* na mobile zostaje samo "Ryszard mocny" */
}

@media (max-width: 420px) {
	.sh-nkl-stage { height: 280px; }
	.sh-nkl-slide { width: 200px; }
	.sh-nkl-footer-note { display: none; }
}

/* Mniej ruchu — wyłącz autoplay/animacje dla preferencji użytkownika */
@media (prefers-reduced-motion: reduce) {
	.sh-nkl-slide { transition: none; }
	.sh-nkl-slide.is-active img { animation: none; }
}

/* =========================================================
   WARIANT: LOGOTYPY JEDNOSTEK (silentheroes.pro)
   Ten sam coverflow, osadzony w sekcji „Wybierz jednostkę"
   — bez własnego tła i paddingu (dziedziczy z sekcji).
   ========================================================= */
.sh-nkl--logos {
	background: transparent;
	padding: 0;
}
.sh-nkl--logos .sh-nkl-stage { height: 340px; }
.sh-nkl--logos .sh-nkl-slide { width: 230px; }
.sh-nkl--logos .sh-nkl-slide.is-active { cursor: pointer; } /* środkowe logo = link do huba */

/* Podpis = nazwa jednostki, klikalny link do huba */
.sh-nkl-caption {
	text-align: center;
	margin-top: var(--sh-space-5);
}
.sh-nkl-caption-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--sh-fs-lg);
	font-weight: var(--sh-fw-bold);
	color: var(--sh-black);
	text-decoration: none;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--sh-red);
	transition: color var(--sh-duration) var(--sh-ease);
}
.sh-nkl-caption-link:hover { color: var(--sh-red); }
.sh-nkl-caption-arrow { color: var(--sh-red); }
.sh-nkl--logos .sh-nkl-dots { margin-top: var(--sh-space-4); }

@media (max-width: 760px) {
	.sh-nkl--logos .sh-nkl-stage { height: 280px; }
	.sh-nkl--logos .sh-nkl-slide { width: 175px; }
}

/* =========================================================
   SELEKTOR NAKLEJKI W KOSZYKU — kompaktowy pasek kafelków
   (#sh-stk-picker). Jednokrotny wybór; tylko gdy produkty fizyczne.
   ========================================================= */
.sh-stk-picker {
	position: relative;
	margin: var(--sh-space-6) 0 var(--sh-space-2);
	padding: 18px;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-lg);
	background: var(--sh-white);
}
.sh-stk-badge {
	position: absolute;
	top: -11px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	background: var(--sh-green);
	color: #fff;
	font-size: 11px;
	font-weight: var(--sh-fw-bold);
	letter-spacing: var(--sh-tracking-wide);
	text-transform: uppercase;
	border-radius: 5px;
}
.sh-stk-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 4px 0 14px;
}
.sh-stk-titlewrap { display: flex; align-items: center; gap: 12px; }
.sh-stk-staricon {
	flex: none;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	background: var(--sh-black);
	color: #fff;
	border-radius: var(--sh-radius-md);
	font-size: 16px;
}
.sh-stk-h { margin: 0; font-size: var(--sh-fs-md); font-weight: var(--sh-fw-bold); color: var(--sh-black); line-height: 1.2; }
.sh-stk-desc { margin: 2px 0 0; font-size: 0.8rem; color: var(--sh-muted); }
.sh-stk-chosen { flex: none; font-size: 0.8rem; color: var(--sh-muted); text-align: right; padding-top: 4px; }
.sh-stk-chosen-name { display: block; color: var(--sh-red); font-weight: var(--sh-fw-bold); font-size: var(--sh-fs-sm); letter-spacing: var(--sh-tracking-wide); text-transform: uppercase; }

/* Pasek przewijany */
.sh-stk-stripwrap { position: relative; }
.sh-stk-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.sh-stk-strip::-webkit-scrollbar { height: 6px; }
.sh-stk-strip::-webkit-scrollbar-thumb { background: var(--sh-gray-300); border-radius: 3px; }

/* Kafelek */
.sh-stk-tile {
	position: relative;
	flex: 0 0 auto;
	width: 92px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	scroll-snap-align: start;
	-webkit-tap-highlight-color: transparent;
}
.sh-stk-tile-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px; height: 92px;
	padding: 6px;
	box-sizing: border-box;
	background: var(--sh-white);
	border: 2px solid var(--sh-border);
	border-radius: var(--sh-radius-md);
	overflow: hidden;
	transition: border-color var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease);
}
.sh-stk-tile-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sh-stk-tile-label {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: var(--sh-fw-semibold);
	line-height: 1.2;
	color: var(--sh-gray-700);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sh-stk-tile:hover .sh-stk-tile-thumb { border-color: var(--sh-gray-400); }
.sh-stk-tile.is-selected .sh-stk-tile-thumb { border-color: var(--sh-red); box-shadow: 0 0 0 1px var(--sh-red); }
.sh-stk-tile.is-selected .sh-stk-tile-label { color: var(--sh-red); }
.sh-stk-tile:focus-visible .sh-stk-tile-thumb { outline: none; box-shadow: var(--sh-focus-ring); }

/* Znacznik wyboru ✓ */
.sh-stk-check {
	position: absolute;
	top: 5px; right: 5px;
	width: 20px; height: 20px;
	display: none;
	place-items: center;
	background: var(--sh-red);
	color: #fff;
	border-radius: var(--sh-radius-full);
	font-size: 12px;
	box-shadow: 0 1px 4px rgba(17,17,17,.25);
}
.sh-stk-tile.is-selected .sh-stk-check { display: grid; }

/* Kafelek „Niespodzianka" (losowa) */
.sh-stk-tile-random {
	flex-direction: column;
	gap: 2px;
	background: var(--sh-black);
	border-style: dashed;
	border-color: var(--sh-gray-400);
}
.sh-stk-tile-random .q { font-size: 30px; font-weight: var(--sh-fw-extra); color: var(--sh-red); line-height: 1; }
.sh-stk-tile-random .t { font-size: 8px; font-weight: var(--sh-fw-bold); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }

/* Strzałki przewijania */
.sh-stk-arrow {
	position: absolute;
	top: 46px;
	z-index: 3;
	width: 32px; height: 32px;
	display: grid; place-items: center;
	background: var(--sh-white);
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-full);
	box-shadow: var(--sh-shadow);
	color: var(--sh-black);
	cursor: pointer;
}
.sh-stk-arrow svg { width: 16px; height: 16px; }
.sh-stk-arrow:hover { border-color: var(--sh-red); color: var(--sh-red); }
.sh-stk-prev { left: -6px; }
.sh-stk-next { right: -6px; }

@media (max-width: 600px) {
	.sh-stk-top { flex-direction: column; gap: 8px; }
	.sh-stk-chosen { text-align: left; }
	.sh-stk-tile, .sh-stk-tile-thumb { width: 84px; }
	.sh-stk-tile-thumb { height: 84px; }
	.sh-stk-arrow { display: none; }
}

/* Potwierdzenie wybranej naklejki (thank-you / podgląd zamówienia) */
.sh-stk-confirm {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
	padding: 16px 18px;
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-lg);
	background: var(--sh-white);
}
.sh-stk-confirm img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.sh-stk-confirm-text strong { display: block; color: var(--sh-black); }
.sh-stk-confirm-text span { font-size: var(--sh-fs-sm); color: var(--sh-muted); }

/* Checkout (WC Blocks): tytuł podsumowania bez zbędnego lewego marginesu WC core */
.wc-block-components-checkout-order-summary__title-text { margin-left: 0 !important; }

/* Wiersz „naklejka gratis" wstrzykiwany do podsumowania zamówienia (Blocks) */
.sh-stk-summary-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--sh-border);
}
.sh-stk-summary-row img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sh-stk-summary-row .sh-stk-summary-text { font-size: var(--sh-fs-sm); line-height: 1.3; }
.sh-stk-summary-row .sh-stk-summary-text strong { display: block; color: var(--sh-black); font-weight: var(--sh-fw-semibold); }
.sh-stk-summary-row .sh-stk-summary-text span { color: var(--sh-muted); }