/* ============================================================
   ForNails — /koszyk/ PARITY z makietą ForNails-Design22 (2026-07-17)
   Ładowane PO fn-design-cart.css. Naprawia układ dwukolumnowy + dokłada
   H1, kwadratowe miniatury i linię zaufania. Selektory zweryfikowane na
   żywym DOM (WooCommerce Blocks + Woodmart 8.5.5).
   ============================================================ */

:root{
  --fncp-primary: #A34B65;
  --fncp-secondary: #2E2321;
  --fncp-muted: #8B7D77;
  --fncp-success: #6B8F71;
  --fncp-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fncp-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------
   1. H1 „Twój koszyk" (wstrzykiwany JS jako pierwszy element .wc-block-cart)
   ------------------------------------------------------------ */
.wc-block-cart .fn-cart-h1{
  font-family: var(--fncp-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 22px;
  color: var(--fncp-secondary);
}
@media (max-width: 600px){
  .wc-block-cart .fn-cart-h1{ font-size: 28px; margin-bottom: 16px; }
}

/* ------------------------------------------------------------
   2. NAPRAWA UKŁADU DWUKOLUMNOWEGO
   Kontener .wc-block-cart (wc-block-components-sidebar-layout) to flex/wrap.
   Wstrzyknięte elementy (H1, pasek dostawy, gift, upsell, kontynuuj zakupy)
   były traktowane jak kolumny i rozbijały wiersz main+sidebar — sidebar
   spadał pod listę, a pasek dostawy zwężał się do min-content (~46px).
   Rozwiązanie: każdy wstrzyknięty element = pełny wiersz; main+sidebar
   dopiero pod nimi tworzą 2 kolumny (1fr + 350px), jak w makiecie.
   ------------------------------------------------------------ */
.wc-block-cart.wc-block-components-sidebar-layout{
  align-items: flex-start;
}
/* AKTUALIZACJA 13.08.2026 - wyliczanka klas zamieniona na regule ogolna.
   Powod: 10.08 doszedl mu-plugin fn-loyalty.php, ktory wstrzykuje w to samo
   miejsce pudelko "ForNails Klub". Nie bylo go na liscie ponizej, wiec zostalo
   zwyklym elementem flex (flex: 0 1 auto) i zajelo 926 z 1220 px wiersza.
   Skutek przy oknie 1265 px: kolumna z lista produktow scisnieta do 294 px,
   tabela koszyka (minimum ~379 px) wychodzila poza nia o 86 px, a sidebar
   "Podsumowanie" spadal pod spod zamiast stac obok. Przy 1024 px kolumna
   miala juz tylko 53 px. Motyw Woodmart trzyma na body overflow-x: clip,
   wiec nie bylo widac paska przewijania - tresc (kolumna "Razem" z cena
   pozycji) byla po prostu UCINANA i klient jej nie widzial.
   Zamiast dopisywac kolejna klase do listy, ktora i tak zdezaktualizuje sie
   przy nastepnym wstrzyknietym bloku, odwracamy warunek: kolumnami wiersza
   sa WYLACZNIE main i sidebar (tak projektuje ten uklad WooCommerce),
   a kazde inne bezposrednie dziecko dostaje pelny wiersz. */
.wc-block-cart.wc-block-components-sidebar-layout > *:not(.wc-block-cart__main):not(.wc-block-cart__sidebar){
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* domyślnie (mobile/tablet) obie kolumny stackują pełną szerokością */
.wc-block-cart > .wc-block-cart__main,
.wc-block-cart > .wc-block-cart__sidebar{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* desktop: 1fr + 350px (jak makieta grid-template-columns:1fr 350px; gap:34px) */
@media (min-width: 1000px){
  .wc-block-cart > .wc-block-cart__main{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding-right: 34px;
    box-sizing: border-box;
  }
  .wc-block-cart > .wc-block-cart__sidebar{
    flex: 0 0 350px !important;
    width: 350px !important;
    max-width: 350px !important;
  }
}

/* poniżej desktopu sidebar nie może być sticky (jest już pełną szerokością pod listą) */
@media (max-width: 999px){
  .wc-block-cart__sidebar{
    position: static !important;
    margin-top: 24px;
  }
}

/* „Kontynuuj zakupy" na DÓŁ (jak w makiecie — stopka listy), pełny wiersz */
.wc-block-cart > .fn-cart-continue-shopping{
  order: 10;
  margin: 4px 0 0;
  padding-top: 6px;
}

/* pasek darmowej dostawy Woodmart — wewnętrzne elementy pełnej szerokości
   (po naprawie flexa nie wolno mu się już zwężać) */
.wc-block-cart > .wd-shipping-progress-bar .wd-progress-bar,
.wc-block-cart > .wd-shipping-progress-bar .progress-msg,
.wc-block-cart > .wd-shipping-progress-bar .progress-area{
  width: 100%;
}

/* Blok Woodmart „wd/woo-shipping-progress-bar" w koszyku React renderuje się PUSTY
   (sam <div> z białymi znakami, zero treści) — to nie działa w bloku Cart, dawał tylko
   pusty biały box nad paskiem gratisu. Ukrywamy TYLKO gdy nie ma żadnego elementu potomnego;
   jeśli Woodmart kiedyś go wypełni (:has(*)), pokaże się normalnie. Rolę paska postępu pełni
   działający pasek „gratis od progu" (fn-gift-progress-bar) tuż pod nim. */
.wc-block-cart > .wd-shipping-progress-bar:not(:has(*)){
  display: none !important;
}

/* ------------------------------------------------------------
   3. KWADRATOWA MINIATURA 84×84 (live renderowało 58×84 — width nie łapał)
   ------------------------------------------------------------ */
.wc-block-cart-item__image{
  width: 84px !important;
}
/* miniatura jest owinięta w <a>, który kurczył się do szerokości obrazka (~62px),
   a img{max-width:100%} przycinał go do tego <a>. Wymuszamy kwadratowy <a> 84x84. */
.wc-block-cart-item__image a{
  display: block !important;
  width: 84px !important;
  height: 84px !important;
}
.wc-block-cart-item__image img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.wc-block-cart-items__row td,
.wc-block-cart-items__row .wc-block-cart-item__image{
  vertical-align: middle;
}
@media (max-width: 600px){
  .wc-block-cart-item__image,
  .wc-block-cart-item__image a,
  .wc-block-cart-item__image img{
    width: 64px !important;
    height: 64px !important;
  }
}

/* ------------------------------------------------------------
   4. LINIA ZAUFANIA pod przyciskiem „Przejdź do kasy" (wstrzykiwana JS)
   „Bezpieczne płatności · BLIK · karta · przelew"
   ------------------------------------------------------------ */
.fn-cart-trust{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fncp-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fncp-muted);
  text-align: center;
  margin-top: 14px;
}
.fn-cart-trust svg{
  width: 14px;
  height: 14px;
  color: var(--fncp-success);
  flex-shrink: 0;
}

/* ============================================================
   KONIEC fn-design-cart-parity.css
   ============================================================ */