/* ==========================================================================
   Liikye - warstwa sklepu
   Ladowana wylacznie na widokach WooCommerce (katalog, produkt, koszyk,
   platnosc, konto). Styluje klasy generowane przez sklep. Selektory sa
   zawezone do kontenera .woocommerce, zeby nie wchodzic w droge nakladkom
   i wtyczkom, ktore rysuja wlasne sterowanie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Przyciski sklepu
   Wazne: lapiemy .button wewnatrz sklepu, ale wykluczamy klasy bibliotek
   galerii i suwakow. Szeroka regula na przyciski wypchnela kiedys sterowanie
   galerii pod stopke, co wygladalo jak zepsuty uklad.
   -------------------------------------------------------------------------- */

.woocommerce .button:not([class*="pswp"]):not([class*="slick"]):not([class*="owl"]):not([class*="mfp"]):not([class*="ui-"]):not(.d-none),
.woocommerce-page .button:not([class*="pswp"]):not([class*="slick"]):not([class*="owl"]):not([class*="mfp"]):not([class*="ui-"]):not(.d-none),
.woocommerce input[type="submit"],
.woocommerce-page input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-s-2);
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--lk-r-1);
  background: var(--lk-akcent-tekst);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lk-czas) var(--lk-ease);
}

.woocommerce .button:hover,
.woocommerce-page .button:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce-page input[type="submit"]:hover {
  background: var(--action-primary-hover);
  color: #fff;
}

/* Przyciski drugoplanowe: dalsze zakupy, aktualizacja koszyka, powrot. */
.woocommerce .button.wc-backward,
.woocommerce .button[name="update_cart"],
.woocommerce .button.wc-forward.wp-element-button:not(.checkout-button) {
  background: var(--lk-papier-2);
  color: var(--lk-tusz);
}

.woocommerce .button.wc-backward:hover,
.woocommerce .button[name="update_cart"]:hover {
  background: var(--lk-linia);
  color: var(--lk-tusz);
}

.woocommerce .button[disabled],
.woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   2. Okruszki
   Sklep rysuje wlasne okruszki (nav.woocommerce-breadcrumb), a nie te z motywu,
   wiec odstep trzeba dac osobno. Selektor MUSI byc dwuczlonowy: arkusz sklepu
   ustawia "margin: 0 0 1em" z klasa .woocommerce przed soba, a skrot zeruje
   takze gorny margines - pojedyncza klasa przegralaby na wage selektora.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  margin-block-start: var(--lk-s-4);
}

/* --------------------------------------------------------------------------
   3. Katalog produktow
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  gap: var(--lk-s-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0 0 var(--lk-s-7);
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto !important; /* nadpisuje szerokosci procentowe z arkusza sklepu */
  margin: 0 !important;
  padding: var(--lk-s-5);
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  text-align: center;
  transition: box-shadow var(--lk-czas) var(--lk-ease),
              border-color var(--lk-czas) var(--lk-ease);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--lk-cien-2);
  border-color: transparent;
}

.woocommerce ul.products li.product a img {
  margin-block-end: var(--lk-s-4);
  border-radius: var(--lk-r-1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--lk-font-naglowek);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
  margin-block-end: var(--lk-s-2);
}

.woocommerce ul.products li.product .price {
  display: block;
  color: var(--lk-tusz);
  font-family: var(--lk-font-naglowek);
  font-size: 1.25rem;
  font-weight: 700;
  margin-block-end: var(--lk-s-4);
}

.woocommerce ul.products li.product .price del {
  color: var(--lk-przygaszony);
  font-size: .8em;
  font-weight: 600;
  margin-inline-end: var(--lk-s-2);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  background: transparent;
}

.woocommerce ul.products li.product .button { margin-block-start: auto; }

.woocommerce span.onsale {
  position: absolute;
  inset-block-start: var(--lk-s-3);
  inset-inline-start: var(--lk-s-3);
  z-index: 2;
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: .2em .7em;
  border-radius: var(--lk-r-pigulka);
  background: var(--lk-akcent);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-block-end: var(--lk-s-5); }

.woocommerce .woocommerce-ordering select { width: auto; }

/* --------------------------------------------------------------------------
   4. Strona produktu (baza; konfigurator dostanie wlasna warstwe)
   -------------------------------------------------------------------------- */

.woocommerce div.product {
  display: grid;
  gap: var(--lk-s-6) var(--lk-s-7);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery { width: 100%; margin: 0; }

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--lk-r-2); }

.woocommerce div.product .summary {
  width: 100%;
  margin: 0;
  float: none;
}

.woocommerce div.product .product_title {
  font-size: var(--lk-t-h2);
  margin-block-end: var(--lk-s-3);
}

/* p.price (zakres cen katalogu) zdjety ze strony produktu 2026-08-30 - zostaje
   span.price, czyli kwota wariantu w konfiguratorze i w podsumowaniu. */
.woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  gap: var(--lk-s-2);
  color: var(--lk-tusz);
  font-family: var(--lk-font-naglowek);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: var(--lk-s-4);
}

.woocommerce div.product span.price del {
  color: var(--lk-przygaszony);
  font-size: .55em;
  font-weight: 600;
}

.woocommerce div.product span.price ins { text-decoration: none; background: transparent; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--lk-tusz-2);
  margin-block-end: var(--lk-s-5);
}

.woocommerce div.product form.cart { margin-block-end: var(--lk-s-5); }

.woocommerce div.product form.cart .button { width: 100%; padding: 1.125rem 2rem; font-size: var(--lk-t-duzy); }

.woocommerce div.product .quantity input.qty {
  width: 5rem;
  text-align: center;
}

/* Zakladki opisu zdjete (B6, 1C): opis i opinie stoja pod produktem jako sekcje, style w liikye-produkt-sekcje.css. */

/* --------------------------------------------------------------------------
   5. Koszyk, platnosc, konto
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--lk-t-maly);
}

.woocommerce table.shop_table th {
  background: var(--lk-papier-2);
  color: var(--lk-tusz);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: start;
  padding: var(--lk-s-3) var(--lk-s-4);
}

/* BEZ KRESKI NAD KOMORKA (Mateusz, 31.08.2026). Stala tu linia dzielaca
   wiersze kazdej tabeli sklepu. W koszyku i na kasie pozycje sa dzis kartami
   z wlasna ramka, wiec kreska dokladala druga linie tuz obok pierwszej;
   w tabelach konta wiersze rozdziela juz odstep i naglowek. Gdyby ktoras
   tabela zaczela sie przez to zlewac, linie dodajemy TAM, a nie z powrotem
   wszystkim naraz. */
.woocommerce table.shop_table td {
  padding: var(--lk-s-4);
  border: none;
  vertical-align: middle;
}

.woocommerce table.shop_table img { width: 56px; border-radius: var(--lk-r-1); }

.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: var(--lk-t-h3);
  margin-block: var(--lk-s-6) var(--lk-s-4);
}

.woocommerce-checkout .woocommerce-checkout-review-order {
  padding: var(--lk-s-5);
  background: var(--lk-papier-2);
  border-radius: var(--lk-r-2);
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-block-end: var(--lk-s-3);
  padding: var(--lk-s-4);
  background: var(--lk-papier);
  border: 1.5px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--lk-akcent);
  background: var(--lk-akcent-tlo);
}

.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-maly);
  padding: var(--lk-s-3) 0 0;
}

.woocommerce-checkout #payment div.payment_box::before { content: none; }

.woocommerce-checkout #place_order { width: 100%; padding: 1.125rem 2rem; font-size: var(--lk-t-duzy); }

.woocommerce-checkout .form-row { margin-block-end: var(--lk-s-4); padding: 0; }

.woocommerce form .form-row label { margin-block-end: var(--lk-s-2); }

.woocommerce .woocommerce-MyAccount-navigation ul {
  margin: 0 0 var(--lk-s-5);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-2);
}

.woocommerce .woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: .5rem .875rem;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-pigulka);
  font-size: var(--lk-t-maly);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce .woocommerce-MyAccount-navigation a:hover {
  background: var(--lk-akcent);
  border-color: var(--lk-akcent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Punkty zlamania sklepu
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--lk-s-3); }

  .woocommerce ul.products li.product { padding: var(--lk-s-3); }

  .woocommerce-cart table.shop_table th,
  .woocommerce-checkout table.shop_table th { display: none; }

  .woocommerce-cart table.shop_table td,
  .woocommerce-checkout table.shop_table td {
    display: flex;
    justify-content: space-between;
    gap: var(--lk-s-4);
    text-align: end;
  }

  .woocommerce-cart table.shop_table td::before,
  .woocommerce-checkout table.shop_table td::before {
    content: attr(data-title);
    font-weight: 700;
    text-align: start;
  }
}

/* ==========================================================================
   ZNAK KATEGORII NA MINIATURZE (2026-08-30)

   Ksztalt wspolny dla strony produktu i dla kart katalogu, wiec siedzi TUTAJ,
   a nie w arkuszu konfiguratora: tamten wchodzi wylacznie na stronie produktu
   (is_product), wiec w katalogu pigulka zostalaby bez tla i bez pozycji.
   Rozmiary wlasciwe dla kazdego miejsca dokladaja arkusze konfiguratora
   i katalogu, mocniejszym selektorem.
   ========================================================================== */

.lk-znak-kategorii {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  background: var(--lk-papier);
  border-radius: var(--lk-r-pigulka);
  box-shadow: var(--shadow-sm);
}

.lk-znak-kategorii__nazwa {
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lk-tusz);
  white-space: nowrap;
}

/* Telefon: zdjecie jest wezsze, wiec pigulka podchodzi blizej krawedzi. */
@media (max-width: 640px) {
  .lk-znak-kategorii {
    inset-block-end: 10px;
    inset-inline-start: 10px;
    padding: 4px 10px 4px 5px;
  }
}