a {-moz-outline: none; outline: none; transition: all 0.2s ease-in-out;}
a img{border:0}
img{max-width:100%; height:auto !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
img{vertical-align:middle}
iframe{display:block;}

.btn-primary{
    --bs-btn-color:#000;
    --bs-btn-bg:#ffc600;
    --bs-btn-border-color:#ffc600;
    --bs-btn-hover-color:#000;
    --bs-btn-hover-bg:#ffa200;
    --bs-btn-hover-border-color:#f2a500;
    --bs-btn-focus-shadow-rgb:rgba(0,0,0,0.2);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#f2a500;
    --bs-btn-active-border-color:#f2a500;
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:#ffc600;
    --bs-btn-disabled-border-color:#ffc600;
}

.btn-outline-primary{
    --bs-btn-color:#ffc600;
    --bs-btn-border-color:#ffc600;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#ffc600;
    --bs-btn-hover-border-color:#ffc600;
    --bs-btn-focus-shadow-rgb:rgba(0,0,0,0.2);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#ffc600;
    --bs-btn-active-border-color:#ffc600;
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color:#ffc600;
    --bs-btn-disabled-bg:transparent;
    --bs-btn-disabled-border-color:#ffc600;
    --bs-gradient:none;
}
.btn-outline-primary .material-icons{color:#000 !important}

.btn-link{
    --bs-btn-color:#ffc600;
    --bs-btn-hover-color:#ffa200;
    --bs-btn-active-color:#f2a500;
    --bs-btn-focus-shadow-rgb:rgba(0,0,0,0.2);
}

:root{
    --kolor-tla-dokument:#fff;

    --kolor-czcionki:#333;
    --url:#000;
    --url-hover:#666;

    --url-header:#000;
    --url-hover-header:#666;
    --url-header-icon:#ffc600;
    --url-hover-header-icon:#000;

    --menu-top-1-background:#fbfbfb;
    --menu-top-1-color:#888;
    --menu-top-1-bgcolor:transparent;
    --menu-top-1-color-hover:#000;
    --menu-top-1-bgcolor-hover:#f3f2f2;

    --menu-top-2-color:#999;
    --menu-top-2-bgcolor:#f9f8f8;
    --menu-top-2-color-hover:#000;
    --menu-top-2-bgcolor-hover:#f3f2f2;

    --menu-top-3-color:#999;
    --menu-top-3-bgcolor:#fff;
    --menu-top-3-color-hover:#000;
    --menu-top-3-bgcolor-hover:#f3f2f2;

    --menu-left-1-color:#888;
    --menu-left-1-color-hover:#000;

    --button-color:#000;
    --button-bg:#ffc600;
    --button-hover-color:#fff;
    --button-hover-bg:#ffa200;

    --kolor-tla-stopka:#222222;
    --kolor-stopka:#e3e3e3;
    --naglowki-stopka:#fff;
    --url-stopka:#d5d5d5;
    --url-hover-stopka:#ffc600;

    --li_color:#ffc600;
}

html, body{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background-color:var(--kolor-tla-dokument);
    color:var(--kolor-czcionki);
}

html, body a:link,
html, body a:visited{
    color:var(--url);
    text-decoration:none;
}

html, body a:hover,
html, body a:active{
    color:var(--url-hover);
    text-decoration:none;
}

li{list-style-position:outside;}

.table-container{width:100%; overflow-y:auto; overflow:auto;}
table{border:solid 2px #000; border-collapse:collapse;}
table tr{background-color:rgba(255,255,255,0.5)}
table tr:hover{background-color:rgba(255,255,255,1)}
table td{padding:5px 15px; border:solid 1px #ccc;}

@media screen and (max-width:960px){
    table td{padding:3px 10px; font-size:14px;}
}

/* ************************************************************************************************
NAGŁÓWEK
************************************************************************************************ */

.main-menu [aria-controls="mobileMenu"]{background-color:rgba(255,255,255,0.8); position:fixed !important; right:5px;}
.main-menu [aria-controls="mobileMenu"]:hover .material-icons{color:var(--url-header-icon)}

.header-top a:link,
.header-top a:visited{
    color:var(--url-header) !important;
    text-decoration:none;
}

.header-top a:hover,
.header-top a:active{
    color:var(--url-hover-header) !important;
    text-decoration:none;
}

.header-top a .material-icons,
.header-bottom .material-icons{color:var(--url-header-icon);}

.header-top a:hover .material-icons,
.header-bottom a:hover .material-icons{
    color:var(--url-hover-header-icon) !important;
}

.header-bottom .header-block__badge{background:var(--url-hover-header-icon);}
.search-widgets__dropdown{z-index:999;}

/* ************************************************************************************************
MENU GÓRNE
************************************************************************************************ */

.main-menu{width:100%; display:block; position:relative; background-color:var(--menu-top-1-background);}
.main-menu .js-menu-desktop{width:100%; display:block; position:relative;}
.main-menu #top-menu{
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

#top-menu a:link,
#top-menu a:visited{
    text-wrap:wrap;
    color:var(--menu-top-1-color) !important;
    background-color:var(--menu-top-1-bgcolor) !important;
    padding:12px 20px;
}

#top-menu a:hover,
#top-menu a:active{
    color:var(--menu-top-1-color-hover) !important;
    background-color:var(--menu-top-1-bgcolor-hover) !important;
}

#top-menu li:hover a{background-color:var(--menu-top-1-bgcolor-hover) !important;}
#top-menu a img{margin-top:-8px; margin-bottom:-4px; margin-left:-4px; margin-right:4px; position:relative; z-index:1}

#menu-mobile a:link,
#menu-mobile a:visited{
    text-wrap:wrap;
    color:var(--menu-top-1-color) !important;
}

#menu-mobile a:hover,
#menu-mobile a:active{
    color:var(--menu-top-1-color-hover) !important;
}

/* ZAZNACZENIE 1 RZĄD */
#top-menu .current a:link,
#top-menu .current a:visited,
#menu-mobile .current a:link,
#menu-mobile .current a:visited{
    color:var(--menu-top-1-color-hover) !important;
}
#top-menu ul[data-depth="0"] .current{background-color:#ff0000 !important;}

/* 2 RZĄD MENU */

#top-menu .js-sub-menu{
    left:auto;
    right:auto;
    top:auto;
    box-shadow:2px 1px 11px 2px rgba(0,0,0,.2);
    border:none;
    width:320px;
    min-width:320px;
    z-index:18;
    padding:0;
    margin:0;
    margin-top:10px;
    transition:0s;
    -moz-transition:0s;
    -webkit-transition:0s;
    -o-transition:0s;
}

.top-menu .js-sub-menu ul{margin:0;}
#top-menu .js-sub-menu li{margin:0 !important; padding:0 !important; width:100%; border-bottom:solid 1px #ededed;}
#top-menu .js-sub-menu li:last-child{border:0;}

#top-menu .js-sub-menu a:link,
#top-menu .js-sub-menu a:visited{
    text-wrap:wrap;
    color:var(--menu-top-2-color) !important;
    font-size:14px;
    font-weight:400;
    padding:10px 15px;
    background-color:var(--menu-top-2-bgcolor) !important;
    display:block;
}

#top-menu .js-sub-menu a:hover,
#top-menu .js-sub-menu a:active{
    color:var(--menu-top-2-color-hover) !important;
    background-color:var(--menu-top-2-bgcolor-hover) !important;
}

.menu--mobile .menu__link:link,
.menu--mobile .menu__link:visited{
    text-wrap:wrap;
    color:var(--menu-top-2-color) !important;
}

.menu--mobile .menu__link:hover,
.menu--mobile .menu__link:active{
    color:var(--menu-top-2-color-hover) !important;
}

/* ZAZNACZENIE 2 RZĄD */
#top-menu [data-depth="1"] .current a{color:var(--menu-top-2-color-hover) !important;}
.menu--mobile .current .menu__link{color:var(--menu-top-2-color-hover) !important;}

/* ************************************************************************************************
MENU LEWE
************************************************************************************************ */

.ps_categorytree a:link,
.ps_categorytree a:visited{color:var(--menu-left-1-color) !important;}

.ps_categorytree a:hover,
.ps_categorytree a:active{color:var(--menu-left-1-color-hover) !important;}

.category-tree__item.active > .category-tree__item__header.parent .category-tree__item__link{
    color:var(--menu-left-1-color-hover) !important;
}

/* ************************************************************************************************
SLIDESHOW
************************************************************************************************ */

.ratio-homeSlider{min-height:600px;}
.ratio-homeSlider, .ratio.ratio-homeSlider{min-height:600px;}

.ratio-homeSlider img{
    height:100% !important;
    object-fit:cover;
    object-position:center;
}

@media screen and (max-width:960px){
    .ratio-homeSlider{min-height:500px;}
    .ratio-homeSlider, .ratio.ratio-homeSlider{min-height:500px;}
}

#home-slider .display-1{text-transform:none !important; color:#fff; text-shadow:#000 1px 0 20px;}
.carousel .carousel-caption .caption-description{max-width:40rem;}

.caption-description p{
    display:flex;
    font-size:18px !important;
    color:#fff !important;
    text-shadow:#000 1px 0 20px;
}

.caption-description a{
    font-size:16px !important;
    display:block;
    padding:15px 30px;
    text-shadow:none;
    margin-left:5px;
    margin-right:5px;
}

.caption-description a:first-child{margin-left:0;}
.caption-description a:last-child{margin-right:0;}

.caption-description a:link,
.caption-description a:visited{
    color:var(--button-color);
    background-color:var(--button-bg);
    border-radius:6px;
}

.caption-description a:hover,
.caption-description a:active{
    color:var(--button-hover-color);
    background-color:var(--button-hover-bg);
}

.carousel .carousel-control-prev{left:0;}
.carousel .carousel-control-next{right:0;}

.carousel .carousel-control-next,
.carousel .carousel-control-prev{
    border-radius:0;
    width:30px;
    height:50px;
    transform:translateY(-50%);
}

.carousel .carousel-indicators button.active{background-color:#fff;}

/* ************************************************************************************************
SUBKATEGORIE
************************************************************************************************ */

.subcategory{display:block;}
.subcategory_img, .subcategory_title{width:100%; text-align:center;}
.subcategory_img img{padding-bottom:5px;}

/* ************************************************************************************************
PRODUKTY MINIATURKI
************************************************************************************************ */

.product-miniature__variants{padding-bottom:5px;}

/* ************************************************************************************************
GALERIA
************************************************************************************************ */

.thumbnails__container .thumbnail img{border:2px solid #eee;}
.thumbnails__container .thumbnail.active img{border:2px solid #000 !important;}

/* ************************************************************************************************
OZNACZENIA NA PRODUKTACH
************************************************************************************************ */

.badge.discount{
    background-color:#fff;
    border:0 solid #ff0000;
    box-shadow:inset 0 0 0 2px #ff0000;
    color:#ff0000;
}
.badge.new{background-color:#ff0000;}
.badge.pack{background-color:#30a900;}

/* ************************************************************************************************
STOPKA
************************************************************************************************ */

#footer, .footer-container .links ul{background-color:var(--kolor-tla-stopka);}

#footer .links .title{border-bottom:1px solid #444; margin-bottom:15px;}
#footer .footer-container .links ul>li{border-bottom:0;}
#footer .material-icons{color:var(--li_color);}

#footer a:link,
#footer a:visited{
    color:var(--url-stopka) !important;
    display:block;
}

#footer a:hover,
#footer a:active{
    color:var(--url-hover-stopka) !important;
}

#footer .collapse a{padding:3px;}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer .h2,
#footer .h3,
#footer .h3 a,
#footer .h4,
#footer .h4 a{
    font-size:19px;
    color:var(--naglowki-stopka) !important;
    font-weight:700 !important;
}

#footer,
#footer a,
#footer .collapse,
#footer .footer-container li a{
    font-size:15px;
    color:var(--kolor-stopka);
}

#footer ol,
#footer ul{
    padding-left:10px;
}

#footer li{
    list-style:none;
    position:relative;
    padding:0 0 0 13px !important;
}

#footer .collapse li:before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    height:6px;
    width:6px;
    border:1px solid var(--li_color);
    border-width:2px 2px 0 0;
    transform:rotate(45deg);
}