/* 
Theme Name: Smullers
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


.smullers-products {
	position: relative;
	padding-bottom: 40px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	flex-direction: column;
}

.smullers-products .smullers-products_selector {
	position: relative;
	width: 440px;
	height: 75px;
	margin-left: auto;
	margin-right: auto;
	max-width: calc(100% - 40px);
}

.smullers-products select {
	position: absolute;
	width: 400px;
	height: 75px;
	font-size: 20px;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	.smullers-products select {
		width: 100%;
	}


}

.smullers-products .select {
	position: absolute;
	width: 400px;
	height: 75px;
	border: 4px solid #e32c2e;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 400px;
	letter-spacing: 0.2rem;
	color: #e32c2e;
	background-color: #ffffff;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 26px;
	cursor: pointer;
	max-width: 100%;
}

.touch .smullers-products .select {
	pointer-events: none;
}

.smullers-products .select:after {
	content: "";
	position: absolute;
	width: 22px;
	height: 67px;
	right: 25px;
	top: 0;
	pointer-events: none;
	background-image: url("./images/arrow-red.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

@media screen and (max-width: 768px) {
	.smullers-products .select {
		width: 100%;
	}
}

.smullers-products .select.active:after {
	transform: rotate(180deg);
}

.smullers-products .options {
	position: absolute;
	width: 400px;
	background-color: #ffffff;
	top: 75px;
	z-index: 900;
	display: none;
	max-width: 100%
}

.smullers-products .options .option {
	position: relative;
	height: 71px;
	border: 4px solid #e32c2e;
	border-top: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	letter-spacing: 0.2rem;
	color: #e32c2e;
	background-color: #ffffff;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 26px;
	cursor: pointer;
}

.smullers-products .options .option.active {
	background-color: #e32c2e;
	color: #ffffff;
}

.smullers-products .select.active+.options {
	display: block;
}



.smullers-products_grid {
	margin-top: 50px;
	display: grid;
	/* 4 columns */
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 20px;
	padding: 0 20px;
}


.smullers-products_grid .smullers-product {
	--product-color: #e32c2e;
	--arrow-image: url("./images/arrow-red.svg");
	border: 4px solid var(--product-color);
	position: relative;
	cursor: pointer;

}

.smullers-products_grid .smullers-product_holder {
	width: 100%;
	aspect-ratio: 1/1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.smullers-products_grid .smullers-product_holder .smullers-product_holder-inner {
	position: absolute;
	padding-top: 100%;
	padding-left: 20px;
	color: var(--product-color);
	text-transform: uppercase;
	line-height: 1em;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	word-break: break-word;
	width: 100%;
}

.smullers-product_holder-inner .smullers-product_title {
	position: absolute;
	bottom: 0;
	display: flex;
	width: 100%;
}

.smullers-products_grid .smullers-product_holder .smullers-product_holder-inner h3 {
	font-size: 26px;
	line-height: 1em;
	letter-spacing: 0.2rem;
	margin-right: 20px;

}

.smullers-products_grid .smullers-product[data-main-category="burgers"] {
	--product-color: #a0cced;
	--arrow-image: url("./images/arrow-blue.svg");
}

.smullers-products_grid .smullers-product[data-main-category="icecream"],
.smullers-products_grid .smullers-product[data-main-category="milkshakes"] {
	--product-color: #f3a188;
	--arrow-image: url("./images/arrow-pink.svg");
}


.smullers-product_content {
	display: flex;
	width: 100%;
}

.smullers-product_arrow {
	display: block;
	background-image: var(--arrow-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	--size: 20px;
	min-width: var(--size);
	width: var(--size);
	min-height: var(--size);
	height: var(--size);
	margin-top: auto;
	margin-left: auto;
	margin-right: 40px;
	margin-bottom: 20px;
}

.smullers-product.show_extra .smullers-product_arrow {
	transform: rotate(180deg);
}

.smullers-product_extra {
	padding: 20px 20px 20px;
	line-height: 1.2em;
	font-family: "FilmotypeGay", sans-serif;
	text-transform: initial;
	letter-spacing: 0.1rem;
	font-weight: bold;
	font-size: 20px;
}

.smullers-product_extra table {
	margin-top: 20px;
	border: none;
}

.smullers-product_extra table td,
.smullers-product_extra table tr {
	border: none;
	background: none !important;
	padding: 0;
}

.smullers-product_extra table td.h {
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.1em;
	padding: 10px 0;
}

.smullers-product_extra table td.left {
	text-align: left;
}

.smullers-product_extra table td.right {
	text-align: right;
}

.smullers-product_extra {
	position: absolute;
	background: #fff;
	z-index: 1;
	border: 4px solid var(--product-color);
	border-top: none;
	margin-left: -4px;
	margin-right: -4px;
}

.smullers-product:not(.show_extra) .smullers-product_extra {
	display: none;
}


.smullers-locations_search {
	position: relative;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	max-width: calc(100% - 40px);
	display: flex;
	--button-color: #e32c2e;
	margin-bottom: 40px;
}


.smullers-locations_search input {
	border: 4px solid var(--button-color);
	border-radius: 0;
}

.smullers-locations_search button {
	background-color: var(--button-color);
	color: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 26px;
	cursor: pointer;
}


.smullers-locations_grid {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 20px;
	padding: 0 20px;
}


.smullers-locations_grid .smullers-location {
	--location-color: #a0cced;
	--arrow-image: url("./images/arrow-red.svg");
	border: 4px solid var(--location-color);
	position: relative;
	cursor: pointer;


	line-height: 1.2em;
	margin-bottom: 25px;
	font-family: "FilmotypeGay", sans-serif;
	text-transform: initial;
	letter-spacing: 0.1rem;
	font-weight: bold;
	font-size: 20px;

}


.smullers-locations_grid .smullers-location_holder {
	width: 100%;
	aspect-ratio: 1/1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.smullers-locations_grid .smullers-location_holder .smullers-location_holder-inner {
	position: absolute;
	padding: 30px 20px;
	word-break: break-word;
	width: 100%;
}

.smullers-locations_grid .smullers-location_holder .smullers-location_holder-inner .smullers-location_title h3 {
	text-transform: uppercase;
	line-height: 1em;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 24px;
}

.smullers-location .smullers-location_today {
	margin-bottom: 25px;
	color: #e32c2e;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.1em;
}

.smullers-location_phone {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}




.smullers-location_arrow {
	display: block;
	background-image: var(--arrow-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	--size: 20px;
	min-width: var(--size);
	width: var(--size);
	min-height: var(--size);
	height: var(--size);
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.smullers-location.show_details .smullers-location_arrow {
	transform: rotate(180deg);
}



.smullers-location_details table {
	margin-top: 20px;
	border: none;
}

.smullers-location_details table td,
.smullers-location_details table tr {
	border: none;
	background: none !important;
	padding: 0;
}

.smullers-location_details {
	padding: 0px 20px 20px;
	line-height: 1.2em;
	font-family: "FilmotypeGay", sans-serif;
	text-transform: initial;
	letter-spacing: 0.1rem;
	font-weight: bold;
	font-size: 20px;
}

.smullers-location_details b {
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #e32c2e;
}


.smullers-location_details table td {
	font-family: "FilmotypeGay", sans-serif;
	text-transform: initial;
	line-height: 1.6em;
	letter-spacing: 0.1rem;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
}

.smullers-location_details table td:last-child {
	text-align: right;
}

.smullers-location:not(.show_details) .smullers-location_details {
	display: none;
}

.smullers-location_details {
	position: absolute;
	background: #fff;
	z-index: 1;
	border: 4px solid var(--location-color);
	border-top: none;
	margin-left: -4px;
	width: calc(100% + 8px);
}

.smullers-location a {
	color: #e32c2e;
	text-decoration: none;
	border: 4px solid #e32c2e;
	box-shadow: 4px 4px 0 #e32c2e;
	position: relative;
	display: inline-block;
	line-height: 60px;
	background-color: #ffffff;
	padding: 0 20px;
	transition: all 250ms ease;
	font-family: "FilmotypeGinger", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-weight: normal;
	font-size: 26px;
}

.smullers-location-route {
	text-align: right;
	margin-top: 20px;
}