/* ===== Skorka MODERN B2B - SAMODZIELNY arkusz (reset basic + baza main + warstwa modern) w jednym pliku. Bez zaleznosci od main.css. ===== */
/* --- reset --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}label{font-weight:normal}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0;font-size:15px}b,strong{font-weight:bold}html{-webkit-text-size-adjust:100%}.clear{clear:both}.hide{display:none}.left{float:left !important}.right{float:right !important}.bottom{vertical-align:bottom}.textcenter{text-align:center !important}.textleft{text-align:left !important}.textright{text-align:right !important}.texttop{vertical-align:top !important}.textmiddle{vertical-align:middle !important}.textbottom{vertical-align:bottom !important}.bold{display:inline;font-weight:bold}.margin10{margin:10px !important}.padding0{padding:0px !important}.padding10{padding:10px !important}.noborder{border:0 solid #000 !important}.nowrap{white-space:nowrap}html{min-height:100%;position:relative}body{height:100%;font-family:'Roboto',sans-serif;margin:0}textarea,input,select,button.button{font-family:inherit;font-size:inherit}img{vertical-align:middle;border:0px}body.rtl{direction:rtl}
/* --- baza (main) --- */
a {
  text-decoration: none;
  color: #000;
}
p {
  margin-bottom: 5px;
}
.background1 {
  background-color: #4682b4;
}
.background2 {
  background-color: #fff;
}
.border1 {
  border-color: #4682b4;
}
.color1 {
  color: #4682b4;
}
.textcolor1 {
  color: #757575;
}
.textcolor2 {
  color: #424242;
}
.textcolor3 {
  color: #fff;
}
.textcolor4 {
  color: #ADADAD;
}
.offline_mode {
  background-color: #ca3629 !important;
}
#content,
.content {
  background-color: #fff;
  color: #000;
}
.top_line {
  border-top: 1px solid #dcdcdc;
}
.bottom_line {
  border-bottom: 1px solid #dcdcdc;
}
.margin0 {
  margin: 0px;
}
.padding0 {
  padding: 0px;
}
/* header */
.navbar {
  margin: 0;
}
.navbar.bb_header {
  margin: 0;
  height: 85px;
  border-top: 1px solid #0A46B9;
  border-image: url(base_assets/images/bar_top.png) 1 0 stretch;
  border-bottom: 1px solid #CFCFCF;
  background-color: #fff;
}
.bb_container {
  margin-top: 86px;
}
div.header_kth {
  display: none;
}
@media only screen and (max-width: 480px) {
  div.navbar-header img {
    display: none;
  }
  span.img_helper {
    display: none !important;
  }
  div.header_kth {
    display: block;
    padding: 15px;
  }
  li.navbar-kth span {
    max-width: inherit !important;
  }
  .grid fieldset label {
    width: 100%;
  }
}
@media only screen and (min-width: 767px) {
  .bb_container {
    margin-left: 5px;
    margin-right: 5px;
  }
}
.bb_header .navbar-header {
  height: 85px;
  margin: 0;
  vertical-align: middle;
  position: relative;
}
.bb_header .navbar-header .img_helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.bb_header .navbar-header img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding: 5px;
}
.bb_header .navbar-nav > li {
  padding-top: 25px;
  padding-bottom: 25px;
  margin-left: 1px;
  margin-right: 1px;
}
.bb_header .navbar-nav > li > a {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
}
@media only screen and (max-width: 480px) {
  .bb_header .navbar-left {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .navbar.bb_header {
    height: 124px;
    border-image: none;
  }
  .bb_container {
    margin-top: 125px;
  }
  .bb_header .navbar-header {
    text-align: center;
    height: 50px;
  }
  #menu_baskets.navbar-collapse {
    float: initial !important;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 2px;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background-color: #fff !important;
    left: auto !important;
    right: 0 !important;
  }
  form div.bjr_search {
    width: 100%;
  }
  form div.bjr_search input {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .bb_header .navbar-header img {
    padding: 10px;
    max-width: 140px;
    max-height: 100%;
  }
}
@media only screen and (min-width: 1024px) {
  .bb_header .navbar-nav > li {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.bb_header .navbar-title,
.bb_header .navbar-nav-title,
.bb_header .navbar-nav-link {
  text-overflow: ellipsis;
  max-width: 190px;
  overflow: hidden;
}
.bb_header .navbar-title.nav_opiekun {
  display: none;
}
@media only screen and (min-width: 800px) {
  .bb_header .navbar-title.nav_opiekun {
    display: inline;
    max-width: 350px;
    font-size: 9pt;
  }
  .bb_header .navbar-title,
  .bb_header .navbar-nav-title,
  .bb_header .navbar-nav-link {
    max-width: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .bb_header .navbar-title,
  .bb_header .navbar-nav-title,
  .bb_header .navbar-nav-link {
    max-width: 210px;
  }
  .bb_header .navbar-title.nav_opiekun {
    max-width: 400px;
    font-size: 10pt;
  }
}
@media only screen and (min-width: 1900px) {
  .bb_header .navbar-title,
  .bb_header .navbar-nav-title,
  .bb_header .navbar-nav-link {
    max-width: 245px;
  }
  .bb_header .navbar-title.nav_opiekun {
    max-width: 550px;
  }
}
.bb_header .navbar-nav-title {
  font-size: 8pt;
  display: block;
  padding-bottom: 5px;
}
/* page footer */
.footer {
  border-top: 1px solid #ddd;
}
.footer .fsection {
  margin: 15px 10%;
}
.footer .fsection .client-logo img {
  max-height: 50px;
  max-width: 100%;
}
.footer .logo {
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  color: #757575;
  padding: 10px;
}
.footer .userdata {
  background-color: #fff;
  color: #000;
  height: 100%;
  min-height: 44px;
  text-align: center;
  border-top: 1px solid #eeeff2;
}
.footer .underline {
  padding-bottom: 10px;
}
div.items .right img {
  margin-right: 5px;
}
img.user {
  background-color: #02A0E9;
  width: 43px;
  height: 43px;
  border-radius: 22px;
  margin-right: 5px;
}
img.notification {
  background-color: #02A0E9;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 2px;
}
img.notification_big {
  background-color: #02A0E9;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 4px;
}
.box img {
  max-width: 100%;
  max-height: 400px;
}
img.lng {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.25);
  margin-right: 2px;
}
div.grid_footer {
  background: #fff;
  height: 40px;
  color: #4682b4;
  text-align: right;
  vertical-align: middle;
  padding-right: 20px;
  padding-top: 15px;
}
div.grid_footer a {
  color: #000;
  text-decoration: none;
  padding: 3px;
}
div.grid_footer a.active {
  background: #87ceeb;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
table.grid {
  width: 100%;
}
table.grid th {
  height: 50px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #424242;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}
table.grid tr,
table.grid td {
  color: #424242;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
  position: relative;
}
table.grid td.img img {
  margin: 10px;
  border: 1px solid #ddd;
  max-width: 90px;
  max-height: 60px;
}
table.grid td.img .image-preview {
  background: #fff;
  border: 1px solid #ddd;
  display: none;
  height: auto;
  left: 100%;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  top: -50%;
  width: 450px;
  max-height: 450px;
  z-index: 100;
  padding: 10px;
}
table.grid td.img .image-preview img {
  vertical-align: middle;
  display: block;
  min-height: 250px;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}
table.grid td.img:hover .image-preview {
  display: block;
}
table.grid th.tl,
table.grid td.tl {
  text-align: left;
  padding: 5px 15px;
}
table.grid th.tr,
table.grid td.tr {
  text-align: right;
  padding: 5px 15px;
}
table.grid th.tc,
table.grid td.tc {
  text-align: center;
  padding: 5px 5px;
}
table.grid td div.details {
  margin: 3px 0px;
}
table.grid td div.details span {
  margin: 3px;
  padding: 2px;
  height: 16px;
}
table.grid td div.promotion {
  margin: 10px;
}
table.grid td div.promotion > span {
  font-size: 10pt;
  color: #fff;
  text-align: center;
  background: #FA0B49;
  border-radius: 12px;
  padding: 2px 15px;
  margin-left: -10px;
  height: 24px;
}
table.grid td div.replacements {
  margin: 10px;
}
table.grid td div.replacements > span {
  font-size: 10pt;
  color: #fff;
  text-align: center;
  background: #9B9B9B;
  border-radius: 12px;
  padding: 2px 15px;
  margin-left: -10px;
  height: 24px;
}
table.grid td span.tkh {
  display: block;
}
table.grid tbody tr:nth-child(even) {
  background: #F5F5F5;
}
table.grid tbody tr:nth-child(odd) {
  background: #fff;
}
table.grid tbody tr.grid_yellow:nth-child(even),
table.grid tbody tr.grid_yellow:nth-child(odd) {
  background: #fdf3d7;
}
table.grid tbody tr.grid_yellow td:first-child {
  box-shadow: inset 3px 0 0 #e0a93b;
}
table.grid tbody tr.grid_click {
  cursor: pointer;
}
table.grid tbody tr:hover {
  background-color: #fff !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  transition-delay: 0s;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: ease-in-out;
  z-index: 25;
}
table.grid tbody tr.grid_yellow:hover {
  background: #fbead0;
}

/* ===== Modal rejestracji (z okna logowania) ===== */
#modal_register .modal-dialog {
  max-width: 680px;
}
#modal_register.reg_modal_full .modal-dialog {
  max-width: 980px;
}
#modal_register .modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  overflow: hidden;
}
#modal_register .modal-header {
  padding: 20px 26px 14px;
  border-bottom: 1px solid var(--m-line);
}
#modal_register .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--m-ink);
}
#modal_register .modal-header .close {
  font-size: 26px;
  color: var(--m-muted);
  opacity: 0.7;
  text-shadow: none;
}
#modal_register .modal-header .close:hover {
  color: var(--m-ink);
  opacity: 1;
}
#modal_register .modal-body {
  padding: 22px 26px;
  max-height: calc(100vh - 275px);
  overflow: auto;
}
#modal_register #reg_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin: 0;
}
#modal_register #reg_form .form-group {
  margin: 0;
}
#modal_register #reg_form .form-group:first-child {
  grid-column: 1 / -1;
}
#modal_register #reg_form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--m-muted);
  margin: 0 0 5px;
}
#modal_register .modal-footer {
  padding: 14px 26px 22px;
  border-top: 1px solid var(--m-line);
}
#modal_register .modal-footer .btn {
  border-radius: 10px;
  padding: 9px 24px;
  font-weight: 600;
  font-size: 14px;
}
#modal_register .modal-footer .btn-success {
  background: #1f9d57;
  border-color: #1f9d57;
  color: #fff;
}
#modal_register .modal-footer .btn-success:hover {
  filter: brightness(0.95);
}
#modal_register .modal-footer .btn-default {
  background: #fff;
  border: 1px solid var(--m-line);
  color: var(--m-ink);
}
#modal_register .modal-footer .btn-default:hover {
  background: var(--m-bg);
}
#modal_register.reg_modal_full .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
#modal_register.reg_modal_full .modal-footer .g-recaptcha {
  margin: 0;
  flex: 0 0 auto;
}
#modal_register.reg_modal_full .reg_footer_btns {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
/* Pelny formularz rejestracji (eplusm): pola pelnej szerokosci, zgody, sekcja firmy */
#modal_register #reg_form > .reg_full,
#modal_register #reg_form > .reg_extra {
  grid-column: 1 / -1;
}
#modal_register .reg_full textarea {
  min-height: 72px;
  resize: vertical;
}
#modal_register .reg_extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--m-line);
}
#modal_register .reg_extra .reg_consents,
#modal_register .reg_extra .reg_companywrap {
  min-width: 0;
}
#modal_register .reg_section_title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--m-ink);
}
#modal_register .form_group {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--m-ink);
}
#modal_register .form_group > input[type="checkbox"] {
  margin: 0 8px 0 0;
  vertical-align: top;
  position: relative;
  top: 2px;
}
#modal_register .form_group a {
  color: var(--accent);
  font-weight: 600;
}
#modal_register .reg_company .form_group .form-control {
  margin-top: 6px;
  max-width: 440px;
}
#modal_register .g-recaptcha {
  margin-top: 16px;
}
@media (max-width: 560px) {
  #modal_register #reg_form {
    grid-template-columns: 1fr;
  }
}

/* ===== Widok grup/kategorii (mod_main_gre) - karty kategorii ===== */
.groups:not(.grid) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  align-items: start;
}
@media (max-width: 1200px) {
  .groups:not(.grid) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .groups:not(.grid) {
    grid-template-columns: 1fr;
  }
}
.groups:not(.grid) .clearfix {
  display: none !important;
}
.groups:not(.grid) > [class*="col-"] {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  padding: 16px 18px;
}
.groups:not(.grid) > [class*="col-"] > a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--m-ink);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--m-line);
}
.groups:not(.grid) > [class*="col-"] > a:hover {
  color: var(--accent);
}
.groups:not(.grid) .font_reduce > div > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  margin: 1px -8px;
  border-radius: 7px;
  color: var(--m-ink);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
}
.groups:not(.grid) .font_reduce > div > a:hover {
  background: var(--m-bg);
  color: var(--accent);
}
.groups:not(.grid) .font_reduce .font_reduce {
  padding-left: 12px;
}
.groups:not(.grid) .counter {
  color: var(--m-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== Widok licencji (mod_main_gre, branch .groups.grid) - kafelki marek ===== */
.groups.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  align-items: start;
  margin: 0;
}
.groups.grid .clearfix {
  display: none !important;
}
.groups.grid .lic_header {
  grid-column: 1 / -1;
  height: auto;
  margin: 10px 0 2px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--m-line);
}
.groups.grid .lic_header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.groups.grid .licence {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.groups.grid .licence > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  text-decoration: none;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  padding: 16px 14px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.groups.grid .licence > a:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
  transform: translateY(-2px);
}
.groups.grid .licence div.image {
  height: 130px;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.groups.grid .licence div.image img {
  max-height: 120px;
  max-width: 100%;
  width: auto;
}
.groups.grid .licence span.title {
  display: block;
  text-align: center;
  color: var(--m-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.groups.grid .licence span.title .counter {
  color: var(--m-muted);
  font-weight: 600;
}

/* ===== Operator: okno wyboru kontrahenta (mod_kth) ===== */
#kth_list {
  padding-top: 24px;
}
#kth_list .filters_wrapper {
  margin: 0 0 16px;
}
#kth_list #kth_list_form {
  margin: 0 0 16px;
}
#kth_list #kth_list_form fieldset {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
#kth_list #kth_list_form .bjr_search {
  margin: 0;
  flex: 1 1 480px;
  max-width: 560px;
}
#kth_list #kth_list_form .bjr_search input {
  width: 100%;
  box-sizing: border-box;
}
#kth_list #kth_list_form .details {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
#kth_list #kth_list_grid .grid_wrapper {
  margin: 0;
}
#kth_list #kth_list_grid table.grid th,
#kth_list #kth_list_grid table.grid td {
  text-align: left;
}
#kth_list #kth_list_grid table.grid td {
  padding: 11px 16px;
}
table.sm {
  font-size: 13px;
}
table.sm th {
  height: 15px;
}
table.sm td {
  padding: 2px;
}
input[type='button'].button,
input[type='submit'].button,
button.button,
.button {
  padding: 13px 25px;
  min-height: 22px;
}
input.sm,
button.sm,
a.sm {
  padding: 13px 10px !important;
}
input.sm2,
button.sm2,
a.sm2 {
  padding: 13px 20px !important;
}
input.sm3,
button.sm3,
a.sm3 {
  padding: 12px 20px !important;
  margin: 7px 0px !important;
}
@media only screen and (max-width: 991px) {
  footer.page {
    display: block;
  }
  footer.page .userdata {
    font-size: 10pt;
  }
  input[type='radio']:not(.ocena).input_border + label,
  input[type='checkbox'].input_border + label {
    margin-right: 5px;
    font-size: 9pt;
  }
}
@media only screen and (max-width: 479px) {
  footer.page .userdata div {
    height: 100px;
  }
  footer.page .userdata {
    font-size: 9pt;
  }
  footer.page .userdata img {
    max-height: 100px;
    max-width: 120px;
  }
}
@media only screen and (max-width: 799px) {
  div.tabs {
    height: auto;
    width: auto;
    display: block;
  }
  a.tabs {
    display: block;
    margin-top: 5px;
  }
}
form.form div.header {
  padding: 10px;
  background-color: #eee;
}
form.form label.sm,
label.sm {
  display: inline-block;
  margin-right: 25px;
  padding: 5px;
  width: 100%;
}
@media only screen and (min-width: 480px) {
  input[type='button'].button,
  input[type='submit'].button,
  button.button,
  .button {
    padding: 16px 30px;
    min-height: 26px;
  }
  input.sm,
  button.sm {
    padding: 16px 10px !important;
  }
  input.sm2,
  button.sm2 {
    padding: 16px 20px !important;
  }
  .filehide {
    height: 80px;
    width: 200px;
  }
  form.form label.sm,
  label.sm {
    display: inline-block;
    margin-right: 25px;
    padding: 0px;
    width: auto;
  }
  form.form label {
    text-align: left;
    font-size: 16px;
  }
  form.form label input[type='text'],
  form.form label input[type='password'],
  form.form label input[type="number"],
  form.form label input[type="date"],
  form.form label input[type="email"],
  form.form label textarea {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  input[type='button'].button,
  input[type='submit'].button,
  button.button,
  .button {
    padding: 16px 50px;
    min-height: 26px;
  }
  input.sm,
  button.sm {
    padding: 16px 10px !important;
  }
  input.sm2,
  button.sm2 {
    padding: 16px 20px !important;
  }
}
@media only screen and (min-width: 992px) {
  div.kth_details {
    top: 19px;
    left: 229px;
    width: 400px;
  }
  div.kth_details div.item label {
    display: inline-block;
    width: 120px;
  }
  form.form label:not(.sm) span {
    min-width: 160px;
  }
  form.form div.header {
    padding: 20px;
  }
  form.form div.header label > span {
    color: #757575;
    font-size: 16px;
    margin-bottom: 5px;
    display: inline-block;
  }
  form.form div.inputs {
    padding: 5px;
    display: inline-block;
    vertical-align: top;
  }
  form.form div.inputs div.form-group {
    margin: 5px;
  }
  form.form div.inputs label {
    display: inline-block;
  }
  form.form div.inputs label > span {
    vertical-align: top;
  }
  form.form div.section {
    margin-top: 30px;
  }
  form.form label {
    font-size: 16px;
  }
  form.form label input[type='text'],
  form.form label input[type="number"],
  form.form label input[type="date"],
  form.form label input[type="email"],
  form.form label textarea {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1366px) {
  body {
    font-size: 12pt;
  }
}
/* menu */
#menu {
  float: left;
  position: absolute;
  width: 140px;
  height: calc(100% - 60px);
  text-align: center;
  border-right: solid 1px #ddd;
  font-size: 10pt;
  color: #757575;
  overflow-x: hidden;
  transition: 0.5s;
}
#menu.menu_sm {
  width: 60px;
}
#menu.menu_sm .menutxt {
  display: none;
}
#menu a {
  color: #757575;
}
#menu .menu_back {
  border-bottom: solid 1px #ddd;
  padding: 5px;
  vertical-align: middle;
  height: 20px;
}
#menu .menu_back img {
  vertical-align: middle;
}
#menu li {
  margin-top: 15px;
  margin-bottom: 15px;
}
#menu li img {
  max-height: 30px;
  max-width: 30px;
  margin-bottom: 5px;
}
#menu li span.menuicon {
  display: block;
}
nav.menu_top {
  background: #fff;
  text-align: center;
  font-size: 10pt;
  width: 100%;
  border-top: 1px solid #CFCFCF;
}
@media only screen and (min-width: 768px) {
  nav.menu_top {
    border-bottom: 1px solid #CFCFCF;
  }
}
nav.menu_top li span.menuicon {
  display: block;
}
nav.menu_top div,
nav.menu_top .navbar-collapse {
  padding: 0px;
}
nav.menu_top ul.nav > li {
  padding-top: 10px;
  padding-bottom: 12px;
  margin: 0;
  border-top: 4px solid transparent;
}
nav.menu_top ul.nav > li.active {
  border-top: 4px solid #029FE8;
  border-image: url(base_assets/images/menu_active.png) 10 0 stretch;
}
nav.menu_top ul.nav > li > a {
  padding-top: 0px;
  padding-bottom: 0px;
  min-width: 110px;
  min-height: 54px;
}
nav.menu_top ul.nav > li:not(:last-child) > a {
  border-right: 1px solid #CFCFCF;
}
nav.menu_top ul.nav > li img {
  max-height: 30px;
  max-width: 30px;
  margin-bottom: 5px;
}
nav.menu_top ul.nav > li span.badge {
  position: absolute;
  display: block;
  background-color: #02A0E9;
  top: 12px;
  right: 17px;
}
@media only screen and (min-width: 768px) and (max-width: 1250px) {
  nav.menu_top ul.nav > li > a {
    min-width: 75px;
    min-height: 20px;
  }
  .menutitle {
    display: none;
  }
}
li.basket {
  margin-left: 0px !important;
}
li.basket div {
  color: #ADADAD;
}
li.basket_active div {
  color: #000;
}
li.basket_active span.badge {
  border: 3px solid rgba(0, 0, 0, 0.15) !important;
}
@media only screen and (min-width: 768px) and (max-width: 1650px) {
  li.basket_compact .navbar-nav-collapse {
    display: none;
  }
}
li.basket.state_T span.badge {
  background-color: #02A0E9 !important;
}
li.basket.state_W span.badge {
  background-color: #E88F0C !important;
}
li.basket.state_S span.badge {
  background-color: #66bb6a !important;
}
li.basket.state_N span.badge {
  background-color: #9B9B9B !important;
}
.leftmenu {
  top: 0;
  margin-left: 140px;
  border-left: solid 1px #ddd;
  transition: margin-left 0.5s;
}
.leftmenu_sm {
  margin-left: 60px;
}
#menu_header .navbar-nav-left {
  float: left;
  left: 0px;
}
.navbar-nav-add {
  margin: 0px !important;
  margin-right: 5px !important;
}
.navbar-nav-add div {
  position: relative;
  float: left;
  left: 0px;
  top: 5px;
  border-radius: 50%;
  background-color: #ddd;
  height: 25px;
  width: 25px;
}
.navbar-nav-add img {
  position: absolute;
  left: 5px;
  top: 5px;
}
#menu_header .navbar-nav-right {
  float: left;
  top: 20px;
  padding: 0px;
}
#menu_header .navbar-nav-middle {
  padding-left: 5px;
  padding-right: 5px;
  float: left;
  height: 100%;
  vertical-align: middle;
}
#menu_header .navbar-nav-middle .navbar-nav-title.small {
  font-size: 8pt;
  padding-top: 5px;
  padding-bottom: 1px;
}
#menu_header .navbar-nav-middle .navbar-nav-link.small {
  font-size: 8pt;
  padding-top: 1px;
  padding-bottom: 5px;
}
@media only screen and (max-width: 1250px) {
  #menu_header .navbar-nav {
    float: left;
    margin: 0;
  }
  #menu_header .navbar-nav > li {
    float: left;
    margin: 1px;
  }
  #menu_header .navbar-right {
    float: right !important;
  }
  #menu_header .navbar-nav-collapse {
    display: none;
  }
}
#menu_header .navbar-nav-basket {
  float: left;
  padding-right: 15px;
}
#menu_header .navbar-nav-basket img[src*="koszyk"] {
  content: url(images/koszyk.svg);
  width: 26px;
  height: 26px;
}
#menu_header .navbar-nav-basket span.badge {
  position: absolute;
  top: 24px;
  right: 18px;
  background-color: #02A0E9;
  padding: 2px 8px;
}
#menu_header .navbar-nav-link {
  white-space: nowrap;
  min-width: 50px;
}
.panel_ope,
.panel_mag {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 2px;
  position: absolute !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: #fff !important;
  left: auto !important;
  right: 0 !important;
}
#contentBody {
  position: relative;
}
#contentBody > div.page {
  margin: 20px;
}
.footer {
  color: #757575;
}
.footer a {
  color: #757575;
}
.footer p {
  margin: 5px 0px;
  font-size: 10pt;
}
.footer p.underline a {
  color: #424242;
}
.section {
  padding-top: 35px;
  padding-bottom: 55px;
}
.sec_title {
  margin: 10px;
  margin-bottom: 20px;
  color: #757575;
  padding-left: 25px;
  background: url(base_assets/images/sec_title.svg) left center no-repeat;
}
.sec_title h1 {
  font-size: 16px;
}
.comment {
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #CFCFCF;
}
.comment div {
  margin-top: 10px;
}
.panel_basket {
  position: absolute !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: #fff !important;
  left: auto !important;
  right: 0 !important;
  width: 300px !important;
  font-size: 12px;
}
.panel_basket .basket_item {
  margin: 0px !important;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #CFCFCF;
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel_basket .basket_item div {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px 0px 0px 5px !important;
  height: 44px;
}
.panel_basket .basket_item img {
  max-height: 30px;
  max-width: 30px;
}
/* widgets */
.widgets {
  background: #F8F8F8;
  padding-top: 35px;
  padding-bottom: 55px;
}
.widget {
  background: #fff;
  margin-bottom: 25px;
  position: relative;
  border: 1px solid #fff;
  border-radius: 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 10px;
}
.widget-title {
  font-size: 14pt;
  margin: 20px;
}
.widget-content {
  font-size: 12pt;
  margin: 20px;
}
.widget .filters {
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 10px;
  font-size: 12pt;
}
.widget .filters span {
  padding: 5px;
}
.widget-content .title {
  font-size: 14pt;
  margin-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.widget-content .subtitle {
  font-size: 14pt;
  margin-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  color: #33B3ED;
}
.widget-content .item {
  margin-bottom: 5px;
}
.widget-content .item label {
  color: #757575;
  margin-right: 10px;
  width: 35%;
}
.widget-content .wid_border {
  border-left: 4px solid #fff;
  padding-left: 10px;
  margin-bottom: 20px;
}
.widget-content .wid_sal_dot_prz {
  border-color: #d32f2f;
}
.widget-content .wid_sal_dot {
  border-color: #ffea00;
}
.widget-content .wid_sal_uje_prz {
  border-color: #64b5f6;
}
.widget-content .wid_sal_uje {
  border-color: #bbdefb;
}
.widget-content .wid_sal_zap {
  border-color: #66bb6a;
}
.widget-content .more {
  text-align: center;
  margin: 25px;
}
.widget-content .more button,
.widget-content .more a {
  font-size: 8pt;
  color: #757575;
  height: 33px;
  background: #fff;
  padding: 0px 40px 0px 40px;
  border-radius: 16px;
  border: 1px solid #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 25px;
}
/* banners */
div.banners .carousel-inner,
div.banners .item {
  height: 100%;
}
div.banners .carousel-indicators li {
  padding: 1px;
  margin: 5px;
  border-width: 2px;
  height: 12px;
  width: 12px;
  border-color: #fff;
}
div.banners .carousel-indicators li.active {
  background-color: #fff;
  height: 12px;
  width: 12px;
}
div.banners img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
/* buttons */
.buttons {
  height: 158px;
}
.bb_btn {
  background-color: #02A0E9;
  height: 158px;
  margin-left: -14px;
  margin-right: -14px;
  margin-top: 2px;
  margin-bottom: 2px;
  position: relative;
}
.bb_btn1 {
  background-color: #057CD6;
}
.bb_btn2 {
  background-color: #085EC6;
}
.bb_btn img.bb_img {
  position: absolute;
  height: 100px;
  right: 25px;
  top: 28px;
}
.bb_btn span {
  margin-left: 25px;
  display: block;
  position: relative;
  color: #fff;
}
.bb_btn span.bb_title {
  top: 25px;
  font-size: 16pt;
}
.bb_btn span.bb_title h2 {
  font-size: 16pt;
}
.bb_btn span.bb_subtitle {
  top: 35px;
  font-size: 10pt;
}
.bb_btn span.bb_link {
  display: inline;
  top: 80px;
  font-size: 12pt;
}
.bb_btn span.bb_link .bb_link_img {
  height: 15px;
}
.back_button {
  background-color: #E88F0C;
}
/* old grid */
form.grid {
  background-color: #fff;
  color: #454545;
  vertical-align: bottom;
  position: relative;
}
form.grid fieldset {
  position: relative;
  padding: 10px;
}
form.grid .list_filters,
form.grid .row_filters {
  margin: 0 !important;
}
form.grid .list_back {
  display: none;
  position: absolute;
  right: 10px;
}
.showing_details .list_back {
  display: block !important;
}
div.grid_list {
  position: relative;
  overflow: scroll;
}
@media only screen and (min-width: 767px) {
  div.grid_list {
    overflow: hidden;
  }
}
div.grid {
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  font-size: 10pt;
  position: relative;
  margin-bottom: -1px;
  max-height: none;
  border-bottom: 1px solid #ddd;
}
div.gridbox {
  float: left;
  min-width: 200px;
  width: 100%;
  border: 1px solid #ddd;
  margin-right: -1px;
  margin-bottom: -1px;
  padding: 10px;
  position: relative;
}
div.gridbox div.promotion {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  padding: 5px;
}
div.gridbox div.promotion > span {
  font-size: 10pt;
  color: #fff;
  text-align: center;
  background: #FA0B49;
  border-radius: 12px;
  padding: 5px 15px;
  height: 24px;
}
div.gridbox div.tkh {
  position: absolute;
  right: 5px;
  top: 35px;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  padding: 5px;
}
div.gridbox div.replacements {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  padding: 5px;
}
div.gridbox div.replacements > span {
  font-size: 10pt;
  color: #fff;
  text-align: center;
  background: #9B9B9B;
  border-radius: 12px;
  padding: 5px 15px;
  height: 24px;
}
div.gridbox:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  transition-delay: 0s;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: ease-in-out;
  z-index: 25;
}
div.grid_type {
  text-align: right;
  display: inline;
  vertical-align: bottom;
  height: inherit;
}
div.grid_type input {
  display: none;
}
div.grid div.image {
  height: 80px;
  margin: 15px;
  text-align: center;
  vertical-align: middle;
}
div.grid div.image img {
  width: auto;
  max-height: 80px;
  max-width: 200px;
  vertical-align: middle;
}
div.gridbox span {
  margin: 3px;
  display: block;
  height: 16px;
}
div.gridbox div.bottom span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div.gridbox div.bottom span.stan {
  overflow: visible;
}
div.gridbox span span {
  display: inline;
}
div.gridbox span.title {
  height: 40px;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  white-space: normal;
}
form.add_to_basket_box {
  border: 1px solid #ddd;
  margin: 0px;
  padding: 25px;
}
form.add_to_basket_box label.block {
  padding: 5px 10px;
  display: block;
  color: #000;
  font-size: 14pt;
}
form.add_to_basket_box label.block > span {
  color: #424242;
  font-size: 12pt;
}
form.add_to_basket_box label.block > span.wartosc {
  color: #000;
  font-size: 14pt;
}
form.add_to_basket_box label.numbers > span {
  display: inline-block;
  width: 120px;
}
form.add_to_basket_box input {
  background: #fff;
  border: 0px solid;
  color: #000;
  font-size: 14pt;
}
form.add_to_basket_box input.number {
  text-align: right;
}
form.add_to_basket_box input.box {
  border: 1px solid #ddd;
}
form.add_to_basket_box label.block .add_to_basket {
  font-size: 12pt;
}
form.add_to_basket_box label.block .button {
  font-size: 10pt;
}
.grid-horizontal > .grid-horizontal-row {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 10px;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box {
  display: inline-block;
  float: none;
  width: 250px;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box div.image {
  height: 80px;
  margin: 15px;
  text-align: center;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box .image > img {
  width: auto;
  max-height: 80px;
  max-width: 250px;
  vertical-align: middle;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box div.title {
  height: 38px;
  max-height: 38px;
  overflow: hidden;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box span.title {
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  white-space: normal;
  margin: 3px;
  display: block;
  font-size: 11pt;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -moz-box-orient: vertical;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box div.bottom > span {
  white-space: normal;
  display: block;
  margin: 3px;
  font-size: 8pt;
}
.grid-horizontal > .grid-horizontal-row > .grid-horizontal-box div.add_to_basket {
  max-height: 60px;
}
div.add_to_basket,
div.edit_basket,
div.rez_basket {
  margin: 5px;
  display: inline-block;
  width: 100%;
}
div.add_to_basket button,
div.edit_basket button,
div.rez_basket button {
  margin: 5px 0px 0px -10px;
  height: 30px;
  width: 30px;
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
}
div.add_to_basket .minus:before,
div.edit_basket .minus:before,
div.rez_basket .minus:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  background: url(base_assets/images/minus.svg) center center no-repeat;
}
div.add_to_basket .plus:before,
div.edit_basket .plus:before,
div.rez_basket .plus:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  background: url(base_assets/images/plus.svg) center center no-repeat;
}
div.add_to_basket input,
div.edit_basket input,
div.rez_basket input {
  width: 100%;
  max-width: 60px;
  min-width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  text-align: center;
  color: #424242;
  font-size: 16px;
}
div.add_to_basket .amount_txt,
div.edit_basket .amount_txt,
div.rez_basket .amount_txt {
  padding-top: 4px;
  font-size: 8pt;
  color: #757575;
  text-align: center;
}
div.add_to_basket .basket,
div.edit_basket .basket,
div.rez_basket .basket {
  height: 45px;
  width: 45px;
  background: #02A0E9;
  border-radius: 50%;
  padding: 10px;
  margin: 0px;
  text-align: center;
  vertical-align: middle;
}
div.add_to_basket .basket.disabled,
div.edit_basket .basket.disabled,
div.rez_basket .basket.disabled {
  background: #9B9B9B;
  cursor: not-allowed;
}
div.add_to_basket a.disabled,
div.edit_basket a.disabled,
div.rez_basket a.disabled {
  cursor: not-allowed;
}
div.add_to_basket .basket.info,
div.edit_basket .basket.info,
div.rez_basket .basket.info {
  height: 20px;
  width: 20px;
  padding: 1px;
  margin: 12px 3px;
  font-size: 10px;
}
div.add_to_basket .basket.info span,
div.edit_basket .basket.info span,
div.rez_basket .basket.info span {
  color: #fff;
}
div.add_to_basket .przelicz,
div.edit_basket .przelicz,
div.rez_basket .przelicz {
  max-width: 120px;
}
div.add_to_basket .row,
div.edit_basket .row,
div.rez_basket .row {
  min-width: 120px;
}
div.edit_basket button,
div.rez_basket button {
  margin: 5px 0px 0px 0px;
}
div.edit_basket button.minus,
div.rez_basket button.minus {
  margin-right: 10px;
}
div.edit_basket button.plus,
div.rez_basket button.plus {
  margin-left: 10px;
}
td > div.add_to_basket {
  padding: 0px;
  min-width: 200px;
}
td > div.add_to_basket div {
  margin: 0 auto !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
td > div.add_to_basket button {
  margin: 5px 0px 0px -5px !important;
}
td > div.add_to_basket div.info {
  margin: 10px 0px !important;
  padding: 4px !important;
}
td > div.edit_basket,
div.rez_basket {
  padding: 0px 5px;
  min-width: 120px;
}
td > div.edit_basket div,
div.rez_basket div {
  margin: 0 auto !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.stock_bar {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 7px;
  background-color: #eee;
  height: 14px;
  overflow: hidden;
  max-width: 60px;
}
.stock_bar .fill {
  height: 100%;
  background-color: #00cb2b;
}
.stock_bar .medium {
  background-color: #ffeb3b;
}
.stock_bar .low {
  background-color: #FA0B49;
}
.stock_bar .overlay-bars {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: 100%;
}
.stock_bar .overlay-bars div {
  width: 100%;
  height: 100%;
  border-right: 1px solid #ccc;
}
.filtr_panel_header {
  background: #9B9B9B;
  color: #fff;
  border-radius: 20px 20px 0 0;
  display: none;
  cursor: pointer;
  height: auto;
  left: calc(100% + 2px);
  top: 45px;
  min-width: 115px;
  padding: 10px 20px;
  position: absolute;
  text-align: center;
  z-index: 1000;
  -webkit-transform: rotate(90deg) translateY(44px);
  transform: rotate(90deg) translateY(44px);
}
.filtr_panel_header a {
  color: #fff;
}
.filtr_panel_header a:hover {
  color: #fff;
}
.filtr_panel_header:hover {
  background: #eee;
}
.filtr_panel {
  position: relative;
  float: left;
  width: 240px;
  height: 100%;
  z-index: 1000;
  margin-right: 10px;
  color: #757575;
}
.filtr_panel h1 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 12pt;
  color: #000;
}
.filtr_panel .filtr_group {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
.filtr_panel .group_back {
  margin: 0px 0px 10px 0px;
  font-size: 12pt;
}
.filtr_panel .group_items li {
  margin: 4px 5px;
  font-size: 10pt;
}
.filtr_panel .filter_items li {
  margin: 4px 5px;
  color: #424242;
  /*FOR IE*/
}
.filtr_panel .filter_items li span {
  font-size: 12pt;
  display: block;
}
.filtr_panel .filter_items li label {
  position: relative;
  display: inline-block;
  width: 100%;
}
.filtr_panel .filter_items li label::after {
  content: "\25BE";
  position: absolute;
  top: 7pt;
  right: 4pt;
  bottom: 0;
  width: 14pt;
  line-height: 14pt;
  vertical-align: middle;
  text-align: center;
  color: #424242;
  font-size: 14pt;
  font-weight: 500;
  pointer-events: none;
}
.filtr_panel .filter_items li select {
  display: block;
  width: 100%;
  margin: 5px 0px 5px 0px;
  padding: 0px 10px;
  height: 28px;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid #ADADAD;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* remove default arrow */
}
.filtr_panel .filter_items li select option {
  padding: 1px 5px 1px 3px;
}
.filtr_panel .filter_items li select option[selected] {
  color: #757575;
}
.filtr_panel .filter_items li select option:nth-child(even) {
  background-color: #eee;
}
.filtr_panel .filter_items li select option:nth-child(odd) {
  background-color: #fff;
}
.filtr_panel .filter_items li select:focus {
  box-shadow: 0 0 8pt 1pt #9B9B9B;
}
.filtr_panel .filter_items li select::-ms-expand {
  display: none;
}
.filtr_panel .filter_items li.options {
  margin: 10px 0px;
  font-size: 11pt;
}
.filtered_panel {
  margin-left: 250px;
  padding-bottom: 10px;
  width: calc(100% - 255px);
}
.sort_items li,
.sort_panel li {
  margin: 0px;
  color: #424242;
  font-size: 11pt;
  /*FOR IE*/
}
.sort_items li label,
.sort_panel li label {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sort_items li label::after,
.sort_panel li label::after {
  content: "\25BE";
  position: absolute;
  top: 2pt;
  right: 4pt;
  bottom: 0;
  width: 14pt;
  line-height: 14pt;
  vertical-align: middle;
  text-align: center;
  color: #424242;
  font-size: 12pt;
  font-weight: 200;
  pointer-events: none;
}
.sort_items li select,
.sort_panel li select {
  width: 100%;
  margin: 0px;
  padding: 0px 10px;
  height: 24px;
  line-height: 22px;
  border-radius: 4px;
  border: 1px solid #ADADAD;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* remove default arrow */
}
.sort_items li select option,
.sort_panel li select option {
  padding: 1px 5px 1px 3px;
}
.sort_items li select option[selected],
.sort_panel li select option[selected] {
  color: #757575;
}
.sort_items li select option:nth-child(even),
.sort_panel li select option:nth-child(even) {
  background-color: #eee;
}
.sort_items li select option:nth-child(odd),
.sort_panel li select option:nth-child(odd) {
  background-color: #fff;
}
.sort_items li select:focus,
.sort_panel li select:focus {
  box-shadow: 0 0 8pt 1pt #9B9B9B;
}
.sort_items li select::-ms-expand,
.sort_panel li select::-ms-expand {
  display: none;
}
@media only screen and (max-width: 767px) {
  .filtr_panel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: auto;
  }
  .filtr_panel_header {
    display: block;
  }
  .filtr_panel_box {
    display: none;
    width: 290px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    transition: 0.6s transform ease-in-out;
  }
  .filtered_panel {
    margin-left: 0px;
    width: 100%;
  }
}
@media only screen and (min-width: 767px) {
  .panel_basket {
    font-size: 14px;
    width: 450px !important;
  }
  .panel_basket .basket_item {
    height: 50px;
  }
  .panel_basket img {
    max-height: 36px;
    max-width: 36px;
  }
  .filtr_panel_box {
    display: block;
  }
}
.filtr_header {
  padding: 10px;
  font-size: 14pt;
}
.filtr_box {
  margin: 10px;
  padding: 10px;
  border: 1px solid #e6e6e6;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px;
}
.filtr_box_items {
  margin-top: 5px;
  margin-bottom: 5px;
}
.act_filters {
  margin-bottom: 3px;
}
.act_filters span {
  font-size: 11pt;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 15px;
  padding: 4px;
  padding-left: 8px;
  padding-right: 20px;
  margin: 2px;
  margin-right: 4px;
  position: relative;
  vertical-align: middle;
  display: inline-block;
}
.act_filters .close {
  color: #f00;
  display: inline-block;
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  height: 18px;
  line-height: 18px;
  margin-left: 4px;
  position: absolute;
  right: 1px;
  text-align: center;
  top: 3px;
  vertical-align: middle;
  width: 18px;
}
.showhide {
  margin: 0px;
  padding: 0px;
  padding-top: 5px;
  cursor: pointer;
}
progress[value] {
  max-width: 150px;
}
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  width: 100%;
  height: 20px;
}
.progress-bar span {
  background-color: royalblue;
  border-radius: 3px;
  display: block;
  text-indent: -9999px;
}
input.grid_z + label,
input.grid_k + label,
input.grid_l + label {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  background: url(base_assets/svg/grid_z.svg) left center no-repeat;
}
input.grid_z + label {
  background-image: url(base_assets/svg/grid_z.svg);
}
input.grid_l + label {
  background-image: url(base_assets/svg/grid_l.svg);
}
input.grid_k + label {
  background-image: url(base_assets/svg/grid_k.svg);
}
input.grid_z:checked + label {
  background-image: url(base_assets/svg/grid_z_active.svg);
}
input.grid_l:checked + label {
  background-image: url(base_assets/svg/grid_l_active.svg);
}
input.grid_k:checked + label {
  background-image: url(base_assets/svg/grid_k_active.svg);
}
.news.section div.grid_footer {
  display: none;
}
@media only screen and (min-width: 480px) {
  div.gridbox {
    width: calc(100%/2);
  }
}
@media only screen and (min-width: 992px) {
  div.gridbox {
    width: calc(100%/3);
  }
  .news.section div.gridbox {
    width: calc(100%/2);
  }
  div.grid div.image img {
    max-width: 240px;
  }
}
@media only screen and (min-width: 1200px) {
  .news.section div.gridbox {
    width: calc(100%/4);
  }
}
@media only screen and (min-width: 1366px) {
  div.gridbox {
    width: calc(100%/4);
  }
}
/* inputs */
input[type='text'].bjr_input,
input[type='password'].bjr_input,
input[type='email'].bjr_input,
input[type='number'].bjr_input,
input[type='date'].bjr_input,
textarea.bjr_input,
select.bjr_input {
  margin: 0px 10px 0px 0px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  font-size: 14pt;
  border: 1px solid #ADADAD;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
div.bjr_search {
  display: inline-block;
  position: relative;
  height: 40px;
  margin-right: 10px;
}
.bjr_search input {
  margin: 0px;
  padding: 5px 10px;
  height: 40px;
  font-size: 14pt;
  border: 1px solid #ADADAD;
  border-radius: 25px;
  padding-left: 20px;
  padding-right: 65px;
}
.bjr_search button {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 40px;
  width: 66px;
  padding: 0px;
}
.bjr_gradient_button {
  background-color: #0A49BB;
  background-image: linear-gradient(to right, #0A49BB, #0796E2);
  border-radius: 25px;
  border: 0px solid;
  text-align: center;
  color: #fff;
}
.bjr_back_button {
  background-color: #E88F0C;
  background-image: none;
  border-radius: 25px;
  border: 0px solid;
  text-align: center;
  color: #fff;
}
.bjr_destroy_button {
  background-color: #D50303;
  background-image: none;
  border-radius: 25px;
  border: 0px solid;
  text-align: center;
  color: #fff;
}
.bjr_accept_button {
  background-color: #66bb6a;
  background-image: none;
  border-radius: 25px;
  border: 0px solid;
  text-align: center;
  color: #fff;
}
.bjr_gradient_button.sm2 {
  margin: 15px 15px;
  padding: 5px 20px;
  font-size: 12pt;
  color: #fff;
}
.bjr_gradient_button.sm2 :hover {
  color: #fff;
}
.bjr_gradient_button[disabled] {
  background-color: #ddd;
  background-image: none;
}
.dropdown-menu a.bjr_gradient_button {
  margin: 15px 45px;
  padding: 5px 20px;
  font-size: 10pt;
  color: #fff;
}
.dropdown-menu a.bjr_gradient_button :hover {
  color: #fff;
}
input[type='radio'].bjr_input,
input[type='checkbox'].bjr_input {
  display: none;
  cursor: pointer;
  margin-right: 10px;
}
input[type='radio'].bjr_input + label,
input[type='checkbox'].bjr_input + label {
  display: inline-block;
  position: relative;
  padding-left: 27px;
  margin-right: 15px;
  font-size: 11pt;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
}
input[type='radio'].bjr_input + label:before,
input[type='checkbox'].bjr_input + label:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  border-radius: 4px;
  border: 1px solid #ADADAD;
}
input[type='radio'].bjr_input:checked + label:before,
input[type='checkbox'].bjr_input:checked + label:before {
  background: url(base_assets/images/input_checked.png) left center no-repeat;
  background-position: 3px 3px;
}
.list_header {
  padding-bottom: 8px;
  padding-top: 2px;
  font-size: 16pt;
  font-weight: bold;
  color: #424242;
  display: inline;
}
.list_header a {
  color: #424242;
}
.groups {
  margin: 10px;
  font-size: 14pt;
}
.groups div {
  padding: 2px 0px;
}
.groups .font_reduce {
  margin: 2px 15px;
  font-size: 80%;
}
.counter {
  color: #757575;
}
.tow_details .title {
  margin-bottom: 5px;
}
.tow_details #tow_images {
  padding: 15px;
  height: 250px;
}
.tow_details #tow_images .item {
  text-align: center;
}
.tow_details #tow_images .tow_images_span {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.tow_details #tow_images img {
  margin: auto;
  vertical-align: middle;
  max-height: 230px;
  max-width: 100%;
}
.tow_details #tow_images .carousel-indicators {
  bottom: -15px;
  left: 0px;
  margin: 0px;
  width: 100%;
}
.tow_details #tow_images .carousel-indicators li {
  border-color: #02A0E9;
  margin: 1px 5px;
}
.tow_details #tow_images .carousel-indicators li.active {
  background-color: #02A0E9;
  margin: 0px 5px;
}
.tow_details .specification li {
  padding: 3px;
  font-size: 10pt;
}
.tow_details .specification li > span {
  color: #757575;
  font-weight: normal;
}
.stars {
  display: inline;
  font-size: 15px;
}
.stars .star-icon {
  color: #B5B5B5;
  font-family: serif;
  position: relative;
  padding: 0;
  margin: 0;
  left: 0px;
  top: 0px;
  height: 15px;
}
.stars .star-icon.big {
  font-size: 34px;
  height: 25px;
}
.stars .star-icon.full {
  color: #555555;
}
.stars .star-icon.half:before {
  color: #555555;
  content: '★';
  /* Full star in UTF8 */
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0px;
  top: 1px;
  bottom: 1px;
  width: 50%;
  overflow: hidden;
}
span.ocena {
  overflow: hidden;
  vertical-align: bottom;
  display: inline-block !important;
  width: auto;
  height: 30px;
  padding-top: 0px !important;
  color: #B5B5B5;
}
span.ocena > input {
  display: none;
}
span.ocena > input:checked ~ label {
  color: #555555;
}
span.ocena > label {
  position: relative;
  display: block;
  float: right;
  padding-top: 0px !important;
  font-size: 28px;
}
.modal_background {
  z-index: 99995;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal_form {
  z-index: 99996;
  position: fixed;
  left: 15%;
  top: 50%;
  margin-top: -160px;
  max-height: 320px;
  width: 70%;
  padding: 5px;
  background: #fff;
  border: 3px solid #444;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px;
  color: #4682b4;
  overflow-x: hidden;
  overflow-y: auto;
}
/* bootstap */
/* container
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 1170px;
}

@media only screen and (min-width: 768px) {
	.container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media only screen and (min-width: 1366px) {
	.container {
	    width: 1366px;
	}

	.container-fluid {
		max-width: 1366px;		
	}
}
*/
.bb_header .navbar-toggle {
  float: left;
}
.bb_header .navbar-toggle .icon-bar {
  background-color: #424242;
}
.breadcrumb {
  background-color: #fff;
  margin-bottom: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 10pt;
  color: #757575;
}
.breadcrumb a {
  color: #757575;
}
.nav-tabs.nav-justified > li > a,
.nav-tabs.nav-justified > li > a:focus,
.nav-tabs.nav-justified > li > a:hover {
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
  border-bottom-width: 1px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:focus,
.nav-tabs.nav-justified > .active > a:hover {
  border-bottom-width: 2px;
  border-bottom-color: #029FE8;
}
.nav .open > a {
  background-color: #fff !important;
  z-index: 1020;
}
.nav .open > a :hover {
  background-color: #fff !important;
}
.nav .open > a :before {
  box-shadow: -12px 6px 12px -4px rgba(0, 0, 0, 0.175);
  content: " ";
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0;
  width: 12px;
  z-index: 1000;
}
.nav .open > a :after {
  box-shadow: 12px 6px 12px -4px rgba(0, 0, 0, 0.175);
  content: " ";
  height: 100%;
  position: absolute;
  right: 0px;
  width: 12px;
}
.navbar-nav > li > .dropdown-menu {
  border: 0px;
  margin-top: -12px;
}
.navbar-nav > li > .dropdown-menu > div {
  margin: 20px 10px 5px 10px;
}
.article {
  border-top: 1px solid #d0d5da;
  min-height: 160px;
}
.article .content {
  padding-bottom: 15px;
  padding-top: 15px;
}
.article > div {
  margin-bottom: 0.5em;
  padding-bottom: 15px;
  padding-top: 15px;
}
.article > div > div > a {
  color: #ADADAD;
}
.article .image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 130px;
  max-width: 100%;
}
.date-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  color: #000;
  font-size: 12px;
  height: 50px;
  line-height: 1.2em;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 56px;
}
.date-box span {
  color: #757575;
  font-size: 10px;
  display: block;
}
.ui-dialog {
  z-index: 99997 !important ;
}
/* bootstrap fix for date controls */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  line-height: initial;
}

/* --- warstwa modern --- */
/* =========================================================================
   Skorka "modern" dla B2B - warstwa nadpisan (nowoczesny minimalizm).
   Ladowana PO main.css (skorka podstawowa), wiec nadpisuje reguly bazowe.
   Akcent kolorystyczny B2B: #02A0E9 (jeden schemat). Tutaj zmieniamy neutralne
   kolory, odstepy, zaokraglenia i cienie - bez zmiany markupu/szablonow.
   ========================================================================= */

:root{
  --accent:#02A0E9;        /* akcent B2B (przyciski, aktywne elementy, linki) */
  --accent-d:#0288c7;      /* akcent ciemniejszy (hover) */
  --btn-warn:#ef9410;      /* "Powrot" (bjr_back_button) - domyslnie pomaranczowy; styl moze nadpisac */
  --btn-warn-d:#d67f0a;
  --btn-danger:#e03131;    /* "Anuluj/Usun" (bjr_destroy_button) - domyslnie czerwony; styl moze nadpisac */
  --btn-danger-d:#c92a2a;
  --m-ink:#1f2933;         /* glowny tekst */
  --m-muted:#6b7280;       /* tekst drugorzedny */
  --m-line:#eceef1;        /* delikatne linie */
  --m-bg:#edf0f4;          /* tlo strony (jednolite z body) */
  --m-card:#ffffff;        /* tlo kart */
  --m-radius:14px;         /* duze zaokraglenie (karty) */
  --m-radius-sm:10px;      /* mniejsze (przyciski, inputy) */
  --m-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --m-shadow-hover:0 6px 24px rgba(16,24,40,.12);
}

/* ---------- Typografia / baza ---------- */
body{
  font-family:'Roboto','Inter',-apple-system,'Segoe UI',sans-serif;
  color:var(--m-ink);
  background:var(--m-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#content,.content,.background2{background:var(--m-bg)}
a{color:var(--m-ink)}
a:hover,a:focus{color:var(--accent)}
h1,.list_header{letter-spacing:-.01em}
.netto,.netto span{color:var(--m-muted) !important}

/* ---------- Kontener / sekcje ---------- */
.section{padding-top:28px;padding-bottom:40px}
#contentBody div.page{margin:24px}

/* ---------- Header / nawigacja ----------
   UWAGA: uklad naglowka B2B (float + absolutnie pozycjonowane plakietki koszykow)
   jest dostrojony w main.css do stalej wysokosci ~85px. Tutaj TYLKO lekkie
   odswiezenie wizualne, BEZ zmiany ukladu - dzieki temu koszyki (do 5) oraz
   wielopozycyjne menu dzialaja jak w bazowej skorce. */
.navbar.bb_header{
  border-image:none;
  border-top:0;
  border-bottom:1px solid var(--m-line);
  box-shadow:0 1px 4px rgba(16,24,40,.06);
}
.navbar-fixed-top.floating{box-shadow:0 2px 10px rgba(16,24,40,.12)}
.bb_header .dropdown-menu{border:1px solid var(--m-line); border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.14); margin-top:8px}

/* Menu gorne */
nav.menu_top,#menu_top .nav{background:transparent}
nav.menu_top ul.nav>li{border-top:3px solid transparent}
nav.menu_top ul.nav>li>a{color:var(--m-muted); font-weight:500}
nav.menu_top ul.nav>li>a:hover{color:var(--m-ink); background:transparent}
nav.menu_top ul.nav>li.active{border-top-color:var(--accent); border-image:none}
nav.menu_top ul.nav>li.active>a{color:var(--m-ink); background:transparent}
nav.menu_top ul.nav>li:not(:last-child)>a{border-right:0}
.badge{background:var(--accent); border-radius:999px; font-weight:600}

/* ---------- Breadcrumb ---------- */
.breadcrumb{background:transparent;padding-left:0;font-size:13px;color:var(--m-muted)}
.breadcrumb a{color:var(--m-muted)}
.breadcrumb a:hover{color:var(--accent)}

/* ---------- Przyciski ---------- */
input[type='button'].button,input[type='submit'].button,button.button,.button{
  border-radius:var(--m-radius-sm);
  padding:12px 22px;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
.button:hover{box-shadow:var(--m-shadow)}
.bjr_gradient_button{
  background-image:none;            /* plasko, kolor (akcent) */
  background-color:var(--accent);
  border:0;
  border-radius:var(--m-radius-sm);
  box-shadow:0 1px 2px rgba(16,24,40,.10);
  color:#fff;
}
.bjr_gradient_button:hover{background-color:var(--accent-d);filter:none;box-shadow:var(--m-shadow)}
.bjr_back_button,.back_button{background-image:none;border-radius:var(--m-radius-sm)}
/* Rozroznienie przyciskow akcji wg znaczenia (modern): Powrot=pomaranczowy, Anuluj/Usun=czerwony,
   Zatwierdz/domyslny=akcent. Reguly PO .bjr_gradient_button, wiec wygrywaja kolorem (ta sama specyficznosc). */
.bjr_back_button{background-color:var(--btn-warn)}
.bjr_back_button:hover{background-color:var(--btn-warn-d)}
.bjr_destroy_button{background-color:var(--btn-danger)}
.bjr_destroy_button:hover{background-color:var(--btn-danger-d)}

/* ---------- Pola formularzy ---------- */
input[type='text'].bjr_input,input[type='password'].bjr_input,input[type='email'].bjr_input,
input[type='number'].bjr_input,input[type='date'].bjr_input,textarea.bjr_input,select.bjr_input{
  border:1px solid #dfe3e8;
  border-radius:var(--m-radius-sm);
  padding:11px 14px;
}
input.bjr_input:focus,textarea.bjr_input:focus,select.bjr_input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(2,160,233,.15);
}
form.form div.header{background:var(--m-card);border-bottom:1px solid var(--m-line)}

/* ---------- Wyszukiwarka ---------- */
.bjr_search input{
  border:1px solid #dfe3e8;
  border-radius:var(--m-radius-sm);
  background:var(--m-card);
}
.bjr_search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(2,160,233,.15)}

/* ---------- Siatka / karty produktow ---------- */
div.grid{background:transparent;border-bottom:0}
div.gridbox{
  background:var(--m-card);
  border:1px solid var(--m-line);
  border-radius:var(--m-radius);
  margin:0;
  padding:16px;
  box-shadow:var(--m-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
div.gridbox:hover{
  transform:translateY(-3px);
  box-shadow:var(--m-shadow-hover);
}
div.grid div.image{height:120px;margin:8px 8px 14px}
div.grid div.image img{max-height:120px}
div.gridbox span.title{height:auto;max-height:42px;font-weight:600;line-height:1.35}
div.gridbox div.bottom span.brutto .bold,
div.gridbox div.bottom .bold{font-size:13.5pt}
div.gridbox div.promotion>span,table.grid td div.promotion>span{
  border-radius:999px;
  font-weight:600;
}
div.gridbox div.replacements>span,table.grid td div.replacements>span{border-radius:999px}

/* ---------- Tabela / lista produktow ----------
   Cala lista jako biala karta na szarym tle. */
.grid_wrapper{
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  overflow:hidden;
}
table.grid{border-spacing:0;background:#fff}
table.grid th{
  border-top:0;
  border-bottom:1px solid #dfe3e8;
  color:var(--m-muted);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.04em;
  padding:14px 12px;
}
table.grid tbody tr:nth-child(odd),
table.grid tbody tr:nth-child(even){background:#fff}
table.grid tbody tr{border-bottom:1px solid #e6e8eb}
table.grid tbody tr:last-child{border-bottom:0}
table.grid tr,table.grid td{border-color:#e6e8eb}
table.grid td{padding:14px 12px}
table.grid tbody tr:hover{background:#f3f6fa !important; box-shadow:none}
table.grid td.img img{border:1px solid var(--m-line);border-radius:8px}
table.grid td .omni,table.grid td span.omni{font-size:10px;line-height:1.2;color:var(--m-muted)}

/* ---------- Karta produktu (dodawanie do koszyka) ---------- */
form.add_to_basket_box{
  border:1px solid var(--m-line);
  border-radius:var(--m-radius);
  padding:24px;
  background:var(--m-card);
  box-shadow:var(--m-shadow);
}
form.add_to_basket_box span.omni{display:block;color:var(--m-muted);font-size:12px;margin:2px 10px 8px}
.tow_details .specification li{border-bottom:1px solid var(--m-line)}

/* --- Szczegoly produktu: opis i galeria na bialej karcie (czytelnosc) --- */
.tow_details .tab-content{
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
  padding:24px;
  margin-top:14px;
}
.tow_details .tab-pane{background:transparent}
.tow_details #tow_images{
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.tow_details #tow_opis{color:var(--m-ink); line-height:1.6}
.tow_details #tow_opis *{background-color:transparent !important}
.tow_details #tow_opis a{color:var(--accent)}

/* --- Zakladki (OPIS / KOMENTARZE): czyste, podkreslenie aktywnej --- */
.tow_details .nav-tabs.nav-justified{display:flex; border-bottom:1px solid var(--m-line)}
.tow_details .nav-tabs.nav-justified>li{flex:0 0 auto; float:none; width:auto; display:block}
.tow_details .nav-tabs>li>a{
  margin:0;
  padding:14px 24px;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0;
  background:transparent !important;
  color:var(--m-muted);
  font-weight:500;
  font-size:13px;
  letter-spacing:.03em;
}
.tow_details .nav-tabs>li>a:hover{color:var(--m-ink); background:transparent !important}
.tow_details .nav-tabs>li.active>a,
.tow_details .nav-tabs>li.active>a:hover,
.tow_details .nav-tabs>li.active>a:focus{
  color:var(--m-ink) !important;
  background:transparent !important;
  border-bottom:2px solid var(--accent) !important;
}

/* ---------- Koszyk / panele boczne ---------- */
.basket,.panel,.box{border-radius:var(--m-radius)}
.wid_box,.widget{
  background:var(--m-card);
  border:1px solid var(--m-line);
  border-radius:var(--m-radius);
  box-shadow:var(--m-shadow);
}

/* ---------- Stopka ---------- */
.footer{background:transparent;border-top:1px solid var(--m-line);color:var(--m-muted)}
.footer a{color:var(--m-muted)}
.footer a:hover{color:var(--accent)}
.footer .fsection{padding-top:18px}

/* ---------- Drobne / modale ---------- */
.modal-content{border:0;border-radius:var(--m-radius);box-shadow:0 20px 60px rgba(16,24,40,.25)}
.modal-header{border-bottom:1px solid var(--m-line)}
.modal-footer{border-top:1px solid var(--m-line)}
hr{border-color:var(--m-line)}

/* =========================================================================
   TOWARY (lista + karta) -- dociagniecie wygladu do wersji B2C "modern".
   Klasy wspoldzielone z szablonami (gridbox, table.grid, stock_bar, stars,
   add_to_basket, wyprzedaz...). Akcent #02A0E9.
   ========================================================================= */

/* Siatka kafelkow: CSS Grid (rowne wysokosci, auto liczba kolumn).
   :has() ogranicza regule tylko do siatek z kafelkami (nie psuje .grid w formularzach) */
div.grid:has(> .gridbox){
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
div.grid:has(> .gridbox) div.gridbox{
  float:none;width:auto;display:flex;flex-direction:column;box-sizing:border-box;
  margin:0;border:1px solid #e9ebef;border-radius:16px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
div.grid div.gridbox div.image{height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:8px 8px 14px}
div.grid div.gridbox div.image img{max-height:140px;width:auto;border-radius:8px;transition:transform .3s ease}
div.gridbox:hover{transform:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
div.gridbox:hover div.image img{transform:scale(1.06)}
div.gridbox span.title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:auto;min-height:38px;max-height:42px;margin-bottom:4px;white-space:normal;font-weight:600;line-height:1.35;
}
div.gridbox div.bottom{flex:1 1 auto}
div.gridbox div.add_to_basket{margin-top:auto}
div.gridbox .bottom>span{height:auto;overflow:visible;white-space:normal;display:block;margin:3px 0}
div.gridbox .bottom .brutto{color:var(--m-muted);font-size:12px}
div.gridbox .bottom .brutto .bold{display:inline;color:var(--m-ink);font-size:16px;font-weight:700}
div.gridbox .bottom .netto{color:var(--m-muted);font-size:12px}
div.gridbox .bottom .netto .bold{color:var(--m-muted);font-weight:500;font-size:13px}

/* Badge: promocja / wyprzedaz / zamienniki (pigulki) */
div.gridbox div.promotion>span,table.grid td div.promotion>span,
div.gridbox div.wyprzedaz>span,table.grid td div.wyprzedaz>span,
div.gridbox div.replacements>span,table.grid td div.replacements>span{
  border-radius:999px;font-weight:600;
}
div.gridbox div.wyprzedaz>span,table.grid td div.wyprzedaz>span{background:#7c3aed}

/* Oceny (gwiazdki) */
.stars .star-icon{color:#d6dae0}
.stars .star-icon.full{color:#f5b301}
.stars .star-icon.half:before{color:#f5b301}

/* Stepper ilosci jako jeden zaokraglony modul */
.add_to_basket .row,.edit_basket .row,.rez_basket .row{
  display:flex;align-items:stretch;
  border:1px solid #e2e6ea;border-radius:10px;background:#fff;overflow:hidden;
}
.add_to_basket .row>div,.edit_basket .row>div,.rez_basket .row>div{padding:0 !important;margin:0 !important}
.add_to_basket .row>div.col-xs-3,.add_to_basket .row>div.col-xs-4,
.edit_basket .row>div.col-xs-3,.edit_basket .row>div.col-xs-4,
.rez_basket .row>div.col-xs-3,.rez_basket .row>div.col-xs-4{flex:0 0 40px;width:40px !important}
.add_to_basket .row>div.col-xs-6,.edit_basket .row>div.col-xs-6,.rez_basket .row>div.col-xs-6{flex:1 1 auto;width:auto !important}
.add_to_basket .row button.minus,.add_to_basket .row button.plus,
.edit_basket .row button.minus,.edit_basket .row button.plus,
.rez_basket .row button.minus,.rez_basket .row button.plus{
  position:relative;border:0 !important;margin:0 !important;width:40px;height:38px;background:#fff;
}
.add_to_basket .row button.minus:before,.add_to_basket .row button.plus:before,
.edit_basket .row button.minus:before,.edit_basket .row button.plus:before,
.rez_basket .row button.minus:before,.rez_basket .row button.plus:before{left:0;top:0;width:100%;height:100%}
.add_to_basket .row input.amount,.edit_basket .row input.amount,.rez_basket .row input.amount{
  border:0 !important;border-left:1px solid #eceef1;border-right:1px solid #eceef1;border-radius:0;
  height:38px;width:100%;max-width:none;text-align:center;
}
.add_to_basket .amount_txt{padding-top:6px}
.add_to_basket .basket,.edit_basket .basket{box-shadow:0 1px 2px rgba(16,24,40,.12)}

/* Graficzny "Stan" -- smukly, zaokraglony pasek (jak w B2C) */
.stock_bar{max-width:130px;height:8px;border:0;border-radius:999px;background:#e6e8eb;overflow:hidden}
.stock_bar .fill{height:100%;background-color:#00cb2b}
.stock_bar .fill.medium,.stock_bar .medium{background-color:#ffb300}
.stock_bar .fill.low,.stock_bar .low{background-color:#FA0B49}
.stock_bar .overlay-bars div{border-right:2px solid #fff}
.stock_bar .overlay-bars div:last-child{border-right:0}

/* Filtry / kategorie jako biale karty */
.filtr_panel .filtr_group,.filtr_box{
  background:#fff;border:1px solid var(--m-line);border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
}

/* =========================================================================
   SZEROKOSC STRONY -- wysrodkowany kontener (nie na caly ekran), responsywnie.
   ========================================================================= */
@media (min-width:1200px){
  .bb_header>.container-fluid,
  .bb_container{
    max-width:1600px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .bb_container{margin-left:16px;margin-right:16px}
}

/* Responsywnosc */
@media (max-width:767px){
  #contentBody div.page{margin:12px}
  div.grid:has(> .gridbox){grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}

/* =========================================================================
   KOSZYKI (modern) - czyste "chipy" flex zamiast float + absolutnych plakietek.
   Szablon: userdata_moto/modern/page_header_nav_basket.tpl (marker .baskets_modern).
   Zachowane klasy-haki JS (li.basket, state_*, basket_active, basket_show, badge basket_info).
   ========================================================================= */
.baskets_modern{
  float:right; margin:18px 0 0 !important; padding:0 !important;
  display:flex; align-items:center; gap:6px;
  max-width:100%; overflow:visible; list-style:none;   /* visible: popup .panel_basket nie moze byc obcinany */
}
.baskets_modern::-webkit-scrollbar{height:6px}
.baskets_modern::-webkit-scrollbar-thumb{background:#cfd6dd; border-radius:999px}
.baskets_modern>li{float:none !important; margin:0 !important; padding:0 !important}

/* przycisk "+" (nowe zamowienie) */
.baskets_modern .navbar-nav-add{display:flex; align-items:center}
.baskets_modern .navbar-nav-add>a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:#eef3f9;
  transition:box-shadow .14s ease, transform .14s ease, background-color .14s ease;
}
/* hover "+" (nowe zamowienie) - to samo swiecenie co kafelki koszyka;
   wyzsza specyficznosc niz regula transparent w naglowku, wiec tlo nie znika */
.bb_header .baskets_modern .navbar-nav-add>a:hover,
.bb_header .baskets_modern .navbar-nav-add>a:focus{
  background:#eef3f9 !important;
  box-shadow:0 0 0 1px var(--accent), 0 6px 16px rgba(16,24,40,.16);
  transform:translateY(-1px);
}
.baskets_modern .navbar-nav-add img{width:14px; height:14px; position:static}

/* chip koszyka */
.baskets_modern li.bchip{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  height:46px; box-sizing:border-box;
  border:1px solid var(--m-line); border-radius:12px; background:#fff; padding:4px 8px;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.baskets_modern li.bchip.basket_active{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
/* hover - swieci caly kafelek koszyka (akcent, theme-aware) */
.baskets_modern li.bchip:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 6px 16px rgba(16,24,40,.16); transform:translateY(-1px)}
.baskets_modern li.bchip.basket_active:hover{box-shadow:inset 0 0 0 1px var(--accent), 0 6px 16px rgba(16,24,40,.16)}
.baskets_modern li.bchip:hover .bchip_no{color:var(--accent)}
/* Bootstrap daje a:hover/:focus/.open szare tlo (#eee) w obrebie linku - kasujemy w naglowku,
   zeby zostalo samo swiecenie calego kafelka/avatara (bez szarej plamy na <a>) */
.bb_header .navbar-nav > li > a:hover,
.bb_header .navbar-nav > li > a:focus,
.bb_header .navbar-nav > li.open > a,
.bb_header .baskets_modern li.bchip > a:hover,
.bb_header .baskets_modern li.bchip > a:focus{background-color:transparent !important}
.baskets_modern .bchip_main{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--m-ink)}
.baskets_modern .bchip_ico{position:relative; display:inline-flex; align-items:center}
.baskets_modern .bchip_ico img{height:24px; width:auto}
.baskets_modern .bchip_count.badge{
  position:static !important; top:auto !important; right:auto !important;
  margin-left:-8px; margin-top:-12px;
  padding:2px 6px; border-radius:999px; font-size:10px; line-height:1; color:#fff;
}
.baskets_modern .bchip_txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.baskets_modern .bchip_no{font-size:10px; color:var(--m-muted); white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis}
.baskets_modern .bchip_sum{font-size:11px; font-weight:600; color:var(--m-ink); white-space:nowrap}
.baskets_modern li.bchip.basket_active .bchip_no{color:var(--m-ink)}
.baskets_modern .bchip_more{display:inline-flex; align-items:center; padding:0 2px}
.baskets_modern .bchip_more img{height:10px; width:auto}

/* waski ekran: tylko ikona + licznik (oszczednosc miejsca, jak basket_compact w bazie) */
@media (max-width:1500px){
  .baskets_modern .bchip_txt{display:none}
}

/* =========================================================================
   PASEK FILTROW + PAGINACJA (modern) - wtopienie w szare tlo + odswiezenie.
   Klasy B2B: form.grid, .list_filters, .list_header, .list_breadcrumb,
   .bjr_search, .sort_panel, .grid_type (.grid_k/.grid_z/.grid_l), .grid_footer.
   ========================================================================= */
/* Tla paskow przezroczyste (main.css daje im biale bloki) */
form.grid,
form.grid fieldset,
form.grid .list_filters,
form.grid .row_filters,
.list_header,
.list_breadcrumb,
.breadcrumb,
div.grid_footer{background:transparent !important}
div.grid_list{overflow:visible}

/* Wyszukiwarka - mniejszy, wpuszczony przycisk (przycisk jest absolutny w main.css) */
.bjr_search{height:auto}
.bjr_search input{border-radius:12px; height:42px; padding-right:60px; border:1px solid #dfe3e8; background:#fff}
.bjr_search button.bjr_gradient_button{right:5px; top:5px; height:32px; width:46px; border-radius:9px; padding:0; box-shadow:none}
.bjr_search button.bjr_gradient_button img{height:18px}

/* Checkboxy filtrow (Promocje / Dostepne / Ulubione) */
.list_filters span{margin-right:14px; vertical-align:middle}
.list_filters label{font-weight:500; color:var(--m-ink)}

/* Przelacznik widoku (radio -> ikony) wyrownany w pionie; sort_panel zostaje blokiem */
.list_header .grid_type:not(.sort_panel){display:inline-flex; align-items:center; justify-content:flex-end; min-height:40px}

/* Paginacja: transparentny pasek, zaokraglone "pigulki", aktywna w akcencie */
div.grid_footer{height:auto; padding:14px 6px; text-align:center; color:var(--m-muted)}
div.grid_footer a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px; margin:0 2px;
  border-radius:9px; color:var(--m-ink); border:1px solid transparent; text-decoration:none;
}
div.grid_footer a:hover{background:#eef3f9; border-color:var(--m-line)}
div.grid_footer a.active{background:var(--accent) !important; color:#fff !important}

/* =========================================================================
   POPRAWKI WIDOKU PRODUKTOW (modern)
   ========================================================================= */
/* Sortowanie + przelacznik widoku razem, wyrownane do prawej (zeby nie "uciekaly") */
div.list_header{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
div.list_header > div[class*="col-sm-9"]{flex:1 1 auto; width:auto; max-width:none}
div.list_header > .grid_type{flex:0 0 auto; width:auto; max-width:none; min-width:0; padding-left:6px; padding-right:6px}

/* Karta: Kod / Kod EAN mniejsze (baza dawala im 13.5pt przez .bold), Punkty wyrazne */
div.gridbox .bottom .nekodtto{font-size:12px; color:var(--m-muted); margin:1px 0}
div.gridbox .bottom .nekodtto .bold{font-size:12px; font-weight:600; color:var(--m-ink)}
div.gridbox .bottom .punkty{font-size:12px; color:var(--m-ink)}
div.gridbox .bottom .punkty .brutto{color:var(--m-ink)}
div.gridbox .bottom .punkty b{color:var(--accent); font-weight:700}

/* Ulubione (TKH) - nowoczesna, okragla ikona serca (kontur=dodaj, wypelnione=dodane) */
.gridbox .tkh{position:absolute; top:10px; right:10px; z-index:6; margin:0}
.tkh a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background-color:#fff; border:1px solid var(--m-line);
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.tkh a:hover{border-color:var(--accent); box-shadow:0 3px 10px rgba(2,160,233,.20); transform:translateY(-1px)}
.tkh a img{display:none}
.tkh a:has(img[src*="tkh_add"]){background-image:url(svg/fav_add.svg)}
.tkh a:has(img[src*="tkh_del"]){background-image:url(svg/fav_del.svg)}

/* Liczba kafelkow w rzedzie: 4 (desktop) -> 3 -> 2, mobile osobno nizej */
@media (max-width:1366px){ div.grid:has(> .gridbox){grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:991px){  div.grid:has(> .gridbox){grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Filtr "Ulubione" (name=koszyk) jako serce - nadpisuje checkbox-box z main.css */
.list_filters input[type='checkbox'].bjr_input[name="koszyk"] + label:before{
  content:""; width:20px; height:20px; border:0 !important; border-radius:0; bottom:2px; margin-right:8px;
  background:url(svg/heart_o.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="koszyk"]:checked + label:before{
  background:url(svg/fav_del.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="koszyk"]:checked + label{color:var(--accent); font-weight:600}

/* =========================================================================
   ROZRACHUNKI (modern)
   ========================================================================= */
/* Pasek limit/saldo -> kompaktowe KPI (szablon: theme/modern/mod_main_kth_info.tpl) */
.kpi_bar{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; background:transparent; padding:0; margin:0 0 4px}
.kpi{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--m-line); border-radius:12px; padding:8px 14px; box-shadow:0 1px 2px rgba(16,24,40,.05); min-width:150px}
.kpi_ico{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; flex:0 0 auto; background:rgba(2,160,233,.10); color:var(--accent)}
.kpi_ico svg{width:18px; height:18px}
.kpi_box{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.kpi_lbl{font-size:11px; color:var(--m-muted); white-space:nowrap}
.kpi_val{font-size:15px; font-weight:700; color:var(--m-ink); white-space:nowrap}
.kpi.kpi_warn .kpi_ico{background:rgba(220,38,38,.10); color:#dc2626}
.kpi.kpi_warn .kpi_val{color:#dc2626}

/* Filtry radio jako "pigulki" (rozrachunki: Niezaplacone/Wszystkie; rezerwacje: Wszystkie/Czeka/Do realizacji) */
#doh_list_form fieldset{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
#doh_list_form .radio-inline,
#dzp_list_form .radio-inline{
  display:inline-flex; align-items:center; vertical-align:middle; margin:0 6px 0 0; padding:8px 16px;
  border:1px solid var(--m-line); border-radius:999px; background:#fff; color:var(--m-ink); cursor:pointer; font-weight:500;
}
#doh_list_form .radio-inline input,
#dzp_list_form .radio-inline input{display:none}
#doh_list_form .radio-inline:has(input:checked),
#dzp_list_form .radio-inline:has(input:checked){background:var(--accent); border-color:var(--accent); color:#fff}

/* Niezaplacone: TYLKO kolor tekstu (bez kolorowania tla calego wiersza).
   Nadpisuje userdata_moto/user_main.css (mocne czerwone/zolte tlo wierszy)
   - wyzsza specyficznosc selektora + !important. */
#doh_list table.grid tbody tr.overdue,
#doh_list table.grid tbody tr.overdue td{background-color:#fff !important; color:#dc2626 !important}
#doh_list table.grid tbody tr.overdue:hover td{background-color:#f6f8fb !important}
#doh_list table.grid tbody tr.near,
#doh_list table.grid tbody tr.near td{background-color:#fff !important; color:#b45309 !important}
#doh_list table.grid tbody tr.near:hover td{background-color:#f6f8fb !important}
#doh_list table.grid tbody tr.overdue td:nth-child(4),
#doh_list table.grid tbody tr.near td:nth-child(4){font-weight:700}

/* Rozrachunki: odstep KPI od menu + brak bialego "bloku" placeholdera (przed AJAX) */
#doh_list .read_box,
#doh_list .read_box .background2,
#doh_list .read_box form.grid,
#doh_list .read_box form.grid .header{background:transparent !important; border:0 !important; box-shadow:none !important; padding:0}
#doh_list .read_box{min-height:52px; margin-top:16px}
.kpi_bar{margin:0 0 14px}

/* Zakres dat: kalendarzowy guzik w akcencie (spojnie z reszta) */
#doh_list_form .input-group{margin-right:6px}
#doh_list_form .input-group .form-control{border:1px solid #dfe3e8; border-right:0; border-radius:10px 0 0 10px; height:38px; box-shadow:none}
#doh_list_form .input-group .input-group-addon{
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  border-radius:0 10px 10px 0; cursor:pointer;
}
#doh_list_form .input-group .input-group-addon .glyphicon{color:#fff}

/* =========================================================================
   Ikony akcji (podglad / pdf) + badge w menu (modern)
   ========================================================================= */
/* Nowoczesne ikony SVG zamiast PNG w kolumnie AKCJA (content:url podmienia obrazek) */
.grid_wrapper td a img[src*="podglad"],
.grid_wrapper td a img[src*="pdf.png"]{width:22px; height:22px; vertical-align:middle}
.grid_wrapper td a img[src*="podglad"]{content:url(svg/ico_preview.svg)}
.grid_wrapper td a img[src*="pdf.png"]{content:url(svg/ico_pdf.svg)}
.grid_wrapper td a:has(> img[src*="podglad"]),
.grid_wrapper td a:has(> img[src*="pdf.png"]){
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; vertical-align:middle; transition:background .12s ease;
}
.grid_wrapper td a:has(> img[src*="podglad"]):hover,
.grid_wrapper td a:has(> img[src*="pdf.png"]):hover{background:#eef3f9}

/* Badge w menu jako plakietka w rogu NAD ikona (nie na srodku) */
nav.menu_top ul.nav>li{position:relative}
nav.menu_top ul.nav>li>a span.badge{
  position:absolute; top:4px; right:auto; left:50%; margin-left:5px;
  background:var(--accent); color:#fff; border-radius:999px;
  font-size:9px; font-weight:700; line-height:1; padding:2px 5px; min-width:0;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(16,24,40,.25);
}

/* =========================================================================
   ZAMOWIENIA (modern)
   ========================================================================= */
/* Poprawka rozjechanego ukladu: pasek (filtr + import) jako flex, tabela ponizej.
   Przyczyna bugu: kolumny col-* (float) bez .row + .grid_wrapper{overflow:hidden} (BFC). */
#dzp_list > div:first-child{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:12px}
#dzp_list > div:first-child > [class*="col-"]{float:none; width:auto; max-width:none; padding:0}
#dzp_list > div:first-child > .col-xs-8,
#dzp_list > div:first-child > .col-sm-8{flex:1 1 240px}
#dzp_list_grid{clear:both}

/* Filtr statusu */
#dzp_list_form{margin:0}
#dzp_list_form select.form-control{border:1px solid #dfe3e8; border-radius:10px; height:40px; box-shadow:none; background:#fff; min-width:200px}
#dzp_list_form select.form-control:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,160,233,.15)}

/* Import CSV: bialy box, wielkosc jak filtr (jedna linia) */
#fileupload{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--m-line); border-radius:10px; padding:0 14px; height:40px; float:none; box-shadow:0 1px 2px rgba(16,24,40,.04)}
#fileupload > div{display:flex; align-items:center; gap:10px; margin:0; font-size:13px; color:var(--m-ink); white-space:nowrap}
#fileupload input[type=file]{font-size:12px; color:var(--m-muted); border:0; padding:0; max-width:100%}
#fileupload input[type=file]::file-selector-button{background:var(--accent); color:#fff; border:0; border-radius:8px; padding:6px 12px; margin-right:8px; cursor:pointer; font-weight:600; font-size:12px; transition:background .12s ease}
#fileupload input[type=file]::file-selector-button:hover{background:var(--accent-d)}
#fileupload input[type=file]::-webkit-file-upload-button{background:var(--accent); color:#fff; border:0; border-radius:8px; padding:6px 12px; margin-right:8px; cursor:pointer; font-weight:600; font-size:12px}

/* =========================================================================
   MINI-NAGLOWEK ZAMOWIENIA (uwagi / data / adres dostawy) - rezerwacje & szczegoly
   ========================================================================= */
form.dzp.grid.form{
  background:transparent; border:0; border-radius:0;
  padding:0; box-shadow:none; margin-bottom:12px;
}
form.dzp .inputs{display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px}
form.dzp .form-group{margin:0}
form.dzp label{color:var(--m-muted); font-weight:500; font-size:12px}
form.dzp textarea.form-control,
form.dzp input[type=date].form-control,
form.dzp input[type=text].form-control{border:1px solid #dfe3e8; border-radius:10px; box-shadow:none; background:#fff}
form.dzp textarea.form-control:focus,
form.dzp input.form-control:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,160,233,.15)}
form.dzp input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); vertical-align:middle; margin-left:4px}

/* Adres dostawy - czysta biala karta z polami */
/* Adres dostawy - naturalny formularz: biala karta, siatka 2-kolumnowa, etykieta NAD polem.
   Pola jak Ulica/Nr domu laduja obok siebie; Nazwa/E-mail/Lista adresow na pelna szerokosc. */
form.kad.grid.form{
  background:#fff; border:1px solid var(--m-line); border-radius:14px;
  padding:20px 22px; box-shadow:0 1px 2px rgba(16,24,40,.05);
}
form.kad.grid.form > br{display:none}                        /* <br> zbedne w siatce */
form.kad.grid.form > *{grid-column:1 / -1}                   /* sekcja, label-wymagane, przycisk -> pelna szerokosc */
form.kad.grid.form > .form-group{grid-column:span 2; margin:0}  /* domyslnie pole = 50% (2 z 4 kolumn) */
form.kad .form-group:has(select){grid-column:1 / -1}         /* Lista adresow - pelna szerokosc */
form.kad .form-group:has(input[name="nrdomu"]),
form.kad .form-group:has(input[name="nrlokalu"]){grid-column:span 1}  /* Nr domu / Nr lokalu = 25% (Ulica obok = 50%) */
form.kad .form-group:has(input[name="telefon"]){order:5}     /* Telefon przeniesiony na koniec - obok E-maila */
form.kad.grid.form > label.required{order:8}
form.kad.grid.form > button{order:9; justify-self:start}
/* "Zapamietaj adres dostawy" to zapis (nie destrukcja) -> akcent zamiast czerwieni, kompaktowy */
form.kad .bjr_destroy_button{background-color:var(--accent) !important; width:auto}
form.kad .bjr_destroy_button:hover{background-color:var(--accent-d) !important}

form.kad .sec_title{font-size:15px; font-weight:600; color:var(--m-ink); margin:0 0 12px}
form.kad .form-group{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
form.kad .form-group > label,
form.kad .control-label{text-align:left; width:auto !important; padding:0; margin:0; color:var(--m-muted); font-weight:600; font-size:12px}
form.kad .form-group > div[class*="col-sm"]{width:auto !important; padding:0; float:none}
form.kad .form-control{width:100%; border:1px solid #dfe3e8; border-radius:10px; height:42px; box-shadow:none; background:#fff}
form.kad select.form-control{height:42px}
form.kad .form-control:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,160,233,.15)}
form.kad label.required{margin:6px 0 0}
form.kad label.required span{color:var(--m-muted); font-size:12px}
form.kad .kad_actions{margin-top:14px}

/* =========================================================================
   AKTUALNOSCI (artykuly) - nowoczesne karty (modern)
   ========================================================================= */
.article{
  border-top:0; min-height:0; margin:0 0 16px;
  background:#fff; border:1px solid var(--m-line); border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
  padding:16px 18px;
  display:flex; align-items:flex-start; gap:18px;
}
.article>.col-xs-2:empty{display:none}                 /* puste kolumny dystansowe */
.article>div{float:none; width:auto; max-width:none; padding:0; margin:0}
.article .image{flex:0 0 150px; text-align:center}
.article .image img{max-width:150px; max-height:120px; border-radius:10px; margin:0}
.article>.col-xs-5{flex:1 1 auto; min-width:0}
.article h3{margin:0 0 6px; font-size:17px; font-weight:600; line-height:1.3}
.article h3 a{color:var(--m-ink)}
.article h3 a:hover{color:var(--accent)}
.article .content{padding:0; color:var(--m-muted); line-height:1.55}
.article>div>div>a{color:var(--accent) !important; font-weight:600}   /* "Zobacz wiecej" */
.article>.col-xs-1{flex:0 0 auto; margin-left:auto}
.date-box{border:1px solid var(--m-line); border-radius:10px; color:var(--m-ink); box-shadow:0 1px 2px rgba(16,24,40,.04)}
.date-box span{color:var(--m-muted)}

/* =========================================================================
   AKTUALNOSCI - KAFELKI (modern). Szablon: theme/modern/mod_main_aktualnosci.tpl
   ========================================================================= */
.news_grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:4px 0 8px}
.news_card{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--m-line); border-radius:14px; box-shadow:0 1px 3px rgba(16,24,40,.05);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.news_card:hover{border-color:var(--accent); box-shadow:var(--m-shadow-hover); transform:translateY(-3px)}
.news_thumb{position:relative; height:160px; background:#eef1f5; overflow:hidden; display:flex; align-items:center; justify-content:center}
.news_thumb img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.news_card:hover .news_thumb img{transform:scale(1.05)}
.news_date{
  position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:center; line-height:1.1;
  background:#fff; color:var(--m-ink); border-radius:9px; padding:6px 9px; font-size:10px; box-shadow:0 1px 3px rgba(16,24,40,.18);
}
.news_date b{font-size:14px; font-weight:700}
.news_body{display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; flex:1 1 auto}
.news_title{
  margin:0; font-size:16px; font-weight:600; color:var(--m-ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news_excerpt{
  color:var(--m-muted); font-size:13px; line-height:1.55; flex:1 1 auto;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news_more{color:var(--accent); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:4px; margin-top:2px}
.news_arr{font-size:18px; line-height:1; transition:transform .15s ease}
.news_card:hover .news_arr{transform:translateX(3px)}
@media (max-width:767px){ .news_grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px} .news_thumb{height:120px} }

/* =========================================================================
   SZCZEGOLY ZAMOWIENIA (mod_main_dzp_details): pasek info .header jako strip KPI
   ========================================================================= */
form.dzp .header,
form.doh .header{
  display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
  padding:0; margin:0 0 14px; border-bottom:0; background:transparent !important;
}
form.dzp .header label.sm,
form.doh .header label.sm{
  display:flex; flex-direction:column; gap:3px; margin:0; font-weight:400;
  background:#fff; border:1px solid var(--m-line); border-radius:12px; padding:10px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.05); min-width:118px;
}
form.dzp .header label.sm > span,
form.doh .header label.sm > span{color:var(--m-muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; font-weight:600}
form.dzp .header label.sm > div,
form.doh .header label.sm > div{color:var(--m-ink); font-size:16px; font-weight:700; line-height:1.25}
form.dzp .header label.sm > div a,
form.doh .header label.sm > div a{color:var(--accent)}

/* Select w formularzu zamowienia (np. Kurier) */
form.dzp select.form-control{border:1px solid #dfe3e8; border-radius:10px; height:40px; box-shadow:none; background:#fff}
form.dzp select.form-control:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,160,233,.15)}

/* Naglowek sekcji (Adres dostawy itp.) */
/* Naglowek sekcji (modern) - jednolity: akcentowy pasek + pogrubiony tytul.
   Dziala tak samo dla .sec_title z tekstem ("Nowosci","Dashboard") i z <h1> ("Ostatnio ogladane"). */
.sec_title{font-size:18px; font-weight:700; color:var(--m-ink); margin:0 0 16px; padding:0; background:none !important; letter-spacing:-.01em; line-height:1.25}
.sec_title:before{content:""; display:inline-block; vertical-align:middle; width:4px; height:16px; margin-right:10px; border-radius:999px; background:var(--accent)}
.sec_title h1{font-size:inherit; font-weight:inherit; color:inherit; margin:0; padding:0; line-height:inherit; display:inline}

/* ===== Sekcja platnosci (payment_list) w szczegolach zamowienia ===== */
.payment.margin10{margin:0}
.payment .bottom_line{border:0 !important}
.payment .row.comment{
  display:flex; align-items:center; gap:14px;
  margin:12px 0 0; padding:14px 18px;
  border:1px solid var(--m-line); border-radius:12px; background:var(--m-card);
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
}
.payment .row.comment:hover{border-color:var(--accent)}
.payment .row.comment:has(input[type="radio"]:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.payment .row.comment > [class*="col-sm-"]{float:none; padding:0; width:auto}
.payment .row.comment > .col-sm-2{flex:0 0 auto}
.payment .row.comment input[type="radio"]{width:18px; height:18px; margin:0; accent-color:var(--accent); vertical-align:middle}
.payment .row.comment > label{
  flex:1 1 auto; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.payment .row.comment > label > [class*="col-sm-"]{float:none; padding:0; width:auto}
.payment .row.comment > label > .col-sm-6:first-child{font-size:16px; font-weight:700; color:var(--m-ink)}
.payment .row.comment > label > .col-sm-6.textright{margin-left:auto; display:flex; justify-content:flex-end; align-items:center}
.payment .row.comment > label img{height:34px !important; width:auto}
.payment #payments_list{margin-top:18px}

/* =========================================================================
   POPUP UZYTKOWNIKA: jezyk (flagi) + menu (Ustawienia / Zmiana hasla / Wyloguj)
   ========================================================================= */
ul.panel_ope, ul.panel_lng,
.bb_header .dropdown-menu.panel_ope, .bb_header .dropdown-menu.panel_lng{
  min-width:248px; padding:10px !important; border:1px solid var(--m-line) !important;
  border-radius:14px !important; box-shadow:0 14px 36px rgba(16,24,40,.16) !important;
  margin-top:10px !important; background:#fff;
}
/* Flagi jako siatka zaokraglonych "chipow" */
.panel_ope .languages, .panel_lng .languages{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; padding:2px 2px 10px;
  border-bottom:1px solid var(--m-line);
}
.panel_ope .languages a, .panel_lng .languages a{
  display:inline-flex; padding:3px; margin:0; border-radius:8px; line-height:0;
  transition:background .12s ease, transform .12s ease;
}
.panel_ope .languages a:hover, .panel_lng .languages a:hover{background:#eef3f9; transform:translateY(-1px)}
.panel_ope .lng, .panel_lng .lng{
  width:30px !important; height:21px !important; margin:0 !important; display:block;
  border-radius:5px; object-fit:cover; box-shadow:0 0 0 1px var(--m-line);
}
/* Pozycje menu */
.panel_ope > li{list-style:none; margin:0; padding:0}
.panel_ope > li > a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  color:var(--m-ink) !important; font-size:14px; white-space:nowrap; text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.panel_ope > li > a:hover, .panel_ope > li > a:focus{background:#eef3f9; color:var(--accent) !important}
.panel_ope > li > img{display:none}   /* puste <img src=""> przy pozycjach */

/* =========================================================================
   PASEK WYSZUKIWANIA W NAGLOWKU (modern) + dropdown podpowiedzi (mod_main_search_list)
   ========================================================================= */
#menu_header .Search-input{
  position:relative; float:left; margin:21px 0 0 24px; width:360px; max-width:42vw;
  display:flex; align-items:center; gap:6px; height:42px; padding:0 5px 0 16px;
  background:#fff; border:1px solid var(--m-line); border-radius:999px; box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
}
.Search-input-field{flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent; height:40px; font-size:14px; color:var(--m-ink)}
.Search-input-field::placeholder{color:#9aa3ae}
.Search-input > div:not(#search_box){flex:0 0 auto}
.Search-input > div > a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--accent); transition:background .12s ease}
.Search-input > div > a:hover{background:var(--accent-d)}
.Search-input > div > a img{width:16px; height:16px}

#search_box{position:absolute; top:48px; left:0; width:460px; max-width:82vw; z-index:1200}
.search-container{background:#fff; border:1px solid var(--m-line); border-radius:14px; box-shadow:0 16px 40px rgba(16,24,40,.18); padding:8px 12px 12px; max-height:72vh; overflow:auto}
.search-container_header{font-size:11px; font-weight:600; color:var(--m-muted); text-transform:uppercase; letter-spacing:.03em; margin:10px 4px 6px}
.search-container_chips-holder{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px}
.search-container_chips-item a{display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:#eef3f9; color:var(--m-ink); font-size:13px; text-decoration:none; transition:background .12s ease, color .12s ease}
.search-container_chips-item a:hover{background:var(--accent); color:#fff}
.search-container_product-item{display:flex; align-items:center; gap:10px; padding:8px 4px; border-top:1px solid var(--m-line)}
.search-container_product-item .scpi-img{flex:0 0 auto}
.search-container_product-item .scpi-img img{width:42px; height:42px; object-fit:contain; border:1px solid var(--m-line); border-radius:8px; background:#fff}
.search-container_product-item > div{min-width:0; flex:1 1 auto}
.search-container_product-item > div a{color:var(--m-ink); font-size:13px; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.search-container_product-item > div a:hover{color:var(--accent)}
.search-container_product-item .scpi-cart{margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto}
.search-container_product-item .scpi-cart > div{font-weight:700; color:var(--m-ink); font-size:13px; white-space:nowrap}
.search-container_product-item .scpi-cart a{display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--accent); align-items:center; justify-content:center}
.search-container_product-item .scpi-cart a img{width:16px; height:16px}
@media (max-width:991px){ #menu_header .Search-input{display:none} }

/* --- Dopracowanie podpowiedzi wyszukiwania (czytelniejsze wiersze, przycisk "+") --- */
.search-container{padding:6px 10px 10px}
.search-container_product-item{padding:8px 8px; border-top:1px solid var(--m-line); border-radius:10px; transition:background .12s ease}
.search-container_product-item:first-of-type{border-top:0}
.search-container_product-item:hover{background:#f4f7fb}
.search-container_product-item .scpi-img{flex:0 0 48px}
.search-container_product-item .scpi-img img{width:48px; height:48px; padding:4px; object-fit:contain; border:1px solid var(--m-line); border-radius:10px; background:#fff}
.search-container_product-item .scpi-img img.noimg{object-fit:contain; opacity:.45; padding:10px}
.search-container_product-item > div a{font-weight:500; line-height:1.35}
.search-container_product-item .scpi-cart{gap:12px}
.search-container_product-item .scpi-cart > div{color:var(--accent); font-size:13.5px; font-weight:700}
.search-container_product-item .scpi-cart a{position:relative; width:30px; height:30px; box-shadow:0 2px 8px rgba(2,160,233,.35)}
.search-container_product-item .scpi-cart a:hover{background:var(--accent-d)}
.search-container_product-item .scpi-cart a img{display:none}
.search-container_product-item .scpi-cart a::after{content:"+"; color:#fff; font-size:19px; font-weight:600; line-height:1; margin-top:-2px}

/* --- Spinner ladowania podpowiedzi wyszukiwania --- */
#search_box .search_spinner{display:none; align-items:center; justify-content:center; gap:10px;
  padding:22px; background:#fff; border:1px solid var(--m-line); border-radius:14px;
  box-shadow:0 16px 40px rgba(16,24,40,.18); color:var(--m-muted); font-size:13px}
#search_box.is-loading .search_spinner{display:flex}
#search_box.is-loading #search_box_list{display:none !important}
.search_spinner .sp_ring{width:22px; height:22px; border-radius:50%;
  border:2.5px solid #dce2ea; border-top-color:var(--accent); animation:b2bspin .7s linear infinite}
@keyframes b2bspin{to{transform:rotate(360deg)}}

/* --- Kafelki (grid / ostatnio ogladane / nowosci): odstep stepper<->koszyk + pasek stanu inline --- */
.gridbox .add_to_basket{display:flex; align-items:flex-start; justify-content:center; gap:14px}
.gridbox .add_to_basket > div[class*="col-xs-2"]{display:none}                         /* pusty spacer */
.gridbox .add_to_basket > div[class*="col-xs-6"]{flex:0 0 auto; width:132px !important; max-width:132px; padding:0}   /* stepper - kompaktowy, nie rozciagany */
.gridbox .add_to_basket > div[class*="col-xs-4"]{flex:0 0 auto; width:auto !important; padding:0}
.gridbox .add_to_basket .basket{margin:0}
.gridbox .add_to_basket .row input.amount{max-width:none}
.gridbox .stan .stan_bar_wrap{display:inline-block; width:60px; vertical-align:middle; margin:0 4px}

/* =========================================================================
   DASHBOARD (widgety): usuniecie zbednego szarego panelu + Aktualnosci jako
   kafelki (te same co pelna strona). Szablon: theme/modern/wid_aktualnosci.tpl
   ========================================================================= */
/* Bez szarego tla .widgets (#F8F8F8 z main.css) - karty wprost na tle strony */
.widgets{background:transparent !important; padding:4px 0 28px; box-shadow:none}

/* Aktualnosci w widgecie: 1 kolumna, kompaktowo */
.news_grid--widget{grid-template-columns:1fr; gap:12px; margin:0}
.news_grid--widget .news_thumb{height:130px}
.news_grid--widget .news_title{font-size:15px}
.news_grid--widget .news_excerpt{-webkit-line-clamp:2}
/* Wpis bez zdjecia - bez pustego szarego kafla, akcent z lewej + data inline */
.news_card--noimg{border-left:3px solid var(--accent)}
.news_card--noimg .news_body{padding:14px 16px 16px}
.news_date_inline{color:var(--accent); font-weight:700; font-size:11px; letter-spacing:.03em}

/* Stopka "WIECEJ" widgetu - lekka pigulka w stylu modern */
.widget-content .more{margin:18px 4px 4px}
.widget-content .more a,.widget-content .more button{
  display:inline-block; border:1px solid var(--m-line); border-radius:999px;
  background:#fff; color:var(--m-muted); font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:9px 28px; box-shadow:none; height:auto;
}
.widget-content .more a:hover,.widget-content .more button:hover{border-color:var(--accent); color:var(--accent)}

/* Dashboard rownej szerokosci co sekcje produktow:
   bazowy .container-fluid ma max-width:1170px + margin:auto (wezszy, wysrodkowany).
   Tu: pelna szerokosc strony (flush z .grid produktow), kolumny jako flex z odstepem. */
.widgets .container-fluid{max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; float:none}
/* Bootstrap dodaje clearfix ::before/::after - w gridzie staja sie pustymi kolumnami (1fr). Usuwamy. */
.widgets .container-fluid::before,.widgets .container-fluid::after{content:none !important; display:none !important}
@media (min-width:992px){
  /* grid-auto-flow:column + 1fr -> kazda kolumna panelu rowna, twardo wypelnia 100% */
  .widgets .container-fluid{display:grid !important; grid-auto-flow:column; grid-auto-columns:1fr; gap:20px; align-items:start}
  .widgets .container-fluid > [class*="col-"]{float:none !important; width:auto !important; max-width:none !important; min-width:0; padding:0 !important; margin:0}
}

/* =========================================================================
   FILTRY Promocje / Dostepne jako ikony-przelaczniki (jak "Ulubione")
   name=promocje -> metka, name=stany (towary ze stanem dodatnim) -> check.
   ========================================================================= */
.list_filters input[type='checkbox'].bjr_input[name="promocje"] + label:before{
  content:""; width:20px; height:20px; border:0 !important; border-radius:0; bottom:2px; margin-right:8px;
  background:url(svg/promo_o.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="promocje"]:checked + label:before{
  background:url(svg/promo_on.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="promocje"]:checked + label{color:var(--accent); font-weight:600}

.list_filters input[type='checkbox'].bjr_input[name="stany"] + label:before{
  content:""; width:20px; height:20px; border:0 !important; border-radius:0; bottom:2px; margin-right:8px;
  background:url(svg/stock_o.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="stany"]:checked + label:before{
  background:url(svg/stock_on.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="stany"]:checked + label{color:var(--accent); font-weight:600}

/* Przelacznik widoku grid/lista (K/Z/L): odstepy miedzy ikonami (bylo za blisko) */
.list_header .grid_type:not(.sort_panel){gap:12px}
.list_header .grid_type:not(.sort_panel) > input + label{margin:0; padding-left:22px}

/* =========================================================================
   AKTUALNOSCI - SZCZEGOLY artykulu (modern). Szablon: theme/modern/mod_main_menu_aktualnosci.tpl
   Wzorowane na B2C (d_theme/modern). Czytelna kolumna, chip daty, tresc bez szarych tel.
   ========================================================================= */
.article_view{max-width:820px; margin:0 auto; padding:10px 0 28px}
.article_page{background:transparent}
.article_date{display:inline-flex; flex-direction:column; align-items:center; line-height:1.1; background:#fff; border:1px solid var(--m-line); border-radius:10px; padding:7px 12px; font-size:12px; color:var(--m-muted); margin-bottom:14px}
.article_date b{font-size:16px; color:var(--m-ink); font-weight:700}
.article_title{font-size:26px; font-weight:700; color:var(--m-ink); line-height:1.25; margin:4px 0 16px}
.article_lead{font-size:16px; color:var(--m-muted); line-height:1.6; margin-bottom:18px; font-weight:500}
.article_content{color:var(--m-ink); line-height:1.7; font-size:15px}
.article_content *{background-color:transparent !important}
.article_content p{margin:0 0 12px}
.article_content img{max-width:100%; height:auto; border-radius:10px; margin:14px auto; display:block}
.article_content iframe{max-width:100%; width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; margin:14px 0}
.article_content a{color:var(--accent)}
.article_back{margin-top:22px}
.article_back a{display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:600; font-size:14px}
.empty_info{background:#fff; border:1px solid var(--m-line); border-radius:14px; padding:28px 24px; text-align:center; color:var(--m-muted); font-size:15px; box-shadow:0 1px 3px rgba(16,24,40,.05); margin:10px 0}

/* =========================================================================
   PRZYCISK KOSZYKA w kafelku (nowy wyglad modern):
   zaokraglony kwadrat w kolorze akcentu (zmienia sie z wariantem koloru),
   czysta ikona, hover; + wiekszy odstep od paska ilosci.
   ========================================================================= */
div.add_to_basket .basket{
  height:42px; width:42px; padding:0; margin:0;
  background:var(--accent);
  border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(16,24,40,.18);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
div.add_to_basket .basket:hover{background:var(--accent-d); transform:translateY(-1px); box-shadow:0 5px 14px rgba(16,24,40,.24)}
div.add_to_basket .basket a{display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%}
div.add_to_basket .basket img{width:22px; height:22px; margin:0}
/* niedostepny: szary, bez cienia akcentu */
div.add_to_basket .basket.disabled{background:#aeb6c0; box-shadow:none}
div.add_to_basket .basket.disabled:hover{transform:none}

/* Wiekszy, rowny odstep stepper <-> koszyk */
.gridbox .add_to_basket{gap:18px}

/* =========================================================================
   Zakladki widoku towaru: nadpisanie nad userdata_moto/user_main.css
   (laduje sie PO modern.css i wymusza niebieski blokowy tab przez !important
   + wyzsza specyficznosc). Scope .theme-modern daje nam wyzsza specyficznosc,
   wiec aktywna zakladka = przezroczyste tlo + akcentowe podkreslenie (jak B2C).
   ========================================================================= */
.theme-modern div.tow_details .nav-tabs.nav-justified > li.active > a,
.theme-modern div.tow_details .nav-tabs.nav-justified > li.active > a:hover,
.theme-modern div.tow_details .nav-tabs.nav-justified > li.active > a:focus{
  background:transparent !important;
  color:var(--m-ink) !important;
  border:0 !important;
  border-bottom:2px solid var(--accent) !important;
  border-radius:0 !important;
}
.theme-modern div.tow_details .nav-tabs.nav-justified > li > a{
  color:var(--m-muted) !important;
}
.theme-modern div.tow_details .nav-tabs.nav-justified > li > a:hover{
  color:var(--m-ink) !important;
}



/* ============================================================
   Kafle promocyjne (strona główna) — układ jak w B2C:
   szerokość = pozostałe sekcje, duża ikona w rogu, tytuł, CTA-pigułka.
   (markup B2B nie ma .bb_hover — flex bezpośrednio na .bb_btn)
   ============================================================ */
.buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;height:auto;margin:24px 0 30px}
.buttons>div{width:auto;max-width:none;float:none;padding:0;margin:0}
.buttons a{display:block;height:100%}
.bb_btn{min-height:188px;height:100%;margin:0;border-radius:18px;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:24px 26px;box-sizing:border-box}
.bb_btn img.bb_img{position:absolute;height:154px;width:auto;left:auto;right:-14px;bottom:-16px;top:auto;opacity:.92;transform:rotate(-4deg);transition:transform .25s ease;pointer-events:none}
.buttons a:hover img.bb_img{transform:rotate(-4deg) scale(1.06)}
.bb_btn span{margin-left:0;position:static;top:auto;color:#fff}
.bb_btn span.bb_title,.bb_btn span.bb_title h2{font-size:23px;font-weight:800;line-height:1.12;letter-spacing:-.01em}
.bb_btn span.bb_subtitle{font-size:13.5px;opacity:.9;margin-top:7px}
.bb_btn span.bb_link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.03em;transition:background .15s ease}
.bb_btn:hover span.bb_link{background:rgba(255,255,255,.28)}
.bb_btn span.bb_link .bb_link_img{vertical-align:middle}

/* Koszyk dokladnie w rzedzie ze stepperem "- 1 +" (kolumna steppera ma jeszcze
   podpis Ilosc(SZT) pod spodem, wiec wyrownujemy do gory, a koszyk lekko obnizamy
   tak, by jego srodek pokryl sie ze srodkiem rzedu - + ). */
.gridbox .add_to_basket > div[class*="col-xs-4"]{align-self:flex-start; margin-top:-1px}

/* Ikony menu (wektory modern) - rowny rozmiar, nadpisuje max 30px z main.css */
nav.menu_top ul.nav > li img{width:28px; height:28px; max-width:28px; max-height:28px}

/* Popup koszyka (.panel_basket) w skorce modern - zaokraglenie, cien, hover pozycji.
   Wyzsza specyficznosc + !important, bo main.css ma border !important. */
.bb_header .baskets_modern .panel_basket{
  border:1px solid var(--m-line) !important; border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.16); padding:6px; margin-top:8px;
}
.bb_header .baskets_modern .panel_basket .basket_item{border-bottom:1px solid var(--m-line); border-radius:8px}
.bb_header .baskets_modern .panel_basket .basket_item:hover{background:#f3f6fa}
.bb_header .baskets_modern .panel_basket .basket_item:last-child{border-bottom:0}

/* =========================================================================
   LOGOWANIE (modern) - generyczne. Szablon: theme/modern/tpl/mod_login.tpl
   ========================================================================= */
.login_modern{
  min-height:100vh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:40px 16px;
  background:linear-gradient(135deg,#eef3f9 0%, #e7edf4 100%);
}
.login_modern .lm_card{
  width:100%; max-width:880px; display:flex; background:var(--m-card);
  border:1px solid var(--m-line); border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(16,24,40,.12);
}
.login_modern .lm_aside{
  flex:0 0 38%; display:flex; flex-direction:column; gap:18px; justify-content:center;
  padding:36px 30px; background:#f6f9fc; border-right:1px solid var(--m-line);
}
.login_modern .lm_logo img{max-width:200px; max-height:64px; width:auto; height:auto}
.login_modern .lm_company{color:var(--m-muted); font-size:13px; line-height:1.6}
.login_modern .lm_company .lm_company_name{color:var(--m-ink); font-weight:700; font-size:15px; margin:0 0 6px}
.login_modern .lm_company p{margin:0}
.login_modern .lm_main{flex:1 1 auto; padding:30px 34px 34px; min-width:0}
/* Wybor jezyka jako popup (jak w naglowku) - trigger-pigulka + dropdown panel_lng */
.login_modern .lm_lang{display:flex; justify-content:flex-end; margin-bottom:14px; position:relative}
.login_modern .lm_lang_btn{display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border:1px solid #dfe3e8; border-radius:999px; background:#fff; color:var(--m-muted); font-size:13px; text-decoration:none; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, color .12s ease}
.login_modern .lm_lang_btn:hover,.login_modern .lm_lang.open .lm_lang_btn{border-color:var(--accent); color:var(--m-ink); box-shadow:0 1px 5px rgba(16,24,40,.10)}
.login_modern .lm_lang_btn img.lng{width:22px; height:22px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--m-line)}
.login_modern .lm_lang_btn .caret{margin-left:2px; opacity:.55}
.login_modern .lm_lang .panel_lng{position:absolute !important; top:100%; left:auto; right:0; margin-top:8px; z-index:1200; max-width:330px}
.login_modern .lm_title{font-size:26px; font-weight:700; color:var(--m-ink); margin:0 0 18px; letter-spacing:-.01em}
.login_modern .lm_error{background:#fdeaea; border:1px solid #f3c2c2; color:#b3261e; border-radius:10px; padding:10px 14px; font-size:13px; margin:0 0 14px}
.login_modern .lm_field{display:block; margin:0 0 14px}
.login_modern .lm_field>span{display:block; font-size:12px; font-weight:600; color:var(--m-muted); margin:0 0 6px}
.login_modern .lm_field input{
  width:100%; box-sizing:border-box; height:46px; padding:0 14px;
  border:1px solid #dfe3e8; border-radius:12px; background:#fff; font-size:15px; color:var(--m-ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.login_modern .lm_field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,160,233,.15)}
.login_modern .lm_actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
.login_modern .lm_btn{height:46px; padding:0 26px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease}
.login_modern .lm_btn_primary{background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(16,24,40,.16)}
.login_modern .lm_btn_primary:hover{background:var(--accent-d); transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,24,40,.22)}
.login_modern .lm_btn_ghost{background:#fff; color:var(--m-ink); border-color:#dfe3e8}
.login_modern .lm_btn_ghost:hover{border-color:var(--accent); color:var(--accent)}
.login_modern .lm_ue{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; max-width:880px; color:var(--m-muted); font-size:11px}
.login_modern .lm_ue img{max-height:46px; width:auto}
.login_modern .lm_meta{max-width:880px; width:100%; text-align:center; color:var(--m-muted); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:8px}
.login_modern .lm_meta .loginBrowsers,.login_modern .lm_meta .loginPayments{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; background:transparent; padding:0}
.login_modern .lm_meta .loginBrowsers img{height:20px; width:auto; opacity:.7}
.login_modern .lm_meta .loginPayments img{height:22px; width:auto; background:#fff; border:1px solid var(--m-line); border-radius:6px; padding:2px 4px}
.login_modern .lm_meta .loginCookies{max-width:680px; line-height:1.5}
.login_modern .lm_meta .loginFooter a{color:var(--m-muted)}
.login_modern .lm_meta .loginFooter a:hover{color:var(--accent)}
@media (max-width:680px){
  .login_modern .lm_card{flex-direction:column; max-width:440px}
  .login_modern .lm_aside{flex:0 0 auto; border-right:0; border-bottom:1px solid var(--m-line); align-items:center; text-align:center}
  .login_modern .lm_main{padding:22px}
}

/* Logowanie z brandowym tlem (login_background.jpg): ciemna przeslona pod karta,
   wiec teksty meta/cookies/stopka jasne dla czytelnosci (karta zostaje biala). */
.login_modern--bg{background-size:cover; background-position:center center; background-repeat:no-repeat}
.login_modern--bg .lm_meta,
.login_modern--bg .lm_ue{color:#dfe5ee}
.login_modern--bg .lm_meta .loginCookies{color:#d2dae6}
.login_modern--bg .lm_meta .loginFooter a{color:#d2dae6}
.login_modern--bg .lm_meta .loginFooter a:hover{color:#fff}
.login_modern--bg .lm_meta .loginBrowsers img{opacity:.95}

/* Filtr "z cena" (name=user_filter) jako ikona (jak Promocje/Dostepne) - moneta/cena */
.list_filters input[type='checkbox'].bjr_input[name="user_filter"] + label:before{
  content:""; width:20px; height:20px; border:0 !important; border-radius:0; bottom:2px; margin-right:8px;
  background:url(svg/price_o.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="user_filter"]:checked + label:before{
  background:url(svg/price_on.svg) center/20px 20px no-repeat;
}
.list_filters input[type='checkbox'].bjr_input[name="user_filter"]:checked + label{color:var(--accent); font-weight:600}

/* Ikony akcji w liscie zamowien (podglad/eksport/kopiuj) - rowny rozmiar w modern */
.theme-modern table.grid td a.details > img,
.theme-modern table.grid td a.grid > img{height:20px; width:auto; vertical-align:middle}
.theme-modern table.grid td a.grid > img.ico_copy{transition:transform .12s ease}
.theme-modern table.grid td a.grid:hover > img.ico_copy{transform:scale(1.12)}

/* Okno zamowienia (dzp_details): oddziel przyciski (Powrot/Anuluj/Zatwierdz) od listy pozycji */
/* Przyciski zamowienia (Powrot/Anuluj/Zatwierdz) - poza karta listy, na tle strony */
.dzp_buttons{text-align:center; margin:20px 0 26px; padding:0}
.dzp_buttons .button,.dzp_buttons .bjr_gradient_button{margin:0 5px}

/* =========================================================================
   Okna dialogowe jAlert / jConfirm (library/jquery.alerts) - wyglad modern.
   ========================================================================= */
#popup_overlay{background:rgba(16,24,40,.5) !important}
#popup_container{
  min-width:340px; max-width:560px;
  background:var(--m-card) !important; color:var(--m-ink) !important;
  border-radius:16px !important; overflow:hidden;
  box-shadow:0 22px 55px rgba(16,24,40,.30) !important;
  font-family:'Roboto','Inter',-apple-system,'Segoe UI',sans-serif !important;
}
#popup_title{
  height:auto !important; line-height:1.3 !important;
  background:#fff !important; background-image:none !important; color:var(--m-ink) !important;
  border:0 !important; border-bottom:1px solid var(--m-line) !important; border-radius:0 !important;
  font-size:16px !important; font-weight:700 !important; text-align:center !important; padding:16px 20px !important;
}
#popup_title.alert_1,#popup_title.confirm_1,#popup_title.prompt_1{background-image:none !important}
#popup_content{padding:20px !important; margin:0 !important}
#popup_message{text-align:center; color:var(--m-ink); font-size:14px; line-height:1.55}
#popup_message b,#popup_message strong{color:var(--m-ink)}
/* ewentualna tabela wewnatrz komunikatu */
#popup_message table{margin:14px auto 0; border-collapse:collapse; font-size:13px}
#popup_message th{color:var(--m-muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; padding:6px 12px; border-bottom:1px solid var(--m-line)}
#popup_message td{padding:8px 12px; border-bottom:1px solid var(--m-line); color:var(--m-ink)}
#popup_prompt{margin:.6em 0 !important}
#popup_prompt,#popup_message input[type='text'],#popup_message textarea{border:1px solid #dfe3e8; border-radius:10px; padding:10px 12px; width:100%; box-sizing:border-box}
#popup_panel{text-align:center; margin:20px 0 0 !important; display:flex; gap:10px; justify-content:center}
#popup_container input[type='button']{
  background:var(--accent) !important; border:0 !important; border-radius:10px !important;
  padding:10px 24px !important; font-size:14px !important; font-weight:600 !important; color:#fff !important;
  box-shadow:0 2px 8px rgba(16,24,40,.16) !important; cursor:pointer;
  transition:background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
#popup_container input[type='button']:hover{background:var(--accent-d) !important; transform:translateY(-1px); box-shadow:0 5px 14px rgba(16,24,40,.22) !important}
/* Anuluj - neutralny/ghost, by odroznic od akcji glownej */
#popup_container input#popup_cancel{background:#fff !important; color:var(--m-ink) !important; border:1px solid #dfe3e8 !important; box-shadow:none !important}
#popup_container input#popup_cancel:hover{background:#fff !important; border-color:var(--accent) !important; color:var(--accent) !important}

/* =====================

/* === ikony konta/magazynu wg nowego zestawu (modern - ciemny stroke pod jasne tlo) === */
a.navbar-nav-left > img:not(.navbar-nav-left),
.navbar-nav-left > a > img:not(.navbar-nav-left),
img[src*="avatar.png"]{content:url(images/avatar.svg); width:34px; height:34px}
a.navbar-nav-left > img.navbar-nav-left,
img.navbar-nav-left[src*="magazyn"],
img[src*="magazyn.png"]{content:url(images/magazyn.svg); width:34px; height:34px}