@charset "UTF-8";

/* ==========================================================================
   Z-NATURY - ARKUSZ SKLEPU

   Jeden plik dla calej witryny, wpinany przez zn-natury.php (priorytet 999,
   czyli PO stylach Breakdance).

   SPIS TRESCI
     1. Katalog, karta produktu, cross-sell, koszyk boczny, filtry
     2. Blog - pierwszy wpis w ukladzie poziomym
     3. Koszyk (podstrona /koszyk/)
     4. Kasa
     5. Moje konto - logowanie, rejestracja, odzyskiwanie hasla

   Powstal 2026-08-19 ze scalenia zn-checkout.css, zn-cart.css, zn-blog.css
   oraz regul trzymanych dotad w Breakdance -> Settings -> Custom CSS.

   WAZNE: reguly z sekcji 1 i 3 nadal siedza w Breakdance Custom CSS.
   Po wdrozeniu tego pliku nalezy je stamtad USUNAC - inaczej te same
   deklaracje beda wysylane dwa razy na kazdej podstronie.

   Deklaracja @charset na gorze jest konieczna: plik zawiera polskie znaki
   w komentarzach, a bez niej przegladarka potrafi odrzucic caly arkusz.
   ========================================================================== */


/* ==========================================================================
   1. KATALOG, KARTA PRODUKTU, CROSS-SELL, KOSZYK BOCZNY, FILTRY
   ========================================================================== */

/* Kategoria produktu */

li.chosen {
    background-color: var(--bde-palette-color-1-30dcb5ba-4ab5-477f-9038-41a9dfc542cd);
    color: var(--green-deep);
    border: 1px solid #d8ebc6;
    border-radius: 999px;
    padding: 6px 12px;

}
.breakdance-woocommerce .widget_layered_nav_filters a, .breakdance-woocommerce .widget_layered_nav_filters a span bdi, .breakdance-woocommerce .widget_layered_nav_filters a span {
	background: none !important;
		font-size: 10px;
		font-weight: 600 !important;
	color: #3b7a1e !important;


}

ul.products li.product .price {
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;
	gap: 10px;
}

.breakdance-woocommerce .woocommerce-LoopProduct-link img {
	max-height: 300px;
	object-fit: contain;
}

.breakdance-woocommerce ul.products li.product:hover {
	border: 1px solid #82c851;
}

.breakdance-woocommerce select {
	border-radius: 10px !important;

}

div.bde-woo-product-footer a, .breakdance-woocommerce .widget_price_filter .button {
	height: 32px;
	border-radius: 10px !important;
}

/* karta produktu */

.breakdance-woocommerce .quantity input {
	border-radius: 10px;
}

p.in-stock {
	color: #3b7a1e !important;
	font-size: 16px;
	font-weight:600;
}
body.woocommerce div.product p.stock.in-stock {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.woocommerce div.product p.stock.in-stock::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #3B7A1E;
}

span.baza {
		display: inline-block;
    font-family: Montserrat;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 4px;
    vertical-align: 2px;
		background: #3b7a1e;
    color: #fff;
}

span.kierunek {
			display: inline-block;
    font-family: Montserrat;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 4px;
    vertical-align: 2px;
background: #fff;
    color: #3b7a1e;;
    border: 1px solid #3b7a1e;
}

blockquote {
		line-height: 1.7;
    background: #fff;
    border-left: 3px solid #3b7a1e;;
    padding: 2px 0 2px 14px;
    margin: 0 0 20px;
}
blockquote p {
	margin: 0;
}
/* Widget iZi (3. element) schodzi pod ilość i przycisk */
.breakdance-woocommerce div.product form.cart > .izi-widget-placeholder {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* odstęp między rzędami — bez tego zadziała gap 20.9px z formularza */
.breakdance-woocommerce div.product form.cart {
  row-gap: 12px;
}

/* ====== Cross-sell: Sprawdź także ====== */
.zn-crosssell {
    /* Mniejszy odstep miedzy sekcjami upsell i cross-sell - stoja jedna pod
       druga, wiec 20/24px dawalo miedzy nimi wyrazna dziure. */
    margin: 10px 0;
    padding: 20px;
    background: #f9faf8;
    border: 1px solid #e2e8e0;
    border-radius: 12px;
}

.zn-crosssell__header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Tytul celowo NIE jest naglowkiem (byl h4): na karcie produktu psul strukture
   dokumentu (H1 -> H4 -> H3). Jako <span> wyglada tak samo, ale wypada z drzewa
   naglowkow. display: block utrzymuje dotychczasowy uklad w kontenerze flex. */
.zn-crosssell__title {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2d3a2e;
    line-height: 1.3;
}

.zn-crosssell__subtitle {
    font-size: 13px;
    color: #7a8a7c;
    font-style: italic;
}

/* Grid */
.zn-crosssell__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.zn-crosssell__item {
    position: relative;
    background: #fff;
    border: 2px solid #e2e8e0;
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
}

.zn-crosssell__item:hover {
    border-color: #6b9e6f;
    box-shadow: 0 2px 12px rgba(107,158,111,0.13);
}

.zn-crosssell__item--hidden {
    display: none;
}

.zn-crosssell__item--hidden.zn-crosssell__item--visible {
    display: block;
}

/* Image */
.zn-crosssell__image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    margin-bottom: 8px;
}

.zn-crosssell__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.zn-crosssell__image:hover img {
    transform: scale(1.05);
}

.zn-crosssell__zoom-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: #4a8b4f;
}

.zn-crosssell__image:hover .zn-crosssell__zoom-icon {
    opacity: 1;
}

.zn-crosssell__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info */
.zn-crosssell__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zn-crosssell__name {
    font-size: 12px;
    font-weight: 600;
    color: #2d3a2e;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zn-crosssell__price {
    font-size: 14px;
    font-weight: 700;
    color: #4a8b4f;
}

.zn-crosssell__price del {
    color: #999;
    font-weight: 400;
    font-size: 12px;
    margin-right: 4px;
}

/* Per-item Add to Cart button */
.zn-crosssell__item-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 8px;
    padding: 7px 10px;
    background: #4a8b4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.zn-crosssell__item-add-btn:hover {
    background: #3d7641;
}

.zn-crosssell__item-add-btn--added {
    background: #2d6e31;
    pointer-events: none;
}

.zn-crosssell__item-add-btn:disabled {
    opacity: 0.7;
    pointer-events: none;
}

.zn-crosssell__item-add-btn svg {
    flex-shrink: 0;
    margin-right: 5px;
}

/* Show more */
.zn-crosssell__show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    background: transparent;
    border: 1px dashed #c5d1c7;
    border-radius: 8px;
    color: #5a7a5c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.zn-crosssell__show-more:hover {
    background: #eef4ee;
    border-color: #6b9e6f;
    color: #3d6e41;
}

.zn-crosssell__show-more[aria-expanded="true"] .zn-crosssell__arrow {
    transform: rotate(180deg);
}

.zn-crosssell__arrow {
    transition: transform 0.2s;
}

/* ====== Modal ====== */
.zn-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.zn-modal[hidden] {
    display: none;
}

.zn-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    animation: znFadeIn 0.2s;
}

.zn-modal__content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: znSlideUp 0.25s;
}

.zn-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.zn-modal__close:hover {
    background: #e0e0e0;
    color: #222;
}

.zn-modal__body {
    display: flex;
    gap: 24px;
    padding: 24px;
}

.zn-modal__image {
    flex: 0 0 45%;
    border-radius: 12px;
    overflow: hidden;
}

.zn-modal__image img {
    width: 100%;
    height: auto;
    display: block;
}

.zn-modal__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zn-modal__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2d3a2e;
    line-height: 1.3;
}

.zn-modal__price-wrap {
    font-size: 22px;
    font-weight: 800;
    color: #4a8b4f;
}

.zn-modal__price-wrap del {
    color: #999;
    font-weight: 400;
    font-size: 16px;
    margin-right: 6px;
}

.zn-modal__excerpt {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zn-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.zn-modal__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: #4a8b4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.zn-modal__add-btn:hover {
    background: #3d7641;
}

.zn-modal__add-btn svg {
    flex-shrink: 0;
    margin-right: 5px;
}

.zn-modal__link {
    display: inline-block;
    text-align: center;
    font-size: 13px;
    color: #5a7a5c;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.zn-modal__link:hover {
    color: #3d6e41;
    text-decoration: underline;
}

/* ====== Toast ====== */
.zn-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 999999;
    padding: 12px 24px;
    background: #2d3a2e;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.3s;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}

.zn-toast[hidden] {
    display: block;
    pointer-events: none;
}

.zn-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.zn-toast--success { background: #2d6e31; }
.zn-toast--error   { background: #c0392b; }

/* ====== Animations ====== */
@keyframes znFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes znSlideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

/* ====== Responsive ====== */
@media (max-width: 768px) {
    .zn-crosssell__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .zn-crosssell {
        padding: 14px;
    }
    .zn-crosssell__name {
        font-size: 11px;
    }
    /* Modal mobile */
    .zn-modal__body {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    .zn-modal__image {
        flex: none;
    }
    .zn-modal__content {
        max-height: 90vh;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .zn-crosssell__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .zn-crosssell__item-add-btn {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .zn-crosssell__image img,
    .zn-crosssell__item,
    .zn-modal__backdrop,
    .zn-modal__content,
    .zn-toast {
        transition: none !important;
        animation: none !important;
    }
}
.breakdance .bde-accordion__button .bde-accordion__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breakdance .bde-accordion__button .bde-accordion__title::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: #3B7A1E;
  -webkit-mask: var(--acc-icon) center / contain no-repeat;
  mask: var(--acc-icon) center / contain no-repeat;
}
/* ==========================================================================
   Z-Natury — dodatki do koszyka bocznego
   Licznik produktow, pasek darmowej dostawy, kod rabatowy, tagline produktu,
   przebudowana stopka (Razem / Przejdz do kasy / InPost Pay).
   Wklej do: Breakdance -> Settings -> Custom CSS
   Kolory przepisane z makiety klienta (Z-Natury_Koszyk_Responsywny).

   UWAGA: Breakdance laduje wlasny CSS PO Custom CSS, dlatego regulyy dotyczace
   przyciskow WooCommerce maja zakotwiczony selektor panelu i !important tam,
   gdzie nadpisujemy gotowe style buildera.
   ========================================================================== */

.bde-mini-cart-offcanvas-body {
  --zn-green: #82C851;
  --zn-green-deep: #3b7a1e;
  --zn-ink: #2b2b29;
  --zn-muted: #8a8a82;
  --zn-line: #e8e8e2;
  --zn-tint: #eef6e6;
  --zn-bar-track: #dcebcb;
}

/* --- licznik produktow w naglowku --- */

.bde-mini-cart-offcanvas-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zn-cart-count {
  color: var(--zn-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}

/* --- tagline pod nazwa produktu ---
   Renderowany WEWNATRZ linku z nazwa, zeby nie dokladac komorki do gridu
   Breakdance (jako rodzenstwo przesuwal stepper i cene w pozycjach, ktore
   maja tagline). pointer-events: none zdejmuje z niego klikalnosc linku. */

.zn-item-sub {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--zn-muted);
  margin: 2px 0 0;
  pointer-events: none;
}

/* --- pasek darmowej dostawy (pod naglowkiem, nad lista) --- */

.zn-cart-ship-wrap {
  padding: 14px 18px 0;
}

.zn-cart-ship-wrap--empty {
  display: none;
}

.zn-ship {
  background: var(--zn-tint);
  border-radius: 14px;
  padding: 13px 15px;
}

.zn-ship__top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 9px;
}

.zn-ship__top b {
  color: var(--zn-green-deep);
  white-space: nowrap;
}

.zn-ship__top .woocommerce-Price-amount {
  font-weight: inherit;
  color: inherit;
}

.zn-ship__top svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--zn-green-deep);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.zn-ship__bar {
  height: 7px;
  background: var(--zn-bar-track);
  border-radius: 20px;
  overflow: hidden;
}

.zn-ship__bar i {
  display: block;
  height: 100%;
  background: var(--zn-green);
  border-radius: 20px;
  transition: width .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .zn-ship__bar i {
    transition: none;
  }
}

/* --- kod rabatowy (pod lista produktow, nad kwota) ---
   UWAGA: padding poziomy dobrany "na oko" do panelu. Jesli kupon okaze sie
   wciety mocniej niz produkty, kontener WooCommerce ma juz wlasny padding
   i wystarczy zmienic ponizsza linie na: padding: 12px 0 4px; */

.zn-coupon-wrap {
  padding: 12px 18px 4px;
}

.zn-coupon-wrap--empty {
  display: none;
}

.zn-coupon__form {
  display: flex;
  gap: 8px;
  margin: 0;
}

.zn-coupon__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #dcdcd6;
  border-radius: 10px;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--zn-ink);
  background: #fcfcfb;
}

.zn-coupon__input:focus {
  outline: none;
  border-color: var(--zn-green);
}

.zn-coupon__apply {
  flex: none;
  border: 1px solid var(--zn-green);
  background: var(--zn-tint);
  color: var(--zn-green-deep);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  padding: 0 16px;
  height: 44px;
  cursor: pointer;
}

.zn-coupon__apply:hover {
  background: #e4f2d6;
}

.zn-coupon__apply:disabled {
  opacity: .55;
  cursor: default;
}

.zn-coupon__applied {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zn-coupon__applied-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--zn-tint);
  border: 1px solid var(--zn-green);
  border-radius: 8px;
  padding: 4px 9px;
}

.zn-coupon__code {
  font-size: 12px;
  font-weight: 700;
  color: var(--zn-green-deep);
  letter-spacing: .02em;
}

.zn-coupon__remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--zn-muted);
  text-decoration: underline;
}

.zn-coupon__msg {
  font-size: 12px;
  line-height: 1.35;
  margin-top: 7px;
}

.zn-coupon__msg--ok {
  color: var(--zn-green-deep);
}

.zn-coupon__msg--error {
  color: #b3261e;
}

/* ==========================================================================
   STOPKA
   ========================================================================== */

/* --- kwota: etykieta z lewej, wartosc z prawej --- */

.bde-mini-cart-offcanvas-footer .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 11px;
}

.bde-mini-cart-offcanvas-footer .woocommerce-mini-cart__total strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--zn-muted);
  flex: none;
}

/* Rozmiar i styl samej kwoty ustawia sie w Breakdance (opcje elementu koszyka),
   dlatego nie nadpisujemy go tutaj. Zostaje tylko zabezpieczenie przed lamaniem
   kwoty na dwie linie. */
.bde-mini-cart-offcanvas-footer .woocommerce-mini-cart__total .woocommerce-Price-amount {
  white-space: nowrap;
}

/* --- przyciski ---
   "Zobacz koszyk" ukryty zgodnie z makieta (jest tam tylko jedno CTA).
   Zeby go przywrocic, usun ponizsza regule. */

.bde-mini-cart-offcanvas-footer .woocommerce-mini-cart__buttons {
  display: block;
  margin: 0;
}

.bde-mini-cart-offcanvas-footer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  display: none;
}

.bde-mini-cart-offcanvas-body .woocommerce-mini-cart__buttons a.checkout {
  width: 100%;
  height: 54px;
  border: none !important;
  border-radius: 14px !important;
  background: var(--zn-green-deep) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  box-shadow: 0 6px 16px rgba(59, 122, 30, .3);
  text-decoration: none;
}

.bde-mini-cart-offcanvas-body .woocommerce-mini-cart__buttons a.checkout:hover {
  background: #33691a !important;
}

.zn-cta-icon {
  flex: none;
}

/* --- divider + InPost Pay --- */

.zn-cart-alt--empty {
  display: none;
}

.zn-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 11px 0;
  color: #aeaeae;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.zn-or::before,
.zn-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--zn-line);
}

.zn-inpost {
  display: block;
}

/* Wtyczka InPost renderuje wlasny markup - rozciagamy go na pelna szerokosc,
   ale nie narzucamy kolorow, zeby nie psuc brandingu InPost Pay. */

.zn-inpost > * {
  width: 100%;
  max-width: 100%;
}
.bde-code-block {
  display: block;
}

.bde-code-block .zn-atc,
.bde-code-block .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: rgb(130, 200, 81);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  box-shadow: none;
  transition: filter 0.15s ease;
}

.bde-code-block .added_to_cart {
  margin-top: 8px;
}

.bde-code-block .zn-atc:hover,
.bde-code-block .added_to_cart:hover {
  filter: brightness(0.94);
  color: #fff;
}

.bde-code-block .zn-atc.loading {
  opacity: 0.65;
  pointer-events: none;
}

.bde-code-block .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 991px) {

  .shop-filters {
    display: block;
    width: 100%;
  }

  .shop-filters::before {
    content: "Filtry";
    display: block;
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgb(209, 213, 219);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgb(17,24,39)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: rgb(55, 65, 81);
    cursor: pointer;
    user-select: none;
  }

  .shop-filters > .bde-woo-shop-filters {
    display: none;
    padding-top: 14px;
  }

  .shop-filters.zn-otwarte > .bde-woo-shop-filters {
    display: block;
  }

  .shop-filters.zn-otwarte::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgb(17,24,39)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 15l-6-6-6 6'/></svg>");
  }
}
@media (max-width: 767px) {
  .woocommerce-ordering,
  .woocommerce-ordering .bde-woo-select,
  .woocommerce-ordering select.orderby,
  .bde-woo-select,
  .bde-woo-select select.orderby {
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-result-count {
    display: none !important;
  }
}
div.product-tabs h2, div.product-tabs h1 {
  font-size: 28px
}
div.product-tabs h3 {
  font-size: 22px
}
div.product-tabs p {
  line-height: 1.5em !important;
}
.bde-search-form-27201-119 .search-form__button--full-screen {
    background-color: #ffffff !important;
    font-size: 22px;
}


/* --- Plakietki "Bestseller" i "Nowosc" (kafelki katalogu + karta produktu) ---
   Uklad i wartosci przepisane z global blocku "Box produkt": wspolny kontener
   flex z odstepem 5px, etykiety obok siebie.

   Selektor celowo bez "ul.products li.product": te same reguly obsluguja tez
   karte produktu, gdzie kontener siedzi w galerii Breakdance. Oba kontenery
   maja position: relative, wiec wystarczy pozycja absolutna. */

.breakdance-woocommerce .zn-etykiety {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.breakdance-woocommerce .zn-etykieta {
  padding: 5px 15px;
  border-radius: 8px;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  white-space: nowrap;
}

.breakdance-woocommerce .zn-etykieta--bestseller {
  background: #FFBF00;
  color: #2B2B29;
}

.breakdance-woocommerce .zn-etykieta--nowosc {
  background: #4D9DE0;
  color: #FFFFFF;
}

/* Etykieta promocji zajmuje ten sam punkt (top 12px / left 12px), wiec przy
   przecenionym produkcie kontener schodzi nizej: 12px odstepu + 30px wysokosci
   etykiety (5px + 19.6px + 5px) + 6px przerwy. */

.breakdance-woocommerce .zn-etykiety--pod-promocja {
  top: 48px;
}


/* --- Checkbox "Chce otrzymac fakture" (pod polem NIP) ---
   WooCommerce dopisuje do pol nieobowiazkowych "(opcjonalne)". Przy zwyklym
   polu tekstowym to sensowne, przy zgodzie brzmi dziwnie - zdejmujemy tylko
   w tym jednym wierszu, reszta formularza zostaje bez zmian. */

.woocommerce form .form-row.zn-faktura .optional {
  display: none;
}

.woocommerce form .form-row.zn-faktura label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

.woocommerce form .form-row.zn-faktura input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}


/* --- Zgody marketingowe na kasie (makieta Z-Natury_Kasa_Stepper) --- */

/* Kontener .place-order to flex z gap ~21px, a wtyczka DHL24 wstawia w nim
   puste <div id="dhl24-review-data"> o zerowej wysokosci. Jako element flex
   zbieral gap z obu stron i robil 42px pustki nad zgodami. Ukrycie zdejmuje
   go z ukladu, a atrybuty data-* zostaja w DOM, wiec skrypt DHL je widzi. */

.woocommerce form.checkout .form-row.place-order #dhl24-review-data {
  display: none;
}

/* Ostatni wiersz zgod wymaganych ma wlasne 12px marginesu - przy gapie
   kontenera odstepy sie sumowaly. */

.woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper .form-row:last-child {
  margin-bottom: 0 !important;
}

/* Kompensacja gapa kontenera do ~10px z makiety. */

.woocommerce form.checkout .zn-zgody {
  margin-top: -8px;
}


.zn-zgody__tytul {
  margin: 10px 0 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #a6a69e;
}

/* Selektor zakotwiczony w formularzu kasy i !important, bo WooCommerce nadaje
   etykietom wlasne display i kolor z wyzsza specyficznoscia - bez tego
   checkbox laduje sie nad tekstem zamiast obok. */

.woocommerce form.checkout .zn-zgody .zn-zgoda,
.zn-zgody .zn-zgoda {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 9px !important;
  padding: 0;
  font-size: 11.5px !important;
  font-weight: 400;
  line-height: 1.4;
  color: #777 !important;
  cursor: pointer;
}

.woocommerce form.checkout .zn-zgody .zn-zgoda input[type="checkbox"],
.zn-zgody .zn-zgoda input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  margin: 1px 0 0 !important;
  accent-color: #3b7a1e;
}


/* ==========================================================================
   2. BLOG - PIERWSZY WPIS W UKLADZIE POZIOMYM
   ========================================================================== */

/* ==========================================================================
   Z-Natury - blog: pierwszy wpis w ukladzie poziomym

   Odwzorowanie bloku .featured z makiety klienta (Z-Natury_Blog.html):
   zdjecie po lewej (52% szerokosci), tresc po prawej, ponizej 760 px powrot
   do ukladu pionowego ze zdjeciem 16:9 nad tekstem.

   Kafelek petli sklada sie z czterech elementow, ale w przeplywie stoja tylko
   DWA - przycisk i pigulka z kategoria maja w szablonie `position: absolute`.
   Dlatego wystarczy obrocic istniejacy flex (szablon daje `column`) i wyjac
   zdjecie z przeplywu: wtedy to ono dopasowuje sie do wysokosci tekstu,
   zamiast narzucac karcie swoja wysokosc naturalna.
   ========================================================================== */

/* Kafelek na cala szerokosc siatki (3 kolumny). `width` obsluguje tez tryb
   Isotope, wlaczany przez pasek filtrow - tam kafelki maja `position:
   absolute` i siatka ich nie dotyczy. */
body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child {
  grid-column: 1 / -1;
  width: 100%;
}

/* `overflow: hidden` zamiast wpisywania zdjeciu nowego promienia: szablon
   nadaje mu `border-radius: 18px 18px 0 0` (dobre, gdy lezy na gorze karty,
   zle, gdy stoi po lewej). Przycinanie na karcie nadazy za kazda zmiana
   promienia w Breakdance. */
body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div {
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Zapas na dole robi miejsce przyciskowi, ktory jest pozycjonowany
   absolutnie - bez niego dluzsza zajawka weszlaby pod niego. */
body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > [class*="bde-div"] {
  margin-left: 52%;
  padding: 26px 26px 60px;
}

body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > [class*="bde-button"] {
  left: calc(52% + 26px);
}


/* --- Typografia wyroznionego wpisu (wg .featured h2 / .featured p) -------- */

body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.2;
}

body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child [class*="bde-text"] p {
  font-size: 14px;
  line-height: 1.6;
}


/* --- Telefon ------------------------------------------------------------- */

@media (max-width: 759px) {

  body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div {
    flex-direction: column;
  }

  body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > [class*="bde-div"] {
    margin-left: 0;
    padding: 15px 15px 55px;
  }

  body:is(.blog, .category, .tag) .bde-post-loop .ee-post:first-child > a > div > [class*="bde-button"] {
    left: 15px;
  }
}


/* ==========================================================================
   3. KOSZYK - PODSTRONA /koszyk/
   ========================================================================== */

/* ==========================================================================
   Z-Natury - koszyk

   Spojny z kasa (zn-checkout.css): te same zmienne, panele 1px/16px,
   przycisk 54px/14px, kwota sumy 19px/800.

   Uklad:
     LEWA  - lista produktow + kupon (panel)
     PRAWA - podsumowanie + CTA (panel staly, bez przyklejania)
     ponizej 900 px jedna kolumna, ponizej 768 px tabela staje sie kartami.

   Wysylka nie wystepuje w koszyku (filtr woocommerce_cart_ready_to_calc_shipping),
   wiec podsumowanie to wylacznie "Kwota" i "Lacznie".
   ========================================================================== */

.bde-cart {
  --zn-green: #82C851;
  --zn-green-deep: #3b7a1e;
  --zn-ink: #2b2b29;
  --zn-muted: #8a8a82;
  --zn-line: #e8e8e2;
  --zn-surface: #f5f7f2;
  --zn-tint: #eef6e6;
  --zn-err: #cf4b3e;
}


/* ==========================================================================
   1. RESET OZDOBNIKOW BREAKDANCE
   Builder dokleja tabelom ramki i tla, czesc przez inset box-shadow zamiast
   border - dlatego zdejmujemy oba i przywracamy tylko potrzebne linie.
   ========================================================================== */

.bde-cart table.cart,
.bde-cart table.cart thead,
.bde-cart table.cart tbody,
.bde-cart table.cart tr,
.bde-cart table.cart th,
.bde-cart table.cart td,
.bde-cart .cart_totals table,
.bde-cart .cart_totals tbody,
.bde-cart .cart_totals tr,
.bde-cart .cart_totals th,
.bde-cart .cart_totals td {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================================================
   2. SIATKA
   ========================================================================== */

@media (min-width: 900px) {

  .bde-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px !important;
  }

  .bde-cart form.woocommerce-cart-form {
    flex: 1 1 0;
    min-width: 0;
  }

  .bde-cart .cart-collaterals {
    flex: 0 0 360px;
    max-width: 360px;
  }

  .bde-cart .cross-sells {
    flex: 1 1 100%;
  }
}

@media (max-width: 899px) {

  .bde-cart .woocommerce {
    display: block;
  }

  .bde-cart .cart-collaterals {
    margin-top: 18px;
  }
}


/* ==========================================================================
   3. PANELE
   ========================================================================== */

.bde-cart form.woocommerce-cart-form,
.bde-cart .cart_totals {
  border: 1px solid var(--zn-line);
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

.bde-cart .cart_totals > h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--zn-ink);
}


/* ==========================================================================
   4. TABELA PRODUKTOW
   Stale szerokosci kolumn: przy ukladzie automatycznym nadmiar trafial do
   kolumny z krzyzykiem i przed miniatura powstawala pusta przestrzen.
   ========================================================================== */

.bde-cart table.cart {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.bde-cart table.cart thead th {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--zn-line) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--zn-muted);
  text-align: left;
}

.bde-cart table.cart th.product-price,
.bde-cart table.cart th.product-quantity,
.bde-cart table.cart th.product-subtotal {
  text-align: right;
}

.bde-cart table.cart th.product-remove,
.bde-cart table.cart td.product-remove    { width: 40px; }

.bde-cart table.cart th.product-thumbnail,
.bde-cart table.cart td.product-thumbnail { width: 76px; }

.bde-cart table.cart th.product-price,
.bde-cart table.cart td.product-price     { width: 92px; }

.bde-cart table.cart th.product-quantity,
.bde-cart table.cart td.product-quantity  { width: 104px; }

.bde-cart table.cart th.product-subtotal,
.bde-cart table.cart td.product-subtotal  { width: 96px; }

.bde-cart table.cart tbody tr.cart_item td {
  padding: 11px 0;
  border-bottom: 1px solid var(--zn-line) !important;
  vertical-align: middle;
}

.bde-cart table.cart tbody tr.cart_item:last-child td {
  border-bottom: none !important;
}

/* --- miniatura --- */

/* !important, bo Breakdance nadaje wlasny promien zmienna
   --bde-woo-product-images__border-radius i wygrywa kolejnoscia ladowania. */
.bde-cart td.product-thumbnail img {
  display: block;
  width: 62px !important;
  height: 62px !important;
  max-width: 62px !important;
  border-radius: 10px !important;
  object-fit: cover;
  background: var(--zn-tint);
}

/* --- nazwa --- */

.bde-cart td.product-name {
  padding-right: 14px !important;
}

.bde-cart td.product-name a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zn-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bde-cart td.product-name a:hover {
  color: var(--zn-green-deep);
}

.bde-cart td.product-name .variation {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--zn-muted);
}

/* --- ceny --- */

.bde-cart td.product-price,
.bde-cart td.product-subtotal {
  font-size: 14px;
  color: var(--zn-ink);
  text-align: right;
  white-space: nowrap;
}

.bde-cart td.product-subtotal {
  font-weight: 700;
}

/* --- ilosc --- */

.bde-cart td.product-quantity {
  text-align: right;
}

/* Stepper (.quantity--number) zostaje natywny: Breakdance pozycjonuje strzalki
   absolutnie i utrzymuje to nawet przy !important, wiec proba zlozenia ich
   w pasek konczy sie polem 42px z ucietymi przyciskami. Dopasowujemy wylacznie
   ramke i promien, zeby pasowaly do pol kuponu i paneli. */
.bde-cart td.product-quantity .quantity {
  display: inline-block;
  width: auto;
}

.bde-cart td.product-quantity input.qty {
  height: 40px;
  border: 1px solid var(--zn-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--zn-ink);
  text-align: center;
}

.bde-cart td.product-quantity input.qty:focus {
  outline: none;
  border-color: var(--zn-green) !important;
}

/* --- usuwanie --- */

.bde-cart td.product-remove a.remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zn-surface) !important;
  color: var(--zn-muted) !important;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.bde-cart td.product-remove a.remove:hover {
  background: #f6e2e0 !important;
  color: var(--zn-err) !important;
}


/* ==========================================================================
   5. KUPON I AKCJE
   ========================================================================== */

.bde-cart .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0 0 !important;
  margin: 0;
}

.bde-cart .coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  max-width: 440px;
}

.bde-cart .coupon input#coupon_code,
.bde-cart .coupon input.input-text {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px;
  color: var(--zn-ink);
}

.bde-cart .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--zn-green) !important;
}

.bde-cart .coupon button,
.bde-cart .actions > button[name="update_cart"] {
  flex: none;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--zn-green) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--zn-green-deep) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.bde-cart .coupon button:hover,
.bde-cart .actions > button[name="update_cart"]:hover {
  background: var(--zn-tint) !important;
  border-color: var(--zn-green-deep) !important;
}

.bde-cart .actions > button[name="update_cart"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}


/* ==========================================================================
   6. PODSUMOWANIE
   ========================================================================== */

.bde-cart .cart_totals table {
  width: 100%;
  margin: 0;
}

.bde-cart .cart_totals tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}

.bde-cart .cart_totals th {
  padding: 0 !important;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  text-align: left;
}

/* !important, bo Breakdance narzuca tabelom podsumowania wyrownanie do lewej
   i bez tego kwota kleila sie do etykiety zamiast stac przy krawedzi. */
.bde-cart .cart_totals td {
  flex: 1;
  padding: 0 !important;
  font-size: 13px;
  color: var(--zn-ink);
  text-align: right !important;
}

.bde-cart .cart_totals tr.order-total {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--zn-line) !important;
}

/* Znak `>` jest tu istotny: WooCommerce owija kwote VAT w te sama klase
   woocommerce-Price-amount co sume, wiec bez ograniczenia do bezposredniego
   dziecka komorki "13,70 zl" w dopisku dostawalo 19px/800 i odstawalo. */
.bde-cart .cart_totals tr.order-total > td > .woocommerce-Price-amount {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--zn-ink);
}

/* Dopisek "(zawiera X zl VAT)" - cala linia drobna i szara. */
.bde-cart .cart_totals .includes_tax,
.bde-cart .cart_totals small,
.bde-cart .cart_totals .includes_tax *,
.bde-cart .cart_totals small * {
  display: inline;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--zn-muted) !important;
}

.bde-cart .cart_totals .includes_tax,
.bde-cart .cart_totals small {
  display: block;
  margin-top: 4px;
}


/* ==========================================================================
   7. PRZYCISK
   ========================================================================== */

.bde-cart .wc-proceed-to-checkout {
  padding: 12px 0 0 !important;
  margin: 0;
}

.bde-cart a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: none !important;
  border-radius: 14px !important;
  background: var(--zn-green-deep) !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(59, 122, 30, .28);
  transition: background-color .2s ease;
}

.bde-cart a.checkout-button:hover {
  background: #33691a !important;
}


/* ==========================================================================
   8. TELEFON - tabela zamienia sie w karty
   ========================================================================== */

@media (max-width: 767px) {

  .bde-cart form.woocommerce-cart-form,
  .bde-cart .cart_totals {
    padding: 0 18px 18px 18px !important;
  }

  .bde-cart table.cart {
    table-layout: auto;
  }

  .bde-cart table.cart thead {
    display: none;
  }

  .bde-cart table.cart,
  .bde-cart table.cart tbody {
    display: block;
  }

  /* Breakdance nadaje <tbody> padding ~13px - bez zerowania cala lista
     produktow konczyla sie 13px przed krawedzia panelu. */
  .bde-cart table.cart tbody {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Trzecia kolumna musi byc `auto`, nie 26px: dzieli ja krzyzyk z kwota,
     a przy stalej szerokosci kwota zwezala sie do 26px i lamala. */
  /* Wiersz z kuponem i "Zaktualizuj koszyk" siedzi w osobnym <tr> z <td colspan>,
     ktorego nie obejmuja reguly .cart_item - bez tego zostawal przy szerokosci
     tresci (200px) zamiast wypelnic panel. */
  .bde-cart table.cart tbody tr {
    display: block;
    width: 100%;
    /* Breakdance dokleja wierszom wciecie poziome - bez zerowania tresc
       konczyla sie 13px przed krawedzia panelu. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bde-cart table.cart tbody tr:not(.cart_item) > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Krzyzyk wychodzi z siatki i siada w rogu, dzieki czemu nazwa produktu
     dostaje obie prawe kolumny zamiast 136px i nie lamie sie na piec linii. */
  .bde-cart table.cart tbody tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto nazwa nazwa"
      "foto ilosc kwota";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--zn-line);
  }

  .bde-cart table.cart td.product-remove {
    position: absolute;
    top: 12px;
    right: 0;
  }

  .bde-cart table.cart tbody tr.cart_item:last-child {
    border-bottom: none;
  }

  .bde-cart table.cart tbody tr.cart_item td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
  }

  .bde-cart table.cart td.product-thumbnail { grid-area: foto; }
  /* Zapas na krzyzyk siedzacy absolutnie w rogu. Musi byc TU, a nie wyzej:
     regula `tr.cart_item td { padding: 0 !important }` stoi pomiedzy i skasowalaby go. */
  .bde-cart table.cart td.product-name      { grid-area: nazwa; padding-right: 34px !important; }
  .bde-cart table.cart td.product-quantity  { grid-area: ilosc; text-align: left; }
  .bde-cart table.cart td.product-subtotal  { grid-area: kwota; }

  /* cena jednostkowa dubluje kwote pozycji - na waskim ekranie zbedna */
  .bde-cart table.cart td.product-price {
    display: none;
  }

  .bde-cart td.product-thumbnail img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
  }

  /* Zapas na krzyzyk daje ODNOSNIK, nie komorka: `tr.cart_item td { padding: 0
     !important }` kasuje kazdy padding ustawiony na <td>, nawet z !important. */
  .bde-cart td.product-name a {
    font-size: 13.5px;
    padding-right: 34px;
  }

  /* Strzalki Breakdance sa pozycjonowane absolutnie wzgledem .quantity, wiec
     kontener MUSI miec te sama szerokosc co pole - inaczej "+" laduje w srodku
     inputu zamiast przy jego krawedzi. */
  .bde-cart table.cart td.product-quantity .quantity,
  .bde-cart table.cart td.product-quantity .quantity--number {
    width: 92px !important;
    max-width: 92px !important;
    min-width: 92px !important;
  }

  .bde-cart td.product-quantity input.qty {
    width: 92px !important;
    height: 42px !important;
  }

  .bde-cart .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bde-cart .coupon {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .bde-cart form.woocommerce-cart-form .coupon input#coupon_code,
  .bde-cart form.woocommerce-cart-form .coupon input.input-text {
    flex: 1 1 100% !important;
    /* Bez powtorzenia wysokosci pole zapadalo sie do 20px - regula bazowa
       przegrywa tu z ustawieniami Breakdance. */
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .bde-cart .coupon button,
  .bde-cart .actions > button[name="update_cart"] {
    width: 100%;
  }

}


/* ==========================================================================
   4. KASA
   ========================================================================== */

/* ==========================================================================
   Z-Natury - kasa. Odwzorowanie makiety Z-Natury_Kasa_Stepper.
   Ladowane z pliku przez zn-checkout.php (priorytet 999, czyli po Breakdance).

   Uklad (ustalony z klientem, bez krokow):
     LEWA:  Dane i adres -> Dostawa -> Platnosc (same metody)
     PRAWA: Podsumowanie + zgody + "Kupuje i place", przyklejona

   Wartosci pochodza wprost z makiety; numer linii w komentarzu tam, gdzie
   wartosc moglaby wygladac na przypadkowa.
   ========================================================================== */

.woocommerce-checkout .woocommerce {
  --zn-green: #82C851;
  --zn-green-deep: #3b7a1e;
  --zn-ink: #2b2b29;
  --zn-muted: #8a8a82;
  --zn-line: #e8e8e2;
  --zn-surface: #f5f7f2;
  --zn-tint: #eef6e6;
  --zn-err: #cf4b3e;
}

/* ==========================================================================
   1. RESET OZDOBNIKOW BREAKDANCE
   Builder dokleja ramki i tla do tabel, list i przyciskow w kasie. Makieta ma
   plaskie panele, wiec zdejmujemy wszystko i przywracamy tylko te linie,
   ktore w makiecie faktycznie sa.
   ========================================================================== */

/* thead/tbody/tfoot MUSZA tu byc: Breakdance rysuje obwodke wokol <tbody>
   przez `box-shadow: inset 0 0 0 1px`, a nie przez border - bez tego wokol
   listy produktow zostawala szara ramka. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table,
.woocommerce form.checkout .woocommerce-checkout-review-order-table thead,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tr,
.woocommerce form.checkout .woocommerce-checkout-review-order-table th,
.woocommerce form.checkout .woocommerce-checkout-review-order-table td,
.woocommerce form.checkout ul.wc_payment_methods,
.woocommerce form.checkout #payment,
.woocommerce form.checkout .place-order,
.woocommerce form.checkout .payment_box {
  border: none;
  background: transparent;
  box-shadow: none !important;
}

.woocommerce form.checkout #payment,
.woocommerce form.checkout .place-order {
  padding: 0 !important;
  margin: 0;
  border-radius: 0;
}

/* ==========================================================================
   2. SIATKA
   ========================================================================== */

.woocommerce form.checkout {
  overflow-anchor: none; /* JS przestawia bloki - bez tego przegladarka skacze */
}

.woocommerce form.checkout > #customer_details,
.woocommerce form.checkout > .zn-checkout-shipping,
.woocommerce form.checkout > .zn-payment-box,
.woocommerce form.checkout > .bde-order-review-column {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 900px) {

  .woocommerce form.checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding-bottom: 40px;
  }

  .woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 1; }
  .woocommerce form.checkout > .zn-checkout-shipping { grid-column: 1; grid-row: 2; }
  .woocommerce form.checkout > .zn-payment-box { grid-column: 1; grid-row: 3; }

  .woocommerce form.checkout > .bde-order-review-column {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 84px;
  }
}

@media (max-width: 899px) {

  .woocommerce form.checkout {
    display: block !important;
  }

  .woocommerce form.checkout > #customer_details,
  .woocommerce form.checkout > .zn-checkout-shipping,
  .woocommerce form.checkout > .zn-payment-box,
  .woocommerce form.checkout > .bde-order-review-column {
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   3. PANELE I NAGLOWKI
   ========================================================================== */

.woocommerce form.checkout #customer_details,
.woocommerce form.checkout .zn-checkout-shipping,
.woocommerce form.checkout .zn-payment-box {
  border: 1px solid var(--zn-line);
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

/* Podsumowanie ma w makiecie o 1px ciasniejszy padding niz panele formularza. */
.woocommerce form.checkout .bde-order-review-column {
  border: 1px solid var(--zn-line);
  border-radius: 16px;
  background: #fff;
  padding: 17px;
}

.woocommerce form.checkout #customer_details h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--zn-ink);
}

/* --- numery krokow w zielonych kolkach ---
   Sekcje sa ulozone jedna pod druga, wiec numer zastepuje pasek postepu
   z makiety: 1 Dane, 2 Dostawa, 3 Platnosc. */

.woocommerce form.checkout .woocommerce-billing-fields > h3::before,
.woocommerce form.checkout .zn-checkout-shipping .zn-checkout-shipping__title::before,
.woocommerce form.checkout .zn-payment-box .zn-payment-box__title::before {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zn-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.woocommerce form.checkout .woocommerce-billing-fields > h3::before {
  content: "1";
}

.woocommerce form.checkout .zn-checkout-shipping .zn-checkout-shipping__title::before {
  content: "2";
}

.woocommerce form.checkout .zn-payment-box .zn-payment-box__title::before {
  content: "3";
}

/* Adres wysylki to czesc kroku 1 - bez wlasnego numeru. */
.woocommerce form.checkout .woocommerce-shipping-fields > h3::before,
.woocommerce form.checkout .woocommerce-additional-fields > h3::before {
  content: none;
}

.woocommerce form.checkout #customer_details .col-2 h3 {
  margin-top: 18px;
}

/* Naglowki sekcji dodanych przez nas - !important, bo `.breakdance h3`
   wygrywa specyficznoscia z sama klasa. */
.woocommerce form.checkout .zn-checkout-shipping .zn-checkout-shipping__title,
.woocommerce form.checkout .zn-payment-box .zn-payment-box__title {
  display: flex !important;
  align-items: center;
  gap: 9px;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 14px !important;
  color: var(--zn-ink);
}

/* Naglowek podsumowania jest w makiecie mniejszy od naglowkow paneli. */
.woocommerce form.checkout #order_review_heading {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--zn-ink);
}

/* ==========================================================================
   4. POLA FORMULARZA
   Uklad na flexie zamiast natywnych floatow WooCommerce - przy floatach odstep
   miedzy wierszami wychodzil 28px zamiast 12px, bo float wypada z flow.
   Makieta rozroznia osie: pion 12px (.field), poziom 10px (.row2).
   ========================================================================== */

.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 10px;
}

.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce form.checkout .woocommerce-additional-fields__field-wrapper > .form-row {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.woocommerce form.checkout .form-row {
  margin: 0 0 12px;
  padding: 0;
}

.woocommerce form.checkout .form-row label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #6e6e68;
  margin: 0 0 5px;
}

.woocommerce form.checkout .form-row .input-text,
.woocommerce form.checkout .form-row select,
.woocommerce form.checkout .select2-container .select2-selection--single {
  width: 100%;
  height: 46px;
  border: 1px solid #dcdcd6;
  border-radius: 10px;
  padding: 0 13px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 44px;
  color: var(--zn-ink);
  background: #fcfcfb;
  box-shadow: none;
}

.woocommerce form.checkout .form-row textarea.input-text {
  height: auto;
  min-height: 90px;
  padding: 11px 13px;
  line-height: 1.45;
}

.woocommerce form.checkout .select2-container .select2-selection__rendered {
  line-height: 44px;
  padding: 0;
  color: var(--zn-ink);
}

.woocommerce form.checkout .select2-container .select2-selection__arrow {
  height: 44px;
}

@media (min-width: 600px) {

  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
    width: calc(50% - 5px);
  }

  /* Makieta daje kodowi i miastu proporcje 1:2, nie 1:1. */
  .woocommerce form.checkout #billing_postcode_field,
  .woocommerce form.checkout #shipping_postcode_field {
    width: calc(33.333% - 6.67px);
  }

  .woocommerce form.checkout #billing_city_field,
  .woocommerce form.checkout #shipping_city_field {
    width: calc(66.667% - 3.33px);
  }
}

/* --- walidacja ---
   Kolejnosc blokow jest istotna (reset -> focus -> blad), bo specyficznosci
   sa zblizone. Makieta pokazuje blad dopiero po interakcji, a stanu "poprawne"
   nie ma w ogole - stad neutralizacja klas WooCommerce. */

.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid textarea.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select,
.woocommerce form.checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.checkout .form-row.woocommerce-validated textarea.input-text,
.woocommerce form.checkout .form-row.woocommerce-validated select {
  border-color: #dcdcd6;
  background: #fcfcfb;
}

.woocommerce form.checkout .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection,
.woocommerce form.checkout .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
  border-color: #dcdcd6;
  background: #fcfcfb;
}

.woocommerce form.checkout .form-row input.input-text:focus,
.woocommerce form.checkout .form-row textarea.input-text:focus,
.woocommerce form.checkout .form-row select:focus {
  outline: none;
  border-color: var(--zn-green);
}

.woocommerce form.checkout .form-row input.input-text:user-invalid,
.woocommerce form.checkout .form-row textarea.input-text:user-invalid,
.woocommerce form.checkout .form-row select:user-invalid {
  border-color: var(--zn-err);
  background: #fdf3f2;
}

/* --- checkboxy w formularzu (makieta: .check) --- */

.woocommerce form.checkout .form-row.create-account,
.woocommerce form.checkout #ship-to-different-address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: #444;
  margin: 4px 0 2px;
  cursor: pointer;
}

.woocommerce form.checkout .form-row.create-account label,
.woocommerce form.checkout #ship-to-different-address label,
.woocommerce form.checkout #ship-to-different-address span {
  font-size: 12.5px;
  font-weight: 400;
  color: #444;
  margin: 0;
  cursor: pointer;
}

.woocommerce form.checkout input[type="checkbox"] {
  accent-color: var(--zn-green-deep);
  width: 16px;
  height: 16px;
  flex: none;
  margin: 1px 0 0;
}

/* ==========================================================================
   5. OPCJE WYBORU - wspolne dla dostawy i platnosci (makieta: .opt)
   ========================================================================== */

.zn-ship-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zn-ship-item,
.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  border: 1px solid #e2e2dc;
  border-radius: 11px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method {
  padding: 11px 12px;
}

.zn-ship-item:hover,
.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method:hover {
  border-color: #cfe3bd;
}

.zn-ship-item--sel,
.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method.zn-pay--sel {
  border-color: var(--zn-green);
  background: var(--zn-tint);
}

/* etykieta wypelnia kafelek, zeby klikniecie w dowolne miejsce zaznaczalo */
.woocommerce form.checkout .zn-ship-item label.zn-opt {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 11px 12px;
  margin: 0;
  cursor: pointer;
}

.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--zn-ink);
  margin: 0;
  cursor: pointer;
}

.zn-opt input[type="radio"],
.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
  accent-color: var(--zn-green-deep);
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
}

/* logotyp przewoznika (makieta: .logo 48x30) */
.zn-opt__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 30px;
  overflow: hidden;
}

.zn-opt__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.zn-opt__tt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.zn-opt__name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--zn-ink);
}

.zn-opt__desc {
  font-size: 11px;
  line-height: 1.3;
  color: var(--zn-muted);
}

.zn-opt__price {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  color: var(--zn-ink);
}

/* logo bramki platnosci (Przelewy24) - do prawej krawedzi kafelka */
.woocommerce form.checkout ul.wc_payment_methods li.wc_payment_method > label img {
  max-height: 22px;
  width: auto;
  margin: 0 0 0 auto;
  display: block;
}

/* opis metody platnosci - pelna szerokosc pod etykieta */
.woocommerce form.checkout .payment_box {
  flex: 1 0 100%;
  background: var(--zn-surface);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--zn-muted);
}

.woocommerce form.checkout .payment_box::before {
  display: none;
}

.woocommerce form.checkout .payment_box p {
  margin: 0;
}

/* dodatki wtyczek pod metoda wysylki (wybor paczkomatu) */
.zn-opt__extra {
  flex: 1 0 100%;
  padding: 0 12px 10px 41px;
}

.zn-opt__extra:empty {
  display: none;
}

.zn-opt__extra p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--zn-muted);
}

.zn-opt__extra img {
  max-height: 18px;
  width: auto;
  flex: none;
  display: block;
}

.zn-checkout-shipping--empty {
  display: none;
}

.zn-checkout-shipping__package {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8d8d85;
  margin: 14px 0 8px;
}

.zn-checkout-shipping__none {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--zn-muted);
  background: var(--zn-surface);
  border-radius: 9px;
  padding: 11px 13px;
}

/* oryginalny wiersz dostawy w tabeli - zastapiony sekcja w lewej kolumnie */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  display: none;
}

/* ==========================================================================
   6. PODSUMOWANIE ZAMOWIENIA
   Tabela rozlozona na bloki - makieta ma liste pozycji z miniaturami,
   a algorytm tabeli zwezal kolumne z nazwa do szerokosci jednego slowa.
   ========================================================================== */

.woocommerce form.checkout .woocommerce-checkout-review-order-table,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
  margin: 0;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table th,
.woocommerce form.checkout .woocommerce-checkout-review-order-table td {
  display: block;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  text-align: left;
}

/* --- pozycja produktu (makieta: .li) --- */

/* Kolor wpisany literalnie i osobna deklaracja border-bottom-color: w tym
   miejscu Breakdance narzuca wlasna ciemna zielen, a skrot ze zmienna nie
   nadpisywal jej skutecznie. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tr.cart_item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border: none !important;
  border-bottom: 1px solid #e8e8e2 !important;
  border-bottom-color: #e8e8e2 !important;
}

/* Makieta: [miniatura] [nazwa nad podtytulem] [cena przy krawedzi].
   Siatka zamiast flexa, bo nazwa i podtytul maja stac jedno pod drugim
   w kolumnie obok zdjecia, a nie lamac sie na pelna szerokosc. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-name {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "thumb nazwa"
    "thumb podtytul";
  align-content: center;
  column-gap: 11px;
}

.zn-ci__thumb {
  grid-area: thumb;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--zn-tint);
}

.zn-ci__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zn-ci__name {
  grid-area: nazwa;
  align-self: end;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--zn-ink);
}

.zn-ci__sub {
  grid-area: podtytul;
  align-self: start;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--zn-muted);
}

/* Ilosc jest juz w podtytule ("... - 1 szt."), wiec osobny znacznik znika. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table .product-quantity {
  display: none;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-total {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  color: var(--zn-ink);
  text-align: right;
}

/* --- wiersze sum (makieta: .sumrow) --- */

.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  white-space: nowrap;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total {
  border-top: 1px solid var(--zn-line);
  margin-top: 4px;
  padding-top: 11px;
}

/* w makiecie ciemna jest wylacznie kwota, etykieta zostaje szara */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total th {
  color: #555;
  font-weight: 400;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-weight: 800;
  font-size: 19px;
  color: var(--zn-ink);
}

/* ==========================================================================
   7. ZGODY I PRZYCISK
   ========================================================================== */

.woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper {
  border-top: 1px solid var(--zn-line) !important;
  margin: 12px 0 0;
  padding: 12px 0 0;
}

/* Tresc regulaminu wklejana przez WooCommerce potrafi przyjsc w <blockquote>,
   ktoremu Breakdance rysuje gruba kreske z boku - w makiecie zgody sa plaskie. */
.woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper blockquote,
.woocommerce form.checkout .woocommerce-terms-and-conditions blockquote {
  border: none !important;
  margin: 0;
  padding: 0;
  font-style: normal;
  background: transparent;
}

/* Radio metody wysylki ukryte w oryginalnej tabeli - Breakdance rysuje im ramki,
   ktore prze-wituj- przez podsumowanie. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table input.shipping_method {
  display: none;
}

.woocommerce form.checkout .woocommerce-privacy-policy-text,
.woocommerce form.checkout .woocommerce-privacy-policy-text p {
  font-size: 11.5px;
  line-height: 1.4;
  color: #555;
  margin: 0 0 9px;
}

.woocommerce form.checkout .validate-required.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce form.checkout .form-row.terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #555;
  margin: 0 0 9px;
  cursor: pointer;
}

.woocommerce form.checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  color: #555;
}

.woocommerce form.checkout .woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce form.checkout .woocommerce-privacy-policy-text a {
  color: var(--zn-green-deep);
}

.woocommerce form.checkout #place_order {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  border: none !important;
  border-radius: 14px !important;
  background: var(--zn-green-deep) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin-top: 6px;
  padding: 0 18px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(59, 122, 30, .28);
  transition: background-color .2s ease;
}

.woocommerce form.checkout #place_order:hover {
  background: #33691a !important;
}

.woocommerce form.checkout #place_order:disabled {
  background: #cfd6cb !important;
  box-shadow: none;
  cursor: not-allowed;
}

.zn-cta-arrow {
  flex: none;
}


/* ==========================================================================
   9. NIP, LOGOTYPY PLATNOSCI, KUPON I PASEK DOSTAWY
   ========================================================================== */

/* --- logotyp operatora platnosci przed nazwa (jak w sekcji dostawy) --- */

.woocommerce form.checkout .zn-payment-box li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Nazwa metody jest golym wezlem tekstowym, wiec w kontenerze flex staje sie
   anonimowym elementem z order 0 - obrazek z order -1 wskakuje przed nia.
   JS nie byl potrzebny, a w dodatku mylil sie na `firstElementChild`, ktory
   pomija wezly tekstowe i twierdzil, ze logo juz stoi pierwsze. */
/* Logo bylo wypychane w prawo przez `margin-left: auto` z arkusza operatora
   platnosci (zmierzone: 597px). Zerujemy margines i ustawiamy order -1 -
   nazwa metody jest golym wezlem tekstowym, wiec jako anonimowy element flex
   ma order 0 i obrazek wskakuje przed nia. */
.woocommerce form.checkout .zn-payment-box li.wc_payment_method > label img,
.woocommerce form.checkout li.wc_payment_method > label img {
  flex: 0 0 auto !important;
  order: -1 !important;
  max-height: 20px !important;
  width: auto !important;
  margin: 0 !important;
}

.woocommerce form.checkout .zn-payment-box li.wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
}

/* --- kontener na kupon i pasek, pod podsumowaniem --- */

/* Pasek progu stoi na samej gorze podsumowania, przed lista produktow. */
.woocommerce form.checkout .zn-checkout-shipbar {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--zn-line);
}

/* Kupon miedzy podsumowaniem a zgodami. */
.woocommerce form.checkout form.zn-checkout-coupon {
  margin: 12px 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--zn-line) !important;
}

/* --- kupon --- */

.woocommerce form.checkout form.zn-checkout-coupon {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100%;
}

.woocommerce form.checkout form.zn-checkout-coupon p {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce form.checkout form.zn-checkout-coupon .form-row-first,
.woocommerce form.checkout form.zn-checkout-coupon .form-row-last {
  width: auto;
  float: none;
}

.woocommerce form.checkout form.zn-checkout-coupon .form-row-first {
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce form.checkout form.zn-checkout-coupon input#coupon_code {
  width: 100% !important;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 13.5px;
  color: var(--zn-ink);
}

.woocommerce form.checkout form.zn-checkout-coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--zn-green) !important;
}

.woocommerce form.checkout form.zn-checkout-coupon button {
  flex: none;
  height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--zn-green) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--zn-green-deep) !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}

.woocommerce form.checkout form.zn-checkout-coupon button:hover {
  background: var(--zn-tint) !important;
}

/* --- pasek progu darmowej dostawy (HTML z zn-cart-extras.php) --- */

.woocommerce form.checkout .zn-checkout-shipbar {
  width: 100%;
}

.woocommerce form.checkout .zn-checkout-shipbar--empty {
  display: none;
}

.woocommerce form.checkout .zn-checkout-shipbar .zn-cart-ship-wrap--empty {
  display: none;
}

@media (max-width: 767px) {

  .woocommerce form.checkout form.zn-checkout-coupon {
    flex-wrap: wrap;
  }

  .woocommerce form.checkout form.zn-checkout-coupon .form-row-first {
    flex: 1 1 100%;
  }

  .woocommerce form.checkout form.zn-checkout-coupon button {
    width: 100%;
  }
}

/* Kotwiczenie scrolla wylaczone takze na dokumencie: JS doklada tresc nad
   widocznym obszarem (sekcja dostawy, panel platnosci), a przegladarka
   probowala wtedy "zachowac" widok i przesuwala strone w dol. */
html,
body {
  overflow-anchor: none;
}


/* --- poprawki po pomiarze na kasie ------------------------------------- */

/* Pasek postepu przyszedl ze stylami koszyka bocznego, gdzie panel jest
   wezszy - w kolumnie podsumowania konczyl sie na 400px zamiast wypelnic
   cale 466px. */
/* Blok przyszedl ze stylami koszyka bocznego, gdzie zewnetrzny wrap ma
   padding 14px 18px - w kolumnie podsumowania to zbedne wciecie, przez ktore
   pasek konczyl sie na 400px zamiast wypelnic 466px. Wewnetrzny padding
   .zn-ship zostaje, bo rysuje zielone tlo bloku. */
.woocommerce form.checkout .zn-checkout-shipbar .zn-cart-ship-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.woocommerce form.checkout .zn-checkout-shipbar .zn-ship,
.woocommerce form.checkout .zn-checkout-shipbar .zn-ship__bar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Przycisk kuponu mial 15px wysokosci - WooCommerce trzyma go w <p class="form-row">,
   ktory narzuca wlasne wymiary, a selektor bez form-row nie wygrywal. */
.woocommerce form.checkout form.checkout_coupon .form-row {
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
}

.woocommerce form.checkout form.checkout_coupon .form-row-first {
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce form.checkout form.checkout_coupon .form-row-last {
  flex: none;
}

.woocommerce form.checkout form.checkout_coupon .form-row-last button,
.woocommerce form.checkout form.checkout_coupon button[name="apply_coupon"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--zn-green) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--zn-green-deep) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
}

.woocommerce form.checkout form.checkout_coupon .form-row-last button:hover {
  background: var(--zn-tint) !important;
}

.woocommerce form.checkout form.checkout_coupon .clear {
  display: none !important;
}


/* ==========================================================================
   5. MOJE KONTO - LOGOWANIE, REJESTRACJA, ODZYSKIWANIE HASLA
   Odwzorowanie kasy: te same panele (16px/#e8e8e2), pola (46px/10px/#fcfcfb),
   naglowki (17px/800) i przycisk glowny (54px/14px). Zakres celowo zawezony
   do #customer_login i formularzy hasla - panel klienta po zalogowaniu
   zostaje nietkniety.
   ========================================================================== */

.woocommerce-account .woocommerce {
  --zn-green: #82C851;
  --zn-green-deep: #3b7a1e;
  --zn-ink: #2b2b29;
  --zn-muted: #8a8a82;
  --zn-line: #e8e8e2;
  --zn-tint: #eef6e6;
  --zn-err: #cf4b3e;
}

/* --- siatka dwoch kolumn ---
   Kontener sekcji ma 1400px, a same formularze potrzebuja ~880px - bez
   ograniczenia kolumny rozjezdzaja sie na cala szerokosc ekranu. */

/* !important jest konieczne: Breakdance celuje w ten sam kontener selektorem
   o wyzszej specyficznosci (.woocommerce-page.woocommerce-account
   .breakdance-woocommerce #customer_login) i narzuca 768px oraz wlasny gap. */
.woocommerce-account #customer_login.u-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px !important;
  align-items: start;
  max-width: 880px !important;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* Breakdance rysuje karte (ramka + tlo + radius 4px + padding 24px) na samym
   <form>. Zostawione dawaloby karte w karcie i zwezalo pola o 48px, a wlasny
   gap formularza (20.9px) sumowal sie z marginesami wierszy. Karte trzyma
   kolumna, bo obejmuje takze naglowek.

   Breakdance zawezal tez sam formularz do 360px
   (--bde-woo-forms__wrappers-small) - o szerokosci decyduje teraz karta. */
.woocommerce-account #customer_login form.woocommerce-form {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  margin: 0;
}

.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--zn-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 43, 41, .04);
}

@media (max-width: 767px) {

  .woocommerce-account #customer_login.u-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px !important; /* regula bazowa ma !important przez Breakdance */
    padding: 4px 0 28px;
  }

  .woocommerce-account #customer_login > .u-column1,
  .woocommerce-account #customer_login > .u-column2 {
    padding: 16px !important;
  }
}

/* --- naglowki kolumn (wzor: #customer_details h3 na kasie) --- */

.woocommerce-account #customer_login > .u-column1 > h2,
.woocommerce-account #customer_login > .u-column2 > h2 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--zn-ink);
  margin: 0 0 14px !important;
  padding: 0;
  border: none;
  text-transform: none;
  letter-spacing: 0;
}


/* ==========================================================================
   5.1 POLA
   ========================================================================== */

.woocommerce-account .woocommerce form.woocommerce-form .form-row,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  float: none;
}

.woocommerce-account .woocommerce form.woocommerce-form .form-row > label,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row > label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #6e6e68;
  margin: 0 0 5px;
}

.woocommerce-account .woocommerce form.woocommerce-form .input-text,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .input-text {
  width: 100%;
  height: 46px;
  border: 1px solid #dcdcd6 !important;
  border-radius: 10px !important;
  padding: 0 13px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 44px;
  color: var(--zn-ink);
  background: #fcfcfb !important;
  box-shadow: none;
}

.woocommerce-account .woocommerce form.woocommerce-form .input-text:focus,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .input-text:focus {
  outline: none;
  border-color: var(--zn-green) !important;
}

/* WooCommerce oznacza bledne pole klasa na <p>, nie na <input>. */
.woocommerce-account .woocommerce .form-row.woocommerce-invalid .input-text {
  border-color: var(--zn-err) !important;
  background: #fdf3f2 !important;
}

/* --- pole hasla z przyciskiem podgladu ---
   Breakdance nie doklada ikony WooCommerce (::after ma content:none), wiec
   przycisk byl 40px pustego miejsca. Rysujemy wlasna ikone oka. */

.woocommerce-account .woocommerce .password-input {
  display: block;
  position: relative;
  width: 100%;
}

.woocommerce-account .woocommerce .password-input .input-text {
  padding-right: 44px;
}

.woocommerce-account .woocommerce .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease;
}

.woocommerce-account .woocommerce .show-password-input:hover,
.woocommerce-account .woocommerce .show-password-input.display-password {
  opacity: 1;
}

.woocommerce-account .woocommerce .show-password-input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 19px;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce .show-password-input.display-password::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}


/* ==========================================================================
   5.2 CHECKBOXY, ZGODA NA POLITYKE, LINKI
   ========================================================================== */

.woocommerce-account .woocommerce form.woocommerce-form input[type="checkbox"] {
  accent-color: var(--zn-green-deep);
  width: 16px;
  height: 16px;
  flex: none;
  margin: 1px 0 0;
}

/* "Zapamietaj mnie" siedzi w tym samym <p> co przycisk - stad kolumna. */
.woocommerce-account .woocommerce .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 10px;
}

.woocommerce-account .woocommerce .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce .zn-zgoda-konto {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: #444;
  margin: 0;
  cursor: pointer;
}

.woocommerce-account .woocommerce .woocommerce-form-login__rememberme span {
  font-size: 12.5px;
  font-weight: 400;
  color: #444;
}

/* Zgoda na polityke prywatnosci przy rejestracji (zn_rejestracja_zgoda). */
.woocommerce-account .woocommerce .zn-zgoda-konto {
  margin: 2px 0 14px;
}

.woocommerce-account .woocommerce .zn-zgoda-konto__tresc {
  font-size: 12.5px;
  line-height: 1.4;
  color: #444;
}

.woocommerce-account .woocommerce .zn-zgoda-konto__tresc p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.woocommerce-account .woocommerce .zn-zgoda-konto a {
  color: var(--zn-green-deep);
  text-decoration: underline;
}

.woocommerce-account .woocommerce .zn-zgoda-konto .required {
  color: var(--zn-err);
  border: none;
  text-decoration: none;
}

/* Pusty <div> zostaje po odjeciu domyslnego tekstu polityki (filtr w PHP). */
.woocommerce-account .woocommerce .woocommerce-privacy-policy-text:empty {
  display: none;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword a {
  color: var(--zn-muted);
  text-decoration: underline;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword a:hover {
  color: var(--zn-green-deep);
}


/* ==========================================================================
   5.3 PRZYCISKI
   Przed zmiana logowanie mialo 46px, a rejestracja 44px - obie kolumny
   dostaja jedna wysokosc z kasy (#place_order).
   ========================================================================== */

.woocommerce-account .woocommerce .woocommerce-form-login__submit,
.woocommerce-account .woocommerce .woocommerce-form-register__submit,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  height: 54px;
  border: none !important;
  border-radius: 14px !important;
  background: var(--zn-green-deep) !important;
  color: #fff !important;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0 18px !important;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(59, 122, 30, .28);
  transition: background-color .2s ease;
}

.woocommerce-account .woocommerce .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword button[type="submit"]:hover {
  background: #33691a !important;
}


/* ==========================================================================
   5.4 KOMUNIKATY
   ========================================================================== */

.woocommerce-account .woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-account .woocommerce .woocommerce-error,
.woocommerce-account .woocommerce .woocommerce-message,
.woocommerce-account .woocommerce .woocommerce-info {
  max-width: 880px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  border: 1px solid var(--zn-line);
  border-left-width: 3px;
  border-radius: 12px;
  background: #fcfcfb;
  color: var(--zn-ink);
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

.woocommerce-account .woocommerce .woocommerce-error {
  border-left-color: var(--zn-err);
  background: #fdf3f2;
}

.woocommerce-account .woocommerce .woocommerce-message,
.woocommerce-account .woocommerce .woocommerce-info {
  border-left-color: var(--zn-green-deep);
  background: var(--zn-tint);
}

.woocommerce-account .woocommerce .woocommerce-error li,
.woocommerce-account .woocommerce .woocommerce-message li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce .woocommerce-error li + li {
  margin-top: 5px;
}

.woocommerce-account .woocommerce .woocommerce-error a,
.woocommerce-account .woocommerce .woocommerce-message a {
  color: var(--zn-green-deep);
}


/* ==========================================================================
   5.5 ODZYSKIWANIE I ZMIANA HASLA
   Osobna podstrona (/lost-password/), bez kontenera #customer_login - panel
   budujemy wokol samego formularza.
   ========================================================================== */

/* Tu karte trzyma sam formularz (nie ma kolumn), ale Breakdance narzuca mu
   wlasna - stad !important na tych samych wlasciwosciach co przy logowaniu. */
.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
  max-width: 428px !important;
  margin: 8px auto 40px;
  padding: 20px !important;
  border: 1px solid var(--zn-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  gap: 0 !important;
  box-shadow: 0 1px 2px rgba(43, 43, 41, .04);
}

.woocommerce-account .woocommerce form.woocommerce-ResetPassword > p:first-of-type {
  font-size: 12.5px !important;
  line-height: 1.45;
  color: #6e6e68 !important;
  margin: 0 0 14px;
}

.woocommerce-account .woocommerce form.woocommerce-ResetPassword .clear {
  display: none;
}