/**
 * Client Styles - Givera
 * =======================
 * Tutaj dodawaj wlasne style CSS.
 * Ten plik laduje sie jako ostatni i nadpisuje wszystkie inne style.
 */

/* Twoje style ponizej: */

 /* ##EA412A  - black*/
 /* #292C2C  - dark gray */
/* #B4B2B1  - gray */
/* #EA412A - primay red */
/* #DBDCD9 - light gray */


:root{
    --color-dark-gray: #292C2C;
    --color-primary: #EA412A;
    --color-black: #000000;
    --color-light-gray: #DBDCD9;
    --color-gray: #B4B2B1;
}


#header .header-top-main.bg_main #cpheadercms2 .offer-link a, .ap-total-wishlist, .ap-total-compare, .cart-products-counthome, .customNavigation i.next:hover::before, .customNavigation i.prev:hover::before, .special-products .products .product_list .product-actions .btn.add-to-cart:hover, .special-products .products .product_list .product-actions-main .btn.add-to-cart:hover, #left-column .block_content .allproducts, .btn:focus, .btn, .btn-primary, .btn-secondary, .btn-tertiary, .products .product_list li .product-miniature .product-actions-main .view_detail, .products .product_list li .product-miniature .product-actions .view_detail, .products-sort-order .select-list:hover, #js-product-list .product_list.gridcount.list li.product_item .product-actions-main .view_detail, #js-product-list .product_list.gridcount.list li.product_item .product-actions .view_detail, body#checkout [data-action="show-password"], .custom-radio input[type="radio"]:checked + span, #authentication [data-action="show-password"], .input-group .input-group-btn > .btn, #cpnavcmsblock .contact_description a::before, .pagination .current a, .pagination a:hover, .cpcategory-container .categoryblock .block_content .categorylist .cate-btn a:hover, .checkout-step li.nav-item .nav-link.active, .search-widget form button[type="submit"]:hover, #header .header-top .header_logo::before, .cat-title.title2, .Recnet-blog .pagination li.active > span, .blog-image .blogicons .icon:hover::before, .blog-image .blogicons .icon:active::before, .blog-image .blogicons .icon:focus::before, #left-column #cpinstagramblock .products-section-title, #cpinstagramblock .instagramblock .instagram_list article.instagram_item a::before, #cpinstagramblock .instagramblock .instagram_list article.item a::before, #header .header-top .header_logo a::before, #cpnavcmsblock .contact_description .offer-icon::before, #header .vertical_currency li.current a.dropdown-item, #header .vertical_currency ul.dropdown-menu li:hover a, #cp_sidevertical_menu_top .title_main_menu, #index .tabs .nav-tabs .nav-link.active, .cart_block.block.exclusive .top-block-cart, #_desktop_user_info .user-info .logout.hidden-md-down, .newsletter-form a.button, .flexslider .flex-direction-nav .flex-next:hover, .flexslider .flex-direction-nav .flex-prev:hover, .block-promo .promo-input + button, .product-quantity .add .btn.btn-primary.checkout_button, #_desktop_user_info .user-info .logout.hidden-md-down:hover, .cart_block .toggle-title, .cart_block .close-icon{
    color:white !important;
    text-decoration: none !important;
    text-transform: none !important;
}

#index .tabs .nav-tabs .nav-link{
    background-color: var(--color-dark-gray)   ;
    color: white;
}



/* Submenu głównego menu headera - ciemne tło */
#header .menu > .top-menu > li > .sub-menu {
    background-color: var(--color-dark-gray);
}

/* Linki w rozwijanym menu głównego headera */
#header .menu > .top-menu .sub-menu a,
#header .menu > .top-menu .sub-menu .dropdown-item {
    color: white !important;
    margin-inline: 10px;
}

#header .menu > .top-menu .sub-menu a:hover,
#header .menu > .top-menu .sub-menu a.active,
#header .menu > .top-menu .sub-menu .dropdown-item:hover,
#header .menu > .top-menu .sub-menu .dropdown-item.active {
    color: var(--color-primary) !important;
}

/* Wyrównanie elementów w submenu głównego headera */
#header .menu > .top-menu .sub-menu li,
#header .menu > .top-menu .sub-menu .dropdown-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#header .menu > .top-menu .sub-menu ul {
    padding: 10px 15px !important;
    gap: 0 !important;
}


#breadcrumb_wrapper, .products-selection{
    background: var(--color-light-gray) !important;
}

/* ===========================================
   MENU BOCZNE - style
   =========================================== */

/* Tło menu bocznego i submenu */
#cp_sidevertical_menu_top.slide,
#cp_sidevertical_menu_top .sub-menu {
    background-color: var(--color-dark-gray) !important;
}
#cp_sidevertical_menu_top .top-menu[data-depth="1"] li a::before, #cp_sidevertical_menu_top .top-menu[data-depth="2"] li a::before, #cp_sidevertical_menu_top .top-menu[data-depth="3"] li a::before{
    background-color: var(--color-primary) !important;
    left: -3px;
  top: 17px;
}
/* Linki w menu bocznym - białe na ciemnym tle */
#cp_sidevertical_menu_top .top-menu a,
#cp_sidevertical_menu_top .top-menu .dropdown-item,
#cp_sidevertical_menu_top .sub-menu a,
#cp_sidevertical_menu_top .sub-menu .dropdown-item {
    color: white !important;
}

#cp_sidevertical_menu_top .top-menu a:hover,
#cp_sidevertical_menu_top .top-menu .dropdown-item:hover,
#cp_sidevertical_menu_top .sub-menu a:hover,
#cp_sidevertical_menu_top .sub-menu .dropdown-item:hover {
    color: var(--color-primary) !important;
}

/* Strzałki dropdown - kolor primary */
#cp_sidevertical_menu_top .navbar-toggler .material-icons,
#cp_sidevertical_menu_top .collapse-icons .material-icons,
#cp_sidevertical_menu_top .navbar-toggler i,
#cp_sidevertical_menu_top .collapse-icons i {
    color: var(--color-primary) !important;
}

/* Nagłówek menu bocznego - primary background */
.vertical-side-top-text {
    background-color: var(--color-primary) !important;
}

.vertical-side-top-text a,
.vertical-side-top-text span,
.vertical-side-top-text {
    color: white !important;
}
#header .header-top .header_logo{
    max-width: 125px;;
}

#cp_sidevertical_menu_top{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#sidevertical_menu{flex-grow:1;}
.verticalmenu-side #cpheadercms1 .contact-link {
    color:white;
}

#header .header-nav .right-nav{margin-left:auto;}

/* ===========================================
   HEADER - mniejsze rozmiary
   =========================================== */

/* Cała belka headera - mniejsza wysokość */
#header .header-top {
    min-height: auto !important;
    padding: 5px 0 !important;
}

/* Kontener headera - stała wysokość */
.header-top .header-div > .container {
    min-height: 65px;
}

/* Menu środkowe - mniejszy padding na linkach */
#header .top-menu > li > a.dropdown-item,
#header .top-menu > li > a,
#header .menu .top-menu a.dropdown-item {
    padding: 10px 0 !important;
}

/* Ikonki po prawej w header-right */
#header .header-right .material-icons,
#header .header-right i {
    font-size: 22px !important;
}

/* Badge'e przy ikonkach */
#header .header-right .cart-products-count,
#header .header-right .cart-products-counthome,
#header .header-right .ap-total-wishlist,
#header .header-right .ap-total-compare {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 4px !important;
}

/* Kontener header-right */
#header .header-right {
    gap: 10px !important;
}

#header .header-right > div,
#header .header-right > ul > li,
#header .header-right .blockcart,
#header .header-right .user-info {
    padding: 0 8px !important;
    font-size: 12px !important;
}

/* Fixed/sticky header - jeszcze mniejszy */
body.sticky-header #header .header-top,
#header.is-sticky .header-top,
#header.fixed .header-top {
    padding: 3px 0 !important;
}

body.sticky-header #header .header-right .material-icons,
#header.is-sticky .header-right .material-icons,
#header.fixed .header-right .material-icons {
    font-size: 20px !important;
}

/* ===========================================
   SLIDER - stale wymiary
   =========================================== */
#carousel {
    height: 66vw;
    max-height: 90vh;
    margin-bottom: 0;
    overflow: hidden;
}

#carousel .carousel-inner {
    height: 100%;
}

#carousel .carousel-item {
    height: 100%;
}

#carousel .carousel-item figure {
    height: 100%;
    margin: 0;
}

#carousel .carousel-item figure a {
    display: block;
    height: 100%;
}

#carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Caption - flexbox, wycentrowany pionowo, do lewej */
#carousel .carousel-item .caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#carousel .carousel-item .slide-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Przycisk - nie rozciagaj na pelna szerokosc */
#carousel .carousel-item .btn,
#carousel .carousel-item .btn-default {
    display: inline-block;
    width: auto;
}
.carousel .carousel-item .caption .slide-text .slidertext2 span{
    color:var(--color-primary);
}

.carousel .carousel-control:hover .icon-next i, .carousel .carousel-control:hover .icon-prev i {
    color: var(--color-primary);
}

/* Centrowanie ikon nawigacji slidera */
#carousel .carousel-control span {
    display: flex;
    align-items: center;
    justify-content: center;
}

#carousel .carousel-control span i.material-icons {
    position: relative;
    top: 3px;
    left: 0;
    transform: none;
}


.cpcategory-container .categoryblock .block_content{
    background:var(--color-dark-gray);
    padding: 0 0 30px 0;
}
.cpcategory-container .cate-heading a{
   color:white;
}

/* Obrazki kategorii - stale wymiary */
.cpcategory-container .block_content img,
.cpcategory-container .block_content .img-responsive {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
    display: block;
}



#cpcmsbanner1_block1 img {
    width: 690px !important;
    height: 387px !important;
    object-fit: cover;
}
@media all and (max-width:765px){
#cpcmsbanner1_block1 img {
	height:unset;
}
}
@media (max-width: 991px) {
    #carousel .carousel-control span i.material-icons {
        top: 0;
    }

    /* Mniejsze przyciski nawigacji na mobile */
    #carousel .left.carousel-control,
    #carousel .right.carousel-control {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #carousel .left.carousel-control {
        left: 10px;
    }

    #carousel .right.carousel-control {
        right: 10px;
    }

    #carousel .carousel-control span {
        width: 100%;
        height: 100%;
    }
}

/* Mobile */
@media (max-width: 991px) {
    #carousel,
    #carousel .carousel-inner,
    #carousel .carousel-item,
    #carousel .carousel-item figure,
    #carousel .carousel-item img
   {
        height: 80vw;
        max-height: 80vw;
    }

    #carousel .carousel-item .slide-text {
         padding:20px 60px
    }
}


/* Tytuly serwisow - bez kapitalizacji */
.service_title1, #left-column .block .block_title, .text-uppercase.h6, .contact-link, .btn, .footer-container .links .h3, .footer-container .links h3, .footer-container .links h3 a, #left-column .block .block_title, .text-uppercase.h6, .block-social, #product .product-tabcontent .nav-link{
    text-transform: none;
}


.service_block_inner{
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.service_content{
    text-align: center;
}

#cpserviceblock{
    background-color: var(--color-dark-gray);
    color:white;
    margin:0;
    padding:30px 0;
}

#cpserviceblock .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.service-cms-banner-list{
    flex-grow:1;
    max-width: 50%;
}

.service_content::after {
    display: none; 
}

#cptestimonial .owl-carousel{
    padding: 0 20px;
}

/* .testimonial-block-part .cptestimonial-container{
    background-color: var(--color-dark-gray);
} */

.brands{
    background-color: var(--color-dark-gray);
    color:white;
}

.brands .products-section-title{
    color:white;
}