.find-stockists{
	position: relative;
	padding-top: 3rem;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}

.find-stockists:after{
	width: 150vw;
	height: 100%;
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	background-color: #f4f4f4;
	transform: translateX(-50vw);
	z-index: -1;
}

#where-to-buy{
    margin-bottom: 0;
}

#where-to-buy .mile-km .form-control{
	padding-top: 0.618047em;
	padding-bottom: 0.618047em;
	text-align: center;
	position: relative;
    cursor: pointer;
}

#where-to-buy .mile-km input{
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

#where-to-buy .form-control{
    background-color: #fff;
}

#where-to-buy .form-group{
	margin-bottom: 1rem;
}

#where-to-buy .form-group label{
    font-weight: 500;
}

#where-to-buy .form-control#active{
    background-color: #27bd67 !important;
    color: #fff;
}

#where-to-buy [type="submit"]{
	padding-top: 0.618047em;
	padding-bottom: 0.618047em;
	line-height: 1.6;
}

#where-to-buy .form-group select.form-control{
	background-image: url('../images/select-down-arrow.png');
	background-position: calc(100% - 15px) center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.stockists-found{
	text-align: right;
}

.mile-km label{
	display: block;
}

.premier-retailer{
	display: flex;
	margin-top: 2rem;
}

.premier-retailer img{
	margin-right: 2rem;
	height: 100%;
}


/* retailer result list styles - start */
.retailer-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 4rem;
}

.retailer-list .retailer{
	background-color: #f4f4f4;
}

.retailer-list .retailer.retailer--premier{

}

.retailer-list .retailer__heading{

}

.retailer-list .retailer.retailer--premier .retailer__heading{
	padding: 2rem;
	background-color: #ccc;
	position: relative;
}
.retailer-list .retailer.retailer--premier .retailer__heading:after{
	position: absolute;
	content: " ";
	background-color: #fff;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	border: 0.5rem solid #fff;
	top: 1rem;
	right: 1.2rem;
	background-image: var(--premier-retailer-icon-for-css-background);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.retailer-list .retailer__details{
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

.retailer-list .retailer.retailer--premier .retailer__details{
	margin-top: 1rem;
}

.retailer-list .retailer__name{
	color: #398345;
}

.retailer-list a.retailer__address{

}

.retailer-list a.retailer__phone{
	color: #32c06f;
	text-decoration: none;
}

.retailer-list .retailer__url{
	text-decoration: none;
}

.retailer-list .retailer__distance{

}
/* retailer result list styles - end */

/* retailer map styles - start */
.retailer-map{

}

.retailer-map .retailer__details{
	display: flex;
	flex-direction: column;
}

.retailer-map .retailer__name{
	color: #398345;
}

.retailer-map .retailer__address{
	margin-top: 0.5rem;
	font-size: 80%;
	font-style: normal;
}

.retailer-map a.retailer__phone{
	color: #32c06f;
	text-decoration: none;
}

.retailer-map a.retailer__url{
	text-decoration: none;
}

.retailer-map .retailer__distance{
	margin-top: 1rem;
}

.retailer-map a.retailer__directions{
	margin-top: 1rem;
	text-decoration: none;
	font-size: 80%;
}
/* retailer map styles - end */

#online-stockists a{
	text-decoration: none;
}

#online-stockists a:hover{
	text-decoration: underline;
}

/* copied from /themes/storefront/assets/css/base/icons.css:4633 because this file has been dequeued - start */
@keyframes fa-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
button.loading::after{
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: inherit;
	vertical-align: baseline;
	content: " ";
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg>');
	animation: fa-spin .75s linear infinite;
	height: 20px;
	width: 20px;
	line-height: 20px;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
	display: block;
}
/* copied from /themes/storefront/assets/css/base/icons.css:4633 because this file has been dequeued - end */




@media screen and (max-width: 1199px){
	.retailer-list{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 768px){
	.retailer-list{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px){
	.retailer-list{
		grid-template-columns: repeat(1, 1fr);
	}
}