:root {
  --echo-red: #d71920;
  --echo-black: #050505;
  --echo-dark: #222222;
  --echo-gray: #666666;
  --echo-light-gray: #f5f5f5;
  --echo-white: #ffffff;
}


/* =========================
   1. WYMUSZENIE BIAŁEGO TŁA
========================= */

html,
body {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* główne obszary strony */
.abs-content,
.abs-layout,
.abs-layout-site-one-column,
.abs-layout-columns,
.abs-layout-breadcrumbs,
.abs-col-content,
.abs-col-content-inner,
.abs-page,
.abs-page-content,
.abs-main,
.abs-main-content,
.page,
.wrapper,
.main,
.content,
#content,
main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* kontenery, które często robią szare boczne tło */
.container,
.container-fluid {
  background-color: transparent !important;
}

/* szare tło stopki */
footer,
.footer,
#footer,
.abs-footer,
.abs-footer-content,
.abs-panel-footer,
.abs-panel-footer > .panel-body,
.abs-panel-footer > .panel-heading {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* jeżeli gdzieś systemowo siedzi dokładnie #f1f0f4 */
[style*="f1f0f4"],
[style*="#f1f0f4"],
[style*="rgb(241, 240, 244)"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* panele i sekcje bez szarego tła */
.panel,
.panel-body,
.abs-panel-main,
.abs-panel-main > .panel-body,
.abs-products-panel,
.abs-products-panel > .panel-body,
.abs-layout-row,
.abs-custom-area,
.abs-html-content {
  background-color: #ffffff !important;
}

/* dolny pasek zostaje czerwony */
footer .abs-footer-bottom-text,
.abs-footer-bottom-text,
.footer-bottom,
#powered,
.powered {
  background-color: #d71920 !important;
  color: #ffffff !important;
}


/* =========================
   2. WIĘKSZE LOGO
========================= */

/* obraz logo */
.navbar-static-top .abs-header-content-row .abs-header-content-logo .navbar-brand img,
.abs-header-content-logo img,
.abs-header-mobile-menu .navbar-brand img,
.navbar-brand img,
.logo img,
#logo img,
.header-logo img {
  max-width: 190px !important;
  max-height: 95px !important;
  width: auto !important;
  height: auto !important;
}

/* kontener logo, żeby go nie ucinało */
.navbar-static-top .abs-header-content-row .abs-header-content-logo .navbar-brand,
.abs-header-content-logo .navbar-brand,
.navbar-brand,
.logo,
#logo,
.header-logo {
  height: auto !important;
  min-height: 80px !important;
  line-height: normal !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
}

/* cały rząd nagłówka, żeby logo miało miejsce */
.abs-header-content-row,
.abs-header-content,
#appHeader .abs-header-content {
  min-height: 95px !important;
}


/* =========================
   3. MNIEJSZY TEKST W MENU
========================= */

#mainMenu .navbar-nav > li > a,
.abs-header-menu-main #mainMenu .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a,
.menu-horizontal a,
.main-menu a {
  font-size: 13px !important;
  line-height: 18px !important;
  padding: 14px 13px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

/* nagłówki w rozwijanym mega menu */
#mainMenu .abs-mega-menu-container .abs-mega-menu-header a {
  font-size: 15px !important;
  color: #d71920 !important;
}

/* pozycje w rozwijanym menu */
#mainMenu .abs-mega-menu-container > li > ul > li > a,
#mainMenu .dropdown-menu > li > a {
  font-size: 13px !important;
  padding: 8px 18px !important;
}


/* =========================
   4. KOLORY LOGO ZAMIAST FIOLETU
========================= */

/* linki */
a,
a:hover,
a:focus {
  color: #d71920;
}

/* przyciski */
.btn-primary,
.btn-success,
.btn-info,
.abs-btn-primary,
button[type="submit"],
input[type="submit"] {
  background-color: #d71920 !important;
  border-color: #d71920 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.abs-btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: #b9141a !important;
  border-color: #b9141a !important;
  color: #ffffff !important;
}

/* aktywne elementy menu / ikon */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #d71920 !important;
}

/* ceny, ikony, akcenty */
.price,
.abs-offer-price,
.abs-item-price,
.abs-price,
.abs-item-price-amount,
.text-primary {
  color: #d71920 !important;
}

/* nagłówki paneli */
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.abs-panel-main > .panel-heading h1,
.abs-panel-main > .panel-heading h2,
.abs-panel-main > .panel-heading h3 {
  color: #222222 !important;
}

/* etykiety i badge */
.label-primary,
.badge,
.abs-label-primary {
  background-color: #d71920 !important;
  color: #ffffff !important;
}


/* =========================
   5. MOBILE — ŻEBY NIE ROZWALIĆ TELEFONU
========================= */

@media (max-width: 767px) {
  .navbar-brand img,
  .abs-header-content-logo img,
  .logo img,
  #logo img {
    max-width: 150px !important;
    max-height: 75px !important;
  }

  .navbar-brand,
  .abs-header-content-logo .navbar-brand {
    min-height: 65px !important;
  }

  #mainMenu .navbar-nav > li > a,
  .navbar-nav > li > a {
    font-size: 13px !important;
    padding: 10px 15px !important;
  }
}