/*
Theme Name: Sew Your Soul
Description: Another bespoke template by Adam.
Version: 1.0.1
Author: Adam Montague
Author URI: https://adammontague.co.uk
*/

/* Current site */
#yellow-FBEB3B{color: #FBEB3B;}
#red-CC1B37{color: #CC1B37;}

/* Neopolitan ice cream */
#pink{color: #F559A4;}
#F29892{color: #F29892}
#F2EBD5{color: #F2EBD5;}
#c09570{color: #c09570;}
#D9B596{color: #D9B596;}
#DFFCE1{color: #a8d6ab;}
#DFFCE1{color: #DFFCE1;}

#goldenyellow-F2C230{color: #F2C230;}
#black-222{color: #222;}

/* Fun Fair */
#blue{color: #248EA6;}
#lightblue{color: #25C7D9;}
#yellow{color: #F2D338;}
#orange{color: #F2762E;}
#red{color: #F23030;}

/* Neons */
#pink{color: #F559A4;}
#lightpink{color: #F8B5B0;}
#lighterpink{color: #FCE1DF;}
#green{color: #A4F559;}
#blue{color: #59A4F5;}
#orange{color: #F2B705;}
#yellow{color: #F2F559;}
#red{color: #F25C05;}

/*!----- A modern CSS reset -----*/
/*! Box sizing rules */
*,
*::before,
*::after{box-sizing: border-box;}

/* width */
::-webkit-scrollbar{width: 8px;}

/* Track */
::-webkit-scrollbar-track{background: #FCE1DF;}

/* Handle */
::-webkit-scrollbar-thumb{background: #F8B5B0;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{background: #F559A4;}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd{margin: 0;}

header,
footer,
section,
article{display: block;}

@font-face{
	font-family: "fabrics";
	src: url("fonts/fabrics.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "chelsea";
	src: url("fonts/chelsea-market.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", Helvetica, Arial, sans-serif;
	font-family: "chelsea";
	color: #333;
	min-height: 100vh;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeSpeed;
	cursor: url('images/basil.svg') 16 16, pointer;
	display: flex;
	flex-direction: column;
}

body *:hover{cursor: url('images/basil.svg') 16 16, pointer;}

body.menu-open{overflow: hidden;}

/*! Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class]{
	list-style: none;
	padding: 0;
}

/*! A elements that don't have a class get default styles */
a:not([class]){
	text-decoration-skip-ink: auto;
	color: inherit;
}

img{
	max-width: 100%;
	height: auto;
	display: block;
}

input,
button,
textarea,
select{font: inherit;}

::placeholder{color: #ddd;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea{
	-webkit-appearance: none;
	border-radius: 5px;
	border: 1px solid #ddd;
	padding: .5em;
	font-size: 1rem;
}

select{
	-webkit-appearance: none;
	border-radius: 5px;
	border: 1px solid #ddd;
	padding: .5em 1.75em .5em .5em;
	background-image: url(images/slick-arrow-next.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 98% center;
}

select::-ms-expand{display: none;}

select:hover{cursor: url('images/basil-hover.svg') 16 16, pointer;}

input[type="checkbox"],
input[type="radio"]{
	-webkit-appearance: none;
	width: 1px;
	height: 1px;
}


input[type="radio"] ~ label:hover{
	cursor: url('images/basil-hover.svg') 16 16, pointer;
}

input[type="checkbox"] ~ label{position: relative;}

input[type="checkbox"] ~ label::before{
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 2px solid #222;
}

input[type="checkbox"]:checked ~ label::before{
	background-color: pink;
}

input[type="checkbox"]:checked ~ label::after{
	display: block;
	content: "";
	width: 8px;
	height: 22px;
	border-bottom: 2px solid #222;
	border-right: 2px solid #222;
	position: absolute;
	top: -10px;
	left: 10px;
	transform: rotate(30deg);
}

input[type="radio"] ~ label{
	position: relative;
	display: flex;
	align-items: center;
}

input[type="radio"] ~ label::before{
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: 2px solid #222;
	margin-right: .5em;
}

input[type="radio"]:checked ~ label::before{
	background-color: pink;
}

input[type="radio"]:checked ~ label::after{
	display: block;
	content: "";
	width: 8px;
	height: 8px;
	background-color: #222;
	border-radius: 4px;
	position: absolute;
	top: 6px;
	left: 6px;
	transform: rotate(30deg);
}

@media (prefers-reduced-motion: reduce){

	*{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

}

figure{display: table;}

figcaption{
	display: table-caption;
	caption-side: bottom;
	font-size: .85em;
}

table caption{
	font-size: 1.5rem;
}

table th{
	background-color: #F20574;
	color: #fff;
	text-align: center;
}

table th,
table td{
	padding: .5rem .25rem;
}

table tr:nth-child(even){
	background-color: rgba(242, 152, 146, 0.146);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button{
	-webkit-appearance: none;
	display: inline-block;
	margin: 1em auto;
	padding: .5em 1.5em;
	background-color: #F559A4;
	color: #fff;
	border: none;
	border-radius: 24px;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	transition-duration: 0.5s;
}

input:disabled,
button:disabled{
	background-color: #F2EBD5;
	color: rgba(242, 152, 146, .5);
	transition: none;
}

.button.chocolate{background-color: #D9B596;}
.button.lightpink{background-color: #F8B5B0;}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover{
	cursor: url('images/basil-hover.svg') 16 16, pointer;
	transform: scale(1.2);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

input:disabled:hover,
button:disabled:hover{
	cursor: url('images/basil.svg') 16 16, pointer;
	transform: none;
}

article{margin-bottom: 2em;}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: 'fabrics', sans-serif;
	font-weight: normal;
	margin: 0;
	color: #F559A4;
}

h1{font-size: 2.8rem;}

h1.page-title{
	font-family: "chelsea", sans-serif;
	padding: 1rem 0;
}

h2{font-size: 2rem;}

h3{font-size: 1.75rem;}

article h1,
article h2{
	color: #F559A4;
	text-align: center;
}

h4{font-size: 2.35rem}

h5{font-size: 2.2rem}

h6{font-size: 1.8rem;}

@media (min-width: 48em){

	h1{font-size: 3.8rem;}

	h2{font-size: 3rem;}

	h3{font-size: 2.75rem;}

}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a{
	color: inherit;
	text-decoration: none;
}

p,
li,
dt,
dd{
	font-family: "chelsea", sans-serif;
	font-size: .9rem;
	line-height: 1.5;
}

article p a:not(.button){
	text-decoration: none;
	border-bottom: 2px solid rgba(245, 89, 164, .3);
	transition: border .25s ease-in-out;
}

	article p a:hover:not(.button){border-bottom: 2px solid #F559A4;}

@media (min-width: 48em){

	p,
	li,
	dt,
	dd{font-size: 1.1rem;}

}

p small{color: gray;}

	ul li a,
	ol li a,
	dl dt a,
	dl dd a{
		text-decoration: none;
		color: inherit;
	}

hr{
	width: 100%;
	height: auto;
	border: none;
	background-color: transparent;
	text-align: center;
	margin: 1em auto;
	overflow: hidden;
}

	hr::before {
		content: "— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —";
		display: block;
		white-space: nowrap;
		font-family: "fabrics";
		font-size: 2.5rem;
		color: #F559A4;
		padding: 0 10px;
		background-color: transparent;
	}

* a:hover,
* a:hover *,
a:hover img{cursor: url('images/basil-hover.svg') 16 16, pointer;}

/*! WP img alignments */
.alignleft,
.alignright,
.aligncenter,
.alignnone{
	float: none;
	margin: 0 auto 1.5em;
}

@media (min-width: 25em){

	.alignright{
		display: block;
		float: right;
		margin: 1em 0 1em 1em;
	}

		figure.alignright{display: table;}

	.alignleft{
		display: block;
		float: left;
		margin: 1em 1em 1em 0;
	}

	.aligncenter,
	.alignnone{
		display: block;
		margin: auto;
		margin-bottom: 1em;
	}

}

/*! Site consistencies */
.container{
	width: calc(100% - 2em);
	max-width: 1280px;
	margin: auto;
}

.block.container{
	width: calc(100% - 2em);
	max-width: 1024px;
}

@media (min-width: 48em){

	.container{width: calc(100% - 2em);}

}

.flow > * + *{margin-top: 1rem;}

/*! Clearfix */
.cf::after{
	content: '';
	display: block;
	clear: both;
}

/*! Flex helpers */
.flex-container{display: flex;}

.reverse{flex-direction: row-reverse;}

.spaced{justify-content: space-around;}

.spaced-between{justify-content: space-between;}

.centered{align-items: center;}

.axis-centered{
	justify-content: center;
	align-items: center;
}

.start{
	align-content: flex-start;
	align-items: flex-start;
}

.end{align-items: flex-end;}

.columns{flex-direction: column;}

.column-reverse{flex-direction: column-reverse;}

.wrap{flex-wrap: wrap;}

.gutter{margin-bottom: 1.5em;}

/* Header */
header{min-height: 56px;}

.top-bar{
	background-color: #F2EBD5;
	background-color: #F559A4;
	padding: 1.5em 0;
	transition: all .2s ease-in-out;
}

.top-bar.sticky{
  position: fixed;
  top: 0;
  width: 100%;
  padding: .5em 0;
  box-shadow: 0 5px 15px rgba(33, 33, 33, .33);
  z-index: 2001;
}

	.cart-wrapper{
		position: relative;
		display: flex;
		justify-content: space-evenly;
	}

		.cart-wrapper img{
			width: 24px;
			height: 24px;
		}

	@keyframes swing {
		0%{transform: rotate(25deg);}
		50%{transform: rotate(-25deg);}
		100%{transform: rotate(25deg);}
	}

	a.basket{
		display: block;
		margin-right: .5em;
		padding-bottom: .1em;
	}

	.top-bar .basket:hover img{
		animation: swing 1s infinite;
		cursor: url('images/basil-hover.svg') 16 16, pointer;
	}

	.top-bar .nav-toggle{
		transition: none;
		transform: none;
	}

	.top-bar .nav-toggle:hover img{
		cursor: url('images/basil-hover.svg') 16 16, pointer;
	}

	.bubble{display: none;}

	header button.nav-toggle{
		background-color: transparent;
		padding: 0;
		margin: 0;
		color: #fdfd52;
		box-shadow: none;
		border-radius: 0;
	}

	.top-bar h1{
		font-size: 1.75rem;
		line-height: 1;
		white-space: nowrap;
		color: #fff;
	}

	.top-bar h1 span.text-lucy{
		display: block;
		font-family: "chelsea";
		font-size: .85rem;
		font-size: 1rem;
		color: #fdfd52;
		transform: rotate(-5deg) translate(0, -10px);
	}

	.top-bar.sticky h1 span.text-lucy{transform: none;}

	.top-bar h1 span.text-sys{letter-spacing: -2px;}

	.cart-count{display: none;}

	.top-bar.sticky .cart-wrapper .basket{position: relative;}

	.top-bar.sticky .cart-wrapper .basket .cart-count{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -10px;
		right: -10px;
		width: 24px;
		height: 24px;
		border-radius: 14px;
		border: 2px solid #333;
		background-color: #fff;
		font-size: .85rem;
		text-align: center;
		color: #F559A4;
	}

	@media (min-width: 23em){

		/* .top-bar{padding: .75em 0 .5em;} */

		a.basket{margin-right: .75em;}

		.top-bar h1 span.text-sys{letter-spacing: 0;}

		.cart-wrapper img{
			width: 32px;
			height: 32px;
		}

	}

@media (min-width: 48em){

	.top-bar{padding: .75em 0 .25em;}

	.cart-wrapper{gap: 2em;}

}

@media (min-width: 60em){

	.top-bar .basket img{
		min-width: 40px;
		min-height: 40px;
	}

	.top-bar .nav-toggle img{
		min-width: 32px;
		min-height: 32px;
	}

	.hb::before{
		content: "";
		display: block;
		position: absolute;
	}

	.bubble{
		display: block;
		position: absolute;
		top: -32px;
		border: .25vmin solid black;
		border-radius: 100%;
		min-width: 110px;
		padding: .25rem;
		transform: rotate(5deg);
		background-color: #fff;
		font-size: .8rem;
		text-align: center;
	}

	.bubble::before{
		position: absolute;
		width: 40%;
		height: 100%;
		bottom: -50%;
		border-radius: 50%;
		left: 10%;
		box-shadow: 0.25vmin 0, 2vmin -.25vmin #fff, 2vmin -0.25vmin 0 0.25vmin;
		clip-path: polygon(0% 49%, 150% 48%, 150% 100%, 0% 100%);
	}

	.top-bar h1{font-size: 5rem;}

	.top-bar h1 span.text-lucy{
		font-size: 1.5rem;
		transform: rotate(-5deg) translate(5px, -22px);
	}

	.top-bar.sticky h1 span.text-lucy{
		font-size: 1rem;
		transform: rotate(-5deg) translateY(-10px);
		transform: none;
	}

	.top-bar.sticky h1{font-size: 2rem;}

	.top-bar.sticky .cart-wrapper{display: flex;}

	.top-bar.sticky .bubble{
		transform: translateX(3000px);
		visibility: hidden;
		max-width: 1px;
	}

}

nav.main-nav{
	position: fixed;
	top: -5000px;
	left: 0;
	width: 100vw;
	transition: all .25s ease;
	z-index: -9999;
	opacity: 0;
}

	.melted-shape{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;
		transform: rotate(180deg);
		z-index: 1;
	}

	.melted-shape svg{
		position: relative;
		display: block;
		width: calc(106% + 1.3px);
		height: 454px;
	}

	.melted-shape .shape-fill{fill: #F2EBD5;}

	nav.open{
		top: 0;
		bottom: auto;
		width: 100vw;
		height: 100vh;
		background-color: pink;
		z-index: 9999;
		opacity: 1;
	}

		nav button.nav-toggle{
			position: absolute;
			right: 0;
			top: -52px;
			height: 60px;
			transform: rotate(0);
			font-size: 3rem;
			color: #F559A4;
		}

nav .main-menu{margin: 3em auto 0;}

nav > .container{
	position: relative;
	z-index: 2;
}

	nav .sub-menu{display: none;}

	nav .main-menu li{
		text-align: center;
		padding: .75rem 0;
	}

		nav .main-menu li a{
			font-size: 2rem;
			text-transform: uppercase;
			color: #fff;
			transition: all .25s ease;
		}

			nav .main-menu li a:hover{
				letter-spacing: 5px;
				color: #F559A4;
			}

hero,
hero > div{
	display: block;
	margin-bottom: 1.5em;
	max-height: 568px;
	overflow: hidden;
}

	hero img{
		width: 100%;
		height: 578px;
	}

@media (min-width: 48em){

	hero,
	hero > div{max-height: 640px;}

		hero img{height: 640px;}

}

/* Footer */
footer{
	background-color: #F2EBD5;
	padding: 4em 0;
}

	footer > .flex-container{flex-direction: column-reverse;}

	footer > div > div{flex: 1 1 50%;}

	footer .footer-menu-wrapper{
		order: 1;
		text-align: center;
	}

	.mail-wrapper-main{
		order: 2;
		justify-content: center;
		align-items: center;
	}

	footer .social{order: 3;}

	footer .social img{transition: all .25s ease;}

	footer .social a:nth-of-type(2) img{margin: 0 1rem;}

	footer .social img:hover{transform: scale(1.1);}

	footer .container a{
		color: #F559A4;
		text-decoration: none;
	}

	footer small{
		display: block;
		text-align: center;
		padding: 1em 0;
		color: gray;
	}

	@media (min-width: 768px){

		footer > .flex-container{flex-direction: row;}

		footer .footer-menu-wrapper{
			order: unset;
			text-align: left;
		}

		.mail-wrapper-main{order: unset;}

		footer .social{order: unset;}

		.mail-wrapper-main{
			flex-direction: row;
			justify-content: flex-end;
			order: 3;
		}

	}

	/*! animated mail */
	.mail-wrapper{
		width: 100px;
		height: 100px;
	}

	.mail-wrapper::after{
		display: block;
		content: "Contact me";
		color: #F559A4;
		text-align: center;
	}

		.animated-mail{
			position: absolute;
			height: 75px;
			width: 100px;
			transition: .4s;
		}

			.animated-mail .body{
				position: absolute;
				bottom: 0;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 0 50px 100px;
				border-color: transparent transparent #F559A4 transparent;
				z-index: 2;
				box-shadow: 0 20px 15px 5px rgba(222, 200, 133, .5);
			}

			.animated-mail .top-fold{
				position: absolute;
				top: 25px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 25px 50px 0 50px;
				transform-origin: 50% 0%;
				transition: transform .4s 0.4s, z-index .2s .4s;
				border-color: #f577b3 transparent transparent transparent;
				z-index: 2;
			}

			.animated-mail .back-fold{
				position: absolute;
				bottom: 0;
				width: 100px;
				height: 50px;
				background: #F559A4;
				z-index: 0;
			}

			.animated-mail .left-fold{
				position: absolute;
				bottom: 0;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 25px 0 25px 50px;
				border-color: transparent transparent transparent #ee3b92;
				z-index: 2;
			}

			.animated-mail .letter{
				left: 10px;
				bottom: 0px;
				position: absolute;
				width: 80px;
				height: 30px;
				background: #fff;
				background-image: url('images/basil-hiding.png');
				background-size: 80px 90px;
				background-repeat: no-repeat;
				z-index: 1;
				overflow: hidden;
				-webkit-transition: .4s .2s;
				-moz-transition: .4s .2s;
				transition: .4s .2s;
				opacity: 0;
			}

				.animated-mail .letter .letter-border{
					height: 5px;
					width: 100%;
					background: repeating-linear-gradient(-45deg, #F29892, #F29892 8px, transparent 8px, transparent 18px);
				}

		.mail-wrapper:hover *{cursor: url('images/basil-hover.svg') 16 16, pointer;}

		.mail-wrapper:hover .animated-mail{transform: translateY(15px);}

			.mail-wrapper:hover .animated-mail .top-fold{
				transition: transform .4s, z-index .2s;
				transform: rotateX(180deg);
				z-index: 0;
			}

			.mail-wrapper:hover .animated-mail .letter{
				height: 90px;
				opacity: 1;
			}

/** Expandable Content that doesn't rely on JS
 *  ------------------------------------------------------------------------------------------------
 *  Default layout:
<div class="expandable-content expandable-content--checkbox">
  <input class="visuallyhidden--always" id="123" type="checkbox">
  <label class="expandable-content-trigger" for="123"><span class="button">Click Me</span></label>
  <div class="expandable-content__content">...content here</div>
</div>
**/
.visuallyhidden:not(:focus):not(:active),
.screen-reader-text:not(:focus):not(:active),
.visuallyhidden--always{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.flow > .visuallyhidden:first-child:not(:focus):not(:active) + *,
.flow > .screen-reader-text:first-child:not(:focus):not(:active) + *,
.flow > .visuallyhidden--always:first-child + *{margin-top: 0;}

.expandable-content{position: relative;}

.expandable-content > label:hover,
.expandable-content > label span:hover{cursor: url('images/basil-hover.svg') 16 16, pointer;}

.expandable-content .expandable-content__content{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
	opacity: 0;
	transition: opacity 600ms ease;
}

/*
WordPress loves to add paragraphs
-
if we're adding these with a shortcode or using the <!--more--> tag then it's highly likely that the
first child of the content will be <p></p> or <br>
*/
.expandable-content__content > p:empty:first-child,
.expandable-content__content > p:empty:last-child,
.expandable-content__content > br:first-child{display: none;}

.expandable-content__content > p:empty:first-child + *,
.expandable-content__content > br:first-child + *{margin-top: 0;}

.expandable-content > label{display: block;}

.expandable-content > input ~ label::before{display: none;}

.expandable-content > input:checked ~ .expandable-content__content,
.expandable-content__content:focus-within,
.expandable-content--forced-open .expandable-content__content{
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	clip: auto;
	overflow: hidden;
	margin-top: 1rem;
	white-space: normal;
	opacity: 1;
}

.expandable-content-trigger:hover{cursor: pointer;}

.expandable-content-trigger .button{
	user-select: none;
	position: relative;
	transition: color 600ms ease, background 600ms ease;
}

.expandable-content-trigger .button{
	text-decoration: underline;
	text-decoration-color: currentcolor;
	text-underline-offset: 0.3rem;
}

/* we want focus styles on the `button` if the hidden input has focus */
/* this only works if the button is inside the expandable-content div */
/* if you need an external trigger then js has to fill in the gaps on focus */
/*
<div class="expandable-content expandable-content--checkbox">
	<input class="visuallyhidden--always" id="123" type="checkbox">
	<label class="expandable-content-trigger" for="123"><span class="button">Click Me</span></label>
	<div class="expandable-content__content">...content here</div>
</div>
*/
.expandable-content > input:focus-visible ~ label .button,
.expandable-content-trigger--input-has-focus .button{
	outline: 0.1rem dashed currentcolor;
	outline-offset: 0.2rem;
}

/** dropdown markers for modern browsers - in entry content
 *  ------------------------------------------------------------------------------------------------
**/

@supports (clip-path: inset(50%)){

	.expandable-content:not(.expandable-content--no-toggle) > label{
		position: relative;
		padding-left: 1.5rem;
	}

	.expandable-content.expandable-content:not(.expandable-content--no-toggle) > label::after{
		content: ' ';
		display: block;
		height: 0.5rem;
		width: 0.5rem;
		background-color: currentcolor;
		border: inherit;
		position: absolute;
		top: 50%;
		left: 0;
		clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
		border-radius: 3px;
		opacity: 1;
		transition: transform ease 300ms;

		/*
		when the triangle is rotated on the diagonal it's √2 times as tall
		which translates to roughly 1.414 times taller than being unrotated
		(100*1.414) * 0.5 = 70.7%
		so we need to offset by -29.3% to compensate for the extra height...
		*/
		transform: translateY(-29.3%) rotate(-135deg);
	}

	.expandable-content.expandable-content:not(.expandable-content--no-toggle) > input:checked ~ label::after,
	.expandable-content--forced-open.expandable-content:not(.expandable-content--no-toggle) label::after,
	.expandable-content-trigger--input-is-active::after{transform: translateY(-50%) rotate(-45deg);}

}

/*! Debug */
/* html body *{outline: 1px dotted red;} */

pre{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	max-width: 50%;
	max-height: 50vh;
	overflow: scroll;
	padding: 1rem;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
}
@media (max-width: 48em){

	pre{display: none;}

}

.woocommerce-notices-wrapper{
	flex: 0 0 100%;
	margin-bottom: 1.5em;
}

.woocommerce-message{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

	.woocommerce-message a{color: gray;}

	.woocommerce-message a.button{color: #fff;}

@keyframes shimmer{

	0%{background-position: -200px 0;}
	100%{background-position: 200px 0;}

}