/*
==========================
	Product page
==========================
*/

.breadcrumbs {
	margin: 15px auto;
	font-size: 16px;
    overflow: hidden;
}
.breadcrumbs a {
	display: inline-block;
	color :#333;
	white-space: nowrap;	
}

.product.page {
	margin-top: 0;
}

.product.top {
	display: flex;
	background: #fff;
    padding: 20px;
}

.product.top img {
	width: 35%;
    aspect-ratio: 4/3;
}

.product.top main {
	overflow: hidden;
	padding: 20px;
	width: 100%;
}

.product.top h1 {
	display: block;
	white-space: normal;
	margin: 0 0 10px 0;
}
.product.top h1:before,
.product.top h1:after {
	content: none;
}

.product.top p {
	font-size: 20px;
}
.product.top i {
	color: #f90;
	padding: 3px 7px 3px 0;
    border-right: 1px solid #c3c3c3;
    margin-right: 7px;
}

.product .center {
	text-align: center;
	padding: 100px 20px;
}

.product .desc {
    min-height: 150px;
	line-height: 23px;
	text-align: justify;
}
.product .desc h4 {
	text-align: center;
	padding: 90px 0;
}
.product .desc p {
	margin: 10px 0;
}

.product h5 {
	margin: 5px 0;
}
.product table {
	width: 100%;
	margin-bottom: 15px;
}
.product td {
	width: 50%;
	border: 1px solid #ddd;
	padding: 10px 20px;
}
.product td:first-child {
	border-width: 1px 0 1px 1px;
}
.product td:last-child {
	border-width: 1px 1px 1px 0;
}



.tabs {
	background: #fff;
}

.tabs header {
    display: grid;
	grid-template-columns: repeat( 4, 1fr );
	border-bottom: 1px solid #f90;
	font-size: 16px;
}

.tabs header a {
	text-align: center;
	padding: 18px;
	white-space: nowrap;
	cursor: pointer;
	transition: .5s;
}

.tabs header a:hover,
.tabs header a.active {
	background: #f90;
	color: #fff;
}

.tabs > div {
	padding: 15px 30px;
	display: none;
}



.offers {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr 1fr 1fr;
	grid-gap: 1em 2em;
    align-items: center;
	margin: 20px 2vw;
	font-size: 1.2em;
	white-space: nowrap;
}

.offers u {
	overflow: hidden;
	text-overflow: ellipsis;
}

.offers a {
	display: contents;
}

.offers strong {
	color: #333;
}



.rating {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 4vw;
	justify-content: center;
    align-items: center;
    text-align: center;
	margin: 30px 20px;
}

.rating .big {
    width: 160px;
	min-width: 120px;
	padding: 50px 0 40px 0;
    background: url(star.png) no-repeat 50% / contain;
    font-size: 3em;
    line-height: 1.2;
    font-weight: 900;
    color: #383;
}

.big p {
    font: 14px Arial;
	color: #888;
}

.rating .scount {
	font-size: 1.1em;
}

.rating s {
	text-decoration: none;
}
.rating s:after {
	font: bold 1em FontAwesome;
	content: '\f005';
	margin: 2px;
}

.rating progress {
	margin-left: 1em;
}



.rate {
	border-top: 1px solid #ccc;
	padding: 30px;
	line-height: 33px;
	display: none;
}

.rate label {
	padding-right: 5px;
}

.rate textarea {
	width: 100%;
	height: 150px;
	border-color: #ddd;
}

.stars {
	white-space: nowrap;
}

.stars input {
	appearance: none;
	font: 2em FontAwesome;
	background: none;
	border: 0;
	padding: 5px;
	margin: -5px;
	cursor: pointer;
}
.stars input:before {
	content: '\f006';
    color: #f90;
}

.stars input:valid:before {
	content: '\f005';
}
.stars input:checked ~ input:before,
.stars input:hover   ~ input:before {
	content: '\f006';
	color: #ddd;
}



.reviews {
	border-top: 1px solid #ccc;
}

.reviews:empty {
	display: none;
}

.reviews div {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	align-items: center;
	grid-gap: 5px 13px;
	background: #fafafa;
    border: 1px solid #e6e6e6;
	border-radius: 3px;
    padding: 10px 15px;
	margin: 30px 0;
	white-space: nowrap;
	overflow: hidden;
}

.reviews b:before {
	font: bold 20px FontAwesome;
    content: "\f007";
	padding-right: 3px;
	color: #383;
}

.reviews i {
	color: #f90;
}

.reviews p {
	text-align: right;
}
.reviews p:before {
	content: 'Megosztva:';
	color: #aaa;
}

.reviews pre {
	grid-column: 1 / 4;
    font: inherit;
	margin: 0;
    white-space: pre-line;
}



@media( max-width: 1200px ) {
	
	.offers {
		grid-template-columns: 1fr 2fr 1fr 1fr;
		margin: 0;
	}
	.offers u {
		display: none;
	}
	
}


@media( max-width: 900px ) {
	
	.offers {
		grid-template-columns: 2fr 1fr 1fr;
		margin: 0;
	}
	.offers img {
	    max-width: 100%;
		height: 40px;
	}
	.offers p {
		display: none;
	}
	
}

@media( max-width: 600px ) {
	
	.breadcrumbs a {
		padding: 5px;
	}
	.product.top {
		flex-direction: column
	}
	.product.top img {
		width: 80%;
		margin: auto;
	}
	.product.top hr {
		display: none;
	}
	.tabs header {
		grid-template-columns: 1fr 1fr;
	}
	.product .rate {
		flex-direction: column;
	}
	.offers {
		grid-template-columns: 2fr 1fr 1fr;
		grid-gap: 1em;
	}
	.offers .btn {
	    font-size: 0;
	}	
	.reviews p:before {
		content: none;
	}
}