/*
 * Ścieżka zakupowa: koszyk i checkout.
 * Figma: 7088:1186 (pusty) · 7183:4467 (poniżej progu) · 7183:5244 (kupon).
 * Ładowane TYLKO na koszyku i checkoucie (inc/koszyk.php).
 */

/* ── Nagłówek uproszczony: bez wyszukiwarki, pigułek i menu kategorii ──────
   Klient w koszyku ma kupić, nie wychodzić. Zgodne z Figmą i dokumentacją. */
body.woocommerce-cart .cg-search,
body.woocommerce-cart .cg-actions,
body.woocommerce-cart .cg-burger,
body.woocommerce-cart .cg-nav__left,
body.woocommerce-cart .cg-cats,
body.woocommerce-checkout .cg-search,
body.woocommerce-checkout .cg-actions,
body.woocommerce-checkout .cg-burger,
body.woocommerce-checkout .cg-nav__left,
body.woocommerce-checkout .cg-cats { display: none; }
/* `.cg-nav__left` (hamburger + lupka) też wychodzi: samo ukrycie hamburgera zostawiało
   na mobile samotną lupkę obok logo, a Figma 8011:4910 ma w tym miejscu WYŁĄCZNIE logo. */

/* ── Pasek kroków (Koszyk → Płatność → Gotowe) ────────────────────────────
   JS przenosi go do nagłówka obok logo (tak jest w Figmie). Bez JS zostaje
   pod nagłówkiem — nadal czytelny, nic się nie psuje. */
.cg-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  flex: 1;
  max-width: 1000px;
  margin-left: 64px;
}
.cg-progress:not(.is-in-header) {
  max-width: none;
  margin: 0 auto;
  padding: 20px 160px;
  background: var(--cg-green-gradient, #12472B);
}
.cg-progress__item { display: flex; flex-direction: column; gap: 6px; }
.cg-progress__label { font-size: 13px; color: rgba(255,255,255,.85); }
.cg-progress__sub   { font-size: 12px; color: rgba(255,255,255,.5); }
.cg-progress__bar {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.18);
}
.cg-progress__item.is-active .cg-progress__bar,
.cg-progress__item.is-done .cg-progress__bar { background: var(--cg-gold-gradient, #C18C21); }
.cg-progress__item.is-active .cg-progress__label,
.cg-progress__item.is-done .cg-progress__label { color: #fff; }

/* Tytuł strony z index.php („Koszyk") dubluje nasz własny nagłówek — chowamy.
   index.php jest plikiem wspólnym, więc nie ruszamy go; wystarczy CSS. */
body.woocommerce-cart .cg-entry > h1,
body.woocommerce-checkout .cg-entry > h1 { display: none; }
body.woocommerce-cart .cg-page,
body.woocommerce-checkout .cg-page { padding-top: 0; }

/* ── Nagłówek koszyka ─────────────────────────────────────────────────────── */
.cg-cart { padding: 48px 0 64px; }
.cg-cart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.cg-cart__title { margin: 0; font-size: 32px; letter-spacing: var(--cg-tracking); }
.cg-cart__count { margin: 4px 0 0; font-size: 14px; opacity: .6; }

/* „Aktualizacja cen: 53s temu" — Figma 7183:4467.
   To NIE to samo, co zamrożenie ceny: plakietka mówi, jak świeża jest cena,
   a licznik przy pozycji — jak długo jest gwarantowana. */
.cg-cart__refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--cg-line, rgba(0,0,0,.1));
  border-radius: 40px;
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}
.cg-cart__refresh strong { font-variant-numeric: tabular-nums; }

/* ── Siatka: pozycje + podsumowanie ───────────────────────────────────────── */
.cg-cart__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}

.cg-cart__items {
  padding: 8px 24px 24px;
  border-radius: 16px;
  background: #F7F7F5;
}
.cg-cart__cols {
  display: grid;
  grid-template-columns: 1fr 120px 140px 32px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--cg-line, rgba(0,0,0,.08));
  font-size: 13px;
  opacity: .55;
}
.cg-cart__row {
  display: grid;
  grid-template-columns: 1fr 120px 140px 32px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--cg-line, rgba(0,0,0,.06));
}
.cg-cart__row:last-of-type { border-bottom: 0; }

.cg-cart__product { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cg-cart__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.cg-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cg-cart__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-cart__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.cg-cart__name a { color: inherit; text-decoration: none; }
.cg-cart__name a:hover { color: var(--cg-gold, #C18C21); }
.cg-cart__unit { font-size: 12px; color: var(--cg-gold, #C18C21); }

/* Licznik sztuk — pigułka „− N +" (Figma 7183:4467), kompaktowa wersja .cg-qty
   z karty produktu; kolumna ma 120px, więc mniejsza niż na stronie produktu. */
.cg-cart__qty-stepper { height: 40px; }
.cg-cart__qty-stepper .cg-qty__btn { width: 32px; height: 38px; font-size: 18px; line-height: 1; }
.cg-cart__qty-stepper .cg-qty__input { width: 32px; height: 38px; font-size: 14px; }
.cg-cart__qty-stepper .cg-qty__input:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 1px; }

/* Plakietka kwoty — złota, jak w Figmie */
.cg-price-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 40px;
  background: var(--cg-gold-10, rgba(193,140,33,.1));
  color: var(--cg-gold, #C18C21);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.cg-price-pill.is-free { background: rgba(18,71,43,.08); color: #12472B; }
.cg-price-pill .woocommerce-Price-amount { color: inherit; }

.cg-cart__x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(0,0,0,.35);
  font-size: 20px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.cg-cart__x:hover { background: rgba(0,0,0,.06); color: #C83C28; }

/*
 * „Przelicz koszyk" pokazuje się dopiero, gdy klient zmieni ilość (JS) — ale TYLKO gdy
 * JS w ogóle wystartował (klasa `cg-js` z `header.php`, ustawiana synchronicznie przed
 * pierwszym malowaniem strony). FUN-17 (audyt QA funkcjonalne 21.08): wcześniej
 * `display: none` był bezwarunkowy — bez JS przycisk zostawał niewidoczny NA ZAWSZE,
 * a `.cg-qty__input` i tak wysyła formularz submitem (`type="submit"` na tym przycisku,
 * `name="update_cart"` — WooCommerce rozumie to natywnie), więc bez JS to jedyna droga
 * do zatwierdzenia zmienionej ilości. Domyślnie (bez `cg-js`) przycisk jest zwykłym,
 * widocznym elementem `<button>` — nic tu go nie chowa.
 */
html.cg-js .cg-cart__update { display: none; }
html.cg-js .cg-cart__update.is-visible { display: inline-block; }
.cg-cart__update {
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid var(--cg-gold, #C18C21);
  border-radius: 40px;
  background: transparent;
  color: var(--cg-gold, #C18C21);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cg-cart__update:hover { background: var(--cg-gold, #C18C21); color: #fff; }

/* ── Podsumowanie ─────────────────────────────────────────────────────────── */
.cg-summary {
  position: sticky;
  top: 24px;
  padding: 24px;
  border-radius: 16px;
  background: #F7F7F5;
}
.cg-summary.is-disabled { opacity: .45; pointer-events: none; }
.cg-summary__title { margin: 0 0 16px; font-size: 18px; letter-spacing: var(--cg-tracking); }

/* Pasek postępu do darmowej wysyłki */
.cg-ship {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #EAEAE7;
  overflow: hidden;
  font-size: 13px;
}
.cg-ship__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(18,71,43,.16), rgba(18,71,43,.28));
  transition: width .4s ease;
}
.cg-ship.is-free .cg-ship__fill { background: #12472B; }
.cg-ship__text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.cg-ship__text strong { color: var(--cg-gold, #C18C21); font-weight: 600; }
.cg-ship.is-free .cg-ship__text { color: #fff; }
.cg-ship__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: 12px;
}

.cg-summary__rows { margin: 0 0 16px; }
.cg-summary__rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.cg-summary__rows dt { font-size: 13px; opacity: .7; }
.cg-summary__rows dd { margin: 0; }

/* Kupon */
.cg-coupon {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--cg-line, rgba(0,0,0,.08));
  border-radius: 12px;
  background: #fff;
}
.cg-coupon.is-active { border-color: rgba(18,71,43,.35); }
.cg-coupon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  opacity: .8;
}
.cg-coupon__ok { color: #12472B; font-weight: 600; opacity: 1; }
.cg-coupon__row { display: flex; gap: 8px; align-items: center; }
.cg-coupon__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cg-line, rgba(0,0,0,.12));
  border-radius: 40px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}
.cg-coupon__input:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 1px; }
.cg-coupon__code {
  flex: 1;
  padding: 10px 14px;
  border-radius: 40px;
  background: #F7F7F5;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Suma */
.cg-summary__total {
  padding-top: 16px;
  border-top: 1px solid var(--cg-line, rgba(0,0,0,.08));
}
.cg-summary__total-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: .65;
}
.cg-summary__badge {
  padding: 3px 10px;
  border-radius: 40px;
  background: rgba(18,71,43,.08);
  color: #12472B;
  font-weight: 600;
  opacity: 1;
}
.cg-summary__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.cg-summary__amount strong,
.cg-summary__amount > .woocommerce-Price-amount { font-size: 28px; font-weight: 600; letter-spacing: var(--cg-tracking); }
.cg-summary__amount .woocommerce-Price-amount { font-size: inherit; }
.cg-summary__was { font-size: 14px; opacity: .45; }

/* Przyciski */
.cg-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 0;
  border-radius: 40px;
  background: var(--cg-gold-gradient, #C18C21);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.cg-btn-gold:hover { filter: brightness(1.06); }
.cg-btn-gold:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 3px; }
.cg-btn-gold.is-disabled { opacity: .4; pointer-events: none; }
.cg-summary__cta { width: 100%; }

/* ── Koszyk pusty ─────────────────────────────────────────────────────────── */
.cg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 360px;
  text-align: center;
}
.cg-empty__title { margin: 0; font-size: 22px; letter-spacing: var(--cg-tracking); }
.cg-empty__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #EAEAE7;
  color: rgba(0,0,0,.35);
}
.cg-empty__lead { margin: 0; font-size: 14px; opacity: .6; }

/* ── „Dobierz akcesoria" ──────────────────────────────────────────────────── */
.cg-upsell__title { margin: 0 0 24px; font-size: 28px; letter-spacing: var(--cg-tracking); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cg-progress.is-in-header { display: none; }   /* na telefonie nagłówek jest za ciasny */
  .cg-progress:not(.is-in-header) { padding: 16px var(--pad, 20px); gap: 12px; }

  /* `minmax(0, 1fr)` — patrz uwaga przy `.cg-archive__main .cg-grid`. Samo `1fr`
     nie schodziło poniżej min-content karty i koszyk wystawał o 2 px przy 390 px. */
  .cg-cart__grid { grid-template-columns: minmax(0, 1fr); }
  .cg-summary { position: static; }

  /* ── Koszyk 1:1 z Figmy 8025:5199 ──────────────────────────────────────
     Margines strony 16 (kontener 358). Wiersz produktu 358 × 138 z wyściółką 16,
     odstęp między wierszami 8, miniatura 48 × 48, licznik 102 × 40
     (przyciski 40, pole 22). Podsumowanie i kupon stoją na 358. */
  .cg-cart__items { padding: 0; }

  .cg-cart__cols { display: none; }
  .cg-cart__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product remove"
      "qty     line";
    row-gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    border-bottom: 0;
    border-radius: var(--cg-r-box, 16px);
    background: #fff;
  }
  .cg-cart__row:last-of-type { margin-bottom: 0; }
  .cg-cart__thumb,
  .cg-cart__thumb img { width: 48px; height: 48px; }

  /* `min-width: 0` — ta sama pułapka co przy pasku zakupu: element elastyczny
     ma automatyczne minimum równe treści, więc bez tego pole liczby rozpycha
     licznik ponad 102 px. */
  /* Rodzic `.cg-cart__qty` jest blokiem, więc `flex-basis` nic by tu nie dało —
     szerokość musi być jawna. `min-width: 0` na dzieciach, bo pole liczby ma
     min-content szerszy niż jego udział (ta sama pułapka co przy pasku zakupu). */
  .cg-cart__qty-stepper { width: 102px; box-sizing: border-box; height: 40px; }
  .cg-cart__qty-stepper .cg-qty__btn { flex: 0 0 40px; width: 40px; height: 38px; }
  .cg-cart__qty-stepper .cg-qty__input { flex: 1 1 auto; width: 0; min-width: 0; height: 38px; }

  /* 🔴 Pole z liczbą sztuk miało 4 px szerokości — liczba była w DOM-ie, ale klient
     jej nie widział. Licznik ma 102 px, dwa przyciski zjadają 80, na środek zostają 22.

     Reguła wyżej ustawia polu `width: 0` i liczy na to, że `flex: 1 1 auto` odzyska
     szerokość — ale to działa tylko dla BEZPOŚREDNIEGO dziecka pojemnika elastycznego.
     WooCommerce wstawia między nie własny `<div class="quantity">`, więc `flex` dotyczy
     tego diva, a do pola dociera samo `width: 0`. Klasyczna pułapka „opakowanie zjada flex":
     reguła wygląda poprawnie w arkuszu i nie działa w przeglądarce.

     Dlatego celujemy w opakowanie (ma rosnąć) i osobno w pole (ma je wypełnić). */
  /* `flex: 1 1 0` — podstawa ZEROWA, nie `auto`. Przy `auto` przeglądarka liczy
     szerokość od treści, a treścią jest pole z `width: 100%` — wychodzi z tego
     błędne koło i pole rozdymało się do 150 px w pojemniku o 102 px, wylewając się
     poza pigułkę. Zerowa podstawa mówi wprost: „weź to, co zostało po przyciskach". */
  /* ⚠️ `.cg-qty` DOKLEJONE do klasy: `.woocommerce-cart-form .quantity` niżej w tym
     pliku (blok koszyka) ma `flex: 0 0 auto` i TĘ SAMĄ specyficzność (0,2,0), więc
     wygrywał kolejnością. Ta sama pułapka, co przy poprzednich poprawkach koszyka —
     reguła wygląda dobrze i po cichu nie działa. */
  .cg-qty.cg-cart__qty-stepper .quantity {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }
  .cg-qty.cg-cart__qty-stepper .quantity .cg-qty__input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .cg-cart__product { grid-area: product; }
  .cg-cart__remove  { grid-area: remove; justify-self: end; }
  .cg-cart__qty     { grid-area: qty; }
  .cg-cart__line    { grid-area: line; justify-self: end; }

  .cg-cart__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cg-summary__amount strong,
  .cg-summary__amount > .woocommerce-Price-amount { font-size: 24px; }
}

/* ── CHECKOUT ─────────────────────────────────────────────────────────────
   Layout 1:1 z Figmy `7834:3342` (dev-mode, 2026-07-28) — 4 sekcje zawsze widoczne,
   bez akordeonu/przycisków „Dalej" (dawniej własny układ, Figma tego ekranu nie miała). */

.cg-checkout { padding: 32px 0 64px; }
.cg-checkout__title { margin: 0 0 24px; font-size: 32px; letter-spacing: var(--cg-tracking); }
.cg-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}
/* ⚠️ WooCommerce wstrzykuje `.woocommerce-NoticeGroup` jako PIERWSZE dziecko `<form>`
   przy każdej nieudanej walidacji (AJAX). Bez tej reguły komunikat zajmuje pierwszą
   komórkę siatki, kroki kasy lecą do kolumny 420 px, a podsumowanie do drugiego wiersza —
   układ rozpadał się przy każdym pustym polu. Zmierzone na 0.44.1, 1440 px. */
.cg-checkout__grid > .woocommerce-NoticeGroup,
.cg-checkout__grid > .woocommerce-error,
.cg-checkout__grid > .woocommerce-message,
.cg-checkout__grid > .woocommerce-info { grid-column: 1 / -1; }

.cg-checkout__summary { position: sticky; top: 24px; }
.cg-checkout__steps { display: flex; flex-direction: column; gap: 16px; }

.cg-cstep {
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  padding: 32px;
}

.cg-cstep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
  list-style: none; /* `<summary>` domyślnie rysuje trójkąt — na desktopie akordeon jest
                        wyłączony (JW: wszystkie sekcje zawsze otwarte), więc marker jest
                        martwym elementem UI. */
  cursor: default;
}
.cg-cstep__head::-webkit-details-marker { display: none; }
/* ⚠️ Strzałka i „Przejdź dalej" istnieją TYLKO na telefonie — muszą być schowane TUTAJ,
   przed blokiem mobilnym. Postawione po nim wygrałyby równą specyficznością (jedna klasa
   każda) i przycisk zniknąłby także na mobile, mimo `display: flex` w media query. */
.cg-cstep__arrow { display: none; }
.cg-cstep__next { display: none; }
.cg-cstep__title { display: flex; align-items: center; gap: 12px; }
.cg-cstep__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cg-gold-gradient, #C18C21);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.cg-cstep__label { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }

.cg-cstep__body { display: block; }

/* Zakładka Osoba prywatna / Firma (Figma 7834:3906)
   ⚠️ Selektor MUSI być zawężony do `[data-cg-billing-tabs]`. Klasa `.cg-tabs` ma
   w tym motywie dwa niezależne znaczenia: ten przełącznik w kasie ORAZ zakładki
   Opis/Informacje/Wysyłka na karcie produktu i w „Moich inwestycjach"
   (`[data-tabs]`, style w tym pliku ok. 1209). Gdy reguła stała tu bez zawężenia,
   `display: flex` wyciekał na kartę produktu i ustawiał nawigację obok panelu
   zamiast nad nim — zmierzone: nav 255 px z lewej, przyciski 1314 px wysokości,
   i tak samo przy 390 px, jak przy 1440 px. */
.cg-tabs[data-cg-billing-tabs] {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
}
.cg-tabs__item {
  flex: 1;
  padding: 9px 16px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,.3);
  cursor: pointer;
  white-space: nowrap;
}
.cg-tabs__item.is-active { background: #fff; color: #000; }
.cg-tabs__item:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: -2px; }

/* Pole firmowe (NIP/nazwa firmy) — widoczne tylko pod zakładką „Firma" */
.cg-checkout .form-row.cg-field--company[hidden],
.cg-checkout .cg-field--company[hidden] { display: none; }

.cg-newsletter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  opacity: .8;
  cursor: pointer;
}
.cg-newsletter-opt input { width: 16px; height: 16px; }

/* FUN-05 — zgoda na regulamin. Wyróżniona wobec opcjonalnego newslettera obok:
   to pole blokuje zakup, więc nie może wyglądać jak kolejna dobrowolna zgoda. */
.cg-terms {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-card, 16px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
.cg-terms__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}
.cg-terms__box {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;   /* optycznie do pierwszej linii tekstu, nie do środka bloku */
  accent-color: var(--cg-gold, #C18C21);
}
.cg-terms__text a { color: var(--cg-gold, #C18C21); text-decoration: underline; }
.cg-terms .required { color: #F44336; text-decoration: none; border: 0; }
/* Tekst polityki prywatności z rdzenia Woo (`woocommerce-privacy-policy-text`) —
   mniejszy i przygaszony, żeby nie konkurował z samą zgodą. */
.cg-terms .woocommerce-privacy-policy-text p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
}

/* Pola formularza */
.cg-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}
.cg-checkout label { font-size: 13px; opacity: .75; }
.cg-checkout .required { color: #C83C28; text-decoration: none; }
.cg-checkout input[type="text"],
.cg-checkout input[type="email"],
.cg-checkout input[type="tel"],
.cg-checkout input[type="password"],
.cg-checkout textarea,
.cg-checkout select,
.cg-checkout .select2-selection {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--cg-line, rgba(0,0,0,.14));
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
/* ⚠️ Reguła wyżej PRZEGRYWA z WooCommerce: `.woocommerce form .form-row .input-text`
   ma wagę (0,3,1), a `.cg-checkout input[type=…]` tylko (0,2,1). Do 0.44.1 pola miały
   przez to promień 4 px i wcięcie 7 px z arkusza przeglądarki zamiast kształtu z Figmy
   (`min-height` przechodziło, bo Woo go nie ustawia — stąd „wysokość dobra, rogi złe").
   🔴 Pierwsza próba (0.45.0) dokładała samo `.form-row` — to nadal (0,3,0), czyli MNIEJ
   niż Woo, bo w ich selektorze liczy się też element `form`. Trzy klasy nie biją trzech
   klas i elementu. Stąd `.cg-checkout__grid` (klasa na `<form>`): daje (0,4,0). */
.cg-checkout .cg-checkout__grid .form-row .input-text,
.cg-checkout .cg-checkout__grid .form-row select,
.cg-checkout .cg-checkout__grid .form-row .select2-selection {
  padding: 10px 16px;
  border-radius: 12px;
}

.cg-checkout textarea { min-height: 90px; resize: vertical; }
.cg-checkout input:focus-visible,
.cg-checkout select:focus-visible,
.cg-checkout textarea:focus-visible {
  outline: 2px solid var(--cg-gold, #C18C21);
  outline-offset: 1px;
}

/* Błąd walidacji — czerwona ramka + zdanie, co poprawić */
.cg-checkout .form-row.has-error input,
.cg-checkout .form-row.has-error select { border-color: #C83C28; }
.cg-err { font-size: 12px; color: #C83C28; }

/* Odbiór w oddziale */
.cg-pickup {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid rgba(18,71,43,.25);
  border-radius: 12px;
  background: rgba(18,71,43,.04);
}
.cg-pickup__note { margin: 8px 0 0; font-size: 12px; opacity: .7; }

/* Metody dostawy (Figma 7900:6260/6487/6603) — karty w rzędzie, wybrana ma złotą ramkę */

/* 🔴 WooCommerce oddaje metody dostawy jako `<tr>` z `<td>` (fragment tabeli podsumowania),
   a my przenosimy ten węzeł JS-em do `<div>`. Osierocony `<tr>` zachowuje `display:table-row`,
   więc przeglądarka buduje wokół niego anonimową tabelę, a `<td>` **kurczy się do treści**
   (zmierzone na żywo: 327px w sekcji szerokiej na 852px) — rząd kafli nie ma się gdzie zmieścić
   i zawija się w pionową listę. Sprowadzamy oba do bloku, żeby `ul` dostał pełną szerokość. */
#cg-shipping-methods .woocommerce-shipping-totals,
#cg-shipping-methods tr { display: block; }
#cg-shipping-methods td { display: block; width: 100%; padding: 0; }

#cg-shipping-methods ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
#cg-shipping-methods li {
  position: relative;
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
#cg-shipping-methods li:has( input:checked ) { border-color: var(--cg-gold, #C18C21); }
#cg-shipping-methods li input[type="radio"] { position: absolute; top: 10px; left: 10px; margin: 0; }
/* Padding siedzi na ETYKIECIE, nie na `li` — inaczej klik w obrzeże karty nic nie robi,
   mimo że kursor obiecuje klikalność (cała karta to punkt wyboru w projekcie).

   ⚠️ Selektor MUSI mieć dwa ID: WooCommerce wysyła własne
   `.woocommerce ul#shipping_method li label { display: inline }` (1 ID + 1 klasa + 3 elementy),
   które bije `#cg-shipping-methods li label`. Bez podbicia ikona ląduje OBOK nazwy zamiast nad
   nią — reszta reguły (padding) i tak działała, więc w kodzie wyglądało to na poprawne.
   Złapane dopiero na stagingu. */
#cg-shipping-methods ul#shipping_method li label,
#cg-shipping-methods li label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 16px;
  font-size: 14px;
  opacity: 1;
  cursor: pointer;
}
.cg-shipping-icon { width: 28px; height: 28px; }
#cg-shipping-methods .woocommerce-shipping-totals th { display: none; }

/* Metody płatności (Figma 7900:6845) — realna bramka + 2 karty „Wkrótce" w tym samym rzędzie */
.cg-payment-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-payment-methods__real { flex: 1 1 160px; }
.cg-payment-methods__preview { display: contents; }

.cg-checkout #payment ul.wc_payment_methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cg-checkout #payment li.wc_payment_method,
.cg-pmethod {
  position: relative;
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.cg-pmethod { padding: 24px 16px 16px; }
.cg-checkout #payment li.wc_payment_method { align-items: stretch; }
.cg-checkout #payment li.wc_payment_method:has( input:checked ) { border-color: var(--cg-gold, #C18C21); }
.cg-checkout #payment li.wc_payment_method > input[type="radio"] { position: absolute; top: 10px; left: 10px; margin: 0; }
.cg-checkout #payment li label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px 16px;
  font-size: 14px;
  opacity: 1;
  cursor: pointer;
}
/* ⚠️ `flex: 1 0 100%` (z układu sprzed kart) w kolumnowym flexie znaczy 100% WYSOKOŚCI,
   nie szerokości — opis metody wylewał się z kafla i zasłaniał sekcję „Finalizuj zakup".
   Złapane na stagingu; w kodzie wyglądało niewinnie, bo wcześniej rodzic był rzędem. */
.cg-checkout #payment .payment_box {
  flex: none;
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #F7F7F5;
  font-size: 13px;
  text-align: left;
}

.cg-pmethod--soon { opacity: .55; cursor: not-allowed; }
.cg-pmethod__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cg-pmethod__icon { width: 28px; height: 28px; }
.cg-pmethod__title { font-size: 14px; font-weight: 600; }
.cg-pmethod__desc { font-size: 11px; line-height: 1.4; opacity: .65; }

/* Zgody i „Kupuję i płacę" */
.cg-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13px; }
.cg-checkout #place_order {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 40px;
  background: var(--cg-gold-gradient, #C18C21);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.cg-checkout #place_order:hover { filter: brightness(1.06); }
/* Strzałka z filtra `woocommerce_order_button_html` (inc/checkout.php, MOB-88):
   w markupie jest zawsze, ale desktop jej nie pokazuje — Figma desktopowa
   (7834:3342) ma przycisk bez strzałki, mobilna (8211:7348) ze strzałką. */
.cg-order-arrow { display: none; }

/* ══ MOB-88 (audyt QA mobile 21.08): CTA finalizacji na telefonie ════════════════
   Audyt: „312x55 r40 pad 16/24, font 15/600, tekst bialy" → Figma: 358x56 r100,
   label 16/500 rgba(0,0,0,0.7) + strzalka 20x20. Token projektu: na złotym
   gradiencie tekst jest CZARNY 70%, nie biały — biel była naszą inwencją.
   Próg 900 px = ten sam co akordeon checkoutu w main.js. Desktop bez zmian. */
@media (max-width: 900px) {
  .cg-checkout #place_order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 56px;
    padding: 0 4px 0 24px;
    border-radius: 100px;
    color: rgba(0, 0, 0, .7);
    font-size: 16px;
    font-weight: 500;
  }
  .cg-order-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    font-size: 20px;
    line-height: 1;
  }
}

/* Podsumowanie zamówienia w prawej kolumnie */
.cg-checkout__summary table { width: 100%; border-collapse: collapse; }
.cg-checkout__summary th,
.cg-checkout__summary td {
  padding: 10px 0;
  border-bottom: 1px solid var(--cg-line, rgba(0,0,0,.06));
  font-size: 13px;
  text-align: left;
}
.cg-checkout__summary td { text-align: right; }
.cg-checkout__summary .order-total td,
.cg-checkout__summary .order-total th { border-bottom: 0; font-size: 18px; }
/* Polski separator tysięcy to spacja ('16 446,54 zł') — bez nowrap przeglądarka łamie
   kwotę w pół przy większych zamówieniach (zdarza się łatwo przy cenach złota). */
.cg-checkout__summary .woocommerce-Price-amount { white-space: nowrap; }

/* Potwierdzenie: odbiór w oddziale */
.cg-pickup-box {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(18,71,43,.25);
  border-radius: 16px;
  background: rgba(18,71,43,.04);
}
.cg-pickup-box h3 { margin: 0 0 8px; font-size: 16px; }
.cg-pickup-box p { margin: 0; font-size: 14px; line-height: 1.5; }

@media (max-width: 1024px) {
  .cg-checkout__grid { grid-template-columns: 1fr; }
  /* Podsumowanie idzie POD kroki — Figma mobile stawia je na y=872, czyli za akordeonem
     (8211:5827 / 8211:6851 / 8211:7018 / 8211:7415). Wcześniejsze `order: -1` („kwota na
     wierzchu") było naszym pomysłem, nie projektem — zdjęte 19.08 decyzją Huberta:
     w tym projekcie wygrywa Figma. */
  .cg-checkout__summary { position: static; }
  .cg-checkout__title { font-size: 24px; }
  .cg-cstep { padding: 20px; }
  .cg-cstep__head { flex-wrap: wrap; }
  #cg-shipping-methods li,
  .cg-checkout #payment li.wc_payment_method,
  .cg-pmethod { flex: 1 1 100%; }
}

/* ── KASA MOBILNA: akordeon (Figma 8158:8829 / 8211:6406 / 8211:6951 / 8211:7348) ──
   Sekcje na telefonie NIE stoją wszystkie otwarte jak na desktopie — jedna naraz,
   podświetlona złoto, reszta zwinięta do samego nagłówka ze strzałką. `main.js`
   (ten sam wzorzec co akordeon stopki) domyka/otwiera `<details>` poniżej 900 px;
   ta reguła odpowiada tylko za WYGLĄD stanu otwarte/zwinięte, nie za logikę.
   Figma: nagłówek otwartej sekcji ma tło `rgba(193,140,33,.1)` (== --cg-gold-10),
   zwinięte `rgba(0,0,0,.05)` (== --cg-black-05) — te same tokeny co gdzie indziej
   w motywie, nie nowe kolory. */
@media (max-width: 900px) {
  .cg-cstep {
    padding: 0;
    border-radius: 12px;
    overflow: hidden; /* tło nagłówka ma równe rogi z kartą, nie kwadratowe wystające */
  }
  .cg-cstep__head {
    cursor: pointer;
    margin: 0;
    padding: 16px 20px;
    background: var(--cg-black-05);
  }
  .cg-cstep[open] > .cg-cstep__head { background: var(--cg-gold-10); }
  .cg-cstep__arrow {
    display: block; flex: 0 0 24px; width: 24px; height: 24px;
    transition: transform .15s ease;
  }
  .cg-cstep[open] .cg-cstep__arrow { transform: rotate(180deg); }
  .cg-cstep__body { padding: 20px; }

  /* Zakładki Osoba prywatna/Firma: na telefonie Figma (8194:10165) stawia je jako
     PIERWSZY element panelu, nie obok tytułu w nagłówku — przenosi je tam `main.js`
     (ten sam wzorzec `moveInto`, którym sklep.js przenosi metody płatności).
     Tu tylko wygląd: pigułka 40 px na tle 5% czerni, aktywna zakładka biała. */
  .cg-cstep__body > .cg-tabs[data-cg-billing-tabs] {
    display: flex; gap: 4px; width: 100%; height: 40px; padding: 4px;
    margin: 0 0 24px;
    background: var(--cg-black-05); border-radius: 8px;
  }
  .cg-cstep__body > .cg-tabs[data-cg-billing-tabs] .cg-tabs__item {
    flex: 1 0 0; border-radius: 4px; background: transparent;
    color: rgba(0, 0, 0, .3); font-size: 14px; letter-spacing: var(--cg-tracking);
  }
  .cg-cstep__body > .cg-tabs[data-cg-billing-tabs] .cg-tabs__item.is-active {
    background: #fff; color: var(--cg-black, #000);
  }

  /* Pola: na telefonie Figma (8194:10174) ma pigułki 56 px z pełnym zaokrągleniem
     i obrysem 20% czerni — desktop zostaje na prostokątach 44 px / promień 12 px. */
  .cg-checkout input[type="text"],
  .cg-checkout input[type="email"],
  .cg-checkout input[type="tel"],
  .cg-checkout input[type="password"],
  .cg-checkout select,
  .cg-checkout .select2-selection {
    min-height: 56px;
    padding: 10px 20px;
    border-radius: 56px;
    border-color: rgba(0, 0, 0, .2);
  }
  /* Ta sama walka o wagę co na desktopie — patrz komentarz przy regule 44 px. */
  .cg-checkout .cg-checkout__grid .form-row .input-text,
  .cg-checkout .cg-checkout__grid .form-row select,
  .cg-checkout .cg-checkout__grid .form-row .select2-selection {
    padding: 10px 20px;
    border-radius: 56px;
  }

  /* „Przejdź dalej" — złoty gradient, pełna szerokość, 56 px (Figma 8211:5679). */
  .cg-cstep__next {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 56px; margin-top: 24px; padding-inline: 32px;
    border: 0; border-radius: 56px; cursor: pointer;
    background-image: var(--cg-gold-gradient);
    color: rgba(0, 0, 0, .7); font: inherit; font-size: 16px; font-weight: 500;
    letter-spacing: var(--cg-tracking);
  }
}

/* ── WYSUWANY PANEL KOSZYKA ───────────────────────────────────────────────
   Po dodaniu produktu strona się NIE przeładowuje. Przeładowanie wyrzuca klienta
   z miejsca, w którym był — przy kilkuset produktach to realna strata. */

.cg-drawer { position: fixed; inset: 0; z-index: 9999; }
.cg-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s ease;
}
.cg-drawer.is-open .cg-drawer__backdrop { opacity: 1; }

.cg-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100%;
  background: #fff;
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cg-drawer.is-open .cg-drawer__panel { transform: translateX(0); }

.cg-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cg-line, rgba(0,0,0,.08));
}
.cg-drawer__head h2 { margin: 0; font-size: 18px; letter-spacing: var(--cg-tracking); }
.cg-drawer__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(0,0,0,.45);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.cg-drawer__close:hover { background: rgba(0,0,0,.06); }
.cg-drawer__close:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

.cg-drawer__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.cg-drawer__items {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 8px 24px;
  list-style: none;
}
.cg-drawer__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--cg-line, rgba(0,0,0,.06));
}
.cg-drawer__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #F7F7F5;
  overflow: hidden;
}
.cg-drawer__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cg-drawer__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-drawer__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: inherit; text-decoration: none; }
.cg-drawer__name:hover { color: var(--cg-gold, #C18C21); }
.cg-drawer__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.cg-drawer__unit { opacity: .6; }

/* Stepper +/- w panelu — kompaktowa wersja pigułki z karty produktu (.cg-qty). */
.cg-drawer__qty { height: 30px; }
.cg-drawer__qty .cg-qty__btn { width: 30px; height: 28px; font-size: 16px; line-height: 1; }
.cg-drawer__qty .cg-qty__btn:disabled { opacity: .3; cursor: default; }
.cg-drawer__qty .cg-qty__val {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cg-drawer__item.is-busy { opacity: .55; pointer-events: none; } /* żądanie w toku */
.cg-drawer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cg-drawer__price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cg-drawer__x { color: rgba(0,0,0,.3); font-size: 18px; text-decoration: none; }
.cg-drawer__x:hover { color: #C83C28; }

.cg-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  padding: 40px 24px;
  text-align: center;
}
.cg-drawer__empty p { margin: 0; opacity: .6; }

.cg-drawer__foot {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--cg-line, rgba(0,0,0,.08));
  background: #F7F7F5;
}
.cg-drawer__ship { margin: 0 0 12px; font-size: 13px; opacity: .75; }
.cg-drawer__ship strong { color: var(--cg-gold, #C18C21); }
.cg-drawer__ship.is-free { color: #12472B; opacity: 1; font-weight: 600; }
.cg-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 16px;
  font-size: 14px;
}
.cg-drawer__total strong { font-size: 20px; letter-spacing: var(--cg-tracking); }
.cg-drawer__cta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.cg-drawer__cta .cg-btn-ghost { justify-content: center; padding: 14px 16px; }

/* Ikona koszyka „podskakuje" po dodaniu produktu */
@keyframes cg-bump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.14); }
  60%      { transform: scale(.97); }
}
.cg-cart-button.is-bump { animation: cg-bump .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .cg-drawer__panel { transition: none; }
  .cg-cart-button.is-bump { animation: none; }
}

/* ── Mega-menu ─────────────────────────────────────────────────────────────
   Style mega-menu przeniesione 2026-08-10 w całości do `main.css`
   (sekcja „Mega-menu: pozycja, mostek, przejście"). Ten plik nie dotyka `.cg-mega`
   — nie dopisuj tu jego reguł, bo wraca rozjazd dwóch źródeł prawdy. */

/* ── Komunikaty WooCommerce ────────────────────────────────────────────────
   Link „Zobacz koszyk", który WooCommerce dokleja JS-em pod przyciskiem w listingu
   (`a.added_to_cart`), jest u nas zbędny: dodanie produktu wysuwa panel koszyka, a link
   zostawał pod kafelkiem i znikał dopiero przy przeładowaniu strony. Zabieramy go z drogi
   `display:none` — bo wstawia go skrypt WooCommerce, a nie nasz szablon.
   Same komunikaty („dodano do koszyka") gasi `inc/komunikaty.php`; zostają błędy
   i „Usunięto… Cofnij?", i to je stylujemy niżej. */
a.added_to_cart { display: none !important; }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--cg-r-box, 12px);
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  background: #fff;
  color: var(--cg-text, #1A1A1A);
  font-size: var(--cg-fs-body, 15px);
  line-height: var(--cg-lh-body, 1.5);
  list-style: none;
}

.woocommerce-message { border-color: var(--cg-success, #2E7D32); background: var(--cg-success-10, rgba(46, 125, 50, .08)); }
.woocommerce-error   { border-color: #C0392B; background: rgba(192, 57, 43, .07); }

/* QA 2026-09-04 (zrzut: „rozjeżdża się komunikat"): błędy Woo to <ul><li>tekst
   + przycisk</li></ul>. Flex wyżej działa na UL, ale treść żyje w LI — przycisk
   „Zobacz koszyk" wystawał poza różową ramkę. LI też dostaje flex (z zawijaniem
   dla długich komunikatów), a przycisk wraca do prawej krawędzi WEWNĄTRZ ramki. */
.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info { flex-wrap: wrap; }

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: auto;
  flex: none;
  padding: 8px 16px;
  border-radius: var(--cg-r-pill, 999px);
  border: 1px solid var(--cg-black-20, rgba(0, 0, 0, .2));
  background: transparent;
  color: inherit;
  font-weight: var(--cg-fw-medium, 500);
  text-decoration: none;
}

/* Przycisk „Dodaj do koszyka" na karcie produktu w trakcie żądania AJAX. */
.cg-atc__submit.is-loading { opacity: .6; pointer-events: none; }

/* ── PODZIĘKOWANIE ZA ZAMÓWIENIE ──────────────────────────────────────────
   ⚠️ Ekranu nie ma w Figmie — układ własny.
   Kolejność bloków niesie treść: najpierw CO ZROBIĆ (zapłać / odbierz), potem GDZIE ŚLEDZIĆ,
   a dopiero na końcu „wróć do sklepu". Domyślny szablon WooCommerce zostawiał klienta z gołą
   tabelą i bez jednego linku wyjścia. */
.cg-thanks { padding: 32px 0 72px; }

.cg-thanks__card {
  position: relative;
  padding: 32px 36px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-card, 16px);
  background: #fff;
  box-shadow: var(--cg-shadow-card, 0 2px 16px rgba(0, 0, 0, .06));
}

.cg-thanks__card--failed { border-color: #C0392B; }

.cg-thanks__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--cg-r-round, 50%);
  background: var(--cg-success-10, rgba(46, 125, 50, .1));
  color: var(--cg-success, #2E7D32);
  font-size: 22px;
}

.cg-thanks__title {
  margin: 0 0 8px;
  font-size: var(--cg-fs-h2, 28px);
  line-height: var(--cg-lh-h2, 1.25);
}

.cg-thanks__lead { margin: 0 0 24px; color: var(--cg-black-30, rgba(0, 0, 0, .55)); }

.cg-thanks__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  list-style: none;
}
.cg-thanks__facts li { display: flex; flex-direction: column; gap: 4px; }
.cg-thanks__facts span { font-size: var(--cg-fs-small, 13px); color: var(--cg-black-30, rgba(0, 0, 0, .55)); }
.cg-thanks__facts strong { font-size: 17px; }

.cg-thanks__next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.cg-thanks__box {
  padding: 24px 28px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-card, 16px);
  background: #fff;
}
.cg-thanks__box h2 { margin: 0 0 10px; font-size: 18px; }
.cg-thanks__box p  { margin: 0 0 14px; color: var(--cg-black-30, rgba(0, 0, 0, .55)); }
.cg-thanks__box--pickup { border-color: var(--cg-gold, #C18C21); }

.cg-thanks__branch { color: var(--cg-text, #1A1A1A) !important; }

/* Brak numeru konta to nie jest „drobiazg do dopisania później" — dopóki firma go nie poda,
   klient musi wiedzieć, co ma zrobić. Dlatego to widoczne ostrzeżenie, a nie cisza. */
.cg-thanks__warn {
  padding: 12px 14px;
  border-radius: var(--cg-r-box, 12px);
  background: var(--cg-gold-10, rgba(193, 140, 33, .1));
  color: var(--cg-text, #1A1A1A) !important;
}

.cg-thanks__contact { display: flex; align-items: center; gap: 16px; font-weight: var(--cg-fw-medium, 500); }
.cg-thanks__contact a { color: var(--cg-gold, #C18C21); text-decoration: none; }
.cg-thanks__contact a:hover { text-decoration: underline; }

.cg-thanks__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Tabela zamówienia z WooCommerce — bez stylu wygląda jak wydruk z bazy danych. */
.cg-thanks .woocommerce-order-details,
.cg-thanks .woocommerce-customer-details {
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-card, 16px);
  background: #fff;
}
.cg-thanks .woocommerce-order-details table,
.cg-thanks .woocommerce-customer-details table { width: 100%; border-collapse: collapse; }
.cg-thanks .woocommerce-order-details th,
.cg-thanks .woocommerce-order-details td {
  padding: 12px 0;
  border-bottom: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  text-align: left;
}
.cg-thanks .woocommerce-order-details tfoot td { font-weight: var(--cg-fw-medium, 500); }

@media (max-width: 900px) {
  .cg-thanks__card  { padding: 24px 20px; }
  .cg-thanks__box   { padding: 20px; }
  .cg-thanks__facts { grid-template-columns: repeat(2, 1fr); }
  .cg-thanks__cta   { flex-direction: column; }
  .cg-thanks__cta a { justify-content: center; text-align: center; }
}

/* Nagłówki tabel WooCommerce na podziękowaniu („Szczegóły zamówienia", „Adres rozliczeniowy")
   jadą domyślnym h2 motywu — na tym ekranie krzyczą głośniej niż samo „Dziękujemy". */
.cg-thanks .woocommerce-order-details h2,
.cg-thanks .woocommerce-customer-details h2,
.cg-thanks .woocommerce-column__title {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   KARTA PRODUKTU — Figma 7183:5698
   ⚠️ Ten ekran NIE MIAŁ ŻADNYCH STYLÓW. Szablon PHP powstał, CSS nigdy — stąd
   „rozwalony układ": galeria i panel zakupowy leżały jedna pod drugą, bo
   `.cg-product__top` był zwykłym blokiem.
   Wymiary prosto z Figmy: galeria 920 · panel 648 · odstęp 32 (razem 1600).
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 IKONY: SVG z Figmy mają `width="100%" height="100%"`, a `.cg-icon` (main.css)
   nie ma wymiarów → ikona rozdyma się do rozmiaru rodzica. Ikona koszyka na karcie
   produktu urosła do 300×300 px. To TRZECI raz ta sama pułapka, więc zamykam ją tam,
   gdzie odpowiadam za komponenty (main.css należy do drugiego wątku pracy). */
.cg-atc__submit .cg-icon,
.cg-card__cta .cg-icon,
.cg-trust__item .cg-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.cg-atc__submit .cg-icon svg,
.cg-card__cta .cg-icon svg,
.cg-trust__item .cg-icon svg { width: 100%; height: 100%; }

/* ⚠️ `padding-block`, NIE skrót `padding` — skrót wyzerowałby poziomy padding, który nadaje
   `.cg-wrap`, i kontener rozjechałby się z 1600 px na całą szerokość okna. Ten sam błąd
   położył kiedyś układ RSdrive. */
.cg-product { padding-block: 24px 72px; }

.cg-product__top {
  display: grid;
  grid-template-columns: 920fr 648fr;
  gap: 32px;
  align-items: start;
}

/* DSK-P17: galeria bywa wyraźnie wyższa niż panel zakupowy (911×1134 vs 642×578 przy 1920 px)
   — kolumna prawa kończyła się wysoko nad dołem galerii i zostawiała pustą przestrzeń.
   Panel przykleja się przy przewijaniu zamiast stać nieruchomo w za krótkiej kolumnie,
   tym samym wzorcem co `.cg-checkout__summary`. */
.cg-buybox { position: sticky; top: calc(var(--cg-header-h, 174px) + 24px); }

/* ── Galeria ──────────────────────────────────────────────────────────────── */
.cg-gallery__main {
  display: grid;
  place-items: center;
  padding: 16px;
  aspect-ratio: 920 / 967;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-card, 16px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
.cg-gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; }

.cg-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.cg-gallery__thumb {
  display: grid;
  place-items: center;
  height: 160px;
  padding: 8px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-img, 12px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
  cursor: pointer;
}
.cg-gallery__thumb:hover { border-color: var(--cg-gold, #C18C21); }
.cg-gallery__thumb:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }
.cg-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── Panel zakupowy ───────────────────────────────────────────────────────── */
.cg-buybox { display: flex; flex-direction: column; gap: 20px; }

.cg-buybox__title {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.cg-hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--cg-black-10, rgba(0, 0, 0, .1)); }

/* Tabela Liczba / Sprzedaż / Skup */
.cg-tiers {
  padding: 20px;
  border-radius: var(--cg-r-box, 12px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
.cg-tiers__head,
.cg-tiers__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}
.cg-tiers__head {
  margin-bottom: 16px;
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
  font-size: var(--cg-fs-small, 13px);
}
.cg-tiers__row + .cg-tiers__row { margin-top: 8px; }

/* Wiersz „Cena", dopóki Odoo nie poda widełek — tu nie ma trzech kolumn, tylko dwie. */
.cg-tiers__row--single { grid-template-columns: auto 1fr; justify-content: space-between; }
.cg-tiers__row--single > span:first-child { color: var(--cg-black-30, rgba(0, 0, 0, .55)); }
.cg-buybox__price { justify-self: end; font-size: 28px; font-weight: var(--cg-fw-medium, 500); }
.cg-buybox__price del { opacity: .45; font-size: 18px; margin-right: 8px; }
.cg-buybox__price ins { text-decoration: none; }

/* Plakietka z ceną. ⚠️ Świadomie NIE `.cg-chip` — ta klasa jest już zajęta przez
   przyciski filtrów wykresu kursów (pages.css) i miałaby tu wysokość 40 px i kursor
   „klikalne". To była trzecia kolizja nazw w tym motywie. */
.cg-plakietka {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 10px;
  border-radius: var(--cg-r-label, 8px);
  background: var(--cg-black-05, rgba(0, 0, 0, .05));
  font-size: var(--cg-fs-small, 13px);
  line-height: 1;
  white-space: nowrap;
}
.cg-plakietka--gold { background: var(--cg-gold-10, rgba(193, 140, 33, .1)); color: var(--cg-gold, #C18C21); font-weight: var(--cg-fw-medium, 500); }
.cg-plakietka .amount { font-size: inherit; }

.cg-note--inline { margin: 12px 0 0; font-size: var(--cg-fs-small, 13px); color: var(--cg-black-30, rgba(0, 0, 0, .55)); }

/* ── Liczba sztuk + do koszyka (Figma: 56 px wysokości, koszyk wypełnia resztę) ── */
.cg-atc { display: flex; gap: 8px; align-items: stretch; }

.cg-qty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-pill, 999px);
  background: #fff;
}
.cg-qty__btn {
  width: 48px; height: 54px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; color: var(--cg-text, #1A1A1A);
}
.cg-qty__btn:hover { color: var(--cg-gold, #C18C21); }
.cg-qty__btn:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: -2px; border-radius: var(--cg-r-pill, 999px); }
.cg-qty__input {
  width: 44px; height: 54px;
  border: 0; background: transparent;
  text-align: center; font-size: 16px;
  -moz-appearance: textfield;
}
.cg-qty__input::-webkit-outer-spin-button,
.cg-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cg-atc__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 auto;
  min-height: 56px;
}

/* ── 4 gwarancje (Figma 7183:7035 — dwie kolumny po dwa wiersze) ───────────── */
.cg-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cg-trust__item {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 12px 16px;
  border-radius: var(--cg-r-box, 12px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
  font-size: var(--cg-fs-small, 13px);
  line-height: 1.35;
}

/* ── Omnibus ──────────────────────────────────────────────────────────────── */
.cg-omnibus {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  border-radius: var(--cg-r-box, 12px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
  font-size: var(--cg-fs-small, 13px);
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
}

/* ── Zakładki (Figma: szerokość galerii, nie całej strony) ─────────────────── */
.cg-tabs { max-width: 920px; margin-top: 48px; }
.cg-tabs__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: var(--cg-r-pill, 999px);
  background: var(--cg-black-05, rgba(0, 0, 0, .05));
}
.cg-tabs__btn {
  min-height: 48px;
  border: 0; border-radius: var(--cg-r-pill, 999px);
  background: transparent; cursor: pointer;
  font: var(--cg-fw-medium, 500) var(--cg-fs-body, 15px)/1 var(--cg-font, inherit);
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
}
.cg-tabs__btn.is-active { background: #fff; color: var(--cg-text, #1A1A1A); box-shadow: var(--cg-shadow-card, 0 2px 8px rgba(0, 0, 0, .06)); }
.cg-tabs__btn:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

/* Domyślnie (desktop) widoczna jest pełna etykieta; blok mobilny niżej ją podmienia. */
.cg-tabs__label--short { display: none; }

.cg-tabs__panel { display: none; padding-top: 32px; line-height: var(--cg-lh-body, 1.6); }
.cg-tabs__panel.is-active { display: block; }
.cg-tabs__panel h2, .cg-tabs__panel h3 { margin: 28px 0 12px; font-size: 20px; line-height: 1.3; }
.cg-tabs__panel table { width: 100%; border-collapse: collapse; }
.cg-tabs__panel th, .cg-tabs__panel td { padding: 12px 0; border-bottom: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1)); text-align: left; }

/* ── Zakładka „Wysyłka" — ustrukturyzowany blok (Figma 7183:7649) ─────────── */
.cg-ship-info {
  display: flex; flex-direction: column; gap: 24px;
  padding: 32px; border-radius: 12px;
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
/* nagłówki scope'owane, by pobić generyczne `.cg-tabs__panel h2,h3` (specyficzność) */
.cg-tabs__panel .cg-ship-info__title { margin: 0; font-size: 24px; line-height: 1; letter-spacing: var(--cg-tracking); color: #000; }
.cg-tabs__panel .cg-ship-info__subtitle { margin: 0 0 16px; font-size: 18px; line-height: 1; letter-spacing: var(--cg-tracking); color: #000; }
.cg-ship-info__note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 12px 16px 12px 12px; border-radius: 12px;
  background: rgba(0, 77, 43, .1); color: #004d2b;
  font-size: 14px; line-height: 1.56; letter-spacing: -.005em;
}
.cg-ship-info__note-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0, 77, 43, .1); color: #004d2b;
}
.cg-ship-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-ship-methods__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cg-ship-methods__label { font-size: 16px; line-height: 1.5; letter-spacing: var(--cg-tracking); color: var(--cg-text, rgba(0, 0, 0, .7)); }
.cg-ship-methods__cost {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 6px;
  background: var(--cg-gold-10); color: var(--cg-gold);
  font-size: 16px; font-weight: 500; letter-spacing: var(--cg-tracking); white-space: nowrap;
}
.cg-ship-info__free { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: var(--cg-tracking); color: var(--cg-text, rgba(0, 0, 0, .7)); }
.cg-ship-info__free strong { color: var(--cg-gold); font-weight: 500; }

/* ── Okruszki ─────────────────────────────────────────────────────────────── */
/* DSK-P25: `get_design_context` na węzeł 6746:4578 (ramka DESKTOPOWA, kontener 1600 px)
   pokazuje dokładnie te same złote pigułki co mobile: tło rgba(193,140,33,.1), tekst
   #C18C21 14px/500, tracking -0.07px, wyściółka 8/7, promień 24, odstęp 8 między
   pigułkami, szary chevron 16×16 jako separator. Poprzedni komentarz niżej („Figma
   desktopowa pigułek nie ma") cytował ten sam węzeł i mówił coś przeciwnego — było to
   nieaktualne/błędne odczytanie, poprawione po realnej weryfikacji w Figmie. */
.cg-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
}
/* Każdy okruszek (z linkiem i bez) jest teraz zawinięty w `<span>` (PHP: `before`/`after`) —
   pigułkę dostaje ten wrapper, `<a>` w środku tylko dziedziczy kolor, bez własnego pudełka. */
.cg-breadcrumb > span:not(.cg-breadcrumb__sep) {
  display: inline-flex;
  padding: 7px 8px;
  border-radius: 24px;
  background: var(--cg-gold-10, rgba(193, 140, 33, .1));
  color: var(--cg-gold, #C18C21);
  letter-spacing: var(--cg-tracking-body);
  line-height: 1;
  white-space: nowrap;
}
.cg-breadcrumb a { color: inherit; text-decoration: none; }
.cg-breadcrumb > span:not(.cg-breadcrumb__sep):has(a):hover { background: rgba(193, 140, 33, .18); }
/* Separator nie jest pigułką — sam chevron w szarości, bez tła i bez marginesów. */
.cg-breadcrumb .cg-breadcrumb__sep {
  margin: 0;
  padding: 0;
  background: none;
  opacity: 1;
  color: var(--cg-black-30, rgba(0, 0, 0, .3));
  display: inline-flex;
  align-items: center;
}
.cg-breadcrumb__sep svg { width: 16px; height: 16px; transform: rotate(-90deg); }

/* ══ MOB-65: pigułki na telefonie mają mniejszy tekst (Figma mobilna 7936:3874: 12 px,
   chevron 12×12) — reszta stylu jest teraz wspólna z desktopem. */
@media (max-width: 900px) {
  .cg-breadcrumb {
    gap: 4px;
    margin-bottom: 16px;
    font-size: 12px;
  }
  .cg-breadcrumb__sep svg { width: 12px; height: 12px; }
}

/* ── Mobile (w Figmie NIE MA ani jednej klatki mobilnej — układ własny) ────── */
@media (max-width: 1024px) {
  .cg-product__top { grid-template-columns: 1fr; gap: 24px; }
  .cg-tabs { max-width: none; }
  /* Kolumny stoją jedna pod drugą od tej szerokości — przyklejanie z DSK-P17
     ma sens tylko obok galerii, w stosie tylko by odjeżdżało ze scrollem. */
  .cg-buybox { position: static; }
}
@media (max-width: 900px) {
  .cg-buybox__title { font-size: 24px; }
  .cg-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cg-gallery__thumb { height: 84px; }
  .cg-trust { grid-template-columns: 1fr; }

  /* ── Karta produktu 1:1 z Figmy 8122:7460 ──────────────────────────────
     Margines strony 16 (kontener 358), a licznik z przyciskiem stoją w JEDNYM
     rzędzie 358×56: licznik 134 (56 + 22 + 56), odstęp 16, przycisk 208.
     Wcześniej `flex-wrap: wrap` + `width: 100%` łamały to na dwa poziomy
     i cały blok miał 120 px zamiast 56. */
  .cg-atc { flex-wrap: nowrap; gap: 16px; }
  /* 134 to szerokość CAŁEGO licznika razem z ramką (Figma liczy obrys do środka),
     dlatego pole liczby dostaje resztę zamiast sztywnych 22 px — inaczej
     56 + 22 + 56 nie zmieściłoby się w 132 px wnętrza i licznik by się rozpychał. */
  /* ⚠️ `min-width: 0` obowiązkowe. Element elastyczny ma automatyczne minimum
     równe swojej treści, a pole liczby ma min-content 170 px — bez tego
     `flex-basis: 134px` przegrywało i licznik puchł do 284 px, rozpychając
     stronę do 448 px (zmierzone). To ta sama pułapka co `1fr` w siatkach. */
  .cg-atc .cg-qty { flex: 0 0 134px; min-width: 0; box-sizing: border-box; }
  .cg-atc .cg-qty__btn { flex: 0 0 56px; width: 56px; height: 54px; }
  .cg-atc .cg-qty__input { flex: 1 1 auto; width: 0; min-width: 0; height: 54px; }
  .cg-atc__submit { width: auto; flex: 1 1 auto; }
  /* Figma 8122:7460: trzy pigułki w JEDNYM rzędzie, promień pigułki — nie słupek
     i nie prostokąt 12 px. `minmax(0, …)`, bo napis „Informacje" ma min-content
     szerszy niż 1/3 ekranu i bez tego ścieżka rozpycha nawigację poza kontener. */
  /* Figma 8122:7717: pasek 358×56, segmenty 48 → wyściółka 4, nie 2. */
  .cg-tabs__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; }
  .cg-tabs__btn { padding-inline: 4px; font-size: 14px; }
  .cg-tabs__label--full { display: none; }
  .cg-tabs__label--short { display: inline; }
}

.cg-gallery__thumb.is-active { border-color: var(--cg-gold, #C18C21); }

/* Strzałki karuzeli „Inni oglądali także" są `position:absolute` (main.css), a `.cg-carousel`
   nie ustanawia kontenera pozycjonującego → OBIE lądowały jedna na drugiej obok panelu
   zakupowego, kilkaset pikseli od swojej karuzeli. Na stronie głównej problemu nie widać,
   bo tam karuzela ma inną obudowę. Kotwiczymy je do karuzeli tylko na karcie produktu. */
.cg-product .cg-carousel { position: relative; }

/* ══════════════════════════════════════════════════════════════════════════
   KATEGORIA / LISTING — Figma 6746:4318
   Układ z projektu: lewy pasek filtrów 376 px + kolumna treści 1192 (odstęp 32),
   siatka 3 × 392. Wcześniej filtry były ATRAPĄ (zwinięty `<details>` z komunikatem
   „dodaj widgety"), a siatka jechała na czterech kolumnach.
   ══════════════════════════════════════════════════════════════════════════ */
.cg-archive { padding-block: 24px 72px; }   /* ⚠️ nie skrót `padding` — zjadłby `padding-inline` z .cg-wrap */

.cg-archive__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}
.cg-archive__head h1 { margin: 0; font-size: var(--cg-fs-h1, 40px); line-height: var(--cg-lh-h1, 1.15); letter-spacing: -.03em; }
.cg-archive__count { margin: 6px 0 0; color: var(--cg-black-30, rgba(0, 0, 0, .55)); font-size: var(--cg-fs-small, 13px); }
.cg-archive__refresh {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding-inline: 12px;
  border-radius: var(--cg-r-pill, 999px);
  background: var(--cg-black-05, rgba(0, 0, 0, .05));
  font-size: var(--cg-fs-small, 13px);
  color: var(--cg-black-30, rgba(0, 0, 0, .55));
  white-space: nowrap;
}
.cg-archive__lead { margin: 0 0 24px; max-width: 72ch; color: var(--cg-black-30, rgba(0, 0, 0, .55)); }

.cg-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cg-subcats__item {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 16px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-pill, 999px);
  color: inherit; text-decoration: none;
  font-size: var(--cg-fs-small, 13px);
}
.cg-subcats__item:hover { border-color: var(--cg-gold, #C18C21); color: var(--cg-gold, #C18C21); }
.cg-subcats__count { opacity: .5; }

/* ── Dwie kolumny: filtry + produkty ─────────────────────────────────────── */
/* 🐛 Ten sam wzorzec co `.cg-account__grid`/`.cg-orders__row`: tor `fr` ma domyślne
   minimum `auto` (= min-content dziecka), więc w paśmie 1025-~1560px (za wąsko na
   pełne 1600px projektu, za szeroko na regułę mobilną `minmax(0,1fr)` przy 1024px)
   trzy karty `.cg-grid` po prawej nie mieściły się i strona przewijała się o 14px
   przy 1200px. `minmax(0, …fr)` na obu torach + `min-width:0` na dzieciach (poniżej). */
.cg-archive__body {
  display: grid;
  grid-template-columns: minmax(0, 376fr) minmax(0, 1192fr);
  gap: 32px;
  align-items: start;
}
.cg-filtry,
.cg-archive__main {
  min-width: 0;
}

/* ── Lewy pasek filtrów ──────────────────────────────────────────────────── */
.cg-filtry {
  position: sticky;
  top: 24px;
  padding: 24px;
  border: 4px solid var(--cg-white-10, rgba(255, 255, 255, .1));   /* Figma: panel = to samo, co karta (bg 2% + ramka 4px 10%) */
  border-radius: var(--cg-r-card, 16px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
.cg-filtry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cg-filtry__head h2 { margin: 0; font-size: 28px; letter-spacing: var(--cg-tracking); }   /* Figma 6746:4593 */
.cg-filtry__clear { font-size: var(--cg-fs-body, 16px); color: var(--cg-gold, #C18C21); text-decoration: underline; }   /* Figma: podkreślony na stałe */
.cg-filtry__clear:hover { opacity: .8; }

/* Sekcje jako osobne boxy (Figma 6746:4597/4601): zwinięta = szara, otwarta = biała ze złotą ramką. */
.cg-filtry__sekcja {
  margin-bottom: 8px;
  border: 1px solid transparent;   /* rezerwuje miejsce na ramkę — brak skoku układu przy otwarciu */
  border-radius: var(--cg-r-img, 8px);
  background: var(--cg-black-02, rgba(0, 0, 0, .02));
}
.cg-filtry__sekcja[open] { background: #fff; border-color: var(--cg-gold, #C18C21); }
.cg-filtry__sekcja > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 16px 24px; cursor: pointer;
  font-size: var(--cg-fs-body, 16px);
  font-weight: var(--cg-fw-medium, 500);
  list-style: none;
}
.cg-filtry__sekcja > summary::-webkit-details-marker { display: none; }
.cg-filtry__sekcja > summary::after { content: '+'; margin-left: auto; font-size: 18px; opacity: .5; }
.cg-filtry__sekcja[open] > summary::after { content: '−'; }
.cg-filtry__sekcja > summary:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; border-radius: 8px; }

.cg-filtry__ile {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--cg-r-round, 50%);
  background: var(--cg-gold-10, rgba(193, 140, 33, .1));
  color: var(--cg-gold, #C18C21);
  font-size: 12px;
}

/* Długie listy (waga ma 33 wartości) przewijają się w środku — inaczej filtry byłyby
   dłuższe niż same produkty i klient nigdy nie zobaczyłby, co filtruje. */
.cg-filtry__lista {
  max-height: 320px; overflow-y: auto;
  margin: 0; padding: 0 24px 16px;   /* wcięcie boxu z Figmy; scroll ZOSTAJE — 33 wagi nie mogą być dłuższe niż same produkty */
  list-style: none;
}
.cg-filtry__opcja {
  display: flex; align-items: center; gap: 16px;
  min-height: 32px; padding: 4px 0;
  color: var(--cg-text, rgba(0, 0, 0, .7)); text-decoration: none;
  font-size: var(--cg-fs-body, 16px);
}
.cg-filtry__box {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: 1px solid var(--cg-black-20, rgba(0, 0, 0, .2));
  border-radius: var(--cg-r-img, 8px);
  font-size: 16px; line-height: 1;
}
.cg-filtry__opcja.is-on .cg-filtry__box { border-color: var(--cg-gold, #C18C21); background: var(--cg-gold, #C18C21); color: #fff; }
.cg-filtry__opcja.is-on .cg-filtry__nazwa { color: var(--cg-gold, #C18C21); font-weight: var(--cg-fw-medium, 500); }
.cg-filtry__opcja:hover .cg-filtry__nazwa { color: var(--cg-gold, #C18C21); }
.cg-filtry__opcja:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; border-radius: 8px; }
.cg-filtry__nazwa { flex: 1 1 auto; }
.cg-filtry__licznik { flex: 0 0 auto; color: var(--cg-gold, #C18C21); font-variant-numeric: tabular-nums; }   /* Figma: złoty, w nawiasach */
.cg-filtry__licznik::before { content: '('; }
.cg-filtry__licznik::after  { content: ')'; }

.cg-filtry__cena { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 24px 16px; }
.cg-filtry__cena label { flex: 1 1 0; min-width: 0; }
.cg-filtry__cena input {
  /* Pola muszą pomieścić górną granicę ceny bez ucinania (bywa 5-cyfrowa, np. 17962) — było
     padding-inline:12px na wąskim sidebarze = ~65px na pole, mieściło tylko 3 cyfry. */
  width: 100%; min-width: 0; height: 40px;
  padding-inline: 6px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-label, 8px);
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  text-align: center;
}
.cg-filtry__ok {
  flex: 0 0 auto;
  height: 40px; padding-inline: 10px;
  border: 1px solid var(--cg-gold, #C18C21);
  border-radius: var(--cg-r-label, 8px);
  background: transparent; color: var(--cg-gold, #C18C21);
  font: inherit; font-size: var(--cg-fs-small, 13px);
  cursor: pointer;
}
.cg-filtry__ok:hover { background: var(--cg-gold, #C18C21); color: #fff; }

/* Pasek „Kategorie i filtry / Sortowanie" istnieje tylko na mobile (Figma 7936:3696) —
   na desktopie filtry stoją w lewym pasku, a sortowanie w pasku narzędzi. */
.cg-mfilters { display: none; }

/* ── Kolumna produktów ───────────────────────────────────────────────────── */
.cg-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; margin-bottom: 16px;
  font-size: var(--cg-fs-small, 13px);
}
.cg-toolbar .woocommerce-ordering select {
  height: 40px; padding-inline: 12px;
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: var(--cg-r-pill, 999px);
  background: #fff; font: inherit; font-size: var(--cg-fs-small, 13px);
}
.cg-toolbar .woocommerce-result-count { margin: 0; opacity: .55; }
.cg-toolbar__sort { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Przełącznik widoku siatka/lista (wzór konkurencji, np. Tavex) — domyślnie siatka,
   wybór klienta zapamiętany w localStorage przez `sklep.js` (`cg_view_toggle`). */
.cg-view-toggle { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cg-view-toggle[hidden] { display: none; }   /* atrybut musi wygrać z `.cg-view-toggle{display:flex}` — patrz cg-search__suggest */
.cg-view-toggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: var(--cg-r-pill, 999px);
  background: transparent; cursor: pointer;
}
.cg-view-toggle__btn svg { width: 16px; height: 16px; }
.cg-view-toggle__btn.is-active { background: var(--cg-black-05, rgba(0, 0, 0, .05)); }
.cg-view-toggle__btn:not(.is-active) { opacity: .45; }
.cg-view-toggle__btn:hover { opacity: .8; }
.cg-view-toggle__btn:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

/* `minmax(0, 1fr)` — sama zmiana torów `.cg-archive__body` nie wystarczała: karta
   `.cg-card` (main.css) ma WŁASNE domyślne `min-width: auto`, niezależne od toru
   nadrzędnego — ten sam trzeci poziom tej samej pułapki co grid → dziecko gridu. */
/* DSK-P14: Figma 6746:4318 — kolumna 376, ale odstęp POZIOMY między kartami to 32, nie 8
   (8 zostaje tylko dla odstępu PIONOWEGO między rzędami). */
.cg-archive__main .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 8px; }
.cg-archive__main .cg-grid .cg-card { min-width: 0; }

/* Widok „Lista" na DESKTOPIE — poziomy wiersz (zdjęcie | nazwa+ceny | akcja). Bez tego
   przełącznik siatka/lista NIC nie robił na desktopie: reguły `.cg-grid--list` istniały
   tylko w media query mobilnym, więc na szerokim ekranie klasa nie zmieniała układu
   (zgłoszenie Huberta „nic się nie dzieje gdy przełączam widok"). */
@media (min-width: 901px) {
  .cg-archive__main .cg-grid.cg-grid--list { grid-template-columns: 1fr; gap: 12px; }
  .cg-archive__main .cg-grid--list .cg-card {
    display: grid;
    grid-template-columns: 160px 1fr 240px;
    grid-template-areas:
      "media head   action"
      "media prices action";
    align-items: center;
    column-gap: 28px; row-gap: 10px;
    text-align: left;
  }
  .cg-archive__main .cg-grid--list .cg-card__head { grid-area: head; align-items: flex-start; }
  .cg-archive__main .cg-grid--list .cg-card__tags { justify-content: flex-start; }
  .cg-archive__main .cg-grid--list .cg-card__media { grid-area: media; }
  .cg-archive__main .cg-grid--list .cg-card__media img { height: 130px; }
  .cg-archive__main .cg-grid--list .cg-card__prices { grid-area: prices; margin-top: 0; }
  .cg-archive__main .cg-grid--list .cg-card__cta,
  .cg-archive__main .cg-grid--list .cg-card__view-cart { grid-area: action; width: 100%; }
}

.cg-archive__pusto {
  display: grid; justify-items: start; gap: 16px;
  padding: 48px 0;
}
.cg-archive__pusto p { margin: 0; color: var(--cg-black-30, rgba(0, 0, 0, .55)); }

.cg-seo-text { margin-top: 48px; max-width: 78ch; line-height: var(--cg-lh-body, 1.6); }
.cg-seo-text h2, .cg-seo-text h3 { margin: 32px 0 12px; font-size: 20px; }

/* 1:1 z Figmy (6746:5032) — pigułka aktywnej strony wypełniona złotem, reszta jasnoszara.
   Wcześniej: sama cienka ramka na aktywnej stronie — ledwo widoczna (zgłoszenie Huberta). */
.woocommerce-pagination ul { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: 4px;
  background: var(--cg-black-05, rgba(0, 0, 0, .05));
  border: 0; border-radius: var(--cg-r-round, 48px);
  color: var(--cg-text, rgba(0, 0, 0, .7)); text-decoration: none;
  font-size: var(--cg-fs-small, 13px); font-weight: var(--cg-fw-medium, 500);
}
/* Specyficzność MUSI dokładnie dogonić domyślny woocommerce.css — samo dodanie klasy
   `.woocommerce` nie wystarczyło (3 klasy = remis), bo licznik ELEMENTÓW w selektorze
   też wchodzi do porównania PRZED kolejnością w arkuszu: WC ma `nav ul li span` (4 elementy)
   w swoim selektorze, mój wcześniejszy fix miał 0 — przegrywał mimo remisu na klasach.
   Odtworzone 1:1 z woocommerce.css (`.woocommerce nav.woocommerce-pagination ul li span.current`),
   żeby specyficzność była DOKŁADNIE równa — wtedy o zwycięstwie decyduje kolejność w źródle
   (sklep.css ładuje się PO woocommerce.css). */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cg-gold, #C18C21); color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--cg-gold-10, rgba(193, 140, 33, .1)); color: var(--cg-gold, #C18C21);
}
.woocommerce-pagination .next, .woocommerce-pagination .prev { font-size: 16px; }

/* 🔴 2026-08-16, zgłoszenie Huberta („źle wyglądają numery stron"). Dwie rzeczy naraz:

   1. KSZTAŁT. Powyższy blok robił z numerów PIGUŁKI (`--cg-r-round` = 48 px). W Figmie
      (6746:5032) to **zaokrąglone kwadraty** ~40×40 z promieniem 12, na białym tle
      z cienkim obrysem — a nie szare pigułki bez ramki.

   2. SZEROKOŚĆ. `min-width: 40px` z bloku wyżej NIE DZIAŁAŁO: zmierzone na stagingu
      szerokości to 22–32 px zamiast 40, bo `woocommerce.css` ma na te elementy selektor
      `.woocommerce nav.woocommerce-pagination ul li a` (2 klasy + 4 elementy), a nasz
      miał 1 klasę + 1 element. Wysokość i tło przechodziły (tych WC nie ustawia),
      więc błąd wyglądał na „kosmetyczny" — a w rzeczywistości połowa deklaracji leciała
      do kosza. Ta sama pułapka co przy poprzednich dwóch podejściach do paginacji.

   Dlatego poniżej selektory odtworzone 1:1 ze specyficznością WooCommerce. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;                       /* WC skleja kafelki wspólną ramką — stąd „pasek" zamiast kafelków */
  overflow: visible;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid; place-items: center;
  box-sizing: border-box;
  min-width: 40px; width: auto; height: 40px;
  padding: 0 10px;
  background: var(--cg-white, #fff);
  border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
  border-radius: 12px;
  color: var(--cg-text, rgba(0, 0, 0, .7));
  font-size: var(--cg-fs-small, 13px);
  font-weight: var(--cg-fw-medium, 500);
  line-height: 1;
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cg-gold, #C18C21);
  border-color: var(--cg-gold, #C18C21);
  color: #fff;
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--cg-gold-10, rgba(193, 140, 33, .1));
  border-color: var(--cg-gold, #C18C21);
  color: var(--cg-gold, #C18C21);
}
/* Wielokropek to nie przycisk — bez ramki i bez kursora wskazującego klikalność. */
.woocommerce nav.woocommerce-pagination ul li span.dots {
  background: transparent; border-color: transparent;
}

/* DSK-V10: próg 1024 px chował siatkę pod pełnoszerokim panelem filtrów, mimo że
   1024 to najwęższa szerokość DESKTOPOWA w tym audycie (1024/1280/1440/1920) — co jest
   niespójne z resztą motywu, gdzie granica mobile/desktop to konsekwentnie 900 px
   (nagłówki, hero, karta produktu itd.). Panel filtrów jest wystarczająco elastyczny
   (`min-width: 0`), żeby zostać obok siatki aż do 900 px. */

/* ── Mobile: filtry chowają się nad produktami (w Figmie nie ma klatki mobilnej) ── */
@media (max-width: 900px) {
  .cg-archive__body { grid-template-columns: minmax(0, 1fr); }
  .cg-filtry { position: static; }

  .cg-archive__head { flex-direction: column; }

  /* Trzeci element (przełącznik widoku) obok sortowania — na wąskim ekranie
     zawija się pod spód zamiast wypychać sklep w bok. */
  .cg-toolbar { flex-wrap: wrap; row-gap: 8px; min-height: 0; }

  /* ── Listing 1:1 z Figmy 7936:3696 ────────────────────────────────────────
     Klatka 390 px, margines strony 16 → kontener 358, dwie karty po 175 z
     odstępem 8. Karta ma 384 px wysokości, a jej wnętrze rozkłada się tak:
       padding 12 → tagi 52 → 16 → tytuł 42 → 12 → obrazek 112 → 12 →
       ceny 62 → 12 → przycisk 40 → padding 12   (razem 384)
     Wcześniej karta miała 308 px, bo powstawała bez wglądu w Figmę. Uwaga z
     2026-07-18 („pełny kafel zajmuje cały ekran na JEDNĄ monetę") dotyczyła
     układu JEDNOKOLUMNOWEGO — Figma i tak pokazuje tu dwie kolumny, więc
     zgodność z projektem tamtego problemu nie przywraca.

     ⚠️ `minmax(0, 1fr)`, nie `1fr`. Samo `1fr` ma minimum `min-content`, a karta
     ma min-content 196 px — dwie ścieżki nie schodziły poniżej 412 px i przy
     390 px sklep przewijał się w poziomie (zmierzone: scrollWidth 432). */
  .cg-archive__main .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cg-archive__main .cg-grid.cg-grid--list { grid-template-columns: minmax(0, 1fr); }

  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card {
    padding: 12px; gap: 12px; border-width: 2px; border-radius: var(--cg-r-box, 16px);
  }
  /* Figma: tagi kończą się na 52, tytuł zaczyna na 68 → 16 px. */
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__head { gap: 16px; }
  /* Przy 151 px wnętrza dwa tagi nie mieszczą się obok siebie — Figma układa je
     w słupek, każdy na pełną szerokość, treść wyśrodkowana. */
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__tags {
    /* `align-self: stretch` jest konieczne: rodzic `.cg-card__head` ma
       `align-items: center`, więc bez tego słupek tagów zwężał się do najszerszej
       pigułki (zmierzone: 104 px zamiast pełnych 147). */
    flex-direction: column; align-self: stretch; gap: 4px;
  }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-tag {
    /* ⚠️ `flex: 0 0 auto` cofa `flex: 1 1 0` z `main.css`. Tam tagi stoją w RZĘDZIE
       i dzielą go po połowie; tutaj stoją w SŁUPKU, więc `flex-grow` rozciągałby
       je w pionie i pigułka 24 px zrobiłaby się wysoka na ćwierć karty. */
    flex: 0 0 auto;
    justify-content: center; height: 24px; padding-inline: 8px; gap: 4px; font-size: 12px;
  }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-tag svg { width: 14px; height: 14px; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__title { font-size: 14px; line-height: 1.5; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__media { padding: 4px; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__media img { height: 104px; }
  /* Figma: wiersze cen bez tła i bez paddingu — sam napis po lewej, kwota po prawej. */
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__prices { padding: 0; gap: 4px; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-price-row { font-size: 12px; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-price-row__value { height: 18px; padding-inline: 0; }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__cta {
    height: 40px; padding-inline: 12px; font-size: 13px; gap: 8px;
  }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__cta svg { width: 16px; height: 16px; }
}

/* Kod rabatowy w podsumowaniu kasy (Figma 7900:6929) — komponent `.cg-coupon` jest wspólny
   z koszykiem, tu tylko osadzenie w wierszu tabeli podsumowania. */
.cg-checkout__summary .cg-coupon-row td { padding: 0; border-bottom: 0; }
.cg-checkout__summary .cg-coupon { margin: 12px 0; text-align: left; }
.cg-coupon__msg { margin: 8px 0 0; font-size: 12px; color: #C83C28; }
.cg-coupon__msg.is-ok { color: #12472B; }
.cg-coupon__apply,
.cg-coupon__off { white-space: nowrap; }
.cg-coupon__apply[disabled],
.cg-coupon__off[disabled] { opacity: .6; cursor: progress; }

/* ──────────────────────────────────────────────────────────────────────── */
/* ── MOBILE 390PX — SORTING, PAGINATION, NAV ARROWS ────────────────────── */
/* ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Sorting dropdown */
  .woocommerce-ordering {
    margin-bottom: 16px;
  }
  .woocommerce-ordering select {
    width: 100%; padding: 10px 12px;
    font-size: 14px; border-radius: 8px;
    border: 1px solid #E5E5E5; background: #fff;
  }

  /* Result count — liczba produktów */
  .woocommerce-result-count {
    font-size: 12px; color: #666; margin-bottom: 12px;
  }

  /* Pagination */
  .woocommerce-pagination,
  .woocommerce-pagination ul {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 24px; flex-wrap: wrap;
  }
  .woocommerce-pagination ul {
    margin-top: 0; /* reset, to nie powielać */
  }
  .woocommerce-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; border-radius: 8px;
    font-size: 13px; color: #1A1A1A; border: 1px solid #E5E5E5;
  }
  .woocommerce-pagination a.page-numbers {
    background: #F4F4F2; text-decoration: none; cursor: pointer;
    transition: all 0.2s ease;
  }
  .woocommerce-pagination a.page-numbers:hover {
    background: var(--cg-gold, #C18C21); color: #fff; border-color: var(--cg-gold, #C18C21);
  }
  .woocommerce-pagination .page-numbers.current {
    background: var(--cg-gold, #C18C21); color: #fff; font-weight: 600;
    border-color: var(--cg-gold, #C18C21);
  }

  /* Nav arrows — strzałki poprzednia/następna */
  .woocommerce-pagination .prev,
  .woocommerce-pagination .next {
    width: 40px; height: 40px; padding: 0;
    background: var(--cg-green, #1A3D32);
    color: #fff; border-radius: 50%; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0; cursor: pointer; transition: all 0.2s ease;
  }
  .woocommerce-pagination .prev:hover,
  .woocommerce-pagination .next:hover {
    background: #0F2819; transform: scale(1.05);
  }
  .woocommerce-pagination .prev::before {
    content: '←'; font-size: 20px; color: #fff;
  }
  .woocommerce-pagination .next::before {
    content: '→'; font-size: 20px; color: #fff;
  }
}

/* ══ MOBILE (768px) — kategorie, produkty, koszyk ════════════════════ */

@media (max-width: 900px) {
  /* Siatka produktów — 2 kolumny zamiast 3-4 */
  .products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px !important;
  }

  /* Product card — mniejszy padding */
  .woocommerce ul.products li.product {
    padding: 8px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    line-height: 1.2;
  }

  .woocommerce ul.products li.product .price {
    font-size: 12px;
  }

  /* Sidebar — under content na mobile */
  .woocommerce-page .content-area {
    float: none;
    width: 100%;
  }

  .woocommerce-page .sidebar {
    float: none;
    width: 100%;
    margin-top: 32px;
    display: none; /* ukryj sidebar na mobile */
  }

  /* Karta produktu (Figma 8011:3966): galeria zajmuje pas ~220 px, żeby cena, stepper
     i „Dodaj do koszyka" mieściły się na pierwszym ekranie. Bez tego kwadratowe zdjęcie
     brało całe 390 px szerokości i spychało cały panel zakupowy poniżej zgięcia. */
  .cg-gallery__main { height: 220px; padding: 8px; }
  .cg-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
  .cg-gallery__thumb { height: 64px; }

  /* Pusty koszyk: na desktopie wyszarzone podsumowanie trzyma dwukolumnowy układ,
     na mobile jest tylko szumem pod komunikatem „Twój koszyk jest pusty" —
     Figma 8011:4910 kończy stronę na przycisku „Rozpocznij zakupy". */
  .cg-cart--empty .cg-summary { display: none; }

  /* ── Pasek „Kategorie i filtry / Sortowanie" (Figma 7936:3696) ──────────
     Dwa zwinięte kafle zamiast rozwiniętego panelu filtrów na pierwszym ekranie. */
  /* Figma 7936:3696: pasek 358 szeroki, dwa pola po 175 z odstępem 8, każde 48 px
     wysokie, treść odsunięta od lewej o 16.
     🔴 Brakuje dwóch ikon: `filter_list` i `sort` (Figma stawia je z lewej, na
     x=16, 20×20). Motyw ich nie ma, a rysowanie ikony z pamięci daje inny glif
     niż projekt — do wyeksportowania z Figmy razem z 5 banerami i 4 logotypami
     mennic. Do tego czasu zostaje sama strzałka rozwijania po prawej. */
  .cg-mfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
  .cg-mfilters__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 48px; padding: 8px 16px; text-align: left;
    border: 1px solid var(--cg-black-10, rgba(0,0,0,.1)); border-radius: 8px;
    background: #fff; cursor: pointer;
  }
  .cg-mfilters__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cg-mfilters__label { font-size: 13px; font-weight: 500; color: #000; }
  .cg-mfilters__value {
    font-size: 11px; color: rgba(0,0,0,.5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cg-mfilters__arrow { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .2s ease; }
  .cg-mfilters__btn[aria-expanded="true"] .cg-mfilters__arrow { transform: scaleY(-1); }

  /* Panele otwierane tym paskiem — domyślnie schowane na mobile. */
  .cg-filtry { display: none; }
  .cg-filtry.is-open { display: block; }
  .cg-toolbar__sort { display: none; }
  .cg-toolbar__sort.is-open { display: block; }

  /* ⚠️ NIE dodawać tu reguł na `.cg-cats*` — to MENU KATEGORII w nagłówku (drawer mobilny),
     nie filtry sklepu. Wcześniej stał tu blok „Filtry — inline" z `flex-direction: row !important`,
     który rozsypywał drawer w poziome kafle (sklep.css ładuje się PO main.css, więc wygrywał).
     Filtry listingu to `.cg-filtry` (patrz wyżej w tym pliku). */

  /* Koszyk drawer — pełna szerokość */
  .woocommerce-cart-form {
    font-size: 14px;
  }

  .woocommerce-cart-form table {
    font-size: 12px;
  }

  .woocommerce-cart-form .quantity {
    flex: 0 0 auto;
  }

  /* Checkout — single column */
  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 {
    float: none;
    width: 100%;
  }

  #customer_details {
    margin-bottom: 24px;
  }

  /* Wyniki wyszukiwania, kategoria — info */
  .woocommerce-result-count {
    font-size: 12px;
  }

  .woocommerce-pagination .page-numbers {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* ══ PRZYKLEJONY PASEK ZAKUPU (Figma 8122:7785) ═══════════════════════════
   390 × 88 przy dolnej krawędzi, wnętrze 358 × 56: licznik 134, odstęp 16,
   przycisk 208. Widoczny wyłącznie na telefonie — na desktopie przycisk
   „Dodaj do koszyka" i tak stoi obok galerii i pasek tylko zasłaniałby treść.
   Pokazywaniem steruje `sklep.js` (IntersectionObserver na `form.cg-atc`);
   `[hidden]` jest stanem początkowym, żeby pasek nie mignął przed startem JS. */
.cg-atc-bar { display: none; }

@media (max-width: 900px) {
  .cg-atc-bar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;                 /* nad treścią, pod szufladą menu (100) */
    padding: 16px;
    /* Telefony z paskiem gestów: pasek musi kończyć się nad nim, nie pod nim. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  }
  .cg-atc-bar[hidden] { display: none; }

  .cg-atc-bar__inner { display: flex; gap: 16px; align-items: stretch; }
  .cg-atc-bar__qty { flex: 0 0 134px; min-width: 0; box-sizing: border-box; }
  .cg-atc-bar__qty .cg-qty__btn { flex: 0 0 56px; width: 56px; height: 54px; }
  .cg-atc-bar__qty .cg-qty__input { flex: 1 1 auto; width: 0; min-width: 0; height: 54px; }
  .cg-atc-bar__submit { flex: 1 1 auto; min-height: 56px; }

  /* 🔴 Ikona koszyka rosła do 96×96 px: rozpychała przycisk, łamała napis na trzy
     linie („Dodaj / do / koszyka") i wylewała się poza jego obrys — na NAJWAŻNIEJSZYM
     przycisku w sklepie, widocznym dopiero po przewinięciu, więc nikt tego nie złapał.

     Mechanizm: `cg_icon()` wypuszcza `<svg width="100%" height="100%">` w `<span class="cg-icon">`,
     a `.cg-icon` ma w `main.css` TYLKO `display: inline-flex` — zero rozmiaru. Wszędzie
     indziej rozmiar daje reguła kontekstowa albo modyfikator `--16`; tutaj takiej reguły
     nie było, więc `100%` liczyło się względem elastycznego rodzica i puchło.
     Zmierzone na 10 trasach: 231 ikon w normie (14/15/16/20 px), ta jedna 96 px. */
  .cg-atc-bar__submit .cg-icon { flex: 0 0 auto; width: 20px; height: 20px; }
}

/* ══ „Potrzebujesz pomocy?" w kasie — Figma 8158:8829 ═══════════════════
   Karta towarzyszy podsumowaniu na każdym kroku. Dodana 20.08; wcześniej klient,
   który utknął na płatności, nie miał z tego ekranu żadnej drogi do człowieka.

   DSK-V07: klasa nazywała się `.cg-help`, tak samo jak zupełnie inny komponent
   w `pages.css` (siatka dwukolumnowa Centrum Pomocy, `376px 1fr`). Obie reguły mają
   tę samą specyficzność (0,1,0), więc o wygranej decydowała wyłącznie kolejność
   `<link>` w danym widoku — na checkoucie wygrywała siatka z Centrum Pomocy i wpychała
   tę kartę w dwie kolumny, których nie mieściła (20 px przewinięcia w poziomie przy
   1440 px). Naprawa u źródła: własna, nieskolidowana nazwa klasy zamiast łatania
   cudzego grida. */

.cg-checkout-help {
	margin-top: 16px;
	padding: 20px;
	border: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05));
	border-radius: var(--cg-r-card, 16px);
	background: var(--cg-white, #fff);
	box-shadow: var(--cg-shadow-card);
}

.cg-checkout-help__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}
.cg-checkout-help__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--cg-gold, #C18C21); }
.cg-checkout-help__title {
	margin: 0;
	font: var(--cg-fw-medium) 17px/1.35 var(--cg-font);
	letter-spacing: -0.03em;
	color: var(--cg-black);
}

.cg-checkout-help__rows { margin: 0; }
.cg-checkout-help__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
}
.cg-checkout-help__row + .cg-checkout-help__row { border-top: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05)); }
.cg-checkout-help__row dt { margin: 0; opacity: .7; }
/* `dd` ma w przeglądarce domyślny `margin-left: 40px` — bez wyzerowania wartość
   ucieka w prawo i na 390 px łamie się na dwie linie przy samym telefonie. */
.cg-checkout-help__row dd { margin: 0; text-align: right; }
.cg-checkout-help__row a { color: var(--cg-gold, #C18C21); text-decoration: none; }
.cg-checkout-help__row a:hover { text-decoration: underline; }

/* Wiersz „Livechat" (Figma 8158:8829). To przycisk, nie link — czat otwiera sie
   w tym samym oknie, a `<a href="#">` zostawialby smiec w historii przegladarki.
   Wyglada dokladnie jak telefon i e-mail obok, wiec karta zostaje jednolita. */
.cg-checkout-help__chat {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--cg-gold, #C18C21);
	cursor: pointer;
}
.cg-checkout-help__chat:hover { text-decoration: underline; }
.cg-checkout-help__chat:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

@media (max-width: 720px) {
	/* Numer telefonu i e-mail nie mieszczą się obok etykiety na wąskim ekranie —
	   Figma pokazuje je wtedy pod spodem, wyrównane do lewej. */
	.cg-checkout-help__row { flex-direction: column; align-items: flex-start; gap: 2px; }
	.cg-checkout-help__row dd { text-align: left; }
}

/* ⚠️ TE BLOKI MUSZĄ STAĆ NA KOŃCU PLIKU. `@media` nie dodaje specyficzności, a reguły
   bazowe (`.cg-archive__refresh`, `.woocommerce-pagination a`) mają tyle samo klas —
   przy wstawieniu wyżej wygrywałyby kolejnością. Ta sama pułapka złapała już blok
   `@container` karty oddziału (0.49.5, naprawione w 0.49.6). */
/* ══ MOB-66 + MOB-69 + MOB-72 · CHROME LISTINGU NA TELEFONIE ═════════════════════
   Ramka 7936:3733/3885. Zmierzone różnice wobec live:
     • pasa filtrów w ogóle nie było — Figma daje pas FULL-BLEED 390 × 80 na tle
       rgba(0,0,0,.02) z wyściółką 16, a pigułki mają promień 48 i to samo tło
       (na live: biały prostokąt r8 z obwódką 1 px, font systemowy 13,33);
     • pigułka „Aktualizacja cen”: 183 × 26, promień 6, wyściółka 4/8, tekst 12 px
       w czerni 70% (na live 192 × 32, promień 100, 14 px w czerni 30%);
     • licznik wyników 16/400 w czerni 70% (na live 14/500 w czerni 30%);
     • H1 tracking −1.28 px, czyli −0.04em przy 32 px (na live −0.96).

   🔴 MOB-72: przełącznik siatka/lista Figma nie ma wcale — chowamy go na telefonie
   (nie usuwam z DOM: na desktopie zostaje, to wzór od Huberta z 07-18). */
@media (max-width: 900px) {
  .cg-archive__main .cg-toolbar {
    margin-inline: calc(50% - 50vw);
    padding: 16px var(--cg-gutter, 16px);
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
    align-items: center;
    column-gap: 16px;
  }
  .cg-archive__main .cg-toolbar .woocommerce-ordering select,
  .cg-archive__main .cg-toolbar .cg-filters__toggle {
    height: 48px;
    border-radius: 48px;
    border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
    font: var(--cg-fw-medium, 500) 14px/1 var(--cg-font);
  }
  /* Figma nie ma przełącznika widoku w pasie filtrów — tylko dwie pigułki. */
  .cg-archive__main .cg-view-toggle { display: none; }

  .cg-archive__main .woocommerce-result-count {
    font-size: 16px;
    font-weight: 400;
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
    opacity: 1;
  }
  .cg-archive__head h1,
  .cg-archive__main h1 { letter-spacing: var(--cg-tracking); }

  /* Pigułka „Aktualizacja cen” — chip 26 px, nie pastylka 32 px. */
  .cg-archive__refresh {
    height: 26px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
  }
  .cg-archive__refresh svg { width: 12px; height: 12px; }
}

/* ══ MOB-68 · PAGINACJA NA TELEFONIE (ramka 7936:3836) ═══════════════════════════
   Figma: pas full-bleed 390 × 80 na tle rgba(0,0,0,.02) — licznik „1-3 z 2948” po
   lewej (14 px), a po prawej trzy kafle 48 × 48 promień 16: wstecz na tle 2%,
   aktywna biała z obwódką, dalej. Na live: pas 358 × 32 z numerami 1–8 w kołach
   40 × 40, aktywna wypełniona złotem.
   Numery poza aktywną i strzałkami chowamy — przy 2948 produktach lista numerów
   i tak nie mieści się na 390 px, a Figma jej nie pokazuje. */
@media (max-width: 900px) {
  .woocommerce-pagination {
    margin-inline: calc(50% - 50vw);
    padding: 16px var(--cg-gutter, 16px);
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
  }
  .woocommerce-pagination ul {
    margin: 0;
    gap: 8px;
    justify-content: flex-end;
  }
  .woocommerce-pagination li { display: none; }
  /* Zostają: aktywna strona i obie strzałki. */
  .woocommerce-pagination li:has(.current),
  .woocommerce-pagination li:has(.prev),
  .woocommerce-pagination li:has(.next) { display: block; }
  .woocommerce-pagination a,
  .woocommerce-pagination span {
    min-width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
    font-size: 14px;
  }
  .woocommerce-pagination span.current,
  .woocommerce-pagination .current {
    background: #fff;
    border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
    color: var(--cg-black, #000);
  }
}

/* ══ MOB-17 + MOB-20 + MOB-55 + MOB-57 + MOB-67 · KARTA PRODUKTU NA TELEFONIE ═════
   Ramki 7736:6036/6037 (listing) i 7736:6025 (karuzela na stronie głównej).
   Zmierzone różnice: kafel obrazu ma być KOŁEM (promień 248 przy kaflu, 100 przy
   zdjęciu), tytuł mniejszy, CTA 48 px z fontem 14 i strzałką.

   🔴 KONFLIKT FIGMA↔FIGMA, rozstrzygnięty na korzyść zgłoszenia JW.
   Te ramki chcą koła dla KAŻDEGO produktu. Ramka 7151:405/406 — ta, z której
   powstało LP13 — chce dla SZTABKI prostokąta 143 × 216 przy zdjęciu 127 × 200.
   Koło ucięłoby pionowy kartonik sztabki z góry i dołu, czyli dokładnie to,
   co JW zgłaszał DWA razy (nr 5 i nr 13). Dlatego koło dostają wszystkie karty
   POZA `.cg-card__media--sztabka`. Do rozstrzygnięcia u projektanta — zapisane
   w erracie audytu. */
@media (max-width: 900px) {
  /* Listing: kafel 112 × 112, zdjęcie 104 × 104 (7736:6037). */
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__media:not(.cg-card__media--sztabka) {
    width: 112px;
    height: 112px;
    padding: 4px;
    border-radius: 50%;
  }
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__media:not(.cg-card__media--sztabka) img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Tytuł na listingu: 12 px (7736:6036). Karuzela na stronie głównej ma 16 px —
     inny węzeł, niżej. */
  .cg-archive__main .cg-grid:not(.cg-grid--list) .cg-card__title {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: var(--cg-tracking);
  }

  /* Karuzela na stronie głównej: kafel 128 × 128, zdjęcie 120 × 120 (7736:6025). */
  .cg-carousel .cg-card__media:not(.cg-card__media--sztabka) {
    width: 128px;
    height: 128px;
    padding: 4px;
    border-radius: 50%;
  }
  .cg-carousel .cg-card__media:not(.cg-card__media--sztabka) img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
  }
  .cg-carousel .cg-card__title {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: var(--cg-tracking);
  }

  /* REG-03: CTA karty ma RÓŻNĄ wysokość per kontekst (Figma): karuzela strony głównej 48 px,
     mniejsza karta listingu 40 px. Wcześniej ta reguła ujednolicała OBA do 48 px i — będąc
     później w pliku niż reguła listingu (`height: 40px`) o tej samej specyficzności — wygrywała
     kolejnością, przez co CTA listingu było o 8 px za wysokie. Zostaje tu tylko karuzela;
     listing bierze swoje 40 px z bloku wyżej (`.cg-grid:not(.cg-grid--list) .cg-card__cta`). */
  .cg-carousel .cg-card__cta {
    min-height: 48px;
    height: 48px;
    font-size: 14px;
  }
}

/* ══ MOB-73 + MOB-18 + MOB-77 + MOB-78 · KARTA PRODUKTU NA TELEFONIE ═════════════
   Ramki 7978:5751 (kolejność i typografia), 7230:1577 (cena), 8011:3835 (zakładki).

   MOB-73 — KOLEJNOŚĆ SEKCJI JEST ODWRÓCONA. Figma: tagi i tytuł na y=283, galeria
   dopiero na y=395. Na live: galeria y=203, H1 y=567, czyli klient najpierw widzi
   zdjęcie, a dowiaduje się, co to jest, dwa ekrany niżej. W DOM galeria stoi przed
   panelem zakupowym (desktop ma je OBOK siebie: 920 | 648), więc na telefonie
   przestawiamy je `order`-em — bez ruszania znacznika, żeby desktop został 1:1.

   🔴 REG-02 (retest QA 26.08) — pierwsza wersja tej poprawki NIE DZIAŁAŁA i dawała
   kolejność gorszą niż przed nią: cena y=276 i „Dodaj do koszyka" y=442 PRZED nazwą
   produktu y=684 i zdjęciem y=737. Klient kupował, zanim zobaczył co.

   Przyczyna: komentarz zakładał „tagi → tytuł → reszta w kolejności z DOM-u", ale
   `order: 1` i `2` NIE przesuwają elementu na początek — przesuwają go na KONIEC.
   Elementy bez `order` mają domyślne `0`, więc ceny, CTA i pas zaufania wyprzedzały
   tagi (1) i tytuł (2). Poprawnie: wartości UJEMNE.

   Kolejność docelowa zweryfikowana bezpośrednio w Figmie (7978:5751, odczyt 26.08),
   bo komentarz w kodzie i raport QA podawały dwie różne: okruszki 237 → tagi 283 →
   tytuł 317 → galeria 395 → cena 579 → ilość+CTA 719 → pas zaufania 791 → widełki 863.
   Raport QA („galeria, tagi, H1") się myli — galeria jest TRZECIA, nie pierwsza.

   Galeria jest siostrą panelu, nie jego dzieckiem, więc samym `order` nie da się jej
   wsunąć MIĘDZY tytuł a ceny. Stąd `display: contents` na panelu: jego dzieci stają się
   elementami tej samej siatki flex co galeria i dają się ułożyć razem. Wyciągamy tylko
   TRZY rzeczy na przód wartościami ujemnymi — reszta (separatory `<hr>`, ceny, CTA,
   pas zaufania) zostaje przy domyślnym `0` i zachowuje kolejność z DOM-u, która jest
   już zgodna z projektem. Dzięki temu dołożenie kolejnej sekcji do panelu niczego
   nie rozsypie. */
@media (max-width: 900px) {
  /* 🔴 `align-items: stretch`, NIE odziedziczone z desktopu `start`. W kolumnowym
     flexboksie oś poprzeczna to SZEROKOŚĆ — przy `start` każde dziecko dostaje szerokość
     własnej treści zamiast szerokości kontenera. Pas zaufania (4 kafle × 204 px) puchł
     wtedy do 872 px przy ekranie 500 px i ciągnął stronę w bok, a `min-width: 0`
     tego nie ruszało, bo problem nie był w kurczeniu, tylko w wyznaczaniu szerokości.
     Na desktopie `start` zostaje — tam trzyma galerię i panel wyrównane do góry. */
  .cg-product__top { display: flex; flex-direction: column; align-items: stretch; }
  /* Panel przestaje być własnym pudełkiem — jego dzieci wchodzą do siatki rodzica,
     żeby galeria mogła stanąć między tytułem a cenami. */
  .cg-product__top > .cg-buybox { display: contents; }

  .cg-buybox > .cg-card__tags { order: -3; }
  .cg-buybox > .cg-buybox__title { order: -2; }
  .cg-product__top > .cg-gallery { order: -1; }

  /* 🔴 Element flex ma domyślne `min-width: auto` — NIE zejdzie poniżej szerokości swojej
     treści. Dopóki panel był zwykłym blokiem, jego dzieci tego nie dotyczyło; po przejściu
     na `display: contents` stały się elementami flex i pas zaufania (4 kafle × 204 px)
     rozepchnął stronę o 372 px, bo `overflow-x: auto` nie miało czego przycinać.
     To ta sama pułapka, co `minmax(0, 1fr)` zamiast `1fr` na siatce listingu. */
  .cg-product__top > *,
  .cg-buybox > * { min-width: 0; }

  /* MOB-78: H1 24 px z trackingiem −0.04em (na live −0.02em, czyli −0.48 px). */
  .cg-buybox__title { font-size: 24px; letter-spacing: var(--cg-tracking); }

  /* MOB-18: cena 40 px SemiBold w kolorze #102100 (na live 28 px Medium w czerni 70%).
     Ten zielono-czarny to kolor z projektu, nie zwykła czerń. */
  .cg-buybox__price {
    font-size: 40px;
    font-weight: 600;
    color: #102100;
    letter-spacing: var(--cg-tracking);
  }

  /* MOB-77: segment zakładki 117 × 48, promień 48, BEZ odstępu między segmentami,
     label 16 px z trackingiem −0.04em (na live 115 × 48, gap 2, font 14 bez trackingu). */
  .cg-tabs__nav { gap: 0; }
  .cg-tabs__btn {
    height: 48px;
    padding-inline: 8px;
    border-radius: 48px;
    font-size: 16px;
    letter-spacing: var(--cg-tracking);
  }

  /* MOB-78: nagłówek sekcji powiązanej 32 px i szerokość treści (358 przy x=16),
     nie pełne 390 przy x=0. */
  .cg-product ~ .cg-section .cg-carousel__head h2,
  .cg-carousel__head h2 {
    font-size: 32px;
    letter-spacing: var(--cg-tracking);
  }
}

/* ══ MOB-79…83 · KOSZYK NA TELEFONIE ═════════════════════════════════════════════
   Ramki 8011:5099/5121/5132, 8025:5199, 8026:5534. Pozycje audytu z 21.08. */
@media (max-width: 900px) {

  /* MOB-79: pas kroków ma być FULL-BLEED 390 × 84 od x=0, gradient LINIOWY,
     segmenty jako paski 103 × 8 z promieniem 100. Na live: 358 × 85 od x=16,
     tło radialne, cienkie kreski 3 px. */
  .cg-progress:not(.is-in-header) {
    margin-inline: calc(50% - 50vw);
    padding: 16px var(--cg-gutter, 16px);
    gap: 24px;
    background: var(--cg-green-gradient, #12472B);
  }
  .cg-progress__bar { height: 8px; border-radius: 100px; background: rgba(0, 0, 0, .3); }
  .cg-progress__label { font-size: 14px; color: #fff; }
  .cg-progress__sub { color: rgba(255, 255, 255, .7); }

  /* MOB-80: podpis pod tytułem 16 px w czerni 70% (na live 14 px z krycia 60%). */
  .cg-cart__count { font-size: 16px; color: var(--cg-black-70, rgba(0, 0, 0, .7)); opacity: 1; }

  /* MOB-81: plakietka aktualizacji to chip 26 px z TŁEM, nie pastylka z obwódką
     (na live 36 px, promień 40, bez tła). */
  .cg-cart__refresh {
    height: 26px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--cg-black-05, rgba(0, 0, 0, .05));
    opacity: 1;
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
  }
  .cg-cart__refresh svg { width: 12px; height: 12px; }

  /* MOB-82: pusty koszyk jako KARTA — na live był goły blok bez tła i promienia.
     Figma: 358 × 320, promień 12, wyściółka 24, odstęp 32, tło 2%; tytuł 24 px;
     koło 88 × 88 z ikoną 40 × 40; CTA na tle złota 10% z tekstem #C18C21. */
  .cg-cart--empty .cg-empty,
  .cg-cart--empty > div {
    padding: 24px;
    gap: 32px;
    min-height: 0;
    border-radius: 12px;
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
  }
  .cg-empty__title { font-size: 24px; }
  .cg-empty__icon { width: 88px; height: 88px; }
  .cg-empty__icon svg { width: 40px; height: 40px; }
  .cg-empty__lead { font-size: 16px; color: var(--cg-black-70, rgba(0, 0, 0, .7)); opacity: 1; }
  /* CTA pustego koszyka: beżowe tło i złoty tekst, nie złoty gradient z białym. */
  .cg-empty__cta {
    height: 56px;
    border-radius: 100px;
    background: var(--cg-gold-10, rgba(193, 140, 33, .1));
    color: var(--cg-gold, #C18C21);
    font-size: 16px;
  }

  /* MOB-83: karta podsumowania — promień 12 i tło 2% (na live 16 i #F7F7F5),
     tytuł 24 px (na live 18). CTA zostaje w karcie: wyjęcie go „pod kartę"
     wymagałoby zmiany znacznika, a Figma stawia go tam jako osobny element —
     zapisane jako pozycja strukturalna, nie kosmetyczna. */
  .cg-summary {
    border-radius: 12px;
    background: var(--cg-black-02, rgba(0, 0, 0, .02));
  }
  .cg-summary__title { font-size: 24px; }
  .cg-summary__cta {
    height: 56px;
    border-radius: 100px;
    color: rgba(0, 0, 0, .7);
    font-size: 16px;
    font-weight: var(--cg-fw-medium, 500);
  }
}

/* ══ MOB-86 (część realna) · ETYKIETY I KARTA FORMULARZA KASY ════════════════════
   🔍 Audyt twierdzi, że etykiety kasy to `screen-reader-text` o wymiarze 0 × 0
   i zostają same placeholdery. Sprawdzone na wdrożonym HTML-u: etykiety SĄ
   widoczne (`.cg-checkout label` = 13 px, krycie .75), a `screen-reader-text`
   ma wyłącznie `address_2` — i to jest domyślne zachowanie WooCommerce dla pola
   opcjonalnego „Nr mieszkania", nie nasza regresja. Piąty fałszywy alarm audytu.

   Realne różnice wobec Figmy, które zostają do poprawy: etykieta ma być pełnym
   14 px w czerni 70% (nie 13 px z kryciem), a sekcje formularza kartą na tle 2%
   z wyściółką 24 i odstępem 24. */
@media (max-width: 900px) {
  .cg-checkout label {
    font-size: 14px;
    font-weight: var(--cg-fw-medium, 500);
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
    opacity: 1;
  }
  /* Wyściółka i odstęp panelu sekcji jak w Figmie (24, nie 20). */
  .cg-cstep__body { padding: 24px; }
  .cg-fields { display: flex; flex-direction: column; gap: 24px; }

  /* MOB-85: tytuł „Płatność" nie potrzebuje 32 px nad kompaktowym pasem kasy —
     Figma 8158:8866 daje cały pas 58 px, a nasz nagłówek zostaje pełny (zmiana
     nagłówka na osobny, 58-pikselowy pas to przebudowa `header.php`, nie CSS —
     zapisane jako pozycja strukturalna). Tu tylko domykamy odstęp. */
  .cg-checkout__title { font-size: 24px; margin-bottom: 16px; }
}

/* ══ MOB-76 · PASY ZAUFANIA JAKO TAŚMA (ramka 8026:6411) ═════════════════════════
   Figma: jeden rząd wysokości 56 — cztery kafle 204 × 56 promień 12, wyściółka 16,
   odstęp 8, przewijane w poziomie. Na live słupek czterech kafli 358 × 56 zajmował
   248 px wysokości. Przewijanie natywne (`overflow-x`), żeby działało bez JS-a. */
@media (max-width: 900px) {
  .cg-trust {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Taśma sięga krawędzi ekranu, żeby czwarty kafel „wystawał" jak w projekcie.
       🔴 REG-01: NIE `calc(50% - 50vw)`. Procent rozwiązuje się względem rodzica, a odkąd
       panel zakupowy jest `display: contents` (REG-02 wyżej), rodzicem jest siatka flex,
       której szerokość zależy od treści. Powstaje zapętlenie: taśma żąda pełnego okna,
       rodzic rośnie, taśma znów żąda więcej — zmierzone 372 px przewijania w poziomie.
       Ujemny margines w PIKSELACH równy marginesowi strony daje ten sam efekt wizualny
       (dojście do krawędzi ekranu) bez zależności od szerokości rodzica. */
    margin-inline: calc(-1 * var(--cg-gutter, 16px));
    padding-inline: var(--cg-gutter, 16px);
  }
  .cg-trust::-webkit-scrollbar { display: none; }
  .cg-trust > * {
    flex: 0 0 204px;
    height: 56px;
    padding: 16px;
    border-radius: 12px;
    scroll-snap-align: start;
  }
}

/* ══ MOB-19 + MOB-75 (część) · GALERIA PDP NA TELEFONIE ══════════════════════════
   Figma 8011:3710 chce karuzeli pięciu slajdów (środek 160 × 160, boki 140 × 140,
   odstęp 7, dwie strzałki 32 × 32). Na live: główne zdjęcie 191 × 191 z promieniem
   ZERO plus miniatury w siatce.

   🔴 Pełna karuzela pięciu slajdów to przebudowa znacznika i nowy JS — zapisane jako
   pozycja strukturalna. Tu domykam dwie rzeczy, które są czystym CSS-em i same z siebie
   zbliżają układ: promień 12 na zdjęciu (jedyny obrazek na PDP bez zaokrąglenia)
   oraz miniatury jako pozioma taśma z podglądem następnej, zamiast sztywnej siatki
   czterech kolumn, która przy dwóch zdjęciach zostawiała dwie puste kratki. */
@media (max-width: 900px) {
  .cg-gallery__main { border-radius: 12px; overflow: hidden; }
  .cg-gallery__main img { border-radius: 12px; }
  .cg-gallery__thumbs {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cg-gallery__thumbs::-webkit-scrollbar { display: none; }
  .cg-gallery__thumb {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    scroll-snap-align: start;
  }
  /* Aktywna miniatura jest większa — to jedyny sygnał, którą pozycję widzi klient
     na głównym zdjęciu (Figma: środek 160 wobec boków 140). */
  .cg-gallery__thumb.is-active { flex-basis: 160px; width: 160px; height: 160px; }

  /* Strzałki (Figma 8011:3710): 32×32, koło, nad rogami głównego zdjęcia.
     Widoczne tylko gdy jest co przełączać — `single-product.php` renderuje je
     jedynie przy niepustej galerii, więc na produktach z jednym zdjęciem nie ma
     ich w DOM wcale (nie trzeba ich chować osobną regułą). */
  .cg-gallery__main { position: relative; }
  .cg-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cg-black-10, rgba(0, 0, 0, .1));
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--cg-shadow-card, 0 2px 8px rgba(0, 0, 0, .06));
    font-size: 16px;
    line-height: 1;
    color: var(--cg-black, #000);
  }
  .cg-gallery__arrow--prev { left: 8px; }
  .cg-gallery__arrow--next { right: 8px; }
  .cg-gallery__arrow:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }
}

/* ══ MOB-13 (część) · „CHCĘ SPRZEDAĆ" JAKO LINK, NIE SZARY PRZYCISK ══════════════
   🔍 Połowa zgłoszenia jest nieaktualna: cena JUŻ jest złotą pigułką
   (`.cg-badge--gold` w `page-skup.php:120`). Zostaje druga połowa — „Chcę sprzedać"
   był szarym przyciskiem i czytał się jak wyłączony, mimo że to główna akcja tej
   strony; Figma daje tam link. Wzmianka audytu o „wierszach wagowych (1 uncja)"
   zamiast nazw produktów dotyczy DANYCH w `cg_prices`, nie stylu. */
@media (max-width: 900px) {
  .cg-buyback__cta {
    background: none;
    border: 0;
    padding: 0;
    height: auto;
    color: var(--cg-gold, #C18C21);
    text-decoration: underline;
    font-size: 14px;
  }
}

/* ══ MOB-10 + MOB-30 (część) · PLAKIETKA AKTUALIZACJI NAD TYTUŁEM ════════════════
   Ramki mobilne (7936:3885 listing, 8011:5099 koszyk) stawiają plakietkę
   „Aktualizacja cen" NAD nagłówkiem H1, nie obok niego. Na desktopie nagłówek
   jest flexem w rzędzie (plakietka po prawej) i tak zostaje — Figma desktopowa
   ma ją właśnie tam. Na telefonie odwracamy kolejność `order`-em. */
@media (max-width: 900px) {
  .cg-archive__head,
  .cg-cart__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cg-archive__head > .cg-archive__refresh,
  .cg-cart__head > .cg-cart__refresh { order: 1; }
  .cg-archive__head > div,
  .cg-cart__head > div { order: 2; }
}

/* ══ MOB-43 · STEPPER KASY BEZ SŁOWA „KROK" ══════════════════════════════════════
   Ramka checkoutu: pasek postępu to same etykiety Koszyk / Płatność / Gotowe.
   ⚠️ Tylko KASA — ramka koszyka (8011:5132, MOB-79) podpisy „Krok 1/2/3" MA,
   więc tam zostają. Body class odróżnia oba konteksty bez zmiany markupu. */
@media (max-width: 900px) {
  body.woocommerce-checkout .cg-progress__sub { display: none; }
}

/* ══ MOB-32 (wygląd) · TABELA WIDEŁEK NA TELEFONIE (Figma 8011:3767, 358 × 180) ══
   Wartości podaje baza (`_cg_tiers` z Odoo) — tu wyłącznie skład: nagłówek 12 px
   w czerni 70%, wiersze 48 px z separatorem, plakietki cen jak w projekcie.
   Reguły działają też na fallbacku (wiersz Cena/Skup przed podłączeniem widełek). */
@media (max-width: 900px) {
  .cg-tiers { padding: 16px; border-radius: 12px; }
  .cg-tiers__head {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
  }
  .cg-tiers__row { min-height: 48px; }
  .cg-tiers__row + .cg-tiers__row {
    margin-top: 0;
    border-top: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05));
  }
}

/* ══ MOB-12 + MOB-95 · SEGMENTY WYKRESU (ramki 8076:4753 / 8071:3999) ════════════
   Pas metalu 358 × 56 (wyściółka 4, promień 52), okres jako pigułki w bloku z
   tytułem. Widoczne TYLKO na telefonie — desktop zostaje przy selectach
   (Figma desktopowa 7335:5006 je ma). Selecty metalu i okresu na telefonie
   znikają, jednostka i waluta zostają w narzędziach. */
.cg-chart__segs { display: none; }
@media (max-width: 900px) {
  .cg-chart__segs:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
  .cg-chart__seg-row {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 52px;
    background: var(--cg-black-05, rgba(0, 0, 0, .05));
  }
  .cg-chart__seg {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border: 0;
    border-radius: 48px;
    background: transparent;
    color: var(--cg-black-30, rgba(0, 0, 0, .45));
    font: var(--cg-fw-medium, 500) 14px/1 var(--cg-font);
    letter-spacing: var(--cg-tracking);
    cursor: pointer;
  }
  .cg-chart__seg.is-active {
    background: #fff;
    color: var(--cg-black, #000);
    box-shadow: var(--cg-shadow-card, 0 2px 8px rgba(0, 0, 0, .06));
  }
  .cg-chart__seg:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }
  .cg-chart__seg-title {
    margin: 0 0 8px;
    font: var(--cg-fw-medium, 500) 14px/1.2 var(--cg-font);
    color: var(--cg-black-70, rgba(0, 0, 0, .7));
  }
  /* Pigułki okresu: bez wspólnej ramy, każdy chip osobno (Figma: blok 358 × 120). */
  .cg-chart__seg-row--pills { padding: 0; border-radius: 0; background: none; flex-wrap: wrap; gap: 8px; }
  .cg-chart__seg-row--pills .cg-chart__seg {
    flex: 1 1 40%;
    background: var(--cg-black-05, rgba(0, 0, 0, .05));
  }
  .cg-chart__seg-row--pills .cg-chart__seg.is-active { background: #fff; }

  /* Selecty metalu i okresu zastąpione segmentami; jednostka zostaje. */
  .cg-chart__tools .cg-select:has([data-quote-metal]),
  .cg-chart__tools .cg-select:has([data-quote-range]) { display: none; }
}

/* ══ MOB-85 · PAS KASY 58 PX NA TELEFONIE (ramka 8158:8866) ══════════════════════
   Figma: jeden kompaktowy pas z gradientem — logo 95×24 przy x=16, minipostęp
   239×26 (trzy pozycje 72×26, gap 12) przy x=135. Zero topbaru, zero pełnego
   nagłówka sklepu, zero osobnego pasa 84 px pod nim.

   Mechanizm: `sklep.js` (patrz komentarz tam) przenosi ten sam element
   `[data-cg-progress]`, który desktop od zawsze wciąga do `.cg-nav__inner` —
   tylko teraz robi to i na telefonie, WYŁĄCZNIE dla `body.woocommerce-checkout`.
   Koszyk (`body.woocommerce-cart`) nie jest tu wymieniony świadomie: MOB-79 chce
   dla niego pełnego pasa 84 px pod nagłówkiem, więc ten selektor go nie dotyczy.

   ⚠️ Bez JS-a `.is-in-header` nigdy się nie doda — pas zostaje pod nagłówkiem,
   pełny, tak jak dziś. Nic się nie psuje, tylko nie skraca. */
@media (max-width: 900px) {
  body.woocommerce-checkout .cg-topbar { display: none; }
  body.woocommerce-checkout .cg-nav__inner {
    grid-template-columns: auto 1fr;
    min-height: 0;
    padding-block: 0;
    height: 58px;
    background: var(--cg-green-gradient, #12472B);
  }
  body.woocommerce-checkout .cg-nav__inner > .cg-logo {
    grid-column: 1;
    justify-self: start;
  }
  body.woocommerce-checkout .cg-logo__svg svg { width: 95px; height: 24px; }

  /* Minipostęp wjechał do .cg-nav__inner jako TRZECI element — obok logo,
     w kolumnie 2 (auto 1fr: logo bierze tyle, ile potrzebuje, reszta idzie
     do pasa kroków wyrównanego do prawej). */
  body.woocommerce-checkout .cg-nav__inner > .cg-progress.is-in-header {
    grid-column: 2;
    justify-self: end;
    display: flex;
    gap: 12px;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }
  body.woocommerce-checkout .cg-progress.is-in-header .cg-progress__item {
    width: 72px;
    gap: 4px;
  }
  body.woocommerce-checkout .cg-progress.is-in-header .cg-progress__label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ten sam pas [data-cg-progress] zostaje w DOM tylko RAZ — po przeprowadzce
     do nagłówka trzeba schować pustą przestrzeń, którą zajmował pod nim
     (`inc/koszyk.php` renderuje go raz, JS go PRZENOSI, nie klonuje, więc
     tej reguły de facto nic nie dotyczy w praktyce — zostaje jako siatka
     bezpieczeństwa, gdyby kolejność hooków się kiedyś zmieniła). */
  body.woocommerce-checkout .cg-progress:not(.is-in-header) { display: none; }
}

/* ══ MOB-27 · KOSZYK NA TELEFONIE 1:1 Z FIGMĄ — BEZ PASKA PROGU I CROSS-SELLU ═════
   Potwierdzone z Huberta 21.08: pasek „Do darmowej wysyłki brakuje" (`.cg-ship`)
   i sekcja „Dobierz akcesoria" (`.cg-upsell`) to nasze dodatki z lipca — Figma ich
   nie ma wcale. Na desktopie zostają (świadoma decyzja, nie dotyczy tego zgłoszenia),
   na telefonie chowamy zgodnie z projektem. CTA koszyka dostaje pełną szerokość
   342 px, tak jak wymaga MOB-27 — bez paska nad nim nic już go nie zwęża. */
@media (max-width: 900px) {
  .cg-cart .cg-ship,
  .cg-cart .cg-upsell { display: none; }
}