/* Mega menu (desktop od 1024 px, R23). Panel wisi pod rzędem nawigacji (zwykłym albo przyklejonym):
   js/megamenu.js przenosi go do <li> wyzwalacza, a rząd nawigacji jest blokiem odniesienia.
   Karta panelu: biel, dolne rogi 28 (--gs-radius-tile), cień warstwy pływającej. Tekst w panelu
   zaczyna się na tej samej linii co logo i nawigacja (krawędź treści .gs-container).
   Haki dla wariantów Task 8: .gs-mega (karta), .gs-mega--list / .gs-mega--tiles, .gs-mega--instant,
   .gs-header.is-mega-open, html[data-v-menu='…'] i html[data-v-rooms='…']. */

@media (max-width: 1023px) {
  .gs-mega {
    display: none;
  }
}

@media (min-width: 1024px) {
  .gs-header__bar--nav {
    position: relative;
  }

  .gs-mega {
    /* Krawędź treści kontenera (połowa: max / 2 − padding, przy 1512/40 to 716) i wcięcie karty poza nią:
       przy szerokich oknach karta wystaje 40 px poza treść, przy węższych sięga krawędzi okna, a padding
       wyrównuje tekst do logo. Liczone z tokenów kontenera, więc idzie za każdą zmianą 1512/40. */
    --gs-mega-half: calc(var(--gs-container-max) / 2 - var(--gs-container-pad));
    --gs-mega-pad: min(40px, max(var(--gs-container-pad), calc(50% - var(--gs-mega-half))));
    position: absolute;
    top: calc(100% + 1px);
    left: max(0px, calc(50% - var(--gs-mega-half) - 40px));
    right: max(0px, calc(50% - var(--gs-mega-half) - 40px));
    z-index: 1;
    padding: var(--gs-space-7) var(--gs-mega-pad) var(--gs-space-9);
    border-radius: 0 0 var(--gs-radius-tile) var(--gs-radius-tile);
    background: var(--gs-bg);
    color: var(--gs-ink);
    box-shadow: var(--gs-shadow-float);
    text-align: left;
    white-space: normal;
  }

  .gs-mega[hidden] {
    display: none;
  }

  .gs-mega:not([hidden]) {
    animation: gs-mega-in var(--gs-dur) ease-out;
  }

  .gs-mega--instant:not([hidden]) {
    animation: none;
  }

  /* Przyklejony rząd: panel nie może wyjść poza okno, bo strona pod nim się przewija. */
  .gs-header.is-stuck .gs-mega {
    max-height: calc(100dvh - var(--gs-header-bar) - var(--gs-space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .gs-mega ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gs-mega a {
    color: inherit;
    text-decoration: none;
  }

  .gs-mega a:focus-visible {
    outline: 2px solid var(--gs-focus);
    outline-offset: 2px;
    border-radius: var(--gs-radius-xs);
  }

  /* „Wszystkie meble” / „Wszystkie pomieszczenia”: pierwszy link panelu, w kolorze linku */
  .gs-mega .gs-mega__all {
    justify-self: start;
    color: var(--gs-link);
    font-size: 15px;
    font-weight: var(--gs-weight-strong);
    line-height: 24px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .gs-mega .gs-mega__all:hover {
    color: var(--gs-brand-deep);
    text-decoration-thickness: 2px;
  }

  /* ---------- M-B: 4 kolumny tekstowe + kolumna kafli promo ---------- */

  .gs-mega__mb {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: var(--gs-space-5);
  }

  .gs-mega__mb--promo {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(184px, 216px);
  }

  .gs-mega__mb > .gs-mega__all {
    grid-column: 1 / 5;
  }

  /* Kolumny przypisane w danych (col 1–4, R30); w kolumnie bloki co 24 px. */
  .gs-mega__col {
    display: grid;
    align-content: start;
    gap: var(--gs-space-6);
  }

  /* Stopień 1: Krzesła i Stoły krojem nagłówków, bo to 95% sprzedaży i dostają głos marki. */
  .gs-mega__head {
    margin-bottom: var(--gs-space-1);
    font-family: var(--gs-font-display);
    font-size: 19px;
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: var(--gs-h3-tracking);
    line-height: 28px;
  }

  /* Stopień 2: grupy (Wypoczynek, Sypialnia…) i kategorie bez podkategorii (Zestawy, Ławy i stoliki),
     krojem tekstu. Linki od nazw grup odróżnia podkreślenie przy najechaniu. */
  .gs-mega__head--group,
  .gs-mega__cat {
    font-family: var(--gs-font-text);
    font-size: 15px;
    font-weight: var(--gs-weight-strong);
    font-variation-settings: normal;
    letter-spacing: normal;
    line-height: 24px;
  }

  .gs-mega__head--group {
    margin-bottom: 2px;
  }

  .gs-mega__cat {
    display: inline-block;
    padding: 3px 0;
  }

  /* Stopień 3: podkategorie, wiersz 30 px. */
  .gs-mega__link {
    display: inline-block;
    padding: 5px 0;
    font-size: 14.5px;
    line-height: 20px;
  }

  .gs-mega__link:hover,
  .gs-mega__cat:hover {
    color: var(--gs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* Kafle promo: zdjęcie z promieniem kafla, podpis pod spodem. Jeden wyłączony = drugi rośnie. */
  .gs-mega__promos {
    grid-column: -2;
    grid-row: 1 / -1;
    display: grid;
    align-content: start;
    gap: var(--gs-space-5);
  }

  .gs-mega__promo {
    display: grid;
    gap: 2px;
  }

  .gs-mega__promo-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--gs-space-2);
    border-radius: var(--gs-radius-tile);
    background: var(--gs-surface);
    object-fit: cover;
  }

  .gs-mega__promo:only-child .gs-mega__promo-img {
    aspect-ratio: 4 / 3;
  }

  .gs-mega__promo-label,
  .gs-mega__tile-label {
    font-size: 15.5px;
    font-weight: var(--gs-weight-strong);
    line-height: 22px;
  }

  .gs-mega__promo-lead,
  .gs-mega__tile-meta {
    color: var(--gs-ink-muted);
    font-size: var(--gs-small-size);
    letter-spacing: var(--gs-small-tracking);
    line-height: var(--gs-small-leading);
  }

  .gs-mega__promo:hover .gs-mega__promo-label,
  .gs-mega__tile:hover .gs-mega__tile-label {
    color: var(--gs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* ---------- Pomieszczenia i Style: rząd kafli 4:3, podpis pod zdjęciem ---------- */

  .gs-mega__rooms {
    display: grid;
    gap: var(--gs-space-5);
  }

  .gs-mega__tiles {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--gs-space-4);
  }

  .gs-mega__tile {
    display: grid;
    gap: 2px;
  }

  .gs-mega__tile-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--gs-space-2);
    border-radius: var(--gs-radius-tile);
    background: var(--gs-surface);
    object-fit: cover;
  }
}

@media (min-width: 1280px) {
  .gs-mega__mb {
    column-gap: var(--gs-space-8);
  }

  .gs-mega__mb--promo {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 336px);
  }

  .gs-mega__promo-img {
    aspect-ratio: 5 / 2;
  }

  .gs-mega__promo:only-child .gs-mega__promo-img {
    aspect-ratio: 4 / 3;
  }
}

@keyframes gs-mega-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* =====================================================================================================
   Task 8: M-A „Kaskada ze zdjęciem”, M-C „Szyna + kafelki”, M-D „Panel boczny”, M-x karta Pomieszczeń.
   Wspólna szyna (.gs-mega__casc): wiersze .gs-mega__row z kolumną .gs-mega__pane w środku <li> (kolejność
   Tab), zdjęcia .gs-mega__photo jedno na drugim. Aktywny wiersz i zdjęcie mają .is-active (js/megamenu.js).
   ===================================================================================================== */

.gs-mega__scrim {
  display: none;
}

@media (min-width: 1024px) {
  .gs-mega__casc {
    --gs-casc-rail: 248px;
    --gs-casc-gap: var(--gs-space-6);
    display: grid;
    align-items: start;
  }

  .gs-mega__cols {
    display: grid;
    align-content: start;
    gap: var(--gs-space-4);
  }

  .gs-mega__rail {
    position: relative;
    display: grid;
    align-content: start;
    width: var(--gs-casc-rail);
  }

  .gs-mega .gs-mega__key {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gs-ink-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .gs-mega .gs-mega__row.is-active > .gs-mega__key,
  .gs-mega .gs-mega__key:hover {
    color: var(--gs-ink);
  }

  /* Kolumna podkategorii obok szyny; widać tylko kolumnę aktywnego wiersza. Przełączenie bez przenikania
     (jak w Kave): dwa przenikające się teksty w jednej kolumnie czyta się gorzej niż natychmiastowa zmiana. */
  .gs-mega__pane {
    position: absolute;
    top: 0;
    left: calc(100% + var(--gs-casc-gap));
    visibility: hidden;
  }

  .gs-mega__row.is-active > .gs-mega__pane {
    visibility: visible;
  }

  .gs-mega__subs {
    display: grid;
    align-content: start;
  }

  .gs-mega .gs-mega__sub--all {
    color: var(--gs-link);
    font-weight: var(--gs-weight-strong);
  }

  .gs-mega .gs-mega__sub:hover {
    color: var(--gs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* Zdjęcia kategorii: jedno na drugim, aktywne przenika w ok. 150 ms. */
  .gs-mega__photos {
    display: grid;
  }

  .gs-mega__photo {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gs-dur) ease, visibility 0s linear var(--gs-dur);
  }

  .gs-mega__photo.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--gs-dur) ease;
  }

  .gs-mega__photo-frame {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--gs-radius-card);
    background: var(--gs-surface);
  }

  .gs-mega__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Wycinek (zapas, gdy kategoria nie ma zdjęcia aranżacji): contain na surface, nie większy niż natywny. */
  .gs-mega__photo-img--cutout {
    padding: 9%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .gs-mega__photo-label {
    font-family: var(--gs-font-display);
    font-size: 19px;
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: var(--gs-h3-tracking);
    line-height: 26px;
  }

  .gs-mega__photo-meta {
    color: var(--gs-ink-muted);
    font-size: var(--gs-small-size);
    letter-spacing: var(--gs-small-tracking);
    line-height: var(--gs-small-leading);
  }

  .gs-mega__photo-cap {
    display: grid;
  }

  .gs-mega__photo:hover .gs-mega__photo-label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* ---------- M-A: szyna | podkategorie | zdjęcie 4:3 (Kave na 2 poziomach) ---------- */

  .gs-mega__casc--ma {
    grid-template-columns: calc(var(--gs-casc-rail) * 2 + var(--gs-casc-gap)) minmax(0, 560px);
    justify-content: space-between;
    column-gap: var(--gs-space-8);
  }

  .gs-mega__casc--ma .gs-mega__rail {
    margin-top: var(--gs-space-1);
  }

  .gs-mega__casc--ma .gs-mega__key {
    padding: 4px 0;
    font-family: var(--gs-font-display);
    font-size: 19px;
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: var(--gs-h3-tracking);
    line-height: 28px;
  }

  .gs-mega__casc--ma .gs-mega__pane {
    width: var(--gs-casc-rail);
  }

  .gs-mega__casc--ma .gs-mega__sub {
    display: inline-block;
    padding: 5px 0;
    font-size: 15px;
    line-height: 20px;
  }

  /* Ramka w proporcjach źródła (pion zostaje pionem), do 420 px wysokości i najwyżej 1,2× natywnego
     rozmiaru; za małe źródło zostaje mniejsze zamiast rozciągniętego. Przy prawej krawędzi karty (Kave). */
  .gs-mega__casc--ma .gs-mega__photos {
    container-type: inline-size;
  }

  .gs-mega__casc--ma .gs-mega__photo {
    justify-self: end;
  }

  .gs-mega__casc--ma .gs-mega__photo-frame {
    width: min(100cqw, calc(var(--gs-img-w) * 1.2px), calc(420px * var(--gs-img-w) / var(--gs-img-h)));
    aspect-ratio: var(--gs-img-w) / var(--gs-img-h);
    margin-bottom: var(--gs-space-2);
  }

  /* ---------- M-C: szyna 280 px z pigułką + kafle 4:3 (Selsey) ---------- */

  .gs-mega__casc--mc {
    --gs-casc-rail: 248px;
    --gs-mc-cols: 3;
    container-type: inline-size;
  }

  .gs-mega__casc--mc .gs-mega__cols {
    position: relative;
    /* Kolumna kafli leży obok szyny (absolute), więc wysokość panelu trzyma miejsce na 2 rzędy kafli. */
    --gs-mc-tile: calc((100cqw - var(--gs-casc-rail) - var(--gs-space-8) - (var(--gs-mc-cols) - 1) * var(--gs-space-4)) / var(--gs-mc-cols));
    min-height: calc(2 * (var(--gs-mc-tile) * 0.75 + 52px) + var(--gs-space-5));
  }

  .gs-mega__casc--mc .gs-mega__rail {
    position: static;
    gap: 2px;
  }

  .gs-mega__casc--mc .gs-mega__key {
    justify-content: space-between;
    gap: var(--gs-space-3);
    min-height: 40px;
    padding: 8px var(--gs-space-3);
    border-radius: var(--gs-radius-field);
    color: var(--gs-ink);
    font-size: 15px;
    font-weight: var(--gs-weight-strong);
    line-height: 22px;
    transition: background-color var(--gs-dur);
  }

  .gs-mega__casc--mc .gs-mega__row.is-active > .gs-mega__key {
    background: var(--gs-surface);
  }

  .gs-mega__casc--mc button.gs-mega__key::after,
  .gs-mega__casc--md button.gs-mega__key::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 1.75px solid currentColor;
    border-right: 1.75px solid currentColor;
    transform: rotate(45deg);
  }

  .gs-mega__casc--mc .gs-mega__pane {
    top: 0;
    left: calc(var(--gs-casc-rail) + var(--gs-space-8));
    right: 0;
  }

  .gs-mega__ctiles {
    display: grid;
    grid-template-columns: repeat(var(--gs-mc-cols), minmax(0, 1fr));
    gap: var(--gs-space-5) var(--gs-space-4);
  }

  .gs-mega__ctile {
    display: grid;
    align-content: start;
    gap: 2px;
  }

  .gs-mega__ctile-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--gs-space-2);
    overflow: hidden;
    border-radius: var(--gs-radius-tile);
    background: var(--gs-surface);
  }

  .gs-mega__ctile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Wycinek: contain z oddechem; ramka (do ok. 240 px) jest mniejsza niż natywne 585 px, więc bez powiększania. */
  .gs-mega__ctile-img--cutout {
    position: absolute;
    inset: 0;
    padding: 10% 14%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .gs-mega__ctile-label {
    font-size: 15px;
    font-weight: var(--gs-weight-strong);
    line-height: 22px;
  }

  .gs-mega__ctile-meta {
    color: var(--gs-ink-muted);
    font-size: var(--gs-small-size);
    letter-spacing: var(--gs-small-tracking);
    line-height: var(--gs-small-leading);
  }

  /* Pionowe zdjęcie aranżacji w kaflu 4:3 (zapas): całe, mniejsze, na surface, zamiast kadru ze środka. */
  .gs-mega__ctile-media--portrait .gs-mega__ctile-img {
    width: auto;
    object-fit: contain;
  }

  /* Kafel tekstowy (podkategoria bez żadnego zdjęcia): podpis pod ramką jak w innych kaflach, a w ramce
     nazwa krojem nagłówków na brand-tint, łamana w ramce i dosunięta do lewego dołu — znak typograficzny,
     nie pusty kadr. */
  .gs-mega__ctile--text .gs-mega__ctile-media {
    place-items: end start;
    padding: var(--gs-space-4) var(--gs-space-5);
    background: var(--gs-brand-tint);
  }

  .gs-mega__ctile-word {
    color: var(--gs-brand-deep);
    font-family: var(--gs-font-display);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .gs-mega__ctile:hover .gs-mega__ctile-label {
    color: var(--gs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* ---------- M-x: karta Pomieszczeń (Urban Dén): lista | 4 karty ze zdjęciem 1:1 ---------- */

  .gs-mega__rc {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto;
    gap: var(--gs-space-8);
  }

  .gs-mega__rc-list {
    display: grid;
    align-content: start;
    gap: 2px;
  }

  .gs-mega__rc-list > li:first-child {
    margin-bottom: var(--gs-space-2);
  }

  .gs-mega__rc-list > li:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gs-space-3);
  }

  .gs-mega__rc-room {
    padding: 5px 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
  }

  .gs-mega__rc-meta {
    color: var(--gs-ink-muted);
    font-size: var(--gs-small-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .gs-mega__rc-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 205px));
    gap: var(--gs-space-6);
  }

  .gs-mega__rc-card {
    display: grid;
    align-content: start;
  }

  .gs-mega__rc-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--gs-radius-card);
    background: var(--gs-surface);
    object-fit: cover;
  }

  .gs-mega__rc-title {
    margin: var(--gs-space-3) 0 var(--gs-space-1);
    font-family: var(--gs-font-display);
    font-size: 19px;
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: var(--gs-h3-tracking);
    line-height: 26px;
  }

  .gs-mega__rc-links a {
    display: block;
    padding: 7px 0;
    border-bottom: 1px solid var(--gs-line);
    font-size: 14.5px;
    line-height: 20px;
  }

  .gs-mega .gs-mega__rc-all {
    justify-self: start;
    margin-top: var(--gs-space-3);
    color: var(--gs-link);
    font-size: 14.5px;
    font-weight: var(--gs-weight-strong);
    line-height: 22px;
  }

  .gs-mega__rc-room:hover,
  .gs-mega__rc-links a:hover,
  .gs-mega .gs-mega__rc-all:hover {
    color: var(--gs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* =================================================================================================
     M-D „Panel boczny”: tryb menu. Po otwarciu (.gs-header.is-mega-open) nagłówek przechodzi w 160 ms
     na brand-deep z białym tekstem, panel ok. 760 px wysuwa się od lewej od rzędu nawigacji do dołu okna,
     obok niego zdjęcie kategorii, a reszta strony jest przyciemniona (rozmycie tylko z ?blur=1). Stan to
     wyłącznie klasa is-mega-open + html[data-v-menu='md']: każde zamknięcie i zmiana wariantu sprząta
     kolor, przyciemnienie i blokadę przewijania bez dodatkowego kodu (Review Focus 5).
     ================================================================================================= */

  html[data-v-menu='md'] {
    /* Blokada przewijania nie przesuwa strony o szerokość paska przewijania (Windows). */
    scrollbar-gutter: stable;
  }

  html[data-v-menu='md']:has(.gs-header.is-mega-open) body {
    overflow: hidden;
  }

  html[data-v-menu='md'] .gs-header {
    --gs-md-t: 160ms;
    --gs-md-w: clamp(600px, 53vw, 760px);
  }

  html[data-v-menu='md'] .gs-header,
  html[data-v-menu='md'] .gs-header :is(.gs-header__usp, .gs-header__bar--nav, .gs-search, .gs-search__input, .gs-search__submit, .gs-nav__trigger, .gs-nav__link, .gs-nav__chevron, .gs-header__action, .gs-header__phone, .gs-header__phone .gs-icon, .gs-header__phone-hours, .gs-header__pill, .gs-logo, .gs-logo__accent) {
    transition: background-color var(--gs-md-t) ease, color var(--gs-md-t) ease, border-color var(--gs-md-t) ease, box-shadow var(--gs-md-t) ease;
  }

  /* Przemapowanie tokenów tylko w treści nagłówka i panelach (bloki wariantów nagłówka), nie w przyciemnieniu. */
  html[data-v-menu='md'] .gs-header.is-mega-open {
    background: var(--gs-brand-deep);
  }

  html[data-v-menu='md'] .gs-header.is-mega-open > [data-vg='header'] {
    --gs-bg: var(--gs-brand-deep);
    --gs-ink: var(--gs-on-brand);
    --gs-ink-muted: color-mix(in srgb, var(--gs-on-brand) 74%, transparent);
    --gs-line: color-mix(in srgb, var(--gs-on-brand) 18%, transparent);
    --gs-line-strong: color-mix(in srgb, var(--gs-on-brand) 50%, transparent);
    --gs-brand-tint: color-mix(in srgb, var(--gs-on-brand) 8%, var(--gs-brand-deep));
    --gs-brand: var(--gs-on-brand);
    --gs-link: var(--gs-on-brand);
    --gs-focus: var(--gs-on-brand);
  }

  /* Outlet i Promocje (R40): --gs-link, które w tym zakresie jest białe, waga 600 z nagłówka. */

  /* Nagłówek i panel to jedna powierzchnia: bez linii pod rzędem nawigacji. */
  html[data-v-menu='md'] .gs-header.is-mega-open .gs-header__bar--nav {
    border-bottom-color: transparent;
  }

  html[data-v-menu='md'] .gs-header.is-mega-open .gs-logo {
    --gs-logo-accent: currentColor;
  }

  html[data-v-menu='md'] .gs-header.is-mega-open .gs-search {
    background: color-mix(in srgb, var(--gs-on-brand) 8%, transparent);
  }

  html[data-v-menu='md'] .gs-header.is-mega-open .gs-header__action:hover {
    background: color-mix(in srgb, var(--gs-on-brand) 10%, transparent);
  }

  /* Przyciemnienie: pod rzędem nawigacji do dołu okna; klik w nie zamyka panel (klik poza pozycją). */
  html[data-v-menu='md'] .gs-mega__scrim {
    display: block;
    position: fixed;
    inset: var(--gs-mega-top, 0px) 0 0;
    z-index: 0;
    background: color-mix(in srgb, var(--gs-ink) 26%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gs-md-t) ease, visibility 0s linear var(--gs-md-t);
  }

  html[data-v-menu='md'] .gs-header.is-mega-open .gs-mega__scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--gs-md-t) ease;
  }

  /* Rama panelu: wszystkie trzy panele (Meble, Pomieszczenia, Style) w tej samej ramie. */
  html[data-v-menu='md'] .gs-mega {
    --gs-mega-pad: max(var(--gs-container-pad), calc(50vw - var(--gs-mega-half)));
    position: fixed;
    top: var(--gs-mega-top, 0px);
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--gs-md-w);
    padding: var(--gs-space-8) var(--gs-space-12) var(--gs-space-8) var(--gs-mega-pad);
    border-radius: 0;
    box-shadow: none;
  }

  html[data-v-menu='md'] .gs-mega:not([hidden]) {
    animation: gs-mega-md-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  html[data-v-menu='md'] .gs-mega--instant:not([hidden]) {
    animation: none;
  }

  html[data-v-menu='md'] .gs-header.is-stuck .gs-mega {
    max-height: none;
    overflow: visible;
  }

  .gs-mega__casc--md {
    --gs-casc-rail: 248px;
  }

  /* Kolumna przewija się w środku na niskich oknach (laptop 1366×768 ma ok. 650 px widoku): strona jest
     zablokowana, więc inaczej dolne wiersze byłyby nieosiągalne. Boczny zapas 16 px mieści pigułkę
     wiersza i obwódkę fokusu wewnątrz obszaru przewijania. */
  .gs-mega__casc--md .gs-mega__cols {
    gap: var(--gs-space-5);
    max-height: calc(100dvh - var(--gs-mega-top, 0px) - 2 * var(--gs-space-8));
    margin: 0 calc(-1 * var(--gs-space-4));
    padding: 0 var(--gs-space-4) var(--gs-space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--gs-on-brand) 35%, transparent) transparent;
  }

  html[data-v-menu='md'] .gs-mega :is(.gs-mega__rooms, .gs-mega__rc) {
    max-height: calc(100dvh - var(--gs-mega-top, 0px) - 2 * var(--gs-space-8));
    margin: 0 calc(-1 * var(--gs-space-4));
    padding: 0 var(--gs-space-4) var(--gs-space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--gs-on-brand) 35%, transparent) transparent;
  }

  .gs-mega__casc--md .gs-mega__rail {
    gap: var(--gs-space-1);
    margin-left: calc(-1 * var(--gs-space-4));
    width: calc(var(--gs-casc-rail) + var(--gs-space-4));
  }

  /* Wiersze: duży, miękki krój (Skanvi 20 px), rytm 56 px; aktywny wiersz na jaśniejszej pigułce. */
  .gs-mega__casc--md .gs-mega__key {
    justify-content: space-between;
    gap: var(--gs-space-3);
    min-height: 52px;
    padding: 0 var(--gs-space-4);
    border-radius: var(--gs-radius-field);
    font-family: var(--gs-font-display);
    font-size: 20px;
    font-weight: var(--gs-h3-weight);
    font-variation-settings: var(--gs-h-variation);
    letter-spacing: var(--gs-h3-tracking);
    line-height: 26px;
    transition: background-color var(--gs-dur), color var(--gs-dur);
  }

  .gs-mega__casc--md .gs-mega__row.is-active > .gs-mega__key {
    background: color-mix(in srgb, var(--gs-on-brand) 10%, transparent);
  }

  .gs-mega__casc--md button.gs-mega__key::after {
    opacity: 0.7;
  }

  .gs-mega__casc--md .gs-mega__row.is-active > button.gs-mega__key::after {
    opacity: 1;
  }

  .gs-mega__casc--md .gs-mega__pane {
    left: calc(100% + var(--gs-space-6));
    width: calc(var(--gs-md-w) - var(--gs-mega-pad) - var(--gs-casc-rail) - var(--gs-space-6) - var(--gs-space-12));
  }

  .gs-mega__casc--md .gs-mega__sub {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 17px;
    line-height: 24px;
  }

  .gs-mega__casc--md .gs-mega__sub--all {
    margin-bottom: var(--gs-space-2);
    border-bottom: 1px solid var(--gs-line);
    color: var(--gs-ink);
  }

  .gs-mega__casc--md .gs-mega__sub:not(.gs-mega__sub--all) {
    color: var(--gs-ink-muted);
  }

  .gs-mega__casc--md .gs-mega__sub:hover {
    color: var(--gs-ink);
  }

  /* Zdjęcie przylega do panelu (bez szczeliny z ostrymi fragmentami strony), nad przyciemnioną stroną.
     Ramka w proporcjach źródła: najwyżej 560 × 680 px, tyle, ile zostaje okna, i nie więcej niż 1,2×
     natywnego rozmiaru. Lewe rogi proste: zdjęcie czyta się jako przedłużenie panelu. */
  .gs-mega__casc--md {
    --gs-md-photo-w: min(560px, calc(100vw - var(--gs-md-w) - var(--gs-space-10)));
    --gs-md-photo-h: min(680px, calc(100dvh - var(--gs-mega-top, 0px) - var(--gs-space-16)));
  }

  .gs-mega__casc--md .gs-mega__photos {
    position: absolute;
    top: var(--gs-space-8);
    left: 100%;
    align-items: start;
    justify-items: start;
    animation: gs-mega-photo-in 240ms 60ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .gs-mega__casc--md .gs-mega__photo {
    position: relative;
  }

  .gs-mega__casc--md .gs-mega__photo-frame {
    width: min(var(--gs-md-photo-w), calc(var(--gs-img-w) * 1.2px), calc(var(--gs-md-photo-h) * var(--gs-img-w) / var(--gs-img-h)));
    aspect-ratio: var(--gs-img-w) / var(--gs-img-h);
    border-radius: 0 var(--gs-radius-card) var(--gs-radius-card) 0;
  }

  /* Podpis na zdjęciu: mała karta w kolorze panelu (nie gradient), łączy zdjęcie z panelem. */
  .gs-mega__casc--md .gs-mega__photo-cap {
    position: absolute;
    left: var(--gs-space-4);
    bottom: var(--gs-space-4);
    padding: var(--gs-space-3) var(--gs-space-5) 14px;
    border-radius: var(--gs-radius-field);
    background: var(--gs-bg);
    color: var(--gs-ink);
  }

  .gs-mega__casc--md .gs-mega__photo-label {
    font-size: 20px;
  }

  html[data-v-menu='md'] .gs-mega--instant .gs-mega__photos {
    animation: none;
  }

  /* Pomieszczenia i Style w ramie M-D: kafle w 3 kolumnach, podpis pod zdjęciem. */
  html[data-v-menu='md'] .gs-mega__tiles {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gs-space-6) var(--gs-space-4);
  }

  html[data-v-menu='md'] .gs-mega__rooms {
    color: var(--gs-ink);
  }

  /* Karta Pomieszczeń (M-x) w ramie M-D: rama rośnie do szerokości karty (jak panel Skanvi). */
  html[data-v-menu='md'][data-v-rooms='card'] .gs-mega:has(.gs-mega__rc) {
    width: min(1240px, 100vw - var(--gs-space-12));
  }
}

/* M-D na niskim oknie (laptopy 1366×768 i 1280×720 mają ok. 600–660 px widoku): gęstszy rytm wierszy,
   żeby 8 kategorii mieściło się bez przewijania; przewijanie kolumny zostaje zapasem dla jeszcze niższych. */
@media (min-width: 1024px) and (max-height: 760px) {
  html[data-v-menu='md'] .gs-mega {
    padding-top: var(--gs-space-6);
    padding-bottom: var(--gs-space-6);
  }

  .gs-mega__casc--md .gs-mega__cols {
    gap: var(--gs-space-3);
    max-height: calc(100dvh - var(--gs-mega-top, 0px) - 2 * var(--gs-space-6));
  }

  .gs-mega__casc--md .gs-mega__rail {
    gap: 2px;
  }

  .gs-mega__casc--md .gs-mega__key {
    min-height: 44px;
    font-size: 18px;
  }

  .gs-mega__casc--md .gs-mega__sub {
    min-height: 40px;
    font-size: 16px;
  }

  .gs-mega__casc--md .gs-mega__photos {
    top: var(--gs-space-6);
  }

  .gs-mega__casc--md {
    --gs-md-photo-h: min(680px, calc(100dvh - var(--gs-mega-top, 0px) - var(--gs-space-12)));
  }
}

@media (min-width: 1280px) {
  .gs-mega__casc {
    --gs-casc-rail: 300px;
    --gs-casc-gap: var(--gs-space-8);
  }

  .gs-mega__casc--mc {
    --gs-casc-rail: 280px;
    --gs-mc-cols: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-v-menu='md'] .gs-header {
    --gs-md-t: 0ms;
  }

  html[data-v-menu='md'] .gs-mega:not([hidden]),
  .gs-mega__casc--md .gs-mega__photos {
    animation: none;
  }
}

@supports (backdrop-filter: blur(8px)) {
  html[data-mega-blur='1'][data-v-menu='md'] .gs-header.is-mega-open .gs-mega__scrim {
    backdrop-filter: blur(8px);
  }
}

@keyframes gs-mega-md-in {
  from {
    transform: translateX(-100%);
  }
}

@keyframes gs-mega-photo-in {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}