/* Pomelo - Diety (karuzela z filtrami) — style wspólne.
   Figma PROMOCJE: desktop 13561-5335, komplet kart 13561-6068, mobile 13561-6642.
   Desktop: pigułki filtrów + karuzela scroll-snap (strzałki + kropki).
   Mobile: lista rozwijana z kategorią + karuzela z podglądem kolejnej karty.
   Reguły zależne od breakpointu wstrzykiwane inline per instancja (przeżywa Element Cache). */

/* Elementor e-con potrafi zwinąć widżet do 0 szerokości */
.elementor-widget:has(.pdtm) { width: 100%; }

.pdtm {
  /* kolory z Figmy (tokeny systemu "new") */
  --pdtm-ink: #1f1f1f;          /* neutral/900 */
  --pdtm-ink2: #333333;         /* neutral/800 */
  --pdtm-body: #595959;         /* neutral/700 — opis, obrys buttona */
  --pdtm-line: #b3b33f;         /* primary/600 — ramka karty i zdjęcia */
  --pdtm-badge-line: #c8c84a;   /* primary/500 — obrys plakietki */
  --pdtm-badge-bg: #ffffff;
  --pdtm-badge-ink: #333333;
  --pdtm-chip-ink: #121212;
  --pdtm-chip-line: #333333;
  --pdtm-chip-on-bg: #c9c645;
  --pdtm-chip-on-line: #a7a300;
  --pdtm-red: #d91b36;          /* accent/600 — cena */
  --pdtm-gray: #8c8c8c;         /* cena regularna przekreślona */
  --pdtm-select-line: #8a8a8a;
  --pdtm-dot: #d9d9cf;
  --pdtm-dot-on: #b3b33f;

  --pdtm-radius: 20px;
  --pdtm-gap: 40px;
  --pdtm-v-base: 4;
  --pdtm-visible: var(--pdtm-v-base, 4);
  --pdtm-max: 1264px;

  position: relative;
  z-index: 0;                   /* pomelobox: sekcje przykrywają menu bez własnego kontekstu */
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  padding: 40px 20px;
  color: var(--pdtm-ink);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pdtm *, .pdtm *::before, .pdtm *::after { box-sizing: border-box; }
/* :where() — zerowa specyficzność, nie zjada paddingów klas komponentu */
:where(.pdtm) :where(h1, h2, h3, h4, p, ul, li, figure, button) { margin: 0; padding: 0; }

/* mniej kart na węższych ekranach — min() wygrywa z bazą z inline style */
@media (max-width: 1280px) { .pdtm { --pdtm-visible: min(var(--pdtm-v-base, 4), 3); --pdtm-gap: 24px; } }
@media (max-width: 991px)  { .pdtm { --pdtm-visible: min(var(--pdtm-v-base, 4), 2); } }

/* ---------- nagłówek ---------- */
.pdtm__head { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.pdtm__overline {
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 500; font-size: 14px; line-height: 1.2;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--pdtm-ink);
}
.pdtm__title {
  margin-top: 8px !important;
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700 !important; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.2;
  text-transform: uppercase; color: var(--pdtm-ink);
}
.pdtm__intro {
  margin: 16px auto 0 !important; max-width: 800px;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--pdtm-ink2);
}

/* ---------- filtry: pigułki (desktop) ---------- */
.pdtm__filters {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: var(--pdtm-max); margin: 0 auto 40px;
}
.pdtm__chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 4px 24px;
  border: 1px solid var(--pdtm-chip-line); border-radius: 30px;
  background: transparent; color: var(--pdtm-chip-ink);
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.2;
  text-transform: uppercase; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.pdtm__chip.is-active {
  background: var(--pdtm-chip-on-bg); border: 3px solid var(--pdtm-chip-on-line);
  font-weight: 500; padding: 2px 22px;
}
/* motyw Elementora dorzuca czerwone tło na hover/tap — neutralizacja */
.pdtm .pdtm__chip:hover, .pdtm .pdtm__chip:focus, .pdtm .pdtm__chip:active {
  background: var(--pdtm-chip-on-bg) !important; color: var(--pdtm-chip-ink) !important;
}

/* ---------- filtr mobilny: lista rozwijana ---------- */
.pdtm__mfilter { display: none; max-width: 520px; margin: 0 auto 24px; }
.pdtm__mlabel {
  display: block; margin-bottom: 8px;
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 500; font-size: 18px; color: var(--pdtm-ink);
}
.pdtm__mselect-wrap { position: relative; }
.pdtm__mselect {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; padding: 0 44px 0 12px;
  border: 1px solid var(--pdtm-select-line); border-radius: 8px; background: #fff;
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 600; font-size: 16px; color: var(--pdtm-ink);
  text-transform: uppercase; line-height: 42px;
}
.pdtm__mselect:focus { outline: 2px solid var(--pdtm-chip-on-line); outline-offset: 1px; }
.pdtm__mchevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; pointer-events: none; color: var(--pdtm-ink);
}

/* ---------- karuzela ---------- */
.pdtm__viewport { max-width: var(--pdtm-max); margin: 0 auto; }
.pdtm__track {
  display: flex; gap: var(--pdtm-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px; align-items: stretch;
}
.pdtm__track::-webkit-scrollbar { display: none; }
.pdtm__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.pdtm-card {
  flex: 0 0 calc((100% - (var(--pdtm-visible) - 1) * var(--pdtm-gap)) / var(--pdtm-visible));
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate;           /* plakietka wchodzi na ramkę karty */
}
.pdtm-card[hidden] { display: none !important; }

.pdtm-card__badges {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: -13px; min-height: 22px;
}
.pdtm-card__badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border: 1px solid var(--pdtm-badge-line); border-radius: 20px;
  background: var(--pdtm-badge-bg); color: var(--pdtm-badge-ink);
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 400; font-size: 12px; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap;
}

.pdtm-card__box {
  position: relative; z-index: 1;
  flex: 1 1 auto; width: 100%;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--pdtm-line); border-radius: var(--pdtm-radius);
  overflow: hidden;
}

.pdtm-card__media {
  position: relative; flex: 0 0 auto;
  aspect-ratio: 285 / 175;
  border: 1px solid var(--pdtm-line); border-radius: var(--pdtm-radius);
  overflow: hidden; background: #fff;
}
.pdtm img.pdtm-card__img {
  display: block; width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center;
}
.pdtm .pdtm-card--contain img.pdtm-card__img { object-fit: contain; }
.pdtm-card__caption {
  position: absolute; right: 16px; bottom: 12px;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pdtm-ink2); white-space: nowrap;
}

.pdtm-card__content {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 16px 12px; text-align: left;
}
.pdtm-card__name {
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700 !important; font-size: 20px; line-height: 1.4; color: var(--pdtm-ink);
}
.pdtm-card__desc {
  margin-top: 4px !important; padding: 0 4px;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--pdtm-body);
}
.pdtm-card__price { padding: 6px 4px 0; }
.pdtm-card__old {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; line-height: 1.4;
  color: var(--pdtm-gray); text-decoration: line-through;
}
.pdtm-card__prow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pdtm-card__from, .pdtm-card__per {
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--pdtm-ink2);
}
.pdtm-card__amount {
  font-family: 'Rubik', system-ui, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--pdtm-red);
}
.pdtm-card__meta {
  display: flex; align-items: center; gap: 4px; padding: 0 4px;
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--pdtm-ink2);
}
.pdtm-card__dotsep { width: 4px; height: 4px; border-radius: 50%; background: var(--pdtm-ink2); flex: 0 0 auto; }

.pdtm-card__foot { margin-top: auto; padding-top: 12px; }
.pdtm .pdtm-card__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px; text-align: center;
  border: 1px solid var(--pdtm-body); border-radius: var(--pdtm-radius);
  background: #fff; color: var(--pdtm-ink2) !important; text-decoration: none;
  font-family: 'Rubik', system-ui, Arial, sans-serif !important; font-weight: 700; font-size: 14px; line-height: 1;
  text-transform: uppercase; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pdtm .pdtm-card__cta:hover, .pdtm .pdtm-card__cta:focus, .pdtm .pdtm-card__cta:active {
  background: var(--pdtm-chip-on-bg) !important; border-color: var(--pdtm-chip-on-line) !important;
  color: var(--pdtm-chip-ink) !important;
}

/* ---------- nawigacja: strzałki + kropki ---------- */
.pdtm__nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 24px;
}
.pdtm__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--pdtm-body);
  cursor: pointer;
}
.pdtm .pdtm__arrow:hover { background: rgba(0, 0, 0, .05) !important; color: var(--pdtm-body) !important; }
.pdtm__arrow svg { width: 24px; height: 24px; display: block; }
.pdtm__arrow--prev svg { transform: scaleX(-1); }
.pdtm__arrow[disabled] { opacity: .3; cursor: default; }
/* strzałki tylko dla mobile / cała nawigacja tylko dla mobile — reguły mobilne
   (inline, po ID instancji) przywracają im display */
.pdtm--arrows-mobile .pdtm__arrow { display: none; }
.pdtm--nav-mobile .pdtm__nav { display: none; }
.pdtm--dots-mobile .pdtm__dots { display: none; }
.pdtm__dots { display: flex; align-items: center; gap: 10px; }
.pdtm__dot {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pdtm-dot); cursor: pointer;
}
.pdtm .pdtm__dot.is-active { background: var(--pdtm-dot-on) !important; }
.pdtm .pdtm__dot:hover { background: var(--pdtm-dot-on) !important; }

.pdtm__empty {
  max-width: var(--pdtm-max); margin: 0 auto; padding: 24px; text-align: center;
  font-family: 'Montserrat', Arial, sans-serif; color: var(--pdtm-body);
}