/* ══════════════════════════════════════════════════════════════════════════
   Gemora UX - widżet rekomendacji i zestawów w koszyku.

   Wartości zdjęte z zatwierdzonej makiety, a te z kolei z żywej karty
   produktu: kontener 10px / 1px #e8dde2 / białe tło, przycisk 9px / #6b1a33,
   krój Montserrat.

   Motyw dokleja marginesy i wcięcia do p/ol/ul/li regułami typu
   `.entry-content p` (specyficzność 0,1,1), które biją pojedynczą klasę -
   stąd selektory z nazwą elementu, tak samo jak w gemora-ux.css.
   ══════════════════════════════════════════════════════════════════════════ */

.gux-rek {
  --gux-brand: #6b1a33;
  --gux-akcent: #9c1146;
  --gux-atrament: #232323;
  --gux-przygaszony: #8b7b83;
  --gux-ramka: #e8dde2;
  --gux-szyna: #f1e6ea;
  --gux-zielen: #2f6b45;
  --gux-promien: 10px;

  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--gux-atrament);
  font-size: 14px;
  line-height: 1.5;
}
.gux-rek[hidden] { display: none; }

.gux-rek p { margin: 0; }
.gux-rek img { max-width: 100%; height: auto; }

/* Motyw maluje własne tło i kolor na każdym `button:hover` w treści strony -
   zakładka robiła się bordowa z białym napisem, a pozycja na liście dedykacji
   traciła tekst. Reguły motywu bywają oznaczone !important i wtedy nie da się
   ich pokonać samą specyficznością - dlatego stany hover mają tu !important.
   Świadomie i tylko na tych kilku deklaracjach, nie w całym arkuszu. */
.gux-rek button.gux-zakladka,
.gux-rek button.gux-strzalka,
.gux-rek button.gux-kolor,
.gux-rek button.gux-dedykacja,
.gux-rek button.gux-dodaj,
.gux-rek select.gux-wybor,
.gux-rek button.gux-zawieszka,
.gux-modal button.gux-zaw,
.gux-modal button.gux-tresc,
.gux-modal button.gux-modal-zamknij {
  box-shadow: none; text-decoration: none; text-transform: none;
}
.gux-rek button.gux-zakladka:hover,
.gux-rek button.gux-zakladka:focus,
.gux-modal button.gux-tresc:hover,
.gux-modal button.gux-tresc:focus,
.gux-modal button.gux-modal-zamknij:hover,
.gux-rek button.gux-strzalka:hover,
.gux-rek button.gux-kolor:hover,
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-dedykacja:hover {
  box-shadow: none; outline: none;
}
}
.gux-rek a { text-decoration: none; color: inherit; }

/* ── nagłówek sekcji ────────────────────────────────────────────────────── */
.gux-rek[data-gux-rek="widzet"] { margin-top: 28px; }

.gux-rek-gora {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--gux-ramka);
}
/* ── zakładki ───────────────────────────────────────────────────────────────
   Zestawy jako osobna sekcja pod koszykiem wychodziły poza kolumnę treści
   i lądowały tam, gdzie klient już nie patrzy. Zakładka trzyma je w tym samym
   miejscu co propozycje. */
.gux-zakladki { display: flex; gap: 4px; margin-bottom: -1px; }
.gux-zakladka {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--gux-przygaszony);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: color .18s, border-color .18s;
}
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-zakladka:hover {
  color: var(--gux-atrament) !important; background: none !important;
}
}
.gux-rek button.gux-zakladka[aria-selected="true"] {
  color: var(--gux-brand) !important; background: none !important;
  border-bottom-color: var(--gux-brand);
}
.gux-zakladka-odznaka {
  padding: 2px 7px; border-radius: 20px;
  background: var(--gux-akcent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.gux-panel[hidden] { display: none; }

.gux-strzalki { display: flex; gap: 6px; flex: 0 0 auto; }
.gux-strzalka {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--gux-ramka); border-radius: 50%;
  color: var(--gux-brand); cursor: pointer; transition: background .18s, border-color .18s;
}
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-strzalka:hover:not(:disabled) {
  background: var(--gux-szyna) !important; border-color: #d9c6ce;
  color: var(--gux-brand) !important;
}
}
.gux-strzalka:disabled { opacity: .3; cursor: default; }
.gux-strzalka svg { width: 15px; height: 15px; }
.gux-strzalki[hidden] { display: none; }

/* ── karuzela ───────────────────────────────────────────────────────────── */
.gux-karuzela {
  /* Karuzela zaczyna się przy krawędzi kolumny, czyli w strefie gestu
     „wstecz" na iOS. Bez tego machnięcie w prawo przy scrollLeft=0 (stan
     startowy!) cofa klienta ze strony koszyka. */
  overscroll-behavior-x: contain;
  /* 2,5 kafla zamiast 3 - zdjęcie jest tu głównym argumentem, a wystający
     brzeg trzeciego od razu mówi, że da się przewinąć. */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 14px) / 2.5);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* miejsce na cień kafla i na to, żeby ostatni kafel nie kleił się do krawędzi */
  padding-bottom: 4px;
  scroll-padding-left: 0;
}
.gux-karuzela::-webkit-scrollbar { display: none; }

.gux-kafel {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gux-ramka); border-radius: var(--gux-promien);
  overflow: hidden;
  /* pytamy o szerokość KAFLA, nie okna - patrz @container niżej */
  container-type: inline-size;
}

.gux-kafel-foto-opak { position: relative; flex: 0 0 auto; }
.gux-kafel-foto {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #faf7f8;
}

.gux-plakietka {
  position: absolute; top: 7px; left: 7px; right: 7px;
  width: fit-content; max-width: calc(100% - 14px);
  padding: 3px 8px; border-radius: 20px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Zieleń zarezerwowana dla progów - to jedyna plakietka obiecująca korzyść.
   Popularność jest informacją, więc dostaje neutralną, ciemną. */
.gux-plakietka--prog { background: var(--gux-zielen); }
.gux-plakietka--popularne { background: rgba(35, 35, 35, .8); }
.gux-plakietka-krotka { display: none; }

.gux-kafel-tresc { display: flex; flex-direction: column; flex: 1; padding: 10px 10px 11px; }
.gux-rek a.gux-kafel-nazwa {
  display: block; font-size: 12px; line-height: 1.4; font-weight: 500; margin: 0 0 4px;
  color: var(--gux-atrament);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gux-rek a.gux-kafel-nazwa:hover { color: var(--gux-brand); }
.gux-kafel-foto-opak { display: block; }
.gux-kafel-foto { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .gux-kafel:hover .gux-kafel-foto { transform: scale(1.03); }
}
.gux-kafel-cena {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; white-space: nowrap;
}

/* Spód trzyma się dołu, więc przyciski w całym rzędzie stoją w jednej linii. */
.gux-kafel-spod { margin-top: auto; padding-top: 9px; }

.gux-opcje { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; }
/* kafel bez opcji dostaje pusty odstęp tej samej wysokości */
.gux-opcje-miejsce { height: 22px; margin: 0 0 6px; }
.gux-opcje-etykieta {
  flex: 0 0 auto; white-space: nowrap; font-size: 10.5px; color: var(--gux-przygaszony);
}

.gux-kolor {
  position: relative;
  width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gux-ramka); flex: 0 0 auto;
}
/* Strefa dotyku 42 px bez zmiany wyglądu. Samo kółko ma 16-18 px, czyli
   ułamek celu wymaganego dla palca - klient w nie pudłował, a to jest
   kontrolka, o którą właściciel prosił wprost. */
.gux-kolor::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.gux-dedykacja { position: relative; }
.gux-dedykacja::after { content: ''; position: absolute; inset: -9px -4px; }
.gux-modal-zamknij { position: relative; }
.gux-modal-zamknij::after { content: ''; position: absolute; inset: -6px; }
.gux-kolor[data-kolor="zloty"]   { background: linear-gradient(140deg, #e8c87a, #b8912f); }
.gux-kolor[data-kolor="srebrny"] { background: linear-gradient(140deg, #ececec, #b6b6b6); }
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-kolor:hover { border-color: var(--gux-brand); }
}
.gux-rek button.gux-kolor[data-kolor="zloty"]   { background: linear-gradient(140deg, #e8c87a, #b8912f) !important; }
.gux-rek button.gux-kolor[data-kolor="srebrny"] { background: linear-gradient(140deg, #ececec, #b6b6b6) !important; }
/* Ta reguła MUSI być mocniejsza niż zerowanie box-shadow w bloku „anty-motyw"
   wyżej (0,2,1) - inaczej nie widać, który wariant jest wybrany. */
.gux-rek button.gux-kolor[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gux-brand) !important;
}

.gux-wybor {
  min-width: 0; max-width: 62%; margin-left: auto; padding: 0 4px;
  /* ⚠ 16 px to WYMÓG, nie estetyka: Safari na iOS automatycznie przybliża
     stronę przy dotknięciu pola o mniejszym foncie i sam się nie cofa -
     klient zostaje z powiększonym fragmentem w środku zakupu. */
  min-height: 34px; line-height: 1.2;
  font-family: inherit; font-size: 16px; color: var(--gux-atrament);
  background: #fff; border: 1px solid var(--gux-ramka); border-radius: 7px; cursor: pointer;
}

.gux-dedykacja {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: auto; margin: 0 0 0 auto; padding: 4px 7px;
  font-family: inherit; font-size: 9.5px; font-weight: 600; line-height: 1.25;
  color: var(--gux-brand); background: #fff;
  border: 1px dashed #d9c6ce; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: background .18s, border-color .18s;
}
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-dedykacja:hover {
  background: var(--gux-szyna) !important; border-color: var(--gux-brand);
  color: var(--gux-brand) !important;
}
}
.gux-dedykacja svg { width: 12px; height: 12px; flex: 0 0 auto; }
.gux-dedykacja--wybrana { border-style: solid; border-color: var(--gux-brand); background: var(--gux-szyna); }
.gux-dedykacja-krotka { display: none; }

.gux-dodaj {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--gux-brand); border: 0; border-radius: 9px; cursor: pointer;
  white-space: nowrap; transition: filter .18s;
}
@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-dodaj:hover:not(:disabled) {
  background: var(--gux-brand) !important; color: #fff !important; filter: brightness(1.12);
}
}
.gux-rek button.gux-dodaj--zrobione,
.gux-rek button.gux-dodaj--zrobione:hover { background: var(--gux-zielen) !important; }
/* Odnośnik na kartę produktu dla rzeczy, których nie da się dodać jednym
   kliknięciem (grawer, dedykacja, wariant bez koloru). Wygląda jak CTA, bo
   pełni tę samą rolę, ale odróżnia się obramowaniem - klient ma wiedzieć,
   że to krok dalej, a nie zakup od razu. */
.gux-rek a.gux-dodaj--karta {
  text-decoration: none;
  color: var(--gux-brand); background: #fff;
  border: 1px solid var(--gux-brand);
}

.gux-dodaj:disabled { opacity: .75; cursor: default; }
.gux-dodaj svg { width: 13px; height: 13px; flex: 0 0 auto; }
.gux-dodaj--zrobione { background: var(--gux-zielen); }

/* ── zestawy ────────────────────────────────────────────────────────────── */
/* Zestawy siedzą teraz w kolumnie koszyka, nie na pełnej szerokości - dwa
   obok siebie zrobiłyby z nich nieczytelne paski. */
/* Jeden zestaw na slajd, z wystającym brzegiem następnego. Dwie rozpisane
   karty jedna pod drugą zajmowały pół ekranu. */
.gux-karuzela--zestawy { grid-auto-columns: calc(100% - 34px); align-items: start; }
.gux-karuzela--zestawy .gux-zestaw { scroll-snap-align: start; }
/* Krótszy zestaw NIE jest rozciągany do wysokości najwyższego slajdu.
   Bez `align-items: start` karta „Masz już wszystko - włącz rabat" miała na
   telefonie ~150 px pustki między ceną a przyciskiem, bo `margin-top: auto`
   na przycisku spychało go na sam dół rozciągniętego kafla (26.08.2026). */
.gux-karuzela--zestawy .gux-zestaw-cta { margin-top: 14px; }

.gux-zestaw {
  display: flex; flex-direction: column;
  padding: 16px; background: #fff;
  border: 1px solid var(--gux-ramka); border-radius: var(--gux-promien);
  box-shadow: 0 1px 2px rgba(35, 26, 30, .04);
}

.gux-zestaw-gora { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.gux-rek p.gux-zestaw-nazwa { font-size: 14.5px; font-weight: 600; margin: 0; }
.gux-rek p.gux-zestaw-opis { font-size: 11.5px; color: var(--gux-przygaszony); margin: 2px 0 0; }
.gux-zestaw-rabat {
  margin-left: auto; flex: 0 0 auto; padding: 3px 9px; border-radius: 20px;
  background: #fdeef2; color: var(--gux-akcent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.gux-zestaw-fotki { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.gux-zestaw-foto-opak {
  display: block; flex: 0 0 auto; overflow: hidden;
  border: 1px solid var(--gux-ramka); border-radius: 8px; background: #faf7f8;
}
/* `aspect-ratio` zamiast `height`, bo `.gux-rek img { height: auto }` ma
   specyficzność (0,1,1) i BIŁO tutejsze `height: 68px` (0,1,0) - mimo że stoi
   200 linii wyżej. Miniatury nie były więc kwadratowe, a `object-fit: cover`
   nie miał czego przycinać. `aspect-ratio` nie jest w tym konflikcie. */
.gux-zestaw-foto {
  display: block; width: 68px; aspect-ratio: 1; height: auto; object-fit: cover;
  transition: transform .35s ease;
}
.gux-zestaw-foto-opak:hover .gux-zestaw-foto { transform: scale(1.06); }
.gux-plus { color: #c9b3bc; font-size: 15px; flex: 0 0 auto; }

.gux-zestaw-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gux-zestaw-poz { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.gux-zestaw-poz-nazwa {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gux-w-koszyku {
  margin-left: 6px; padding: 1px 6px; border-radius: 20px;
  background: var(--gux-szyna); color: var(--gux-przygaszony);
  font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.gux-zestaw-poz-cena {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--gux-przygaszony);
}
.gux-zestaw-poz-cena s { margin-right: 5px; color: #bcaab2; }
.gux-zestaw-poz-cena b { font-weight: 600; color: var(--gux-atrament); }

.gux-zestaw-opcje {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 2px 12px; margin: -2px 0 4px;
  border-left: 2px solid var(--gux-szyna);
}
.gux-zestaw-opcje .gux-opcje { margin: 0; }
.gux-zestaw-opcje .gux-wybor { margin-left: 0; max-width: 150px; }
.gux-zestaw-opcje .gux-dedykacja { margin-left: 0; }

.gux-zestaw-suma {
  display: flex; align-items: baseline; gap: 9px;
  padding-top: 12px; border-top: 1px solid var(--gux-szyna); margin-bottom: 10px;
}
.gux-zestaw-suma-nowa {
  /* Playfair ma cyfry nautyczne (różnej wysokości) - w kwotach wygląda to
     na literówkę, więc wszystkie liczby idą Montserratem. */
  font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.gux-zestaw-suma-stara { font-size: 13px; color: var(--gux-przygaszony); }
.gux-zestaw-oszczedzasz {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--gux-akcent);
}

.gux-zestaw-zysk {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 12px;
  background: #f0f6f2; border-radius: 8px;
  font-size: 11.5px; color: var(--gux-zielen); font-weight: 500;
}
.gux-zestaw-zysk svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* `display:flex` wygrywa z atrybutem `hidden` - bez tej reguly pusty pasek
   korzysci zajmowalby miejsce i rysowal sam ptaszek. */
.gux-zestaw-zysk[hidden] { display: none; }
.gux-zestaw-cta { margin-top: auto; }

/* ── modal dedykacji ────────────────────────────────────────────────────── */
.gux-modal-tlo {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.gux-modal {
  width: 100%; max-width: 460px; max-height: 76vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; overflow: hidden;
  font-family: Montserrat, sans-serif;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.gux-modal-gora {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--gux-ramka);
}
.gux-modal-tytul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gux-modal-tytul strong { font-size: 14.5px; font-weight: 600; color: var(--gux-atrament); }
.gux-modal-produkt {
  font-size: 11.5px; color: var(--gux-przygaszony);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gux-modal-zamknij {
  width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--gux-przygaszony); background: none;
  border: 1px solid var(--gux-ramka); border-radius: 8px; cursor: pointer;
}
.gux-modal-zamknij svg { width: 14px; height: 14px; }
.gux-modal button.gux-modal-zamknij:hover {
  background: var(--gux-szyna) !important; color: var(--gux-atrament) !important;
}
.gux-modal-lista {
  /* Bez tego doscrollowanie listy dedykacji do końca przewija stronę pod
     spodem, a po zamknięciu modala klient jest w innym miejscu koszyka. */
  overscroll-behavior: contain;
  /* Bez min-height:0 element flex NIE zejdzie poniżej wysokości treści
     i lista wyleje się poza okno zamiast się przewijać. */
  min-height: 0; overflow-y: auto;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.gux-tresc {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.4; color: var(--gux-atrament);
  background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.gux-modal button.gux-tresc:hover {
  background: var(--gux-szyna) !important; color: var(--gux-atrament) !important;
}
.gux-tresc-znacznik {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid #cbb8c0; position: relative;
}
.gux-tresc-tekst { flex: 1; min-width: 0; }
.gux-tresc--wybrana { border-color: var(--gux-brand); background: var(--gux-szyna); font-weight: 600; }
.gux-tresc--wybrana .gux-tresc-znacznik { border-color: var(--gux-brand); }
.gux-tresc--wybrana .gux-tresc-znacznik::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gux-brand);
}
.gux-tresc--brak { margin-bottom: 4px; color: var(--gux-przygaszony); }

/* ── komunikat o błędzie ────────────────────────────────────────────────── */
.gux-blad {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); transform: translateX(-50%);
  z-index: 100001; max-width: 90vw;
  padding: 11px 16px; border-radius: 10px;
  background: #2b1116; color: #fff;
  font-family: Montserrat, sans-serif; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* ── wybór zawieszki ────────────────────────────────────────────────────────
   Zamiast listy rozwijanej: przycisk z MINIATURĄ i nazwą, a pod nim siatka
   zdjęć. Nazwa „Złote kółeczko" nic klientowi nie mówi, dopóki tego nie widzi;
   na telefonie natywna lista pokazywała wyłącznie tekst.
   ══════════════════════════════════════════════════════════════════════════ */
.gux-zawieszka {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: 40px; padding: 4px 8px 4px 4px;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
  text-align: left; color: var(--gux-atrament); background: #fff;
  border: 1px solid var(--gux-ramka); border-radius: 9px; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.gux-zawieszka svg {
  width: 12px; height: 12px; flex: 0 0 auto; margin-left: auto;
  color: var(--gux-przygaszony);
}
.gux-zaw-nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gux-zaw-foto {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 7px; object-fit: cover; background: #f7f3f0;
}
/* Zdjęcie mamy tylko złote - srebro oddajemy filtrem na tym samym kształcie.
   W oknie wyboru jest o tym zdanie wprost, żeby nikt nie poczuł się oszukany.
   Wartości dobrane porównawczo na telefonie (26.08.2026): przy rozjaśnianiu
   (brightness 1.1) zawieszka znikała na jasnym tle tacki - trzeba ODJĄĆ jasność
   i DODAĆ kontrast, żeby srebro w ogóle było widoczne. */
.gux-zaw-foto--srebro { filter: grayscale(1) brightness(.93) contrast(1.28); }
.gux-zaw-foto--brak { display: block; }

/* Rząd opcji MUSI się zawijać: kolor + zawieszka + dedykacja nie zmieszczą się
   obok siebie w kaflu szerokim na ~150 px. Bez tego zawieszka wypychała
   dedykację poza kafel (zgłoszenie 26.08.2026). */
.gux-opcje { flex-wrap: wrap; }
.gux-opcje > .gux-zawieszka { flex: 1 1 100%; margin-top: 3px; }

@media (hover: hover) and (pointer: fine) {
  .gux-rek button.gux-zawieszka:hover { border-color: var(--gux-brand); background: var(--gux-szyna) !important; }
}

.gux-modal--zawieszki { max-width: 430px; }
.gux-zaw-siatka {
  overscroll-behavior: contain;
  min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 12px;
}
.gux-zaw {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 5px 9px; cursor: pointer;
  font-family: inherit; font-size: 10.5px; line-height: 1.3; text-align: center;
  color: var(--gux-atrament); background: #fff;
  border: 1px solid var(--gux-ramka); border-radius: 11px;
}
.gux-zaw .gux-zaw-foto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 9px; }
.gux-zaw--wybrana { border-color: var(--gux-brand); background: var(--gux-szyna); font-weight: 600; }
.gux-modal button.gux-zaw:hover { border-color: var(--gux-brand) !important; }
.gux-zaw-podpis { display: block; }
.gux-zaw-nota {
  margin: 0; padding: 0 14px 14px;
  font-size: 11px; line-height: 1.45; color: var(--gux-przygaszony);
}

/* ── wąski ekran ────────────────────────────────────────────────────────────
   Przy dwóch kaflach w rzędzie zostaje ok. 140 px na kafel. Pełne
   „Dodaj do koszyka" z ikoną się tam nie mieści, więc ikona schodzi,
   krój maleje, a plakietka ma wersję krótką.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .gux-karuzela { overscroll-behavior-x: contain; grid-auto-columns: calc((100% - 10px) / 1.7); gap: 10px; }
  .gux-zakladka { padding: 9px 10px; font-size: 12px; gap: 5px; }
  .gux-zakladka-odznaka { font-size: 11px; padding: 2px 6px; }
  .gux-strzalka { width: 28px; height: 28px; }
  .gux-zestaw { padding: 13px; }
  .gux-zestaw-foto { width: 54px; }
  .gux-karuzela--zestawy { grid-auto-columns: calc(100% - 22px); }
  .gux-kafel-tresc { padding: 9px 8px 10px; }
  .gux-plakietka { font-size: 10.5px; padding: 2px 6px; letter-spacing: .02em; top: 6px; left: 6px; }   /* 8 px wersalikami na zdjęciu było nieczytelne */
  .gux-plakietka-pelna { display: none; }
  .gux-plakietka-krotka { display: inline; }
  .gux-dodaj { font-size: 12.5px; padding: 9px 4px; gap: 0; }   /* było 10,5 - to jest przycisk, po który istnieje cały widżet */
  .gux-dodaj svg { display: none; }
  .gux-zestaw-cta { font-size: 11.5px; padding: 10px 6px; white-space: normal; }
  .gux-dedykacja { font-size: 11px; padding: 6px 8px; }
  .gux-opcje-etykieta { font-size: 11px; }
  .gux-kolor { width: 16px; height: 16px; }
  .gux-wybor { max-width: 52%; }   /* font zostaje 16 px - patrz komentarz przy .gux-wybor */
  .gux-zawieszka { font-size: 11.5px; min-height: 42px; }
  .gux-zaw-foto { width: 34px; height: 34px; }
  .gux-zaw-siatka { gap: 7px; padding: 10px; }
  .gux-zaw { font-size: 10px; padding: 7px 3px 8px; }
  .gux-zestaw-suma-nowa { font-size: 20px; }
}

/* Podpisy skracają się wtedy, gdy naprawdę brakuje miejsca w KAFLU - nie gdy
   wąskie jest okno. Kafel w kolumnie koszyka bywa węższy niż na telefonie. */
@container (max-width: 216px) {
  .gux-dedykacja-pelna { display: none; }
  .gux-dedykacja-krotka { display: inline; }
  /* Przy zawiniętym rzędzie „margin-left: auto" przyklejałby dedykację do
     prawej krawędzi jako samotny guzik - w wąskim kaflu ma być pełną belką. */
  .gux-opcje > .gux-dedykacja { flex: 1 1 100%; margin-left: 0; margin-top: 3px; }
}
@container (max-width: 168px) {
  .gux-opcje-etykieta { display: none; }
  .gux-dedykacja { padding: 4px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gux-rek *, .gux-modal * { transition: none !important; scroll-behavior: auto !important; }
}