@import url(/wp-content/themes/Sunburst/scss/do-templates/homepage-header.css);
@import url(/wp-content/themes/Sunburst/scss/do-templates/glide.css);
@import url(/wp-content/themes/Sunburst/scss/do-templates/tabs.css);

/*LOGO HEADER AMENDS TO MOBILE*/
.desktop-only{
	display: block;
}
.mobile-only{
	display: none;
}
.post-template-default .col-12 a{
	color: #d84949;
	font-weight: bold;
}
@media screen and (max-width: 800px){
	.desktop-only{
		display: none;
	}
	.mobile-only{
		display: block;
	}
	.col-6 {
		min-width: 100%;
		max-width: 100%;
	}
	#distributor_faq {
		padding-left: 0px;
	}
}

@media screen and (max-width: 1099px){
    #header_main .header_logo img {
        max-height: 90px;
    }
}
div#shop_toggle {
    display: none !important;
}

/*CATEGORY DESCRIPTION*/
    .category-top-description{
        margin-bottom: 5rem;
        margin-top: 3rem;
    }
    .category-top-description * {
        text-align: left !important;
    }
    .category-top-description h1 {
        font-weight: bold;
    }
    .category-top-description h1, .category-top-description h2 {
        color: #b13939 !important;
    }

/*////////////////////////////////////////*/
/*HEADER BANNER*/
body.shopmode-retail #headernav {
    background: #f7f5f1;
}
body.shopmode-retail .delivery_banner {
    background: #414042;
    max-width: 25%;
    min-height: 100px;
    align-items: center;
    display: flex;
}
body.shopmode-retail .delivery_banner--cyan{
    background: #92d2d3;
    display: grid;
    align-content: center;
}
body.shopmode-retail .delivery_banner--cyan h3{
    color: #231f20;
}
.delivery_banner--ruby h3 {
    font-size: 1.4rem;
    display: ruby;
}
#r-ws-banner {
    padding: 0px;
}
#r-ws-banner .banner-inner {
    max-width: 100%;
}
.banner-item {
    display: flex;
    justify-content: center;
    min-height: 50px;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.banner-item p {
    margin-right: 2rem !important;
}
.banner-item img {
    height: 28px;
    filter: brightness(5);
}
@media screen and  (max-width: 1199.98px) {
    body.shopmode-retail .delivery_banner{
        display: none;
    }
}

/*////////////////////////////////////////*/
/*CATEGORY STYLE*/
    /*CATEGORY LAYOUT*/
        .category-row, .flex-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .category-row--start, .flex-row-start{
            align-items: flex-start;
        }
		.flex-row-stretch {
			align-items: stretch;
			justify-content: space-between;
		}
		.justify-center{
			justify-content: center;
		}

        .full-col, .one-half, .two-thirds, .one-thirds, .one-thirds-small{
            padding: 1rem;
        }
        .two-thirds {
            width: 66.6666666%;
        }
        .one-thirds {
            width: 33.333333%;
        }
		.one-thirds-small{
			width: 32%;
		}
		.one-half{
			width: 49%;
			margin: .5%;
		}
		.border-white {
			border: 3px solid white;
		}

    /*CATEGORY ELEMENTS*/
        .circular-img {
            position:relative;
        }
        .circular-img img{
            border-radius: 500px 0px;
            z-index: 1;
            position: relative;
        }
        .circular-img::before {
            content: '';
            background: url(https://sunburstsnacks.co.uk/sunwp20/wp-content/uploads/2023/03/img-bg-graphic.png);
            height: 100%;
            width: 100%;
            position: absolute;
            top: -20px;
            left: -150px;
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 0;
        }
        .category-seperator {
            height: 5px;
            width: 100%;
            background: #94d1d3;
            margin-left: auto;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        .align-center{
            text-align: center;
    	}
		.text-block h2, .text-block h3, .text-block h4 {
			margin-top: 20px !important;
		}
		.two-cols-content h4:first-child {
			margin-top: 0 !important;
		}
		.two-cols-content {
			column-count: 2;
		}

    /*CATEGORY RESPONSIVE*/
        @media screen and (max-width: 1100px){
            .circular-img::before {
                top: -60px;
                left: -50px;
            }
        }
        @media screen and (max-width: 924px){
            .category-row {
                flex-direction: column;
            }
            .two-thirds, .one-thirds {
                width: 100%;
            }
            .category-row img{
                display: block;
                width: 50%;
                margin: auto;
            }
            .flex-order-image {
                order: 1;
            }
            .category-seperator:last-child {
                order: 2;
            }
            .circular-img::before {
                top: 0px;
                left: -50px;
                background-size: 50%;
            }
			.one-thirds-small.light-bg {
				width: 100%;
				margin-bottom: 1rem;
			}
			.one-half {
				width: 100%;
			}
			.post-template-default .col-12 br{
				display: none;
			}
        }
        @media screen and (max-width: 600px){
            .category-row img {
                width: 80%;
            }
            .circular-img::before {
                top: -50px;
                left: -50px;
                background-size: 80%;
            }
            .circular-img {
                margin-top: 3rem;
            }
			.two-cols-content {
				column-count: 1;
			}
        }
        @media screen and (max-width: 400px){
            .category-row img {
                width: 100%;
            }
        }

/*////////////////////////////////////////*/
/* RETAIL BANNER */
/* 	.variation-retail-banner {
		justify-content: flex-end;
	}

	.variation-retail-banner a {
		display: none;
	}

a.shipping-calculator-button {
    display: none !important;
} */

/*////////////////////////////////////////*/
/* HP HEADER (OPTIMISED FOR MOBILE) */
/* 
#home_banner #home_banner_content:before {
    content: none !important;
}
div#hero_mainheader h1, div#hero_mainheader .hero_mainheader_subtitles span {
	color: white !important;
}
div#hero_mainheader .hero_mainheader_subtitles span {
    font-size: 1.6rem !important;
}
#home_banner #hero_content_wrapper #hero_mainheader {
    padding: 270px 0px 0 0px !important;
}

div#home_banner, .home_slick.slick-initialized.slick-slider * {
    min-height: 650px;
    object-fit: cover;
}
@media screen and (max-width: 1200px){
	.slick-slider {
    	position: absolute;
	}
}
@media screen and (max-width: 1020px){
	div#header_main {
		border-bottom: 3px solid #b13939;
		background: white !important;
	}
}
@media screen and (max-width: 600px){
	div#hero_mainheader h1 {
		font-size: 2rem !important;
	}
	div#hero_mainheader span br{
		display: none;
	}
	div#hero_mainheader .hero_mainheader_subtitles span {
		font-size: 1.2rem !important;
		padding: 1rem 2rem;
	}
} */


/* BLOG */
.blog .col-12.my-5 {
    display: flex;
    flex-wrap: wrap;
}
.blog .tease-post {
    width: calc(33.3333333% - 30px);
    background: #80808024;
    margin: 10px;
    padding: 1rem 1rem;
    border-radius: 30px;
}
.blog h1 {
    width: 100%;
    margin: 0rem 1rem 2rem;
    padding: 0 1rem !important;
}
.single-post h1 {
    padding: 0 1rem !important;
}
.single-post p.font-italic{
	padding: 0 1rem !important;
}
.blog h2 {
    font-size: 1.8rem;
}
.blog p{
	margin-bottom: 0;
}
.blog .read-more {
    background: #d84949;
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    display: table;
    margin-top: 1rem;
}
.single-post h1 {
    margin-top: 3rem;
}
.single-post #main_content img {
    width: 100% !important;
}

@media screen and (max-width: 1200px){
	.blog .my-5, .single-post #main_content .col-12 {
		margin-top: 15rem !important;
	}
	.blog .tease-post {
        width: calc(50% - 20px);
    }
}
@media screen and (max-width: 800px){
	.blog .tease-post {
		width: 100%;
		margin: 1rem;
	}
	.blog .my-5, .single-post #main_content .col-12 {
		margin-top: 10rem !important;
    }
}

/* BLOG LAYOUT */

.seperator {
    background: #d84949;
    height: 3px;
}
.light-bg {
    background: #92d2d3;
}

/*FONTS*/
.pacifico-regular {
  font-family: "Pacifico", serif;
  font-weight: 400;
  font-style: normal;
}

.rewards-popup-container .wrapper:before, .rewards-popup-container .wrapper:after {
	content: '';
    position: absolute;
	background-size: contain !important;
    background-repeat: no-repeat !important;
	opacity: .5;
	z-index: 10 !important;
}
.rewards-popup-container .wrapper:before {
    background: url(https://sunburstsnacks.co.uk/wp-content/uploads/2025/01/plant-bg-2.png);
    height: 350px;
    width: 100%;
    bottom: -2rem;
    left: -5rem !important;
	z-index: 10 !important;
}
.rewards-popup-container .wrapper:after {
    background: url(https://sunburstsnacks.co.uk/wp-content/uploads/2025/01/plant-bg-3.png);
    height: 300px;
    width: 100%;
    bottom: 3rem;
    right: -7rem !important;
    background-position: right;
}


.rewards-popup-container:before, .rewards-popup-container:after {
	content: '';
    height: 300px;
    width: 300px;
    position: absolute;
    background: #ffffff57;
    border-radius: 500px;
	z-index: 1;
}
.rewards-popup-container:before {
    bottom: -8rem;
    left: -8rem;
}
.rewards-popup-container:after {
    top: -8rem;
    right: -8rem;
}
.rewards-popup-container {
    background: #cedbb6;
    padding: 3rem 20%;
    overflow: hidden !important;
    position: relative;
}
.rewards-popup-container h2 {
    font-size: 4rem;
}
@media screen and (max-width: 800px){
	.single-post .align-center, .single-post .align-center * {
		text-align: left !important;
	}
	.single-post h1 {
	    margin-top: 0rem;
		font-size: 1.8rem !important;
	}
	.single-post h2 {
	    font-size: 1.4rem !important;
	}
}

/* BASKET */
.woocommerce-checkout-review-order-table .fee {
    display: table-row;
}


@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');


.custom-banner {
    background: url(https://sunburstsnacks.co.uk/wp-content/uploads/2025/11/christmas-header-bg-img.png);
    width: 100%;
    min-height: 650px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 2100px;
    margin: auto;
}
.berkshire {
    font-family: "Berkshire Swash", serif !important;
}
.title-graphic {
    margin-top: -3rem;
}
.custom-banner svg {
    display: inline-table;
    top: 0;
    fill: #d95251;
    margin-bottom: -10rem;
    margin-top: -2rem;
}
.custom-banner h3{
    color: white;
    font-weight: 600;
    font-size: 2.5rem;
}
.custom-banner text {
    font-size: 5rem !important;
}
.custom-banner button {
    border: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    color: #d95251;
    font-weight: 600;
}
.custom-banner .logo{
    margin-block: 1.5rem;
}
.custom-graphics {
    position: absolute;
    z-index: 10;
}
.custom-graphics.custom-graphics--1 {
    left: 18%;
    bottom: 3rem;
}
.custom-graphics.custom-graphics--2 {
    right: 13%;
    bottom: 5rem;
}
.custom-graphics.custom-graphics--3 {
    right: 25%;
    bottom: 5rem;
}
.info-graphic-right {
    position: absolute;
    right: 3rem;
    top: 2rem;
    width: 270px;
}
.info-graphic-left {
    position: absolute;
    left: 3rem;
    top: 6rem;
    width: 350px;
}
.mobile-only{
    display: none !important;
}

@media screen and (max-width: 1800px){
    .custom-graphics.custom-graphics--1 {
        left: 19%;
        bottom: 2rem;
    }
    .custom-graphics.custom-graphics--2 {
        right: 15%;
        bottom: 5rem;
    }
}
@media screen and (max-width: 1600px){
    .custom-banner svg {
        display: inline-table;
        top: 0;
        fill: #d95251;
        margin-bottom: -7rem;
        margin-top: -2rem;
    }
    .custom-graphics {
        width: 200px;
    }
    .info-graphic-right {
        top: 0rem;
    }
    .custom-graphics.custom-graphics--1 {
        left: 21%;
        width: 260px;
    }
    .custom-graphics.custom-graphics--3 {
        right: 28%;
        bottom: 5rem;
    }
}
@media screen and (max-width: 1500px){
    .info-graphic-left {
        position: absolute;
        left: 1rem;
        width: 300px;
    }
    .custom-graphics.custom-graphics--1 {
        left: 18%;
        width: 240px;
    }
    .custom-graphics.custom-graphics--2 {
        width: 180px;
    }
    .info-graphic-right {
        top: -3rem;
    }
    .custom-banner{
        background: url(https://sunburstsnacks.co.uk/wp-content/uploads/2025/11/header-bg-medium.jpg);
        background-size: cover;
    }
}
@media screen and (max-width: 1200px){
    .info-graphic-left {
        position: absolute;
        left: 1rem;
        width: 250px;
    }
    .custom-graphics.custom-graphics--1 {
        left: 15%;
        width: 240px;
    }
    .custom-graphics.custom-graphics--1 {
        left: 14%;
        width: 240px;
    }
    .custom-graphics.custom-graphics--3{
        display: none;
    }
    .info-graphic-right {
        top: 0rem;
        right: 0;
    }
}
@media screen and (max-width: 1199px){
    .custom-banner {
        margin-top: 12rem;
    }
}
@media screen and (max-width: 1000px){
    .custom-banner svg {
        margin-bottom: -5rem;
        margin-top: 0rem;
    }
    .custom-banner {
        margin-top: 0rem;
    }
    .info-graphic-left {
        left: 2rem;
        width: 200px;
        top: 10rem;
    }
    .info-graphic-right {
        right: 1rem;
        top: 4rem;
        width: 220px;
    }
    .custom-banner h3 {
        font-size: 1.5rem;
    }
    .custom-graphics.custom-graphics--1 {
        left: 10%;
        width: 170px;
    }
    .custom-graphics.custom-graphics--2 {
        width: 160px;
        bottom: 0;
    }
    .custom-banner .logo {
        margin-block: 1rem;
        width: 23%;
        margin-bottom: 3rem;
    }
}
@media screen and (max-width: 900px){
    .info-graphic-left {
        left: 1rem;
        width: 240px;
        top: 18rem;
    }
    .custom-graphics.custom-graphics--1 {
        left: 23%;
        width: 140px;
    }
    .info-graphic-right {
        right: 1rem;
        width: 190px;
    }
}
@media screen and (max-width: 800px){
    .custom-banner {
        min-height: 800px;
        background: url(https://sunburstsnacks.co.uk/wp-content/uploads/2025/11/mobile-header-bg-img.png);
        background-size: cover;
    }
    .custom-banner .logo {
        width: 40%;
    }
    .custom-banner .cta {
        order: 10;
        margin-bottom: 5rem;
    }
    .custom-banner button{
        font-size: 2.5rem;
    }
    .info-graphic-left, .info-graphic-right {
        top: auto;
        bottom: 0;
        position: relative;
    }
    .info-graphic-right {
        right: -12rem;
        width: 35%;
        top: -10rem;
        order: 2;
    }
    .info-graphic-left {
        left: -13rem;
        bottom: 4rem;
        width: 40%;
    }
    .custom-graphics.custom-graphics--2 {
        width: 25%;
        bottom: 38rem;
        right: 3rem;
    }
    .custom-graphics.custom-graphics--3 {
        display: block;
        bottom: 41rem;
        right: 15rem;
        width: 30%;
    }
    .custom-graphics.custom-graphics--1 {
        left: 5rem;
        width: 340px;
        bottom: 13rem;
    }
    .mobile-only {
        display: block !important;
    }
    .desktop-only{
        display: none !important;
    }
    .custom-banner text {
        font-size: 9rem !important;
    }
    .custom-banner text {
        font-size: 6rem !important;
    }
    .custom-banner svg {
        margin-bottom: -5rem;
        margin-top: -3rem;
        height: 350px;
        width: 100%;
    }
    .custom-banner text {
        font-size: 14rem !important;
    }
    .line2 {
        margin-top: -10rem !important;
        margin-bottom: -9rem !important;
    }
    .title-graphic {
        margin-top: 8rem;
    }
}
@media screen and (max-width: 700px){
    .custom-banner .cta {
        margin-top: -5rem;
    }
    .custom-graphics.custom-graphics--1 {
        left: 1rem;
        width: 45%;
        bottom: 14rem;
    }
    .custom-graphics.custom-graphics--2 {
        width: 27%;
        bottom: 29rem;
        right: 1rem;
    }
    .custom-graphics.custom-graphics--3 {
        bottom: 36rem;
        right: 12rem;
        width: 30%;
    }
    .info-graphic-left {
        left: -10rem;
        bottom: 4rem;
        width: 40%;
    }
    .info-graphic-right {
        right: -9rem;
        width: 44%;
        top: -6rem;
    }
}
@media screen and (max-width: 550px){
    .custom-graphics.custom-graphics--3 {
        bottom: 33rem;
        right: 11rem;
    }
    .custom-banner svg {
        margin-bottom: -6rem;
    }
}
@media screen and (max-width: 500px){
    .info-graphic-left {
        left: -7rem;
        bottom: 3rem;
        width: 46%;
        margin-top: 0rem;
    }
    .info-graphic-right {
        right: -7rem;
        width: 44%;
        top: -6rem;
    }
    .custom-graphics.custom-graphics--3 {
        bottom: 32rem;
        right: 7rem;
        width: 32%;
    }
    .custom-graphics.custom-graphics--2 {
        width: 24%;
        bottom: 25rem;
        right: 0rem;
    }
}
@media screen and (max-width: 450px){
    .info-graphic-left {
        left: -7rem;
        bottom: 4rem;
        width: 54%;
        margin-top: 0rem;
    }
    .custom-graphics.custom-graphics--2 {
        width: 30%;
        bottom: 24rem;
        right: 0rem;
    }
    .info-graphic-right {
        right: -6rem;
        width: 50%;
        top: -6rem;
    }
    .custom-banner button {
        font-size: 2rem;
    }
}
@media screen and (max-width: 400px){
    .custom-banner svg {
        margin-bottom: -8rem;
        margin-top: -6rem;
        height: 350px;
        width: 100%;
    }
    .custom-graphics.custom-graphics--3 {
        bottom: 32rem;
        right: 5rem;
        width: 36%;
    }
}