/* =========================================================
   BBQ GRILL TIME - CUSTOM CSS
========================================================= */


/* =========================================================
   FOOTER
========================================================= */

#footer {
    background-color: #07111D !important;
    color: #BFC5CA;
}

#footer .footer-info {
    background-color: #07111D !important;
}

#footer .widget-title {
    color: #FFFFFF !important;
}

#footer a {
    color: #BFC5CA;
}

#footer a:hover {
    color: #C32026;
}

#footer .border-top {
    border-color: #283441 !important;
}


/* =========================================================
   HOMEPAGE - CATEGORIEËN
   Desktop: 4 kolommen
   Mobiel: 2 kolommen
========================================================= */

.bgt-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #071523 !important;
}

.bgt-category-grid > a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.bgt-category-grid > a > img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition: transform 0.2s ease;
}

.bgt-category-grid > a:hover > img {
    transform: scale(1.015);
}

@media (max-width: 767px) {
    .bgt-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }
}


/* =========================================================
   HOMEPAGE - MERKEN
   Desktop: 6 kolommen
   Mobiel: 3 kolommen
========================================================= */

.bgt-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #071523 !important;
}

.bgt-brand-grid > a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    line-height: 0 !important;
}

.bgt-brand-grid > a > img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bgt-brand-grid > a:hover > img {
    transform: scale(1.04);
    filter: brightness(1.12);
}

@media (max-width: 767px) {
    .bgt-brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   HOMEPAGE - FUEL YOUR FIRE
========================================================= */

.bgt-bottom {
    display: grid !important;
    grid-template-columns: 1.5fr repeat(4, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #071523 !important;
    overflow: hidden !important;
}

.bgt-bottom > a,
.bgt-bottom-intro {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

.bgt-bottom img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.bgt-bottom > a img {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.bgt-bottom > a:hover img {
    transform: scale(1.025);
    filter: brightness(1.08);
}


/* Tablet */
@media (max-width: 991px) {
    .bgt-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .bgt-bottom-intro {
        grid-column: 1 / -1 !important;
    }
}


/* Mobiel */
@media (max-width: 767px) {
    .bgt-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .bgt-bottom-intro {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   HOMEPAGE - FOOTER USP BANNER
========================================================= */

.bgt-footer-home {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    background: #071523 !important;
}

.bgt-footer-home img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* =========================================================
   HEADER - ZOEKBALK
========================================================= */

/* Complete zoekbalk */
#bb-form-quick-search {
    background: #101923 !important;
    border: 1px solid #344250 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}


/* Categorieblok links */
#bb-form-quick-search .form-group--icon {
    background: #151E27 !important;
    border: 0 !important;
    border-right: 1px solid #344250 !important;
}


/* Zichtbare categorie-selector */
#bb-form-quick-search .product-category-label {
    background: #151E27 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}


/* Tekst 'Alle categorieën' */
#bb-form-quick-search .product-category-label .text,
#bb-form-quick-search .product-category-label label {
    background: transparent !important;
    color: #FFFFFF !important;
}


/* Pijltje */
#bb-form-quick-search .product-category-label .svg-icon,
#bb-form-quick-search .product-category-label svg,
#bb-form-quick-search .product-category-label use {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* Onderliggende select */
#bb-form-quick-search #product-category-select,
#bb-form-quick-search .product-category-select {
    background: #151E27 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Opties dropdown */
#bb-form-quick-search #product-category-select option {
    background: #151E27 !important;
    color: #FFFFFF !important;
}


/* Zoekveld */
#bb-form-quick-search .input-search-product {
    background: #101923 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Placeholder */
#bb-form-quick-search .input-search-product::placeholder {
    color: #AEB6BF !important;
    opacity: 1 !important;
}


/* Zoekknop */
#bb-form-quick-search button {
    background: #C91F26 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    transition: background-color 0.2s ease !important;
}


/* Zoekknop hover */
#bb-form-quick-search button:hover {
    background: #E1262D !important;
}


/* Zoekicoon */
#bb-form-quick-search button i,
#bb-form-quick-search button svg {
    color: #FFFFFF !important;
    fill: currentColor !important;
}


/* Focus */
#bb-form-quick-search:focus-within {
    border-color: #C91F26 !important;
}