@charset "UTF-8";

/*
Theme Name: WEBTEC BUSINESS v3.2
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: 6.0
Tested up to: 8.1
Requires PHP: 7.4
Version: 3.2.0
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 W DOKUMENCIE CSS */
:root {
    --default-font-size: 16px;
    --default-font-family: 'Montserrat', sans-serif; /*import poprzez rel link w header.php - dla szybkości wczytywania strony*/
    --default-font-size-menu-rwd: 1.15rem;
    --default-font-weight: 300;

    /*Szerokości kontenerów*/
    --container-width: 1200px;
    --container-align: 0 auto;
    --full-container-width: 100%; /* To ustawiam jak chcę aby dany element był na 100% ekranu */
    --rwd-container-width: 100%; /* Szerokość na RWD - smartfon i tablet */ 
    --move-content-from-top-menu: 10px; /* Wartość o ile odsuwamy kontener główny od menu jeżeli nie chcemy aby był połączony. D0myślnie jest "0" */
    --container-top-width: 1200px; /* Szerokość TOP */

    /* wysokość loga w top bar */
    --max-height-img-logo-top: 80px; /*powinna być o 10px min. mniejsz jak move-content-from-top-menu*/
    
    /* ## MENU ## */
    --menu-background-color: #f5f5f5; /*tło pod menu i logiem*/
    --menu-background-rwd-color: #f5f5f5; /*tło pod menu rwd wordpressa */
    --submenu-space-top-right-between-a-elements: 4px; /*odstęp między elementami submenu - margines*/
    --submenu-space-from-top-pc-menu: 10px; /* odsunięcie submenu w widoku na komputer od 1 poziomu menu */
    --show-number-produckt-in-cat: none; /* "inline", aby pokazać lub "none", aby ukryć liczbę w nawiasie w menu sklepu */
    --show-iko-in-cat: inline; /* "inline", aby pokazać lub "none", aby ukryć ikonkę w menu sklepu */
    
    /* poziom menu I (current == parent)*/
    --main-menu-aling-vertical-pc: center; /*za pomocą wyrówniania flex justify-content*/
    
    --menu-text-transform-level-1: uppercase; /*lowercase, uppercase itp.*/
    --menu-text-level-1: #000;
    --menu-text-hover-curent-parent-level-1: #e30613;
    
    --menu-background-level-1: #f5f5f5;
    --menu-background-hover-curent-parent-level-1: #f5f5f5;

    --menu-outline-level-1: solid 1px #fff;
    --menu-outline-hover-curent-parent-level-1: solid 1px #e30613;

    /* poziom menu II + III (current == parent)*/
    --menu-text-transform-level-2-3: unset; /*lowercase, uppercase itp.*/
    --menu-text-level-2-3: #000;
    --menu-text-hover-curent-parent-level-2-3: #e30613;
    --menu-background-level-2: #f5f5f5;
    --menu-background-level-3: #f5f5f5;
    --menu-background-level-2-rwd: rgb(205, 205, 205);
    --menu-background-level-3-rwd: rgb(245, 245, 245);
    --menu-background-hover-curent-parent-level-2-3: #f5f5f5;

    --menu-outline-level-2-3: solid 1px #000;
    --menu-outline-hover-curent-parent-level-2-3: solid 1px #e30613;

    /* kreska rozdzielająca elementy RWD MENU */
    --border-bottom-submenu-element: solid 1px #333;

    /* breadcrumbs and title*/
    --breadcrumbs-show: flex; /*Pokazanie lub ukrycie - "flex", aby pokazać, "none", aby ukryć*/
    --title-home-show: none; /*Pokazanie title na stronie startowej, "flex" aby pokazać*/
    --title-page-show: flex; /*Pokazanie title na podstronach, "flex" aby pokazać*/

    /* link domyślny */
    --default-color-link-content-href: #a2000a;
    --default-color-link-content-href-hover: #e30613;

    /* social menu */
    --social-underline-animate: #e30613;

    /* hamburger */
    --hamburger-ico-line-color: #000;
    --background-container-menu-rwd: #fff;

    /* sidebar */
    --sidebar-color-background: #f0f0f0;
    /*plik sidebar.php linia 16 - ukrywanie sidebar Woocommerce dla szczegółów produkty*/
    
    /* content */
    --show-featured-img-in-top: none; /* pokazać lub ukryć obrazek wyróżniający na podstronach z treścią */

    /* footer */
    --background-column-footer: unset;
    --background-footer-widget: #f5f5f5;
    --background-footer-signature: unset;

    /* domyślne style formularzy */

        /* submit/przycisk */
    --default-button-submit-background: #000;
    --default-button-submit-hover-background: #e30613;
    --default-button-submit-text-color: #fff; /*także w select, tablicowaniu jest używany*/
    --default-button-submit-border: solid 1px #000;
    --default-button-submit-outline: none; /*solid rgba(255, 255, 255, 0.315);*/
    --default-button-submit-outline-width: none; /*1px;*/
    --default-button-submit-outline-ofset: none; /*-0.5rem;*/

    /* formularz z komentarzami - cała sekcja */
    --show-coment: block; /*używamy opcji display none lub block*/
}

/* 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 */

/* ustawienia dedykowane dla przeglądarek jak nie ma wsparcia */
/*
-webkit- :: IOS
-moz- :: FireFox
-o- :: Opera
-ms- :: Edge, IE
*/

/* Ustawienia dopasowania do obaszru dostępnego */
/* width: -moz-available;          WebKit-based browsers will ignore this.
width: -webkit-fill-available;  Mozilla-based browsers will ignore this.
width: fill-available; */

/* Grubości czcionek */
/* 
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold
*/


/* WYZEROWANIE STYLI DOMYŚLNYCH */

* {
    box-sizing: border-box;
  }

img, picture, video {
  max-width: 100%;
}

html, body{
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #fff;
}

html{
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight);
    scroll-behavior: smooth;
    scroll-padding-top: calc( var(--move-content-from-top-menu) + 50px ) !important;
}

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

h1{
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 600;
    color:var(--color-2);
}
h2{
    font-size: clamp(1.4rem, 4.5vw, 2.0rem);
    font-weight: 400;
    margin-top: 1.42em;
    margin-bottom:0;
}
h3 { font-size: clamp(1.25rem, 4vw, 1.8.0rem); }

h4 { font-size: clamp(1.15rem, 3.5vw, 1.6rem);  font-weight: 300; }

h5 { font-size: clamp(1.05rem, 3vw, 1.4rem); }

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

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

/* SEKCJE TREŚCI DOMYŚLNE */

/* sekcja z kolorem w tle na 100% ekranu */
.full--width--bg--color {
    box-shadow: 0 0 0 100vmax #a00;
    clip-path: inset(0 -100vmax);
}

/* SLICK BIBLIOTEKA */

/* ustawienie aby obrazek w slick był jako tło. Bo inaczej zasłania treści z Gutenberga */
.slick-slide img {
    z-index: -1;
}

/* kropki tablicowania */
#wbt-body .slick-dots li.slick-active button:before{
    color: var(--default-color-link-content-href);
   
}
#wbt-body .slick-dots li button:before{
    font-size: 1rem;
}

/* nadpisanie szerokości Woocommerce. Inaczej kropki mają ustawione np. 100% albo 47% */
#wbt-body .slick-dots > li{
    width: unset;
}

/* strzałki do przesuwania */
#wbt-body .slick-prev{
    left: 0;
    transform: translateX(-10px);
    z-index: 99;
}
#wbt-body .slick-next{
    right: 0;
    transform: translateX(10px);
    z-index: 99;
}

#wbt-body .slick-next::before,
#wbt-body .slick-prev::before{
    font-size: 2.5rem;
    color: var(--default-color-link-content-href);
}

/* wycentrowanie listy produktów */
.slick-initialized .slick-list{
    margin-left:7px;
}
/* wycentrowanie listy bloga */
.wbt-blog-home .slick-list{
    margin-left:17px;
}

/* 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: sticky;
    top:0;
    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;
}

/* jeśli jest DIVI to ustawiam kontener dla wyników wyszukiwania i sklepu na określoną szerokość aby DIVI mógł mieć 100% ekranu ustawione  */
/* ale cały zas brakuje sensownego rozwiązania jak jest DIVI ale treść nie jest za pomocą DIVI robiona to wciąż tręść jest na 100% */
body:is(.et_divi_builder) #wbt-content-search,
body:is(.et_divi_builder) #wbt-woocomerc-main{
    width: var(--container-top-width);
}

#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: 200px;
    width: auto;
    padding: 0.5rem 0;
    transition: 0.5s;
}

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

/* MENU */

/* wraper dla menu woocommerce i wordpress */
.wbt-all-menu-wrap{
    display: flex;
    flex: 1;
    justify-content: center;
    z-index: 11;
}

.menu-main-menu-container{}

#menu-main-menu{
    display: flex;
    justify-content: var(--main-menu-aling-vertical-pc);
    align-items: center;
    gap: 2px;
}
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;
    white-space: nowrap;
}

#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;
    pointer-events: none;
}

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

/* przesunięcie strzałki gdyż jest element pozycjonowany absolut - 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) );
    pointer-events: none;
}

/* ikonki dla menu kategorii woocommerce*/
img:not([src=""]).wbt-iko-cat-menu{
    display: var(--show-iko-in-cat);
    margin-right: 10px;
    margin-top: -5px;
    width: 2em;
    max-height: 1.7em;
    float: left;
}

/* liczba produktów w danej kategorii */
#cat-shop-menu .wbt-count-cat {
    display: var(--show-number-produckt-in-cat);
}

/*  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: var(--default-color-link-content-href);
    transition: 0.5s;
}

#menu-main-menu li a:hover::after{
    content: '';
    width: 100%;
    display: inline-block;
    height: 1px;
    background-color: var(--default-color-link-content-href);
}

/* 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: 0.3rem;
    padding-top: var(--submenu-space-from-top-pc-menu);
}
/* border odzielający sociel menu od szukaj i sklepu ikonek */
ul#wbt-nav-addons{
    margin-left: 2%;
    padding-right: 0.5rem;
    padding-top: var(--submenu-space-from-top-pc-menu);
    border-right:solid 1px #000;
}

ul.social-menu li a,
ul#wbt-nav-addons li:is(.wbt-nav-addons-search, .wbt-nav-addons-cart, .wbt-user-account) > :is(a, button){
    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 button#wbt-search-icon{
    background:url(assets/img/ico-search.svg) center no-repeat transparent;
    cursor: pointer;
    border: none;
}

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 button#wbt-search-icon{
    background:url(assets/img/ico-search.svg) center no-repeat transparent;
}

ul#wbt-nav-addons li button#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 i Moje konto po najechaniu w TOP - info box */
#wbt-basket-info,
.wbt-user-account nav.woocommerce-MyAccount-navigation {
    padding: 1em;
    width: max-content;
    position: absolute;
    right:0;
    transform:translateX(-100%);
    filter: opacity(0);
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 12px -7px rgb(96 96 96);
    -moz-box-shadow: 0px 2px 12px -7px rgba(96, 96, 96, 1);
    box-shadow: 0px 2px 12px -7px rgb(96 96 96);
    transition: 0.2s;
    pointer-events: none;
    z-index: 12;
}

/* Ukrycie iko koszyk oraz info box koszyka w opcji sklep dla zalogowanych - jezeli user nie jest zalogowany */
body:not(.logged-in).shop-for-logged :is(.wbt-nav-addons-cart, #wbt-cart-total) {
    display: none;
}
/* Ukrycie koszyka z info box oraz iko user - jak jest włączony tryb katalogu */
body.catalog-mode :is(.wbt-nav-addons-cart, #wbt-cart-total, .wbt-user-account) {
    display: none;
}

/* pokazanie po najechaniu kliknięciu na ikonkę */
.wbt-nav-addons-cart:hover #wbt-basket-info,
.wbt-user-account:hover nav.woocommerce-MyAccount-navigation {
    padding: 1em;
    right: unset;
    transform:translateX(-85%);
    filter: opacity(1);
    pointer-events: all;
}

.wbt-user-account nav.woocommerce-MyAccount-navigation ul{
    margin: 0;
}

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

/* nagłówek Witaj - Twoje konto, ... */
nav.woocommerce-MyAccount-navigation div{
    font-size: 1rem;
    text-align: left;
    font-weight: bold;
    padding: 1rem;
}


/* ukrycie kreseczek po najechaniu - te z ikonek w TOP addons */
ul#wbt-nav-addons li ul#wbt-myaccount-menu li::after{
    display: none;
}

ul#wbt-nav-addons li ul#wbt-myaccount-menu li a{
    padding: 0.5rem 1rem;
    width: calc(100% - 2rem);
    font-size: 1rem;
    white-space: nowrap;
}

/* ikonki Moje konto */
nav.woocommerce-MyAccount-navigation ul#wbt-myaccount-menu li a::before{
    width: 20px;
    height: 20px;
}
/* Moje konto - lista UL style domyślne */
#wbt-basket-info ul,
.wbt-cart-info {
    list-style: none;
    list-style-position: inside;
    padding: 0;
}

.wbt-cart-info {
    margin-block-end: 1em;
}
/* ramka z info na stronie koszyka */
.cart_totals .wbt-cart-info {
    padding: 1rem;
    border: var(--default-button-submit-border);
}
#wbt-basket-info ul li,
.wbt-cart-info li {
    padding: 0.5rem 0;
}

/* rozmia czcionki przycisku - pobiera z ikonek wyżej także */
ul#wbt-nav-addons #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,
.wbt-cart-info li>span.wbt-ship-amount {
    font-weight: bold;
}

/* darmowa dostawa brakuje - kwota */
#wbt-ship-left-value {
    font-weight: bold;
    color: var(--default-color-link-content-href)
}

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

/* komunikat że możesz już skorzystać z darmowej wysyłki */
#wbt-get-free-ship {
    color: var(--default-color-link-content-href);
    font-weight: bold;
}

/* pasek progrestu - ile do darmowej wysyłki brakuje */
/* kolor wypełnienia - czyli to się wypełnia dodając produkty do koszyka */
li#wbt-progres-bar div{
    display: flex;
    justify-content: flex-end;
    height: 8px;
    background-color: var(--default-color-link-content-href) ;
}

/* to jest domyśly pasek pustego koszyka. Szerokość dopisuje się bezpośrednio w kodzie w inline style za pomocą PHP w functions 314 linia */
li#wbt-progres-bar div > span{
    display: block;
    height: 100%;
    background-color:#ccc;
}

/* 
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-hover);
    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: fit-content;
    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;
    gap: 2em;
    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;
    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);
    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;
}
/* lista komentarza - odpowiedź */
ul.wbt-comments-reply-element li > ul.children{
    list-style: none;
}

ul.wbt-comments-reply-element li {
    padding: 1rem;
}

ul.wbt-comments-reply-element>li:nth-last-of-type(2n+1) {
    background-color: #e9e9e9;
}

ul.wbt-comments-reply-element>li {
    margin: 1rem 0;
    outline: solid 1px #e9e9e9;
    outline-offset: -1px;
}

/* lista komentarzy - div ze avatarem o ile włączony w wordpress Ustawiania/Dyskusaja, user name oraz tekstem pisze: */
ul.wbt-comments-reply-element .comment-author{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

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

/* ukrycie zdjęcia avatara */
ul.wbt-comments-reply-element .comment-author>img {
    /* display: none; */
}

/* użytkownik */
ul.wbt-comments-reply-element cite {
    font-size: 1.1rem;
    font-style: normal;
    text-transform: uppercase;
    /* background-color: var(--default-color-link-content-href); */
    padding: 3px 5px;
}
ul.wbt-comments-reply-element cite>a {
    color:  var(--default-color-link-content-href);
}

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

/* treść komentarza */
ul.wbt-comments-reply-element .comment-body > p{
    font-size: 1.2rem;
}

/* przycisk odpowiedź na komentarz */
ul.wbt-comments-reply-element .comment-body a.comment-reply-link{
    display: inline-block;
    padding: 5px 10px;
    border: solid 1px var(--default-color-link-content-href);
}
ul.wbt-comments-reply-element .comment-body a.comment-reply-link::before{
    content: ' \21B5';
    display: inline-block;
    padding-right: 10px;
    width: 10px;
    height: 10px;
}

/* STYL FORMULARZY DOMYŚLNE */

/* przyciski */
#wbt-body input[type="submit"],
#wbt-body #respond input#submit,
#wbt-body button[type="submit"],
#wbt-body button[type="button"]:not([class|="slick"], [id|="slick"]),
#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, #wbt-body .woocommerce-message > a /*dedykowany wygląd elementy a jak przycisku pozostałe - wordpress*/
{
    padding: 1em 1.2em;
    width: fit-content;
    white-space: nowrap;
    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;
    font-family: inherit;
    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;
    margin: 0;
    width: 100%;
    width: -moz-available; /*WebKit przeglądarki to będą ignorować*/
    width: -webkit-fill-available; /*Mozilla to będzie ignorować*/
    width: fill-available;
    height: inherit;
    border: solid 1px #333;
    border-radius: 0;
    font-family: inherit;
    background-color: #fff;
}
#wbt-body form input:is([type="checkbox"], [type="radio"]) {
    width: auto;
    margin-right: 1rem;
}

/* input - woocommerce validate - jak jest wymagane a nie wypełnone lub źle */
#wbt-body form .woocommerce-invalid span > input{
    border: solid 1px #a00;
}

#wbt-body form.woocommerce-cart-form .cart_item input[type="number"] {
    width: 80px;
}

/*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;
    justify-content: center;
    gap: 1rem;
}
/* wymusza szerokość treści diva na 100%. Z jakiś przyczyn czasem ma 1080px */
#et-boc #et_builder_outer_content > .et-l{
    width: var(--full-container-width) !important;
}

.wbt-page-content-list{
    display: flex;
    flex-wrap: nowrap;
    gap: 3vh;
    width: 100%;
    margin-bottom: 3vh;
    padding-bottom: 3vh;
    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: fit-content;
    margin: 0;
    position: relative;
}

.wbt-featured-media-list > img{
    max-height: 300px;
    height: auto;
    object-fit: cover;
    object-position: top center;
}
.wbt-featured-media-list.wbt-nofoto{
    min-width: 30%;
    width: 100%;
    max-height: 300px;
    height: auto;
    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);
}

/* ###  PC  ### */
@media only screen and (min-width:1024px){

    #ico-ham {
        display: none;
    }
    
}
 
/* ####   SMARTFONE i TABLET   ### */

@media only screen and (max-width:1023px){

    /* slick */
    .slick-initialized .slick-list{
        margin-left: 0;
    }
    
    /* pading do całości poza top bar z logo i menu */
    body{
        padding: 0 3vw;
    }

    header#wbt-top-bar{
        width: 100vw;
        margin-left: -12px;
        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);
    }
    /* Jak jest DIVI to ustawia szerokość inną dla treści gdy ustawimy kontener na 100% */
    body:is(.et_divi_builder) #wbt-content-search,
    body:is(.et_divi_builder) #wbt-woocomerc-main{
        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;
    }

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

    #ico-ham {
        background: transparent;
        border: 1px solid var(--button-color, #000);
        border-radius: 2%;
    }

    #ico-ham {
        --button-color: black;
        overflow: hidden;
    }

    #ico-ham .hamburger {
    translate: 0 3px;
    transition: translate 1s, rotate 1s;
    }

    #ico-ham[aria-expanded="true"] .hamburger {
        translate: 1px 0;
        rotate: 0.125turn;
    }

    #ico-ham .line {
        transition: 1s;
        stroke-dasharray: 60 31 60 300;
    }

    #ico-ham[aria-expanded="true"] .line {
        stroke-dasharray: 60 105 60 300;
        stroke-dashoffset: -90;
    }

    /* 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: 100%;
        max-height: -webkit-fill-available;
        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;
    }

    /* Moje konto po najechaniu w TOP - info box - ukrycie */
    .wbt-user-account nav.woocommerce-MyAccount-navigation{
        display: none;
    }

    /* InfoBox koszyka ukryty */
    .wbt-nav-addons-cart:hover #wbt-basket-info{
        display: none;
    }
    /* 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: var(--menu-background-rwd-color);
    }

    /* 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;
        box-sizing: border-box;
        padding: 0.8rem 3rem 0.8rem 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,
    #cat-shop-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: 40px;
        height: 40px;
        margin-left: calc(100% - 45px);
        margin-top: calc(-1 * ( ( var(--default-font-size-menu-rwd) / 2 ) + 26px + 0.8rem) ); /*= połowa wysokości czcinki linka + wysokość strzałki after + stały padding linka +  */
        transition: 0.5s;
    }

    /* tylko dla menu kategorii sklepu */
    #cat-shop-menu li.menu-item-has-children>span {
        position: absolute;
    }

    /* 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,
    #cat-shop-menu li.menu-item-has-children>span.wbt-open-menu-icon,
    #cat-shop-menu li.menu-item-has-children.current-menu-item>span,
    #cat-shop-menu li.menu-item-has-children.current-menu-item>span.wbt-open-menu-icon {
        transform: rotate(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: -webkit-fill-available;
        width: 100%;
        max-width: 100%; /*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.8 * ( 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 i info box koszyka */
    ul#wbt-nav-addons #wbt-cart-total,
    ul#wbt-nav-addons #wbt-basket-info{
        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% */
    }
}