:root {
	--mainFont: 'Segoe UI', Helvetica, Arial;
	--accentFont: 'Segoe UI', Helvetica, Arial;
	--headlineFont: var(--accentFont);
	--fa: 'Font Awesome 6 Pro';
	--faW: light;

	--accent: #868686;
	--accentAlt: #da3a10;
	--accentBg: #eee;

	--bg: #fff;
	--text: #000;
	--white: #fff;
	--gray: #ccc;
	--error: #f00;
	--notice: #1cb4dd;
	--alert: #f58f10;
	--success: #338720;

	--em: 16px;
	--emXS: 12px;
	--emLG: 20px;

	--gap: 30px;
	--smallGap: calc(var(--gap) / 2);
	--negative: calc(-1 * var(--gap));
	--smallNegative: calc(-1 * var(--smallGap));

	--card: 200px;
	
	--container: 1400px;
	--textContainer: 700px;

	--border: 1px solid #ddd;
	--borderRadius: 3px;

	--shadow: 0 10px 20px rgba(0,0,0,0.05);

	--transition: all 0.3s ease-in-out;
}


* {
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
}

/* utilities */

*[tabindex] {
	cursor: pointer;
}

.container {
	max-width: var(--container);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--gap);
}

.container-fluid {
	padding: 0 var(--gap);
}

.bg {
	background: var(--accentBg);
	padding: var(--smallGap);
}

.bg-accent {
	background: var(--accent);
	color: var(--bg);
	padding: var(--smallGap);
}

.color-bg {
	color: var(--bg);
}

.flex {
	display: flex;
	gap: var(--gap);
}

.flex .space {
	flex-grow: 2;
}

.flex.-n {
	gap: 0;
}

.flex.-mini {
	gap: 5px;
}

.-ac {
	align-items: center;
}

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

.-txt-c, .text-center {
	text-align: center;
}

.-txt-c {
	justify-content: center;
}

.-txt-r {
	justify-content: flex-end;
}

.-txt-l {
	justify-content: flex-start;
}

p.-txt-c {
	margin: 0 auto 1em;
}

.-txt-r {
	text-align: right;
}

.-txt-l {
	text-align: left;
}

.-txt-l p {
	margin-left: 0;
}

.r {
	position: relative;
}

.-wrap {
	flex-wrap: wrap;
}

.badge {
	position: absolute;
	z-index: 2;
}

.badge.-top {
	top: var(--smallGap);
}

.badge.-left {
	left: var(--smallGap);
}

.gap-top {
	margin-top: var(--gap);
}

.gap-btm {
	margin-bottom: var(--gap);
}

.gap-y {
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}

.gap-x {
	margin-left: var(--gap);
	margin-right: var(--gap);
}

article .image, .gallery .image {
	display: block;
}

.image {
	overflow: hidden;
	position: relative;
	display: block;
}

.image:before {
	display: block;
	content: "";
	padding-top: var(--defaultRatio);
}

.ratio1-1 .image:before {
	padding-top: 100%;
}

.ratio1-2 .image:before {
	padding-top: 200%;
}

.ratio2-1 .image:before {
	padding-top: 50%;
}

.ratio2-3 .image:before {
	padding-top: 150%;
}

.ratio3-1 .image:before {
	padding-top: 33%;
}

.ratio3-2 .image:before {
	padding-top: 66%;
}

.ratio3-4 .image:before {
	padding-top: 133%;
}

.ratio4-1 .image:before {
	padding-top: 25%;
}

.ratio4-3 .image:before {
	padding-top: 75%;
}

[class*="grid-"] {
	display: grid;
	grid-gap: var(--gap);	
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
	grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
	grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
	grid-template-columns: repeat(7, 1fr);
}

.grid-12 {
	grid-template-columns: repeat(12, 1fr);
}

.col-sm-1, .span-1 {
	grid-column: span 1;
}

.col-sm-2, .span-2 {
	grid-column: span 2;
	flex-basis: 16.5%;
}

.col-sm-3, .span-3 {
	grid-column: span 3;
	flex-basis: 25%;
}

.col-sm-4, .span-4 {
	grid-column: span 4;
	flex-basis: 33%;
}

.col-sm-5, .span-5 {
	grid-column: span 5;
}

.col-sm-6, .span-6 {
	grid-column: span 6;
	flex-basis: 50%;
}

.col-sm-7, .span-7 {
	grid-column: span 7;
}

.col-sm-8, .span-8 {
	grid-column: span 8;
}

.col-sm-9, .span-9 {
	grid-column: span 9;
}

.col-sm-10, .span-10 {
	grid-column: span 8;
}

.col-sm-11, .span-11 {
	grid-column: span 9;
}

.col-sm-12, .span-full {
	grid-column: 1 / -1;
	flex-basis: 100%;
}

.span-r-2 {
	grid-row: span 2;
}

.auto-grid {
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--card), 1fr));
}

.panel {
	padding: var(--smallGap);
	border: var(--border);
	border-radius: var(--borderRadius);
}

/* buttons */

.btn {
	padding: 0.5em 1em;
	border-radius: var(--borderRadius);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.btn.btn-inline {
	padding: 0.2em;
}

.btn-small, .btn-sm {
	font-size: 0.8em;
	line-height: 1.5em;
	padding: 0.2em 0.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-lg {
	display: flex;
	text-align: center;
}

.btn:hover {
	text-decoration: none;
}

.btn-invisible {
	background: rgba(0,0,0,0);
	border: 2px solid rgba(0,0,0,0);
}

.btn-default {
	background: var(--accentBg);
	border: 2px solid var(--accentBg);
}

.btn-default:hover {
	color: var(--accentBg);
	background: var(--accent);
	border: 2px solid var(--accent);
}

.btn-default.active {
	background: var(--accent);
	border: 2px solid var(--accent);
	color: var(--accentBg);	
}

.btn-primary {
	color: var(--accentBg);
	background: var(--accent);
	border: 2px solid var(--accent);
}

.btn-primary:hover {
	color: var(--accent);
	background: var(--accentBg);
}

.btn-outline {
	border: 2px solid;
	color: var(--accent);
}

.btn-outline.active {
	background: var(--accent);
	border: 2px solid var(--accent);
	color: var(--accentBg);
}

.btn-outline.active:hover {
	color: var(--accentBg);
}

.btn-outline:hover {
	color: var(--accentAlt);
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}

.btn-icon.btn-lg {
	display: flex;
}

.btn.in-basket {
	border-color: var(--success);
	background: var(--success);
	color: var(--bg);
}

/* form */

input, select, textarea {
	border: 2px solid var(--gray);
	border-radius: var(--borderRadius);
	padding: 0.5em 1em;
	display: inline-block;
	max-width: 100%;
	font-size: 16px;
	font-family: inherit;
	background: var(--bg);
}

.visuallyhidden {
	display: none !important;
}

form label.checkbox, .field-checkbox.field-group {
	margin-bottom: var(--smallGap);
	display: flex;
	gap: 0;
	font-size: var(--em);
}

.field-checkbox.field-group label {
	margin-bottom: 0;
	font-size: var(--em);
}

form .checkbox p {
	margin: 0;
	line-height: 1.2em;
}

form .checkbox input,
.field-group.field-checkbox input {
	flex: 0 0 1em;
	margin: 0.3em 0.5em 0 0;
}

.form-group {
	display: flex;
	position: relative;
}

.form-group label {
	text-align: left;
}

.form-group input:not(.checkbox):first-child {
	margin-right: -5px;
	border-radius: var(--borderRadius);
	padding: 0.5em 1em;
	display: block;
}

.form-horizontal .form-group {
	justify-content: space-between;
	align-items: center;
}

.form-horizontal .form-group + .form-group {
	margin-top: var(--smallGap);
}

@media screen and (max-width: 1100px) {

	.t-grid-1 {
		grid-template-columns: 1fr;
	}

	.t-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.t-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.t-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.t-grid-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.t-grid-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.t-grid-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.t-grid-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.t-span-1 {
		grid-column: span 1;
	}

	.t-r-span-2 {
		grid-row: span 2;
	}

	.t-span-2 {
		grid-column: span 2;
	}

	.t-span-3 {
		grid-column: span 3;
	}

	.t-span-4 {
		grid-column: span 4;
	}

	.t-span-5 {
		grid-column: span 5;
	}

	.t-span-6 {
		grid-column: span 6;
	}

	.t-span-7 {
		grid-column: span 7;
	}

	.t-span-8 {
		grid-column: span 8;
	}

	.t-span-9 {
		grid-column: span 9;
	}

	.t-span-10 {
		grid-column: span 10;
	}

	.t-span-11 {
		grid-column: span 11;
	}

	.t-span-full, .t-span-12 {
		grid-column: 1 / -1;
	}

}

@media screen and (min-width: 651px) {

	.mobile {
		display: none;
	}
	
}

@media screen and (max-width: 650px) {

	.desktop {
		display: none;
	}

	.s-ratio1-1 .image:before {
		padding-top: 100%;
	}

	.s-ratio1-2 .image:before {
		padding-top: 200%;
	}

	.s-ratio2-1 .image:before {
		padding-top: 50%;
	}

	.s-ratio2-3 .image:before {
		padding-top: 150%;
	}

	.s-ratio3-1 .image:before {
		padding-top: 33%;
	}

	.s-ratio3-2 .image:before {
		padding-top: 66%;
	}

	.s-ratio3-4 .image:before {
		padding-top: 133%;
	}

	.s-ratio4-1 .image:before {
		padding-top: 25%;
	}

	.s-ratio4-3 .image:before {
		padding-top: 75%;
	}

	.s-grid-1 {
		grid-template-columns: 1fr;
	}

	.s-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.s-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.s-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.s-grid-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.s-grid-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.s-grid-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.s-grid-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.s-span-1 {
		grid-column: span 1;
	}

	.s-span-2 {
		grid-column: span 2;
	}

	.s-span-3 {
		grid-column: span 3;
	}

	.s-span-4 {
		grid-column: span 4;
	}

	.s-span-5 {
		grid-column: span 5;
	}

	.s-span-6 {
		grid-column: span 6;
	}

	.s-span-7 {
		grid-column: span 7;
	}

	.s-span-8 {
		grid-column: span 8;
	}

	.s-span-9 {
		grid-column: span 9;
	}

	.s-span-10 {
		grid-column: span 10;
	}

	.s-span-11 {
		grid-column: span 11;
	}

	.s-span-full, .s-span-12 {
		grid-column: 1 / -1;
	}

}