/* ============================================================
   Zmienne
   ============================================================ */
:root {
  /* ===== Język wizualny „Atelier" — paleta ===== */
  --ink:            #0A0A0A;   /* aksamitna czerń — typografia, elementy ciemne */
  --paper:          #FAF9F6;   /* alabaster — domyślna kanwa */
  --champagne:      #C1A68D;   /* matowe złoto — sygnatura AI (Złota Nić) */
  --champagne-deep: #A8896B;
  --champagne-soft: #ECE3D7;
  --champagne-glow: rgba(193,166,141,.40);

  /* Ciepłe neutralne (zamiast zimnych szarości) */
  /* `--smoke` przyciemnione 2026-08-17 (Pracownia 2.1 Etap 4, dostępność) — #8C8479
     dawało 3.504:1 na --paper / 3.690:1 na --pearl / 3.162:1 na --cloud, poniżej
     wymaganych 4.5:1 (WCAG AA, tekst normalny) w KAŻDYM z ~120 miejsc, gdzie token
     jest kolorem tekstu — żadne nie kwalifikowało się do złagodzonego progu 3:1
     (największe użycia to glify 20px regular). Nowa wartość: 5.0-5.8:1 na tych
     samych trzech tłach, ten sam ciepły odcień (taupe), tylko ciemniejszy. */
  --smoke:  #6B6459;  /* ciepły szary — tekst drugorzędny */
  --mist:   #E7E1D8;  /* ciepła włoskowata krawędź */
  --cloud:  #F1EDE6;  /* ciepłe wypełnienie */
  --pearl:  #FFFFFF;  /* czysta biel karty */

  /* Semantyka — wyrafinowana, nie neonowa */
  --love:    #2F7A55;  /* głęboka szałwiowa zieleń */
  --love-bg: #E9F2EC;
  --nope:    #C0473F;  /* przygaszona karmazynowa czerwień */
  --nope-bg: #F7ECEA;
  --gold-stock: #C99A4E;

  /* Typografia */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Cienie — głębokie, miękkie, warstwowe */
  --shadow-card:    0 2px 8px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  --shadow-premium: 0 12px 28px -8px rgba(10,10,10,.16), 0 28px 60px -22px rgba(10,10,10,.22);
  --shadow-float:   0 8px 24px -6px rgba(10,10,10,.20);
  --glass-edge:     inset 0 1px 0 rgba(255,255,255,.65);

  /* Glassmorphism */
  --glass-bg:     rgba(250,249,246,.72);
  --glass-border: rgba(255,255,255,.55);

  /* Ruch */
  --ease-lux:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --radius-bubble: 18px;
  --radius-input:  26px;
  --max-width:     680px;

  /* Zgłoszenie #134 — margines boczny paneli najwyższego poziomu jako token:
     12px na mobile (było literalne 16px), 16px od 640px wzwyż. Celowo NIE
     podmieniamy wszystkich 188 wystąpień "16px" w pliku — tylko paddingi
     boczne .chat/.header/.input-area/.wall-grid/.looks-grid i pokrewnych,
     patrz miejsca użycia niżej. */
  --gutter: 12px;

  /* Wysokości pasków (fixed) — dla scroll-under glass */
  --h-header: 44px;  /* Zgłoszenie #134 — było 48px, patrz .chat-meta niżej */
  --h-input:  78px;
  /* Poza top 5 — było 66px sztywne; .bottom-nav ma padding-bottom:env(safe-area-inset-bottom)
     przy globalnym border-box, więc na urządzeniach z wcięciem (notch/home indicator) inset
     ZJADAŁ z tych 66px zamiast się do nich DOLICZYĆ — ikony/etykiety ściskały się do ~32px.
     Doliczenie insetu tutaj naprawia to w JEDNYM miejscu: wszyscy konsumenci --h-nav (paddingi
     rezerwujące miejsce nad navem w innych panelach) automatycznie dostają poprawną, pełną
     wysokość zamiast tylko treściowych 66px. */
  --h-nav:    calc(66px + env(safe-area-inset-bottom));
  --h-wallbar: 130px;  /* wall-topbar: fallback zanim ResizeObserver zmierzy realną wysokość (app.js::_setupWallbarResizeSync) */

  /* ===== Aliasy wsteczne (stare nazwy → nowe tokeny) ===== */
  --font:                 var(--font-ui);
  --color-bg:             var(--paper);
  --color-bg-light:       var(--cloud);
  --color-surface:        var(--pearl);
  --color-header-bg:      var(--ink);
  --color-header-text:    var(--pearl);
  --color-assistant-bg:   var(--pearl);
  --color-assistant-text: var(--ink);
  --color-user-bg:        var(--ink);
  --color-user-text:      var(--pearl);
  --color-accent:         var(--ink);
  --color-primary:        var(--ink);
  --color-text:           var(--ink);
  --color-text-muted:     var(--smoke);
  --color-border:         var(--mist);
  --color-placeholder:    var(--smoke);
  --color-send-hover:     var(--ink);
}

@media (min-width: 640px) {
  :root { --gutter: 16px; }
}

/* ============================================================
   Reset i base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Zgłoszenie #134 — kontrola wielkości tekstu: wszystkie font-size w pliku są
   w rem (patrz konwersja px→rem), więc pojedynczy przelicznik na html skaluje
   CAŁY tekst aplikacji. Paddingi/gapy zostają w px — układ się nie rozjeżdża
   na krańcach skali. --text-scale ustawiane inline w <head> (anty-FOUC, patrz
   index.html) i przez stepper w Ustawieniach (app.js: stepTextScale). */
html {
  font-size: calc(16px * var(--text-scale, 1));
}

html, body {
  height: 100%;
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-assistant-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   Layout
   ============================================================ */
.app {
  position: relative;          /* kontekst pozycjonowania dla paneli (absolute) */
  height: 100dvh;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(10,10,10,.10);
  overflow: hidden;            /* panele scrollują wewnętrznie; paski fixed są nad nimi */
}

/* Wspólne wyśrodkowanie pasków fixed do kolumny aplikacji */
.header,
.bottom-nav,
.input-area,
.wall-topbar {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--max-width);
}

/* ============================================================
   Header
   ============================================================ */
.header {
  top: 0;
  z-index: 60;
  height: var(--h-header);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--gutter);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge), 0 1px 0 var(--mist), 0 8px 24px -18px rgba(10,10,10,.5);
  color: var(--ink);
  flex-shrink: 0;
}

/* Zgłoszenie #134 — .settings-dropdown (z-index:70, :389) jest zagnieżdżony w .header
   (z-index:60), więc jego 70 liczy się tylko WEWNĄTRZ stosu .header — na zewnątrz cały
   .header stacka się jako 60, poniżej .outfit-canvas (66, :9043). Dopóki dropdown był
   krótki, nigdy nie sięgał w strefę pływającej .canvas-rail; z dodaną „Wielkością tekstu"
   (#134) już sięga, gdy Twój Look ma jakiekolwiek pozycje. Podbite TYLKO gdy dropdown
   faktycznie otwarty (nie globalnie) — .canvas-backdrop (65, "nad .header, żeby przechwycić
   klik gdy panel [kanwy] otwarty") zachowuje dotychczasowe zachowanie w każdym innym stanie. */
.header--settings-open {
  z-index: 67;
}

/* „AI Presence" — żywy avatar z oddychającą aurą (Złota Nić) */
.header__avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.header__avatar::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--champagne-glow) 0%, transparent 68%);
  animation: aura-breathe 4.5s var(--ease-lux) infinite;
  z-index: -1;
}

.header__avatar--thinking::before {
  animation-duration: 1.6s;
  background: radial-gradient(circle, rgba(193,166,141,.65) 0%, transparent 70%);
}

.header__avatar svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@keyframes aura-breathe {
  0%, 100% { transform: scale(.9);  opacity: .45; }
  50%      { transform: scale(1.18); opacity: .9; }
}

.header__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.header__location {
  font-size: 0.6875rem;
  color: var(--smoke);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Akcje belki — zgłoś uwagę + ustawienia, dociśnięte do prawej krawędzi */
.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.report-trigger {
  border-radius: var(--radius-pill);
  padding: 6px 12px 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78125rem;
  font-weight: 600;
  border: 1.5px solid var(--mist);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  line-height: 1;
}

.report-trigger__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.report-trigger__label {
  white-space: nowrap;
}

/* #148 — pod 400px etykieta raportu wróciła do wyświetlania (SŁOWO, nie sama
   ikona). Zwolnione miejsce zamiast tego z .header__demo-pill__text (dekoracyjne).
   #134 — przycisk-pigułka bez etykiety zjada zbyt dużo szerokości obok zębatki. */
@media (max-width: 400px) {
  .report-trigger {
    padding: 6px 10px;
    font-size: .75rem;
  }
  .header__demo-pill__text {
    display: none;
  }
}

.report-trigger:hover {
  border-color: var(--ink);
}

.report-trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.report-trigger:active {
  background: rgba(0, 0, 0, .05);
}

/* Wariant FAB — fallback dla gdy header trigger jest ukryty */
.report-trigger--fab {
  position: absolute;
  top: 0;
  right: 16px;
  width: auto;
  height: 48px;
  padding: 8px 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
  background: linear-gradient(135deg, var(--champagne) 0%, var(--champagne-deep) 100%);
  box-shadow: 0 0 16px 4px var(--champagne-glow), 0 8px 20px -4px rgba(10,10,10,.5);
  color: var(--pearl);
  font-size: 1.25rem;
  pointer-events: auto;
  animation: feedback-fab-pulse 2.2s ease-in-out infinite;
  transition: transform .15s;
}

.report-trigger--fab:hover {
  transform: translateY(-2px) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .report-trigger--fab {
    animation: none;
  }
}

/* Chmurka zgłoszenia — FALLBACK, widoczny tylko gdy feedbackHeaderBlocked() (patrz app.js)
   bo pełnoekranowy modal wizualnie zasłania przycisk w headerze. Element wewnątrz
   stackującego się .header (z-index 60) nigdy nie może przebić się nad modalem o wyższym
   z-index niezależnie od WŁASNEGO z-index — dlatego to osobny element na poziomie .app.
   Warstwa .feedback-fab wyrównuje się do wyśrodkowanej kolumny .app tym samym trikiem co
   .header (left:0;right:0;margin:auto;max-width), ale ma height:0 — sama nie zajmuje
   miejsca, tylko wyznacza punkt odniesienia dla przycisku absolute. Górny-prawy róg —
   tam gdzie normalnie żyje przycisk w headerze, żeby nie zaskakiwać nową lokalizacją.
   Styl "świecącego" gradientu (jak .canvas-rail__btn) celowo — ma się rzucać w oczy na
   przyciemnionym/rozmytym tle modala, bo user zgłosił że poprzednia stonowana wersja była
   słabo widoczna. z-index nad wszystkimi sheet/modal overlayami (max 10000), pod Spotlight
   Tour (10500) — przewodnik może ją celowo przesłonić. */
.feedback-fab {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--max-width);
  top: 8px;
  height: 0;
  z-index: 10200;
  pointer-events: none;
}

@keyframes feedback-fab-pulse {
  0%, 100% { box-shadow: 0 0 16px 4px var(--champagne-glow), 0 8px 20px -4px rgba(10,10,10,.5); }
  50%      { box-shadow: 0 0 24px 8px var(--champagne-glow), 0 8px 20px -4px rgba(10,10,10,.5); }
}

/* Ustawienia użytkownika — zębatka + dropdown (Ulubione galerie) */
.header__settings {
  position: relative;
  flex-shrink: 0;
}

.header__settings-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--mist);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

.header__settings-btn:hover { border-color: var(--ink); }

.header__settings-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--pearl);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.settings-dropdown {
  position: absolute;      /* względem .header__settings — header fixed + backdrop-filter = containing block, więc NIE fixed */
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  max-height: min(60dvh, 420px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 16px;
  box-shadow: var(--shadow-premium);
  padding: 14px 10px 10px;
  z-index: 70;             /* nad wall-topbar; sheets (9998) zostają wyżej */
}

.settings-dropdown__label {
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
  padding: 0 8px 8px;
}

.settings-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.settings-dropdown__item:hover { background: var(--cloud); }

.settings-dropdown__box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.settings-dropdown__item--checked .settings-dropdown__box {
  background: var(--ink);
  border-color: var(--ink);
}

.settings-dropdown__item--checked .settings-dropdown__box::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--pearl);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.settings-dropdown__hint {
  font-size: 0.6875rem;
  color: var(--smoke);
  padding: 8px 8px 2px;
}

/* Menu 2-poziomowe (Sprint S2f) — pozycja „Ulubione galerie" + powrót z poziomu 2 */
.settings-dropdown__badge {
  margin-left: auto;
  min-width: 20px;
  /* Zgłoszenie #98 — dawne badge'e były zawsze krótkie (liczba/"Wszystko"); nazwa
     galerii ("Kompletuj looki pod") potrafi być dłuższa niż mieści 250px dropdown. */
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--cloud);
  color: var(--smoke);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
}

/* Zgłoszenie #134 — kontrola wielkości tekstu, jedyny stepper w dropdownie
   (reszta pozycji to nawigacja do sub-panelu poziomu 2). */
.settings-dropdown__scale {
  padding: 10px 8px 6px;
  border-top: 1px solid var(--mist);
  margin-top: 4px;
}
.settings-dropdown__scale-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.settings-dropdown__scale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.settings-dropdown__scale-btn {
  width: 44px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--mist);
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.settings-dropdown__scale-btn:hover:not(:disabled) {
  background: var(--champagne-soft);
  border-color: var(--champagne-deep);
}
.settings-dropdown__scale-btn:disabled {
  opacity: .4;
  cursor: default;
}
.settings-dropdown__scale-value {
  flex: 1;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--smoke);
}

.settings-dropdown__back {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  margin-bottom: 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--smoke);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.settings-dropdown__back:hover { background: var(--cloud); color: var(--ink); }

/* ============================================================
   Czat
   ============================================================ */
.chat {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Rec 4: bez tego przewinięcie do granicy .chat łańcuchowało się do dokumentu
     (całą stronę dawało się "odbić" przy szybkim scrollu na mobile). */
  overscroll-behavior: contain;
  /* treść przewija się POD szklanym headerem i inputem/navem.
     Zgłoszenie #134 — boczny margines na tokenie --gutter (12px mobile,
     16px od 640px), zamiast literalnego 16px. */
  padding: calc(var(--h-header) + 10px) var(--gutter)
           calc(var(--h-input) + var(--h-nav) + 10px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* Poza top 5 (a11y) — wrapper wokół listy wiadomości nosi teraz role="log"/aria-live
   (patrz index.html), zamiast <main class="chat"> samej. Musi powtórzyć layout .chat
   (flex column + ten sam gap), inaczej odstępy między wiadomościami by zniknęły —
   x-show="messages.length > 0" żeby pusty kontener nie dokładał 12px gapu pod hero. */
.messages-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Rec 4 — "↓ Nowa odpowiedź": widoczny tylko gdy strumień/odpowiedź wylądowała,
   a użytkownik w tym czasie czytał wyżej (scrollToBottom() nie przewinęło go
   automatycznie). Nad composerem, wyśrodkowany w kolumnie czatu. */
.chat-jump-btn {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-input) + var(--h-nav) + 14px);
  transform: translateX(-50%);
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  min-height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: var(--shadow-premium, 0 8px 24px rgba(10,10,10,.22));
  cursor: pointer;
  animation: msg-rise .3s var(--ease-lux) both;
}
@media (hover: hover) {
  .chat-jump-btn:hover { background: var(--champagne-deep); }
}
.chat-jump-btn:active { transform: translateX(-50%) scale(.96); }

/* Popup "uczę się nowej okazji" — nieblokujący pasek nad composerem (ten sam
   wzorzec pozycjonowania co .chat-jump-btn), nigdy overlay/backdrop: user może
   pisać dalej, dopóki backend syntezuje profil okazji w tle. */
.occasion-learning-popup {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-input) + var(--h-nav) + 14px);
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 380px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  box-shadow: var(--shadow-premium, 0 8px 24px rgba(10,10,10,.22));
  animation: msg-rise .3s var(--ease-lux) both;
}
.occasion-learning-popup__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne-deep, #c9a86a);
  animation: occasion-learning-pulse 1.4s ease-in-out infinite;
}
.occasion-learning-popup__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.occasion-learning-popup__label {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--champagne-deep, #c9a86a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes occasion-learning-pulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ============================================================
   Wiadomości
   ============================================================ */
.message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  gap: 4px;
  min-width: 0; /* Kluczowe dla karuzeli */
}

.message--assistant {
  align-self: flex-start;
  /* Zgłoszenie #143 — było flex-direction:row + gap:10px na awatar w osobnej
     kolumnie; awatar żyje teraz WEWNĄTRZ .composing/.stylist-tag (index.html),
     .message-content jest jedynym dzieckiem — flex-row nie ma już czego układać. */
  max-width: 100%;
  min-width: 0;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Zgłoszenie #143 — było calc(100% - 38px): rezerwacja na awatar w bocznej
     kolumnie, przeniesiony teraz do wnętrza .composing/.stylist-tag. Każda
     wiadomość asystenta odzyskuje te 38px szerokości prozy. */
  max-width: 100%;
}

/* Zero wpływu na layout na KAŻDEJ szerokości (dzieci renderują się tak, jakby
   wrapper nie istniał) — do #134/#143 stawał się przypiętą prawą kolumną od
   1280px, cofnięte przy #146 (tester: wyniki mają stać POD prozą, w rzędzie,
   patrz .chat-looks/.product-cards w bloku ≥1024px). */
.message-results {
  display: contents;
}

/* Zgłoszenie #143 — było 28px w osobnej kolumnie obok .message-content (38px
   zjedzone na KAŻDEJ wiadomości asystenta, patrz auto-memory fix_134_chat_density
   dla analogicznego problemu z .message--assistant). Teraz 18px, inline wewnątrz
   .composing/.stylist-tag jako prefiks etykiety — position:relative, żeby aura
   ::before (niżej) miała punkt odniesienia mniejszy niż `inset` liczony od 28px. */
.message-avatar {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.message-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.message--user {
  align-self: flex-end;
}

/* Poza top 5 (martwy kod) — dawniej ta reguła ustawiała padding/radius/font-size/
   line-height, które `.message--assistant p` NATYCHMIAST cofała (bazę konsumowała
   wyłącznie bańka usera). Te cztery przeniesione niżej wprost do `.message-bubble`;
   tu zostają tylko właściwości faktycznie wspólne dla obu ról. Wynik obliczony
   identyczny — to czysty porządek w kaskadzie, nie zmiana wizualna. */
.message p,
.message-bubble {
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%; /* Zapobiega wychodzeniu tekstu */
  min-width: 0;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: var(--radius-bubble);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Wiadomości asystenta — głos editorialowy (proza na alabastrze, bez dymka) */
.message--assistant p {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  /* Zgłoszenie #134 — 14.5px/1.62 → 14px/1.55: mierzone na wąskim wierszu
     (264px na 360px viewport) 1.62 dawał więcej pionu niż wiersz potrzebował. */
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Pierwszy akapit = lead w Playfair — TYLKO gdy jest więcej niż jeden akapit (Rec 1).
   Bez :not(:only-of-type) jednozdaniowa odpowiedź stawała się plakatem, a streamowany
   tekst (który dociera jako jeden rosnący akapit aż do złamania na \n\n) renderował się
   cały czas wielkim serifem wbrew regule z DESIGN.md: "Playfair wyłącznie dla momentów
   redakcyjnych". */
.message--assistant .message-content > p:first-of-type:not(:only-of-type) {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink);
}

.message--assistant p + p { margin-top: 6px; }

/* Zgłoszenie #127 — punkty stylu "ekspertka" (renderRichText, app.js). `span`, nie
   `div`/`li`: musi zagnieżdżać się bezpiecznie w rodzicu `<p>` bez kolizji z parserem HTML. */
.rich-li {
  display: block;
  padding-left: 14px;
  position: relative;
  margin-top: 4px;
}
.rich-li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--champagne-deep);
}

/* Eyebrow „Stylistka" + złota nić nad prozą. Rec 3: 10px → 12px (podłoga
   czytelności); letter-spacing przycięty z .2em do .16em, żeby zachować
   ten sam ~2px odstęp bezwzględny zamiast robić się jeszcze luźniejszy. */
.stylist-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  margin-bottom: 7px;
}
.stylist-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--champagne-soft), transparent);
}

/* Wiadomości użytkownika */
.message--user .message-bubble {
  background: var(--color-user-bg);
  color: var(--color-user-text);
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow-card);
}

/* Rec 2 — bańka nieudanej wysyłki + retry. Wrapper zastępuje gołą .message-bubble jako
   jedyne dziecko .message--user, żeby zmieścić przycisk pod bańką bez naruszania
   align-self:flex-end na .message samej (patrz .message--user powyżej). */
.message-user-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.message--user .message-bubble--failed {
  opacity: .55;
}

.message-retry {
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--nope, #c0473f);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Poza top 5 (martwy kod) — .typing-indicator/@keyframes typing-bounce usunięte:
   zero referencji w markupie, zastąpione dawno przez .composing poniżej. */

/* Stan „komponowania" — branded (shimmer zamiast 3 kropek). Zgłoszenie #143 —
   flex row: awatar (z aurą, przeniesiony z bocznej kolumny) + tekst w linii. */
.composing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.composing__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  background: linear-gradient(100deg, var(--smoke) 30%, var(--champagne) 50%, var(--smoke) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 2.2s linear infinite;
}

/* Aura na avatarze wiadomości podczas komponowania */
.message-avatar--thinking {
  position: relative;
  overflow: visible;
}
.message-avatar--thinking::before {
  content: '';
  position: absolute;
  inset: -4px;  /* Zgłoszenie #143 — było -5px na 28px awatarze, przeskalowane do 18px */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,166,141,.6) 0%, transparent 70%);
  animation: aura-breathe 1.6s var(--ease-lux) infinite;
  z-index: -1;
}

/* Rec 4 — przy reduced-motion globalny hamulec (linia ~266) zeruje animation-duration,
   co zamraża shimmer/aura na przypadkowej klatce zamiast dać czytelny statyczny sygnał
   "w toku" (`.composing__text` mogła zamrozić się w środku gradientu, prawie nieczytelna).
   Zastępujemy jednoznacznym, statycznym stanem. */
@media (prefers-reduced-motion: reduce) {
  .composing__text {
    background: none;
    -webkit-text-fill-color: var(--smoke);
    color: var(--smoke);
  }
  .message-avatar--thinking::before {
    opacity: .7;
  }
}

/* Choreografia wejścia wiadomości — jednorazowo (klasa czyszczona przez animationend,
   żeby przejścia zakładek nie re-animowały całej rozmowy) */
.message--enter {
  animation: msg-rise .45s var(--ease-lux) both;
}
@keyframes msg-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Lekkie przejście między zakładkami — fade aktywnego panelu (1 warstwa GPU) */
.chat,
.quiz-panel,
.clone-panel,
.wishlist-panel,
.dna-panel,
.tab-panel {
  animation: tab-fade .26s var(--ease-lux) both;
}
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Okazja — Welcome hero („Konsultacja")
   ============================================================ */
.chat-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin: auto 0;            /* centrowanie w pionie w obszarze czatu */
  padding: 12px 8px;
  animation: msg-rise .5s var(--ease-lux) both;
}
.chat-hero__mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne-deep);
  margin-bottom: 10px;
}
.chat-hero__mark::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--champagne-glow) 0%, transparent 68%);
  animation: aura-breathe 4.5s var(--ease-lux) infinite;
  z-index: -1;
}
.chat-hero__greeting {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.chat-hero__sub {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--smoke);
  max-width: 300px;
  margin: 4px 0 20px;
}
.hero-continue {
  display: inline-flex;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--champagne-soft);
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s var(--ease-lux), border-color .2s;
  margin-bottom: 16px;
}
.hero-continue:hover {
  background: var(--champagne-glow);
  border-color: var(--champagne-deep);
}
.occasion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.occasion-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--mist);
  background: var(--pearl);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-lux), border-color .2s;
  text-align: left;
}
.occasion-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-premium);
  border-color: var(--champagne-soft);
}
.occasion-card__icon { color: var(--champagne-deep); }
.occasion-card__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.chat-hero__hint {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--smoke);
  margin-top: 18px;
}

/* Mikser wizualny (Faza 59) — kalibracja szybkiego 👍/👎 */
.mixer-trigger {
  margin-top: 18px;
  border: 1px solid var(--mist);
  background: var(--pearl);
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background .2s var(--ease-lux);
}
.mixer-trigger:hover { background: var(--champagne-soft); }

.mixer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
}
.mixer-panel {
  background: var(--paper);
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 86dvh;  /* Poza top 5 — jedyne vh w tej zakładce, reszta pliku używa dvh */
  overflow-y: auto;
  padding: 20px;
  box-shadow: var(--shadow-premium);
}
.mixer-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 6px;
}
.mixer-panel__close {
  background: none;
  border: none;
  font-size: 1.125rem;
  cursor: pointer;
  color: var(--smoke);
}
.mixer-panel__hint { color: var(--smoke); font-size: 0.8125rem; margin-bottom: 14px; }
.mixer-loading, .mixer-empty { text-align: center; padding: 30px 10px; color: var(--smoke); }
.mixer-panel__cta {
  margin-top: 12px;
  border: none;
  background: var(--ink);
  color: var(--pearl);
  padding: 10px 20px;
  border-radius: var(--radius-input);
  cursor: pointer;
  font-weight: 600;
}
.mixer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mixer-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--cloud);
}
.mixer-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mixer-card__actions {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mixer-card__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  font-size: 1.125rem;
  cursor: pointer;
  background: var(--pearl);
  box-shadow: var(--shadow-card);
}
.mixer-card__btn--love { color: var(--love); }
.mixer-card__btn--nope { color: var(--nope); }

/* Badge personalizacji (Faza 59) — nad karuzelą, gdy rerank V_taste aktywny */
.personalization-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--champagne-deep);
  background: var(--champagne-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 2px 2px 6px;
}

/* Powód dopasowania karty do profilu (Faza 67) */
.match-reason {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--champagne-deep);
  margin: 6px 0 0;
  opacity: 0.85;
  line-height: 1.4;
}

/* Nagłówek selekcji nad karuzelą (framing) */
.chat-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 2px 2px;
}
.chat-section-head__label {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  white-space: nowrap;
}
.chat-section-head__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--champagne-soft), var(--mist));
}
.chat-section-head__count {
  font-size: 0.6875rem;
  color: var(--smoke);
  white-space: nowrap;
}

/* Zgłoszenie #166 — produkt źródłowy przypięty nad selekcją */
.chat-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  margin-bottom: 4px;
}

.chat-anchor__thumb {
  width: 40px;
  height: 53px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--cloud);
  font-size: 0;
  flex: 0 0 auto;
}

.chat-anchor__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-anchor__label {
  font-size: 0.625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smoke);
}

.chat-anchor__name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-anchor__brand {
  font-size: 0.75rem;
  color: var(--color-placeholder);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Pole wejściowe
   ============================================================ */
.input-area {
  bottom: var(--h-nav);
  z-index: 55;
  padding: 10px var(--gutter) 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 -1px 0 var(--mist);
  flex-shrink: 0;
}

.input-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pearl);
  border: none;
  border-radius: var(--radius-input);
  padding: 8px;
  box-shadow: var(--shadow-card);
}

/* Leading „+" — most do Klonuj Styl. Rec 5: 36→44px (próg WCAG 2.5.5/HIG) —
   ikona zostaje 20px, rośnie tylko obszar dotyku wokół niej. */
.input-attach {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--smoke);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .2s, background .2s, transform .2s var(--ease-spring);
}
@media (hover: hover) {
  .input-attach:hover {
    color: var(--champagne-deep);
    background: var(--champagne-soft);
    transform: scale(1.06);
  }
}
.input-attach:active {
  transform: scale(.94);
}

/* Rec 5: 16px, nie 15px — pod 16px iOS Safari auto-zoomuje stronę przy focusie. */
.input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-assistant-text);
  max-height: 120px;
  overflow-y: auto;
}

.input-field::placeholder {
  color: var(--color-placeholder);
}

/* Kursor sam sygnalizuje focus — globalny złoty ring :focus-visible
   byłby tu zbędnym prostokątem wokół textarey. Wygrywa specyficznością (0,2,0). */
.input-field:focus,
.input-field:focus-visible {
  outline: none;
}

/* Rec 5: licznik znaków — widoczny dopiero blisko limitu (maxlength=2000 w markupie).
   `.input-area` nie jest flex-kontenerem, więc wyrównanie zwykłym text-align, nie align-self. */
.input-char-count {
  margin: 4px 4px 0 0;
  padding: 0 6px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  color: var(--smoke);
}
.input-char-count--limit {
  color: var(--nope, #c0473f);
  font-weight: 600;
}

/* Rec 5: 36→44px — drugi z dwóch głównych celów dotykowych w composerze. */
.send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: var(--pearl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, opacity .15s, transform .2s var(--ease-spring);
}

@media (hover: hover) {
  .send-btn:hover:not(:disabled) {
    background: var(--champagne-deep);
    transform: scale(1.06);
  }
}
.send-btn:active:not(:disabled) {
  transform: scale(.94);
}

.send-btn:disabled {
  opacity: .4;
  cursor: default;
}

.send-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Rec 3 — system chipów rozmowy. JEDEN komponent (`.chip`), DWA jawnie różne
   warianty: `.chip--action` wysyła od razu (dawny `.suggestion-btn`),
   `.chip--select` zaznacza i czeka na osobne CTA (dawny `.chip-toggle` w
   kontekście czatu — `.chip-toggle` sam zostaje bez zmian, bo obsługuje też
   przełącznik "Podobne/Zakotwiczone" w zakładce Klonuj Styl, poza zakresem
   tego auditu). Wcześniej oba warianty czatu miały bajt-w-bajt identyczny
   CSS mimo odmiennego zachowania — podręcznikowe naruszenie heurystyki #4.
   `--champagne` jako akcent zamiast `--color-accent` (=`--ink`): sygnatura
   AI/rekomendacji z DESIGN.md, dotąd nieobecna w samej rozmowie poza
   `.stylist-tag`. min-height 44px — próg WCAG 2.5.5, było ~28px.
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 22px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease-spring);
}
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline-offset: 2px; }

/* Wysyła od razu — wypełniony, strzałka jako drugi (nie tylko kolorowy) sygnał zachowania. */
.chip--action {
  border: none;
  background: var(--champagne-soft);
  color: var(--champagne-deep);
}
.chip--action::after {
  content: '→';
  font-size: 0.8125rem;
}
@media (hover: hover) {
  .chip--action:hover { background: var(--champagne); color: var(--ink); }
}

/* Zaznacza, czeka na CTA grupy — obrys + kropka-znacznik zamiast wypełnienia,
   żeby "wysyła"/"zaznacza" różniły się bez czytania etykiety. */
.chip--select {
  border: 1.5px solid var(--mist);
  background: var(--pearl);
  color: var(--ink);
}
.chip--select::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
@media (hover: hover) {
  .chip--select:hover { border-color: var(--champagne-deep); }
}
.chip--select[aria-pressed="true"] {
  border-color: var(--champagne-deep);
  background: var(--champagne-soft);
}
.chip--select[aria-pressed="true"]::before {
  background: var(--champagne-deep);
  border-color: var(--champagne-deep);
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Chip Hint (zgłoszenie #114) — ostatni szczebel drabiny podpowiedzi, gdy nie ma
   ani suggestions ani chip_sections do zaproponowania. Rec 3: awansowany z
   wyszarzonej kursywy 13px (wyglądało jak przypis) do widocznego, obramowanego
   wejścia — treść to zawsze stała zachęta z backendu ("napisz własnymi słowami"),
   nieklikalna z definicji (nie ma jednego sendowalnego zdania do wysłania). */
.chip-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  min-height: 44px;
  border: 1.5px dashed var(--champagne-soft);
  border-radius: 16px;
  background: var(--cloud);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink);
}
.chip-hint::before {
  content: '✎';
  flex-shrink: 0;
  color: var(--champagne-deep);
  font-size: 0.875rem;
}

/* Podpowiadacz stylu rozmowy (Zgłoszenie #127) — jednorazowy, pod pierwszą odpowiedzią.
   Osobny wiersz od .suggestions (świadomie: nie chip engine), stonowany, żeby nie
   konkurował wizualnie z realnymi akcjami rozmowy. */
.tone-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--champagne-soft);
}
.tone-nudge__label {
  font-size: 0.75rem;
  color: var(--smoke);
  margin-right: 2px;
}
.tone-nudge__dismiss {
  background: none;
  border: none;
  font-size: 0.75rem;
  text-decoration: underline;
  color: var(--smoke);
  cursor: pointer;
  padding: 4px 2px;
}

/* ============================================================
   Karta produktu
   ============================================================ */
.carousel-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* Kluczowe dla przycisku w prawo */
}

/* Rec 5: `.carousel-wrap { overflow: hidden }` ucina globalny ring :focus-visible
   (offset +2px) na `.carousel-btn` wewnątrz — zamiast zdejmować overflow (ryzyko
   odsłonięcia karuzeli poza kolumnę), ring wchodzi do środka przycisku. */
.carousel-btn:focus-visible {
  outline-offset: -2px;
}

/* Gradient "mgła" — fade na prawej krawędzi */
.carousel-track {
  position: relative;
}

.carousel-track::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--paper));
  pointer-events: none;
  z-index: 1;
}

.carousel-track--end::after {
  display: none;
}

.product-cards {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  max-width: 100%;
}

.product-cards::-webkit-scrollbar {
  display: none;
}

/* Strzałki nawigacji */
.carousel-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Rec 5: 32→44px — trzeci główny cel dotykowy poniżej progu w tej zakładce. */
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .15s var(--ease-spring);
}

@media (hover: hover) {
  .carousel-btn:hover:not(:disabled) {
    background: var(--color-accent);
    color: var(--pearl);
    border-color: var(--color-accent);
  }
}
.carousel-btn:active:not(:disabled) {
  transform: scale(.92);
}

.carousel-btn:disabled {
  opacity: .3;
  cursor: default;
}

.carousel-btn svg {
  width: 14px;
  height: 14px;
}

.carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex: 1;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}

.carousel-dot--active {
  background: var(--champagne-deep);
  transform: scale(1.4);
}

/* Zgłoszenie #131 — placeholder generyczny dla dowolnego <img> (karty produktu, kafle
   looków, galeria arkusza, podgląd pełnoekranowy) po wyczerpaniu retry CDN marki albo
   braku zdjęcia w katalogu (imgFallback→_showImgPlaceholder, app.js). `src` jest wtedy
   usunięty, więc tło+ikona z tej reguły to jedyna treść wizualna — object-fit/rozmiar
   z reguły kontekstowej (np. .product-card__image img) zostają nietknięte. */
.img-placeholder {
  background-color: var(--champagne-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8896B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M5 9l7-4 7 4M4 10l8 4 8-4M4 10v7l8 4 8-4v-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30%;
}

.product-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--mist);
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  /* 300px kontenera × 65% = 187px → 1 pełna + ~55% kolejnej widoczne */
  width: 187px;
  scroll-snap-align: start;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux);
}

.product-card__sponsored-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
  background: rgba(250, 249, 246, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 3px 9px;
}

/* Zgłoszenie #126 — karta dołożona mimo relaksacji filtra rozmiaru. Prawy górny róg,
   ten sam wzorzec przezroczystości co plakietka sponsorowana (lewy górny), żeby obie
   mogły współistnieć na jednej karcie bez kolizji. */
.product-card__size-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  background: rgba(250, 249, 246, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 3px 9px;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-premium);
  }
}

.product-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--color-bg);
  transition: transform .65s var(--ease-lux);
}

@media (hover: hover) {
  .product-card:hover .product-card__image {
    transform: scale(1.05);
  }
}

.product-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-card__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Poza top 5 — #7a6a58 na #f0ede8 mierzy ~4.46:1, poniżej progu AA (4.5:1) przy 10px.
   Oba to prawie-duplikaty tokenów z palety: --smoke był świadomie przyciemniony właśnie
   pod kontrast ≥4.5:1 (patrz DESIGN.md), --cloud to niemal bajt-w-bajt #f0ede8. */
.product-card__category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: capitalize;
  color: var(--smoke);
  background: var(--cloud);
  border-radius: 4px;
  padding: 2px 7px;
  align-self: flex-start;
}

.product-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-assistant-text);
  line-height: 1.3;
}

.product-card__price {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.product-card__hook {
  font-size: 0.75rem;
  color: var(--smoke);
  line-height: 1.4;
  margin: 2px 0 4px;
}

.product-card__image--clickable { cursor: pointer; }

.size-oos-notice {
  font-size: 0.6875rem;
  color: var(--nope);
  background: var(--nope-bg);
  padding: 4px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
}

.product-card__size-collapsed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--love);
  background: var(--love-bg);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  margin-top: 2px;
}


/* Rozmiary */
.product-card__sizes-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-placeholder);
  margin-bottom: 4px;
}

.product-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.size-tile {
  position: relative;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-assistant-text);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}

.size-tile:hover:not(.size-tile--oos):not(.size-tile--selected) {
  border-color: var(--color-accent);
}

.size-tile--selected {
  background: var(--color-accent);
  color: var(--pearl);
  border-color: var(--color-accent);
  border-width: 2px;
}

/* Fala 2 (KROK 3) — podpowiedź rozmiaru z profilu, zanim user cokolwiek wybierze.
   Champagne = sygnatura AI/rekomendacji (DESIGN.md), świadomie inny język niż
   --selected (pełne wypełnienie) — to propozycja, nie stan zapisany. */
.size-tile--suggested {
  border-color: var(--champagne);
  border-width: 2px;
  background: var(--champagne-soft);
}

.size-tile--oos {
  opacity: .4;
  cursor: pointer;
  overflow: hidden;
}

.size-tile--oos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    rgba(0,0,0,.35) calc(50% - 0.5px),
    rgba(0,0,0,.35) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.size-tile--low-stock::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* Poza top 5 — Tailwind amber zamieniony na --gold-stock, istniejący token DESIGN.md
     zarezerwowany dokładnie pod sygnały "ostatnie sztuki". */
  background: var(--gold-stock);
}

.size-tile--unverified {
  border-style: dashed;
  opacity: .8;
}

.size-tile--unverified::before {
  content: '?';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.5625rem;
  line-height: 1;
  color: var(--color-placeholder);
}

.size-tile--selected.size-tile--unverified::before {
  color: var(--pearl);
}

/* Legenda dostępności rozmiarów — Zgłoszenie #173 */
.size-legend {
  font-size: 0.6875rem;
  color: var(--color-placeholder);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.size-legend__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px dashed var(--color-placeholder);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* CTA */
.product-card__cta {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: var(--color-border);
  color: var(--color-placeholder);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: default;
  transition: background .2s, color .2s;
  text-align: center;
}

.product-card__cta--active {
  background: var(--color-accent);
  color: var(--pearl);
  cursor: pointer;
}

.product-card__cta--active:hover {
  background: var(--color-send-hover);
}

/* Poza top 5 — trio zieleni Tailwind zamienione na --love/--love-bg, istniejące tokeny
   DESIGN.md zarezerwowane dokładnie pod polubienia/sukces. */
.product-card__cta--wishlisted {
  background: var(--love-bg);
  color: var(--love);
  border: 1.5px solid var(--love);
  cursor: pointer;
}

/* Karta czatu: action row 👎/szafa/👍 (Faza 59.1) — zastępuje kafelki rozmiaru */
.product-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Rec 5: min-height 44px — było ~37px (padding 10px*2 + 17px glyph). Karta ma
   overflow:hidden, więc ring :focus-visible ucina się na skrajnych przyciskach
   trzyelementowego rzędu — offset ujemny wciąga go do środka zamiast na zewnątrz. */
.product-card__action-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.0625rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .1s, border-color .15s;
}
.product-card__action-btn:focus-visible {
  outline-offset: -2px;
}

.product-card__action-btn:active { transform: scale(.92); }

@media (hover: hover) {
  /* Poza top 5 — teraz, gdy wszystkie trzy ikony to SVG (currentColor), hover może
     przebarwić samą ikonę razem z obrysem/tłem, nie tylko dwa z trzech kanałów. */
  .product-card__action-btn--nope:hover { border-color: var(--nope, #c0473f); background: var(--nope-bg, #f7ecea); color: var(--nope, #c0473f); }
  .product-card__action-btn--wardrobe:hover { border-color: var(--champagne-deep, #a8896b); background: var(--champagne-soft, #ece3d7); color: var(--champagne-deep, #a8896b); }
  .product-card__action-btn--love:hover { border-color: var(--love, #2f7a55); background: var(--love-bg, #e9f2ec); color: var(--love, #2f7a55); }
}

/* Chip Sections (Faza 59.1) — STAN 2: Styl + Kolor jako osobne sekcje toggle + CTA */
.chip-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Rec 3: 11px → 12px — pod podłogą czytelności ustaloną w poprzednim audycie
   (21× undersized-ui-text w detektorze /impeccable). */
.chip-section__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-placeholder, var(--smoke));
  margin-bottom: 6px;
}

.chip-section__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-toggle {
  padding: 6px 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: 20px;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.chip-toggle--active {
  background: var(--color-accent);
  color: var(--pearl);
}

.chip-sections__cta {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  background: var(--ink, #0a0a0a);
  color: var(--pearl);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .15s var(--ease-spring);
}

@media (hover: hover) {
  .chip-sections__cta:hover:not(:disabled) { background: var(--champagne-deep); }
}
.chip-sections__cta:active:not(:disabled) { transform: scale(.97); }

.chip-sections__cta:disabled {
  opacity: .4;
  cursor: default;
}

/* ============================================================
   Komplety w czacie (Zgłoszenia #121/#123/#124) — reużywa .look-tile
   (LOOKI/Wall, style.css ~10464) dla samych kafli; własny wrapper zamiast
   .wall-outfit-ctl/.wall-insert, bo tamten niesie grid-column/animację
   specyficzną dla masonry Ściany — tu żyjemy w stosie wiadomości czatu.
   ============================================================ */
.chat-looks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.chat-look {
  border: 1.5px solid var(--champagne);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(193,166,141,.06) 0%, rgba(236,227,215,.1) 100%);
  overflow: hidden;
  /* Zgłoszenie #136 — cała karta jest klikalna (nie tylko nagłówek/chip), zob.
     index.html @click="_pinChatLook(...)" na .chat-look. */
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  .chat-look:hover { border-color: var(--champagne-deep); }
}

/* Zgłoszenie #143 — .chat-look__header nigdy nie miał WŁASNEGO paddingu/layoutu (komentarz
   niżej "zachowuje dotychczasowy layout/padding" zakładał, że taki istnieje — nie istniał;
   etykieta/cena/hint po prostu stykały się z krawędzią karty, niewidoczne na mobile przy
   szerokim jednokolumnowym card, jawnie złamane w wąskiej 400px kolumnie wyników desktopu
   (#134 dwupanelowa Stylistka). Flex-wrap zamiast jednej linii — trzy elementy o różnej
   długości muszą się łamać przy każdej szerokości karty, nie tylko przy najwęższej. */
.chat-look__header.chat-look__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 12px 14px 10px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.chat-look__pick:focus-visible {
  outline: 2px solid var(--champagne-deep);
  outline-offset: -2px;
  border-radius: 8px 8px 0 0;
}

.chat-look__pick-hint {
  /* Zawsze własny wiersz pod tytułem/ceną — przewidywalny złam niezależnie od
     szerokości karty, zamiast czasem-w-linii-czasem-złamany. */
  flex-basis: 100%;
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  color: var(--champagne-deep);
  opacity: .75;
}

.chat-look__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.chat-look__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--champagne-deep);
  font-weight: 600;
}

.chat-look__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 14px;
  scrollbar-width: none;
}
.chat-look__row::-webkit-scrollbar { display: none; }

.chat-look__row .look-tile {
  flex: 0 0 96px;
}

/* Rec 5 (poprzednia runda) — hover w @media(hover:hover), cel dotykowy ≥44px. */
.chat-look__cta {
  align-self: flex-start;
  margin: 0 14px 12px;
  min-height: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s var(--ease-spring);
}
@media (hover: hover) {
  .chat-look__cta:hover { background: var(--champagne-deep); }
}
.chat-look__cta:active { transform: scale(.97); }
.chat-look__cta:disabled { opacity: .5; cursor: default; }

/* Zgłoszenie #129 — potwierdzenie podmiany canvasu, ten sam wrapper co CTA
   (.outfit-canvas__confirm niesie kolory/układ, tu tylko pozycja w karcie). */
.chat-look__confirm {
  margin: 0 14px 12px;
  flex-wrap: wrap;
}

/* Zgłoszenie #129 — komplet przypięty chipem z tytułem (reszta kompletów ukryta
   przez x-show w index.html, nie usunięta z DOM — Alpine przełącza z powrotem
   bez ponownego renderu przy "Pokaż wszystkie"). */
.chat-look--pinned {
  border-color: var(--champagne-deep);
  background: linear-gradient(135deg, rgba(193,166,141,.12) 0%, rgba(236,227,215,.16) 100%);
}

.chat-looks__pinbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  color: var(--champagne-deep);
  font-weight: 600;
}

.chat-looks__pinbar-reset {
  border: none;
  background: none;
  padding: 4px 2px;
  min-height: 32px;
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Komunikaty toast — globalny stos (2026-08-17)
   ============================================================
   Dotąd oba szablony (error-toast/success-toast) żyły WEWNĄTRZ
   <main class="chat" x-show="activeTab === 'chat'">, więc `align-self: center`
   liczyło na fleksowego rodzica z TEJ zakładki — poza czatem showToast()/
   pushowanie błędu nigdy się nie renderowało (znalezione na "Cofnij" po
   przetasowaniu w Pracowni, ten sam wzorzec buga co panel Pracowni w
   poprzedniej rundzie: zagnieżdżenie w cudzym x-show). `.toast-stack` jest
   teraz `position: fixed`, niezależny od tego, który `x-show` akurat jest aktywny. */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-nav) + 12px);
  transform: translateX(-50%);
  z-index: 10300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  padding: 0 16px;
  pointer-events: none;
}

.error-toast,
.success-toast {
  pointer-events: auto;
}

.error-toast {
  /* Zgłoszenie #162 — różowawy tint, NIE czysta biel: sweep #fff→var(--pearl)
     w eadf88b rozbił #fff0f0 na var(--pearl)0f0 (wartość nieprawidłowa jako kolor). */
  background: #fff0f0;
  border: 1px solid #ffcccc;
  color: #c0392b;
  font-size: 0.8125rem;
  padding: 8px 14px;
  border-radius: 8px;
  max-width: 100%;
  text-align: center;
}

.success-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fff4;
  border: 1px solid #b8f0cc;
  color: #1e7e42;
  font-size: 0.8125rem;
  padding: 8px 14px;
  border-radius: 8px;
  max-width: 100%;
  text-align: center;
}

/* Akcja "Cofnij" (2026-08-16, Pracownia Etap 3) — patrz app.js::showToast(text, action). */
.success-toast__action {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid #1e7e42;
  border-radius: 999px;
  background: none;
  color: #1e7e42;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   Klonuj Styl - Preview
   ============================================================ */
.clone-preview {
  margin: 16px auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

.clone-preview__container {
  position: relative;
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  border: 2px solid var(--pearl);
}

.clone-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clone-preview__clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: var(--pearl);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}

.clone-preview__clear:hover {
  background: rgba(220, 38, 38, 0.9);
}

.clone-error {
  margin-top: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  text-align: center;
}

.clone-query-dna {
  margin-top: 16px;
  padding: 0 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-assistant-text);
  text-align: center;
  font-style: italic;
  opacity: 0.9;
}

[x-cloak] { display: none !important; }

/* ============================================================
   Bottom Navigation
   ============================================================ */
.bottom-nav {
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--h-nav);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge), 0 -1px 0 var(--mist), 0 -10px 30px -20px rgba(10,10,10,.45);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--smoke);
  font-family: var(--font-ui);
  padding: 9px 0 7px;
  transition: color .2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Otoczka ikony — nośnik „fill"/uniesienia i badge */
.nav-item__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border-radius: 15px;
  transition: transform .4s var(--ease-spring), background .25s var(--ease-lux);
}

/* Aktywna ikona: unosi się + „fill" (złoty chip) */
.nav-item--active { color: var(--champagne-deep); }

.nav-item--active .nav-item__icon {
  transform: translateY(-4px);
  background: var(--champagne-soft);
}

.nav-item--active svg { stroke-width: 2.2; }

/* Minimalistyczny wskaźnik kropkowy na dole */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne-deep);
  transform: translateX(-50%) scale(0);
  transition: transform .35s var(--ease-spring);
}

.nav-item--active::after { transform: translateX(-50%) scale(1); }

.nav-item__label {
  font-size: clamp(0.5rem, 2.5vw, 0.625rem);
  letter-spacing: .03em;
  font-weight: 500;
  white-space: nowrap;
  transition: font-weight .2s;
}

.nav-item--active .nav-item__label {
  font-weight: 700;
}

/* Badge powiadomień nad ikoną listy życzeń */
.nav-badge {
  position: absolute;
  top: -5px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--champagne-deep);
  color: var(--pearl);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 8px var(--champagne-glow);
  animation: badge-pop .4s var(--ease-spring);
}

@keyframes badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Panele placeholder */
.tab-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--h-header) 24px var(--h-nav);
  color: var(--color-placeholder);
  font-size: 0.9375rem;
}

/* ── Lista życzeń ── */
.wishlist-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--h-header);
  padding-bottom: var(--h-nav);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Toast: cofnij usunięcie */
.wishlist-toast {
  position: sticky;
  top: var(--h-header);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ink);
  color: var(--pearl);
  padding: 11px 16px;
  font-size: 0.8125rem;
}
.wishlist-toast__msg {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wishlist-toast__undo {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  text-decoration: underline;
}

/* Stan pusty */
.wishlist-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-placeholder);
  font-size: 0.9375rem;
  padding: 40px 24px;
  text-align: center;
}
.wishlist-empty__hint {
  font-size: 0.8125rem;
  color: var(--smoke);
  max-width: 240px;
}
.wishlist-empty__cta {
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: 24px;
  border: 1.5px solid var(--ink);
  background: var(--pearl);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
.wishlist-empty__cta:hover { background: var(--champagne-soft); }

.avail-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--pearl);
}
.dot--ok     { background: #27ae60; }
.dot--low    { background: #e67e22; }
.dot--none   { background: var(--smoke); }
.dot--unknown { background: transparent; }

/* ============================================================
   Responsywność
   ============================================================ */
@media (max-width: 480px) {
  /* Zgłoszenie #134 — było ".message" (obie role): ponieważ ta reguła stoi PO
     bazowej .message--assistant (:543) i ma tę samą specyficzność (0,1,0),
     wygrywała kaskadą i przywracała 90% tam, gdzie baza dawała już 100% —
     żywa pułapka złapana pomiarem w przeglądarce. Zawężone do bańki usera,
     dla której 90% (szerzej niż bazowe .message:80%) było zamierzone. */
  .message--user {
    max-width: 90%;
  }
  /* Zgłoszenie #134 — .header padding zjednoczony z bazą przez var(--gutter);
     ten override był identyczny (6px 16px) i stał się martwy. */
}

/* ============================================================
   Karta inspiracji (tryb inspiration mode)
   ============================================================ */
.inspiration-card {
  flex-shrink: 0;
  width: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.inspiration-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.inspiration-card__brand {
  padding: 8px 12px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
}

.inspiration-card__name {
  padding: 2px 12px 6px;
  font-size: 0.75rem;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inspiration-card__actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
}

.inspiration-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s, transform .1s;
}

.inspiration-btn:active {
  transform: scale(.95);
}

.inspiration-btn--yes {
  background: var(--color-accent);
  color: var(--pearl);
  border-color: var(--color-accent);
}

/* ===== Steal Their Look — Clone Panel ===== */

.clone-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(var(--h-header) + 16px) var(--gutter) calc(var(--h-nav) + 20px);  /* Zgłoszenie #143 — było 16px literalne */
}

.clone-mode-switch {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.clone-dropzone {
  border: 2px dashed var(--color-border, #e0e0e0);
  border-radius: 16px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  padding: 32px 16px;
  text-align: center;
}

.clone-dropzone:hover {
  border-color: var(--color-accent, #b8860b);
  background: #fafafa;
}

.clone-dropzone--dragover {
  border-color: var(--color-accent, #b8860b);
  background: #fafafa;
  border-style: solid;
}

.clone-dropzone--loading {
  cursor: default;
  opacity: 0.8;
}

.clone-dropzone__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--smoke);
}

.clone-dropzone__prompt p {
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  margin: 0;
}

.clone-dropzone__hint {
  font-size: 0.75rem;
  color: var(--smoke);
}

.clone-dropzone__store-hint {
  font-size: 0.75rem;
  color: var(--color-accent);
  margin-top: 4px;
}

.clone-dropzone__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--smoke);
  font-size: 0.9rem;
}

.clone-dropzone__spinner .spinner-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   Klonuj Styl - UI 2.1 (Grid Layout - Side-by-Side)
   ============================================================ */

.clone-grid {
  display: grid;
  grid-template-columns: 187px 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 20px;
  margin-top: 16px;
  margin-bottom: 24px;
}

@media (max-width: 480px) {
  .clone-grid {
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 0 16px;
  }
}

.clone-preview {
  margin: 0 !important;
}

.clone-preview__container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  border: 1px solid var(--color-border);
  background: var(--pearl);
}

.clone-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clone-preview__clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: var(--pearl);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(4px);
  transition: transform .2s, background .2s;
}

.clone-preview__clear:hover {
  background: rgba(220, 38, 38, 0.8);
  transform: scale(1.1);
}

.clone-preview__zoom-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform .2s, background .2s;
}

.clone-preview__zoom-btn:hover {
  background: var(--pearl);
  transform: scale(1.1);
}

/* Modal Powiększenia */
.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}

.zoom-content {
  position: relative;
  max-width: var(--max-width);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  background: var(--pearl);
}

.zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--pearl);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}

.zoom-close:hover {
  background: rgba(255,255,255,0.4);
}

.clone-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-reply {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-assistant-text);
  margin: 0;
}

.clone-category-bullets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-header-divider {
  margin-top: 32px;
}

.clone-empty {
  color: var(--color-placeholder);
  font-size: 0.875rem;
  text-align: center;
  padding: 40px 20px;
}

[x-cloak] { display: none !important; }

/* --- AI SCANNING EXPERIENCE --- */
.scanning-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #000;
}

.scanning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

.scanning-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, transparent, #8ab4f8, #4285f4, #8ab4f8, transparent);
    box-shadow: 0 0 20px #4285f4, 0 0 40px #8ab4f8;
    animation: scan-vertical 3s infinite ease-in-out;
    z-index: 11;
}

.loading-status-text {
    margin-top: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pearl);
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.6);
    padding: 10px 20px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    animation: pulse-text 1.5s infinite ease-in-out;
    text-align: center;
    max-width: 85%;
    letter-spacing: 0.5px;
}

@keyframes scan-vertical {
    0% { top: 0%; opacity: 0.8; }
    50% { top: 100%; opacity: 1; }
    100% { top: 0%; opacity: 0.8; }
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.8; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* Skeleton Loading Pulse */
.skeleton-pulse {
    background: linear-gradient(90deg, var(--color-bg-light) 25%, var(--color-border) 50%, var(--color-bg-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 15px;
    min-height: 400px;
    border: 1px solid var(--color-border);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════
   QUIZ MODOWY
   ═══════════════════════════════════════════════════════ */

.quiz-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--h-header) + 16px) var(--gutter) calc(var(--h-nav) + 28px);  /* Zgłoszenie #143 — było 16px literalne */
}

/* Wstecz (Sprint S3 fix) — mała, ghostowa nawigacja nad paskiem postępu */
.quiz-back-btn {
    align-self: flex-start;
    margin-bottom: 12px;
    background: none;
    border: none;
    color: var(--smoke);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
}
.quiz-back-btn:hover { color: var(--smoke); }

/* Pasek postępu */
/* Licznik kroków (Etap S5) — nad paskiem postępu, czytelny kontekst "gdzie jestem". */
.wizard-stepline {
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.8125rem;
    color: var(--smoke);
}
.wizard-stepline__count b { color: var(--ink); font-weight: 600; }
.wizard-stepline__sep { opacity: .5; }
.wizard-stepline__label { color: var(--champagne-deep); font-weight: 500; }

.quiz-progress-bar {
    width: 100%;
    max-width: 420px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin-bottom: 28px;
    overflow: hidden;
}
.quiz-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--champagne), var(--champagne-deep));
    border-radius: 2px;
    transition: width 0.35s var(--ease-lux);
}

/* Pytania tekstowe */
.quiz-questions {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.quiz-question-block {
    width: 100%;
}
.quiz-question__label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
    margin-bottom: 22px;
    color: var(--ink);
}
.quiz-question__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.quiz-option-btn {
    padding: 14px 10px;
    border: 2px solid var(--color-border, #e5e5e5);
    border-radius: 12px;
    background: var(--pearl);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-weight: 500;
}
.quiz-option-btn:hover {
    border-color: var(--ink);
    background: #f5f0eb;
}
.quiz-option-btn--selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--pearl);
}
.quiz-option-btn:active {
    transform: scale(0.97);
}

/* Multi-select + swatch kolorów (Sprint S2e; redesign „paleta farb" S2f — 15 kolorów, 5 kolumn) */
.quiz-question__options--colors {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px 6px;
}
.quiz-option-btn--swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 2px 6px;
    border: none;
    background: none;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
}
.quiz-option-btn--swatch:hover {
    border: none;
    background: none;
}
.quiz-option-btn--swatch.quiz-option-btn--selected {
    background: none;
    color: var(--ink);
}
/* Kropka jest gwiazdą tego widoku — powiększona, selekcja = pierścień, nie zalane tło */
.quiz-option-btn--swatch .color-swatch-dot {
    width: 38px;
    height: 38px;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s;
}
.quiz-option-btn--swatch.quiz-option-btn--selected .color-swatch-dot {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink), 0 1px 3px rgba(0, 0, 0, 0.15);
}
.color-swatch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

/* Loading spinner */
.quiz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    font-size: 0.9rem;
    color: #666;
}
.quiz-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e5e5;
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.quiz-error {
    color: #e53e3e;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 12px;
    background: #fff5f5;  /* Zgłoszenie #162 — tint, nie czysta biel (patrz .error-toast) */
    border-radius: 8px;
    border: 1px solid #feb2b2;
}

.quiz-skip-btn {
    margin-top: 16px;
    background: none;
    border: none;
    color: var(--smoke);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}
.quiz-skip-btn:hover { color: var(--smoke); }

/* ═══ Tinder Mode — fizyczny stos kart ═══ */
.quiz-swiping {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.quiz-swipe-counter {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smoke);
    text-align: center;
}

.swipe-stack {
    position: relative;
    width: 100%;
    /* Zgłoszenie #17: wydłużone (było 3/4.2) — taste-strip usunięty, więc zdjęcie
       przejmuje odzyskane miejsce i zajmuje większość ekranu. */
    aspect-ratio: 3 / 4.7;
    margin-top: 6px;
}

.swipe-card {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--pearl);
    box-shadow: var(--shadow-premium);
    will-change: transform;
}
.swipe-card--top { cursor: grab; touch-action: none; }
.swipe-card--dragging { cursor: grabbing; transition: none !important; }
/* snap-back / wjazd kolejnej karty — sprężysty powrót do środka */
.swipe-card--top:not(.swipe-card--dragging) {
    transition: transform .45s var(--ease-spring);
}
.swipe-card:not(.swipe-card--top) {
    transition: transform .45s var(--ease-lux), opacity .45s var(--ease-lux);
}

.swipe-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Złota Nić — krawędź światła + winieta pod podpis */
.swipe-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22),
                inset 0 -140px 90px -70px rgba(10,10,10,.62);
    pointer-events: none;
}

.swipe-card__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    /* Zgłoszenie #17: dolny padding powiększony, żeby tekst nie kolidował z .swipe-fabs
       nałożonymi teraz na zdjęcie (overlay, nie osobny wiersz pod kartą). */
    padding: 30px 22px 96px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--pearl);
    pointer-events: none;
}
.swipe-card__brand {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9375rem;
    opacity: .92;
}
.swipe-card__name {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* Stemple LOVE / NOPE */
.swipe-stamp {
    position: absolute;
    top: 26px;
    z-index: 3;
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 16px;
    border: 3px solid currentColor;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
}
.swipe-stamp--love {
    left: 22px;
    color: var(--love);
    transform: rotate(-15deg);
}
.swipe-stamp--nope {
    right: 22px;
    color: var(--nope);
    transform: rotate(15deg);
}

/* Pływające przyciski akcji — zgłoszenie #17: teraz overlay NA zdjęciu (dolna krawędź
   .swipe-stack), nie osobny wiersz pod kartą, żeby zdjęcie zajmowało więcej ekranu. */
.swipe-fabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 4;
    display: flex;
    gap: 30px;
    justify-content: center;
    pointer-events: none;
}
.swipe-fab {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: none;
    background: var(--pearl);
    box-shadow: var(--shadow-float);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform .2s var(--ease-spring), background .2s, box-shadow .2s;
}
.swipe-fab:hover:not(:disabled) { transform: translateY(-3px) scale(1.06); }
.swipe-fab:active:not(:disabled) { transform: scale(.9); }
.swipe-fab:disabled { opacity: .5; cursor: default; }
.swipe-fab--no  { color: var(--nope); }
.swipe-fab--no:hover:not(:disabled)  { background: var(--nope-bg); }
.swipe-fab--yes { color: var(--love); }
.swipe-fab--yes:hover:not(:disabled) { background: var(--love-bg); }

/* Zakończony quiz */
.quiz-completed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px 32px;
    text-align: center;
    width: 100%;
}
.quiz-completed__msg {
    font-size: 1rem;
    color: var(--smoke);
}
.quiz-completed__error {
    font-size: 0.9rem;
    color: #c0392b;
    padding: 12px 0;
}
.quiz-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-result__para {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
    text-align: left;
    padding: 0 4px;
}
/* Etap S5: zdegradowane celowo — to NIE jest droga naprzód, tylko awaryjny reset. */
.wizard-restart-link {
    background: none;
    border: none;
    color: var(--smoke);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px;
    margin-top: 4px;
}
.wizard-restart-link:hover { color: var(--ink); }

/* ── Widok 0: Wybór galerii ── */
/* ============================================================
   Ekran Umowy — wejście do Kreatora (Etap S5)
   ============================================================ */
.wizard-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
    text-align: center;
    padding-top: 8px;
    animation: tab-fade .3s var(--ease-lux) both;
}

.wizard-intro__brand {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--champagne-deep);
    margin-bottom: 10px;
}

.wizard-intro__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 8px;
}

.wizard-intro__subtitle {
    font-size: 0.875rem;
    color: var(--smoke);
    margin-bottom: 24px;
}

.wizard-intro__roadmap-label {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 10px;
}

.wizard-intro__roadmap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--cloud);
    border-radius: var(--radius-bubble);
    border: 1px solid var(--mist);
}

.wizard-intro__step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wizard-intro__step-num {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--champagne-soft);
    color: var(--champagne-deep);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-intro__step b {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.wizard-intro__gains-label {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--smoke);
    margin-bottom: 10px;
}

.wizard-intro__gains {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
    margin-bottom: 26px;
    padding: 14px 16px;
    background: var(--cloud);
    border-radius: var(--radius-bubble);
    border: 1px solid var(--mist);
}

.wizard-intro__gain {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-intro__gain-icon {
    flex: 0 0 auto;
    font-size: 0.9375rem;
    color: var(--champagne-deep);
    line-height: 1.5;
}

.wizard-intro__gain b {
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--ink);
}

.wizard-intro__cta {
    width: 100%;
    padding: 15px 22px;
    border: none;
    border-radius: var(--radius-input);
    background: var(--ink);
    color: var(--pearl);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-float);
    transition: transform .25s var(--ease-spring), background .15s;
}
.wizard-intro__cta:hover { background: #333; transform: translateY(-2px); }
.wizard-intro__cta:active { transform: scale(0.98); }

.wizard-intro__showoff {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: var(--smoke);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.wizard-intro__showoff:hover { color: var(--ink); }

.wizard-intro__rodo {
    margin-top: 18px;
    font-size: 0.65625rem;
    color: var(--smoke);
    opacity: .7;
    line-height: 1.4;
}

.wizard-intro__demo-note {
    margin-top: 12px;
    font-size: 0.65625rem;
    color: var(--smoke);
    opacity: .7;
    line-height: 1.4;
}

.quiz-gallery-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    gap: 0;
    padding-top: 12px;
}

.quiz-sofa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 18px 20px;
    border-radius: 16px;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--pearl);
    cursor: pointer;
    margin-bottom: 20px;
    transition: background 0.15s, transform 0.1s;
}
.quiz-sofa-btn:hover { background: #333; transform: translateY(-1px); }
.quiz-sofa-btn:active { transform: scale(0.98); }
.quiz-sofa-btn__icon { font-size: 1.6rem; line-height: 1; }
.quiz-sofa-btn__label { font-size: 1rem; font-weight: 600; }
.quiz-sofa-btn__sub { font-size: 0.78rem; opacity: 0.7; }

.quiz-gallery-divider {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
}
.quiz-gallery-divider::before,
.quiz-gallery-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--color-border);
}
.quiz-gallery-divider::before { left: 0; }
.quiz-gallery-divider::after  { right: 0; }

.quiz-gallery-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.quiz-gallery-btn {
    padding: 9px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: var(--pearl);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.quiz-gallery-btn:hover { border-color: var(--smoke); }
.quiz-gallery-btn--selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--pearl);
}

.quiz-confirm-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: #e0e0e0;
    color: var(--smoke);
    font-size: 1rem;
    font-weight: 600;
    cursor: not-allowed;
    margin-bottom: 12px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.quiz-confirm-btn--active {
    background: var(--ink);
    color: var(--pearl);
    cursor: pointer;
}
.quiz-confirm-btn--active:hover { background: #333; transform: translateY(-1px); }
.quiz-confirm-btn--active:active { transform: scale(0.98); }
/* Sprint S2f — odstęp od ostatniego rzędu opcji = gap siatki powyżej (był 0, niespójny rytm) */
.quiz-question__options + .quiz-confirm-btn {
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════
   LOOKBOOK REVEAL (Faza 3)
   ═══════════════════════════════════════════════════════ */

/* — Ekran skanowania stylu — */
.quiz-completed__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 56px 0;
}

.style-scan {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.style-scan__radar,
.style-scan__radar::before,
.style-scan__radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--champagne);
    animation: radar-pulse 2.4s var(--ease-lux) infinite;
}
.style-scan__radar::before { animation-delay: .8s; }
.style-scan__radar::after  { animation-delay: 1.6s; }

@keyframes radar-pulse {
    0%   { transform: scale(.28); opacity: .85; }
    100% { transform: scale(1);   opacity: 0; }
}

.style-scan__core {
    color: var(--champagne-deep);
    animation: core-breathe 1.6s var(--ease-lux) infinite;
    filter: drop-shadow(0 2px 10px var(--champagne-glow));
}
@keyframes core-breathe {
    0%, 100% { transform: scale(.82); opacity: .7; }
    50%      { transform: scale(1.12); opacity: 1; }
}

.shimmer-text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    background: linear-gradient(100deg, var(--smoke) 32%, var(--champagne) 50%, var(--smoke) 68%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 2.4s linear infinite;
    text-align: center;
    max-width: 280px;
}
@keyframes shimmer {
    to { background-position: -200% center; }
}

/* — Editorial Lookbook — */
.lookbook-reveal { align-items: stretch; }

.lookbook__eyebrow {
    font-family: var(--font-ui);
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--champagne-deep);
    text-align: left;
    padding: 0 4px;
}
.lookbook-reveal .quiz-result__para:first-of-type {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--ink);
}

.lookbook {
    width: 100%;
    margin-top: 6px;
}

.lookbook__tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--cloud);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateY(16px);
    animation: tile-reveal .6s var(--ease-lux) forwards;
}
@keyframes tile-reveal {
    to { opacity: 1; transform: translateY(0); }
}

.lookbook__media {
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.lookbook__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ease-lux);
}
.lookbook__tile:hover .lookbook__media img { transform: scale(1.06); }

/* Hero — pełna szerokość, panoramiczny kadr */
.lookbook__tile--hero {
    margin-bottom: 12px;
}
.lookbook__tile--hero .lookbook__media { aspect-ratio: 4 / 3.4; }

/* Komplementy — kolumnowa masonry → asymetria */
.lookbook__rest {
    column-count: 2;
    column-gap: 12px;
}
.lookbook__rest .lookbook__tile {
    width: 100%;
    margin-bottom: 12px;
    break-inside: avoid;
}
.lookbook__rest .lookbook__tile:nth-child(3n+1) .lookbook__media { aspect-ratio: 3 / 4; }
.lookbook__rest .lookbook__tile:nth-child(3n+2) .lookbook__media { aspect-ratio: 3 / 3.4; }
.lookbook__rest .lookbook__tile:nth-child(3n)   .lookbook__media { aspect-ratio: 3 / 4.5; }

/* Podpis + winieta */
.lookbook__info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--pearl);
    background: linear-gradient(to top, rgba(10,10,10,.72), transparent);
    pointer-events: none;
}
.lookbook__brand {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    opacity: .92;
}
.lookbook__name {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lookbook__price {
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: 2px;
}
.lookbook__tile--hero .lookbook__brand { font-size: 1rem; }
.lookbook__tile--hero .lookbook__name  { font-size: 0.875rem; white-space: normal; }
.lookbook__tile--hero .lookbook__price { font-size: 0.9375rem; }

.lookbook__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--font-ui);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--champagne-soft);
    border: 1px solid rgba(255,255,255,.4);
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}

/* Przycisk dodania do listy życzeń */
.lookbook__add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--smoke);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform .2s var(--ease-spring), color .2s, background .2s;
}
.lookbook__add svg { fill: transparent; }
.lookbook__add:hover { transform: scale(1.1); color: var(--nope); }
.lookbook__add--on { color: var(--nope); background: var(--pearl); }
.lookbook__add--on svg { fill: currentColor; }

/* Kafelek klikalny → bottom-sheet z rozmiarami */
.lookbook__tile { cursor: pointer; }
.lookbook__tap-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pearl);
    opacity: .85;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* — Bottom-sheet (detal produktu z Lookbooka) — */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10,10,10,0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-lux), background .25s var(--ease-lux),
                backdrop-filter .25s var(--ease-lux);
}
.sheet-overlay--open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(10,10,10,.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.sheet {
    width: 100%;
    max-width: var(--max-width);
    background: var(--paper);
    border-radius: 26px 26px 0 0;
    box-shadow: var(--shadow-premium);
    transform: translateY(102%);
    transition: transform .4s var(--ease-spring);
    max-height: 88dvh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}
.sheet-overlay--open .sheet { transform: translateY(0); }

.sheet__inner { padding: 10px 20px 24px; }
.sheet__handle {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--mist);
    margin: 0 auto 18px;
    cursor: pointer;
}
.sheet__body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.sheet__img {
    width: 120px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: var(--shadow-card);
    cursor: zoom-in;
}

/* Zgłoszenie #92 — galeria zdjęć karty produktu. Zajmuje dokładnie ten sam slot co
   .sheet__img (120px, 3/4) — karuzela zamiast pojedynczego zdjęcia, tylko gdy katalog
   ma >1 kadr dla SKU. `scroll-snap` daje natywny swipe bez własnej fizyki gestu. */
.sheet-gallery {
    position: relative;
    width: 120px;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.sheet-gallery__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.sheet-gallery__track::-webkit-scrollbar { display: none; }
.sheet-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 0 0 100%;
    scroll-snap-align: start;
    cursor: zoom-in;
}
.sheet-gallery__counter {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(10,10,10,.55);
    color: var(--pearl);
    font-size: 0.625rem;
    letter-spacing: .02em;
    pointer-events: none;
}
.sheet-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}
.sheet-gallery__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: background .15s var(--ease-lux), transform .15s var(--ease-lux);
}
.sheet-gallery__dot--active {
    background: var(--pearl);
    transform: scale(1.3);
}

/* Zgłoszenie #132 — strzałki desktopowe (swipe działa, ale mysz nie ma jak przejść dalej).
   Ukryte na dotyku niżej (@media hover:none) — tam swipe jest naturalniejszy i strzałki
   tylko zasłaniałyby kadr. */
.sheet-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(10,10,10,.45);
    color: var(--pearl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.sheet-gallery__nav--prev { left: 6px; }
.sheet-gallery__nav--next { right: 6px; }

/* Zgłoszenie #92 — pełnoekranowy podgląd. Siostrzany element .sheet-overlay (patrz
   index.html), z-index powyżej niego (9998) tak jak istniejący .zoom-overlay. */
.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10,10,10,.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-viewer__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.photo-viewer__track::-webkit-scrollbar { display: none; }
.photo-viewer__img {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    object-fit: contain;
    scroll-snap-align: start;
}
.photo-viewer__close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: var(--pearl);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.photo-viewer__counter {
    position: absolute;
    top: max(24px, calc(env(safe-area-inset-top) + 8px));
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    color: var(--pearl);
    font-size: 0.75rem;
    letter-spacing: .02em;
}
/* Zgłoszenie #132 — strzałki desktopowe pełnoekranowego podglądu, ten sam wzorzec
   wizualny co .photo-viewer__close. Ukryte na dotyku (@media hover:none niżej). */
.photo-viewer__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: var(--pearl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.photo-viewer__nav--prev { left: max(16px, env(safe-area-inset-left)); }
.photo-viewer__nav--next { right: max(16px, env(safe-area-inset-right)); }

@media (hover: none) {
    .sheet-gallery__nav, .photo-viewer__nav { display: none !important; }
}
.sheet__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    min-width: 0;
}
.sheet__brand {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--ink);
}
.sheet__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
}
.sheet__price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
}
/* Zgłoszenie #145 — link do strony produktu marki, w PDP (sheet). */
.sheet__product-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--champagne-deep);
    text-decoration: none;
}
.sheet__product-link:hover {
    text-decoration: underline;
}
.sheet__sizes-wrap { margin-top: 22px; }
.sheet__no-sizes {
    margin-top: 22px;
    font-size: 0.8125rem;
    color: var(--smoke);
}
.sheet .product-card__cta { margin-top: 20px; }

/* ═══════════════════════════════════════════════════════
   DOSTĘPNOŚĆ — reduced motion + focus
   ═══════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--champagne-deep);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════
   SALONY → „Twoje Modowe DNA"
   ════════════════════════════════════════════════════════ */
.dna-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--h-header) + 16px) var(--gutter) calc(var(--h-nav) + 24px);  /* Zgłoszenie #143 — było 16px literalne */
}
.dna-intro,
.dna-quiz,
.dna-loading,
.dna-result {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dna-loading { gap: 22px; }

/* — Intro — */
.dna-intro__mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne-deep);
  margin-bottom: 10px;
}
.dna-intro__mark::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--champagne-glow) 0%, transparent 68%);
  animation: aura-breathe 4.5s var(--ease-lux) infinite;
  z-index: -1;
}
.dna-intro__title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.dna-intro__sub {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--smoke);
  max-width: 300px;
  margin: 8px 0 22px;
}
.dna-cta {
  padding: 15px 30px;
  border: none;
  border-radius: 26px;
  cursor: pointer;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  transition: background .2s, transform .2s var(--ease-spring);
}
.dna-cta:hover { background: var(--champagne-deep); transform: translateY(-2px); }
.dna-cta:active { transform: scale(.97); }
.dna-error {
  margin-top: 18px;
  max-width: 320px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #b23b34;
  background: #faece9;
  border: 1px solid #eecbc6;
  border-radius: 12px;
  padding: 10px 14px;
}

/* — Mini-quiz — */
.dna-quiz__lead {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  margin: 10px 0 18px;
}

/* — Karta DNA (share-safe: solidne tła, brak glassu) — */
.dna-result { gap: 0; }
.dna-card {
  width: 100%;
  max-width: 340px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--champagne-soft);
  box-shadow: var(--shadow-premium);
}
.dna-card__head {
  position: relative;
  /* gradient html2canvas-safe: kierunek słowny + 2 stopy hex (bez deg/transparent) */
  background: linear-gradient(to bottom, #16120d, #0A0A0A);
  color: var(--pearl);
  padding: 30px 24px 26px;
  text-align: center;
}
.dna-card__head::after {
  content: '';
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 1px;
  background: var(--champagne);   /* solid — gradient z transparent łamie html2canvas */
  opacity: .55;
}
.dna-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--champagne);
}
.dna-card__archetype {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.08;
  margin: 10px 0 6px;
  color: var(--pearl);
}
.dna-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--champagne-soft);
}
.dna-card__body { padding: 22px 24px 4px; }
.dna-card__palette {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.dna-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.10);
}
.dna-card__desc {
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
}
.dna-card__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.dna-keyword {
  font-size: 0.625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smoke);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 4px 10px;
}
.dna-card__facts {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.dna-fact {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: var(--cloud);
  border-radius: 12px;
}
.dna-fact__label {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 4px;
}
.dna-fact__value {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--ink);
}
.dna-card__foot {
  padding: 16px 24px 20px;
  text-align: center;
}
.dna-card__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: .04em;
  color: var(--champagne-deep);
}

/* Etap MS-1 — .dna-card przeniesiona offscreen, żyje wyłącznie jako artefakt
   shareDna() (html2canvas). Ten sam wzorzec co .dna-story-card: fixed poza
   viewportem, zero wpływu na layout, ale nadal renderowalna przez html2canvas. */
.dna-card--offscreen {
  position: fixed;
  top: -9999px;
  left: -9999px;
}

/* — Akcje (poza zrzutem html2canvas) — */
.dna-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  width: 100%;
  max-width: 340px;
}
.dna-share {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background .2s, transform .2s var(--ease-spring);
}
.dna-share:hover:not(:disabled) { background: var(--champagne-deep); transform: translateY(-2px); }
.dna-share:active:not(:disabled) { transform: scale(.97); }
.dna-share:disabled { opacity: .6; cursor: default; }
.dna-restart {
  padding: 14px 18px;
  border: 1.5px solid var(--mist);
  border-radius: 14px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color .2s;
}
.dna-restart:hover { border-color: var(--champagne); }

/* ============================================================
   Quiz Inspiracja — Swipe Delight Optimizations
   ============================================================ */

/* Gotowe FAB */
.fab--done { background: var(--champagne); color: var(--ink); font-weight: 600; padding: 10px 20px; border-radius: 24px; opacity: 0.35; pointer-events: none; transition: opacity 0.3s; border: none; cursor: pointer; font-family: var(--font-ui); }
.fab--done.fab--active { opacity: 1; pointer-events: auto; }

/* Hold-to-Reveal overlay */
.swipe-reveal { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(8px); border-radius: 0 0 16px 16px; color: var(--pearl); font-size: 0.8125rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.swipe-reveal.visible { opacity: 1; }

/* Staggered lookbook reveal */
.lookbook__tile, .lookbook__tile--hero { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.lookbook__tile.revealed, .lookbook__tile--hero.revealed { opacity: 1; transform: none; }

/* Share button */
.lookbook-share { display: flex; align-items: center; gap: 8px; margin-top: 24px; justify-content: center; font-size: 0.875rem; color: var(--champagne); cursor: pointer; }
.lookbook-share:hover { color: var(--champagne-deep); }
.lookbook-share svg { width: 18px; height: 18px; }

/* Zero-likes dialog */
.zero-likes-dialog { text-align: center; padding: 32px 16px; }
.zero-likes-dialog__chips { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* Celebracja transition */
@keyframes stack-exit { to { transform: scale(0.9); opacity: 0; } }
.swipe-stack--exiting { animation: stack-exit 0.4s ease-in forwards; }

/* ─────────────────────────────────────────────────────────────────────────
   Signature Look + DNA (finał Inspiracji)
   ───────────────────────────────────────────────────────────────────────── */

.dna-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
  background: rgba(193, 166, 141, 0.08);
  border-radius: 0.5rem;
  border-left: 3px solid var(--champagne);
}

.dna-strip__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dna-strip__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--champagne);
}

.dna-strip__values {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--ink);
  /* `--font-serif` (2026-08-17) nigdy nie było zadeklarowane w żadnym :root —
     deklaracja była nieprawidłowa, element cicho dziedziczył font rodzica.
     `--font-display` to jedyny serif w palecie (Playfair Display). */
  font-family: var(--font-display);
}

.dna-strip__link {
  background: none;
  border: none;
  color: var(--champagne);
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 0.9rem;
}

.dna-strip__link:hover {
  text-decoration: underline;
}

/* Martwe reguły .signature-look / .signature-look__eyebrow / .signature-look__row
   usunięte — zero wystąpień w markupie od czasu przejścia na wielolookowy
   .looks-stack; jedyna żywa klasa to .signature-look-reveal (bez własnych stylów). */

.sig-item {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: tile-reveal 0.4s var(--ease-lux) forwards;
}

/* .sig-item.revealed usunięte — klasa `revealed` trafia na .look-block
   (index.html, stagger ujawniania looków), nigdy na .sig-item. */

.sig-item--liked {
  border: 2px solid var(--champagne);
}

.sig-item__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sig-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sig-item__slot {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: var(--paper);
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

/* .sig-rationale usunięte — brak w markupie (rationale renderuje .look-block__rationale).
   Pierwsza para .sig-add-all / :hover usunięta — była w całości nadpisywana przez
   drugą deklarację niżej w pliku (wariant ghost), więc nigdy nie miała efektu. */

.shelf {
  margin-bottom: 2rem;
}

.shelf__cat {
  margin-bottom: 1.5rem;
}

.shelf__head {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--champagne);
  margin-bottom: 1rem;
}

.shelf__scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
}

.shelf__scroll::-webkit-scrollbar {
  height: 4px;
}

.shelf__scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.shelf__scroll::-webkit-scrollbar-thumb {
  background: var(--champagne);
  border-radius: 2px;
}

.shelf__tile {
  position: relative;
  flex: 0 0 110px;
  aspect-ratio: 3/4;
  border-radius: 0.4rem;
  overflow: hidden;
  cursor: pointer;
}

.shelf__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shelf__tile:hover img {
  transform: scale(1.05);
}

.shelf__add {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--paper);
  transition: background 0.3s ease;
}

.shelf__add:hover {
  background: rgba(0, 0, 0, 0.8);
}

.shelf__add--on {
  color: var(--champagne);
}

/* ── Mini-karta DNA (Inspiracja Results) ── */
.quiz-intro {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 1.5rem 0;
  color: var(--ink);
}

.dna-card-mini {
  background: rgba(193, 166, 141, 0.08);
  border: 1px solid rgba(193, 166, 141, 0.15);
  border-radius: 0.8rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.dna-card-mini__header {
  margin-bottom: 1rem;
}

.dna-card-mini__archetype {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  color: var(--ink);
}

.dna-card-mini__tagline {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--champagne);
  margin: 0;
}

.dna-card-mini__description {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 1rem 0;
}

.dna-card-mini__palette {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.dna-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dna-card-mini__keywords {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

/* Etap MS-1 — styling_tip: zdanie-porada z LLM (prompts.py), zwracane przez backend
   od zawsze, dotąd nigdzie nierenderowane. */
.dna-card-mini__tip {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--champagne-deep);
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(193,166,141,0.2);
}

.dna-chip {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(193, 166, 141, 0.15);
  border-radius: 1rem;
  font-size: 0.85rem;
  color: var(--ink);
}

/* ── Stos looków ── */
.looks-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 1.5rem 0;
}

.look-block {
  opacity: 0;
  transform: translateY(1rem);
  animation: reveal-look 0.5s ease-out forwards;
}

.look-block.revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes reveal-look {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.look-block__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.8rem;
}

.look-block__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.look-block__occasion {
  font-size: 0.85rem;
  color: var(--champagne);
  font-weight: 500;
}

.look-block__rationale {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0.8rem 0 1.2rem;
}

.look-block__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.sig-add-all {
  padding: 0.6rem 1rem;
  background: none;
  border: 1px solid var(--champagne);
  border-radius: 0.4rem;
  color: var(--champagne);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.sig-add-all:hover {
  background: rgba(193, 166, 141, 0.1);
}

.sig-item__brand {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--paper);
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Quiz toast notification ── */
.quiz-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.5rem;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 50;
  animation: toast-pop 0.3s ease;
}

@keyframes toast-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sig-item,
  .sig-item.revealed {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============ Consent + Profile Sync + Toast ============ */

.consent-bar {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  backdrop-filter: blur(10px) saturate(120%);
  background: rgba(250, 249, 246, 0.9);
  border-top: 1px solid rgba(193, 166, 141, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  z-index: 1000;
  animation: consent-slide-up 300ms ease-out;
}

@keyframes consent-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.consent-bar__content {
  flex: 1;
}

.consent-bar__text {
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
}

.consent-bar__details-btn {
  background: none;
  border: none;
  color: var(--champagne);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
}

.consent-bar__details-btn:hover {
  opacity: 0.8;
}

.consent-bar__details {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(193, 166, 141, 0.2);
  color: #666;
}

.consent-bar__details.open {
  display: block;
}

.consent-bar__ok {
  background: var(--champagne);
  color: var(--paper);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  margin-left: 12px;
  transition: opacity 200ms;
}

.consent-bar__ok:hover {
  opacity: 0.9;
}

.profile-sync {
  border-top: 1px solid rgba(193, 166, 141, 0.2);
  padding-top: 16px;
  margin-top: 16px;
}

.profile-sync__header {
  margin-bottom: 12px;
}

.profile-sync__header h3 {
  margin: 0 0 4px;
  font-family: Playfair Display, serif;
  font-size: 1rem;
  color: var(--ink);
}

.profile-sync__desc {
  margin: 0;
  font-size: 0.75rem;
  color: var(--smoke);
}

.profile-sync__form {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.profile-sync__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(193, 166, 141, 0.3);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-family: Inter, sans-serif;
}

.profile-sync__input:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 2px rgba(193, 166, 141, 0.1);
}

.profile-sync__btn {
  background: var(--champagne);
  color: var(--paper);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 200ms;
}

.profile-sync__btn:hover:not(:disabled) {
  opacity: 0.9;
}

.profile-sync__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-sync__msg {
  font-size: 0.75rem;
  color: var(--champagne);
  margin: 8px 0;
}

.profile-sync__email {
  font-size: 0.75rem;
  color: var(--smoke);
  margin: 8px 0;
}

.profile-sync__danger {
  background: none;
  border: none;
  color: var(--smoke);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  text-decoration: underline;
  transition: color 200ms;
}

.profile-sync__danger:hover {
  color: #666;
}

.profile-sync__feedback-link {
  background: none;
  border: none;
  color: var(--champagne-deep);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  margin-top: 8px;
  text-decoration: underline;
  transition: opacity 200ms;
}

.profile-sync__feedback-link:hover {
  opacity: 0.75;
}

/* ── User Feedback System (Faza 46, testerzy zewnętrzni) ──────────── */
.feedback-form__select,
.feedback-form__textarea {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--paper);
  color: var(--ink);
  margin-top: 8px;
  resize: vertical;
}

.feedback-form__textarea:focus,
.feedback-form__select:focus {
  outline: none;
  border-color: var(--champagne);
}

.feedback-form__status {
  padding: 12px 16px;
  text-align: center;
  color: var(--smoke);
  font-size: 0.8125rem;
  font-weight: 500;
}

.feedback-form__shot {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  margin-top: 10px;
  margin-bottom: 4px;
  display: block;
}

.feedback-form__shot-caption {
  font-size: 0.75rem;
  color: var(--champagne-deep);
  margin-top: 0;
  margin-bottom: 8px;
}

/* ── Report Dialog (Przebudowa 2026-08-22, pełnoekranowy ciemny dialog) ── */
.report-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}

.report-dialog--open {
  opacity: 1;
  pointer-events: auto;
}

.report-dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(2px);
}

.report-dialog__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  z-index: 1;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .report-dialog__container {
    width: auto;
    height: auto;
    max-width: 520px;
    max-height: 80dvh;
    border-radius: 12px;
    padding-bottom: 0;
    margin: auto;
  }
}

.report-dialog__ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.report-dialog__ribbon-dot {
  color: var(--champagne);
  font-size: 1rem;
  line-height: 1;
}

.report-dialog__ribbon-label {
  flex: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.report-dialog__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 1.125rem;
  cursor: pointer;
  padding: 0;
  transition: opacity 150ms;
}

.report-dialog__close:hover {
  opacity: 0.7;
}

.report-dialog__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
  overflow-y: auto;
}

.report-dialog__prompt {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--paper);
  font-family: var(--font-display);
}

.report-dialog__textarea {
  flex: 1;
  min-height: 120px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: none;
  transition: border-color 150ms;
}

.report-dialog__textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.report-dialog__textarea:focus {
  outline: none;
  border-color: var(--champagne-deep);
}

.report-dialog__hint {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.report-dialog__email-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-dialog__email-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.report-dialog__email-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--paper);
  font-size: 0.8125rem;
  transition: border-color 150ms;
}

.report-dialog__email-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.report-dialog__email-input:focus {
  outline: none;
  border-color: var(--champagne-deep);
}

.report-dialog__send {
  padding: 12px 20px;
  background: var(--champagne-deep);
  border: none;
  border-radius: 8px;
  /* --ink, nie var(--pearl): białe 13px/600 na --champagne-deep to 3.25:1 (poniżej WCAG AA
     4.5:1 dla tekstu tej wielkości) — dziedziczony wzorzec z .email-ask__cta, ale ten
     dialog jest jedyną CIEMNĄ powierzchnią w apce, więc kontrast liczy się inaczej niż
     na jasnym tle. --ink na tym samym tle daje 6.09:1. */
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms, transform 150ms;
}

.report-dialog__send:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.report-dialog__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Blok techniczny (zwinięty domyślnie) */
.report-tech {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.report-tech__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: left;
  transition: color 150ms;
}

.report-tech__toggle:hover {
  color: rgba(255, 255, 255, 0.9);
}

.report-tech__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  transition: transform 200ms;
  flex-shrink: 0;
}

.report-tech__icon--open {
  transform: rotate(90deg);
}

.report-tech__summary {
  color: inherit;
  font-size: 0.75rem;
}

.report-tech__content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.report-tech__shot {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  margin-bottom: 10px;
}

.report-tech__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.report-tech__email-change {
  background: transparent;
  border: none;
  color: var(--champagne-deep);
  font-size: 0.6875rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: opacity 150ms;
}

.report-tech__email-change:hover {
  opacity: 0.8;
}

/* Stan capturing */
.report-dialog__capturing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--ink);
  z-index: 2;
  border-radius: inherit;
}

.report-dialog__capturing-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--champagne);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Stan sukcesu */
.report-dialog__success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 16px;
}

.report-dialog__success-message {
  margin: 0;
  font-size: 1rem;
  color: var(--paper);
  line-height: 1.5;
}

.report-dialog__success-link {
  display: inline-block;
  color: var(--champagne-deep);
  text-decoration: none;
  font-size: 0.8125rem;
  padding: 8px 12px;
  border-radius: 6px;
  transition: opacity 150ms;
}

.report-dialog__success-link:hover {
  opacity: 0.8;
}

.profile-toast {
  position: fixed;
  bottom: 12px;
  left: 16px;
  right: 16px;
  background: rgba(10, 10, 10, 0.9);
  color: var(--paper);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.8125rem;
  z-index: 999;
  animation: toast-pop 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes toast-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-bar,
  .profile-toast {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Drift Nudge (Faza 2) ──────────────────────────────────────────── */
.drift-nudge {
  border-left: 3px solid var(--champagne);
  padding: 12px 16px;
  margin: 16px 0;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.85;
}

.drift-nudge__text {
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.drift-nudge__btn {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--champagne);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
  font-weight: 600;
}

/* ── Surprise FAB & Overlay (Serendipity - Faza 3) ──────────────── */
.fab--surprise {
  background: linear-gradient(135deg, var(--champagne), #a07850);
  color: var(--pearl);
  font-size: 1.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform 0.2s var(--ease-spring);
}

.fab--surprise:hover {
  transform: scale(1.08);
}

.fab--surprise.fab--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ── Surprise Overlay ──────────────────────────────────────── */
.surprise-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.surprise-panel {
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  padding: 24px 16px 32px;
  width: 100%;
  max-width: var(--max-width);
  max-height: 85vh;
  overflow-y: auto;
}

.surprise-intro {
  font-style: italic;
  color: var(--champagne);
  margin-bottom: 16px;
  font-size: 0.95rem;
  text-align: center;
}

.surprise-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.surprise-card-item {
  flex: 0 0 160px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg, #f5f3f0);
}

.surprise-card-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.surprise-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--champagne);
  color: var(--pearl);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.surprise-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 8px 2px;
}

.surprise-card-reason {
  font-size: 0.7rem;
  color: var(--muted, var(--smoke));
  padding: 0 8px 8px;
  font-style: italic;
  line-height: 1.3;
}

.surprise-add-btn {
  width: 100%;
  background: none;
  border-top: 1px solid var(--border, #eee);
  padding: 8px;
  font-size: 0.8rem;
  color: var(--champagne);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.surprise-add-btn:hover {
  background: var(--paper, #fafaf8);
}

.surprise-close {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--muted, var(--smoke));
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}

.surprise-close:hover {
  color: var(--ink);
}

/* ── Profile Mini-Card (Szafa tab, Faza 4) ─────────────── */
.profile-mini-card {
  margin: 12px 16px 4px;
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px solid rgba(193,166,141,0.25);
  border-radius: 16px;
}

.profile-mini-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profile-mini-card__archetype {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.profile-mini-card__pick-btn {
  background: none;
  border: none;
  color: var(--champagne);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.15s;
}

.profile-mini-card__pick-btn:hover {
  opacity: 0.7;
}

.completeness-bar {
  height: 4px;
  background: rgba(193,166,141,0.2);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}

.completeness-bar__fill {
  height: 100%;
  background: var(--champagne);
  border-radius: 2px;
  transition: width 0.6s var(--ease-lux);
}

.profile-mini-colors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-tone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.color-tone-label {
  width: 68px;
  color: var(--muted, var(--smoke));
  text-transform: capitalize;
}

.color-tone-track {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.color-tone-bar {
  height: 100%;
  background: var(--champagne);
  border-radius: 3px;
  transition: width 0.5s;
}

.color-tone-count {
  width: 16px;
  text-align: right;
  color: var(--muted, var(--smoke));
}

/* ── Visual DNA w obrębie "Twój styl w liczbach" (Etap MS-1: scalone z .style-stats,
   .symbolic-style jako osobna karta usunięte — był to duplikat tytułu 5 sekcji dalej) ── */
.style-stats__visual-dna {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #eee);
}

.symbolic-style__chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 10px;
}

.symbolic-style__hint {
  font-size: 0.8rem;
  color: var(--muted, var(--smoke));
  margin: 12px 0 0;
}

/* ── Archetype Picker Overlay ───────────────────── */
.archetype-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(4px);
  z-index: 210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.archetype-panel {
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  padding: 24px 16px 40px;
  width: 100%;
  max-width: var(--max-width);
  max-height: 90vh;
  overflow-y: auto;
}

.archetype-panel__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 4px;
  color: var(--ink);
}

.archetype-panel__sub {
  text-align: center;
  color: var(--muted, var(--smoke));
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.archetype-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.archetype-tile {
  border: 1.5px solid rgba(193,166,141,0.3);
  border-radius: 12px;
  padding: 12px 8px;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  font-size: inherit;
}

.archetype-tile:hover {
  border-color: var(--champagne);
  background: rgba(193,166,141,0.06);
}

.archetype-tile--active {
  border-color: var(--champagne);
  background: rgba(193,166,141,0.12);
}

.archetype-tile__name {
  font-family: 'Playfair Display', serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}

.archetype-tile__hint {
  font-size: 0.65rem;
  color: var(--muted, var(--smoke));
  line-height: 1.3;
}

.archetype-close {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--muted, var(--smoke));
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}

.archetype-close:hover {
  color: var(--ink);
}

/* ── Drift Nudge dismiss button ─────────────────── */
.drift-nudge__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.drift-nudge__dismiss {
  background: none;
  border: none;
  color: var(--muted, var(--smoke));
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  transition: color 0.15s;
}

.drift-nudge__dismiss:hover {
  color: var(--ink);
}

/* ============================================================
   Mój Styl Tab Consolidation Styles
   ============================================================ */

/* --- Styl w liczbach --- */
.style-stats {
  margin-top: 30px;
  width: 100%;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.style-stats__title,
.style-journey__title,
.style-surprise__title,
.style-gallery-cta__title,
.style-settings__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: normal;
}
.style-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.style-stat {
  background: var(--pearl);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--cloud);
  display: flex;
  flex-direction: column;
}
.style-stat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--champagne-deep);
  margin-bottom: 4px;
}
.style-stat__label {
  font-size: 0.6875rem;
  color: var(--smoke);
  line-height: 1.3;
}
.style-stats--locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.style-stats__teaser {
  font-size: 0.8125rem;
  color: var(--smoke);
  margin-bottom: 12px;
}
.style-stats__cta {
  background: none;
  border: 1px solid var(--champagne);
  color: var(--champagne-deep);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.style-stats__cta:hover {
  background: var(--champagne);
  color: var(--pearl);
}

/* --- Twoja Podróż --- */
.style-journey {
  margin-top: 20px;
  width: 100%;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.style-journey__insight {
  background: var(--pearl);
  border: 1px solid var(--cloud);
  border-radius: 14px;
  padding: 14px;
}
.style-journey__text {
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 12px 0;
}
.style-journey__actions {
  display: flex;
  gap: 8px;
}
.style-journey__accept {
  flex: 1;
  background: var(--ink);
  color: var(--pearl);
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.style-journey__dismiss {
  background: none;
  border: 1px solid var(--mist);
  color: var(--smoke);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.style-journey__stable,
.style-journey__empty {
  font-size: 0.8125rem;
  color: var(--smoke);
  line-height: 1.4;
  margin: 0;
}

/* --- Zaskocz mnie --- */
.style-surprise {
  margin-top: 20px;
  width: 100%;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}
.style-surprise::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(193, 166, 141, 0.18) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 0 20px 0 0;
  z-index: 0;
}
.style-surprise .style-scan {
  margin: 12px auto;
  position: relative;
  z-index: 1;
}
.style-surprise__locked {
  font-size: 0.8125rem;
  color: var(--smoke);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.style-surprise__cta {
  background: var(--ink);
  color: var(--pearl);
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
  position: relative;
  z-index: 1;
}
.style-surprise__cta:disabled {
  opacity: 0.6;
}
.style-surprise__result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.style-surprise__reason {
  font-size: 0.8125rem;
  color: var(--smoke);
  line-height: 1.4;
  margin: 0;
}
.style-surprise__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@keyframes surprise-reveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.style-surprise__card {
  background: var(--pearl);
  border: 1px solid var(--cloud);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  animation: surprise-reveal 0.5s var(--ease-lux) forwards;
  opacity: 0;
}
.style-surprise__card:nth-child(1) {
  animation-delay: 0.08s;
}
.style-surprise__card:nth-child(2) {
  animation-delay: 0.18s;
}
.style-surprise__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 6px;
}
.style-surprise__card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.style-surprise__card-reason {
  font-size: 0.625rem;
  color: var(--smoke);
  margin-bottom: 8px;
  line-height: 1.2;
}
.style-surprise__add {
  background: var(--cloud);
  color: var(--ink);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all .2s;
}
.style-surprise__add:hover {
  background: var(--champagne);
  color: var(--pearl);
}
.style-surprise__retry {
  background: none;
  border: 1px solid var(--mist);
  color: var(--ink);
  padding: 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  cursor: pointer;
  align-self: center;
  margin-top: 4px;
}
.style-surprise__empty {
  font-size: 0.8125rem;
  color: var(--smoke);
  margin: 0;
}

/* --- Twoja galeria czeka --- */
.style-gallery-cta {
  margin-top: 20px;
  width: 100%;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex-shrink: 0;
}
.style-gallery-cta__copy {
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 0 0 4px 0;
}
.style-gallery-cta__stock {
  font-size: 0.75rem;
  color: #d93838;
  font-weight: 600;
  margin: 0 0 12px 0;
}
.style-gallery-cta__btn {
  background: var(--ink);
  color: var(--pearl);
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

/* --- Reward Tile --- */
.reward-tile {
  background: var(--pearl);
  border: 1px dashed var(--mist);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.reward-tile--unlocked {
  border: 1px solid var(--champagne);
  background: #fffdf9;  /* Zgłoszenie #162 — tint, nie czysta biel (patrz .error-toast) */
}
.reward-tile__locked {
  font-size: 0.6875rem;
  color: var(--smoke);
  margin: 0;
}
.reward-tile__unlocked {
  font-size: 0.75rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.reward-tile__unlocked strong {
  display: block;
  font-size: 1.125rem;
  color: var(--champagne-deep);
  letter-spacing: 1px;
  margin-top: 4px;
  font-family: var(--font-display);
}

/* --- Profil i ustawienia --- */
.style-settings {
  margin-top: 20px;
  width: 100%;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.style-settings .profile-mini-card {
  margin-bottom: 20px;
}

/* --- Modal podglądu produktu Zaskocz mnie (Faza H) --- */
.surprise-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(8px);
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.surprise-modal {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  position: relative;
  overflow-y: auto;
  box-shadow: var(--shadow-premium);
  animation: modal-appear 0.35s var(--ease-lux) forwards;
  display: flex;
  flex-direction: column;
}

@keyframes modal-appear {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.surprise-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--mist);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
.surprise-modal__close:hover {
  background: var(--pearl);
  border-color: var(--smoke);
}

.surprise-modal__content {
  display: flex;
  flex-direction: column;
}

.surprise-modal__image-wrapper {
  width: 100%;
  height: 320px;
  background: var(--cloud);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.surprise-modal__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surprise-modal__details {
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.surprise-modal__brand {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--smoke);
  margin-bottom: 6px;
}

.surprise-modal__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.surprise-modal__price-color {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  margin-bottom: 18px;
}
.surprise-modal__price {
  font-weight: 600;
  color: var(--ink);
}
.surprise-modal__bullet {
  color: var(--mist);
}
.surprise-modal__color {
  color: var(--smoke);
}

.surprise-modal__reason-box {
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.surprise-modal__reason-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--champagne);
}
.surprise-modal__reason-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--champagne-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.surprise-modal__reason {
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
}

.surprise-modal__actions {
  display: flex;
  gap: 12px;
}

.surprise-modal__add {
  flex: 1;
  background: var(--ink);
  color: var(--pearl);
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  text-align: center;
}
.surprise-modal__add:hover {
  opacity: 0.9;
}

.surprise-modal__buy {
  flex: 1;
  background: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
  display: inline-block;
}
.surprise-modal__buy:hover {
  background: var(--ink);
  color: var(--pearl);
}

/* Responsywność dla szerszych ekranów — podział na dwie kolumny */
@media (min-width: 576px) {
  .surprise-modal {
    max-width: 720px;
  }
  .surprise-modal__content {
    flex-direction: row;
    height: 420px;
  }
  .surprise-modal__image-wrapper {
    width: 320px;
    height: 100%;
    flex-shrink: 0;
  }
  .surprise-modal__details {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
}

/* ============================================================
   Discovery Wall (Krok 13)
   ============================================================ */
/* Chrome Walla na wzorcu Fazy 17 (fixed, nie sticky) — picker/pill/taby nigdy się nie przewijają,
   geometria identyczna z .chat (header → picker → wall-topbar → treść pod szkłem). */
.wall-panel {
  position: absolute;
  left: 0;
  right: 0;
  /* top/bottom zamiast inset:0+padding (S2h) — natywny scrollbar renderuje się na
     PEŁNEJ wysokości elementu niezależnie od paddingu wewnętrznego, więc przy inset:0
     jego górna część chowała się pod .header/.wall-topbar (widoczna jako "ucięty"
     suwak w stanie początkowym). Skracając sam element top/bottom, scrollbar zaczyna
     się dokładnie tam, gdzie realnie widoczna treść — pod paskami, nie pod spodem. */
  top: calc(var(--h-header) + var(--h-wallbar) + 6px);
  bottom: calc(var(--h-nav) + 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wall-topbar {
  top: var(--h-header);
  z-index: 54;
  /* min-height:0, NIE var(--h-wallbar) — ten token jest nadpisywany runtime'owo z offsetHeight
     TEGO SAMEGO elementu (ResizeObserver, patrz app.js::_setupWallbarResizeSync). Z min-height
     przypiętym do --h-wallbar pasek rósłby przy pojawieniu się czipa i nigdy nie wracał do niższej
     wartości po jego zdjęciu (sprzężenie zwrotne — złapane przy dodawaniu czipa rozmiaru, #45). */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px var(--gutter);  /* Zgłoszenie #143 — było 14px literalne, teraz spójne z resztą paneli */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge);
  transition: gap .2s var(--ease-lux);
}

.wall-topbar--condensed {
  gap: 0;
}

.wall-search-pill {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--mist);
  border-radius: 19px;
  background: var(--pearl);
  color: var(--smoke);
  font-size: 0.8125rem;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wall-search-pill__icon {
  flex-shrink: 0;
  color: var(--champagne-deep);
}

.wall-search-pill:hover {
  color: var(--ink);
  border-color: var(--champagne);
}

/* Kontener zwijany — grid 1fr→0fr animuje wysokość bez magicznego max-height.
   Zastępuje dawny kafel „Filtr rozmiaru" (3 linie tekstu na pusty stan) oraz
   spina taby trybu i czipy okazji w dwa raile, żeby chrome ustępowało treści
   przy przewijaniu (app.js::_setupWallCondenseOnScroll). */
.wall-rail-stack {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s var(--ease-lux), opacity .18s linear;
}

.wall-rail-stack__inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 3px 0;   /* miejsce na 3px outline focusu — overflow:hidden by go uciął */
}

.wall-topbar--condensed .wall-rail-stack {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.wall-rail {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.wall-rail__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--mist);
}

/* Segmentowany przełącznik domeny (Produkty/Looki) — wypełniony tor, celowo
   INNY komponent niż obrysowane pigułki widoku/okazji, żeby test zmrużonych
   oczu od razu rozróżnił „co oglądam" od „czym zawężam". */
.wall-domain {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-radius: 999px;
}

.wall-domain__opt {
  min-height: 30px;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--smoke);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}

.wall-domain__opt--active {
  color: var(--ink);
  font-weight: 700;
  background: var(--pearl);
  box-shadow: 0 1px 3px rgba(30, 24, 18, .12);
}

.wall-domain__opt:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 1px;
}

/* Czip rozmiaru — następca kafla; ta sama semantyka toggle (aktywny/wyłączony),
   jeden wiersz zamiast trzech. Pełna etykieta w title, skrócona w tekście. */
.wall-size-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  min-height: 34px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(193, 166, 141, .14);
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  cursor: pointer;
}

.wall-size-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-size-chip svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.wall-size-chip--off {
  color: var(--smoke);
  background: var(--pearl);
  border-color: var(--mist);
}

.wall-size-chip--off .wall-size-chip__text {
  text-decoration: line-through;
}

.wall-size-chip:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wall-rail-stack,
  .wall-topbar {
    transition: none;
  }
}

/* Mode and occasion filters intentionally share the same touch-friendly chip UI. */
.wall-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.wall-tabs::-webkit-scrollbar {
  display: none;
}

.wall-tab,
.wall-occasion-filter__chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-mist);
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.wall-tab:hover,
.wall-occasion-filter__chip:hover {
  color: var(--ink);
}

.wall-tab--active,
.wall-occasion-filter__chip--active {
  color: var(--ink);
  background: rgba(193, 166, 141, .14);
  border-color: var(--champagne-deep);
}

.wall-tab:focus-visible,
.wall-occasion-filter__chip:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.wall-rail--filters {
  gap: 9px;
}

.wall-occasion-filter__label {
  flex: 0 0 auto;
  color: var(--ink-mist);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wall-occasion-filter__scroll {
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.wall-occasion-filter__scroll::-webkit-scrollbar {
  display: none;
}

.wall-occasion-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--cloud);
  border: 1px dashed var(--champagne-deep);
  border-radius: 12px;
}

.wall-occasion-cta__text {
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  color: var(--ink-mist);
  line-height: 1.35;
}

.wall-occasion-cta__btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pearl);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.wall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  row-gap: 22px;
  padding: 18px var(--gutter) 8px;  /* Zgłoszenie #143 — było 16px literalne */
  transition: filter .3s ease;
}

/* Bramka teaser (metered gate, Sprint S2b) — ściana widoczna ale niedostępna, wzmacnia FOMO */
.wall-grid--locked {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Trial 5 min bez logowania (Sprint S2c)
   ============================================================ */

.header__trial-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cloud);
  border: 1px solid var(--mist);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}

.header__trial-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--champagne-deep);
  animation: aura-breathe 2.2s var(--ease-lux) infinite;
}

.header__trial-pill--low {
  background: rgba(220, 38, 38, .1);
  border-color: rgba(220, 38, 38, .35);
  color: rgb(185, 28, 28);
}

.header__trial-pill--low .header__trial-pill__dot {
  background: rgb(220, 38, 38);
  animation-duration: 1s;
}

/* Plakietka "wersja demonstracyjna" — stała informacja dla testerów zamkniętej bety */
.header__demo-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--champagne-soft);
  border: 1px solid var(--champagne-glow);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .header__demo-pill__text {
    display: none;
  }
}

.trial-chip {
  margin: 0 4px 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--cloud);
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: center;
}

.trial-chip--empty {
  background: rgba(220, 38, 38, .08);
  color: rgb(185, 28, 28);
}

/* --- Prezentacja "wow" (Sprint S2c) — nad żywą rozmytą ścianą w tle --- */
.presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, .35);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.presentation-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--shadow-float);
  padding: 28px 26px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: msg-rise .4s var(--ease-lux) both;
}

.presentation-card__dots {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.presentation-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mist);
  transition: background .2s, transform .2s;
}

.presentation-card__dot--active {
  background: var(--champagne-deep);
  transform: scale(1.35);
}

.presentation-slide {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: msg-rise .35s var(--ease-lux) both;
}

.presentation-slide__brand {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--smoke);
  margin: 0 0 18px;
}

.presentation-slide__title {
  font-family: var(--font-display);
  font-size: 1.6875rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}

.presentation-slide__body {
  font-family: var(--font-ui);
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--smoke);
  max-width: 40ch;
  margin: 0 0 8px;
}

.presentation-slide__chat-demo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
}

.presentation-slide__bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  line-height: 1.4;
  text-align: left;
  max-width: 86%;
}

.presentation-slide__bubble--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--pearl);
  border-bottom-right-radius: 4px;
}

.presentation-slide__bubble--ai {
  align-self: flex-start;
  background: var(--cloud);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.presentation-slide__cta {
  width: 100%;
  margin-top: 14px;
  padding: 15px 22px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.90625rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform .25s var(--ease-spring);
}
.presentation-slide__cta:hover { transform: translateY(-2px); }

.presentation-slide__cta--ghost {
  margin-top: 10px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--mist);
  box-shadow: none;
}

.presentation-slide__hint {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  color: var(--smoke);
  max-width: 42ch;
  line-height: 1.4;
}

.presentation-slide__later {
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Sprint S2e — slajd wyboru zunifikowany w obu trybach AUTH_REQUIRED (dawny Welcome Splash) */
.presentation-slide__choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.presentation-slide__how {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.presentation-slide__rodo {
  margin-top: 20px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  color: var(--smoke);
  max-width: 44ch;
  line-height: 1.4;
}

.presentation-card__nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
}

.presentation-card__back,
.presentation-card__skip,
.presentation-card__next {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--smoke);
  cursor: pointer;
  padding: 6px 4px;
}

.presentation-card__next {
  margin-left: auto;
  color: var(--ink);
}

.wall-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.wall-card:active {
  transform: scale(0.98);
}

@keyframes wall-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.wall-card {
  animation: wall-in .5s var(--ease-lux) both;
}

/* Swipe gesty (S2h) — .wall-card ma `animation:...both`, który TRZYMA swój końcowy
   transform (none) i nadpisuje inline transform ze swipe'a (ta sama pułapka co
   .chat--dimmed/.canvas-panel wcześniej w tym sprincie) — animation:none odblokowuje
   inline transform na czas przeciągania. touch-action ogranicza natywny scroll/zoom
   przeglądarki do pionu, żeby poziomy swipe nie szarpał się z przewijaniem strony. */
.wall-card {
  touch-action: pan-y;
}
.wall-card--swiping {
  animation: none;
  transition: none;
}

.wall-card__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cloud);
}

.wall-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wall-card__like,
.wall-card__nope {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(250,249,246,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s, color 0.2s;
  z-index: 2;
}

.wall-card__like:active,
.wall-card__nope:active {
  transform: scale(0.92);
}

.wall-card__like:hover,
.wall-card__nope:hover {
  background: rgba(250,249,246,.98);
}

.wall-card__like {
  bottom: 8px;
  right: 8px;
}

.wall-card__like--on {
  color: var(--champagne-deep);
}

.wall-card__nope {
  bottom: 8px;
  left: 8px;
}

.wall-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wall-card__brand {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--smoke);
  font-weight: 500;
}

.wall-card__name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wall-card__price {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

.wall-card--calibrate {
  grid-column: 1 / -1;
  padding: 22px 18px;
  border: 1.5px solid var(--champagne);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(193,166,141,0.06) 0%, rgba(236,227,215,0.1) 100%);
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
  text-align: center;
}

.wall-card--calibrate:hover {
  border-color: var(--champagne-deep);
  background: linear-gradient(135deg, rgba(193,166,141,0.12) 0%, rgba(236,227,215,0.15) 100%);
}

.wall-calibrate__mark {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--champagne-soft);
  color: var(--champagne-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wall-calibrate__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.wall-calibrate__desc {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--smoke);
  line-height: 1.5;
  margin-bottom: 10px;
}

.wall-calibrate__cta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--champagne-deep);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Feed Composer / Retail Media (Faza B/C) — wstawki pełnoszerokie w wall-grid */
.wall-item-wrap {
  display: contents;
}

.wall-search-tier-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--mist);
}

.wall-search-tier-heading__label {
  flex-shrink: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.wall-search-tier-heading__detail {
  min-width: 0;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  line-height: 1.25;
}

/* Walled Garden per-user — przerwa przed drugą pulą Ściany ("w tej galerii, ale nie
   dziś"). Ten sam wzorzec co .wall-search-tier-heading obok (pełna szerokość grida). */
.wall-gallery-pool-divider {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 0 8px;
  margin-top: 6px;
  border-top: 1px solid var(--mist);
}

.wall-gallery-pool-divider__label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.wall-gallery-pool-divider__hint {
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  line-height: 1.3;
}

/* Karta z tier=in_mall — plakietka "Nie na dziś" (ten sam wzorzec pozycjonowania co
   .product-card__size-badge) + CTA powiadomienia pod ceną. */
.wall-card__gallery-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  background: rgba(250, 249, 246, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 3px 9px;
}

.wall-card__notify {
  margin-top: 6px;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--champagne-deep);
  background: var(--champagne-soft);
  border: none;
  border-radius: 20px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.wall-card__notify:hover {
  background: var(--champagne);
}

.wall-card__notify--on {
  opacity: 0.65;
  cursor: default;
}

.wall-insert {
  grid-column: 1 / -1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cloud);
  animation: wall-in .5s var(--ease-lux) both;
}

/* Kapsuła kuratorska */
.wall-capsule__hero {
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, var(--champagne-soft) 0%, var(--cloud) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.wall-capsule__overlay {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wall-capsule__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pearl);
}

.wall-capsule__subtitle {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: rgba(255,255,255,.85);
}

.wall-capsule__row,
.wall-outfit-ctl__row,
.wall-sponsored__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  scrollbar-width: none;
}

.wall-capsule__row::-webkit-scrollbar,
.wall-outfit-ctl__row::-webkit-scrollbar,
.wall-sponsored__row::-webkit-scrollbar {
  display: none;
}

.wall-capsule__card,
.wall-sponsored__card {
  flex: 0 0 108px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.wall-capsule__card img,
.wall-sponsored__card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--mist);
  display: block;
}

.wall-capsule__card span,
.wall-sponsored__card span {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  color: var(--smoke);
}

.wall-capsule__card-brand,
.wall-sponsored__card-brand {
  text-transform: uppercase;
  letter-spacing: .06em;
}

.wall-capsule__card-price,
.wall-sponsored__card-price {
  color: var(--ink) !important;
  font-weight: 600;
}

/* Wstawka „Cały look" używa teraz wspólnego .look-tile (patrz sekcja LOOKI), więc
   reguły .wall-outfit-ctl__card* zniknęły razem z nadpisaniem !important, które
   istniało wyłącznie po to, by odkleić kategorię od współdzielonego stylu span. */
.wall-outfit-ctl__row .look-tile {
  flex: 0 0 108px;
}

/* Cały Look (Complete the Look wstrzyknięty w ścianę) */
.wall-outfit-ctl {
  border: 1.5px solid var(--champagne);
  background: linear-gradient(135deg, rgba(193,166,141,0.06) 0%, rgba(236,227,215,0.1) 100%);
}

.wall-outfit-ctl__header,
.wall-sponsored__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 0;
}

.wall-outfit-ctl__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.wall-outfit-ctl__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--champagne-deep);
  font-weight: 600;
}

/* Slot sponsorowany Retail Media — wymóg transparentności: badge zawsze widoczny */
.wall-sponsored {
  border: 1px solid var(--mist);
}

.wall-sponsored__badge {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smoke);
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 3px 10px;
}

.wall-sponsored__brand {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

/* Skeleton — widoczny natychmiast po wejściu/zmianie chipa, ściana nigdy nie jest pustą kartką */
.wall-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wall-skeleton__img {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
}

.wall-skeleton__line {
  height: 11px;
  width: 70%;
  border-radius: 4px;
}

.wall-skeleton__line--short {
  width: 40%;
}

.wall-skeleton__img,
.wall-skeleton__line {
  background: linear-gradient(100deg, var(--cloud) 40%, var(--mist) 50%, var(--cloud) 60%);
  background-size: 200% 100%;
  animation: wall-shimmer 1.4s ease-in-out infinite;
}

@keyframes wall-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.wall-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.wall-search-relaxations {
  display: grid;
  gap: 12px;
  margin: 4px 16px 16px;
  padding: 16px;
  border: 1px solid var(--mist);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--champagne-soft), rgba(255, 255, 255, .72));
}

.wall-search-relaxations p {
  margin: 4px 0 0;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.35;
}

.wall-search-relaxations__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wall-search-relaxation {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(164, 128, 81, .48);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  cursor: pointer;
}

.wall-search-relaxation:hover,
.wall-search-relaxation:focus-visible {
  border-color: var(--champagne-deep);
  background: var(--pearl);
}

.wall-search-relaxation small {
  color: var(--smoke);
  font-size: 0.625rem;
  font-weight: 500;
}

.wall-sentinel {
  height: 1px;
  margin-top: 24px;
}

.wall-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  font-size: 0.8125rem;
  color: var(--smoke);
}

.wall-exhausted {
  text-align: center;
  padding: 40px 20px;
  color: var(--smoke);
}

.wall-exhausted__cta {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--mist);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
}

.wall-exhausted__cta:hover {
  border-color: var(--champagne);
  background: rgba(193, 166, 141, 0.05);
}

/* Sheet Actions (z Wall) */
.sheet-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--mist);
  margin-top: 12px;
}

.sheet-action-btn {
  padding: 10px 12px;
  border: 1px solid var(--mist);
  border-radius: 6px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
}

.sheet-action-btn:hover {
  border-color: var(--champagne);
  background: var(--cloud);
}

.sheet-action-btn--ai {
  border-color: var(--champagne);
  background: rgba(193, 166, 141, 0.08);
  color: var(--champagne-deep);
}

.sheet-action-btn--ai:hover {
  background: rgba(193, 166, 141, 0.15);
}

/* Sheet Extra — dodatkowe produkty */
.sheet-extra {
  padding: 12px 0;
  border-top: 1px solid var(--mist);
  margin-top: 12px;
}

.sheet-extra__title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sheet-extra__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Zgłoszenie #74 — wiersz kart NA STREFĘ (`sheetCompleteLook`/`groups`). Każda strefa
   ma własną poziomo przewijaną taśmę (`.sheet-extra__carousel` niżej, reużyta
   niezmieniona) — bez tego wielostrefowa lista musiałaby przewijać się w poziomie
   CAŁĄ stroną, co reguła projektu zabrania (body nigdy się nie przewija w poziomie). */
.sheet-extra__groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sheet-extra__group-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--smoke);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.sheet-extra__carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.sheet-extra__carousel::-webkit-scrollbar {
  display: none;
}

.sheet-extra-card {
  position: relative;
  flex: 0 0 142px;
  min-width: 0;
}

.sheet-extra-card__open {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 0.5rem;
  cursor: pointer;
}

.sheet-extra-card__image-wrap {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mist);
}

.sheet-extra-card__image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.sheet-extra-card__open:hover .sheet-extra-card__image-wrap img {
  transform: scale(1.04);
}

.sheet-extra-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px 10px;
}

.sheet-extra-card__category {
  overflow: hidden;
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sheet-extra-card__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sheet-extra-card__meta {
  overflow: hidden;
  color: var(--ink-mist);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-extra-card__wishlist {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.sheet-extra-card__wishlist--on {
  color: #a44242;
}

.sheet-extra-card__open:focus-visible,
.sheet-extra-card__wishlist:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 3px;
}

.sheet-extra__empty {
  padding: 12px;
  font-size: 0.8125rem;
  color: var(--ink-mist);
  text-align: center;
}

/* Spinner mini */
.spinner-mini {
  width: 16px;
  height: 16px;
  border: 2px solid var(--mist);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsywność */
@media (prefers-reduced-motion: reduce) {
  .wall-card {
    transition: none;
    animation: none;
  }
  .wall-tab {
    transition: none;
  }
  .wall-skeleton__img,
  .wall-skeleton__line {
    animation: none;
  }
  .sheet-action-btn {
    transition: none;
  }
}

/* ============================================================
   Onboarding — coachmarki + email-ask (Welcome Splash usunięty w Sprincie S2e,
   zastąpiony prezentacją "wow" — patrz .presentation-* wyżej)
   ============================================================ */

/* --- Coachmarki --- */
.coachmark {
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
  animation: msg-rise .35s var(--ease-lux) both;
}

.coachmark--banner {
  padding: 11px 16px;
  margin: 10px 16px 4px;
  text-align: center;
  position: relative;
}
.coachmark--banner::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.coachmark--sheet {
  margin: 0 0 12px;
}

.coachmark--nav {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 200px;
  padding: 9px 14px;
  text-align: center;
  z-index: 5;
}
.coachmark--nav::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* --- Email-ask sheet (value-exchange) --- */
.email-ask {
  padding-top: 6px;
  text-align: left;
}

.email-ask__headline {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  color: var(--ink);
  margin: 4px 0 10px;
}

.email-ask__body {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--smoke);
  margin: 0 0 20px;
}

.email-ask__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-ask__cta {
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--champagne-deep);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.90625rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.email-ask__cta:disabled { opacity: .6; cursor: default; }

.email-ask__msg {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--love);
  margin: 6px 0 0;
}

.email-ask__later {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Zgłoszenie #126 — popup rozmiarów (intro + formularz). .wizard-sizes/.lo-chip
   reużyte 1:1 z onboardingu (patrz komentarz w index.html), reguły tu dotyczą
   wyłącznie elementów UNIKALNYCH temu popupowi. */
.size-ask-form {
  display: flex;
  flex-direction: column;
}
.size-ask-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cloud);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  color: var(--smoke);
  line-height: 1.5;
}
.size-ask-hint__btn {
  margin-left: 4px;
  padding: 2px 10px;
  border: 1px solid var(--champagne-deep);
  border-radius: 12px;
  background: none;
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.size-ask-summary {
  margin: 4px 0 18px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 600;
}

/* --- Bramka teaser: kod OTP (Sprint S2b) --- */
.teaser-gate__code {
  text-align: center;
  font-size: 1.375rem;
  letter-spacing: 8px;
  font-family: var(--font-ui);
}

/* --- Link „Zobacz przewodnik" (re-run tour, Mój Styl) --- */
.dna-panel__tour-link {
  display: block;
  margin: 4px auto 8px;
  padding: 8px 16px;
  border: 1px solid var(--champagne-soft);
  border-radius: var(--radius-input);
  background: none;
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.dna-panel__tour-link:hover { background: var(--champagne-soft); }

/* ============================================================
   Spotlight Tour — przewodnik interaktywny po żywym UI (Faza 45)
   ============================================================ */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  cursor: pointer;
}

.tour-spotlight {
  position: fixed;
  box-shadow: 0 0 0 200vmax rgba(10, 10, 10, .58);
  border: 1.5px solid var(--champagne);
  transition: top .55s var(--ease-lux), left .55s var(--ease-lux),
              width .55s var(--ease-lux), height .55s var(--ease-lux),
              border-radius .55s var(--ease-lux);
  pointer-events: none;
}
.tour-spotlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1.5px solid var(--champagne);
  animation: aura-breathe 2.2s var(--ease-lux) infinite;
}

.tour-bubble {
  position: fixed;
  width: min(280px, calc(100vw - 48px));
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-premium);
  padding: 18px 20px 16px;
  cursor: default;
  transition: top .55s var(--ease-lux), left .55s var(--ease-lux);
  animation: tour-bubble-fade .3s var(--ease-lux) both;
}

/* Osobny keyframe (nie msg-rise) — msg-rise ustawia transform:none na 100%,
   co nadpisywałoby inline transform: translate(-50%, ±100%) używany do
   pozycjonowania/centrowania dymka względem kotwicy. */
@keyframes tour-bubble-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tour-bubble__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.tour-bubble__body {
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--smoke);
  margin: 0 0 16px;
}

.tour-bubble__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}

.tour-bubble__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mist);
  transition: background .25s var(--ease-lux), transform .25s var(--ease-lux);
}
.tour-bubble__dot--active {
  background: var(--champagne-deep);
  transform: scale(1.35);
}

.tour-bubble__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tour-bubble__skip {
  background: none;
  border: none;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 8px 4px;
}

.tour-bubble__next {
  flex: 1;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .coachmark,
  .tour-bubble,
  .presentation-card,
  .presentation-slide,
  .header__trial-pill__dot {
    animation: none;
  }
  .tour-spotlight,
  .tour-spotlight::after,
  .tour-bubble {
    transition: none;
    animation: none;
  }
}

/* ============================================================
   Wardrobe — Moja Szafa (Faza 62)
   ============================================================ */
.wardrobe-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--cloud), transparent);
}

.wardrobe-portrait {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: var(--cloud);
}

.wardrobe-portrait__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wardrobe-portrait__archetype {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}

.wardrobe-portrait__palette {
  display: flex;
  gap: 0;
  margin: 8px 0;
}

.wardrobe-portrait__swatch {
  flex: 1;
  min-height: 28px;
  border-radius: 6px;
  border: none;
}

.wardrobe-portrait__facts {
  font-size: 0.75rem;
  color: var(--smoke);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Analiza Szafy (Faza F4, Werdykt) ────────────────────────────── */
.wardrobe-verdict {
  margin: 10px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--pearl);
  border: 1px solid var(--mist);
}

.wardrobe-verdict__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  font-family: var(--font-display);
}

.wardrobe-verdict__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.wardrobe-verdict__cta {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.wardrobe-verdict__hint {
  font-size: 0.75rem;
  color: var(--smoke);
  margin: 0;
}

/* Przełącznik Mam/Chcę */
.wardrobe-switch {
  position: sticky;
  top: var(--h-header);
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 10px 0;
  background: var(--glass-bg, rgba(250, 249, 246, 0.8));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border, var(--mist));
  flex-shrink: 0;
}

.wardrobe-switch__btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--smoke);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease-lux), color .15s var(--ease-lux);
  white-space: nowrap;
}

.wardrobe-switch__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--pearl);
}

/* Kolekcje (chip-bar) */
.wardrobe-collections-bar {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.wardrobe-coll-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--pearl);
  font-size: 0.75rem;
  color: var(--smoke);
  cursor: pointer;
  white-space: nowrap;
}
.wardrobe-coll-chip--active {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}
.wardrobe-coll-new {
  flex-shrink: 0;
  width: 130px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px dashed var(--color-border);
  font-size: 0.75rem;
  background: transparent;
}

/* Sekcje + grid */
.wardrobe-sections {
  /* Fala 1 — BEZ bocznego paddingu: .wishlist-panel niesie już --gutter/--pad-content
     (KROK 4a); dublowanie go tutaj przesuwało pierwszy kafel Szafy o dodatkowe 16px
     względem Ściany (zmierzone getBoundingClientRect, nie ocena wzrokiem). */
  padding: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wardrobe-section__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--smoke);
  margin: 0 0 8px;
}
.wardrobe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wardrobe-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pearl);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
}
.wardrobe-tile__img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
}
.wardrobe-tile__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.wardrobe-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px;
  border-top: 1px solid var(--mist);
  min-height: 40px;
}
.wardrobe-tile__brand {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--smoke);
  margin: 0;
}
.wardrobe-tile__price {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}
/* Fala 2 — trasa po galerii */
.wardrobe-route-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--love);
  color: var(--pearl);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  margin: 12px 0;
  transition: opacity 0.2s;
}
.wardrobe-route-entry:hover {
  opacity: 0.9;
}

/* Arkusz trasy */
.wardrobe-route-panel {
  padding: 16px 0;
}
.wardrobe-route-panel h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--ink);
}
.wardrobe-route-loading,
.wardrobe-route-error {
  text-align: center;
  padding: 24px 16px;
  color: var(--smoke);
}
.wardrobe-route-loading p,
.wardrobe-route-error p {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
}

/* Wybór galerii */
.wardrobe-route-choice {
  padding: 0 16px;
}
.wardrobe-route-choice__label {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--smoke);
}
.wardrobe-route-candidates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wardrobe-route-candidate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  background: var(--mist);
  border: 1px solid var(--pearl);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.wardrobe-route-candidate:hover {
  background: var(--pearl);
}
.candidate__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.875rem;
}
.candidate__covered {
  font-size: 0.75rem;
  color: var(--smoke);
  margin-top: 4px;
}

/* Wyniki trasy */
.wardrobe-route-result {
  padding: 0 16px;
}
.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--mist);
  margin-bottom: 16px;
}
.route-header__gallery {
  font-weight: 600;
  color: var(--ink);
}
.route-header__coverage {
  font-size: 0.75rem;
  color: var(--smoke);
}

/* Przystanki */
.wardrobe-route-stops {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.route-stop {
  padding: 12px;
  background: var(--mist);
  border-radius: 8px;
}
.route-stop__store {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 0 8px 0;
  color: var(--ink);
}
.route-stop__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.route-item {
  font-size: 0.8125rem;
  color: var(--smoke);
  display: flex;
  justify-content: space-between;
}
.route-item__name {
  flex: 1;
}
.route-item__size {
  color: var(--love);
  font-weight: 600;
  margin-left: 8px;
  flex-shrink: 0;
}

.route-floor-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.route-floor-group__header {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 12px 0 8px 0;
  letter-spacing: 0.5px;
}

/* Brakujące itemy — --nope/--nope-bg (DESIGN.md: para zarezerwowana dokładnie dla
   tego semantycznego przypadku, "czego nie kupisz tu"), nie wynajdywać nowych czerwieni. */
.wardrobe-route-missing {
  padding: 12px;
  background: var(--nope-bg);
  border-radius: 8px;
}
.wardrobe-route-missing h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--ink);
}
.missing-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.missing-item {
  font-size: 0.8125rem;
  color: var(--smoke);
  display: flex;
  justify-content: space-between;
}
.missing-item__reason {
  color: var(--nope);
  font-size: 0.75rem;
}

/* Fala 2 — rozmiar na kaflu */
.wardrobe-tile__size {
  font-size: 0.75rem;
  color: var(--smoke);
  margin: 0;
}
.wardrobe-tile__size-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.wardrobe-tile__size-button:hover {
  color: var(--love);
}
.wardrobe-tile__claim {
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: var(--love, #2F7A55);
  color: var(--pearl);
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Moja Szafa Etap 3 (Faza 62, cz. 3) === */
.wardrobe-tile--dropped .wardrobe-tile__img {
  filter: grayscale(1);
  opacity: 0.55;
}

.wardrobe-tile__badges {
  position: absolute;
  left: 6px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.wardrobe-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.625rem;
  font-weight: 600;
  background: var(--pearl);
  color: var(--ink);
}
.wardrobe-badge.--drop {
  background: #2e7d46;
  color: var(--pearl);
}

/* W1 (2.3, 2026-08-18) — przełącznik własności wprost na kaflu. Bezobramkowa pigułka w
   stanie "wanted" (nienachalna, kafel ma już 3 inne przyciski), pełen kontrast w stanie
   "bought" (jedyny sygnał sukcesu na kaflu — musi być czytelny na pierwszy rzut oka). */
.wardrobe-tile__owned-toggle {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s var(--ease-lux), border-color .15s var(--ease-lux);
}

.wardrobe-tile__owned-toggle.--on {
  background: #2e7d46;
  border-color: #2e7d46;
}

.wardrobe-tile__owned-toggle:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

/* Blok B — karta pytania kontrolnego dla starych itemów */
.wardrobe-review {
  padding: 12px 16px;
  background: var(--champagne);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--mist);
}

.wardrobe-review__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.wardrobe-review__product {
  font-size: 0.75rem;
  color: var(--smoke);
  margin: 0 0 4px 0;
  font-weight: 500;
}

.wardrobe-review__meta {
  font-size: 0.6875rem;
  color: var(--smoke);
  margin: 0 0 10px 0;
}

.wardrobe-review__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wardrobe-review__action {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border: 1px solid var(--smoke);
  border-radius: 4px;
  background: var(--pearl);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.wardrobe-review__action:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pearl);
}

.wardrobe-review__action--primary {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}

.wardrobe-review__action--primary:hover {
  background: var(--smoke);
  border-color: var(--smoke);
}

.wardrobe-looks-entry {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--smoke);
  cursor: pointer;
}

.sheet-shop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 10px;
}

.sheet-shop__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-shop__price-old {
  text-decoration: line-through;
  color: var(--smoke);
  font-size: 0.8125rem;
}

.sheet-shop__price-new {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
}

.sheet-shop__price-diff {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: #2e7d46;
  color: var(--pearl);
  font-size: 0.6875rem;
  font-weight: 600;
}

.sheet-shop__status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sheet-shop__status > label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
}

.sheet-shop__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-chip {
  padding: 6px 12px;
  border: 1px solid var(--smoke);
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--pearl);
  color: var(--ink);
  cursor: pointer;
  transition: all 200ms ease-in-out;
}
.status-chip:hover {
  border-color: var(--ink);
}
.status-chip.--active {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}

.sheet-shop__alerts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-shop__alert {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border: 1px solid var(--smoke);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--pearl);
  color: var(--ink);
  cursor: pointer;
  transition: all 200ms ease-in-out;
}
.sheet-shop__alert:hover:not(:disabled) {
  border-color: var(--ink);
}
.sheet-shop__alert:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sheet-shop__alert.--on {
  background: #2e7d46;
  color: var(--pearl);
  border-color: #2e7d46;
}

@media (min-width: 480px) {
  .wardrobe-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Discovery Wall — Wyszukiwanie i filtry (Faza 65)
   ============================================================ */

.wall-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.wall-search-combobox {
  position: relative;
  flex: 1;
  min-width: 0;
}

.wall-search-input {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--mist);
  border-radius: 19px;
  background: var(--pearl);
  color: var(--ink);
  font-size: 0.8125rem;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.2s;
}
.wall-search-input::placeholder {
  color: var(--smoke);
}
.wall-search-input:focus {
  border-color: var(--champagne);
}

.wall-search-suggestions {
  position: absolute;
  z-index: 58;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: rgba(255, 254, 252, .97);
  box-shadow: 0 14px 30px rgba(30, 24, 18, .14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.wall-search-suggestions__label {
  display: block;
  padding: 10px 12px 5px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wall-search-suggestions__loading {
  padding: 8px 12px 12px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.wall-search-suggestion {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid rgba(10, 10, 10, .055);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.wall-search-suggestion:hover,
.wall-search-suggestion--active {
  background: var(--champagne-soft);
}

.wall-search-suggestion__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-search-suggestion__meta,
.wall-search-suggestion__kind {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--smoke);
  font-size: 0.6875rem;
}

.wall-search-suggestion__kind {
  color: var(--champagne-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 0.5625rem;
  font-weight: 700;
}

.wall-search-understanding {
  display: grid;
  gap: 6px;
  padding: 2px 0 9px;
}

.wall-search-understanding__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.wall-search-understanding__eyebrow,
.wall-search-relaxations__eyebrow {
  flex-shrink: 0;
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wall-search-understanding__count {
  min-width: 0;
  overflow: hidden;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-search-understanding__rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}
.wall-search-understanding__rail::-webkit-scrollbar { display: none; }

.wall-search-understanding__chip {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid var(--mist);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.2;
}
.wall-search-understanding__chip--strict { border-color: rgba(164, 128, 81, .52); background: var(--champagne-soft); }
.wall-search-understanding__chip--preference { border-style: dashed; }
.wall-search-understanding__chip--exclusion { color: #8a4545; text-decoration: line-through; }

.wall-search-understanding__unknown {
  margin: 0;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.3;
}

.wall-search-clarification {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(164, 128, 81, .42);
  border-radius: 10px;
  background: var(--champagne-soft);
}

.wall-search-clarification p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.35;
}

.wall-search-clarification__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wall-search-clarification__action {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--champagne-deep);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.wall-search-clarification__action--open_stylist {
  border-style: dashed;
}

.wall-search-clarification__action:focus-visible {
  outline: 3px solid rgba(164, 128, 81, .38);
  outline-offset: 2px;
}

/* A reserved slot keeps the compact search topbar steady whether the router
   selected a primary, soft, or deliberately absent hand-off. */
.wall-search-understanding__cta-slot {
  min-height: 34px;
  display: flex;
  align-items: center;
}

.wall-search-stylist-cta {
  min-height: 32px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.wall-search-stylist-cta--primary {
  background: var(--champagne-deep);
  color: var(--pearl);
  box-shadow: 0 3px 10px rgba(126, 91, 50, .16);
}

.wall-search-stylist-cta--soft {
  background: var(--pearl);
  color: var(--champagne-deep);
}

.wall-search-stylist-cta:focus-visible {
  outline: 3px solid rgba(164, 128, 81, .38);
  outline-offset: 2px;
}

.wall-search-clear {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mist);
  border-radius: 8px;
  background: var(--pearl);
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.wall-search-clear:hover {
  border-color: var(--champagne);
}

.wall-filter-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--mist);
  border-radius: 8px;
  background: var(--pearl);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s;
}
.wall-filter-btn:hover {
  border-color: var(--champagne);
}
.wall-filter-btn svg {
  width: 18px;
  height: 18px;
}

/* Zgłoszenie #97 — wariant z etykietą tekstową dla Pracowni: przycisk stoi tam SAM
   (nie w ciasnym pasku wyszukiwarki Ściany, gdzie `.wall-filter-btn` musi zostać
   kwadratowe), więc może być szerszy i czytelniejszy. */
.wall-filter-btn--labeled {
  width: auto;
  height: 40px;
  gap: 6px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.wall-filter-btn--labeled .wall-filter-btn__badge {
  position: static;
  width: 18px;
  height: 18px;
  font-size: 0.625rem;
}

.wall-filter-btn__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: var(--champagne);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
}

.wall-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.wall-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: var(--pearl);
  color: var(--ink);
  font-family: inherit;
  line-height: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wall-filter-chip:hover {
  border-color: var(--champagne);
}

.wall-filter-chip--clear {
  background: transparent;
  color: var(--champagne-deep);
  text-decoration: underline;
}
.wall-filter-chip--clear:hover {
  background: transparent;
}

/* Filter sheet — filtry i sortowanie */
.filter-sheet {
  padding: 20px 16px 40px;
  max-height: 85dvh;
  overflow-y: auto;
}

.filter-sheet__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}

.filter-sheet__section {
  margin-bottom: 24px;
}
.filter-sheet__section h4 {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--smoke);
  margin: 0 0 12px;
}

.filter-sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-sheet__size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

.filter-sheet__hint {
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--smoke);
  margin: 0;
}

.filter-sheet__chip {
  padding: 8px 14px;
  border: 1px solid var(--mist);
  border-radius: 18px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.filter-sheet__chip:hover {
  border-color: var(--champagne);
}
.filter-sheet__chip--on {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}

.filter-sheet__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-sheet__price-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--smoke);
}

.filter-sheet__price-input {
  width: 90px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--mist);
  border-radius: 8px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.2s;
}
.filter-sheet__price-input:focus {
  border-color: var(--champagne);
}

.filter-sheet__footer {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mist);
  position: sticky;
  bottom: 0;
  background: var(--paper);
  z-index: 10;
}

.filter-sheet__btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-sheet__btn--ghost {
  background: transparent;
  color: var(--smoke);
  border: 1px solid var(--mist);
}
.filter-sheet__btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-sheet__btn--primary {
  background: var(--ink);
  color: var(--pearl);
}
.filter-sheet__btn--primary:hover {
  opacity: 0.9;
}

.sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--smoke);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 20;
  transition: color 0.2s;
}
.sheet__close:hover {
  color: var(--ink);
}


/* === Outfit Canvas (Faza 67) — look builder tray === */
/* Twój Look (Faza 67 „Outfit Canvas"; redesign Sprint S2g) — szyna ikon + wysuwany panel.
   .outfit-canvas to niewidzialna „powłoka" (position:fixed, wyśrodkowana do kolumny
   aplikacji — ten sam trik co .header/.input-area, patrz komentarz przy .app), na całą
   wysokość viewportu; pointer-events:none żeby klik POZA rail/panel przechodził przez nią
   do .canvas-backdrop poniżej. rail/panel są position:absolute WEWNĄTRZ niej (nie fixed
   bezpośrednio — świadomie NIE w <footer>, bo backdrop-filter tam psuje fixed potomków). */
.outfit-canvas {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: var(--max-width);
  z-index: 66;
  pointer-events: none;
}

.canvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;   /* nad .header (60), żeby przechwycić klik gdy panel otwarty */
  background: transparent;
}

.canvas-rail {
  position: absolute;
  /* Wyrównane w pionie ze .send-btn w polu wpisywania (zmierzone: różnica środków 8px) —
     right:12px dawało przesunięcie względem strzałki wysyłki (S2h czwarta poprawka). */
  right: 20px;
  /* Zaczyna się dokładnie nad linią oddzielającą pole wpisywania od czatu (ten sam wzorzec
     co padding-bottom .chat, l.347) — wcześniej stały bottom:100px nachodził na .input-area
     zamiast kończyć się na jej górnej krawędzi (S2h druga poprawka). */
  bottom: calc(var(--h-input) + var(--h-nav) + 12px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.canvas-rail__btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
  /* Świecący złoty gradient zamiast płaskiej czerni (S2h trzecia poprawka — user chciał coś
     bardziej "świecącego", nie tylko kontrastowego) — gradient + poświata (glow shadow) w
     barwach marki (champagne), więc przycisk przyciąga wzrok niezależnie od tła pod spodem. */
  background: linear-gradient(135deg, var(--champagne) 0%, var(--champagne-deep) 100%);
  box-shadow: 0 0 14px 3px var(--champagne-glow), 0 8px 20px -4px rgba(10,10,10,.4);
  color: var(--pearl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s, color .15s;
}
.canvas-rail__btn:hover { transform: translateY(-2px); }
.canvas-rail__btn--active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 0 18px 4px var(--champagne-glow), 0 8px 20px -4px rgba(10,10,10,.5);
  color: var(--pearl);
}
.canvas-rail__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ink);
  border: 1.5px solid var(--pearl);
  box-sizing: border-box;
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

/* Wysuwany panel — tło w pełni nieprzezroczyste, nad przyciemnionym czatem */
.canvas-panel {
  position: absolute;
  right: 0;
  top: 72px;
  bottom: 84px;
  width: 82%;
  max-width: 340px;
  pointer-events: auto;
  background: var(--pearl);
  box-shadow: var(--shadow-premium);
  border-radius: 16px 0 0 16px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.canvas-panel--sliding { transition: transform .25s ease; }
.canvas-panel--offscreen { transform: translateX(100%); }

.canvas-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mist);
}
.canvas-panel__close {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--cloud);
  border-radius: 50%;
  color: var(--smoke);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.canvas-panel__role-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 12px 0 8px;
  color: var(--ink);
}
.canvas-panel__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.canvas-panel__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background: var(--cloud);
}
.canvas-panel__img {
  width: 52px;
  height: 65px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.canvas-panel__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-right: 24px;
}
.canvas-panel__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--ink);
}
.canvas-panel__name {
  font-size: 0.6875rem;
  color: var(--smoke);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-panel__price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

.outfit-canvas__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: rgba(192, 71, 63, 0.85);
  color: var(--pearl);
  border: none;
  border-radius: 50%;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outfit-canvas__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--mist);
}

.outfit-canvas__save,
.outfit-canvas__clear {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.outfit-canvas__save {
  background: var(--champagne);
  color: var(--ink);
}

.outfit-canvas__save:hover {
  opacity: 0.85;
}

.outfit-canvas__clear {
  background: var(--mist);
  color: var(--smoke);
}

.outfit-canvas__clear:hover {
  opacity: 0.8;
}

.outfit-canvas__confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--nope-bg);
  border: 1px solid var(--nope);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink);
}

.outfit-canvas__confirm-btn {
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  border: 1px solid var(--mist);
  border-radius: 4px;
  background: var(--pearl);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
}

.outfit-canvas__confirm-btn:hover {
  background: var(--cloud);
}

.outfit-canvas__confirm-btn--danger {
  background: var(--nope);
  color: var(--pearl);
  border-color: var(--nope);
}

.outfit-canvas__confirm-btn--danger:hover {
  opacity: 0.9;
}

/* Zgłoszenie #128 (część a) — przycisk "Nowy czat", wzorzec .hero-continue (pill)
   + .outfit-canvas__confirm (dwustopniowe potwierdzenie). */
/* Zgłoszenie #134 — pasek scalający .chat-sizebar + .chat-newconv w jeden wiersz
   meta zamiast dwóch osobnych pasm; wraps gdy oba nie mieszczą się obok siebie
   (długa etykieta rozmiarów na wąskim ekranie). */
.chat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  padding: 6px var(--gutter) 4px;
}

.chat-newconv {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: auto;
}

.chat-sizebar {
  flex: 1 1 220px;
  min-width: 0;
}

.chat-newconv__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--champagne-soft);
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s var(--ease-lux), border-color .2s;
}

.chat-newconv__btn:hover {
  background: var(--champagne-glow);
  border-color: var(--champagne-deep);
}

.chat-newconv__confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--nope-bg);
  border: 1px solid var(--nope);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink);
}

.chat-newconv__confirm-btn {
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  border: 1px solid var(--mist);
  border-radius: 4px;
  background: var(--pearl);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
}

.chat-newconv__confirm-btn:hover {
  background: var(--cloud);
}

.chat-newconv__confirm-btn--danger {
  background: var(--nope);
  color: var(--pearl);
  border-color: var(--nope);
}

.chat-newconv__confirm-btn--danger:hover {
  opacity: 0.9;
}

.chat-sizebar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--cloud);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  color: var(--ink);
}
.chat-sizebar__row--off {
  color: var(--smoke);
}
.chat-sizebar__icon {
  font-size: 0.8125rem;
  color: var(--champagne-deep);
}
.chat-sizebar__text {
  flex: 1;
  min-width: 0;
}
.chat-sizebar__text strong {
  font-weight: 700;
}
.chat-sizebar__link {
  border: none;
  background: none;
  padding: 4px 2px;
  min-height: 32px;
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--champagne-deep);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* Przyciemnienie treści czatu, gdy panel „Twój Look" jest otwarty (Sprint S2g) */
.chat--dimmed {
  /* .chat ma stałą `animation: tab-fade ...` (l.540-547) której trzymany stan końcowy
     (opacity:1, fill-mode „both") normalnie wygrywa z każdą zwykłą regułą opacity —
     `animation: none` wyłącza ją, żeby poniższe przyciemnienie faktycznie zadziałało. */
  animation: none;
  opacity: .35;
  pointer-events: none;
  transition: opacity .2s;
}

@media (max-width: 640px) {
  .canvas-panel {
    width: 88%;
  }
}

/* ── Body Profile (Faza F1) ── */
.body-profile-section {
  padding: 24px;
  margin: 24px 0;
  background: linear-gradient(135deg, #f5f0eb, var(--pearl));
  border: 1px solid var(--mist);
  border-radius: 12px;
}

.body-profile-section__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}

.body-profile-section__hint {
  font-size: 0.8125rem;
  color: var(--fog);
  margin-bottom: 20px;
}

.body-profile-manual__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--ink);
}

.body-profile-manual__hint {
  font-size: 0.75rem;
  color: var(--smoke);
  margin-bottom: 14px;
}

.silhouette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.silhouette-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--mist);
  border-radius: 8px;
  background: var(--pearl);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.75rem;
  color: var(--fog);
}

.silhouette-card:hover {
  border-color: var(--ink);
  background: var(--cloud);
}

.silhouette-card--selected:hover {
  background: var(--ink);
}

.silhouette-card--selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pearl);
}

.silhouette-card__icon {
  color: var(--champagne-deep);
}

.silhouette-card__icon svg {
  width: 34px;
  height: 48px;
  display: block;
}

.silhouette-card--selected .silhouette-card__icon {
  color: var(--pearl);
}

.silhouette-card__label {
  font-weight: 500;
  text-align: center;
}

.body-profile-photo {
  margin-bottom: 20px;
}

.body-profile-photo__label {
  display: block;
  margin-bottom: 12px;
}

.body-profile-photo__input {
  display: none;
}

.body-profile-photo__btn {
  display: inline-block;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--pearl);
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}

.body-profile-photo__btn:hover:not(:disabled) {
  opacity: 0.9;
}

.body-profile-photo__btn:disabled,
.body-profile-photo__btn--loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.body-profile-photo__note {
  font-size: 0.75rem;
  color: var(--fog);
  margin-top: 8px;
}

.body-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.body-profile-modal__content {
  background: var(--pearl);
  padding: 24px;
  border-radius: 12px;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.body-profile-modal__content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}

.body-profile-modal__content p {
  font-size: 0.875rem;
  margin-bottom: 8px;
  color: var(--fog);
}

.body-profile-modal__confidence {
  font-size: 0.75rem;
  font-style: italic;
  margin-bottom: 16px;
}

.body-profile-modal__buttons {
  display: flex;
  gap: 12px;
}

.btn-confirm {
  flex: 1;
  padding: 12px;
  background: var(--ink);
  color: var(--pearl);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.btn-confirm:hover {
  opacity: 0.9;
}

.btn-cancel {
  flex: 1;
  padding: 12px;
  background: var(--cloud);
  color: var(--ink);
  border: 1px solid var(--mist);
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.btn-cancel:hover {
  background: var(--mist);
}

.body-profile-current {
  padding: 16px;
  background: var(--cloud);
  border-radius: 8px;
  border-left: 4px solid var(--ink);
}

.body-profile-current__info p {
  font-size: 0.8125rem;
  margin: 6px 0;
  color: var(--ink);
}

.body-profile-current__delete {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--nope);
  color: var(--pearl);
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 500;
}

.body-profile-current__delete:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════
   KREATOR STYLU (Sprint S2d) — moc profilu, marki, pojedynki A/B,
   krok sylwetki/rozmiarów, raport na e-mail, story share, Mój Styl
   ═══════════════════════════════════════════════════════ */

/* Domyślnie POZYTYWNY odstęp — bezpieczny pod KAŻDĄ etykietę (inline span, nagłówek
   sekcji, brak etykiety). Ujemny margines (kompensacja pod duży blokowy nagłówek
   .quiz-question__label) jest WĄSKO zawężony do rodzeństwa TEGO konkretnego selektora
   niżej — inaczej każdy nowy layout, który pożyczy tę klasę, ryzykuje dokładnie ten sam
   defekt (zgłoszenia #113, wcześniej też ekran powitalny Look Onboardingu — patrz
   komentarz przy .wizard-intro, index.html). */
.quiz-step-hint {
  font-size: 0.8rem;
  color: var(--smoke);
  text-align: center;
  margin: 4px 0 16px;
}
.quiz-question__label + .quiz-step-hint {
  margin-top: -14px;
}

/* Pasek mocy profilu */
.wizard-power {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.wizard-power__bar {
  flex: 1;
  height: 6px;
  background: var(--color-border, #e5e5e5);
  border-radius: 3px;
  overflow: hidden;
}
.wizard-power__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--champagne), var(--champagne-deep));
  border-radius: 3px;
  transition: width 0.35s var(--ease-lux);
}
.wizard-power__label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: .04em;
  color: var(--smoke);
  white-space: nowrap;
}
.wizard-power__label b { color: var(--ink); }

/* K2 — Twoje marki */
.quiz-brands {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quiz-brands__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.quiz-brand-btn {
  padding: 9px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border, #e5e5e5);
  background: var(--pearl);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.quiz-brand-btn:hover { border-color: var(--smoke); }
.quiz-brand-btn--selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--pearl);
}

/* K4 — Pojedynki A/B */
.quiz-duel {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quiz-duel__counter {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
  text-align: center;
  margin-bottom: 6px;
}
.duel-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.duel-card {
  border: 2px solid var(--color-border, #e5e5e5);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pearl);
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.12s;
}
.duel-card:hover { border-color: var(--champagne-deep); transform: translateY(-2px); }
.duel-card:active { transform: scale(0.97); }
.duel-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.duel-card__brand {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px;
  text-align: center;
  color: var(--ink);
}

/* K5 — Rozmiary */
.wizard-sizes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}
.wizard-sizes__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--smoke);
}
.wizard-sizes__field-label {
  font-size: 0.78rem;
  color: var(--smoke);
}
.wizard-sizes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-size-chip {
  padding: 8px 14px;
  min-width: 44px;
}

.wizard-measurements {
  width: 100%;
  margin: 16px 0;
  font-size: 0.78rem;
  color: var(--smoke);
}
.wizard-measurements__optional {
  font-weight: 400;
  color: var(--color-placeholder, var(--smoke));
}
.wizard-measurements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.wizard-measurements__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wizard-measurements__field input {
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border, #e5e5e5);
  font-size: 0.9rem;
  background: var(--pearl);
  color: var(--ink);
}

/* K6 — Raport na e-mail + wyjście */
.wizard-report-email {
  width: 100%;
  max-width: 420px;
  margin-top: 24px;
  padding: 18px;
  background: rgba(193, 166, 141, 0.08);
  border-radius: 14px;
  text-align: center;
}
.wizard-report-email__label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.wizard-report-email__form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wizard-report-email__form input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border, #e5e5e5);
  font-size: 0.9rem;
}
.wizard-report-email__form .quiz-confirm-btn {
  width: auto;
  margin-bottom: 0;
  padding: 12px 18px;
  white-space: nowrap;
}
.wizard-report-email__sent {
  color: var(--champagne-deep);
  font-weight: 600;
}

/* ============================================================
   Wyjście z Kreatora — Reveal / Recap / CTA (Etap S5)
   ============================================================ */

/* Moment domknięcia — krótka celebracja PRZED stagger-reveal looków (~1.1s, znika sama). */
.wizard-celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0 4px;
}
.wizard-celebrate__glow {
  position: relative;
  font-size: 2rem;
  color: var(--champagne-deep);
  animation: aura-breathe 1.1s var(--ease-lux) both, badge-pop .5s var(--ease-spring) both;
}
.wizard-celebrate__glow::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--champagne-glow) 0%, transparent 70%);
  z-index: -1;
}
.wizard-celebrate__text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* Karta DNA jako bohater ekranu — powiększona wersja .dna-card-mini, paleta jako pełnej
   szerokości pasek zamiast małych kółek (Etap S5, patrz Problem 3 planu). */
.dna-card-mini--hero {
  padding: 1.75rem 1.5rem;
  background: linear-gradient(160deg, rgba(193,166,141,.14), rgba(193,166,141,.05));
  border: 1px solid rgba(193,166,141,.28);
  box-shadow: var(--shadow-card);
}
.dna-card-mini--hero .dna-card-mini__archetype {
  font-size: 1.9rem;
}
.dna-card-mini--hero .dna-card-mini__palette {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  gap: 0;
}
.dna-card-mini--hero .dna-swatch {
  flex: 1 1 0;
  width: auto;
  height: 100%;
  border-radius: 0;
  border: none;
}

/* Etap MS-1 — "W skrócie" w Mój styl, ten sam wzorzec co .wizard-gains poniżej
   (ekran wyjścia Kreatora), ale dla stanu TRWAŁEGO (styleProfileFacts()). */
.style-facts {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--cloud);
  border-radius: var(--radius-bubble);
  text-align: left;
  margin-top: 16px;
}
.style-facts__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
}
.style-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--ink);
}
.style-facts__icon {
  flex: 0 0 auto;
  color: var(--champagne-deep);
}
.style-facts__item b { font-weight: 600; }

/* "Co się właśnie zmieniło" — konkretny recap z realnych danych stanu (wizardGains()). */
.wizard-gains {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--cloud);
  border-radius: var(--radius-bubble);
  text-align: left;
}
.wizard-gains__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
}
.wizard-gains__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--ink);
}
.wizard-gains__icon {
  flex: 0 0 auto;
  color: var(--champagne-deep);
}
.wizard-gains__item b { font-weight: 600; }

/* Sticky footer — JEDNO primary CTA, kontekstowe. Sibling .quiz-completed wewnątrz
   .quiz-panel (position:absolute;inset:0;overflow-y:auto) — sticky działa względem tego
   kontenera scrolla, nie viewportu. */
.wizard-exit-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge), 0 -8px 24px -12px rgba(10,10,10,.25);
  border-radius: 18px 18px 0 0;
}
.wizard-exit-footer__primary {
  width: 100%;
  padding: 15px 22px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform .25s var(--ease-spring), background .15s;
}
.wizard-exit-footer__primary:hover { background: #333; transform: translateY(-2px); }
.wizard-exit-footer__primary:active { transform: scale(0.98); }

.wizard-exit-footer__secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.wizard-exit-footer__secondary button {
  background: none;
  border: none;
  color: var(--smoke);
  font-size: 0.78125rem;
  cursor: pointer;
  padding: 4px 2px;
}
.wizard-exit-footer__secondary button:hover { color: var(--ink); }
.wizard-exit-footer__sep { color: var(--mist); font-size: 0.75rem; }

/* Etap MS-1 — Mój styl: 13 nagłówków w płaskim scrollu zwinięte do 2 grup ("Odkrywaj
   więcej" / "Profil i ustawienia"), domyślnie zamknięte — hero+skrót+liczby widoczne
   bez przewijania. Zwykły x-show (bez pluginu x-collapse — Alpine tu załadowany bez
   dodatków), więc otwarcie/zamknięcie jest natychmiastowe, nie animowane wysokością. */
.style-accordion {
  width: 100%;
  border-top: 1px solid var(--color-border, #eee);
}
.style-accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.style-accordion__chevron {
  color: var(--smoke);
  font-size: 0.875rem;
  transition: transform .2s var(--ease-lux);
}
.style-accordion__chevron--open { transform: rotate(180deg); }
.style-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}

/* Sticky footer "Mój styl" — jedno kontekstowe CTA (styleExitCtaLabel/Action),
   ten sam wzorzec co .wizard-exit-footer (ekran wyjścia Kreatora): .dna-panel
   jest kontenerem scrolla (position:absolute;inset:0;overflow-y:auto). */
.style-exit-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge), 0 -8px 24px -12px rgba(10,10,10,.25);
  border-radius: 18px 18px 0 0;
}
.style-exit-footer__primary {
  width: 100%;
  padding: 15px 22px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform .25s var(--ease-spring), background .15s;
}
.style-exit-footer__primary:hover { background: #333; transform: translateY(-2px); }
.style-exit-footer__primary:active { transform: scale(0.98); }

.quiz-occasion-cta {
  width: 100%;
  max-width: 420px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: var(--ink);
  color: var(--pearl);
  cursor: pointer;
  transition: background 0.15s;
}
.quiz-occasion-cta:hover { background: #333; }

/* Ukryta karta Story 9:16 do html2canvas — offscreen, nie w viewport */
.dna-story-card {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 540px;
  height: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  background: linear-gradient(160deg, var(--paper), #f0e9e1);
  text-align: center;
}
.dna-story-card__brand {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: .25em;
  color: var(--champagne-deep);
}
.dna-story-card__archetype {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--ink);
  margin: 0;
}
.dna-story-card__tagline {
  font-size: 1.1rem;
  color: var(--smoke);
  font-style: italic;
}
.dna-story-card__palette {
  display: flex;
  gap: 10px;
}
.dna-story-card__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.dna-story-card__keywords {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.dna-story-card__keywords span {
  padding: 6px 14px;
  border-radius: 1rem;
  background: rgba(193, 166, 141, 0.15);
  font-size: 0.85rem;
  color: var(--ink);
}
.dna-story-card__footer {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: .1em;
  color: var(--smoke);
  margin-top: 12px;
}

/* Mój Styl — banner "uczy się" + checklist */
.wizard-banner {
  width: 100%;
  padding: 16px;
  margin-bottom: 20px;
  background: rgba(193, 166, 141, 0.1);
  border-radius: 14px;
  border: 1px solid rgba(193, 166, 141, 0.3);
}
.wizard-banner__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.wizard-banner__hint {
  font-size: 0.82rem;
  color: var(--smoke);
  margin: 0 0 10px;
}
.wizard-banner__checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.wizard-checklist-item {
  font-size: 0.78rem;
  color: var(--smoke);
}
.wizard-checklist-item--done { color: var(--champagne-deep); font-weight: 600; }

/* Mój Styl — paleta pory roku / marki / komfort cenowy */
.season-palette,
.my-brands,
.price-comfort {
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #eee);
}
.season-palette__title,
.my-brands__title,
.price-comfort__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.season-palette__desc {
  font-size: 0.82rem;
  color: var(--smoke);
  margin: 0 0 10px;
}
.season-palette__swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.season-palette__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.my-brands__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.price-comfort__value {
  font-size: 0.95rem;
  color: var(--champagne-deep);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wizard-power__fill,
  .duel-card,
  .wizard-exit-footer__primary,
  .quiz-occasion-cta,
  .style-accordion__chevron,
  .style-exit-footer__primary {
    transition: none !important;
  }
}

/* ============================================================================
   DESKTOP RWD LAYER (≥1024px)
   Poniżej 1024px nie wnosi żadnej reguły — mobile bez zmian.

   UWAGA: --h-input i --h-wallbar są nadpisywane INLINE przez JS
   (app.js ResizeObservery na document.documentElement) — inline zawsze wygrywa
   z regułą arkusza, także wewnątrz media query. NIE nadpisywać ich tutaj.
   --h-nav nie jest ruszany przez JS — bezpiecznie zerowany poniżej, co
   automatycznie adaptuje wszystkie calc() zależne od dolnej nawigacji
   (.chat, .input-area, .wall-panel, .canvas-rail, .wishlist-panel, itd.),
   ponieważ mobilny bottom-nav staje się lewym sidebarem.
   ============================================================================ */

/* ============================================================================
   Iteracja 10 — Onboarding pojedynków looków: WŁASNY blok stylów.
   Iteracja 9 doklejała się do klas Kreatora skalibrowanych pod inny układ, co
   dawało realne defekty (zweryfikowane w planie): .sig-item (aspect-ratio +
   overflow:hidden pod JEDEN obraz) PRZYCINAŁ nazwę/cenę/powód/plakietkę;
   .quiz-completed bez max-width rozjeżdżał wynik na desktopie obok 420px
   reszty; .wizard-exit-footer__primary bez rodzica dawał pełnoekranowy pas;
   .wizard-sizes__chips (justify-content:flex-start) rwał rzędy w centrowanym
   kroku. Tu: jedna kolumna dla WSZYSTKICH kroków i komponenty pod ten układ,
   na istniejących tokenach designu (spójność bez pożyczania cudzej geometrii).
   Ekran powitalny świadomie ZOSTAJE na .wizard-intro__* — ten zestaw jest
   zaprojektowany dokładnie pod niego (style.css ~2616).
   ============================================================================ */
.lo-panel { --lo-col: 460px; }

/* Kolumna: każdy krok tej samej szerokości — koniec skoków między ekranami. */
.lo-panel > *,
.lo-panel .lo-step,
.lo-panel .wizard-intro {
  width: 100%;
  max-width: var(--lo-col);
}

/* ── Pasek postępu ── */
.lo-topbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.lo-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.lo-topbar__count {
  margin-left: auto;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--smoke);
}
.lo-back {
  background: none; border: none; padding: 0;
  color: var(--smoke); font-size: 0.8125rem; cursor: pointer;
}
.lo-back:hover { color: var(--ink); }
.lo-progress { height: 3px; border-radius: 2px; background: var(--mist); overflow: hidden; }
.lo-progress__fill {
  height: 100%; border-radius: 2px;
  background: var(--champagne-deep);
  transition: width .45s var(--ease-lux);
}

/* ── Krok ── */
.lo-step {
  display: flex; flex-direction: column; align-items: center;
  animation: tab-fade .3s var(--ease-lux) both;
}
.lo-step__title {
  font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); text-align: center;
  margin: 0 0 8px;
}
.lo-step__hint {
  font-size: 0.84375rem; line-height: 1.5; color: var(--smoke); text-align: center;
  margin: 0 auto 24px; max-width: 38ch;   /* auto — w .lo-step--result (align-items:stretch)
                                             sam max-width zostawiłby akapit przy lewej */
}
.lo-accent { color: var(--champagne-deep); }
.lo-error { color: #B4443A; font-size: 0.8125rem; text-align: center; margin: 14px 0 0; }

/* ── Wybór płci ── */
.lo-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.lo-choice {
  padding: 26px 16px;
  border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--pearl); cursor: pointer;
  transition: border-color .18s, transform .12s var(--ease-spring), box-shadow .18s;
}
.lo-choice:hover { border-color: var(--champagne-deep); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.lo-choice:active { transform: scale(.98); }
.lo-choice__label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* ── Chipy: wycentrowane rzędy (dawniej rwane do lewej w centrowanym kroku) ── */
.lo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.lo-chips--left { justify-content: flex-start; }
.lo-chip {
  padding: 11px 18px;
  border: 1px solid var(--mist); border-radius: var(--radius-input);
  background: var(--pearl); color: var(--ink);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.lo-chip:hover:not(:disabled) { border-color: var(--champagne-deep); background: var(--cloud); }
.lo-chip--on { background: var(--ink); border-color: var(--ink); color: var(--pearl); }
.lo-chip:active:not(:disabled) { transform: scale(.97); }
.lo-chip:disabled { opacity: .5; cursor: default; }
.lo-chip--sm { padding: 8px 14px; min-width: 44px; font-size: 0.8125rem; }

.lo-field { width: 100%; margin-bottom: 22px; }
.lo-field__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); text-align: center; margin: 0 0 12px; }
/* #104 — wybór wielokrotny musi być zapowiedziany, inaczej chipy czytają się jak radio. */
.lo-field__note { font-size: 0.75rem; color: var(--smoke); text-align: center; margin: -8px 0 12px; }
.lo-field__label--sm {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--smoke); text-align: left;
}

/* ── Pojedynek ── */
.lo-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.lo-duel--busy { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.lo-duel__card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--pearl); cursor: pointer;
  transition: border-color .15s, transform .12s var(--ease-spring), box-shadow .18s;
}
.lo-duel__card:hover:not(:disabled) { border-color: var(--champagne-deep); transform: translateY(-3px); box-shadow: var(--shadow-float); }
.lo-duel__card:active:not(:disabled) { transform: scale(.98); }
.lo-duel__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.lo-duel__brand {
  padding: 10px 8px; text-align: center;
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
}
/* Zgłoszenie #171 — trzecia opcja w duelach */
.lo-neither {
  margin-top: 12px; padding: 12px 16px;
  width: 100%; border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--pearl); color: var(--ink);
  font-family: var(--font); font-size: 0.9375rem; font-weight: 500;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.lo-neither:hover:not(:disabled) { border-color: var(--champagne-deep); background: var(--champagne-soft); }
.lo-neither:active:not(:disabled) { background: var(--mist); }
.lo-neither:disabled { opacity: .45; cursor: default; }

.lo-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.lo-skeleton__card {
  aspect-ratio: 3/4; border-radius: var(--radius-bubble);
  background: linear-gradient(90deg, var(--cloud) 25%, var(--mist) 50%, var(--cloud) 75%);
  background-size: 200% 100%;
  animation: lo-shimmer 1.3s infinite;
}
@keyframes lo-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.lo-textlink {
  margin-top: 20px; padding: 0;
  background: none; border: none;
  color: var(--smoke); font-size: 0.8125rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.lo-textlink:hover:not(:disabled) { color: var(--ink); }
.lo-textlink:disabled { opacity: .35; cursor: default; text-decoration: none; }
/* Wyjście awaryjne w stopce wyniku — pojawia się dopiero po nieudanym zapisie rozmiarów. */
.lo-textlink--footer { margin: 8px auto 0; display: block; }

/* ── Wynik ── */
.lo-step--result { align-items: stretch; }
.lo-result { display: flex; flex-direction: column; width: 100%; }
.lo-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; }
.lo-result__eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--champagne-deep); text-align: center; margin: 0 0 6px;
}
.lo-result__title {
  font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 600; line-height: 1.2;
  color: var(--ink); text-align: center; margin: 0 0 8px;
}

/* ── Kolaż zestawu (#105/#106) ──────────────────────────────────────────────
   Kwadrat, nie 5/6 jak plansza Pracowni: przy `--lo-col` 460px tamten proporcjonalnie
   dawał ~550px wysokości i sam zajmował cały ekran telefonu, spychając listę i CTA
   poza widok (zgłoszenie: „niepoprawnie się renderuje, nie scrolluje"). `max-height`
   w vh domyka to na niskich ekranach niezależnie od szerokości kolumny.
   `place-items` NIE działa — kafle są pozycjonowane absolutnie z `loCollageStyle()`. */
.lo-collage {
  position: relative;
  /* Ograniczamy SZEROKOŚĆ, nie wysokość — `max-height` na pudełku z `aspect-ratio`
     spłaszcza je (szersze niż wyższe), a kafle są skalowane od szerokości kontenera,
     więc zaczynają wystawać w pionie i `overflow:hidden` je ucina. `min()` trzyma
     kwadrat i po prostu zmniejsza całość na niskich ekranach. */
  width: min(100%, 46vh);
  aspect-ratio: 1 / 1;
  margin: 10px auto 18px;
  border-radius: 14px;
  background: linear-gradient(175deg, var(--cloud), var(--paper) 55%);
  border: 1px solid var(--mist);
  overflow: hidden;
}
/* `left`/`top`/`width`/`z-index`/`transform` przychodzą inline z `loCollageStyle()`.
   Kafel = oprawiona odbitka (mata `--pearl`) — ten sam język Atelier co Pracownia,
   ale BEZ `touch-action:none`/`cursor:grab`: tu nic się nie przeciąga, a blokada
   `touch-action` na dużym elemencie potrafiła zjeść pionowy scroll panelu. */
.lo-collage__tile {
  position: absolute;
  aspect-ratio: 3 / 4;
  padding: 5px;
  border-radius: 10px;
  background: var(--pearl);
  box-shadow: 0 1px 2px rgba(10, 10, 10, .06), 0 8px 20px rgba(10, 10, 10, .14);
}
/* `contain`, nie `cover`: zestaw miesza fotografie całych sylwetek z packshotami na
   białym tle (pasek, chustka). `cover` + kadr „per partia ciała" (plansza Pracowni)
   przycinał packshoty w losowym miejscu i robił z paska abstrakcyjną plamę. */
.lo-collage__tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--pearl);
  border-radius: 6px;
  display: block;
}

/* Lista pod kolażem: kompaktowy wiersz (miniatura + treść), cały wiersz jest
   `<button>` otwierającym arkusz produktu. Poprzednia wersja (pełne zdjęcie 3/4 na
   kartę) była duplikatem tego, co teraz pokazuje kolaż. */
.lo-pieces { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 8px 0 18px; }
.lo-piece {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--pearl); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .15s var(--ease-lux);
}
.lo-piece:hover { border-color: var(--champagne-deep); }
.lo-piece:active { transform: scale(.98); }
.lo-piece__media {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: 10px; overflow: hidden;
}
.lo-piece__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-piece__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-piece__brand {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--champagne-deep);
}
.lo-piece__name {
  font-size: 0.84375rem; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lo-piece__price { font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin: 0; }
.lo-piece__reason {
  font-size: 0.71875rem; line-height: 1.35; color: var(--smoke); margin: 2px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lo-piece__badge {
  flex: 0 0 auto;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cloud); color: var(--smoke);
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
}
.lo-piece__chevron { flex: 0 0 auto; color: var(--smoke); font-size: 1.25rem; line-height: 1; }
/* .lo-note usunięte — markup („N z M elementów jest dziś w <galeria>") zdjęty po
   zgłoszeniu żywego użytkownika; wraca dopiero przy zawężeniu do jednej galerii. */

/* ── Sekcje zwijane ── */
.lo-fold {
  width: 100%; margin-top: 12px;
  border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--cloud);
  overflow: hidden;
}
.lo-fold__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.lo-fold__summary::-webkit-details-marker { display: none; }
.lo-fold__summary::after {
  content: '+'; flex: 0 0 auto;
  font-size: 1.0625rem; color: var(--smoke);
  transition: transform .2s var(--ease-lux);
}
.lo-fold[open] .lo-fold__summary::after { transform: rotate(45deg); }
.lo-fold__body { padding: 0 16px 16px; }
.lo-fold__archetype { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.lo-fold__tagline { font-size: 0.8125rem; color: var(--champagne-deep); margin: 0 0 10px; }
.lo-fold__text { font-size: 0.84375rem; line-height: 1.55; color: var(--smoke); margin: 0 0 14px; }
.lo-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lo-swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(10,10,10,.10); }
.lo-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.lo-tag {
  padding: 5px 11px; border-radius: var(--radius-input);
  background: var(--champagne-soft); color: var(--ink); font-size: 0.75rem;
}

/* ── CTA ── */
/* Sticky CTA. Strefa wygaszania (#105/#106) musi być WYSOKA: przy 12px paddingu
   gradient nie miał gdzie zejść do zera i wiersz listy wystawał zza przycisku
   przecięty w pół — czytało się jak błąd renderowania, nie jak pływające CTA. */
.lo-footer {
  position: sticky;
  /* `.quiz-panel` rezerwuje na dole `calc(var(--h-nav) + 28px)`, a sticky przykleja
     się do CONTENT boxa scrollportu — przy `bottom: 0` CTA wisiało 28px nad paskiem
     nawigacji i w tej szczelinie prześwitywał przecięty w pół wiersz listy (wyglądało
     jak błąd renderowania). Offset domyka szczelinę; liczba jest TYM SAMYM 28px co
     w paddingu `.quiz-panel` (:2298) — zmieniasz tam, zmień i tu. */
  bottom: -28px;
  width: 100%; margin-top: 20px;
  padding: 34px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 58%, rgba(250, 249, 246, .85) 78%, transparent);
}
.lo-cta {
  width: 100%; padding: 15px 22px;
  border: none; border-radius: var(--radius-input);
  background: var(--ink); color: var(--pearl);
  font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-float);
  transition: transform .25s var(--ease-spring), background .15s, opacity .15s;
}
.lo-cta:hover:not(:disabled) { background: #333; transform: translateY(-2px); }
.lo-cta:active:not(:disabled) { transform: scale(.98); }
.lo-cta:disabled { opacity: .55; cursor: default; }

/* Ekran startowy krótkiej ścieżki używa .wizard-intro__cta (Kreator), który nie ma
   stanu disabled — dokładamy go tu, żeby przycisk „Przygotowuję…" nie wyglądał jak aktywny. */
.lo-panel .wizard-intro__cta:disabled { opacity: .55; cursor: default; transform: none; }

@media (max-width: 380px) {
  /* `.lo-piece` jest flexem od #105/#106 — dawne `grid-template-columns` było tu
     martwe. Na wąskim ekranie kolaż dostaje jeszcze mniej wysokości, żeby lista
     i CTA mieściły się bez scrollowania „w ciemno". */
  .lo-piece { gap: 10px; padding: 7px 8px; }
  .lo-piece__media { width: 48px; height: 48px; }
  .lo-collage { width: min(100%, 40vh); }
  .lo-step__title, .lo-result__title { font-size: 1.4375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lo-step, .lo-progress__fill, .lo-skeleton__card { animation: none; transition: none; }
}

/* ============================================================================
   Iteracja 10 (G3) — „Twój styl na okazje" w Mój styl. Kafelki okazji: ukończone
   pokazują archetyp + paletę i przełączają kartę DNA, nieukończone startują
   krótką ankietę dla tej okazji.
   ============================================================================ */
.style-occasions { width: 100%; margin: 18px 0 4px; }
.style-occasions__label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--smoke); margin: 0 0 4px;
}
.style-occasions__hint { font-size: 0.78125rem; line-height: 1.5; color: var(--smoke); margin: 0 0 12px; }
.style-occasions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.occ-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 14px; min-height: 84px;
  border: 1px solid var(--mist); border-radius: var(--radius-bubble);
  background: var(--pearl); cursor: pointer; text-align: left;
  transition: border-color .18s, transform .12s var(--ease-spring), box-shadow .18s;
}
.occ-tile:hover { border-color: var(--champagne-deep); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.occ-tile__name { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.occ-tile__archetype { font-size: 0.75rem; color: var(--champagne-deep); font-weight: 500; }
.occ-tile__palette { display: flex; gap: 4px; margin-top: auto; }
.occ-tile__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(10,10,10,.10); }
.occ-tile--active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.occ-tile--todo { background: var(--cloud); border-style: dashed; }
.occ-tile--todo .occ-tile__name { color: var(--smoke); }
.occ-tile__add { font-size: 0.75rem; color: var(--champagne-deep); font-weight: 600; margin-top: auto; }
.dna-card-mini__occasion {
  display: inline-block; margin-bottom: 8px;
  font-size: 0.65625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--champagne-deep);
}

@media (min-width: 1024px) {

  :root {
    --w-sidebar: 236px;                 /* lewy sidebar (eks-bottom-nav) */
    --w-content: 1160px;                /* cap szerokich paneli: wall, szafa */
    --h-nav:     0px;                   /* neutralizuje calc() z dolną nawigacją (patrz uwaga wyżej) */

    /* Zgłoszenie #143 (kontynuacja #134) — JEDEN wzór centrowania dla WSZYSTKICH
       paneli (Ściana, Looki, Wishlist, Stylistka, Pracownia, Kreator, DNA, Klonuj
       Styl). Do tej pory Stylistka/Kreator/DNA/Klonuj Styl miały WŁASNY, węższy
       --pad-chat/--w-chat (760px), a Pracownia trzeci, literalny system (980px,
       wyśrodkowany flexem) — trzy różne lewe krawędzie na tym samym ekranie
       ("Odkrywaj szersze od Pracowni", zgłoszenie testera). Panele, którym z
       przyczyn typograficznych zależy na węższej kolumnie (proza czatu, Kreator),
       dostają WŁASNY wewnętrzny cap (np. `.message-content{max-width:1100px}`,
       `.message--assistant{max-width:min(92%,640px)}`) wewnątrz TEJ SAMEJ ramki,
       zamiast własnej, niedopasowanej ramki zewnętrznej. */
    --pad-content: max(32px, calc((100vw - var(--w-sidebar) - var(--w-content)) / 2));
  }

  /* ============================================================
     Shell: content area na prawo od sidebara — koniec "telefonu
     na środku ekranu".
     ============================================================ */
  .app {
    max-width: none;
    margin: 0 0 0 var(--w-sidebar);
    box-shadow: none;
  }

  /* ============================================================
     Paski fixed — przypięte do content area (left: var(--w-sidebar));
     right:0 + margin:0 auto dziedziczone z reguły bazowej style.css.
     ============================================================ */
  .header,
  .input-area,
  .wall-topbar {
    left: var(--w-sidebar);
  }

  .header {
    max-width: none;                    /* szkło na całą szerokość content area */
    padding: 8px var(--pad-content);    /* treść headera licuje ze WSZYSTKIMI panelami (#143) */
  }

  .wall-topbar {
    max-width: none;
    padding-left: var(--pad-content);
    padding-right: var(--pad-content);
  }

  /* Na szerokim ekranie oba raile mieszczą się w jednej linii — scalamy je
     zamiast trzymać dwa piętra chrome, które mobile potrzebuje, a desktop nie. */
  .wall-rail-stack__inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .wall-rail-stack__inner .wall-rail {
    flex: 0 0 auto;
  }

  .wall-rail--filters {
    flex: 1 1 auto;
    min-width: 0;
  }

  .wall-rail--filters::before {
    content: "";
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    background: var(--mist);
    margin-right: 2px;
  }

  .input-area {                         /* composer: skala ręki, nie belka na całą (szeroką) ramkę */
    max-width: 760px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -1px 0 var(--mist), 1px 0 0 var(--mist), -1px 0 0 var(--mist);
    /* bottom: var(--h-nav) → 0 automatycznie (baza style.css); glass bez zmian */
  }

  /* ============================================================
     Sidebar: czysto CSS-owa transformacja istniejącego .bottom-nav —
     te same węzły DOM, te same bindingi Alpine (switchTab(),
     :class="{ 'nav-item--active': ... }").
     ============================================================ */
  .bottom-nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--w-sidebar);
    max-width: none;
    height: auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px 14px 20px;
    background: var(--glass-bg);
    box-shadow: var(--glass-edge), 1px 0 0 var(--mist), 10px 0 30px -24px rgba(10,10,10,.35);
  }

  .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    transition: color .2s, background .2s;
  }

  .nav-item:hover {
    color: var(--ink);
    background: rgba(10,10,10,.045);
  }

  .nav-item--active {
    color: var(--champagne-deep);
    background: var(--champagne-soft);
  }

  .nav-item--active .nav-item__icon {
    transform: none;
    background: transparent;
  }

  .nav-item::after {
    display: none;                      /* kropka-wskaźnik: mobile-only */
  }

  .nav-item__icon {
    width: 26px;
    height: 26px;
    border-radius: 0;
  }

  .nav-item__label {
    font-size: 0.84375rem;
    letter-spacing: .02em;
  }
  /* .nav-badge pozycjonowany absolute względem .nav-item__icon — działa
     bez zmian w układzie wierszowym */

  /* ============================================================
     Czat: ta sama ramka --pad-content co reszta paneli (#143); kolumna
     czytelnicza prozy zostaje węższa WEWNĄTRZ niej (.message--assistant,
     .message-content — patrz ich własne max-width).
     (padding top/bottom dziedziczone z bazy style.css — adaptują się
     same, bo zależą od --h-input [inline JS] i --h-nav [wyzerowany wyżej])
     ============================================================ */
  .chat {
    padding-left: var(--pad-content);
    padding-right: var(--pad-content);
    /* Rec 4: bez tego kolumna czatu przeskakiwała w bok o szerokość scrollbara
       w momencie, gdy rozmowa zaczynała przekraczać wysokość ekranu. */
    scrollbar-gutter: stable;
  }

  /* Poza top 5 — desktop dawniej dostawał tylko szerokość kolumny (--w-chat:760px),
     ale wnętrze zostawało przeskalowane pod telefon: procentowe max-width bąbelków
     rozciągało krótką odpowiedź usera na ~600px, kafle karuzeli zostawały 187px
     (cztery podskalowane w czytelniczej kolumnie), a nagłówek/lead nie rosły w górę. */
  .message {
    max-width: min(80%, 480px);
  }
  .message--assistant {
    max-width: min(92%, 640px);
  }
  .chat-hero__greeting {
    font-size: 2.25rem;
  }
  .message--assistant .message-content > p:first-of-type:not(:only-of-type) {
    font-size: 1.25rem;
  }
  .product-card {
    width: 220px;
  }

  /* Zgłoszenie #134 — karuzela pozioma to idiom telefonu: na szerokim ekranie jest
     miejsce na siatkę, więc pokazujemy wszystko naraz zamiast chować za scrollem.
     Dotyczy zarówno karuzeli czatu, jak i wyników Klonuj Styl (ten sam .product-cards). */
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .carousel-track::after,
  .carousel-nav {
    display: none;                      /* fade + strzałki/kropki: bez sensu bez scrolla */
  }
  .chat-look__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    overflow-x: visible;
  }

  /* Zgłoszenie #146 — 2-3 komplety ALTERNATYWNE (tura look) stały w kolumnie
     nawet na szerokim ekranie, mimo że siostrzane bloki wyników (`.product-cards`,
     `.chat-look__row` wyżej) już dostają siatkę w tym samym miejscu. Ten sam wzorzec:
     `auto-fill`+`minmax` zamiast sztywnej liczby kolumn — 2 komplety wypełniają rząd,
     3 też, bez pustych przerw. Mieści się w istniejącym suficie prozy/bąbelka
     (`.message--assistant{max-width:min(92%,640px)}` wyżej) — bez tego 2-panelowy
     układ z #134/#143 (usunięty, patrz historia w komentarzu przy starym
     `@media (min-width:1280px)`) był jedynym sposobem odzyskać miejsce, kosztem
     wąskiej 400px kolumny i kolizji z `.canvas-rail`. */
  .chat-looks {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .chat-look {
    flex: 1 1 220px;
    min-width: 220px;
  }

  /* Zgłoszenie #132 — na desktopie 120px to znaczek, na którym strzałki nawigacji
     są ledwo klikalne (dokładnie ten zrzut testera: 1536px). Reguła bazowa 120px
     (style.css, sekcja .sheet-gallery) zostaje nietknięta dla mobile. */
  .sheet__img,
  .sheet-gallery {
    width: 200px;
  }

  /* ============================================================
     Discovery Wall: 3–5 kolumn zamiast sztywnych 2, cap 1160px.
     ============================================================ */
  .wall-grid {
    /* 205px (nie 220px) — na dokładnie 1024px daje 3 kolumny zamiast 2
       (694px dostępnej treści / 220px+gap nie mieściło 3. kolumny o 2px) */
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 22px 18px;
    padding: 24px var(--pad-content) 16px;
  }

  .wall-panel {
    scrollbar-gutter: stable both-edges;   /* symetria scrollbara vs. pasek fixed */
  }

  /* ============================================================
     Pozostałe panele: cap do czytelnej szerokości.
     ============================================================ */
  .wishlist-panel {
    padding-left: var(--pad-content);
    padding-right: var(--pad-content);
  }

  .wardrobe-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .clone-panel,
  .quiz-panel,
  .dna-panel {
    padding-left: var(--pad-content);
    padding-right: var(--pad-content);
  }

  /* ============================================================
     Outfit Canvas ("Twój Look"): Zgłoszenie #143 — do tej pory ramka
     kanwy używała --w-chat (760px), WĄŻSZEJ i wyśrodkowanej NIEZALEŻNIE
     od reszty ramki czatu (--pad-content, teraz 980-1440px) — .canvas-rail
     (right:20px w środku) lądował gdzieś w POŁOWIE szerokiego czatu,
     prosto na kartach wyników (#134 dwupanelowa Stylistka). Teraz TA SAMA
     ramka --pad-content/--w-content co .chat — rail konsekwentnie ląduje
     na PRAWDZIWEJ prawej krawędzi całej ramki, tam gdzie nic już nie stoi.
     Dawna dodatkowa rezerwacja `.chat--canvas-active .message-results{margin-
     right:72px}` (belt-and-suspenders dla 2-panelowego układu #134) usunięta
     przy #146 razem z tym układem — ta ramka jest jedynym mechanizmem. */
  .outfit-canvas {
    left: var(--w-sidebar);
    max-width: var(--w-content);
  }

  .canvas-panel {
    max-width: 380px;
  }
  /* .canvas-rail bottom: calc(--h-input + --h-nav + 12px) adaptuje się
     samo przez --h-nav:0 zdefiniowany wyżej */

  /* ============================================================
     Overlaye pełnoekranowe: panele centrowane nad content area,
     nie nad całym viewportem (inaczej byłyby przesunięte względem
     treści o połowę szerokości sidebara).
     ============================================================ */
  .sheet-overlay,
  .surprise-overlay,
  .archetype-overlay,
  .zoom-overlay,
  .look-viewer {
    padding-left: var(--w-sidebar);
  }

  .zoom-content {
    max-width: min(920px, calc(100vw - var(--w-sidebar) - 64px));
  }

  /* Reguły desktopowe dla siatki looków i podglądu mieszkają w sekcji LOOKI na
     końcu pliku — muszą stać PO deklaracjach bazowych, inaczej późniejsza reguła
     bez media query wygrywa kaskadą mimo węższego zakresu. */

}

/* ============================================================
   Zgłoszenie #146 (2026-08-25) — COFNIĘCIE 2-panelowego układu z #134/#143.
   Do tej pory od 1280px czat dzielił się na kolumnę prozy i przypięty
   (sticky) prawy panel wyników szerokości 400px — tester: wyniki mają stać
   POD prozą, w jednym rzędzie, nie w wąskiej bocznej szufladzie. Usunięty
   grid na `.message-content`; `.message-results` wraca do `display:contents`
   z reguły bazowej (style.css) na KAŻDEJ szerokości. `.message--assistant`
   dziedziczy z powrotem sufit `min(92%, 640px)` (blok ≥1024px wyżej) —
   IDENTYCZNIE jak 1024-1279px już działało (ten zakres nigdy nie miał
   2-panelowego trybu i nie zgłaszano tam kolizji z `.canvas-rail`), więc
   rezerwacja `margin-right:72px` na `.chat--canvas-active .message-results`
   też odpada — była potrzebna WYŁĄCZNIE dla wąskiej 400px kolumny, której
   już nie ma. `.chat-looks` (rząd 2-3 kompletów) dostaje własną siatkę w
   bloku ≥1024px wyżej (patrz komentarz przy `.chat-look__row`), więc mieści
   się w tym samym 640px suficie bez dodatkowej szerokości. `.input-area`
   nie potrzebuje już duplikatu `max-width:760px` — ten sam wpis jest już
   w bloku ≥1024px wyżej. */

@media (min-width: 1600px) {
  :root {
    --w-content: 1440px;  /* było 1160px — Wall dostaje 6. kolumnę zamiast pustego pasa */
  }
}


/* ============================================================
   LOOKI — feed, podgląd, wspólne prymitywy

   Zdjęcie kampanijne (data/looks/web/*.webp, natywnie 380px) jest bohaterem
   karty; rozbicie na produkty to druga warstwa. Wcześniej było odwrotnie:
   karta pokazywała kolaż czterech miniatur produktów, a samo zdjęcie tylko
   jako 64px kciuk „Inspiracja" na dole podglądu.
   ============================================================ */

.looks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px var(--gutter);  /* Zgłoszenie #143 — było 16px literalne po bokach */
}

/* Górna granica celowa: powyżej 1024px obowiązuje reguła 3-kolumnowa z bloku
   sidebara (wcześniej w pliku), a bez `max-width` ta deklaracja by ją nadpisała
   samą kolejnością w kaskadzie. */
@media (min-width: 640px) and (max-width: 1023px) {
  .looks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@keyframes look-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Wspólny kafelek produktu w zestawie ──────────────────────────────────
   Jedno źródło prawdy dla wstawki CTL na Wallu i podglądu looka. Zastępuje
   trzy osobne implementacje (.wall-outfit-ctl__card, .look-outfit-card__tile,
   .look-viewer__outfit-card) i znosi potrzebę nadpisań !important, które
   istniały tylko po to, żeby rozdzielić kolidujące reguły współdzielone
   z .wall-capsule__card / .wall-sponsored__card. */
.look-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  /* Zgłoszenie #142 — kotwiczy .product-card__size-badge (absolute) reużyty w
     szufladzie wymiany czatu (chatSwap), patrz index.html. */
  position: relative;
}

.look-tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cloud);
  font-size: 0;   /* patrz .look-card__thumb — alt zepsutego obrazka nie rozpycha kafelka */
  transition: transform .2s var(--ease-lux);
}

.look-tile:hover img { transform: scale(1.03); }
.look-tile:active img { transform: scale(.97); }

.look-tile__slot {
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-tile__brand,
.look-tile__price {
  color: var(--smoke);
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-tile__price {
  color: var(--champagne-deep);
  font-weight: 700;
}

.look-tile:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ── Karta looka ─────────────────────────────────────────────────────────── */
.look-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 14px;
  overflow: hidden;
  touch-action: pan-y;
  animation: look-in .4s var(--ease-lux) both;
}

.look-card--swiping {
  transition: none;
  z-index: 3;
}

.look-card__hero {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.look-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--cloud);
  font-size: 0;   /* patrz .look-card__thumb */
}

.look-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(250, 249, 246, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Scrim niesie czytelność tekstu na dowolnym zdjęciu — dlatego gradient,
   nie płaska płachta: górna krawędź nie może ciąć kadru linią. */
.look-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 12px 11px;
  background: linear-gradient(to top, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .45) 45%, transparent 100%);
  text-align: left;
}

.look-card__name {
  color: var(--pearl);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-card__tags {
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-card__hero:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: -3px;
}

.look-card__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-top: 1px solid var(--mist);
}

/* Kolejność kurczenia jest celowa: miniatury (podgląd dekoracyjny) ustępują
   PIERWSZE, cena i liczba marek — nigdy. Gdy meta siedziała w tym samym
   overflow:hidden co miniatury, obcinało ją do „1342.98 zł · 4 m…". */
.look-card__strip {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 0 1 auto;
  cursor: pointer;
  overflow: hidden;
}

/* Jawna wysokość zamiast aspect-ratio: przy ZEPSUTYM obrazku (naturalne 0×0)
   przeglądarka układa zamiast niego tekst `alt`, a wtedy aspect-ratio przestaje
   rządzić — długa nazwa produktu zawijała się w 26px szerokości i rozpychała
   pasek z 35px do 96px, łamiąc rytm siatki. font-size:0 dobija sprawę: alt nie
   uczestniczy w layoucie (dla czytników ekranu atrybut zostaje nietknięty). */
.look-card__thumb {
  flex: 0 0 auto;
  width: 26px;
  height: 35px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--cloud);
  font-size: 0;
}

.look-card__meta {
  flex: 1 0 auto;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.look-card__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* 44×44 — dawne 38px było poniżej progu celu dotykowego. */
.look-card__act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mist);
  background: var(--pearl);
  color: var(--smoke);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .15s;
}

.look-card__act:hover {
  color: var(--ink);
  border-color: var(--champagne);
}

.look-card__act:active { transform: scale(.92); }

.look-card__act--like:hover,
.look-card__act--on {
  color: #C2413B;
  background: rgba(194, 65, 59, .09);
  border-color: rgba(194, 65, 59, .35);
}

.look-card__act:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* ── Stany feedu ─────────────────────────────────────────────────────────── */
.looks-notice {
  grid-column: 1 / -1;
  padding: 9px 12px;
  background: var(--champagne-soft);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
}

.look-skeleton {
  border: 1px solid var(--mist);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pearl);
}

/* Skeleton odwzorowuje realny kształt karty (zdjęcie 3/4 + pasek), więc pierwsze
   malowanie nie przeskakuje — wcześniej skeleton był samym prostokątem 3/4,
   a karta niskim blokiem z kafelkami. */
.look-skeleton::before {
  content: "";
  display: block;
  aspect-ratio: 3 / 4;
  background: linear-gradient(100deg, var(--cloud) 30%, var(--paper) 50%, var(--cloud) 70%);
  background-size: 220% 100%;
  animation: look-skeleton-pulse 1.4s ease-in-out infinite;
}

.look-skeleton::after {
  content: "";
  display: block;
  height: 62px;
  border-top: 1px solid var(--mist);
  background: var(--pearl);
}

@keyframes look-skeleton-pulse {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

.looks-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
}

.looks-state__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
}

.looks-state__desc {
  max-width: 34ch;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.looks-state__cta {
  margin-top: 10px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.looks-state__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--pearl);
}

.looks-state__cta:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.looks-state--error .looks-state__title { color: #9B2C22; }

.looks-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
}

.looks-end {
  grid-column: 1 / -1;
  padding: 22px 16px 6px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  text-align: center;
}

/* ── Podgląd pełnoekranowy ───────────────────────────────────────────────── */
body.look-viewer-lock { overflow: hidden; }

.look-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.look-viewer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100%;
  padding: 14px;
  gap: 12px;
}

.look-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.look-viewer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: var(--pearl);
  cursor: pointer;
  transition: background .2s;
}

.look-viewer__icon:hover { background: rgba(255, 255, 255, .22); }

.look-viewer__counter {
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.look-viewer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.look-viewer__photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.look-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: var(--pearl);
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

.look-viewer__nav--prev { left: 0; }
.look-viewer__nav--next { right: 0; }
.look-viewer__nav:hover { background: rgba(255, 255, 255, .26); }

.look-viewer__nav:disabled {
  opacity: .25;
  cursor: default;
}

.look-viewer__panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.look-viewer__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.look-viewer__name {
  color: var(--pearl);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
}

.look-viewer__tags {
  color: rgba(255, 255, 255, .68);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: .02em;
}

.look-viewer__loading {
  color: rgba(255, 255, 255, .68);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
}

.look-viewer__outfit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, .07);
  border-radius: 12px;
}

.look-viewer__outfit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.look-viewer__outfit-head span:last-child {
  color: var(--champagne);
  letter-spacing: .01em;
  text-transform: none;
}

/* auto-fit zamiast sztywnych 2 kolumn: zestaw ma 2–5 elementów zależnie od
   roli kotwicy, a repeat(2,1fr) zostawiał 5. element samotny w trzecim rzędzie. */
.look-viewer__outfit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}

.look-viewer__outfit .look-tile__slot { color: rgba(255, 255, 255, .92); }
.look-viewer__outfit .look-tile__price { color: var(--champagne); }

/* R2/R4 (2026-08-18) — "Kup ten look" + odznaka "Masz". Zawężone selektorem
   .look-viewer__outfit-row, bo .look-tile żyje też na Ścianie/w feedzie looków —
   position:relative tu nie może wyciec globalnie. */
.look-viewer__outfit-row .look-tile { position: relative; }

.look-tile--owned { opacity: .62; }

.look-tile__owned-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* R3 (2026-08-18) — slot poza zadeklarowanym rozmiarem. `.look-tile-wrap` niesie
   position:relative zamiast `.look-tile` bezpośrednio (jak `.look-tile--owned`),
   bo znacznik jest tu KLIKALNYM przyciskiem otwierającym arkusz podmiany, nie
   samym `.look-tile` (który już ma własny @click na otwarcie produktu). */
.look-tile-wrap { position: relative; width: 100%; }

.look-tile__swap-badge {
  position: absolute;
  bottom: 24px;
  left: 4px;
  right: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: rgba(212, 116, 44, .92);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background .15s var(--ease-lux);
}

.look-tile__swap-badge:hover { background: rgba(212, 116, 44, 1); }

.look-tile__swap-badge:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

/* Walled Garden per-user, Etap 4 — slot dopełniony ostatnim szczeblem drabiny
   relaksacji (marka jest w galerii, model dziś niedostępny). Top-right, żeby nie
   kolidować z .look-tile__owned-badge (top-left) ani .look-tile__swap-badge (dół).
   Ten sam wzorzec kolorystyczny co .wall-card__gallery-badge (Etap 3, Ściana). */
.look-tile__gallery-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  background: rgba(250, 249, 246, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.look-viewer__buy {
  min-height: 44px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--champagne);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease-lux), transform .15s var(--ease-lux), opacity .18s var(--ease-lux);
}

.look-viewer__buy:active:not(:disabled) { transform: scale(.98); }

.look-viewer__buy:disabled {
  opacity: .45;
  cursor: default;
}

.look-viewer__buy--done {
  background: rgba(255, 255, 255, .16);
  color: var(--pearl);
}

.look-viewer__buy:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

/* R5 (2026-08-18) — CTA drugorzędny względem „Kup ten look" (obrys, nie wypełnienie):
   kupno jest głównym CTA looka, personalizacja to alternatywna ścieżka. */
.look-viewer__customize {
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  background: transparent;
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease-lux), border-color .18s var(--ease-lux);
}

.look-viewer__customize:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.look-viewer__customize:active { transform: scale(.98); }

.look-viewer__customize:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

/* W1, drugorzędne miejsce (2.3, 2026-08-18) — nudge "Kupione?" po udanym "Kup ten look".
   Zostaje widoczny do jawnego działania (potwierdź/odrzuć), nie znika sam — 2.5s nie
   starczało nawet na przeczytanie, a to najwyższy moment intencji zakupowej w apce. */
.look-viewer__bought-nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
}

.look-viewer__bought-nudge-btn {
  margin-left: auto;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--champagne);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.look-viewer__bought-nudge-dismiss {
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 0.8125rem;
  cursor: pointer;
}

.look-viewer__bought-nudge-btn:focus-visible,
.look-viewer__bought-nudge-dismiss:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

.look-viewer__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 4px;
}

.look-viewer__act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: var(--pearl);
  cursor: pointer;
  transition: background .2s, transform .15s, border-color .2s;
}

.look-viewer__act:active { transform: scale(.92); }
.look-viewer__act--nope:hover { background: rgba(255, 255, 255, .2); }

.look-viewer__act--like {
  color: #FF6B63;
  border-color: rgba(255, 107, 99, .5);
}

.look-viewer__act--like:hover { background: rgba(255, 107, 99, .18); }

.look-viewer__icon:focus-visible,
.look-viewer__nav:focus-visible,
.look-viewer__act:focus-visible {
  outline: 3px solid var(--champagne);
  outline-offset: 2px;
}

/* ── Rail ulubionych looków (Mój styl) ───────────────────────────────────── */
.liked-looks-rail {
  padding: 24px 16px;
  border-top: 1px solid var(--mist);
}

.liked-looks-rail__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
}

.liked-looks-rail__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.liked-looks-rail__item {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.liked-looks-rail__item:active { transform: scale(0.95); }

.liked-looks-rail__item:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.liked-looks-rail__thumb {
  display: block;
  width: 90px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  object-fit: cover;
  background: var(--cloud);
}

/* ── Desktop ─────────────────────────────────────────────────────────────
   Celowo na końcu sekcji, PO regułach bazowych: reguła bez media query
   postawiona później w pliku wygrywa kaskadą z wcześniejszym @media o tej
   samej specyficzności, więc override musi iść po niej, nie przed. */
@media (min-width: 1024px) {
  /* 3 kolumny to wybór z ograniczenia materiału: zdjęcia kampanijne mają
     natywnie 380px, a przy --w-content:1160px trzy kolumny dają ~373px na
     kartę — 1:1 bez skalowania w górę (dwie rozciągałyby je ~1,5×). */
  .looks-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 16px;
    padding: 24px var(--pad-content) 16px;
  }

  /* Podgląd dwukolumnowy: zdjęcie po lewej, zestaw i akcje po prawej. Dotąd na
     1440px był wąską kolumną 500px centrowaną względem CAŁEGO viewportu, więc
     wchodził pod sidebar. */
  .look-viewer__inner {
    flex-direction: row;
    align-items: stretch;
    max-width: min(1100px, calc(100vw - var(--w-sidebar) - 80px));
    height: min(88vh, 820px);
    gap: 28px;
    padding: 28px;
  }

  .look-viewer__stage { flex: 1 1 58%; min-height: 0; }

  .look-viewer__panel {
    flex: 0 0 320px;
    overflow-y: auto;
    justify-content: center;
  }

  .look-viewer__bar {
    position: absolute;
    top: 18px;
    left: 28px;
    right: 28px;
    z-index: 2;
  }

  .look-viewer__outfit-row {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }
}

/* ── Look Builder — rack slotów (sub-project 1, 2026-08-14) ────────────────
   Overlay strukturalnie jak .look-viewer (fixed, inset:0, ciemne tło) — ten
   sam wzorzec "pełnoekranowe zadanie", nie nowy język wizualny. */
/* Pracownia jest DESTYNACJĄ (2026-08-16), nie modalem — te same ramy co .wall-panel,
   żeby nie wisiała nad interfejsem z własnym backdropem. Wcześniej `position:fixed`
   + backdrop działały tylko dlatego, że panel żył wewnątrz .wall-panel; po wyjęciu
   go na najwyższy poziom (naprawa niewidoczności) modal-owy kostium przestał mieć
   sens — user wchodzi tu z nawigacji, a nie „nad" czymś. */
.look-builder {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--h-header) + 6px);
  bottom: calc(var(--h-nav) + 16px);
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Pełnoszerokie, bez wyglądu pływającej karty (Zgłoszenie #78, 2026-08-17) — do tej
   pory nadal miało max-width/margin/border-radius/box-shadow z czasów, gdy Pracownia
   była modalem. Komentarz przy .look-builder deklarował "destynacja, nie modal", ale
   ten blok nie został doprowadzony do końca — na 360px viewport wyglądało dokładnie
   jak zagnieżdżona karta, nie jak zakładka. */
.look-builder__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  background: var(--pearl);
  /* TO JEST scroll-container całego modułu (2026-08-17, druga tura zgłoszenia #78).
     Wcześniej stało tu `overflow: hidden`, a przewijanie miał rzekomo brać
     `.look-builder__rack` przez `flex:1 1 auto; min-height:0` — tyle że rack NIE jest
     dzieckiem tego flexa (siedzi w bezklasowym `<div x-show="view === 'build'">`),
     więc obie te deklaracje były martwe, a wszystko poniżej wysokości panelu było
     bezpowrotnie ucinane. Ten sam wzorzec co `.wall-panel` (:5279): panel przewija
     się sam, bez wewnętrznych, konkurujących obszarów scrolla. */
  overflow-y: auto;
}

/* Belka modułu — ten sam przepis szkła co `.header` (:128) i `.wall-topbar` (:5285).
   Sticky, bo `.look-builder__inner` jest kontenerem scrolla: przy przewijaniu racka
   „Buduj / Moje looki" i wyjście muszą zostać pod ręką. */
.look-builder__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);  /* Zgłoszenie #143 — było 16px literalne */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge), 0 1px 0 var(--mist);
}

.look-builder__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Strzałka powrotu to pożyczony `.look-viewer__icon` — na ciemnym tle podglądu looka
   dziedziczy jasny kolor, więc na szklanym pasku Pracowni była ledwie widoczna. */
.look-builder__bar .look-viewer__icon {
  flex: 0 0 auto;
  color: var(--ink);
  background: transparent;
  transition: color .2s var(--ease-lux), transform .15s var(--ease-lux);
}

.look-builder__bar .look-viewer__icon:active { transform: scale(.94); }

/* Zgłoszenie #97 — dawny <select>+<input> zastąpione jednym przyciskiem otwierającym
   arkusz filtrów (`.filter-sheet`, wspólny z Odkrywaj); kontener zostaje jako wcięcie. */
.look-builder__constraints {
  display: flex;
  padding: 12px var(--gutter);  /* Zgłoszenie #143 — było 16px literalne */
}

/* Błąd nazywa problem — więc ma wyglądać jak komunikat, nie jak zgubiona linijka
   tekstu. Kolor z tokenów (`--nope`), nie hardkodowany #9B2C22 jak do 2026-08-17. */
.look-builder__error {
  margin: 0 var(--gutter) 8px;  /* Zgłoszenie #143 — było 16px literalne */
  padding: 10px 12px;
  border: 1px solid rgba(192, 71, 63, .28);
  border-radius: 10px;
  background: var(--nope-bg);
  /* Tekst na `--ink` (17.1:1), nie `--nope` — ten na `--nope-bg` daje 4.30:1, tuż
     pod progiem. Że to błąd, niosą tło i obrys, nie sama barwa liter. */
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 500;
}

/* Rack = SIATKA KAFLI (2026-08-16). Wcześniej lista wierszy z miniaturą 44px, przez
   co „studio kompletowania looków" czytało się jak spis treści. 2 kolumny na mobile,
   4 na szerokich ekranach (patrz blok desktopowy na końcu sekcji Pracowni) — cały
   look w jednym rzędzie, jak na wieszaku. */
/* ── JEDNA POWIERZCHNIA = JEDEN LOOK (2026-08-17) ──────────────────────────────
   Rack był siatką czterech osobnych kart z własnymi obrysami i cieniami, czyli
   dokładnie tym samym wzorcem co siatka produktów na Ścianie. Moduł obiecuje
   „całą stylizację", a układ pokazywał cztery niepowiązane rzeczy. Teraz sloty
   dzielą jedną kartę i są rozdzielone włoskową linią — czyta się jak strona
   lookbooka, nie jak wyniki wyszukiwania. */
.look-builder__look {
  margin: 0 var(--gutter) 12px;  /* Zgłoszenie #143 — było 16px literalne */
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Tożsamość looka NA GÓRZE: suma i galeria to jest to, po co user tu przyszedł,
   a leżały w stopce pod zagięciem. */
.look-builder__look-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 14px var(--gutter);  /* Zgłoszenie #143 — było 16px literalne */
  background: var(--cloud);
  border-bottom: 1px solid var(--mist);
}

.look-builder__look-total {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.look-builder__look-context {
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
}

/* ── PLANSZA REDAKCYJNA (2.6, 2026-08-19) ──────────────────────────────────────
   Zastąpiła figurę+markery z 2.5: croquis 152px niósł ubranie 46px (~6x mniejsze
   niż to samo zdjęcie w racku obok) i sylwetka w --mist na --pearl miała kontrast
   ~1,15:1 — praktycznie niewidoczna. Zdjęcia w katalogu to fotografie modelek na
   studyjnym tle (LPP `/media/catalog/product/…`), nie wycinki PNG z przezroczystością
   — „ubieranie" rysowanej sylwetki było z założenia sprzeczne z materiałem (ten sam
   wniosek co karta looka: kolaż czterech miniatur zastąpiło jedno zdjęcie, :9627).
   Plansza komponuje zdjęcia w dużej skali, w porządku ciała, jak rozkładówka
   lookbooka — asymetrycznie, ze stałą (deterministyczną) rotacją per strefa. */
/* MOBILE: plansza NAD paskiem faktów. Dwie kolumny wracają dopiero od 640px. */
.look-builder__canvas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 14px 4px;
  align-items: start;
}

/* Owija planszę + podpowiedź gestu w JEDNO dziecko grida `.look-builder__canvas`
   (2 kolumny na desktopie) — patrz komentarz w index.html. */
.look-builder__board-col {
  min-width: 0;
}

.look-board {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  background: linear-gradient(175deg, var(--cloud), var(--paper) 55%);
  border: 1px solid var(--mist);
  overflow: hidden;
}

/* Linia „podłogi" — daje kompozycji bazę bez udawania ciała (croquis usunięte
   razem z figurą). Wygaszana ku krawędziom, żeby nie czytała się jak twarda linijka. */
.look-board__ground {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne-soft) 18%,
              var(--champagne-soft) 82%, transparent);
}

/* `left`/`top`/`width`/`transform` (rotate+scale) i `z-index` przychodzą inline z
   `lookBoardItemStyle()` (JS liczy % z układu kompozycji `LOOK_BOARD_LAYOUT` albo
   zapisanej pozycji strefy) — tu wyłącznie wygląd i gest. Kafel = oprawione zdjęcie
   (mata `--pearl`, zdjęcie z własnym, mniejszym promieniem) — język Atelier, odbitka
   przypięta do planszy, nie naklejka na manekinie. `touch-action: none` WYŁĄCZNIE
   tutaj (nie globalnie na planszy/panelu) — przeciąganie nie może przewijać
   `.look-builder__inner` (:10293), który scrolluje resztę Pracowni. */
.look-board__tile {
  position: absolute;
  aspect-ratio: 3 / 4;
  touch-action: none;
  cursor: grab;
  padding: 5px;
  border-radius: 10px;
  background: var(--pearl);
  box-shadow: 0 1px 2px rgba(10, 10, 10, .06), 0 8px 20px rgba(10, 10, 10, .14);
  transition: box-shadow .15s var(--ease-lux);
}

.look-board__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `object-position` przychodzi inline z `lookBoardObjectPosition()` — kadr zależny
     od strefy: cztery zdjęcia CAŁYCH modelek obok siebie czytają się jak wyniki
     wyszukiwania, więc każdy kafel pokazuje partię ciała, do której należy. */
  border-radius: 6px;
  pointer-events: none;   /* gest łapie kontener, nie <img> (drag natywny obrazka) */
}

.look-board__photo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--smoke);
  pointer-events: none;
}

.look-board__tile--dragging {
  cursor: grabbing;
  box-shadow: 0 2px 4px rgba(10, 10, 10, .10), 0 14px 30px rgba(10, 10, 10, .24);
  z-index: 30 !important;
}

/* #149/#153 — strefa dodatkowa dziedziczy PEŁNY gest z `.look-board__tile` bazowego
   (`cursor:grab`/`touch-action:none`) od 2026-08-26: #149 nadpisywało je na zwykły tap
   ("v1 bez przeciągania/skalowania"), co razem z brakiem handlerów w markupie dawało
   zgłoszenie #153 ("nie można przenosić, nie można zmienić rozmiaru"). Obrys champagne
   zostaje jako jedyny wizualny sygnał "dołożone" (ten sam token co #94 ghost-tile). */
.look-board__tile--extra {
  border: 1.5px solid var(--champagne-deep);
}

/* Kafel-duch — strefa do obsadzenia, widoczna jako LUKA w kompozycji zamiast pigułki
   obok (markery z 2.5 usunięte: dublowały informację, którą teraz niesie sama luka). */
.look-board__tile--ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  background: transparent;
  border: 1.5px dashed var(--champagne);
  box-shadow: none;
}

.look-board__ghost-plus {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--champagne-deep);
}

.look-board__ghost-label {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--smoke);
}

@media (hover: hover) {
  .look-board__tile--ghost:hover {
    border-color: var(--champagne-deep);
    background: var(--champagne-soft);
  }
}

/* Zgłoszenie #95 — odznaka kategorii w rogu obsadzonego kafla ("czasem wiadomo czego
   dotyczy zdjęcie, czasem nie"). `pointer-events:none`, żeby nie kolidowała z gestem
   przeciągania/tapu (#91) na całym kaflu. */
.look-board__tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(10, 10, 10, .18);
  pointer-events: none;
}

/* Uchwyt skalowania — róg dolny-prawy, WŁASNY pointer (patrz startScaleFigureItem:
   stopPropagation, żeby nie odpalić też przeciągania rodzica tym samym gestem).
   `aria-hidden`/`tabindex="-1"`: plansza jako całość jest już `aria-hidden` (wizualna
   nakładka nad paskiem faktów, który niesie te same akcje dostępnie), więc uchwyt nie
   dokłada drugiej, niedostępnej ścieżki do niczego nowego. */
.look-board__handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--pearl);
  border-radius: 50%;
  background: var(--champagne-deep);
  touch-action: none;
  cursor: nwse-resize;
}

/* Odkrywalność gestu — przeciąganie jest niewidoczne, dopóki się go nie spróbuje.
   Gaśnie na stałe po pierwszym zakończonym geście (lookBoardHintVisible/app.js). */
.look-board__hint {
  margin: 8px 0 0;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  text-align: center;
}

.look-builder__rack {
  /* Bez własnego scrolla i bez `flex`: rodzicem jest bezklasowy `<div x-show>`, nie
     flex-container, więc `flex:1 1 auto; min-height:0; overflow-y:auto` było tu
     martwym kodem udającym, że rack się przewija. Przewijaniem zarządza
     `.look-builder__inner` (:10293). */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;   /* strefy w kolumnie obok figury, w porządku ciała */
  gap: 10px;
  align-content: start;
  transition: opacity .15s var(--ease-lux);
}

/* 2.4 (2026-08-19) — `[aria-busy]` był już wypinany przy przetasowaniu
   (`index.html`), ale bez żadnej reguły na niego rack stał wizualnie nieruchomy przez
   1,3 s (śr., do 5,8 s zmierzone na produkcji): stary outfit + przyciski szarzejące z
   `:disabled` to jedyny sygnał, że coś się dzieje. Pierwsze wejście ma już własny
   szkielet (`.look-builder__cell--skeleton`, `!lookBuilder.draft`) — to pokrywa DRUGIE
   i kolejne kompozycje, gdy draft już istnieje. */
.look-builder__rack[aria-busy="true"] {
  opacity: .5;
  cursor: progress;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .look-builder__rack { transition: none; }
}

/* Kafel = KARTA, w tym samym słowniku co `.product-card` (:1131) i `.look-card` (:9669)
   — do 2026-08-17 był przezroczystą ramką bez tła, cienia, hoveru i przejścia, przez co
   rack czytał się jak arkusz kalkulacyjny, a nie jak wieszak. */
/* Strefa ciała — pozioma karta w kolumnie obok figury (2026-08-17). Pionowy kafel ze
   zdjęciem 3/4 na całą szerokość dawał w jednej kolumnie ~400px na strefę, więc look
   nie mieścił się na żadnym ekranie naraz. */
.look-builder__cell {
  display: flex;
  background: var(--pearl);
  border: 1px solid var(--mist);
  border-radius: 12px;
  overflow: hidden;
  transition: background .2s var(--ease-lux), border-color .2s var(--ease-lux);
}

/* Jedyny autorski moment ruchu w module: look „składa się" po kompozycji.
   Reużywa istniejący keyframe `look-in` (:9594) — bez nowej animacji.
   Opóźnienia dają zauważalne kaskadowanie slotów zamiast jednego mrugnięcia.
   Zakres celowo ograniczony do racka: reszta modułu nie dostaje wejść, żeby ten
   jeden moment pozostał czytelny. */
.look-builder__cell {
  animation: look-in .45s var(--ease-lux) both;
}
.look-builder__rack > .look-builder__cell:nth-child(2) { animation-delay: .06s; }
.look-builder__rack > .look-builder__cell:nth-child(3) { animation-delay: .12s; }
.look-builder__rack > .look-builder__cell:nth-child(4) { animation-delay: .18s; }

/* Podniesienie karty zastąpione ciepłym rozświetleniem pola: na scalonej powierzchni
   unoszenie pojedynczego slotu rozrywałoby kompozycję, którą ta zmiana buduje. */
@media (hover: hover) {
  .look-builder__cell:hover { background: #FDFCFA; }
}

/* Pasek faktów (2.6, 2026-08-19) — do tej pory kafel niósł WŁASNĄ miniaturę, czyli
   każda rzecz była na ekranie dwa razy (raz na planszy, raz tu) i największy element
   w module nie mówił nic więcej niż mniejszy obok. `.look-builder__cell-inner` była
   kolumną tekstu — obraz looka niósł wyłącznie plansza obok.
   #152 (2026-08-25, świadome cofnięcie) — tester wolał przeglądać produkty obrazem;
   miniatura wraca jako WIERSZ (miniatura + kolumna faktów), nie duplikat wypełniający
   cały kafel jak przed 2.6 — plansza nadal niesie KOMPOZYCJĘ, rack niesie LISTĘ. */
.look-builder__cell-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

.look-builder__cell-thumb {
  flex: 0 0 64px;
  aspect-ratio: 3 / 4;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  background: var(--mist);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
}

.look-builder__cell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-builder__cell--gone .look-builder__cell-thumb {
  opacity: .5;
}

.look-builder__cell-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;   /* Zgłoszenie #86 — bez tego dziecko z `white-space:nowrap` rozpychało kolumnę poza kafel zamiast się ścieśniać, więc `overflow:hidden` na `.cell` ucinało nazwę w pół słowa (ellipsis nigdy nie dostawał szansy zadziałać). */
  padding: 12px 14px;
}

.look-builder__cell-gone {
  color: var(--nope);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Nazwa slotu — baza wspólna dla kafla pustego („+ dobierz") i wypełnionego. Do
   2026-08-19 (2.5) wypełniona wersja była pigułką LEŻĄCĄ NA zdjęciu — bez zdjęcia w
   racku (plansza obok niesie obraz looka) wraca do zwykłego, poziomego wiersza. */
.look-builder__cell-slot {
  grid-area: slot;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Zgłoszenie #95 — sama ikona, ta sama co na kaflu planszy (`look-board__tile-badge`). */
.look-builder__cell-icon {
  flex: 0 0 auto;
  color: var(--smoke);
}

/* Wiersz klikalny (katalog/własne) albo statyczny (zdjęcie — brak karty produktu do
   pokazania). Reset przycisku: pasek faktów ma wyglądać jak tekst, nie jak kontrolka.
   Grid (Zgłoszenie #86, zastąpiło flex-column) — slot+cena w górnym wierszu, marka+nazwa
   w dolnym na pełną szerokość: to jedyny układ, w którym nazwa dostaje wystarczająco
   miejsca na 2 linie bez ucinania w pół słowa. Slot bez ceny (fotka, `--static`) po
   prostu zostawia prawą komórkę górnego wiersza pustą — grid nie wymaga wypełnienia. */
.look-builder__cell-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "slot price" "meta meta";
  column-gap: 8px;
  row-gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.look-builder__cell-row--static { cursor: default; }

@media (hover: hover) {
  .look-builder__cell-row:not(.look-builder__cell-row--static):hover .look-builder__cell-name {
    color: var(--champagne-deep);
  }
}

.look-builder__cell-row:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* Marka NAD nazwą, nie w jednym wierszu z nią (Zgłoszenie #86, 2026-08-19 — do tej
   pory "Reserved · Sweter oversize" w jednym wierszu z `white-space:nowrap` na nazwie
   ucinało ją w pół słowa: rodzic miał `overflow:hidden` bez `min-width:0` na całym
   łańcuchu flex, więc `text-overflow:ellipsis` nigdy nie dostawał okazji zadziałać —
   patrz zrzut zgłoszenia, "Spodenki męskie Nike Air HM0178" ginęło po "Air"). Kolumna
   daje nazwie pełną szerokość kafla na 2 liniach zamiast dzielić się nią z marką. */
.look-builder__cell-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* Marka jako nadpis nad nazwą — to REALNA dana produktu i własne urządzenie tego
   świata (`.wall-card__brand` :5988 → `__name` :5997), nie dekoracyjny kicker. */
.look-builder__cell-brand {
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.65625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Nazwa produktu — do 2026-08-17 W OGÓLE nie renderowana, mimo że backend ją przysyłał
   i front używał jej w `alt`/`aria-label`. Kafel mówił „Reserved, 159 zł", ale nie
   mówił, CZYM ta rzecz jest. Dwie linie z `line-clamp` (Zgłoszenie #86, 2026-08-19) —
   jednoliniowy wariant z 2.6 zakładał, że pasek faktów jest za wąski na więcej, ale to
   właśnie ten brak miejsca ucinał nazwy w połowie słowa. Prawie każda nazwa w katalogu
   mieści się w całości w 2 liniach na szerokości kafla 360px. */
.look-builder__cell-name {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cena wyróżnia się WAGĄ, nie kolorem. Pierwotnie miała dostać sygnaturowe
   `--champagne-deep` (jak `.look-tile__price` :9653), ale przeliczenie kontrastu
   wykazało 3.25:1 na `--pearl` przy wymaganych 4.5:1 — champagne w tej palecie po
   prostu nie unosi małego tekstu na jasnym tle. Sygnatura champagne zostaje tam,
   gdzie jest wypełnieniem/obrysem, nie literą. Bazowe `margin-top: auto` służy DRUGIEMU
   miejscu, gdzie ta klasa żyje — karcie kandydata w szufladzie wymiany (`.look-tile`,
   pionowy flex) — w poziomym pasku racka jest nadpisane niżej. */
.look-builder__cell-price {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 700;
  margin-top: auto;
}

/* Grid (Zgłoszenie #86) zastąpiło `margin-left:auto` na flex — `.cell-price` siedzi
   w prawej komórce górnego wiersza (`grid-area: price`), obok `.cell-slot`. */
.look-builder__cell-row .look-builder__cell-price {
  grid-area: price;
  align-self: center;
  margin-top: 0;
  padding-left: 8px;
  white-space: nowrap;
}

/* Pozycja niedostępna w galeriach usera — bez zdjęcia do wygaszenia (2.6) przygasa
   sam fakt: nazwa i cena, „niedostępne…" (`--nope`) obok zostaje w pełnej sile. */
.look-builder__cell--gone .look-builder__cell-name,
.look-builder__cell--gone .look-builder__cell-price {
  opacity: .5;
}

.look-builder__cell-actions {
  display: flex;
  gap: 6px;
  padding-top: 2px;
}

/* Pusty slot jest PRZYCISKIEM (otwiera szufladę), nie martwym tekstem „— dobierz".
   Bez `min-height`: w gridzie `align-items: stretch` sam dorówna do wysokości
   wypełnionego kafla w swoim wierszu — sztywne 160px nigdy się z nim nie zgadzało. */
.look-builder__cell-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  padding: 10px;
  border: 0;
  background: var(--cloud);
  cursor: pointer;
  text-align: left;
  transition: background .2s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__cell-empty:hover { background: var(--champagne-soft); }
}

.look-builder__cell-empty:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: -3px;   /* do środka: pole styka się z krawędzią karty looka */
}

/* „+" jako realna afordancja w kole, nie luźny glif w powietrzu. */
.look-builder__cell-plus {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  align-self: center;
  border-radius: 50%;
  background: var(--champagne-soft);
  color: var(--ink);   /* champagne-deep dawał 2.56:1 na champagne-soft */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.look-builder__cell-empty-label {
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

/* Szkielety — rack jest widoczny od razu, więc wysokość panelu nie skacze po
   dojściu odpowiedzi (wcześniej ~2 s pustki przy pierwszym wejściu). Kształt musi
   odpowiadać realnej karcie, inaczej układ i tak przeskakuje po jej podmianie. */
.look-builder__cell--skeleton {
  min-height: 108px;   /* wysokość realnego wiersza faktów (2.6) — układ nie skacze po podmianie */
  border: 1px solid var(--mist);
  border-radius: 12px;
  box-shadow: none;
  background: linear-gradient(90deg, var(--cloud) 25%, var(--mist) 37%, var(--cloud) 63%);
  background-size: 400% 100%;
  animation: look-skeleton-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .look-builder__cell--skeleton { animation: none; }
  /* Wejście kafli też jest ruchem — bez tego reduced-motion dostawał kaskadę. */
  .look-builder__cell { animation: none; }
}

/* Wymiana — osobny przycisk obok kłódki (dotąd `⇄` było tylko IKONĄ STANU tej samej
   kłódki, więc klik w „wymień" w rzeczywistości blokował slot). */
.look-builder__swap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;   /* Global Constraints: cele dotykowe ≥44px */
  border: 1px solid var(--mist);
  border-radius: 10px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease-lux), background .2s var(--ease-lux),
              color .2s var(--ease-lux), transform .15s var(--ease-lux);
}

.look-builder__swap svg { flex: 0 0 auto; }

@media (hover: hover) {
  .look-builder__swap:hover {
    border-color: var(--champagne);
    background: var(--champagne-soft);
  }
}

.look-builder__swap:active { transform: scale(.96); }

.look-builder__swap:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.look-builder__title-input {
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--mist);
  border-radius: 10px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.84375rem;
}

.look-builder__title-input:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 1px;
}

/* Szuflada wymiany.
   `.look-builder__drawer` nigdy nie dostał własnej reguły (2026-08-17, zgłoszenie
   po naprawie #80): samo `.sheet` nie ma paddingu poziomego, więc tytuł i taby
   siedziały dosłownie na krawędzi arkusza, tytuł częściowo pod zaokrągleniem rogu.
   Wzorzec z `.filter-sheet` (:7690) — ten sam typ bottom-sheeta. */
.look-builder__drawer {
  padding: 20px 16px 32px;
}

/* Tytuł musi ustąpić przyciskowi zamknięcia (.sheet__close: 32px @ right:12px). */
.look-builder__drawer .filter-sheet__title {
  padding-right: 44px;
}

.look-builder__drawer-tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 10px;   /* poziomy padding trzyma teraz rodzic — inaczej taby nie
                          trafiałyby w jedną linię z tytułem */
  flex-wrap: wrap;     /* zmierzone na 360px: 3 taby zajmują 310 z 328px dostępnych —
                          mieszczą się, ale zapas to 18px, więc dłuższa nazwa slotu
                          albo większy font systemowy wypchnąłby je poza arkusz */
}

.look-builder__drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px 0;   /* pionowe 4px zostaje na obrysy focusa; poziome trzyma rodzic */
  overflow-y: auto;
}

/* Kandydaci w szufladzie dostają ten sam rytm co kafle w racku: cena w champagne,
   marka jako nadpis. Zawężone do szuflady — bazowy `.look-tile` żyje też na Ścianie
   i w feedzie looków, więc nie wolno go ruszać globalnie. */
.look-builder__drawer-grid .look-tile__brand {
  color: var(--smoke);
  font-size: 0.65625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.look-builder__drawer-grid .look-builder__cell-price {
  font-size: 0.78125rem;
}

/* Element sygnaturowy (spec §3) — TYLKO wiersze bez kłódki animują na
   przetasowanie; zablokowane stoją nieruchomo. Klasa jest dopięta i zdjęta
   przez composeLookBuilder() (frontend/app.js), nigdy przez CSS samo. */
@keyframes look-builder-row-shift {
  from { transform: translateY(-6px); opacity: .35; }
  to   { transform: none; opacity: 1; }
}

.look-builder__cell--shift {
  animation: look-builder-row-shift .4s var(--ease-lux);
}

@media (prefers-reduced-motion: reduce) {
  /* Bez ruchu: dyskretne podświetlenie zamiast przesunięcia/fade — klasa i tak
     jest zdejmowana przez JS po 420ms, więc to naturalny "flash", nie animacja. */
  .look-builder__cell--shift {
    animation: none;
    background: var(--champagne-soft);
  }
}

/* (Skasowano `.look-builder__thumb`/`--photo`/`-photo-icon` — 2026-08-19, Pracownia
   2.6. Były to reguły miniatury kafla racka: kafel niósł WŁASNE zdjęcie, więc każda
   rzecz była na ekranie dwa razy — raz na kanwie/planszy, raz tu. Rack stał się
   paskiem faktów bez obrazu; `.look-tile`/`__brand` zostają żywe w szufladzie wymiany
   i na Ścianie, gdzie miniatura nadal jest jedynym obrazem danej karty.) */

/* (Skasowano 8 reguł `.look-builder__row*` — 2026-08-17. Pozostałość po erze listy
   wierszy sprzed przejścia na siatkę kafli: żadna z nich nie miała odpowiednika w
   `index.html` ani `app.js`. Sygnatura champagne na cenie, którą niosła martwa
   `__row-price`, wróciła tam, gdzie jest widoczna — `.look-builder__cell-price`.) */

/* „Zdejmij" — zastąpiło kłódkę (2026-08-17). Celowo CICHSZE niż „Zamień": zdejmowanie
   jest akcją destrukcyjną i rzadszą, a wymiana to główny ruch w tym module. */
.look-builder__remove {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;   /* Global Constraints: cele dotykowe ≥44px */
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--mist);
  background: var(--pearl);
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--ease-lux), background .2s var(--ease-lux),
              color .2s var(--ease-lux), transform .15s var(--ease-lux);
}

@media (hover: hover) {
  /* Tło zostaje `--pearl`: `--nope` na `--nope-bg` daje 4.30:1, tuż pod progiem.
     Na bieli to 4.98:1, a sygnał „to usuwa" i tak niosą obrys i barwa liter. */
  .look-builder__remove:hover {
    border-color: var(--nope);
    color: var(--nope);
  }
}

.look-builder__remove:active { transform: scale(.96); }

.look-builder__remove:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* Przełącznik Buduj / Moje looki w belce Pracowni */
.look-builder__bar-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.look-builder__tab {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease-lux), color .2s var(--ease-lux),
              border-color .2s var(--ease-lux), transform .15s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__tab:not(.look-builder__tab--on):hover {
    background: var(--cloud);
    color: var(--ink);
  }
}

.look-builder__tab:active { transform: scale(.96); }

.look-builder__tab--on {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  color: var(--ink);
}

.look-builder__tab:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* Instrukcja wejściowa (2026-08-17) — zastępuje coachmarkę, która gasła po 6s i
   pokazywała się DOKŁADNIE raz w życiu przeglądarki, więc user realnie nigdy nie
   dostał wyjaśnienia, co robi kłódka, przetasowanie i czym „Zapisz" różni się od
   „Dodaj do Szafy". Panel zostaje na ekranie do zamknięcia i wraca przyciskiem „?". */
.look-builder__howto {
  margin: 10px 16px 4px;
  padding: 14px 16px 12px;
  background: var(--cloud);
  border: 1px solid var(--mist);
  border-radius: 12px;
  animation: msg-rise .35s var(--ease-lux) both;
}

.look-builder__howto-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Numery kroków przez licznik CSS — domyślne markery `<ol>` były gołymi cyframi
   systemowego kroju. Zero zmian w markupie. */
.look-builder__howto-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto;
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--smoke);
}

.look-builder__howto-steps li {
  counter-increment: howto;
  position: relative;
  padding-left: 30px;
  min-height: 22px;
}

.look-builder__howto-steps li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--champagne-soft);
  color: var(--ink);   /* champagne-deep dawał 2.56:1 na champagne-soft */
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.look-builder__howto-steps li + li {
  margin-top: 10px;
}

.look-builder__howto-steps strong {
  color: var(--ink);
  font-weight: 600;
}

.look-builder__howto-close {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  background: var(--champagne-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease-lux), color .2s var(--ease-lux),
              transform .15s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__howto-close:hover {
    background: var(--champagne-deep);
    color: var(--paper);
  }
}

.look-builder__howto-close:active { transform: scale(.97); }

.look-builder__howto-close:focus-visible,
.look-builder__help:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* „?" w nagłówku — jedyna droga z powrotem do instrukcji po jej zamknięciu.
   Krążek zostaje wizualnie 32px, ale cel dotykowy dobity do 44px przezroczystym
   obszarem: sekcja Pracowni egzekwuje ten próg w 6 komentarzach, a ten przycisk
   (i tylko on) go łamał. */
.look-builder__help {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mist);
  border-radius: 999px;
  background: transparent;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--ease-lux), border-color .2s var(--ease-lux),
              background .2s var(--ease-lux), transform .15s var(--ease-lux);
}

.look-builder__help::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .look-builder__help:hover {
    color: var(--ink);
    border-color: var(--champagne);
    background: var(--champagne-soft);
  }
}

.look-builder__help:active { transform: scale(.94); }

/* Galeria „Moje looki" */
.look-builder__mine {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px 16px;
}

.look-builder__mine-empty {
  padding: 24px 4px;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-align: center;
}

/* Pusty stan „Moje looki" — do 2026-08-17 goły akapit. Słownik `.looks-state`
   (:9890): nagłówek niesie sens, opis go dopowiada, akcja wyprowadza dalej. */
.look-builder__mine-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}

.look-builder__mine-blank-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.look-builder__mine-blank-text {
  margin: 0;
  max-width: 34ch;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Wiersz przestał być pojedynczym <button> (2026-08-16 Etap 1) — miniatury +
   usuwanie potrzebują WŁASNYCH celów dotykowych, więc to teraz kontener na 3
   podprzyciski (miniatury, info, usuń), nie jeden klikalny blok. */
.look-builder__mine-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;   /* Global Constraints: cele dotykowe ≥44px */
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: var(--pearl);
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  transition: transform .2s var(--ease-lux), box-shadow .2s var(--ease-lux),
              border-color .2s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__mine-row:hover {
    transform: translateY(-2px);
    border-color: var(--champagne);
    box-shadow: var(--shadow-float);
  }
}

.look-builder__mine-row:focus-within {
  border-color: var(--champagne);
}

/* Miniatury (2026-08-16, max 4, kolejność slotów) — bez tego "Moje looki" była
   listą samego tekstu, nieodróżnialną od dowolnej innej listy w aplikacji. */
.look-builder__mine-thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

/* 3/4 zamiast kwadratu 32×32 — kadr mody przycięty do kwadratu ucina sylwetkę,
   a to jedyny podgląd, po którym rozpoznaje się zapisany look. */
.look-builder__mine-thumbs img {
  width: 34px;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  background: var(--mist);
}

.look-builder__mine-info {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.look-builder__mine-thumbs:focus-visible,
.look-builder__mine-info:focus-visible,
.look-builder__mine-delete:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.look-builder__mine-delete {
  flex: 0 0 auto;
  width: 44px;   /* Global Constraints: cele dotykowe ≥44px */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--smoke);
  font-size: 0.875rem;
  cursor: pointer;
}

.look-builder__mine-delete {
  transition: background .2s var(--ease-lux), color .2s var(--ease-lux),
              transform .15s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__mine-delete:hover {
    background: var(--nope-bg);
    color: var(--nope);
  }
}

.look-builder__mine-delete:active { transform: scale(.92); }

/* Nazwa zapisanej stylizacji jest tytułem — user ją sam nadaje, więc niesie moment
   redakcyjny, jak `.look-card__name` (:9732) w feedzie looków. */
.look-builder__mine-title {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look-builder__mine-meta {
  flex: 0 0 auto;
  color: var(--ink);   /* nie champagne-deep — 3.25:1 na pearl, patrz `__cell-price` */
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* #149 — "+ Dodaj element": ten sam przepis co `.look-builder__photo-entry` niżej
   (cichy, dashed, nie konkuruje z "Przetasuj"/"Zapisz" w stopce), osobna klasa bo
   żyje NAD racka (nie pod), zanim front zdjęcia w ogóle dojdzie do gry. */
.look-builder__add-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 10px 0 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px dashed var(--mist);
  border-radius: 10px;
  background: transparent;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.look-builder__add-zone:hover {
  border-color: var(--champagne-deep);
  color: var(--ink);
}

.look-builder__add-zone:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

.look-builder__add-zone .look-builder__cell-plus {
  color: var(--champagne-deep);
  font-size: 1.125rem;
  line-height: 1;
}

/* Wejście w tryb zdjęcia — slot nav „Klonuj Styl" przejęła Pracownia (2026-08-16),
   więc to jest teraz jedyna droga do trybu zdjęcia. Celowo cichy (link-owy, nie
   drugi primary) — nie konkuruje z „Przetasuj"/„Zapisz" w stopce niżej. */
.look-builder__photo-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 2 * var(--gutter));  /* Zgłoszenie #143 — było 32px/16px literalne */
  margin: 0 var(--gutter) 12px;
  min-height: 44px;   /* Global Constraints: cele dotykowe ≥44px */
  padding: 0 12px;
  border: 1px dashed var(--mist);
  border-radius: 10px;
  background: transparent;
  color: var(--smoke);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  cursor: pointer;
}

.look-builder__photo-entry:hover {
  border-color: var(--champagne-deep);
  color: var(--ink);
}

.look-builder__photo-entry:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* Kolumna, nie wiersz (2026-08-16) — trzy akcje (podsumowanie + Dodaj do Szafy +
   Przetasuj/Zapisz) nie mieszczą się już w jednym rzędzie na 360-390px bez
   ściskania celów dotykowych poniżej 44px. */
.look-builder__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mist);
  background: var(--cloud);
}

/* Zgłoszenie #96 — "Zapisz" dołączyło tu do akcji domykającej (dawniej samo w
   `.look-builder__actions`, gdzie rząd 4 przycisków wychodził poza ekran). Akcja
   domykająca zostaje wizualnie pierwszoplanowa (flex:2 > flex:1). */
.look-builder__footer-row {
  display: flex;
  gap: 8px;
}

.look-builder__add-wishlist {
  flex: 2 1 auto;
  min-width: 0;
}

.look-builder__footer-row .look-builder__save {
  flex: 1 1 auto;
  min-width: 0;
}

/* (`.look-builder__summary` skasowane — suma i kontekst przeniosły się do nagłówka
   kompozycji `.look-builder__look-head`, gdzie są widoczne bez scrollowania.) */

.look-builder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.look-builder__actions .looks-state__cta {
  flex: 1 1 auto;
  min-width: 0;
}

.look-builder__save {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  /* .look-card__act--like (druga klasa na tym przycisku) daje tylko :hover /
     --on, bez stanu spoczynku — dopełnienie wypełnieniem zgodnym z konwencją
     pierwszoplanowego CTA w tym systemie (.consent-bar__ok, .profile-sync__btn).
     Napis na `--ink`, nie `--paper`: jasny tekst na champagne dawał 2.19:1 (próg
     4.5:1) — wada odziedziczona, nie wprowadzona tą rundą, ale reguła i tak była
     tu przepisywana, więc naprawiona przy okazji. Ink daje 8.59:1. */
  background: var(--champagne);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  transition: background .2s var(--ease-lux), transform .15s var(--ease-lux),
              box-shadow .2s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__save:not(:disabled):hover {
    background: var(--champagne-deep);   /* ink na champagne-deep = 6.09:1 */
    box-shadow: var(--shadow-premium);
  }
}

.look-builder__save:not(:disabled):active { transform: scale(.98); }

.look-builder__save:disabled,
.look-builder__actions .looks-state__cta:disabled {
  opacity: .5;
  cursor: default;
  box-shadow: none;
}

/* Uwaga zakresowa: ten przycisk renderuje się na ŚCIANIE (index.html:1787), nie w
   Pracowni — mimo należenia do jej namespace'u. Dostaje wyłącznie przejście i hover;
   wymiary zostają nietknięte, żeby nie ruszyć układu cudzej karty. */
.look-builder__entry-cta {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--champagne-deep);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease-lux), color .2s var(--ease-lux),
              transform .15s var(--ease-lux);
}

@media (hover: hover) {
  .look-builder__entry-cta:hover {
    background: var(--champagne-soft);
  }
}

.look-builder__entry-cta:active { transform: scale(.96); }

.look-builder__entry-cta:focus-visible {
  outline: 3px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* ── Pracownia na szerokich ekranach ────────────────────────────────────────
   Do 2026-08-16 moduł nie miał ŻADNEJ reguły @media: na desktopie zostawał
   wąskim słupkiem 460px z miniaturami 44px. Blok stoi na KOŃCU sekcji celowo —
   plik ma udokumentowaną pułapkę kaskady (reguła bez media query postawiona
   później wygrywa z wcześniejszym @media), więc dopisanie tego wyżej byłoby
   nadpisane przez bazowe reguły Pracowni. */
@media (min-width: 640px) {
  /* Zgłoszenie #143 — `.look-builder__inner { max-width: 900px }` USUNIĘTE tutaj:
     martwe od zawsze w tym paśmie. `.app` (kontener nadrzędny) zostaje przypięty do
     680px aż do 1024px (patrz `.app` bazowe + `@media(min-width:1024px)`), więc 900px
     nigdy nie mogło zadziałać — 680 < 900 wygrywał jako węższe ograniczenie. Realny
     cap przychodzi dopiero z paskiem bocznym w bloku ≥1024px niżej. */
  /* Plansza rośnie i bierze więcej miejsca niż pasek faktów obok — ten drugi jest
     listą tekstu (2.6), nie siatką obrazów, więc nie potrzebuje szerokiej kolumny. */
  .look-builder__canvas {
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 360px);
    gap: 20px;
    padding: 18px;
  }
  .look-board {
    /* Sticky dopiero tu: obok paska faktów plansza ma zostać w polu widzenia przy
       przewijaniu. Na mobile stoi NAD nim, więc przyklejanie nie miałoby sensu. */
    position: sticky;
    top: 8px;
  }
  /* Pasek faktów zostaje JEDNĄ kolumną na każdej szerokości — to lista wierszy
     tekstu, nie siatka miniatur, więc druga kolumna tylko ścisnęłaby ceny/akcje. */
  .look-builder__rack { grid-template-columns: 1fr; gap: 10px; }
  .look-builder__drawer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  /* Zgłoszenie #143 (kontynuacja #134) — Pracownia miała WŁASNY system szerokości
     (literalne 980px, wyśrodkowane flexem WEWNĄTRZ .app) niezależny od Ściany/Looków
     (--pad-content/--w-content) i Stylistki (--pad-chat/--w-chat) — trzy różne lewe
     krawędzie na tym samym ekranie ("Odkrywaj szersze od Pracowni"). Ramka Pracowni
     przechodzi na TEN SAM --pad-content co Ściana/Looki/Wishlist — lewa krawędź
     treści identyczna wszędzie. `justify-content:center` (baza, :11926) staje się
     no-opem, gdy `__inner` wypełnia 100% już wyśrodkowanego przez padding rodzica —
     zostaje nietknięte, nie usuwane, żeby nie psuć zachowania <1024px. */
  .look-builder {
    padding-left: var(--pad-content);
    padding-right: var(--pad-content);
  }
  .look-builder__inner {
    max-width: none;  /* width:100% już w regule bazowej (:11929) */
  }
  .look-builder__drawer-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .look-card { animation: none; }
  .look-skeleton::before { animation: none; }
  .look-tile img,
  .look-card__act,
  .look-viewer__act,
  .liked-looks-rail__item { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EKRAN ODPOWIEDNIKÓW (#84 "chcę zobaczyć wszystkie", #85 "nie zawsze tańszy")

   Zastępuje poziomą karuzelę `.sheet-extra` w roli "znajdź odpowiednik": tamta
   dawała 6 wyników, z czego na 360px widać było ~2,5 karty (142px stałej
   szerokości), bez żadnej wskazówki, że jest ich więcej.

   Z-index 9990 jest CELOWO niższy niż `.sheet-overlay` (9998): tap w wynik ma
   otworzyć zwykły arkusz produktu NAD tym ekranem, zamiast duplikować jego
   znacznik. Ekran jest rodzeństwem `.sheet-overlay` w DOM — patrz komentarz
   przy `.alt-screen` w index.html.
   ══════════════════════════════════════════════════════════════════════════ */

.alt-screen {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}

.alt-screen__inner {
    flex: 1 1 auto;
    min-height: 0;              /* bez tego flex-child nie zejdzie poniżej treści i nie przewinie się */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: none;            /* pełna szerokość na mobile — lekcja ze Zgłoszenia #78 */
}

/* Pasek z kotwicą przykleja się do góry, żeby zakładki i chipy zostały pod ręką
   podczas przewijania długiej listy. */
.alt-screen__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 10px;
    background: var(--paper);
    border-bottom: 1px solid var(--mist);
}

.alt-screen__back {
    flex: 0 0 auto;
    width: 44px;                /* podłoga celu dotykowego egzekwowana w tej sekcji */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    border-radius: 50%;
    transition: background .18s var(--ease-lux);
}
.alt-screen__back:hover { background: var(--cloud); }
.alt-screen__back:active { transform: scale(.94); }

.alt-screen__anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.alt-screen__anchor-thumb {
    width: 40px;
    height: 53px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--cloud);
    font-size: 0;               /* zepsuty <img> nie ma układać tekstu alt i rozpychać paska */
    flex: 0 0 auto;
}

.alt-screen__anchor-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alt-screen__anchor-label {
    font-size: 0.625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smoke);
}

.alt-screen__anchor-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alt-screen__anchor-price {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink);
}

/* Zakładki trybu — ten sam wzorzec co `.look-builder__tab` w szufladzie Pracowni,
   świadomie powtórzony wizualnie, żeby dwie powierzchnie wyboru czytały się tak samo. */
.alt-screen__tabs {
    display: flex;
    gap: 8px;
    padding: 12px 0 10px;
}

.alt-screen__tab {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--mist);
    border-radius: 999px;
    background: var(--pearl);
    color: var(--smoke);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--ease-lux), color .18s var(--ease-lux),
                border-color .18s var(--ease-lux);
}
.alt-screen__tab--on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.alt-screen__tab:active { transform: scale(.98); }

/* Chipy osi. Nieaktywny jest wyszarzony, NIE ukryty — user ma widzieć, że ta oś
   istnieje, ale dla tego produktu niczego by nie zmieniła. */
.alt-screen__axes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 10px;
}
.alt-screen__axes::-webkit-scrollbar { display: none; }

.alt-axis-chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mist);
    border-radius: 999px;
    background: var(--pearl);
    color: var(--ink);
    font-size: 0.78125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s var(--ease-lux), border-color .18s var(--ease-lux);
}
.alt-axis-chip--on {
    background: var(--champagne);
    border-color: var(--champagne);
    color: var(--ink);          /* NIE --paper: champagne pod jasnym tekstem to 2,19:1 */
    font-weight: 600;
}
.alt-axis-chip:disabled {
    opacity: .42;
    cursor: not-allowed;
}
.alt-axis-chip:not(:disabled):active { transform: scale(.96); }

.alt-axis-chip__count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--smoke);
}
.alt-axis-chip--on .alt-axis-chip__count { color: var(--ink); }

.alt-screen__count {
    font-size: 0.71875rem;
    color: var(--smoke);
    padding: 2px 0 10px;
}

.alt-screen__spinner {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.alt-screen__error {
    padding: 14px;
    border-radius: 8px;
    background: var(--cloud);
    color: var(--ink);
    font-size: 0.8125rem;
}

/* Siatka 2x na mobile: kafel ~158px przy 360px szerokości — WIĘKSZY niż 142px
   karuzeli, którą zastąpił, i bez poziomego przewijania. */
.alt-screen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
}

.alt-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* `.look-tile` reużyte bez zmian globalnych (aspect-ratio 3/4, object-fit, tło
   placeholdera, font-size:0 chroniące układ przy zepsutym obrazku). Nadpisania
   MUSZĄ być zawężone selektorem potomnym — ta klasa żyje też na Ścianie i w
   feedzie looków. */
.alt-screen__grid .look-tile.alt-tile__open {
    width: 100%;
    border: none;
    padding: 0;
    background: var(--cloud);
    cursor: pointer;
}

.alt-tile__wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(250, 249, 246, .92);
    color: var(--smoke);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(10, 10, 10, .12);
    transition: color .18s var(--ease-lux), transform .18s var(--ease-lux);
}
.alt-tile__wishlist--on { color: #C0392B; }
.alt-tile__wishlist:active { transform: scale(.9); }

/* Zgłoszenia #177/#178 — stan zapisania do Szafy nie może zależeć wyłącznie
   od barwy: obrys serca przechodzi w wypełnienie, zmienia się powierzchnia
   przycisku, a `aria-pressed` przekazuje ten sam stan czytnikom ekranu. */
.wishlist-heart {
    position: relative;
    transition: color .18s var(--ease-lux), background .18s var(--ease-lux),
        border-color .18s var(--ease-lux), box-shadow .18s var(--ease-lux),
        transform .18s var(--ease-lux);
}

.wishlist-heart svg {
    transition: transform .18s var(--ease-lux), fill .18s var(--ease-lux);
}

.wishlist-heart[aria-pressed="true"] {
    color: var(--love);
    background: var(--love-bg);
    border: 1px solid var(--love);
    box-shadow: 0 0 0 2px var(--love-bg);
}

.wishlist-heart[aria-pressed="true"] svg {
    transform: scale(1.1);
}

.wishlist-heart[aria-busy="true"] {
    cursor: progress;
    opacity: .72;
}

.wishlist-heart:focus-visible {
    outline: 3px solid var(--champagne-deep);
    outline-offset: 3px;
}

.alt-tile__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 7px;
    min-width: 0;
}

.alt-tile__brand {
    font-size: 0.625rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--smoke);
}

.alt-tile__name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cena niesiona WAGĄ, nie sygnaturowym champagne — ten na białym daje 3,25:1
   przy wymaganych 4,5:1 (policzone, nie oszacowane). */
.alt-tile__price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink);
    padding-top: 2px;
}

.alt-screen__more {
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--pearl);
    color: var(--ink);
    font-size: 0.84375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--ease-lux);
}
.alt-screen__more:hover:not(:disabled) { background: var(--cloud); }
.alt-screen__more:disabled { opacity: .55; cursor: default; }

.alt-screen__empty {
    padding: 48px 8px;
    text-align: center;
    color: var(--smoke);
    font-size: 0.84375rem;
}

.alt-screen__pivot {
    margin-top: 16px;
    min-height: 44px;
    padding: 11px 20px;
    border: none;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
.alt-screen__pivot:active { transform: scale(.98); }

@media (min-width: 576px) {
    .alt-screen__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .alt-screen__inner { padding-left: 32px; padding-right: 32px; }
    .alt-screen__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-heart,
    .wishlist-heart svg,
    .alt-screen__back,
    .alt-screen__tab,
    .alt-axis-chip,
    .alt-tile__wishlist,
    .alt-screen__pivot { transition: none; }
    .alt-screen__back:active,
    .alt-screen__tab:active,
    .alt-axis-chip:not(:disabled):active,
    .alt-tile__wishlist:active,
    .alt-screen__pivot:active { transform: none; }
}