html, body {margin: 0; padding: 0; font-family: 'Roboto', sans-serif; color: #000; font-size: 16px; line-height: 20px;}
img {max-width: 100%;}
* {box-sizing: border-box;}
a {text-decoration: none; color: #000;}

body::-webkit-scrollbar {width: 12px;}
body::-webkit-scrollbar-track {background: #e1e1e1;}
body::-webkit-scrollbar-thumb {background: #000;}
body::-webkit-scrollbar-thumb:hover {background: #f58220;}

.container {padding: 0 15px; width: 1600px; max-width: 100%; margin: 0 auto;}

header {padding: 10px 0 20px 0;}
.logo {width: 400px; margin: 0;}
.logo .tio0 {fill: #F58220;}
.logo .tio1 {fill-rule: evenodd; clip-rule: evenodd; fill: #F58220;}
.logo .tio2 {fill: none; stroke: #000000; stroke-width: 5; stroke-miterlimit: 10;}

/* Logotyp wgrany jako grafika ma zachowywac sie dokladnie tak jak inline SVG:
   <picture> nie tworzy wlasnego pudelka, a <img> domyslnie wypelnia kontener
   z zachowaniem proporcji - tak samo jak <svg> z viewBox. Dzieki temu te same
   reguly steruja zmniejszaniem logo przy scrollu (.affix) i na RWD. */
.logo picture {display: contents;}
.logo img {display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain;}
h1 {margin: 30px 0; text-align: center; text-transform: uppercase; font-size: 38px; line-height: 42px; font-weight: 900;}

.categories-list {width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 50px 0;}
.categories-list tr th {padding: 5px 10px; background: #F58220; color: #212121; font-weight: 700; border: 1px solid #fff; border-left: none; border-right: none;}
.categories-list tr.list-head th {font-weight: 900; background: #000; color: #fff; white-space: nowrap;}
.categories-list tr td {padding: 5px 10px; border: 1px solid #e1e1e1; border-left: none; border-right: none;} 
.categories-list tr th.price-net, .categories-list tr td.price-net, .categories-list tr th.price-gross, .categories-list tr td.price-gross {text-align: right;}
.categories-list tr th.availability, .categories-list tr td.availability {text-align: center;}
.categories-list h2 {font-size: 16px; line-height: 20px; margin: 5px 0; font-weight: 400;}
.categories-list h3 {font-size: 16px; line-height: 20px; margin: 5px 0; font-weight: 700;}
.categories-list tr th h3 a {color: #212121;}
.categories-list tr th.prices-cat {color: #fff; font-size: 14px; font-weight: 400; text-align: right;}
.categories-list tr th a.prices-cat-link {color: #212121; font-size: 14px; font-weight: 400; vertical-align: middle;}
.categories-list tr th a.prices-cat-link svg {display: inline-block; height: 18px; margin: 0 5px 0 0; vertical-align: middle; fill: #212121;}
.categories-list tr.available, .categories-list tr.available h2 {font-weight: 500;}
.categories-list tr td.photo img {width: 60px; display: block; max-width: 100%; margin: 0 auto;}
.categories-list p {margin: 5px 0;}
.categories-list p.info {margin: 0;}
.categories-list p.info span {display: inline-block; margin: 0 10px 5px 0; padding: 2px 5px; text-transform: uppercase; font-weight: 700; font-size: 10px; line-height: 16px; color: #fff; background: #e1e1e1; border-radius: 3px;}
.categories-list p.info span.recommended {background: #f58220; color: #212121;}
.categories-list p.info span.special-price {background: #93d010; color: #212121;}
.categories-list p.info span.sale {background: #d62d20;}
.categories-list p.info span.great {background: #3fb909; color: #212121;}
.categories-list p.info span.novelty {background: #ffc000; color: #212121;}
.categories-list p svg {display: inline-block; width: 20px; fill: #d62d20;}
/* Przekreslona jest teraz cena z 30 dni - cena sugerowana producenta zniknela
   z cennika, wiec .regular-price nie ma juz czego stylowac. */
.categories-list p.history {text-decoration: line-through; font-size: 14px; line-height: 16px; color: #666666; font-weight: 400;}
.prices-legend {margin: 10px 0 0 0; font-size: 12px; line-height: 16px; color: #666666;}
.categories-list .available p svg {fill: #3fb909;}
.categories-list tr.level-0 th {padding: 10px;}
.categories-list tr.level-0 th h3 {font-size: 18px;}
.categories-list tr.level-1 th.name, .categories-list tr.level-1 td.name {padding-left: 20px;}
.categories-list tr.level-2 th.name, .categories-list tr.level-2 td.name {padding-left: 30px;}
.categories-list tr.level-3 th.name, .categories-list tr.level-3 td.name {padding-left: 40px;}
.categories-list tr.level-4 th.name, .categories-list tr.level-4 td.name {padding-left: 50px;}

footer {background: #231f20 url('/assets/gfx/footer-bgn.jpg') no-repeat center; background-size: cover; color: #fff; padding: 20px 0 0 0;}
footer .footer-cont {display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 0 0 20px 0;}
footer .footer-cont .foot-1 {width: 30%; padding: 15px;}
footer .footer-cont .foot-2 {width: 25%; padding: 15px;}
footer .footer-cont .foot-3 {width: 25%; padding: 15px;}
footer .footer-cont .foot-4 {width: 20%; padding: 15px;}
footer .logo {margin: 0 0 30px 0;}
footer .logo svg, footer .logo img {fill: #fff; display: block; max-width: 100%; margin: 0 auto; width: 480px;}
footer .logo svg line {stroke: #fff; stroke-width: 5; stroke-miterlimit: 10; fill: none;}
footer .contact {}
footer .contact-details {margin: 0 0 15px 0; padding: 0 10px;}
footer .contact-details svg {fill: #f58220; display: inline-block; margin: 0 5px 0 0; height: 30px; vertical-align: middle;}
footer .contact-details svg.stroke {stroke: #f58220;}
footer .contact-details .phone svg {padding: 6px;}
footer .contact-details span {vertical-align: middle;}
footer .contact-details a {color: #fff; text-decoration: none; font-weight: 400; font-size: 14px; line-height: 20px;}

footer .address {margin: 0 0 20px 0; width: 50%; padding: 0 10px; margin: 0 0 20px 0;}
footer .address h3 {font-size: 14px; line-height: 20px; margin: 0; font-weight: 500;}
footer .address p {font-size: 12px; line-height: 18px; margin: 0; font-weight: 400; color: #bebebe;}
footer .client-area {display: flex; flex-wrap: wrap; margin: 0 0 20px 0;}
footer .client-area svg {display: block; fill: none; stroke: #fff; width: 60px; margin: 0 20px 20px 0;}
footer .shop-info {width: 100%; order: 4; margin: 0 0 5px 0; color: #bebebe; font-size: 10px; line-height: 14px; font-weight: 400; padding: 0 15px;}

footer .social a {display: inline-block; margin: 0 15px 15px 0; width: 50px; height: 50px; border: 1px solid #bebebe; border-radius: 50%; padding: 10px;}
footer .social a svg {fill: #bebebe; display: block; max-width: 100%;}

footer .realization {background: #fff; color: #231f20; font-size: 12px; font-weight: 400; padding: 20px 0 20px 0;}
footer .realization .realization-cont {display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .realization p {margin: 0;}
footer .realization a {color: #231f20; text-decoration: none;}

.table-scroll {overflow-x: auto; -webkit-overflow-scrolling: touch;}
.table-scroll .categories-list {min-width: 600px;}

@media (max-width: 1200px) {
    .logo {width: 300px;}
    h1 {font-size: 28px; line-height: 34px;}
    footer .footer-cont .foot-1 {width: 50%;}
    footer .footer-cont .foot-2 {width: 50%;}
    footer .footer-cont .foot-3 {width: 50%;}
    footer .footer-cont .foot-4 {width: 50%;}
}

@media (max-width: 767px) {
    .logo {width: 220px;}
    h1 {font-size: 20px; line-height: 26px; margin: 15px 0;}
    footer .footer-cont .foot-1,
    footer .footer-cont .foot-2,
    footer .footer-cont .foot-3,
    footer .footer-cont .foot-4 {width: 100%;}
    footer .address {width: 100%;}
    footer .logo {margin: 0 0 15px 0;}
    footer .logo svg, footer .logo img {width: 200px; margin: 0;}
}