/*
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Black.ttf") format("opentype");
	font-weight: 900;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-BlackItalic.ttf") format("opentype");
	font-weight: 900;
	font-style: italic;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-ExtraBold.ttf") format("opentype");
	font-weight: 800;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-ExtraBoldItalic.ttf") format("opentype");
	font-weight: 800;
	font-style: italic;
}
*/

@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Bold.ttf") format("opentype");
	font-weight: 700;
}
/*
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-BoldItalic.ttf") format("opentype");
	font-weight: 700;
	font-style: italic;
}
*/

@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-SemiBold.ttf") format("opentype");
	font-weight: 600;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-SemiBoldItalic.ttf") format("opentype");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Medium.ttf") format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-MediumItalic.ttf") format("opentype");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Regular.ttf") format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-RegularItalic.ttf") format("opentype");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Light.ttf") format("opentype");
	font-weight: 300;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-LightItalic.ttf") format("opentype");
	font-weight: 300;
	font-style: italic;
}
/*
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-ExtraLight.ttf") format("opentype");
	font-weight: 200;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-ExtraLightItalic.ttf") format("opentype");
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-Thin.ttf") format("opentype");
	font-weight: 100;
}
@font-face {
	font-family: "publicsans";
	src: url("/fonts/PublicSans-ThinItalic.ttf") format("opentype");
	font-weight: 100;
	font-style: italic;
}
*/

/*
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraBold.ttf") format("opentype");
	font-weight: 900;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraBoldItalic.ttf") format("opentype");
	font-weight: 900;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraBold.ttf") format("opentype");
	font-weight: 800;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraBoldItalic.ttf") format("opentype");
	font-weight: 800;
	font-style: italic;
}
*/

@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-Bold.ttf") format("opentype");
	font-weight: 700;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-BoldItalic.ttf") format("opentype");
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-SemiBold.ttf") format("opentype");
	font-weight: 600;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-SemiBoldItalic.ttf") format("opentype");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-Medium.ttf") format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-MediumItalic.ttf") format("opentype");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-Regular.ttf") format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-RegularItalic.ttf") format("opentype");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-Light.ttf") format("opentype");
	font-weight: 300;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-LightItalic.ttf") format("opentype");
	font-weight: 300;
	font-style: italic;
}
/*
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraLight.ttf") format("opentype");
	font-weight: 200;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ExtraLightItalic.ttf") format("opentype");
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-Thin.ttf") format("opentype");
	font-weight: 100;
}
@font-face {
	font-family: "sarabun";
	unicode-range: U+0E00-0E7F;
	src: url("/fonts/Sarabun-ThinItalic.ttf") format("opentype");
	font-weight: 100;
	font-style: italic;
}
*/

html {
	font-size: 1rem;
}

body {
	font-family: "publicsans", "sarabun";
	color: #333;
	/* background: #f8fffd; */
	/* background: #fffdfd; */
	/* background: #f8fdff; */
	background: #fdf8ff;
	background-image: url(background-red.png);
	background-size: 100% auto;
	
	min-width: 240px;
	min-height: 100dvh;
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	/*
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	*/
}

h1 { font-size: 2.00rem; font-weight: 400; margin: 0; }
h2 { font-size: 1.75rem; font-weight: 400; margin: 0; }
h3 { font-size: 1.50rem; font-weight: 400; margin: 0; }

.container {
	width: 90%;
	margin: 0 auto;
	max-width: 1024px;
}

:root {
	/* green */
	/*
	--brand-color: rgba(32, 180, 160, 1);
	--brand-light: rgba(32, 180, 160, .05);
	*/
	/* red */
	/*
	--brand-color: rgba(220, 32, 32, 1);
	--brand-light: rgba(220, 32, 32, .05);
	*/
	/* blue */
	/*
	--brand-color: rgba(32, 160, 220, 1);
	--brand-light: rgba(32, 160, 220, .1);
	*/
	/* purple */
	/* --brand-color: rgba( 120, 60, 200, 1); */
	/* --brand-light: rgba(  80, 40, 160, 1); */
	
	/*
		hotpink = #FF69B4
	 
		#F05090
		#E69
		#E58
		#E57
 
		--brand-color: deeppink;
		--brand-light: hotpink;
 
		--brand-color: #e57;
		--brand-light: hotpink;
	*/
	
	--brand-color: #e57;
	--brand-light: hotpink;
	
	/* green */
	/*
	--header-background: linear-gradient(240deg, 
						rgba(187, 221, 187, .75),
						rgba( 32, 176, 160, .85));
	*/
	/* red */
	/*
	--header-background: linear-gradient(240deg, 
						rgba(221, 187, 187, .75),
						rgba(176, 32, 48, .85));
	*/
	/* blue */
	--header-background: linear-gradient(240deg, 
						rgba(120, 220, 255, .75),
						rgba( 50, 140, 220, .85));
	
	/* purple */
	
	/* green */
	/*
	--button-background: rgba( 32, 176, 160, .85);
	--button-background-hover: rgba( 32, 176, 160, 1);
	*/
	/* red */
	/*
	--button-background: rgba( 176, 32, 32, .85);
	--button-background-hover: rgba( 176, 32, 32, 1);
	*/
	/* blue */
	/*
	--button-background:       rgba( 32, 160, 220, 1);
	--button-background-hover: rgba( 98,  98,  98, 1);
	*/
	
	/* purple */
	--button-background:       var(--brand-color);
	--button-background-hover: var(--brand-light);
	
	--footer-background: rgba(0, 0, 0, .5);
	
	--form-border: #bbddff;
	
	--input-border:            rgba(255, 255, 255, 0);
	--input-border-hover:      rgba(0, 0, 0, 0.1);
	--input-border-focus:      rgba(0, 0, 0, 0.1);
	--input-background:        rgba(0, 0, 0, 0.025);
	--input-background-hover:  rgba(255,255,255, .65);
	--input-background-focus:  rgba(255,255,255, .75);
	--input-border-radius:     .35rem;
	--input-height:            2rem;
	--textarea-height:         6rem;
	
	--button-border:           var(--button-background);
	--button-border-hover:     var(--button-background-hover);
	--button-text-color:       white;
	--button-text-color-hover: white;
	--button-height:           2.275rem;
	--button-border-radius:    .35rem;

	--brand-success: green;
	--brand-warning: goldenrod;
	--brand-error:   salmon;
	
	--box-shadow:	0 0 .15rem #999,
					0 .05rem .05rem #bbb,
					0 0 1rem #eee;
}
					
* {
	outline: none;
}

a {
	text-decoration: none;
	color: #333;
}
p {
	font-size: 1.10rem;
	line-height: 1.75rem;
	color: #333;
}
label {
	margin-bottom: .25rem;
}
input,
textarea {
	border: .1rem solid var(--input-border);
	border-radius: var(--input-border-radius);
	height: var(--input-height);
	font-size: 1.1rem;
	padding: 0.06rem .5rem;
	transition: border .2s linear, 
				background .2s linear;
	width: calc(100% - 1.17rem);
	background: var(--input-background);
}
textarea {
	height: var(--textarea-height);
	padding: .5rem;
	resize: vertical;
}
input:hover,
textarea:hover {
	border: .1rem solid var(--input-border-hover);
	background: var(--input-background-hover);
}
input:focus,
textarea:focus {
	border: .1rem solid var(--input-border-focus);
	background: var(--input-background-focus);
}
input::placeholder,
textarea::placeholder {
	color: #aaa;
	font-size: 1rem;
	font-weight: 300;
	transition: color .5s linear;
}
input:hover::placeholder,
textarea:hover::placeholder {
	/* color: #999; */
}
button,
.button {
	background: var(--button-background);
	color: var(--button-text-color);
	border: .1rem solid var(--button-border);
	border-radius: var(--button-border-radius);
	height: var(--button-height);
	font-size: 1.1rem;
	padding: .27rem .5em;
	transition: color      .15s linear,
				background .15s linear,
				border     .15s linear;
}
button:hover,
.button:hover {
	background: var(--button-background-hover);
	color: var(--button-text-color-hover);
	border: .1rem solid var(--button-border-hover);
	cursor: pointer;
}
header {
	min-height: 2rem;
}
main {
	padding-bottom: 2rem;
}
footer {
	background: var(--footer-background);
	color: white;
	min-height: 6rem;
}
footer a {
	color: #eee;
	display: block;
	margin-bottom: 1rem;
	transition: padding .15s linear,
				color .15s linear;
}
footer a:hover {
	color: white;
	padding-left: .5rem;
}
footer p {
	color: white;
}
footer .footer-container {
	display: grid;
	column-gap: 2rem;
}
@media (min-width: 480px) {
	footer .footer-container {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 768px) {
	footer .footer-container {
		grid-template-columns: 1fr 1fr 1.8fr;
	}
}

.error {
	display: none;
	padding: 1rem;
	background: rgba(255, 200, 200, .25);
	border: .1rem solid rgba(192, 128, 128, .50);
	border-radius: .35rem;
	margin-bottom: 1rem;
}
.light {
	color: #999;
}
.currency {
	
}

/*
	--input-border:           rgba(0, 0, 0, 0);
	--input-border-hover:     rgba(0, 0, 0, 0.1);
	--input-border-focus:     rgba(0, 0, 0, 0.1);
	--input-background:       rgba(128,128,128,.10);
	--input-background-hover: rgba(128,128,128,.10);
	--input-background-focus: rgba(255,255,255,.75);
	--input-border-radius:    .35rem;
*/

select {
	display: block;
	border: none;
	width: 100%;
	border: .15rem solid var(--input-border);
	background: var(--input-background);
	padding: .5rem .5rem .5rem .5rem;
	border-radius: var(--input-border-radius);
	transition: border .1s linear;
	
	appearance: none;
	background-image: url("/icons/arrow-down.svg");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: 1.5rem;
}

select:hover {
	border: .15rem solid var(--input-border-hover);
}
select:active {
	background-position: right .6rem center;
	background-size: 1.25rem;
}
select:focus {
	/* border: .15rem solid var(--input-border-focus); */
}

.web-form {
	padding: .75rem 1rem .5rem 1rem;
	border-radius: .75rem;
	
	max-width: 80dvw;
	margin: 0 auto;
	margin-top: 1rem;
	
	max-width: min(25rem, 80dvw);
	background: white;
	box-shadow: var(--box-shadow);
}
@media (min-width: 400px) {
	.web-form {
		
	}
}
.web-form > * {
	margin-bottom: .5rem;
}
.web-form button {
	margin-right: .5rem;
}
.web-form h3 {
	color: var(--brand-color);
}
.web-form p {
	color: #aaa;
	margin-top: .25rem;
}
.web-form label {
	display: block;
	margin-top: .75rem;
	margin-bottom: .25rem;
	color: var(--brand-color);
	transition: color .1s linear;
}
.web-form label:hover {
	color: #333;
}
.web-form hr {
	border: none;
	border-bottom: .1rem solid #eee;
	margin: 1rem 0 1.25rem 0;
}
.web-form input {
	color: #444;
}
.web-form select {
	color: #444;
}
.web-form option {
	font-family: sans-serif;
}
.web-form textarea {
	height: 8rem;
}
.web-form a:hover {
	color: var(--brand-color);
}

a.menu {
	color: #888;
	margin-left: .5rem;
	transition: color .1s linear;
}
a.menu:hover {
	color: var(--brand-color);
	animation: show-link .5s infinite alternate;
	/* border-bottom: .15rem solid var(--brand-color); */
}

@keyframes show-link {
	0% {
		
	}
	100% {
		border-bottom: .15rem solid var(--brand-color);
	}
}

.page-title {
	display: inline-block;
	margin-right: 1rem;
}

.top-right-menu {
	float: right;
	margin-top: .5rem;
}

.price-decimal {
	color: #888;
	font-size: .8rem;
}
.original-price {
	color: var(--brand-error);
	text-decoration: line-through;
}