/*
 * Etap C (Sprint 3.18) + odświeżenie wizualne (Sprint 3.23) - ekran wyboru
 * sposobu odbioru i belka "Sposób odbioru" nad treścią sklepu.
 *
 * Kolory akcentu NIE są wymyślone: reużywamy WPROST zmienne palety motywu
 * Blocksy (--theme-palette-color-*), z których korzystają linki i przyciski
 * sklepu (--theme-link-initial-color = palette-color-1, hover = color-2).
 * Dzięki temu podświetlenia i ikony wtyczki mają dokładnie ten sam kolor co
 * reszta sklepu i podążą za paletą, gdyby motyw ją zmienił. Wartości hex to
 * tylko fallback (bieżąca paleta), gdyby zmienna nie była dostępna.
 *
 * Wszystko tu jest czysto wizualne (CSS/markup) - żadnej logiki ani JS. Ekran
 * renderuje się między get_header()/get_footer(), więc dziedziczy typografię i
 * tło motywu; te reguły dokładają wyłącznie układ własnych elementów wtyczki.
 */

.dwo-aso-pickup-screen,
.dwo-aso-pickup-bar,
.dwo-aso-sales-closed-banner,
.dwo-aso-checkout-notice,
.dwo-aso-product-pickup-hint {
	--dwo-accent: var(--theme-palette-color-1, #cf992a);
	--dwo-accent-hover: var(--theme-palette-color-2, #cf6e29);
	--dwo-ink: var(--theme-palette-color-3, #3a4f66);
	--dwo-ink-strong: var(--theme-palette-color-4, #192a3d);
	--dwo-border: var(--theme-palette-color-5, #e1e8ed);
	--dwo-surface: var(--theme-palette-color-6, #f2f5f7);
	/* Delikatny wash akcentu na tło wybranej opcji (fallback = jasny odcień
	   bieżącego złota); color-mix wspierany przez wszystkie evergreen. */
	--dwo-accent-wash: #fbf3e3;
	--dwo-accent-wash: color-mix(in srgb, var(--dwo-accent) 12%, #fff);
}

/* =========================================================
 * CZĘŚĆ A - Ekran wyboru jako wyśrodkowana karta (popup) na stonowanym tle
 * ========================================================= */

.dwo-aso-pickup-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78vh;
	padding: 48px 16px;
	/* Stonowane tło - karta czyta się jak warstwa "nad czymś". */
	background: radial-gradient(120% 90% at 50% 0%, var(--dwo-surface) 0%, #dfe5ec 100%);
	color: var(--dwo-ink-strong);
}

.dwo-aso-pickup-screen__inner {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 30px 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 44px rgba(20, 30, 45, 0.14), 0 2px 8px rgba(20, 30, 45, 0.06);
}

.dwo-aso-pickup-screen__title {
	margin: 0 0 6px;
	font-size: 27px;
	line-height: 1.2;
	color: var(--dwo-ink-strong);
}

.dwo-aso-pickup-screen__lead {
	margin: 0 0 22px;
	color: var(--dwo-ink);
	opacity: 0.85;
	font-size: 15px;
	line-height: 1.5;
}

/* --- Grupy opcji --- */
.dwo-aso-pickup-group {
	margin: 0 0 20px;
	padding: 0;
	border: none;
}

.dwo-aso-pickup-group__legend {
	padding: 0;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dwo-ink);
	opacity: 0.65;
}

/* --- Opcja jako karta z ikoną i znacznikiem wyboru --- */
.dwo-aso-pickup-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px;
	padding: 15px 16px;
	background: #fff;
	border: 1.5px solid var(--dwo-border);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dwo-aso-pickup-points .dwo-aso-pickup-option {
	margin: 0;
}

.dwo-aso-pickup-option:hover {
	border-color: #c4ccd6;
	box-shadow: 0 4px 14px rgba(20, 30, 45, 0.07);
}

/* Natywny radio ukryty wizualnie, ale wciąż dostępny (fokus/klawiatura). */
.dwo-aso-pickup-option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

/* Ikona trybu w kafelku (pierwsza ikona w opcji; NIE znacznik wyboru). */
.dwo-aso-pickup-option > .dwo-aso-pickup-icon:not(.dwo-aso-pickup-icon--check) {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: var(--dwo-surface);
	color: var(--dwo-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dwo-aso-pickup-option > .dwo-aso-pickup-icon:not(.dwo-aso-pickup-icon--check) svg {
	width: 24px;
	height: 24px;
}

.dwo-aso-pickup-option__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.dwo-aso-pickup-option__name {
	font-weight: 600;
	font-size: 16px;
	color: var(--dwo-ink-strong);
}

.dwo-aso-pickup-option__meta {
	font-size: 13px;
	color: var(--dwo-ink);
	opacity: 0.75;
}

/* Znacznik wyboru (ptaszek) - domyślnie ukryty, miejsce zarezerwowane, żeby
   karta nie skakała. Pokazywany, gdy radio zaznaczone (sibling, bez :has -
   działa w każdej przeglądarce). */
.dwo-aso-pickup-icon--check {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dwo-accent);
	color: #fff;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.dwo-aso-pickup-icon--check svg {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

.dwo-aso-pickup-option input[type="radio"]:checked ~ .dwo-aso-pickup-icon--check {
	opacity: 1;
	transform: scale(1);
}

/* Wyróżnienie zaznaczonej opcji - akcent na tle + obramowaniu (progresywne
   ulepszenie przez :has; sam ptaszek i tak działa bez :has). */
.dwo-aso-pickup-option:has(input[type="radio"]:checked) {
	border-color: var(--dwo-accent);
	background: var(--dwo-accent-wash);
}

.dwo-aso-pickup-option:has(input[type="radio"]:checked) > .dwo-aso-pickup-icon:not(.dwo-aso-pickup-icon--check) {
	background: var(--dwo-accent);
	color: #fff;
}

/* Widoczny pierścień fokusu klawiatury na całej karcie. */
.dwo-aso-pickup-option:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--dwo-accent);
	outline-offset: 2px;
}

/* Sprint 3.58: „Już wkrótce" - punkt odbioru albo dowóz widoczny, ale wyszarzony
   i NIEWYBIERALNY (radio disabled). Jeden wspólny modyfikator dla obu przypadków.
   Kolory z palety motywu (--dwo-*), spójnie z resztą komponentu. */
.dwo-aso-pickup-option--coming-soon {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Bez podświetlenia akcentem przy najechaniu - i tak nie da się wybrać. */
.dwo-aso-pickup-option--coming-soon:hover {
	border-color: var(--dwo-border);
	box-shadow: none;
}

/* Etykieta „Już wkrótce" ma być czytelna mimo wyszarzenia całej karty. */
.dwo-aso-pickup-option__meta--coming-soon {
	color: var(--dwo-accent-hover);
	font-weight: 600;
	opacity: 1;
}

/* "Piekarnia Dwóch Ojców" - samodzielna, wyróżniona karta domyślna na górze
   (Sprint 3.23.2), pełnej szerokości, poza grupą alternatyw. */
.dwo-aso-pickup-option--main {
	border-style: solid;
	margin-bottom: 18px;
}

/* Grupa alternatyw ("Albo wybierz inny sposób") - lekki odstęp od karty
   domyślnej wyżej. */
.dwo-aso-pickup-group--alt {
	margin-top: 0;
}

/* Punkty odbioru: 1 kolumna na mobile; 2 kolumny na desktopie, gdy jest ich
   ≥2 (klasa --grid dokładana tylko wtedy - patrz render_selection_screen()). */
.dwo-aso-pickup-points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0 0 10px;
}

.dwo-aso-pickup-submit {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 14px 20px;
	background: var(--dwo-accent);
	border: none;
	border-radius: 12px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 6px 18px rgba(207, 153, 42, 0.28);
}

.dwo-aso-pickup-submit:hover,
.dwo-aso-pickup-submit:focus {
	background: var(--dwo-accent-hover);
	color: #fff;
}

@media (min-width: 600px) {
	.dwo-aso-pickup-screen__inner {
		padding: 40px 40px 34px;
	}

	.dwo-aso-pickup-screen__title {
		font-size: 30px;
	}

	/* Flexbox zamiast CSS Grid (Sprint 3.23.3) dla wspólnej siatki alternatyw.
	   Powód: przy niepełnym ostatnim rzędzie flex-grow rozciąga elementy tego
	   rzędu, żeby wypełnić szerokość, zamiast zostawiać wąską „sierotkę" obok
	   pustego miejsca (czego grid auto-fit nie robi). Bazowa szerokość kolumny
	   270px (typowy adres z kodem pocztowym mieści się w 1-2 liniach, nie 3),
	   ograniczona do 340px, żeby pojedyncza karta nie rozciągała się na całą
	   szerokość. Mobile (<600px) zostaje 1-kolumnowym gridem z reguły bazowej. */
	.dwo-aso-pickup-points--grid {
		display: flex;
		flex-wrap: wrap;
	}

	.dwo-aso-pickup-points--grid .dwo-aso-pickup-option {
		flex: 1 1 270px;
		max-width: 340px;
	}
}

/* Szersza karta na dużych ekranach (Sprint 3.23.1) - więcej miejsca na treść,
   mniej zawijania i scrolla; poniżej (tablet 560px, mobile pełna szerokość)
   bez zmian. */
@media (min-width: 900px) {
	.dwo-aso-pickup-screen__inner {
		max-width: 740px;
	}
}

/* Bardzo szerokie ekrany (Sprint 3.23.2, część 4): jeszcze szersza karta, żeby
   wspólna siatka alternatyw (auto-fit) rozłożyła więcej kart w jednym rzędzie
   (np. 3 punkty + dowóz = 4 kafelki obok siebie), bez dodatkowej reguły na
   liczbę kolumn. */
@media (min-width: 1200px) {
	.dwo-aso-pickup-screen__inner {
		max-width: 960px;
	}
}

/* =========================================================
 * CZĘŚĆ B - Belka "Sposób odbioru"
 * ========================================================= */

.dwo-aso-pickup-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	/* margin auto po bokach (Sprint 3.28): na koszyku/checkoucie pasek nie ma
	   ustawionej szerokości, więc auto = 0 (bez zmian); wariant --shop niżej
	   dostaje szerokość i wtedy auto go wyśrodkowuje.
	   Sprint 3.35: 20px OD GÓRY (nie tylko od dołu), żeby pasek nie stykał się z
	   nagłówkiem/menu nad nim. */
	margin: 20px auto 20px;
	padding: 9px 14px;
	border: 1px solid var(--dwo-border);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: var(--dwo-ink-strong);
}

/* Sprint 3.38: placeholder paska „Sposób odbioru" na stronach sklepu. Strona
   jest cache'owana z PUSTYM #dwo-aso-pickup-bar, a treść wstawia JS zaraz po
   starcie. Żeby nie było skoku układu (CLS), slot rezerwuje odstępy i wysokość
   zbliżoną do docelowego paska. Odstęp 20px góra/dół przenosimy na slot i
   zerujemy go na wewnętrznym pasku (tylko w slocie - na koszyku/checkoucie pasek
   renderuje się bez slota i zachowuje własny margines).
   UWAGA: min-height to wartość PRZYBLIŻONA (pasek pełny z adresem/godzinami bywa
   2-3-liniowy) - nie zmierzona na żywo (przeglądarka niedostępna w tym
   środowisku); do ewentualnego dostrojenia na stagingu. */
.dwo-aso-pickup-bar-slot {
	margin: 20px auto;
	min-height: 64px;
}

/* Realnie brak treści (np. admin bez wyboru / rzadki rozjazd) - nie zostawiaj
   pustego, zarezerwowanego miejsca. Klasę is-empty ustawia JS. */
.dwo-aso-pickup-bar-slot.is-empty {
	margin: 0;
	min-height: 0;
}

/* Wewnętrzny pasek w slocie nie dubluje pionowego marginesu (jest na slocie);
   boczne auto zostaje (centrowanie wariantu --shop). */
#dwo-aso-pickup-bar .dwo-aso-pickup-bar {
	margin-top: 0;
	margin-bottom: 0;
}

/* Placeholder karty „Odbiór" na produkcie: do czasu doładowania niewidoczny
   (bez tła/ramki), ale z zarezerwowaną wysokością (CLS). Po doładowaniu treści
   klasa is-loaded przywraca wygląd karty (.dwo-aso-product-pickup-hint); gdy
   realnie brak treści - is-empty chowa slot. */
.dwo-aso-product-pickup-hint--slot:not(.is-loaded) {
	background: none;
	border-color: transparent;
	min-height: 45px;
}

.dwo-aso-product-pickup-hint--slot.is-empty {
	display: none;
}

/* Sprint 3.28: pasek na stronach sklepu (wariant --shop) i baner są
   wstrzykiwane hookiem woocommerce_before_main_content POZA kontener szerokości
   motywu Blocksy, więc rozciągały się od krawędzi do krawędzi okna. Dopasowujemy
   je do TEJ SAMEJ szerokości i wyśrodkowania co treść sklepu, reużywając
   DOKŁADNIE te same zmienne motywu co klasa .ct-container (width = min(100%,
   ~94vw), max-width 1440px) - żadnych zgadywanych wartości. Fallbacki (94vw /
   1440px) = bieżące wartości motywu. Na koszyku/checkoucie pasek NIE dostaje
   tej klasy (renderuje się filtrem the_content, już wewnątrz kontenera). */
.dwo-aso-pickup-bar--shop,
.dwo-aso-sales-closed-banner {
	width: var(--theme-container-width, min(100%, 94vw));
	max-width: var(--theme-normal-container-max-width, 1440px);
	margin-left: auto;
	margin-right: auto;
}

.dwo-aso-pickup-bar__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Mała ikona trybu w belce. */
.dwo-aso-pickup-bar__label > .dwo-aso-pickup-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--dwo-accent);
}

.dwo-aso-pickup-bar__label > .dwo-aso-pickup-icon svg {
	width: 22px;
	height: 22px;
}

/* "Zmień" jako mała pigułka zamiast gołego linku. */
.dwo-aso-pickup-bar__change {
	flex: 0 0 auto;
	padding: 5px 14px;
	border: 1px solid var(--dwo-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--dwo-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dwo-aso-pickup-bar__change:hover,
.dwo-aso-pickup-bar__change:focus {
	background: var(--dwo-accent);
	color: #fff;
}

/* Szczegóły (adres, godziny) - tylko wariant pełny (koszyk/checkout). Mobile:
   każdy wpis w osobnej linii pod belką (jak dotąd). */
.dwo-aso-pickup-bar__details {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
	padding-top: 9px;
	border-top: 1px solid var(--dwo-border);
	color: var(--dwo-ink);
	font-size: 13px;
}

.dwo-aso-pickup-bar__detail {
	display: inline-flex;
	align-items: flex-start;
	gap: 7px;
}

.dwo-aso-pickup-bar__detail > .dwo-aso-pickup-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	color: var(--dwo-accent);
}

.dwo-aso-pickup-bar__detail > .dwo-aso-pickup-icon svg {
	width: 17px;
	height: 17px;
}

/* Desktop: adres i godziny obok siebie w jednej linii (nie łamane). */
@media (min-width: 600px) {
	.dwo-aso-pickup-bar--full .dwo-aso-pickup-bar__details {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 22px;
	}
}

/* Bazowa otoczka ikony (SVG dziedziczy currentColor). */
.dwo-aso-pickup-icon {
	display: inline-flex;
	line-height: 0;
}

.dwo-aso-pickup-icon svg {
	display: block;
}

/* =========================================================
 * Baner "sprzedaż na dziś zamknięta" (Sprint 3.24)
 * Ciepły akcent informacyjny (złoto motywu), NIE czerwień "błędu" -
 * to informacja, nie awaria. Renderowany tylko warunkowo (patrz PHP).
 * ========================================================= */

.dwo-aso-sales-closed-banner {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	/* Sprint 3.28: auto po bokach wyśrodkowuje baner (szerokość ustawiona wyżej
	   we wspólnej regule z .dwo-aso-pickup-bar--shop).
	   Sprint 3.35: 20px OD GÓRY (nie tylko od dołu) - odstęp od nagłówka nad
	   banerem. Gdy baner jest pusty (JS/serwer nic nie zwrócił), pusty kontener
	   #dwo-aso-status-banner jest ukryty (reguła niżej), więc margines nie tworzy
	   pustej przerwy. */
	margin: 20px auto 20px;
	padding: 12px 16px;
	border: 1px solid var(--dwo-accent);
	border-left-width: 4px;
	border-radius: 10px;
	/* Delikatny wash złota jako tło - ten sam odcień co wybrana opcja ekranu. */
	background: var(--dwo-accent-wash);
	color: var(--dwo-ink-strong);
	font-size: 14px;
}

.dwo-aso-sales-closed-banner__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--dwo-accent);
}

.dwo-aso-sales-closed-banner__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.dwo-aso-sales-closed-banner__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dwo-aso-sales-closed-banner__meta {
	color: var(--dwo-ink);
	font-size: 13px;
	opacity: 0.85;
}

/* Wariant OSTRZEGAWCZY „zbliża się zamknięcie" (Sprint 3.29): odróżniony
   odcieniem TEJ SAMEJ palety - cieplejszy akcent (accent-hover / pomarańcz)
   na obwódce i ikonie, żeby „za X minut" czytało się bardziej pilnie niż
   spokojniejszy baner „zamknięte". Żadnych nowych kolorów. */
.dwo-aso-sales-closed-banner--warning {
	border-color: var(--dwo-accent-hover);
}

.dwo-aso-sales-closed-banner--warning .dwo-aso-sales-closed-banner__icon {
	color: var(--dwo-accent-hover);
}

/* Sprint 3.26: gdy baner i pasek są widoczne razem (baner nad paskiem), odstęp
   między nimi to 12px zamiast domyślnych 20px. Baner sam (bez paska) oraz sam
   pasek zachowują 20px do treści/nagłówka strony. Wymaga, by pasek był
   bezpośrednim następnym rodzeństwem banera w DOM (baner prio 5, pasek prio 6
   na tym samym hooku). */
.dwo-aso-sales-closed-banner:has( + .dwo-aso-pickup-bar ) {
	margin-bottom: 12px;
}

/* Sprint 3.35: pusty kontener komunikatów (brak banera „zamknięte"/ostrzeżenia)
   NIE zajmuje miejsca - dzięki temu górny margines banera nie tworzy pustej
   przerwy, gdy nic nie jest pokazane, a pasek „Sposób odbioru" (renderowany po
   kontenerze) sam daje odstęp od góry swoim margin-top. */
#dwo-aso-status-banner:empty {
	display: none;
}

/* Sprint 3.36: podpowiedź o miejscu odbioru OBOK atrybutu „Na kiedy?" na
   stronie produktu, w układzie dwukolumnowym. Wspólny kontener flex obejmuje
   tabelę wariantu (.variations) i kartę podpowiedzi. Na wąskim ekranie wraca do
   jednej kolumny (ten sam próg 600px co siatka punktów na ekranie wyboru). */
.dwo-aso-product-pickup-row {
	display: flex;
	flex-wrap: wrap;
	/* flex-start (Sprint 3.36.1), NIE stretch: każda kolumna ma naturalną
	   wysokość. Przy dłuższej etykiecie (np. „Piekarnia Dwóch Ojców") karta
	   „Odbiór" bywa wyższa i dwuliniowa - stretch ciągnął wtedy lewą kolumnę
	   (pole „Na kiedy?") do tej samej wysokości, zostawiając pod nią pustą
	   dziurę. flex-start to eliminuje. */
	align-items: flex-start;
	gap: 14px;
}

/* Sprint 3.36.3: równe kolumny 50/50 (flex: 1 1 0 = jednakowy udział wolnej
   przestrzeni po odjęciu gap). Przy połowie typowej szerokości wiersza karta
   „Odbiór: Piekarnia Dwóch Ojców" mieści się w JEDNEJ linii. Margines dolny
   tabeli znosimy, bo odstęp daje gap kontenera. */
.dwo-aso-product-pickup-row .variations {
	flex: 1 1 0;
	margin-bottom: 0;
}

/* Karta „Odbiór: [miejsce]" - węższa druga kolumna, w stylu belki: stonowane
   tło, zaokrąglone rogi, ikona trybu + pogrubiona nazwa miejsca. */
.dwo-aso-product-pickup-hint {
	display: flex;
	align-items: center;
	gap: 9px;
	/* Sprint 3.36.3: równa kolumna 50/50 (patrz .variations wyżej); brak
	   max-width, żeby karta mogła zająć całą połowę wiersza i zmieścić dłuższą
	   etykietę w jednej linii. */
	flex: 1 1 0;
	/* Sprint 3.36.3/3.36.2: wyśrodkowanie karty względem POLA select (nie
	   względem etykiety nad nim ani całej komórki). Wzór:
	   margin-top = odstęp(etykieta „Na kiedy?" → select) + (wys.select − wys.karty)/2.
	   Sprint 3.36.4 - KOREKTA POMIARU: poprzednie 49px zakładało wys.select 73px,
	   ale to była wysokość komórki td.value (select + link „Wyczyść"), nie samego
	   pola. Sam <select> ma 40px. Poprawnie: odstęp 34,75px, select 40px, karta
	   45,09px → 34,75 + (40 − 45,09)/2 ≈ 32px. Zweryfikowane na żywo
	   (getBoundingClientRect): środek karty vs środek selecta < 0,5px.
	   Zerowane na mobile (jedna kolumna) - patrz @media niżej. */
	margin: 32px 0 0;
	padding: 10px 14px;
	background: var(--dwo-surface, #f2f5f7);
	border: 1px solid var(--dwo-border, #e1e8ed);
	border-radius: 10px;
	font-size: 14px;
	color: var(--dwo-ink-strong, #192a3d);
}

.dwo-aso-product-pickup-hint > .dwo-aso-pickup-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--dwo-accent, #cf992a);
}

.dwo-aso-product-pickup-hint > .dwo-aso-pickup-icon svg {
	width: 22px;
	height: 22px;
}

.dwo-aso-product-pickup-hint__prefix {
	color: var(--dwo-ink, #3a4f66);
	opacity: 0.75;
}

/* Wąski ekran: kolumny wracają jedna pod drugą (lista dnia nad podpowiedzią),
   karta na pełną szerokość. */
@media (max-width: 600px) {
	.dwo-aso-product-pickup-row {
		flex-direction: column;
		/* Sprint 3.36.8: wyrównaj odstęp NAD kartą z odstępem POD nią. GÓRNY
		   odstęp (select → karta) to nasz gap; DOLNY (karta → rząd „Dodaj do
		   koszyka") jest natywny i - jak wynika z analizy CSS motywu - praktycznie
		   zerowy (brak reguły marginesu na .single_variation_wrap /
		   .woocommerce-variation-add-to-cart; cena .single_variation jest
		   display:none dopóki nic nie wybrano). Żeby oba były RÓWNE i „ciasne",
		   sterujemy obydwoma z naszego CSS: gap 14→10px (górny) + margin-bottom
		   10px na karcie (dolny). 10px = jednostka odstępu Blocksy
		   (--product-element-spacing). Wartości z analizy CSS, nie z pomiaru na
		   żywo (przeglądarka niedostępna) - do potwierdzenia wizualnie. */
		gap: 10px;
	}

	/* Sprint 3.36.6: usuń DUŻĄ pustą przerwę między polem „Na kiedy?" a kartą
	   na mobile. Przyczyna: motyw Blocksy ma
	   `form.variations_form table.variations { margin-bottom: 1.5em }`
	   (specyficzność 0,2,2), która BIJE nasz bazowy reset
	   `.dwo-aso-product-pickup-row .variations { margin-bottom: 0 }` (0,2,0) —
	   więc tabela zachowuje 1,5em marginesu dolnego. Na desktopie (kolumny obok
	   siebie) ten margines jest niewidoczny; w układzie kolumnowym (mobile) ląduje
	   wprost MIĘDZY selectem a kartą, tworząc dużą lukę (1,5em + gap 14px).
	   Nasz wiersz renderuje się WEWNĄTRZ `form.variations_form` (hook
	   `woocommerce_before_variations_form`), więc używamy go jako przodka, by
	   podnieść specyficzność do 0,3,0 i wygrać bez `!important`. Zostaje tylko
	   naturalny odstęp `gap: 14px`. */
	form.variations_form .dwo-aso-product-pickup-row .variations {
		margin-bottom: 0;
	}

	/* Sprint 3.36.7: pozostała (mniejsza) przerwa pod „Na kiedy?". Przyczyna
	   (zdiagnozowana z kodu, nie zgadnięta): link „Wyczyść" (.reset_variations)
	   jest renderowany przez WooCommerce w tej samej komórce td.value co select,
	   a motyw ukrywa go regułą `.variations .reset_variations{visibility:hidden}`.
	   visibility:hidden REZERWUJE miejsce (w przeciwieństwie do display:none), a że
	   select ma `width:100%`, ukryty link zawija się do WŁASNEJ linii pod selectem
	   (~10px gap + ~21px linia). Na desktopie ta zarezerwowana przestrzeń jest pod
	   selectem w bocznej kolumnie - niewidoczna; na mobile (kolumna) tworzy odstęp
	   między selectem a kartą.
	   Dlaczego NIE display:none: WooCommerce pokazuje link ustawiając inline
	   `visibility: visible` (add-to-cart-variation.js: sprawdza css('visibility')
	   === 'hidden', potem ustawia 'visible') - display:none i zablokowałby pokazanie,
	   i zaburzył ten odczyt. Zamiast tego: dopóki link NIE jest pokazany (brak inline
	   „visible": stan początkowy bez atrybutu style ORAZ stan po resecie z
	   `visibility: hidden`), wyjmujemy go z układu przez position:absolute - nie
	   rezerwuje linii, pozostaje niewidoczny. Gdy klient wybierze dzień, WC dodaje
	   `style="visibility: visible"`, selektor przestaje pasować, link wraca do
	   normalnego przepływu i pokazuje się jak zwykle. Zostaje tylko gap:14px. */
	.dwo-aso-product-pickup-row .variations .reset_variations:not([style*="visible"]) {
		position: absolute;
	}

	.dwo-aso-product-pickup-hint {
		/* Jedna kolumna: karta jest POD listą dnia, nie obok - wyśrodkowanie
		   względem selecta nie ma sensu i dawałoby zbędny odstęp u góry. */
		margin-top: 0;
		/* Sprint 3.36.4-mobile: pełna szerokość jak pole „Na kiedy?" nad nią.
		   W układzie kolumnowym align-items: flex-start (z 3.36.1) działa na
		   OSI POZIOMEJ - bez tego karta dostawałaby tylko szerokość swojej
		   treści (wąska „obcięta" belka), a nie całą szerokość wiersza. */
		width: 100%;
		/* Sprint 3.36.8: dolny odstęp karta → „Dodaj do koszyka" = ten sam 10px
		   co górny gap (patrz komentarz przy .dwo-aso-product-pickup-row wyżej).
		   Natywny odstęp pod kartą jest ~0, więc ten margines JEST dolnym
		   odstępem - dzięki temu góra i dół są równe. */
		margin-bottom: 10px;
	}
}

/* =========================================================
 * Komunikat na checkoucie zależny od trybu (Sprint 3.43) - pod paskiem „Sposób
 * odbioru". INFORMACJA (nie etykieta wyboru): stonowana karta z ikoną trybu,
 * wyraźnie odróżniona od samego paska. Te same tokeny palety co reszta wtyczki.
 * ========================================================= */
.dwo-aso-checkout-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin: 10px auto 0;
	padding: 12px 16px;
	background: var(--dwo-accent-wash);
	border: 1px solid var(--dwo-border);
	border-left: 3px solid var(--dwo-accent);
	border-radius: 10px;
	color: var(--dwo-ink-strong);
}

.dwo-aso-checkout-notice .dwo-aso-pickup-icon {
	flex: 0 0 auto;
	color: var(--dwo-accent);
}

.dwo-aso-checkout-notice .dwo-aso-pickup-icon svg {
	width: 22px;
	height: 22px;
}

.dwo-aso-checkout-notice__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

/* Wariant „wymagane logowanie" (Sprint 3.43.3; przyciski 3.43.5) - mocniejszy
   akcent, bo to blokada płatności „na miejscu". Ikona przy górze wielowierszowej
   treści, pod tekstem dwa przyciski. */
.dwo-aso-checkout-notice--login {
	background: var(--dwo-accent-wash);
	border-left-width: 4px;
	align-items: flex-start;
}

.dwo-aso-checkout-notice__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Dwa przyciski „Zaloguj się"/„Załóż konto" (Sprint 3.43.5) - obok siebie gdy
   jest miejsce, zawijają się na wąskim ekranie. */
.dwo-aso-checkout-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dwo-aso-checkout-notice__btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--dwo-accent);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dwo-accent-hover);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.dwo-aso-checkout-notice__btn:hover,
.dwo-aso-checkout-notice__btn:focus {
	background: var(--dwo-accent-wash);
	color: var(--dwo-ink-strong);
}

.dwo-aso-checkout-notice__btn--primary {
	background: var(--dwo-accent);
	border-color: var(--dwo-accent);
	color: #fff;
}

.dwo-aso-checkout-notice__btn--primary:hover,
.dwo-aso-checkout-notice__btn--primary:focus {
	background: var(--dwo-accent-hover);
	border-color: var(--dwo-accent-hover);
	color: #fff;
}

/* Wspólny kontener paska „Sposób odbioru" i komunytu na checkoucie (Sprint 3.43.4):
   na desktopie obok siebie (flex, dwie kolumny), na wąskim ekranie zawijają się w
   jedną kolumnę (pasek nad komunikatem, jak dotąd). flex-basis 320px => zwijają się
   naturalnie, gdy zabraknie miejsca (spójne z auto-fit siatek w reszcie wtyczki). */
.dwo-aso-checkout-head {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 20px 0;
}

.dwo-aso-checkout-head__bar,
.dwo-aso-checkout-head__notice {
	flex: 1 1 320px;
	min-width: 0;
}

/* Wewnątrz wspólnego kontenera zerujemy własne marginesy/centrowanie elementów -
   odstępy zapewnia teraz kontener (margin/gap). */
.dwo-aso-checkout-head__bar .dwo-aso-pickup-bar {
	margin: 0;
	height: 100%;
}

.dwo-aso-checkout-head__notice .dwo-aso-checkout-notice {
	margin: 0;
	max-width: none;
	height: 100%;
}

/* Gość w trybie punktu: lista metod płatności jest pusta (płatność „na miejscu"
   wymaga konta), a my pokazujemy własny komunikat z linkiem logowania. Ukrywamy
   natywny czerwony błąd Blocks „Nie ma dostępnych metod płatności" WYŁĄCZNIE tutaj
   (klasa body z add_checkout_body_class()) i tylko w bloku płatności - w innych
   trybach/kontekstach błąd braku metod pozostaje widoczny. */
body.dwo-aso-guest-point-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-notice-banner,
body.dwo-aso-guest-point-checkout .wc-block-checkout__payment-method .wc-block-components-notice-banner {
	display: none !important;
}