/* ==========================================================================
   EduPlaner 2026 — sklep (etap E5)

   Arkusz nakładany na style WooCommerce. Nie odtwarza ich układu, tylko
   podmienia kolory, krój, promienie i cienie na tokeny szablonu, żeby
   koszyk i kasa wyglądały jak reszta strony.

   Zasada z reszty projektu obowiązuje i tutaj: żaden kolor na sztywno.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kontener widoków sklepu
   -------------------------------------------------------------------------- */

.ep-sklep {
  color: var(--ep-tekst);
}

.ep-sklep .woocommerce,
.ep-tresc .woocommerce {
  font-family: var(--ep-font);
}

.woocommerce .page-title,
.ep-sklep h1,
.ep-sklep h2 {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  color: var(--ep-tekst);
}

/* --------------------------------------------------------------------------
   2. Przyciski — wygląd CTA z szablonu
   -------------------------------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 18px;
  border: 1px solid var(--ep-koral);
  border-radius: var(--ep-promien-sm);
  color: var(--ep-na-koralu);
  background: var(--ep-grad-cta);
  box-shadow: var(--ep-cien-cta);
  text-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  color: var(--ep-na-koralu);
  background: var(--ep-grad-cta-hover);
  box-shadow: var(--ep-cien-cta-hover);
  transform: translateY(-2px);
}

/* Czynności drugoplanowe (aktualizacja koszyka, powrót do sklepu)
   nie mogą krzyczeć głośniej niż „Przejdź do kasy". */
.woocommerce button.button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce button.button[name="apply_coupon"],
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button + .button {
  background: transparent;
  color: var(--ep-tekst);
  border-color: var(--ep-brzeg);
  box-shadow: none;
}

.woocommerce button.button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce button.button[name="apply_coupon"]:hover {
  background: color-mix(in srgb, var(--ep-tekst) 7%, transparent);
  color: var(--ep-tekst);
  transform: none;
  box-shadow: none;
}

/* „Wróć do sklepu” w pustym koszyku, „Wykorzystaj kupon” i „Zaktualizuj koszyk”
   od razu wyglądają jak przyciski — białe tło i wyraźna ramka, tak jak „Kontynuuj zakupy”. */
.woocommerce .return-to-shop a.button.wc-backward,
.woocommerce button.button[name="apply_coupon"],
.woocommerce button.button[name="update_cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  background: #fff;
  color: #322064;
  border: 2px solid #b7a9d7;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
}

/* Przed zmianą ilości przycisk jest wyłączony, a arkusz WooCommerce zmienia mu
   wtedy odstępy i kolor napisu; zostaje tylko przygaszenie. */
.woocommerce button.button[name="update_cart"]:disabled[disabled] {
  padding: 14px 26px;
  color: #322064;
}

/* Wersja Ewy maluje przyciski WooCommerce na pomarańczowo po najechaniu
   i przy fokusie z klawiatury; te przyciski zostają jasne. */
.woocommerce .return-to-shop a.button.wc-backward:is(:hover, :focus-visible),
.ep-wersja-ewy .woocommerce .return-to-shop a.button.wc-backward:not(.disabled):is(:hover, :focus-visible),
.woocommerce button.button[name="apply_coupon"]:not(:disabled):is(:hover, :focus-visible),
.ep-wersja-ewy .woocommerce button.button[name="apply_coupon"]:not(:disabled):not(.disabled):is(:hover, :focus-visible),
.woocommerce button.button[name="update_cart"]:not(:disabled):is(:hover, :focus-visible),
.ep-wersja-ewy .woocommerce button.button[name="update_cart"]:not(:disabled):not(.disabled):is(:hover, :focus-visible) {
  background: #f3effa;
  border-color: #322064;
  color: #322064;
  box-shadow: none;
  transform: none;
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  opacity: .45;
}

/* --------------------------------------------------------------------------
   3. Tabele: koszyk i podsumowanie zamówienia
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ep-grad-karta);
  box-shadow: var(--ep-cien-karta);
  overflow: hidden;
}

.woocommerce table.shop_table th {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ep-braz-ciemny);
  padding: 14px 16px;
  border-bottom: 1px solid var(--ep-ramka-wlos);
}

.woocommerce table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--ep-ramka-wlos);
  color: var(--ep-akapit);
}

.woocommerce table.shop_table .product-name a {
  color: var(--ep-tekst);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--ep-braz);
}

.woocommerce table.shop_table td.product-remove a.remove {
  color: var(--ep-koral) !important;
  font-size: 20px;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
  background: var(--ep-koral);
  color: var(--ep-na-koralu) !important;
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
  padding: 12px 16px;
}

.woocommerce .order-total .amount,
.woocommerce .cart-subtotal .amount {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  color: var(--ep-tekst);
}

.woocommerce .quantity .qty {
  min-height: 36px;
  padding: 6px 8px;
  font: inherit;
  color: var(--ep-tekst);
  background: var(--ep-powierzchnia);
  border: 1px solid var(--ep-brzeg);
  border-radius: var(--ep-promien-sm);
}

/* --------------------------------------------------------------------------
   4. Formularze: kasa, logowanie, moje konto
   -------------------------------------------------------------------------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ep-braz-ciemny);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ep-tekst);
  caret-color: var(--ep-fiolet);
  background: var(--ep-powierzchnia);
  /* Pełny kolor ramki: pole musi być widoczne na tle (WCAG 1.4.11, co najmniej 3:1). */
  border: 1px solid #8a7fb0;
  border-radius: var(--ep-promien-sm);
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  border-color: var(--ep-fiolet);
  outline: 2px solid color-mix(in srgb, var(--ep-fiolet) 45%, transparent);
  outline-offset: 1px;
}

.woocommerce form .form-row .required,
.woocommerce abbr.required {
  color: #c23300;
}

.woocommerce form .form-row span.description,
.woocommerce form .form-row .description {
  font-size: 12px;
  color: var(--ep-braz-ciemny);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
  border: 2px solid var(--ep-ramka-mocna) !important;
  border-radius: var(--ep-promien);
  background: var(--ep-grad-karta) !important;
  box-shadow: var(--ep-cien-karta);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--ep-ramka-wlos);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--ep-fiolet-100);
  color: var(--ep-akapit);
  border-radius: var(--ep-promien-md);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--ep-fiolet-100);
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  color: var(--ep-tekst);
}

/* --------------------------------------------------------------------------
   5. Komunikaty
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
  font-size: 14px;
  color: var(--ep-akapit);
  background: var(--ep-fiolet-100);
  border-top: 3px solid var(--ep-fiolet);
  border-radius: var(--ep-promien-md);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--ep-fiolet);
}

.woocommerce-error {
  background: color-mix(in srgb, var(--ep-blad) 8%, var(--ep-tlo));
  border-top-color: var(--ep-blad);
}

.woocommerce-error::before {
  color: var(--ep-blad);
}

/* --------------------------------------------------------------------------
   6. Moje konto
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
  overflow: hidden;
  background: var(--ep-grad-karta);
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ep-tekst);
  text-decoration: none;
  border-bottom: 1px solid var(--ep-ramka-wlos);
}

.woocommerce-MyAccount-navigation ul li:last-child a {
  border-bottom: 0;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ep-fiolet-100);
  color: var(--ep-fiolet-800);
}

/* --------------------------------------------------------------------------
   7. Lista produktów i karta produktu
   -------------------------------------------------------------------------- */

/* WooCommerce układa kafle na pływających kolumnach o stałej szerokości —
   przy różnej długości tytułów daje to poszarpane rzędy. Siatka wyrównuje
   wysokości, a przycisk zawsze siada przy dolnej krawędzi karty. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
}

.woocommerce ul.products li.product {
  padding: 18px;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
  background: var(--ep-grad-karta);
  box-shadow: var(--ep-cien-karta);
  transition: box-shadow .2s ease, transform .2s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--ep-cien-karta-hover);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 17px;
  color: var(--ep-tekst);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  color: var(--ep-tekst);
}

.woocommerce div.product .product_title {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
}

.woocommerce span.onsale {
  background: var(--ep-koral);
  color: var(--ep-na-koralu);
}

.woocommerce div.product form.cart .variations label {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  color: var(--ep-braz-ciemny);
}

.woocommerce div.product form.cart .variations select {
  min-height: 40px;
  padding: 8px 10px;
  background: var(--ep-powierzchnia);
  border: 1px solid var(--ep-brzeg);
  border-radius: var(--ep-promien-sm);
}

/* --------------------------------------------------------------------------
   8. Odznaka koszyka w nagłówku
   -------------------------------------------------------------------------- */

/* Miejsce w pasie nagłówka ustawiamy przez `order`, bo w kodzie odznaka stoi
   przed hamburgerem (kolejność tabulatora), a wizualnie ma być tuż przed CTA. */
.ep-koszyk-link  { order: 1; }
.ep-naglowek__cta { order: 2; }

.ep-koszyk-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  border: 1px solid var(--ep-brzeg);
  border-radius: var(--ep-promien-sm);
  color: var(--ep-fiolet-800);
  text-decoration: none;
  background: var(--ep-powierzchnia);
}

.ep-koszyk-link:hover {
  border-color: var(--ep-fiolet);
}

.ep-koszyk-link__liczba {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  font-size: 11px;
  line-height: 19px;
  text-align: center;
  color: var(--ep-na-koralu);
  background: var(--ep-koral);
  border-radius: 999px;
}

.ep-koszyk-link__liczba[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Wersja mobilna — jeden punkt podziału, jak w reszcie motywu
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    padding: 10px 14px;
  }

  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  .woocommerce #place_order {
    width: 100%;
  }

  /* Na telefonie hamburger wędruje na koniec pasa, żeby kciuk trafiał w menu
     przy krawędzi ekranu, a koszyk stał obok niego. */
  .ep-hamburger { order: 3; }
  .ep-koszyk-link { margin-right: 0; }
}

/* --------------------------------------------------------------------------
   7. Kasa i przypisanie osób — duże pola wyboru, metody płatności w siatce
   Kupujący to często osoby 60+: każde pole do zaznaczenia ma 24 px, stoi
   w osobnej ramce i jest klikalne całym wierszem, a zaznaczone widać od razu.
   -------------------------------------------------------------------------- */

body.woocommerce-checkout form.checkout input[type="checkbox"],
body.woocommerce-checkout form.checkout input[type="radio"],
:is(.eps-przypisanie, .eps-dane) .eps-information input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--ep-fiolet);
  cursor: pointer;
}

/* Zgody i oświadczenia: osobna ramka, cały wiersz klikalny.
   `.place-order` to kontener wszystkich zgód i przycisku — nie dostaje ramki. */
body.woocommerce-checkout form.checkout .form-row:not(.place-order):has(label.checkbox),
body.woocommerce-checkout .ep-p24-consent-row,
:is(.eps-przypisanie, .eps-dane) .eps-information p:has(input[type="checkbox"]) {
  margin: 12px 0 !important;
  padding: 16px 18px !important;
  background: #fff;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien-md);
}

body.woocommerce-checkout form.checkout .form-row:not(.place-order):has(input[type="checkbox"]:checked),
body.woocommerce-checkout .ep-p24-consent-row:has(input:checked),
:is(.eps-przypisanie, .eps-dane) .eps-information p:has(input[type="checkbox"]:checked) {
  border-color: var(--ep-fiolet);
  background: var(--ep-fiolet-100);
}

/* Zgody Przelewy24 stoją już w ramkach wierszy — bez drugiej ramki wokół. */
body.woocommerce-checkout .ep-p24-consents {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Dwie strefy: pole wyboru po lewej, tekst w jednej kolumnie po prawej.
   Blok z wcięciem, nie flex — flex rozbijał zdanie z linkiem na osobne kolumny. */
body.woocommerce-checkout form.checkout label.checkbox,
body.woocommerce-checkout .ep-p24-consent-row label,
:is(.eps-przypisanie, .eps-dane) .eps-information label {
  position: relative;
  display: block !important;
  margin: 0 !important;
  padding-left: 40px !important;
  font-family: var(--ep-font);
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  color: var(--ep-tekst) !important;
  cursor: pointer;
}

body.woocommerce-checkout form.checkout label.checkbox > input[type="checkbox"],
body.woocommerce-checkout .ep-p24-consent-row label > input[type="checkbox"],
:is(.eps-przypisanie, .eps-dane) .eps-information label > input[type="checkbox"] {
  position: absolute;
  top: 1px;
  left: 0;
  margin: 0 !important;
}

body.woocommerce-checkout form.checkout label.checkbox > span,
body.woocommerce-checkout form.checkout label.checkbox > abbr {
  display: inline;
}

body.woocommerce-checkout form.checkout .form-row:not(.place-order):has(label.checkbox) .description {
  display: block;
  margin: 8px 0 0 40px;
  font-size: 17px;
  line-height: 1.5;
}

/* Dane rozliczeniowe: karta na całą szerokość, pola w dwóch kolumnach,
   jeden krój i jeden rozmiar (17 px) dla etykiet, pól i opisów. */
body.woocommerce-checkout #customer_details {
  padding: 32px clamp(16px, 4vw, 48px);
  background: #fff;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
  box-shadow: var(--ep-cien-karta);
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
  max-width: none;
}

body.woocommerce-checkout #customer_details .col-2:not(:has(.form-row)) {
  display: none;
}

body.woocommerce-checkout #customer_details h3 {
  margin: 0 0 20px;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-account-fields .create-account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.woocommerce-checkout .woocommerce-account-fields .form-row {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .woocommerce-account-fields {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ep-ramka-wlos);
}

/* Kraj jest zawsze Polska — pole zostaje w formularzu, ale go nie pokazujemy. */
body.woocommerce-checkout #billing_country_field {
  display: none !important;
}

body.woocommerce-checkout form.checkout .form-row label:not(.checkbox) {
  margin-bottom: 6px;
  font-family: var(--ep-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ep-tekst);
}

body.woocommerce-checkout form.checkout .form-row input.input-text,
body.woocommerce-checkout form.checkout .form-row select,
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--ep-font);
  font-size: 17px;
}

body.woocommerce-checkout form.checkout .form-row .description,
body.woocommerce-checkout form.checkout .form-row span.description {
  font-family: var(--ep-font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ep-akapit);
}

body.woocommerce-checkout #billing_address_1_field {
  grid-column: 1 / -1;
}

/* Opisy pól widoczne od razu, nie dopiero po kliknięciu w pole. */
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper .description {
  display: block !important;
  position: static;
  margin: 8px 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper .description::before {
  display: none;
}

/* Przycisk „pokaż hasło” w tej samej komórce siatki co pole, opis pod spodem —
   oko stoi w polu niezależnie od jego wysokości i długości opisu. */
body.woocommerce-checkout #account_password_field .password-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
}

body.woocommerce-checkout #account_password_field .password-input > input {
  grid-area: 1 / 1;
  padding-right: 52px;
}

body.woocommerce-checkout #account_password_field .show-password-input {
  position: static !important;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  margin-right: 14px;
  transform: none !important;
}

body.woocommerce-checkout #account_password_field .password-input > .description {
  grid-row: 2;
}

/* Główny przycisk kasy tym samym rozmiarem co reszta formularza. */
body.woocommerce-checkout #place_order {
  min-height: 56px !important;
  font-size: 17px;
}

/* Informacje przed zamówieniem zwinięte, rozwijane strzałką. */
.ep-p24-shopping-info > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  font-family: var(--ep-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-tekst);
  list-style: none;
  cursor: pointer;
}

.ep-p24-shopping-info > summary::-webkit-details-marker {
  display: none;
}

.ep-p24-shopping-info > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin: -4px 6px 0;
  border-right: 3px solid var(--ep-fiolet);
  border-bottom: 3px solid var(--ep-fiolet);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.ep-p24-shopping-info[open] > summary::after {
  margin-top: 6px;
  transform: rotate(-135deg);
}

.ep-p24-shopping-info[open] > ul {
  margin-top: 12px;
}

/* Odstępy: formularz — nagłówek „Twoje zamówienie” — podsumowanie. */
body.woocommerce-checkout #order_review_heading {
  margin: 48px 0 16px;
}

@media (max-width: 700px) {
  body.woocommerce-checkout #customer_details { padding: 20px 16px; }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-account-fields .create-account {
    grid-template-columns: 1fr;
  }
  body.woocommerce-checkout #order_review_heading { margin-top: 32px; }
}

/* Metody płatności: siatka kart. Wybrana karta zostaje na swoim miejscu
   (bez przeskakiwania układu), a oświadczenie operatora płatności mieści się w niej. */
body.woocommerce-checkout #payment ul.payment_methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 12px;
  padding: 16px !important;
  margin: 0;
  list-style: none;
}

/* Clearfix WooCommerce (::before/::after z treścią " ") w siatce zająłby komórki. */
body.woocommerce-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout #payment ul.payment_methods::after,
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after {
  display: none;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  min-height: 72px;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #fff;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien-md);
  line-height: 1.4;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
  border-color: var(--ep-fiolet);
  background: var(--ep-fiolet-100);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-tekst);
  cursor: pointer;
}

/* Klik w dowolne miejsce karty wybiera metodę. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
  float: none;
  max-width: 120px;
  max-height: 34px;
  margin: 0 !important;
  object-fit: contain;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 14px 0 0 !important;
  font-size: 17px;
  line-height: 1.5;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box::before {
  display: none;
}

/* Formularz przypisania osób po opłaceniu. */
.eps-przypisanie {
  margin: 28px 0;
  padding: 24px;
  background: #fff;
  border: 2px solid var(--ep-fiolet);
  border-radius: var(--ep-promien);
  box-shadow: var(--ep-cien-karta);
}

.eps-przypisanie,
.eps-przypisanie h2,
.eps-przypisanie h3,
:is(.eps-przypisanie, .eps-dane) .eps-information {
  color: var(--ep-tekst);
}

.eps-przypisanie h2 { margin: 0 0 8px; }

:is(.eps-przypisanie, .eps-dane) .eps-information summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-fiolet);
  text-decoration: underline;
}

.eps-przypisanie__wstep {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ep-akapit);
}

.eps-przypisanie__lista {
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.eps-przypisanie__wiersz fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien-md);
}

.eps-przypisanie__wiersz legend {
  padding: 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-tekst);
}

.woocommerce .eps-przypisanie form .form-row {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce .eps-przypisanie form .form-row label,
.eps-przypisanie .form-row label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ep-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ep-tekst);
}

.eps-przypisanie input.input-text {
  width: 100%;
  min-height: 48px;
  font-size: 17px;
}

.eps-przypisanie .eps-przypisanie__akcja .button {
  width: 100%;
  min-height: 56px !important;
  font-size: 18px !important;
}

@media (max-width: 600px) {
  .eps-przypisanie { padding: 16px; }
  .eps-przypisanie__wiersz fieldset { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Dostępność (WCAG 2.2 AA)
   -------------------------------------------------------------------------- */

/* Linki w tekście różnią się od zwykłego tekstu nie tylko kolorem (1.4.1). */
main :is(p, li, td, dd, figcaption, address) a:not(.btn):not(.button):not([class*="btn"]):not(.ep-yt),
.site-footer :is(p, address) a,
.ep-cookies__tekst a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-checkbox-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* „Pokaż hasło”: cel kliknięcia co najmniej 24 × 24 px (2.5.8), ikona na środku. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.woocommerce form .password-input .show-password-input {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   10. Strona zamówienia — okładki zamiast kafla numeru, „Pobrania” z kartami
   broszur i okno „Wpisz dane osób” krok po kroku.
   -------------------------------------------------------------------------- */

.eps-zamowienie-podsumowanie--okladki {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 24px 0 8px;
}

.eps-zamowienie-podsumowanie--okladki .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
}
.eps-zamowienie-podsumowanie--okladki .woocommerce-order-overview::before,
.eps-zamowienie-podsumowanie--okladki .woocommerce-order-overview::after { display: none; }
.eps-zamowienie-podsumowanie--okladki .woocommerce-order-overview li {
  float: none;
  margin: 0;
  padding: 12px 0 12px 16px;
  border: 0;
  border-left: 3px solid var(--ep-fiolet-300);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.eps-zamowienie-podsumowanie--okladki .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.eps-zamowienie-okladki {
  position: relative;
  display: grid;
  isolation: isolate;
}

.eps-zamowienie-okladki img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ep-powierzchnia);
  border-radius: 12px;
  box-shadow: var(--ep-cien-karta);
}

/* Kilka okładek: wachlarz, pierwsza na wierzchu. */
.eps-zamowienie-okladki--2 img:nth-child(2),
.eps-zamowienie-okladki--3 img:nth-child(2) { transform: translate(14px, 10px) rotate(4deg); z-index: -1; }
.eps-zamowienie-okladki--3 img:nth-child(3) { transform: translate(-12px, 14px) rotate(-5deg); z-index: -2; }

.eps-zamowienie-okladki__wiecej {
  position: absolute;
  right: -8px;
  bottom: -8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ep-fiolet-800);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

.eps-pobrania { margin: 32px 0; }
.eps-pobrania > h2 { margin: 0 0 16px; }
.eps-pobrania__lista { display: grid; gap: 16px; }

.eps-pobrania__karta {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
  box-shadow: var(--ep-cien-karta);
}

.eps-pobrania__karta--dane { border: 2px solid var(--ep-koral-600); }

.eps-pobrania__okladka img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ep-powierzchnia);
}

.eps-pobrania__tresc { min-width: 0; }
.eps-pobrania__tresc h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; color: var(--ep-tekst); }

.eps-pobrania__stan {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  background: var(--ep-fiolet-100);
  color: var(--ep-fiolet-900);
}
.eps-pobrania__stan--gotowe { background: #e4f1e9; color: #14552f; }
.eps-pobrania__stan--dane { background: var(--ep-koral-100); color: var(--ep-koral-800); }

.eps-pobrania__opis { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--ep-akapit); }

.eps-pobrania__licencje { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.eps-pobrania__licencje li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--ep-ramka-wlos);
}
.eps-pobrania__kto { font-size: 17px; font-weight: 700; color: var(--ep-tekst); }
.eps-pobrania__akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.woocommerce .eps-pobrania .button,
.eps-pobrania .button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 17px;
}

.woocommerce .eps-pobrania .button.eps-pobrania__otworz,
.woocommerce .eps-dane .button.eps-dane__wstecz {
  background: #fff;
  color: var(--ep-fiolet-800);
  border: 2px solid var(--ep-fiolet-700);
  box-shadow: none;
}

/* Wyszarzony „Pobierz PDF”: widać, że plik będzie, ale najpierw dane osoby. */
.woocommerce .eps-pobrania .button.eps-pobrania__nieaktywny,
.woocommerce .eps-pobrania .button.eps-pobrania__nieaktywny:hover {
  background: #ecebef;
  color: #5f5a6b;
  border: 1px dashed #8d879a;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.eps-pobrania__wpisz-wiersz { margin: 14px 0 0; }
.woocommerce .eps-pobrania .button.eps-pobrania__wpisz { min-height: 56px; font-size: 18px; }
.eps-pobrania__stopka { margin: 14px 0 0; font-size: 17px; color: var(--ep-akapit); }

/* Formularz osób — bez JavaScriptu pod kartą, z JavaScriptem w oknie. */
.eps-dane { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--ep-ramka-slaba); }
.eps-dane__tytul { margin: 0 0 6px; font-size: 22px; color: var(--ep-tekst); }
.eps-dane__wstep { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ep-akapit); }
.eps-dane__krok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien-md);
}
.eps-dane__krok[hidden] { display: none; }
.eps-dane__krok legend { padding: 0 6px; font-size: 18px; font-weight: 800; color: var(--ep-tekst); }
.eps-dane__krok--koniec { display: block; }
.eps-dane__postep { font-weight: 600; color: var(--ep-braz-ciemny); }
.woocommerce .eps-dane .form-row { margin: 0 !important; padding: 0 !important; }
.eps-dane .form-row label { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ep-tekst); }
.eps-dane input.input-text { width: 100%; min-height: 52px; font-size: 18px; }
.eps-dane__podsumowanie { margin: 0 0 14px; padding: 12px 16px 12px 36px; background: var(--ep-fiolet-100); border-radius: var(--ep-promien-md); font-size: 17px; line-height: 1.7; }
.eps-dane__blad { margin: 0 0 12px; padding: 12px 16px; border-left: 5px solid var(--ep-blad); background: #fbeeee; color: var(--ep-blad); font-weight: 700; border-radius: 8px; }
.eps-dane__akcja { margin: 12px 0 0; }
.woocommerce .eps-dane .eps-dane__akcja .button { width: 100%; min-height: 56px; font-size: 18px; }
.eps-dane__nawigacja { display: flex; gap: 12px; margin: 4px 0 0; }
.eps-dane__nawigacja[hidden] { display: none; }
.woocommerce .eps-dane__nawigacja .button { min-height: 52px; min-width: 140px; font-size: 18px; }
.eps-dane__dalej { margin-left: auto !important; }
.eps-dane--okno { border-top: 0; padding-top: 0; }

.eps-okno {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 28px;
  border: 0;
  border-radius: var(--ep-promien);
  background: #fff;
  color: var(--ep-tekst);
  box-shadow: var(--ep-cien-mocny);
  overflow: auto;
}
.eps-okno::backdrop { background: rgba(36, 30, 60, .55); }
.eps-okno__zamknij {
  float: right;
  width: 48px;
  height: 48px;
  margin: -12px -12px 0 8px;
  border: 0;
  border-radius: 50%;
  background: var(--ep-fiolet-100);
  color: var(--ep-fiolet-900);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.eps-okno__zamknij:hover { background: var(--ep-fiolet-200); }
.eps-okno :focus-visible { outline: 3px solid var(--ep-koral-600); outline-offset: 3px; }

/* Ramka stanu płatności Przelewy24 na stronie zamówienia: kolory zmiennych wtyczki
   z kontrastem ≥ 4,5:1 i tekst czytelny dla osób 60+ (wtyczka daje 10–13 px). */
.woocommerce-order .p24-payment-status {
  --p24-ps-success: #14552f;
  --p24-ps-warning: #7a4a00;
  --p24-ps-danger: #8e2b2b;
  --p24-ps-muted: #5b5471;
  --p24-ps-text: #3f3850;
}
.woocommerce-order .p24-payment-status .p24-payment-status__badge { font-size: 14px; }
.woocommerce-order .p24-payment-status .p24-payment-status__description { font-size: 17px; }
.woocommerce-order .p24-payment-status .p24-payment-status__detail { font-size: 16px; }

@media (max-width: 600px) {
  .eps-zamowienie-podsumowanie--okladki { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .eps-zamowienie-okladki { width: min(200px, 60%); margin: 0 auto 8px; }
  .eps-pobrania__karta { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .eps-pobrania__akcje { width: 100%; margin-left: 0; }
  .eps-pobrania__akcje .button,
  .woocommerce .eps-pobrania .button.eps-pobrania__wpisz { flex: 1 1 auto; width: 100%; }
  .eps-dane__krok { grid-template-columns: 1fr; }
  .eps-okno { padding: 20px 16px; }
  .woocommerce .eps-dane__nawigacja .button { min-width: 0; flex: 1; }
}

/* Miniatura jest osobnym odnośnikiem w kolejności klawiatury. */
.woocommerce td.product-thumbnail a { display: inline-block; }
.woocommerce td.product-thumbnail a:focus-visible { outline: 3px solid #d63800; outline-offset: 3px; }