/*
 * Domyslne szablony WooCommerce w palecie strony glownej Edyta ULC.
 * Bez Woo Buildera i widgetow PRO Elements - czysty CSS na domyslnych
 * szablonach: klasycznych (produkt, moje konto) ORAZ WooCommerce Blocks
 * (koszyk i zamowienie - tak sa zbudowane te strony w tej instalacji;
 * to wciaz "domyslny szablon Woo", nie Elementor Woo Builder).
 * Ladowany wylacznie na stronach Woo, patrz functions.php (wlx-woo).
 *
 * Wszystkie selektory zweryfikowane w realnym, wyhydratowanym DOM
 * (curl + agent-browser z pominieciem trybu "Coming soon" przez
 * oficjalny mechanizm woocommerce_private_link/woo-share).
 */

body.woocommerce-page {
  --wlx-cream: #f6f2ec;
  --wlx-cream-2: #eee7de;
  --wlx-paper: #fbfaf8;
  --wlx-ink: #1c1b17;
  --wlx-brown: #2f2015;
  --wlx-taupe: #b9afa3;
  --wlx-wine: #5b232a;
  --wlx-muted: #6f6b64;
  --wlx-line: #ddd5cb;
  /* Jedno zrodlo prawdy dla WSZYSTKICH linii i ramek blokow Woo.
     Rdzen ustawia ja na :root (0-1-0), wiec body.woocommerce-page wystarcza. */
  --wc-separator-color: #ddd5cb;
}

/* ---------- Typografia ---------- */

body.woocommerce-page h1,
body.woocommerce-page h2,
body.woocommerce-page h3,
body.woocommerce-page .product_title,
body.woocommerce-page .wc-block-components-checkout-step__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--wlx-ink);
}

body.woocommerce-page,
body.woocommerce-page input,
body.woocommerce-page select,
body.woocommerce-page textarea,
body.woocommerce-page button {
  font-family: Manrope, system-ui, sans-serif;
}

/* ---------- Ceny (produkt, koszyk, zamowienie) ---------- */

body.woocommerce-page .price,
body.woocommerce-page .woocommerce-Price-amount,
body.woocommerce-page .wc-block-components-product-price__value,
body.woocommerce-page .wc-block-components-totals-item__value,
body.woocommerce-page .wc-block-formatted-money-amount,
body.woocommerce-page .wc-block-components-formatted-money-amount {
  color: var(--wlx-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Przyciski: szablony klasyczne (produkt, moje konto) ---------- */

/* Specyficznosc, nie !important: rdzen WooCommerce ma m.in.
   ".woocommerce:where(body:not(...)) a.button.alt" - po odjeciu :where() (zero
   specyficznosci) to 3 klasy (.woocommerce .button .alt) + 1 typ. Powielenie
   klasy docelowej (np. ".button.button") to legalny sposob na podniesienie
   WLASNEGO selektora do rowniez 3 klas bez zmiany dopasowania. Przy remisie
   3=3 decyduje kolejnosc w <head> - potwierdzone: woocommerce-general-css
   laduje sie PRZED wlx-woo-css na kazdej sprawdzonej stronie, wiec przy
   remisie wygrywa nasz, pozniejszy arkusz. */
body.woocommerce-page .button.button,
body.woocommerce-page button.button.button,
body.woocommerce-page input.button.button,
body.woocommerce-page a.button.button,
body.woocommerce-page .single_add_to_cart_button.single_add_to_cart_button,
body.woocommerce-page .woocommerce-form-login__submit.woocommerce-form-login__submit {
  background-color: var(--wlx-wine);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 16px 28px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  transition: background-color .2s ease;
}

body.woocommerce-page .button.button:hover,
body.woocommerce-page button.button.button:hover,
body.woocommerce-page input.button.button:hover,
body.woocommerce-page a.button.button:hover,
body.woocommerce-page .single_add_to_cart_button.single_add_to_cart_button:hover,
body.woocommerce-page .woocommerce-form-login__submit.woocommerce-form-login__submit:hover {
  background-color: var(--wlx-brown);
  color: #fff;
}

/* Regres z poprzedniej rundy, naprawiony specyficznoscia (nie !important):
   produkt WARIANTOWY przed wyborem terminu ma przycisk "Dodaj do koszyka"
   w stanie ".disabled" (klasa literalna, nie atrybut - potwierdzone w zywym
   DOM: "single_add_to_cart_button button alt disabled wc-variation-
   selection-needed"). Rdzen ma na ten stan OSOBNA regule z WYZSZA
   specyficznoscia niz baza .alt: ".woocommerce:where(...)
   button.button.alt.disabled" = po odjeciu :where() 4 klasy (.woocommerce
   .button .alt .disabled) + 1 typ (button) = 0-4-1. Nasza baza wyzej ma
   tylko 0-3-1 (przegrywa). Dopasowanie tego samego lancucha klas +
   dodatkowe powielenie daje 0-5-1 - wygrywa BEZWARUNKOWO, niezaleznie od
   kolejnosci w <head> (nie polegamy na remisie po tym, jak remis gdzie
   indziej juz raz zawiodl przez pomylke w liczeniu klas). */
body.woocommerce-page .single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.disabled,
body.woocommerce-page .button.button.button.disabled {
  background-color: var(--wlx-wine);
  color: #fff;
}

/* ---------- Przyciski: WooCommerce Blocks (koszyk, zamowienie) ---------- */

/* Bez !important: jedyna konkurujaca regula znaleziona w zywym DOM to
   "[type=button],[type=submit],button{color:rgb(204,51,102);...}" z
   hello-elementor/assets/css/reset.css - goly selektor typu (0 klas, 1 typ).
   Nasze selektory ponizej maja min. 1 klase + prefiks body.woocommerce-page,
   wiec biją to bez potrzeby !important (zweryfikowane przelaczaniem
   arkuszy w zywej przegladarce: disabled=true na reset.css zmienia kolor
   przycisku z rozowego na bialy z global-styles-inline-css, disabled=true
   na wlx-woo-css bez wplywu innych arkuszy zwraca rozowy - a WIEC to nasz
   selektor normalnie wygrywa specyficznoscia, nie potrzebuje !important). */
body.woocommerce-page .wc-block-cart__submit-button,
body.woocommerce-page .wc-block-components-checkout-place-order-button,
body.woocommerce-page .wc-block-components-totals-coupon .wc-block-components-button {
  background-color: var(--wlx-wine);
  border-color: var(--wlx-wine);
  border-radius: 2px;
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}

body.woocommerce-page .wc-block-cart__submit-button .wc-block-components-button__text,
body.woocommerce-page .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
  color: #fff;
}

body.woocommerce-page .wc-block-cart__submit-button:hover,
body.woocommerce-page .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-page .wc-block-components-totals-coupon .wc-block-components-button:hover {
  background-color: var(--wlx-brown);
  border-color: var(--wlx-brown);
  color: #fff;
}

/* ---------- Pola formularzy: szablony klasyczne ---------- */

/* Specyficznosc, nie !important: rdzen ma ".woocommerce form .form-row
   .input-text, .woocommerce form .form-row select" (3 klasy + 1 typ).
   Powielenie klasy podnosi nasz selektor do rowniez 3 klas - przy remisie
   wygrywa pozniejszy w <head> arkusz (wlx-woo-css), patrz komentarz przy
   przyciskach klasycznych wyzej. */
body.woocommerce-page .woocommerce-Input.woocommerce-Input,
body.woocommerce-page input.input-text.input-text,
body.woocommerce-page input.qty.qty,
body.woocommerce-page.woocommerce-page select {
  padding: 14px 16px;
  border: 1px solid var(--wlx-taupe);
  background: var(--wlx-paper);
  border-radius: 2px;
  color: var(--wlx-ink);
}

/* Runda poprawek 3/5 - ten sam blad co przy polu blokowym nizej, tym razem
   na klasycznym formularzu logowania: w rundzie 2 zmierzylem stan :focus
   natychmiast i uznalem za OK, bez odczekania. Realnie po ok. 700ms
   obramowanie przechodzi na currentColor (u nas rowne --wlx-ink, bo tyle
   ma "color" w regule wyzej) - zmierzone ponownie w tej rundzie: t=0 i
   t=700ms taupe, ale to byl BLAD (patrz regula ponizej: dopiero PO
   dodaniu tej poprawki taupe trzyma sie tez w t=3200ms). Zrodlo: rdzen ma
   ".woocommerce form .form-row .input-text:focus, .woocommerce form
   .form-row select:focus" - 4 klasy (.woocommerce .form-row :focus +
   .input-text dla pierwszej alternatywy) = 0-4-1 dla pol tekstowych,
   0-3-2 dla select (brak klasy .input-text w tej alternatywie). Powielenie
   klasy jeszcze raz podnosi nas ponad obie: */
body.woocommerce-page .woocommerce-Input.woocommerce-Input.woocommerce-Input:focus,
body.woocommerce-page input.input-text.input-text.input-text:focus,
body.woocommerce-page.woocommerce-page.woocommerce-page select:focus {
  border-color: var(--wlx-taupe);
}

/* ---------- Pola formularzy: WooCommerce Blocks (zamowienie) ---------- */

/* Bez !important, ale UWAGA na specyficznosc pola tekstowego: rdzen ma
   ".wc-block-components-form .wc-block-components-text-input
   input[type=email]" (3 klasy: form, text-input, [type=email]) - pierwszy
   grep zlapal tylko urwany fragment selektora bez prefiksu ".wc-block-
   components-form" i dal falszywy negatyw (0 wynikow), przez co pierwsza
   wersja tej reguly (2 klasy) po cichu przegrywala mimo braku !important -
   zlapane dopiero pomiarem getComputedStyle na zywym polu email zamowienia.
   Powielenie klasy ".wc-block-components-text-input" podnosi nas do 3 klas
   i wygrywa liczba typow (input+body=2 > input=1). select/quantity-selector
   nie maja takiego konkurenta - zweryfikowane, zostaja bez zmian.
   UWAGA: to pokrywa TYLKO stan spoczynkowy. Stan :focus ma OSOBNA regule
   nizej - patrz komentarz tam (runda poprawek 3/5, poprawka bledu pomiaru
   z rundy 2). */
body.woocommerce-page .wc-block-components-text-input.wc-block-components-text-input input,
body.woocommerce-page .wc-blocks-components-select__select,
body.woocommerce-page .wc-block-components-quantity-selector {
  border-color: var(--wlx-taupe);
  background: var(--wlx-paper);
  border-radius: 2px;
}
/* Nie stylujemy oddzielnie .wc-block-components-quantity-selector__input -
   rdzen ustawia mu border-width:0 (border-style:none), wiec kolor
   obramowania i tak nigdy sie nie renderuje; widoczna ramka to ta na
   .wc-block-components-quantity-selector (wrapper), juz pokryta wyzej. */

/* Runda poprawek 3/5 - regres znaleziony przez review, NIE przeze mnie:
   w rundzie 2 zmierzylem stan :focus tego pola natychmiast po focus() i
   po 700ms - oba razy taupe, wiec uznalem stan za ustabilizowany. Blad:
   zmiana zachodzi PO 700ms, a PRZED ~3000ms (zmierzone ponownie w tej
   rundzie: t=0 taupe, t=700ms taupe, t=3200ms rgb(43,45,47) =
   currentColor - trwale). Rachunek specyficznosci z rundy 2 byl POPRAWNY
   i wskazywal wlasnie na to: rdzen ma ".wc-block-components-form
   .wc-block-components-text-input input[type=email]:focus" (4 klasy:
   form, text-input, [type=email], :focus) = 0-4-1, nasza baza wyzej po
   dodaniu :focus miałaby tylko 0-3-2 - przegrywa. Powielenie klasy
   jeszcze raz podnosi nas do 0-5-2 (klasy: woocommerce-page + text-input
   x3 + :focus = 5; typy: body + input = 2) - wygrana bezwarunkowa.
   Kolor: zostaje taupe (nie inny akcent) - stan focus jest juz
   sygnalizowany natywnym obramowaniem/outline przegladarki, wiec
   zmiana koloru ramki nie jest tu potrzebna do odroznienia stanu i
   zachowuje spojnosc z reszta formularza. */
body.woocommerce-page .wc-block-components-text-input.wc-block-components-text-input.wc-block-components-text-input input:focus {
  border-color: var(--wlx-taupe);
}

body.woocommerce-page .wc-block-components-text-input label,
body.woocommerce-page .wc-blocks-components-select__label {
  color: var(--wlx-brown);
}

/* ---------- Koszyk (WooCommerce Blocks) ---------- */

body.woocommerce-page .wc-block-cart-items__header,
body.woocommerce-page .wc-block-cart-items__row {
  border-color: var(--wlx-taupe);
}

body.woocommerce-page .wc-block-cart-item__remove-link {
  color: var(--wlx-wine);
}

body.woocommerce-page .wc-block-components-sidebar,
body.woocommerce-page .wc-block-cart__sidebar,
body.woocommerce-page .wc-block-checkout__sidebar {
  background: var(--wlx-cream);
  border: 1px solid var(--wlx-line);
  border-radius: 0;
  padding: 28px 24px;
}

body.woocommerce-page .wc-block-components-totals-item__label,
body.woocommerce-page .wc-block-components-totals-footer-item {
  color: var(--wlx-ink);
}

/* ---------- Zamowienie (WooCommerce Blocks) ---------- */

body.woocommerce-page .wc-block-components-checkout-step__heading-content {
  border-bottom: 1px solid var(--wlx-taupe);
}

body.woocommerce-page .wc-block-components-checkout-order-summary__content,
body.woocommerce-page .wc-block-components-order-summary-item {
  background: transparent;
}

body.woocommerce-page .wc-block-components-checkbox__mark {
  border-color: var(--wlx-taupe);
}

/* ---------- Komunikaty ---------- */

body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info {
  border-top: 3px solid var(--wlx-wine);
  background: var(--wlx-paper);
  color: var(--wlx-ink);
}

body.woocommerce-page .woocommerce-error {
  border-top: 3px solid #8a2a2a;
  background: var(--wlx-paper);
  color: var(--wlx-ink);
}

body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before {
  color: var(--wlx-wine);
}

body.woocommerce-page .wc-block-components-notice-banner {
  background: var(--wlx-paper);
  border-color: var(--wlx-taupe);
  color: var(--wlx-ink);
}

/* ---------- Produkt: okruszki, meta, podobne produkty ---------- */

body.woocommerce-page .woocommerce-breadcrumb {
  color: var(--wlx-brown);
}

body.woocommerce-page .woocommerce-breadcrumb a {
  color: var(--wlx-brown);
}

body.woocommerce-page .product_meta {
  color: var(--wlx-brown);
  border-top: 1px solid var(--wlx-taupe);
  padding-top: 12px;
}

body.woocommerce-page .related.products .woocommerce-loop-product__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--wlx-ink);
}

/* ---------- Moje konto: logowanie ---------- */

body.woocommerce-page .woocommerce-form-login {
  background: var(--wlx-paper);
  border: 1px solid var(--wlx-taupe);
  border-radius: 2px;
  padding: 24px;
}

/* ---------- Moje konto: tabele klasyczne (zamowienia, metody platnosci) ----------
   templates/myaccount/orders.php i payment-methods.php renderuja klasyczna
   <table class="... shop_table ...">, NIE blok - zweryfikowane na koncie
   testowym z realnym zamowieniem (woocommerce-orders-table, __header,
   __row, __cell). Nazwy klas payment-methods.php sa te same (shop_table),
   ale sklep nie ma jeszcze aktywnej bramki zapisujacej tokeny, wiec tabela
   metod platnosci nie ma dzis wierszy do wyswietlenia - patrz raport. */
body.woocommerce-page table.shop_table {
  border: 1px solid var(--wlx-taupe);
  border-collapse: collapse;
  width: 100%;
}

body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td {
  border: 1px solid var(--wlx-taupe);
  padding: 12px 16px;
}

body.woocommerce-page table.shop_table th {
  background: var(--wlx-cream);
  color: var(--wlx-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

/* Bez !important: gorna krawedz pierwszego wiersza naglowka ma osobna,
   bardzo specyficzna regule w reset.css - "table thead:first-child
   tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}"
   (specyficznosc 0-2-4: dwa :first-child + 4 typy table/thead/tr/th).
   Dopasowanie tego samego lancucha selektorow (thead th zamiast samego th)
   podnosi nasza regule do tej samej specyficznosci - przy remisie wygrywa
   pozniej zaladowany wlx-woo-css (reset.css motywu laduje sie wczesniej). */
body.woocommerce-page table.shop_table thead th {
  border-top-color: var(--wlx-taupe);
}

/* ---------- Responsywnosc mobilna ---------- */

/* Uwaga: bez regul dla .wc-block-cart__submit-button /
   .wc-block-components-checkout-place-order-button - martwe, rdzen juz
   ustawia im width:100% bezwarunkowo (cart.css: ".wc-block-cart__submit-button
   {width:100%}" poza media query; checkout.css: klasa "--full-width" tez
   width:100%, obecna na zywym przycisku "Kupuje i place" - zweryfikowane
   w zrodlach pluginu i na zywym markupie). */
@media (max-width: 767px) {
  body.woocommerce-page .button,
  body.woocommerce-page a.button,
  body.woocommerce-page .single_add_to_cart_button {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   Podsumowanie zamowienia - hierarchia panelu
   UWAGA na specyficznosc: nasz arkusz jest 35. w <head>, a
   wc-blocks-style-css 287. i packages-style 290. Arkusze blokow
   laduja sie PO nas, wiec REMIS SPECYFICZNOSCI PRZEGRYWAMY.
   Reguly ponizej celowo powielaja klase docelowa, zeby miec
   specyficznosc ostro wyzsza od rdzenia - to nie jest literowka.
   ============================================================ */

/* Naglowek panelu: z szeryfu 26px na etykiete wersalikowa.
   Rdzen: .wp-block-woocommerce-checkout-order-summary-block
   .wc-block-components-checkout-order-summary__title-text {font-size:22px} */
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text.wc-block-components-checkout-order-summary__title-text,
body.woocommerce-page .wc-block-components-checkout-order-summary__title.wc-block-components-checkout-order-summary__title,
body.woocommerce-page .wc-block-cart__totals-title.wc-block-cart__totals-title {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wlx-muted);
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}

/* Nazwa produktu: Manrope 14px zamiast Cormorant 17px.
   Cormorant ponizej ~22px traci czytelnosc, a w waskiej kolumnie
   lamal sie na dwie linie. Rdzen ma tu max-width:max-content. */
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name.wc-block-components-product-name,
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name.wc-block-components-product-name {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--wlx-ink);
  max-width: none;
  overflow-wrap: normal;
  hyphens: none;
}

/* Blok podsumowania bez wlasnej ramki i zaokraglenia - ramke ma panel */
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-block.wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
  border: 0;
  border-radius: 0;
}

/* Pozycje: oddech i wloskowa linia miedzy nimi */
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item.wc-block-components-order-summary-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--wlx-line);
}
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item.wc-block-components-order-summary-item:last-child {
  border-bottom: 0;
}
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__description.wc-block-components-order-summary-item__description {
  padding: 0 12px 0 16px;
  gap: 6px;
}

/* Miniatura: rdzen przewiduje 48px, u nas rozpychala sie do 100px */
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__image.wc-block-components-order-summary-item__image {
  width: 56px;
  margin-top: 0;
  padding-bottom: 0;
}
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__image.wc-block-components-order-summary-item__image > img {
  width: 56px;
  max-width: 56px;
  border-radius: 0;
}

/* Ilosc: czarne wypelnione kolko bylo najciemniejszym i jedynym okraglym
   elementem na stronie ostrych rogow. Rdzen: background:currentColor;
   border-radius:20px; position:absolute; transform:translate(50%,-50%). */
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity.wc-block-components-order-summary-item__quantity {
  position: static;
  transform: none;
  background: transparent;
  border: 1px solid var(--wlx-line);
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  margin-top: 8px;
  padding: 1px 0;
  width: 56px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.woocommerce-page .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity.wc-block-components-order-summary-item__quantity span {
  color: var(--wlx-ink); /* rdzen: var(--wp--preset--color--base,#fff) */
  padding: 0;
}

/* Metadane pozycji: etykieta wersalikowa, wartosc tuszem */
body.woocommerce-page .wc-block-components-product-details.wc-block-components-product-details {
  font-size: 12px;
  line-height: 1.5;
  margin: 2px 0 0;
}
body.woocommerce-page .wc-block-components-product-details .wc-block-components-product-details__name.wc-block-components-product-details__name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-page .wc-block-components-product-details .wc-block-components-product-details__value.wc-block-components-product-details__value {
  color: var(--wlx-ink);
}

/* Podsuma zdegradowana do drobnego szarego wiersza - bez wysylki i kuponow
   powtarza te sama liczbe co "Lacznie" i kazala szukac roznicy, ktorej nie ma.
   Docelowo: wylaczyc blok Podsuma w edytorze strony Zamowienie. */
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label.wc-block-components-totals-item__label,
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__value.wc-block-components-totals-item__value {
  font-size: 12px;
  font-weight: 400;
  color: var(--wlx-muted);
}

/* Suma koncowa: jedyny duzy szeryf w panelu, jeden punkt ciezkosci */
/* Bez wlasnej linii. Rdzen rysuje juz kreske nad calym blokiem sum
   (".wp-block-woocommerce-checkout-order-summary-totals-block"), a kolejna
   nad sama suma robila z jednowierszowej pozycji ramke. Hierarchie niesie
   tu rozmiar i krój, nie obramowanie. */
body.woocommerce-page .wc-block-components-totals-footer-item.wc-block-components-totals-footer-item {
  border-top: 0;
  padding-top: 10px;
  margin-top: 0;
}
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label.wc-block-components-totals-item__label {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value.wc-block-components-totals-item__value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--wlx-ink);
  font-variant-numeric: tabular-nums;
}
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax.wc-block-components-totals-footer-item-tax {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--wlx-muted);
}

/* Wybor platnosci: biel nie wystepuje w palecie panelu, a rdzen daje
   zaokraglenia 4-5px w szesciu miejscach. Stan wybrany: lewy pasek
   zamiast obwodki inset 1.5px currentColor. */
body.woocommerce-page .wc-block-components-radio-control__option.wc-block-components-radio-control__option {
  background: transparent;
  border-radius: 0;
  padding: 16px 16px 16px 44px;
}
body.woocommerce-page .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted,
body.woocommerce-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-radius: 0;
  box-shadow:
    inset 1px 0 0 0 var(--wlx-line),
    inset -1px 0 0 0 var(--wlx-line),
    inset 0 1px 0 0 var(--wlx-line),
    inset 0 -1px 0 0 var(--wlx-line),
    inset 2px 0 0 0 var(--wlx-ink);
  background: rgba(255, 255, 255, 0.45);
}
body.woocommerce-page .wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked:after {
  border-radius: 0;
  border-color: var(--wlx-line);
}
body.woocommerce-page .wc-block-components-radio-control__label.wc-block-components-radio-control__label,
body.woocommerce-page .wc-block-components-radio-control__secondary-label.wc-block-components-radio-control__secondary-label {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--wlx-ink);
  font-variant-numeric: tabular-nums;
}
body.woocommerce-page .wc-block-components-radio-control__description.wc-block-components-radio-control__description,
body.woocommerce-page .wc-block-components-radio-control__secondary-description.wc-block-components-radio-control__secondary-description {
  font-size: 12px;
  line-height: 1.5;
  color: var(--wlx-muted);
}

/* ---------- Podziekowanie po zakupie (order-received) ----------
   Ta strona sklada sie z trzech obcych kawalkow: banera wtyczki Tpay,
   podsumowania WooCommerce i klasycznej tabeli zamowienia. Zaden z nich nie
   zna palety projektu, wiec domyslnie wychodzi jaskrawa zielen operatora,
   granatowe naglowki i rozowa tabela. Sprowadzamy wszystko do jednego
   jezyka: krem, atrament, wlosowe linie. */

/* Baner operatora platnosci. Ikona to plik SVG wtyczki, wiec koloru nie da
   sie zmienic regula - odbarwiamy ja filtrem i zmniejszamy, zeby nie krzyczala
   bardziej niz sama informacja o zamowieniu. */
body.woocommerce-order-received .payment-confirmation-container {
  background: var(--wlx-cream);
  border: 1px solid var(--wlx-line);
  border-radius: 2px;
  padding: 28px 24px 24px;
  margin: 0 0 28px;
  text-align: center;
}
body.woocommerce-order-received .payment-confirmation-container .icon-wrapper img {
  width: 44px;
  height: 44px;
  filter: grayscale(1) brightness(0.35);
}
body.woocommerce-order-received .payment-confirmation-container .title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--wlx-ink);
  margin: 12px 0 4px;
}
body.woocommerce-order-received .payment-confirmation-container .subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--wlx-muted);
  margin: 0;
}
body.woocommerce-order-received .payment-confirmation-container .underline {
  width: 46px;
  height: 1px;
  background: var(--wlx-line);
  margin: 18px auto 0;
}

/* Zdanie "Dziekujemy. Otrzymalismy Twoje zamowienie." - WooCommerce daje mu
   zielona ramke powiadomienia; tu jest to zwykly akapit prowadzacy. */
body.woocommerce-order-received .woocommerce-notice--success {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--wlx-muted);
}
body.woocommerce-order-received .woocommerce-notice--success::before { content: none; }

/* Podsumowanie: numer, data, kwota, metoda. Domyslnie to lista z kropkowanymi
   kreskami - zamieniamy na pary etykieta/wartosc oddzielone wlosowa linia. */
body.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--wlx-line);
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  border: 0;
  border-bottom: 1px solid var(--wlx-line);
  padding: 14px 0;
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wlx-ink);
  font-variant-numeric: tabular-nums;
}

/* Nasza notka o pozostalej kwocie - to najwazniejsze zdanie na tej stronie,
   wiec dostaje wlasne pudelko, a nie ginie w ciagu akapitow. */
body.woocommerce-order-received .wlx-doplata {
  background: var(--wlx-paper);
  border-left: 2px solid var(--wlx-ink);
  padding: 14px 18px;
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wlx-ink);
}

/* Naglowki sekcji i klasyczna tabela zamowienia. */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-customer-details h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--wlx-ink);
  margin: 0 0 16px;
}
body.woocommerce-order-received table.woocommerce-table--order-details {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-family: Manrope, system-ui, sans-serif;
  margin: 0 0 32px;
}
body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
  border: 0;
  border-bottom: 1px solid var(--wlx-line);
  padding: 14px 0;
  background: none;
  vertical-align: top;
  text-align: left;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-order-received table.woocommerce-table--order-details td {
  font-size: 14px;
  line-height: 1.55;
  color: var(--wlx-ink);
}
body.woocommerce-order-received table.woocommerce-table--order-details .woocommerce-Price-amount,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.woocommerce-order-received table.woocommerce-table--order-details th:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details td:last-child {
  text-align: right;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
  font-size: 13px;
  font-weight: 600;
  color: var(--wlx-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Dopisek przy pozycji ("Platnosc: zadatek rezerwujacy miejsce"). */
body.woocommerce-order-received .wc-item-meta {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wlx-muted);
}
body.woocommerce-order-received .wc-item-meta li { margin: 0; }
body.woocommerce-order-received .wc-item-meta p { margin: 0; display: inline; }
body.woocommerce-order-received .wc-item-meta-label {
  font-weight: 600;
  color: var(--wlx-ink);
}

/* ---------- Podziekowanie: trzy poprawki po obejrzeniu na zywo ---------- */

/* Wtyczka Tpay rysuje nad banerem pasek 50px w kolorze #eafbf0 - to on
   przebijal jaskrawa zielenia nad naszym kremowym pudelkiem. */
body.woocommerce-order-received .payment-confirmation-container::before { content: none; }

/* WooCommerce domyka .order_details clearfixem przez ::before/::after.
   W siatce te pseudoelementy staja sie PELNOPRAWNYMI komorkami, wiec
   pierwsza kratka zostawala pusta i podsumowanie rozjezdzalo sie o jedno
   pole (numer zamowienia ladowal w prawej kolumnie). */
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after { content: none; }

/* Rozowe tlo (#f8f2f4) siedzi na wierszach i komorkach naglowkowych tabeli,
   nie na samej tabeli - dlatego zerowanie tla na th/td nie wystarczalo. */
body.woocommerce-order-received table.woocommerce-table--order-details,
body.woocommerce-order-received table.woocommerce-table--order-details tr,
body.woocommerce-order-received table.woocommerce-table--order-details thead th,
body.woocommerce-order-received table.woocommerce-table--order-details tbody th,
body.woocommerce-order-received table.woocommerce-table--order-details tbody td,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  background-color: transparent;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
}

/* Dane klientki - zamiast ramki dookola wystarczy wlosowa linia u gory. */
body.woocommerce-order-received .woocommerce-customer-details address {
  border: 0;
  border-top: 1px solid var(--wlx-line);
  border-radius: 0;
  padding: 16px 0 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--wlx-ink);
}

/* Na waskim ekranie podsumowanie w dwoch kolumnach lamie dluzsze wartosci
   (np. nazwe metody platnosci) - ponizej 380px dajemy jedna kolumne. */
@media (max-width: 380px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Podziekowanie: tabela musi pokonac arkusz wtyczki ----------
   assets/woo.css wtyczki stylizuje tabele selektorem z PODWOJONA klasa
   (`table.shop_table.shop_table th`), czyli 0-3-3, i laduje sie po motywie.
   Nasze dotychczasowe 0-2-2 nie mialo szans - stad rozowe tlo (#F8F2F4)
   i szaroniebieskie ramki (#54595F) z domyslnej palety kitu, ktore zostaly
   tam z wczesniejszego etapu. Dokladamy czwarta klase (0-4-2) i wygrywamy
   liczba klas, bez uciekania sie do !important. */
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details,
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details tr,
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details th,
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details td {
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--wlx-line);
}
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details {
  border-bottom: 0;
}
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
}
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details thead th {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-order-received table.shop_table.shop_table.woocommerce-table--order-details tfoot th {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wlx-muted);
}

/* ---------- Podziekowanie: weryfikacja adresu e-mail ----------
   WooCommerce po uplywie karencji nie pokazuje gosciowi szczegolow
   zamowienia, dopoki nie potwierdzi adresu e-mail. To wlasnie ten ekran
   zobaczy klientka, gdy wroci do linku z maila pozniej niz po kilku
   minutach - a domyslnie jest to goly formularz bez zadnej oprawy.
   Pola i przycisk maja juz style w sekcjach wyzej; tu dokladamy pudelko,
   etykiete i odstepy. */
body.woocommerce-order-received form.woocommerce-verify-email {
  max-width: 520px;
  margin: 0 0 32px;
  padding: 24px;
  background: var(--wlx-cream);
  border: 1px solid var(--wlx-line);
  border-radius: 2px;
}
body.woocommerce-order-received form.woocommerce-verify-email > p:first-of-type {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--wlx-ink);
}
body.woocommerce-order-received form.woocommerce-verify-email .form-row {
  margin: 0 0 16px;
  padding: 0;
}
body.woocommerce-order-received form.woocommerce-verify-email .form-row:last-child {
  margin-bottom: 0;
}
body.woocommerce-order-received form.woocommerce-verify-email label {
  display: block;
  margin: 0 0 6px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wlx-muted);
}
body.woocommerce-order-received form.woocommerce-verify-email label .required {
  color: var(--wlx-muted);
  text-decoration: none;
  border: 0;
}
body.woocommerce-order-received form.woocommerce-verify-email input.input-text {
  width: 100%;
  background: #fff;
}

/* ---------- Podziekowanie: oprawa calej strony ----------
   Ta strona korzysta z szablonu "naglowek + stopka", wiec tresc leci miedzy
   nimi BEZ zadnego kontenera: na telefonie akapity i pudelka dotykaly
   krawedzi ekranu, a na szerokim monitorze rozciagaly sie przez cala
   szerokosc. Dajemy jej wlasna kolumne - szerokosc jak w tresci landingow,
   odstepy boczne 20px zgodnie z reszta serwisu. */
body.woocommerce-order-received .woocommerce {
  max-width: 760px;
  margin-inline: auto;
  padding: 48px 20px 64px;
}
@media (min-width: 681px) {
  body.woocommerce-order-received .woocommerce {
    padding: 72px 24px 88px;
  }
}