/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*** NEEDED FIXES ***/
/*** NEEDED FIXES ***/
/*** NEEDED FIXES ***/

/* stretch nav so there wont be hole between button and popup - it was then impossible to click on popup */
.header-top > .inner > .wrapper > .container > .row {
    align-items: stretch;

    .menu-float {
        height: 100%;

        .deo-horizontal-menu {
            height: 100%;

            .megamenu-content {
                height: 100%;

                .nav.navbar-nav.horizontal {
                    height: 100%;

                    :after {
                        content: "";
                        display: table;
                        clear: both;
                    }

                    .nav-item {
                        height: 100%;

                        .nav-link {
                            align-content: center;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}

/* socials login disabled, but still showing?? */
.deo-social-line-spacing, .deo-social-login-links {
    display: none;
}

/*** ALEKSKAEBRE ***/

/* transparent top nav - only when scrolled */
.header-top {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* custom color */
body {
    background-color: #fffaf4;
}

h1, h2, h3, h4, h5, h6, a,
.block,
.popup-over .popup-content .dropdown-item,
.thumbnail-container .product-title a,
.DeoBlogs .blog-title a {
    color: #1e0c0b;
}

.logo.DeoLogoStore {
    width: 100%;
}

/* make client logo better fited */
body:not(.deo-is-mobile) .left-bottom-header {
    padding: 0;

    .logo.DeoLogoStore {
        padding: 0 !important;
    }
}

/* default top paddings are to big */
.box-space-before {
    padding-top: 30px;
}

@media (max-width: 991px) {
    .box-space-before {
        padding-top: 30px;
    }
}

/* default bottom margins are too big */
.box-start, .box-newsletter, .box-about-us, .box-fake-number-static, .box-text-shop-now, .box-banner-text, .box-blog, .box-manufacturers, .box-banner, .box-categories, .box-service, .box-product-tabs, .box-products, .box-products-featured, .box-product {
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .box-start, .box-newsletter, .box-about-us, .box-fake-number-static, .box-text-shop-now, .box-banner-text, .box-blog, .box-manufacturers, .box-banner, .box-categories, .box-service, .box-product-tabs, .box-products, .box-products-featured, .box-product {
        margin-bottom: 30px;
    }
}

/* Hide social block title / icons monochromatic */
.block-social {
    text-align: left !important;
    margin: 10px;

    .box-title {
        display: none !important;
    }
    i:before {
        color: #1e0c0b;
    }
}

.box-middle-footer > div:not(:first-child) > * {
    justify-self: center;
}

/* Remove annoying finger icon on hover */
@media (min-width: 768px) {
    .DeoBlockLink:not(.block-link-inline) ul li a:hover{
        padding-left: 0;

        &:before {
            display: none !important;
        }
    }
}

/* added nice border to service box info */
.box-service, .block_newsletter {
    margin-top: 20px;
    border: 1px solid #eaeaea;
    background: #ffffff99;
}

/* nice color for top footer */
.footer-top {
    background: #1e0c0b;
}

/* logo as text in footer */
.box-middle-footer .logo-footer-text {
    font-family: serif;
    font-size: xx-large;
}

/* default footer is too big */
@media (min-width: 992px) {
    .box-middle-footer {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* make payment's image centered vertically */
.payment {
    align-content: center;
}



/*** CUSTOM CHANGES ***/
/*** CUSTOM CHANGES ***/
/*** CUSTOM CHANGES ***/

body#contact div.row {
    /* contact info centered */
    display: flex;
    justify-content: center;
    
    /* hide contact form */
    > #content-wrapper {
        display: none;
    }
}

/* make nav elements bigger */
.box-bottom-header .megamenu .content-menu .title .menu-title {
    font-size: 17px;
}

.box-bottom-header .right-bottom-header i:before {
    font-size: 24px;
}

body#category .row > #left-column {
    margin-bottom: 25px;
}

/* categories list always visible - even on mobile - except when filters pops up in mobile */
body#category #left-column #block-categories:has(+ #search_filters_wrapper:is(.hidden-sm-down)) {
    display: block !important;
}

/* left block and content full width - client wants */
@media (min-width: 768px) {
    body#category .row > #left-column-toggler {
        text-align: center;
        font-size: 16px;
        background-color: #f8f8f8;
        margin: 0 10px;
        padding: 5px;
        border-bottom: 1px solid lightgrey;
        cursor: pointer;

        &[aria-expanded="true"]:before {
            content: "Kliknij, aby schować kategorie i filtry";
        }

        &[aria-expanded="false"]:before {
            content: "Kliknij, aby pokazać kategorie i filtry";
        }

        &[aria-expanded="false"]:has(~ #left-column:not(.collapsing)) {
            margin-bottom: 25px;
        }
    }

    body#category .row > #left-column {
        width: 100%;
        display: flex;

        /* Hideable categories and filters block - hide when collapsed (show when still collapsing) */
        &.collapse[aria-expanded="false"] {
            display: none !important;
        }

        /* hide everything in sidebar except categories and filters */
        > :not(#block-categories, #search_filters_wrapper) {
            display: none !important;
        }

        /* categories block gets only needed width */
        > #block-categories {
            flex-shrink: 0;
        }

        /* filters gets all remaining width */
        > #search_filters_wrapper {
            flex-grow: 1;
            margin-top: 0;
        }

        #js-active-search-filters {
            ul {
                display: flex;
                flex-wrap: wrap;

                .filter-block {
                    margin: 0 5px 5px 0;
                }
            }
        }

        #search_filters {
            display: flex;
            flex-wrap: wrap;

            .js-search-filters-clear-all {
                display: none;
            }

            .facet {
                flex-grow: 1;
                max-width: 25%;
                min-width: 15%;
                margin: 6px;

                /* scrollable when a lot of filters */
                .collapse {
                    overflow-y: auto;
                    max-height: 150px;
                }

                /* fancy scrollbar - similar to mobile */
                .collapse::-webkit-scrollbar {
                    width: 7px;
                    border-radius: 7px;
                    background: white;
                }
                .collapse::-webkit-scrollbar-thumb {
                    border-radius: 7px;
                    background: rgba(27, 188, 155, 0.8);
                }
            }
        }
    }

    body#category .row > #content-wrapper {
        width: 100%;
    }
}

.container:has(#custom-banner) {
	font-family: "Playfair Display", serif;
	color: white;
	padding: 10px 0;
    margin: 0;
    width: 100%;
}
