/* Malarto Design System — komponenty
   Wymaga malarto-tokens.css. Klasy z prefiksem .m- są niezależne od prototypu
   i od WordPressa; w motywie blokowym można je podpiąć do bloków przez
   „Dodatkowe klasy CSS” albo odwzorować w theme.json/style.css. */

/* Baza */
/* Dotknięcie palcem nie zostawia domyślnego podświetlenia przeglądarki. Chrome maluje wtedy
   rgba(51, 181, 229, .4) — jedyny błękit w ciepłej palecie Malarto — na każdym klikalnym
   elemencie, także na karcie Terminu i chipie. Informację zwrotną niesie atom .m-press (:active),
   więc podświetlenie jest zbędne. */
html { -webkit-tap-highlight-color: transparent; }
.m-root { background: var(--malarto-paper); color: var(--malarto-ink); font: var(--malarto-text-base)/var(--malarto-leading-base) var(--malarto-font-sans); }
.m-root *, .m-root *::before, .m-root *::after { box-sizing: border-box; }
.m-root :focus-visible { outline: var(--malarto-focus); outline-offset: 2px; }
/* :where() zeruje specyficzność, żeby komponenty (.m-btn itd.) zawsze wygrywały z bazą linku. */
:where(.m-root) a { color: inherit; text-underline-offset: 3px; }

/* Atom „interaktywny”: wspólny efekt naciśnięcia/uniesienia dla każdego elementu klikalnego.
   Hover tylko na urządzeniach z kursorem; :active działa też na dotyku. */
:is(.m-press,.m-btn,.m-chip,.m-social,.m-nav__link,.m-stepper button,.m-media__arrow,.m-media__thumb,.m-lightbox__nav,.m-lightbox__close,.m-lightbox__thumbs button) { transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, opacity .14s ease; will-change: transform; }
@media (hover: hover) {
  :is(.m-press,.m-btn,.m-chip,.m-social,.m-nav__link,.m-stepper button,.m-media__arrow,.m-media__thumb,.m-lightbox__nav,.m-lightbox__close,.m-lightbox__thumbs button):not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(48, 44, 40, .14); }
}
:is(.m-press,.m-btn,.m-chip,.m-social,.m-nav__link,.m-stepper button,.m-media__arrow,.m-media__thumb,.m-lightbox__nav,.m-lightbox__close,.m-lightbox__thumbs button):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.97); box-shadow: none; transition-duration: .05s; }
@media (prefers-reduced-motion: reduce) { :is(.m-press,.m-btn,.m-chip,.m-social,.m-nav__link) { transform: none !important; } }
/* Modyfikator .m-still: element klikalny bez ruchu (wiersz listy, akcja w karcie, link tekstowy) – reaguje tylko kolorem lub tłem. */
.m-still, .m-still:hover, .m-still:active { transform: none !important; box-shadow: none !important; }
.m-shell { width: min(calc(100% - var(--malarto-gutter)), var(--malarto-max)); margin-inline: auto; }
.m-shell--narrow { max-width: var(--malarto-content); }

/* Typografia */
.m-h1, .m-h2, .m-h3, .m-lede, .m-p { margin-top: 0; }
.m-h1 { font: var(--malarto-weight-heavy) var(--malarto-size-h1)/1.02 var(--malarto-font-sans); letter-spacing: var(--malarto-tracking-tight); margin-bottom: var(--malarto-s5); max-width: 16ch; text-wrap: balance; }
.m-h1--page { font-size: var(--malarto-size-h1-page); }
.m-h2 { font: var(--malarto-weight-bold) var(--malarto-size-h2)/1.15 var(--malarto-font-sans); letter-spacing: -0.01em; margin-bottom: var(--malarto-s4); max-width: var(--malarto-heading-measure); text-wrap: pretty; }
.m-h3 { font-size: 18px; line-height: 1.3; font-weight: var(--malarto-weight-semibold); margin-bottom: var(--malarto-s2); }
.m-lede { font-size: var(--malarto-size-lg); max-width: 44ch; }
.m-kicker { display: block; margin-bottom: var(--malarto-s2); font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-bold); text-transform: uppercase; letter-spacing: var(--malarto-tracking-caps); color: var(--malarto-glaze-dark); }
.m-label { display: inline-flex; width: max-content; max-width: 100%; min-width: 0; overflow-wrap: anywhere; margin-bottom: 10px; color: var(--malarto-glaze-dark); font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-heavy); text-transform: uppercase; letter-spacing: .08em; }
.m-label a { min-width: 0; max-width: 100%; color: inherit; text-decoration: none; }
.m-hint { font-size: var(--malarto-size-xs); color: var(--malarto-muted); }
.m-muted { color: var(--malarto-muted); }
.m-price { font: var(--malarto-weight-heavy) var(--malarto-size-price)/1.1 var(--malarto-font-sans); margin: var(--malarto-s2) 0; }
.m-breadcrumbs { font-size: 13px; color: var(--malarto-muted); margin-bottom: var(--malarto-s3); }

/* Przyciski */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--malarto-s2); min-height: var(--malarto-control-h); padding: 10px 18px; border: 1px solid var(--malarto-ink); border-radius: var(--malarto-radius); background: var(--malarto-white); color: var(--malarto-ink); font: var(--malarto-weight-bold) var(--malarto-size-md) var(--malarto-font-sans); text-decoration: none; cursor: pointer; }
.m-btn:hover { background: var(--malarto-white); }
/* Biały tekst na ciemniejszym istniejącym akcencie marki zachowuje kontrast AA także przy 16 px. */
.m-btn--primary, .m-btn--primary:hover { background: var(--malarto-glaze-dark); border-color: var(--malarto-glaze-dark); color: #fff; }
.m-btn--primary:hover { background: var(--malarto-glaze-dark); border-color: var(--malarto-glaze-dark); }
.m-btn--ghost { min-height: auto; padding: 4px 0; border-color: transparent; background: transparent; text-decoration: underline; }
.m-btn--ghost:hover { background: transparent; box-shadow: none !important; transform: none !important; color: var(--malarto-glaze-dark); }
.m-btn--ghost:active { transform: none !important; color: var(--malarto-glaze); }
/* Miękki drugi plan: wypełnienie piaskiem bez obrysu. Do akcji powtarzanej w liście,
   gdzie rząd obrysowanych prostokątów robi się kanciasty. */
.m-btn--soft, .m-btn--soft:hover { border-color: transparent; background: var(--malarto-sand); color: var(--malarto-ink); }
.m-btn--soft:hover { background: #ece5da; }
.m-btn--flat { border-color: var(--malarto-line); }
.m-btn--flat:hover { background: var(--malarto-white); border-color: var(--malarto-ink); box-shadow: none !important; transform: none !important; }
.m-btn--inverse, .m-btn--inverse:hover { border-color: #fff; background: transparent; color: #fff; }
.m-btn--inverse:hover { background: rgba(255, 255, 255, .12); }
.m-btn--small { min-height: var(--malarto-control-h-sm); padding: 8px 13px; font-size: var(--malarto-size-sm); }
.m-btn--large { min-height: var(--malarto-control-h-lg); padding: 14px 24px; font-size: 18px; border-radius: 14px; }
.m-btn:disabled, .m-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.m-actions { display: flex; flex-wrap: wrap; gap: var(--malarto-s3); }

/* Chipy i odznaki */
.m-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 8px 13px; border: 1px solid var(--malarto-line); border-radius: var(--malarto-radius-pill); background: #fff; color: var(--malarto-ink); font: var(--malarto-weight-bold) var(--malarto-size-sm) var(--malarto-font-sans); cursor: pointer; }
.m-chip[aria-pressed="true"], .m-chip[aria-current="true"], .m-chip--active { border-color: var(--malarto-ink); background: var(--malarto-ink); color: #fff; }
.m-chip--preview { border-style: dashed; color: var(--malarto-glaze-dark); }
.m-chip:disabled, .m-chip[aria-disabled="true"] { cursor: default; opacity: .7; transform: none !important; box-shadow: none !important; }
.m-chip--caution { background: var(--malarto-wash); border-color: #edc7b9; }
.m-chips { display: flex; flex-wrap: wrap; gap: var(--malarto-s2); }
/* Zwijane chipy (data-chips-collapse): ukryte pozycje i chip „Pokaż więcej” — ten sam atom .m-chip. */
.m-chips > [hidden] { display: none !important; }
.m-chips__more { list-style: none; }
.m-chips__more .m-chip { border-style: dashed; color: var(--malarto-glaze-dark); }
/* Rozwinięcie mobilnej listy nie wypiera widocznych opcji. */
@media (max-width: 639px) {
  .m-chips[data-chips-preview-mobile] > .m-chips__more { flex-basis: 100%; }
}
.m-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-badge { display: inline-flex; width: max-content; padding: 3px 7px; border-radius: var(--malarto-radius-pill); background: var(--malarto-wash); font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-bold); }
.m-badge--warn { background: var(--malarto-warn); }
.m-badge--sold { background: var(--malarto-sold); color: var(--malarto-sold-ink); }
.m-badge--promo { background: var(--malarto-glaze); color: var(--malarto-white); } /* aktywna cena wcześniejsza na kadrze wiersza terminu */
.m-badge--demo { border: 1px dashed var(--malarto-muted); background: transparent; color: var(--malarto-muted); border-radius: 0; }

/* Karty */
.m-card { background: var(--malarto-white); border: 1px solid var(--malarto-line); border-radius: var(--malarto-radius); padding: 20px; box-shadow: var(--malarto-shadow-card); }
.m-card > :last-child { margin-bottom: 0; }
.m-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.m-card__head .m-label { margin-bottom: 0; }
.m-card__head .m-badge { flex: none; }
.m-card .m-datebox { margin: 14px 0 4px; }
.m-card--flat { box-shadow: none; background: var(--malarto-paper); border-radius: 14px; padding: var(--malarto-s5); }
.m-card--venue { background: var(--malarto-sand); box-shadow: none; }
.m-card--teaser { background: #fffaf0; border: 1px dashed var(--malarto-glaze); box-shadow: none; }
.m-card--dark { background: var(--malarto-ink); color: #fff; border-color: var(--malarto-ink); }
.m-card__photo { display: block; width: calc(100% + 40px); aspect-ratio: 4/3; margin: -20px -20px 18px; object-fit: cover; border-radius: var(--malarto-radius) var(--malarto-radius) 0 0; }
.m-card__photo--wide { aspect-ratio: 16/10; }
.m-card__title-xl { font-size: clamp(27px, 2.4vw, 34px); font-weight: var(--malarto-weight-heavy); line-height: 1.08; letter-spacing: var(--malarto-tracking-tight); margin: 0 0 var(--malarto-s3); }
.m-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--malarto-line); font-size: var(--malarto-size-sm); }
.m-card__meta strong { display: block; font-size: var(--malarto-size-xs); text-transform: uppercase; color: var(--malarto-muted); }
.m-card--event { display: flex; flex-direction: column; min-height: 265px; }
.m-card > .m-card__strip:last-child, .m-card__strip { margin: auto -20px -20px; padding: 14px 20px; background: var(--malarto-sand); border-top: 1px solid var(--malarto-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--malarto-s4); }
.m-card__strip small { display: block; color: var(--malarto-muted); font-weight: var(--malarto-weight-bold); }

/* Data terminu */
.m-datebox { font: var(--malarto-weight-heavy) 22px var(--malarto-font-sans); white-space: nowrap; }
.m-datebox small { display: block; font: var(--malarto-size-xs) var(--malarto-font-sans); color: var(--malarto-muted); text-transform: uppercase; }

/* Wiersz listy terminów */
/* Kafel bez ramki: zdjęcie 16:9 wyznacza wysokość, data nad opisem, cena u góry po prawej,
   akcja na dole jako przycisk drugoplanowy. Szerokość kadru liczy się z wysokości kafla,
   więc proporcja zostaje 16:9 na każdej szerokości ekranu. */
.m-row { --m-row-min: 180px; --m-row-media: calc((var(--m-row-min) - 28px) * 16 / 9); position: relative; display: grid; grid-template-columns: var(--m-row-media) minmax(0, 1fr) minmax(150px, auto); grid-template-areas: "media date offer" "media copy action"; grid-template-rows: min-content min-content; gap: 6px 22px; align-items: center; align-content: center; min-height: var(--m-row-min); padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--malarto-white); box-shadow: 0 1px 2px rgba(48, 44, 40, .06); cursor: pointer; }
.m-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--malarto-glaze); }
.m-row__thumb { position: absolute; left: 14px; top: 14px; bottom: 14px; display: block; width: var(--m-row-media); border-radius: 14px; object-fit: cover; margin: 0; overflow: hidden; background: var(--malarto-sand); }
.m-row__thumb > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* zdjęcie w figure nie może narzucać wysokości kafla */
/* Para plakietek na dole kadru: miasto po lewej, stan miejsc po prawej. Ta sama poduszka,
   ten sam cień i promień koncentryczny (promień kadru minus odsunięcie plakietki). */
.m-row__city, .m-row__state { position: absolute; bottom: 6px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 10px; border-radius: 8px; font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-heavy); line-height: 1; box-shadow: 0 2px 10px rgba(48, 44, 40, .16); }
.m-row__city { left: 6px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--malarto-ink); }
.m-row__state { right: 6px; }
/* Wariant promocji jako wstęga (2026-09-25): przyklejona do lewej krawędzi kadru u góry, z wcięciem na
   końcu jak znacznik zakładki; gradient glazury, kropka słońca i kapitaliki zamiast krzykliwego „Promocja!”. */
.m-row__state--ribbon { top: 12px; bottom: auto; left: 0; right: auto; gap: 7px; min-height: 0; padding: 7px 20px 7px 11px; border-radius: 0; background: linear-gradient(90deg, var(--malarto-glaze-dark), var(--malarto-glaze)); color: var(--malarto-white); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.m-row__state--ribbon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--malarto-sun); flex: none; }
/* Stan miejsc dostaje znacznik tylko wtedy, gdy niesie informację: odwołane, zakończone,
   wyprzedane. Domyślne „Dostępne” nie jest oznaczane — na liście przyszłych terminów nie
   wnosi nic ponad to, że termin istnieje, a zajmuje miejsce w kadrze. */
.m-row .m-datebox { grid-area: date; align-self: end; font-size: 20px; }
.m-row .m-datebox small { display: inline; margin-left: 8px; }
.m-row__body { grid-area: copy; align-self: start; min-width: 0; }
.m-row__body > * { margin: 0; }
.m-row__body .m-label { margin-bottom: 2px; }
/* Tytuł ma najwyżej dwie linie, więc dłuższa nazwa nie podnosi kafla. */
.m-row__body .m-h3, .m-row__body h2, .m-row__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-row__link { color: inherit; text-decoration: none; }
.m-row__offer { grid-area: offer; grid-row: 1 / -1; align-self: start; margin: 0; text-align: right; font-size: 18px; font-weight: var(--malarto-weight-heavy); }
.m-row__offer del { margin-right: 6px; color: var(--malarto-muted); font-size: var(--malarto-size-sm); font-weight: var(--malarto-weight-body); }
/* Akcja to atom .m-btn w wariancie głównym (wyprzedany: miękki + quiet); tu tylko miejsce w siatce i stan wyprzedany. */
.m-row__cta { grid-area: action; grid-row: 1 / -1; align-self: end; justify-self: end; white-space: nowrap; }
.m-row__cta--quiet, .m-row__cta--quiet:hover { background: var(--malarto-sand); color: var(--malarto-muted); }
.m-list { container-type: inline-size; display: grid; gap: 10px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.m-list--cards { display: grid; } /* zachowany alias: kafel jest teraz układem domyślnym */

/* Sekcje i siatki */
.m-section { padding: clamp(40px, 4.5vw, 64px) 0; }
.m-section--wash { background: var(--malarto-wash); }
.m-section--honey { background: var(--malarto-honey); }
.m-section--white { background: var(--malarto-white); border-block: 1px solid var(--malarto-line); }
.m-section--dark { background: var(--malarto-ink); color: #fff; }
.m-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--malarto-s5); margin-bottom: 28px; }
.m-section__head .m-h2 { margin-bottom: 0; }
.m-section__head p { max-width: 44ch; margin-bottom: 4px; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.m-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.m-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.m-split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; }
.m-sticky { position: sticky; top: 20px; }
.m-step { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--malarto-s4); border-radius: 50%; background: var(--malarto-sun); font-weight: var(--malarto-weight-bold); }
.m-check { margin: 0; padding: 0; list-style: none; }
.m-check li { position: relative; padding-left: 29px; }
.m-check li + li { margin-top: 10px; }
/* Ikona jak emoji ✅ (jasnozielony zaokrąglony kwadrat #72b453 — kolor z emoji Tomasza, biały ptaszek), ale jako SVG: wygląda tak samo na każdym
   systemie, nie zależy od czcionki emoji. Kolor wyłącznie w tym znaczniku, poza paletą marki (Tomasz, 2026-09-25). */
.m-check li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='5' fill='%2372b453'/%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.m-facts { margin: 0; }
.m-facts div { display: grid; grid-template-columns: 150px 1fr; gap: var(--malarto-s4); padding: var(--malarto-s3) 0; border-top: 1px solid var(--malarto-line); }
.m-facts dt { font-weight: var(--malarto-weight-bold); }
.m-facts dd { margin: 0; }

/* Hero */
.m-hero { position: relative; display: flex; align-items: center; min-height: clamp(440px, 46vw, 520px); padding: clamp(48px, 5vw, 72px) max(var(--malarto-gutter), calc((100vw - var(--malarto-max)) / 2 + 48px)); overflow: hidden; background: var(--malarto-ink) center/cover no-repeat; color: #fff; }
.m-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(28,31,31,.9) 0%, rgba(28,31,31,.67) 44%, rgba(28,31,31,.06) 82%); pointer-events: none; }
.m-hero__copy { position: relative; z-index: 2; width: min(610px, 58%); }
.m-hero__copy .m-kicker { color: var(--malarto-sun); }
.m-hero__copy .m-hint { color: #e4e0d8; }

/* Powiadomienia */
.m-notice { padding: var(--malarto-s4); border: 0; border-radius: var(--malarto-radius-sm); background: var(--malarto-cream); color: var(--malarto-ink); margin: var(--malarto-s4) 0; }
.m-notice--success { background: var(--malarto-sand); }
.m-notice--error { background: var(--malarto-danger-wash); color: var(--malarto-sold-ink); }
.m-notice--info { background: var(--malarto-wash); }

/* Formularze */
.m-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--malarto-s4); }
.m-field { display: flex; flex-direction: column; gap: 6px; }
.m-field--full { grid-column: 1 / -1; }
.m-field label { padding-left: 6px; font-weight: var(--malarto-weight-bold); font-size: var(--malarto-size-sm); }
.m-field .m-hint { padding-left: 6px; }
.m-field input, .m-field select, .m-field textarea, .m-input, .woocommerce form .form-row :is(input.input-text, select, textarea) { width: 100%; height: var(--malarto-control-h); min-height: var(--malarto-control-h); border: 1px solid var(--malarto-line); border-radius: 10px; background: #fff; padding: 10px 14px; font: inherit; line-height: 1.3; color: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
.m-field input:focus, .m-field select:focus, .m-field textarea:focus, .m-input:focus, .woocommerce form .form-row :is(input.input-text, select, textarea):focus { border-color: var(--malarto-ink); }
.m-field input:hover, .m-field select:hover, .m-field textarea:hover, .m-input:hover, .woocommerce form .form-row :is(input.input-text, select, textarea):hover { border-color: #b9b1a6; }
.m-field input:focus-visible, .m-field select:focus-visible, .m-field textarea:focus-visible, .m-input:focus-visible, .woocommerce form .form-row :is(input.input-text, select, textarea):focus-visible { border-color: var(--malarto-ink); outline: var(--malarto-focus); outline-offset: 2px; }
.m-field input::placeholder, .m-field textarea::placeholder, .woocommerce form .form-row :is(input.input-text, textarea)::placeholder { color: #a39c93; }
.m-field select, select.m-input, .woocommerce form .form-row :is(select, select.input-text) { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23302c28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; cursor: pointer; }
.m-field textarea, .woocommerce form .form-row :is(textarea, textarea.input-text) { height: auto; min-height: 90px; }
.m-field--error input, .m-field--error select, .m-field--error textarea, .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, textarea) { border-color: var(--malarto-danger); }
.m-field--error .m-hint { color: var(--malarto-danger); }
.m-checkline { display: flex; align-items: flex-start; gap: 10px; margin: var(--malarto-s2) 0; }
.m-checkline input { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--malarto-glaze); cursor: pointer; }
/* Pole wyboru w osi pierwszej linii tekstu, niezaleznie od rozmiaru pisma; starsze przegladarki zostaja przy 1px wyzej. */
.m-checkline input { margin-block-start: max(0px, calc((1lh - 18px) / 2)); }
.m-checkline span { min-width: 0; }
/* Klikniete pole nie chowa sie pod przyklejonym naglowkiem, wiec strona nie skacze przy przechodzeniu po formularzu. */
.m-field, .m-checkline, .m-select { scroll-margin-top: calc(var(--malarto-header-h, 80px) + 16px); }
.m-required { color: var(--malarto-danger); text-decoration: none; }
.m-stepper { display: grid; grid-template-columns: 44px minmax(64px, 1fr) 44px; }
.m-stepper button, .m-stepper input { height: var(--malarto-control-h); min-height: 0; padding: 0; border: 1px solid var(--malarto-line); border-radius: 0; background: #fff; text-align: center; font: var(--malarto-weight-heavy) var(--malarto-size-md) var(--malarto-font-sans); color: inherit; cursor: pointer; }
.m-stepper button:hover { background: var(--malarto-sand); box-shadow: none !important; transform: none !important; }
.m-stepper button:first-child { border-radius: 10px 0 0 10px; }
.m-stepper button:last-child { border-radius: 0 10px 10px 0; }
.m-stepper input { min-width: 0; border-inline: 0; border-radius: 0; cursor: text; }
.m-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--malarto-s4); margin: 18px 0; padding: 14px 0; border-block: 1px solid var(--malarto-line); }
.m-total strong { font-size: 24px; }

/* Nagłówek i stopka */
.m-header { position: sticky; top: 0; z-index: 40; background: var(--malarto-white); border-bottom: 1px solid var(--malarto-line); }
.m-nav { min-height: 76px; display: flex; align-items: center; gap: var(--malarto-s5); }
.m-nav__brand { width: 150px; height: 54px; overflow: hidden; }
.m-nav__brand img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-nav__links { display: flex; gap: var(--malarto-s2); margin-left: auto; align-items: center; }
.m-nav__link { border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: var(--malarto-weight-semibold) var(--malarto-size-md) var(--malarto-font-sans); color: inherit; text-decoration: none; cursor: pointer; }
.m-nav__link:hover { background: var(--malarto-sand); }
.m-footer { background: var(--malarto-ink); color: #fff; padding: 52px 0 28px; }
.m-footer__grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: var(--malarto-s7); }
.m-footer__brand img { display: block; width: 160px; height: 60px; margin-bottom: 14px; object-fit: cover; filter: brightness(0) invert(1); }
.m-footer__brand p { max-width: 34ch; color: var(--malarto-line); }
.m-footer__title { display: block; margin-bottom: 14px; color: var(--malarto-sun); font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-bold); text-transform: uppercase; letter-spacing: .09em; }
.m-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m-footer__links a { color: #fff; }
.m-social { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #726b65; border-radius: 50%; color: #fff; }
.m-social:hover { border-color: var(--malarto-sun); color: var(--malarto-sun); }
.m-footer__meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 22px; border-top: 1px solid #4d4844; color: #bdb6ae; font-size: 13px; }

/* Galeria */
.m-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.m-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--malarto-radius); }
.m-cover { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--malarto-radius-lg); }

/* Ikony */
.m-icon { display: inline-block; width: 1.1em; height: 1.1em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }

/* Atom ruchu do ponownego użycia: przy zmianie szerokości układ dojeżdża zamiast skakać.
   Wieszamy .m-fluid na elemencie, którego siatka lub wysokość zmienia się na progach. */
.m-fluid { transition: grid-template-columns var(--malarto-motion-base) var(--malarto-motion-ease), gap var(--malarto-motion-base) var(--malarto-motion-ease), padding var(--malarto-motion-base) var(--malarto-motion-ease), min-height var(--malarto-motion-base) var(--malarto-motion-ease); }
.m-fluid .m-row__thumb, .m-fluid .m-datebox { transition: width var(--malarto-motion-base) var(--malarto-motion-ease), height var(--malarto-motion-base) var(--malarto-motion-ease), font-size var(--malarto-motion-base) var(--malarto-motion-ease); }
@media (prefers-reduced-motion: reduce) { .m-fluid, .m-fluid * { transition: none !important; } }

/* Responsywność */
/* Kafel terminu skaluje się według szerokości LISTY, nie okna. Dopóki kontener mieści kadr, datę,
   opis i cenę z akcją, kafel zostaje poziomym wierszem (tak jak w makiecie na stronie Formatu);
   pionowo układa się dopiero tam, gdzie trzech kolumn nie ma już gdzie upchnąć — na telefonie.
   Tytuł zachowuje dwie linie w obu formach. */
@container (max-width: 1040px) { .m-row { --m-row-min: 172px; } }
@container (max-width: 880px) { .m-row { --m-row-min: 148px; gap: 6px 18px; } }
@container (max-width: 620px) {
  .m-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "media media" "date price" "copy copy" "action action"; gap: 10px 12px; min-height: 0; padding: 12px; }
  .m-row__thumb { position: relative; left: auto; top: auto; bottom: auto; grid-area: media; align-self: start; width: 100%; height: auto; aspect-ratio: 16/9; }
  .m-row .m-datebox { grid-area: date; align-self: center; font-size: 18px; }
  .m-row__body { grid-area: copy; }
  .m-row__body .m-h3, .m-row__body h2, .m-row__body h3 { -webkit-line-clamp: 2; }
  .m-row__offer { grid-area: price; grid-row: auto; align-self: center; justify-self: end; }
  /* Akcja idzie przez całą szerokość kafla: kciuk trafia z każdej strony ekranu. */
  .m-row__cta { grid-area: action; grid-row: auto; align-self: center; justify-self: stretch; width: 100%; }
}
/* 640–767 px: kafle zostają poziomymi wierszami jeden pod drugim. Poprzednia dwukolumnowa siatka
   dzieliła listę na komórki ~300 px, ale zapytanie kontenera mierzy CAŁĄ listę (608–730 px), więc
   kafel dostawał formę poziomą w komórce, w której kolumna opisu miała 0 px — tekst znikał. Jedna
   kolumna trzyma kontener i komórkę tą samą szerokością, więc forma kafla jest zawsze zgodna
   z miejscem, które naprawdę ma. */
@media (max-width: 899px) {
  .m-split, .m-footer__grid { grid-template-columns: 1fr; }
  .m-hero__copy { width: 100%; }
}
@media (max-width: 639px) {
  .m-form { grid-template-columns: 1fr; }
  .m-section__head { flex-direction: column; align-items: flex-start; }
  .m-facts div { grid-template-columns: 1fr; gap: 4px; }
  .m-footer__meta { flex-direction: column; }
}

/* Galeria mediów: scena 4:3 + strzałki (desktop) + kropki (mobile) + pasek miniatur.
   Zachowanie w malarto-ui.js. Przeniesione z „unified media” w prototypie. */
.m-media { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.m-media__stage { position: relative; aspect-ratio: 4/3; min-width: 0; overflow: hidden; border-radius: 14px; background: #1f1a17; cursor: zoom-in; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.m-media__stage > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: transform .2s ease; }
.m-media__stage.is-dragging { cursor: grabbing; }
.m-media__stage > img.is-entering { animation: m-media-fade .17s ease both; }
/* Kadr-widmo karuzeli (malarto-ui.js, bindMediaCarousel): sąsiad wjeżdża razem z palcem, więc
   scena trzyma drugą warstwę. Poza układem, żeby nie zmieniał wysokości kadru 4:3. */
.m-media__stage > img.m-media__stage-next { position: absolute; inset: 0; z-index: 1; }
.m-media__badge { position: absolute; z-index: 3; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 9px; border-radius: var(--malarto-radius-pill); background: rgba(48, 44, 40, .82); color: #fff; font-size: 11px; font-weight: var(--malarto-weight-heavy); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.m-media__arrow { position: absolute; z-index: 4; top: 50%; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 12px rgba(48, 44, 40, .2); color: var(--malarto-ink); cursor: pointer; transform: translateY(-50%); }
.m-media__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06) !important; }
.m-media__arrow:active { transform: translateY(-50%) scale(.94) !important; }
.m-media__arrow--prev { left: 12px; } .m-media__arrow--next { right: 12px; }
.m-media__arrow svg, .m-lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Jeden sposób wskazania zdjęcia w całym kicie: miniatura w pasku pod kadrem (także na telefonie,
   patrz breakpoint 479 px niżej). Kropki i licznik „12 / 40” zniknęły — ta sama galeria pokazywała
   raz jedno, raz drugie (próg sześciu zdjęć), a pełny ekran zawsze licznik. */
/* Pasek miniatur jest przewijany w poziomie i nie deklaruje touch-action: palec nad nim musi
   dalej przewijać stronę w pionie. `pan-x` zabraniał pionu, więc taśma była martwą strefą
   dla gestu w dół. Osie rozdziela sam gest (natywne overflow-x + pion strony). */
.m-media__thumbs { display: flex; gap: 8px; width: 100%; min-width: 0; padding: 1px 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; }
.m-media__thumbs::-webkit-scrollbar { display: none; }
/* Snap tylko pod palcem: przy myszy walczył z programowym dosuwaniem i pasek skakał dwa razy. */
@media (pointer: coarse) { .m-media__thumbs { scroll-snap-type: x proximity; } }
/* Wygaszona krawędź = widać, że pasek ma ciąg dalszy (myszą: kółko, dotykiem: przesunięcie). */
.m-media__thumbs.is-overflow { mask-image: linear-gradient(90deg, transparent 0, #000 var(--m-fade-start, 0px), #000 calc(100% - var(--m-fade-end, 0px)), transparent 100%); }
.m-media__thumb { position: relative; flex: 0 0 clamp(88px, 12vw, 112px); width: clamp(88px, 12vw, 112px); aspect-ratio: 1; box-sizing: border-box; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; overflow: hidden; scroll-snap-align: center; cursor: pointer; }
.m-media__thumb[aria-current="true"] { border-color: var(--malarto-glaze); }
/* Compact media leaves more room for nearby content and booking controls. */
.m-media--compact .m-media__thumb { flex-basis: 64px; width: 64px; height: 52px; aspect-ratio: auto; }
@media (max-width: 899px) { .m-media--compact .m-media__thumb { flex-basis: 52px; width: 52px; } }
/* W galerii sygnalizujemy skupienie samą ramką kadru — żółta obwódka rozbijała pasek miniatur. */
.m-media__thumb:focus-visible, .m-lightbox__thumbs button:focus-visible { outline: none; border-color: var(--malarto-ink); }
.m-lightbox__thumbs button:focus-visible { border-color: #fff; }
/* Sterowanie lightboxa: skupienie bialym pierscieniem na ciemnym tle, bez zoltej ramki kitu. */
.m-lightbox__close:focus-visible, .m-lightbox__zoom:focus-visible, .m-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.m-media__thumbs.is-overflow, .m-lightbox__thumbs { cursor: grab; }
.m-media__thumbs.is-dragging, .m-lightbox__thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.m-media__thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.m-media__count { font-size: var(--malarto-size-xs); font-weight: var(--malarto-weight-bold); color: var(--malarto-muted); }
.m-media--single .m-media__arrow, .m-media--single .m-media__thumbs { display: none !important; }
@keyframes m-media-fade { from { opacity: .25; } to { opacity: 1; } }

/* Lightbox (dialog pełnoekranowy) */
/* Blokada przewijania strony pod lightboxem. Samo `body { overflow: hidden }` nie wystarczało:
   dokument ma na `<html>` `overflow-x: clip`, więc overflow z body nie propaguje się na viewport
   i strona zostawała przewijalna — gest pionowy w lightboxie przesuwał ją pod spodem (na telefonie
   o 285–305 px), a po zamknięciu czytelnik był w innym miejscu niż przed otwarciem. Zamek musi
   stać na obu elementach. */
html:has(body.m-lightbox-open), body.m-lightbox-open { overflow: hidden !important; }
/* `overscroll-behavior` ucina łańcuch przewijania na krawędzi okna w przeglądarkach, które go mają;
   gest poza paskiem miniatur ubija nasłuch `touchmove` w malarto-ui.js (iOS nie słucha overflow). */
.m-lightbox { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #14110f; color: #fff; overflow: hidden; overscroll-behavior: contain; font-family: var(--malarto-font-sans); }
.m-lightbox::backdrop { background: #14110f; }
.m-lightbox__head { position: absolute; z-index: 6; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 16px; background: linear-gradient(180deg, rgba(20, 16, 13, .78), transparent); pointer-events: none; touch-action: none; }
.m-lightbox__count { font-size: 13px; font-weight: var(--malarto-weight-heavy); text-shadow: 0 1px 4px #000; }
.m-lightbox__tools { display: flex; align-items: center; gap: 8px; }
.m-lightbox__close, .m-lightbox__zoom { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(20, 16, 13, .58); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; pointer-events: auto; }
.m-lightbox__zoom svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-lightbox__zoom[aria-pressed="true"] { background: var(--malarto-glaze); }
/* Scena ma własne marginesy: kadr nie dotyka paska narzędzi ani miniatur, a overflow przycina powiększenie,
   więc zdjęcie nigdy nie wchodzi pod kafelki. Ścieżki siatki są przypięte do sceny (minmax(0, 1fr)):
   przy auto-ścieżce rosła ona do wysokości samego zdjęcia, więc max-height: 100% liczyło się od zdjęcia,
   a nie od sceny — duże kadry wychodziły poza scenę i overflow ucinał dolne zaokrąglenie. */
.m-lightbox__stage { position: absolute; inset: 72px clamp(16px, 5vw, 72px) 104px; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
/* `touch-action: none` na scenie i nagłówku, nie na całym oknie: pasek miniatur musi zostać przy
   natywnym przewijaniu palcem (`touch-action: pan-x`), a zakaz z przodka odebrałby mu je na zawsze
   (skuteczna wartość to część wspólna z przodkami). Scena nie ma czego przewijać — karuzelę prowadzi
   gest z malarto-ui.js, a pion nie należy do strony. */
/* Zdjęcie pokazuje cały kadr już w spoczynku, a powiększenie zmienia wyłącznie skalę.
   Wcześniej spoczynek był kadrem 4/3 (cover) w ramce 960×720, a powiększenie całym zdjęciem
   (contain, rozmiar naturalny): przełączenie stanu zmieniało układ obrazu w tej samej klatce,
   więc proporcja skakała, animacja nie mogła iść do kompozytora, a zbliżenie nie trafiało
   w kliknięty punkt (skala treści była w obu stanach inna). Wspólny układ usuwa wszystkie trzy. */
.m-lightbox__stage img { display: block; width: auto; height: auto; max-width: min(100%, 960px); max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); pointer-events: none; transform-origin: center center; transition: transform .18s ease; }
/* Kadr-widmo karuzeli w lightboxie: kadr jest tu wyśrodkowany w scenie i zmienia rozmiar,
   więc widmo stoi poza układem i dokłada wyśrodkowanie do przesunięcia
   (malarto-ui.js, bindMediaCarousel → opts.ghostTransform). */
.m-lightbox__stage img.m-lightbox__stage-next { position: absolute; top: 50%; left: 50%; z-index: 1; }
/* Powiększenie: kadr przesuwa się przeciąganiem, strzałki i miniatury zostają dostępne. */
.m-lightbox--zoomed .m-lightbox__stage { touch-action: none; cursor: grab; }
.m-lightbox--zoomed .m-lightbox__stage:active { cursor: grabbing; }
.m-lightbox__nav { position: absolute; z-index: 5; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--malarto-ink); cursor: pointer; transform: translateY(-50%); touch-action: none; }
.m-lightbox__nav:hover { transform: translateY(-50%) scale(1.06) !important; } .m-lightbox__nav:active { transform: translateY(-50%) scale(.94) !important; }
.m-lightbox__nav--prev { left: 14px; } .m-lightbox__nav--next { right: 14px; }
.m-lightbox__thumbs { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; gap: 8px; height: 88px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden; background: rgba(20, 16, 13, .9); scrollbar-width: none; touch-action: pan-x; }
.m-lightbox__thumbs::-webkit-scrollbar { display: none; }
.m-lightbox__thumbs button { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; transition: border-color .08s ease; }
.m-lightbox__thumbs button[aria-current="true"] { border-color: var(--malarto-glaze); }
/* Miniatury są „still” (bez ruchu pod kursorem), więc sygnał niesie sam kolor ramki —
   ten sam, co dla miniatury aktualnie pokazywanego zdjęcia. Ramka zapala się z opóźnieniem,
   żeby szybki przelot kursorem po pasku nie zapalał po kolei każdego kadru; gaśnie od razu,
   bo opóźnienie siedzi tylko w stanie hover (przejście bierze ustawienia stanu docelowego). */
.m-lightbox__thumbs button:hover { border-color: var(--malarto-glaze); transition-delay: .1s; }
/* Kadr wypełnia całą miniaturę — przy wyższym pasku zostawał biały margines nad i pod zdjęciem. */
.m-lightbox__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.m-lightbox--single .m-lightbox__nav, .m-lightbox--single .m-lightbox__thumbs { display: none; }
.m-lightbox--single .m-lightbox__stage { bottom: 32px; }
@media (max-width: 479px) {
  /* Telefon: pod kadrem zostaje pasek miniatur — mniejszy niż na szerszym ekranie, ale ten sam
     co w lightboxie i ten sam co na desktopie. Para strzałek po bokach sceny była hałasem obok
     gestu przesunięcia i strzałek lightboxa, a kropki/licznik pokazywały co innego niż pełny ekran. */
  .m-media__arrow { display: none !important; }
  .m-media__thumbs { gap: 6px; padding-bottom: 2px; }
  .m-media__thumb { flex-basis: 56px; width: 56px; border-radius: 8px; }
  .m-lightbox__head { min-height: 56px; padding: 8px 12px; }
  .m-lightbox__stage { inset: 62px 12px 84px; }
  .m-lightbox__nav { width: 42px; height: 42px; }
  .m-lightbox__thumbs { height: 72px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .m-media__stage > img.is-entering { animation: none; } .m-lightbox__stage img { transition: none; } }

/* FAQ / akordeon (natywny details, bez JS) */
.m-faq { border-top: 1px solid var(--malarto-line); }
.m-faq details { border-bottom: 1px solid var(--malarto-line); }
.m-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: var(--malarto-weight-bold); cursor: pointer; list-style: none; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--malarto-ink); border-bottom: 2px solid var(--malarto-ink); transform: rotate(45deg); transition: transform .18s ease; margin-right: 4px; }
.m-faq details[open] summary::after { transform: rotate(-135deg); }
.m-faq__body { overflow: hidden; }
.m-faq__body > * { margin: 0 0 16px; max-width: 64ch; }
.m-faq details > :not(summary):not(.m-faq__body) { margin: 0 0 16px; max-width: 64ch; }

/* Dropdown menu (akcje, sortowanie, „więcej”) — natywny details, bez JS.
   Do wyboru wartości w formularzu używamy .m-field select; to jest menu poleceń. */
.m-dropdown { position: relative; display: inline-block; }
.m-dropdown > summary { list-style: none; cursor: pointer; }
.m-dropdown > summary::-webkit-details-marker { display: none; }
.m-dropdown > summary .m-btn::after, .m-dropdown > summary.m-btn::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.m-dropdown[open] > summary .m-btn::after, .m-dropdown[open] > summary.m-btn::after { transform: translateY(2px) rotate(-135deg); }
.m-dropdown > summary.m-btn { display: inline-flex; line-height: 1; }
.m-dropdown__menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--malarto-white); border: 1px solid var(--malarto-line); border-radius: var(--malarto-radius); box-shadow: var(--malarto-shadow-float); animation: m-dropdown-in .14s ease; }
.m-dropdown--right .m-dropdown__menu { left: auto; right: 0; }
.m-dropdown__menu li + li { margin-top: 2px; }
.m-dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: var(--malarto-weight-semibold) var(--malarto-size-sm) var(--malarto-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.m-dropdown__item:hover, .m-dropdown__item:focus-visible { background: var(--malarto-sand); outline: none; }
.m-dropdown__item[aria-current="true"] { background: var(--malarto-wash); color: var(--malarto-glaze-dark); }
.m-dropdown__item--danger { color: var(--malarto-danger); }
.m-dropdown__sep { height: 1px; margin: 6px 4px; background: var(--malarto-line); }
@keyframes m-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Karta klikalna w całości (wzór „stretched link”): link tytułu rozciąga się na kartę,
   przycisk w środku pozostaje osobnym celem. Reakcja: obrys i cień, bez ruchu. */
.m-card--link { position: relative; }
.m-card--link .m-card__link { color: inherit; text-decoration: none; }
.m-card--link .m-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.m-card--link .m-btn, .m-card--link .m-chip { position: relative; z-index: 1; }
.m-card--link:hover { cursor: pointer; }
.m-card--link:has(.m-card__link:focus-visible) { outline: var(--malarto-focus); outline-offset: 2px; }
.m-card--link .m-card__link:focus-visible { outline: none; }


/* Custom select .m-select: przycisk + lista w stylu kitu, natywny <select> zostaje jako źródło wartości
   (formularz, WooCommerce, czytniki ekranu). Na dotyku pokazujemy natywne menu systemowe. */
.m-select { position: relative; }
/* Bez JS (i na dotyku) zostaje widoczny natywny select w stylu pola kitu; niewidocznym źródłem wartości
   pod własną listą staje się dopiero po zbudowaniu listy przez skrypt (.m-select--custom). */
.m-select > select { width: 100%; height: var(--malarto-control-h); padding: 0 42px 0 14px; border: 1px solid var(--malarto-line); border-radius: 10px; background: #fff no-repeat right 14px center / 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23302c28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); color: inherit; font: inherit; appearance: none; -webkit-appearance: none; }
.m-select--custom > select { position: absolute; inset: 0; height: 100%; padding: 0; opacity: 0; z-index: 1; cursor: pointer; }
.m-select__button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: var(--malarto-control-h); padding: 0 14px; border: 1px solid var(--malarto-line); border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease; }
.m-select__button::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.m-select[aria-expanded="true"] .m-select__button::after { transform: translateY(2px) rotate(-135deg); }
.m-select__button { line-height: 1; }
.m-select__button:hover { border-color: #b9b1a6; }
.m-select__button:focus-visible, .m-select[aria-expanded="true"] .m-select__button { border-color: var(--malarto-ink); outline: var(--malarto-focus); outline-offset: 2px; }
.m-select__list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; background: var(--malarto-white); border: 1px solid var(--malarto-line); border-radius: var(--malarto-radius); box-shadow: var(--malarto-shadow-float); animation: m-dropdown-in .14s ease; }
.m-select__list[hidden] { display: none; }
.m-select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: var(--malarto-size-sm); font-weight: var(--malarto-weight-semibold); cursor: pointer; }
.m-select__option:hover, .m-select__option[data-active="true"] { background: var(--malarto-sand); }
.m-select__option[aria-selected="true"] { background: var(--malarto-wash); color: var(--malarto-glaze-dark); }
.m-select__option[aria-selected="true"]::after { content: "✓"; font-weight: 900; }
.m-select--native .m-select__button, .m-select--native .m-select__list { display: none; }
.m-field--error .m-select__button { border-color: var(--malarto-danger); }

/* Drawer menu mobilnego: przycisk .m-nav__toggle otwiera panel z prawej, tło przyciemnione. */
.m-nav__toggle { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: var(--malarto-control-h); padding: 9px 13px; border: 1px solid var(--malarto-line); border-radius: 10px; background: var(--malarto-white); color: inherit; font: var(--malarto-weight-bold) var(--malarto-size-sm) var(--malarto-font-sans); cursor: pointer; }
.m-nav__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.m-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.m-drawer[open] { display: block; }
.m-drawer__backdrop { position: absolute; inset: 0; background: rgba(48, 44, 40, .55); animation: m-fade .18s ease; }
.m-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); display: flex; flex-direction: column; background: var(--malarto-white); box-shadow: -12px 0 40px rgba(31, 26, 23, .25); animation: m-slide-in .22s ease; overflow-y: auto; }
.m-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--malarto-line); }
.m-drawer__head img { width: 130px; height: 46px; object-fit: cover; }
.m-drawer__close { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: var(--malarto-sand); color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.m-drawer__links { display: flex; flex-direction: column; padding: 12px; }
.m-drawer__links a, .m-drawer__links button { display: block; width: 100%; padding: 14px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: var(--malarto-weight-bold) 18px var(--malarto-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.m-drawer__links a:hover, .m-drawer__links a[aria-current="page"] { background: var(--malarto-sand); }
.m-drawer__foot { margin-top: auto; padding: 16px 20px 24px; border-top: 1px solid var(--malarto-line); display: grid; gap: 10px; }
.m-drawer--closing .m-drawer__panel { animation: m-slide-out .18s ease forwards; }
.m-drawer--closing .m-drawer__backdrop { animation: m-fade-out .18s ease forwards; }
body.m-drawer-open { overflow: hidden; }
@media (max-width: 899px) { .m-nav__links { display: none; } .m-nav__toggle { display: inline-flex; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes m-slide-out { to { transform: translateX(100%); } }

/* Toast: krótkie potwierdzenie akcji, dół ekranu, znika samo. */
.m-toasts { position: fixed; z-index: 70; left: 50%; bottom: 20px; display: grid; gap: 8px; width: min(calc(100% - 32px), 420px); transform: translateX(-50%); pointer-events: none; }
.m-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border: 0; border-radius: var(--malarto-radius-sm); background: var(--malarto-ink); color: var(--malarto-white); font-size: var(--malarto-size-sm); font-weight: var(--malarto-weight-semibold); box-shadow: var(--malarto-shadow-float); pointer-events: auto; animation: m-toast-in .22s ease; }
.m-toast--error { background: var(--malarto-sold-ink); }
.m-toast__text { flex: 1; }
.m-toast__action { border: 0; background: transparent; color: var(--malarto-sun); font: var(--malarto-weight-heavy) var(--malarto-size-sm) var(--malarto-font-sans); text-decoration: underline; cursor: pointer; }
.m-toast__close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #cfc8bf; font-size: 20px; line-height: 1; cursor: pointer; }
.m-toast--leaving { animation: m-toast-out .18s ease forwards; }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Modal potwierdzenia: natywny dialog, jedna decyzja, akcje po prawej. */
.m-modal { width: min(calc(100vw - 32px), 480px); padding: 0; border: 0; border-radius: 16px; background: var(--malarto-white); color: var(--malarto-ink); box-shadow: 0 24px 80px rgba(32, 24, 16, .35); font-family: var(--malarto-font-sans); }
.m-modal::backdrop { background: rgba(48, 44, 40, .55); }
.m-modal[open] { animation: m-modal-in .2s ease; }
.m-modal__body { padding: 24px 24px 8px; }
.m-modal__body .m-h3 { margin-bottom: 10px; font-size: 22px; }
.m-modal__body p { margin: 0 0 12px; }
.m-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 24px 24px; }
.m-modal--danger .m-btn--primary { background: var(--malarto-danger); border-color: var(--malarto-danger); }
.m-modal--danger .m-btn--primary:hover { background: #8f2324; border-color: #8f2324; }
@keyframes m-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) { .m-modal { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; } .m-modal__foot .m-btn { flex: 1 1 auto; } }

/* Obwódka skupienia należy się wyłącznie klawiaturze.
   Sama :focus-visible nie wystarcza: Chromium po pierwszym Tabie trzyma tryb klawiaturowy
   i pokazuje obwódkę także na elemencie klikniętym myszą, dotkniętym palcem albo rysikiem
   (karta dostawała ciemną ramkę wokół całego kafla). malarto-ui.js ustawia na <body>
   klasę m-input-pointer przy wskazywaniu i zdejmuje ją przy klawiaturze.
   !important jest tu celowe: reguły skupienia żyją w kicie i w moście, a ich specyficzność
   rośnie razem z liczbą klas komponentu; wygaszenie musi wygrać z każdą z nich.
   Pola formularzy zostają: tam skupienie widać także przy kliknięciu i jest potrzebne. */
body.m-input-pointer :focus-visible:not(input):not(select):not(textarea) { outline: none !important; }
body.m-input-pointer .m-card--link:has(.m-card__link:focus-visible) { outline: none !important; }
body.m-input-pointer .m-row:focus-visible { box-shadow: none !important; }

.m-media__caption { color: var(--malarto-ink); }
.m-media__caption > * { display: block; }
.m-media__caption span { font-size: var(--malarto-size-sm); color: var(--malarto-muted); }
.m-media__caption[hidden] { display: none; }

/* Caption takes only its actual height; desktop thumbnails leave the image's height free. */
.m-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) auto 88px; }
.m-lightbox__stage { position: relative; inset: auto; grid-column: 1; grid-row: 1 / 3; margin: 0 64px; min-width: 0; min-height: 0; }
.m-lightbox__stage img { max-width: 100%; }
.m-lightbox__thumbs { position: relative; inset: auto; grid-column: 1; grid-row: 4; min-width: 0; min-height: 0; }
.m-lightbox__caption { position: relative; grid-column: 1; grid-row: 3; min-width: 0; z-index: 5; padding: 8px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; background: #14110f; color: #fff; font-size: var(--malarto-size-sm); line-height: 1.5; max-height: 18dvh; overflow-y: auto; touch-action: pan-y; }
.m-lightbox__caption[hidden] { display: none; }
.m-lightbox__caption strong { font-weight: var(--malarto-weight-bold); }
.m-lightbox--single[open] { grid-template-rows: 64px minmax(0, 1fr) auto 16px; }
.m-lightbox--single .m-lightbox__stage { bottom: auto; }
@media (min-width: 768px) {
  .m-lightbox[open] { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) auto 16px; }
  .m-lightbox__stage { grid-column: 2; margin: 0 64px 0 56px; }
  .m-lightbox__caption { grid-column: 2; }
  .m-lightbox__thumbs { grid-column: 1; grid-row: 2 / 4; flex-direction: column; height: auto; padding: 4px 12px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; }
  .m-lightbox__thumbs button { width: 64px; height: 64px; }
  .m-lightbox__nav--prev { left: 94px; }
  .m-lightbox--single[open] { grid-template-columns: 0 minmax(0, 1fr); }
  .m-lightbox--single .m-lightbox__stage { margin-left: 64px; }
}
@media (max-width: 639px) {
  .m-lightbox[open] { grid-template-rows: 56px minmax(0, 1fr) auto 72px; }
  .m-lightbox__stage { margin: 0 12px; }
  .m-lightbox--single[open] { grid-template-rows: 56px minmax(0, 1fr) auto 12px; }
}

.m-row__state--sold { background: var(--malarto-ink); color: var(--malarto-white); }

.m-media{position:relative}
.m-media__info{position:absolute;top:var(--malarto-s3);right:var(--malarto-s3);z-index:3;color:var(--malarto-ink);font-size:var(--malarto-size-sm);line-height:1.5;max-width:calc(100% - var(--malarto-s5))}
.m-media__info[hidden]{display:none}
.m-media__info summary{list-style:none;display:flex;align-items:center;gap:var(--malarto-s2);width:max-content;min-height:44px;box-sizing:border-box;margin-left:auto;padding:var(--malarto-s2) var(--malarto-s3);background:var(--malarto-paper);border:1px solid var(--malarto-line);border-radius:var(--malarto-radius-pill);box-shadow:var(--malarto-shadow-float);cursor:pointer;font-weight:var(--malarto-weight-semibold)}
.m-media__info summary:hover{background:var(--malarto-white)}
.m-media__info summary:focus-visible{outline:var(--malarto-focus);outline-offset:3px}
.m-media__info summary::-webkit-details-marker{display:none}
.m-media__info .m-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.m-media__info p{box-sizing:border-box;width:280px;max-width:100%;max-height:160px;overflow:auto;overflow-wrap:anywhere;margin:var(--malarto-s2) 0 0;padding:var(--malarto-s4);background:var(--malarto-paper);border:1px solid var(--malarto-line);border-radius:var(--malarto-radius);box-shadow:var(--malarto-shadow-float);user-select:text}

/* Boczny pasek miniatur: na telefonie pozostaje pod sceną. */
@media (min-width: 900px) {
  .m-media--thumbs-right:not(.m-media--single) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px 12px; align-items: start; }
  .m-media--thumbs-right:not(.m-media--single) .m-media__stage { grid-column: 1; grid-row: 1; width: 100%; height: auto; max-height: none; aspect-ratio: 716 / 430; }
  .m-media--thumbs-right:not(.m-media--single) .m-media__thumbs { position: absolute; grid-area: 1 / 2 / 2 / 3; inset: 0; display: flex; flex-direction: column; width: 64px; height: auto; padding: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; mask-image: none; scroll-snap-type: y proximity; }
  .m-media--thumbs-right:not(.m-media--single) .m-media__thumbs.is-overflow { mask-image: linear-gradient(180deg, transparent 0, #000 var(--m-fade-start, 0px), #000 calc(100% - var(--m-fade-end, 0px)), transparent 100%); }
  .m-media--thumbs-right .m-media__thumb { flex: 0 0 52px; width: 64px; height: 52px; aspect-ratio: auto; }
  .m-media--thumbs-right .m-media__caption, .m-media--thumbs-right .m-media__count { grid-column: 1; }
}