/*
Theme Name: Xplody Games 2026
Theme URI: http://wordpress.org/
Description: The theme for Xplody Games 2026.
Author: Andrew White
Author URI: 
Version: 1.0
Tags: 

License:
License URI:

*/

@charset "UTF-8";
/* CSS Document */


/* CSS RESET
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html,body{
    margin: 0px;
    padding: 0px;
    
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
* {
    /* border: 1px solid red !important; debug tool */
}

/* Clearfix */

.cf:after, .cf:before {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 0;
}

.aligncenter,
div.aligncenter,
.align-center,
div.align-center {
    display: block;
    margin: 5px auto 5px auto;
	text-align: center;
}

.alignright,
.align-right {
    float:right;
    margin: 5px 0 20px 20px;
	text-align: right;
}

.alignleft,
.align-left {
    float: left;
    margin: 5px 20px 20px 0;
	text-align: left;
}

img.alignright, img.align-right {float:right; margin:0 0 1em 40px; border-radius: 15px;}
img.alignleft, img.align-left {float:left; margin:0 40px 1em 0; border-radius: 15px;}
img.aligncenter, img.align-center {display: block; margin-left: auto; margin-right: auto; border-radius: 15px;}

a img.alignright,
a img.align-right {
    float: right;
    margin: 5px 0 20px 40px;
	border-radius: 30px;
}

a img.alignnone,
a img.align-none {
    margin: 0;
	border-radius: 30px;
}

a img.alignleft,
a img.align-left {
    float: left;
    margin: 5px 40px 20px 0;
	border-radius: 30px;
}

a img.aligncenter,
a img.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
	border-radius: 30px;
	margin: 50px 0;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone,
.wp-caption.align-none {
    margin: 0px 0px 20px 0;
}

.wp-caption.alignleft,
.wp-caption.align-left {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright,
.wp-caption.align-right {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

@media screen and (max-width: 782px) {
	.alignright,
	.alignleft,
	.aligncenter
	.align-right,
	.align-left,
	.align-center {
		float: none !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* VARIABLES
-------------------------------------------------------------- */

:root {
	--font-family: 'Cera Round Pro', 'Dosis', sans-serif;

	
	--color-white: #ffffff;	--color-white-rgb: 255, 255, 255;
	--color-black: #000000;	--color-black-rgb: 0, 0, 0;
	--color-red: #EC1D2C;		--color-red-rgb: 236, 29, 44;
	--color-magenta: #DE247C;	--color-magenta-rgb: 222, 36, 124;

	--color-grey00: var(--color-white);
	--color-grey10: #F9F9F9;
	--color-grey20: #E8E8E8;
	--color-grey30: #C3C3C3;
	--color-grey40: #A5A5A5;
	--color-grey50: #696969;
	--color-grey60: #696969;
	--color-grey70: #535353;
	--color-grey80: #231F20;
	--color-grey90: var(--color-black);


	--color-bg: var(--color-white);			--color-bg-rgb: var(--color-white-rgb);
	--color-brand: var(--color-red);		--color-brand-rgb: var(--color-red-rgb);
	--color-brand1: var(--color-brand);		--color-brand1-rgb: var(--color-brand-rgb);
	--color-brand2: var(--color-magenta);	--color-brand2-rgb: var(--color-magenta-rgb);

	--gradient-red: linear-gradient(to right, var(--color-brand1), var(--color-brand2));
	--gradient-grey20: linear-gradient(to right, var(--color-grey10), var(--color-grey20));
	--gradient-grey40: linear-gradient(to right, var(--color-grey30), var(--color-grey40));
	--gradient-grey60: linear-gradient(to right, var(--color-grey50), var(--color-grey60));
	--gradient-grey80: linear-gradient(to right, var(--color-grey70), var(--color-grey80));

	--gradient-grey-light: var(--gradient-grey40);
	--gradient-grey: var(--gradient-grey60);
	--gradient-grey-dark: var(--gradient-grey80);
	--gradient-brand: var(--gradient-red);

	--shape-line: shape(from 99.98% 46.21%,curve by -0.23% -12.97% with -0.03% -7.6%/-0.13% -12.98%,line by -0.05% 0%,line by -0.1% 0%,line by -0.78% -0.17%,curve by -29.67% -25.38% with -9% -0.39%/-20.64% -17.04%,curve by -43.73% -3.46% with -14.08% -11.47%/-29.6% -7.89%,curve to 0.43% 17.89% with 12.93% 7.32%,curve by -0.36% 15.26% with -0.14% 0%/-0.28% 5.91%,curve by 0.25% 53.89% with -0.18% 19.06%/-0.03% 48.92%,arc by 0.1% 1.04% of 0.23% 8.71% small ccw,line by 0.05% 0%,line by 0.1% -0.07%,line by 0.78% -0.51%,line by 4.69% -3.05%,curve to 37.28% 88.84% with 16.28% 77.3%/27.03% 79.15%,curve by 62.47% -15.79% with 20.7% 29.99%/41.81% -9.23%,curve by 0.23% -26.8% with 0.16% 0.5%/0.29% -14.49%);
	--shape-bar: shape(from 99.96% 42.81%,curve to 92.46% 0.16% with 99.63% 18.8%/96.27% 0.33%,curve by -80.75% 1.96% with -7.23% -0.56%/-73.53% 0.43%,curve by -4.49% 1.34% with -0.98% 0.3%/-3.47% 1.02%,arc by -3.44% 6.3% of 8.52% 61.09% small ccw,curve to 3.36% 90.88% with -1.08% 27.36%/-1.28% 71.22%,arc to 6.39% 98.41% of 8.18% 58.64% small ccw,curve by 3.07% 1.13% with 1% 0.78%/2.06% 0.84%,curve by 74.02% -2.63% with 4.95% 1.25%/69.07% -0.16%,curve by 8.98% -2.25% with 2.96% -1.37%/6.01% -2.34%,curve by 7.5% -51.84% with 4.37% 0.25%/7.97% -24.34%);
	--shape-chevron-down: shape(from 100% 9.97%,arc by -1.2% 5.26% of 9.99% 11.7% small cw,line to 59.67% 93.77%,arc by -9.57% 6.22% of 11.07% 12.96% small cw,arc by -9.79% -6.22% of 11.16% 13.07% small cw,line to 1.38% 15.23%,arc to 0% 9.97% of 8.3% 9.75% small cw,arc to 10.18% 0.03% of 9.61% 11.28% small cw,arc to 19.76% 6.08% of 10.66% 12.52% small cw,line by 0.05% 0.1%,arc to 80.23% 6.08% of 34.75% 40.74% small ccw,arc to 89.82% 0.03% of 10.66% 12.52% small cw,arc by 10.18% 9.95% of 9.61% 11.25% small cw);
	--shape-blob-1-1: shape(from 99.96% 52.02%,curve to 41.84% 1.28% with 99.13% 19.89%/69.27% -6.15%,curve to 0% 46.14% with 20.18% 7.14%/-0.17% 21.56%,curve to 58.01% 100% with -0.3% 99.96%/27.53% 99.85%,curve by 41.98% -46.74% with 24.35% 0.12%/42.45% -19.95%,curve by -0.03% -1.23% with -0.01% -0.62%);
	--shape-blob: var(--shape-blob-1-1);


	--post-col-gap: 25px;
	--post-row-gap: 50px;
	--post-cols: 3;
}




/* TYPOGRAPHY
-------------------------------------------------------------- */

body{
	font-family: var(--font-family);
	color: var(--color-grey60);
	font-weight: 400;
	font-size: 14pt;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	font-weight: bold;
	font-style: normal;
	color: var(--color-grey60);
	text-rendering: optimizeLegibility;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	line-height: 1;
}

p{
	margin: 10px auto;
	width: 100%;
	max-width: 1000px;
	font-family: var(--font-family);
	font-weight: normal;
	color: var(--color-grey60);
	font-size: 18px;
	line-height: 26px;
}

em {
	font-style: italic !important;
}

h1{
	font-size: 44px;
	color: var(--color-grey80);
	margin: 0 auto 50px auto;
}
h1.small {
	height: 44px;
	margin: 0 auto 50px auto;
	font-size: 30px;
	color: var(--color-grey60);
}
h2, h3 {
	font-size:  30px;
}
h3 {
	font-weight: bold;
	color: var(--color-grey70);
}

strong {
	font-weight: bold !important;
}

small {
	font-size: 80%;
}

@media screen and (max-width: 782px) {
	h1{
		font-size: 40px;
		margin: 0 auto 20px auto;
	}
}

/* Links & Buttons
-------------------------------------------------------------- */
a,
a:link,
a:visited,
a:active {
	color: var(--color-black);
	transition: color .3s ease;

	& svg {
		fill: var(--color-black);
		transition: fill .3s ease;
	}
	&:hover {
		color: var(--color-brand);

		& svg {
			fill: var(--color-brand);
		}
	}
}

button,
.button,
a.button {
	font-family: var(--font-family);
	color: #ffffff;
	text-align: center;
	padding: 10px 30px 12px 30px;
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
	background-color: var(--color-brand);
	background-image: var(--gradient-brand);
	cursor: pointer;
	border-radius: 50px;
	border: 0;
	width: auto;
	height: auto;
	text-decoration: none;
	vertical-align: middle;
	transform: perspective(1px) translateZ(0);
	transition: all 0.3s ease;

	& .gpay-button {
			border: 0px;
			box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, 
						rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;
		& .black {
			background-color: var(--color-black);
			box-shadow: none;
		}
	}

	&:hover {
		transform: scale(1.1);
		color: #ffffff;
	}
	&.grey20 {
		background-color: var(--color-grey20);
		background-image: var(--gradient-grey20);
	}
	&.grey40 {
		background-color: var(--color-grey40);
		background-image: var(--gradient-grey40);
	}
	&.grey,
	&.grey60 {
		background-color: var(--color-grey60);
		background-image: var(--gradient-grey60);
	}
	&.grey80 {
		background-color: var(--color-grey80);
		background-image: var(--gradient-grey80);
	}
}
a.cover {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9;
}




/* IMAGES
-------------------------------------------------------------- */
	
img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */
@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */
	
.round {
	border-radius: 1000px !important;
}

img.scaled-image {
	border: 0 !important;
}


/* STRUCTURE
-------------------------------------------------------------- */

body, html {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
}
.page-wrap {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
}
body.admin-bar .page-wrap {
	height: calc(100vh - 32px);
}
.wrapper {
	height: auto;
	min-height: calc(100vh - 63px - 352px);
	margin: 0;
	padding: 0;
	clear: both;
	overflow: hidden;
}
.content {
    margin-top: 100px;
}

body.flush-top .content {
	margin-top: 0;
}
body.flush-bottom footer {
	margin-top: 0;
}

.hidden {
	display: none;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
}

.flex-spacer-w {
    flex-grow: 1;
}
blockquote {
	position: relative;
	font-weight: 100;
	font-size: 22pt;
	margin: 40px 45px;
	z-index: 2;
	max-width: 1000px;
	margin: 40px auto;
}

blockquote p {
	color: #595959;
	line-height: 1.3em;
	font-size: 30px;
	margin-top: 5% !important;
	padding-left: 43px;
	position: relative;
	z-index: 3;
}

blockquote::before {
	display: inline-block;
	position: absolute;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal !important;
	-webkit-font-smoothing: antialiased;
	content: "\f10d" !important;
	left: -12px;
	top: -42px;
	color: #777;
	opacity: 0.2;
	font-size: 70pt;
	z-index: 1;
}
.container-styled {
	width: 90%;
	position: relative;
	max-width: 1000px;
	margin: 0 auto 50px auto;
	background: #fff;
	box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
	padding: 25px;
	border-radius: 25px;
	transition: all .3s;
}

.displace {
	position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.gradient-line {
	width: 100%;
	height: 1px;
	background: -moz-linear-gradient(left, rgba(213,213,213,0) 0%, rgba(213,213,213,1) 50%, rgba(213,213,213,0) 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(213,213,213,0)), color-stop(50%,rgba(213,213,213,1)), color-stop(100%,rgba(213,213,213,0))); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(left, rgba(213,213,213,0) 0%,rgba(213,213,213,1) 50%,rgba(213,213,213,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(left, rgba(213,213,213,0) 0%,rgba(213,213,213,1) 50%,rgba(213,213,213,0) 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(left, rgba(213,213,213,0) 0%,rgba(213,213,213,1) 50%,rgba(213,213,213,0) 100%); /* IE10 preview */
	background: linear-gradient(to right, rgba(213,213,213,0) 0%,rgba(213,213,213,1) 50%,rgba(213,213,213,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d5d5d5', endColorstr='#00d5d5d5',GradientType=1 ); /* IE6-9 */
}

.line-above, 
.line-below {
	width: 100%;
	padding: 20px;
	position: relative;
	text-align: left;

	&::after {
		content: '';
		width: 100%;
		height: 9px;
		background-color: var(--color-grey30);
		clip-path: var(--shape-line);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
	}
}
.line-above {
	margin-top: 30px;

	&::after {
		top: 0px;
	}
}
.line-below {
	margin-bottom: 30px;
	
	&::after {
		bottom: 0px;
	}
}

hr {
	border: solid #ddd;
	border-width: 1px 0 0;
	clear: both;
	margin: 1.25rem 0 1.1875rem;
	height: 0;
}

.desktop {
	display: block;
}
.mobile {
	display: none;
}

.left-side {
	width: 50%;
	float: left;
}

.right-side {
	width: 50%;
	float: right;
}
.frm_submit {
	position: relative;
}
.frm_ajax_loading {
	display: none !important;
	z-index: 1;
	position: absolute;
	top: -35px;
	text-align: center;
	width: 100% !important;
	padding: 5px;
	background: rgba(var(--color-bg-rgb),0.9);
}
.xplody-loader {
position: relative;
	display: inline-block;
background: url('https://xplodygames.com/wp-content/themes/xplody/img/loader/bomb.svg');
width: 60px;
height: 110px;
z-index: 0;
background-repeat: no-repeat;
background-position: center center;
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: bottom;
animation-name: bounce;
}
.xplody-loader::before {
content: ' ';
background: url('https://xplodygames.com/wp-content/themes/xplody/img/loader/spark-1.svg');
width: 20px;
height: 30px;
z-index: -1;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 3px;
right: -1px;
  -webkit-animation: rotating-left 1s linear infinite;
  -moz-animation: rotating-left 1s linear infinite;
  -ms-animation: rotating-left 1s linear infinite;
  -o-animation: rotating-left 1s linear infinite;
  animation: rotating-left 1s linear infinite;
}
.xplody-loader::after {
content: ' ';
background: url('https://xplodygames.com/wp-content/themes/xplody/img/loader/spark-2.svg');
width: 20px;
height: 20px;
z-index: -1;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 6px;
right: -1px;
  -webkit-animation: rotating-right 1s linear infinite;
  -moz-animation: rotating-right 1s linear infinite;
  -ms-animation: rotating-right 1s linear infinite;
  -o-animation: rotating-right 1s linear infinite;
  animation: rotating-right 1s linear infinite;
}
@keyframes rotating-left {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes rotating-right {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bounce {
0%   { transform: scale(1,1)      translateY(0); }
10%  { transform: scale(1.1,.9)   translateY(0); }
30%  { transform: scale(.9,1.1)   translateY(-80px); }
40%  { transform: scale(1.05,.95) translateY(0); }
47%  { transform: scale(1,1)      translateY(-7px); }
54%  { transform: scale(1,1)      translateY(0); }
100% { transform: scale(1,1)      translateY(0); }
}


.wrap {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	gap: 70px;
}
.main {
	width: 100%;
}
.side {
	width: 100%;
	max-width: 220px;
}
.cols {
	display: flex;
}
@media all and (max-width: 782px) {
	.cols {
		flex-direction: column;
	}
}


/* LISTS
-------------------------------------------------------------- */


/* FORMS
-------------------------------------------------------------- */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=url],
input[type=tel],
input[type=file],
input[type=search],
select,
textarea {
	width: 100%;
	max-width: 700px;
	height: auto;
	min-height: 44px;
	background: var(--color-bg);
	border-radius: 30px;
	
	font-family: var(--font-family);
	padding: 0px 11px 4px 10px;
	font-size: 18px;
	line-height: 30px;
	color: #4d4d4d;
	border: solid 1px #ccc;
	outline-width: 0 !important;
	outline: none !important;
	-webkit-appearance: none !important;
	transition: all 0.3s linear;
	resize: none !important;
}

.form-single-line {
	width: 100%;
	max-width: 700px;
	height: auto;
	min-height: 44px;
	margin: 40px 0 20px 0;
	background: var(--color-bg);
	border-radius: 30px;
	position: relative;
	display: flex;

	& input[type=text],
	& input[type=password],
	& input[type=email],
	& input[type=number],
	& input[type=url],
	& input[type=tel],
	& input[type=file],
	& input[type=search],
	& select,
	& textarea {
		width: calc(100% - 42px);
		border: solid 1px var(--color-bg);
	}

	& button {
		width: 42px !important;
		height: 42px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		margin: 2px;
		& svg {
			fill: var(--color-bg);
			width: 26px;
		}
	}
}

.form_wrap,
.kit-subscribe {
	width: 100%;
	max-width: 700px;
	position: relative;

	& .overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		backdrop-filter: blur(10px) brightness(104%);
		box-shadow: 0 4px 8px rgba(var(--color-black-rgb),0.1);
		border-radius: 20px;
		padding: 25px;
		transition: all 0.4s ease;
		pointer-events: none;
		opacity: 0;

		&.active {
			pointer-events: all;
			opacity: 1;
		}

		& .xplody-loader {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		& .result {
			background: rgba(var(--color-bg-rgb),0.9);
			padding: 15px;
			box-shadow: 0 4px 8px rgba(var(--color-black-rgb),0.1);
			border-radius: 10px;
			min-height: 150px;
			height: 100%;
			width: 100%;

			&.success {
				background-color: #DCFED9;
				fill: #69C60E;
			}
			&.existing {
				background: blue;
			}
			&.error {
				background: red;
			}

			& .email-result {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.4s ease;
				opacity: 0;

				& .email-result-title {
					font-size: 30px;
				}
			}

			&.active {
				& .email-result {
					opacity: 1;
				}
			}
		}
	}
}
/* ^ FORMS						*/
/* -------------------------------------------------------------- */
/* ⌄ WP CONSENT (GDPR COOKIE BANNER)		*/

#wpconsent-root {
--wpconsent-background: rgba(var(--color-bg-rgb), 0.5);
	& #wpconsent-container {
		&::part(wpconsent-banner) {
			background: unset;
			background-color: rgba(var(--color-black-rgb),0.5);
			backdrop-filter: blur(20px);
		}
		&::part(wpconsent-button-preferences),
		&::part(wpconsent-button-cancel),
		&::part(wpconsent-preferences-cancel-button) {
			background-color: rgba(var(--color-black-rgb),0.3);
		}
		&::part(wpconsent-button-accept),
		&::part(wpconsent-preferences-accept-button),
		&::part(wpconsent-preferences-save-button) {
			background-color: var(--color-brand);
			background: var(--gradient-brand);
		}
		&::part(wpconsent-preferences-modal) {
			background-color: rgba(var(--color-bg-rgb),0.2);
			backdrop-filter: blur(10px);
		}
		&::part(wpconsent-preferences-content) {
			backdrop-filter: blur(20px);
			background-color: rgba(var(--color-bg-rgb),0.9);
			margin: 0 5%;
			color: var(--color-grey70);
		}
		&::part(wpconsent-accordion-item) {
			border-top: solid 0px var(--color-grey40);
			border-bottom: solid 1px var(--color-grey40);
			padding: 0 36px;
		}
		&::part(wpconsent-category-essential) {
			border-top: solid 1px var(--color-grey40);
		}
		&::part(wpconsent-preferences-close),
		&::part(wpconsent-accordion-toggle) {
			filter: invert(100%);
		}
		&::part(wpconsent-checkbox-toggle) {
			border: solid 1px var(--color-grey20);
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(var(--color-black-rgb),0.3);
		}
		&::part(wpconsent-checkbox-toggle-disabled) {
			border: solid 1px var(--color-grey10);
		}
		&::part(wpconsent-service-woocommerce-sourcebuster) {
			margin-left: 0;
			padding: 0 !important;
			border-top: solid 1px var(--color-grey40);
			border-bottom: solid 0px var(--color-grey40);
		}
	}
}

/* ^ WP CONSENT (GDPR COOKIE BANNER)		*/
/* -------------------------------------------------------------- */
/* ⌄ HEADER and NAVIGATION		*/

header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
body.admin-bar header {
	top: 32px;
}
@media all and (max-width: 782px) {
    html #wpadminbar {
        top: -46px !important;
    }
	body.admin-bar header {
		top: 46px;
	}
}
.header-bg,
.header-shadow-inner {
	width: 100%;
	height: 135px;
	aspect-ratio: 12.317;
	clip-path: shape(from 22.55% 99.99%,curve by -1.76% -0.7% with -0.6% 0%/-1.2% -0.24%,curve by -1.59% -1.97% with -0.54% -0.44%/-1.08% -1.11%,arc by -2.78% -7.07% of 20.57% 253.41% small cw,arc by -2.39% -10% of 24.36% 299.98% small cw,curve by -2.2% -11.49% with -0.75% -3.66%/-1.49% -7.64%,curve by -2.24% -11.69% with -0.72% -3.91%/-1.47% -7.95%,arc by -2.45% -10.21% of 24.81% 305.52% small ccw,arc to 4.25% 39.63% of 21.39% 263.45% small ccw,curve by -1.66% -2.03% with -0.54% -0.89%/-1.09% -1.58%,curve by -1.84% -0.72% with -0.59% -0.47%/-1.21% -0.72%,hline to 0%,vline by -0.32%,line to 0% 0.32%,vline to 0%,hline by 100%,vline to 0.32%,line by 0% 36.24%,vline by 0.32%,hline to 41%,curve by -1.8% 0.72% with -0.63% 0%/-1.23% 0.24%,curve by -1.55% 2.03% with -0.54% 0.46%/-1.06% 1.13%,arc by -2.49% 7.23% of 14.17% 174.56% small ccw,arc by -1.91% 10.2% of 12.93% 159.25% small ccw,curve by -1.62% 11.68% with -0.57% 3.73%/-1.11% 7.77%,curve by -1.59% 11.5% with -0.51% 3.85%/-1.03% 7.83%,arc by -1.86% 10.01% of 12.74% 156.92% small cw,arc by -2.4% 7.07% of 13.68% 168.45% small cw,curve by -1.49% 1.98% with -0.47% 0.87%/-0.97% 1.54%,curve by -1.73% 0.7% with -0.54% 0.46%/-1.12% 0.7%,close);
	backdrop-filter: blur(20px);
	background-color: rgba(var(--color-bg-rgb),0);
	position: absolute;
}
.header-bg {
	background-color: rgba(var(--color-bg-rgb), 0.5);
}
.header-shadow {
    width: 100%;
    height: 170px;
    aspect-ratio: 12.317;
    clip-path: shape(from 100% 0%,hline to 41%,curve by -1.8% 0.57% with -0.63% 0%/-1.23% 0.19%,curve to 37.65% 2.19% with 38.66% 0.94%/38.14% 1.48%,arc by -2.49% 5.77% of 14.17% 139.13% small ccw,arc to 33.25% 16.09% of 12.93% 126.96% small ccw,curve by -1.62% 9.32% with -0.57% 2.98%/-1.11% 6.2%,curve by -1.59% 9.17% with -0.51% 3.07%/-1.03% 6.25%,arc by -1.86% 7.99% of 12.74% 125.1% small cw,arc by -2.4% 5.64% of 13.67% 134.26% small cw,curve by -1.49% 1.58% with -0.47% 0.7%/-0.97% 1.23%,curve by -1.73% 0.56% with -0.54% 0.37%/-1.12% 0.56%,vline by -0.01%,curve by -1.76% -0.56% with -0.6% 0%/-1.2% -0.19%,curve by -1.59% -1.58% with -0.54% -0.35%/-1.08% -0.88%,arc by -2.78% -5.64% of 20.56% 201.97% small cw,arc by -2.39% -7.98% of 24.35% 239.11% small cw,curve by -2.2% -9.17% with -0.75% -2.92%/-1.49% -6.1%,curve by -2.24% -9.33% with -0.72% -3.12%/-1.47% -6.34%,arc by -2.45% -8.15% of 24.79% 243.48% small ccw,arc to 4.25% 2.19% of 21.38% 209.97% small ccw,curve to 2.6% 0.57% with 3.72% 1.48%/3.16% 0.93%,curve to 0.76% 0% with 2.01% 0.19%/1.39% 0%,hline to 0%,vline to 100%,hline to 100%,close);
    filter: blur(10px);
    position: absolute;
    z-index: -1;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;

	& .header-shadow-inner {
		background-color: rgba(var(--color-black-rgb),0.3);
		margin-top: -50px;
	}
}

.logo {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: calc(22% - 106px);
	width: 212px;
	height: 103px;
	filter: drop-shadow(0px 0px 20px rgba(var(--color-bg-rgb),1))
			drop-shadow(0px 0px 5px rgba(var(--color-bg-rgb),1));

	& a {
		display: block;
		width: 100%;
		height: 100%;
		& img {
			max-width: 200px;
			width: 100%;
		}
	}
}
nav {
	position: absolute;
	left: calc(23% + 212px);
	width: calc(90% - (20% + 212px));
	max-width: 800px;
	z-index: 999999;

	& ul {
		padding: 0;
		margin: 0;
		list-style: none;
		position: relative;
		display: flex;
		justify-content: space-around;

		& li {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			white-space: nowrap;
			margin: 0;

			&:before {
				display: none !important;
			}

			& a {
				text-decoration: none;
				height: 50px;
				padding: 0 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				& svg.alynthia-logo {
					height: 35px;
				}
				& svg.elevation-logo {
					height: 26px;
					margin-bottom: 10px;
				}
			}
		}
	}
}
body.has-items-in-cart li.nav-cart a::after {
	content: '';
	display: block;
	position: absolute;
	width: 13px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-brand);
	background: var(--gradient-brand);
	top: calc(50% - 10px);
	right: calc(50% - 22px);
	transform: translate(-50%, -50%);
	z-index: 9;
}

#menuToggle input {
	opacity: 0;
	display: none;
}
.menuwrap{
	margin: 0;
	padding: 0;
	display: inline;
}

@media all and (max-width: 1000px) {
	.header-bg,
	.header-shadow-inner {
		height: 110px;
	}
	.header-shadow {
		height: 140px;
		top: 39px;
		& .header-shadow-inner {
			margin-top: -39px;
		}
	}
	.logo {
		left: calc(21.5% - 75px);
		width: 150px;
	}
	#menuwrap {
		text-align: center;
	}
	nav {
		width: calc(100% - 300px);
	}
}
@media all and (max-width: 1100px) {
	nav ul.menu li a {
		padding: 0px 20px;
	}
}
@media all and (max-width: 782px) {
	header {
		overflow-x: clip;
		top: -1px;
	}
	.header-bg,
	.header-shadow-inner {
		aspect-ratio: 4.17;
		clip-path: shape(from 21.63% 100%,arc by -21.63% -7.17% of 198.09% 826.07% small cw,vline to 0%,hline by 100%,vline by 59.99%,hline by -17.08%,curve by -54.4% 40.01% with -30.27% 0%/-33.93% 36.92%,close);
		height: 94px;
	}
	.header-shadow {
		aspect-ratio: 2.903;
		clip-path: shape(from 28.52% 27.79%,hline to 21.63%,arc to 0% 22.81% of 198.64% 576.74% small cw,vline by 77.19%,hline to 100%,vline to 0%,hline to 82.92%,curve to 28.52% 27.79% with 52.66% 0%/48.99% 25.64%);
		height: 135px;
	}

	.logo {
		left: 18px;
		width: 140px;
		top: 10px;
	}

	#menuToggle {
		display: block;
		position: absolute;
		top: 20px;
		right: 30px;
		z-index: 1;
		-webkit-user-select: none;
		user-select: none;

		& span {
			display: block;
			width: 33px;
			height: 4px;
			margin-bottom: 5px;
			position: relative;

			background: #cdcdcd;
			border-radius: 3px;

			z-index: 1;

			transform-origin: 4px 0px;

			transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						opacity 0.55s ease;

			&:first-child {
				transform-origin: 0% 0%;
			}
			&:nth-last-child(2) {
				transform-origin: 0% 100%;
			}
		}

		& input {
			display: block;
			width: 40px;
			height: 32px;
			position: absolute;
			top: -7px;
			left: -5px;
			cursor: pointer;
			z-index: 2;
			-webkit-touch-callout: none;

			&:checked ~ span {
				opacity: 1;
				transform: rotate(45deg) translate(-2px, -1px);
				background: #232323;
				
				&:nth-last-child(3) {
					opacity: 0;
					transform: rotate(0deg) scale(0.2, 0.2);
				}
				&:nth-last-child(2) {
					opacity: 1;
					transform: rotate(-45deg) translate(0, -1px);
				}
			}
		}
	}
	body.has-items-in-cart #menuToggle {
		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 13px;
			height: 12px;
			border-radius: 50%;
			background: var(--color-brand);
			background: var(--gradient-brand);
			top: calc(50% - 19px);
			right: calc(50% - 22px);
			transform: translate(-50%, -50%);
			z-index: 9;
			transition: transform 0.5s ease;
			transform: scale(1);
		}
		&:has(input:checked)::after {
			transform: scale(0);
		}
	}
    #menuwrap {
		position: absolute;
		width: 200px;
		margin: -100px 0 0 0;
		padding: 106px 20px 40px 20px;
		right: -30px;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		font-size: 24px;
		border-bottom-left-radius: 90%;
		border-top-left-radius: 200px;
		border-bottom-right-radius: 100px;
		backdrop-filter: blur(20px);
		background: rgba(var(--color-bg-rgb),0.5);
		box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);

		/* THE FIXES */
		transform-origin: 0% 0%;
		transform: rotate(45deg) translate(200px, -100%);; /* Start hidden */
		visibility: hidden;           /* 1. Prevent width expansion */
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 
					visibility 0.5s;  /* 2. Match the slide timing */
    }

	#menuToggle input:checked ~ #menuwrap {
		transform: none;
		visibility: visible;
	}
	nav ul,
	nav ul.menu li {
		display: block;
		height: auto;
	}
	body.has-items-in-cart li.nav-cart a::after {
		right: calc(50% - 54px);
	}
}


/* ^ HEADER and NAVIGATION		*/
/* -------------------------------------------------------------- */
/* ⌄ SEARCH 					*/

.site-search-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	transition: opacity .5s, z-index 0s, backdrop-filter 1s;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	backdrop-filter: blur(20px);
	background-color: rgba(var(--color-bg-rgb),0);

	&.search-open {
		z-index: 999999;
		opacity: 1;
		pointer-events: all;
		backdrop-filter: blur(20px);
		background-color: rgba(var(--color-bg-rgb),0.4);
	}
	& .site-search-inner {
		width: 90%;
		margin: 60vh auto 0 auto;
		opacity: 0;
		transition: margin-top .5s, opacity .5s;
		-webkit-transition: margin-top .5s, opacity .5s;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		&.search-open {
			margin: 40vh auto 0 auto;
			opacity: 1;
			transition: margin-top .5s, opacity .5s;
			-webkit-transition: margin-top .5s, opacity .5s;
		}
		& .search-close-button {
			top: 20px;
			right: 20px;
			font-size: 48pt;
			position: absolute;
			color: #cccccc;
			cursor: pointer;
			transition: all .3s;
			&:hover {
				color: #ec1d2c;
			}
		}
	}
	&  .form_wrap {
		& .form-single-line {
			width: 100%;
			max-width: 700px;
			height: auto;
			min-height: 46px;
			margin: 40px 0 20px 0;
			background: var(--color-bg);
			border-radius: 30px;
			position: relative;
			display: flex;
			box-shadow: 0 5px 40px rgba(var(--color-black-rgb), 0.06);

			& input#s.sitesearch-input-text {
				text-align: center;
				padding-left: 52px;
			}
		}
	}
}
body.search {
	& span.search-terms {
		color: var(--color-grey70);
	}
	& span.search-count {
		display: block;
		font-size: 14pt;
		color: #aaa;
		font-weight: bold;
	}

	& .search-results {
		margin: 0 auto 60px auto !important;
	}
}
.search-form-wrap {
    display: flex;
	justify-content: center;
	width: 100%;

	& .form_wrap {
		max-width: 550px;

		& .form-single-line {
			box-shadow: 0 5px 40px rgba(var(--color-black-rgb), 0.06);
			& input {
				text-align: center;
				padding-left: 52px;
			}
		}
	}
}
.search-posts-wrap {
    width: 90%;
	max-width: 1400px;
    margin: 100px auto 0px auto;
    display: flex;
	gap: 70px;

	& .searchwrap { 
		width: 100%;
		/* MOST CSS MOVED TO TOP LEVEL BECAUSE IT'S USED FOR BLOG, TOO
		/* Look for "ul.alm-listing.alm-ajax" */
		--post-col-gap: 25px;
		--post-row-gap: 50px;
		--post-cols: 4;
	}
}



/* ^ SEARCH			*/
/* -------------------------------------------------------------- */
/* ⌄ BLOG 			*/

.blog-posts-wrap {
    width: 90%;
	max-width: 1400px;
    margin: 0 auto;
    display: flex;
	gap: 70px;

	& .blogwrap {
		width: 100%;
		/* MOST CSS MOVED TO TOP LEVEL BECAUSE IT'S USED FOR SEARCH, TOO */
		/* Look for "ul.alm-listing.alm-ajax" */
		--post-col-gap: 25px;
		--post-row-gap: 50px;
		--post-cols: 3;

		& ul {
			max-width: 1100px;

			& li.postcontainer {
				@media all and (min-width: 782px) {
					&:first-of-type {
						width: 100%;
						display: flex;

						& .postmetadata {
							width: calc(40% + 130px);
							right: 0;
							top: 0;
							z-index: 11;
						}
						& > a {
							flex-direction: row;
							width: 100%;

							& .post-img {
								width: 60%;
								border-radius: 40% 40% 30% 40%;
								z-index: 10;
								height: auto;
								max-height: 430px;
								padding-top: 45%;
							}
							& .post-text {
								width: calc(40% + 130px);
								margin: 10px 10px 20px -130px;
								padding: 17px 25px 25px 150px;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								gap: 10px;
								border-radius: 40px 30% 30% 50%;
								backdrop-filter: unset;
								background: var(--color-grey10);
								
								& .posttitle {
									font-size: 34px;
									text-align: left;
									line-height: 34px;
								}
								& .post-excerpt {
									display: block;
									transform: rotate(3deg);
								}
								& .button {
									display: block;
									transform: rotate(3deg);
								}
							}
						}
					}
				}
			}
		}
	}
	& .blog-sidebar {
		width: 100%;
		max-width: 220px;

		& .form-single-line {
			border: solid 1px var(--color-grey30);
		}
	}
}
.blog-interest {
	& h2 {
		font-size: 22px;
		
	}
	& ul {
		display: flex;
		gap: 10px;
		align-items: flex-end;
		justify-content: center;

		& li {

			& a {
				text-decoration: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;

				& svg {
					width: 100%;
					max-width: 30px;
				}
				& span {
					font-size: 14px;
					font-weight: bold;
					text-align: center;
					height: 48px;
					line-height: 1.1;
					width: 100%;
					max-width: 60px;
				}
			}
		}
	}
}
@media all and (max-width: 782px) {
	.blog-posts-wrap {
		flex-direction: column-reverse;

		& .blog-sidebar {
			max-width: 100%;
		}
	}
}

.singlepost {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

	& .singlepostcontainer {
		width: 100%;
		max-width: 1200px;
		position: relative;
		padding-top: 0;
		margin-top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		& .single-post-details {
			position: relative;
			z-index: 9;
			padding: 0 25px 45px 25px;
			margin: 0 10% -10% 10%;
			border-radius: 40px 80% 90px 90%;
			transform: rotate(-3deg);
			border: solid 3px rgba(var(--color-bg-rgb),0.2);
			background: rgba(var(--color-bg-rgb),0.6);
			backdrop-filter: blur(40px);

			& .postmetadata {
				transform: rotate(3deg);
				margin: 0 0 20px 0;

				& ul {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;

					& li a {
						font-size: 10px;
						line-height: 10px;
						padding: 5px 10px;
						text-transform: lowercase;
						text-decoration: none;
						color: var(--color-grey50);
						background: var(--color-bg);
						border-radius: 50px;
						border: solid 1px var(--color-grey20);
						text-align: center;
					}
				}
			}
			& .posttitle {
				transform: rotate(3deg);
				font-size: 36px;
				margin: 30px 10px 20px 10px;
			}
			& .post-excerpt {
				transform: rotate(3deg);

				& p {
					padding: 10px 10%;
					font-size: 16px;
					margin: 0 auto;
					line-height: 1.2;
					text-align: center;
				}
			}
		}
		& .single-post-feature-img {
			width: 90%;
			max-width: 1000px;
			aspect-ratio: 16 / 9;
			background-size: cover;
			background-position: center center;
			border-radius: 30% 30% 20% 20%;
			position: relative;
		}
		& .singlepostcontent {
			padding: 100px 10%;
			width: 100%;
			max-width: 1000px;

			& h2,
			& h3 {
				font-size: 30px;
				text-align: left;
				border-top: solid 2px var(--color-grey20);
				padding-top: 25px;
				margin-top: 35px;
				width: 100%;
			}
		}
	}
}
@media all and (max-width: 782px) {
	.singlepost {
		& .singlepostcontainer {
			margin-top: 20px;

			& .single-post-details {
				margin: 0 0% -10% 0%;
				border-radius: 40px 40% 25% 30%;
				padding: 0 25px 25px 25px;

				& .posttitle {
					font-size: 26px;
					margin: 20px 10px 10px 10px;
				}
				& .post-excerpt p {
					font-size: 14px;
				}
			}
			& .single-post-feature-img {
				aspect-ratio: 12 / 9;
			}
			& .singlepostcontent {
				padding: 20px 20px 100px 20px;

				& h2,
				& h3 {
					font-size: 24px;
				}
				& p {
					font-size: 16px;
				}
			}
		}
	}
}

#ajax-load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul.alm-listing.alm-ajax {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: var(--post-col-gap);
	row-gap: var(--post-row-gap);
	padding: 0 0 20px 0;

	& li.postcontainer {
		width: calc(100% / var(--post-cols) - ((var(--post-col-gap) * (var(--post-cols) - 1)) / var(--post-cols)));
		position: relative;

		& .postmetadata {
			width: 100%;
			display: flex;
			justify-content: center;
			position: absolute;
			z-index: 9;
			top: -11px;
			gap: 10px;

			& a {
				font-size: 10px;
				line-height: 10px;
				padding: 5px 10px;
				text-transform: lowercase;
				text-decoration: none;
				color: var(--color-grey50);
				background: var(--color-bg);
				border-radius: 50px;
				border: solid 1px var(--color-grey20);
				text-align: center;
			}
		}
		& a {
			text-decoration: none;
			display: flex;
			flex-direction: column;

			&:hover {
				color: unset;
			}
			& .post-img {
				width: 100%;
				padding-top: 60%;
				background-size: cover;
				background-position: center 80%;
				border-radius: 85px 40% 40% 75px;
				position: relative;
				box-shadow: 0px 3px 6px rgba(var(--color-black-rgb),0.3);
			}
			& .post-text {
				backdrop-filter: blur(20px);
				position: relative;
				z-index: 9;
				margin-top: -30px;
				padding: 17px 25px 25px 25px;
				box-shadow: 0 3px 6px rgba(var(--color-black-rgb),0.1);
				border-radius: 40px 80% 90px 90%;
				background: rgba(var(--color-bg-rgb),0.5);
				transform: rotate(-3deg);

				& .posttitle {
					margin: 0;
					font-size: 22px;
					line-height: 22px;
					font-weight: 400;
					color: var(--color-grey80);
					transform: rotate(3deg);

					& a {
						text-decoration: none;
					}
				}
				& .post-excerpt {
					display: none;
				}
				& .button {
					display: none;
				}
			}
		}
	}
}
.alm-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 100px 0;

	& .alm-load-more-btn {
		&.done {
			display: none;
		}
	}
}
.alm-placeholder {
	width: calc(100% / var(--post-cols) - ((var(--post-col-gap) * (var(--post-cols) - 1)) / var(--post-cols)));
	height: 199px !important;
	background-color: var(--color-grey20);
	border-radius: 85px 40% 40% 75px;
	position: relative;
	box-shadow: 0px 3px 6px rgba(var(--color-black-rgb),0.3);

	&::after {
		content: '';
		backdrop-filter: blur(20px);
		position: absolute;
		z-index: 9;
		bottom: -30px;
		width: 100%;
		height: 74px;
		padding: 17px 25px 25px 25px;
		box-shadow: 0 3px 6px rgba(var(--color-black-rgb),0.1);
		border-radius: 40px 80% 90px 90%;
		background: rgba(var(--color-bg-rgb),0.5);
		transform: rotate(-3deg);
	}
	& img {
		display: none;
	}
}
.recent-posts {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

@media all and (max-width: 782px) {
	ul.alm-listing.alm-ajax {
		& li.postcontainer {
			width: 100%;
		}
	}
}

/* ^ BLOG					*/
/* -------------------------------------------------------------- */
/* ⌄ WOO MESSAGES			*/

.woo-messages {
	width: 100%;
	max-width: 800px;
	position: relative;
	padding: 20px 40px;
	margin: 0 auto;
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 18px;
	line-height: 1.3;
    
	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		clip-path: var(--shape-bar);
		z-index: -1;
		background: var(--color-grey10);
	}
	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		right: 1px;
		bottom: 3px;
		left: -7px;
		clip-path: var(--shape-bar);
		z-index: -2;
	}

	&.has-success {
		&::before {
			background:	#EEFAF6;
		}
		&::after {
			background: #25C683;
		}
	}

	&.has-error,
	&.has-error.has-success {
		&::before {
			background:	#FFF9ED;
		}
		&::after {
			background: #FEB335;
		}
	}

	&:not(:has(.woo-message:nth-child(2))) {
		.woo-message {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	&:has(.woo-message:nth-child(2)) {
		& .woo-message--error {
			padding-left: 20px;
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				position: absolute;
				top: 8px;
				left: 4px;
				background: #FEB335;
			}
		}

		& .woo-message--success {
			padding-left: 20px;
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				position: absolute;
				top: 8px;
				left: 4px;
				background: #25C683;
			}
		}

	}
}

/* ^ WOO MESSAGES		*/
/* -------------------------------------------------------------- */
/* ⌄ WOO CART			*/

body.woocommerce-cart .woocommerce {
    display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 1200px;
	margin: 150px auto;

	& .woo-cart-wrap {
		display: flex;
		width: 100%;

		& .woocommerce-cart-form {
			width: 100%;
			max-width: 850px;

			& .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
				display: flex;
				flex-direction: column;
				gap: 10px;

				& .cart_item {
					position: relative;
					padding-top: 30px;
					padding-left: 8px;
					padding-bottom: 5.18%;

					& .product-remove {
						position: absolute;
						top: calc((125px / 2) + 6px);
						left: 0;
						z-index: 9;
						width: 44px;
						height: 44px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						border: solid 1px var(--color-grey20);
						box-shadow: 0px 3px 6px rgba(var(--color-black-rgb), 0.06);
						background: var(--color-grey10);
						font-size: 28px;
						line-height: 1;
						cursor: pointer;

						& a {
							text-decoration: none;
							color: var(--color-grey60);
						}
					}
					& .product-thumbnail {
						position: absolute;
						top: 0;
						left: 52px;
						z-index: 9;
						width: calc(30% - 52px);
						max-width: 180px;
						background-size: cover;
						background-repeat: no-repeat;
						border-radius: 28%;
						aspect-ratio: 1 / 1;

						& a {
							display: block;
							width: 100%;

							& img {
								width: 100%;
							}
						}
					}
					& .woo-cart-item-info {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						padding: 24px 24px 24px 30%;
						z-index: 1;

						&::before {
							content: '';
							position: absolute;
							clip-path: var(--shape-bar);
							background: var(--color-grey10);
							display: block;
							min-height: 125px;
							left: 0;
							top: 0;
							right: 22px;
							bottom: 0;
							z-index: -1;
						}

						& .product-name {
							font-size: 22px;
							line-height: 1;
							font-weight: bold;
							color: var(--color-grey80);
							flex-grow: 1;
							padding: 20px 20px 20px 0;

							& a {
								text-decoration: none;
								color: var(--color-grey80);
							}
						}
						& .quantity {
							display: flex;

							& a {
								width: 44px;
								height: 44px;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								text-decoration: none;
								border: solid 1px var(--color-grey20);
								box-shadow: 0px 3px 6px rgba(var(--color-black-rgb), 0.06);
								background: var(--color-grey10);
								font-size: 28px;
								line-height: 1;
								color: var(--color-grey60);
								cursor: pointer;
							}
							& input[type="number"] {
								-webkit-appearance: textfield;
								-moz-appearance: textfield;
								appearance: textfield;
								width: 60px;
								text-align: center;
								border: none;
								background: none;
								font-size: 28px;
								color: var(--color-grey70);
							}
							& input[type=number]::-webkit-inner-spin-button,
							& input[type=number]::-webkit-outer-spin-button {
								-webkit-appearance: none;
							}
							
						}
						& .product-subtotal {
							font-size: 32px;
							font-weight: 200;
							width: 165px;
							display: flex;
							align-items: center;
							justify-content: center;
							letter-spacing: -1px;
						}
					}
					& .woo-cart-item-bg {
						clip-path: var(--shape-bar);
						background: var(--color-grey10);
						display: flex;
						margin-right: 22px;
						width: calc(100% - 22px);
						padding: 24px 24px 24px 30%;
						min-height: 125px;
					}
				}
				& .coupon {
					position: relative;
					padding: 50px;
					margin: 0 30px;

					& .form-single-line {
						border: solid 1px var(--color-grey30);
						margin: 10px 0;

						& button {
							width: auto !important;
							padding: 0 5px !important;
						}
						& input {
							text-align: center;
						}
					}
					&::before,
					&::after {
						content: '';
						display: block;
						position: absolute;
						background: var(--color-grey20);
						clip-path: var(--shape-line);
						width: 100%;
						height: 8px;
						left: 0;
						right: 0;
					}
					&::before {
						top: 30px;
					}
					&::after {
						bottom: 30px;
						display: none;
					}
				}
			}
		}
		& .cart-collaterals {
			display: flex;
			flex-direction: column;
			position: relative;
			padding: 50px 24px;
			gap: 30px;
			justify-content: flex-start;
			align-items: flex-start;
			width: 500px;
			max-width: 100%;

			&::before {
				content: '';
				display: block;
				width: 8px;
				height: 100%;
				position: absolute;
				top: 0;
				left: -8px;
				bottom: 0;
				background: var(--color-grey20);
				clip-path: var(--shape-line);
			}

			& .cart_totals {
				width: 100%;

				& .shop_table.shop_table_responsive {
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 30px;

					& .total-row {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						gap: 30px;
						padding: 0 24px;
						font-size: 20px;
						font-weight: 200;
						position: relative;

						& .total-row-label {
							width: calc(50% - 15px);
							text-align: left;
							line-height: 1;
						}
						& .total-row-info {
							width: calc(50% - 15px);
							text-align: right;
							line-height: 1;
						}
						&.order-total {
							font-weight: 600;
							padding-top: 24px;

							&::before {
								content: '';
								display: block;
								width: 100%;
								height: 8px;
								position: absolute;
								top: -8px;
								left: 0;
								right: 0;
								background: var(--color-grey20);
								clip-path: var(--shape-line);
							}
						}
					}
					& .woocommerce-shipping-totals.shipping {
						& .woocommerce-shipping-destination {
							font-size: 14px;
							border: solid 1px var(--color-grey20);
							border-radius: 20px;
							padding: 0;
							margin: 10px 20px 0 20px;
							min-height: 48px;

							& span.sendto {
								position: absolute;
								height: 48px;
								width: calc(100% - 100px);
								display: flex;
								align-content: center;
								align-items: center;
								padding: 10px 15px;
							}
							& form.woocommerce-shipping-calculator {
								position: relative;
								padding: 27px 15px 7px 15px;

								& .shipping-calculator-button.button.grey {
									position: absolute;
									top: 0px;
									right: 0px;
									height: 42px;
									width: 100px;
									display: flex;
									align-items: center;
									justify-content: center;
									margin: 2px;
									padding: 0 5px;
									background-color: var(--color-grey40);
									background-image: var(--gradient-grey40);
								}

								& #calc_shipping_country_field {
									display: none;
								}
							}
						}
					}
				}
				& .wc-proceed-to-checkout {
					display: flex;
					flex-direction: column;
					padding: 24px;

					& #wc-square-digital-wallet {
						display: flex;
						flex-direction: column;
						margin-top: 24px;

						& #apple-pay-button {
							box-shadow: 0 3px 6px rgba(var(--color-black-rgb),0.3);
						}
					}
				}
			}
		}
	}
}
@media all and (max-width: 782px) {
	body.woocommerce-cart .woocommerce {
		& .woo-cart-wrap {
			flex-direction: column-reverse;

			& .woocommerce-cart-form {
				& .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
					gap: 0px;

					& .cart_item {
						padding-bottom: 0;

						& .product-thumbnail {
							top: 20px;
							left: 50px;
							width: 120px;
						}
						& .woo-cart-item-info {
							min-height: 125px;
							padding: 15px 15px 10px 175px;
							flex-wrap: wrap;
							justify-content: flex-start;
							align-items: center;
							gap: 0;
							align-content: flex-start;

							&::before {
								right: 0;
							}
							& .product-name {
								padding: 0;
								width: 100%;
							}
							& .quantity {
								& input[type="number"] {
									font-size: 22px;
									width: 45px;
									height: 40px;
									min-height: unset;
									padding: 0;
								}
							}
							& .product-subtotal {
								font-size: 22px;
								font-weight: 300;
								width: auto;
								height: 40px;
								display: flex;
								align-items: center;
							}
						}
					}
					& .coupon {
						order: -1;
						padding: 50px 10px;
						margin: 0 10px;

						&::after {
							display: block;
						}
					}
				}
			}
			& .cart-collaterals {
				padding: 0px 24px;

				&::before {
					display: none;
				}
			}
		}
	}
}

/* ^ WOO CART			*/
/* -------------------------------------------------------------- */
/* ⌄ WOO CHECKOUT		*/

body.woocommerce-checkout .woocommerce {
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 1200px;
	margin: 150px auto;

	& .checkout.woocommerce-checkout {
		position: relative;

		& .woocommerce-NoticeGroup {
			position: fixed;
			top: 50px;
			right: 0px;
		}
	}
}


/* ^ WOO CHECKOUT		*/
/* -------------------------------------------------------------- */
/* ⌄ FOOTER 			*/

.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
	gap: 70px;
	position: relative;
	background: var(--gradient-brand);
	margin-top: 16%;

	& .logo-icon {
		position: absolute;
		top: -190px;
		z-index: 9;
		left: 50%;
		transform: translateX(-50%);
		width: 85px;
	}

	& .social {
		width: 100%;
		max-width: 700px;
		display: flex;
		justify-content: center;
		gap: 50px;
		flex-wrap: wrap;

		& svg {
			fill: var(--color-white);
			height: 50px;
			transition: opacity 0.5s ease;
			opacity: 0.3;
		}
		& a:hover svg {
			fill: var(--color-white);
			opacity: 1;
		}
	}

	& .newsletter-wrap {
		width: 100%;
		max-width: 650px;
		position: relative;

		& .newsletter {
			width: 100%;
			padding: 30px 50px;
			border-radius: 50px;
			border: solid 2px rgba(var(--color-bg-rgb),0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			& h3 {
				font-size: 32px;
				color: var(--color-bg);
			}
			& .newsletter-perks {
				font-size: 26px;
				line-height: 28px;
				color: var(--color-bg);
				font-weight: 200;
				text-align: center;
			}
			& .email-disclaimer {
				font-size: 16px;
				line-height: 16px;
				color: var(--color-bg);
				font-weight: 200;
			}
		}

	}
	& .copyright {
		font-size: 18px;
		text-align: center;
		color: var(--color-bg);
		fill: var(--color-bg);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		& a {
			color: var(--color-bg);
		}
	}
	& a.andrew-white-design {
		display: block;
		margin: -40px 0 50px 0;

		& svg.icon-awd {
			width: 100px;
			height: auto;
			fill: rgba(var(--color-bg-rgb),0.3);
			fill: rgba(var(--color-black-rgb),0.3);
		}
	}
}
.waves-wrap {
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: -195px;
	height: 195px;
	z-index: 2;

	& span {
		width: 100%;
		height: auto;
		max-height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.5;
		background-image: var(--gradient-brand);

		&.wave1 {
			height: 133px;
			clip-path: shape(from 0% 100%,vline to 7.44%,curve to 11.69% 0% with 3.06% 2.86%/6.81% 0%,curve to 65.42% 73.66% with 36.32% 0%/40.28% 72.85%,curve to 100% 6.26% with 85.95% 73%/86.79% 23.94%,vline to 100%,close);
		}
		&.wave2 {
			height: 153px;
			clip-path: shape(from 0% 100%,vline to 5.44%,curve to 11.37% 0% with 3.06% 2.05%/6.73% 0%,curve to 68.45% 66.03% with 37.55% 0%/41.75% 65.31%,curve to 100% 13.69% with 87.22% 65.53%/90.51% 32.88%,vline to 100%,close);
		}
		&.wave3 {
			height: 107px;
			clip-path: shape(from 0% 100%,vline to 4.22%,curve to 8.65% 0% with 2.46% 1.54%/5.3% 0%,curve to 64.72% 91.62% with 34.36% 0%/38.49% 90.62%,curve to 100% 9.14% with 85.72% 90.82%/86.98% 32.17%,vline by 90.86%,close);
		}
		&.wave4 {
			height: 195px;
			clip-path: shape(from 0% 100%,vline to 6.77%,curve to 11.37% 0% with 3.03% 2.86%/6.7% 0.33%,hline to 13.46%,curve by 56.03% 67.29% with 25.24% 1.75%/29.69% 66.57%,curve to 100% 16.17% with 87.56% 66.79%/91.28% 35.93%,vline to 100%,close);
		}
		&.wave5 {
			height: 142px;
			clip-path: shape(from 0% 100%,vline to 5.61%,curve by 52.8% 68.27% with 17.22% 23.03%/26.93% 67.6%,curve to 100% 0% with 80.87% 73.16%/82.43% 20.32%,vline to 100%,close);
		}
		&.wave6 {
			height: 163px;
			clip-path: shape(from 0% 100%,vline to 3.3%,curve to 8.87% 0% with 2.52% 1.2%/5.43% 0%,curve to 65.95% 70.36% with 35.05% 0%/39.25% 69.59%,curve by 34.05% -60.53% with 20.32% -0.58%/22.49% -41.32%,vline to 100%,close);
		}
	}
}
@media all and (max-width: 782px) {
	.footer {

		& .logo-icon {
			top: -90px;
			width: 50px;
		}
		& ul.social {
			padding: 0 20px;
			margin: 50px 0 0 0;
			gap: unset;
			justify-content: space-around;
			flex-wrap: nowrap;

			& svg {
				height: 30px;
			}
		}

		& .newsletter-wrap {
			& .newsletter {
				border: unset;
				padding: 30px;

				& .newsletter-perks {
					font-size: 22px;
				}
			}
		}

		& .copyright {
			font-size: 14px;
		}
		& a.andrew-white-design {
			& svg.icon-awd {
				width: 60px;
			}
		}
	}
	.waves-wrap span {
		bottom: -1px;

		&.wave1 {
			height: 53px;
		}
		&.wave2 {
			height: 63px;
		}
		&.wave3 {
			height: 37px;
		}
		&.wave4 {
			height: 45px;
		}
		&.wave5 {
			height: 52px;
		}
		&.wave6 {
			height: 43px;
		}
	}
}

/* ^ FOOTER 			*/
/* -------------------------------------------------------------- */
/* ⌄ FAQ TEMPLATE		*/

.xplody-faq {

	& h2 {
		color: var(--color-grey80);
		
		& span {
			color: var(--color-grey60);
			font-size: 18px;
		}
	}
	& .faq-wrap {
		width: 90%;
		max-width: 800px;
		margin: 20px auto;

		& > li {
			width: 100%;
			margin-bottom: 33px;

			& .faq-question {
				width: 100%;
				padding: 0 50px;
				margin: 30px 0 20px 0;
				font-size: 24px;
				font-weight: 600;
				line-height: 1.2;
				position: relative;
				cursor: pointer;

				&:hover {
					color: var(--color-grey80);
				}

				&::before {
					content: '';
					width: 15px;
					height: 12px;
					display: block;
					position: absolute;
					clip-path: var(--shape-chevron-down);
					transition: all 0.6s ease;
					background-color: var(--color-grey50);
					left: 25px;
					top: 14px;
					transform: rotate(-90deg);
				}
			}
			& .faq-answer {
				padding: 0 77px;
				display: none;

				& ol {
					padding: 0 0 0 30px;
				}
				& ul {
					padding: 0 0 0 30px;
					list-style: disc;
				}
			}
			&.open {
				& .faq-question {
					&::before {
						left: 25px;
						top: 14px;
						transform: rotate(0deg);
					}
				}
			}
		}
	}
}
@media all and (max-width: 782px) {
	.xplody-faq {
		& .faq-wrap {
			& > li {
				& .faq-question {
					padding: 0 30px;

					&::before {
						left: 5px;
						top: 10px;
					}
				}
				&.open {
					& .faq-question {
						&::before {
							left: 5px;
							top: 10px;
						}
					}
				}
				& .faq-answer {
					padding: 0 20px;
				}
			}
		}
	}
}

/* ^ FAQ TEMPLATE		*/
/* -------------------------------------------------------------- */
/* ⌄ CONTACT FORM		*/

.contact {
	justify-content: center;
	gap: 0px;

	& .main {
		display: flex;
		justify-content: flex-end;
		max-width: 700px;

		& .contact-us {
			width: 100%;
			max-width: 600px;
			margin-top: 10px;
		}
	}
	& .side {
		max-width: 400px;
	}
}



/* ^ CONTACT FORM		*/
/* -------------------------------------------------------------- */
/* ⌄ Smash Balloon Instagram Feed	*/

#sb_instagram {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	padding: 0 0 40px 0 !important;
	margin-top: -20px !important;
	--ig-cols: 3;
	--ig-gap: 4px;

	& .sb_instagram_header {
		display: none;
	}
	& #sbi_images {
		width: 100% !important;
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ig-gap) !important;
		padding: 0 !important;

		& .sbi_item {
			width: calc(100% / var(--ig-cols) - (var(--ig-gap) / (var(--ig-cols) - 2))) !important;
			position: relative;

			&:not(:nth-child(3n+2)) {
				transform: translateY(75px);
			}

			&.sbi_type_carousel {
				& .sbi-screenreader::before {
					content: '';
					display: block;
					width: 35px;
					height: 35px;
					position: absolute;
					z-index: 2;
					border-radius: 50%;
					right: 1px;
					top: 0px;
					background-color: rgba(var(--color-bg-rgb),1);
				}
				& svg {
					z-index: 3;
					text-shadow: unset;
					filter: unset;
					color: var(--color-grey40);
					font-size: 16px;
					top: 10px;
					right: 10px;
				}
			}
			& .sbi_photo_wrap {
				& a.sbi_photo {
					& img {
						clip-path: var(--shape-blob);
					}
				}
			}
		}
		/* if the last child is not 2, 3, 5, 6, 8, 9, 11, 12, 14, 15, ... */
		&:has(.sbi_item:last-child:nth-child(3n + 1)) .sbi_item:last-child {
			transform: translateY(0);
		}

		/* if there's only 1 in a row of 3 */
		&:has(.sbi_item:last-child:nth-child(3n + 2)) { 
			justify-content: flex-start;
		}
	}

	&:has(.sbi_item:last-child:nth-child(3n + 2)) #sbi_images,
	&:has(.sbi_item:last-child:nth-child(3n + 3)) #sbi_images {
		padding: 0 0 75px 0 !important;
	}
	& #sbi_load {
		float: unset;
		clear: unset;
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 30px 10px;

		& .sbi_load_btn,
		& .sbi_follow_btn,
		& .sbi_follow_btn a {
			margin: 0 !important;
			border-radius: 40px !important;
		}
	}
}


/* ^ Smash Balloon Instagram Feed	*/
/* -------------------------------------------------------------- */
/* ⌄  			*/


/* ^  			*/
/* -------------------------------------------------------------- */
/* ⌄  			*/


/* ^  			*/
/* -------------------------------------------------------------- */
/* ⌄  			*/