/*Hello Friends - message from BF. Reduce the risk of catastrophic syntax errors, place your custom css here whenever possible, the loadorder is after the other css files, so you shouldn't need to use !important tags on anything. */

/*Change highlight color - BF*/
a::-moz-selection,
p::-moz-selection,
div::-moz-selection,
span::-moz-selection,
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection,
input[type="text"]::-moz-selection,
textarea::-moz-selection,
li::-moz-selection,
code::-moz-selection,
pre::-moz-selection,
blockquote::-moz-selection,
em::-moz-selection,
strong::-moz-selection,
label::-moz-selection {
  color: #fff;
  background: #145cac;
}

a::selection,
p::selection,
div::selection,
span::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
input[type="text"]::selection,
textarea::selection,
li::selection,
code::selection,
pre::selection,
blockquote::selection,
em::selection,
strong::selection,
label::selection {
  color: #fff;
  background: #145cac;
}
/*For full width map section - BF*/
.map-desc {
    color: white;
    padding: 100px 30px 100px 10px;
}
.map-desc > div > h3 {
    color: white;
    font-weight: 600;
    font-size: 2.5rem;
}
.map-wide-columns {
    background-color:#145cac;
    margin-bottom: -6px;
    display: table;
    width: 100%;
}
@media screen and (min-width:1250px) {
    .page-header.categorybanner h1{
        max-width: 50%;
        transform: translate(50%)
}
    .adjust-for-form-nw {
        max-width: 70%;
    }
}
@media screen and (max-width:1249px) {
    .form-nw-background {
        display: none;
}
}
    @media (min-width: 768px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 750px) /2);
        }
    }
    @media (min-width: 992px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 970px) /2);
            width: calc(50% - ((100vw - 970px) /2));
        }
    }
    @media (min-width: 1200px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 1170px) /2);
            width: calc(50% - ((100vw - 1170px) /2));
        }
        .map-desc {
            padding: 100px 100px 0px 30px;
        }
    }
    @media (min-width:1350px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 1350px) /2);
            width: calc(50% - ((100vw - 1350px) /2));
        }
	}
/*removes in unnecessary gap at the top of the footer - BF*/
.wrapper-usps {
    margin-top: 0;
}

/*Contact Forms Styling - BF*/
.nw-contact-form-background {
    border-color: darkgrey;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
}

hr {
    margin-top: 0px;
    margin-bottom: 0px;
}
.nw-button-contact-form {
    background-color: #e34333;
    color: #fff;
    font-weight: bold;
}

/*For the contact form sections - those 3 in the popup - BF*/
.nw-contact-form-background {
    border-color: #ccc;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
}
.highlight-contact-inputs > .row {
    margin: 10px 0px 10px 0px;
    border-radius: 3px;
}
.highlight-contact-inputs {
    transition: background-color 0.6s;
}
@media (min-width: 1200px) {
    .nw-contact-form-background {
    max-width: 80%;
    }
}
.nw-contact-form-background {
    margin-left: auto;
    margin-right: auto;
}
.highlight-contact-inputs {
    transition: box-shadow 0.2s;
    word-break: break-word;
    background-color: #efefef20;
}
.highlight-contact-inputs:hover {
    box-shadow: 0px 0px 8px #00000020 inset;
}
hr {
    margin-top: 0px;
    margin-bottom: 0px;
}
.nw-button-contact-form {
    background-color: #e34333;
    color: #fff;
    font-weight: bold;
}

/*Change the style of the file upload boxes to drag and drop-ish - BF*/
input[type="file"] {
	position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
	width: 100%;
    padding: 30px;
	outline: none!important;
    text-align: center;
    transition: background 0.3s ease-in-out;
	transition: border-color 0.6s ease-in-out;
    border: 1px solid darkgrey;
	}
input[type="file"]:hover {
	background: rgba(0,0,0,0.06);
}

/*Smooths out the link hover effect on ALL links - so it doesn't hit so quick - BF*/
a {
    transition: color 0.2s, opacity 0.2s;
}

/*Product Page Zoomed Image Fix - BF*/
.zoomImg {
     background-color: white;
}

/*Fix to prevent horizontal scrolling of the whole webpage on safari - BF*/

html, body {
  overflow-x: hidden;
  width: 100%;
}

/*Installation Included Badge - BF*/
.savings-container {
    width: 100%;
    top: auto;
    bottom: 0;
    z-index: 1;
}
.installation-badge {
    display: flex;
    align-items: center;
    border-radius: 0px;
    white-space: normal;
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(20, 92, 172, 1);
    margin: 0 -1px;
    padding: 6px;
}
.thumbnail-image {
    overflow: visible;
}
.thumbnail .btn {
    font-size: 14pt;
    font-weight: 600;
}
.btn {
    outline: none!important;
}
.thumbnail {
    transition: box-shadow 0.2s ease-out;
    box-shadow: 0px 0px 2px transparent;
    border: 1px solid #ccc;
    background-color: #fcfcfc;

}
.thumbnail:hover {

    box-shadow: 1px 2px 4px #aaa;
    border: 1px solid transparent;
}
.thumbnail .caption {
    padding: 15px 10px;
    border-top: 1px solid #eee;
    overflow: hidden;
}
.thumbnail .caption h3 {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    min-height: 60px;
    max-height:60px;
    overflow: hidden;
    color: #275dae!important;
}
.thumbnail .caption h3 a {
    color: #275dae;
}
.thumbnail .product-image {
    background-color: #fff;
    object-fit: contain;
    aspect-ratio: 1 / 1.15;
    border-radius: 6px;
}
.thumbnail > .caption > .price {
    font-size: 16pt;
}
.thumbnail .btn {
    margin: 20px 0;
}
.thumbnail:hover .kw-badge-container {
    border-top: 46px solid #275dae;
}
.thumbnail:hover .installation-badge {
    margin-top: 2px;
    padding: 6px;
}
.wrapper-thumbnail {
    padding: 4px 8px!important;
}
.price a:visited {
    text-decoration: none;
}
.price a:focus {
    text-decoration: none;
}
.from {
    display: block;
    height: 21px;
}

/*Capacity badge on top of the product thumbs, we're using the triangle div trick to make it look like a ribbon (see the border-radius) - BF*/
.kw-badge-container {
    top: 0;
    margin-top: -4px;
    left: 20px;
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-left: 31px solid #275dae;
    border-right: 31px solid #275dae;
    border-bottom: 15px solid transparent;
    border-top: 37px solid #275dae;
    transition: border-top 0.6s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.kw-badge {
    position: absolute;
    background-color: transparent;
    font-weight: 600;
    font-size: 14pt;
    z-index: 2;
}
.kw-badge::after {
    content: "kW";
    font-size: 8pt;
}
/*Considering adding a slight shadow to the upper back of the ribbon - BF*/
/*.kw-badge-container::before {*/
/*    content:"";*/
/*    filter: blur(3px);*/
/*    z-index: -1;*/
/*    border-left: 28px solid rgba(00, 00, 00, 0.2);*/
/*    border-right: 28px solid rgba(00, 00, 00, 0.2);*/
/*    border-bottom: 15px solid transparent;*/
/*    border-top: 37px solid rgba(00, 00, 00, 0.2);*/
/*}*/

/*Added the +gst text to products that are without gst on the fron end - this is enabled / disabled with the includes gst toggle on the product page - BF*/
.price-gst {
    display:block;
}
.price-gst::after {
	content:"+gst";
	font-size: 8pt;
	vertical-align: super;
	margin-right: -23px;
}
/*Repositioned the Sales Badge Temporarily to the right, it also looks -mid- here, you might want to move it - play around with it below - BF*/
.sale {
    right: 10px;
    left: auto;
}

@media (max-width: 1199px) {
    .caption > .form-inline.buying-options {
        margin: 0 -10px;
    }
}
/*Adjust spacing around containers on the home page*/
#n_home > .wrapper-featured-grid {
    margin-top: 0px;
    margin-bottom: 0px;
}
#n_home > .wrapper-brands {
    margin-top: 80px;
}

.slick-track > .brand-item {
    padding-left: 5px;
    padding-right: 5px;
}

#n_home > .wrapper-popular .slick-track {
    display: flex;
}
#n_home > .wrapper-popular {
    margin-bottom: 0px;
}
.wrapper-brands > .container > .brands-slider {
    padding-bottom: 20px;
}
/*remove black ring around hovered links -bf*/
a:hover, a:focus {
    outline: none;
}

/*Custom brand grid for some category pages - BF*/
.dropdown-option {
    color: #545454;
    font-weight: 500;
}
.custom-brand-grid {
    display: flex;
    justify-content: center;
    padding: 0px!important;
}
.custom-brand-grid::before {
    content: none!important;
}
.custom-brand-align::before {
    content: none!important;
}

.custom-brand-align {
    display: grid;
    gap: 20px;
    box-sizing: border-box;
    margin: 0;
    padding: 0px!important;
}

@media (min-width: 1024px) {
    .custom-brand-align {
        grid-template-columns: repeat(6, 1fr); /* neto is a monkey "no understand flexgrid what silly human do", ignore errors -BF */ 
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .custom-brand-align {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 451px) and (max-width: 767px) {
    .custom-brand-align {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 450px) {
    .custom-brand-align {
        grid-template-columns: repeat(2, 1fr);
    }
}
.custom-brand-align > a {
    width: 100%; 
    background-color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: box-shadow 0.2s ease-out;
    box-shadow: 0px 0px 2px transparent;
    border: 1px solid #ccc;
}
.custom-brand-align > a:hover {
    box-shadow: 1px 2px 4px #aaa;
    border: 1px solid transparent;
}
.brand-logos img {
    width: 100%;
    margin: 10px 0;
}
/*The below overrides the default page header size on mobile > this doesn't affect the homepage advert - BF*/
@media (max-width: 767px) {
    .page-header.fullwidth {
        padding: 40vh 0;
    }
}
/*webpages have the capability to show an advert which overrides the default header, the below hides so the advert can re-enable the breadcrumbs when that header is shown - BF*/
.breadcrumbs-with-advert {
    margin-top: 20px;
    display: none;
}
/*Background grey for homepage on select elements - BF*/
.grey-back {
    background-color: #eee;
}
.wrapper-popular.grey-back {
    padding: 80px 0px;
    margin-top: 80px;
}
@media (max-width: 767px) {
    .wrapper-popular.grey-back {
    padding: 40px 0px 20px;
    }
}

/*adjustment for the brands slider - this better accounts for the navigation bullets on the home page - BF*/
#n_home > .wrapper-brands {
    margin: 60px 0px 40px;
}

/*hides the cart and accounts options in the header*/
#header-cart, .header-account, .mob-cart {
display:none!important;
}

/*makes the main menu dropdowns more interactive for better user mouse tracking*/
header .navbar-nav .dropdown-menu > li > a {
    transition: padding-left 0.2s ease-in-out;
}
header .navbar-nav .dropdown-menu > li > a:hover {
    background-color: #efefef40;
    padding-left: 23px;
}
.wrapper-logo .logo {
    margin-top: 25px;
}
@media (max-width: 991px) {
.wrapper-logo .logo {
    margin-bottom: 25px;
}
}
/*ducted product specifics selectors*/
._itmspec_listopt {
    padding-top: 15px;
}
._itmspec_listopt .specific {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
._itmspec_selected {
    padding: 0;
}
._itmspec_listitm {
  font-weight: bold;
  color: #275dae;
  background: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 3px;
  margin: 10px;
  text-align: center;
  width: 100%;
  box-shadow: 0px 0px 2px transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
._itmspec_listitm:has(._itmspec_selected) {
  box-shadow: none!important;
  border-color: rgb(20, 92, 172)!important;
  background-color: white!important;
}

@media (min-width: 425px) {
  ._itmspec_listitm {
    width: calc(33.333% - 20px);
  }
}

._itmspec_listitm:hover {
  box-shadow: 1px 2px 4px #aaa;
  border-color: rgb(20, 92, 172);
}

/* Inside anchor */
._itmspec_lnk {
  display: block;
  color: inherit;
  text-decoration: none!important;
  padding-bottom: 10px;
}

._itmspec_lnk img {
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.ducted-archive-badge {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0px 6px;
    border: 1px #aaa solid;
    border-radius: 10px;
    width: fit-content;
    background-color: #fff;
    text-align: left;
    margin-top: -24px;
}
.ducted-archive-badge-wrapper {
    position: absolute;
    margin-top: -25px;
    justify-self: anchor-center;
}

.list-group ul, #side-filtervar-1 ul:not(:has(li:nth-child(7))) {
  column-count: 1;
}

.list-group ul, #side-filtervar-1 ul:has(li:nth-child(7)) {
  column-count: 2;
  column-gap: 1rem;
}

.list-group ul:has(.filter-colour) {
  column-count:1;
  column-gap: 1rem;
}

/*Ensure that the homepage banner takes the full img height and scales it down*/
.wrapper-carousel .advert-carousel {
    max-height: none;
}