html, body {margin: 0; padding: 0; font-family: 'Roboto', sans-serif; color: #000;}
.d-mobile {display: none;}
.d-no-mobile {display: inline;}
img {max-width: 100%; height: auto; display: block; margin: 0 auto;}
* {box-sizing: border-box;}
a,svg,.trans400,img,button {-o-transition: all .4s;-ms-transition: all .4s;-moz-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;text-decoration: none;}
svg.icon {display: inline-block; vertical-align: -0.125em; overflow: visible;}

body::-webkit-scrollbar, body.menu-open .main-menu .container::-webkit-scrollbar {width: 12px;}
textarea::-webkit-scrollbar, .basket .rbox.products-box::-webkit-scrollbar, .middle-box .user-box .header-basket .details-box .basket-products .basket-list::-webkit-scrollbar {width: 4px;}
.products-list-filters .cat-box-filter::-webkit-scrollbar, .products-list-filters .filters-box-filter::-webkit-scrollbar, .products-list-filters form::-webkit-scrollbar, .jconfirm-content::-webkit-scrollbar, body.menu-open .main-menu .container::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, .products-list-filters .cat-box-filter::-webkit-scrollbar-track, .products-list-filters .filters-box-filter::-webkit-scrollbar-track, .products-list-filters form::-webkit-scrollbar-track, .jconfirm-content::-webkit-scrollbar-track, body.menu-open .main-menu .container::-webkit-scrollbar-track, .middle-box .user-box .header-basket .details-box .basket-products .basket-list::-webkit-scrollbar-track {background: #e1e1e1;}
.basket .rbox.products-box::-webkit-scrollbar-track {background: #fff;}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .products-list-filters .cat-box-filter::-webkit-scrollbar-thumb, .products-list-filters .filters-box-filter::-webkit-scrollbar-thumb, .products-list-filters form::-webkit-scrollbar-thumb, .jconfirm-content::-webkit-scrollbar-thumb, body.menu-open .main-menu .container::-webkit-scrollbar-thumb, .basket .rbox.products-box::-webkit-scrollbar-thumb, .middle-box .user-box .header-basket .details-box .basket-products .basket-list::-webkit-scrollbar-thumb {background: #000;}
body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, .products-list-filters .cat-box-filter::-webkit-scrollbar-thumb:hover, .products-list-filters .filters-box-filter::-webkit-scrollbar-thumb:hover, .products-list-filters form::-webkit-scrollbar-thumb:hover, .jconfirm-content::-webkit-scrollbar-thumb:hover, body.menu-open .main-menu .container::-webkit-scrollbar-thumb:hover, .basket .rbox.products-box::-webkit-scrollbar-thumb:hover, .middle-box .user-box .header-basket .details-box .basket-products .basket-list::-webkit-scrollbar-thumb:hover {background: #f58220;}

.trans800 {-o-transition: all .8s;-ms-transition: all .8s;-moz-transition: all .8s;-webkit-transition: all .8s;transition: all .8s;text-decoration: none;}
.container {padding: 0 15px; width: 1600px; max-width: 100%; margin: 0 auto;}
.technical-break, .error-404 {text-align: center; padding: 150px 0;}
.technical-break img {margin: 0 0 20px 0;}
.technical-break h2 {font-size: 24px; line-height: 28px; margin: 0 0 10px;}
.technical-break p {font-size: 16px; line-height: 20px; margin: 0;}

.error-404 {padding: 60px 0; min-height: 400px;}
.error-404 .error-404-icon {width: 100px; height: 100px; margin: 0 auto 30px; color: #b35a00;}
.error-404 .error-404-icon svg {width: 100%; height: 100%;}
.error-404 h2 {font-size: 32px; font-weight: 700; margin-bottom: 20px; color: #231f20;}
.error-404 .error-404-message {font-size: 16px; line-height: 1.6; color: #6b6b6b; max-width: 600px; margin: 0 auto 30px;}
.error-404 .error-404-message a {color: #b35a00; text-decoration: none; font-weight: 600;}
.error-404 .error-404-message a:hover {color: #000;}
.error-404 .error-404-button {margin: 30px 0 0 0;}
.error-404 .btn-home {display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; background: #f58220; color: #212121; border: 2px solid #f58220; border-radius: 5px; font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: all .4s;}
.error-404 .btn-home svg {width: 20px; height: 20px;}
.error-404 .btn-home:hover {background: #fff; color: #b35a00;}

@media (max-width: 768px) {
    .error-404 {padding: 40px 0;}
    .error-404 .error-404-icon {width: 80px; height: 80px; margin-bottom: 20px;}
    .error-404 h2 {font-size: 24px;}
}

.top-header {position: relative; background: #fff;}

.menu-top .menu {padding: 10px 0 5px 0;}
.menu-top .menu ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.menu-top .menu ul li {display: block; margin: 0 0 0 20px; text-align: center;}
.menu-top .menu ul li:nth-of-type(1) {margin: 0;}
.menu-top .menu ul li a {display: block; padding: 2px 5px; text-decoration: none; color: #6b6b6b; font-size: 15px; line-height: 18px; text-transform: uppercase; transition: color .4s;}
.menu-top .menu ul li.active a, .menu-top .menu ul li a:hover {color: #b35a00;}

.lang-switch {margin-left: 10px;}
.lang-switch select {appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23231f20'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid #5a5a5a; border-radius: 6px; padding: 10px 30px 10px 15px; font-size: 15px; line-height: 30px; height: 50px; color: #231f20; text-transform: uppercase; font-weight: 700; cursor: pointer; outline: none; transition: border-color .3s;}
.lang-switch select:hover, .lang-switch select:focus {border-color: #f58220;}

.main-menu {border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; position: relative;}
.main-menu .menu.menu-top {display: none;}
.main-menu .menu {padding: 0;}
.main-menu .menu .menu-box {list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center;}
.main-menu .menu .menu-box>.item, .main-menu .menu .menu-box .separator {display: block; text-align: center; flex-grow: 1;}
.main-menu .menu .menu-box .separator {width: 1px; height: 22px; background: #e1e1e1; display: block; flex-shrink: 0; flex-grow: 0;}
.main-menu .menu .menu-box>.item>a, .main-menu .menu ul>li>a {display: block; padding: 20px 10px; text-decoration: none; color: #231f20; font-size: 19px; line-height: 22px; font-weight: 500; transition: color .4s; position: relative;}
.main-menu .menu.menu-top ul>li>a {color: #6b6b6b; font-weight: 400;}
.main-menu .menu .menu-box>.item.orange>a {color: #b35a00;}
.main-menu .menu .menu-box>.item.active>a, .main-menu .menu .menu-box>.item>a:hover {color: #b35a00;}
.main-menu .menu .menu-box>.item .item-box {display: none; position: absolute; left: 0; top: 100%; z-index: 2; background: #fff; margin: 1px 0 0 0; width: 100%; box-shadow: 0px 8px 14px 0px rgba(66, 68, 90, 0.34);}
.main-menu .menu .menu-box>.item:hover .item-box {display: block;}
.main-menu .menu .menu-box>.item .item-box-cont {width: 1600px; max-width: 100%; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; position: relative;}
/* .menu-label / .product-title: etykiety i nazwa produktu w megamenu sa <p>, nie naglowkami -
   to nawigacja, a nie sekcje dokumentu. Typografie trzeba tu podawac jawnie, bo plik nie ma resetu p{}. */
.main-menu .menu .menu-box>.item .item-box-cont h3, .main-menu .menu .menu-box>.item .item-box-cont .menu-label {width: 100%; font-size: 17px; line-height: 27px; margin: 0 0 10px 0; color: #6b6b6b; font-weight: 500;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu {width: 50%; padding: 15px 5px; display: flex; flex-wrap: wrap; text-align: left; position: relative;}
.main-menu .menu .menu-box>.item.no-manufactures .item-box-cont .submenu, .main-menu .menu .menu-box>.item.no-product .item-box-cont .submenu {width: 75%;}
.main-menu .menu .menu-box>.item.no-manufactures.no-product .item-box-cont .submenu {width: 100%;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu h3, .main-menu .menu .menu-box>.item .item-box-cont .submenu .menu-label {padding: 0 10px;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item {width: 33.3333%; padding: 10px; font-size: 17px; line-height: 20px; font-weight: 500; display: flex; align-items: center;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item .ico {width: 50px; flex-shrink: 0; padding: 0 10px 0 0;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item .url {width: 100%;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item a {color: #000; text-decoration: none;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item a:hover {color: #b35a00;}
.main-menu .menu .menu-box>.item .item-box-cont .submenu .item a svg, .main-menu .menu .menu-box>.item .item-box-cont .submenu .item a img {display: block; height: 40px;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers {width: 25%; padding: 15px 5px; text-align: left; position: relative; display: flex; flex-wrap: wrap;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers h3, .main-menu .menu .menu-box>.item .item-box-cont .manufacturers .menu-label {padding: 0 10px;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .manufacturer {width: 50%; padding: 5px 10px; font-size: 17px; line-height: 20px; font-weight: 400;}
/* Producenci ponad limit (main_menu.php) chowaja sie za "pokaz wiecej" - inaczej kategoria
   z kilkudziesiecioma markami rozpychala panel ponizej dolnej krawedzi ekranu.
   Wlasny zestaw regul, bo te dla .categories-menu (ok. linii 600) sa scope'owane do strony glownej. */
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .manufacturer.hidden-item {display: none;}
/* display:block, nie flex - .manufacturer jest flex-itemem o width:50% (regula wyzej). */
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers.expanded .manufacturer.hidden-item {display: block;}
/* width:100% - .manufacturers to flex-wrap, bez tego przycisk wpadlby w kolumne obok marki. */
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .show-more {width: 100%; margin-top: 10px; padding: 0 10px; text-align: left;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .show-more .show-more-btn {display: inline-flex; align-items: center; gap: 5px; color: #6b6b6b; text-decoration: none; font-size: 12px; font-weight: 500; transition: color .3s ease; background: none; border: none; padding: 0; cursor: pointer;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .show-more .show-more-btn:hover {color: #b35a00;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .show-more .show-more-ico {display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers.expanded .show-more .show-more-ico {transform: rotate(180deg);}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .manufacturer a {color: #000; text-decoration: none;}
.main-menu .menu .menu-box>.item .item-box-cont .manufacturers .manufacturer a:hover {color: #b35a00;}
.main-menu .menu .menu-box>.item .item-box-cont .product {width: 25%; padding: 15px; text-align: left; position: relative;}
.main-menu .menu .menu-box>.item .item-box-cont .product .product-photo {width: 80%; margin: 0 auto;}
.main-menu .menu .menu-box>.item .item-box-cont .product img {display: block; margin: 0 0 15px 0;}
.main-menu .menu .menu-box>.item .item-box-cont .product h2, .main-menu .menu .menu-box>.item .item-box-cont .product .product-title {font-size: 17px; line-height: 22px; margin: 0; font-weight: 400;}
.main-menu .menu .menu-box>.item .item-box-cont .product h2 a, .main-menu .menu .menu-box>.item .item-box-cont .product .product-title a {color: #000; text-decoration: none;}
.main-menu .menu .menu-box>.item .item-box-cont:before, .main-menu .menu .menu-box>.item .item-box-cont:after {content: ' '; display: block; width: 1px; position: absolute; left: 0; top: 15px; bottom: 15px; background: #e1e1e1;}
.main-menu .menu .menu-box>.item .item-box-cont:before {left: 50%;}
.main-menu .menu .menu-box>.item .item-box-cont:after {left: 75%;}
.main-menu .menu .menu-box>.item.no-manufactures .item-box-cont:before, .main-menu .menu .menu-box>.item.no-product .item-box-cont:before {display: none;}
.main-menu .menu .menu-box>.item.no-manufactures.no-product .item-box-cont:before, .main-menu .menu .menu-box>.item.no-manufactures.no-product .item-box-cont:after {display: none;}
.main-menu .menu .menu-box>.item.no-manufactures.no-product .item-box-cont .product {width: 20%;}
.main-menu .navbar-toggler {position: absolute; top: 10px; right: 10px; padding: 0; background: none; border: none; border-radius: 0; cursor: pointer; display: none;}
.main-menu .navbar-toggler svg {width: 40px; fill: #000;}

.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;}


.middle-box .container {display: flex; flex-wrap: wrap; align-items: center;}
/* Logotyp jest wiekszy niz wysokosc paska .middle-box: ujemny gorny margines
   wypuszcza go w gore az do poziomu tekstu w szarym menu gornym, nie zmieniajac
   przy tym wysokosci naglowka. Lewe wciecie rownia logo ze slowem "Akcesoria"
   w menu glownym (pozycje wyrownane do siebie w pionie). */
.middle-box .logo {width: 22%; padding: 0 0 30px 27px;}
.middle-box .logo a {text-decoration: none;}
.middle-box .logo a svg, .middle-box .logo a img {display: block; width: auto; max-width: 100%; height: 106px; max-height: none; margin: -26px 0 0 0;}
.middle-box .search-box {width: 20%;flex-grow:1; padding: 30px 15px 30px 15px;}


.product-finder-box form {padding: 0 120px 0 0; border: 1px solid #5a5a5a; border-radius: 6px; position: relative;}
.product-finder-box.open form {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.product-finder-box.open form button {border-bottom-right-radius: 0;}
.product-finder-box form .ico {display: block; left: 0; top: 0; height: 100%; display: block; padding: 13px 10px; position: absolute;}
.product-finder-box input {border: none; outline: none; box-shadow: none; width: 100%; height: 50px; padding: 5px 180px 5px 40px; font-size: 15px; font-weight: 300; border-top-left-radius: 6px; border-bottom-left-radius: 6px;}
.product-finder-box input::placeholder {color: #000;}
/* Po kliknieciu w pole podpowiedz "Znajdz produkt" znika, zeby nie zaslaniala wpisywanej frazy. */
.product-finder-box input:focus::placeholder {color: transparent;}
.product-finder-box select {border: none; position: absolute; top: 1px; bottom: 1px; right: 130px; width: 160px; cursor: pointer; outline: none; box-shadow: none; font-size: 15px; font-weight: 300;}
.product-finder-box form:before {content: ' '; display: block; width: 1px; bottom: 15px; top: 15px; right: 295px; background: #e1e1e1; position: absolute;}
.product-finder-box form button {position: absolute; right: 0; top: 0; bottom: 0; width: 120px; text-align: center; font-weight: 700; font-size: 15px; line-height: 20px; text-transform: uppercase; border: none; outline: none; box-shadow: none; background: #000; color: #fff; border-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer;}
.product-finder-box form button:hover {background:#f58220;}
.product-finder-box form button .ico {display: none;}
.product-finder-box .finder-form-box {position: relative;}
.middle-box .product-finder-box .finder-form-box .hints-container {display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 3; margin: 0;}
.middle-box .product-finder-box.open .finder-form-box .hints-container {display: block;}
.product-finder-box .finder-form-box .hints-content {background: #fff; border: 1px solid #000; border-top: none; padding: 5px 0;}
.product-finder-box .hint+.hint {border-top: 1px solid #f3f3f3;}
.product-finder-box .hint a {display: flex; color: #000; text-decoration: none; padding: 5px 10px;}
.product-finder-box .hint a:hover {color: #b35a00;}
.product-finder-box .hint svg.photo {display: block; width: 20px; flex-shrink: 0; fill: #a6a6a6; margin: 0 10px 0 0;}
.product-finder-box .hint img.photo {width: 50px; margin: 0 10px 0 0; display: block;}
.product-finder-box .hint .name {font-weight: 700; align-self: center;}
.product-finder-box .hint .price {margin: 0 0 0 auto; align-self: flex-end; font-size: 14px; color: #6b6b6b;}
.middle-box .search-box .search-btn {display: none; border: none; padding: 0; background: none; outline: none; box-shadow: none; margin: 0; cursor: pointer;}
.middle-box .search-box .search-btn svg {display: block; height: 40px; width: auto; fill: #000;}
.jconfirm .product-finder-box .finder-form-box .hints-container {position: relative;}
.jconfirm .product-finder-box form {padding: 0;}
.jconfirm .product-finder-box select {right: 5px;}
.jconfirm .product-finder-box form:before {right: 170px;}
.jconfirm .product-finder-box form button {display: none;}
.middle-box .user-box {width:20%; display: flex; justify-content: flex-end; align-items: center;}
.middle-box .user-box .user-link {display: block; border: 1px solid #5a5a5a; border-radius: 6px; color: #231f20; text-decoration: none; text-transform: uppercase; font-size: 15px; line-height: 24px; padding: 10px 15px 10px 36px; font-weight: 700; position: relative; height: 50px;     line-height: 30px;}
.middle-box .user-box .user-link svg {display: block; height: auto; width: 20px; padding: 0 2px; position: absolute; left: 8px; top: 50%; transform: translate(0, -50%);}
.middle-box .user-box .header-basket {border: 1px solid #5a5a5a; border-radius: 6px; margin: 0 0 0 15px; position: relative}
.middle-box .user-box .header-basket .icon-box {color: #000; text-decoration: none; text-transform: uppercase; font-size: 16px; line-height: 24px; padding: 10px 44px 10px 36px; font-weight: 700; display: block; white-space: nowrap; position: relative; height: 50px;     line-height: 30px;}
.middle-box .user-box .header-basket .icon-box svg {display: block; height: auto; width: 20px; position: absolute; left: 8px; top: 50%; transform: translate(0, -50%);}
.middle-box .user-box .header-basket .icon-box .no {border-radius: 50%; background: #f58220; color: #212121; font-weight: 400; font-size: 14px; line-height: 28px; height: 28px; min-width: 28px; text-align: center; display: block; position: absolute; right: 8px; top: 50%; transform: translate(0, -50%);}
/* padding-top = wizualny odstep od przycisku; marginesu tu NIE wolno uzyc, bo kursor
   w przerwie przestalby byc nad .details-box i panel znikalby w trakcie najezdzania. */
.middle-box .user-box .header-basket .details-box {display: none; position: absolute; right: -1px; top: 100%; z-index: 2; width: 500px; max-width: 90vw; padding-top: 10px;}
.middle-box .user-box .header-basket.prods:hover .details-box {display: block;}
.middle-box .user-box .header-basket.open .details-box {display: block;}
.middle-box .user-box .header-basket .details-box .basket-products, .modal-basket .basket-products {font-size: 17px; line-height: 20px; padding: 5px 10px;}
.modal-basket .basket-products {font-size: 15px;}
/* Ramka taka sama jak przycisk koszyka (#5a5a5a) - we wzorcu zmierzone #595959,
   czyli panel i przycisk maja tworzyc jedna calosc wizualna. */
.middle-box .user-box .header-basket .details-box .basket-products {border: 1px solid #5a5a5a; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 10px 18px 18px 18px;}
.middle-box .user-box .header-basket .details-box .basket-products .basket-list {max-height: 400px; overflow-x: hidden; overflow-y: scroll; padding-right: 10px; margin: 0 -5px;}
.middle-box .user-box .header-basket .details-box .product, .modal-basket .basket-products .product {display: flex; margin: 0 -5px; padding: 5px 0; align-items: center;}
.modal-basket .basket-products {padding: 5px;}
.modal-basket .basket-products .product {border: 1px solid #e1e1e1; border-radius: 10px; padding: 15px 10px;}
.middle-box .user-box .header-basket .details-box .basket-list .product+.product, .modal-basket .basket-products .product+.product {border-top: 1px solid #e1e1e1;}
.middle-box .user-box .header-basket .details-box .basket-list .product+.product {border-top-color: #e6e6e6;}
.middle-box .user-box .header-basket .details-box .product .photo, .modal-basket .basket-products .product .photo {width: 15%; padding: 0 5px;}
.middle-box .user-box .header-basket .details-box .product .photo img {border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; display: block; width: 100%; height: auto;}
.middle-box .user-box .header-basket .details-box .product .name, .modal-basket .basket-products .product .name {width: 50%; padding: 0 5px;}
.middle-box .user-box .header-basket .details-box .product .quantity, .modal-basket .basket-products .product .quantity {width: 10%; padding: 0 5px; text-align: center; font-weight: 700;}
.middle-box .user-box .header-basket .details-box .product .value, .modal-basket .basket-products .product .value {width: 25%; padding: 0 5px; text-align: right; font-size: 22px; line-height: 26px; font-weight: 900;}
.middle-box .user-box .header-basket .details-box .product .value {font-size: 19px; line-height: 22px;}
.middle-box .user-box .header-basket .details-box .product .value p, .modal-basket .basket-products .product .value p {font-weight: 700;}
.middle-box .user-box .header-basket .details-box .product .value .special, .modal-basket .basket-products .product .value .special {color: #000;}
.middle-box .user-box .header-basket .details-box .product .value .special+p, .modal-basket .basket-products .product .value .special+p {font-size: 16px; font-weight: 400; line-height: 14px; text-decoration: line-through; color: #000;}
/* Kolor tylko tutaj - regula wyzej jest wspoldzielona z modalem "dodano do koszyka"
   i z koszykiem, gdzie przekreslona cena zostaje czarna. Zmierzone we wzorcu: #909090. */
.middle-box .user-box .header-basket .details-box .product .value .special+p {font-size: 14px; line-height: 14px; color: #666666;}
.middle-box .user-box .header-basket .details-box .product.head, .modal-basket .basket-products .product.head {border-bottom: 1px solid #000; font-weight: 700;}
.middle-box .user-box .header-basket .details-box .product p, .modal-basket .basket-products .product p {margin: 0;}
.middle-box .user-box .header-basket .details-box .basket-list .name a, .modal-basket .basket-products .name a {color: #000;}
.middle-box .user-box .header-basket .details-box .basket-list .extra-charge, .modal-basket .basket-products .extra-charge {font-size: 11px; line-height: 14px; color: #6b6b6b; margin: 0;} 
.middle-box .user-box .header-basket .details-box .basket-list .extra-charge .name, .modal-basket .basket-products .extra-charge .name {padding: 0; width: auto; font-weight: 700;}
.middle-box .user-box .header-basket .details-box .basket-list .extra-charge .value, .modal-basket .basket-products .extra-charge .value {padding: 0; width: auto;}
.middle-box .user-box .header-basket .details-box .total, .modal-basket .basket-products .total {margin: 0 0 10px 0;}
.middle-box .user-box .header-basket .details-box .total {padding: 0; margin: 0;}
.middle-box .user-box .header-basket .details-box .total p, .modal-basket .basket-products .total p {margin: 0 0 5px 0; text-align: right; font-size: 16px; line-height: 22px; font-weight: 700;}
.middle-box .user-box .header-basket .details-box .total p b, .modal-basket .basket-products .total p b {font-weight: 900; font-size: 20px;}
.middle-box .user-box .header-basket .details-box .total p.saving, .modal-basket .basket-products .total p.saving {font-size: 14px; line-height: 18px; font-weight: 400;}
.middle-box .user-box .header-basket .details-box .total p.saving b, .modal-basket .basket-products .total p.saving b {font-weight: 700; font-size: 14px;}
/* Dol podgladu: przycisk po lewej, kwoty po prawej. Kolejnosc bierze sie z DOM
   (markup w header_basket_content.php), wiec bez order w CSS. */
.middle-box .user-box .header-basket .details-box .basket-summary {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 15px 0 0 0;}
.middle-box .user-box .header-basket .details-box .basket-btn {display: inline-block; background: #000; border-radius: 6px; border: none; padding: 14px 22px; font-size: 14px; line-height: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; text-align: center; color: #fff; text-decoration: none; transition: background .2s;}
.middle-box .user-box .header-basket .details-box .basket-btn:hover {background: #333;}
.middle-box .navbar-toggler {display: none; background: none; border: 1px solid #000; border-radius: 6px; padding: 0 12px; margin: 0 15px 0 0; cursor: pointer; width: 50px; height: 50px;}
.middle-box .navbar-toggler span {display: block; width: 100%; height: 2px; margin: 6px 0; background: #000;}
.middle-box .navbar-toggler svg {display: block; height: auto; width: 100%; fill: #000;}
.middle-box .user-box .user-menu {position: relative;}
.middle-box .user-box .user-submenu {position: absolute; top: 100%; right: 0; display: none; z-index: 2; margin-top: -1px; min-width: 105%;}
.middle-box .user-box .user-menu:hover .user-submenu {display: block;}
.middle-box .user-box .user-submenu-cont {border: 1px solid #000; background: #fff; border-radius: 5px; border-top-right-radius: 0; box-shadow: 0px 8px 14px 0px rgba(66, 68, 90, 0.34); padding: 5px 10px;}
.middle-box .user-box .user-menu:hover .user-link {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: #fff;}
.middle-box .user-box .user-menu:hover:after {display: block; content: ' '; position: absolute; bottom: -1px; right: 1px; left: 1px; height: 4px; background: #fff; z-index: 2;}
.middle-box .user-box .user-submenu a {display: block; padding: 10px 5px; white-space: nowrap; color: #000; text-decoration: none; text-transform: uppercase; font-size: 15px; line-height: 24px; font-weight: 700;}
.middle-box .user-box .user-submenu a+a {border-top: 1px solid #e1e1e1;}
.middle-box .user-box .user-submenu a svg {display: inline-block; margin: 0 8px 0 0; vertical-align: middle; height: 20px; width: auto;}
.middle-box .user-box .user-submenu a.favorite svg {fill: none; stroke: #000; stroke-width: 2px; overflow: visible;}
.middle-box .user-box .user-submenu a.logout {color: #b35a00;}
.middle-box .user-box .user-submenu a.logout svg {fill: #f58220;}
.middle-box .user-box .user-submenu a.logout svg line {fill: none; stroke: #f58220; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;}

.top-header.affix {position: fixed; left: 0; width: 100%; top: 0; z-index: 10; box-shadow: 0px 8px 14px 0px rgba(66, 68, 90, 0.34);}
.top-header.affix .menu-top {display: none;}
/* Padding search-boxa wyznacza wysokosc calego przyklejonego paska - stad tu
   robimy odstep nad i pod przyciskami. Logo jest o tyle nizsze, zeby zostalo
   troche powietrza takze nad nim i pod nim. */
.top-header.affix .middle-box .search-box {padding: 14px 15px;}
.top-header.affix .middle-box .logo {padding: 0 0 0 27px;}
.top-header.affix .middle-box .logo svg, .top-header.affix .middle-box .logo img {height: 52px; margin-top: 0;}

.top-header.affix .main-menu .menu .menu-box > .item > a {padding-top:10px;padding-bottom:10px;font-size: 16px;line-height:20px;}
/* "Odstap od umowy" zmniejsza sie razem z pozostalymi przyciskami - bez tego
   zostawal w pelnej wysokosci i wystawal ponad wyszukiwarke i koszyk. */
.top-header.affix .product-finder-box input,.top-header.affix .middle-box .user-box .user-link,.top-header.affix .middle-box .user-box .header-basket .icon-box {height:40px;}

.top-header.affix .middle-box .user-box .user-link,.top-header.affix .middle-box .user-box .header-basket .icon-box {padding-top:5px;}

.modal-basket .alert {border-radius: 5px; margin: 0 0 15px 0; font-size: 17px; line-height: 20px;}
.modal-basket .alert p {margin: 0; font-weight: 400;}
.modal-basket .alert ul {margin: 10px 0 0 0; padding: 0 0 0 30px; font-weight: 400;}
.modal-basket .alert ul li b {font-weight: 700;}

.slider-full-width, .slider-supbages {position: relative; overflow: hidden; max-width: 100%;}
.slider-full-width .item img, .slider-supbages .item img {display: block; width: 100%;}
.slider-full-width .controls button {position: absolute; top: 50%; transform: translate(0, -50%); width: 66px; height: 66px; border-radius: 50%; background: #fff; padding: 18px; opacity: 0; border: none; cursor: pointer;}
.mobile .slider-full-width .controls {display: none;}
.home .slider-full-width .controls button {margin-top: -33px;}
.slider-full-width .controls button.prev {left: 15px;}
.slider-full-width .controls button.next {right: 15px;}
.slider-full-width .controls button svg {display: block; margin: 0 auto;}
.slider-full-width:hover .controls button {opacity: 0.6;}
.slider-full-width .controls button:hover {opacity: 1;}
.slider-full-width .carousel-indicators {display: block; list-style: none; text-align: center; margin: 0; padding: 20px 0;}
.slider-full-width .carousel-indicators li {display: inline-block; width: 14px; height: 14px; border: 1px solid #5a5a5a; border-radius: 50%; padding: #fff; transition: background-color .4s, border-color .4s; cursor: pointer; margin: 0 3px;}
.slider-full-width .carousel-indicators li.active, .slider-full-width .carousel-indicators li:hover {background: #f58220; border-color: #f58220;}
.slider-full-width .slider-list:not(.slick-initialized) .item:not(:first-child), .slider-supbages .slider-list:not(.slick-initialized) .item:not(:first-child) {display: none;}
.slider-full-width .item, .slider-supbages .item {position: relative;}
.slider-full-width .item .link, .slider-supbages .item .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.home .title {padding: 10px 0 10px 0;}
.home .title h2, .home .title .section-title {margin: 0; text-align: center; text-transform: uppercase; font-size: 38px; line-height: 42px; font-weight: 900;}
.home .title h2 a, .home .title .section-title a {text-decoration: none; color: #000;}
.home .title h2 a:hover, .home .title .section-title a:hover {color: #b35a00;}
.page .title {padding: 10px 0 30px 0;}
.page .title h1 {margin: 0; text-transform: uppercase; font-size: 38px; line-height: 42px; font-weight: 900;}
.page .title p {margin: 20px 0 0 0; font-size: 17px; line-height: 22px;}

.products-list.list-1, .products-hit-list {margin: 0 -15px; display: flex; flex-wrap: wrap;}
.products-list.list-1 .product-box, .products-hit-list .product-box {width: 25%; padding: 15px;}
.products-list.list-1 .product-box .product-box-cont, .products-hit-list .product-box .product-box-cont, .products-list.list-2 .product-box .product-box-cont {border: 1px solid #e1e1e1; border-radius: 10px; padding: 15px; position: relative; transition: box-shadow .4s; height: 100%;}
.products-list.list-1 .product-box .product-box-cont:hover, .products-hit-list .product-box .product-box-cont:hover, .products-list.list-2 .product-box .product-box-cont:hover {-webkit-box-shadow: 0px 0px 14px 0px rgba(66, 68, 90, 0.34); -moz-box-shadow: 0px 0px 14px 0px rgba(66, 68, 90, 0.34); box-shadow: 0px 0px 14px 0px rgba(66, 68, 90, 0.34);}
.products-list.list-1 .product-box .comparison, .products-list.list-2 .product-box .comparison {color: #000; text-decoration: none; font-size: 14px; line-height: 20px; display: inline-block; margin: 0 0 15px 0;}
.products-list.list-1 .product-box .comparison span, .products-list.list-2 .product-box .comparison span {-o-transition: all .4s;-ms-transition: all .4s;-moz-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;}
.products-list.list-1 .product-box .comparison:hover span, .products-list.list-2 .product-box .comparison:hover span {color: #b35a00;}
.products-list.list-1 .product-box .comparison.disabled, .products-list.list-2 .product-box .comparison.disabled {opacity: 0.4;}
.products-list.list-1 .product-box .comparison svg, .products-list.list-2 .product-box .comparison svg {display: inline-block; vertical-align: middle; height: 18px; width: auto; margin: 0 5px 0 0; fill: none; stroke: #000000; stroke-width: 6; stroke-miterlimit: 10;}
.products-list.list-1 .product-box .comparison.compare svg rect, .products-list.list-2 .product-box .comparison.compare svg rect {fill: #000;}
.products-list.list-1 .product-box .comparison:hover, .products-list.list-2 .product-box .comparison:hover {color: #000;}
.products-list.list-1 .product-box .add-to-favorite, .products-list.list-2 .product-box .add-to-favorite {position: absolute; right: 15px; top: 15px; padding: 2px;}
.products-list.list-1 .product-box .add-to-favorite svg, .products-list.list-2 .product-box .add-to-favorite svg {-o-transition: all .4s;-ms-transition: all .4s;-moz-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;display: inline-block; vertical-align: middle; height: 18px; width: auto; margin: 0; fill: none; stroke: #000000; stroke-width: 2px; overflow: visible;}
.products-list.list-1 .product-box .add-to-favorite.active svg, .products-list.list-2 .product-box .add-to-favorite.active svg {fill: #f58220; stroke: #f58220;}

.products-list.list-1 .product-box .add-to-favorite:hover svg, .products-list.list-2 .product-box .add-to-favorite:hover svg {stroke: #f58220;}

.products-list.list-1 .product-box .product-photo, .products-hit-list .product-box .product-photo {width: 80%; margin: 0 auto; position: relative;}
.products-list.list-1 .product-box .product-photo .energy-class-icon, .products-hit-list .product-box .product-photo .energy-class-icon {position: absolute; right: 0; bottom: 15px; max-width: 60px; height: auto; margin: 0;}
.products-list.list-2 .product-box .product-photo {position: relative;}
.products-list.list-2 .product-box .product-photo .energy-class-icon {position: absolute; right: 0; bottom: 15px; max-width: 40px; height: auto; margin: 0;}
.products-list.list-1 .product-box img, .products-list.list-2 .product-box img {display: block; margin: 0 auto 15px auto; max-width: 100%;}
.picture-hover-wrap {position: relative;}
.picture-hover-wrap .picture-main, .picture-hover-wrap .picture-hover {transition: opacity .3s;}
.picture-hover-wrap .picture-hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.picture-hover-wrap:hover .picture-main {opacity: 0;}
.picture-hover-wrap:hover .picture-hover {opacity: 1;}
/* Znaczek rabatu siedzi POD serduszkiem "ulubione" (to jest na top:15px), nie obok niego. */
.products-list.list-1 .product-box .discount, .products-list.list-2 .product-box .discount {position: absolute; background: #d62d20; color: #fff; padding: 7px 4px; width: 55px; text-align: center; border-top-left-radius: 4px; border-bottom-left-radius: 4px; top: 50px; right: 0; font-weight: 700; font-size: 18px; line-height: 20px;}
.products-list.list-1 .product-box .ico-info, .products-list.list-2 .product-box .ico-info, .product-single .ico-info {display: flex; flex-wrap: wrap; margin: 0 0 5px 0; min-height: 25px;}
.products-list.list-1 .product-box .ico-info div, .products-list.list-2 .product-box .ico-info div, .product-single .ico-info div {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;}
.products-list.list-1 .product-box .ico-info div.recommended, .products-list.list-2 .product-box .ico-info div.recommended, .product-single .ico-info div.recommended {background: #f58220; color: #212121;}
.products-list.list-1 .product-box .ico-info div.special-price, .products-list.list-2 .product-box .ico-info div.special-price, .product-single .ico-info div.special-price {background: #93d010; color: #212121;}
.products-list.list-1 .product-box .ico-info div.sale, .products-list.list-2 .product-box .ico-info div.sale, .product-single .ico-info div.sale {background: #d62d20;}
.products-list.list-1 .product-box .ico-info div.great, .products-list.list-2 .product-box .ico-info div.great, .product-single .ico-info div.great {background: #3fb909; color: #212121;}
.products-list.list-1 .product-box .ico-info div.novelty, .products-list.list-2 .product-box .ico-info div.novelty, .product-single .ico-info div.novelty {background: #ffc000; color: #212121;}
/* Odznaka "nowosc" przy kategoriach - drzewo/listing kategorii, filtr boczny, menu.
   Mala rozeta z napisem NEW - nawiazuje do ico_new.png ze starego systemu, ale jako SVG. */
.badge-novelty {display: inline-block; width: 20px; height: 20px; margin-left: 4px; vertical-align: middle;}
.badge-novelty svg {display: block; width: 100%; height: 100%;}
.badge-novelty svg polygon {fill: #f58220;}
.badge-novelty svg text {font-size: 5.5px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; fill: #fff; letter-spacing: -0.3px;}
/* Nazwa produktu zawsze zajmuje dokladnie 3 wiersze (min-height = max-height =
   3 x line-height): dluzsze nazwy sa przycinane wielokropkiem, dzieki czemu
   kafelki w wierszu maja rowna wysokosc. */
/* .product-title: nazwa produktu w kafelku strony glownej jest <p>, nie <h2> - kafelek to element
   listy, nie sekcja dokumentu. Gałąź h2 zostaje dla listingow kategorii/producentow/promocji.
   Typografia musi byc tu podana jawnie - plik nie ma resetu p{}. */
.products-list.list-1 .product-box h2, .products-hit-list .product-box h2, .products-list.list-2 .product-box h2, .products-list.list-1 .product-box .product-title, .products-hit-list .product-box .product-title {font-size: 17px; line-height: 22px; margin: 0 0 20px 0; font-weight: 400; min-height: 66px; max-height: 66px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.products-list.list-1 .product-box h2 a, .products-hit-list .product-box h2 a, .products-list.list-2 .product-box h2 a, .products-list.list-1 .product-box .product-title a, .products-hit-list .product-box .product-title a {color: #000;}
.products-list.list-1 .product-box .basket-box, .products-hit-list .product-box .basket-box, .products-list.list-2 .product-box .basket-box {display: flex; flex-wrap: nowrap; margin: 0 -5px;}
.products-list.list-1 .product-box .basket-box .price-box, .products-hit-list .product-box .basket-box .price-box, .products-list.list-2 .product-box .basket-box .price-box {width: 50%; padding: 0 5px;}
.products-list.list-1 .product-box .basket-box .price-box p, .products-hit-list .product-box .basket-box .price-box p, .products-list.list-2 .product-box .basket-box .price-box p {color: #000; font-weight: 900; margin: 0; font-size: 24px; line-height: 26px;}
.products-list.list-1 .product-box .basket-box .price-box p.special-price, .products-hit-list .product-box .basket-box .price-box p.special-price, .products-list.list-2 .product-box .basket-box .price-box p.special-price {color: #d32718;}
.products-list.list-1 .product-box .basket-box .price-box p+p, .products-list.list-1 .product-box .basket-box .price-box p+meta+p, .products-hit-list .product-box .basket-box .price-box p+p, .products-hit-list .product-box .basket-box .price-box p+meta+p, .products-list.list-2 .product-box .basket-box .price-box p+p, .products-list.list-2 .product-box .basket-box .price-box p+meta+p {color: #000; font-size: 14px; line-height: 16px; font-weight: 400; text-decoration: line-through;}
/* Przekreslona cena regularna pod cena promocyjna - ten sam wyglad co w hitach tygodnia.
   Regula p+p wyzej dawalaby jej czern i 14px, stad jawne nadpisanie. */
.products-list.list-1 .product-box .basket-box .price-box p.old-price, .products-list.list-2 .product-box .basket-box .price-box p.old-price {color: #666666; font-size: 13px; line-height: 18px; font-weight: 400; text-decoration: line-through;}
.products-list.list-1 .product-box .basket-box .basket-btn-box, .products-hit-list .product-box .basket-btn-box, .products-list.list-2 .product-box .basket-btn-box {width: 50%; padding: 0 5px; text-align: right;}
/* Przycisk dopasowuje sie do napisu (a nie do calej polowki wiersza) - inaczej
   po bokach zostaje duzo pustej czerni. Kontener nadal wyrownuje go do prawej. */
.products-list.list-1 .product-box .add-to-cart, .products-hit-list .product-box .add-to-cart, .products-list.list-2 .product-box .add-to-cart {display: inline-block; width: auto; max-width: 100%; background: #000; color: #fff; text-transform: uppercase; font-size: 13px; line-height: 22px; text-align: center; border: none; border-radius: 4px; font-weight: 700; padding: 8px 22px; cursor: pointer; transition: background-color .2s ease;}
/* Hover podmienia tlo na kolor marki, a nie filtruje: brightness() na czerni nie daje efektu (0 * 1.1 = 0). */
.products-list.list-1 .product-box .add-to-cart:hover, .products-hit-list .product-box .add-to-cart:hover, .products-list.list-2 .product-box .add-to-cart:hover {background: #f58220;}
.products-list.list-1 .product-box .history-price, .products-hit-list .product-box .history-price, .products-list.list-2 .product-box .history-price {margin: 10px 0 0 0; color: #6b6b6b; font-size: 13px;}
.products-list .products-list-banner {padding: 15px; width: 100%;}
.products-list .products-list-banner img {display: block; max-width: 100%; margin: 0 auto;}
/* Sekcja hitow tygodnia: jasne tlo na pelna szerokosc okna, karty w kontenerze. */
.hits-section {position: relative; overflow: hidden; padding: 55px 0 65px 0; background: #fff;}
/* Tlo w osobnej warstwie zaczepionej dolna krawedzia o liste produktow: ma sie konczyc pod zdjeciem,
   a nad nazwa produktu. Odleglosc od gory listy = 51px stalych odstepow karty + zdjecie
   (kwadrat = 80% szerokosci karty), stad zaleznosc od liczby kolumn slidera (4/3/2/1).
   Gora warstwy siega poza sekcje (przycina ja overflow) - dzieki temu pas obejmuje tez naglowek,
   niezaleznie od jego wysokosci; kolor #f1f1f1 odpowiada gornej krawedzi grafiki, wiec styk jest niewidoczny. */
.hits-section .list {position: relative;}
.hits-section .list:before {content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -2000px; bottom: calc(100% - 20vw - 51px); width: 100vw; z-index: 0; background: #f1f1f1 url('/assets/gfx/tlo-bgn.jpg') no-repeat center bottom; background-size: 100% auto;}
.hits-section .title, .hits-section .list > * {position: relative; z-index: 1;}
/* WebP tylko tam, gdzie image-set() jest wspierany - starsze przegladarki zostaja przy JPG powyzej. */
@supports (background-image: image-set(url('/assets/gfx/tlo-bgn.webp') type('image/webp'))) {
    .hits-section .list:before {background-image: image-set(url('/assets/gfx/tlo-bgn.webp') type('image/webp'), url('/assets/gfx/tlo-bgn.jpg') type('image/jpeg'));}
}
/* Sekcja bywa renderowana poza kontekstem .home (szablon2), wiec tytul stylujemy wlasnym selektorem. */
.hits-section .title {padding: 0 0 35px 0; text-align: center;}
.hits-section .title h2, .hits-section .title .section-title {margin: 0; text-transform: uppercase; font-size: 38px; line-height: 44px; font-weight: 900; letter-spacing: .5px; color: #000;}
.hits-section .title h2 a, .hits-section .title .section-title a {color: #000; text-decoration: none;}
.hits-section .title h2 a:hover, .hits-section .title .section-title a:hover {color: #b35a00;}
.hits-section .title h3, .hits-section .title .section-subtitle {margin: 10px 0 0 0; font-size: 17px; line-height: 24px; font-weight: 400; color: #6b6b6b;}
.products-hit-list {margin: 0 -15px 0 -15px;}
.products-hit-list .products-list.slick-slider {display: block;}
.products-hit-list .products-list.slick-slider .slick-track {margin: 0;}
.products-hit-list .product-box .product-box-cont {background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 34px 15px 15px 15px;}
.products-hit-list .product-box  img {margin: 0 0 15px 0;}
/* Pigulka "HIT TYGODNIA" zachodzi na gorna krawedz karty - stad padding-top boksu. */
/* .hit-header, nie .header - aplikacja mobilna ukrywa w webview naglowki (header, .header). */
.products-hit-list .product-box .hit-header {margin: 0 0 5px 0; text-align: center;}
.products-hit-list .product-box .hit-header h3, .products-hit-list .product-box .hit-header .hit-label {position: absolute; top: -18px; left: 50%; transform: translateX(-50%); margin: 0; background: #d62d20; color: #fff; padding: 7px 28px; border-radius: 4px; text-transform: uppercase; font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: .5px; white-space: nowrap;}
.products-hit-list .product-box .hit-header .discount {margin: 0; color: #d62d20; font-size: 34px; line-height: 40px; font-weight: 900; text-align: center; position: relative;}
.products-hit-list .product-box .basket-box {padding: 15px 0 0 0; align-items: center;}
.products-hit-list .product-box .basket-box .price-box p.price {color: #d62d20; font-size: 22px; line-height: 26px;}
/* Przycisk koszyka nie ma juz wlasnego koloru w sekcji hitow - czarny jest wszedzie. */
.products-hit-list .product-box .history-price {margin: 8px 0 0 0; font-size: 11px; line-height: 15px; color: #666666;}
.products-hit-list .product-box .pieces-left {margin: 15px 0 0 0; padding: 12px 0 0 0; border-top: 1px solid #e8e8e8; text-transform: uppercase; font-size: 12px; line-height: 16px; text-align: center; color: #6b6b6b;}
.products-hit-list .product-box .pieces-left strong {color: #010101;}
/* Karty rownej wysokosci mimo roznej liczby linii nazwy produktu. */
.products-hit-list .slick-track {display: flex;}
.products-hit-list .slick-slide {height: auto;}
.products-hit-list .slick-slide > div, .products-hit-list .slick-slide .product-box {height: 100%;}
.products-hit-list .slick-arrow {position: absolute; top: 50%; transform: translate(0, -50%); border: 1px solid #d9d9d9; border-radius: 50%; width: 66px; height: 66px; cursor: pointer; opacity: 0; z-index: 2; padding: 18px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); transition: opacity .4s;}
.products-hit-list .slick-arrow.slick-prev {left: 20px;}
.products-hit-list .slick-arrow.slick-next {right: 20px;}
.products-hit-list .slick-arrow svg {display: block;width: 100%; height: auto; stroke: #000; transition: stroke .2s ease;}
.products-hit-list:hover .slick-arrow {opacity: 0.6;}
.products-hit-list .slick-arrow:hover {opacity: 1; background: #000; border-color: #000;}
.products-hit-list .slick-arrow:hover svg {stroke: #fff;}
.great-prices {padding: 30px 0 0 0;}
.great-prices .products-list.slick-slider {display: block;}
.great-prices .products-list.slick-slider .slick-track {margin: 0;}
.great-prices .products-list .product-box {width: 100%;}
.great-prices .title, .mobile .novelty-home .title {position: relative;}
.great-prices .arrow, .mobile .novelty-home .arrow {position: absolute; top: 10px; transform: translate(0, 0); width: 40px; height: auto; padding: 10px; background: none; border: 1px solid #000; border-radius: 50%; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;}
.great-prices .arrow.prev, .mobile .novelty-home .arrow.prev {right: 50px;}
.great-prices .arrow.next, .mobile .novelty-home .arrow.next {right: 0;}
.great-prices .arrow svg, .mobile .novelty-home .arrow svg {display: block; width: 100%; height: auto; stroke: #000; transition: stroke .2s ease;}
/* Jednolity hover strzalek karuzel: kolko wypelnia sie na czarno, strzalka na bialo. */
.great-prices .arrow:hover, .mobile .novelty-home .arrow:hover {background: #000; border-color: #000;}
.great-prices .arrow:hover svg, .mobile .novelty-home .arrow:hover svg {stroke: #fff;}
.novelty-home {padding: 30px 0 80px 0;}
.novelty-home .novelty-home-cont {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.novelty-home .title-novelty {width: 25%; padding: 15px;}
.novelty-home .title-novelty h2, .novelty-home .title-novelty .section-title {font-size: 38px; line-height: 44px; font-weight: 900; text-transform: uppercase; color: #000; margin: 0 0 40px 0; padding: 30px 40px 30px 0; display: block; position: relative; text-align: right;}
.novelty-home .title-novelty h2:before, .novelty-home .title-novelty .section-title:before {content: ' '; display: block; position: absolute; right: 0; top: 0; z-index: -1; height: 100%; width: 100%; width: calc(100% + 50vw - 800px + 15px); background: url('/assets/gfx/novelty-title-bgn.jpg') no-repeat center; background-size: cover; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.novelty-home .title-novelty h2 a, .novelty-home .title-novelty .section-title a {text-decoration: none; color: #000;}
/* Podtytul sekcji moze miec kilka akapitow - ostatni bez marginesu, zeby nie
   rozpychal kolumny z naglowkiem. */
.novelty-home .title-novelty p, .novelty-home .title p {font-size: 17px; line-height: 22px; font-weight: 300; margin: 0 0 15px 0;}
.novelty-home .title-novelty p:last-child, .novelty-home .title p:last-child {margin-bottom: 0;}
.novelty-home .title p {text-align: center;}
/* Bez gornego paddingu, zeby ramki kafelkow zaczynaly sie na tej samej wysokosci
   co zolty box z naglowkiem sekcji (kafelki maja wlasny padding 15 px). */
.novelty-home .list {width: 75%; padding: 0 15px 15px 15px;}
.novelty-home .products-novelty-list.list-1 {display: flex;}
.novelty-home .products-novelty-list.list-1>div {width: 50%;}
.novelty-home .block-r .product-box {padding: 15px; height: 50%;}
.novelty-home .block-r .product-box {width: 100%;}
.novelty-home .block-r .product-box .product-box-cont {display: flex; flex-wrap: wrap; height: 100%;}
.novelty-home .block-r .product-box .product-box-cont .comparison {width: 100%;}
.novelty-home .block-r .product-box .product-box-cont .product-photo {width: 40%; padding: 0 15px 0 0;}
.novelty-home .block-r .product-box .product-box-cont .product-info {width: 60%; padding: 0 0 0 15px;}
/* Historia cen lezala w tym samym rzedzie flex co cena i przycisk (basket-box ma
   nowrap), przez co sciskala przycisk do polowy boksu. Zawijamy rzad: cena
   i przycisk po 50%, historia cen na 100% pod spodem - we wszystkich boksach
   sekcji, takze w duzym po lewej. */
/* W malych boksach po prawej kolumna na przycisk ma ok. 140 px - przy szerszych
   bokach napis lamalby sie na dwa wiersze, wiec tu zwezamy sam padding. */
.novelty-home .block-r .product-box .add-to-cart {padding: 8px 12px;}
.novelty-home .products-list.list-1 .product-box .basket-box {flex-wrap: wrap;}
.novelty-home .products-list.list-1 .product-box .basket-box .history-price {width: 100%; padding: 0 5px;}
.mobile .novelty-home .title h3, .mobile .novelty-home .title .section-subtitle {display: none;}

.products-list.list-2 {display: block;}
.products-list.list-2 .product-box {padding: 8px 0; width: 100%;}
.products-list.list-2 .product-box .product-box-cont {height: auto; display: flex; flex-wrap: wrap; padding: 25px 5px 25px 0; align-items: center; min-height: 200px;}
.products-list.list-2 .product-box .comparison {position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0;}
.promo-products-list .products-list.list-2 .product-box .comparison span {display: none;}
/* Serce + rabat jako jeden pasek w prawym gornym rogu: badge ma zmienna szerokosc
   ("-3%" vs "-38%"), wiec pozycjonuje je flex, a nie sztywny offset kazdego z osobna. */
.products-list.list-2 .product-box .card-badges {position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 12px;}
.products-list.list-2 .product-box .card-badges .add-to-favorite {position: static; padding: 0; display: flex;}
.products-list.list-2 .product-box .card-badges .discount {position: static; width: auto; padding: 4px 9px; border-radius: 4px; font-size: 14px; line-height: 18px;}
.products-list.list-2 .product-box .product-photo {width: 20%; padding: 0 15px;}
/* Staly kadr miniatury: bez tego wiersz rosnie do wysokosci najwyzszego zdjecia
   i lista "skacze" - kwadratowe etui bylo o polowe wyzsze od plaskiego glosnika. */
.products-list.list-2 .product-box .product-photo img {margin: 0 auto; max-height: 150px; width: auto; object-fit: contain;}
.products-list.list-2 .product-box .product-info {width: 80%; padding: 0 15px; display: flex; flex-wrap: nowrap; align-items: center;}
.products-list.list-2 .product-box .info-box {width: 60%; padding: 0 15px 0 0;}
/* Kolumna cenowa to jeden blok do prawej: cena, stara cena i "najnizsza z 30 dni". */
.products-list.list-2 .product-box .basket-box {width: 40%; padding: 0; display: block; text-align: right;}
.products-list.list-2 .product-box h2 {min-height: initial; margin: 0;}
.products-list.list-2 .product-box .info-box .basket-btn-box {width: auto; text-align: left; padding: 0; margin: 12px 0 0 0;}
.products-list.list-2 .product-box .basket-box .price-box {width: 100%; text-align: right; padding: 0;}
.products-list.list-2 .product-box .history-price {width: 100%; text-align: right; margin: 4px 0 0 0;}

.home .news-list {background: #eeeeee; padding: 10px 0 40px 0;}
.news-list .list {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.news-list .news-item {padding: 15px; width: 50%;}
.news-list .news-item .news-item-cont {background: #fff; position: relative; padding: 0 0 70px 0; height: 100%; border: 1px solid #eeeeee; border-radius: 5px; overflow: hidden;}
.home .news-list .news-item .news-item-cont {border: none;}
.news-list .news-item .photo img {display: block; margin: 0 auto; width: 100%;}
.news-list .news-item .info {padding: 40px;}
.news-list .news-item .info .date {margin: 0 0 10px 0; color: #6b6b6b; font-size: 16px; line-height: 18px;}
/* .news-title: zajawka newsa na stronie glownej jest <p> - to karta, nie sekcja. Galaz h2 zostaje
   dla listingu /aktualnosci (news_list.php). */
.news-list .news-item .info h2, .news-list .news-item .info .news-title {font-weight: 700; margin: 0 0 10px 0; font-size: 24px; line-height: 36px;}
.news-list .news-item .info h2 a, .news-list .news-item .info .news-title a {text-decoration: none; color: #000; transition: color .4s;}
.news-list .news-item .info h2 a:hover, .news-list .news-item .info .news-title a:hover {color: #b35a00;}
.news-list .news-item .info .introduction {margin: 0; font-size: 16px; line-height: 24px;}
.news-list .news-item .more {display: block; position: absolute; border: 1px solid #000; border-radius: 4px; padding: 10px 20px; bottom: 30px; left: 30px; color: #000; font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: 700;}
.news-list .news-item .more:hover {color: #b35a00; border-color: #f58220;}

/* Sekcja aktualnosci na stronie glownej: jeden news na ekranie, uklad poziomy.
   Reguly wyzej obsluguja te sama klase .news-list na podstronie listy newsow,
   stad wszystko ponizej jest zawezone klasa .news-home. */
.home .news-list.news-home {padding: 55px 0 65px 0; background: #f1f1f1 url('/assets/gfx/tlo-bgn.jpg') no-repeat center center; background-size: cover;}
@supports (background-image: image-set(url('/assets/gfx/tlo-bgn.webp') type('image/webp'), url('/assets/gfx/tlo-bgn.jpg') type('image/jpeg'))) {
    .home .news-list.news-home {background-image: image-set(url('/assets/gfx/tlo-bgn.webp') type('image/webp'), url('/assets/gfx/tlo-bgn.jpg') type('image/jpeg'));}
}
/* Naglowek i strzalki sa zaczepione o kontener sekcji, a nie o slajd - stoja
   w miejscu, kiedy slick podmienia tresc. */
.news-list.news-home .container {position: relative;}
/* Lista przestaje byc flexem z kaflami po 50% - slick potrzebuje bloku. */
/* Slajdy ida nad naglowkiem: przy przewijaniu zdjecie kolejnego newsa ma
   przykrywac napis, a nie przejezdzac pod nim. */
.news-list.news-home .list {display: block; margin: 0; position: relative; z-index: 1;}
.news-list.news-home .news-item {width: auto; padding: 0;}
/* Tresc rowna sie do gory, zeby data trafila tuz pod naglowek sekcji - przy
   wysrodkowaniu odstep rozjezdzalby sie zaleznie od dlugosci leadu. */
.news-list.news-home .news-item .news-item-cont {display: flex; align-items: flex-start; background: none; border: none; border-radius: 0; padding: 0; height: auto; overflow: visible;}
/* Kolumny sa przesuniete o 15 px wzgledem polowy, zeby pokryly sie z bannerami
   z sekcji powyzej: zdjecie konczy sie tam, gdzie lewy banner, a kolumna tekstu
   zaczyna sie tam, gdzie prawy (banery maja po 15 px wewnetrznego odstepu). */
.news-list.news-home .news-item .photo {width: calc(50% - 15px); flex: 0 0 calc(50% - 15px);}
.news-list.news-home .news-item .photo img {border-radius: 5px;}
/* padding-top robi miejsce na naglowek sekcji, ktory lezy nad ta kolumna. */
.news-list.news-home .news-item .info {width: calc(50% + 15px); flex: 0 0 calc(50% + 15px); padding: 74px 0 0 30px;}
.news-list.news-home .news-item .info h2, .news-list.news-home .news-item .info .news-title {font-size: 36px; line-height: 44px; margin: 0 0 20px 0;}
.news-list.news-home .news-item .info .introduction {color: #4a4a4a; font-size: 19px; line-height: 30px;}
.news-list.news-home .news-item .more {display: inline-block; position: static; margin: 30px 0 0 0; padding: 12px 25px; background: none;}
/* z-index MUSI byc wyzszy niz .list (1), inaczej karta newsa lezy na naglowku i
   przechwytuje klikniecia - link "Aktualnosci" byl widoczny, ale nieklikalny.
   Naglowek stoi w gornej czesci prawej kolumny, gdzie .info ma 74px paddingu, wiec
   wyniesienie go nad liste niczego nie zaslania. 2 = tyle co .arrows. */
.news-list.news-home .title {position: absolute; top: 0; left: calc(50% - 15px); padding: 0 100px 0 30px; text-align: left; z-index: 2;}
.news-list.news-home .title h2, .news-list.news-home .title .section-title {margin: 0; text-transform: uppercase; font-size: 38px; line-height: 44px; font-weight: 900; letter-spacing: .5px; color: #000;}
.news-list.news-home .title h3, .news-list.news-home .title .section-subtitle {margin: 10px 0 0 0; font-size: 17px; line-height: 24px; font-weight: 400; color: #6b6b6b;}
/* Strzalki wzorem sekcji "Swietne ceny", ale zaczepione w prawym dolnym rogu. */
/* Nad slajdami - inaczej .slick-list przykrylby strzalki i zjadal kliki. */
.news-list.news-home .arrows {position: absolute; right: 15px; bottom: 0; z-index: 2;}
.news-list.news-home .arrow {position: relative; display: inline-block; vertical-align: middle; width: 40px; height: 40px; padding: 10px; margin: 0 0 0 10px; background: none; border: 1px solid #000; border-radius: 50%; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;}
.news-list.news-home .arrow svg {display: block; width: 100%; height: auto; stroke: #000; transition: stroke .2s ease;}
.news-list.news-home .arrow:hover {background: #000; border-color: #000;}
.news-list.news-home .arrow:hover svg {stroke: #fff;}

.news-single .name {margin: 0; text-transform: uppercase; font-size: 38px; line-height: 42px; font-weight: 900;}
.news-single .column {display: flex; flex-wrap: nowrap; margin: 0 -15px;}
.news-single .column .main-photo {width: 100%; padding: 15px;}
.news-single .column .main-photo img {display: block; border-radius: 10px;}
.news-single .column .content {width: 100%; padding: 15px;}

.home .banners {padding: 40px 0;}
.banners .boxes {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.banners .boxes .box {width: 50%; padding: 15px; position: relative;}
.banners .boxes .box figure {margin: 0; padding: 0;}
.banners .boxes .box figure img {display: block; margin: 0 auto; width: 100%;}
.banners .boxes .box figure a {display: block; border-radius: 5px; overflow: hidden; position: relative;}
/* Cala tresc banera (naglowek, kreska, opis, przycisk) jest generowana z bazy i lezy
   na lewej polowie grafiki. Kolor akcentu przychodzi z panelu jako --banner-accent
   ustawiona na .box; motyw i wyrozniony wiersz naglowka - jako klasy. */
.banners .boxes .box {--banner-accent: #f58220;}
.banners .boxes .box .info {position: absolute; top: 50%; left: 45px; width: 50%; transform: translate(0, -50%); padding: 10px 0; text-align: left;}
/* .banner-title: tytul banera na stronie glownej jest <p> - to karta promocyjna, nie sekcja. */
.banners .boxes .box h2, .banners .boxes .box .banner-title {font-size: 34px; line-height: 40px; text-align: left; margin: 0; font-weight: 900;}
.banners .boxes .box h2 span, .banners .boxes .box .banner-title span {display: block;}
.banners .boxes .box h2 a, .banners .boxes .box .banner-title a {color: inherit; text-decoration: none;}
.banners .boxes .box .line {display: block; width: 60px; height: 3px; margin: 18px 0 0 0; background: var(--banner-accent); border-radius: 2px;}
.banners .boxes .box .description {margin: 18px 0 0 0; font-size: 15px; line-height: 22px;}
.banners .boxes .box .description p {margin: 0 0 6px 0;}
.banners .boxes .box .description p:last-child {margin-bottom: 0;}
.banners .boxes .box .more {display: inline-block; border: 1px solid var(--banner-accent); border-radius: 4px; padding: 10px 40px; background: var(--banner-accent); color: #fff; font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: 700; margin: 25px 0 0 0; transition: filter .2s ease;}
.banners .boxes .box .more:hover {color: #fff; filter: brightness(1.12);}
/* Motyw: kolor tekstu podstawowego zalezy od jasnosci grafiki pod spodem. */
.banners .boxes .box.theme-dark {color: #fff;}
.banners .boxes .box.theme-dark .description {color: rgba(255, 255, 255, .82);}
.banners .boxes .box.theme-light {color: #000;}
.banners .boxes .box.theme-light .description {color: #5a5a5a;}
/* Akcent obejmuje jeden wiersz naglowka - ktory, decyduje ustawienie w panelu. */
.banners .boxes .box.accent-first h2 span.name-1, .banners .boxes .box.accent-second h2 span.name-2, .banners .boxes .box.accent-first .banner-title span.name-1, .banners .boxes .box.accent-second .banner-title span.name-2 {color: var(--banner-accent);}
/*.home .banners .boxes .box:nth-of-type(2) h2 span.name-1 {color: #b35a00; background: #fff; border-radius: 5px; padding: 2px 10px; display: inline-block;}
.home .banners .boxes .box:nth-of-type(2) h2 span.name-2 {color: #fff;}
.home .banners .boxes .box:nth-of-type(2) .more {background: #f58220; border-color: #f58220; color: #000;}*/

.home .wyswig-icons {position: relative;}
.home .wyswig-icons:before {content: ' '; display: block; position: absolute; left: 0; right: 0; top: 90px; bottom: 0; background: #000; z-index: -1;}
.home .wyswig-icons .wyswig table, .home .wyswig-icons .wyswig tbody {display: block; position: relative;}
.home .wyswig-icons .wyswig table tr {display: flex; flex-wrap: wrap;}
.home .wyswig-icons .wyswig table tr td {display: block; width: 25%; padding: 15px 15px 50px 15px; text-align: center; position: relative;}
.home .wyswig-icons .wyswig table tr td:before {content: ' '; display: block; position: absolute; left: 0; right: 0; top: 90px; bottom: 0; background: #000; z-index: -1;}
.home .wyswig-icons .wyswig table tr td .ico {background: #000; border-radius: 50%; width: 150px; height: 150px; margin: 0 auto 15px auto; padding: 20px 10px 10px 10px; position: relative; border: 2px solid #fff;}
.home .wyswig-icons .wyswig table tr td .ico svg {display: block; width: 40%; margin: 0 auto; fill: #fff; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%);}
.home .wyswig-icons .wyswig table tr td .ico.stroke svg * {fill: none; stroke: #fff;}
.home .wyswig-icons .wyswig table tr td h3 {font-size: 22px; line-height: 26px; font-weight: 900; text-transform: uppercase; color: #fff; margin: 0 0 15px 0;}
/* Ten sam pomarancz co kreseczka pod naglowkiem (regula nizej) - ciemniejszy
   #b35a00 gasl na czarnym tle sekcji. */
.home .wyswig-icons .wyswig table tr td h3 strong {color: #b35a00;}
.home .wyswig-icons .wyswig table tr td h3:after {content: ' '; display: block; background: #f58220; width: 100px; height: 2px; max-width: 90%; margin: 15px auto 0 auto;}
.home .wyswig-icons .wyswig table tr td p {color: #fff; font-size: 13px; line-height: 18px; width: 220px; max-width: 100%; margin: 0 auto;}

.home .categories-list .list {display: flex; margin: 0 -15px;}
.home .categories-list .list>.category-item {padding: 15px; width: 100%;}
.home .categories-list .list>.category-item>.info>h3 {margin: 0 0 15px 0; font-size: 16px; line-height: 20px; white-space: nowrap;}
.home .categories-list .list>.category-item>.info>h3:after {content: ' '; display: block; width: 23px; height: 2px; background: #f58220; margin: 5px 0 0 0;}
.home .categories-list .list>.category-item>.info>h3 a {color: #000; text-decoration: none;}
.home .categories-list .list>.category-item .category-item h3 {font-size: 14px; line-height: 18px; margin: 0 0 10px 0; font-weight: 400; white-space: nowrap;}
.home .categories-list .list>.category-item .category-item h3 a {color: #737373; text-decoration: none;}

.categories-menu {padding: 50px 0; background: #f1f1f1;}
.categories-menu .section-title {text-align: center; font-size: 32px; font-weight: 700; margin: 0 0 40px 0; text-transform: uppercase; letter-spacing: 1px;}
/* Siatka niezalezna od liczby kategorii: auto-fit dobiera liczbe kolumn do szerokosci,
   a --cat-col-min steruje nia w breakpointach - bez regul nth-of-type.
   Warunek na liczbe kolumn: N*min + (N-1)*gap <= szerokosc .container.
   Przy 1600px kontenera (1570px tresci) i gap 20px min=170px daje 8 kolumn
   (8*170+7*20 = 1500 <= 1570; dziewiata juz sie nie miesci).
   UWAGA: przy zmianie gap trzeba przeliczyc procentowe warianty --cat-col-min
   ponizej w media queries - inaczej auto-fit zwinie siatke do jednej kolumny. */
.categories-menu .menu {--cat-col-min: 170px; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cat-col-min), 1fr)); gap: 20px; padding: 0;}
.categories-menu .menu div.item {background: #fff; border-radius: 8px; padding: 25px 20px; transition: box-shadow 0.4s;}
.categories-menu .menu div.item:hover {box-shadow: 0 0 14px rgba(66, 68, 90, 0.34);}
.categories-menu .menu div.item .ico {text-align: center; margin: 0 0 15px 0;}
.categories-menu .menu div.item .ico a {display: inline-block; padding: 0;}
.categories-menu .menu div.item .ico svg, .categories-menu .menu .item .ico img {width: 80px; height: 80px; object-fit: contain;}
.categories-menu .menu .item .ico img {width: auto; height: auto; max-width: 100%; max-height: 100px;}
/* Zdjecia ida przez metode 'ra' na plotnie 400x400, wiec renderuja sie jako 100x100
   (max-height wyzej). Placeholder trzyma te sama wysokosc, zeby kafel bez grafiki
   nie mial nazwy kategorii wyzej niz sasiedzi. */
.categories-menu .menu .item .ico img.ico-placeholder {width: 100px; height: 100px;}
/* h3 jest flexem (centrowanie nazw jedno- i dwuliniowych), wiec kreska pod tytulem
   musi byc position:absolute - inaczej pseudoelement stalby sie flex-itemem. */
.categories-menu .menu div.item .links h3 {text-align: center; font-size: 16px; font-weight: 700; margin: 0 0 20px 0; padding-bottom: 14px; min-height: 40px; position: relative; display: flex; align-items: center; justify-content: center;}
.categories-menu .menu div.item .links h3:after {content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: #e1e1e1;}
.categories-menu .menu div.item .links h3 a {color: #000; text-decoration: none; transition: color 0.3s ease;}
.categories-menu .menu div.item .links h3 a:hover {color: #b35a00;}
.categories-menu .menu div.item .links .submenu {margin: 0; padding: 0; list-style: none;}
.categories-menu .menu div.item .links .submenu .item {margin: 0 0 10px 0; padding-left: 14px; position: relative;}
.categories-menu .menu div.item .links .submenu .item:before {content: '\00B7'; position: absolute; left: 3px; top: 0; color: #666666;}
.categories-menu .menu div.item .links .submenu .item h4 {margin: 0; font-size: 13px; font-weight: 400; line-height: 1.4;}
.categories-menu .menu div.item .links .submenu .item h4 a {color: #666; text-decoration: none; transition: color 0.3s ease;}
.categories-menu .menu div.item .links .submenu .item h4 a:hover { color: #b35a00;}
/* padding-left rowny wcieciu pozycji listy (miejsce na punktor), zeby napis
   zaczynal sie w tej samej linii co nazwy podkategorii. */
.categories-menu .menu div.item .show-more {margin-top: 10px; text-align: left; padding-left: 14px; font-weight: 700;}
.categories-menu .menu div.item .show-more .show-more-btn {display: inline-flex; align-items: center; gap: 5px; color: #6b6b6b; text-decoration: none; font-size: 12px; font-weight: 500; transition: color 0.3s ease; background: none; border: none; padding: 0; cursor: pointer;}
.categories-menu .menu div.item .show-more .show-more-btn:hover {color: #b35a00;}
/* Strzalka obraca sie po rozwinieciu listy - stan trzyma klasa .expanded na .item. */
.categories-menu .menu div.item .show-more .show-more-ico {display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease;}
.categories-menu .menu div.item.expanded .show-more .show-more-ico {transform: rotate(180deg);}
.categories-menu .menu .item .links .submenu .item.hidden-item {display: none;}
.categories-menu .menu .item.expanded .links .submenu .item.hidden-item {display: block;}


.newsletter-subscribe-form .field-box.field {display: none;}
.newsletter-subscribe-form .field-box label a {color: #b35a00; font-weight: 400;}
.newsletter-subscribe-form .field-box.field {display: none;}
.newsletter-subscribe-form .field-box.email {width: 500px; max-width: 100%; margin: 0 auto;}
.newsletter-subscribe-form .field-box .error-info {color: #d32718; font-size: 14px; line-height: 20px;}
.newsletter-subscribe-form .form-result {background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px;}
.newsletter-subscribe-form.success .form-result {background: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 5px; font-size: 17px; line-height: 20px;}
.newsletter-subscribe-form.error .form-result {background: #d62d20; border: 1px solid #d62d20; color: #fff; border-radius: 5px; font-size: 17px; line-height: 20px;}

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-left {width: 30%; padding: 15px;}
footer .footer-cont .foot-middle {width: 40%; padding: 70px 0 15px 0; display: flex; flex-wrap: wrap;}
footer .footer-cont .foot-right {width: 30%; padding: 70px 15px 15px 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 {display: flex; flex-wrap: wrap; margin: 0; margin: 0 -10px;}
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 .contact-details a:hover {color: #b35a00;}
footer .menu-box {padding: 0 15px; width: 33.3333%;}
footer .menu-box .m-box+.m-box {margin-top: 35px;}
footer .menu-box h4, footer .newsletter-form-box h4 {text-transform: uppercase; font-size: 16px; font-weight: 700; margin: 0 0 15px 0;}
footer .menu-box ul+h4 {margin-top: 30px;}
footer .menu-box .menu {padding: 0; margin: 0 0 15px 0; list-style: none;}
footer .menu-box .menu li {margin: 0 0 10px 0;}
/* Menu 7 idzie z panelu, wiec link do formularza zwrotow stoi w osobnej liscie tuz
   pod nim. Obie listy maja wygladac jak jedna, czyli odstep ma byc taki sam jak
   miedzy pozycjami (10px z .menu li).
   Dolny margines pierwszej listy (15px) zwija sie z marginesem jej ostatniego li
   (10px) do 15px, wiec zeby zostalo 10px, odejmujemy 5, a nie 15 - przy -15px odstep
   schodzil do zera i pozycje sie sklejaly. */
footer .menu-box .menu + .menu {margin-top: -5px;}
footer .menu-box .menu li a {color: #bebebe; text-decoration: none; font-size: 12px; line-height: 16px;}
footer .menu-box .menu li a svg {display: inline-block; width: 20px; fill: #f58220; vertical-align: bottom; margin: 0 7px 0 0;}
footer .menu-box .menu li a:hover {color:white;}
footer .address {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 .newsletter-form-box {margin: 0 0 30px 0;}
footer .newsletter-form-box p {font-size: 14px; line-height: 20px; color: #bebebe; margin: 0 0 15px 0;}
footer .newsletter-form-box p strong, footer .newsletter-form-box p b, footer .newsletter-form-box p a {color: #b35a00; font-weight: 700;}
footer .newsletter-form-box p a:hover {color:white;}
footer .newsletter-form-box form {position: relative; padding: 0 120px 0 0;}
footer .newsletter-form-box form.sending {opacity: 0.5;}
footer .newsletter-form-box form input {box-shadow: none; outline: none; border: none; font-size: 16px; color: #231f20; line-height: 20px; font-weight: 400;}
footer .newsletter-form-box form input[type="text"] {width: 100%; border: none; border-radius: 0; padding: 13px 15px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
footer .newsletter-form-box form input[name="field_h"] {display: none;}
/* Honeypot (pole-pulapka na boty) nie moze byc widoczny nigdzie. Regula
   powyzej jest zawezona do stopki, a formularze modulu Form i bloki
   newslettera potrafia stanac w innym miejscu strony - uzytkownik widzialby
   wtedy puste pole, a jego wypelnienie odrzuciloby zgloszenie jako spam. */
input[name="field_h"], .field-box.h {display: none;}
footer .newsletter-form-box form input[type="submit"] {-o-transition: all .4s;-ms-transition: all .4s;-moz-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;position: absolute; top: 0; right: 0; width: 120px; height: 46px; background: #f58220; color: #212121; text-transform: uppercase; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
footer .newsletter-form-box form input[type="submit"]:hover {background:#bebebe;color:black;}
footer .newsletter-form-box form .error-info {display: block; padding: 10px 15px; background: #f5c6cb; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #721c24; font-size: 14px; line-height: 20px; font-weight: 700;}
footer .newsletter-form-box form .form-result {margin: 0; display: block; padding: 10px 15px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; font-size: 14px; line-height: 20px; font-weight: 700; color: #155724; background: #c3e6cb;}
footer .newsletter-form-box form.error input[type="text"], footer .newsletter-form-box form.success input[type="text"] {border-bottom-left-radius: 0;}
footer .newsletter-form-box .info {display: inline-block; width: 16px; height: 16px; border-radius: 50%; text-align: center; line-height: 18px; font-size: 14px; background: #fff; color: #000; font-weight: 700;}
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 .social a:hover {border: 1px solid white;}
footer .partners {background: #fff; padding: 50px 0 10px 0;}
footer .partners .partners-cont {display: flex; flex-wrap: wrap; margin: 0 -15px; align-items: center; justify-content: center;}
footer .partners .partner {padding: 15px;}
footer .partners .partner img {display: block; max-width: 100%; height: 50px; width: auto; margin: 0 auto; filter: grayscale(1); transition: filter .4s;}
footer .partners .partner svg {display: block; max-width: 100%; height: 40px; width: auto; margin: 0 auto; fill: #9b9b9b;}
footer .partners .partner svg>* {transition: fill .4s;}
footer .partners .partner img:hover {filter: none;}
footer .partners .partner.prokonsumencki img {height: 35px;}
footer .partners .partner.skapiec svg {height: 25px;}
footer .partners .partner.skapiec svg:hover {fill: #084690;}
footer .partners .partner.skapiec svg:hover .sk-yellow {fill: #FFDB41;}
footer .partners .partner.blue-media svg:hover {fill: #0068b4;}
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;}
footer .realization a:hover {color: #b35a00;}
.mobile footer {background-image: url('/assets/gfx/m-footer-bgn.jpg');}
.mobile footer .footer-cont {margin: 0; display: block;}
.mobile footer .footer-cont .menu-box, .mobile footer .footer-cont .menu-box.client-arae {width: 100%; padding: 0; border-bottom: 1px solid #474747; padding: 15px 0 5px 0; display: block;}
.mobile footer .menu-box.shortcuts {border-top: 1px solid #474747;}
.mobile footer .menu-box .menu {margin: 0; display: none;}
.mobile footer .menu-box.opened .menu {display: block;}
.mobile footer .menu-box h4, .mobile footer .newsletter-form-box h4 {font-size: 17px; position: relative;}
.mobile footer .menu-box h4:before, .mobile footer .menu-box h4:after {content: ' '; display: block; width: 3px; height: 12px; background: #fff; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%);}
.mobile footer .menu-box h4:before {transform: translate(0, -50%) rotate(-45deg); margin-top: -4px;}
.mobile footer .menu-box h4:after {transform: translate(0, -50%) rotate(45deg); margin-top: 4px;}
.mobile footer .newsletter-form-box {padding: 15px 0 0 0;}
.mobile footer .address {text-align: center;}
.mobile footer .contact {width: 100%; justify-content: center; margin: 0 0 20px 0;}
.mobile footer .contact-details svg {display: block; margin: 0 auto;}
.mobile footer .social {text-align: center; border-bottom: 1px solid #474747; margin: 0 0 10px 0;}
.mobile footer .shop-info {padding: 0;}


.website-top-banner {position: relative; padding: 0 40px 0 15px; background: no-repeat center; background-size: cover; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, padding .4s ease; max-height: 200px; opacity: 1;}
.website-top-banner.closing {max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;}
.website-top-banner a, .website-top-banner .caption {display: block; color: #fff; text-align: center; padding: 10px; font-weight: 600; font-size: 17px; line-height: 22px;}
.website-top-banner .close {position: absolute; top: 50%; right: 10px; width: 25px; transform: translate(0, -50%); cursor: pointer;}
.website-top-banner .close svg {display: block; width: 100%; height: auto; fill: #fff;}


.comparison-widget {position: fixed; bottom: 0; left: 0; right: 0; z-index: 22; background: #fff; padding: 5px 0; box-shadow: 0px 3px 23px 0px rgba(0, 0, 0, 1);}
.comparison-widget .flex {display: flex; align-items: center;}
.comparison-widget .compare-products {display: flex; flex-wrap: wrap; margin: 0 -5px;}
.comparison-widget .compare-product {padding: 5px; width: 50px; position: relative;}
.comparison-widget .compare-product .box {display: block; border: 1px solid #ccc; border-radius: 3px; padding: 4px;}
.comparison-widget .compare-product img {display: block; margin: 0; max-width: 100%; height: auto;}
.comparison-widget .compare-product .remove {display: block; width: 15px; height: 15px; position: absolute; top: 0; right: 0;}
.comparison-widget .compare-product .remove svg {max-width: 100%; max-height: 100%; display: block; fill: #000;}
.comparison-widget .btn {margin: 0 0 0 auto; border: 2px solid #000; border-radius: 5px; background: #000; color: #fff; height: 40px; font-weight: 700; font-size: 16px; line-height: 20px; cursor: pointer; box-shadow: none; padding: 8px 10px; text-decoration: none;}
.comparison-widget .comparison-actions {display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto;}
.comparison-widget .comparison-actions .btn {margin: 0;}
.comparison-widget .comparison-clear {display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #555; font-size: 12px; font-weight: 400; line-height: 16px; text-decoration: none; white-space: nowrap;}
.comparison-widget .comparison-clear:hover {border-color: #f58220; color: #b35a00;}
.comparison-widget .comparison-clear svg {flex: 0 0 13px; width: 13px; height: 13px; display: block;}

.product-comparison h1 {margin: 0 0 30px 0;}
.product-comparison .compare-categories {display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 -10px 20px -10px;}
.product-comparison .compare-categories .category {padding: 10px;}
.product-comparison .compare-categories .category button {border: 2px solid #000; background: none; color: #000; height: 40px; font-weight: 700; font-size: 16px; line-height: 20px; cursor: pointer; box-shadow: none; padding: 8px 10px; text-decoration: none; outline: none; box-shadow: none;}
.product-comparison .compare-categories .category.active button {background: #000; color: #fff;}
.product-comparison .comparison-box {position: relative;}
.product-comparison .compare-category-box {width: 100%; position: absolute; opacity: 0; z-index: -1; display: block; left: 0; top: 0;}
.product-comparison .compare-category-box.active {display: block; position: relative; z-index: 1; opacity: 1; left: initial; top: initial;}
.product-comparison .no-products {margin: 100px 0; text-align: center;}
.product-comparison .compare-list {margin: 0 0 50px 0;}
.product-comparison .compare-list .list-row {display: flex; border-bottom: 1px solid #dbdbdb;}
.product-comparison .compare-list .list-row.params:hover {background-color: #f5f5f5;}
.product-comparison .compare-list .list-cat-header {width: 100%; padding: 10px;}
.product-comparison .compare-list .list-cat-header h3 {margin: 0; font-size: 24px; line-height: 32px;}
.product-comparison .compare-list .list-cat-header a {text-decoration: none; color: #000;}
.product-comparison .compare-list .list-header {background: #dbdbdb; width: 100%; padding: 10px;}
.product-comparison .compare-list .list-header h3 {margin: 0; font-size: 18px; line-height: 22px;}
.product-comparison .compare-list .list-col {width: 100%; position: relative;}
.product-comparison .compare-list .list-col p {margin: 0;}
.product-comparison .compare-list .list-col .remove {position: absolute; width: 30px; height: 30px; top: 10px; right: 10px;}
.product-comparison .compare-list .list-col.col-names {width: 200px; flex-shrink: 0; border-left: none; padding: 10px;}
.product-comparison .compare-list .list-col.col-names p {font-weight: 600;}
.product-comparison .compare-list .list-col.col-products {display: block; width: calc(100% - 200px); overflow: hidden;}
.product-comparison .compare-list .list-col.col-products .slider-box {display: flex; transition: margin-left 400ms;}
.product-comparison .compare-list .list-col.col-products .slider-box {flex: none;}
.product-comparison .compare-list .list-col.col-products .list-prod {width: 100%; border-left: 1px solid #dbdbdb; padding: 10px; position: relative;}
.product-comparison .compare-list .list-col.col-products .control {opacity: 0; border-radius: 50%; outline: none; box-shadow: none; border: none; background: none; padding: 0; width: 42px; height: 42px; cursor: pointer; position: absolute; top: 50%; margin: -21px 0 0 0;}
/* Strzalki przewijania sa w DOM zawsze, ale klase show-controls dostaja tylko gdy
   produktow jest wiecej niz miesci sie w widoku (basket.js). Pokazujemy je wiec od
   razu, bez najechania - w kolorze marki, zeby od pierwszego spojrzenia bylo widac,
   ze jest co przewijac.
   Ikona to pomaranczowy dysk z WYCIETA strzalka, wiec tlo przycisku przeswituje
   przez to wyciecie i to ono robi biala strzalke. Dlatego zadnego paddingu: tlo musi
   dokladnie pokrywac sie z dyskiem, inaczej wystaje jako bialy pierscien dookola. */
.product-comparison .compare-list .list-col.col-products.show-controls .control {opacity: 1; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); padding: 0;}
.product-comparison .compare-list .list-col.col-products .control.prev {left: 5px;}
.product-comparison .compare-list .list-col.col-products .control.next {right: 5px;}
.product-comparison .compare-list .list-col.col-products .control svg {display: block; width: 100%; height: 100%; margin: 0 auto; fill: #f58220;}
.product-comparison .compare-list .list-col.col-products.show-controls .control:hover {background: #f58220;}
.product-comparison .compare-list .list-col.col-products.show-controls .control:hover svg {fill: #fff;}
/* Kraniec listy: strzalka blednie (klase disabled nadaje basket.js wg pozycji). */
.product-comparison .compare-list .list-col.col-products.show-controls .control.disabled {opacity: .3; cursor: default; box-shadow: none;}
.product-comparison .compare-list .list-col.col-products.show-controls .control.disabled:hover {background: #fff;}
.product-comparison .compare-list .list-col.col-products.show-controls .control.disabled:hover svg {fill: #f58220;}
.product-comparison .compare-list .list-col img {display: block; margin: 0 auto 10px auto; width: 150px; max-width: 100%;}
.product-comparison .compare-list .list-col h2 {margin: 0 0 10px 0; font-size: 16px; line-height: 20px;}
.product-comparison .compare-list .list-col a {text-decoration: none; color: #000;}
.product-comparison .compare-list .list-col .price-box p {margin: 0 0 5px 0; font-size: 16px; line-height: 18px; font-weight: 700; margin-right: 10px;}
.product-comparison .compare-list .list-col .price-box .special-price {color: green;}
.product-comparison .compare-list .list-col .price-box .special-price+.price {font-weight: 400; font-size: 14px; text-decoration: line-through; color: red;}

.breadcrumbs {margin: 0 0 30px 0;}
.breadcrumbs .breadcrumbs-block {display: flex; flex-wrap: wrap; padding: 10px 0; margin: 0; font-size: 14px; line-height: 18px; color: #666666; }
.breadcrumbs .breadcrumbs-block .breadcrumbs-item {display: block; margin: 0; position: relative;}
.breadcrumbs .breadcrumbs-block .breadcrumbs-item span {margin: 0 2px; display: inline-block;}
.breadcrumbs .breadcrumbs-block .breadcrumbs-item a {text-decoration: none; color: #666666;}
.breadcrumbs .breadcrumbs-block .breadcrumbs-item a:hover {color: #000;}
.breadcrumbs .breadcrumbs-block .breadcrumbs-subs {display: none; position: absolute; left: 0; top: 100%; background: #fff; z-index: 2; border: 1px solid #e1e1e1; border-radius: 5px; padding: 5px 10px; border-top-left-radius: 0; box-shadow: 0px 8px 14px 0px rgba(66, 68, 90, 0.34);}
.breadcrumbs .breadcrumbs-block .breadcrumbs-item:hover .breadcrumbs-subs {display: block;}
.breadcrumbs .breadcrumbs-block .breadcrumbs-subs .breadcrumbs-sub {white-space: nowrap; padding: 2px 0;}

.pagination-box {display: flex; flex-wrap: wrap;}
.pagination-box label {padding: 10px 0; font-size: 17px; line-height: 22px; color: #000;}
.pagination {display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 15px 0; list-style: none;}
.pagination li {display: block; margin: 0 0 0 10px; font-size: 18px; line-height: 24px; text-align: center;}
.pagination li a {text-decoration: none; border: 1px solid #ebebeb; border-radius: 3px; color: #666666; height: 44px; min-width: 44px; padding: 9px 2px; display: block; transition: border-color .4s, color .4s;}
.pagination li a svg {display: block; width: 24px; padding: 3px; margin: 0 auto; fill: #000;}
.pagination li.first a, .pagination li.last a, .pagination li.previous a, .pagination li.next a {background: #ebebeb;}
.pagination li.active a {background:#f58220;color:white;}

.category-single .category-cont, .product-finder .product-finder-cont, .promo-single .promo-products-box,.manufacturer-single .category-cont {display: flex; flex-wrap: nowrap; margin: 0 0 50px 0;}
.product-favorite .product-favorite-cont {margin: 0 0 50px 0;}
/* Karta produktu wariantowego. Rozmiar naglowka jak nazwa na karcie zwyklego
   produktu (.product-single .details-box .product-name), a nie jak nazwa kategorii -
   to nadal jest produkt, a nazwy wariantow bywaja bardzo dlugie. */
.products-variants-box .variants-name {font-size: 34px; line-height: 40px; font-weight: 400; margin: 30px 0 25px 0;}
/* Gdy zaden wariant nie jest dostepny, sekcja nie ma zadnej innej tresci,
   wiec komunikat potrzebuje wlasnych odstepow. */
.products-variants-box .variants-unavailable {margin-bottom: 50px;}
.products-variants-box .variants-unavailable .alert {margin: 0;}
.category-single .products-list-filters-box, .product-finder .products-list-filters-box, .promo-single .products-list-filters-box,.manufacturer-single .products-list-filters-box {width: 370px; flex-shrink: 0; padding: 0 30px 0 0;}
.category-single .category-box, .product-finder .product-finder-box, .promo-single .products-list-boxx, .product-favorite .product-favorite-box,.manufacturer-single .category-box,.promo-single .products-list-box {width: 100%;}
.category-single .category-box .name, .product-finder .product-finder-box .name, .product-favorite .product-favorite-box .favorite-details .name {font-size: 48px; line-height: 54px; font-weight: 900; margin: 0 0 30px 0;}
.category-single .category-box .description, .product-finder .product-finder-box .description, .product-favorite .product-favorite-box .favorite-details .description {font-size: 17px; line-height: 22px; font-weight: 400;}
.category-single .category-box .description.description-bottom {margin-top: 30px;}
/* Linki w opisach kategorii (gornym i dolnym). Bez tego zostawaly na domyslnych
   kolorach przegladarki - niebieski, a po odwiedzeniu fioletowy - co odstawalo
   od reszty serwisu. Podkreslenie dokladaja regule WCAG 1.4.1 nizej w pliku. */
/* Kolor tych linkow ustawia wspolna regula tresci redakcyjnej (szukaj
   ".product-description-content a {color" nizej w pliku). */
.category-single .products-list.list-1 .product-box, .product-finder .products-list.list-1 .product-box, .promo-single .products-list.list-1 .product-box,.manufacturer-single .products-list.list-1 .product-box {width: 33.3333%;}

.manufacturer-single .information .flex {display:flex;}



.ajaxReload {position: relative;}
.ajaxReload.loading>*{opacity: 0.5;}
.ajaxReload .productAjaxLoader {position: absolute; top: 200px; left: 50%; width: 64px; height: 48px; display: block; animation: split 1s ease-in infinite alternate; transform: translate(-50%, -50%); opacity: 1;}
.ajaxReload .productAjaxLoader::before, .productAjaxLoader::after {content: ''; position: absolute; height: 48px; width: 48px; border-radius: 50%; left: 0; top: 0; transform: translateX(-10px); background: #f58220; opacity: 0.85; backdrop-filter: blur(20px);}
.ajaxReload .productAjaxLoader::after {left: auto; right: 0; background: #838383; transform: translateX(10px);}

.category-products-box {margin: 40px 0 0 0;}
.category-products-box .products-list.list-1, .product-finder .products-list.list-1, .promo-single .products-list.list-1 {margin-bottom: 30px;}

.products-list-filters .filter-group-name {margin: 0 0 15px 0; font-size: 22px; line-height: 26px; font-weight: 900; text-transform: uppercase; color: #000; background: #ececec; padding: 10px; border-radius: 5px;}

.products-list-filters .filter-group-name svg {display: inline-block; height: 20px; vertical-align: middle; margin: 0 10px 0 0; fill: #000;}
.cat-box-filter {margin: 0 0 20px 0;}
.box-filter-cont .categories .category-item, .box-filter-cont .parent-category, .box-filter-cont .filter-box .checkbox {padding: 2px 0;}
.box-filter-cont .categories .category-item a, .box-filter-cont .parent-category a, .box-filter-cont .filter-box .checkbox label {display: block; font-size: 17px; line-height: 20px; color: #000; text-decoration: none; position: relative; padding: 5px 50px 5px 5px; cursor: pointer;}
.box-filter-cont .categories .category-item a.empty {color: #666666;}
.box-filter-cont .categories .category-item a:hover,.box-filter-cont .categories .category-item a:hover .category-count {color: #b35a00;}
.box-filter-cont .filter-box .checkbox label {padding-left: 35px;}
.box-filter-cont .filter-box .checkbox input:disabled+label {color: #666666;}
.box-filter-cont .categories .category-item a.active,.box-filter-cont .categories .category-item a.active .category-count {color: #b35a00;}
.box-filter-cont .filter-box .checkbox label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 6px; left: 5px; border: 1px solid #d1d1d1; border-radius: 3px; color: #fff; font-weight: 900; text-align: center; line-height: 18px; font-size: 16px;}
.box-filter-cont .filter-box .checkbox input[type="checkbox"]:checked+label:before {border-color: #f58d35; background: #f58d35; content: '\2713';}
.box-filter-cont .categories .category-item a .category-count, .box-filter-cont .filter-box .checkbox label .filter-count {position: absolute; top: 5px; right: 10px; font-size: 17px; line-height: 20px; color: #666666; font-weight: 400;}
.box-filter-cont .categories .category-item .category-item {padding: 2px 0 2px 20px;}
.box-filter-cont .parent-category a {padding: 5px;}
.box-filter-cont .parent-category a svg {display: inline-block; height: 20px; vertical-align: text-bottom; margin: 0 5px 0 0; fill: #000;}
.box-filter-cont .filter-box {padding: 30px 0;}
.box-filter-cont .filter-box:nth-of-type(1) {padding-top: 0;}
.box-filter-cont .filter-box+.filter-box {border-top: 1px solid #d1d1d1;}
.box-filter-cont .filter-box.per-page, .box-filter-cont .filter-box.sorting {display: none;}
.box-filter-cont .filter-box .title {margin: 0 0 10px 0; padding: 0;}
.box-filter-cont .filter-box .title h4 {margin: 0; font-size: 18px; line-height: 22px; color: #000; font-weight: 700; text-transform: uppercase;}
.box-filter-cont .filter-box .checkbox {position: relative;}
.box-filter-cont .filter-box .checkbox input[type="checkbox"] {position: absolute; z-index: -1; opacity: 0; width: 1px; height: 1px;}
.box-filter-cont .filter-box .checkbox.hidden {display: none;}
.box-filter-cont .filter-box .btn-show-hide {text-align: center; padding: 5px 0 0 0;}
.box-filter-cont .filter-box .btn-show-hide button {color: #6b6b6b; text-decoration: none; font-size: 14px; line-height: 16px; background: none; border: none; padding: 0; cursor: pointer;}
.box-filter-cont .filter-box .btn-show-hide button:hover {color:black;}
.box-filter-cont .filter-box .price-filter-row {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.box-filter-cont .filter-box .price-filter-row .price {white-space: nowrap; font-size: 17px; line-height: 20px; color: #6b6b6b;}
.box-filter-cont .filter-box .price-filter-row .price input {width: 130px; text-align: center; font-size: 17px; line-height: 20px; color: #000; border: 1px solid #d1d1d1; border-radius: 3px; height: 40px; padding: 5px; outline: none; box-shadow: none;}
.box-filter-cont .filter-box .price-filter-row .separator {color: #6b6b6b;}
.jconfirm-content .box-filter-cont {padding: 0 0 10px 0; display: flex; flex-wrap: wrap;}
.jconfirm-content .box-filter-cont .filter-box .title {margin: 0 0 20px 0;}
.jconfirm-content .box-filter-cont .filter-box .btn-show-hide {display: none;}
.jconfirm-content .box-filter-cont .filter-box .checkbox.hidden {display: block;}
.jconfirm-content .box-filter-cont .filter-box .title {margin: 0;}
.jconfirm-content .box-filter-cont .filter-box .title h4 {position: relative; padding: 15px; cursor: pointer;}
.jconfirm-content .box-filter-cont .filter-box .title h4:before, .jconfirm-content .box-filter-cont .filter-box .title h4:after {content: ' '; display: block; width: 2px; height: 10px; background: #000; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%);}
.jconfirm-content .box-filter-cont .filter-box .title h4:before {transform: translate(0, -50%) rotate(-45deg); right: 26px;}
.jconfirm-content .box-filter-cont .filter-box .title h4:after {transform: translate(0, -50%) rotate(45deg);}
.jconfirm-content .box-filter-cont .filter-box .parameters_list, .jconfirm-content .box-filter-cont .filter-box .price-filter-row {display: none;}
.jconfirm-content .box-filter-cont .filter-box.opened .parameters_list {display: block; padding: 0 10px 10px 10px;}
.jconfirm-content .box-filter-cont .filter-box.opened .price-filter-row {display: flex; padding: 0 10px 10px 10px;}
.jconfirm-content .box-filter-cont .filter-box {border: 1px solid #d1d1d1; border-radius: 10px; padding: 0; order: 3; width: 100%;}
.jconfirm-content .box-filter-cont .filter-box.show-type {order: 1; margin: 20px 0 0 0;}
.jconfirm-content .box-filter-cont .filter-box.manufacturers {order: 2; margin: 0;}
.jconfirm.has-manufacturers .jconfirm-content .box-filter-cont .filter-box.show-type {margin: 20px 0 20px 0;}
.jconfirm-content .box-filter-cont .filter-box+.filter-box {margin-top: 20px;}
.jconfirm-content .box-filter-cont .filter-box.per-page, .jconfirm-content .box-filter-cont .filter-box.sorting {display: block;}
.jconfirm-content .box-filter-cont .filter-box .select2 {width: 100% !important;}
/*
.jconfirm-content .products-list-filters {position: relative; margin: 0 auto; padding: 0;}
.jconfirm-content .products-list-filters .head {display: block; padding: 10px 35px 10px 15px; font-size: 20px; line-height: 24px; font-weight: 900; border-bottom: 1px solid #e1e1e1; position: relative;}
.jconfirm-content .products-list-filters .head .close {position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; cursor: pointer;}
.jconfirm-content .products-list-filters form {display: flex; flex-wrap: wrap; height: calc(60vh - 98px);}
.jconfirm-content .products-list-filters .cat-box-filter, .jconfirm-content .products-list-filters .filters-box-filter {width: 50%; padding: 10px; overflow-y: scroll; height: 100%; position: relative;}
.jconfirm-content .products-list-filters .foot {display: block; height: 53px; border-top: 1px solid #e1e1e1; padding: 10px 15px 0 15px; text-align: right;}
.jconfirm-content .products-list-filters .foot button {border-radius: 5px; font-size: 16px; line-height: 20px; padding: 5px 15px; cursor: pointer; outline: none; box-shadow: none; margin: 0 0 0 10px;}
.jconfirm-content .products-list-filters .foot button.products-filter-form-btn {border: 1px solid #000; background: #000; color: #fff;}
.jconfirm-content .products-list-filters .foot button.close {border: 1px solid #e1e1e1; background: none; color: #000;}
*/
.products-list-order-sort {display: flex; flex-wrap: wrap; margin: 0 -10px; position: relative;}
.products-list-order-sort.top {padding: 20px 0 10px 0;}
.products-list-order-sort.top:before {content: ' '; display: block; position: absolute; top: 0; left: 10px; right: 10px; border-top: 1px solid #e1e1e1; height: 1px;}
.products-list-order-sort .products-filter-btn-box, .products-list-order-sort .products-category-btn-box {padding: 0 10px; margin: 0 0 10px 0; display: none;}
.products-list-order-sort .products-filter-btn, .products-list-order-sort .products-category-btn {display: block; width: auto; height: 44px; padding: 10px 30px 10px 10px; border: 1px solid #d1d1d1; border-radius: 3px; font-size: 17px; line-height: 22px; cursor: pointer; position: relative;}
.products-list-order-sort .products-filter-btn:before, .products-list-order-sort .products-category-btn:before, .products-list-order-sort .products-filter-btn:after, .products-list-order-sort .products-category-btn:after {content: ' '; display: block; width: 2px; height: 9px; background: #000; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%);}
.products-list-order-sort .products-filter-btn:before, .products-list-order-sort .products-category-btn:before {transform: translate(0, -50%) rotate(-45deg); right: 15px;}
.products-list-order-sort .products-filter-btn:after, .products-list-order-sort .products-category-btn:after {transform: translate(0, -50%) rotate(45deg);}
.products-list-order-sort .products-category-btn {background: #ececec; text-transform: uppercase; font-size: 18px; font-weight: 700; border-color: #ececec;}
.products-list-order-sort .products-filter-btn svg, .products-list-order-sort .products-category-btn svg {width: 22px; margin: 0 auto; display: inline-block; vertical-align: middle; margin: 0 5px 0 0;}
.products-list-order-sort select, .products-list-order-sort .pagination input {border: 1px solid #d1d1d1; border-radius: 3px; padding: 10px 5px; height: 44px; font-size: 17px; line-height: 22px; color: #000; outline: none; box-shadow: none;}
.products-list-order-sort select {cursor: pointer;}
.products-list-order-sort .select2 {width: 180px;}
.products-list-order-sort .select2 .select2-selection {border: 1px solid #d1d1d1; border-radius: 3px; padding: 10px; height: 44px;}
.products-list-order-sort .select2 .select2-selection .select2-selection__rendered {padding: 0; font-size: 17px; line-height: 22px; color: #000;}
.products-list-order-sort .select2 .select2-selection .select2-selection__arrow {height: 100%; top: 0; right: 0; width: 30px;}
.products-list-order-sort .select2 .select2-selection .select2-selection__arrow b, .products-list-order-sort .select2.select2-container--open .select2-selection .select2-selection__arrow b {width: 7px; height: 7px; display: block; border: none; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg) translate(-50%, -50%); margin: -5px 0 0 0;}
.products-list-order-sort .number-products {margin: 0 auto 10px 0; padding: 0 10px 0 10px;}
.products-list-order-sort .sort {margin: 0 0 10px auto; padding: 0 10px;}
.products-list-order-sort .views {display: flex; margin: 0 auto 10px 0; padding: 0 10px;}
.products-list-order-sort .views .view {position: relative;}
.products-list-order-sort .views>label {padding: 10px 0; font-size: 17px; line-height: 22px; color: #000;}
.products-list-order-sort .views input {position: absolute; opacity: 0; z-index: -1; width: 1px; height: 1px;}
.products-list-order-sort .views label.btn {display: block; width: 44px; height: 44px; border: 1px solid #d1d1d1; border-radius: 3px; padding: 10px 5px; cursor: pointer; margin: 0 0 0 15px;}
.products-list-order-sort .views label.btn svg {display: block; margin: 0 auto; fill: #d1d1d1; width: 22px;}
.products-list-order-sort .views input:checked+label.btn svg {fill: #000;}
.products-list-order-sort:not(:has(.pagination-box)) .views {margin-right: 0;}
.products-list-order-sort .pagination-box {margin: 0 0 10px auto; padding: 0 10px 0 10px;}
.products-list-order-sort .pagination {padding: 0;}
.products-list-order-sort .pagination input {width: 44px; text-align: center;}
.products-list-order-sort .pagination .total span {display: block; width: auto; height: 44px; padding: 10px 5px; font-size: 17px; line-height: 22px; color: #000;}

.products-list-selected-parameters {font-size: 17px; line-height: 20px; padding: 20px 0;}
.products-list-selected-parameters .box {display: inline-block; margin: 0 15px 5px 0;}
.products-list-selected-parameters .box label {padding: 7px 0; display: inline-block; margin: 0 0 5px 0;}
.products-list-selected-parameters .box>div {display: inline-block; border: 1px solid #f58220; border-radius: 3px; padding: 8px; color: #b35a00; font-size: 14px; line-height: 16px; margin: 0 0 5px 8px; cursor: pointer;}
.products-list-selected-parameters .clear {color: #b35a00; display: inline-block; background: none; border: none; padding: 0; cursor: pointer; font: inherit;}

.product-single .flex {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.product-single .photos-box {width: 35%; padding: 15px;}
.product-single .photos-box .slider {border: 1px solid #e1e1e1; border-radius: 10px; padding: 0; overflow: hidden;}
.product-single .photos-box .slider .photo {padding: 15px;}
.product-single .photos-box .slider img {display: block; width: 100%; border-radius: 10px;}
.product-single .photos-box .thumbnails {display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 10px 0; align-items: center;}
.product-single .photos-box .thumbnails .photo {padding: 10px; width: 25%;}
.product-single .photos-box .thumbnails .photo a {display: block; border: 1px solid #e1e1e1; border-radius: 10px; overflow: hidden; height: 100%; position: relative; padding: 10px; text-decoration: none; color: #989898;}
.product-single .photos-box .thumbnails .photo a span {text-align: center; display: block; position: absolute; top: 50%; width: 100%; left: 0; transform: translate(0, -50%);}
.product-single .photos-box .thumbnails .photo img {display: block; width: 100%;}
.product-single .photos-box .thumbnails .photo.more a {background: #ebebeb; font-size: 30px; line-height: 34px; font-weight: 700;}
.product-single .photos-box .thumbnails .photo.more img {opacity: 0;}
.product-single .details-box {width: 65%;}
.product-single .details-box>.flex {margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start;}
.product-single .ico-info {margin: 0 0 10px 0;}
.product-single .ico-info div {font-size: 17px; line-height: 20px; padding: 5px 10px; border-radius: 5px;}
.product-single .details-box .product-name {font-size: 34px; line-height: 40px; font-weight: 400; margin: 0 0 20px 0;}
.product-single .details-box .product-subname {font-size: 17px; line-height: 20px; font-weight: 400; margin: 0 0 20px 0;}
.product-single .details-box .sale-reason {border: 1px solid #d62d20; border-radius: 10px; padding: 15px; margin: 0 0 25px 0;}
.product-single .details-box .sale-reason label {color: #d32718; font-size: 17px; line-height: 20px; font-weight: 700; margin: 0 0 15px 0; display: block}
.product-single .details-box .sale-reason label svg {display: inline-block; height: 20px; margin: 0 10px 0 0; vertical-align: middle; fill: #d62d20;}
.product-single .details-box .sale-reason p {font-size: 17px; line-height: 20px; margin: 0;}
.product-single .details-box .sale-reason a {color: #d32718;}
.product-single .details-box .sale-reason a:hover {color: #000;}
.product-single .details-box .product-statement {border: 1px solid #2196F3; border-radius: 10px; padding: 15px 15px 15px 100px; margin: 0 0 25px 0; position: relative; min-height: 90px;}
.product-single .details-box .product-statement label {color: #2196F3; font-size: 17px; line-height: 20px; font-weight: 700; margin: 0 0 15px 0; display: block}
.product-single .details-box .product-statement label svg {display: inline-block; height: 20px; margin: 0 10px 0 0; vertical-align: middle; fill: #2196F3;}
.product-single .details-box .product-statement p {font-size: 17px; line-height: 20px; margin: 0;}
.product-single .details-box .product-statement svg {position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 80px; fill: #2196F3;}
.product-single .details-box .archived-product-notice {width: 100%; margin: 0; padding: 15px;}
/* Komunikat o wycofaniu ma byc wyrazny: czcionka o 25% wieksza (17 -> 21.25px,
   line-height skalowany w tej samej proporcji, zeby wiersze sie nie skleily) i w
   czerwieni uzywanej juz w projekcie (#d62d20). Link ponizej zostaje pomaranczowy -
   to jedyny element klikalny w tym boksie i ma sie odrozniac od samego ostrzezenia. */
.product-single .details-box .archived-product-notice p {margin: 0; font-size: 21.25px; line-height: 25px; color: #d62d20; font-weight: 500; padding: 15px; background: #f8f9fa; border: 1px solid #838383; border-radius: 10px;}
.product-single .details-box .archived-product-notice a {color: #b35a00; font-weight: 700; text-decoration: none;}
.product-single .details-box .archived-product-notice a:hover {color: #000;}
.product-single .details-box .l {width: 60%; padding: 15px;}
.product-single .details-box .r {width: 40%; padding: 15px;}
.product-single .details-box .details, .product-single .details-box .parameters, .product-single .details-box .variatns-box, .product-single .details-box .extra-charge {padding: 15px 0; border-top: 1px solid #e1e1e1;}
.product-single .details-box .details h2, .product-single .details-box .details p, .product-single .details-box .parameters p {font-size: 17px; line-height: 20px; font-weight: 400; margin: 0; display: flex; flex-wrap: wrap; padding: 5px 0;}
.product-single .details-box .details h2 span, .product-single .details-box .details p span, .product-single .details-box .parameters p>span {width: 30%; padding: 0; color: #6b6b6b;}
.product-single .details-box .details h2 strong, .product-single .details-box .details h2 a, .product-single .details-box .details p strong, .product-single .details-box .parameters p strong {width: 70%; color: #000; font-weight: 700; padding: 0 0 0 10px;}
.product-single .details-box .energy-info {display: flex; align-items: center; gap: 15px; margin-top: 20px; padding: 15px 0;}
.product-single .details-box .energy-info .energy-class-image {flex-shrink: 0;}
.product-single .details-box .energy-info .energy-class-image a {display: block;}
.product-single .details-box .energy-info .energy-class-image img {display: block; max-width: 100%; height: auto;}
.product-single .details-box .energy-info .energy-links {flex-grow: 1;}
.product-single .details-box .energy-info .energy-links p {margin: 0; padding: 0;}
.product-single .details-box .energy-info .energy-links p+p {margin-top: 5px;}
.product-single .details-box .energy-info .energy-links a {color: #6b6b6b; font-size: 14px; line-height: 18px; font-weight: 400; text-decoration: none;}
.product-single .details-box .energy-info .energy-links a:hover {color: #000;}
/* Okno etykiety energetycznej / karty informacyjnej (page.js: openEnergyModal) */
.jconfirm.jconfirm-energy .jconfirm-box {border-radius: 12px; overflow: hidden;}
.jconfirm.jconfirm-energy .jconfirm-box .jconfirm-title-c {padding: 18px 50px 18px 20px;}
.jconfirm.jconfirm-energy .jconfirm-box .jconfirm-closeIcon {top: 18px; right: 16px; font-size: 26px !important; line-height: 22px !important;}
.jconfirm-energy .energy-modal-tabs {display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 15px 0; background: #f1f1f1; border-radius: 8px; max-width: 100%;}
.jconfirm-energy .energy-modal-tab {border: 0; border-radius: 6px; background: none; padding: 8px 16px; font-size: 15px; line-height: 18px; font-weight: 500; color: #6b6b6b; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;}
.jconfirm-energy .energy-modal-tab:hover {color: #000;}
.jconfirm-energy .energy-modal-tab.active {background: #fff; color: #000; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);}
.jconfirm-energy .energy-modal-pane {display: none;}
.jconfirm-energy .energy-modal-pane.active {display: block;}
.jconfirm-energy .energy-modal-view {display: flex; align-items: center; justify-content: center; background: #f7f7f7; border: 1px solid #ececec; border-radius: 8px; overflow: hidden;}
/* Stala wysokosc panelu - okno nie skacze, zanim etykieta sie wczyta */
.jconfirm-energy .energy-modal-view.is-image {padding: 20px; min-height: min(62vh, 560px);}
.jconfirm-energy .energy-modal-view.is-image img {display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}
.jconfirm-energy .energy-modal-pdf {display: block; width: 100%; height: 62vh; border: 0; background: #fff;}
.jconfirm-energy .energy-modal-pdf-fallback {display: none; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px; text-align: center;}
.jconfirm-energy .energy-modal-pdf-fallback svg {width: 48px; height: 48px; fill: #f58d35;}
.jconfirm-energy .energy-modal-pdf-fallback p {margin: 0; font-size: 14px; line-height: 20px; color: #6b6b6b; max-width: 360px;}
.jconfirm-energy .energy-modal-pdf-open {display: inline-block; padding: 10px 20px; border-radius: 6px; background: #000; color: #fff; font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none;}
.jconfirm-energy .energy-modal-pdf-open:hover {background: #f58d35;}
.jconfirm-energy .energy-modal-view.no-inline .energy-modal-pdf {display: none;}
.jconfirm-energy .energy-modal-view.no-inline .energy-modal-pdf-fallback {display: flex;}
.jconfirm-energy .energy-modal-view.no-inline + .energy-modal-actions a[target="_blank"] {display: none;}
.jconfirm-energy .energy-modal-actions {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; padding: 12px 0 0 0;}
.jconfirm-energy .energy-modal-actions a {display: inline-flex; align-items: center; gap: 6px; color: #6b6b6b; font-size: 14px; line-height: 18px; text-decoration: none;}
.jconfirm-energy .energy-modal-actions a svg {width: 16px; height: 16px; fill: currentColor;}
.jconfirm-energy .energy-modal-actions a:hover {color: #b35a00;}
@media (max-width: 767px) {
    .jconfirm-energy .energy-modal-tabs {display: flex;}
    .jconfirm-energy .energy-modal-tab {flex: 1 1 0; padding: 8px 10px; font-size: 14px;}
    .jconfirm-energy .energy-modal-view.is-image {padding: 10px; min-height: min(55vh, 460px);}
    .jconfirm-energy .energy-modal-view.is-image img {max-height: 55vh;}
    .jconfirm-energy .energy-modal-actions {justify-content: center;}
}
.product-single .details-box .variatns-box .name {font-size: 17px; line-height: 20px; color: #6b6b6b; margin: 0 0 10px 0;}
.product-single .details-box .variatns-box .values {display: flex; flex-wrap: wrap; margin: 0 0 10px 0;}
.product-single .details-box .variatns-box .values .value {display: block; border: 1px solid #e1e1e1; border-radius: 5px; padding: 10px 15px; font-size: 17px; line-height: 20px; color: #000; margin: 0 10px 10px 0;}
/* Wybrany wariant: jasne tlo w firmowym pomaranczu (#f58220 rozjasniony na bieli),
   zeby zaznaczenie bylo widoczne od razu, a nie tylko po kolorze ramki. */
.product-single .details-box .variatns-box .values .value.active {border-color: #000; background: #fef0e4;}
.product-single .details-box .variatns-box .see-all {color: #6b6b6b;}
.product-single .details-box .variatns-box .see-all:hover {color: #000;}
.product-single .details-box .extra-charge .header {margin: 0 0 10px 0; font-size: 17px; line-height: 20px; color: #000;}
.product-single .details-box .extra-charge .parameter {margin: 0 0 10px 0;}
.product-single .details-box .extra-charge .parameter .name {font-size: 17px; line-height: 20px; color: #6b6b6b; margin: 0 0 10px 0;}
.product-single .details-box .extra-charge .parameter .values {display: flex; flex-wrap: wrap; padding: 5px 0;}
.product-single .details-box .extra-charge .parameter .value {position: relative; margin: 0 10px 10px 0;}
.product-single .details-box .extra-charge .parameter .value input[type="radio"] {position: absolute; z-index: -1; opacity: 0; width: 1px; height: 1px;}
.product-single .details-box .extra-charge .parameter .value label {display: block; border: 1px solid #e1e1e1; border-radius: 5px; padding: 10px 15px; font-size: 17px; line-height: 20px; color: #000; cursor: pointer; text-align: center;}
.product-single .details-box .extra-charge .parameter .value input[type="radio"]:checked+label {border-color: #000;}
.product-single .details-box .extra-charge .parameter .value label .txt {font-weight: 700; display: block;}
.product-single .details-box .extra-charge .parameter .value label .price {font-size: 14px; line-height: 18px; color: #6b6b6b;}
.product-single .price-box {text-align: right; position: relative;} 
.product-single .price-box .price, .product-single .price-box .special-price {font-size: 48px; line-height: 54px; font-weight: 900; margin: 0 0 10px 0;}
.product-single .price-box .price.strikethrough {font-size: 16px; line-height: 36px; font-weight: 400; margin: 0;}
.product-single .price-box .price.strikethrough .amount {font-size: 24px; font-weight: 500;}
.product-single .price-box .special-price {color: #d32718;}
.product-single .price-box.with-discount .special-price {padding-left: 75px;}
.product-single .price-box .net-price {font-size: 14px; line-height: 18px; margin: 0 0 10px 0;}
.product-single .price-box.with-discount .net-price {padding-left: 75px;}
.product-single .price-box .history-price, .product-single .price-box .special-info {color: #6b6b6b; font-size: 13px; line-height: 18px; margin: 0 0 5px 0;}
.product-single .price-box .discount {font-size: 25px; line-height: 28px; color: #fff; text-align: center; font-weight: 700; padding: 22px 2px; width: 72px; border-radius: 10px; background: #d62d20; position: absolute; left: 0; top: 36px;}
.product-single .additional-information {border-top: 1px solid #e1e1e1; margin: 25px 0 0 0;}
.product-single .additional-information>p {font-size: 17px; line-height: 20px; margin: 0; padding: 15px 10px; border-bottom: 1px solid #e1e1e1;}
.product-single .additional-information .availability:before {content: ' '; display: inline-block; width: 13px; height: 13px; background: #000; border-radius: 50%; margin: 0 10px 0 0; vertical-align: middle;}
.product-single .additional-information p.availability.available {color: #5b8108;}
.product-single .additional-information p.availability.available:before {background: #82b90b;}
/* Komunikat o godzinie odciecia wysylki - siedzi tuz pod statusem dostepnosci. */
.product-single .additional-information p.shipping-cutoff {font-size: 15px; line-height: 21px; color: #4a4a4a;}
.product-single .additional-information p.shipping-cutoff.is-before {color: #437a00;}
.product-single .additional-information p.shipping-cutoff svg {width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px;}
.product-single .additional-information p.shipping-cutoff .shipping-cutoff-countdown {font-weight: 700; white-space: nowrap;}
.product-single .additional-information p.preorder-comment {font-size: 15px; line-height: 21px; color: #b35a00; background: #fff6ef; border-bottom: 1px solid #e1e1e1;}
/* Zalacznik do przedsprzedazy - to samo tlo co komentarz, zeby czytalo sie jako jeden blok. */
.product-single .additional-information p.preorder-file {font-size: 15px; line-height: 21px; background: #fff6ef; border-bottom: 1px solid #e1e1e1;}
.product-single .additional-information p.preorder-file a {display: inline-flex; align-items: center; gap: 8px; color: #b35a00; font-weight: 600; text-decoration: none;}
.product-single .additional-information p.preorder-file a:hover {color: #000;}
.product-single .additional-information p.preorder-file svg {width: 18px; height: 18px; fill: currentColor; flex-shrink: 0;}
.product-single .additional-information .guarantee {color: #231f20; font-weight: 500;}
.product-single .additional-information .guarantee svg {stroke: #f58220;}
.product-single .additional-information p a {color: #000;}
.product-single .additional-information p a:hover {color:#b35a00;}
.product-single .additional-information p svg {height: 20px; display: inline-block; margin: 0 10px 0 0; vertical-align: middle;}
.product-single .additional-information .comparison svg {fill: none; stroke: #000000; stroke-width: 6; stroke-miterlimit: 10;}
.product-single .basket-box {margin: 20px 0;}
.product-single .basket-box .add-to-cart {font-size: 20px; line-height: 30px; text-transform: uppercase; text-align: center; padding: 16px 10px; background: #000; border: none; border-radius: 10px; color: #fff; font-weight: 700; display: block; width: 100%; cursor: pointer; transition: background-color .2s ease;}
/* Hover rozjasnia tlo, a nie filtruje: brightness() na czerni nie daje zadnego efektu. */
.product-single .basket-box .add-to-cart:hover {background: #333;}
/* Przedsprzedaz: ten sam ksztalt co przycisk koszyka, ale w firmowym pomaranczu -
   ma byc rozpoznawalny jako inna akcja niz zwykly zakup, a nie jako jego kopia.
   Wystepuje takze samodzielnie, gdy produktu nie mozna jeszcze kupic. */
.product-single .preorder-box {margin: 20px 0;}
.product-single .preorder-box .preorder-link {font-size: 20px; line-height: 30px; text-transform: uppercase; text-align: center; padding: 16px 10px; background: #f58220; border: none; border-radius: 10px; color: #fff; font-weight: 700; display: block; width: 100%; cursor: pointer; text-decoration: none; transition: background-color .2s ease;}
.product-single .preorder-box .preorder-link:hover {background: #d96f16;}
/* Informacja o przetwarzaniu adresu e-mail w okienkach "Zapytaj o produkt" i
   "Powiadom o dostepnosci" - zastapila checkbox zgody, wiec ma byc czytelna, ale
   drugoplanowa wobec pol formularza. */
.please-ask-form-box .form-data-info, .avaibility-notification-form-box .form-data-info {font-size: 12px; line-height: 18px; color: #555; margin: 10px 0 0 0;}
.please-ask-form-box .form-data-info a, .avaibility-notification-form-box .form-data-info a {color: inherit; text-decoration: underline;}
.product-single .tabs-box {border-bottom: 1px solid #e1e1e1; margin: 0 0 30px 0;}
.product-single .tabs {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.product-single .tabs .tab {padding: 0 15px;}
.product-single .tabs .tab a {display: block; text-transform: uppercase; text-decoration: none; color: #000; font-size: 22px; line-height: 26px; font-weight: 700; padding: 10px 0 15px 0; position: relative;}
.product-single .tabs .tab.active a:after {content: ' '; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 5px; background: #f58220;}
.product-single .tab-section {margin: 0 0 50px 0;}
.product-single .tab-section .header {margin: 0 0 20px 0; padding: 10px 0; font-size: 30px; line-height: 36px; text-transform: uppercase; font-weight: 900; border-bottom: 1px solid #e1e1e1;}
.product-single .description {font-size: 20px; line-height: 32px; color: #000;}
/* Tresc z edytora (WYSIWYG) nie moze rozpychac strony w bok: obrazy/osadzenia
   skalujemy, szerokie tabele przewijaja sie wewnatrz wlasnego boxu, dlugie ciagi
   znakow (np. linki) lamiemy. Bez tego opis z szeroka tabela/grafika daje poziomy
   scroll na mobile. */
.product-single .description .content, .product-single .description .content--ai {overflow-wrap: break-word;}
.product-single .description .content img, .product-single .description .content video, .product-single .description .content iframe, .product-single .description .content embed, .product-single .description .content object, .product-single .description .content--ai img, .product-single .description .content--ai iframe {max-width: 100%; height: auto;}
.product-single .description .content table {display: block; max-width: 100%; overflow-x: auto;}
.product-single .description h2 {font-size: 36px; line-height: 46px; margin: 20px 0 30px 0;}
.product-single .description h3 {font-size: 32px; line-height: 40px; margin: 20px 0 30px 0;}
.product-single .description h4 {font-size: 28px; line-height: 36px; margin: 20px 0 30px 0;}
.product-single .description h5 {font-size: 24px; line-height: 32px; margin: 20px 0 30px 0;}
.product-single .description p {margin: 0 0 20px 0;}
.product-single .parameters .parameter {display: flex; flex-wrap: wrap; margin: 0 -10px; font-size: 17px; line-height: 20px; font-weight: 400;}
.product-single .parameters .parameter>p {padding: 10px; margin: 0;}
.product-single .parameters .parameter .name {width: 20%; color: #6b6b6b;}
.product-single .parameters .parameter .values {width: 80%; color: #000; font-weight: 700;}
.product-single .related-products .products-list.slick-slider, .product-single .category-products .products-list.slick-slider, .product-single .product-accessories .products-list.slick-slider {display: block; margin: 0;}
.product-single .related-products .products-list.slick-slider .slick-track, .product-single .category-products .products-list.slick-slider .slick-track, .product-single .product-accessories .products-list.slick-slider .slick-track {margin: 0;}
.product-single .related-products .products-list.slick-slider .product-box, .product-single .category-products .products-list.slick-slider .product-box, .product-single .product-accessories .products-list.slick-slider .product-box {width: 100%;}
.product-single .related-products .slick-arrow, .product-single .category-products .slick-arrow, .product-single .product-accessories .slick-arrow {position: absolute; top: 50%; transform: translate(0, -50%); background: none; border: 1px solid #000; border-radius: 50%; width: 66px; height: 66px; cursor: pointer; opacity: 0; z-index: 2; padding: 18x; background: #fff; transition: opacity .4s;}
.product-single .related-products .slick-arrow.slick-prev, .product-single .category-products .slick-arrow.slick-prev, .product-single .product-accessories .slick-arrow.slick-prev {left: 20px;}
.product-single .related-products .slick-arrow.slick-next, .product-single .category-products .slick-arrow.slick-next, .product-single .product-accessories .slick-arrow.slick-next {right: 20px;}
.product-single .related-products .slick-arrow svg, .product-single .category-products .slick-arrow svg, .product-single .product-accessories .slick-arrow svg {display: block; width: 100%; height: auto; stroke: #000; transition: stroke .2s ease;}
.product-single .related-products .products-list:hover .slick-arrow, .product-single .category-products .products-list:hover .slick-arrow, .product-single .product-accessories .products-list:hover .slick-arrow {opacity: 0.6;}
.product-single .related-products .slick-arrow:hover, .product-single .category-products .slick-arrow:hover, .product-single .product-accessories .slick-arrow:hover {opacity: 1; background: #000; border-color: #000;}
.product-single .related-products .slick-arrow:hover svg, .product-single .category-products .slick-arrow:hover svg, .product-single .product-accessories .slick-arrow:hover svg {stroke: #fff;}
.product-single .product-options {display: flex; flex-wrap: wrap; justify-content: flex-end;}
.product-single .product-options a {display: block; width: 30px; height: 30px; padding: 2px; margin: 0 0 0 15px;}
.product-single .product-options a svg {display: block; max-width: 100%; max-height: 100%;}
.product-single .product-options a.add-to-favorite {padding: 2px;}
.product-single .product-options a.add-to-favorite svg {fill: none; stroke: #000; stroke-width: 2px; overflow: visible; transition: none;}
.product-single .product-options a.add-to-favorite:hover svg {stroke:#f58220;fill:none;}
.product-single .product-options a:hover svg {fill:#f58220;}
.product-single .product-options a.add-to-favorite.active svg {fill: #f58220; stroke: #f58220;}
.product-single .products-list.list-1 .product-box .basket-box .price-box {text-align: left;}
.product-single .financing-btns a {margin: 10px 0 0 0;}
.product-single .financing-btns a.installments-icon {display: inline-block; line-height: 0;}
.product-single .financing-btns a.installments-icon img {max-width: 100%; height: auto;}
.product-single .financing-btns a.leaselink {border: 0px !important; display: inline-block; background: #000!IMPORTANT; font-weight: 600!IMPORTANT; text-transform: uppercase; text-decoration: none; background: #000; color: #fff !important; padding: 10px 45px 10px 12px; letter-spacing: 1px; font-size: 11px!IMPORTANT; position: relative; transition: all 0.5s ease-in-out;}
.product-single .financing-btns a.leaselink::after { background: #eee url(https://leaselink.pl/img/arrow.png) no-repeat center center; border-radius: 0 5px 5px 0; content: ""; display: block; height: 100%; position: absolute; right: -4px; top: 0; width: 30px; transition: all 0.5s ease-in-out;}
.product-single .financing-btns a.leaselink:hover::after {width: 35px;}
.product-single .gpsr-type-section {margin-bottom: 30px; padding: 20px; background: #f8f8f8; border-radius: 8px;}
/* Tylko jeden producent + jedna osoba odpowiedzialna: bloki obok siebie. */
.product-single .gprs.gprs-side {display: flex; flex-wrap: wrap; gap: 16px;}
.product-single .gprs.gprs-side .header {flex: 0 0 100%;}
.product-single .gprs.gprs-side .gpsr-type-section {flex: 1 1 calc(50% - 8px); min-width: 0; margin-bottom: 0;}
@media all and (max-width: 600px) {
    .product-single .gprs.gprs-side .gpsr-type-section {flex: 0 0 100%;}
}
.product-single .gpsr-type-section h4 {margin-bottom: 15px; font-size: 1.2em; color: #333;}
.product-single .gpsr-items-grid {display: flex; flex-wrap: wrap; gap: 20px;}
.product-single .gpsr-item {flex: 0 0 calc(33.333% - 14px); box-sizing: border-box; padding: 15px; background: #fff; border: 1px solid #e0e0e0; border-radius: 5px;}
.product-single .gpsr-item a {color: #000; text-decoration: none; transition: color 0.3s ease;}
.product-single .gpsr-item a:hover {color: #b35a00;}


.jconfirm.jconfirm-light .jconfirm-box {max-width: 100vw;}
.mobile .jconfirm.jconfirm-light .jconfirm-box {width: 100% !important;}
.jconfirm .jconfirm-title-c {background: #ececec; margin: -15px -15px 15px -15px; padding: 15px;}
.jconfirm .jconfirm-title {font-size: 20px; line-height: 28px; color: #000; font-weight: 900;}
.jconfirm .jconfirm-title span {display: block; font-size: 14px; line-height: 20px; color: #6b6b6b; font-weight: 400;}
/* Modal koszyka ma tytul na bialym tle, bez szarej belki - tak jest w projekcie.
   Zawezamy przez :has(.modal-basket), zeby pozostale okna jconfirm (potwierdzenia
   usuniecia itp.) zachowaly swoja belke. */
.jconfirm .jconfirm-box:has(.modal-basket) .jconfirm-title-c {background: none; margin: 0 0 5px 0; padding: 0;}
/* Reszta geometrii okna wg projektu: hojniejsze wypelnienie (we wzorcu ~3,8%
   szerokosci panelu, biblioteka daje 15px) i wieksze zaokraglenie niz domyslne 5px. */
.jconfirm .jconfirm-box:has(.modal-basket) {padding: 28px 30px 0 30px; border-radius: 12px;}
.jconfirm .jconfirm-box:has(.modal-basket) .jconfirm-title {font-size: 21px; line-height: 28px;}
.jconfirm .jconfirm-box-container .jconfirm-box div.jconfirm-content-pane {position: initial;}
.jconfirm-content form.sending>* {opacity: 0.5;}
.jconfirm-content form .note {margin: 0 0 20px 0; font-size: 12px; line-height: 18px; font-weight: 500; color: #6b6b6b;}
.jconfirm-content form .field-box {margin: 0 0 20px 0; position: relative;}
.jconfirm-content form .field-box label {font-size: 17px; line-height: 20px; color: #6b6b6b; margin: 0 0 5px 0; display: block;}
.jconfirm-content form .field-box input[type="text"], .jconfirm-content form .field-box input[type="number"], .jconfirm-content form .field-box textarea {width: 100%; height: 40px; padding: 5px 10px; font-size: 14px; line-height: 20px; border-radius: 4px; border: 1px solid #e1e1e1; color: #000; outline: none; box-shadow: none;}
.jconfirm-content form .field-box.error input, .jconfirm-content form .field-box.error textarea {border-color: #d62d20;}
.jconfirm-content form .field-box input[type="checkbox"] {position: absolute; z-index: -1; width: 1px; height: 1px; opacity: 0;}
.jconfirm-content form .field-box input[type="checkbox"]+label, .jconfirm-content form .field-box input[type="checkbox"]+span+label {display: inline-block; font-size: 14px; line-height: 20px; color: #000; text-decoration: none; position: relative; padding: 0 0 0 35px; cursor: pointer;}
.jconfirm-content form .field-box input[type="checkbox"]+label:before, .jconfirm-content form .field-box input[type="checkbox"]+span+label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 3px; color: #fff; font-weight: 900; text-align: center; line-height: 18px; font-size: 16px;}
.jconfirm-content form .field-box input[type="checkbox"]:checked+label:before, .jconfirm-content form .field-box input[type="checkbox"]:checked+span+label:before {border-color: #f58d35; background: #f58d35; content: '\2713';}
.jconfirm-content form .field-box span.info {font-size: 12px; line-height: 14px; display: block; margin: 0; color: #6b6b6b;}
.jconfirm-content form .field-box.error span.info {color: #d32718;}
.jconfirm-content form .field-box textarea {height: 120px; resize: none;}
.jconfirm-content form .loader {position: absolute; top: 50%; left: 50%; width: 64px; height: 48px; display: block; animation: split 1s ease-in infinite alternate; transform: translate(-50%, -50%); opacity: 1;}
.jconfirm-content form .loader::before, .jconfirm-content form .loader::after {content: ''; position: absolute; height: 48px; width: 48px; border-radius: 50%; left: 0; top: 0; transform: translateX(-10px); background: #f58220; opacity: 0.85; backdrop-filter: blur(20px);}
.jconfirm-content form .loader::after {left: auto; right: 0; background: #838383; transform: translateX(10px);}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons {width: 100%; float: none !important; display: flex; flex-wrap: wrap;}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn {border: 1px solid #000; border-radius: 4px; font-size: 16px; line-height: 22px; font-weight: 700; text-align: center; padding: 8px 15px; text-transform: uppercase; background: #fff; color: #000; margin: 0 0 0 auto;}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn + button.btn {margin: 0 0 0 15px;}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-apply {border-color: #f58220; background: #f58220; color: #212121;}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-left {margin: 0 auto 0 0;}
.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button:disabled {opacity: 0.5;}
.jconfirm .jconfirm-box-container .jconfirm-box div.jconfirm-closeIcon {font-size: 32px !important; line-height: 30px !important; color: #000; font-weight: 700; opacity: 1;}
.jconfirm .jconfirm-box-container .jconfirm-box div.jconfirm-closeIcon:hover {opacity: 0.6;}

/* Alerts in modals - base styles */
.jconfirm .alert {padding: 10px 20px; margin: 0 0 20px 0; border-radius: 5px; font-size: 17px; line-height: 20px;}
.jconfirm .alert p {margin: 0; font-weight: 400;}
.jconfirm .alert ul {margin: 10px 0 0 0; padding: 0 0 0 30px; font-weight: 400;}
.jconfirm .alert ul li b {font-weight: 700;}
.jconfirm .alert small {font-weight: normal;}/* Favorite modals - additional elements */
.price-slider-container {display: none; margin: 10px 0 10px 25px; padding: 10px; background: #f5f5f5; border-radius: 4px;}
.price-slider-container label {display: block; margin-bottom: 5px;}
.price-slider-container input[type="range"] {width: 100%;}
.price-slider-container small {display: block; margin-top: 5px; color: #666666;}
.delivery-section {margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;}
.delivery-section > p {margin-bottom: 10px; font-weight: bold;}
.notifications-info-box {margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 4px; border-left: 4px solid #6c757d;}
.notifications-info-box p {margin: 0; color: #495057;}
.notifications-info-box ul {margin: 10px 0 0 20px; color: #6c757d;}
.notifications-info-box .nested-alert {margin: 10px 0 0 0;}
.favorite-info-box {padding: 15px; background: #f8f9fa; border-radius: 4px;}
.favorite-info-box p {margin: 0; color: #495057; font-size: 14px;}
.favorite-login-buttons {display: flex; gap: 10px; margin-top: 15px;}
.favorite-login-buttons .btn {display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 4px; font-size: 16px; line-height: 22px; font-weight: 700; text-align: center; padding: 10px 20px; text-transform: uppercase; text-decoration: none; flex: 1; transition: opacity .3s;}
.favorite-login-buttons .btn:hover {opacity: 0.8;}
.favorite-login-buttons .btn-primary {border-color: #f58220; background: #f58220; color: #212121;}
.favorite-login-buttons .btn-secondary {border-color: #000; background: #fff; color: #000;}

.basket .basket-products .product {display: flex; margin: 0 0 15px 0; align-items: center; padding: 5px 0; border: 1px solid #e1e1e1; border-radius: 10px; font-size: 17px; line-height: 20px;}
.basket .basket-products .product>div {padding: 0 5px;}
.basket .basket-products .product p {margin: 0;}
.basket .basket-products .product a {text-decoration: none; color: #000;}
.basket .basket-products .product img {display: block; margin: 0 auto; max-width: 100%;}
.basket .basket-products .product .photo {width: 10%;}
.basket .basket-products .product .name {width: 40%;}
.basket.step-4 .basket-products .product .name {width: 41%;}
.basket .basket-products .product .name .extra-charge {margin: 0; font-size: 12px; line-height: 14px; color: #898989;}
.basket .basket-products .product .quantity {width: 15%; text-align: center;}
.basket .basket-products .product .gross {width: 17%; text-align: center; font-size: 20px; line-height: 22px;}
.basket .basket-products .product .value {width: 17%; text-align: center; font-size: 20px; line-height: 22px; font-weight: 900;}
.basket .basket-products .product .gross .special, .basket-products .product .value .special {color: #000;}
.basket .basket-products .product .gross .special+p, .basket-products .product .value .special+p {text-decoration: line-through; color: #000; font-size: 16px; line-height: 18px; font-weight: 400;}
.basket .basket-products .product .remove {width: 5%; text-align: center;} 
.basket .basket-products .product .remove a {color: #dc3545; font-weight: 700; display: inline-block; padding: 3px;}
.basket .basket-products .product .remove a svg {display: block; width: 20px; height: auto; stroke: #000; margin: 0 auto}
.basket .basket-products {margin: 0 0 30px 0;}
.basket .basket-products .header {display: flex; align-items: flex-end;}
.basket .basket-products .header h2 {margin: 0 0 5px 0;}
.basket .basket-products .header .clear-basket {margin: 0 0 5px auto; font-size: 14px; line-height: 18px; color: #dc3545;}
.basket .basket-products .product.head {background: #000; color: #fff; border-bottom: none; font-weight: 700;}
.basket .basket-products .product {padding: 10px 0;}
.basket .cart-quantity {height: 50px; width: 50px; border: 1px solid #ccc; text-align: center; font-size: 24px; color: #000; font-weight: 700; outline: none; box-shadow: none;}
.basket .cart-quantity-btn {border: none; background: none; width: 30px; height: 30px; text-align: center; font-size: 34px; line-height: 36px; font-weight: 700; cursor: pointer; padding: 0;}

.basket .basket-products {margin: 0 0 30px 0;}
.basket .basket-products .header {display: flex; align-items: flex-end;}
.basket .basket-products .header h2 {margin: 0 0 15px 0; font-size: 22px; line-height: 26px;}
.basket .basket-products .header .clear-basket {margin: 0 0 15px auto; font-size: 17px; line-height: 20px; color: #000;}
.basket .basket-products .header .clear-basket svg {display: inline-block; margin: 0 5px 0 0; stroke: #000; height: 20px; width: auto; vertical-align: middle;}
.basket .basket-products .header .clear-basket span {display: inline-block; vertical-align: middle;}
.basket .basket-products .product.head {background: #ececec; color: #000; border-bottom: none; font-weight: 700; border-radius: 5px; border: none;}
.basket .basket-products .product {padding: 15px 10px;}
.basket .cart-quantity {height: 44px; width: 100px; border: 1px solid #ccc; border-radius: 5px; text-align: center; font-size: 24px; color: #000; font-weight: 700; outline: none; box-shadow: none;}
.basket .cart-quantity-btn {border: none; background: none; width: 30px; height: 30px; text-align: center; font-size: 34px; line-height: 36px; font-weight: 700; cursor: pointer; padding: 0;}
.basket {margin: 30px 0 50px 0;}
.basket h1 {margin: 0 0 30px 0; font-size: 48px; line-height: 56px; text-transform: uppercase; font-weight: 900;}
.basket .form > .alert, .basket .container > .alert {width: 100%; margin: 0 0 30px 0;}
.basket .form {display: flex; flex-wrap: wrap;}
.basket .form .left-box {width: 70%; padding: 0 20px 20px 0;}
.basket .form .right-box {width: 30%; padding: 0 0 20px 0; position: sticky; bottom: 20px; align-self: flex-end;}
.basket .basket-steps-cont {width: 70%; padding: 0 20px 0 0;}
.basket .basket-steps {display: flex; flex-wrap: nowrap; margin: 0 -5px 30px -5px; padding: 0;}
.basket .basket-steps .step {width: 100%; padding: 10px 5px; color: #999999; position: relative;}
.basket .basket-steps .step:after {content: ' '; display: block; position: absolute; left: 5px; right: 5px; height: 5px; bottom: 10px; background: #ebebeb;}
.basket .basket-steps .step h4 {margin: 0; height: 100%;}
.basket .basket-steps .step a {color: #666666; text-decoration: none; display: block; padding: 10px 0; font-size: 18px; line-height: 22px; text-transform: uppercase;}
.basket .basket-steps .step .no {display: inline-block; width: 43px; height: 43px; text-align: center; padding: 10px 5px; font-size: 22px; line-height: 23px; font-weight: 900; background: #ebebeb; color: #666666; border-radius: 5px; margin: 0 10px 0 0;}
.basket .basket-steps .step.active, .basket .basket-steps .step.active a {color: #000;}
.basket .basket-steps .step.active:after {background-color: #f5811f;}
.basket .basket-steps .step.active .no {background: #f5811f; color: #fff;}
.basket .discount-coupon {padding: 0 0 20px 0;}
.basket .discount-coupon p {margin: 0 0 20px 0; color: #000; font-weight: 700; width: 100%; font-size: 17px; text-transform: uppercase;}
.basket .discount-coupon .coupon-input-box {display: flex; flex-wrap: nowrap;}
.basket .discount-coupon input {border-radius: 0; border: 1px solid #f58120; border-radius: 5px; padding: 5px 10px; width: 100%; height: 44px; outline: none; box-shadow: none; margin: 0 10px 0 0;}
.basket .discount-coupon a {display: block; width: 120px; height: 44px; line-height: 20px; background: #f58120; color: #212121; text-align: center; padding: 12px 10px; font-weight: 700; flex-shrink: 0; flex-grow: 0; text-transform: uppercase; border-radius: 8px;}
.basket .discount-coupon .alert.alert-success, .basket .discount-coupon .alert.alert-error {margin: 20px 0 0 0;}
.basket .left-box .total {padding: 10px 0; display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: left; margin: 0 -5px;}
.basket .left-box .total .l, .basket .left-box .total .r {padding: 0 5px;}
.basket .left-box .total p {margin: 0 0 5px 0; font-size: 17px; line-height: 20px;}
.basket .left-box .total .l p {margin-top: 6px;}
.basket .left-box .total strong {font-weight: 700;}
.basket .left-box .total .r strong {font-size: 24px; line-height: 28px;}
.basket .left-box .total p.saving {color: green;}
.basket .left-box .total p.saving b {font-size: 20px;}
.basket .basket-info {margin: 0 0 30px 0;}
.basket .basket-info p {margin: 0 0 10px 0; font-size: 14px; line-height: 24px; color: #6b6b6b;}
/* Odnosniki w tekstach informacyjnych koszyka - ten sam pomaranczowy co linki
   w prawej kolumnie (zgody/regulamin), zeby nie ginely w szarym akapicie. */
.basket .basket-info p a {color: #b35a00;}
.basket .basket-info p a:hover {color: #000;}
.basket .basket-info.basket-info-mobile {display: none;}
.basket .right-box .payment-delivery-box {border: 1px solid #e1e1e1; border-radius: 10px; padding: 0 15px; margin: 0 0 25px 0;}
.basket .right-box .payment-delivery-box .rbox {padding: 20px 0 15px 0; margin: 0;}
.basket .right-box .payment-delivery-box .rbox.delivery-box {border-bottom: 1px solid #e1e1e1;}
.basket .rbox {margin: 0 0 30px 0;}
.basket .right-box h2 {margin: 0 0 20px 0; font-size: 18px; line-height: 22px; text-transform: uppercase; vertical-align: middle; font-weight: 700;}
.basket .rbox h2 svg {display: inline-block; height: 22px; margin: 0 8px 0 0; vertical-align: middle; fill: #000;}
.basket .rbox h2 svg.stroke {fill: none; stroke: #000;}
.basket .rbox h2 span {display: inline-block; vertical-align: middle;}
.basket .delivery-box .delivery {padding: 3px 0; position: relative; margin: 0 0 5px 0; font-size: 17px; line-height: 20px;}
.basket .delivery-box .delivery label {cursor: pointer; position: relative; display: inline-block; padding: 0 0 0 35px;}
/* Dostawa i platnosc to pola typu radio - okragly znacznik z kropka w srodku,
   zamiast kwadratu z checkiem, ktory sugerowal wybor wielokrotny. */
.basket .delivery-box .delivery label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 50%; box-sizing: border-box;}
.basket .delivery-box .delivery input:checked+label:before {border-color: #f58d35; background: #f58d35; box-shadow: inset 0 0 0 3px #fff;}
.basket .delivery-box .delivery input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.basket .payment-box .payment {padding: 3px 0; position: relative; margin: 0 0 5px 0; font-size: 17px; line-height: 20px;}
.basket .payment-box .payment label {cursor: pointer; position: relative; display: inline-block; padding: 0 0 0 35px;}
.basket .payment-box .payment label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 50%; box-sizing: border-box;}
.basket .payment-box .payment input:checked+label:before {border-color: #f58d35; background: #f58d35; box-shadow: inset 0 0 0 3px #fff;}
.basket .payment-box .payment input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.basket .payment-box .online-methods {display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; margin: 10px 0 14px 40px;}
.basket .payment-box .online-methods.online-methods-readonly {display: block; margin: 10px 0 0 0;}
.basket .payment-box .online-methods.online-methods-readonly .online-method {width: 100px; cursor: default;}
.basket .payment-box .online-method {display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 60px; padding: 6px; background: #fff; border: 1px solid #d1d1d1; border-radius: 6px; cursor: pointer; transition: border-color .2s, box-shadow .2s;}
.basket .payment-box .online-method:hover {border-color: #f58d35;}
.basket .payment-box .online-method.selected {border-color: #f58d35; box-shadow: 0 0 0 1px #f58d35;}
.basket .payment-box .online-method img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}
.basket .payment-box .online-method span {display: none;}
/* Lista banków bywa długa (kilkadziesiąt kafelków), więc domyślnie pokazujemy 3 rzędy.
   Przycinamy WYSOKOŚCIĄ, a nie liczbą kafelków: kolumn jest tyle, ile zmieści szerokość
   (auto-fill), więc "pierwsze N" dawałoby inną liczbę rzędów na każdym ekranie.
   Wysokość kafelka (60px) i odstęp (6px) są stałe, stąd 3 * 60 + 2 * 6. */
.basket .payment-box .online-methods.is-collapsed {max-height: 192px; overflow: hidden;}
/* Przycisk wyglada jak przycisk, a nie jak podkreslony link - klienci nie zauwazali,
   ze pod spodem sa jeszcze banki. Strzalka obraca sie w gore po rozwinieciu; stan
   bierzemy z sasiadujacej siatki (+), wiec nie trzeba go duplikowac w JS. */
.basket .payment-box .online-methods-toggle {display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 14px 40px; padding: 8px 16px; background: #fff; border: 1px solid #d1d1d1; border-radius: 20px; color: #333; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer; transition: border-color .2s, color .2s, background .2s;}
.basket .payment-box .online-methods-toggle:hover {border-color: #f58d35; color: #f58d35; background: #fff8f2;}
/* MUSI byc po regule z display: inline-flex. Jawny display w CSS autora wygrywa z
   atrybutem hidden (UA daje mu tylko display: none), wiec bez tego przycisk
   pokazywalby sie takze wtedy, gdy JS uzna, ze nie ma czego rozwijac. */
.basket .payment-box .online-methods-toggle[hidden] {display: none;}
/* Strzalka rysowana obrotem kwadratu - bez dodatkowego pliku i bez SVG w markupie. */
.basket .payment-box .online-methods-toggle::after {content: ''; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;}
.basket .payment-box .online-methods:not(.is-collapsed) + .online-methods-toggle::after {transform: rotate(-135deg) translate(-2px, -2px);}
.basket .summary-box {font-size: 17px; line-height: 20px;}
.basket .summary-box .delivery, .basket .summary-box .payment, .basket .summary-box .total, .basket .summary-box .discount, .basket .summary-box .saving {margin: 0 0 15px 0; text-align: right;}
.basket .summary-box .discount, .basket .summary-box .saving {color: #06981e; font-size: 20px;}
.basket .summary-box .saving {font-weight: 700;}
.basket .summary-box .summary {border: 2px solid #000; padding: 25px 15px; text-align: right; background: #ececec; border: 1px solid #d1d1d1; border-radius: 10px;}
.basket .summary-box .summary .gross {margin: 0; font-size: 17px; line-height: 22px; font-weight: 700;}
.basket .summary-box .summary .gross strong {display: block; font-size: 48px; line-height: 52px; text-transform: none;}
.basket .summary-box .summary .net {margin: 0; font-size: 14px; line-height: 18px; color: #000; text-transform: lowercase;}
.basket .rbox.products-box {max-height: 500px; overflow-y: scroll; padding-right: 5px;}
.basket .rbox.products-box .product {display: flex; margin: 0; border: 1px solid #e1e1e1; padding: 10px; border-radius: 10px;}
.basket .rbox.products-box .product+.product {margin-top: 10px;}
.basket .rbox.products-box .product .photo {width: 20%;}
.basket .rbox.products-box .product .photo img {display: block; max-width: 100%; margin: 0 auto;}
.basket .rbox.products-box .product .name {margin: 0 0 5px 0;}
.basket .rbox.products-box .product .information {width: 80%; padding: 0 0 0 10px;}
.basket .rbox.products-box .product .information a {color: #000; text-decoration: none; display: block;}
.basket .rbox.products-box .product .information .extra-charge {margin: -5px 0 5px 0;}
.basket .rbox.products-box .product .information .extra-charge p {font-size: 14px; line-height: 16px; margin: 0; color: #898989;}
.basket .rbox.products-box .product .information .details {display: flex;}
.basket .rbox.products-box .product .information .details .quantity {margin: 0 auto 0 0; color: #767676;}
.basket .rbox.products-box .product .information .details .gross {margin: 0 0 0 auto; color: #767676;}
.basket .rbox.data .table .r {display: flex; font-size: 16px; line-height: 18px; margin: 0 0 6px 0;}
.basket .rbox.data .table .r .n {width: 50%; font-weight: 400; padding: 0 5px; color: #767676;}
.basket .rbox.data .table .r .v {width: 50%; font-weight: 700; padding: 0 5px;}
.basket .rbox.comments-box p {margin: 0;}

.basket .agreement-box .agreement, .registration-form .agreement {padding: 5px 0; position: relative;}
.basket .agreement-box .agreement label, .registration-form .agreement label {cursor: pointer; padding: 0 0 0 35px; display: inline-block; position: relative; font-size: 17px; line-height: 24px; font-weight: 400; margin: 0;}
.basket .agreement-box .agreement label .required, .registration-form .agreement label .required {color: #b4031c;}
.basket .agreement-box .agreement label:before, .registration-form .agreement label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 3px; color: #fff; font-weight: 900; text-align: center; line-height: 18px; font-size: 16px;}
.basket .agreement-box .agreement input:checked+label:before, .registration-form .agreement input:checked+label:before {border-color: #f58d35; background: #f58d35; content: '\2713';}
.basket .agreement-box .agreement label a, .registration-form .agreement label a {color: #b35a00; text-decoration: none;}
.basket .agreement-box .agreement label a:hover, .registration-form .agreement label a:hover {color:black;}
.basket .agreement-box .agreement input, .registration-form .agreement input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.basket .agreement-box .agreement .field-flashdata, .registration-form .agreement .field-flashdata {color: #b4031c; font-size: 14px; line-height: 20px; display: block; font-weight: 400; padding: 0 0 0 30px}

.basket .empty-basket {text-align: center; width: 100%; padding: 50px 0;}
.basket .empty-basket p {margin: 0 0 20px 0; font-size: 18px; line-height: 22px; }
.basket .empty-basket .btn-box {justify-content: center;}
.basket .empty-basket .btn-box .btn.prev {width: 30%; margin: 0 auto;}

.basket .btn-box {display: flex; flex-wrap: wrap;}
.basket .btn-box .btn, .login-register-box .btn-box .btn {display: block; width: auto; padding: 18px 10px; font-weight: 700; margin: 0 auto 0 0; text-align: center; max-width: 100%; font-size: 24px; line-height: 28px; cursor: pointer; text-transform: uppercase; border-radius: 8px; position: relative;}
.basket .btn-box .btn:before, .basket .btn-box .btn:after {content: ' '; display: block; width: 4px; height: 16px; background: #fff; position: absolute; top: 50%; transform: translate(0, -50%);}
.basket .btn-box .btn:before {margin-top: -5px;}
.basket .btn-box .btn:after {margin-top: 5px;}
.basket .btn-box .btn.prev {width: 100%; border: 1px solid #e5e5e5; background: #e5e5e5; color: #666666;}
.basket .btn-box .btn.prev:before {transform: translate(0, -50%) rotate(45deg); left: 30px; background: #666666;}
.basket .btn-box .btn.prev:after {transform: translate(0, -50%) rotate(-45deg); left: 30px; background: #666666;}
.basket .left-box .btn-box .btn.prev {width: 43%;}
.basket.step-2 .btn-box .btn.prev {width: 30%;}
.basket .right-box .btn-box .btn.prev {display: none;}
.basket .btn-box .btn.next {width: 100%; border: 1px solid #f58120; background: #f58120; color: #212121;}
.basket .btn-box .btn.next:before {transform: translate(0, -50%) rotate(-45deg); right: 30px;}
.basket .btn-box .btn.next:after {transform: translate(0, -50%) rotate(45deg); right: 30px;}
.basket .btn-box .btn-info {color: #767676; font-size: 12px; line-height: 16px; display: block; margin: 5px 0 0 0;}

.user-login-form .login-register-box {padding: 30px 0;}
.login-register-box {display: flex; flex-wrap: wrap; margin: 0 -15px; width: 1150px; max-width: 100%;}
.login-register-box .login-quest-box {width: 50%; padding: 15px; margin: 0 0 40px 0;}
.login-register-box .register-box {width: 50%; padding: 15px; margin: 0 0 40px 0;}
.login-register-box .login-box {margin: 0 0 20px 0;}
.login-register-box .login-box .login-form {padding: 30px 40px; border: 1px solid #d1d1d1; border-radius: 10px;}
.login-register-box .guest-box {padding: 30px 40px; font-size: 17px; line-height: 26px;}
.login-register-box .login-box .alert {margin-bottom:10px;}
.login-register-box .guest-box .btn {display: block; padding: 18px 10px; font-weight: 700; margin: 0 auto 0 0; text-align: center; width: 100%; font-size: 24px; line-height: 28px; cursor: pointer; text-transform: uppercase; border-radius: 8px; position: relative; border: 1px solid #000; color: #000; text-decoration: none;}
.login-register-box .register-box {padding: 15px; font-size: 17px; line-height: 26px;}
.login-register-box .register-box .register-cont {border: 1px solid #d1d1d1; border-radius: 10px; padding: 30px 40px;}
.login-register-box .register-box ul {margin: 0 0 40px 0; padding: 0; list-style: none;}
.login-register-box .register-box ul li {margin: 0 0 15px 0;}
.login-register-box .register-box ul li svg {display: inline-block; margin: 0 3px 5px 0; height: 20px; width: auto; vertical-align: middle;}
.login-register-box .register-box p {margin: 0 0 20px 0;}
.login-register-box .registration-form .passinfo {font-size: 13px; line-height: 20px; margin: 15px 0 0 0;}
.login-register-box .benefits {margin: 30px 0 0 0;}

.basket .register-box h3 {margin: 0 0 20px 0; font-size: 22px; line-height: 28px;}
.basket .register-box .btn, .login-register-box .register-cont .btn {display: block; padding: 18px 10px; font-size: 24px; line-height: 28px; text-align: center; width: 100%; border-radius: 0; border: 1px solid #000; border-radius: 8px; color: #fff; background: #000; font-weight: 700; cursor: pointer; text-transform: uppercase;}

.basket .form-section {width: 100%; margin: 0 0 20px 0;}
.basket .form-section.hidden, .basket .form-section .hidden {display: none;}
.basket .form-section.info-section {border: 1px solid #000; padding: 10px 15px; margin: 0 0 40px 0}
.basket .form-section.info-section p {margin: 0; font-size: 16px;}
.basket .form-section.info-section p b {display: block; margin: 0 0 5px 0; font-size: 20px;}
.basket .form-section h3 {margin: 0 0 10px 0;}
.basket .field {margin: 0 0 20px 0; position: relative;}
.basket .fields {display: flex; margin: 0 -10px;}
.basket .fields .field {padding: 0 10px;}
.basket .fields .field.w1 {width: 8.3333%;}
.basket .fields .field.w2 {width: 16.6666%;}
.basket .fields .field.w3 {width: 25%;}
.basket .fields .field.w4 {width: 33.3333%;}
.basket .fields .field.w5 {width: 41.6666%;}
.basket .fields .field.w6 {width: 50%;}
.basket .fields .field.w7 {width: 58.3333%;}
.basket .fields .field.w8 {width: 66.6666%;}
.basket .fields .field.w9 {width: 75%;}
.basket .fields .field.w10 {width: 83.3333%;}
.basket .fields .field.w11 {width: 91.6666%;}
.basket .fields .field.w12 {width: 100%;}
.basket .field label {font-size: 17px; line-height: 26px; margin: 0 0 5px 0; display: block;}
.basket .field label span {color: #f01010;}
.basket .field input[type="text"], .basket .field input[type="password"], .basket .field textarea, .login-register-box .field input[type="text"], .login-register-box .field input[type="password"] {width: 100%; border: 1px solid #d1d1d1; border-radius: 5px; padding: 12px 10px; outline: none; box-shadow: none; font-size: 17px; line-height: 22px; background: none; position: relative; z-index: 1;}
.basket .field input[type="text"]:read-only, .basket .field input[type="password"]:read-only, .basket .field textarea:read-only {color: #767676;}
.basket .field textarea {padding: 10px; height: 100px; resize: none;}
.basket .field input[type="radio"] {position: absolute; opacity: 0; width: 1px; height: 1px;}
.basket .field input[type="radio"]+label {cursor: pointer; display: inline-block; margin: 0; padding: 0 0 0 35px; position: relative;}
.basket .field input[type="radio"]+label:before {content: ' '; display: block; width: 19px; height: 19px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 50%; color: #fff; font-weight: 900; text-align: center; line-height: 18px; font-size: 16px;}
.basket .field input[type="radio"]+label:before {border-color: #f58d35;}
.basket .field input[type="radio"]:checked+label:after {content: ' '; display: block; width: 12px; height: 12px; background: #f58d35; border-radius: 50%; position: absolute; top: 6px; left: 9px;}
.basket .field input[type="checkbox"] {opacity: 0; z-index: -1; width: 1px; height: 1px; position: absolute;}
.basket .field input[type="checkbox"]+label {cursor: pointer; padding: 0 0 0 35px; display: inline-block; position: relative;}
.basket .field input[type="checkbox"]+label:before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top: 2px; left: 5px; border: 1px solid #d1d1d1; border-radius: 3px; color: #fff; font-weight: 900; text-align: center; line-height: 18px; font-size: 16px;}
.basket .field input[type="checkbox"]:checked+label:before {border-color: #f58d35; background: #f58d35; content: '\2713';}
.basket .field input[type="checkbox"]:disabled+label {opacity: 0.4;}
.basket .field input[type="checkbox"]:disabled+label:before {opacity: 0.4;}
.basket .field .placeholder, .login-register-box .field .placeholder {color: #767676; display: block; position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); background: #fff; padding: 2px 5px; font-size: 14px; line-height: 16px; z-index: 0;}
.basket .fields .field .placeholder {left: 20px;}
.basket .field textarea+.placeholder {top: 20px;}
.basket .field input[type="text"]:focus+.placeholder, .basket .field input[type="password"]:focus+.placeholder, .basket .field textarea:focus+.placeholder {top: 0; font-size: 12px; line-height: 14px; z-index: 1;}
.basket .field input[type="text"]::placeholder, .basket .field input[type="password"]::placeholder, .basket .field textarea::placeholder {color: transparent;}
.basket .field input[type="text"]:not(:placeholder-shown)+.placeholder, .basket .field input[type="password"]:not(:placeholder-shown)+.placeholder, .basket .field textarea:not(:placeholder-shown)+.placeholder {top: 0; font-size: 12px; line-height: 14px; z-index: 1;}

.basket .more-delivery-addresses, .basket .more-invoice-data {display: inline-block; padding: 5px 30px; color: #fff; background: #000; bordeR: 1px solid #000; margin: 0 0 30px 0;}

.basket .field .field-flashdata {font-size: 14px; line-height: 20px; display: block; margin: 0; font-weight: 400;}
.basket .field.agreement .field-flashdata {padding-left: 30px;}
.basket .field.error .field-flashdata {color: #b4031c;}

.basket .online-payment {margin: 50px 0; text-align: center;}
.basket .online-payment p {margin: 0 0 30px 0;}
.basket .online-payment .payment-link {border: 2px solid #000; background: #000; color: #fff; font-weight: 700; font-size: 18px; line-height: 22px; cursor: pointer; outline: none; box-shadow: none; margin: 0; padding: 10px 30px; display: inline-block;}
.basket .pay-later-box {margin: 0 0 50px 0;}
.basket .pay-later-box p {margin: 0 0 5px 0; }
.basket .pay-later-box .pay-later-url {color: #767676; letter-spacing: 3px; margin: 0;}

/* ==========================================================================
   BASKET STEP 5 - POTWIERDZENIE ZAMOWIENIA (strona post-checkout)
   Jedna kolumna, karty .rbox; obsluguje przelew, pobranie, bramki online
   (pierwsze wyswietlenie, powrot z bramki, pay-later z hash, blad inicjacji).
   ========================================================================== */
.basket.step-5 .container {width: 760px; max-width: 100%;}
.basket.step-5 .step5-wrap {display: flex; flex-direction: column; gap: 20px; margin: 0 0 30px 0;}

/* Naglowek statusu */
.basket.step-5 .status-header {text-align: center; padding: 35px 20px; border: 1px solid #e1e1e1; border-radius: 10px;}
.basket.step-5 .status-header .status-icon {width: 64px; height: 64px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.basket.step-5 .status-header .status-icon svg {width: 36px; height: 36px; display: block;}
.basket.step-5 .status-header.status-success .status-icon {background: #e4f5e7; color: #06981e;}
.basket.step-5 .status-header.status-warning .status-icon {background: #fdefe1; color: #b35a00;}
.basket.step-5 .status-header.status-error .status-icon {background: #fbe6e4; color: #d32718;}
.basket.step-5 .status-header.status-info .status-icon {background: #ececec; color: #767676;}
.basket.step-5 .status-header .status-title {margin: 0 0 10px 0; font-size: 34px; line-height: 40px; text-transform: uppercase; font-weight: 900;}
.basket.step-5 .status-header .status-subtitle {margin: 0; font-size: 17px; line-height: 26px; color: #767676;}
.basket.step-5 .status-header .status-subtitle strong {color: #000; font-weight: 700;}
.basket.step-5 .status-header .status-subtitle.error {color: #d32718;}

/* Karty */
.basket.step-5 .rbox {margin: 0; padding: 20px; border: 1px solid #e1e1e1; border-radius: 10px;}
.basket.step-5 .rbox h2 {margin: 0 0 20px 0; font-size: 22px; line-height: 26px;}
.basket.step-5 .rbox h2 svg {width: 22px;}
.basket.step-5 .rbox > p {margin: 0; font-size: 17px; line-height: 26px;}
.basket.step-5 .rbox > p.payment-action-info, .basket.step-5 .rbox > p.pay-later-info, .basket.step-5 .rbox > p.bank-transfer-info {margin: 0 0 25px 0;}

/* Wiersze danych - jak w .rbox.data w krokach 1-4 */
.basket.step-5 .rbox.data .table .r {align-items: center; margin: 0 0 14px 0; line-height: 24px;}
.basket.step-5 .rbox.data .table .r:last-child {margin: 0;}
.basket.step-5 .rbox.data .table .r .n {width: 40%;}
.basket.step-5 .rbox.data .table .r .v {width: 60%; display: flex; align-items: center; gap: 8px;}
.basket.step-5 .rbox.data .table .r .v .v-text {word-break: break-word;}
.basket.step-5 .rbox.data .table .r .v .v-prefix {color: #767676; font-weight: 400; margin: 0 5px 0 0;}
/* Kwota pomocnicza przy wartosci zamowienia - na wersji B2B glowna jest netto, a ta
   pokazuje brutto (i odwrotnie na domenie podstawowej). Zawsze podpisana, bo klient moze
   miec w historii zamowienia z obu wersji sklepu. */
.basket.step-5 .rbox.data .table .r .v .net-price {color: #767676; font-size: 13px; font-weight: 400;}

/* Przyciski kopiowania */
/* min-width mieszczacy dluzsza etykiete "Skopiowano", zeby przycisk nie zmienial rozmiaru po kliknieciu */
.basket.step-5 .copy-btn {height: 44px; min-width: 150px; padding: 0 20px; border: 1px solid #000; border-radius: 5px; background: #000; color: #fff; font-size: 16px; line-height: 20px; font-weight: 700; cursor: pointer; outline: none; box-shadow: none; transition: background .2s, border-color .2s;}
.basket.step-5 .copy-btn:hover {background: #f58220; border-color: #f58220;}
.basket.step-5 .copy-btn.copied {background: #06981e; border-color: #06981e;}
.basket.step-5 .copy-btn.copy-btn-icon {flex-shrink: 0; width: 32px; min-width: 0; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid #e1e1e1; color: #767676;}
.basket.step-5 .copy-btn.copy-btn-icon svg {width: 16px; height: 16px; display: block;}
.basket.step-5 .copy-btn.copy-btn-icon:hover {background: #ececec; border-color: #ccc; color: #000;}
.basket.step-5 .copy-btn.copy-btn-icon.copied {background: #06981e; border-color: #06981e; color: #fff;}
.basket.step-5 .copy-btn.copy-btn-icon .copy-check {display: none;}
.basket.step-5 .copy-btn.copy-btn-icon.copied svg:not(.copy-check) {display: none;}
.basket.step-5 .copy-btn.copy-btn-icon.copied .copy-check {display: block;}

/* Platnosc online + zaplac pozniej */
.basket.step-5 .online-payment {margin: 25px 0 0 0; text-align: center;}
.basket.step-5 .online-payment p {margin: 0 0 15px 0;}
.basket.step-5 .online-payment .payment-link {border-radius: 8px; border-color: #f58120; background: #f58120; padding: 14px 40px; text-transform: uppercase; text-decoration: none;}
.basket.step-5 .online-payment .payment-link:hover {filter: brightness(1.1);}
.basket.step-5 .pay-later-box {margin: 0;}
.basket.step-5 .pay-later-url-wrap {display: flex; gap: 10px; margin: 25px 0 0 0;}
.basket.step-5 .pay-later-box .pay-later-url {flex: 1; min-width: 0; height: 44px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; background: #f7f7f7; color: #767676; font-size: 15px; letter-spacing: 0; outline: none; box-shadow: none;}

/* Raty / leasing - wniosek zamiast platnosci */
.basket.step-5 .financing-box .payment-action-info {margin: 0;}
.basket.step-5 .online-payment .financing-link {text-transform: none;}
.basket.step-5 .online-payment .financing-redirect-info {color: #767676; font-size: 15px; line-height: 22px;}
.basket.step-5 .online-payment .financing-frame {width: 100%; min-height: 800px; border: 0;}
.basket.step-5 .financing-error-box p, .basket.step-5 .financing-return-box p {margin: 0; padding: 15px; background: #ececec; border-left: 3px solid #f58220; border-radius: 5px; font-size: 16px; line-height: 24px;}

/* Info pod podsumowaniem */
.basket.step-5 .rbox > p.order-summary-info {margin: 25px 0 0 0; padding: 15px; background: #ececec; border-left: 3px solid #f58220; border-radius: 5px; font-size: 16px; line-height: 24px;}

/* Akcje koncowe */
.basket.step-5 .step5-actions {display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;}
.basket.step-5 .step5-actions .btn {display: block; min-width: 260px; padding: 18px 20px; text-align: center; text-decoration: none; font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; border-radius: 8px; cursor: pointer;}
.basket.step-5 .step5-actions .btn.prev {border: 1px solid #e5e5e5; background: #e5e5e5; color: #666666;}
.basket.step-5 .step5-actions .btn.my-orders {border: 1px solid #f58120; background: #fff; color: #b35a00;}
.basket.step-5 .step5-actions .btn.my-orders:hover {background: #f58120; color: #212121;}

@media (max-width: 768px) {
    .basket.step-5 .step5-wrap {gap: 15px;}
    .basket.step-5 .status-header {padding: 25px 15px;}
    .basket.step-5 .status-header .status-title {font-size: 24px; line-height: 28px;}
    .basket.step-5 .rbox.data .table .r {display: block;}
    .basket.step-5 .rbox.data .table .r .n, .basket.step-5 .rbox.data .table .r .v {width: 100%;}
    .basket.step-5 .pay-later-url-wrap {flex-direction: column;}
    .basket.step-5 .copy-btn {width: 100%;}
    .basket.step-5 .copy-btn.copy-btn-icon {width: 32px;}
    .basket.step-5 .step5-actions {flex-direction: column;}
    .basket.step-5 .step5-actions .btn {min-width: 0; width: 100%;}
    .basket.step-5 .online-payment .payment-link {display: block; text-align: center;}
}

.basket-options {margin: 0 0 30px 0;}
.basket-options .cart-option-item {display: flex; align-items:center;}
.basket-options .item-zero,.basket-options .cart-option-item {border-bottom: 1px solid #ccc; line-height: 26px; padding: 10px 0px;}
.basket-options .cart-option-item .price {width: 20%; text-align: right; font-size: 16px;}
.basket-options .cart-option-item .label {flex-grow: 1; font-size: 18px; font-weight: 400;}
.basket-options .cart-option-item .old_price {font-weight: 400; font-size: 14px; color: red;}
.basket-options .group .cart-option-items {display: none;}
.basket-options .group.active .cart-option-items {display: block;}
.basket-options .cart-option-item .label a {color: #000;}
.basket-options .cart-option-item .label a:hover,.basket-options h4:hover,.basket-options h3:hover,.cart-bonus.total a:hover {color: #b35a00;}
.basket-options .cart-option-item label,.basket-options .item-zero label {cursor: pointer; position: relative; display: inline-block; padding: 0 0 0 35px;}
.basket-options .cart-option-item label::before,.basket-options .item-zero label::before {content: ' '; display: block; width: 19px; height: 19px; border: 1px solid #f58d35; left: 8px; top: 6px; margin: 0; position: absolute; border-radius: 50%;}
.basket-options .cart-option-item .label input:checked + label::after,.basket-options .item-zero input:checked + label::after  {content: ' '; display: block; width: 12px; height: 12px; background: #f58d35; left: 13px; top: 11px; margin: 0; position: absolute; border-radius: 50%;}	 
.basket-options .cart-option-item input,.basket-options .item-zero input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.basket-options .cart-option-item.disabled, .basket-options .cart-option-item.disabled a,.basket-options .cart-option-item.disabled .old_price {color: #7e7e7e;}
.basket-options .cart-option-item.disabled label::before {border: 1px solid #7e7e7e;}
.basket-options h4 {cursor: pointer; border-bottom: 1px solid #ccc; margin: 0px; padding: 10px 0px;}
.basket-options .basket-option .item-zero,.basket-options .basket-option .list {display: none;}
.basket-options h3 {font-size: 20px; cursor: pointer;}
.basket-options .basket-option.active h3 {color: #E83425;}
.basket-options .basket-option.active .item-zero,.basket-options .basket-option.active .list {display: block;}
.basket-options h3 .icon-chevron,.basket-options h4 .icon-chevron {float: right; transition: transform .4s;}
.basket-options .basket-option.active > h3 .icon-chevron,.basket-options .group.active > h4 .icon-chevron {transform: rotate(90deg);}
.basket-options .group.active h4 {border: 0px;}
.cart-bonus.total a {text-decoration: none; color: #000;}	
.basket .cart-bonus.total b {font-size: 22px;}

.delivery-addresses-list, .invoices-data-list {margin: 0; display: flex; flex-wrap: wrap;}
.delivery-addresses-list .delivery-address, .invoices-data-list .invoice-data {padding: 5px; position: relative; width: 33.3333%;}
.delivery-addresses-list .delivery-address input, .invoices-data-list .invoice-data input {position: absolute; z-index: -1; opacity: 0;}
.delivery-addresses-list .delivery-address label, .invoices-data-list .invoice-data label {display: block; border: 1px solid #e1e1e1; padding: 10px; border-radius: 10px; cursor: pointer; height: 100%; color: #6b6b6b; font-size: 16px; line-height: 18px; transition: color .4s, border-color .4s;}
.delivery-addresses-list .delivery-address label .address-name {display: block; font-weight: 700; color: #000; margin: 0 0 3px 0;}
.delivery-addresses-list .delivery-address label:hover, .invoices-data-list .invoice-data label:hover {border-color: #000; color: #000;}

/* Alerts */
.alert.alert-success {background: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 5px; font-size: 17px; line-height: 20px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; border-left: 4px solid #155724;}
.alert.alert-error {background: #d62d20; border: 1px solid #d62d20; color: #fff; border-radius: 5px; font-size: 17px; line-height: 20px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; border-left: 4px solid #a71d2a; margin: 0 0 30px 0;}
.alert.alert-warning {background: #fff3cd; border: 1px solid #ffc107; color: #856404; border-radius: 5px; font-size: 17px; line-height: 20px; padding: 10px 20px; margin: 0 0 30px 0; display: flex; align-items: center; gap: 10px; border-left: 4px solid #856404;}
.alert.alert-info {background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; border-radius: 5px; font-size: 17px; line-height: 20px; padding: 10px 20px; margin: 0 0 30px 0; display: flex; align-items: center; gap: 10px; border-left: 4px solid #17a2b8;}
.alert p {margin: 0; font-size: 17px; line-height: 20px; font-weight: 700;}
.alert ul {margin: 10px 0 0 0; padding: 0 0 0 30px;}
.alert li {margin: 0; font-size: 17px; line-height: 20px;}
.alert .alert-icon {flex-shrink: 0; width: 24px; height: 24px;}
.alert.alert-success .alert-icon {color: #155724;}
/* Modal "dodano do koszyka" ma pelna zielen z bialym tekstem (projekt: #3fba0a),
   a nie blady wariant .alert-success uzywany w reklamacjach i alertach koszyka.
   Nadpisujemy wiec tylko w .modal-basket, zeby tamtych miejsc nie ruszyc. */
.modal-basket .alert.alert-success {background: #3fba0a; border-color: #3fba0a; color: #fff;}
.modal-basket .alert.alert-success .alert-icon {color: #fff;}
/* Ramka boksu z produktem - w projekcie #d1d1d1 */
.modal-basket .basket-products .product {border-color: #d1d1d1;}
.alert.alert-error .alert-icon {color: #fff;}
.alert.alert-warning .alert-icon {color: #856404;}
.alert.alert-info .alert-icon {color: #0c5460;}
.alert .alert-icon + span, .alert .alert-icon + div {flex: 1;}
.alert.nested-alert .alert-icon {width: 20px; height: 20px;}

.login-form h2, .basket .guest-box h3, .register-box h2 {margin: 0 0 20px 0; font-size: 26px; line-height: 32px; text-transform: uppercase; font-weight: 700;}
.login-form .field, .registration-form .field {width: 100%; margin: 0 0 15px 0; position: relative;}
.login-form .field .input, .registration-form .field .input {position: relative;}
.login-form .field .alert, .registration-form .field .alert {background: none; border: none; color: #d32718; font-size: 14px;}
.login-form .field input, .registration-form .field input {width: 100%; padding: 10px 10px; border-radius: 5px; font-size: 14px; border: 1px solid #ccc; outline: none; box-shadow: none;}
.login-form .field.error input, .registration-form .field.error input {border-color: #d62d20;}
.login-form .field input[type="submit"], .registration-form .field input[type="submit"] {cursor: pointer;}
.field.password input, .basket .field.password input {padding-right: 80px;}
.field.password .show-password {position: absolute; width: 70px; text-align: center; right: 0; top: 0; height: 100%; cursor: pointer; background: none; border: none; color: #767676; z-index: 2;}
.field.password .password-remind {color: #000; font-size: 15px; float: right; position: relative; padding: 0 15px 0 0; margin: 5px 0 20px 0;}
.field.password .password-remind::before, .field.password .password-remind:after {content: ' '; display: block; width: 2px; height: 7px; background: #000; position: absolute; right: 5px; top: 50%; transform: translate(0, -50%); transition: background 0.4s;}
.field.password .password-remind:hover:before, .field.password .password-remind:hover:after {background: #e78100;}
.field.password .password-remind:before {transform: translate(0, -50%) rotate(-45deg); margin-top: -2px;}
.field.password .password-remind:after {transform: translate(0, -50%) rotate(45deg); margin-top: 2px;}
.login-form .field.btn-box {margin: 30px 0 0 0;}
.login-form .field.btn-box .btn {width: 100%; border: 1px solid #f58120; background: #f58120; color: #212121;}
.registration-form .info {font-size: 12px; line-height: 16px;}
/*
.user-login-form .container {display: flex; justify-content: space-between;}
.user-login-form .login-form,.user-login-form .registration-form {width: 500px; max-width: 100%; margin: 0 auto; padding: 30px 20px; border: 1px solid #ccc; border-radius: 8px;}
.user-login-form .registration-form h2 {margin: 0 0 10px 0; font-size: 22px; line-height: 28px;}
.user-login-form .log-in {width: 40%; margin: 40px 0px;}
.user-login-form .register-info {width: 50%; margin: 40px 0px;}
.user-login-form .register-info h2 {margin: 0 0 20px 0; font-size: 30px; line-height: 38px; font-weight: 600;}
.user-login-form .register-info .benefits h3 {margin: 20px 0 20px 0; font-size: 22px; line-height: 28px; font-weight: 600;}
.user-login-form .register-info .btn-create-account {margin: 20px 0px; text-align: center; background: #f58220; font-size: 18px; line-height: 22px; color: #212121; font-weight: 600; border-radius: 10px; padding: 12px 60px; display: inline-block;}

.field.password .password-remind:hover {color: #e78100;}
.user-login-form .register-info .benefits svg {width: 70px; margin-right: 30px;}
.user-login-form .register-info .benefits ul {list-style: none; padding: 0px; margin: 20px 0px;}
.user-login-form .register-info .benefits li {display: flex; align-items: center; font-size: 18px; line-height: 30px;}
.user-login-form .field .placeholder {color: #767676; display: block; position: absolute; top: 17px; left: 10px; transform: translate(0, -50%); background: #fff; padding: 2px 5px; font-size: 14px; line-height: 16px; z-index: 0;}
.user-login-form .field input[type="text"], .user-login-form input[type="password"] {width: 100%; border: 1px solid #ccc; border-radius: 5px; height: 34px; padding: 2px 10px; outline: none; box-shadow: none; font-size: 14px; background: none; position: relative; z-index: 1;}
.user-login-form .field .placeholder {color: #767676; display: block; position: absolute; top: 17px; left: 10px; transform: translate(0, -50%); background: #fff; padding: 2px 5px; font-size: 14px; line-height: 16px; z-index: 0;}
.user-login-form .fields .field .placeholder {left: 20px;}
.user-login-form .field textarea+.placeholder {top: 20px;}
.user-login-form .field input[type="text"]:focus+.placeholder, .user-login-form .field input[type="password"]:focus+.placeholder, .user-login-form .field textarea:focus+.placeholder {top: 0; font-size: 12px; line-height: 14px; z-index: 1;}
.user-login-form .field input[type="text"]::placeholder, .user-login-form .field input[type="password"]::placeholder, .user-login-form .field textarea::placeholder {color: transparent;}
.user-login-form .field input[type="text"]:not(:placeholder-shown)+.placeholder, .user-login-form .field input[type="password"]:not(:placeholder-shown)+.placeholder, .user-login-form .field textarea:not(:placeholder-shown)+.placeholder {top: 0; font-size: 12px; line-height: 14px; z-index: 1;}
.user-login-form .alert {padding: 10px; margin: 10px 0px;}
.user-login-form form .alert.alert-error {margin: 0 0 10px 0; font-size: 13px; padding: 5px 10px; border-radius: 5px;}
.user-login-form .passinfo {font-size: 13px; color: #979797; margin: 2px 0px 10px 0px;}
*/

/* margin-bottom .tabs-content zostaje w srodku karty (overflow: hidden na .tabs),
   wiec odstep od nastepnej sekcji strony musi dac sama sekcja konta. */
.client-account {margin-bottom: 40px;}
.client-account .tabs {background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; overflow: hidden;}
.client-account .tabs-content {padding: 30px 40px 40px; margin-bottom: 40px;}
.client-account .tabs-head {display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid #e1e1e1;}
.client-account .tabs-head a {display: block; padding: 12px 20px; color: #6b6b6b; font-weight: 600; font-size: 15px; text-align: center; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .3s, border-color .3s;}
.client-account .tabs-head a:hover {color: #000;}
.client-account .tabs-head .tab.active a {color: #000; border-bottom-color: #f58220;}
.client-account .tabs-head a.logout {color: #d32718;}
.client-account .tabs-head a.logout:hover {border-bottom-color: #d62d20;}
.client-account h1 {font-size: 32px; margin-bottom: 50px; font-weight:900;}
.client-account form label {display: block; margin-bottom: 5px; color: #6b6b6b;}
.client-account .field .password {position: relative;}
.client-account .field .password input {padding-right: 80px;}
.client-account .field .password .show-password {position: absolute; width: 70px; text-align: center; right: 0; top: 0; height: 34px; cursor: pointer; background: none; border: none; color: #767676; z-index: 2;}
.client-account .field .password .show-password:hover {color: #000;}
.client-account .info-section {border: 1px solid #000; padding: 10px 15px ;margin: 0 0 40px 0;}
.client-account .field .alert {padding: 2px 5px;}
.client-account .field .alert.alert-error {margin: 10px 0px; font-size: 13px;}
.client-account .list {padding: 10px 5px; position: relative; display: table; width:100%; border-collapse: collapse;}
.client-account .btn-sm {display:inline-flex; align-items:center; gap:4px; padding:5px 10px; background:#f8941f; color:#fff !important; border-radius:5px; text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap;}
.client-account .btn-sm:hover {background:#d97600; color:#fff;}
.client-account .list .list-row .list-col {display: table-cell; padding: 5px; vertical-align: middle;}
.client-account .list .list-row.list-head {border-bottom: 3px solid #000;}
.client-account .list .list-row {display: table-row;}
.client-account .list .list-row {border-bottom: 1px solid #ccc;}
.client-account .list .list-row.list-head .list-col {padding: 10px 5px;}
.client-account .list .list-row.list-head .list-col {color: #000; font-weight: 400; font-size: 16px;}
.client-account .list .list-row .list-col.center {text-align: center;}
/* Kwota pomocnicza przy wartosci zamowienia. Historia moze mieszac zamowienia z wersji
   B2B (glowna kwota netto) i z domeny podstawowej (brutto), wiec obie sa podpisane. */
.client-account .list .list-row .list-col .net-price {display: block; color: #7a7f85; font-size: 13px;}
.client-account .list .list-row.list-head .list-col {padding: 10px 5px;}
.client-account .list .list-row .list-col a {color: #7a7f85; display: inline-block;}
.client-account .list .list-row .list-col a:hover {color: #f18700;}
.client-account .list .list-row:nth-child(2n+2) {background: #fcfcfc;}
.client-account .list .list-row .list-col a .icon {height: 100%; line-height: 1.5em;}
.client-account .list .list-row .icon-checked {color: #62ae09;}
.client-account .list .list-row .icon-unchecked {color: #7a7f85;}
.client-account input[type="submit"] {font-weight: 600; margin-top: 20px;}	
.client-account .flex {display: flex; justify-content: space-between;}
.client-account .flex .field {width: 48%;}
.client-account .btn-remove-account {margin: 20px 0px; text-align: center; background: #e78100; font-size: 16px; line-height: 22px; color: #fff; font-weight: 600; border-radius: 10px; padding: 8px 60px; display: inline-block;}
.client-account .btn-remove-account:hover {background: #2f2f2f; color: #fff;}
.client-account .active-sessions-section {margin: 20px 0 0 0;}
.client-account .active-sessions-section h3 {font-size: 20px; line-height: 26px; font-weight: 700; margin: 0 0 15px 0;}
.client-account .sessions-list {list-style: none; padding: 0; margin: 0;}
.client-account .sessions-list li {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 100px 12px 15px; border-bottom: 1px solid #e1e1e1; position: relative;}
.client-account .sessions-list li:first-child {border-top: 1px solid #e1e1e1;}
.client-account .sessions-list li .icon {width: 20px; height: 20px; flex-shrink: 0; color: #555;}
.client-account .sessions-list li .badge-current {background: #f58220; color: #212121; font-size: 12px; line-height: 16px; padding: 2px 8px; border-radius: 10px; font-weight: 600;}
.client-account .sessions-list li small {width: 100%; display: block; color: #6b6b6b; font-size: 13px; line-height: 18px;}
.client-account .sessions-list li .btn-sm.btn-logout-device {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: 1px solid #ccc; color: #555; font-size: 13px; line-height: 18px; padding: 4px 12px; border-radius: 5px; cursor: pointer;}
.client-account .sessions-list li .btn-sm.btn-logout-device:hover {border-color: #d62d20; color: #d32718;}
.client-account .btn-logout-all-devices {background: #2f2f2f; color: #fff; font-size: 15px; line-height: 20px; font-weight: 600; border: none; border-radius: 8px; padding: 10px 30px; cursor: pointer;}
.client-account .btn-logout-all-devices:hover {background: #f58220;}
.client-account .user-data-copy h3 {font-weight: 600;}
.client-account .user-data-copy .field.agreement {margin-bottom: 0px;}
.client-account .user-data-copy select {min-width: 100px;}
/* Wymuszona zmiana hasla: ten ekran jako jedyny nie ma zakladek (hide_tabs), wiec bez
   ograniczenia szerokosci formularz rozlewa sie na cala karte konta i dwa pola hasla
   wygladaja na kilkaset pikseli szerokosci. */
.client-account .force-password-change {max-width: 460px; margin: 0 auto;}
.client-account .force-password-change h2 {font-size: 22px; line-height: 28px; margin: 0 0 15px 0;}
.client-account .force-password-change .alert.alert-warning {font-size: 14px; line-height: 20px; margin: 0 0 25px 0;}
.client-account .force-password-change .field {margin: 0 0 15px 0;}
.client-account .force-password-change .field.btn-box {margin: 25px 0 0 0;}
.client-account .force-password-change input[type="submit"] {width: 100%; background: #f58220; border: 1px solid #f58220; color: #212121; border-radius: 8px; padding: 12px 20px; font-size: 16px; line-height: 20px; cursor: pointer; margin: 0;}
.client-account .force-password-change input[type="submit"]:hover {background: #2f2f2f; border-color: #2f2f2f;}
.client-account .order-view {margin: 20px 0;}
.client-account .order-view .order-header {text-align: center; padding: 20px 0; border-bottom: 1px solid #e1e1e1; position: relative;}
.client-account .order-view .order-header .box-number {font-size: 20px; line-height: 24px; font-weight: 700;}
.client-account .order-view .order-header .btn-back {position: absolute; right: 0; top: 0; background: #f58220; color: #212121; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-size: 14px; line-height: 18px; font-weight: 600;}
.client-account .order-view .order-header .btn-back:hover {background: #000;}
.client-account .order-view .order-footer {text-align: right; padding: 20px 0; margin-top: 20px; border-top: 1px solid #e1e1e1;}
.client-account .order-view .order-footer .btn-back {display: inline-block; background: #f58220; color: #212121; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 700;}
.client-account .order-view .order-footer .btn-back:hover {background: #000;}
.client-account .order-view > p {text-align: center; padding: 40px 20px; font-size: 18px; line-height: 24px; color: #6b6b6b;}
.client-account .btn-complaint, .client-account .btn-return {display: inline-block; background: #f8941f; color: #fff !important; padding: 6px 14px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;}
.client-account .btn-complaint:hover, .client-account .btn-return:hover {background: #d97600; color: #fff !important;}
.client-account .order-view h3 {font-size: 22px; line-height: 26px; font-weight: 700; margin: 30px 0 15px 0;}
.client-account .order-view .order-products {margin: 0 0 30px 0;}
.client-account .order-view .table-products {width: 100%; border-collapse: collapse;}
.client-account .order-view .table-products thead th {padding: 10px 5px; border-bottom: 2px solid #000; font-weight: 700; font-size: 16px; line-height: 20px;}
.client-account .order-view .table-products thead th.center {text-align: center;}
.client-account .order-view .table-products thead th.right {text-align: right;}
.client-account .order-view .table-products tbody td {padding: 15px 5px; border-bottom: 1px solid #e1e1e1; vertical-align: middle;}
.client-account .order-view .table-products tbody td.center {text-align: center;}
.client-account .order-view .table-products tbody td.right {text-align: right;}
.client-account .order-view .table-products tbody td img {max-width: 50px; display: block;}
.client-account .order-view .table-products tbody td a {color: #000; text-decoration: none;}
.client-account .order-view .table-products tbody td a:hover {color: #b35a00;}
.client-account .order-view .table-products tbody td .extra-charge {font-size: 13px; line-height: 16px; color: #6b6b6b; margin-top: 5px;}
.client-account .order-view .table-products tbody td .old-price {color: #f00; text-decoration: line-through;}
.client-account .order-view .table-products tbody tr.total td {border-bottom: 2px solid #000; font-size: 18px; line-height: 22px; font-weight: 700; padding-top: 20px;}
.client-account .order-view .order-summary {margin: 0 0 30px 0; background: #fcfcfc; padding: 20px; border-radius: 5px;}
.client-account .order-view .order-summary .summary-row {display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e1e1e1;}
.client-account .order-view .order-summary .summary-row.total {border-bottom: none; border-top: 2px solid #000; padding-top: 15px; margin-top: 10px; font-size: 20px; line-height: 24px; font-weight: 700;}
.client-account .order-view .order-summary .summary-row.discount {color: #62ae09;}
.client-account .order-view .order-summary .summary-row.bonus {padding: 15px; background: #fff; border-radius: 5px; border: 1px solid #e1e1e1;}
.client-account .order-view .order-summary .summary-separator {height: 1px; background: #ccc; margin: 10px 0;}
.client-account .order-view .order-summary .summary-label {font-weight: 500;}
.client-account .order-view .order-summary .summary-value {font-weight: 700;}
.client-account .order-view .order-addresses {display: flex; gap: 30px; margin: 0 0 30px 0;}
.client-account .order-view .order-addresses .address-box {flex: 1; background: #fcfcfc; padding: 20px; border-radius: 5px;}
.client-account .order-view .order-addresses .address-box h3 {font-size: 18px; line-height: 22px; font-weight: 700; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #e1e1e1;}
.client-account .order-view .order-addresses .address-box p {margin: 5px 0; font-size: 15px; line-height: 20px;}
.client-account .order-view .order-comments {background: #fcfcfc; padding: 20px; border-radius: 5px; margin: 0 0 20px 0;}
.client-account .order-view .order-comments h3 {font-size: 18px; line-height: 22px; font-weight: 700; margin: 0 0 10px 0;}
.client-account .order-view .order-comments p {margin: 0; font-size: 15px; line-height: 20px;}
.client-account .order-view .pay-online {background: #62ae09; color: #fff; padding: 20px; border-radius: 5px; margin: 0 0 20px 0; text-align: center;}
.client-account .order-view .pay-online h3 {font-size: 18px; line-height: 22px; font-weight: 700; margin: 0 0 10px 0; color: #fff;}
.client-account .order-view .pay-online a.btn {display: inline-block; background: #fff; color: #62ae09; padding: 12px 30px; border-radius: 5px; font-weight: 700; text-decoration: none; font-size: 16px; line-height: 20px;}
.client-account .order-view .pay-online a.btn:hover {background: #000; color: #fff;}
.client-account .order-view .bank-wire {background: #fcfcfc; padding: 20px; border-radius: 5px;}
.client-account .order-view .bank-wire h3 {font-size: 18px; line-height: 22px; font-weight: 700; margin: 0 0 10px 0;}
.client-account .order-view .bank-wire p {margin: 0; font-size: 15px; line-height: 20px; font-weight: 600;}

.promo-list .list {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.promo-list .list .sale-item {width: 50%; padding: 15px; }
.promo-list .list .sale-item .sale-item-cont {background: #fff; position: relative; padding: 0 0 70px 0; height: 100%; border: 1px solid #eeeeee; border-radius: 5px; overflow: hidden;}
.promo-list .list .sale-item .photo img {display: block; margin: 0; width: 100%;}
.promo-list .list .sale-item .data {margin: 0 0 10px 0; color: #6b6b6b; font-size: 16px; line-height: 18px;}
.promo-list .list .sale-item .info {padding: 30px;}
.promo-list .list .sale-item .info h2 {font-weight: 900; margin: 0 0 10px 0; font-size: 36px; line-height: 42px;}
.promo-list .list .sale-item .info h2 a {color: #000;}
.promo-list .list .sale-item .info .introduction {margin: 0; font-size: 18px; line-height: 20px;}
.promo-list .list .sale-item .more {display: block; position: absolute; border: 1px solid #000; border-radius: 4px; padding: 10px 20px; bottom: 30px; left: 30px; color: #000; font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: 700;}

.promo-single .name {margin: 0; text-transform: uppercase; font-size: 38px; line-height: 42px; font-weight: 900;}
.promo-single .column {display: flex; flex-wrap: nowrap; margin: 0 -15px;}
.promo-single .column .main-photo {width: 100%; padding: 15px;}
.promo-single .column .main-photo img {display: block; border-radius: 10px;}
.promo-single .column .content {width: 100%; padding: 15px;}
.promo-single .promo-products-list {padding: 30px 0 0 0;}
.promo-single .promo-products-list .promo-products-box {padding: 20px 0 10px 0;}
.manufacturers-list .title {padding:0px;}
.manufacturers-list .title h2, .manufacturers-list .title .section-title {margin:0px 0px 30px 0px;font-size: 48px;line-height: 54px;font-weight: 900;}
.manufacturers-list .list .manufacturer-categories {display:flex;flex-wrap:wrap;justify-content:space-between;}
.manufacturers-list .list .manufacturer-categories .manufacturer-category {width:31%;padding:5px 0px;}
.manufacturers-list .list h2 {
border-bottom: 1px solid #e1e1e1;
text-transform:uppercase;font-size: 18px;line-height: 24px;font-weight:600;padding-bottom:10px;margin-bottom:5px;
}
.manufacturers-list .list h2 a {color: #000;}
.manufacturers-list .list h2 a:hover {color: #b35a00;}
.manufacturers-list .list .manufacturer-categories .manufacturer-category span {font-weight:500;font-size:18px;line-height:20px;}
.manufacturers-list .list .manufacturer-categories .manufacturer-category a {font-weight:400;color: #b35a00;font-size:16px;line-height:20px;}
.manufacturers-list .list .manufacturer-categories .manufacturer-category span.count {color:black;font-weight:400;font-size:15px;}
.manufacturers-list .list .manufacturer-categories .manufacturer-category a:hover {color:black;}

/* Odstep pod calym blokiem FAQ. Selektor z elementem, bo klase faq-section maja tez
   pojedyncze kategorie w srodku (div) - bez tego padding dostalaby kazda z nich. */
section.faq-section {padding-bottom: 20px;}
/* Licznik zeruje sie na kazdej liscie osobno, wiec numeracja pytan startuje od 1
   w kazdej kategorii. Listy nieaktywne maja display:none - nie generuja boksow,
   wiec nie podbijaja licznika kategorii otwartej. */
.faq-sections .faq-section .faq-list {display:none; counter-reset: faq-item;}
.faq-sections .faq-section.active .faq-list {display:block;}
.faq-sections .faq-section .faq-item h3 {counter-increment: faq-item;}
.faq-sections .faq-section .faq-item h3:before {content: counter(faq-item) ". "; color: #b35a00; font-weight: 700;}
/* Naglowki kategorii o 15% wieksze od domyslnego h2 (2em) - stad 2.3em. Line-height
   bez jednostki, zeby skalowal sie razem z rozmiarem czcionki. */
.faq-sections .section-title {cursor:pointer;transition: color 0.3s ease; font-size: 2.3em; line-height: 1.2;}
.faq-sections .section-title:hover {color: #b35a00;}
/* Kategoria rozwinieta: pomaranczowe podkreslenie dokladnie pod tekstem. Celowo
   text-decoration, a nie border-bottom - naglowek zostaje blokiem na pelna szerokosc,
   wiec caly wiersz pozostaje klikalny (accordion jest podpiety pod .section-title). */
.faq-sections .faq-section.active .section-title {text-decoration: underline; text-decoration-color: #f58220; text-decoration-thickness: 3px; text-underline-offset: 6px;}


@keyframes split {
    0%, 25%{ width: 64px }
    100%{ width: 148px }
}

@media all and (min-width: 1750px) {
    .products-hit-list .slick-arrow.slick-prev {left: initial; right: 100%;}
    .products-hit-list .slick-arrow.slick-next {right: initial; left: 100%;}
}

@media all and (max-width: 1600px) {
    .novelty-home .title-novelty h2:before, .novelty-home .title-novelty .section-title:before {width: calc(100% + 15px);}
    .basket .basket-steps .step {text-align: center;}
    .basket .basket-steps .step .no {margin: 0 auto 5px auto;}
    .basket .basket-steps .step a strong {display: block;}
}

@media all and (max-width: 1400px) {
    .categories-menu .menu .item .links .submenu .item {width: 100%;}
}

@media all and (max-width: 1300px) {
    .category-single .products-list-filters-box, .product-finder .products-list-filters-box {width: 300px;}
    .products-list-filters .filter-box .price-filter-row .price input {width: 90px;}
    /* Kafelek robi sie nizszy (banery stoja po dwa w rzedzie), wiec nakladka musi
       zejsc z rozmiarami, zeby zmiescic sie w grafice. */
    .banners .boxes .box .info {left: 30px; padding: 5px 0;}
    .banners .boxes .box h2, .banners .boxes .box .banner-title {font-size: 26px; line-height: 32px;}
    .banners .boxes .box .line {margin: 12px 0 0 0;}
    .banners .boxes .box .description {margin: 12px 0 0 0; font-size: 13px; line-height: 18px;}
    .banners .boxes .box .more {margin: 16px 0 0 0; padding: 8px 26px; font-size: 14px;}
}

@media all and (max-width: 1260px) {
    .middle-box .container {flex-wrap: nowrap;}
    .middle-box .logo {margin: 0 auto 0 0;}
    .middle-box .logo a {width: 300px; max-width: 100%; display: block;}
    .middle-box .search-box {width: auto; margin: 0 0 0 auto;}
    .middle-box .user-box {width: auto; margin: 0;}
    .middle-box .user-box .header-basket .icon-box .name, .middle-box .user-box .user-link span {display: none;}
    .middle-box .user-box .user-link svg {left: 14px;}
    .basket .basket-steps .step a strong {height: 44px; display: flex; align-items: center; width: 100%; justify-content: center;}
}

@media all and (max-width: 1200px) {
    .hits-section .list:before {bottom: calc(100% - 26.7vw - 51px);} /* slider: 3 kolumny */
    .category-single .products-list.list-1 .product-box, .product-finder .products-list.list-1 .product-box, .promo-single .products-list.list-1 .product-box, .manufacturer-single .products-list.list-1 .product-box {width: 50%;}
    .product-single .products-kit-list .product-box {width: 33.3333%;}
    .products-list-order-sort .number-products, .products-list-order-sort .sort, .products-list-order-sort .views {margin: 0 0 10px 0; }
    .products-list.list-2 .product-box .product-photo {width: 20%;}
    .products-list.list-2 .product-box .product-info {width: 80%;}
    .products-list.list-2 .product-box .basket-box .price-box {width: 100%;}
    .product-single .photos-box {width: 50%;}
    .product-single .details-box {width: 50%;}
    .product-single .details-box .l {width: 100%;}
    .product-single .details-box .r {width: 100%;}
    .delivery-addresses-list .delivery-address {width: 50%;}
    .categories-menu .menu {--cat-col-min: 240px;}
}

@media (max-width: 1024px) {
    .gpsr-item {flex: 0 0 calc(50% - 10px);}
}

.menu-mobile-actions {display:none;}
@media all and (max-width: 992px) {
    .hits-section .list:before {bottom: calc(100% - 40vw - 51px);} /* slider: 2 kolumny */
    body.menu-open .menu-mobile-actions {display:flex; flex-direction:column; gap:0; width:400px; max-width:100%; margin:0 auto 10px; padding:10px; border-bottom:1px solid #e1e1e1;}
    .menu-mobile-actions a {display:flex; align-items:center; gap:10px; padding:8px 0; color:#231f20; text-decoration:none; font-size:16px; font-weight:500; line-height:1.3;}
    .menu-mobile-actions a:hover {color:#f8941f;}
    .menu-mobile-actions a svg {flex-shrink:0;}
    .middle-box .navbar-toggler {display: block; flex-grow: 0; flex-shrink: 0;}
    .top-header.affix .middle-box .navbar-toggler {height: 44px;}
    .middle-box .search-box {padding: 15px; display: flex; flex-wrap: nowrap;}
    .middle-box .search-box .product-finder-box {width: 100%;}
    .menu-top {display: none;}
    .main-menu {display: none; border: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; padding: 50px 0 15px 0; z-index: 10;}
    .main-menu .menu {padding: 0 10px;}
    .main-menu .menu .menu-box>.item {text-align: left; margin: 0 0 10px 0}
    .main-menu .menu .menu-box, .main-menu .menu ul {display: block; width: 400px; max-width: 100%; margin: 0 auto; list-style: none; padding: 0;}
    .main-menu .menu .menu-box .item a, .main-menu .menu ul li a {padding: 5px 10px; display: initial; padding: 5px 0; display: inline-block;}
    .main-menu .menu.menu-top {display: block; margin: 0 0 10px 0;}
    body.menu-open {overflow: hidden;}
    body.menu-open .main-menu .container {height: 100%; padding: 0; overflow-y: scroll;}
    body.menu-open .main-menu {display: block;}
    body.menu-open .main-menu .navbar-toggler {display: block;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box {display: block; position: relative; left: initial; top: initial; background: none; box-shadow: none; margin: 0;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont {display: flex;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont:before, body.menu-open .main-menu .menu .menu-box>.item .item-box-cont:after {display: none;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .manufacturers, body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .product {display: none;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .submenu {width: 100%; display: block; padding: 0 0 0 20px;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .submenu .item {padding: 0; width: auto; display: block;}
    body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .submenu h3, body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .submenu .menu-label, body.menu-open .main-menu .menu .menu-box>.item .item-box-cont .submenu .item .ico, body.menu-open .main-menu .menu .menu-box .separator {display: none;}
    .novelty-home .products-novelty-list.list-1>div {width: 100%;}
    .banners .boxes .box {width: 100%;}
    .home .wyswig-icons:before {display: none;}
    .home .wyswig-icons .wyswig {margin: 0 -15px;}
    .home .wyswig-icons .wyswig table tr td {width: 50%; padding: 50px 15px 15px 15px;}
    .home .wyswig-icons .wyswig table tr td:before {top: 125px;}
    .menu-top .menu ul li {margin-left: 10px;}
    .novelty-home .title-novelty {width: 100%;}
    .novelty-home .title-novelty h2, .novelty-home .title-novelty .section-title {text-align: center; padding: 30px 15px;}
    .novelty-home .title-novelty h2:before, .novelty-home .title-novelty .section-title:before {left: -15px; right: -15px; width: auto;}
    .novelty-home .title-novelty p {text-align: center}
    .novelty-home .list {width: 100%;}
    .novelty-home .products-list .block-r .product-box .basket-box .price-box {width: 100%; margin: 0 0 10px 0;}
    .novelty-home .products-list .block-r .product-box .basket-box .basket-btn-box {width: 100%; text-align: left;}
    .product-single .parameters .parameter .name {width: 30%;}
    .product-single .parameters .parameter .values {width: 70%;}
    .product-single .products-kit-list .product-box {width: 50%;}
    .categories-menu .menu {--cat-col-min: calc(50% - 20px);}
    .categories-menu .menu .item .links .submenu .item {width: 50%;}
    footer .footer-cont .foot-left {width: 40%;}
    footer .footer-cont .foot-middle {width: 60%;}
    footer .footer-cont .foot-right {width: 100%; padding-top: 25px;}
    .basket .basket-steps {flex-wrap: wrap;}
    .basket .basket-steps .step {width: 50%; text-align: left;}
    .basket .basket-steps .step .no {margin: 0 10px 0 0;}
    .basket .basket-steps .step a strong {display: inline;}
    .basket .form .left-box, .basket .basket-steps-cont {width: 100%; padding: 0 0 20px 0;}
    .basket .form .right-box {width: 100%; position: static;}
    .basket .right-box .btn-box .btn.prev {display: block; margin: 0 0 20px 0;}
    .basket .left-box .btn-box {display: none;}
    .basket .cart-quantity {width: 60px;}
    .delivery-addresses-list .delivery-address {width: 100%;}
}

@media all and (max-width: 900px) {
    .category-single .products-list-filters-box, .product-finder .products-list-filters-box, .promo-single .products-list-filters-box, .manufacturer-single .products-list-filters-box {display: none;}
    .products-list-order-sort .products-filter-btn-box, .category-single .products-list-order-sort .products-category-btn-box, .manufacturer-single .products-list-order-sort .products-category-btn-box {display: block;}
    .products-list-order-sort .number-products, .products-list-order-sort .sort {display: none;}
    .middle-box .container {flex-wrap: wrap;}
    .middle-box .logo {order: 1; width: 50%; padding: 0; max-height: 50px;}
    .middle-box .search-box {padding: 15px 0; order: 3; width: 100%; }
    .top-header.affix .middle-box .search-box {padding: 5px 0 5px 0;}
    .middle-box .user-box {order: 2; width: 50%;}
    .middle-box .logo a svg, .middle-box .logo a img {height: 55px; margin-top: 0;}
	.client-account h1 {margin-bottom: 20px;}
	.client-account .tabs-head {flex-direction: column; flex-wrap: wrap; overflow: visible; border-bottom: none; gap: 6px; margin: 20px 0 20px 0; padding: 0 15px;}
	.client-account .tabs-head .tab {width: 100%;}
	.client-account .tabs-head a {border: 1px solid #e1e1e1; border-radius: 8px; margin-bottom: 0; background: #f9f9f9; text-align: left; padding: 12px 16px; font-size: 15px; color: #333; white-space: normal;}
	.client-account .tabs-head .tab.active a {background: #000; color: #fff; border-color: #000; border-bottom: 1px solid #000;}
	.client-account .tabs-head a.logout {color: #d32718; background: #fff5f5; border-color: #f5c6c6;}
	.client-account .tabs-head a:hover {color: #b35a00;}
	.client-account .tabs-content {padding: 20px 15px;}
	.basket .agreement-box .agreement label, .registration-form .agreement label {font-size:12px;line-height:16px;letter-spacing:-1px;}
	.login-register-box .field input[type="password"] {padding-right:60px;}
	.middle-box .user-box .user-menu:hover .user-submenu {display: none;}
	.middle-box .user-box .user-menu.open .user-submenu {display: block;}
	.middle-box .user-box .user-menu.open .user-link {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: #fff; background: #fff; z-index: 3;}
	.client-account .list .list-row .list-col.hide {display: none;}
	.d-mobile {display: inline;}
	.d-no-mobile {display: none;}
	.product-comparison .compare-list .list-col.col-products.show-controls .control {opacity: 1;}
	.comparison-widget .btn {height: auto;}
	/* Pasek ma dwa rzedy: miniatury nad przyciskami. W jednym rzedzie przyciski
	   i miniatury rozpychaly widget poza szerokosc ekranu. */
	.comparison-widget .flex {flex-wrap: wrap; gap: 6px;}
	.comparison-widget .compare-products {width: 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0;}
	.comparison-widget .compare-product {flex: 0 0 44px; width: 44px; padding: 3px;}
	.comparison-widget .comparison-actions {width: 100%; margin: 0; gap: 6px;}
	.comparison-widget .comparison-actions .btn {flex: 1 1 auto; text-align: center; font-size: 14px; padding: 6px 8px;}
	.comparison-widget .comparison-clear {flex: 0 0 auto; justify-content: center;}
}

@media all and (max-width: 800px) {
    .news-list .news-item {width: 100%;}
    /* Poziomy uklad sekcji aktualnosci sklada sie w pion: zdjecie, naglowek, tresc.
       Naglowek nie ma juz wlasnej kolumny, wiec wraca do przeplywu nad slider. */
    .news-list.news-home .news-item .news-item-cont {display: block;}
    .news-list.news-home .news-item .photo, .news-list.news-home .news-item .info {width: 100%; flex: none;}
    .news-list.news-home .news-item .info {padding: 25px 0 0 0;}
    /* W kodzie naglowek idzie za lista (bo na desktopie lezy nad prawa kolumna),
       wiec w pionie trzeba go przestawic z powrotem na gore. */
    .news-list.news-home .container {display: flex; flex-direction: column;}
    .news-list.news-home .title {position: static; order: -1; padding: 0 0 25px 0; text-align: center;}
    .news-list.news-home .arrows {position: static; margin: 25px 0 0 0; text-align: center;}
    .news-list.news-home .arrow {margin: 0 5px;}
}

@media all and (max-width: 700px) {
    .client-account .order-list {display: block;}
    .client-account .order-list .list-row.list-head {display: none;}
    .client-account .order-list .list-row {display: flex; flex-wrap: wrap; border: 1px solid #e1e1e1; border-radius: 6px; padding: 10px; margin-bottom: 8px; align-items: center; position: relative;}
    .client-account .order-list .list-row:nth-child(2n+2) {background: #fff;}
    .client-account .order-list .list-row .list-col {display: none; padding: 0;}
    .client-account .order-list .list-row .list-col p {margin: 0;}
    .client-account .order-list .list-row .list-col:nth-child(1) {display: block; width: calc(100% - 36px); margin-bottom: 4px;}
    .client-account .order-list .list-row .list-col:nth-child(2) {display: block; width: 50%; color: #6b6b6b; font-size: 13px;}
    .client-account .order-list .list-row .list-col:nth-child(3) {display: block; width: 50%; text-align: right; font-weight: 700;}
    .client-account .order-list .list-row .list-col:nth-child(4) {display: block; width: 100%; margin-top: 5px; text-align: left;}
    .client-account .order-list .list-row .list-col:nth-child(5) {display: block; width: 100%; margin-top: 5px;}
    .client-account .order-list .list-row .list-col:nth-child(6) {display: block; width: 100%; margin-top: 5px;}
    .client-account .order-list .list-row .list-col:nth-child(7) {display: block; position: absolute; top: 10px; right: 10px; width: 28px;}
    .client-account .order-list .list-row .list-col.col-tracking {display: block; width: 100%; margin-top: 5px;}
    .client-account .order-list .list-row .list-col.col-tracking a {display: inline-block; background: #f8941f; color: #fff !important; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none;}
    .client-account .order-list .list-row .list-col.col-complaint {display: inline-block; width: auto; margin-top: 8px; margin-right: 8px;}
    .client-account .order-list .list-row .list-col.col-return {display: inline-block; width: auto; margin-top: 8px;}
    .client-account .return-list, .client-account .complaint-list {display: block;}
    .client-account .return-list .list-row.list-head, .client-account .complaint-list .list-row.list-head {display: none;}
    .client-account .return-list .list-row, .client-account .complaint-list .list-row {display: flex; flex-wrap: wrap; border: 1px solid #e1e1e1; border-radius: 6px; padding: 10px; margin-bottom: 8px; align-items: center;}
    .client-account .return-list .list-row:nth-child(2n+2), .client-account .complaint-list .list-row:nth-child(2n+2) {background: #fff;}
    .client-account .return-list .list-row .list-col, .client-account .complaint-list .list-row .list-col {display: block; padding: 0;}
    .client-account .return-list .list-row .list-col:nth-child(1), .client-account .complaint-list .list-row .list-col:nth-child(1) {width: 100%; margin-bottom: 6px; font-size: 15px;}
    .client-account .return-list .list-row .list-col:nth-child(2), .client-account .complaint-list .list-row .list-col:nth-child(2) {width: 50%; color: #6b6b6b; font-size: 13px; align-self: center;}
    .client-account .return-list .list-row .list-col:nth-child(3), .client-account .complaint-list .list-row .list-col:nth-child(3) {width: 50%; text-align: right; align-self: center;}
    .client-account .return-list .list-row .list-col:nth-child(4), .client-account .complaint-list .list-row .list-col:nth-child(4) {width: 50%; color: #6b6b6b; font-size: 13px; margin-top: 6px; align-self: center;}
    .client-account .return-list .list-row .list-col:nth-child(5), .client-account .complaint-list .list-row .list-col:nth-child(5) {width: 50%; text-align: right; margin-top: 6px; align-self: center;}
}

@media all and (max-width: 767px) {
    .home .title h2 a:before, .home .title .section-title a:before, .home .title h2 a:after, .home .title .section-title a:after {display: none;}
    .novelty-home .block-r .product-box {height: auto;}
    .novelty-home .products-list .block-r .product-box .basket-box .price-box {width: 50%; margin: 0;}
    .novelty-home .products-list .block-r .product-box .basket-box .basket-btn-box {width: 50%; text-align: right;}
    .banners .boxes .box h2, .banners .boxes .box .banner-title {font-size: 32px; line-height: 38px;}
    /* Mobile: tresc schodzi z grafiki na panel w kolorze motywu pod nia. Wspolne
       zaokraglenie trzyma baner w calosci, kolory tekstu z motywu dzialaja bez zmian,
       a calosc jest wysrodkowana, bo panel zajmuje pelna szerokosc kafelka. */
    .banners .boxes .box figure a, .banners .boxes .box figure img {border-radius: 5px 5px 0 0;}
    .banners .boxes .box .info {position: static; transform: none; width: 100%; left: auto; padding: 25px 20px 30px 20px; border-radius: 0 0 5px 5px; text-align: center;}
    .banners .boxes .box h2, .banners .boxes .box .banner-title {text-align: center;}
    .banners .boxes .box .line {margin: 18px auto 0 auto;}
    .banners .boxes .box .description {font-size: 15px; line-height: 22px;}
    .banners .boxes .box .more {padding: 10px 40px; font-size: 16px;}
    .banners .boxes .box.theme-dark .info {background: #000;}
    .banners .boxes .box.theme-light .info {background: #f1f1f1;}
    .product-single .photos-box {width: 100%;}
    .product-single .details-box {width: 100%;}
    .product-single .parameters .parameter .name {width: 40%;}
    .product-single .parameters .parameter .values {width: 60%;}
    .categories-menu .menu .item .links .submenu .item {width: 100%;}
    footer .footer-cont .foot-left {width: 100%;}
    footer .footer-cont .foot-left .logo {width: 300px; max-width: 100%; margin: 0 auto 30px auto;}
    footer .footer-cont .contact {justify-content: space-around;}
    footer .footer-cont .foot-middle {width: 100%; padding-top: 25px;}
    footer .social a {border-color: #818181; margin: 0 7px 15px 7px;}
    .basket .basket-products .product.head .quantity, .basket .basket-products .product.head .gross, .basket .basket-products .product.head .value, .basket .basket-products .product.head .remove, .basket .basket-products .product.head .photo {display: none;}
    .basket .basket-products .product {flex-wrap: wrap; padding-right: 40px; position: relative;}
    .basket .basket-products .product.head .name {width: 100%; margin: 0;}
    .basket .basket-products .product .photo {width: 20%; margin: 0 0 20px 0;}
    .basket .basket-products .product .name {width: 80%; margin: 0 0 20px 0;}
    .basket .basket-products .product .quantity {width: 33.3333%;}
    .basket .basket-products .product .gross {width: 33.3333%;}
    .basket .basket-products .product .value {width: 33.3333%;}
    .basket .basket-products .product .remove {position: absolute; right: 10px; top: 0; bottom: 0; padding: 0; width: 25px;}
    .basket .basket-products .product .remove a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .basket .basket-products .product .remove a svg {top: 50%; position: relative; margin: -10px 0 0 0;}
    .basket.step-4 .basket-products .product .name {width: 80%;}
    .basket.step-4 .basket-products .product {padding-right: 15px;}
    .basket .basket-info.basket-info-desktop {display: none;}
    .basket .basket-info.basket-info-mobile {display: block;}
    .login-register-box .login-quest-box, .login-register-box .register-box {width: 100%;}
    .home .title h2, .home .title .section-title, .novelty-home .title-novelty h2, .novelty-home .title-novelty .section-title {font-size: 28px; line-height: 32px;}
    .great-prices .arrow, .mobile .novelty-home .arrow {width: 32px; height: 32px;}
    .great-prices .arrow.prev, .mobile .novelty-home .arrow.prev {right: 38px;}
    .client-account .order-view .order-addresses {flex-direction: column; gap: 20px;}
    .client-account .order-view .table-products thead {display: none;}
    .client-account .order-view .table-products tbody tr {display: flex; flex-wrap: wrap; border-bottom: 2px solid #e1e1e1; padding: 10px 0;}
    .client-account .order-view .table-products tbody td {border-bottom: none; padding: 5px;}
    .client-account .order-view .table-products tbody td:nth-child(1) {width: 5%; order: 1;}
    .client-account .order-view .table-products tbody td:nth-child(2) {width: 20%; order: 2;}
    .client-account .order-view .table-products tbody td:nth-child(3) {width: 75%; order: 3;}
    .client-account .order-view .table-products tbody td:nth-child(4) {width: 33.33%; order: 4; text-align: left;}
    .client-account .order-view .table-products tbody td:nth-child(4):before {content: 'Ilo\15B\107: '; font-weight: 700;}
    .client-account .order-view .table-products tbody td:nth-child(5) {width: 33.33%; order: 5; text-align: left;}
    .client-account .order-view .table-products tbody td:nth-child(5):before {content: 'Cena: '; font-weight: 700;}
    .client-account .order-view .table-products tbody td:nth-child(6) {width: 33.33%; order: 6; text-align: left;}
    .client-account .order-view .table-products tbody td:nth-child(6):before {content: 'Warto\15B\107: '; font-weight: 700;}
    .client-account .order-view .table-products tbody tr.total td {width: 100%; order: 7; text-align: right;}
    .client-account .order-view .order-header .btn-back {position: static; transform: none; display: block; margin: 0 0 15px 0;}
    .client-account .order-view .order-header {padding: 10px 0;}
    .categories-menu .menu {--cat-col-min: calc(33.333% - 20px);}
    .promo-single .name {font-size: 30px; line-height: 38px;}
    .category-single .category-box .name, .product-finder .product-finder-box .name, .product-favorite .product-favorite-box .favorite-details .name {font-size: 36px; line-height: 44px;}
    .cat-box-filter-cont .categories {width: 100%;}
    .box-filter-cont .categories .category-item a {padding-right: 70px;}
    .manufacturers-list .title h2, .manufacturers-list .title .section-title {font-size: 36px; line-height: 44px;}
    .manufacturers-list .list .manufacturer-categories .manufacturer-category {width: 100%;}
    .promo-list .list {margin: 0;}
    .promo-list .list .sale-item {width: 100%; padding: 0 0 20px 0;}
    .promo-list .list .sale-item .sale-item-cont {padding: 0 0 60px 0;}
    .promo-list .list .sale-item .info {padding: 15px 20px;}
    .promo-list .list .sale-item .info h2 {font-size: 22px; line-height: 28px;}
    .promo-list .list .sale-item .info .introduction {font-size: 15px; line-height: 20px;}
    .promo-list .list .sale-item .more {bottom: 15px; left: 20px; padding: 8px 16px; font-size: 14px;}
    .section-wyswig {padding: 0 0 20px 0;}
    .section-wyswig .wyswig table {width: 100% !important;}
    .section-wyswig .wyswig table tr,
    .section-wyswig .wyswig table tbody {display: block; width: 100%;}
    .section-wyswig .wyswig table td {display: block; width: 100% !important; padding: 10px 0 !important; box-sizing: border-box;}
    .section-wyswig .wyswig img {max-width: 100%; height: auto !important;}
    .section-wyswig .wyswig p {font-size: 15px; line-height: 22px;}
	.section-wyswig .hide_mobile {display:none !important;}
    .section-wyswig  .wyswig-28 table td table td {display:inline-block;width:46% !important;}
    img[loading="lazy"] {background: none !important;}
    .modal-basket .basket-products {font-size: 14px;}
    .modal-basket .basket-products .product .value {font-size: 16px;}
    .basket .empty-basket .btn-box .btn.prev {width: 100%;}
    .basket-options h4 {display: flex; justify-content: space-between; align-items: center;}
    .basket-options h4 .icon-chevron {float: none; flex-shrink: 0;}
    .basket-options h4 svg.icon:first-of-type {display: none;}
}

@media (max-width: 640px) {
    .gpsr-item {flex: 0 0 100%;}
}

@media all and (max-width: 600px) {
    .products-variants-box .variants-name {font-size: 24px; line-height: 30px; margin: 20px 0 15px 0;}
    .news-list .news-item .info {padding: 25px;}
    .middle-box .user-box .header-basket .details-box .basket-products {font-size: 14px;}
    .middle-box .user-box .header-basket .details-box .product .value {font-size: 18px;}
    .login-register-box .guest-box {padding: 30px 0px;}
    footer .logo svg, footer .logo img {max-width: 90%;}
    .top-header.affix .product-finder-box form button .ico {padding: 8px 10px;}
    .login-register-box .login-quest-box {padding: 0px;}
    .basket.step-2 .btn-box .btn.prev {width: 100%;}
    .product-single .description h1 {font-size: 32px; line-height: 40px;}
    .novelty-home .block-r .product-box .product-box-cont .product-photo {width: 100%; padding: 0;}
    .novelty-home .block-r .product-box .product-box-cont .product-info {width: 100%; padding: 0;}
    .home .wyswig-icons .wyswig table tr td {width: 100%;}
    .category-single .products-list.list-1 .product-box, .product-finder .products-list.list-1 .product-box, .promo-single .products-list.list-1 .product-box, .manufacturer-single .products-list.list-1 .product-box, .product-favorite .products-list.list-1 .product-box {width: 100%;}
    .category-single .products-list.list-1 .product-box h2, .product-finder .products-list.list-1 .product-box h2, .promo-single .products-list.list-1 .product-box h2, .manufacturer-single .products-list.list-1 .product-box h2 {margin: 0 0 10px 0; min-height: initial;}
    .jconfirm-content .products-list-filters form {height: auto;}
    .jconfirm-content .products-list-filters .cat-box-filter, .jconfirm-content .products-list-filters .filters-box-filter {width: 100%; height: auto; overflow: initial;}
    .products-list.list-2 .product-box .product-photo {width: 40%;}
    .products-list.list-2 .product-box .product-info {width: 60%;}
    /* Ponizej 992px kolumny nie mieszcza sie obok siebie - cena laduje pod nazwa. */
    .products-list.list-2 .product-box .product-info {flex-wrap: wrap;}
    .products-list.list-2 .product-box .info-box {width: 100%; padding: 0;}
    .products-list.list-2 .product-box .basket-box {width: 100%; margin: 10px 0 0 0; text-align: left;}
    .products-list.list-2 .product-box .basket-box .price-box, .products-list.list-2 .product-box .history-price {text-align: left;}
    .product-single .products-kit-list .product-box {width: 100%;}
    .categories-menu .menu {--cat-col-min: calc(50% - 10px); gap: 10px;}
    .categories-menu .menu div.item {display: block; padding: 15px 12px;}
    .categories-menu .menu div.item .ico {margin: 0;}
    .categories-menu .menu>div.item .links {padding: 0;}
    .categories-menu .menu div.item .links h3 {margin: 0; padding-bottom: 0; text-align: center; min-height: 20px;}
    .categories-menu .menu div.item .links h3:after {display: none;}
    .categories-menu .menu div.item .links .submenu, .categories-menu .menu div.item .show-more {display: none;}
    .product-finder-box select, .product-finder-box form:before {display: none;}
    .product-finder-box input {padding: 5px 10px;}
    .product-finder-box form .ico {display: none;}
    .home .wyswig-icons {background: #000;}
    .home .wyswig-icons .wyswig table tr td:before {display: none;}
    .home .wyswig-icons .wyswig table tr:nth-of-type(1) td:nth-of-type(1)::before {display: block; background: #fff; top: 0; height: 130px; width: 100%; z-index: 0;}
    .products-list-order-sort .products-filter-btn-box, .products-list-order-sort .products-category-btn-box {width: 100%; margin-bottom: 15px;}
    .products-list-order-sort .views>label, .pagination-box label {display: none;}
    .products-list-order-sort .views label.btn {margin: 0 15px 0 0;}
    footer .partners {padding-top: 30px;}
    footer .partners .partner {padding:10px 5px; width: 50%;}
    .basket .basket-steps  .step {width: 100%;}
    .products-hit-list .product-box {padding: 15px 10px;}
    .hits-section {padding: 35px 0 40px 0;}
    .hits-section .list:before {bottom: calc(100% - 80vw - 2px);} /* slider: 1 kolumna (centerMode) */
    .hits-section .title h2, .hits-section .title .section-title {font-size: 28px; line-height: 32px;}
    .products-hit-list .slick-slide {opacity: 0.6;}
    .products-hit-list .slick-slide.slick-active {opacity: 1;}
    .login-register-box .btn-box .btn {font-size: 20px;}
	.product-single .description h2 {font-size:28px;line-height:36px;font-weight:bold;}
	.product-single .tab-section .header {font-size:26px;line-height:30px;font-weight:bold;}
	.product-single .parameters .parameter {font-size:15px;line-height:18px;}
	.product-single .tabs .tab {width:100%;border: 1px solid #e1e1e1;border-radius: 8px;background: #f9f9f9;text-align:center;font-size: 15px;margin:5px 15px;color: #333;white-space: normal;}
	.product-single .tabs .tab.active a:after {display:none;}
	.product-single .tabs .tab a {font-size:18px;line-height: 22px;}
	.product-single .tabs-box {border-bottom:0px;}
	.product-single .details-box .product-name {font-size: 32px;line-height:38px;}
	.login-register-box .register-box {margin-bottom:20px;padding: 15px 0px;}
	.login-register-box {margin:0px;}
	.login-register-box .register-box .register-cont {padding: 30px 20px;}
    .login-register-box .login-box .login-form {padding: 30px 20px;}
    .alert.alert-error {margin-bottom: 15px;}
    .product-single .description iframe {max-width: 100%;}
}

@media all and (max-width: 500px) {
    .hits-section .list:before {bottom: calc(100% - 100vw + 23px);} /* zdjecie na pelnej szerokosci karty */
    .news-single .name {font-size: 28px; line-height: 32px;}
    .news-single .column .content h1 {font-size: 24px; line-height: 28px;}
    .product-finder .product-finder-box .name {font-size: 28px; line-height: 34px;}
    .client-account .list .list-row .list-col.hide-500 {display: none;}
    .middle-box .logo a svg, .middle-box .logo a img {width: 100%; height: auto; max-width: 100%; margin-top: 0;}
    .product-finder-box form button {width: 50px; padding: 0;}
    .product-finder-box form button span {display: none;}
    .product-finder-box form button .ico {display: block; fill: #fff; margin: 0 auto; position: relative;}
    .product-finder-box form {padding-right: 50px;}
    .home .title h2, .home .title .section-title, .novelty-home .title-novelty h2, .novelty-home .title-novelty .section-title {font-size: 26px; line-height: 30px;}
    .great-prices .arrow, .mobile .novelty-home .arrow {width: 30px; height: 30px;}
    .great-prices .arrow.prev, .mobile .novelty-home .arrow.prev {right: 36px;}
    .news-list .news-item .info h2, .news-list .news-item .info .news-title {font-size: 28px; line-height: 32px;}
    .products-list.list-1 .product-box .product-photo, .products-hit-list .product-box .product-photo {width: 100%;}
    .banners .boxes .box h2, .banners .boxes .box .banner-title {font-size: 26px; line-height: 32px;}
    .products-list.list-2 .product-box .product-box-cont {padding: 15px 0;}
    .products-list.list-2 .product-box .product-photo {width: 100%;}
    .products-list.list-2 .product-box .product-photo img {margin-bottom: 10px;}
    .products-list.list-2 .product-box .product-info {width: 100%;}
    .products-list.list-2 .product-box h2 {margin-bottom: 10px;}
    .products-list.list-2 .product-box .basket-box {padding: 0; margin: 0;}
    .products-list.list-2 .product-box .basket-box .price-box {width: 100%;}
    .products-list.list-2 .product-box .history-price {text-align: left;}
    .product-single .photos-box .thumbnails {margin: 0 -5px;}
    .product-single .photos-box .thumbnails .photo {padding: 5px;}
    .basket .fields {flex-wrap: wrap;}
    .basket .fields .field.w8 {width: 100%;}
    .basket .fields .field.w2 {width: 50%;}
	.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-apply,.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn + button.btn {width:100%;}
	.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn + button.btn {margin:10px 0px 0px 0px;}
	 .basket .cart-quantity {width: 50px;font-size:18px;}
	 .basket .cart-quantity-btn {font-size:28px;}
	 .basket .left-box .total .r strong {font-size:20px;line-height:26px;}
    .product-single .description table td {display: block;}
}

@media all and (max-width: 400px) {
    .banners .boxes .box h2, .banners .boxes .box .banner-title {font-size: 20px; line-height: 24px;}
    .products-list-order-sort .number-products, .products-list-order-sort .sort, .products-list-order-sort .views {width: 100%;}
    .products-list-order-sort .select2 {width: 100% !important;}
    .products-list.list-2 .product-box .basket-box .price-box, .products-list.list-2 .product-box .basket-box .basket-btn-box {width: 100%; text-align: left;}
    .product-single .parameters .parameter .name {width: 100%; padding: 10px 10px 2px 10px}
    .product-single .parameters .parameter .values {width: 100%; padding: 2px 10px 10px 10px;}
    .product-single .tabs {justify-content: center;}
    .categories-menu .menu div.item .links .submenu .item {width: 100%;}
    footer .footer-cont .menu-box {width: 50%;}
    footer .footer-cont .menu-box.client-arae {width: 100%; display: flex; flex-wrap: wrap; padding: 0;}
    footer .footer-cont .menu-box.client-arae .m-box {width: 50%; padding: 15px 15px 0 15px;}
    .categories-menu .menu div.item .ico a {padding: 10px;}
    .categories-menu {padding: 30px 0 40px 0;}
    .categories-menu .section-title {font-size: 24px; margin: 0 0 30px 0;}
}

@media all and (max-width:350px) {
    .products-list.list-1 .product-box .basket-box, .products-hit-list .product-box .basket-box, .products-list.list-2 .product-box .basket-box {flex-wrap: wrap;}
    .products-list.list-1 .product-box .basket-box .price-box, .novelty-home .products-list .block-r .product-box .basket-box .price-box {width: 100%; margin: 0 0 10px 0;}
    .products-list.list-1 .product-box .basket-box .basket-btn-box, .novelty-home .products-list .block-r .product-box .basket-box .basket-btn-box {width: 100%; text-align: left;}
}

/* iPhone Safe Area Support for Notch */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile .top-header {padding-top: env(safe-area-inset-top);}
    .mobile .top-header .menu-top {padding-top: 0;}
    .mobile .top-header .middle-box {padding-top: 10px;}
}
/* Fallback for older iOS versions */
@supports (padding-top: constant(safe-area-inset-top)) {
    .mobile .top-header {padding-top: constant(safe-area-inset-top);}
    .mobile .top-header .menu-top {padding-top: 0;}
    .mobile .top-header .middle-box {padding-top: 10px;}
}

/* Apaczka Pickup Points Section */
.apaczka-section {
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

.apaczka-map-container {
    margin-bottom: 20px;
    text-align: center;
}

.btn-show-map {
    padding: 12px 30px;
    background: #f18700;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-show-map:hover {
    background: #d97600;
}

.selected-pickup-point {
    padding: 20px;
    background: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 5px;
    margin-top: 20px;
}

.selected-pickup-point h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2e7d32;
    font-size: 18px;
}

.point-details p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5;
}

.point-details .point-name {
    font-size: 16px;
    font-weight: bold;
    color: #2e7d32;
}

.point-details .point-address {
    color: #555;
}

.point-details .point-city {
    color: #666;
}

#apaczka-selected-details {
    margin: 10px 0;
}

.btn-change {
    margin-top: 15px;
    padding: 10px 20px;
    background: #f18700;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.btn-change:hover {
    background: #d97600;
}

/* Apaczka error state */
.apaczka-section.error {
    border: 2px solid #d32f2f;
    background: #ffebee;
}

.apaczka-section .field-error-message {
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.apaczka-section .field-flashdata {
    color: #721c24;
    font-size: 14px;
    font-weight: 500;
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: white;
    transition: top 0.3s ease;
}

.notification.success {
    background: #4CAF50;
}

.notification.error {
    background: #f44336;
}

img[loading="lazy"] {
    background: linear-gradient(110deg, #f0f0f0 40%, #e8e8e8 50%, #f0f0f0 60%);
    background-size: 200% 100%;
    animation: img-shimmer 1.5s infinite linear;
}
@keyframes img-shimmer {
    to { background-position: -200% 0; }
}

/* Credit Agricole */
.financing-btns .credit-agricole {display: block; background: url("https://ewniosek.credit-agricole.pl/eWniosek/res/CA_grafika/oblicz_raty_przezroczysty.png") no-repeat scroll center top transparent; width: 120px; height: 28px;}

/* Kalkulatory rat/leasingu w koszyku - te same przyciski co na karcie produktu */
.basket .financing-box .financing-info {margin: 0 0 15px 0;}
.basket .financing-box .financing-btns {display: flex; flex-wrap: wrap; align-items: center; gap: 15px;}
.basket .financing-btns a.leaselink {border: 0; display: inline-block; background: #000; color: #fff !important; font-weight: 600; text-transform: uppercase; text-decoration: none; padding: 10px 45px 10px 12px; letter-spacing: 1px; font-size: 11px; position: relative; transition: all 0.5s ease-in-out;}
.basket .financing-btns a.leaselink::after {background: #eee url(https://leaselink.pl/img/arrow.png) no-repeat center center; border-radius: 0 5px 5px 0; content: ""; display: block; height: 100%; position: absolute; right: -4px; top: 0; width: 30px; transition: all 0.5s ease-in-out;}
.basket .financing-btns a.leaselink:hover::after {width: 35px;}

/* Product tags */
.product-tags {display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0;}
.product-tags > span {font-size: 13px; color: #666666; margin-right: 3px;}
.product-tags a, .product-tags .tag-label {display: inline-block; padding: 2px 10px; background: #f0f0f0; border-radius: 12px; font-size: 12px; color: #333; text-decoration: none;}
.product-tags a:hover {background: #e0e0e0; color: #000;}
/* Kolor .wyswig a ustawia wspolna regula tresci redakcyjnej nizej w pliku. */

/* Koszyk - przycisk i podpowiedz pobierania danych z GUS (dane firmy) */
.basket .company-section .field .gus-row {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 0 0;}
.basket .company-section .field .gus-fetch-btn {display: inline-block; flex-shrink: 0; padding: 8px 16px; background: #f58220; color: #212121; border: none; border-radius: 5px; font-size: 13px; line-height: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer; outline: none; box-shadow: none; transition: background .3s; white-space: nowrap;}
.basket .company-section .field .gus-fetch-btn:hover {background: #000;}
.basket .company-section .field .gus-hint {margin: 0; font-size: 13px; line-height: 18px; color: #6b6b6b;}

/* Negocjacja ceny - klauzula informacyjna RODO */
.price-negotiation-form-box .price-negotiation-clause {margin: 15px 0 0 0;}
.price-negotiation-form-box .price-negotiation-clause .clause-title {margin: 0 0 6px 0; font-size: 15px; font-weight: 700; color: #333;}
.price-negotiation-form-box .price-negotiation-clause .clause-text {margin: 0; font-size: 12px; line-height: 18px; color: #666666;}
.price-negotiation-form-box .price-negotiation-clause .clause-text a {color: #b35a00; text-decoration: underline;}

/* Newsletter - klauzula informacyjna RODO (warstwa 2 rozwijana) */
.newsletter-subscribe-form .agreement .newsletter-clause-toggle {display: inline-block; margin: 6px 0 0 0; font-size: 12px; color: #b35a00; text-decoration: underline; cursor: pointer;}
.newsletter-subscribe-form .agreement .newsletter-clause-toggle .arrow {display: inline-block; transition: transform .2s;}
.newsletter-subscribe-form .agreement .newsletter-clause-toggle.open .arrow {transform: rotate(180deg);}
.newsletter-subscribe-form .agreement .newsletter-clause {margin: 8px 0 0 0; padding: 10px 12px; background: #f7f7f7; border-radius: 5px; max-height: 240px; overflow-y: auto; font-size: 12px; line-height: 17px; color: #666;}
.newsletter-subscribe-form .agreement .newsletter-clause h4 {margin: 10px 0 4px 0; font-size: 13px; font-weight: 700; color: #333;}
.newsletter-subscribe-form .agreement .newsletter-clause h4:first-child {margin-top: 0;}
.newsletter-subscribe-form .agreement .newsletter-clause p {margin: 0 0 6px 0;}
.newsletter-subscribe-form .agreement .newsletter-clause a {color: #b35a00; text-decoration: underline; word-break: break-all;}

/* Porownywarka - link do udostepnienia porownania */
.product-comparison .comparison-share {margin: 0 0 25px 0; padding: 16px 18px; background: #fff7ef; border: 1px solid #f58220; border-radius: 8px;}
.product-comparison .comparison-share .comparison-share-label {display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #333; margin: 0 0 10px 0;}
.product-comparison .comparison-share .comparison-share-label svg {width: 20px; height: 20px; fill: #f58220; flex-shrink: 0;}
.product-comparison .comparison-share .comparison-share-row {display: flex; flex-wrap: wrap; gap: 10px;}
.product-comparison .comparison-share .comparison-share-url {flex: 1; min-width: 220px; border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px 12px; font-size: 14px; line-height: 20px; background: #fff; color: #333;}
.product-comparison .comparison-share .comparison-share-copy {flex-shrink: 0; padding: 10px 20px; background: #f58220; color: #212121; border: none; border-radius: 5px; font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background .3s;}
.product-comparison .comparison-share .comparison-share-copy:hover {background: #000;}
.product-comparison .comparison-share .comparison-share-copy.copied {background: #5bc25f;}
.product-comparison .comparison-share .comparison-share-info {margin: 10px 0 0 0; font-size: 13px; line-height: 18px; color: #6b6b6b;}

/* Porownywarka - wskazanie roznic w parametrach */
.product-comparison .comparison-controls {margin: 0 0 18px 0;}
.product-comparison .comparison-controls .comparison-diff-toggle {display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; color: #333; user-select: none;}
.product-comparison .comparison-controls .comparison-diff-toggle input {width: 18px; height: 18px; cursor: pointer;}
.product-comparison.compare-diff .list-row.params .list-prod {transition: background .2s;}
.product-comparison.compare-diff .list-prod.diff-val-0 {background: #ffd9d9;}
.product-comparison.compare-diff .list-prod.diff-val-1 {background: #d9e8ff;}
.product-comparison.compare-diff .list-prod.diff-val-2 {background: #d9f5df;}
.product-comparison.compare-diff .list-prod.diff-val-3 {background: #fff2cc;}
.product-comparison.compare-diff .list-prod.diff-val-4 {background: #ecd9f5;}
.product-comparison.compare-diff .list-prod.diff-val-5 {background: #d3f2ef;}
.product-comparison.compare-diff .list-prod.diff-val-6 {background: #ffe0c2;}
.product-comparison.compare-diff .list-prod.diff-val-7 {background: #e9edc9;}

/* Porownywarka - przycisk wydruku */
.product-comparison .comparison-controls {display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.product-comparison .comparison-controls .comparison-print-btn {display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #333; color: #fff; border: none; border-radius: 5px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s;}
.product-comparison .comparison-controls .comparison-print-btn svg {width: 18px; height: 18px; fill: currentColor;}
.product-comparison .comparison-controls .comparison-print-btn:hover {background: #f58220;}

/* Porownywarka - wydruk */
@media print {
    /* Reset ukladu strony: usun padding naglowka (affix) i chrome, zeby porownanie
       zaczynalo sie od gory bez pustej przestrzeni */
    html, body {padding: 0 !important; margin: 0 !important; height: auto !important; background: #fff !important;}
    header, .top-header, footer, .breadcrumb, .breadcrumbs, .cookie, .cookies, .cookie-box, .cookie-bar, .newsletter-popup, .jconfirm, .Zebra_Tooltip,
    .website-top-banners, .b2b-switch-bar, .slider-supbages, section:has(.slider-supbages), .categories-menu {display: none !important;}
    .product-comparison {position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important;}
    .product-comparison .container {width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;}
    .product-comparison h1 {margin: 0 0 8px 0 !important;}
    .product-comparison .comparison-controls,
    .product-comparison .comparison-share,
    .product-comparison .compare-categories,
    .product-comparison .control,
    .product-comparison .list-prod .remove {display: none !important;}
    .product-comparison .comparison-box,
    .product-comparison .compare-list .list-col.col-products {overflow: visible !important;}
    /* Slider off: wszystkie produkty widoczne i rozlozone na szerokosc strony */
    .product-comparison .compare-list .list-col.col-products .slider-box {margin-left: 0 !important; width: 100% !important; display: flex !important; flex: 1 1 auto !important;}
    .product-comparison .compare-list .list-col.col-products .list-prod {width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; box-sizing: border-box; word-break: break-word; opacity: 1 !important; visibility: visible !important;}
    .product-comparison .compare-list .list-col.col-names {width: 130px !important; flex-shrink: 0 !important;}
    .product-comparison .compare-list .list-col img {width: auto !important; max-width: 100% !important; max-height: 90px;}
    /* Kazda kategoria widoczna i w normalnym przeplywie (nie absolute/opacity:0) */
    .product-comparison .compare-category-box {display: block !important; position: static !important; opacity: 1 !important; z-index: auto !important; left: auto !important; top: auto !important;}
    .product-comparison .compare-category-box + .compare-category-box {page-break-before: always;}
    .product-comparison .list-prod {font-size: 10px;}
    /* Mniejsza czcionka: lewa kolumna (nazwy parametrow), nazwa produktu, cena */
    .product-comparison .compare-list .list-col.col-names p {font-size: 9px !important; line-height: 12px !important; margin: 0 !important;}
    .product-comparison .list-prod h2, .product-comparison .list-prod h2 a {font-size: 9px !important; line-height: 12px !important;}
    .product-comparison .list-prod .price-box p, .product-comparison .list-prod .price, .product-comparison .list-prod .special-price, .product-comparison .list-prod .price .amount {font-size: 9px !important; line-height: 12px !important;}
    .product-comparison .list-row {page-break-inside: avoid;}
    .product-comparison.compare-diff .list-prod[class*="diff-val-"] {-webkit-print-color-adjust: exact; print-color-adjust: exact;}
    @page {size: landscape; margin: 10mm;}
}

/* ---------------------------------------------------------------------------
   Strona 404 - wyszukiwarka i linki do kategorii (uzupelnienie stylow)
   --------------------------------------------------------------------------- */
.error-404 h1 {font-size: 32px; font-weight: 700; margin-bottom: 20px; color: #231f20;}

.error-404-search {display: flex; max-width: 520px; margin: 0 auto 35px; gap: 8px;}
.error-404-search input {flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 18px; font-size: 16px; color: #231f20; background: #fff; border: 2px solid #e4e4e4; border-radius: 5px; outline: none; transition: border-color .3s;}
.error-404-search input:focus {border-color: #f58220;}
.error-404-search input::placeholder {color: #666666;}
.error-404-search button {flex: 0 0 auto; height: 48px; padding: 0 26px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: #212121; background: #f58220; border: 2px solid #f58220; border-radius: 5px; cursor: pointer; transition: all .3s;}
.error-404-search button:hover {background: #fff; color: #b35a00;}

.error-404-cats {margin: 0 auto 10px; max-width: 700px;}
.error-404-cats .error-404-cats-title {font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b6b6b; margin: 0 0 14px;}
.error-404-cats ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.error-404-cats li {margin: 0;}
.error-404-cats a {display: inline-block; padding: 9px 18px; font-size: 15px; font-weight: 600; color: #231f20; background: #f6f6f6; border: 1px solid #e4e4e4; border-radius: 30px; text-decoration: none; transition: all .3s;}
.error-404-cats a:hover {color: #212121; background: #f58220; border-color: #f58220;}

@media (max-width: 768px) {
    .error-404-search {flex-direction: column; max-width: 360px;}
    .error-404-cats a {padding: 8px 14px; font-size: 14px;}
}

/* ---------------------------------------------------------------------------
   Naglowek: przycisk "ZALOGUJ SIE" nie moze sie zawijac (jak koszyk) - inaczej
   na ~1366-1440px "SIE" spada ponizej przycisku i nachodzi na menu kategorii.
   --------------------------------------------------------------------------- */
.middle-box .user-box .user-link {white-space: nowrap;}

/* Waskie desktopy (1261-1440px): mniejszy padding/gap, by przyciski zmiescily sie w linii */
@media all and (min-width: 1261px) and (max-width: 1440px) {
    .middle-box .user-box .user-link {padding-left: 32px; padding-right: 12px;}
    .middle-box .user-box .user-link svg {left: 7px;}
    .middle-box .user-box .header-basket {margin-left: 10px;}
    .middle-box .user-box .header-basket .icon-box {padding-left: 32px;}
}

/* ---------------------------------------------------------------------------
   Skip-link "Przejdz do tresci" - pierwszy w kolejnosci Tab, ukryty do momentu
   sfokusowania (a11y: pomijanie nawigacji).
   --------------------------------------------------------------------------- */
.skip-link {position: absolute; left: 8px; top: -60px; z-index: 100000; padding: 10px 18px; background: #f58220; color: #212121; font-size: 15px; line-height: 1.2; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px; transition: top .2s ease;}
.skip-link:focus {top: 0; outline: 3px solid #231f20; outline-offset: 2px;}
#main:focus {outline: none;}
#main {scroll-margin-top: 20px;}

/* ---------------------------------------------------------------------------
   Menu mobilne: linki z gornego paska (Producenci, Serwis Apple, Kontakt,
   Nowosci, Super ceny, Promocje, Wyprzedaz) mialy jasnoszary #787878 i wygladaly
   na wylaczone. Podnosimy kontrast do poziomu pozostalych pozycji menu (#231f20).
   --------------------------------------------------------------------------- */
.main-menu .menu.menu-top ul>li>a {color: #231f20;}

/* ---------------------------------------------------------------------------
   Koszyk (/zamowienie): sekcja zgod - czcionka mniejsza o 40%.
   Bazowo obowiazuje '.basket .field label' = 17px/26px, wiec 60% z tego
   daje 10.2px/15.6px.
   --------------------------------------------------------------------------- */
.basket .agreements-section {font-size: 10.2px; line-height: 15.6px;}
.basket .agreements-section .field label {font-size: 10.2px; line-height: 15.6px;}

/* ---------------------------------------------------------------------------
   H1 stron CMS (szablon1/szablon2). Tytuly blokow tresci to <h2>, wiec strony
   takie jak glowna, polityka prywatnosci czy kontakt nie mialy zadnego <h1>.
   Naglowek ukrywamy wizualnie (metoda "sr-only"), zeby nie dublowac widocznego
   tytulu sekcji - celowo NIE display:none, bo to usunieloby go z drzewa
   dostepnosci i pozbawilo wartosci dla czytnikow ekranu i wyszukiwarek.
   --------------------------------------------------------------------------- */
.page-main-heading {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;}

/* ---------------------------------------------------------------------------
   WCAG 1.4.1 (axe: link-in-text-block) - linki w blokach tekstu musza byc
   rozroznialne inaczej niz samym kolorem. Globalna regula 'a {text-decoration:none}'
   zdejmowala podkreslenie wszedzie, wiec w tresci artykulow i stron CMS o linku
   informowal wylacznie pomaranczowy kolor.
   Podkreslamy TYLKO tresc redakcyjna - nawigacja, przyciski i kafelki produktow
   zostaja bez zmian (tam linki nie sa osadzone w akapitach).
   --------------------------------------------------------------------------- */
.wyswig a,
.news-single .content a,
.promo-single .content a,
.category-single .category-box .description a,
.product-description-content a {text-decoration: underline;}
.wyswig a:hover,
.news-single .content a:hover,
.promo-single .content a:hover,
.category-single .category-box .description a:hover,
.product-description-content a:hover {text-decoration: underline;}

/* Kolor linkow w tresci redakcyjnej - jedno miejsce dla wszystkich piatki sekcji.
   Wczesniej podkreslenie WCAG 1.4.1 (powyzej) dostawaly cztery selektory, ale kolor
   byl ustawiany osobno i tylko dla dwoch z nich, wiec opis promocji, artykul i opis
   produktu zostawaly na domyslnych linkach przegladarki - niebieskich, a po
   odwiedzeniu fioletowych. Globalna regula z linii 6 zdejmuje podkreslenie wszedzie,
   wiec bez koloru nie odrozniały sie one od zwyklego, nieostylowanego HTML-a.
   Link jest czarny jak tekst wokol niego, a kolor akcentu pojawia sie dopiero na
   hover; o tym, ze to link, informuje podkreslenie. */
.wyswig a,
.promo-single .content a,
.news-single .content a,
.category-single .category-box .description a,
.product-description-content a {color: #000;}
.wyswig a:hover,
.promo-single .content a:hover,
.news-single .content a:hover,
.category-single .category-box .description a:hover,
.product-description-content a:hover {color: #b35a00;}

/* ---------------------------------------------------------------------------
   Przepelnienie poziome na mobile (360 px) w tresci redakcyjnej.
   Strony prawne (polityka prywatnosci, regulamin) zawieraja tabele z komorkami
   o sztywnych szerokosciach w px (np. 198+217+219), ktore rozpychaly layout.
   Zamiast lamac uklad tabeli - pozwalamy jej przewijac sie poziomo WEWNATRZ
   swojego kontenera, wiec strona przestaje sie rozjezdzac.
   Swiadomie NIE stosujemy overflow-x:hidden na body - to ukrywa objaw, a przy
   okazji psuje position:sticky (naglowek affix) i przewijanie do kotwic.
   --------------------------------------------------------------------------- */
.wyswig table,
.news-single .content table,
.product-description-content table {display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}

/* Dlugie nieprzelamywalne ciagi (adresy URL, kody) nie moga rozpychac layoutu */
.wyswig,
.news-single .content,
.product-description-content {overflow-wrap: break-word; word-wrap: break-word;}

/* ---------------------------------------------------------------------------
   Tresc WYSIWYG (opisy produktow, artykuly, strony CMS) bywa wklejana z edytora
   ze sztywnymi wymiarami w px, np. <img style="width:1907px;height:340px">.
   Globalne 'img {max-width:100%}' przycina szerokosc, ale INLINE 'height' wygrywa
   z arkuszowym 'height:auto' - obraz zostaje z narzucona wysokoscia i jest
   zniekształcony (na 360 px szerokosc spada do ~330 px, a wysokosc trzyma 340 px).
   Wymuszamy proporcje i twardy limit szerokosci takze dla iframe/video.
   --------------------------------------------------------------------------- */
.product-single .description img,
.wyswig img,
.news-single .content img {height: auto !important;}
.product-single .description iframe,
.product-single .description video,
.wyswig iframe,
.wyswig video,
.news-single .content iframe,
.news-single .content video {max-width: 100% !important;}

/* ---------------------------------------------------------------------------
   Waski desktop 1261-1560 px: szerszy boks uzytkownika (20% -> 25%),
   zeby przyciski logowania i koszyka mialy wiecej miejsca.
   Start od 1261px, bo do 1260px wlacznie dziala regula 'max-width:1260px'
   (tryb tylko-ikona, user-box width:auto) - dzieki temu zakresy sie nie nakladaja.
   --------------------------------------------------------------------------- */
@media all and (min-width: 1261px) and (max-width: 1560px) {
    .middle-box .user-box {width: 25%;}
}

/* ---------------------------------------------------------------------------
   Roboto - self-hosted (Apache License 2.0), font zmienny, podzestawy latin + latin-ext.
   Zastepuje fonts.googleapis.com / fonts.gstatic.com: przegladarka nie wysyla juz
   adresu IP uzytkownika do Google przed wyrazeniem zgody na cookies (RODO).
   Przy okazji znika trzecia strona ze sciezki krytycznej renderowania.
   Dwa pliki wystarczaja dla wag 400/500/700/900 - Roboto jest fontem zmiennym.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/roboto/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/roboto/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Ograniczenie ruchu (WCAG 2.3.3 Animation from Interactions)
   Uzytkownik z ustawieniem systemowym "ogranicz ruch" (Windows: Ustawienia >
   Ulatwienia dostepu > Efekty wizualne; macOS/iOS: Reduce Motion; Android:
   Usun animacje) dostaje interfejs bez animacji. Dotyczy m.in. osob
   z zaburzeniami przedsionkowymi, migrenami i padaczka swiatloczula.

   Czas 0.01ms zamiast 0s jest celowy: zerowy czas trwania sprawia, ze
   przegladarka moze nie wyemitowac zdarzen transitionend / animationend,
   a slick, jquery-confirm i tiolightbox opieraja na nich swoja logike -
   ich callbacki nigdy by sie nie wykonaly i elementy zostalyby zablokowane
   w stanie posrednim. 0.01ms jest niewidoczne dla oka, a zdarzenia leca.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* Konto klienta - przycisk i podpowiedz pobierania danych z GUS (dane firmowe).
   Te same style co w koszyku, tylko inny kontener i klasa przycisku. */
.registration-form .field.company-nip-field .gus-row {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 0 0;}
.registration-form .field.company-nip-field .gus-fetch-btn-account {display: inline-block; flex-shrink: 0; padding: 8px 16px; background: #f58220; color: #212121; border: none; border-radius: 5px; font-size: 13px; line-height: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer; outline: none; box-shadow: none; transition: background .3s; white-space: nowrap;}
.registration-form .field.company-nip-field .gus-fetch-btn-account:hover {background: #000;}
.registration-form .field.company-nip-field .gus-hint {margin: 0; font-size: 13px; line-height: 18px; color: #6b6b6b;}

/* Zapisane koszyki (listy zakupowe) - funkcja kont hurtowych. Ten sam widok renderuje sie
   w oknie modalnym koszyka i w zakladce panelu klienta, wiec style nie zakladaja kontenera. */
/* Akcje list zakupowych stoja w jednym rzedzie z "Wyczysc koszyk", wiec musza miec ten sam
   rozmiar, kolor i odstep od dolu - inaczej wygladaja na nieaktywne i sa przesuniete w pionie
   (naglowek to flex z align-items: flex-end, a .clear-basket ma wlasny margin-bottom). */
.basket .basket-products .header .save-basket,
.basket .basket-products .header .saved-baskets-open {display: inline-flex; align-items: center; gap: 6px; margin: 0 0 15px 20px; color: #000; font-size: 17px; line-height: 20px;}
/* Wszystkie trzy akcje naglowka reaguja tak samo. .clear-basket nie mial dotad zadnego
   hoveru, a jego ikona ma jawnie ustawiony stroke, wiec sam kolor tekstu by nie wystarczyl. */
.basket .basket-products .header .clear-basket:hover,
.basket .basket-products .header .save-basket:hover,
.basket .basket-products .header .saved-baskets-open:hover {color: #b35a00;}
.basket .basket-products .header .clear-basket:hover svg {stroke: #f58120;}
.basket .basket-products .header .save-basket svg,
.basket .basket-products .header .saved-baskets-open svg {width: 20px; height: 20px; flex-shrink: 0;}
.saved-baskets .saved-basket {border: 1px solid #e1e1e1; border-radius: 8px; padding: 15px; margin-bottom: 15px;}
.saved-baskets .saved-basket-head {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;}
.saved-baskets .saved-basket-title {display: flex; align-items: center; gap: 8px;}
.saved-baskets .saved-basket-title[role="button"] {cursor: pointer;}
.saved-baskets .saved-basket-title[role="button"]:hover b {color: #b35a00;}
.saved-baskets .saved-basket-title[role="button"]:focus-visible {outline: 2px solid #f58120; outline-offset: 2px; border-radius: 4px;}
.saved-baskets .saved-basket-title b {display: block; font-size: 16px;}
.saved-baskets .saved-basket-meta {color: #7a7f85; font-size: 13px;}
/* Strzalka pokazuje kierunek: w dol = mozna rozwinac, w gore = rozwiniete. */
.saved-baskets .saved-basket-caret {width: 18px; height: 18px; flex-shrink: 0; color: #7a7f85; transition: transform .2s;}
.saved-baskets .saved-basket.collapsed .saved-basket-caret {transform: rotate(-90deg);}
.saved-baskets .saved-basket.collapsed .saved-basket-products {display: none;}
/* Po zwinieciu podsumowanie przylega do naglowka, wiec gorna kreska bylaby zdublowana. */
.saved-baskets .saved-basket.collapsed .saved-basket-total {margin-top: 10px;}
.saved-baskets .saved-basket-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 12px;}
.saved-baskets .saved-basket-actions a {color: #7a7f85; font-size: 14px;}
.saved-baskets .saved-basket-actions a:hover {color: #f18700;}
/* Akcja glowna musi wygladac jak przycisk. W projekcie nie ma globalnej definicji .btn -
   sa tylko kontekstowe (koszyk, porownywarka), wiec sama klasa .btn dawala tu biale litery
   bez tla, czyli tekst niewidoczny do momentu najechania. */
.saved-baskets .saved-basket-actions .saved-basket-load,
.saved-baskets .saved-basket-actions .saved-basket-load:hover {background: #f58120; color: #212121; padding: 8px 14px; border-radius: 5px; font-weight: 700; white-space: nowrap;}
.saved-baskets .saved-basket-actions .saved-basket-load:hover {background: #d96f14;}
.saved-baskets .saved-basket-products {margin-top: 12px; border-top: 1px solid #e1e1e1; padding-top: 4px;}
.saved-baskets .saved-basket-product {display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #f0f0f0;}
.saved-baskets .saved-basket-product:last-child {border-bottom: none;}
.saved-baskets .saved-basket-product .name {flex: 1 1 auto; line-height: 20px;}
/* Nazwy produktow to zwykle <a> - bez tego dostaja domyslny niebieski przegladarki,
   a po odwiedzeniu fiolet. W sklepie linki tresciowe sa czarne z pomaranczowym hoverem. */
.saved-baskets .saved-basket-product .name > a {color: #000;}
.saved-baskets .saved-basket-product .name > a:hover {color: #b35a00;}
.saved-baskets .saved-basket-product .quantity {width: 90px; flex-shrink: 0; text-align: center; color: #7a7f85; line-height: 20px;}
.saved-baskets .saved-basket-product .value {width: 130px; flex-shrink: 0; text-align: right; font-weight: 600; line-height: 20px;}
.saved-baskets .saved-basket-product.unavailable .name > a,
.saved-baskets .saved-basket-product.unavailable .name > a:hover {color: #7a7f85;}
.saved-baskets .saved-basket-unavailable {color: #d32718; font-size: 13px; margin: 2px 0 0;}
.saved-baskets .saved-basket-product .extra-charge {color: #7a7f85; font-size: 13px; margin: 2px 0 0;}
.saved-baskets .saved-basket-total {text-align: right; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e1e1;}
.saved-baskets .saved-baskets-empty,
.saved-baskets .saved-baskets-limit {color: #7a7f85; font-size: 14px;}
.saved-basket-form label {display: block; margin-bottom: 5px; color: #6b6b6b; font-size: 14px;}
/* Te same wartosci co pola w pozostalych oknach modalnych (.jconfirm-content form .field-box
   input). Tamten selektor wymaga struktury form > .field-box, ktorej to okno nie ma, wiec
   input zostawal z domyslna ramka przegladarki - gruba i obca reszcie sklepu. */
.saved-basket-form .saved-basket-name {width: 100%; height: 40px; padding: 5px 10px; font-size: 14px; line-height: 20px; border-radius: 4px; border: 1px solid #e1e1e1; color: #000; outline: none; box-shadow: none;}
.saved-basket-form .saved-basket-name:focus {border-color: #f58120;}
.saved-basket-form .saved-basket-hint {color: #7a7f85; font-size: 13px; margin: 8px 0 0;}
/* Na waskim ekranie .clear-basket schodzi do 14px i mniejszego odstepu - akcje list ida
   za nim, a naglowek zawija sie na kilka linii. */
@media (max-width: 768px) {
    .basket .basket-products .header {flex-wrap: wrap;}
    .basket .basket-products .header .save-basket,
    .basket .basket-products .header .saved-baskets-open {margin: 0 0 5px 15px; font-size: 14px; line-height: 18px;}
    .basket .basket-products .header .save-basket svg,
    .basket .basket-products .header .saved-baskets-open svg {width: 16px; height: 16px;}
}
@media (max-width: 640px) {
    .saved-baskets .saved-basket-head {flex-direction: column; align-items: flex-start;}
    .saved-baskets .saved-basket-product {flex-wrap: wrap;}
    .saved-baskets .saved-basket-product .quantity,
    .saved-baskets .saved-basket-product .value {width: auto; text-align: left;}
}

/* Pasek dla hurtownika, ktory wrocil na domene podstawowa. Przekierowanie na wersje B2B
   dziala tylko przy logowaniu, wiec to jedyna droga powrotna widoczna w interfejsie. */
.b2b-switch-bar {background: #2b2b2b; color: #fff; font-size: 13px; line-height: 1.4;}
.b2b-switch-bar .container {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 15px;}
.b2b-switch-bar .b2b-switch-info {color: #d6d6d6;}
.b2b-switch-bar .b2b-switch-link {display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: underline;}
.b2b-switch-bar .b2b-switch-link:hover {color: #f18700;}
.b2b-switch-bar .b2b-switch-link svg {flex-shrink: 0;}
@media (max-width: 640px) {
    .b2b-switch-bar {font-size: 12px;}
    .b2b-switch-bar .container {flex-direction: column; gap: 4px; text-align: center;}
}
/* Odnosnik do warunkow kredytu ratalnego przy metodzie platnosci */
.basket .payment-box .payment .payment-info {display: inline-flex; align-items: center; margin-left: 6px; color: #b35a00; vertical-align: middle;}
.basket .payment-box .payment .payment-info svg {width: 16px; height: 16px;}

/* Pliki wideo produktu - sekcja pod opisem (product.php). Responsywna siatka,
   kazde wideo w ramce, na mobile jedna kolumna. */
.product-single .product-videos {margin-top: 20px;}
.product-single .product-videos .videos-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;}
.product-single .product-videos .product-video {margin: 0;}
.product-single .product-videos .product-video video {width: 100%; height: auto; display: block; background: #000; border-radius: 6px;}
.product-single .product-videos .product-video figcaption {margin-top: 6px; font-size: 14px; color: #555;}
@media (max-width: 767px) {
    .product-single .product-videos .videos-grid {grid-template-columns: 1fr;}
}

/* Strona przedsprzedazy (front) - naglowek + tresc. */
.preorder-single {padding: 30px 0;}
.preorder-single .preorder-header {font-size: 28px; line-height: 1.25; margin: 0 0 18px; color: #222;}
.preorder-single .preorder-content {font-size: 16px; line-height: 1.6; color: #444;}
.preorder-single .preorder-content img {max-width: 100%; height: auto;}
@media (max-width: 767px) {
    .preorder-single {padding: 18px 0;}
    .preorder-single .preorder-header {font-size: 22px;}
    .preorder-single .preorder-content {font-size: 15px;}
}

/* Przedsprzedaz (front) - kategorie (akordeon), karty produktow, formularz. */
.preorder-categories {margin-top: 26px;}
.preorder-cat {border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 14px; overflow: hidden; background: #fff;}
.preorder-cat-head {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; cursor: pointer; font-size: 17px; font-weight: 600; color: #222; background: #f6f7f9; user-select: none;}
.preorder-cat-head:hover {background: #eef0f3;}
.preorder-cat-head .cat-chevron {width: 11px; height: 11px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; margin-right: 4px;}
.preorder-cat-body {display: none; padding: 16px 16px 6px;}
.preorder-cat-toggle:checked ~ .preorder-cat-body {display: block;}
.preorder-cat-toggle:checked ~ .preorder-cat-head .cat-chevron {transform: rotate(-135deg);}
.preorder-product .product-info .p-code {font-size: 14px; font-weight: 600; color: #333; margin: 3px 0 7px; word-break: break-word;}
/* Karta przedsprzedazy: rowna wysokosc boxow + ilosc (preorder-qty) na dole. */
.preorder-products-grid {align-items: stretch;}
.preorder-products-grid .preorder-product {display: flex;}
.preorder-product .product-box-cont {display: flex; flex-direction: column; width: 100%; height: auto;}
.preorder-product .product-info {display: flex; flex-direction: column; flex: 1 1 auto;}
.preorder-product .product-info .preorder-qty {margin-top: auto;}
.preorder-qty {margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.preorder-qty > label {font-size: 13px; color: #555; margin: 0;}
.qty-stepper {display: inline-flex; align-items: stretch; border: 1px solid #ccc; border-radius: 6px; overflow: hidden;}
.qty-stepper .qty-btn {width: 40px; border: none; background: #f58220; color: #212121; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; padding: 0;}
.qty-stepper .qty-btn:hover {background: #d9720f;}
.qty-stepper input {width: 60px; padding: 8px 4px; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; font-size: 16px; font-weight: 600; -moz-appearance: textfield;}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.preorder-contact {margin-top: 30px; padding: 22px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafbfc;}
.preorder-contact-head {margin: 0 0 16px; font-size: 20px; color: #222;}
.preorder-fields {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.preorder-fields .field {display: flex; flex-direction: column; gap: 5px;}
.preorder-fields label {font-size: 13px; color: #555;}
.preorder-fields input {padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; box-sizing: border-box;}
.preorder-consents {margin-top: 16px; display: flex; flex-direction: column; gap: 10px;}
.preorder-consents .consent {display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #555; line-height: 1.45; cursor: pointer;}
.preorder-consents .consent input {margin-top: 2px; flex-shrink: 0;}
.preorder-fields .req, .preorder-consents .req, .preorder-required-note .req {color: #d33;}
.preorder-submit-box {margin-top: 22px; text-align: center;}
.preorder-submit {display: inline-block; background: #000; color: #fff; text-transform: uppercase; font-size: 15px; font-weight: 700; line-height: 22px; border: none; border-radius: 4px; padding: 13px 44px; cursor: pointer; transition: background-color .2s ease;}
.preorder-submit:hover {background: #333;}
@media (max-width: 767px) {
    .preorder-cat-head {font-size: 15px; padding: 13px 14px;}
    .preorder-fields {grid-template-columns: 1fr;}
    .preorder-contact {padding: 16px;}
}

/* Przedsprzedaz (front): "Wybierz produkty z kategorii:" czarne, sama nazwa w kolorze marki. */
.preorder-cat-head .cat-title {color: #222;}
.preorder-cat-head .cat-title b {color: #b35a00;}

/* Przedsprzedaz (front): cena aktualna pogrubiona, sugerowana cena producenta przekreslona. */
.preorder-product .price-box .price {font-weight: 700;}
.preorder-product .price-box .old-price {text-decoration: line-through; font-weight: 400; color: #666666;}
/* Przedsprzedaz (front): mniejszy odstep miedzy cenami, odstep najnizszej ceny od dolu (nad iloscia). */
.preorder-product .price-box .price, .preorder-product .price-box .old-price {margin: 0; line-height: 1.35;}
.preorder-product .history-price {margin-top: 6px; margin-bottom: 24px;}
/* Minimalny odstep ilosci od tresci powyzej (gdy karta wypelniona i margin-top:auto=0). */
.preorder-product .product-info .preorder-qty {padding-top: 10px;}

/* Przedsprzedaz (front): dopisek o polach wymaganych pod zgodami. */
.preorder-required-note {margin-top: 12px; font-size: 12px; color: #777;}

/* Przedsprzedaz (front): odnosnik w zgodzie (np. polityka prywatnosci) w kolorze marki. */
.preorder-consents .consent a {color: #b35a00; text-decoration: none;}
.preorder-consents .consent a:hover {color: #d9720f;}

/* Przedsprzedaz (front): komunikat walidacji formularza. */
.preorder-error {margin-top: 16px; padding: 12px 16px; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 6px; color: #b02a37; font-size: 14px;}

/* Przedsprzedaz (front): pole uwag + komunikaty po wyslaniu/potwierdzeniu. */
.preorder-notes {margin-top: 14px; display: flex; flex-direction: column; gap: 5px;}
.preorder-notes label {font-size: 13px; color: #555;}
.preorder-notes textarea {padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; box-sizing: border-box; resize: vertical; min-height: 70px;}
.preorder-flash-success {margin: 22px 0; padding: 16px 20px; background: #e8f6ec; border: 1px solid #b6e2c3; border-radius: 8px; color: #1e7a44; font-size: 16px;}
.preorder-flash-error {margin: 16px 0; padding: 12px 16px; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 6px; color: #b02a37; font-size: 14px;}

/* Przedsprzedaz (front) - responsywnosc siatki produktow. */
@media all and (max-width: 992px) {
    .preorder-products-grid .product-box {width: 50% !important;}
}
@media all and (max-width: 600px) {
    .preorder-products-grid .product-box {width: 100% !important;}
    .preorder-product .product-info h2 {min-height: initial;}
}

/* Mobile: logo skalowane wysokoscia (nie szerokoscia), by nie nachodzilo na przycisk menu (hamburger). */
@media all and (max-width: 600px) {
    .middle-box .logo {max-height: none; overflow: visible;}
    .middle-box .logo a {width: auto; max-width: 100%;}
    .middle-box .logo a svg, .middle-box .logo a img {width: auto; height: 44px; max-width: 100%; margin-top: 0;}
    .top-header.affix .middle-box .logo a svg, .top-header.affix .middle-box .logo a img {height: 40px;}
}

/* ---------------------------------------------------------------------------
   Mobile: brak poziomego scrolla. Czesc podstron (karuzele slick liczace track
   szerszy niz ekran, pojedyncze zbyt szerokie elementy) rozpycha dokument w bok
   przy ~360 px. Przycinamy poziome przepelnienie na poziomie dokumentu:
   overflow-x:hidden jako fallback, overflow-x:clip tam, gdzie wspierany (nie
   tworzy kontenera przewijania, wiec nie psuje position:sticky ani pionowego
   scrolla). Reguly frontendowe - nie dotycza panelu admina (osobny arkusz).
   --------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
    html, body {overflow-x: hidden;}
    html, body {overflow-x: clip;}
}

/* Kontakt - trzy karty (Modules\Wyswig\Views\user\Contact).
   Siatka, nie flex: karty maja rowna wysokosc niezaleznie od dlugosci adresu,
   a przyciski trzymaja sie dolu dzieki margin-top:auto na .contact-box-actions. */
.section-contact .contact-boxes {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch;}
.section-contact .contact-box {display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 30px;}
.section-contact .contact-box-title {margin: 0 0 25px 0; text-align: center; font-size: 28px; line-height: 34px; font-weight: 700;}
.section-contact .contact-box-title span {display: block; color: #000;}
.section-contact .contact-box-title strong {display: block; color: #b35a00; font-weight: 700;}
.section-contact .contact-box-photo {margin: 0 0 25px 0; border-radius: 6px; overflow: hidden;}
.section-contact .contact-box-photo img {width: 100%; height: auto; display: block;}
.section-contact .contact-box-list {margin: 0; padding: 0; list-style: none;}
.section-contact .contact-box-list li {display: flex; align-items: flex-start; gap: 15px; margin: 0 0 22px 0;}
.section-contact .contact-box-icon {flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center;}
.section-contact .contact-box-icon svg {width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8;}
.section-contact .contact-box-label {display: block; margin: 0 0 4px 0; font-weight: 700; font-size: 15px; line-height: 22px; color: #000;}
.section-contact .contact-box-value {display: block; font-size: 15px; line-height: 26px; color: #000;}
.section-contact .contact-box-value a {color: inherit;}
.section-contact .contact-box-value a:hover {color: #b35a00;}
.section-contact .contact-box-actions {display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0 0; padding: 8px 0 0 0;}
.section-contact .contact-btn {flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 18px; text-transform: uppercase; text-align: center;}
.section-contact .contact-btn svg {flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;}
.section-contact .contact-btn-light {border: 1px solid #000; background: #fff; color: #000;}
.section-contact .contact-btn-light:hover {background: #000; color: #fff;}
.section-contact .contact-btn-primary {border: 1px solid #f58220; background: #f58220; color: #212121;}
.section-contact .contact-btn-primary:hover {filter: brightness(1.08);}
/* Napis wysrodkowany wzgledem calego przycisku, strzalka wyjeta z ukladu flex
   i przypieta do prawej - inaczej przesuwalaby tekst w lewo. */
.section-contact .contact-btn-wide {position: relative; flex: 1 1 100%; justify-content: center; padding: 16px 45px;}
.section-contact .contact-btn-wide svg {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
/* Tresc edytora jest osobna sekcja pod szarym pasem - stad odstep z paddingu,
   a nie z marginesu wewnatrz karty. Odnosnik (w projekcie druga linia naglowka,
   kierujaca do FAQ) ma byc pomaranczowy - domyslnie dziedziczyl czarny. */
.section-contact-info {padding: 45px 0 5px 0;}
/* Bez podkreslenia - wspolna regula tresci redakcyjnej dodaje je ze wzgledu na
   WCAG 1.4.1. Tutaj odnosnik jest osobna, wysrodkowana linia naglowka w kolorze
   akcentu, wiec odroznia sie od otoczenia bez kreski. */
.contact-wyswig a {color: #b35a00; text-decoration: none;}
.contact-wyswig a:hover {color: #b35a00; text-decoration: none;}

@media all and (max-width: 1024px) {
    .section-contact .contact-boxes {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .section-contact .contact-box {padding: 25px 20px;}
}
@media all and (max-width: 767px) {
    .section-contact .contact-boxes {grid-template-columns: 1fr;}
    .section-contact .contact-box-title {font-size: 24px; line-height: 30px;}
}
@media all and (max-width: 400px) {
    /* Przy waskim ekranie dwa przyciski obok siebie lamia napisy - wtedy jeden pod drugim. */
    .section-contact .contact-btn {flex: 1 1 100%;}
}

/* Strona kontaktu - ograniczona do body.page-kontakt, zeby nie ruszyc pozostalych
   podstron korzystajacych z tych samych elementow.
   Szary pas z projektu obejmuje okruszki, naglowek i karty. Kazdy z tych blokow
   dostaje tlo osobno, bo sa to trzy niezalezne elementy na pelnej szerokosci -
   razem tworza ciagly pas. */
body.page-kontakt .breadcrumbs {background: #eeeeee; margin: 0;}
body.page-kontakt .breadcrumbs .breadcrumbs-block {padding: 18px 0 4px 0;}
/* Naglowek H1 jest w tym szablonie ukryty dla czytnikow ekranu. Projekt strony
   kontaktu pokazuje go jako duzy tytul, wiec przywracamy go do ukladu. Wciecia
   licza sie z szerokosci kontenera (1600px minus 2x15px), zeby tlo bylo na pelna
   szerokosc, a tekst rownal sie z kartami. max() pilnuje marginesu na waskich
   ekranach - ujemny padding byl by odrzucony przez przegladarke. */
body.page-kontakt .page-main-heading {position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; background: #eeeeee; color: #000; font-size: 44px; line-height: 52px; font-weight: 700; text-transform: uppercase; padding: 6px max(15px, calc((100% - 1570px) / 2)) 32px;}
body.page-kontakt .section-contact {background: #eeeeee; padding: 0 0 55px 0;}
body.page-kontakt .section-contact .contact-box {border-radius: 8px; border-color: #e6e6e6;}

@media all and (max-width: 767px) {
    body.page-kontakt .page-main-heading {font-size: 30px; line-height: 38px; padding-bottom: 24px;}
    body.page-kontakt .section-contact {padding-bottom: 35px;}
}

/* Strona "O firmie" (Modules\Wyswig\Views\user\About).
   Cztery sekcje z projektu: hero na zdjeciu, historia obok tresci z edytora,
   cytat na zdjeciu i kafle z wartosciami. */
.about-hero {padding: 0; margin: 0 0 60px 0;}
/* Kafel z fotografia: zdjecie wypelnia go w calosci i biegnie pod tekstem.
   Grafika ma proporcje zblizone do kafla, wiec cover niemal jej nie przycina
   i kadrowanie moze zostac na srodku, jak w projekcie. */
.about-hero-inner {position: relative; display: flex; align-items: center; min-height: 640px; border-radius: 10px; overflow: hidden; background-color: #ededed; background-image: none; background-position: center center; background-size: cover; background-repeat: no-repeat;}
.about-hero-nophoto {background-color: #1c1c1c;}
/* Panel jest przyciemnieniem zdjecia, a nie osobnym blokiem - stad gradient
   wygaszajacy sie w prawo, jak w projekcie. */
/* Rozjasnienie lewej strony jest WYPALONE w samej grafice (tak przychodzi z projektu),
   wiec CSS nie doklada juz drugiego welonu - dwa gradienty na sobie robily z lewej
   polowy kafla plama bieli. ::before zostaje pusty, bo wersja mobilna nadal go uzywa:
   tam tekst idzie przez cala szerokosc i potrzebuje plaskiego przyciemnienia, ktorego
   poziomy gradient w grafice nie zapewnia. */
.about-hero-inner:not(.about-hero-nophoto)::before {content: ''; position: absolute; inset: 0; background: none;}
.about-hero-panel {position: relative; max-width: 46%; padding: 45px 40px 45px 55px;}
.about-hero-title {margin: 0 0 25px 0; font-size: 46px; line-height: 56px; font-weight: 700; color: #000;}
.about-hero-title span {display: block;}
.about-hero-lead {position: relative; margin: 0; padding: 28px 0 0 0; font-size: 17px; line-height: 26px; color: #000;}
.about-hero-lead::before {content: ''; position: absolute; left: 0; top: 0; width: 90px; height: 4px; background: #f58220;}
.about-hero-nophoto .about-hero-title, .about-hero-nophoto .about-hero-lead {color: #fff;}

.about-main {margin: 0 0 60px 0;}
.about-columns {display: grid; grid-template-columns: 420px 1fr; gap: 55px; align-items: start;}
.about-history {background: #f4f4f4; border-radius: 8px; padding: 25px;}
.about-history-photo {margin: 0 0 30px 0; border-radius: 6px; overflow: hidden;}
.about-history-photo img {width: 100%; height: auto; display: block;}
.about-history-title {margin: 0 0 6px 0; font-size: 24px; line-height: 30px; font-weight: 700; color: #000;}
.about-history-subtitle {margin: 0 0 25px 0; font-size: 14px; line-height: 20px; color: #666666;}
/* Os czasu: kropka i pionowa kreska rysowane sa na ::before/::after elementu li,
   wiec liczba wpisow nie wymaga zadnych zmian w stylach. */
.about-timeline {margin: 0; padding: 0; list-style: none;}
.about-timeline li {position: relative; padding: 0 0 28px 26px;}
.about-timeline li::before {content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #f58220;}
.about-timeline li::after {content: ''; position: absolute; left: 5px; top: 24px; bottom: 0; width: 2px; background: #dcdcdc;}
.about-timeline li:last-child {padding-bottom: 0;}
.about-timeline li:last-child::after {display: none;}
.about-timeline-year {display: block; margin: 0 0 4px 0; font-size: 22px; line-height: 28px; font-weight: 700; color: #000;}
.about-timeline-name {display: block; margin: 0 0 8px 0; font-size: 15px; line-height: 22px; font-weight: 700; color: #000;}
.about-timeline-text {display: block; font-size: 14px; line-height: 22px; color: #555;}
.about-wyswig {font-size: 15px; line-height: 26px; color: #333;}
.about-wyswig h1, .about-wyswig h2, .about-wyswig h3 {margin: 0 0 22px 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #000;}
.about-wyswig p {margin: 0 0 18px 0;}

.about-quote {background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; padding: 70px 0; margin: 0 0 60px 0; text-align: center;}
.about-quote-nophoto {background: #1c1c1c;}
/* Przyciemnienie pod tekstem - zdjecie samo w sobie bywa zbyt jasne, zeby bialy
   napis byl czytelny. */
.about-quote::before {content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55);}
.about-quote .container {position: relative;}
.about-quote-title {margin: 0 0 30px 0; font-size: 34px; line-height: 44px; font-weight: 700;}
.about-quote-title span {display: block; color: #fff;}
.about-quote-title strong {display: block; color: #b35a00; font-weight: 700;}
.about-quote-text {max-width: 900px; margin: 0 auto 18px auto; font-size: 15px; line-height: 26px; color: #fff;}

.about-values {margin: 0 0 60px 0;}
.about-values-title {margin: 0 0 35px 0; text-align: center; font-size: 30px; line-height: 40px; font-weight: 700; color: #000;}
.about-values-title span {display: block;}
.about-values-list {display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px;}
.about-value {border: 1px solid #e6e6e6; border-radius: 8px; padding: 25px 15px; text-align: center;}
.about-value-icon {display: block; margin: 0 auto 15px auto; width: 52px; height: 52px;}
.about-value-icon svg {width: 100%; height: 100%; fill: none; stroke: #f58220; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.about-value-name {margin: 0 0 8px 0; font-size: 15px; line-height: 20px; font-weight: 700; color: #000;}
.about-value-text {margin: 0; font-size: 13px; line-height: 19px; color: #666666;}

@media all and (max-width: 1300px) {
    .about-columns {grid-template-columns: 340px 1fr; gap: 35px;}
    .about-values-list {grid-template-columns: repeat(4, 1fr);}
}
@media all and (max-width: 1024px) {
    .about-columns {grid-template-columns: 1fr; gap: 35px;}
    .about-hero-inner {min-height: 520px;}
    .about-hero-title {font-size: 34px; line-height: 44px;}
    .about-values-list {grid-template-columns: repeat(3, 1fr);}
}
@media all and (max-width: 767px) {
    /* Na waskim ekranie panel przestaje byc kolumna obok zdjecia - tlo schodzi
       pod spod, a tekst dostaje wlasne, czytelne podloze. */
    /* Przy waskim kaflu tekst zajmuje cala szerokosc, wiec welon musi przykryc
       zdjecie na calej powierzchni - inaczej napis staje sie nieczytelny. */
    .about-hero-inner {min-height: 0;}
    .about-hero-inner:not(.about-hero-nophoto)::before {background: rgba(255,255,255,.9);}
    .about-hero-panel {max-width: 100%; padding: 30px 25px;}
    .about-hero-title {font-size: 28px; line-height: 36px;}
    .about-quote-title {font-size: 24px; line-height: 32px;}
    .about-values-list {grid-template-columns: repeat(2, 1fr);}
    .about-values-title {font-size: 24px; line-height: 32px;}
}
@media all and (max-width: 500px) {
    .about-values-list {grid-template-columns: 1fr;}
}

/* Przedsprzedaz (front): zgoda na inny kolor pod iloscia - pokazywana po wybraniu ilosci > 0. */
.preorder-other-color {display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.4; color: #333; cursor: pointer;}
.preorder-other-color input {margin-top: 2px; flex-shrink: 0;}
.preorder-other-color[hidden] {display: none;}

/* Przedsprzedaz (front): "Jak szybko chcesz miec nowy iPhone?" - jedna odpowiedz, nad danymi kontaktowymi. */
.preorder-urgency {margin: 30px 0 0; padding: 22px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafbfc; min-width: 0;}
/* legend domyslnie siedzi na ramce fieldsetu - float wciaga go do srodka jak zwykly naglowek. */
.preorder-urgency-head {float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #222;}
.preorder-urgency-head .req {color: #d33;}
.preorder-urgency-option {clear: both; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-top: 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 14px; line-height: 1.45; color: #444; cursor: pointer; transition: border-color .15s, background-color .15s;}
.preorder-urgency-option:hover {border-color: #f58220;}
.preorder-urgency-option:has(input:checked) {border-color: #f58220; background: #fff7ef;}
.preorder-urgency-option input {margin-top: 3px; flex-shrink: 0; accent-color: #f58220;}
.preorder-urgency-option b {color: #222;}
.preorder-urgency + .preorder-contact {margin-top: 16px;}
@media (max-width: 767px) {
    .preorder-urgency {padding: 16px;}
    .preorder-urgency-head {font-size: 18px;}
}

/* Przedsprzedaz (front): klauzula informacyjna RODO zamiast wymaganej zgody na kontakt. */
.preorder-privacy-info {margin: 0; font-size: 13px; line-height: 1.45; color: #555;}
.preorder-privacy-info a {color: #b35a00; text-decoration: none;}
.preorder-privacy-info a:hover {color: #d9720f;}