/* =========================================================================
   Pomelo — Dodatki (karuzela) — widget Elementora
   Scoped pod .pdkar / .pdkar-modal. Kolory i fonty przez zmienne --pom-* (fallbacki
   twarde), rozmiary px wg Figmy. Zależność: globalny pomelo-new.min.css.
   ========================================================================= */

.pdkar {
	--pdkar-font-head: var(--pom-font-heading, "Rubik", sans-serif);
	--pdkar-font-body: var(--pom-font-body, "Montserrat", sans-serif);
	--pdkar-olive:      var(--pom-primary-500, #c8c84a);
	--pdkar-olive-dark: var(--pom-primary-900, #4a4a17);
	--pdkar-red:        var(--pom-accent-500, #f0203d);
	--pdkar-ink:        var(--pom-neutral-900, #1f1f1f);
	--pdkar-ink-800:    var(--pom-neutral-800, #333333);
	--pdkar-ink-700:    var(--pom-neutral-700, #595959);
	--pdkar-bubble:     var(--pom-neutral-200, #f8f8f8);
	--pdkar-shadow:     2px 4px 3px 0 rgba(80, 80, 80, 0.28);
	--pdkar-per-view:   4;
	--pdkar-gap:        24px;

	box-sizing: border-box;
	max-width: var(--pdkar-maxw, none);
	margin-inline: auto;
	overflow-x: clip;
}
/* KLUCZOWE: globalna klasa new-scope ustawia display:flex na roocie, przez co
   .pdkar__carousel (flex-item) rozdymał się do zawartości (1504px) i psuł przewijanie.
   Wymuszamy blok. (0,2,0 bije .new-scope 0,1,0) */
.pdkar.new-scope { display: block; }
.pdkar__carousel { min-width: 0; }         /* gdyby root i tak był flexem — pozwól zwęzić */
.pdkar *,
.pdkar-modal * { box-sizing: border-box; }

/* --- Nagłówek -------------------------------------------------------------- */
.pdkar__head { text-align: center; margin: 0 auto 24px; max-width: 900px; }
.pdkar__title { margin: 0; }
.pdkar__intro {
	font-family: var(--pdkar-font-body);
	font-size: 20px;
	line-height: 1.5;
	color: var(--pdkar-ink-800);
	margin: 12px auto 0;
	max-width: 820px;
}

/* --- Karuzela: layout ----------------------------------------------------- */
.pdkar__carousel { position: relative; display: flex; align-items: center; gap: 8px; }

/* .pdkar__viewport = KONTENER SCROLLUJĄCY (max-width:100% → nigdy nie rośnie do
   zawartości; niezależne od sztuczek flex-shrink). .pdkar__track = zawartość
   (width:max-content). Działa też BEZ JS: karty mają fallbackową szerokość. */
.pdkar__viewport {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x proximity;   /* proximity — nie walczy z programowym scrollBy/drag */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;   /* momentum na iOS */
	touch-action: pan-y;                 /* pion = strona; poziom obsługuje JS drag */
	overscroll-behavior-x: contain;
	cursor: grab;
}
.pdkar__viewport::-webkit-scrollbar { display: none; }
.pdkar__track {
	display: flex;
	align-items: stretch;          /* karty równej wysokości */
	gap: var(--pdkar-gap);
	padding: 22px 2px 8px;         /* pion: miejsce na cień/wystający obraz */
	width: max-content;
	max-width: none;
}

/* --- Karta ----------------------------------------------------------------- */
.pdkar-card {
	/* szerokość ustawia JS (--pdkar-cardw); fallback gdy JS nie ruszy = 260px */
	flex: 0 0 var(--pdkar-cardw, 260px);
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 34px;             /* miejsce na plakietki nad zdjęciem */
}

/* Plakietki nad kartą (nad obrazem) */
.pdkar-card__badges {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
	white-space: nowrap;
}
.pdkar-badge {
	font-family: var(--pdkar-font-head);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.2;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.pdkar-badge--bestseller { background: var(--pom-accent-200, #fbc8cf); color: var(--pom-accent-800, #8c1023); }
.pdkar-badge--category    { background: var(--pom-badge-category-bg, #bfe8ff); color: var(--pom-badge-category-text, #1f5d8a); }
.pdkar-badge--nutrition   { background: var(--pom-badge-nutrition-bg, #f6d47a); color: var(--pom-badge-nutrition-text, #7a4d00); }

/* Zdjęcie — w przepływie, wsuwa się (stały tuck) w górę dymka; obraca na hover.
   Ujemny margin-bottom = stałe nachodzenie na dymek NIEZALEŻNE od rozmiaru zdjęcia
   → tytuł zawsze pod zdjęciem, nigdy pod nim schowany. */
.pdkar-card__media {
	position: relative;
	flex: 0 0 auto;                /* NIE kurczyć — inaczej w kolumnie flex zapada się do ~20px */
	width: min(76%, 200px);
	aspect-ratio: 1 / 1;
	margin-bottom: -52px;
	z-index: 2;
	pointer-events: none;
}
.pdkar-card__img {
	position: absolute;            /* wypełnia media niezależnie od rozwiązywania height:100% */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(0deg) scale(1);
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
	filter: drop-shadow(var(--pdkar-shadow));
}

/* Dymek z treścią — flex:1 wyrównuje wysokość wszystkich dymków w rzędzie */
.pdkar-card__label {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 150px;
	background: var(--pdkar-bubble);
	border-radius: 25px;
	padding: 62px 16px 24px;       /* 62 = 52 wsunięcia zdjęcia + ~10 odstępu do tytułu */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pdkar-card__name {
	font-family: var(--pdkar-font-head);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: var(--pdkar-ink-800);
	transform: scale(1);
	transform-origin: center;
	transition: transform .3s ease, color .3s ease;
}
.pdkar-card__sub {
	font-family: var(--pdkar-font-body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--pdkar-olive-dark);
	max-width: 90%;
	transition: color .3s ease;
}
.pdkar-card__price {
	display: inline-flex;
	align-items: center;
	background: var(--pom-neutral-100, #fff);
	border-radius: 12px;
	padding: 4px 12px;
	margin-top: auto;              /* przyklejona do dołu dymka → równe ceny */
	font-family: var(--pdkar-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--pdkar-ink-800);
}

/* Link szczegóły */
.pdkar-card__details {
	margin-top: 12px;
	background: none;
	border: 0;
	padding: 12px 4px;
	font-family: var(--pdkar-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--pdkar-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.pdkar-card__popup { display: none; }

/* Efekty hover (tylko urządzenia z kursorem) */
@media (hover: hover) {
	.pdkar-card:hover .pdkar-card__img   { transform: rotate(-7deg) scale(1.08); }
	.pdkar-card:hover .pdkar-card__label { background: var(--pdkar-olive); box-shadow: var(--pdkar-shadow); transform: translateY(-4px); }
	.pdkar-card:hover .pdkar-card__name  { transform: scale(1.09); color: var(--pom-neutral-900, #1f1f1f); }
	.pdkar-card:hover .pdkar-card__sub   { color: var(--pdkar-ink-800); }
	.pdkar-card__details:hover         { text-decoration-thickness: 2px; }
}

/* --- Strzałki: 1:1 jak w widgecie „Menu tygodnia" (pusty button + chevron w tle) --- */
.pdkar__nav {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border: none;
	border-radius: 12px;
	background: var(--pom-neutral-100, #fff) no-repeat center / 10px 18px;
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3);
	cursor: pointer;
	transition: transform .15s ease;
}
.pdkar__nav--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'%3E%3Cpath d='M9 1L1 9l8 8' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pdkar__nav--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'%3E%3Cpath d='M1 1l8 8-8 8' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pdkar__nav:hover { transform: scale(1.05); }
.pdkar__nav[disabled] { opacity: .35; cursor: default; }
.pdkar__nav[disabled]:hover { transform: none; }

/* --- Kropki ---------------------------------------------------------------- */
.pdkar__dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
/* Kropki wg Figmy (node 1046-607): 12px, nieaktywna #D9D9D9, aktywna #B3B3B3,
   hover pośrednia. !important — bije tło z motywu na button:hover. */
.pdkar__dot {
	width: 12px; height: 12px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--pom-neutral-400, #d9d9d9) !important;
	cursor: pointer;
	transition: background .2s ease;
}
.pdkar__dot:hover,
.pdkar__dot:focus { background: #c4c4c4 !important; }
.pdkar__dot.is-active { background: var(--pom-neutral-500, #b3b3b3) !important; }

/* --- CTA: TYLKO wyśrodkowanie, zero ruszania przycisku ---------------------
   text-align:center centruje przycisk (inline) NIE zmieniając go — wygląda
   dokładnie jak systemowy new-btn, tylko na środku. Bez flexa (flex go rozpychał). */
.pdkar__cta { text-align: center; margin-top: 32px; }

/* =========================================================================
   POPUP / MODAL
   ========================================================================= */
.pdkar-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.pdkar-modal[hidden] { display: none; }
body.pdkar-modal-open { overflow: hidden; }
.pdkar-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 31, 31, .55);
	cursor: pointer;
}
.pdkar-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 740px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--pom-neutral-100, #fff);
	border-radius: 25px;
	padding: 40px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.pdkar-modal__close {
	position: absolute;
	top: 18px; right: 18px;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0;
	color: var(--pdkar-ink-800);
	cursor: pointer;
}
.pdkar-modal__close svg { width: 24px; height: 24px; }

.pdkar-modal__top { display: flex; gap: 28px; align-items: flex-start; }
.pdkar-modal__media { flex: 0 0 40%; max-width: 240px; }
.pdkar-modal__media img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; display: block; }
.pdkar-modal__info { flex: 1 1 auto; min-width: 0; padding-right: 24px; }
.pdkar-modal__title {
	margin: 0;
	font-family: var(--pdkar-font-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--pdkar-ink-800);
}
.pdkar-modal__price {
	display: inline-block;
	margin: 12px 0;
	padding: 6px 14px;
	border-radius: 10px;
	background: var(--pdkar-olive);
	color: var(--pdkar-olive-dark);
	font-family: var(--pdkar-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}
.pdkar-modal__short {
	margin: 0;
	font-family: var(--pdkar-font-body);
	font-size: 16px;
	line-height: 1.45;
	color: var(--pdkar-ink-800);
}
.pdkar-modal__macros {
	display: inline-flex;
	align-items: stretch;
	margin: 16px 5px 0;            /* mały odstęp z lewej i prawej */
	padding: 10px 10px;
	max-width: calc(100% - 10px);
	border: 1px solid var(--pdkar-olive);
	border-radius: 16px;
}
.pdkar-macro {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: center;
	gap: 1px 6px;
	padding: 0 14px;
}
.pdkar-macro + .pdkar-macro { border-left: 1px solid var(--pom-primary-200, #eaeacb); }
.pdkar-macro__icon { grid-row: 1; width: 22px; height: 22px; color: var(--pdkar-ink-800); }
.pdkar-macro__val {
	grid-row: 1;
	font-family: var(--pdkar-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--pdkar-ink-800);
	white-space: nowrap;
}
.pdkar-macro__lbl {
	grid-column: 1 / -1;
	text-align: center;
	font-family: var(--pdkar-font-body);
	font-size: 12px;
	color: var(--pdkar-ink-700);
}
/* wariant: linijka kaloryczność/waga zamiast paska makro */
.pdkar-modal__kcal {
	margin: 4px 0 0;
	font-family: var(--pdkar-font-body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--pdkar-olive-dark);
}

.pdkar-modal__sep {
	border: 0 !important;
	border-top: 1px solid var(--pdkar-olive) !important;
	height: 0 !important;
	background: none !important;
	margin: 28px 0 !important;     /* przebija reguły hr{} motywu, które zjadały marginesy */
}
.pdkar-modal__full {
	font-family: var(--pdkar-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--pdkar-ink-700);
}
.pdkar-modal__full p { margin: 0 0 .8em; }
.pdkar-modal__full p:last-child { margin-bottom: 0; }

.pdkar-modal__back {
	display: block;
	margin: 22px auto 0 0;         /* po LEWEJ (na stronie widget siedzi z prawej) */
	background: none;
	border: 0;
	padding: 4px 2px;
	font-family: var(--pdkar-font-body);
	font-size: 16px;
	color: var(--pdkar-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* =========================================================================
   NEUTRALIZACJA HOVERÓW MOTYWU (czerwone tło / granatowy tekst na button/a)
   Scoped !important — patrz reference-wp-widget-hover-reset.
   ========================================================================= */
.pdkar .pdkar-card__details,
.pdkar .pdkar-card__details:hover,
.pdkar .pdkar-card__details:focus,
.pdkar .pdkar-card__details:active,
.pdkar-modal .pdkar-modal__close,
.pdkar-modal .pdkar-modal__close:hover,
.pdkar-modal .pdkar-modal__close:focus,
.pdkar-modal .pdkar-modal__back,
.pdkar-modal .pdkar-modal__back:hover,
.pdkar-modal .pdkar-modal__back:focus { background-color: transparent !important; }

.pdkar .pdkar-card__details, .pdkar .pdkar-card__details:hover, .pdkar .pdkar-card__details:focus { color: var(--pdkar-ink) !important; }
.pdkar-modal .pdkar-modal__close, .pdkar-modal .pdkar-modal__close:hover, .pdkar-modal .pdkar-modal__close:focus { color: var(--pdkar-ink-800) !important; }
.pdkar-modal .pdkar-modal__back, .pdkar-modal .pdkar-modal__back:hover, .pdkar-modal .pdkar-modal__back:focus { color: var(--pdkar-ink) !important; }

.pdkar .pdkar__nav, .pdkar .pdkar__nav:hover, .pdkar .pdkar__nav:focus { background-color: var(--pom-neutral-100, #fff) !important; }

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 767px) {
	.pdkar__intro { font-size: 16px; }
	.pdkar__track { padding-left: 4px; padding-right: 4px; }
	/* karty ~280px jak w Figmie; JS ustawia --pdkar-cardw, tu fallback */
	.pdkar-card { flex-basis: var(--pdkar-cardw, min(280px, 80vw)); }

	/* Strzałki jako para WYŚRODKOWANA POD karuzelą (wg Figmy mobile) — bez kropek.
	   viewport = pełna szerokość linii; scroller (max-width:100%) nie rośnie do zawartości. */
	.pdkar__carousel { flex-wrap: wrap; justify-content: center; gap: 16px 8px; }
	.pdkar__viewport { order: 1; flex: 0 0 100%; width: 100%; }
	.pdkar__nav {
		display: flex;
		width: 48px; height: 48px;
		box-shadow: none;
		border-radius: 12px;                        /* zaokrąglony kwadrat, nie koło */
		border: 1.5px solid var(--pdkar-olive);       /* widoczna oliwkowa ramka (Figma) */
	}
	.pdkar__nav--prev { order: 2; }
	.pdkar__nav--next { order: 3; }
	.pdkar__dots { display: none !important; } /* na mobile nawigacja = strzałki */

	/* CTA „Masz ochotę na więcej?" — przycisk pełna szerokość (jak w hero) */
	.pdkar__cta .new-btn { display: flex; width: 100%; }

	.pdkar-modal__dialog { padding: 28px 20px; }
	.pdkar-modal__top { flex-direction: column; align-items: center; text-align: center; }
	.pdkar-modal__media { flex-basis: auto; max-width: 220px; width: 100%; }
	.pdkar-modal__info { padding-right: 0; }
	/* Makro w popupie na mobile: box wypełnia szerokość z 5px luzu z każdej strony,
	   a kolumny się kurczą (wcześniej inline-flex = szerokość treści → wychodził poza dialog). */
	.pdkar-modal__macros {
		align-self: stretch;
		display: flex;
		max-width: none;
		margin: 16px 5px 0;
		padding: 10px 4px;
	}
	.pdkar-macro { flex: 1 1 0; min-width: 0; padding: 0 6px; }
	.pdkar-modal__close { top: 12px; right: 12px; }
}