#tile-calc {
	
}

@media all and (max-width: 1199px) {
	#tile-calc {
		font-size: 14px;
	}
}

#tile-calc .wrapper {
	display: flex;
}

@media all and (max-width: 1199px) {
	#tile-calc .wrapper {
		flex-direction: column;
	}
}

#tile-calc .wrapper .summary {	
	flex-shrink: 0;
}

@media all and (min-width: 1200px) {
	#tile-calc .wrapper .summary {	
		width: 320px;
		margin-left: 40px;
	}
	#tile-calc .wrapper .summary.inner {
		display: none;
	}	
}

@media all and (max-width: 1199px) {
	#tile-calc .wrapper .summary.side {
		display: none;
	}	
}

#tile-calc .wrapper .summary .sticky {
	transition: 0.3s;
}

@media all and (min-width: 1200px) {
	#tile-calc .wrapper .summary .sticky {
		--padding: 40px;
		padding-top: var(--padding);
		position: sticky;
		top: -1px;
	}
	body.to-top #tile-calc .wrapper .summary .sticky.is-pinned {
		padding-top: calc( var(--header-height) + var(--padding) );
	}
}

@media all and (max-width: 1199px) {
	#tile-calc .wrapper .summary .sticky {
		margin-top: 24px;
	}
}

#tile-calc .wrapper .params {
	width: 100%;
	padding-top: 40px;
}

#tile-calc .heading {
	text-align: center;
}

#tile-calc .group {
	
}

#tile-calc .group + .group {
	margin-top: 64px;
	/* padding-top: 40px;
	border-top: 1px solid #eee; */
}

#tile-calc .group > .title {
	margin-bottom: 24px;
}

#tile-calc .group > div {
	width: 100%;
}

@media all and (min-width: 1200px) {
	#tile-calc .types {
		--width: 50%;
		--gap: 8px;
		--margin: 16px;
		display: flex;
		flex-wrap: wrap;
		margin: 0 calc( var(--gap) * -1 );
	}
	#tile-calc .types .type {
		margin: 0 var(--gap);
		width: calc( var(--width) - var(--gap) * 2);		
	}
	#tile-calc .types .type:nth-child(n + 3) {
		margin-top: var(--margin);
	}
}

@media all and (max-width: 1199px) {
	#tile-calc .types .type + .type {
		margin-top: 24px;
	}
}

#tile-calc .types .type {
	padding: 16px;
	box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
	border-radius: 5px;
	cursor: pointer;
	user-select: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #f8f8f8;
    border: 3px solid transparent;
}

#tile-calc .types .type.active {
	color: white;
	background-color: var(--dacha-green);
	outline: 1px solid var(--dacha-green);
    border-color: white;
}

#tile-calc .types .type .name {
	font-weight: 700;
}

#tile-calc .types .type .description {
	font-size: 13px;
	line-height: 140%;
	margin: 16px 0;
}

#tile-calc .types .type .price {
	font-weight: 700;

}

#tile-calc .tiles .tile {
	box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
	border-radius: 5px;
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: space-between;
	background-color: #f8f8f8;
    border: 3px solid transparent;
}

@media all and (min-width: 1200px) {	

	#tile-calc .tiles {
		--width: 50%;
		--gap: 8px;
		--margin: 16px;
		display: flex;
		flex-wrap: wrap;
		margin: 0 calc( var(--gap) * -1 );
	}
	
	#tile-calc .tiles .tile {
		margin: 0 var(--gap);
		width: calc( var(--width) - var(--gap) * 2);		
	}

	#tile-calc .tiles .tile:nth-child( n + 3 ) {
		margin-top: var(--margin);
	}
	
}

@media all and (max-width: 1199px) {
	#tile-calc .tiles .tile + .tile {
		margin-top: 24px;
	}
}

#tile-calc .tiles .tile.active {
	color: white;
	background-color: var(--dacha-green);
	outline: 1px solid var(--dacha-green);
    border-color: white;
}

#tile-calc .tiles .tile.disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media all and (max-width: 1199px) {
	#tile-calc .tiles .tile.disabled {
		display: none;
	}
}

#tile-calc .tiles .tile .content {
	width: 100%;
	padding: 16px;
	border-radius: 0 0 4px 4px;
}

#tile-calc .tiles .tile .content .name {
	font-weight: 700;
}

#tile-calc .tiles .tile .content select {
	width: 100%;
	padding: 4px;
	margin-top: 8px;
}

#tile-calc .tiles .tile .content .current {

}

#tile-calc .tiles .tile .image {
	--size: 96px;
	width: var(--size);
	height: var(--size);
	flex-shrink: 0;
}

#tile-calc .tiles .tile .image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: 0 4px 4px 0;
}

@media all and (min-width: 1200px) {

	#tile-calc .volumes {
		--width: 50%;
		--gap: 8px;
		--margin: 16px;
		display: flex;
		flex-wrap: wrap;
		margin: 0 calc( var(--gap) * -1 );
	}
	
	#tile-calc .volumes .volume {
		margin: 0 var(--gap);
		width: calc( var(--width) - var(--gap) * 2);		
	}
	
}

#tile-calc .volumes .volume {
	background-color: #f8f8f8;
	box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
	border-radius: 5px;
	padding: 16px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media all and (max-width: 1199px) {
	#tile-calc .volumes .volume {
		flex-direction: column;
		align-items: flex-start;
	}
	#tile-calc .volumes .volume + .volume {
		margin-top: 24px;		
	}
}

#tile-calc .volumes .volume:nth-child( n + 3 ) {
	margin-top: 16px;
}

#tile-calc .volumes .volume .name {
	font-weight: 700;
}

#tile-calc .volumes .volume .value {
	display: flex;
	margin-top: 8px;
	flex-shrink: 0;
}

@media all and (max-width: 1199px) {
	#tile-calc .volumes .volume .value {
		margin-top: 16px;
	}
}

#tile-calc .volumes .volume .value .decrease,
#tile-calc .volumes .volume .value .increase {
	--size: 24px;
	cursor: pointer;
	width: var(--size);
	height: var(--size);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background-color: var(--dacha-green);
	font-size: 13px;
	border-radius: 50%;
}

#tile-calc .volumes .volume .value .decrease {

}

#tile-calc .volumes .volume .value .increase {

}

#tile-calc .volumes .volume .value input {
	border: none;
	background-color: white;
	width: 64px;
	text-align: center;
	margin: 0 8px;
	outline: 0;
}

@media all and (max-width: 1199px) {
	#tile-calc .volumes .volume .value input {		
		width: 96px;
	}
}

#tile-calc .volumes .volume .presets {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 16px;
}

@media all and (max-width: 1199px) {
	#tile-calc .volumes .volume .presets {
		display: none;
	}
}

#tile-calc .volumes .volume .presets li {
	font-size: 12px;
	border: 1px solid var(--dacha-green);
	padding: 4px 6px;
	border-radius: 100px;
	cursor: pointer;
}

#tile-calc .volumes .volume .presets li:hover {
	color: white;
	background-color: var(--dacha-green);
}

#tile-calc .volumes .volume .presets li + li {
	margin-left: 8px;
}

#tile-calc .summary .result {
	margin-top: 24px;
}

#tile-calc .summary .result .block {

}

#tile-calc .summary .result .block + .block {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #eee;
}

#tile-calc .summary .result .block .pair {
	display: flex;
	justify-content: space-between;
}

#tile-calc .summary .result .block .pair + .pair {
	margin-top: 16px;
}

#tile-calc .summary .result .block .pair .label {
	padding-right: 16px;
}

#tile-calc .summary .result .block .pair .value {
	flex-shrink: 0;
	width: 144px;
	text-align: right;
	font-weight: 700;
}

#tile-calc .summary .result .block .pair .value .hint {
	font-size: 13px;
	font-weight: 400;
	margin-top: 4px;
}

#tile-calc .summary .make-order {
	margin-top: 40px;
	display: flex;
	justify-content: center;	
}

#tile-calc .form {

}