/* Badge „Dostępne od [data]" na miniaturce produktu (listing lista/siatka).
   Zielony obrys jak blok dostępności na karcie produktu (ramka #5cb463, mięta),
   data na zielono #009703. */

/* Cały blok dostawy jest linkiem do strony produktu — przypadkowy klik w baner
   nie ginie, tylko przenosi na produkt. Link blokowy, bez podkreślenia, kolor z treści. */
.delivery-message-wrapper a.oc-delivery-link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

/* Rezerwacja stałej wysokości obszaru dostawy. Badge zostaje kompaktowy i zawija się
   naturalnie (1 lub 2 linie), a cena/przycisk pod spodem startują na tej samej wysokości
   we wszystkich kartach — pusta przestrzeń ląduje tu, w kontenerze, nie w samym banerze. */
.delivery-message-wrapper {
	box-sizing: border-box;
	min-height: 46px;
}

.ocb-avail {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;                    /* odstęp od ceny daje rezerwacja na .delivery-message-wrapper */
	padding: 3px 8px;
	border: 1.5px solid #5cb463;
	border-radius: 6px;
	background: rgba(168, 239, 169, .22);
	box-shadow: 0 1px 6px rgba(31, 61, 43, .08);
	color: #1d1d1a;
	font-size: 14px;
	line-height: 1.25;
}

.ocb-avail__icon {
	display: inline-flex;
	flex: 0 0 auto;
	padding-right: 8px;
}

.ocb-avail__icon .icon {
	width: 24px;
	height: auto;
}

/* Tekst badge'a dostępności: nagłówek „Dostępne od" czarny + 14px. Motyw daje
   .delivery-mesage zielone, a w @media 769–1540px dodatkowo 12px — stąd jawny override
   (2 klasy > globalne 1 klasa), żeby badge był spójny z „U Ciebie" i „magazynu dostawcy". */
.delivery-message-wrapper .ocb-avail .delivery-mesage,
.delivery-message-wrapper .ocb-avail .ocb-avail__text {
	color: #1d1d1a !important;
	font-size: 14px !important;
	line-height: 1.25;
}

.ocb-avail__date {
	color: #009703;
	font-weight: 700;
	white-space: nowrap;
}

/* Badge motywu „Jutro U Ciebie" / „U Ciebie w …" (stan > 0) — ten sam wygląd
   co badge dostępności: zielony obrys #5cb463, mięta, lekki cień, niższy padding,
   tekst na czarno. !important na obrysie, bo motyw wymusza border-bottom:none !important. */
.delivery-message-wrapper p.delivery-message,
.delivery-message-wrapper .delivery-message {
	display: flex;
	align-items: center !important;  /* motyw (ładuje się po module) wymusza flex-end — stąd !important */
	justify-content: flex-start;
	box-sizing: border-box;
	margin: 0 !important;          /* odstęp od ceny daje rezerwacja na .delivery-message-wrapper */
	padding: 3px 8px;
	border: 1.5px solid #5cb463 !important;
	border-radius: 6px;
	background: rgba(168, 239, 169, .22);
	box-shadow: 0 1px 6px rgba(31, 61, 43, .08);
	color: #1d1d1a;
	font-size: 14px;
	line-height: 1.25;
}

/* Komunikat „U Ciebie …" — stały człon czarny, człon czasu (jutro/w czwartek…) zielony.
   Tekst siedzi w spanie .delivery-mesage (własna zieleń motywu) — bazę zerujemy na czarno,
   a człon czasu .oc-day kolorujemy z powrotem na zielono. */
.delivery-message-wrapper .delivery-message .delivery-mesage {
	color: #1d1d1a !important;   /* motyw: .delivery-mesage zielone 16px + @media 12px — twardo na czarno 14px */
	font-size: 14px !important;
	line-height: 1.25;
}

.delivery-message-wrapper .delivery-message .oc-day {
	color: #009703 !important;   /* człon czasu zielony — wygrywa z czernią bazy */
	font-weight: 700;
}

/* Ikona z modułu (Material Symbols, jak na karcie produktu) zamiast ikony motywu:
   chowamy <img> motywu, a ikonę wstawiamy jako tło spana. Ścieżka względna do CSS. */
.delivery-message .material-icon .icon {
	display: none;
}

.delivery-message-wrapper p.delivery-message span.material-icon,
.delivery-message-wrapper .delivery-message .material-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;               /* ten sam rozmiar i odstęp co .ocb-avail__icon (24px + 8px) */
	height: 24px;
	padding: 0;
	margin-right: 8px;
	background: url(../img/delivery_truck_speed.svg) center / contain no-repeat;
}

/* ===== Fallback „Dostawa z magazynu dostawcy" (stan 0 bez daty dostępności) =====
   Ten sam kształt co badge dostępności, ale w SZAREJ tonacji (status neutralny).
   :not(.ocb-avail) — żeby NIE ruszać naszego zielonego badge'a „Dostępne od …",
   który dzieli klasę .delivery-message-out-of-stock. */
.delivery-message-out-of-stock:not(.ocb-avail) {
	display: flex;
	align-items: center !important;   /* motyw ładuje się po module — stąd !important */
	justify-content: flex-start;
	box-sizing: border-box;
	margin: 0;                        /* odstęp od ceny daje rezerwacja na .delivery-message-wrapper */
	padding: 3px 8px;
	border: 1.5px solid #c4c9c6;
	border-radius: 6px;
	background: #f4f6f5;
	box-shadow: 0 1px 6px rgba(31, 61, 43, .08);
	color: #1d1d1a;
	font-size: 14px;
	line-height: 1.25;
}

/* Ikona magazynu z modułu zamiast inline-SVG motywu (jak truck w in-stock). */
.delivery-message-out-of-stock:not(.ocb-avail) .material-icon svg {
	display: none;
}

.delivery-message-out-of-stock:not(.ocb-avail) .material-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background: url(../img/warehouse.svg) center / contain no-repeat;
}

.delivery-message-out-of-stock:not(.ocb-avail) .delivery-mesage {
	color: #1d1d1a;
	font-size: 14px;           /* motyw daje 16px — równamy do reszty badge'y */
	line-height: 1.25;
}

/* ===== Widok LISTY (.product_list.list) =====
   Wiersz jest szeroki — badge ma być KOMPAKTOWY (szerokość treści), a nie rozciągnięty
   na całą szerokość jak w siatce. Wiersze są niezależne, więc rezerwacja wysokości zbędna. */
.product_list.list .delivery-message-wrapper {
	min-height: 0;
}

.product_list.list .delivery-message-wrapper .oc-delivery-link {
	display: inline-block;
}

/* ===== MOBILE (≤575px) =====
   Tu siatka jest na pewno 1-kolumnowa (pełna szerokość) — badge mieści się w 1 linii,
   nie ma sąsiednich kart, więc rezerwacja wysokości jest zbędna i tylko dodaje pustego
   miejsca. Zdejmujemy ją → badge kompaktowy (odstęp od ceny daje margines wrappera).
   Powyżej (576–767px, możliwe 2 kolumny) rezerwacja zostaje — chroni przed rozjazdem. */
@media (max-width: 575px) {
	.delivery-message-wrapper {
		min-height: 0;
	}
}