/* ============================================================
   KUCHCIK / TuiTeraz — FINALNY MOTYW PRODUKCYJNY
   Wczytaj TEN plik PO istniejącym tit-frontend-0.css LUB
   tit-frontend-1.css.

   Cel: maksymalnie mało zmian w HTML.
   Zachowujemy istniejące selektory i logikę frontendu.
   Desktop + tablet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --kc-green-950:#07361c;
  --kc-green-900:#0b4424;
  --kc-green-800:#11572d;
  --kc-green-700:#176d37;
  --kc-green-600:#1f8242;
  --kc-green-500:#339653;
  --kc-green-200:#bee0c6;
  --kc-green-100:#e7f4ea;
  --kc-green-50:#f5faf6;

  --kc-cream-100:#f7f1e6;
  --kc-cream-50:#fcfaf6;
  --kc-white:#ffffff;

  --kc-text:#202a23;
  --kc-text-soft:#5f6b63;
  --kc-border:#e0e6e0;
  --kc-border-strong:#cdd8cf;

  --kc-orange:#f2a423;
  --kc-orange-soft:#fff1cf;
  --kc-red:#d9534f;

  --kc-radius-sm:10px;
  --kc-radius:15px;
  --kc-radius-lg:22px;
  --kc-shadow-sm:0 3px 12px rgba(12,64,31,.06);
  --kc-shadow:0 10px 30px rgba(12,64,31,.10);
  --kc-shadow-hover:0 16px 40px rgba(12,64,31,.14);

  --kc-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --kc-display:"Fraunces",Georgia,serif;
}

/* ---------- neutralizacja starego motywu bez ruszania logiki ---------- */
html,
body {
  width:100%;
  min-height:100%;
  margin:0 !important;
  padding:0 !important;
  color:var(--kc-text) !important;
  background:var(--kc-cream-50) !important;
  font-family:var(--kc-font) !important;
  text-align:left;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body {
  font-size:16px !important;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

button,
input,
select,
textarea {
  font-family:var(--kc-font) !important;
}

a {
  color:var(--kc-green-700);
}

/* ---------- nagłówki ---------- */
h1,
h2 {
  color:var(--kc-green-950) !important;
}

h2 {
  display:block !important;
  margin:0 0 18px !important;
  padding:0 !important;
  font-family:var(--kc-display) !important;
  font-size:clamp(30px,3vw,44px) !important;
  font-weight:700 !important;
  line-height:1.08 !important;
  letter-spacing:-.035em;
}

/* ---------- główny panel filtrów ---------- */
#filters {
  width:280px !important;
  max-width:100% !important;
  margin:0 !important;
  padding:14px !important;
  display:block !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius-lg) !important;
  box-shadow:var(--kc-shadow-sm) !important;
  line-height:1.35 !important;
}

/* jeżeli filtr jest w normalnym flow po lewej */
#filters.filters_visible,
.filters_visible {
  padding:14px !important;
}

/* nagłówek filtra */
#filter_caption {
  display:block !important;
  width:100% !important;
  margin:0 0 12px !important;
  padding:3px 2px 12px !important;

  color:var(--kc-green-900) !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--kc-border) !important;
  border-radius:0 !important;

  font-size:19px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-wrap:wrap !important;
}

/* każda grupa pola w bocznym filtrze */
#filters .yte_class,
#filters .ytx_class,
#filters .yc_class,
#filters .ycb_class,
#filters .yl_class {
  width:100% !important;
  max-width:100% !important;
  margin:0 0 11px !important;
  padding:10px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;

  color:var(--kc-text) !important;
  background:var(--kc-cream-50) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius) !important;

  line-height:1.35 !important;
  white-space:normal !important;
}

/* label nad polem */
#filters .ytx_labels_visible,
#filters .yte_labels_visible,
#filters .yc_labels_visible,
#filters .ycb_labels_visible,
#filters .yl_labels_visible,
#filters .labels_visible,
#filters label {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 3px !important;
  padding:0 !important;

  color:var(--kc-green-950) !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.35 !important;

  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* ---------- SELECT: szeroki, czytelny, wieloliniowy w panelu ---------- */
#filters select,
#select_filter select {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  height:auto !important;

  margin:0 !important;
  padding:9px 34px 9px 10px !important;

  display:block !important;
  color:var(--kc-text) !important;
  background-color:var(--kc-white) !important;
  border:1px solid var(--kc-border-strong) !important;
  border-radius:10px !important;
  outline:none !important;

  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  text-align:left !important;

  white-space:normal !important;
  text-wrap:wrap !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;

  /* progressive enhancement w nowszych przeglądarkach */
  field-sizing:content;
}

#filters select:focus,
#select_filter select:focus {
  border-color:var(--kc-green-500) !important;
  box-shadow:0 0 0 4px rgba(51,150,83,.11) !important;
}

/* opcje jako kolejne wiersze */
#filters select option,
#select_filter select option {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:34px;
  padding:7px 9px !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;

  font-size:13px !important;
  line-height:1.35 !important;

  white-space:normal !important;
  text-wrap:wrap !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

#filters select option:checked,
#select_filter select option:checked {
  color:var(--kc-green-950) !important;
  background:var(--kc-green-100) !important;
}

/* listowe selecty: wartości w kilku liniach / wierszach */
#filters select[size],
#filters select[multiple],
#select_filter select[size],
#select_filter select[multiple] {
  width:100% !important;
  height:auto !important;
  min-height:92px;
  max-height:260px !important;
  padding:5px !important;
  overflow-y:auto !important;
}

#filters select[size] option,
#filters select[multiple] option,
#select_filter select[size] option,
#select_filter select[multiple] option {
  margin:2px 0 !important;
  border-radius:7px;
}

/* ---------- inputy i textarea ---------- */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  width:100% !important;
  max-width:100% !important;
  min-height:44px;
  margin:0 !important;
  padding:10px 12px !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border-strong) !important;
  border-radius:10px !important;
  outline:none;
}

textarea {
  min-height:110px;
  resize:vertical;
}

input:focus,
textarea:focus {
  border-color:var(--kc-green-500) !important;
  box-shadow:0 0 0 4px rgba(51,150,83,.11);
}

/* ---------- checkboxy: cofamy skalę x3/x2.5 ze starego CSS ---------- */
input[type="checkbox"] {
  width:18px !important;
  height:18px !important;
  min-height:0 !important;
  margin:2px 7px 2px 1px !important;
  padding:0 !important;
  transform:none !important;
  vertical-align:middle !important;
  accent-color:var(--kc-green-600) !important;
}

/* ---------- przyciski ---------- */
button,
input[type="submit"],
.butt,
.tab_button,
.BtnJmp,
.BtnBasket,
.ViewBasket {
  min-height:42px;
  margin:4px 0 !important;
  padding:9px 16px !important;

  color:#fff !important;
  background:linear-gradient(180deg,var(--kc-green-600),var(--kc-green-700)) !important;
  border:1px solid var(--kc-green-700) !important;
  border-radius:10px !important;
  box-shadow:0 5px 12px rgba(31,130,66,.15);

  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-wrap:wrap !important;

  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

button:hover,
input[type="submit"]:hover,
.butt:hover,
.tab_button:hover,
.BtnJmp:hover,
.BtnBasket:hover,
.ViewBasket:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(31,130,66,.22);
}

/* ---------- lista / karta produktu ---------- */
div.listed_item {
  position:relative;
  overflow:hidden;

  margin:0 0 16px !important;
  padding:16px !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius-lg) !important;
  box-shadow:var(--kc-shadow-sm) !important;

  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

div.listed_item:hover {
  transform:translateY(-2px);
  border-color:var(--kc-green-200) !important;
  box-shadow:var(--kc-shadow-hover) !important;
}

div.listed_item span {
  color:var(--kc-text-soft) !important;
}

div.listed_item span b {
  color:var(--kc-text) !important;
}

span.itemdescription {
  display:block !important;
  margin:10px 0 !important;
  padding:10px 12px !important;
  color:var(--kc-text-soft) !important;
  background:var(--kc-cream-50) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:10px !important;
  line-height:1.5 !important;
}

b.itemprice,
b.itemprice_value {
  color:var(--kc-green-800) !important;
  font-size:1.25rem !important;
  font-weight:800 !important;
}

b.itemprice1kg_value,
b.itemprice100g_value,
sub.itemprice1kg_value,
sub.itemprice100g_value {
  color:#89928c !important;
  font-size:.85em !important;
}

/* ---------- zdjęcia produktów ---------- */
.img_prod_small,
.img_prod,
.img_prod_big {
  height:auto !important;
  max-width:100% !important;
  border-radius:var(--kc-radius) !important;
  object-fit:cover;
}

.img_prod_small { max-width:180px !important; }
.img_prod { max-width:380px !important; }
.img_prod_big { max-width:100% !important; }

/* ---------- stare techniczne boxy: ujednolicamy ---------- */
.up_even,
.up_odd,
.txe_even,
.txe_odd,
.cb_odd,
.cb_even,
.c_odd,
.c_even,
.txx_odd,
.txx_even,
.tl_even,
.tl_odd {
  margin:10px 0 !important;
  padding:14px !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius) !important;
  box-shadow:var(--kc-shadow-sm) !important;
}

/* dyskretne rozróżnienie typu pola zamiast kolorowych gradientów */
.txe_even,
.txe_odd { border-left:3px solid #e8c55a !important; }
.cb_even,
.cb_odd { border-left:3px solid #b58bc4 !important; }
.c_even,
.c_odd { border-left:3px solid var(--kc-green-500) !important; }
.txx_even,
.txx_odd { border-left:3px solid #d98c78 !important; }
.tl_even,
.tl_odd { border-left:3px solid #9aa6a0 !important; }

/* ---------- tabele / koszyk ---------- */
table,
.printable,
.table_template_1,
.basket_results {
  width:100%;
  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border-collapse:separate !important;
  border-spacing:0;
}

.basket_results,
.table_template_1,
.printable {
  overflow:hidden;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius) !important;
}

.basket_results th,
.table_template_1 th {
  padding:11px !important;
  color:var(--kc-green-950) !important;
  background:var(--kc-green-50) !important;
  border-color:var(--kc-border) !important;
  font-size:12px;
  font-weight:700;
}

.basket_results td,
.table_template_1 td,
.printable td {
  padding:11px !important;
  color:var(--kc-text) !important;
  background:#fff !important;
  border-color:var(--kc-border) !important;
}

.basket_results tr:nth-child(even) td {
  background:#fbfcfb !important;
}

/* ---------- dodatkowe istniejące elementy ---------- */
#product_list,
#users_list tr td {
  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:var(--kc-radius) !important;
  line-height:1.45 !important;
}

.upgps {
  color:var(--kc-green-900) !important;
  background:var(--kc-green-50) !important;
  border:1px solid var(--kc-green-200) !important;
  border-radius:10px !important;
}

.ListNavigator {
  display:inline-flex !important;
  align-items:center;
  min-height:38px;
  margin:4px !important;
  padding:7px 10px !important;

  color:var(--kc-text) !important;
  background:var(--kc-white) !important;
  border:1px solid var(--kc-border) !important;
  border-radius:9px !important;
}

.BasketQuantity,
.BasketQuantityO {
  min-height:42px;
  margin:4px !important;
  padding:7px 10px !important;
  color:var(--kc-green-900) !important;
  background:#fff !important;
  border:1px solid var(--kc-border-strong) !important;
  border-radius:9px !important;
}

/* ---------- opcjonalne klasy: Tu i Teraz / Ratuj / Za darmo ---------- */
/* Dodanie tych klas jest opcjonalne — nie są potrzebne do obecnego działania. */
.kc-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:3px 5px 3px 0;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
}

.kc-badge--now {
  color:#754600;
  background:var(--kc-orange-soft);
  border:1px solid #f4d48d;
}

.kc-badge--rescue {
  color:var(--kc-green-900);
  background:var(--kc-green-100);
  border:1px solid var(--kc-green-200);
}

.kc-badge--free {
  color:#fff;
  background:var(--kc-green-700);
  border:1px solid var(--kc-green-700);
}

/* opcjonalny box promujący Tu i Teraz */
.kc-now-panel {
  margin:14px 0;
  padding:14px 16px;
  color:var(--kc-text);
  background:
    radial-gradient(circle at 0 0,rgba(242,164,35,.13),transparent 36%),
    linear-gradient(135deg,#f8fbf5,#fffdfa);
  border:1px solid #dce8dd;
  border-radius:var(--kc-radius-lg);
}

/* ---------- DESKTOP: sensowna szerokość treści ---------- */
@media (min-width:1101px) {
  body > form,
  body > main,
  body > section,
  body > div:not(#filters):not(.listed_item) {
    max-width:1440px;
  }

  #filters {
    position:sticky;
    top:18px;
  }
}

/* ---------- TABLET poziomo ---------- */
@media (max-width:1100px) {
  body {
    font-size:15px !important;
  }

  #filters {
    width:245px !important;
    padding:11px !important;
  }

  #filters .yte_class,
  #filters .ytx_class,
  #filters .yc_class,
  #filters .ycb_class,
  #filters .yl_class {
    padding:8px !important;
    margin-bottom:8px !important;
  }

  #filters select {
    min-height:43px !important;
    font-size:12px !important;
  }

  div.listed_item {
    padding:14px !important;
  }

  .img_prod { max-width:310px !important; }
}

/* ---------- TABLET pionowo ---------- */
@media (max-width:900px) {
  #filters {
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 18px !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #filter_caption {
    grid-column:1 / -1;
    margin-bottom:0 !important;
  }

  #filters .yte_class,
  #filters .ytx_class,
  #filters .yc_class,
  #filters .ycb_class,
  #filters .yl_class {
    margin:0 !important;
  }

  #filters > input[type="submit"],
  #filters > button {
    grid-column:1 / -1;
  }

  div.listed_item {
    border-radius:18px !important;
  }
}

/* ---------- mały tablet ---------- */
@media (max-width:760px) {
  #filters {
    grid-template-columns:1fr;
  }

  h2 {
    font-size:32px !important;
  }

  .img_prod,
  .img_prod_small {
    max-width:100% !important;
  }

  .basket_results {
    display:block;
    overflow-x:auto;
  }
}

/* ---------- druk ---------- */
@media print {
  html,
  body {
    background:#fff !important;
  }

  #filters,
  .print_but,
  .button-container,
  #print_but,
  #button-container {
    display:none !important;
    visibility:hidden !important;
  }
}