/* 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;
}

/* Przywrócenie DOLNEGO obrysu badge'a „U Ciebie w …" w widoku LISTA na mobile.
   W widoku „lista" JS motywu (custom.js) przebudowuje miniaturkę, tworząc strukturę
   .product-miniature.js-product-miniature > .product-description-information >
   .product-description.center-right > .delivery-message-wrapper. Motyw
   (category-product.css, @media max-width:966px) wymusza na tym `.delivery-message`
   `border-bottom: none !important` PEŁNYM łańcuchem (11 klas, swoistość 0,11,0),
   silniejszym niż nasz `.delivery-message-wrapper .delivery-message` i ładowanym PO
   module → kasował sam dolny obrys (góra/boki zostawały). Odbijamy CAŁY łańcuch motywu
   z prefiksem `body` (swoistość 0,11,1 > 0,11,0) → wygrywamy niezależnie od kolejności
   ładowania CSS. Na desktopie i w siatce to no-op (tam dolny obrys i tak jest). */
body .products .product_list.list .product_item .product-miniature.js-product-miniature .product-description-information .product-description.center-right .delivery-message-wrapper .delivery-message {
	border-bottom: 1.5px solid #5cb463 !important;
}

/* 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;
}

/* Uwaga: brak specjalnych styli dla widoku listy ani media queries mobile —
   badge wygląda tak samo w siatce i w liście, na desktopie i mobile (jeden, spójny styl). */