/*
 * SKLEP ZAMKNIĘTY TYMCZASOWO — styl plakietki i komunikatów.
 * Wchodzi tylko, gdy NL_TYMCZASOWO_SKLEP_ZAMKNIETY jest prawdą.
 * Do usunięcia razem z inc/sklep-zamkniety.php.
 */

/* ---------- plakietka „Sklep wkrótce" w menu ---------- */

.nl-shop-zamkniety { position: relative; }

/* To <span>, nie <a> — kursor nie może udawać odnośnika. */
.nl-shop-plakietka {
	cursor: default;
	color: var(--nl-text-muted);
	-webkit-tap-highlight-color: transparent;
}
.nl-shop-plakietka:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 3px;
}

.nl-shop-wkrotce {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(2px);
	z-index: 60;
	background: var(--nl-text);
	color: var(--nl-bg);
	font-family: var(--nl-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 11px;
	border-radius: 3px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

/*
 * Trzy drogi do pokazania, i wszystkie trzy są potrzebne:
 *   :hover          — mysz na desktopie,
 *   :focus-visible  — klawiatura; samo :focus odpala się też na klik myszą,
 *   .is-otwarta     — dotyk, bo na telefonie hover NIE ISTNIEJE i sam :hover
 *                     nie dałby na 390 px nic. Klasę ustawia JS na kliknięcie.
 */
.nl-shop-zamkniety:hover .nl-shop-wkrotce,
.nl-shop-plakietka:focus-visible + .nl-shop-wkrotce,
.nl-shop-zamkniety.is-otwarta .nl-shop-wkrotce {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(6px);
}

/* W menu mobilnym plakietka leży w pionowej liście — pozycjonowanie
   absolutne wychodziłoby za ekran przy 390 px, więc jest w toku tekstu. */
.nl-mobile-menu .nl-shop-wkrotce {
	position: static;
	display: block;
	transform: none;
	margin: 8px 0 0;
	white-space: normal;
	text-align: left;
}
.nl-mobile-menu .nl-shop-zamkniety:hover .nl-shop-wkrotce,
.nl-mobile-menu .nl-shop-plakietka:focus-visible + .nl-shop-wkrotce,
.nl-mobile-menu .nl-shop-zamkniety.is-otwarta .nl-shop-wkrotce {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nl-shop-wkrotce { transition: none; }
}

/* ---------- karta produktu w widgecie: „Wkrótce", nieklikalna ---------- */

.nl-produkt-cart-wkrotce,
span.nl-produkt-cart-wkrotce {
	color: var(--nl-text-muted) !important;
	cursor: default;
}
.nl-produkt-cart-wkrotce:hover,
span.nl-produkt-cart-wkrotce:hover {
	color: var(--nl-text-muted) !important;
	letter-spacing: 0.2em !important;
}

/* ---------- komunikat na /sklep/, karcie produktu, koszyku, zamówieniu ---------- */

.nl-sklep-wkrotce {
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	background: var(--nl-surface);
	border: 1px solid var(--nl-border);
	border-radius: 4px;
	text-align: center;
}
.nl-sklep-wkrotce h2 {
	font-family: var(--nl-serif);
	margin: 0 0 1rem;
}
.nl-sklep-wkrotce p {
	color: var(--nl-text-secondary);
	margin: 0 0 1.25rem;
}
.nl-sklep-wkrotce p:last-child { margin-bottom: 0; }

.nl-sklep-wkrotce-produkt {
	text-align: left;
	margin: 1.5rem 0 0;
	max-width: none;
}

@media (max-width: 600px) {
	.nl-sklep-wkrotce { padding: 1.75rem 1.25rem; }
}