/* ==========================================================================
   NeuroExpert x FluentCart — Design System v12.1 (responsywność sklepu)
   noomedica.pl

   ZASTEPUJE:
     - Custom CSS widgetu Elementora (fluent_cart_shop_app / 5ee5c08)
     - poprzednie wersje tego pliku
   Po wgraniu WYCZYSC Custom CSS w widgecie, inaczej wroci konflikt.

   Dlaczego !important w module sklepu:
   FluentCart uzywa selektorow o specyficznosci do 0,5,1, np.
     .fct-products-wrapper .fct-products-wrapper-inner.mode-list
     .fct-products-container .fct-product-card button
   Nie da sie ich pokonac rozsadnie krotkim selektorem. Sekcje 4-13 sa
   wiec scope'owane do .fct-products-wrapper + !important. Poza modulem
   sklepu (produkt, koszyk, konto) !important nie wystepuje.

   Spis:
     1. Tokeny marki
     2. Mapowanie na zmienne FluentCart
     3. Baza modulu sklepu
     4. Uklad strony sklepu
     5. Toolbar
     6. Filtry (desktop)
     7. Filtry (szuflada mobilna)
     8. Siatka produktow
     9. Karta produktu
    10. Przyciski karty
    11. Empty state
    12. Paginacja
    13. Responsywnosc sklepu
    14. Quick View (modal)
    15. Strona produktu
    16. Koszyk / Zamowienie / Konto
    17. Dostepnosc
   ========================================================================== */


/* ==========================================================================
   1. TOKENY MARKI
   ========================================================================== */

:root {
  /* Kolor */
  --ne-primary:       #1577af;
  --ne-primary-dk:    #11618e;
  --ne-primary-soft:  #eaf4fa;
  --ne-primary-brd:   rgba(21, 119, 175, .24);
  --ne-head:          #0f172a;
  --ne-body:          #475569;
  --ne-muted:         #64748b;
  --ne-faint:         #94a3b8;
  --ne-surface:       #ffffff;
  --ne-canvas:        #f8fafc;
  --ne-canvas-2:      #f1f5f9;
  --ne-border:        #e2e8f0;
  --ne-border-soft:   #edf2f7;
  --ne-danger:        #b91c1c;
  --ne-danger-bg:     #fef2f2;

  /* Ksztalt */
  --ne-r-sm:   10px;
  --ne-r-md:   14px;
  --ne-r-lg:   20px;
  --ne-r-pill: 999px;

  /* Cien */
  --ne-shadow-soft:       0 8px 24px rgba(15, 23, 42, .06);
  --ne-shadow-card:       0 14px 36px rgba(15, 23, 42, .08);
  --ne-shadow-card-hover: 0 18px 42px rgba(15, 23, 42, .13);
  --ne-shadow-blue:       0 14px 28px rgba(21, 119, 175, .22);

  /* Typografia */
  --ne-font-body: 'Para', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ne-font-head: 'Title', Merriweather, Georgia, serif;

  /* Layout */
  --ne-sticky-offset: 96px;
  --ne-shell:         1400px;
  /* Wspolny margines boczny — uzywany przez .fct-single-product-page
     i przez opis pod produktem, zeby oba trafialy w te sama pionowa linie */
  --ne-gutter:        clamp(18px, 4vw, 48px);
}

body.admin-bar { --ne-sticky-offset: 128px; }

@media (max-width: 782px) {
  body.admin-bar { --ne-sticky-offset: 142px; }
}


/* ==========================================================================
   2. MAPOWANIE NA ZMIENNE FLUENTCART
   Plugin kaskaduje 47 zmiennych z tych kilku tokenow.
   ========================================================================== */

:root {
  --fct-primary-text-color:   var(--ne-head);
  --fct-secondary-text-color: var(--ne-body);
  --fct-primary-bg-color:     var(--ne-primary);
  --fct-secondary-bg-color:   var(--ne-primary-soft);
  --fct-border-color:         var(--ne-border);
  --fct-divider-color:        var(--ne-border-soft);
  --fct-active-border-color:  var(--ne-primary);

  --fct-btn-bg-color:      var(--ne-primary);
  --fct-btn-text-color:    #ffffff;
  --fct-btn-border-color:  var(--ne-primary);
  --fct-card-btn-bg-color: var(--ne-primary);

  --fct-shop-view-switcher-active-bg:      var(--ne-surface);
  --fct-shop-paginator-items-hover-bg:     var(--ne-primary-soft);
  --fct-shop-paginator-bg:                 var(--ne-surface);
  --fct-shop-paginator-items-color:        var(--ne-body);
  --fct-shop-checkmark-check-border-color: #ffffff;
  --fct-single-product-qty-bg:             var(--ne-canvas);
  --fct-single-product-qty-text-color:     var(--ne-head);
}


/* ==========================================================================
   3. BAZA MODULU SKLEPU
   ========================================================================== */

.fluent-cart-elementor-shop-app,
.wp-block-fluent-cart-products {
  width: min(100% - clamp(24px, 4vw, 48px), var(--ne-shell)) !important;
  margin-inline: auto !important;
  color: var(--ne-body);
  font-family: var(--ne-font-body);
}

.fct-products-wrapper *,
.fct-products-wrapper *::before,
.fct-products-wrapper *::after,
.fct-shop-responsive-filter-wrapper *,
.fct-shop-responsive-filter-wrapper *::before,
.fct-shop-responsive-filter-wrapper *::after {
  box-sizing: border-box;
}

.fct-products-wrapper a {
  color: inherit;
  text-decoration: none;
}

.fct-products-wrapper button,
.fct-products-wrapper input,
.fct-products-wrapper select,
.fct-shop-responsive-filter-wrapper button,
.fct-shop-responsive-filter-wrapper input,
.fct-shop-responsive-filter-wrapper select {
  font-family: var(--ne-font-body);
}

/* Plugin wymusza text-transform: capitalize na przyciskach kart */
.fct-products-wrapper button,
.fct-products-wrapper .fct-product-view-button {
  text-transform: none !important;
}


/* ==========================================================================
   4. UKLAD STRONY SKLEPU
   ========================================================================== */

.fct-products-wrapper {
  display: grid !important;
  grid-template-columns: clamp(260px, 22vw, 300px) minmax(0, 1fr) !important;
  grid-template-areas:
    "toolbar   toolbar"
    "filters   products"
    "paginator paginator" !important;
  align-items: start !important;
  gap: 32px 34px !important;
  width: 100% !important;
  padding-block: 34px 70px !important;
}

.fct-products-wrapper .fct-shop-toolbar    { grid-area: toolbar !important; }
.fct-products-wrapper .fct-shop-paginator  { grid-area: paginator !important; }

/* display:contents rozpuszcza wrapper, zeby filtr i siatka trafily w grid */
.fct-products-wrapper .fct-products-wrapper-inner { display: contents !important; }

.fct-products-wrapper .fct-products-wrapper-inner > .fct-shop-filter-wrapper {
  grid-area: filters !important;
  min-width: 0 !important;
}

.fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container {
  grid-area: products !important;
  min-width: 0 !important;
}


/* ==========================================================================
   5. TOOLBAR
   ========================================================================== */

.fct-products-wrapper .fct-shop-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: var(--ne-shadow-soft) !important;
}

/* Przelacznik widoku — pigulka */
.fct-products-wrapper .fct-shop-view-switcher-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.fct-products-wrapper .fct-shop-view-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-canvas) !important;
}

.fct-products-wrapper .fct-shop-view-switcher button {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--ne-r-pill) !important;
  background: transparent !important;
  color: var(--ne-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color .18s, background-color .18s, box-shadow .18s;
}

.fct-products-wrapper .fct-shop-view-switcher button:hover {
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-shop-view-switcher button.active,
.fct-products-wrapper .fct-shop-view-switcher button[aria-pressed="true"] {
  background: var(--ne-surface) !important;
  color: var(--ne-primary) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08) !important;
}

/* Przycisk "Filtry" (mobile) */
.fct-products-wrapper .fct-shop-filter-toggle-button:not(.hide) {
  display: inline-flex !important;
}

.fct-products-wrapper .fct-shop-filter-toggle-button {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-head) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.fct-products-wrapper .fct-shop-filter-toggle-button:hover {
  border-color: var(--ne-primary-brd) !important;
  color: var(--ne-primary) !important;
}

/* Sortowanie */
.fct-products-wrapper .fct-shop-sort-by-wrap {
  position: relative !important;
  margin-left: auto !important;
}

.fct-products-wrapper .fct-shop-sorting-container { position: relative !important; }

.fct-products-wrapper .fct-sorting-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-head) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: border-color .18s, color .18s, box-shadow .18s;
}

.fct-products-wrapper .fct-sorting-toggle span {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.fct-products-wrapper .fct-sorting-toggle:hover,
.fct-products-wrapper .fct-sorting-toggle[aria-expanded="true"] {
  border-color: var(--ne-primary-brd) !important;
  color: var(--ne-primary) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

.fct-products-wrapper .fct-sorting-arrow {
  flex: 0 0 auto !important;
  transition: transform .18s !important;
}

.fct-products-wrapper .fct-sorting-toggle[aria-expanded="true"] .fct-sorting-arrow {
  transform: rotate(180deg) !important;
}

.fct-products-wrapper .fct-shop-sorting-dropdown {
  position: absolute !important;
  z-index: 20 !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 280px !important;
  padding: 10px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-md) !important;
  background: var(--ne-surface) !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .16) !important;
}

.fct-products-wrapper .fct-shop-sorting {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.fct-products-wrapper .fct-shop-sorting-item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: var(--ne-r-sm) !important;
  color: var(--ne-body) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: color .16s, background-color .16s;
}

.fct-products-wrapper .fct-shop-sorting-item label:hover {
  background: var(--ne-canvas) !important;
  color: var(--ne-head) !important;
}

.fct-products-wrapper .fct-shop-sorting-item input[type="radio"] {
  accent-color: var(--ne-primary);
}


/* ==========================================================================
   6. FILTRY (desktop)
   ========================================================================== */

.fct-products-wrapper .fct-shop-filter-wrapper.fluent-cart-shop-app-filter-wrapper {
  position: sticky !important;
  top: var(--ne-sticky-offset) !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: var(--ne-shadow-soft) !important;
  overflow: hidden !important;
}

.fct-products-wrapper .fluent-cart-shop-app-filter-wrapper-inner {
  width: 100% !important;
  min-width: 0 !important;
  padding: 20px !important;
}

.fct-products-wrapper .fct-shop-filter-form,
.fct-shop-responsive-filter-wrapper .fct-shop-filter-form {
  display: grid !important;
  gap: 22px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.fct-products-wrapper .fct-shop-filter-item,
.fct-shop-responsive-filter-wrapper .fct-shop-filter-item {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.fct-products-wrapper .fct-shop-filter-item:not(:last-child),
.fct-shop-responsive-filter-wrapper .fct-shop-filter-item:not(:last-child) {
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--ne-border-soft) !important;
}

/* Naglowek sekcji filtra — bez wersalikow */
.fct-products-wrapper .fct-shop-item-collapse-wrap,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.fct-products-wrapper .fct-shop-item-collapse-wrap .item-heading,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap .item-heading {
  margin: 0 !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.fct-products-wrapper .fct-shop-item-collapse-wrap .toggle-icon,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap .toggle-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--ne-r-pill) !important;
  background: transparent !important;
  color: var(--ne-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.fct-products-wrapper .fct-shop-item-collapse-wrap:hover .toggle-icon,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap:hover .toggle-icon {
  border-color: var(--ne-border) !important;
  background: var(--ne-canvas) !important;
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-shop-item-collapse-wrap .toggle-icon svg,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap .toggle-icon svg {
  width: 12px !important;
  height: 7px !important;
}

.fct-products-wrapper .fct-shop-item-collapse-wrap .toggle-icon svg path,
.fct-shop-responsive-filter-wrapper .fct-shop-item-collapse-wrap .toggle-icon svg path {
  stroke: currentColor !important;
}

/* Checkboxy — bez wersalikow */
.fct-products-wrapper .fct-shop-checkbox-group,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox-group {
  width: 100% !important;
  margin: 0 !important;
}

.fct-products-wrapper .fct-shop-checkbox-group-inner,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox-group-inner {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fct-products-wrapper .fct-shop-checkbox,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--ne-body) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}

.fct-products-wrapper .fct-shop-checkbox:hover,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox:hover {
  border-color: var(--ne-border) !important;
  background: var(--ne-canvas) !important;
  color: var(--ne-head) !important;
}

.fct-products-wrapper .fct-shop-checkbox:has(input[type="checkbox"]:checked),
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox:has(input[type="checkbox"]:checked) {
  border-color: rgba(21, 119, 175, .22) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary-dk) !important;
}

.fct-products-wrapper .fct-shop-checkbox input[type="checkbox"],
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fct-products-wrapper .fct-shop-checkbox .checkmark,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox .checkmark {
  position: relative !important;
  grid-column: 1 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  border: 1.5px solid var(--ne-border) !important;
  border-radius: 5px !important;
  background: var(--ne-surface) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
}

.fct-products-wrapper .fct-shop-checkbox .checkmark::before,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox .checkmark::before {
  display: none !important;
  content: none !important;
}

.fct-products-wrapper .fct-shop-checkbox .checkmark::after,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox .checkmark::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: 0 solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
  transition: opacity .14s !important;
}

.fct-products-wrapper .fct-shop-checkbox input[type="checkbox"]:checked + .checkmark,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox input[type="checkbox"]:checked + .checkmark {
  border-color: var(--ne-primary) !important;
  background: var(--ne-primary) !important;
  box-shadow: 0 4px 12px rgba(21, 119, 175, .24) !important;
}

.fct-products-wrapper .fct-shop-checkbox input[type="checkbox"]:checked + .checkmark::after,
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox input[type="checkbox"]:checked + .checkmark::after {
  opacity: 1 !important;
}

.fct-products-wrapper .fct-shop-checkbox > span:not(.checkmark),
.fct-shop-responsive-filter-wrapper .fct-shop-checkbox > span:not(.checkmark) {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  color: inherit !important;
  line-height: 1.25 !important;
}

/* Zakres ceny */
.fct-products-wrapper .fct-shop-price-range-container,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range-container {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.fct-products-wrapper .fct-shop-price-range-wrap,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.fct-products-wrapper .fct-shop-price-range,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px 0 14px !important;
  border: 1px solid var(--ne-border-soft) !important;
  border-radius: 12px !important;
  background: var(--ne-canvas) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.fct-products-wrapper .fct-shop-price-range:focus-within,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range:focus-within {
  border-color: rgba(21, 119, 175, .36) !important;
  background: var(--ne-surface) !important;
  box-shadow: 0 0 0 3px rgba(21, 119, 175, .11) !important;
}

.fct-products-wrapper .fct-shop-price-range input,
.fct-products-wrapper .fct-shop-price-range .fc_price_range_input,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range input,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range .fc_price_range_input {
  order: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ne-head) !important;
  -webkit-text-fill-color: var(--ne-head) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: var(--ne-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 46px !important;
  text-align: left !important;
}

.fct-products-wrapper .fct-shop-price-range .fct-shop-currency-sign,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range .fct-shop-currency-sign {
  order: 2 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 18px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ne-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

.fct-products-wrapper .fct-shop-price-range input::-webkit-outer-spin-button,
.fct-products-wrapper .fct-shop-price-range input::-webkit-inner-spin-button,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range input::-webkit-outer-spin-button,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Suwak noUiSlider */
.fct-products-wrapper .fct-shop-price-range-container .fct-shop-range-slider,
.fct-products-wrapper .fct-shop-price-range-container .noUi-target,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range-container .fct-shop-range-slider,
.fct-shop-responsive-filter-wrapper .fct-shop-price-range-container .noUi-target {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  height: 6px !important;
  min-width: 0 !important;
  margin: 8px 10px 0 !important;
  border: 0 !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-canvas-2) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05) !important;
}

.fct-products-wrapper .noUi-connect,
.fct-shop-responsive-filter-wrapper .noUi-connect {
  background: var(--ne-primary) !important;
}

.fct-products-wrapper .noUi-horizontal .noUi-handle,
.fct-shop-responsive-filter-wrapper .noUi-horizontal .noUi-handle {
  top: -8px !important;
  right: -10px !important;
  width: 20px !important;
  height: 20px !important;
  border: 3px solid var(--ne-surface) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-primary) !important;
  box-shadow: 0 5px 14px rgba(21, 119, 175, .34) !important;
  cursor: grab !important;
}

.fct-products-wrapper .noUi-horizontal .noUi-handle:active,
.fct-shop-responsive-filter-wrapper .noUi-horizontal .noUi-handle:active {
  cursor: grabbing !important;
}

.fct-products-wrapper .noUi-handle::before,
.fct-products-wrapper .noUi-handle::after,
.fct-shop-responsive-filter-wrapper .noUi-handle::before,
.fct-shop-responsive-filter-wrapper .noUi-handle::after {
  display: none !important;
}

/* Przyciski filtra */
.fct-products-wrapper .fct-shop-button-group,
.fct-shop-responsive-filter-wrapper .fct-shop-button-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.fct-products-wrapper .fct-shop-apply-filter-button,
.fct-shop-responsive-filter-wrapper .fct-shop-apply-filter-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--ne-primary) !important;
  border-radius: 12px !important;
  background: var(--ne-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(21, 119, 175, .22) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}

.fct-products-wrapper .fct-shop-apply-filter-button:hover,
.fct-shop-responsive-filter-wrapper .fct-shop-apply-filter-button:hover {
  border-color: var(--ne-primary-dk) !important;
  background: var(--ne-primary-dk) !important;
  color: #ffffff !important;
  box-shadow: var(--ne-shadow-blue) !important;
}

.fct-products-wrapper .fct-shop-reset-filter-button,
.fct-shop-responsive-filter-wrapper .fct-shop-reset-filter-button {
  appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: 12px !important;
  background: var(--ne-canvas) !important;
  color: var(--ne-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .18s, border-color .18s, color .18s;
}

.fct-products-wrapper .fct-shop-reset-filter-button:hover,
.fct-shop-responsive-filter-wrapper .fct-shop-reset-filter-button:hover {
  border-color: rgba(185, 28, 28, .22) !important;
  background: var(--ne-danger-bg) !important;
  color: var(--ne-danger) !important;
}

.fct-products-wrapper .fct-shop-reset-filter-button svg,
.fct-shop-responsive-filter-wrapper .fct-shop-reset-filter-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}


/* ==========================================================================
   7. FILTRY — SZUFLADA MOBILNA
   ========================================================================== */

.fct-shop-responsive-filter-wrapper {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, .58) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.fct-shop-responsive-filter-wrapper.show {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Zatrzymuje przewijanie strony pod otwartą szufladą. */
body:has(.fct-shop-responsive-filter-wrapper.show) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/*
 * Szuflada ma zawsze pełną wysokość viewportu. Nagłówek pozostaje osobnym
 * wierszem, a jedynym przewijanym obszarem jest formularz filtrów. Dzięki
 * temu pasek adresu telefonu, sticky header i pasek administratora WP nie
 * skracają panelu ani nie blokują dostępu do przycisku „Zastosuj filtr”.
 */
.fct-shop-responsive-filter-container {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(420px, 100%) !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: var(--ne-surface) !important;
  box-shadow: -18px 0 45px rgba(15, 23, 42, .18) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.fct-shop-responsive-filter-header {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: calc(72px + env(safe-area-inset-top, 0px)) !important;
  padding:
    calc(18px + env(safe-area-inset-top, 0px))
    24px
    18px !important;
  border-bottom: 1px solid var(--ne-border) !important;
  background: var(--ne-surface) !important;
}

.fct-shop-responsive-filter-header h3 {
  margin: 0 !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.fct-shop-responsive-filter-close-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-canvas) !important;
  color: var(--ne-head) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.fct-shop-responsive-filter-close-button:hover {
  border-color: var(--ne-primary-brd) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

.fct-shop-responsive-filter-container .fct-shop-filter-form {
  align-content: start !important;
  gap: 24px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 28px 24px 36px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

/*
 * FluentCart ogranicza wysokość listy kategorii i tworzy drugi, zagnieżdżony
 * scrollbar. Na ekranie dotykowym przechwytuje on gest i sprawia wrażenie,
 * że cała szuflada zatrzymała się w połowie. W szufladzie mobilnej lista
 * rozwija się naturalnie, a przewijany pozostaje wyłącznie formularz.
 */
.fct-shop-responsive-filter-container .fct-shop-checkbox-group-inner,
.fct-shop-responsive-filter-container .fct-shop-checkbox-child-group,
.fct-shop-responsive-filter-container .fct-shop-checkbox-child-group-inner,
.fct-shop-responsive-filter-container .fct-shop-checkbox-child-options {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

.fct-shop-responsive-filter-container .fct-shop-filter-item { gap: 18px !important; }
.fct-shop-responsive-filter-container .fct-shop-price-range-container { gap: 20px !important; }

.fct-shop-responsive-filter-container .fct-shop-range-slider,
.fct-shop-responsive-filter-container .noUi-target {
  margin-top: 12px !important;
}


/* ==========================================================================
   8. SIATKA PRODUKTOW
   ========================================================================== */

.fct-products-wrapper .fct-products-container { min-width: 0 !important; }

.fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
.fct-products-wrapper .fct-products-container.grid-columns-2,
.fct-products-wrapper .fct-products-container.grid-columns-3,
.fct-products-wrapper .fct-products-container.grid-columns-4,
.fct-products-wrapper .fct-products-container.grid-columns-5 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  margin: 0 0 45px !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-products-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  margin: 0 0 45px !important;
}


/* ==========================================================================
   9. KARTA PRODUKTU
   ========================================================================== */

.fct-products-wrapper .fct-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: var(--ne-shadow-card) !important;
  overflow: hidden !important;
  transition: border-color .22s, box-shadow .22s !important;
}

.fct-products-wrapper .fct-product-card:hover {
  border-color: var(--ne-primary-brd) !important;
  box-shadow: var(--ne-shadow-card-hover) !important;
}

/* Obraz */
.fct-products-wrapper .fct-product-card .fct-product-card-image-wrap {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #f8fafc 0%, #eef4f8 100%) !important;
  overflow: hidden !important;
}

.fct-products-wrapper .fct-product-card .fct-product-card-image,
.fct-products-wrapper .fct-product-card .fct-dynamic-product-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform .35s, opacity .2s !important;
}

.fct-products-wrapper .fct-product-card:hover .fct-product-card-image,
.fct-products-wrapper .fct-product-card:hover .fct-dynamic-product-image {
  transform: scale(1.045) !important;
  opacity: 1 !important;
}

/* Placeholder — contain zamiast cover */
.fct-products-wrapper .fct-product-card .fct-product-card-image[src*="placeholder"],
.fct-products-wrapper .fct-product-card .fct-dynamic-product-image[src*="placeholder"] {
  padding: 48px !important;
  object-fit: contain !important;
  background: var(--ne-canvas) !important;
}

/* Tytul */
.fct-products-wrapper .fct-product-card-title {
  margin: 0 !important;
  padding: 24px 24px 10px !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.36 !important;
  letter-spacing: -.01em !important;
}

.fct-products-wrapper .fct-product-card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.fct-products-wrapper .fct-product-card-title a:hover {
  color: var(--ne-primary) !important;
  text-decoration: none !important;
}

/* Cena */
.fct-products-wrapper .fct-product-card-prices {
  margin: 0 !important;
  padding: 0 24px 24px !important;
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-item-price {
  color: var(--ne-primary) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums;
}

/* Zajawka — ukryta w siatce, widoczna w liscie */
.fct-products-wrapper .fct-product-card-excerpt {
  margin: 0 !important;
  padding: 0 24px 20px !important;
  color: var(--ne-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-product-card-excerpt {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Tryb listy
   -------------------------------------------------------------------------- */

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card {
  display: grid !important;
  grid-template-columns: clamp(220px, 24%, 280px) minmax(0, 1fr) !important;
  grid-template-areas:
    "image title"
    "image excerpt"
    "image price"
    "image button" !important;
  align-items: stretch !important;
  column-gap: 24px !important;
  min-height: 260px !important;
  padding: 0 !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image-wrap {
  grid-area: image !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  aspect-ratio: auto !important;
  align-self: stretch !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image,
.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-dynamic-product-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-title {
  grid-area: title !important;
  align-self: end !important;
  padding: 28px 28px 8px 0 !important;
  font-size: 20px !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-excerpt {
  grid-area: excerpt !important;
  display: block !important;
  max-width: 760px !important;
  padding: 0 28px 16px 0 !important;
}

.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-prices {
  grid-area: price !important;
  align-self: start !important;
  padding: 0 28px 18px 0 !important;
}


/* ==========================================================================
   10. PRZYCISKI KARTY

   FIX: "Dodaj do koszyka" (.fluent-cart-add-to-cart-button) i
   "Opcje widoku" (.fct-product-view-button) w JEDNEJ regule.
   Poprzedni CSS stylizowal tylko pierwszy — stad rozjazd na produktach
   z wariantami.
   ========================================================================== */

.fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button,
.fct-products-wrapper .fct-product-card .fct-product-view-button,
.fct-products-wrapper .fct-product-card .fct-single-product-card-view-button,
.fct-products-wrapper .fct-product-card .fct-dynamic-product-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: calc(100% - 48px) !important;
  min-height: 50px !important;
  margin: auto 24px 24px !important;
  padding: 14px 20px !important;
  border: 0 !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-family: var(--ne-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color .18s, box-shadow .18s !important;
}

.fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button:hover,
.fct-products-wrapper .fct-product-card .fct-product-view-button:hover,
.fct-products-wrapper .fct-product-card .fct-single-product-card-view-button:hover,
.fct-products-wrapper .fct-product-card .fct-dynamic-product-button:hover {
  background: var(--ne-primary-dk) !important;
  color: #ffffff !important;
  box-shadow: var(--ne-shadow-blue) !important;
}

.fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button:disabled,
.fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button[disabled],
.fct-products-wrapper .fct-product-card .fct-product-view-button:disabled {
  cursor: not-allowed !important;
  opacity: .7 !important;
  box-shadow: none !important;
}

/* Wyprzedany */
.fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button.out-of-stock,
.fct-products-wrapper .fct-product-card .fct-product-view-button.out-of-stock {
  background: var(--ne-canvas) !important;
  border: 1px solid var(--ne-border) !important;
  color: var(--ne-faint) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Tekst i loader wewnatrz przyciskow */
.fct-products-wrapper .fluent-cart-add-to-cart-button .fct-button-text,
.fct-products-wrapper .fct-product-view-button .fct-button-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fct-products-wrapper .fluent-cart-add-to-cart-button .fluent-cart-loader,
.fct-products-wrapper .fct-product-view-button .fluent-cart-loader {
  display: none !important;
}

.fct-products-wrapper .fluent-cart-add-to-cart-button .fluent-cart-loader svg,
.fct-products-wrapper .fct-product-view-button .fluent-cart-loader svg {
  width: 16px !important;
  height: 16px !important;
}

/* Tryb listy — przycisk normalnej szerokosci, wyrownany do lewej */
.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fluent-cart-add-to-cart-button,
.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-view-button,
.fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-single-product-card-view-button {
  grid-area: button !important;
  place-self: start !important;
  width: auto !important;
  min-width: 170px !important;
  max-width: max-content !important;
  margin: 0 0 28px !important;
  padding: 14px 24px !important;
}


/* ==========================================================================
   11. EMPTY STATE
   ========================================================================== */

.fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)):has(*),
.fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container:not(:has(.fct-product-card)) ~ :not(.fct-shop-paginator):not(script):not(style),
.fct-products-wrapper > :not(.fct-shop-toolbar):not(.fct-shop-view-switcher-wrap):not(.fct-products-wrapper-inner):not(.fct-shop-paginator):not(script):not(style) {
  grid-area: products !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  width: 100% !important;
  min-height: 320px !important;
  margin: 0 !important;
  padding: 56px 32px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: var(--ne-shadow-soft) !important;
  text-align: center !important;
}

.fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)):empty {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)) > *,
.fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container:not(:has(.fct-product-card)) ~ :not(.fct-shop-paginator):not(script):not(style) > *,
.fct-products-wrapper > :not(.fct-shop-toolbar):not(.fct-shop-view-switcher-wrap):not(.fct-products-wrapper-inner):not(.fct-shop-paginator):not(script):not(style) > * {
  width: min(100%, 560px) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)) :is(h1, h2, h3, h4),
.fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container:not(:has(.fct-product-card)) ~ :not(.fct-shop-paginator):not(script):not(style) :is(h1, h2, h3, h4),
.fct-products-wrapper > :not(.fct-shop-toolbar):not(.fct-shop-view-switcher-wrap):not(.fct-products-wrapper-inner):not(.fct-shop-paginator):not(script):not(style) :is(h1, h2, h3, h4) {
  margin: 0 0 12px !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: clamp(25px, 2.3vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}

.fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)) p,
.fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container:not(:has(.fct-product-card)) ~ :not(.fct-shop-paginator):not(script):not(style) p,
.fct-products-wrapper > :not(.fct-shop-toolbar):not(.fct-shop-view-switcher-wrap):not(.fct-products-wrapper-inner):not(.fct-shop-paginator):not(script):not(style) p {
  margin: 0 !important;
  color: var(--ne-muted) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}


/* ==========================================================================
   12. PAGINACJA

   FIX: poprzedni CSS mial 0 regul dla .fct-shop-paginator-pager,
   przez co numery stron zostawaly na domyslnych 22px pluginu.
   ========================================================================== */

.fct-products-wrapper .fct-shop-paginator {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 25px 0 0 !important;
}

/* Blok "Wyswietlanie 1-10 z 18 pozycji" + liczba na strone */
.fct-products-wrapper .fct-shop-paginator-result-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-md) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-muted) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.fct-products-wrapper .fct-shop-paginator-results span,
.fct-products-wrapper .fct-shop-paginator-results b {
  color: var(--ne-head) !important;
  font-weight: 800 !important;
}

/* Select "10 na strone" — w Elementorze ta regula byla rozerwana */
.fct-products-wrapper .fct-shop-per-page-selector select,
.fct-products-wrapper .fct-shop-paginator select {
  min-height: 38px !important;
  padding: 0 34px 0 14px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-canvas) !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  outline: 0 !important;
  transition: border-color .18s, background-color .18s, color .18s;
}

.fct-products-wrapper .fct-shop-per-page-selector select:hover,
.fct-products-wrapper .fct-shop-paginator select:hover {
  border-color: var(--ne-primary-brd) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-shop-per-page-selector select:focus,
.fct-products-wrapper .fct-shop-paginator select:focus {
  border-color: var(--ne-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 119, 175, .11) !important;
}

/* Numery stron */
.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 5px !important;
  list-style: none !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-md) !important;
  background: var(--ne-surface) !important;
  box-shadow: none !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 38px !important;
  height: 38px !important;
  max-height: none !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: var(--ne-r-pill) !important;
  background: transparent !important;
  color: var(--ne-body) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer !important;
  transition: background-color .18s, color .18s, box-shadow .18s !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button:hover {
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button.active,
.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager li.active button {
  background: var(--ne-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(21, 119, 175, .28) !important;
}

/* Strzalki */
.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button.arrow {
  min-width: 38px !important;
  padding: 0 !important;
  color: var(--ne-muted) !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button.arrow:hover {
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button.arrow svg {
  width: 16px !important;
  height: 16px !important;
}

.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button:disabled,
.fct-products-wrapper .fct-shop-paginator .fct-shop-paginator-pager button[disabled] {
  opacity: .35 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  color: var(--ne-muted) !important;
}

/* Badge koszyka */
/* Wyglad i pozycje plywajacego przycisku koszyka definiuje sekcja 16.
   Wczesniej stalo tu `bottom: 6rem`, czyli dokladnie tam, gdzie siedzi
   przycisk "Postaw kawe" — oba kafelki nachodzily na siebie. */


/* ==========================================================================
   13. RESPONSYWNOSC SKLEPU
   ========================================================================== */

@media (min-width: 768px) and (max-width: 980px) {
  .fct-products-wrapper {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    gap: 28px 24px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
  .fct-products-wrapper .fct-products-container.grid-columns-2,
  .fct-products-wrapper .fct-products-container.grid-columns-3,
  .fct-products-wrapper .fct-products-container.grid-columns-4,
  .fct-products-wrapper .fct-products-container.grid-columns-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 22px !important;
    min-height: 240px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image-wrap,
  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image,
  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-dynamic-product-image {
    min-height: 240px !important;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .fct-products-wrapper {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 24px 20px !important;
  }

  .fct-products-wrapper .fct-shop-price-range-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .fct-products-wrapper .fct-shop-price-range { width: 100% !important; }
}

@media (max-width: 767px) {
  .fluent-cart-elementor-shop-app,
  .wp-block-fluent-cart-products {
    width: min(100% - 24px, var(--ne-shell)) !important;
    padding-block: 16px 48px !important;
  }

  .fct-products-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    padding-block: 22px 48px !important;
  }

  .fct-products-wrapper .fct-shop-toolbar {
    flex-wrap: wrap !important;
    min-height: auto !important;
    padding: 14px !important;
    border-radius: var(--ne-r-md) !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher-wrap { order: 1 !important; }

  .fct-products-wrapper .fct-shop-sort-by-wrap {
    order: 2 !important;
    margin-left: auto !important;
  }

  .fct-products-wrapper .fct-shop-filter-toggle-button { display: inline-flex !important; }

  .fct-products-wrapper .fct-sorting-toggle {
    min-height: 44px !important;
    padding: 0 18px !important;
  }

  .fct-products-wrapper .fct-shop-sorting-dropdown {
    right: 0 !important;
    min-width: min(280px, 100vw - 32px) !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner { display: block !important; }

  .fct-products-wrapper .fct-products-wrapper-inner > .fct-shop-filter-wrapper {
    display: none !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
  .fct-products-wrapper .fct-products-container.grid-columns-2,
  .fct-products-wrapper .fct-products-container.grid-columns-3,
  .fct-products-wrapper .fct-products-container.grid-columns-4,
  .fct-products-wrapper .fct-products-container.grid-columns-5 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .fct-products-wrapper .fct-product-card { border-radius: var(--ne-r-md) !important; }

  .fct-products-wrapper .fct-product-card-title {
    padding: 18px 18px 8px !important;
    font-size: 15px !important;
  }

  .fct-products-wrapper .fct-product-card-prices { padding: 0 18px 18px !important; }
  .fct-products-wrapper .fct-item-price { font-size: 17px !important; }

  .fct-products-wrapper .fct-product-card .fluent-cart-add-to-cart-button,
  .fct-products-wrapper .fct-product-card .fct-product-view-button,
  .fct-products-wrapper .fct-product-card .fct-single-product-card-view-button {
    width: calc(100% - 36px) !important;
    min-height: 44px !important;
    margin: auto 18px 18px !important;
    padding: 12px 14px !important;
    font-size: 12.5px !important;
  }

  .fct-products-wrapper .fct-product-card .fct-product-card-image[src*="placeholder"],
  .fct-products-wrapper .fct-product-card .fct-dynamic-product-image[src*="placeholder"] {
    padding: 36px !important;
  }

  /* Lista na mobile — kolumna */
  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image,
  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-dynamic-product-image {
    height: 100% !important;
    min-height: 0 !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-title {
    padding: 18px 18px 8px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-excerpt {
    padding: 0 18px 16px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card-prices {
    padding: 0 18px 18px !important;
  }

  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fluent-cart-add-to-cart-button,
  .fct-products-wrapper .fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-view-button {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin: auto 18px 18px !important;
  }

  .fct-products-wrapper .fct-products-container:not(:has(.fct-product-card)):has(*) {
    min-height: 240px !important;
    padding: 38px 22px !important;
  }

  .fct-products-wrapper .fct-shop-paginator {
    justify-content: center !important;
  }

  .fct-products-wrapper .fct-shop-paginator-result-wrapper {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .fct-shop-responsive-filter-container .fct-shop-filter-form {
    padding: 24px 20px 28px !important;
  }

  /* Pola ceny pozostają obok siebie również w szufladzie mobilnej. */
  .fct-shop-responsive-filter-container .fct-shop-price-range-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .fct-shop-responsive-filter-container .fct-shop-price-range {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 12px 9px !important;
  }

  .fct-shop-responsive-filter-container .fct-shop-button-group {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    margin: 4px -20px -28px !important;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--ne-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* Na telefonie przycisk ma płaski wygląd bez ciężkiego cienia. */
  .fct-shop-responsive-filter-container .fct-shop-apply-filter-button,
  .fct-shop-responsive-filter-container .fct-shop-apply-filter-button:hover,
  .fct-shop-responsive-filter-container .fct-shop-apply-filter-button:focus,
  .fct-shop-responsive-filter-container .fct-shop-apply-filter-button:focus-visible {
    box-shadow: none !important;
  }
}

@media (max-width: 480px) {
  .fct-shop-responsive-filter-container { width: 100% !important; }
}

/*
 * Wąski mobile: wszystkie trzy grupy narzędzi pozostają w jednym rzędzie.
 * Kontener dostaje więcej szerokości, a przyciski kompaktowe wymiary.
 */
@media (max-width: 390px) {
  .fluent-cart-elementor-shop-app,
  .wp-block-fluent-cart-products {
    width: calc(100% - 12px) !important;
    max-width: 100% !important;
  }

  .fct-products-wrapper .fct-shop-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher-wrap {
    order: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher {
    flex: 0 0 auto !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher button svg {
    width: 15px !important;
    height: 15px !important;
  }

  .fct-products-wrapper .fct-shop-filter-toggle-button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  .fct-products-wrapper .fct-shop-filter-toggle-button svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
  }

  .fct-products-wrapper .fct-shop-sort-by-wrap {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .fct-products-wrapper .fct-shop-sorting-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  .fct-products-wrapper .fct-sorting-toggle {
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 12.5px !important;
  }

  .fct-products-wrapper .fct-sorting-toggle span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .fct-products-wrapper .fct-sorting-arrow {
    width: 14px !important;
    height: 14px !important;
  }

  .fct-products-wrapper .fct-shop-sorting-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 340px) {
  .fct-products-wrapper .fct-shop-toolbar {
    gap: 4px !important;
    padding: 6px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher-wrap {
    gap: 4px !important;
  }

  .fct-products-wrapper .fct-shop-view-switcher button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .fct-products-wrapper .fct-shop-filter-toggle-button,
  .fct-products-wrapper .fct-sorting-toggle {
    min-height: 36px !important;
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================================
   14. QUICK VIEW — modal "Opcje widoku"
   Poprzedni CSS nie mial go wcale.
   ========================================================================== */

/* FIX nachodzenia galerii na opis.
   Modal i strona produktu leza poza .fct-products-wrapper, wiec nie lapal
   ich reset z sekcji 3. Bez border-box .fct-product-gallery-thumb liczyl
   padding i ramke PONAD 100% szerokosci komorki grida (462px komorka ->
   504px element) i wchodzil 6px na kolumne tekstu. */
.fct-product-modal,
.fct-product-modal *,
.fct-product-modal *::before,
.fct-product-modal *::after,
.fluent-cart-shop-app-single-product-modal,
.fluent-cart-shop-app-single-product-modal *,
.fluent-cart-shop-app-single-product-modal *::before,
.fluent-cart-shop-app-single-product-modal *::after,
.fct-single-product-page,
.fct-single-product-page *,
.fct-single-product-page *::before,
.fct-single-product-page *::after,
.fct-cart-drawer,
.fct-cart-drawer *,
.fct-cart-drawer *::before,
.fct-cart-drawer *::after {
  box-sizing: border-box;
}

/* Galeria nigdy nie wychodzi poza swoja kolumne */
.fct-product-modal-body .fct-product-gallery-wrapper,
.fct-product-modal-body .fct-product-gallery-thumb,
.fct-single-product-page .fct-product-gallery-wrapper,
.fct-single-product-page .fct-product-gallery-thumb {
  max-width: 100%;
  min-width: 0;
}

.fct-product-modal-overlay,
.fluent-cart-shop-app-single-product-modal-overlay {
  background-color: rgba(15, 23, 42, .55) !important;
  opacity: 1 !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fct-product-modal-body,
.fluent-cart-shop-app-single-product-modal-body {
  width: min(1060px, 100%) !important;
  max-width: 1060px !important;
  max-height: 88vh !important;
  padding: 40px !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22) !important;
  overflow-y: auto !important;
}

.fct-product-modal-close,
.fluent-cart-shop-app-single-product-modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-pill) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-muted) !important;
  transition: background-color .18s, border-color .18s, color .18s;
}

.fct-product-modal-close:hover,
.fluent-cart-shop-app-single-product-modal-close:hover {
  background: var(--ne-primary-soft) !important;
  border-color: var(--ne-primary) !important;
  color: var(--ne-primary) !important;
}

.fct-product-modal-close svg path { stroke: currentColor !important; }

.fct-product-modal-body .fct-single-product-page { padding: 0 !important; }

/* Galeria rowno z gora tytulu, nie wysrodkowana pionowo.
   Kolumna obrazu wezsza — opis i CTA dostaja wiecej miejsca. */
.fct-product-modal-body .fct-single-product-page-row {
  margin-bottom: 0 !important;
  gap: 40px !important;
  align-items: start !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
}

.fct-product-modal-body .fct-product-gallery-wrapper {
  align-self: start !important;
  position: static !important;
}

.fct-product-modal-body #fct-product-summary-title {
  margin: 0 0 14px !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}

.fct-product-modal-body .fct-product-excerpt {
  margin-bottom: 22px !important;
  color: var(--ne-body) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

.fct-product-modal-body .fct-product-excerpt p { margin: 0 !important; }

/* Zakres "od - do" ukryty: cena wariantu nad CTA jest zrodlem prawdy */
.fct-product-modal-body .fct-product-prices.fct-price-range,
.fct-product-modal-body .fct-price-range[role="term"] {
  display: none !important;
}

/* Galeria — contain, zeby nie rozciagac */
.fct-product-modal-body .fct-product-gallery-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  padding: 20px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-md) !important;
  background: var(--ne-canvas) !important;
  overflow: hidden !important;
}

.fct-product-modal-body .fct-product-gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: var(--ne-r-sm) !important;
}

.fct-product-modal-body .fct-gallery-thumb-controls:empty { display: none !important; }

/* Etykieta atrybutu */
.fct-attribute-label {
  display: block;
  margin-bottom: 10px;
  color: var(--ne-muted);
  font-family: var(--ne-font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* Warianty */
.fct-swatch-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* UWAGA na specyficznosc:
   advanced-variations.css ma `.fct-attribute-selector .fct-swatch-label.selected`
   = 0,3,0 — dokladnie tyle samo co `.fct-swatch-item.fct-swatch-label.selected`.
   Przy remisie decyduje kolejnosc wczytania, a ten plugin potrafi wpiac swoj
   arkusz dwa razy (patrz sekcja 15). Dlatego prefiks + !important — stan
   zaznaczenia nie moze zalezec od kolejnosci kolejek WordPressa. */

.fct-attribute-selector .fct-swatch-item.fct-swatch-label,
.fct-swatch-options .fct-swatch-item.fct-swatch-label,
.fct-swatch-item.fct-swatch-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 22px !important;
  border: 1.5px solid var(--ne-border) !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-body) !important;
  box-shadow: none !important;
  font-family: var(--ne-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  user-select: none;
  /* transition: none — NIE zmieniac.
     Vue przerenderowuje te przyciski przy kazdej zmianie wariantu i restartuje
     przejscie, przez co animowane wlasciwosci (background-color, border-color,
     color, box-shadow) nigdy nie dochodzily do wartosci docelowej i stan
     "zaznaczony" nie byl widoczny. Zmierzone: z transition zaznaczony mial
     biale tlo, bez transition — poprawne #eaf4fa. */
  transition: none !important;
}

.fct-attribute-selector .fct-swatch-item.fct-swatch-label:hover,
.fct-swatch-options .fct-swatch-item.fct-swatch-label:hover,
.fct-swatch-item.fct-swatch-label:hover {
  border-color: var(--ne-primary) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

.fct-attribute-selector .fct-swatch-item.fct-swatch-label.selected,
.fct-attribute-selector .fct-swatch-item.fct-swatch-label[aria-checked="true"],
.fct-swatch-options .fct-swatch-item.fct-swatch-label.selected,
.fct-swatch-item.fct-swatch-label.selected,
.fct-swatch-item.fct-swatch-label[aria-checked="true"] {
  border-color: var(--ne-primary) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(21, 119, 175, .12) !important;
}

/* Cena wariantu */
.fct-product-modal-body .fct-product-item-price { margin-bottom: 22px !important; }

/* Wyglad ceny wariantu (uklad w dwoch liniach) definiuje sekcja 15 —
   wspolna regula dla strony produktu i modalu. */

/* CTA — obie etykiety musza zmiescic sie w jednej linii.
   "Dodaj do koszyka" lamalo sie przy 15px/32px paddingu w kolumnie 426px. */
.fct-product-modal-body .fct-product-buttons-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.fct-product-modal-body .fluent-cart-direct-checkout-button,
.fct-product-modal-body .fct-product-buttons-wrap a,
.fct-product-modal-body .fct-product-buttons-wrap button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(21, 119, 175, .20) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color .18s, box-shadow .18s;
}

/* Drugi przycisk jako wariant obrysowany — mniej krzykliwy duet */
.fct-product-modal-body .fct-product-buttons-wrap .fluent-cart-add-to-cart-button {
  background: transparent !important;
  color: var(--ne-primary) !important;
  border: 1.5px solid var(--ne-primary) !important;
  box-shadow: none !important;
}

.fct-product-modal-body .fct-product-buttons-wrap .fluent-cart-add-to-cart-button:hover {
  background: var(--ne-primary) !important;
  color: #ffffff !important;
}

.fct-product-modal-body .fluent-cart-direct-checkout-button:hover,
.fct-product-modal-body .fct-product-buttons-wrap a:hover,
.fct-product-modal-body .fct-product-buttons-wrap button:hover {
  background: var(--ne-primary-dk) !important;
  color: #ffffff !important;
  box-shadow: var(--ne-shadow-blue) !important;
}


/* ==========================================================================
   15. STRONA PRODUKTU  (bez !important — plugin nie konkuruje tu agresywnie)
   ========================================================================== */

/* UWAGA — dlaczego tu jest !important:
   FluentCart wpina single-product.css DWA RAZY (pozycja 7 i 29 w kolejce),
   a ten plik ladowany jest pomiedzy nimi (pozycja 15). Druga kopia pluginu
   nadpisuje wszystko, co ustawimy z rowna specyficznoscia — stad "kazda
   podstrona wygladala inaczej". !important tylko na wlasciwosciach,
   o ktore realnie konkurujemy.

   Ten element jest kontenerem @container product-page pluginu, wiec musi
   zostac >= 768px, zeby galeria i opis staly obok siebie. */
.fct-single-product-page {
  max-width: var(--ne-shell) !important;
  margin-inline: auto !important;
  padding-inline: var(--ne-gutter) !important;
  /* Oddech pod naglowkiem strony — bez tego modul kleil sie do headera */
  padding-block: clamp(36px, 5vw, 72px) 0 !important;
  font-family: var(--ne-font-body);
  color: var(--ne-body);
}

.fct-single-product-page-row {
  gap: clamp(32px, 4vw, 64px) !important;
  margin-bottom: 56px !important;
  align-items: start !important;
}

/* Galeria trzyma sie przy przewijaniu dlugiego opisu */
@media (min-width: 992px) {
  .fct-single-product-page .fct-product-gallery-wrapper {
    position: sticky;
    top: 110px;
  }
  body.admin-bar .fct-single-product-page .fct-product-gallery-wrapper {
    top: 142px;
  }
}

/* Pusty blok meta zabiera odstep */
.fct-single-product-page .fct-product-meta:empty { display: none; }

#fct-product-summary-title {
  margin: 0 0 12px;
  color: var(--ne-head);
  font-family: var(--ne-font-head);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.fct-single-product-page .fct-product-excerpt {
  margin-bottom: 24px;
  color: var(--ne-body);
  font-size: 15.5px;
  line-height: 1.75;
}

.fct-single-product-page .fct-product-prices,
.fct-single-product-page .fct-product-item-price,
.fct-single-product-page .fct-min-price,
.fct-single-product-page .fct-max-price,
.fct-single-product-page .fct-item-price {
  color: var(--ne-primary);
  font-family: var(--ne-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.fct-single-product-page .fct-product-prices {
  margin-bottom: 22px;
  font-size: 30px;
}

/* Produkt z wariantami: ukryty zakres "od - do" spod zajawki.
   Jedynym zrodlem prawdy jest cena wybranego wariantu przy "Kup teraz".
   :has(.fct-min-price) trafia WYLACZNIE w wersje zakresowa — produkty proste
   maja w tym samym kontenerze .fct-item-price i pozostaja widoczne. */
.fct-single-product-page .fct-product-prices:has(.fct-min-price),
.fct-product-modal-body .fct-product-prices:has(.fct-min-price) {
  display: none !important;
}

/* Cena wariantu w dwoch liniach: przekreslona cena sprzed obnizki NAD aktualna.
   Kolumna dziala, bo aktualna cena to goly wezel tekstowy — flexbox traktuje
   go jako anonimowy element i przenosi do nastepnego wiersza. */
.fct-single-product-page .fct-product-payment-type,
.fct-product-modal-body .fct-product-payment-type {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  color: var(--ne-primary);
  font-family: var(--ne-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.fct-single-product-page .fct-compare-price,
.fct-product-modal-body .fct-compare-price {
  order: -1;
  font-family: var(--ne-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.fct-single-product-page .fct-compare-price del,
.fct-product-modal-body .fct-compare-price del {
  color: var(--ne-muted);
  font-family: var(--ne-font-body);
  font-size: 15px;
  text-decoration-color: rgba(100, 116, 139, .55);
  text-decoration-thickness: 1.5px;
  opacity: 1;
}

/* Galeria — obraz wypelnia kafel od krawedzi do krawedzi.
   Wczesniej img mial wlasny border-radius, przez co w rogach przebijalo
   tlo ramki i wygladalo to jak padding. */
.fct-single-product-page .fct-product-gallery-thumb {
  border: 0;
  border-radius: var(--ne-r-lg);
  background: var(--ne-canvas);
  box-shadow: var(--ne-shadow-card);
  overflow: hidden;
}

.fct-single-product-page .fct-product-gallery-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

/* Placeholder to SVG 240x240 — rozciagniety na 475px robil sie rozmyty
   i przycinany. Traktujemy go jak ikone: wysrodkowana, w skali 1:1. */
.fct-single-product-page .fct-product-gallery-thumb img[src*="placeholder"] {
  padding: 26%;
  object-fit: contain;
  opacity: .45;
}

.fct-gallery-thumb-control-button {
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-r-sm);
  overflow: hidden;
  transition: border-color .18s;
}

.fct-gallery-thumb-control-button:hover,
.fct-gallery-thumb-control-button.active {
  border-color: var(--ne-primary);
}

/* Tabela specyfikacji — lekka, bez zewnetrznej ramki,
   czytelnosc niosa same linie wierszy */
.fct-package-description {
  margin-bottom: 28px;
  border: 0;
  border-top: 1px solid var(--ne-border);
  border-radius: 0;
  overflow: hidden;
}

.fct-package-description__table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: var(--ne-font-body);
  font-size: 14px;
}

/* Plugin ma `.fct-package-description .fct-package-description__table th
   { padding: 6px 0 }` — wyzsza specyficznosc (0,2,1) i pozniejsza kolejnosc,
   dlatego tekst dotykal krawedzi. Dorownujemy selektorem i !important. */
.fct-package-description .fct-package-description__table th,
.fct-package-description .fct-package-description__table td,
.fct-package-description__table th,
.fct-package-description__table td {
  padding: 14px 2px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--ne-border-soft) !important;
  vertical-align: top;
}

.fct-package-description .fct-package-description__table tr:last-child th,
.fct-package-description .fct-package-description__table tr:last-child td {
  border-bottom: 0 !important;
}

/* Nadpisanie tla, ktore plugin ustawia na sekcji zakupu */
.fct-single-product-page .fct_buy_section,
.fct-single-product-page .fct_buy_section > div {
  background: transparent !important;
  box-shadow: none !important;
}

.fct-package-description .fct-package-description__table th,
.fct-package-description__table th {
  width: 42% !important;
  color: var(--ne-muted) !important;
  font-weight: 600 !important;
}

.fct-package-description .fct-package-description__table td,
.fct-package-description__table td {
  color: var(--ne-head) !important;
  font-weight: 500 !important;
}

/* Ilosc */
.fct-product-quantity {
  border: 1.5px solid var(--ne-border);
  border-radius: var(--ne-r-sm);
  background: var(--ne-surface);
  overflow: hidden;
}

.fct-quantity-decrease-button,
.fct-quantity-increase-button {
  border: 0;
  background: var(--ne-canvas);
  color: var(--ne-muted);
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

.fct-quantity-decrease-button:hover,
.fct-quantity-increase-button:hover {
  background: var(--ne-primary-soft);
  color: var(--ne-primary);
}

.fct-quantity-input {
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--ne-border);
  border-right: 1px solid var(--ne-border);
  background: var(--ne-surface);
  color: var(--ne-head);
  font-family: var(--ne-font-body);
  font-weight: 700;
  text-align: center;
  outline: 0;
}

/* Sekcja zakupu — BEZ karty.
   Tlo strony to #f8fafc, wiec bialy prostokat byl jedyna tak jasna
   plaszczyzna i wyrywal sie z ukladu. Zamiast pudelka: cienka linia
   i oddech. Uklad niesie sam rytm, nie ramka. */
.fct-single-product-page .fct_buy_section {
  margin-top: 30px;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--ne-border);
  border-radius: 0;
  background: transparent;
}

.fct-single-product-page .fct-product-quantity-container {
  margin-bottom: 18px;
}

.fct-single-product-page .fct-product-quantity-container label,
.fct-single-product-page .fct-product-quantity-container > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ne-muted);
  font-size: 13px;
  font-weight: 600;
}

/* CTA */
.fct-single-product-page .fct-product-buttons-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fct-single-product-page .fluent-cart-direct-checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 2px solid var(--ne-primary);
  border-radius: var(--ne-r-sm);
  background: var(--ne-primary);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(21, 119, 175, .22);
  font-family: var(--ne-font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s, border-color .18s;
}

.fct-single-product-page .fluent-cart-direct-checkout-button:hover {
  background: var(--ne-primary-dk);
  border-color: var(--ne-primary-dk);
  color: #ffffff;
}

.fct-single-product-page .fluent-cart-add-to-cart-button {
  padding: 13px 28px;
  border: 2px solid var(--ne-primary);
  border-radius: var(--ne-r-sm);
  background: transparent;
  color: var(--ne-primary);
  box-shadow: none;
  font-family: var(--ne-font-body);
  font-size: 15px;
  font-weight: 700;
  transition: background-color .18s, color .18s;
}

.fct-single-product-page .fluent-cart-add-to-cart-button:hover {
  background: var(--ne-primary);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Strona produktu — dopracowanie proporcji
   -------------------------------------------------------------------------- */

/* Tytul — mocniejszy akcent otwierajacy kolumne */
.fct-single-product-page #fct-product-summary-title {
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

/* Zajawka — ograniczona miara wiersza, zeby sie dobrze czytala */
.fct-single-product-page .fct-product-excerpt {
  max-width: 58ch;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.72;
}

/* Cena — pewniejsza, z cyframi o rownej szerokosci */
.fct-single-product-page .fct-product-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
  font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  line-height: 1.1;
}

.fct-single-product-page .fct-price-separator {
  color: var(--ne-faint);
  font-weight: 400;
}

/* Wybor wariantu — czytelna etykieta i oddech nad przyciskami */
.fct-single-product-page .fct-advanced-variation-wrap { margin-bottom: 22px; }

.fct-single-product-page .fct-attribute-selector { margin-bottom: 18px; }

.fct-single-product-page .fct-attribute-label {
  margin-bottom: 10px;
  color: var(--ne-muted);
  font-size: 13px;
  font-weight: 600;
}

/* Ilosc — etykieta w tym samym jezyku co wariant */
.fct-single-product-page .fct-product-quantity-container {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.fct-single-product-page .fct-product-quantity {
  border-width: 1px;
  border-radius: var(--ne-r-sm);
}

/* Przyciski — jednakowa wysokosc, spokojniejszy cien */
.fct-single-product-page .fluent-cart-direct-checkout-button,
.fct-single-product-page .fluent-cart-add-to-cart-button {
  min-height: 54px;
  padding: 15px 30px;
  border-radius: var(--ne-r-sm);
  font-size: 15.5px;
  letter-spacing: .01em;
}

.fct-single-product-page .fluent-cart-direct-checkout-button {
  box-shadow: 0 6px 18px rgba(21, 119, 175, .20);
}

.fct-single-product-page .fluent-cart-direct-checkout-button:hover {
  box-shadow: 0 10px 26px rgba(21, 119, 175, .28);
}

/* Galeria — delikatne ozywienie przy najechaniu */
.fct-single-product-page .fct-product-gallery-thumb img {
  transition: transform .5s var(--ne-ease);
}

.fct-single-product-page .fct-product-gallery-thumb:hover img:not([src*="placeholder"]) {
  transform: scale(1.03);
}

/* Miniatury pod galeria */
.fct-single-product-page .fct-gallery-thumb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.fct-single-product-page .fct-gallery-thumb-controls:empty { display: none; }

.fct_status_badge_in-stock {
  padding: 4px 12px;
  border-radius: var(--ne-r-pill);
  background: var(--ne-primary-soft);
  color: var(--ne-primary-dk);
  font-size: 12.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Opis WordPress pod modulem produktu

   Wystepuje w DWOCH strukturach, zaleznie od tego jak wpisano tresc:
     (A) luzne elementy jako rodzenstwo .fct-single-product-page
         — np. "Ukryty Rezyser": <blockquote>, <p>, <h3>, <ul>
     (B) calosc owinieta w bezklasowy <div style="color:#252525;...">
         — np. "Zalecenia behawioralne"

   Poprzednia wersja lapala tylko (A), dlatego w Zaleceniach opis rozlewal sie
   na pelna szerokosc i nie mial paddingow na mobile.
   Sekcja produktow podobnych jest wyjeta — ma zostac szeroka.
   -------------------------------------------------------------------------- */

/* Szerokosc i margines boczny IDENTYCZNE jak .fct-single-product-page,
   dzieki czemu pierwsza litera opisu stoi w jednej pionowej linii
   z tytulem i lewa krawedzia galerii.

   Uwaga na kolejnosc: elementy z wlasnym paddingiem bocznym (ul, ol,
   blockquote) dostaja nizej korekte przez calc(), inaczej ich padding
   nadpisalby ten bazowy i tekst wyszedlby poza linie. */
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) {
  max-width: var(--ne-shell);
  margin-inline: auto;
  padding-inline: var(--ne-gutter);
  box-sizing: border-box;
  color: var(--ne-body);
  font-family: var(--ne-font-body);
}

/* Opakowanie z wariantu (B) narzuca wlasny inline color/font-size */
.page-content .fct-single-product-page ~ div[style] {
  color: var(--ne-body) !important;
  font-size: 15.5px !important;
  line-height: 1.8 !important;
}

/* Typografia — element bezposrednio (A) ORAZ zagniezdzony w opakowaniu (B) */
.page-content .fct-single-product-page ~ :is(h2, h3, h4),
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) :is(h2, h3, h4) {
  margin-top: 38px;
  margin-bottom: 12px;
  color: var(--ne-head);
  font-family: var(--ne-font-head);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.page-content .fct-single-product-page ~ h2,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.page-content .fct-single-product-page ~ h3,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.page-content .fct-single-product-page ~ p,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) p {
  margin-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.8;
}

/* Listy — typografia wspolna dla obu wariantow */
.page-content .fct-single-product-page ~ :is(ul, ol),
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) :is(ul, ol) {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.8;
}

/* (A) lista jako bezposrednie rodzenstwo — wciecie punktorow DOLICZONE
   do marginesu bazowego, zeby tekst listy stal w linii z akapitami */
.page-content .fct-single-product-page ~ :is(ul, ol) {
  padding-inline-start: calc(var(--ne-gutter) + 22px);
  padding-inline-end: var(--ne-gutter);
}

/* (B) lista wewnatrz opakowania — margines boczny daje juz opakowanie */
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) :is(ul, ol) {
  padding-inline-start: 22px;
  padding-inline-end: 0;
}

.page-content .fct-single-product-page ~ ul li::marker,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) ul li::marker {
  color: var(--ne-primary);
}

.page-content .fct-single-product-page ~ li,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) li {
  margin-bottom: 6px;
}

/* Cytat — wyglad wspolny dla obu wariantow */
.page-content .fct-single-product-page ~ blockquote,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) blockquote {
  padding-block: 18px;
  padding-inline: 24px;
  border-left: 4px solid var(--ne-primary);
  border-radius: 0 var(--ne-r-sm) var(--ne-r-sm) 0;
  background: var(--ne-canvas);
  color: var(--ne-muted);
  font-style: italic;
}

/* (A) bezposrednie rodzenstwo — caly box wsuniety do linii tresci,
   dzieki czemu niebieski pasek stoi rowno z tytulem, a nie przy krawedzi */
.page-content .fct-single-product-page ~ blockquote {
  max-width: calc(var(--ne-shell) - 2 * var(--ne-gutter));
  margin: 0 auto 24px;
}

/* (B) wewnatrz opakowania — margines boczny daje juz opakowanie */
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) blockquote {
  max-width: none;
  margin: 0 0 24px;
}

.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) :is(strong, b) {
  color: var(--ne-head);
  font-weight: 700;
}

.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ne-r-sm);
}

/* --------------------------------------------------------------------------
   Opis — warstwa wykonczeniowa
   -------------------------------------------------------------------------- */

/* Wyrazny oddech miedzy modulem produktu a opisem */
.page-content .fct-single-product-page + * {
  margin-top: clamp(44px, 5vw, 80px);
}

/* Pierwszy akapit jako lead — wprowadza w tekst, oba warianty struktury */
.page-content .fct-single-product-page ~ p:first-of-type,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) > p:first-of-type {
  color: var(--ne-head);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.7;
}

/* Naglowek sekcji z delikatnym akcentem marki */
.page-content .fct-single-product-page ~ h2,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) h2 {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ne-primary-soft);
}

/* Odnosniki w tresci */
.page-content .fct-single-product-page ~ a:not([class]),
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) a:not([class]) {
  color: var(--ne-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(21, 119, 175, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s, color .18s;
}

.page-content .fct-single-product-page ~ a:not([class]):hover,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) a:not([class]):hover {
  color: var(--ne-primary-dk);
  text-decoration-color: currentColor;
}

/* Punktory w kolorze marki, lekko pogrubione */
.page-content .fct-single-product-page ~ ul li::marker,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) ul li::marker {
  color: var(--ne-primary);
  font-size: 1.05em;
}

.page-content .fct-single-product-page ~ ol li::marker,
.page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) ol li::marker {
  color: var(--ne-primary);
  font-weight: 700;
}

/* Domkniecie strony — zapas pod ostatnim akapitem */
body.single-fluent-products .page-content {
  padding-bottom: clamp(72px, 8vw, 120px);
}

/* --------------------------------------------------------------------------
   Produkty podobne pod opisem — UKRYTE

   Zeby je przywrocic: zamien ponizsza regule na te zakomentowana.
   Style kart (nizej) zostaja gotowe do uzycia.
   -------------------------------------------------------------------------- */

.fct-similar-product-list-container,
.fct-product-list-container.fct-similar-products {
  display: none !important;
}

/*
.fct-product-list-container {
  max-width: var(--ne-shell);
  margin-inline: auto;
  padding: 56px var(--ne-gutter) 72px;
  box-sizing: border-box;
}
*/

.fct-product-list-container .fct-product-list-heading {
  margin-bottom: 28px;
  color: var(--ne-head);
  font-family: var(--ne-font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.fct-product-list { gap: 28px; }

/* Karty produktow podobnych — ten sam jezyk co w sklepie */
.fct-product-list .fct-product-card {
  padding: 0;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-r-lg);
  background: var(--ne-surface);
  box-shadow: var(--ne-shadow-card);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}

.fct-product-list .fct-product-card:hover {
  border-color: var(--ne-primary-brd);
  box-shadow: var(--ne-shadow-card-hover);
}

.fct-product-list .fct-product-card .fct-product-card-image-wrap {
  margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--ne-canvas);
  overflow: hidden;
}

.fct-product-list .fct-product-card img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform .35s;
}

.fct-product-list .fct-product-card:hover img { transform: scale(1.045); }

.fct-product-list .fct-product-card .fct-product-card-image[src*="placeholder"] {
  padding: 44px;
  object-fit: contain;
}

.fct-product-list .fct-product-card .fct-product-card-title {
  padding: 20px 20px 8px;
  color: var(--ne-head);
  font-family: var(--ne-font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
}

.fct-product-list .fct-product-card .fct-product-card-title a { color: inherit; }
.fct-product-list .fct-product-card .fct-product-card-title a:hover { color: var(--ne-primary); }

.fct-product-list .fct-product-card .fct-product-card-prices {
  padding: 0 20px 20px;
  color: var(--ne-primary);
}

.fct-product-list .fct-product-card .fct-item-price {
  color: var(--ne-primary);
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fct-product-list .fct-product-card button,
.fct-product-list .fct-product-card .fct-product-view-button {
  width: calc(100% - 40px);
  min-height: 46px;
  margin: auto 20px 20px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--ne-r-sm);
  background: var(--ne-primary);
  color: #ffffff;
  font-family: var(--ne-font-body);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
  transition: background-color .18s;
}

.fct-product-list .fct-product-card button:hover,
.fct-product-list .fct-product-card .fct-product-view-button:hover {
  background: var(--ne-primary-dk);
}


/* --------------------------------------------------------------------------
   Strona produktu — responsywnosc
   Podzial kolumn robi @container product-page pluginu (768px).
   Tu tylko rytm i elementy dotykowe.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .fct-single-product-page-row { margin-bottom: 40px; }

  #fct-product-summary-title { font-size: clamp(1.45rem, 4vw, 1.9rem); }

  .fct-single-product-page .fct-product-prices { font-size: 26px; }
}

@media (max-width: 767px) {
  .fct-single-product-page { padding-inline: 18px; }

  .fct-single-product-page-row {
    gap: 26px;
    margin-bottom: 32px;
  }

  .fct-single-product-page .fct-product-excerpt { font-size: 15px; }

  .fct-single-product-page .fct_buy_section {
    margin-top: 22px;
    padding: 18px;
  }

  /* Przyciski jeden pod drugim, pelna szerokosc, wygodny cel dotyku */
  .fct-single-product-page .fct-product-buttons-wrap {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fct-single-product-page .fluent-cart-direct-checkout-button,
  .fct-single-product-page .fluent-cart-add-to-cart-button {
    width: 100%;
    min-height: 50px;
    padding: 14px 20px;
  }

  .fct-product-quantity { min-height: 48px; }

  .fct-quantity-decrease-button,
  .fct-quantity-increase-button {
    min-width: 46px;
    min-height: 46px;
  }

  /* Tabela specyfikacji — etykieta nad wartoscia */
  .fct-package-description__table th,
  .fct-package-description__table td {
    display: block;
    width: 100%;
    padding: 8px 14px;
  }

  .fct-package-description__table th {
    padding-bottom: 2px;
    border-bottom: 0;
    font-size: 12.5px;
  }

  .fct-package-description__table td { padding-top: 0; }

  /* Padding opisu daje juz regula bazowa (clamp na wrapperze) — tu tylko
     listy, zeby punktory nie wychodzily poza swoj kontener */
  .page-content .fct-single-product-page ~ :is(ul, ol),
  .page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) :is(ul, ol) {
    padding-left: 22px;
  }

  .page-content .fct-single-product-page ~ *:not(:where(section, .fct-product-list-container)) blockquote {
    padding: 14px 18px;
  }

  .fct-product-list-container { padding: 40px 18px 56px; }
  .fct-product-list { gap: 18px; }
}

/* Quick View na malych ekranach — CTA jeden pod drugim */
@media (max-width: 640px) {
  .fct-product-modal-body,
  .fluent-cart-shop-app-single-product-modal-body {
    padding: 24px 18px !important;
  }

  .fct-product-modal-body .fct-single-product-page-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .fct-product-modal-body .fct-product-buttons-wrap {
    flex-wrap: wrap !important;
  }

  .fct-product-modal-body .fluent-cart-direct-checkout-button,
  .fct-product-modal-body .fct-product-buttons-wrap a,
  .fct-product-modal-body .fct-product-buttons-wrap button {
    flex: 1 1 100% !important;
    min-height: 50px !important;
  }
}


/* ==========================================================================
   16. MINI-KOSZYK (drawer)
   Plugin ma wlasny zestaw ~30 zmiennych — motywujemy przez nie,
   strukture ruszamy tylko tam, gdzie domyslka jest ciasna.
   ========================================================================== */

:root {
  --fct-cart-drawer-bg:                    var(--ne-surface);
  --fct-cart-drawer-primary-text-color:    var(--ne-head);
  --fct-cart-drawer-secondary-text-color:  var(--ne-muted);
  --fct-cart-drawer-primary-bg-color:      var(--ne-primary);
  --fct-cart-drawer-border-color:          var(--ne-border);
  --fct-cart-drawer-close-btn-color:       var(--ne-muted);

  --fct-cart-drawer-btn-bg-color:          var(--ne-primary);
  --fct-cart-drawer-btn-text-color:        #ffffff;
  --fct-cart-drawer-btn-border-color:      var(--ne-primary);

  --fct-cart-drawer-badge-bg-color:        var(--ne-primary);
  --fct-cart-drawer-badge-text-color:      #ffffff;

  --fct-cart-drawer-quantity-bg-color:     var(--ne-surface);
  --fct-cart-drawer-quantity-color:        var(--ne-head);
  --fct-cart-drawer-quantity-border-color: var(--ne-border);
  --fct-cart-drawer-quantity-btn-bg:       var(--ne-canvas);
  --fct-cart-drawer-quantity-btn-color:    var(--ne-muted);
  --fct-cart-drawer-quantity-btn-hover-bg: var(--ne-primary-soft);

  --fct-view-cart-btn-bg-color:            var(--ne-surface);
  --fct-view-cart-drawer-btn-color:        var(--ne-primary);
  --fct-view-cart-drawer-btn-border-color: var(--ne-primary);
  --fct-view-cart-drawer-btn-hover-bg:     var(--ne-primary-soft);

  --fct-cart-item-delete-btn-bg-color:     var(--ne-surface);
  --fct-cart-item-delete-btn-hover-bg-color: var(--ne-danger-bg);
  --fct-cart-item-delete-btn-border-color: var(--ne-border);
  --fct-cart-item-delete-btn-color:        var(--ne-muted);

  --fct-cart-drawer-footer-action-bg-color: var(--ne-surface);
  --fct-cart-drawer-open-btn-bg-color:      var(--ne-surface);
}

.fct-cart-drawer-overlay {
  background-color: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fct-cart-drawer-container {
  font-family: var(--ne-font-body);
  color: var(--ne-body);
}

/* Naglowek */
.fct-cart-drawer-header {
  padding: 20px 22px !important;
  border-color: var(--ne-border) !important;
}

.fct-cart-drawer-header .title {
  color: var(--ne-head);
  font-family: var(--ne-font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.fct-cart-drawer-header .fct-cart-drawer-close-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-r-pill);
  background: var(--ne-canvas);
  color: var(--ne-muted);
  transition: background-color .18s, border-color .18s, color .18s;
}

.fct-cart-drawer-header .fct-cart-drawer-close-button:hover {
  border-color: var(--ne-primary);
  background: var(--ne-primary-soft);
  color: var(--ne-primary);
}

/* Pozycja koszyka — dwa rzedy w pionie:
     gora:  tytul (lewo)  |  cena (prawo)
     dol:   ilosc (lewo)  |  usun (prawo)

   Kolumna prawa (.fct-cart-item-summary) rozklada swoje dzieci przez
   space-between, wiec MUSI rozciagac sie na pelna wysokosc wiersza.
   Wczesniej bylo tu `align-items: flex-start`, przez co kolumna kurczyla
   sie do wysokosci tresci i kosz lezal tuz pod cena zamiast przy ilosci. */
.fct-cart-drawer-list .fct-cart-item {
  gap: 14px !important;
  padding: 18px 22px !important;
  align-items: stretch !important;
  border-color: var(--ne-border-soft) !important;
  transition: background-color .18s;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Plugin rezerwuje 40px po prawej — kolumna podsumowania jest osobnym
   elementem flex, wiec ten zapas tylko rozpycha wiersz. */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-right: 8px !important;
  min-width: 0 !important;
}

/* Ilosc dosunieta do dolu — rowno z koszem po prawej */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-quantity,
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-quantity {
  margin-top: auto !important;
}

/* Cena w kolumnie prawej rowno z pierwsza linia tytulu */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-total {
  margin: 0 !important;
  line-height: 1.4 !important;
}

.fct-cart-drawer-list .fct-cart-item:hover {
  background: var(--ne-canvas);
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-info { gap: 14px; }

/* Miniatura pozycji.

   UWAGA na kolejnosc: cart-drawer.css wchodzi do kolejki DALEJ niz ten plik
   (pozycja 43 vs 15), wiec przy rownej specyficznosci wygrywa plugin.
   Stad !important — bez tego ponizsze wymiary w ogole nie dzialaly.

   Plugin ustawia obrazkowi `height: auto` + `aspect-ratio: 1/1`, a kontener
   dostaje `height: 100%`, czyli rozciaga sie na wysokosc calego wiersza.
   Przy okladce w ukladzie pionowym dawalo to znieksztalcenie.

   Obraz WYPELNIA kafelek (object-fit: cover, zero paddingu), a zaokraglenie
   narzuca kontener przez overflow: hidden. Wczesniej byl tu `contain`
   z paddingiem — zostawialo to puste pasy o ostrych rogach wewnatrz
   zaokraglonej ramki. */

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-image {
  box-sizing: border-box !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  align-self: flex-start !important;

  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-canvas) !important;
  overflow: hidden !important;
  /* wymusza przyciecie potomkow do promienia takze w Safari */
  isolation: isolate;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-image img {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Brak zdjecia — placeholder jako wyciszona ikona, nie rozciagniety obrazek */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-image img[src*="placeholder"] {
  padding: 14px !important;
  opacity: .4 !important;
}

/* Plugin adresuje te elementy przez `.fct-cart-drawer-list .fct-cart-item
   .fct-cart-item-details .fct-cart-item-title` (0,4,0) i wczytuje sie pozniej,
   wiec krotkie selektory nie mialy szans. Dorownujemy sciezka. */

/* margin: 0 na tytule jest krytyczny dla wyrownania gornego rzedu.
   Tytul to <h3>, wiec dziedziczy margines z motywu; plugin zeruje go
   regula opartа o .fct-cart-drawer-container, ale nie chcemy zalezec od
   tego, w jaki wrapper trafi szuflada. Bez tego cena stala 15px wyzej. */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title,
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title a,
.fct-cart-item-title,
.fct-cart-item-title a {
  margin: 0 0 6px !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-title a:hover,
.fct-cart-item-title a:hover {
  color: var(--ne-primary) !important;
  text-decoration: none !important;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-variant,
.fct-cart-item-variant {
  color: var(--ne-muted) !important;
  font-size: 12.5px !important;
}

.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-price,
.fct-cart-item-price,
.fct-cart-item-total {
  color: var(--ne-primary) !important;
  font-family: var(--ne-font-head) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dopisek jednostkowy przy cenie zostaje wyciszony */
.fct-cart-drawer-list .fct-cart-item .fct-cart-item-details .fct-cart-item-price span {
  color: var(--ne-muted) !important;
  font-weight: 500 !important;
}

/* Ilosc */
.fct-cart-item-quantity {
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-r-sm);
  overflow: hidden;
}

.fct-cart-item-quantity button {
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

.fct-cart-item-quantity button:hover {
  background: var(--ne-primary-soft);
  color: var(--ne-primary);
}

/* Usun */
.fct-cart-item-delete-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-r-sm);
  color: var(--ne-muted);
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}

.fct-cart-item-delete-button:hover {
  border-color: rgba(185, 28, 28, .24);
  background: var(--ne-danger-bg);
  color: var(--ne-danger);
}

/* Suma */
.fct-cart-drawer .fct-cart-total-wrapper {
  padding: 18px 22px !important;
  border-top: 1px solid var(--ne-border);
  color: var(--ne-head);
  font-size: 15px;
  font-weight: 600;
}

.fct-cart-total-wrapper span:last-child,
.fct-cart-total-wrapper strong {
  color: var(--ne-primary);
  font-family: var(--ne-font-head);
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Stopka */
.fct-cart-drawer-footer-actions {
  gap: 10px !important;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--ne-border);
  box-shadow: 0 -6px 20px rgba(0, 29, 56, .06);
}

/* Plugin ustawia `max-height: 40px` przy `padding: 15px 16px` — przycisk
   wychodzil scisniety. Bez !important ta regula nie miala szans (cart-drawer.css
   jest dalej w kolejce). */
.fct-cart-drawer-footer a {
  max-height: none !important;
  min-height: 50px !important;
  padding: 15px 18px !important;
  border-radius: var(--ne-r-sm) !important;
  font-family: var(--ne-font-body);
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: background-color .18s, color .18s, border-color .18s;
}

.fct-cart-drawer-footer a:not(.view-cart-button) {
  box-shadow: 0 10px 24px rgba(21, 119, 175, .22);
}

.fct-cart-drawer-footer a:not(.view-cart-button):hover {
  background-color: var(--ne-primary-dk);
}

.fct-cart-drawer-footer a.view-cart-button {
  border: 1.5px solid var(--ne-primary);
  box-shadow: none;
}

/* Pusty koszyk */
.fluent-cart-cart-empty-content {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
}

.fluent-cart-cart-empty-content-text {
  color: var(--ne-muted);
  font-size: 15px;
}

/* ==========================================================================
   PLYWAJACY PRZYCISK KOSZYKA — styl "jeden kafelek"

   Zgodny z snippetami ne-kawa-float i ne-scroll-single: ten sam rozmiar,
   promien, gradient, ramka, cien i refleks. Dzieki temu trzy przyciski
   czytaja sie jako jeden zestaw.

   Stos (od gory):
     [ Mini-koszyk    ]  bottom = 6rem + 56 + 12 = 164px
     [ Postaw kawe    ]  bottom = 6rem           =  96px
     [ Postep czytania]  bottom = 6rem - 56 - 12 =  28px

   FluentCart renderuje ikone jako <img src="cart.svg">, wiec nie da sie jej
   przekolorowac przez currentColor. Ukrywamy obrazek i rysujemy ikone
   maska CSS — dzieki temu dziedziczy kolor tekstu i reaguje na hover.
   ========================================================================== */

.fct-cart-drawer-open-btn {
  --ne-fab-size: 56px;
  --ne-fab-gap: 12px;
  --ne-fab-right: 2rem;
  --ne-fab-base: 6rem;          /* pozycja przycisku "Postaw kawe" */
  --ne-fab-radius: 8px;
  --ne-fab-blue: var(--ne-primary);
  --ne-fab-blue-dark: #0c5f8f;

  position: fixed !important;
  right: var(--ne-fab-right) !important;
  bottom: calc(var(--ne-fab-base) + var(--ne-fab-size) + var(--ne-fab-gap)) !important;
  z-index: 9997 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: var(--ne-fab-size) !important;
  height: var(--ne-fab-size) !important;
  min-width: var(--ne-fab-size) !important;
  min-height: var(--ne-fab-size) !important;
  padding: 0 !important;

  background: linear-gradient(145deg, #ffffff 0%, #edf7fc 100%) !important;
  border: 1px solid rgba(21, 119, 175, .13) !important;
  border-radius: var(--ne-fab-radius) !important;

  box-shadow:
    0 16px 32px -10px rgba(15, 23, 42, .24),
    0 5px 12px rgba(15, 23, 42, .07),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  color: var(--ne-fab-blue) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* Pusty koszyk — plugin dokłada .is-hidden */
.fct-cart-drawer-open-btn.is-hidden { display: none !important; }

/* Oryginalna ikona z pluginu ustepuje miejsca masce */
.fct-cart-drawer-open-btn img { display: none !important; }

/* Ikona koszyka w tym samym jezyku co kubek kawy i strzalka (Lucide, stroke) */
.fct-cart-drawer-open-btn::before {
  content: "";
  position: relative;
  z-index: 2;

  width: 25px;
  height: 25px;

  background-color: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;

  filter: drop-shadow(0 2px 2px rgba(21, 119, 175, .12));
  pointer-events: none;

  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* Refleks — identyczny jak w obu snippetach */
.fct-cart-drawer-open-btn::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;

  width: 28px;
  height: 15px;

  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0));
  border-radius: 50%;
  opacity: .68;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .fct-cart-drawer-open-btn:hover {
    background: linear-gradient(145deg, #f9fdff 0%, #dff1f9 100%) !important;
    border-color: rgba(72, 184, 232, .3) !important;
    box-shadow:
      0 20px 40px -10px rgba(15, 23, 42, .28),
      0 8px 16px rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: var(--ne-fab-blue-dark) !important;
    transform: translateY(-3px) scale(1.02);
  }

  .fct-cart-drawer-open-btn:hover::before {
    transform: translateY(-2px);
  }
}

.fct-cart-drawer-open-btn:active {
  transform: translateY(0) scale(.96);
}

.fct-cart-drawer-open-btn:focus-visible {
  outline: 3px solid rgba(21, 119, 175, .28);
  outline-offset: 4px;
}

/* Licznik pozycji — male, rowne kolko.
   box-sizing: border-box sprawia, ze biala obwodka miesci sie W SRODKU
   20px, a nie powieksza plakietki do 24px. min-width rowna wysokosci daje
   idealne kolo przy jednej cyfrze; przy dwoch rozsuwa sie w pigulke. */
.fct-cart-drawer-open-btn .fct-cart-badge-count,
.fct-cart-badge-count {
  box-sizing: border-box;
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 4px;

  background: var(--ne-primary);
  border: 2px solid #ffffff;
  border-radius: var(--ne-r-pill);

  color: #ffffff;
  font-family: var(--ne-font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;

  box-shadow: 0 3px 8px rgba(21, 119, 175, .30);
  pointer-events: none;
}

@media (max-width: 380px) {
  .fct-cart-drawer-open-btn { --ne-fab-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fct-cart-drawer-open-btn,
  .fct-cart-drawer-open-btn::before { transition: none; }

  .fct-cart-drawer-open-btn:hover,
  .fct-cart-drawer-open-btn:active,
  .fct-cart-drawer-open-btn:hover::before { transform: none; }
}

@media (max-width: 480px) {
  .fct-cart-drawer-container { width: 100vw; max-width: 100vw; }

  .fct-cart-drawer-list .fct-cart-item { padding: 16px 18px; }

  .fct-cart-drawer-header,
  .fct-cart-drawer-footer-actions,
  .fct-cart-drawer .fct-cart-total-wrapper { padding-inline: 18px; }
}


/* ==========================================================================
   17. ZAMOWIENIE / KONTO
   ========================================================================== */

.fct-checkout,
.fct_customer_profile_wrap,
.fct-not-found-container {
  max-width: var(--ne-shell);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-family: var(--ne-font-body);
  color: var(--ne-body);
}

.fct-not-found-container { padding: 60px 24px; }

.checkout-button {
  border-radius: var(--ne-r-sm);
  background-color: var(--ne-primary);
  color: #ffffff;
  font-family: var(--ne-font-body);
  font-weight: 700;
  transition: background-color .18s;
}

.checkout-button:hover {
  background-color: var(--ne-primary-dk);
  color: #ffffff;
}

.fct_place_order_btn {
  border-radius: var(--ne-r-sm);
  background-color: var(--ne-primary);
  color: #ffffff;
  font-weight: 700;
  transition: background-color .18s;
}

.fct_place_order_btn:hover:not(:disabled) { background-color: var(--ne-primary-dk); }

.fct_place_order_btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.fct_summary_items_total .fct_summary_value {
  color: var(--ne-primary);
  font-weight: 700;
}

.fct_coupon_toggle { color: var(--ne-primary); }

.fct-customer-nav-link:hover,
.fct-customer-nav-link.router-link-active { color: var(--ne-primary); }


/* ==========================================================================
   18. PANEL KONTA — SZCZEGOLY ZAMOWIENIA I TABELA TRANSAKCJI

   customer-profile.css jest wpinany w stopce, czyli PO tym pliku — stad
   !important na wlasciwosciach, o ktore konkurujemy.

   Zrodlo problemu (Start.js, definicja kolumn tabeli "Powiazane transakcje"):
     kolumna "Status"  -> width: 110
     kolumna z akcjami -> width: 125
   Do tego Element Plus tnie zawartosc komorki:
     .el-table .cell { overflow: hidden; text-overflow: ellipsis }

   Polskie tlumaczenie "Succeeded" to "Zakonczone powodzeniem" — 22 znaki
   w plakietce z `white-space: nowrap` w kolumnie 110px (86px na tresc).
   Nie ma szans sie zmiescic, wiec bylo ucinane w polowie slowa.
   Ostatnia kolumna ma 101px na tresc, a miesci ikone + "Potwierdzenie"
   + menu akcji — rowniez nie miala szans.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Plakietki statusu — zawijanie zamiast ucinania
   -------------------------------------------------------------------------- */

.fct_customer_profile_wrap .fct-badge,
.fct-customer-dashboard-app-container .fct-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  padding: 5px 9px !important;
  border-radius: var(--ne-r-sm) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  /* Klucz do problemu: plugin ma nowrap, przez co dlugi polski status
     nie mial gdzie sie zlamac i byl przycinany przez komorke. */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  /* capitalize dawalo "Zakonczone Powodzeniem" — wielka litera w srodku
     zdania jest niepoprawna po polsku. */
  text-transform: none !important;
}

/* Kolory plakietek w duchu systemu — stonowane, nie krzykliwe */
.fct_customer_profile_wrap .fct-badge.fct-success {
  background-color: #e7f4ee !important;
  color: #1a7f56 !important;
}

.fct_customer_profile_wrap .fct-badge.fct-warning {
  background-color: #fdf1de !important;
  color: #a4650a !important;
}

.fct_customer_profile_wrap .fct-badge.fct-danger {
  background-color: #fdeae6 !important;
  color: #a32e12 !important;
}

.fct_customer_profile_wrap .fct-badge.fct-blue,
.fct_customer_profile_wrap .fct-badge.fct-primary {
  background-color: var(--ne-primary-soft) !important;
  color: var(--ne-primary-dk) !important;
}

.fct_customer_profile_wrap .fct-badge.fct-info,
.fct_customer_profile_wrap .fct-badge.fct-unshipped {
  background-color: var(--ne-canvas-2) !important;
  color: var(--ne-body) !important;
}

/* --------------------------------------------------------------------------
   Komorki tabel — koniec wielokropka
   -------------------------------------------------------------------------- */

.fct_customer_profile_wrap .el-table .cell {
  padding: 0 12px !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.45 !important;
}

.fct_customer_profile_wrap .el-table .cell.el-tooltip {
  white-space: normal !important;
}

.fct_customer_profile_wrap .el-table .el-table__cell {
  padding: 12px 0 !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   Podzial szerokosci kolumn

   UWAGA na scope: wrapperem tabeli jest .fct-customer-dashboard-table.
   Klasa .fct-order-transaction-lists NIE jest jej przodkiem — reguly
   scope'owane do niej nie mialy szans zadzialac.

   Element Plus rozdziela nadmiar miejsca kolumnom elastycznym. Kolumna
   "Metoda platnosci" ma min-width:160, wiec dostawala CALY zapas —
   zmierzone w DOM: 389px na slowo "stripe", podczas gdy kolumna akcji
   zostawala z 125px (101px na tresc) i przycisk z niej uciekal.

   Zmierzony podzial przed:  150 | 120 | 90 | 110 | 100 | 389 | 125  = 1084
   Po rebalansie:            159 | 127 | 95 | 159 | 106 | 211 | 212  = 1084

   <col width> to wskazowka prezentacyjna o najnizszym priorytecie,
   wiec zwykla regula CSS ja nadpisuje (zweryfikowane pomiarem).
   Naglowek i cialo tabeli to osobne <table> — regula trafia w oba,
   wiec kolumny pozostaja zsynchronizowane. */

/* Status — zeby dlugie polskie etykiety mieścily sie w dwoch liniach */
.fct_customer_profile_wrap .fct-customer-dashboard-table .el-table colgroup col:nth-child(4) {
  width: 150px !important;
}

/* Metoda platnosci — oddaje nadmiar */
.fct_customer_profile_wrap .fct-customer-dashboard-table .el-table colgroup col:nth-last-child(2) {
  width: 200px !important;
}

/* Akcje — przejmuje odzyskane miejsce */
.fct_customer_profile_wrap .fct-customer-dashboard-table .el-table colgroup col:last-child {
  width: 200px !important;
}

/* Gdyby tabela mimo to byla szersza od kontenera — poziomy przewijak
   zamiast obcinania. */
.fct_customer_profile_wrap .fct-customer-dashboard-table {
  overflow: hidden !important;
  border-radius: var(--ne-r-md) !important;
  border-color: var(--ne-border) !important;
}

.fct_customer_profile_wrap .el-table__body-wrapper,
.fct_customer_profile_wrap .el-table__inner-wrapper {
  overflow-x: auto !important;
}

/* Naglowek tabeli */
.fct_customer_profile_wrap .el-table th.el-table__cell {
  background-color: var(--ne-canvas) !important;
}

.fct_customer_profile_wrap .el-table th.el-table__cell .cell {
  color: var(--ne-muted) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

.fct_customer_profile_wrap .el-table td.el-table__cell {
  border-bottom-color: var(--ne-border-soft) !important;
  color: var(--ne-body) !important;
  font-size: 13.5px !important;
}

.fct_customer_profile_wrap .el-table tr:hover > td.el-table__cell {
  background-color: var(--ne-canvas) !important;
}

.fct_customer_profile_wrap .el-table .text,
.fct_customer_profile_wrap .el-table time.text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Kwoty — cyfry o rownej szerokosci */
.fct_customer_profile_wrap .el-table td.el-table__cell .cell {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Przycisk pobrania potwierdzenia
   -------------------------------------------------------------------------- */

/* Kontener akcji: <div class="flex items-center gap-2 justify-between">.
   justify-between rozpychalo przycisk i menu na krance waskiej komorki;
   flex-end trzyma je razem przy prawej krawedzi, a min-width:0 pozwala
   im sie zmiescic zamiast rozpychac komorke. */
.fct_customer_profile_wrap .el-table td .cell > .flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.fct_customer_profile_wrap .underline-link-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-primary) !important;
  font-family: var(--ne-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: border-color .18s, background-color .18s, color .18s;
}

.fct_customer_profile_wrap .underline-link-button:hover {
  border-color: var(--ne-primary) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary-dk) !important;
  text-decoration: none !important;
}

/* Ikona pobierania jest owinieta w <div class="icon"> — bez flex:none
   kurczy sie razem z tekstem przy ciasnej komorce. */
.fct_customer_profile_wrap .underline-link-button .icon,
.fct_customer_profile_wrap .underline-link-button svg {
  flex: none !important;
  width: 14px !important;
  height: 14px !important;
}

.fct_customer_profile_wrap .fct-more-option-wrap .more-btn {
  flex: none !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-sm) !important;
  background: var(--ne-surface) !important;
  color: var(--ne-muted) !important;
  transition: border-color .18s, background-color .18s, color .18s;
}

.fct_customer_profile_wrap .fct-more-option-wrap .more-btn:hover {
  border-color: var(--ne-primary) !important;
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

/* --------------------------------------------------------------------------
   Karty i naglowki sekcji zamowienia
   -------------------------------------------------------------------------- */

.fct_customer_profile_wrap .fct-single-order-box,
.fct_customer_profile_wrap .fct-order-summary-wrap,
.fct_customer_profile_wrap .fct-plain-order-box {
  border-color: var(--ne-border) !important;
  border-radius: var(--ne-r-md) !important;
}

.fct_customer_profile_wrap .fct-single-order-header,
.fct_customer_profile_wrap .fct-order-summary-header {
  border-color: var(--ne-border) !important;
}

.fct_customer_profile_wrap .fct-order-summary-header-title,
.fct_customer_profile_wrap .fct-single-order-header h2,
.fct_customer_profile_wrap .fct-single-order-header h3 {
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* Nawigacja panelu */
.fct_customer_profile_wrap .fct-customer-nav-link {
  border-radius: var(--ne-r-sm) !important;
  font-family: var(--ne-font-body) !important;
}

.fct_customer_profile_wrap .fct-customer-nav-item.active_customer_menu .fct-customer-nav-link {
  background: var(--ne-primary-soft) !important;
  color: var(--ne-primary) !important;
}

/* --------------------------------------------------------------------------
   Waskie ekrany — akcje pod soba, tabela przewijalna
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .fct_customer_profile_wrap .el-table .cell {
    padding: 0 10px !important;
  }

  .fct_customer_profile_wrap .fct-badge {
    font-size: 11px !important;
    padding: 4px 7px !important;
  }

  .fct_customer_profile_wrap .underline-link-button {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================================
   19. DOSTEPNOSC
   ========================================================================== */

.fct-products-wrapper :is(a, button, input, select):focus-visible,
.fct-shop-responsive-filter-wrapper :is(a, button, input, select):focus-visible,
.fct-product-modal :is(a, button, input, select):focus-visible,
.fct-single-product-page :is(a, button, input, select):focus-visible {
  outline: 3px solid rgba(21, 119, 175, .28);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fct-products-wrapper *,
  .fct-products-wrapper *::before,
  .fct-products-wrapper *::after,
  .fct-shop-responsive-filter-wrapper *,
  .fct-shop-responsive-filter-wrapper *::before,
  .fct-shop-responsive-filter-wrapper *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}




/* =========================================================
   MOBILE — pola ceny na pełną dostępną szerokość
   ========================================================= */

@media (max-width: 767px) {
    /*
     * Cała grupa pól zajmuje pełną szerokość szuflady.
     * Każde pole otrzymuje dokładnie połowę miejsca.
     */
    .fct-shop-responsive-filter-container
    .fct-shop-price-range-wrap {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        gap: 10px !important;
        margin: 0 !important;
    }

    /*
     * Usuwamy ograniczenia szerokości narzucone przez FluentCart.
     */
    .fct-shop-responsive-filter-container
    .fct-shop-price-range {
        display: flex !important;
        flex: none !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 10px 0 12px !important;
        box-sizing: border-box !important;
    }

    /*
     * Pole tekstowe wykorzystuje całą przestrzeń,
     * która zostaje obok symbolu waluty.
     */
    .fct-shop-responsive-filter-container
    .fct-shop-price-range input,
    .fct-shop-responsive-filter-container
    .fct-shop-price-range .fc_price_range_input {
        flex: 1 1 0 !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        padding-right: 4px !important;
        box-sizing: border-box !important;
    }

    .fct-shop-responsive-filter-container
    .fct-shop-price-range .fct-shop-currency-sign {
        flex: 0 0 auto !important;
        min-width: 16px !important;
    }
}


/* ==========================================================================
   18. ARCHIWA KATEGORII PRODUKTÓW
   Dotyczy wszystkich stron body.tax-product-categories.
   ========================================================================== */

body.tax-product-categories .fct-genric-template-wrapper.site-container {
  width: min(100% - clamp(24px, 4vw, 48px), var(--ne-shell)) !important;
  max-width: var(--ne-shell) !important;
  margin: clamp(28px, 4vw, 56px) auto clamp(48px, 6vw, 84px) !important;
  color: var(--ne-body);
  font-family: var(--ne-font-body);
}

body.tax-product-categories .fct-archive-header-wrap {
  margin: 0 !important;
  padding: clamp(28px, 4vw, 46px) clamp(24px, 4vw, 48px) !important;
  border: 1px solid var(--ne-border) !important;
  border-radius: var(--ne-r-lg) !important;
  background: var(--ne-surface) !important;
  box-shadow: var(--ne-shadow-soft) !important;
}

body.tax-product-categories .fct-archive-title {
  
  margin: 0 !important;
  color: var(--ne-head) !important;
  font-family: var(--ne-font-head) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
}

/*
 * Archiwum FluentCart nie ma osobnego .fct-shop-toolbar.
 * Wspólny kontener przełącznika widoku i sortowania staje się pierwszym
 * wierszem siatki; ukrywamy tylko same ikony zmiany widoku.
 */
body.tax-product-categories .fct-products-wrapper {
  display: grid !important;
  grid-template-columns: clamp(260px, 22vw, 300px) minmax(0, 1fr) !important;
  grid-template-areas:
    "toolbar toolbar"
    "filters products"
    "paginator paginator" !important;
  align-items: start !important;
  gap: 24px 34px !important;
  width: 100% !important;
  padding: 28px 0 70px !important;
}

body.tax-product-categories .fct-products-wrapper > .fct-shop-view-switcher-wrap {
  display: flex !important;
  grid-area: toolbar !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 48px !important;
  margin: 0 !important;
}

body.tax-product-categories .fct-products-wrapper .fct-shop-view-switcher,
body.tax-product-categories .fct-products-wrapper .fct-shop-filter-toggle-button {
  display: none !important;
}

body.tax-product-categories .fct-products-wrapper .fct-shop-sorting-container {
  position: relative !important;
  z-index: 10;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.tax-product-categories .fct-products-wrapper .fct-sorting-toggle {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
}

body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner {
  display: contents !important;
}

body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner > .fct-shop-filter-wrapper {
  grid-area: filters !important;
  min-width: 0 !important;
}

body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner > .fct-products-container {
  grid-area: products !important;
  min-width: 0 !important;
}

body.tax-product-categories .fct-products-wrapper > .fct-shop-paginator {
  grid-area: paginator !important;
}

body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-2,
body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-3,
body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-4,
body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-5 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

@media (max-width: 980px) {
  body.tax-product-categories .fct-products-wrapper {
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 22px 24px !important;
  }

  body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-2,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-3,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-4,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 767px) {
  body.tax-product-categories .fct-genric-template-wrapper.site-container {
    width: min(100% - 24px, var(--ne-shell)) !important;
    margin-block: 24px 48px !important;
  }

  body.tax-product-categories .fct-archive-header-wrap {
    padding: 26px 22px !important;
    border-radius: var(--ne-r-md) !important;
  }

  body.tax-product-categories .fct-archive-title {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  body.tax-product-categories .fct-products-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 22px 0 48px !important;
  }

  body.tax-product-categories .fct-products-wrapper > .fct-shop-view-switcher-wrap {
    order: 1;
    align-self: flex-end;
    min-height: 44px !important;
  }

  body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner {
    display: block !important;
    order: 2;
    width: 100%;
  }

  body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner > .fct-shop-filter-wrapper {
    display: none !important;
  }

  body.tax-product-categories .fct-products-wrapper .fct-products-wrapper-inner.mode-grid .fct-products-container,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-2,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-3,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-4,
  body.tax-product-categories .fct-products-wrapper .fct-products-container.grid-columns-5 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 0 26px !important;
  }

  body.tax-product-categories .fct-products-wrapper > .fct-shop-paginator {
    order: 3;
  }
}