/* Custom Properties */

:root {

	/* Pallet */

	--colour-theme-blue: #283e49; /*  HSL: 215,96%,17 / RGB: 4,43,96 */
	--colour-theme-yellow: #c9a253;

	--colour-theme-text-default: #353535; /* HSL: 0,0,22 / RGB: 53,53,53 */

	--svg-filter-theme-blue: brightness(0) saturate(100%) invert(20%) sepia(15%) saturate(1195%) hue-rotate(155deg) brightness(91%) contrast(88%);
	--svg-filter-theme-yellow: brightness(0) saturate(100%) invert(78%) sepia(34%) saturate(698%) hue-rotate(352deg) brightness(84%) contrast(85%);

	--colour-white: #FFF;
	--colour-black: #000;

	--svg-filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(157deg) brightness(113%) contrast(101%);
	--svg-filter-black: brightness(0) saturate(100%);
	

	--theme-border-radius: 1rem;
	--theme-box-shadow: 0px 0px 6px rgba(0,0,0,.2);

	/* Defaults */
	
	--default-background-color: var(--colour-white);
	--default-transparancy: rgba(0,0,0,0);

	--default-border-radius: 0.4rem;
	--default-btn-border-radius: 30%;

	--default-font: "Poppins", Arial, Helvetica, sans-serif;
	--default-font-heading: "Poppins", Arial, Helvetica, sans-serif;
	--default-font-btns: "Poppins", Arial, Helvetica, sans-serif;
	
	--default-font-colour: var(--colour-theme-blue);
	--default-font-size: 16px;
	--default-font-weight: 400;

	--default-heading-size: 1.6rem;
	--default-heading-small: 1.2rem;
	--default-heading-large: 1.8rem;
	--default-heading-largest: 2rem;

}

/* Global */

*{
    padding:0; margin:0; box-sizing: border-box;
}

img{max-width:100%;}

html, body{
    scroll-behavior: smooth; scroll-margin: 300px;
}

body{
    background-color: var(--default-background-color);
    font-family: var(--default-font);
    color: var(--default-font-colour);
}

main{
    min-height: 100dvh; min-width: 100dvw;
    padding: 0 0 2rem 0;
}

section{
    width: 100%; padding: 2rem;
}

section + section{
    padding: 2rem; padding-bottom: 0;   
}

@media(max-width: 50rem){
    section + section{
        padding: 0 2rem;
    }   
}

.section-inner{
    max-width: 1200px; margin-inline: auto;
    background-color: transparent;
}

/* links */

a{
    color: inherit; text-decoration: none;
}

a:hover{
    color: var(--colour-theme-yellow);
}

/* btns */

.btn-row{
    display: flex; gap: 1rem;
    padding: .5rem 0;
}

@media(max-width: 50rem){
    .btn-row{
        flex-direction:column;
    }  
}

.btn-row .btn{
    background-color: var(--colour-theme-blue);
    color: white;
    border-radius: .5rem;
    padding: .5rem 1rem;   
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);  
    cursor: pointer;   
}

.btn-row .btn:hover{
    background-color: var(--colour-theme-yellow);
    color: white;
}

.icon-white {
    fill: var(--colour-white);
    filter: var(--svg-filter-white);
  }

/* Nav tabs */
.nav-tabs{margin-top:2rem;}

/* Headings */

h1,h2,h3,h4,h5,h6{
	line-height: 1; margin:.5rem 0; padding:0;
    color: var(--colour-theme-blue);
}

h1{font-size: 3.5rem; margin-bottom: 1rem;}
h2{font-size: 2rem;}
h3{font-size: 1.5rem;}
h4,h5,h6{font-size: 1.2rem;}

.section-heading{
    user-select: none;
}

.hide{
    display: none;
    visibility: collapse;
}

@media (max-width: 50rem) {

	h1{font-size: 2rem; margin-bottom: .5rem;}
	h2{font-size: 1.5rem;}
	h3{font-size: 1.2rem;}
	h4,h5,h6{font-size: 1rem;}

}

/* Components */

/* Intro */
#intro .section-inner,
#campaign .section-inner {
    display: flex; gap: 2rem; align-items: start;
}

#intro .section-inner > *,
#campaign .section-inner > *{
    flex:1;
}

#intro p{
    margin:0;
}

.gallery-image img{
    --_max-height: 250px;
}

#campaign .primary .gallery-image img{
    max-height: calc( (var(--_max-height) * 2) + 1rem);
    object-position: left center;
}

#intro .section-inner {gap: 2rem;}

#intro p{max-width: 80%;}

#intro .stats{
    display: flex; flex-direction: column; gap: 2rem; font-size: .8rem;
    padding-left: 2rem;  border-left: 1px solid #b3b3b3;
}

#intro .stat-data {
    display: flex; flex-direction: column; gap: 1rem; align-items: start;
}

#intro .stat-data > * strong {
    display: block;
}

#intro dl{
    display: flex; gap: 1rem; align-items: center;
}

.finish{
    font-size: .8rem;
}

.finish .finish-options{
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: start;
}

.finish .finish-options > *{
    flex: 0 1 fit-content;  
    display: flex; justify-content: start; align-items: center; gap: .5rem;
}

.stat-data-sizes{
    width: 100%;
    display: flex; gap: 1rem;
}

.stat-data-sizes > * {
    flex: 1;
}

#intro .btn{
    width: fit-content;
    user-select: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background: white;
    color: black;
    border: 0;
    border-radius: .5rem;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: flex; align-items: center; gap: .5rem;
}

#intro .btn span{
    font-size: .65rem;
}

/*
#intro .title{flex-basis:60%;width:60%;padding-left:1rem;}
*/
@media(max-width:50em){
    
    #intro .section-inner{
        flex-direction: column;
    }

    #intro .title{width:100%;}
}


/* Gallery Images 

.gallery-image:first-of-type{
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-image:first-of-type img{
  --_max-height: 500px;
  max-height: calc(500px + 1rem);
}
*/

/* Modal */

.modal {
    background-color: rgba(0,0,0,.7);
}

.modal-container{
    display: none;
}

.modal-dialog{
    --bs-modal-width: calc(100vw - 30%);
    width: var(--bs-modal-width);
    max-width: var(--bs-modal-width)!important;
    margin: 0 auto;
}



.modal-content{
    background-color: transparent;
}

.modal-content, .modal-header{
    border: 0;
}

.close{
    color: #fff;
}

.modal-body{
    position: relative;
    display: flex; align-items: center; justify-content: center;
}

.modal-body-inner{
    display: flex; align-items: center; justify-content: center;
}

#modalGallery .modal-body, #modalOption .modal-body{
    background: white; border-radius: 1rem;
    overflow: hidden; 
}

.gallery-image-container, .option-image-container{
    aspect-ratio: 16/9; height: 100%; width: 100%;
    display: flex; justify-content: center; align-items: center;
    background: white; border-radius: 1rem;  
}

.option-image-container{
    display: grid; place-items: center; align-items: center;
}

.option-image-container > *{
    grid-row: 1/1; grid-column: 1/1;
}

.option-image-container .label{
    place-self: end center; z-index:2;
    padding: 1rem; width:100%;
}

.option-image-container .label .title{font-size: 1.25rem; color: #222;}
.option-image-container .label .sku{font-size: 0.8rem; color: #555;}
.option-image-container .label .availability{font-size: .7rem; color: #888;}

.gallery-image-main, .option-image-main{
    aspect-ratio: 16/9;
    object-fit: contain; object-position: center center;
    height: 100%; width: auto;
    border-radius: 1rem;
    margin: 0 auto;
}


.gallery-control, .option-control{
    background:white;
    padding: 1rem;
    width:fit-content; height: 100%;
    position: absolute; z-index:1;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: black;
    cursor: pointer; 
    top:0; left:unset;
    user-select: none; 
}

.gallery-control > *, .option-control > *{
    pointer-events: none;
}

.gallery-control.next-image, .option-control.next-image{
    right:0;
}

.gallery-control.prev-image, .option-control.prev-image{
    left:0;
}

@media(max-width: 73em){
    .modal-dialog{ --bs-modal-width: calc(100vw - 0%); }
}

/* Header */

    header{
        position: -webkit-sticky; position: sticky; top: 0; z-index: 999;
        background: #fff;
    }

    header .section-inner{
        max-width: 1320px; padding: 1rem;
        display: flex;	gap: 2rem;  align-items: center; justify-content: space-between;    
    }

    header .section-inner > *{
        display: flex;	gap: 2rem; align-items: center; justify-content: space-between;
    }

    .header-nav{
        flex: 2;
    }    

    /* Nav */

    nav > ul{
        padding: 0; margin: 0;
        display: flex; gap: 1rem;
        list-style-type: none;
    }

    nav{display: flex; gap: 2rem; align-items: center; justify-content: space-between;}

    nav.flow ul{flex-wrap: wrap;}

    .mobile-toggle{
        display: none; cursor: pointer;
    }

    .nav-items,
    .social-items{
        --_menu-font-size: .95rem;
        --_menu-line-height: 1rem;
        display: flex; gap: 1rem; justify-content: start; align-items: center;
        margin:0; padding: .75rem 1rem .5rem;
        flex:0 1 fit-content;	
    }

    .nav-item{
        flex: 0 1 fit-content;
        padding: 0 .5rem;  
        font-size: var(--_menu-font-size); line-height: var(--_menu-line-height);
        font-weight: 400;
        color: currentColor;
        text-transform: uppercase;
    }

    .nav-item a,
    .nav-item a:visited{
        text-decoration: none; color: currentColor; line-height: 1;
    }

    .nav-item a.active,
    .nav-item a:hover,
    .nav-item a:focus{
        color: var(--colour-theme-yellow);
    }

    .social-items .nav-item{
        padding:0;
    }

    @media(max-width: 73em){

        .mobile-toggle{
            display: flex;
        }

        header .section-inner{
            display: flex; flex-direction: column;
            flex-wrap: nowrap;
        }

        header .section-inner > *{width:100%;}    

        header .section-inner nav{
            display: none;
        }

        header.active nav {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        header.active nav ul {
            display: flex;
        }

        header.active nav ul:not(.social-items){
            flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
        }    

    }


    /* Footer */

    footer .container{
        padding-block: 2rem;
        border-top: 1px solid rgba(0,0,0,.4);
    }

    footer nav > ul{
        flex-direction: column; gap:.5rem;
    }
    
    .footer-nav{
        display: flex; gap: 2rem; align-items: start; justify-content: space-between;
    }

    .footer-nav > * {
        flex:1;
    }
    
    @media(max-width:50rem){
    
        .footer-nav{
            flex-wrap: wrap;
        }
    
        .footer-nav > * {
            flex-basis: calc(50% - 2rem);
        }
    
        footer nav > ul{
            width: 100%; align-items: center; justify-content: center;
        }
    
    }
    
    .footer-copyright{
        display:flex; gap:2rem; align-items: center; justify-content:start; padding-block:2rem; border-top:1px solid rgba(0,0,0,.3);
    }
    
    .footer-content{
        display:flex; flex-direction:column; gap:.5rem; justify-content:start; padding-inline:2rem; border-left:1px solid rgba(0,0,0,.3);
    }
    
    @media(max-width:50rem){
    
        .footer-copyright{
            flex-direction: column; justify-content: center;
        }
    
        .footer-content{
            border:0; padding-inline: 1rem; text-align: center;
        }    
    
    }

    /* sections */

    #intro .intro_content{flex-basis:60%;min-width:60%;padding-left:1rem;}


    /* Tabs */

    .nav-tabs .nav-item a{
        padding: .5rem 1rem;
    }

    .tab-content{
        padding-block: 1rem;
    }

    /* Display Cabinet */

    .display-cabinet{
        background-color: transparent;
        margin-bottom: 2rem;
    }

    .display-cabinet .heading{
        padding: 1rem; margin: 0;
    }

    .display-cabinet[data-filtertype="checkbox"]{
        display: grid; gap: 1rem;
        grid-template-columns: 1fr;
    }

    /* filter toggle */

    .display-cabinet .display-filters{
        display:none;
    }

    .display-cabinet.filters-active .display-filters{
        display:block;
    }    

    .display-cabinet.filters-active[data-filtertype="checkbox"]{
        grid-template-columns: 300px 1fr;
    }

    @media(max-width:50em){
        .display-cabinet.filters-active[data-filtertype="checkbox"]{
            grid-template-columns: 1fr 1fr;
        }        
    }

    .display-cabinet .display{
        position: relative;
        width: 100%; height: fit-content;
        display: grid; gap: 1rem; justify-content: center;
        grid-template-columns: repeat(auto-fill, calc(300px - 1rem));
    }

    .display-cabinet.single .display{
        display:flex;
    }

    @media (max-width: 50em) {
        .display-cabinet[data-type="gallery"] .display {
        grid-template-columns: repeat(auto-fill, calc(50% - 1rem));
        }

        .display-cabinet.single .display{
            flex-direction: column;
        }
    }

    /* Cards */

    .display-card{
        --min-height: fit-content;
        --image-height: 250px;
        --background-color: white;
        --shadow: 1px 2px 4px rgba(0,0,0,.2);

        width: 100%; /*height:100%;*/ min-height: var(--min-height);
        border-radius: 1rem;
        background-color: var(--default-background-color);
        box-shadow: var(--shadow);
        overflow: hidden;

        transition: all 200ms;
    }

    .display-card-inner{
        width: 100%; height:100%;
        transition: all .6s linear;
    }

    .display-card:hover{
        --background-color: rgba(0,0,0,.2);
        --shadow: 1px 2px 3px rgba(0,0,0,.4);
    }

    .display-card.hide{
        display: none;
        visibility: collapse;
    }

    .display-card-image{
        width: 100%; height:var(--image-height);
        background-color: lightgray;
    }

    .display-card-image img{
        width:100%; height:var(--image-height); aspect-ratio: 1;
        object-fit: cover; object-position:center center;
        margin-inline: auto;
    }

    .display-card-data{
        width:100%; height:100%; padding: 1rem; font-size: 0.75rem;
        display: flex; flex-direction: column; gap: .5rem; justify-content: space-between;
        background-color: rgba(255,255,255,1);        
    }

    .display-card-content{
        width:100%; height:100%; padding: 1rem;
        display: flex; flex-direction: column; gap: .5rem; justify-content: space-between;
        background-color: white;
    }

    .display-card-content-support{
        display: flex; justify-content: space-between; align-items: center;
        font-size: .7rem; color: #888;
    }

    .display-card-content-support strong{
        color: #222;
    }

    .display-card-content-detail{
        flex-grow: 1;
    }

    .display-card-content-detail-inner{
        flex-grow: 1;
        display: flex; gap: 1rem; align-items: center;
    }

    .display-card-content-detail .title{
        font-size: 1.25rem;
        color: #222;
    }

    .display-card-content-detail .summary{
        font-size: 0.8rem;
        color: #555;
    }  

    .card-product.no-image .display-card-inner{grid-template-rows: unset;}

    .display-card-mobile {display: none;}

    @media (max-width: 50rem) {
        .display-cabinet .display[data-type="products"][data-display="grouped"] {
        grid-template-columns: 1fr;
        }

        .card-option .display-card-content-support.option-data.option-header {
            display: none;
        }

        .display-card-mobile {display: flex;}

        .display-card-content-detail-inner{
            flex-direction: column; gap: 0; align-items: start;
        }
    }    

    /* Filters */

    .display-filters form{
        display: flex; flex-wrap: wrap; gap: 1rem; justify-content: start;
        padding: 0rem;
    }

    .display-filters .filter-container{
        box-shadow: 1px 2px 3px rgba(0,0,0,.2);
        font-size: 1rem;
        padding: .25rem 1.5rem;
        background: white; color: black;
        border:0; border-radius: 50vw;
        display: flex; gap: 1rem; align-items: center;
    }

    .display-filters .filter-container[data-type="checkbox"]{
        border-radius: 1rem;
        flex-direction: column;
        align-items: start;
        width: 100%;
        padding: 1.5rem;
    }

    .display-filters .checkbox-group{
        display: flex; flex-direction: column; gap: .5rem;
        font-size: .9rem;      
    }

    @media (max-width:50rem){
        .display-filters .checkbox-group{
            gap: 1rem;
        }        
    }

    .filter-label{
        font-weight: 600; font-size: 0.85rem;
        text-transform: uppercase;
    }

    .display-filters select{
        font-size: 1rem;
        padding: .5rem;
        background: inherit; color: inherit;
        border:0;
    }

    .display-filters .checkbox{
        display: flex; gap: 1rem; align-items: center;
    }

    .display-filters label{
        padding: 0; margin: 0;
    }

    .display-filters input{
        padding: .1rem .25rem;
    }

    .no-results{
        display: none;
    }

    .no-results .no-results-inner{
        background: white; color: black; text-align: center;
        border-radius: 1rem; padding: 2rem;
        overflow: hidden;
        height: 100%;
        display: grid; place-items: center;
        box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    }

    .no-results.show{
        display: block;
        position: absolute; width: 100%;
    }   

    /* Gallery */

    .gallery-image[data-type="video"]{
        display: grid;
        place-items: center;
    }

    .gallery-image[data-type="video"] > *{
        grid-row: 1/1;
        grid-column: 1/1;
    }

    .gallery-image[data-type="video"] .icon{
        width: 40%; height: 40%;
        pointer-events: none;
    }


    .gallery-image img{
        --_max-height: 250px;
        width: 100%; max-height:var(--_max-height); aspect-ratio: 1; object-fit: cover; object-position: center;
        border-radius: 1rem;
        background-color: white;
        box-shadow: 1px 2px 3px rgba(0,0,0,.2);
        cursor: pointer;
    }
    
    .display .gallery-image{
        flex: 1 0 calc(25% - 1rem);
    }
    
    .display .gallery-image.first {
        flex: 1 0 calc(50% - 1rem);
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .display .gallery-image.first img {
        --_max-height: 500px;
        max-height: calc(var(--_max-height) + 1rem);
    }    
    
    summary.section-heading{
        font-size: 1.25rem; line-height: 1;
    }
    
    summary.section-heading h2{
        font-size: inherit;
    }

    @media(max-width:50em){

        h1{font-size:2rem;}

        #intro .section-inner{
            flex-direction: column;
        }

        #intro .section-inner p{
           max-width: 100%;
        }        

        #intro .section-inner .stats{
            border:0; padding:0;
        }

        #campaign .display-cabinet .display{
            grid-template-columns: unset;
        }

        summary.section-heading h2{font-size: .9rem;}
        .card-option details.display-card-content summary{font-size:.8rem;}
    }

    #intro.blog .section-inner a{
        display: flex; gap: 2rem; flex-direction: row-reverse;
    }

    #intro.blog .heading{
        font-size: 3rem; line-height: 1; margin-bottom: 1rem;
    }

    #intro.blog .title {flex:3;}
    #intro.blog .stats {flex:2;border:0;padding:0;}
    #intro.blog .stats .gallery-image img{--_max-height: 300px;}

    @media(max-width:50em){

        #intro.blog .section-inner a{
            flex-direction: column-reverse;
        }

        #intro.blog .heading{font-size: 2rem;}        

        #intro.blog .stats {padding:0;}

        .display-cabinet .display{
            grid-template-columns: repeat(auto-fill, calc(100% - 1rem));
        }

    }

    
.card-product{
    --min-height: fit-content;
    --image-height: 280px;
    --background-color: white;
    --shadow: 1px 2px 4px rgba(0,0,0,.2);
    text-decoration: none;
}
.card-product.card-collection{grid-column: span 2;}
/*
.card-product.card-collection:nth-of-type(odd){grid-column: 1/3;}
.card-product.card-collection:nth-of-type(even){grid-column: 3/5;}
*/
.card-product .display-card-inner{
    width: 100%; height:100%;
    display: grid; grid-template-rows: var(--image-height) 1fr;
    transition: unset;
}

.card-product .display-card-image{
    width: 100%; height: var(--image-height);
    display: grid; place-items: end;
    background-color: white;
}

.card-product .display-card-image > *{
    grid-row: 1/-1; grid-column: 1/-1;
}

.card-product .display-card-image img{
    width:100%; height:var(--image-height); aspect-ratio: 1;
    object-fit: cover; object-position:center center;
    margin-inline: auto;
}

.card-product .display-card-image.default-img img{
    object-fit: contain;
}

.card-product .display-card-image img.icon{
    width: 40%; height: auto; margin: 0; padding: .5rem;
    align-self: end; justify-self: end;
    object-fit: contain;
    background-color: rgba(0,0,0,.5);
    border-radius: 1rem 0 0 0;
    border: solid rgba(255,255,255,.5);
    border-width: 3px 0 0 3px;
}

.card-product .display-card-data{
    width:100%; height:100%; padding: 1rem; font-size: 0.75rem;
    display: flex; flex-direction: column; gap: .5rem; justify-content: space-between;
    background-color: rgba(255,255,255,1);        
}

.card-product .display-card-content{
    width:100%; height:100%; padding: 1rem;
    display: flex; flex-direction: column; gap: .5rem; justify-content: space-between;
    background-color: white;
}

.card-product .display-card-content-support{
    display: flex; justify-content: space-between; align-items: center;
    font-size: .7rem; color: #888;
}

.card-product .display-card-content-support strong{
    color: #222;
}

.card-product .display-card-content-detail{
    flex-grow: 1;
}

.card-product .display-card-content-detail .title{
    font-size: 1.25rem;
    color: #222;
}

.card-product .display-card-content-detail .summary{
    font-size: 0.8rem;
    color: #555;
}

.display-cabinet .display[data-view="small"]{grid-template-columns: repeat(auto-fill, min(177px, calc(50% - 1rem)));}
.display-cabinet .display[data-view="small"] .display-card.card-product{
    border-radius:unset;
    box-shadow: unset;
    overflow:visible;
}
.display-cabinet .display[data-view="small"] .card-product{
        --image-height: 100%;
        --image-height: 160px;
    }

.display-cabinet .display[data-view="small"] .card-product .display-card-image img{
        border-radius: 1rem;
        background-color: var(--default-background-color);
        box-shadow: var(--shadow);
        aspect-ratio: 16/9;
    }

.display-cabinet .display[data-view="small"] .card-product .display-card-mobile{
        display: flex;
        height: 100%;
        align-items: start;
        justify-content: start;
        flex: 1;
        font-size: .9rem;
        line-height: 1;
        padding: .5rem;
    }

.display-cabinet .display[data-view="small"] .card-product .display-card-content{
        display: none;
    }


@media (max-width: 60rem){

    .display-cabinet .display[data-type="products"]{
        grid-template-columns: repeat(auto-fill, min(177px, calc(50% - 1rem)));
    }

    .display-card.card-product{
        border-radius:unset;
        box-shadow: unset;
        overflow:visible;
    }

    .card-product{
        --image-height: 100%;
        --image-height: 160px;
    }

    .card-product .display-card-image img{
        border-radius: 1rem;
        background-color: var(--default-background-color);
        box-shadow: var(--shadow);
        aspect-ratio: 16/9;
    }

    .card-product .display-card-mobile{
        display: flex;
        height: 100%;
        align-items: start;
        justify-content: start;
        flex: 1;
        font-size: .9rem;
        line-height: 1;
        padding: .5rem;
    }

    .card-product .display-card-content{
        display: none;
    }

    .accessories .display-card-content{
        display:block;
        background-color: transparent;
    }
    .accessories .card-product .display-card-content-detail .title{font-size:.8rem;}
    .card-product .display-card-content-detail .summary{font-size:.7rem;}
    .accessories .card-product .display-card-content-support{flex-direction: column;align-items:start;}
}    


.button{
    width: fit-content;
    user-select: none;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background: var(--colour-theme-blue);
    color: white;
    border: 0;
    border-radius: .5rem;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer;
    transition: .3 all;
    margin: 1rem;
}

.button span{
    font-size: .65rem;
}

.button.toggle.active{
    background: var(--colour-theme-yellow);
}

.button.toggle.active span{
    transform: rotate(90deg);
}

/* Product page listing tweaks */

.card-product .display-card-image.image-position-left img,
.display-card-image.image-position-left img,
img.image-position-left{
    object-position: left center;
}

.card-product .display-card-image.image-position-right img,
.display-card-image.image-position-right img,
img.image-position-right{
    object-position: right center;
}

.card-product .display-card-image.image-position-center img,
.display-card-image.image-position-center img,
img.image-position-center{
    object-position: center center;
}


/* Finishes */
#product-finishes h4{font-size:14px;text-align:center;}
#product-finishes p{font-size:13px;text-align:center;}
#product-finishes span.section-heading{display:inline-block;padding:6px 12px;font-size:12px;margin-bottom:10px;font-weight:700;background:rgba(0,0,0,0.7);color:#fff;text-transform:uppercase;}
.finish-sample .sample{width:100%;height:150px;border-radius:1rem;box-shadow: 1px 2px 3px rgba(0,0,0,.2);}
.finish-sample.thin .sample{height:75px;}
.finish-sample.tall .sample{height:206px;}
.finish-sample span{display:block;margin-bottom:6px;padding:3px 6px;font-size:11px;width:100%;}

/* downloads */

.downloads .section-content{
    max-width:60%; padding: 2rem 0;
}

@media(max-width: 50rem){
    .downloads .section-content{
        max-width:100%;
    }
    
}

.download-row{
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: start; justify-content: space-between;
}

.download-row > * {
    flex: 1;
}

.download-row .download {
    display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between;
}

.download-row .download > * {
    flex:1; max-width: 200px;
}

.download img{
    border-radius: 1rem; box-shadow: 1px 2px 3px rgba(0,0,0,.2);
}

/* Prices toggle */
.btn-row.btn-pos-end{justify-content: flex-end;}

.button.toggle{user-select: none;}
.button.toggle span{user-select: none;pointer-events: none;}
.button.toggle span.label-inactive{display:inline-block;font-size:.85rem;}
.button.toggle span.label-active{display:none;}

.button.toggle.active span.label-inactive{display:none;}
.button.toggle.active span.label-active{transform:unset;display:inline-block;font-size:.85rem;}

.display-cabinet span.price-ex{display:none;}
.display-cabinet span.price-inc{display:inline-block;}

#options.price-ex .display-cabinet span.price-ex{display:inline-block;}
#options.price-ex .display-cabinet span.price-inc{display:none;}

.switchtoggle {
    display: flex; gap: 1rem; align-items: center;
    user-select: none;
    cursor: pointer;
}

.switchtoggle span{user-select: none;pointer-events: none;}
.switchtoggle .label-inactive{display:inline-block;}
.switchtoggle .label-active{display:none;}

.switchtoggle.active .label-inactive{display:none;}
.switchtoggle.active .label-active{display:inline-block;}

.toggle_action {
    --width: 40px;
    --height: calc(var(--width) / 2);
    --border-radius: calc(var(--height) / 2);
    user-select: none; pointer-events: none;
    display: flex;
    cursor: pointer;
}
.toggle__input {
    display: none; user-select: none; pointer-events: none;
}
.toggle__fill {
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background: #d8d8d8;
    transition: background 0.2s;
}
.toggle__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: var(--height);
    width: var(--height);
    background: var(--colour-theme-blue);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border-radius: var(--border-radius);
    transition: transform 0.2s;
}
.switchtoggle.active .toggle__fill {
    background: #d8d8d8;
}

.switchtoggle.active .toggle__fill::after {
    transform: translateX(var(--height));
}


/* version Toggle */


.version-selection{
    display:flex; gap:1rem; padding:.5rem 0;
    flex-direction: column; align-items: flex-end;
}

.version-selection .filter-container{
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    font-size: 1rem;
    padding: .25rem 1.5rem;
    background: white; color: black;
    border:0; border-radius: 50vw;
    display: flex; gap: 1rem; align-items: center;
    width: fit-content;
}

.version-selection select{
    font-size: 1rem;
    padding: .5rem 1.5rem;
    background: inherit; color: inherit;
    border:0;
}

.version-selection .version-description{
    width:fit-content;
}

.version-selection .version-description > div{display:none;}
.version-selection[data-show="DF-E"] .version-description .DF-E{display:block;}
.version-selection[data-show="DF-T"] .version-description .DF-T{display:block;}
.version-selection[data-show="EO-E"] .version-description .EO-E{display:block;}
.version-selection[data-show="EO-T"] .version-description .EO-T{display:block;}


/* Blog */

.blog-legacy :is(h1,h2),
.blog-post :is(h1,h2,h3){color: var(--colour-theme-yellow);}

/* Legacy */
.page-builder .section-inner{height:100%;}
.page-builder .pt-30{padding-top:30px;}
.page-builder .pb-30{padding-bottom:30px;}
.page-builder .pr-30{padding-right:30px;}
.page-builder .pl-30{padding-left:30px;}
.page-builder h1{color: inherit;}
.page-builder a.btn{
    width: fit-content;
    user-select: none;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background: var(--colour-theme-blue);
    color: white;
    border: 0;
    border-radius: .5rem;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer;
    transition: .3 all;
    margin: 1rem;
}

/* Search */
.searchform > div {display:flex;align-items:center;gap:1rem;}
.searchform input[type="submit"]{
    width: fit-content;
    user-select: none;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background: var(--colour-theme-blue);
    color: white;
    border: 0;
    border-radius: .5rem;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: .3 all;
    margin: 0;
}

@media(max-width: 50rem){
    .searchform > div {flex-direction:column;align-items:start;}
}

.m-only{display: none;}
.card-option .display-card-content small {font-size: .8rem!important;}
.card-option summary .icon {display:flex;align-items: center;justify-content: center;}

.display-card-options .btu, .display-card-options .depth{display:none;}
.display-card-options.show-extras .btu, .display-card-options.show-extras .depth{display:block;}

.card-option .display-card-content-support.option-heading span{font-size: .8rem!important;text-transform: lowercase;}
.card-option .display-card-content-support.option-heading .type {border-right: 1px solid #b3b3b3;padding-right: 1rem;}

.display-card-options .option-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem!important;
    color: #222;
    flex-wrap: wrap;
}

.card-option .display-card-content-support{
    display: flex; justify-content: space-between; align-items: center;
    font-size: .8rem; color: #222; flex-wrap: wrap;
}

.card-option .option-header > div,
.card-option .display-card-content-support:not(.option-heading) > div{
    flex:1 0 50%; padding: .25rem .5rem;
}

.card-option .option-header .price{text-align: end;}
.card-option .display-card-content-support .price{order:2;}
.card-option .display-card-content-support .finish{order:3;}
.card-option .display-card-content-support .availability{order:4;text-align: end;}

@media (min-width: 50rem){

    .card-option .display-card-content-support{
        flex-wrap: nowrap;
    }

    .card-option .option-header > div,
    .card-option .display-card-content-support:not(.option-heading) > div{
        flex:1 0; padding: .25rem .5rem; order: 1;
    }

    .card-option .display-card-content-support .price{order:4;}
    .card-option .display-card-content-support .finish{order:2;}
    .card-option .display-card-content-support .availability{order:3;text-align: start;}

}
/*
.card-option .display-card-content-support.option-data:nth-child(even){
    background: #f3f3f3;
}
*/
.card-option .display-card-content-support .price{
    text-align: end;
}

.display-card-options .option-data:nth-of-type(odd){background: #f3f3f3;}

@media(max-width: 50rem){
    .display-card-options .option-header{display:none;flex-wrap: nowrap;}
    .m-only{display: inline-block;}
    /*.card-option .display-card-options.show-extras .display-card-content-support.option-data .finish{text-align: end;}*/
    .card-option .display-card-content-support.option-data .btu{order: 3;}
    .card-option .display-card-content-support.option-data .depth {order: 4;}
}

#wpsl-search-wrap form{
    display: flex; gap: 1rem; align-items: center; justify-content: center;
}

.wpsl-search{background:none;}
#wpsl-search-wrap{font-size:.8rem;}
#wpsl-search-input,
.wpsl-dropdown .wpsl-selected-item, 
.wpsl-dropdown li, .wpsl-selected-item,
#wpsl-search-btn{padding-block:4px!important;}

.wpsl-input,
.wpsl-select-wrap > div{
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    font-size: .8rem;
    padding: .25rem 1.5rem;
    background: white;
    color: black;
    border: 0;
    border-radius: 50vw;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.wpsl-select-wrap select,
.wpsl-dropdown{
    font-size: .8rem;
    background: inherit;
    color: inherit;
    border: 0!important;
}

#wpsl-search-btn{
    width: fit-content;
    user-select: none;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background: var(--colour-theme-blue);
    color: white;
    border: 0!important;
    border-radius: .5rem!important;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: .3 all;
    margin: 0 1rem 10px;
}

#wpsl-gmap{
    border-radius: .5rem;
}

#wpsl-search-wrap .wpsl-input, #wpsl-search-wrap .wpsl-select-wrap, #wpsl-search-wrap div, #wpsl-search-btn {
  display: flex!important; gap: 1rem; align-items: center; margin:0;
}



@media (max-width: 570px) {
    #wpsl-search-wrap div label {display: block;width: 50%;}
    #wpsl-search-wrap .wpsl-dropdown {width: 40% !important;}
    #wpsl-radius, #wpsl-results {width: 100%;}
}

@media (max-width: 825px){
    #wpsl-search-wrap form,
    #wpsl-search-wrap .wpsl-select-wrap {flex-direction: column;}
    .wpsl-input > div{width:50%!important;}
    #wpsl-search-input{width: 40%!important;}
}


.chat-textlabel{background:rgba(255,255,255,.75);font-size:0.75rem;padding:.35rem;}

/* Custom Search Overlay Styling */
.custom-search-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
  font-size:.8rem;
}


.custom-search-overlay.is-visible {
  display: block;
}