@charset "UTF-8";

/*
Theme Name: WEBTEC BUSINESS v3.1
Theme URI: https://webtec.pl
Author: WEBTEC SP. Z O.O.
Author URI: https://webtec.pl
Description: Szablon graficzny dedykowany. Bez obsługi woocommerce i paneli bocznych (sidebar). Responsywny.
Requires at least: 5.7
Tested up to: 5.7
Requires PHP: 7.4
Version: 0.1
License: Pivate WEBTEC
Text Domain: webtec-business
Tags: one-column, accessibility-ready, custom-menu, custom-logo, footer-widgets, rtl-language-support, threaded-comments, translation-ready
*/

/* zmienne import */
@import url('assets/css/var.css');

/* RESETOWANIE STYLI DOMYŚLNYCH BY mYAER - TO WYMAGA SPRAWDZENIA jeszcze czy coś się nie wykrzacza
i potem do scalenia z moimi stylamia resetowania co sa niżej */
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
} */
/* remember to define focus styles! */
/* :focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
} */
/* tables still need 'cellspacing="0"' in the markup */
/* table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
} */
/* KONIEC RESETOWANIA */

/* WYZEROWANIE STYLI DOMYŚLNYCH */
html, body{
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #fff;
}

html{
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5{
    margin: 0;
    padding: 0;
}

h1{ font-size: 2.14rem; font-weight: 300; }
h2{ font-size: 1.8rem; font-weight: 300; }
h3{ font-size: 1.6rem; }
h4{ font-size: 1.4rem; font-weight: 300;}
h5{ font-size: 1.2rem; }

a{
    color: var(--default-color-link-content-href);
    text-decoration: none;
    transition: .3s;
}

a:hover{
    color: var(--default-color-link-content-href-hover);
}

/* GRID MAIN DOCUMENT */

/* top header - logo, menu, social, wyszukiwrka, iko sklep */
header#wbt-top-bar{
    width: var(--full-container-width);
    box-shadow: 0px 0px 4px 0px rgba(80, 80, 80, 0.23);
    background-color: var(--menu-background-color);
    /* jeżeli menu z logo przyklejone to aktywne poniższe style */
    position: fixed;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 13;
}

nav#wbt-main-menu{
    width: var(--container-top-width);
    margin: var(--container-align);
    display: flex;
    align-items: center;
}
/* kontenery z treścią */
#wbt-content, #wbt-content-search, #wbt-woocomerc-main{
    width: var(--container-width);
    margin: var(--container-align);
    padding-top: var(--move-content-from-top-menu);
    display: flex;
}

#wbt-text-content, #wbt-search-section, #wbt-woocommerce-content{
    width: 100%;
    order: 2; /* dotyczy sidebar po lewej stronie jak ustawimy jak niżej*/
}

aside#wbt-sidebar{
    min-width: 19.5%; /*23.5% - 4%pading suma = 19.5% */
    max-width: 19.5%; /*23.5% - 4%pading suma = 19.5%  - zabezpieczenie jak wstawi się duże zdjęcie do widgetu aby go nie rozszerzył /*
    /* margin-left: 2%; */
    padding: 2%;
    background-color: var(--sidebar-color-background);
    /*
    ustawiając tutaj jedynkę oraz dla treści 2 - przesuwamy sidebar na lewą stronę autoamtycznie oraz zmieniając margin na ten
     */
    margin-right: 2%;
    order: 1;
}
aside#wbt-sidebar.wbt-sidebar-hidden{
    display: var(--hidden-sidebar-for-woo-product);
}

/* Wyłączanie filtra dla RWD - ukrycie w widoku na PC */
aside#wbt-sidebar #wbt-close-filtr{
    display: none;
}

footer#wbt-footer-widget, #wbt-signature{
    width: var(--container-width);
    margin: 3% auto 0 auto;
}

/* LOGO */
#wbt-logo{
    margin-right: 2%;
}

#wbt-logo a > img{
    height: var(--max-height-img-logo-top);
    max-width: 307px;
    width: auto;
    padding: 0.5rem 0;
    transition: 0.5s;
}

.wbt-scroll #wbt-logo a > img{
    height: calc(var(--max-height-img-logo-top) * 0.7);
    width: auto;
}

/* MENU */
.menu-main-menu-container{
    width: 100%;
    margin-right: 2%;
    z-index: 11;
}

#menu-main-menu{
    display: flex;
    justify-content: var(--main-menu-aling-vertical-pc);
    align-items: center;
    gap: 10px;
}
ul#menu-main-menu,
#menu-main-menu ul{
    list-style: none;
    margin: 0;
    padding: var(--submenu-space-from-top-pc-menu) 0 0 0;
}
#menu-main-menu ul{
    z-index: 12;
}

#menu-main-menu li{
    position: relative;
}

#menu-main-menu li a{
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

#menu-main-menu li ul.sub-menu li a{
    margin-top: var(--submenu-space-top-right-between-a-elements);
    margin-right: var(--submenu-space-top-right-between-a-elements);
}

/* strzałeczka informująca że menu na sub-menu */
#menu-main-menu li.menu-item-has-children a{
    padding-right: 42px; /*to jest = padding right wyżej użyte dla a + 2 x szerokość ikonki v ::after*/
}


#menu-main-menu li.menu-item-has-children:after{
    content:'';
    display: block;
    position: absolute;
    right: 22px;
    top: 47%;
    width: 11px;
    height: 6px;
    background:url('assets/img/arrow-bottom.svg') center no-repeat;
    transition: 0.3s;
}

#menu-main-menu li ul li.menu-item-has-children:hover::after{
    transform: rotateZ(-90deg);
}

/* przesunięcie strzałki gdyż jest element pozycjonowany absoul - przesunięcie o pozycję right w sekcji wyżej */
#menu-main-menu li ul.sub-menu li.menu-item-has-children:after{
    right: calc( 22px + var(--submenu-space-top-right-between-a-elements) );
}


/*  DEFAULT COLOR MENU & FONT */

/* Level 1 */
#menu-main-menu li a{
    color: var(--menu-text-level-1);
    background-color: var(--menu-background-level-1);
    outline: var(--menu-outline-level-1);
    transition: 0.5s;
    text-transform: var(--menu-text-transform-level-1);
}

#menu-main-menu li a::after{
    content: '';
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    height: 1px;
    background-color: #000;
    transition: 0.5s;
}

#menu-main-menu li a:hover::after{
    content: '';
    width: 100%;
    display: inline-block;
    height: 1px;
    background-color: #000;
}

/* href, current, parent */
#menu-main-menu li a:hover,
#menu-main-menu li.current-menu-item a,
#menu-main-menu li.current-menu-parent a
{
    color: var(--menu-text-hover-curent-parent-level-1);
    background-color: var(--menu-background-hover-curent-parent-level-1);
    outline: var(--menu-outline-hover-curent-parent-level-1);
}
/* curen - jak jest after aktywny oznaczający current page inaczej aktualnie oglądaną - inaczej to deaktywuje i to niże z ::after*/
#menu-main-menu li > a,
#menu-main-menu li > a:hover,
#menu-main-menu li.current-menu-item a,
#menu-main-menu li.current-menu-parent a
{
    outline: none; /* wyłączam to aby ładniej after się pokazywał*/
}

#menu-main-menu li.current-menu-item > a::after,
#menu-main-menu li.current-menu-parent > a::after,
#menu-main-menu li ul.sub-menu li > a:hover::after{
    width: calc(100% - var(--submenu-space-top-right-between-a-elements) );
}

/* Level 2 */
#menu-main-menu li ul.sub-menu li a{
    color: var(--menu-text-level-2-3);
    outline: var(--menu-outline-level-2-3);
    background-color: var(--menu-background-level-2);
    transition: 0.5s;
    text-transform: var(--menu-text-transform-level-2-3);
}

/* href, current, parent */
#menu-main-menu li ul.sub-menu li a:hover,
#menu-main-menu li ul.sub-menu li.current-menu-item a,
#menu-main-menu li ul.sub-menu li.current-menu-parent a{
    color: var(--menu-text-hover-curent-parent-level-2-3);
    background-color: var(--menu-background-hover-curent-parent-level-2-3);
    outline: var(--menu-outline-hover-curent-parent-level-2-3);
}

/* Level 3 */
#menu-main-menu li ul.sub-menu li ul.sub-menu li a{
    color: var(--menu-text-level-2-3);
    outline: var(--menu-outline-level-2-3);
    background-color: var(--menu-background-level-3);
    text-transform: var(--menu-text-transform-level-2-3);
}

/* href, current, parent  */
#menu-main-menu li ul.sub-menu li ul.sub-menu li a:hover,
#menu-main-menu li ul.sub-menu li ul.sub-menu li.current-menu-item > a,
#menu-main-menu li ul.sub-menu li ul.sub-menu li.current-menu-parent > a{
    color: var(--menu-text-hover-curent-parent-level-2-3);
    background-color: var(--menu-background-hover-curent-parent-level-2-3);
    outline: var(--menu-outline-hover-curent-parent-level-2-3);
}

/* Level 2 - domyślne ukrycie i aktywacja dla hover */
#menu-main-menu li.menu-item-has-children > ul.sub-menu{
    display: none;
}

#menu-main-menu li.menu-item-has-children:hover > ul.sub-menu{
    position: absolute;
    display: block;
    width: max-content;
}

/* Level 3 - domyślne ukrycie i aktywacja dla hover */
#menu-main-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu{
    display: none;
}

#menu-main-menu li ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu{
    position: absolute;
    display: block;
    width: max-content;
    left: 100%;
    top: calc(-1 * (var(--submenu-space-top-right-between-a-elements) + var(--submenu-space-from-top-pc-menu)) );
}

/* ukrycie burgera w widoku na PC */
#wbt-rwd-main-menu{
    display: none;
}

/* SOCIAL MENU and SEARCH */
ul.social-menu,
ul#wbt-nav-addons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    list-style: none;
    padding: 0;
}

.menu-social-menu-container{
    display: flex;
    margin-left: 2rem;
}
/* bordzier odzielający sociel menu od szukaj i sklepu ikonek */
ul#wbt-nav-addons{
    border-right:solid 1px #000;
    margin-left: 2rem;
    padding-right: 2rem;
    padding-top: var(--submenu-space-from-top-pc-menu);
}

ul.social-menu li a,
ul#wbt-nav-addons li a{
    display: flex;
    height: 20px;
    width: 20px;
    font-size:10px;
}
ul.social-menu li a:not(#wbt-basket-icon),
ul#wbt-nav-addons li a:not(#wbt-basket-icon){
    font-size: 0;
}

ul.social-menu li::after,
ul#wbt-nav-addons li::after{
    content:'';
    width: 0px;
    display: block;
    position: relative;
    bottom: -10px;
    height: 1px;
    overflow: hidden;
    background-color: var(--social-underline-animate);
    transition: 0.5s;
}

ul.social-menu li:hover::after,
ul#wbt-nav-addons li:hover::after{
    width: 20px;
}
ul#wbt-nav-addons li a#wbt-search-icon{
    background:url(assets/img/ico-search.svg) center no-repeat transparent;
    cursor: pointer;
}

ul#wbt-nav-addons li a#wbt-basket-icon{
    background:url(assets/img/ico-basket.svg) center no-repeat transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul#wbt-nav-addons li a span#wbt-cart-quantity{
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    color: #000;
    margin-top:4px;
}

ul#wbt-nav-addons li#wbt-cart-total{
    margin-left: -0.8rem;
}
ul#wbt-nav-addons li#wbt-cart-total:hover::after{
    width: 0;
}

ul#wbt-nav-addons li a#wbt-user-icon{
    background:url(assets/img/ico-user.svg) center no-repeat transparent;
}

ul#wbt-nav-addons li a#wbt-search-icon{
    background:url(assets/img/ico-search.svg) center no-repeat transparent;
}

ul#wbt-nav-addons li a#wbt-search-active{
    background:url(assets/img/ico-search-active.svg) center no-repeat transparent;
}

ul.social-menu li.social-faceb{
    background:url(assets/img/ico-facebook.svg) center no-repeat transparent;
    background-size:contain;
}
ul.social-menu li.social-insta{
    background:url(assets/img/ico-instagram.svg) center no-repeat transparent;
    background-size:contain;
}
ul.social-menu li.social-yout{
    background:url(assets/img/ico-youtube.svg) center no-repeat transparent;
    background-size:contain;
}

/* Koszyk po najechaniu w TOP - info box */
#wbt-basket-info{
    position: absolute;
    top: calc( var(--move-content-from-top-menu) - 10% );
    transform: translateX(-50%);
    width: 250px;
    height: 0px;
    overflow: hidden;
    background-color: #fff;
    font-size: 1rem;
    -webkit-box-shadow: 0px 2px 12px -7px rgba(96, 96, 96, 1);
    -moz-box-shadow: 0px 2px 12px -7px rgba(96, 96, 96, 1);
    box-shadow: 0px 2px 12px -7px rgba(96, 96, 96, 1);
    transition: 0.5s;
}
#wbt-top-bar.wbt-scroll #wbt-basket-info{
    top: calc( var(--move-content-from-top-menu) - 50% );
}
/* pokazanie po najechaniu */
.wbt-nav-addons-cart:hover #wbt-basket-info{
    height: 200px;
    padding: 1rem;
}

/* nagłówek Twoj koszyk */
.wbt-basket-info-head{
    padding-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
}

/* lista UL style domyślne */
#wbt-basket-info ul{
    list-style: none;
    list-style-position: inside;
    padding: 0;
}

#wbt-basket-info ul li{
    padding: 0.5rem 0;
}

/* rozmia czcionki przycisku - pobiera z ikonek wyżej także */
#wbt-basket-info ul li > a{
    font-size: 1rem;
}

/* ukrycie after - bo ciągnie rysowanie kreseczki z ikonek wyżej */
#wbt-nav-addons #wbt-basket-info ul li::after,
#wbt-nav-addons #wbt-basket-info ul li:hover::after{
    display: none;
}

/* darmowa dostawa od - kwota */
#wbt-basket-info ul li > span.wbt-ship-amount{
    font-weight: bold;
}
/* darmowa dostawa brakuje - kwota */
#wbt-basket-info ul li > span.wbt-ship-left{
    font-weight: bold;
    color:#ff0000;
}

#wbt-basket-info input[type=range]:disabled{
    width: 100%;
}

/* 
Search - wyszukiwarka w TOP i RWD menu
 */
/* sekcja RWD menu hamburger i ico search */
#wbt-rwd-header-menu-serach{
    display: flex;
    justify-content: end;
    align-items: flex-end;
    gap: 15px;
}

#wbt-search-bar{
    /* sekcja z inputem i przyciskiem wyszukiwarki */
    height: 0;
    margin: 0em auto;
    width: var(--container-top-width);
    overflow: hidden;
    text-align: right;
    transition: 0.5s;
}

#wbt-search-bar.wbt-search-active{
    padding: 20px 0;
    position: relative;
    margin: 1em auto;
    height: auto;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
}

#wbt-search-bar form{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#wbt-search-bar form input[type="text"],
#wbt-search-bar form input[type="search"]
{
    width:100%;
    padding: 1%;
    border-width: 1px;
    border-radius: 0;
}

#wbt-search-bar form input[type="text"]:focus-visible,
#wbt-search-bar form input[type="search"]:focus-visible
{
    outline: none;
}

#wbt-search-bar form label{
    margin: 0 5%;
    font-size: 2rem;
}

#wbt-search-bar form input[type="submit"],
#wbt-search-bar form button[type="submit"]
{
    margin: 0 5%;
    background-color: var(--default-button-submit-background);
    color:var(--default-button-submit-text-color);
    border: var(--default-button-submit-border);
    outline: var(--default-button-submit-outline);
    outline-width: var(--default-button-submit-outline-width);
    transition: 0.5s;
}

#wbt-search-bar form input[type="submit"]:hover,
#wbt-search-bar form button[type="submit"]:hover
{
    background-color: var(--default-color-link-content-href);
    cursor: pointer;
}

/* wygląd wyszukiwarki ale w treści jak nic nie zjadzie w wynikach */
form.wbt-search-engine-in-content,
form.woocommerce-product-search{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

form.wbt-search-engine-in-content input[type="text"]{
    min-width:50%;
    width: auto;
}

form.wbt-search-engine-in-content label{
    display: none;
}

/* 
 BREADCRUMBS
*/
ul.wbt-breadcrumbs{
    display: var(--breadcrumbs-show);
    list-style: none;
    padding: 0;
}
/* TITLE */
/* strona home + sklep */

h1.wbt-title, h1.page-title, section.related > h2,
 /*ten nagłówek jest w Gutenberg dodany i wymaga dodania class wbt-nag*/
h2.wbt-nag,
#wbt-featured-products > h2,
section.up-sells > h2
{
    align-items: center;
    margin-bottom: 40px;
}

/* dodanie kreski wdłuż tytułu */
h1.page-title::after, h1.page-title::before, /*domyślne dla podstrona*/
h1.wbt-title::after, h1.wbt-title::before, /*strona home-startowa*/
section.related > h2::after, section.related > h2::before, /**powiązane produkty - moduł woocommerce */
h2.wbt-nag::after, h2.wbt-nag::before, /*nagłówki w treści Gutenberg dodane*/
#wbt-featured-products > h2::after, #wbt-featured-products > h2::before, /*najchętniej kupowane - dedykowany kod lib/wbt-featured-rpducts.php dla woocommerce*/
section.up-sells > h2::after, section.up-sells > h2::before /*Up Sels produkty powiązane z poziomu Panelu Woocommerce*/
{
    content: '';
    height: 1px;
    border-bottom:solid 1px #bbbbbb;
    display: block;
}
h1.page-title::after, h1.wbt-title::after, section.related > h2::after,
h2.wbt-nag::after, #wbt-featured-products > h2::after, section.up-sells > h2::after{
    margin-left: 20px;
    flex-grow: 1;
}
h1.page-title::before, h1.wbt-title::before, section.related > h2::before,
h2.wbt-nag::before, #wbt-featured-products > h2::before, section.up-sells > h2::before{
    min-width: 20px;
    margin-right: 20px;
}

/* strony home - pokaż/ukryj */
#wbt-body.home h1.wbt-title{
    display: var(--title-home-show);
}
/* podstrony pozostałe - pokaż/ukryj */
h1.wbt-title, h1.page-title{
    display: var(--title-page-show);
}

/* nagłówek w treści 2h */
h2.wbt-nag, section.related > h2, #wbt-featured-products > h2, section.up-sells > h2{
    display: flex;
}

/* 
 FOOTER - widgety
 */

/* kontener stopki jak tło pod stopką ma być na 100% ale sama treść stopki ma być w kontenerze na szerokość treści */
.wbt-container-widget{
    width:var(--full-container-width);
    background: var(--background-footer-widget);
}

footer#wbt-footer-widget{
    display: flex;
    justify-content: start;
    gap: 2%;
    row-gap: 24px;
    flex-wrap: nowrap;
}

#wbt-footer-widget > .wbt-col-footer{
    width: 100%;
    padding: 2%;
    background-color: var(--background-column-footer);

}

#wbt-footer-widget h5{
    font-weight: 600;
    margin-bottom: 1.7rem;
}

#wbt-footer-widget p{
    font-size: 0.92rem;
}

footer#wbt-footer-widget > nav{
    display: none;
}


/*
## STOPKA COPYWRIGHT & WEBTEC PODPIS ##
*/

/* kontener stopki jak tło pod stopką ma być na 100% ale sama treść stopki ma być w kontenerze na szerokość treści */
.wbt-container-signature{
    width:var(--full-container-width);
    background: var(--background-footer-signature);
}
#wbt-signature {
    margin: 0 auto;
    width: var(--container-top-width);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#wbt-signature > div{
    padding: 20px 0;
}

#wbt-signature>div:last-child>img {
    vertical-align: middle !important;
    max-width: 25px;
    margin-left: 10px;
}

/* aktywacja okna webtec po najechaniu na logo webtec */

#wbt-signature>div:last-child{
    padding-left: 50px;
}

#wbt-signature>div:last-child:hover .modalBox {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

/*
## okno z reklamą WEBTEC ##
*/

.modalBox {
    position: absolute;
    width: 420px;
    height: 90px;
    padding: 20px;
    bottom: 60px;
    right: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    visibility: hidden;
    animation: none;
    z-index: 999;
    opacity: 0;
    transition: .5s;
    transform: translateY(-50px);
}

.modalBox .modalImg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalBox .modalImg img {
    width: 40px;
    height: 40px;
}

.modalBox .modalImg p {
    color: #000;
    font-size: 13px;
    margin-left: 10px;
    margin-top: 10px;
}

.modalContent {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    width: 100%;
}

.modalContent::before {
    content: '';
    width: 100;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    position: absolute;
    top: 0px;
    z-index: 99;
}

.modalContent span {
    display: flex;
    width: 33.3%;
    justify-content: center;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.modalContent span a {
    text-decoration: none;
    color: #999;
    transition: 0.3s;
}

.modalContent span a:hover{
    color: #6d2f92;
}

.modalContent img {
    max-width: 18px;
    max-height: 18px;
    margin-right: 10px;
}

/* TABLICOWANIE POSTÓW I KOMENTARZY */
h2.screen-reader-text{
    display: none;
}

.nav-links{
    width: 100%;
    display: flex;
    flex-wrap:nowrap;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.nav-links > span.prev,
.nav-links > a.prev,
.nav-links > span.next,
.nav-links > a.next,
.nav-links > span.page-numbers,
.nav-links > a.page-numbers{
    border: var(--default-button-submit-border);
    color: var(--default-button-submit-text-color);
    background-color: var(--default-button-submit-background);
    padding: 0.5rem;
    margin-top: 2rem;
    transition: all 0.2s;
}

.nav-links > a.prev:hover,
.nav-links > a.next:hover,
.nav-links > a.page-numbers:hover{
    background-color: var(--default-color-link-content-href-hover);
    color: var(--default-button-submit-text-color);
}

.nav-links > span.page-numbers.current{
    background-color: var(--default-color-link-content-href);
}

/* KOMENARZE */
/* pokazanie lub ukrycie formualrza do komentowania wraz z komentarzami */
.wbt-comments-content{
    display: var(--show-coment);
}
/* nagłówek */
.wbt-comments-section h4{
    font-weight: 600;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: solid 1px #ccc;
}

/* formularz */
/* label nad inputmi i textarea */
#wbt-body #commentform label{
    display: block;
}
/* textarea */
#wbt-body #commentform textarea{
    width: -webkit-fill-available;
    width: -moz-available;
}

/* lista komentarzy */
ul.wbt-comments-reply-element{
    list-style: none;
    padding: 0;
}
ul.wbt-comments-reply-element li{
    padding: 1rem;
}
ul.wbt-comments-reply-element > li:nth-last-of-type(2n+1){
    background-color: #e9e9e9;
}

/* lista komentarzy-zdjęcia avatar */
ul.wbt-comments-reply-element .comment-author {
    margin: 1rem 0;
}

ul.wbt-comments-reply-element .comment-author > img{
    display: none;
}
/* użytkownik */
ul.wbt-comments-reply-element cite{
    font-size: 1.2rem;
    font-style: normal;
    background-color: var(--default-color-link-content-href);

    padding: 3px 5px;
}
ul.wbt-comments-reply-element cite > a{
    color:#fff;
}

/* data */
ul.wbt-comments-reply-element .commentmetadata a{
    font-style: italic;
    color:#838383;
}

/* STYL FORMULARZY DOMYŚLNE */

/* przyciski */
#wbt-body input[type="submit"],
#wbt-body #respond input#submit,
#wbt-body button[type="submit"],
#wbt-body input[type="button"],
#wbt-body a.button, /*dedykowany wygląd elementy a jak przycisku pozostałe - woocommerce*/
#wbt-body a.wp-block-button__link /*dedykowany wygląd elementy a jak przycisku pozostałe - wordpress*/
{
    padding: 1rem 1.2rem;
    width: fit-content;
    background-color: var(--default-button-submit-background);
    color:var(--default-button-submit-text-color);
    border: var(--default-button-submit-border);
    border-radius: 0;
    outline: var(--default-button-submit-outline);
    outline-width: var(--default-button-submit-outline-width);
    outline-offset: var(--default-button-submit-outline-ofset);
    font-weight: normal;
    text-align: center;
    line-height: normal;
    transition: 0.5s;
}
#wbt-body .wc-block-product-search__fields button[type="submit"]{
    padding: 0 10px;
}

#wbt-body a.button.wbt-back::before /*dedykowany wygląd elementy a jak przycisku pozostałe - woocommerce*/
{
    content: ' \21E0';
    margin-right: 1rem;
    width:10px;
    height: 10px;
    color: var(--default-button-submit-text-color);
}

#wbt-body input[type="submit"]:hover,
#wbt-body #respond input#submit:hover,
#wbt-body button[type="submit"]:hover,
#wbt-body input[type="button"]:hover,
#wbt-body a.button:hover,
#wbt-body a.wp-block-button__link:hover
{
    background-color: var(--default-button-submit-hover-background);
}

/* input */
#wbt-body form input,
#wbt-body form input[type="text"],
#wbt-body form input[type="checkbox"],
#wbt-body form textarea,
#wbt-body form select,
#wbt-body form span.select2-selection--single /*dedykowany woocommerce - widok select*/
{
    padding: 1rem;
    border: solid 1px #333;
    border-radius: 0;
    font-family: inherit;
    height: inherit;
    background-color: #fff;
}
/*select - dedykowany woocommerce uzupełnienie indywidualne*/
#wbt-body form span.select2-selection--single,
#wbt-body form span.select2-selection__arrow 
{
    padding-left: 0;
    padding-right: 0;
    top:20%;
}
/*select - dedykowany woocommerce kolory po najehcnaiu na liście select*/
    
/* hover */
#wbt-body .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--default-color-link-content-href-hover);
    color: var(--default-button-submit-text-color);
} 
/* selected */
#wbt-body .select2-container--default .select2-results__option[data-selected=true]{
    background-color: var(--default-color-link-content-href);
    color: var(--default-button-submit-text-color);
}


#wbt-body form input:focus-visible,
#wbt-body form input[type="checkbox"]:focus-visible,
#wbt-body form textarea:focus-visible,
#wbt-body form select:focus-visible,
#wbt-body form span.select2-selection--single:focus-visible
{
    border: solid 1px var(--default-color-link-content-href-hover);
    outline: none;
}

#wbt-body form label{
    font-size: 1rem;
}

/* BLOG - LISTA */
#et_builder_outer_content{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wbt-page-content-list{
    display: flex;
    flex-wrap: nowrap;
    gap: 2%;
    width: calc(100% - 2%);
    margin-bottom: 2%;
    border-bottom: solid 1px rgb(180, 180, 180);
}

.wbt-page-content-list > div{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}

.wbt-featured-media-list{
    min-width: 30%;
    max-width: 30%;
    height: 150px;
    margin: 0;
    position: relative;
}

.wbt-featured-media-list > img{
    height: 150px;
    width: 100%;
    object-fit: cover;
    object-position: top center;
}
.wbt-featured-media-list.wbt-nofoto{
    min-width: 30%;
    width: 100%;
    height: 150px;
    margin: 0;
    background: url(assets/img/ico-no-image.svg) center no-repeat rgb(170, 170, 170);
    background-size: 50% 50%;
    opacity: 0.1;
}

.wbt-caption-text{
    position: absolute;
    bottom: 0%;
    left: 0;
    background-color:var(--default-color-link-content-href);
    color:#fff;
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.wbt-title-list{
    margin: 0;
    width: 100%;
}
.wbt-category-links-list{
    width: 100%;
    font-style: italic;
}
.wbt-zajawka-content-list{
    width: 100%;
}

/* 
PAGE
 */
.wbt-featured-media-page{
    display: var(--show-featured-img-in-top);
    margin: 0;
}

.wbt-featured-media-page > img{
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: top;
}

/* STRONA WYSZUKIWANIA */

/* nagłówek strony */
.wbt-search-header{
    margin-bottom: 1rem;
    border-bottom: solid 1px #838383;
}

/* Komunikat o liczbye wyników wyszukiwania */
.wbt-search-subtitle{
    margin: 1rem 0;
}

/* kontener zawierający zdjęcie 1 div oraz 2 div z tytuł, treść, date, przycisk */
.wbt-search-result-element{
    width: 100%;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1%;
    border-bottom: solid 1px #ccc;
}
.wbt-search-date{
    margin: 0 0 0.5rem 0;
    font-style: italic;
    color:#838383;
}

/* #### STRON STRTOWA - KOD DEDYKOWANY POD DANY PROJEKT #### */

/* BANER */
#wbt-text-content .wbt-baner-section{
    margin-bottom: 50px;
}

.wbt-baner-right-elements{
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    /* align-content: flex-start; */
    align-items: stretch;
    justify-content: flex-start;
}
.wbt-baner-home .wp-block-image{
    margin:0;
}

#wbt-text-content .wbt-baner-right-elements{
    margin-left: 15px !important;
}

.wbt-baner-right-elements > p,
.wbt-baner-right-elements > div{
    height: calc( ( 100% - 30px ) / 4 );
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    width: 100%;
    background-color: #f0f0f0;
    font-size: 1.28rem;
    font-weight: 300;
}
.wbt-baner-right-elements div > p{
    margin: 0;
}
.wbt-baner-right-elements div > p span{
    font-size: 1rem;
}
/* ikonki - główne ułożenie*/
.wbt-baner-right-elements > p::before,
.wbt-baner-right-elements > div::before{
    content: '';
    display: inline-block;
    margin:0 25px 0 18px;
    width: 40px;
    height: 40px;
}
/* zwrot */
.wbt-baner-right-elements > p:nth-of-type(1)::before{
    background: url(assets/img/ico-return.svg) center no-repeat;
    background-size: 40px 40px;
    opacity: 0.5;
}
/* dostawa */
.wbt-baner-right-elements > p:nth-of-type(2)::before{
    background: url(assets/img/ico-delivery-hart.svg) center no-repeat;
    background-size: 40px 40px;
    opacity: 0.5;
}
/* gwarancja */
.wbt-baner-right-elements > p:nth-of-type(3)::before{
    background: url(assets/img/ico-warranty.svg) center no-repeat;
    background-size: 40px 40px;
    opacity: 0.5;
}
/* pomoc */
.wbt-baner-right-elements > div:nth-of-type(1)::before{
    background: url(assets/img/ico-tel.svg) center no-repeat;
    background-size: 40px 40px;
    opacity: 0.5;
}

/* SEKCJA Z BLOGIEM */
.wbt-blog-home figure.wp-block-post-featured-image{
    margin: 0;
}
.wbt-blog-home h2{
    font-size: 1.42rem;
    font-weight: 600;
}
.wbt-blog-home h2 > a{
    color:var(--default-color-link-content-href-hover);
}
.wbt-blog-home h2 > a:hover{
    color:var(--default-color-link-content-href);
}
 
/* ####   SMARTFONE i TABLET   ### */

@media only screen and (max-width:1023px){
    /* pading do całości poza top bar z logo i menu */
    body{
        padding: 0 3vw;
        font-size: 13px
    }

    h1{ font-size: 1.7rem; font-weight: 300; }
    h2{ font-size: 1.5rem; font-weight: 300; }
    h3{ font-size: 1.35rem; }
    h4{ font-size: 1.25rem }
    h5{ font-size: 1.15rem; }

    header#wbt-top-bar{
        right:0;
        left:auto;
        transform: none;
    }

    /* szerokość kontenerów */
    nav#wbt-main-menu, #wbt-content, #wbt-content-search, #wbt-search-bar,
    footer#wbt-footer-widget, #wbt-signature{
        width: var(--rwd-container-width);
    }

    /* Logo z Hamburgerem i Lupką search ułożenie */
    #wbt-rwd-menu-icon{
        display: block;
    }
    nav#wbt-main-menu{
        justify-content: space-between;
        padding: 0 3vw;
        width: calc(100% - 6vw);
    }

    /* ### HAMBURGER - wygląd i animacja ### */

    /*Położenie i animacja hamburgera dla menu RWD*/
    #wbt-hamburger {
        cursor: pointer;
    }

    #wbt-hamburger>span {
        width: 43px;
        height: 2px;
        background: var(--hamburger-ico-line-color);
        display: block;
        border-radius: 10px;
        transition: 0.2s;
    }

    #wbt-hamburger>span:not(:last-child) {
        margin-bottom: 10px;
    }

    #wbt-hamburger.wbt-hamburger-active>span:nth-child(2) {
        transform: translateX(-100%);
        opacity: 0;
    }

    #wbt-hamburger.wbt-hamburger-active>span:first-child {
        transform: rotate(45deg) translateY(12px) translateX(5px);
    }

    #wbt-hamburger.wbt-hamburger-active>span:last-child {
        transform: rotate(-45deg) translateY(-12px) translateX(5px);
    }
    /* wyłączenie domyślnego menu na PC */
    .menu-main-menu-container, .menu-social-menu-container{
        display: none;
    }
    /* włączenie menu rwd po kliknięciu hamburgera */
    #wbt-rwd-main-menu > div{
        display: block;
    }

    /* Ustawienie kontenera zawierającego menu wraz z animacją */
    #wbt-rwd-main-menu{
        display: block;
        position: fixed;
        width: var(--rwd-container-width);
        left: var(--rwd-container-width);
        right:0;
        overflow: hidden;
        transition: 0.5s;
        height: 100vh;
        background-color: var(--background-container-menu-rwd);
        z-index: 14;
    }

    #wbt-rwd-main-menu.wbt-active-menu{
        display: block;
        top: calc(var(--max-height-img-logo-top) + 1rem);
        width: var(--rwd-container-width);
        overflow-y: auto;
        left: 0;
        height: 100vh;
        background-color: var(--background-container-menu-rwd)
    }

    /* blokada skrolowania body jak jest menu rozwinięte */
    body.wbt-hamburger-active{
        overflow: hidden;
    }

    /* ten element jest powiązany z pustym DIV'em dodanym pod RWD i social menu aby 
    menu było widoczne do skrolowania całe. Ten diva równa się wysokości odsunięcia od top bar
    gdzie jest logo i zamykanie menu */
    .wbt-rwd-sep{
        height: var(--move-content-from-top-menu);
    }

    /* ukrycie całego elementu wyszukiwarki użytej w widoku na PC */
    #wbt-search-bar{
        display: none;
    }

    /* Ukrycie napisu Wyszukiwarka przed inputem wyszukiwarki w treści i wycentrowanie */
    form.wbt-search-engine-in-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
    form.wbt-search-engine-in-content label{
        display: none;
    }

    /* InfoBox koszyka ukryty */
    .wbt-nav-addons-cart:hover #wbt-basket-info{
        height: 0;
        padding: 0;
    }
    /* InfoBox koszyka - po kliknięciu */
    .wbt-nav-addons-cart #wbt-basket-info.wbt-activ-basket-info{
        height: 220px;
        padding: 1rem;
    }

    /* ### GLOBALNE USTAWIENIA UKŁADU DLA WSZYSTKICH POZIOMÓW MENU UL LI ### */
    
    #wbt-rwd-main-menu ul.main-menu{
        display: flex;
        flex-wrap: wrap;
        row-gap: 1px; /*przerwa między elementami głównego poziomu menu*/
        margin: 2rem 0 0 0;
        background-color: #ccc;
    }

    /* Rozmiar czcionki dla wszystkich poziomów */
    #wbt-rwd-main-menu ul.main-menu>li a{
        font-size: var(--default-font-size-menu-rwd);
        border-bottom: var(--border-bottom-submenu-element);
    }

    /* Ustawienie położenie relative oraz przejęcia szerokości kontenera na menu, aby 
    menu nie nachodziło jedno na drugie oraz aby na całą szerokość się wyświetlało */
    #wbt-rwd-main-menu ul.main-menu,
    #wbt-rwd-main-menu ul.sub-menu,
    #wbt-rwd-main-menu ul.sub-menu ul.sub-menu{
        position: relative;
        width: inherit;
        padding: 0;
    }

    /* ustawienie flex, aby strzałki dla submenu dobrze się ustawiały i centrowały */
    #wbt-rwd-main-menu ul.main-menu li,
    #wbt-rwd-main-menu ul.main-menu ul.sub-menu li,
    #wbt-rwd-main-menu ul.main-menu ul.sub-menu li ul.sub-menu li{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    /* ustawienie, aby kafelki były na 100% szerokości klikalne */
    #wbt-rwd-main-menu ul.main-menu a, 
    #wbt-rwd-main-menu ul.sub-menu a,
    #wbt-rwd-main-menu ul.sub-menu li ul.sub-menu a{
        display: block;
        padding: 0.8rem;
        width:100%;
    }
    /* usunięcie padingów aby każdy poziom był tak samo wyrównany i nie robił wcięć */
    #wbt-rwd-main-menu ul.main-menu li,
    #wbt-rwd-main-menu ul.sub-menu,
    #wbt-rwd-main-menu ul.sub-menu li, 
    #wbt-rwd-main-menu ul.sub-menu li ul.sub-menu{
        padding: 0;
        margin: 0;
    }

    /* ### STRZAŁKA DO ROZWIJANIA SUBMENU ### */

    #wbt-rwd-main-menu ul.main-menu li.menu-item-has-children > span{
        background:url('assets/img/arrow-bottom.svg') center no-repeat var(--menu-background-level-1);
        border: var(--default-button-submit-border);
        background-size: 15px 15px;
        width: 30px;
        height: 30px;
        margin-left: calc(100% - 40px);
        margin-top: calc(-1 * ( ( var(--default-font-size-menu-rwd) / 2 ) + 30px + 0.8rem) ); /*= połowa wysokości czcinki linka + wysokość strzałki after + stały padding linka +  */
        transition: 0.5s;
    }

    /* aktywny styl klikniętej strzałki sub-menu */
    #wbt-rwd-main-menu ul.main-menu li.menu-item-has-children > span.wbt-open-menu-icon{
        transform: rotateX(180deg);
        background-color: var(--default-color-link-content-href);
        border: unset;
    }

    #wbt-rwd-main-menu ul.main-menu li.menu-item-has-children{
        justify-content: space-between;
        align-items: center;
    } 

    /* ### DEFAULT COLOR ### */
    
    /* Level 1 */
    #wbt-rwd-main-menu li a{
        color: var(--menu-text-level-1);
        background-color: var(--menu-background-level-1);
        outline: var(--menu-outline-level-1);
    }

    /* href, current, parent */
    #wbt-rwd-main-menu li a:hover,
    #wbt-rwd-main-menu li.current-menu-item a,
    #wbt-rwd-main-menu li.current-menu-parent a
    {
        color: var(--menu-text-hover-curent-parent-level-1);
        background-color: var(--menu-background-hover-curent-parent-level-1);
        outline: var(--menu-outline-hover-curent-parent-level-1);
    }

    /* Level 2 */
    #wbt-rwd-main-menu li ul.sub-menu li a{
        color: var(--menu-text-level-2-3);
        outline: var(--menu-outline-level-2-3);
        background-color: var(--menu-background-level-2-rwd);
    }

    /* href, current, parent */
    #wbt-rwd-main-menu li ul.sub-menu li a:hover,
    #wbt-rwd-main-menu li ul.sub-menu li.current-menu-item a,
    #wbt-rwd-main-menu li ul.sub-menu li.current-menu-parent a{
        color: var(--menu-text-hover-curent-parent-level-2-3);
        background-color: var(--menu-background-hover-curent-parent-level-2-3);
        outline: var(--menu-outline-hover-curent-parent-level-2-3);
    }

    /* Level 3 */
    #wbt-rwd-main-menu li ul.sub-menu li ul.sub-menu li a{
        color: var(--menu-text-level-2-3);
        outline: var(--menu-outline-level-2-3);
        background-color: var(--menu-background-level-3-rwd);
    }

    /* href, current, parent  */
    #wbt-rwd-main-menu li ul.sub-menu li ul.sub-menu li a:hover,
    #wbt-rwd-main-menu li ul.sub-menu li ul.sub-menu li.current-menu-item > a,
    #wbt-rwd-main-menu li ul.sub-menu li ul.sub-menu li.current-menu-parent > a{
        color: var(--menu-text-hover-curent-parent-level-2-3);
        background-color: var(--menu-background-hover-curent-parent-level-2-3);
        outline: var(--menu-outline-hover-curent-parent-level-2-3);
    }

    /* UKRYWANIE I POKAZYWANIE SUBMENU */
    
    /* domyślne ukrycie 2 domyślnych poziomów submenu */
    #wbt-rwd-main-menu ul.sub-menu,
    #wbt-rwd-main-menu ul.sub-menu li ul.sub-menu{
        display: none;
    }
    /* pokazanie menu po dodaniu klasy wbt-active-submenu po kliknięciu w strzałkę rozwijania */
    #wbt-rwd-main-menu ul.sub-menu.wbt-active-submenu,
    #wbt-rwd-main-menu ul.sub-menu li ul.sub-menu.wbt-active-submenu{
        display: block;
    }

    /* backgroudn i border - nadpisanie tego co jest ustawione dla menu głównego poziom 1 */
    #wbt-rwd-main-menu ul.social-menu{
        padding-top: 1rem;
    }
    #wbt-rwd-main-menu ul.social-menu li > a{
        background-color: unset;
        outline: unset;
    }

    /* SIDEBAR - wyłączenie na telefon i tablet */
    aside#wbt-sidebar{
        min-width: 0;
        z-index: 20;
        position: fixed;
        top: 0;
        left: -110vw;
        height: 100vh;
        padding: 2rem;
        overflow: hidden;
        transition: 0.6s;
    }

    /* WŁĄCZENIE na RWD po kliknięciu przycisku Filtry */
    aside#wbt-sidebar.wbt-sidebar-active{
        left: 0;
        display: block;
        z-index: 20;
        position: fixed;
        top: 0;
        height: 100vh;
        width: calc(100% - 4rem);
        max-width: calc(100% - 4rem); /*ze względu ustawienia max-width na pc aby nie rozciągał sidebar zdjęcie*/
        padding: 2rem;
        overflow-y: auto;
    }

    /* Włączenie przycisku do zamykania filtra */
    aside#wbt-sidebar #wbt-close-filtr{
        display: inline-block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        width:2rem;
        height: 2rem;
        background: url(assets/img/ico-close.svg) center no-repeat;
    }
    
}


/* ####   SMARTFONE   ### */

@media only screen and (max-width:767px){
    /* ICO SEARCH i SEARCH FORM */
    ul#wbt-nav-addons{
        /* display: none; */
        border-right: unset;
        margin:0;
        transition: 0.5s;
        margin-top: calc( -1.6 * ( var(--max-height-img-logo-top) ));
    }
    #wbt-top-bar.wbt-scroll ul#wbt-nav-addons{
        margin-top:0;
    }
    /* ukrycie ikonki wyszukiwarki - lipka */
    ul#wbt-nav-addons .wbt-nav-addons-search{
        display: none;
    }
    /* ukrycie wartości koszyka */
    ul#wbt-nav-addons #wbt-cart-total{
        display: none;
    }
    ul#wbt-nav-addons li a{

    }
    /* dzięki temu ikonki sklepowe sa wyrównane do prawej */
    #wbt-logo{
        flex-grow: 1;
    }

    #wbt-search-bar form label{
        display: none;
    }
    #wbt-search-bar form input[type="text"],
    #wbt-search-bar form input[type="search"],
    #wbt-search-bar form > button[type="submit"],
    #wbt-search-bar form input[type="submit"]
    {
        padding: 3%;
    }

    #wbt-search-bar form input[type="text"],
    #wbt-search-bar form input[type="search"]
    {
        margin-left: 5%
    }

    /* ### FOOTER ### */
    footer#wbt-footer-widget{
        flex-wrap: wrap;
    }

    #wbt-footer-widget > .wbt-col-footer{
        width: 100%;
    }

    /* ### SIGNATURE WEBTEC ### */
    #wbt-signature{
        justify-content: center;
    }
    #wbt-signature > div{
        padding: 10px 0;
        text-align: center;
    }
    #wbt-signature>div:last-child{
        padding-left: unset;
    }
    .modalBox{
        width:fit-content;
    }
    .modalContent{
        padding-top: 10px;
        column-gap: 10px;
    }
    .modalContent span{
        flex-wrap: wrap;
        font-size: 12px;
    }

    /* ### TABLICOWANIE POSTY I KOMENTARZE ### */
    .nav-links span.wbt-nav-next-text,
    .nav-links span.wbt-nav-prev-text{
        display: none;
    }
    /* BLOG - LISTA */
    .wbt-page-content-list{
        flex-wrap: wrap;
    }
    /* obrazek wyróżniający */
    .wbt-featured-media-list{
        max-width: unset;
        width: 100%;
    }
    .wbt-featured-media-list > img{
        width: 100%;
        height: auto;
    }
    .wbt-featured-media-list{
        overflow: hidden;
    }
    /* obrazek zastępczy jak nie ma wyróżniającego */
    .wbt-featured-media-list.wbt-nofoto{
        display: none;
    }

    /* WYNIKI WYSZUKIWANIA - LISTA */
    .wbt-search-result-element{
        flex-wrap: wrap;
    }

    /* #### STRON STRTOWA - KOD DEDYKOWANY POD DANY PROJEKT #### */
    #wbt-text-content .wbt-baner-right-elements{
        margin-left:0 !important;
    }
    .wbt-baner-right-elements > p, .wbt-baner-right-elements > div{
        padding: 5px 0;
    }
}

/* ####   TABLET   ### */

@media only screen and (min-width:768px) and (max-width:1023px){
    /* ###   FOOTER ### */
    footer#wbt-footer-widget{
        flex-wrap: wrap;
    }

    #wbt-footer-widget > .wbt-col-footer{
        width: calc(50% - 5%); /* połowa szerokości czyli 50% - padding 2 x 2% + gap 2%/2 = 1 czyli 4% + 1% i tyle odejmujemy do 50% */
    }
}