/* Komunikaty dla partnerów - slider nad przyciskiem "Dostępność tkanin i cenniki" */

.mtmkom {
  --mk-ink: #1a1a1a;
  --mk-muted: #6b6b6b;
  --mk-line: #e4e1dc;
  --mk-navy: #1c3661;
  --mk-navy-hover: #2b4d85;
  --mk-btn: #111111;
  --mk-btn-hover: #3a3a3a;
  /* 1.1.8: 406 px (+30% względem 312); na niskim oknie maleje, żeby karta się mieściła */
  --mk-img: 406px;
  --mk-img: min(406px, calc(100vh - 200px));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 18px;
  padding: 26px 64px 14px;
  /* bardzo delikatne tło: mleczna szyba, zdjęcie strony prześwituje */
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  color: var(--mk-ink);
  /* delikatna poświata - czytelność na jasnym, ale nierównym tle strony */
  text-shadow: 0 0 14px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .8);
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}
.mtmkom *,
.mtmkom *::before,
.mtmkom *::after { box-sizing: border-box; }
.mtmkom.is-single { padding-bottom: 26px; }
.mtmkom.is-single:not(.is-narrow) { padding-left: 32px; padding-right: 48px; }

/* wszystkie slajdy w jednej komórce siatki: wysokość = najwyższy slajd,
   więc strona nie skacze przy zmianie slajdu ze zdjęciem na sam tekst */
.mtmkom-track { display: grid; }
.mtmkom-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.mtmkom-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}

.mtmkom-media {
  flex: 0 0 var(--mk-img);
  width: var(--mk-img);
  height: var(--mk-img);
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #f1eee9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.mtmkom-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .4s ease;
}
.mtmkom a.mtmkom-media:hover .mtmkom-img { transform: scale(1.03); }

.mtmkom-body { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.mtmkom-slide.no-img .mtmkom-body { flex: 0 1 620px; text-align: center; }
/* 1.1.9+: ze zdjęciem napisy stoją na środku między zdjęciem a prawą strzałką
   (32 px od zdjęcia, 32 px od strzałki: strzałka kończy się 56 px od krawędzi,
   slajd 64 px od krawędzi, więc 24 px dopełnienia z prawej) */
.mtmkom:not(.is-narrow) .mtmkom-slide.has-img .mtmkom-body {
  flex: 1 1 0;
  max-width: none;
  padding-right: 24px;
  text-align: center;
}
.mtmkom.is-single:not(.is-narrow) .mtmkom-slide.has-img .mtmkom-body { padding-right: 0; }

.mtmkom .mtmkom-label {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--mk-ink);
}

.mtmkom .mtmkom-title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--mk-ink);
  overflow-wrap: anywhere;
}
.mtmkom.is-narrow .mtmkom-title { font-size: 21px; }

/* 1.2.18: pod ostatnią linią tekstu zostaje pusty pasek wiersza (interlinia + miejsce
   na ogonki), przez co sam napis wyglądał na przesunięty w górę - kompensacja 7 px.
   Nie dotyczy slajdów, w których na końcu jest przycisk. */
.mtmkom .mtmkom-body > .mtmkom-text:last-child,
.mtmkom .mtmkom-body > .mtmkom-title:last-child { margin-bottom: -7px; }

.mtmkom .mtmkom-text {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--mk-ink);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Przycisk z linkiem - w stylu „Dostępność tkanin i cenniki” (moduł tkaniny).
   Wartości domyślne poniżej; skrypt nadpisuje zmienne --mk-cta-* tym,
   co faktycznie ma przycisk tkanin na stronie. Hover = odwrócone kolory. */
.mtmkom,
.mtmkom-backdrop {
  --mk-cta-bg: #ffffff;
  --mk-cta-fg: #111111;
  --mk-cta-border: 2px solid #111111;
  --mk-cta-radius: 999px;
  --mk-cta-font: inherit;
  --mk-cta-size: 11px;
  --mk-cta-weight: 600;
  --mk-cta-spacing: .1em;
  --mk-cta-padding: 8px 18px;
  --mk-cta-line: 1.3;
  --mk-cta-minw: 226px;
  --mk-cta-transform: uppercase;
}
.mtmkom a.mtmkom-cta,
.mtmkom a.mtmkom-cta:link,
.mtmkom a.mtmkom-cta:visited {
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: var(--mk-cta-minw);
  max-width: 100%;
  margin-top: 18px;
  padding: var(--mk-cta-padding);
  border: var(--mk-cta-border);
  border-radius: var(--mk-cta-radius);
  background: var(--mk-cta-bg);
  color: var(--mk-cta-fg);
  font-family: var(--mk-cta-font);
  font-size: var(--mk-cta-size);
  font-weight: var(--mk-cta-weight);
  letter-spacing: var(--mk-cta-spacing);
  text-transform: var(--mk-cta-transform);
  line-height: var(--mk-cta-line);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mtmkom a.mtmkom-cta:hover,
.mtmkom a.mtmkom-cta:focus {
  background: var(--mk-cta-fg);
  color: var(--mk-cta-bg);
  text-decoration: none;
}

/* nawigacja */
.mtmkom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 1.2.16: pasek ma 44 px wysokości, a kropki są w nim wyśrodkowane, więc odstęp
     liczy się razem z tym zapasem - 18 px daje wizualnie tyle samo co u góry karty */
  margin-top: 18px;
}
.mtmkom button.mtmkom-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 1.1.13: bez białego kółka i obwódki - sama ikona */
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mk-ink);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.mtmkom button.mtmkom-arrow:hover { background: rgba(0, 0, 0, .06); color: var(--mk-btn); }
.mtmkom:not(.is-narrow) .mtmkom-arrow {
  position: absolute;
  top: calc(26px + (100% - 26px - 58px) / 2);
  transform: translateY(-50%);
}
.mtmkom:not(.is-narrow) .mtmkom-prev { left: 12px; }
.mtmkom:not(.is-narrow) .mtmkom-next { right: 12px; }

.mtmkom-dots { display: flex; align-items: center; }
.mtmkom button.mtmkom-dot {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}
.mtmkom-dot span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: rgba(26, 26, 26, .28);
  transition: width .25s ease, background-color .25s ease;
}
.mtmkom button.mtmkom-dot:hover span { background: rgba(26, 26, 26, .55); }
.mtmkom button.mtmkom-dot.is-active span { width: 24px; background: var(--mk-btn); }

.mtmkom button.mtmkom-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mk-ink);
  z-index: 2;
  /* ikona czytelna także na zdjęciu (telefon: × stoi w rogu zdjęcia) */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255, 255, 255, .9));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}
.mtmkom button.mtmkom-close:hover { background: rgba(0, 0, 0, .06); color: #000; }

.mtmkom button:focus-visible,
.mtmkom a:focus-visible {
  outline: 3px solid var(--mk-btn);
  outline-offset: 2px;
}

/* wąski slider (telefon, wąska kolumna) - zdjęcie nad tekstem */
/* 1.2.14: luźniej u góry i nad paskiem ze strzałkami/kropkami */
.mtmkom.is-narrow { padding: 26px 16px 16px; border-radius: 16px; }
.mtmkom.is-narrow.is-single { padding-bottom: 26px; }
.mtmkom.is-narrow .mtmkom-slide { flex-direction: column; align-items: stretch; gap: 14px; }
.mtmkom.is-narrow .mtmkom-media {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: 390px;
}
.mtmkom.is-narrow .mtmkom-slide .mtmkom-body { flex: 0 0 auto; max-width: none; text-align: center; }
.mtmkom.is-narrow .mtmkom-text { font-size: 17px; }
.mtmkom.is-narrow a.mtmkom-cta { display: inline-flex; margin: 14px auto 0; }
@media (max-width: 599px) {
  /* telefon: przycisk jak „Dostępność tkanin i cenniki” - na całą szerokość */
  .mtmkom.is-narrow a.mtmkom-cta { display: flex; width: 100%; min-width: 0; }
}
.mtmkom.is-narrow .mtmkom-nav { margin-top: 18px; justify-content: space-between; }
.mtmkom.is-narrow button.mtmkom-close { top: 8px; right: 8px; }
/* bez aspect-ratio (starsze Safari) - stała wysokość */
@supports not (aspect-ratio: 1) {
  .mtmkom.is-narrow .mtmkom-media { height: 58vw; max-height: 390px; }
}
/* etykieta ma przed sobą × na telefonie bez zdjęcia - odsuń tekst */
.mtmkom.is-narrow .mtmkom-slide.no-img .mtmkom-body { padding: 0 22px; }

@media (prefers-reduced-motion: reduce) {
  .mtmkom-slide,
  .mtmkom-slide.is-active,
  .mtmkom-img,
  .mtmkom-dot span { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Na środku strony głównej                                            */
/* ------------------------------------------------------------------ */
.mtmkom.is-center {
  position: fixed;
  /* 1.2.12: niżej niż menu i wybór języka w motywie; wartość z panelu */
  z-index: var(--mk-z, 90);
  top: 50%;
  left: 50%;
  width: 1000px;
  max-width: calc(100vw - 32px);
  margin: 0;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
  animation: mtmkom-in .4s ease both;
}
.mtmkom.is-center.text-only { width: 600px; }
.mtmkom.is-center.is-narrow .mtmkom-media {
  aspect-ratio: auto;
  height: 260px; /* zapas dla przeglądarek bez clamp() */
  height: var(--mk-img-h, clamp(200px, 42vh, 372px)); /* 1.1.8: +30%; w kolumnie z uwagami skrypt może zmniejszyć */
  max-height: none;
}
.mtmkom.is-center.is-single.is-narrow .mtmkom-slide.no-img .mtmkom-body { padding: 0 26px; }
.mtmkom.is-center.is-single:not(.is-narrow) .mtmkom-slide.no-img .mtmkom-body { padding: 0 20px; }

@keyframes mtmkom-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mtmkom.is-center { animation: none; }
}
@media print {
  .mtmkom.is-center { display: none; }
}

/* przeglądarki bez rozmycia tła - odrobinę mocniejsza biel, żeby tekst był czytelny */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mtmkom { background: rgba(255, 255, 255, .72); }
}

/* telefon: × bez kółka nie może stać na zdjęciu - schodzi pod niego SAMO ZDJĘCIE,
   a nie cała karta; inaczej slajdy z samym tekstem przestają być na środku (1.2.13) */
.mtmkom.is-narrow.has-close .mtmkom-slide.has-img .mtmkom-media { margin-top: 30px; }
.mtmkom.is-narrow.has-close .mtmkom-slide.no-img .mtmkom-body { padding-right: 30px; padding-left: 30px; }
.mtmkom.is-narrow.has-close button.mtmkom-close { top: 6px; right: 6px; }

/* ================================================================== */
/* 1.2.0: uwagi w lewym górnym rogu                                    */
/* ================================================================== */
.mtmkom-notes {
  /* twarde zerowanie - motyw sklepu nie może dołożyć tu tła, ramki ani wysokości */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  position: fixed;
  z-index: calc(var(--mk-z, 90) + 1);
  top: 80px;
  left: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}
.mtmkom-notes *,
.mtmkom-notes *::before,
.mtmkom-notes *::after { box-sizing: border-box; }
.mtmkom-notes:not(.in-stack) { overflow-y: auto; overscroll-behavior: contain; }
.mtmkom-notes li.mtmkom-note[hidden] { display: none; }
.mtmkom-notes ul.mtmkom-notes-list {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mtmkom-notes li.mtmkom-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 6px 10px 12px;
  list-style: none;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .7);
  /* pasek z lewej + trójkąt ostrzeżenia (wariant B), czarne */
  border-left: 3px solid #1a1a1a;
  border-radius: 0 14px 14px 0;
  /* 1.2.11: bez cienia - w przerwach między kartami rysował ciemniejszy pas */
  box-shadow: none;
  color: #1a1a1a;
  transition: opacity .22s ease, transform .22s ease;
  animation: mtmkom-note-in .35s ease both;
}
.mtmkom-notes li.mtmkom-note::before,
.mtmkom-notes li.mtmkom-note::marker { content: none; }
.mtmkom-notes li.mtmkom-note.is-leaving { opacity: 0; transform: translateX(-14px); }
.mtmkom-notes .mtmkom-note-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: #1a1a1a;
}
.mtmkom-notes .mtmkom-note-icon svg { display: block; width: 18px; height: 18px; }
.mtmkom-notes .mtmkom-note-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: 4px;
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* × bez obwódki i bez tła */
.mtmkom-notes button.mtmkom-note-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mtmkom-notes button.mtmkom-note-x:hover { background: rgba(0, 0, 0, .06); }
.mtmkom-notes button.mtmkom-note-x:focus-visible { outline: 3px solid #111; outline-offset: 1px; }

@keyframes mtmkom-note-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes mtmkom-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* jedna kolumna, gdy uwagi i slider nachodziłyby na siebie (i na telefonie) */
.mtmkom-notes.is-over li.mtmkom-note {
  /* nad banerem - mocniejsze tło, żeby się od niego odcinały (nadal bez cienia) */
  background: rgba(255, 255, 255, .84);
}

.mtmkom.is-center.is-side {
  /* obok komunikatów: poziomo ustawia skrypt (left/width), pionowo nadal środek okna */
  max-width: none;
  transform: translateY(-50%);
  animation-name: mtmkom-side-in;
}
@keyframes mtmkom-side-in {
  from { opacity: 0; transform: translateY(-46%); }
  to { opacity: 1; transform: translateY(-50%); }
}

.mtmkom-stack {
  position: fixed;
  z-index: var(--mk-z, 90);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px 8px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
.mtmkom-stack > * { pointer-events: auto; flex: 0 0 auto; }
.mtmkom-notes.in-stack {
  position: relative;
  top: auto;
  left: auto;
  align-self: flex-start;
  max-width: 100%;
}
.mtmkom.is-center.in-stack {
  position: relative;
  top: auto;
  left: auto;
  margin: auto 0;
  transform: none;
  overflow: visible;
  animation: mtmkom-fade .4s ease both;
}
@media (max-width: 599px) {
  .mtmkom-notes.in-stack { align-self: stretch; width: auto; }
}

/* okienko „Zamknąć ten komunikat na stałe?” */
.mtmkom-backdrop {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .35);
  animation: mtmkom-fade .2s ease both;
}
.mtmkom-backdrop .mtmkom-dialog {
  width: 100%;
  max-width: 400px;
  padding: 26px 26px 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
  color: #1a1a1a;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
.mtmkom-backdrop .mtmkom-dialog-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}
.mtmkom-backdrop .mtmkom-dialog-quote {
  margin: 0 0 10px;
  padding: 0 0 0 12px;
  border-left: 2px solid #d9d9d9;
  color: #444;
  overflow-wrap: anywhere;
}
.mtmkom-backdrop .mtmkom-dialog-hint { margin: 0 0 22px; font-size: 13px; color: #6b6b6b; }
.mtmkom-backdrop .mtmkom-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.mtmkom-backdrop button.mtmkom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--mk-cta-padding);
  border: var(--mk-cta-border);
  border-radius: var(--mk-cta-radius);
  background: var(--mk-cta-bg);
  color: var(--mk-cta-fg);
  font-family: var(--mk-cta-font);
  font-size: var(--mk-cta-size);
  font-weight: var(--mk-cta-weight);
  letter-spacing: var(--mk-cta-spacing);
  text-transform: var(--mk-cta-transform);
  line-height: var(--mk-cta-line);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.mtmkom-backdrop button.mtmkom-btn.is-primary,
.mtmkom-backdrop button.mtmkom-btn:hover {
  background: var(--mk-cta-fg);
  color: var(--mk-cta-bg);
}
.mtmkom-backdrop button.mtmkom-btn.is-primary:hover { opacity: .85; }
.mtmkom-backdrop button.mtmkom-btn:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
@media (max-width: 420px) {
  .mtmkom-backdrop .mtmkom-dialog-actions { flex-direction: column-reverse; }
  .mtmkom-backdrop button.mtmkom-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mtmkom-notes li.mtmkom-note,
  .mtmkom-backdrop,
  .mtmkom.is-center.in-stack { animation: none; transition: none; }
}
@media print {
  .mtmkom-notes, .mtmkom-stack, .mtmkom-backdrop { display: none; }
}

.mtmkom-notes.is-settled li.mtmkom-note,
.mtmkom.is-center.is-settled { animation: none; }

/* ================================================================== */
/* Zapasy dla starszych przeglądarek                                   */
/* ================================================================== */

/* Safari < 14.1: brak „gap” we flexboksie - odstępy marginesami */
.mtmkom-no-gap .mtmkom-slide.has-img .mtmkom-media { margin-right: 32px; }
.mtmkom-no-gap .mtmkom.is-narrow .mtmkom-slide.has-img .mtmkom-media { margin-right: 0; margin-bottom: 14px; }
.mtmkom-no-gap .mtmkom-notes li.mtmkom-note + li.mtmkom-note { margin-top: 8px; }
.mtmkom-no-gap .mtmkom-notes li.mtmkom-note .mtmkom-note-text { margin-left: 8px; }
.mtmkom-no-gap .mtmkom-nav .mtmkom-dots { margin: 0 8px; }
.mtmkom-no-gap .mtmkom-backdrop .mtmkom-btn + .mtmkom-btn { margin-left: 10px; }
.mtmkom-no-gap .mtmkom-stack > * + * { margin-top: 14px; }

/* Safari < 15.4: brak :focus-visible - obrys przy zwykłym fokusie */
@supports not selector(:focus-visible) {
  .mtmkom button:focus,
  .mtmkom a:focus,
  .mtmkom-notes button:focus,
  .mtmkom-backdrop button:focus { outline: 3px solid #111; outline-offset: 2px; }
}