:root {
	--base-font-size: clamp(12pt, 1vw, 50pt);

	--main-color: #000;
	--back-color: #f2f2f2;
	--link-color: var(--blue);
	--trans-link-color: var(--trans-blue);
	--hlgt-color: var(--bright-trans-blue);

	--hfbg-color: rgba(255, 255, 255, .9);
	--shade-color: rgba(0, 0, 0, .2);

	--bright-red: #f00;
	--dark-red: #800;
	--red: #b00;
	--bright-trans-red: rgba(255, 0, 0, .2);
	--trans-red: rgba(190, 0, 0, .2);

	--bright-orange: #ff9b00;
	--dark-orange: #6b3a00;
	--orange: #e78100;
	--bright-trans-orange: rgba(255, 155, 0, .2);
	--trans-orange: rgba(231, 129, 0, .2);

	--bright-green: #00ba00;
	--dark-green: #006a00;
	--green: #080;
	--bright-trans-green: rgba(0, 184, 0, .2);
	--trans-green: rgba(0, 138, 0, .2);

	--bright-blue: #00a2fb;
	--dark-blue: #003683;
	--blue: #0089d7;
	--bright-trans-blue: rgba(0, 162, 251, .2);
	--trans-blue: rgba(0, 137, 215, .2);

	--gray: #9e9e9e;
	--trans-gray: rgba(158, 158, 158, .2);
	--trans-black: rgba(0, 0, 0, .1);

	--yellow: #ffe000;

	--v-padding: 1.5rem;
	--foot-v-padding: .75rem;
	--h-padding: 1.5rem;
	--padding: var(--v-padding) var(--h-padding);
	--small-v-padding: calc(var(--v-padding) / 2);
	--small-h-padding: calc(var(--h-padding) / 2);
	--tiny-v-padding: calc(var(--v-padding) / 4);
	--tiny-h-padding: calc(var(--h-padding) / 4);
	
	--head-height: calc(var(--v-padding) * 2 + var(--base-font-size) * 1.5);
	--foot-height: 3rem;

	--show-duration: .05s;
	--hide-duration: .5s;

	--backdrop: blur(.25rem);
	--radius: .75rem;
	--border: .333rem;
	--input-border: .15rem;
	--input-radius: .5rem;

	--button-shift: .1rem;
	--light-radius: 1rem;
}

@supports (color: oklch(0 0 0)) {
	:root {
		--main-color: oklch(0% 0% 0deg);
		--back-color: oklch(96% 0% 40deg);
		--hfbg-color: oklch(100% 0% 0deg / 90%);
		--shade-color: oklch(0% 0% 0deg / 20%);

		--bright-red: oklch(66.3% .281 32);
		--dark-red: oklch(40% .169 32);
		--red: oklch(50% .21 32);
		--bright-trans-red: oklch(66.3% .281 32 / 20%);

		--bright-orange: oklch(78.78% .2 65);
		--dark-orange: oklch(40% .1 65);
		--orange: oklch(70% .1798 65);
		--bright-trans-orange: oklch(78.78% .2 65 / 20%);
		--trans-orange: oklch(70% .1798 65 / 20%);

		--bright-green: oklch(0.67 0.2861 145.06);
		--dark-green: oklch(0.45 0.185 145.06);
		--green: oklch(0.54 0.2245 145.06);
		--bright-trans-green: oklch(0.67 0.2861 145.06 / 20%);
		--trans-green: oklch(0.54 0.2245 145.06 / 20%);

		--bright-blue: oklch(67.8% .202 240);
		--dark-blue: oklch(35% 0.145 255);
		--blue: oklch(60% .1788 240);
		--bright-trans-blue: oklch(67.8% .202 240 / 20%);
		--trans-blue: oklch(60% .1788 240 / 20%);

		--gray: oklch(70% 0 0);
		--trans-gray: oklch(70% 0 0 / 20%);
		--trans-black: oklch(0 0 0 / 10%);

		--yellow: oklch(90.65% 0.2151 98.81);
	}
}

/* RESET */
*,*::before,*::after{font-family:system-ui,sans-serif;box-sizing:border-box;text-align:left;text-size-adjust:none;margin:0;padding:0;font:inherit;scroll-behavior:smooth;overscroll-behavior:contain;background-clip:padding-box;text-wrap:balance;}
ul[role='list'],ol[role='list']{list-style:none;}
a{text-decoration-skip-ink:none;}
body { min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; }
a svg *, h1 svg * { fill: currentColor; }
table { border-collapse: separate; border-spacing: 0; }

header { position: fixed; width: 100%; z-index: 10001; }
header nav { display: flex; }
header nav a { flex-grow: 0; text-align: center; }
footer { position: fixed; bottom: 0; width: 100%; z-index: 10000; }
footer nav { display: flex; padding: 0; }
img,picture,svg,video,canvas{max-width:100%;height:auto;font-style:italic;background-repeat:no-repeat;background-size:cover;}
input,button,textarea,select{font:inherit;}
textarea { resize: none; text-wrap: wrap; }
@media (prefers-reduced-motion:reduce){
	html:focus-within{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;transition:none;}
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Firefox */
input[type=number]{-moz-appearance:textfield;}

/* ESSENTIALS */
label { cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 1.5em 0 .5em; text-wrap: balance; }
pre { font-family: monospace; font-size: 90%; }
header, footer, header *, footer * { -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }

/* STYLE */
@font-face { font-family: 'Roboto'; font-weight: 100; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-100.woff'); }
@font-face { font-family: 'Roboto'; font-weight: 300; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff'); }
@font-face { font-family: 'Roboto'; font-weight: 400; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff'); }
@font-face { font-family: 'Roboto'; font-weight: 500; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-500.woff'); }
@font-face { font-family: 'Roboto'; font-weight: 700; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff'); }
@font-face { font-family: 'Roboto'; font-weight: 900; src: url('fonts/roboto-v29-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-900.woff'); }

html { font-size: var(--base-font-size); }
body { font: 1rem/1.5 Roboto,sans-serif; color: var(--main-color); background-color: var(--back-color); }

small { /*font-weight: 200;*/ font-size: 80%; }

textarea { padding-block: var(--small-v-padding); }

.purchase-block { padding-top: var(--small-v-padding); padding-bottom: var(--v-padding); padding-inline: var(--h-padding); background: var(--bright-trans-blue); }
@media (width > 50rem) {
	.purchase-block:first-child { border-top-left-radius: calc(4 * var(--radius)); margin-top: var(--small-v-padding); border-top: var(--border) solid var(--trans-blue); }
	.purchase-block:last-child { border-bottom-left-radius: calc(4 * var(--radius)); }
}
.purchase-block h4 { padding-top: .1rem; }

.product-slogan { padding-top: var(--v-padding); }

b { font-weight: 600; }

a, a:visited { padding: .5rem; margin: -.5rem; color: var(--link-color); text-decoration: underline; text-decoration-color: var(--trans-link-color); text-decoration-skip: none; text-decoration-skip-ink: none; }
a:hover, a:visited:hover { text-decoration-color: unset; }

a.anchor { display: block; padding: 0; margin: 0; height: calc(var(--head-height) + var(--v-padding)); }

.announce a { color: var(--dark-red); text-decoration-color: var(--dark-red); }

.dialog {
	background: var(--hfbg-color);
	border-radius: var(--radius);
	border-top-width: var(--border);
	border-top-style: solid;
	border-top-color: var(--gray);
	z-index: 10003;
	backdrop-filter: var(--backdrop);
	-webkit-backdrop-filter: var(--backdrop);
	-moz-backdrop-filter: var(--backdrop);
	-ms-backdrop-filter: var(--backdrop);

	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	padding: var(--padding);
	width: clamp(50vw, 50rem, 100vw);
	max-height: max(0px, calc(100vh - 6rem));
	overflow-y: auto;
	overflow-x: hidden;

	overscroll-behavior: contain;
}

.wider.dialog { width: clamp(60vw, 75rem, 100vw); max-height: max(0px, calc(100vh - 6rem)); }

@media (width < 50rem) {
	.dialog { /*max-height: 100vh;*/ /*height: 100vh;*/ width: 100vw; border-radius: 0; }
}

.dialog-backdrop { position: fixed; inset: 0; background: var(--shade-color); z-index: 10002;
	backdrop-filter: var(--backdrop);
	-webkit-backdrop-filter: var(--backdrop);
	-moz-backdrop-filter: var(--backdrop);
	-ms-backdrop-filter: var(--backdrop);

	display: none;
}

.dialog h1, .dialog h2, .dialog h3, .dialog h4, .dialog h5, .dialog h6, .dialog p { margin-top: 0; padding-top: 0; margin-bottom: var(--small-v-padding); }
.dialog h1:first-child, .dialog h2:first-child, .dialog h3:first-child, .dialog h4:first-child, .dialog h5:first-child, .dialog h6:first-child { margin-top: var(--small-v-padding); }

h1, h2, h3, h4, h5, h6, p, table { margin: var(--padding); }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

td { padding-bottom: var(--small-v-padding); padding-right: var(--small-h-padding); }

h1 { font-size: 14vw; letter-spacing: -.0333em; font-weight: 900; line-height: 0; margin-top: 0; text-wrap: unset; text-wrap: nowrap; white-space: nowrap; }
h1 small { font-weight: 300; font-size: .225em; position: relative; top: -.6em; letter-spacing: 0; }
h1 svg { height: 1em; display: inline; position: relative; top: .049em; }
h2 { font-size: 2.5rem; font-weight: 900; padding-bottom: var(--v-padding); }
.product h2 { text-align: center; }
h3 { font-size: 1.8rem; font-weight: 700; /*padding-top: 2.45rem;*/ }
h4 { font-size: 1.65rem; font-weight: 400; /*padding-top: 1.425rem;*/ }
h5 { font-size: 1.5rem; font-weight: 400; /*padding-top: 1.8rem;*/ }
h6 { font-size: 1.25rem; font-weight: 400; /*padding-top: 2.15rem;*/ }

article { padding-bottom: calc(var(--foot-height) * 2); background-color: var(--back-color); min-height: 100vh; max-width: 100vw; overflow-x: hidden; }
article a.anchor { height: calc(var(--head-height) + var(--v-padding)); }

header, footer, thead, .dialog-footer, .dialog-header { box-shadow: var(--trans-black) 0 0 1rem; backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); background: var(--hfbg-color); overflow-y: visible; height: var(--head-height); }

header nav, footer nav { overflow-x: auto; overscroll-behavior-y: auto; position: relative; }
header nav a, header nav a:visited, footer nav a, footer nav a:visited { text-wrap: nowrap; white-space: nowrap; padding: var(--padding); margin: 0; height: var(--head-height); text-decoration: none; color: var(--main-color); transition: background-color var(--hide-duration); }
header nav a.current {
	border-bottom-left-radius: 50% var(--radius);
	border-bottom-right-radius: 50% var(--radius);
	padding-bottom: calc(var(--v-padding) + var(--border));
	height: calc(var(--head-height) + var(--radius));
	background: var(--bright-blue);
	color: var(--hfbg-color);
	border-bottom: var(--border) solid var(--blue);
}
footer nav a, footer nav a:visited { padding: var(--small-v-padding) var(--h-padding); }
header nav a:hover:not(.current), footer nav a:hover { background: var(--hlgt-color); color: var(--main-color); transition: background-color var(--show-duration); }
header nav a:first-child { flex-grow: 0; flex-shrink: 0; padding-left: var(--h-padding); }
header nav a:first-child svg { height: 2.5rem; position: relative; top: -.5rem; }
body.admin header nav a:first-child { color: var(--red); }
footer { height: var(--foot-height); }
footer > * { padding: var(--foot-v-padding) var(--h-padding); text-align: left; white-space: nowrap; }
footer a { margin: 0; }

footer a.info { background: var(--blue); color: var(--back-color); float: right; text-decoration: none; border-radius: var(--input-radius) 0 0 0; border-top: var(--border) solid var(--bright-blue); position: relative; top: calc(-1 * var(--border)); }
footer a.info:hover { background: var(--bright-blue); border-color: var(--blue); }

.brick { display: block; width: 100vw; max-width: 100vw; overflow: hidden; }
.stripe { width: 100vw; display: flex; height: clamp(10rem, 65vh, 75vw); overflow-x: auto; overscroll-behavior-y: auto; padding-bottom: var(--v-padding); padding-inline: var(--h-padding); gap: var(--h-padding); }
.stripe img { height: 100%; /* max height for 4k is 1404px */ width: auto; max-width: unset; border-radius: var(--input-radius); }
.stripe img:first-child:last-child { margin: 0 auto; }

.superwide { width: clamp(100%, 80rem, 250vw); max-width: unset; position: relative; left: 50%; transform: translateX(-50%); }

.review { background: linear-gradient(-15deg, var(--bright-trans-blue) 0%, var(--hfbg-color) 100%); border-radius: calc(4 * var(--radius)) var(--radius) var(--radius) var(--radius); border-top: var(--border) solid var(--blue); margin-bottom: var(--v-padding); }
.review-author { text-align: right; }

@media (width > 50rem) {
	.brick-1-2 { width: 50%; }
	#testimonials > div { display: flex; flex-wrap: wrap; gap: var(--h-padding); padding-inline: var(--h-padding); }
	#testimonials .brick-1-2 { width: calc(50% - var(--small-h-padding)); padding: var(--padding); }
	.review { margin-bottom: 0; }
	.brick-right { float: right; }
	#colreg { background-image: url(colreg.svg); background-repeat: no-repeat; background-size: 20%; background-position: 90% calc(100% - 1rem); }
	#comm-cards { background-image: url(comm-cards.svg); background-repeat: no-repeat; background-size: 33vw; background-position: 95% calc(100% - 2rem); }
	#book-of-rules { background-image: url(courage.svg); background-repeat: no-repeat; background-size: 25vw; background-position: 5% calc(100% - 4rem); }
/*	#book-of-rules-charts { background-image: url(compass.svg); background-repeat: no-repeat; background-size: 40vw; background-position: 5% calc(100% - 1rem); } */
	#contacts { background-image: url(telltales.svg); background-repeat: no-repeat; background-size: 30vw; background-position: calc(100% - var(--h-padding)) calc(100% - 1rem); padding-right: calc(30vw + 2 * var(--h-padding)); }
	#schools { background-image: url(special.svg); background-repeat: no-repeat; background-size: 9vw; background-position: 85% calc(100% - 1.5rem); padding-right: calc(30vw + 2 * var(--h-padding)); }
}

.announce { background: var(--yellow); text-align: center; padding-block: var(--small-v-padding); margin-block: calc(var(--small-v-padding) - var(--v-padding)); font-weight: 700; }

hr { border: 1px solid var(--trans-gray); }
.order-id { white-space: nowrap; }

input, textarea, select, button, a.button {
	appearance: none; -webkit-appearance: none;
	position: relative;
	padding: var(--tiny-v-padding) var(--small-h-padding);
	border-radius: var(--input-radius);
	border: var(--input-border) solid var(--gray);
}

button, a.button {
	padding: var(--small-v-padding) var(--h-padding);
	border-width: var(--border) 0 0 0;
	transition: background-color var(--hide-duration) ease-in-out;
	cursor: pointer;
	vertical-align: top;
}
button:disabled { cursor: not-allowed; }

button:active:not(:disabled), footer a.info:active {
	padding: calc(var(--small-v-padding) + var(--button-shift)) var(--h-padding) calc(var(--small-v-padding) - var(--button-shift));
	transition: background-color var(--show-duration) ease-in-out;
}
button:active:not(:disabled)::before { box-shadow: 0 1rem 1rem transparent; border-radius: var(--input-radius); }

button.left-side { border-top-right-radius: 0; border-bottom-right-radius: 0; }
button.right-side { border-top-left-radius: 0; border-bottom-left-radius: 0; }

button.left-bottom-corner, button.right-bottom-corner {
	position: relative;
	top: calc(-1 * var(--border));
	margin-bottom: calc(-1 * var(--v-padding));
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
button.left-bottom-corner {
	border-top-left-radius: 0;
	transform: translate(-2px, 1px);
}
button.right-bottom-corner {
	border-top-right-radius: 0;
	margin-right: calc(-1 * var(--h-padding));
	float: right;
	transform: translate(1px, 1px);
}

button:hover, footer a.info:hover { transition: background-color var(--show-duration) ease-in-out; }
footer a.info { transition: background-color var(--hide-duration) ease-in-out; transform: translateY(1px); padding-bottom: calc(var(--v-padding) + 1px); }

.info { z-index: 0; position: relative; border-color: var(--bright-blue); box-shadow: 0 -1rem 1rem -.75rem var(--trans-blue), 0 1rem 1rem -.75rem var(--gray); }
/*.info::before { content: ''; position: absolute; inset: 0; z-index: -1; }*/
/*.info::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 -1rem 1rem -.75rem var(--trans-blue), 0 1rem 1rem -.75rem var(--gray); }*/

button.info, a.button.info { background-color: var(--blue); color: #fff; }
button.info:active, button.info:hover, a.button.info:active, a.button.info:hover { background-color: var(--bright-blue); border-top-color: var(--blue); }
button.info:active:not(:disabled), footer a.info:active { box-shadow: 0 0 var(--light-radius) var(--bright-blue); }

.success:not(:disabled), .ok:not(:disabled) { z-index: 0; position: relative; border-color: var(--bright-green); box-shadow: 0 -1rem 1rem -.75rem var(--trans-green), 0 1rem 1rem -.75rem var(--gray); }
button.success:not(:disabled), button.ok:not(:disabled), a.button.success:not(:disabled), a.button.ok:not(:disabled) { background-color: var(--green); color: #fff; }
button.success:active:not(:disabled), button.success:hover:not(:disabled), a.button.success:active:not(:disabled), a.button.success:hover:not(:disabled), button.ok:active:not(:disabled), button.ok:hover:not(:disabled), a.button.ok:active:not(:disabled), a.button.ok:hover:not(:disabled) { background-color: var(--bright-green); border-top-color: var(--green); }
button.success:active:not(:disabled), footer a.success:active:not(:disabled), button.ok:active:not(:disabled), footer a.ok:active:not(:disabled) { box-shadow: 0 0 var(--light-radius) var(--bright-green); }
button.success:not(:disabled)::before, button.ok:not(:disabled)::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 -1rem 1rem -.75rem var(--trans-green), 0 1rem 1rem -.75rem var(--gray); }

.info {
	--button-bg-color: var(--blue);
	--button-fg-color: var(--back-color);
	--button-border-color: var(--bright-blue);

	--button-hover-bg-color: var(--bright-blue);
	--button-hover-fg-color: var(--back-color);
	--button-hover-border-color: var(--blue);

	--button-active-bg-color: var(--bright-blue);
	--button-active-fg-color: var(--back-color);
	--button-active-border-color: var(--blue);
}
.ok, .success {
	--button-bg-color: var(--green);
	--button-fg-color: var(--back-color);
	--button-border-color: var(--bright-green);

	--button-hover-bg-color: var(--bright-green);
	--button-hover-fg-color: var(--back-color);
	--button-hover-border-color: var(--green);

	--button-active-bg-color: var(--bright-green);
	--button-active-fg-color: var(--back-color);
	--button-active-border-color: var(--green);
}
.warning, .nonce {
	--button-bg-color: var(--orange);
	--button-fg-color: var(--back-color);
	--button-border-color: var(--bright-orange);

	--button-hover-bg-color: var(--bright-orange);
	--button-hover-fg-color: var(--back-color);
	--button-hover-border-color: var(--orange);

	--button-active-bg-color: var(--bright-orange);
	--button-active-fg-color: var(--back-color);
	--button-active-border-color: var(--orange);
}
.error, .danger {
	--button-bg-color: var(--red);
	--button-fg-color: var(--back-color);
	--button-border-color: var(--bright-red);

	--button-hover-bg-color: var(--bright-red);
	--button-hover-fg-color: var(--back-color);
	--button-hover-border-color: var(--red);

	--button-active-bg-color: var(--bright-red);
	--button-active-fg-color: var(--back-color);
	--button-active-border-color: var(--red);
}

.warning, .nonce { z-index: 0; position: relative; border-color: var(--orange); }
.warning::before, .nonce::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 -1rem 1rem -.75rem var(--trans-orange), 0 1rem 1rem -.75rem var(--gray); }

.error, .danger { z-index: 0; position: relative; border-color: var(--red); }
.error::before, .danger::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 -1rem 1rem -.75rem var(--trans-red), 0 1rem 1rem -.75rem var(--gray); }

p.info { color: var(--blue); }
p.success, p.ok { color: var(--green); }
p.warning { color: var(--orange); }
p.error, p.danger { color: var(--red); }

button:not(:disabled), button.sending:disabled { background-color: var(--button-bg-color); color: var(--button-fg-color); border-color: var(--button-border-color); }
button:hover:not(:disabled), button.sending:hover:disabled { background-color: var(--button-hover-bg-color); color: var(--button-hover-fg-color); border-color: var(--button-hover-border-color); }
button:active:not(:disabled), button.sending:active:disabled { background-color: var(--button-active-bg-color); color: var(--button-active-fg-color); border-color: var(--button-active-border-color); }

pre{text-wrap-style:auto;text-wrap-mode:wrap;}
#message td { vertical-align: baseline; }

.purchase-block p.cart_qty { width: fit-content; box-shadow: 0 1rem 1rem -.75rem var(--gray); display: none; white-space: nowrap; }
.purchase-block p.cart_qty button { box-shadow: none; }
.purchase-block input[inputmode=numeric] { font-size: 1.68rem; border-radius: 0; width: 3.25em; border: none; }
.purchase-block input[inputmode=numeric]:focus { outline: none; }
.purchase-block p.cart_qty:focus-within, .purchase-block p.cart_qty:has(:active) { outline: var(--border) solid var(--bright-trans-blue); border-radius: var(--input-radius); box-shadow: none; }

.preorder-notice { display: none; }

#cart img { height: 6.6667rem; max-width: unset; margin: 0 var(--h-padding) 0 auto; }
@media (width < 43rem) {
	.cart-image, #cart tfoot td:first-child { display: none; }
}
#cart table { margin-block: calc(2 * var(--v-padding)); max-width: calc(100vw - 4 * var(--h-padding)); overflow-x: auto; }
#cart tbody { width: fit-content; }
td:has(img) { vertical-align: top; }

.double img { height: 2.175em; display: inline-block; float: left; margin-right: 1rem; }

.wide { width: 100%; }
.narrow { width: 4em; }
big, .big { font-size: 120%; }

td.number { text-align: right; }
tr.total { font-weight: 600; font-size: 120%; }
tr.total td { padding-block: var(--small-v-padding); }

code { padding-inline: .25em; background: var(--hlgt-color); }

.dialog-footer, .dialog-header {
	position: sticky;
	left: 0; right: 0; height: var(--foot-height);
}
.dialog-header {
	top: calc(-1 * var(--v-padding) - 1px);
	margin-top: calc(-2 * var(--v-padding));
	margin-inline: calc(-1 * var(--h-padding) - 2px);
	padding: var(--small-v-padding) var(--h-padding);
	height: unset;
	display: flex;
	align-items: baseline;
	z-index: 10001;
}
.dialog-header::before { content: ' '; white-space: pre; width: 0; }
.dialog-footer { bottom: calc(-1 * var(--v-padding)); margin-bottom: calc(-1 * var(--v-padding)); margin-left: calc(-1 * var(--h-padding)); margin-right: calc(-1 * var(--h-padding)); padding-right: calc(1 * var(--h-padding)); transform: translate(-1px, 1px); }

#cart tbody tr:last-child td { padding-bottom: calc(1.5 * var(--v-padding)); }
.dialog p.cart-empty { padding-block: calc(2 * var(--v-padding)); margin-top: calc(-2 * var(--v-padding)); }

input[type=radio] { height: 2em; width: 2em; border-radius: 1em; vertical-align: -44%; cursor: pointer; }
input[type=radio]:checked::after { content: ''; position: absolute; top: .375em; left: .375em; width: 1em; height: 1em; border-radius: .5em; background: var(--blue); }

#cdek-map { width: 100%; height: 100%; }
#cdek-map label { text-transform: none !important; }
.fullscreen-dialog { display: none; z-index: 12000; position: fixed; inset: 0; background: var(--back-color); border-radius: 0; }
.fullscreen-dialog > button { position: fixed; top: 7rem; left: .7rem; z-index: 10000; }
textarea { min-height: calc(var(--small-v-padding) * 2 + 1em); max-height: min(10em, 50vh); overscroll-behavior: auto; }
#flat-row, #courier-comments-row { display: none; }

#top { background: linear-gradient(-15deg, var(--bright-blue) 0%, var(--blue) 10%, var(--dark-blue) 100%); color: #fff; border-radius: 0 0 50% 50% / 0 0 10rem 10rem; margin-inline: -20rem; width: calc(100vw + 40rem); max-width: calc(100vw + 40rem); padding: var(--v-padding) 20rem calc(4 * var(--v-padding)); }
#top > div { width: min-content; padding-right: 9vw; margin-inline: auto; }
#top p { font-size: 120%; }
#top h1 { margin-bottom: calc(3 * var(--v-padding)); }

input:autofill, input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable, input:-webkit-autofill-and-obscured { background: var(--bright-trans-blue); color: inherit; }

.required-error { border-color: var(--red); }
.sending { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCIgZmlsbD0iI2ZmZiI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxNSIgcj0iMyI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIxcyIgdmFsdWVzPSIwOzA7MTswOzAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMCIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIwIiBjeT0iMTUiIHI9IjMiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMXMiIHZhbHVlcz0iMDswOzE7MDswIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii4xIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzAiIGN5PSIxNSIgcj0iMyI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIxcyIgdmFsdWVzPSIwOzA7MTswOzAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLjIiLz48L2NpcmNsZT48Y2lyY2xlIGN4PSI0MCIgY3k9IjE1IiByPSIzIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjFzIiB2YWx1ZXM9IjA7MDsxOzA7MCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIuMyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjUwIiBjeT0iMTUiIHI9IjMiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMXMiIHZhbHVlcz0iMDswOzE7MDswIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii40Ii8+PC9jaXJjbGU+PC9zdmc+) no-repeat 50% 50%; color: transparent !important; }

#download-iframe { display: none; }

/* DEBUG */

/* { outline: solid 1px red; }
.brick { background-color: rgba(255,0,0,.1); }
.purchase-block { background-color: rgba(0,255,0,.1); }