@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500&display=swap');

/*
	Parallelism by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

:root {
  --primary: #4b290a;
  --accent: #b87c84;
  --secondary: #ceaf91;
  --text: #f8f4f0;
  --text-light: rgba(248, 244, 240, 0.8);
  --shadow: rgba(75, 41, 10, 0.3);
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */
	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: linear-gradient(130deg, #4b290a, #b87c84, #ceaf91);
		background-attachment: fixed;
		background-size: cover;
		position: relative;
		line-height: 1.75em;
		overflow-x: hidden;
		overflow-y: auto;
		font-family: 'Open Sans', sans-serif;
		color: var(--text);
	}

		body::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(75, 41, 10, 0.1);
			z-index: -1;
		}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

		@media screen and (max-width: 1280px) {
			body {
				background-attachment: scroll;
			}
		}

		@media screen and (max-width: 736px) {
			body {
				background: linear-gradient(130deg, #4b290a, #b87c84, #ceaf91) !important;
				background-attachment: fixed !important;
				background-size: cover !important;
				background-position: center center !important;
				background-repeat: no-repeat !important;    
			}
    
    /* Убираем старый псевдоэлемент на мобильных */
    body::before {
        display: none !important;
    }
}

/* List */
	ul.icons {
		cursor: default;
		margin: 0 0 0.5em 0;
	}

		ul.icons li {
			display: inline-block;
			font-size: 1.5em;
			margin-left: 1em;
		}

			ul.icons li span {
				display: none;
			}

			ul.icons li a {
				opacity: 0.8;
				color: var(--text);
				-moz-transition: all 0.25s ease-in-out;
				-webkit-transition: all 0.25s ease-in-out;
				-ms-transition: all 0.25s ease-in-out;
				transition: all 0.25s ease-in-out;
			}

				ul.icons li a:hover {
					opacity: 1.0;
					color: var(--secondary);
					transform: translateY(-2px);
				}

			ul.icons li:first-child {
				margin-left: 0;
			}

		@media screen and (max-width: 736px) {
			ul.icons {
				margin: 0 0 2em 0;
			}
		}

/* Icons */
	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Wrapper */
	#wrapper {
		min-height: 100vh;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition: -moz-filter 0.5s ease-in-out;
		-webkit-transition: -webkit-filter 0.5s ease-in-out;
		-ms-transition: -ms-filter 0.5s ease-in-out;
		transition: filter 0.5s ease-in-out;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

		body.is-poptrox-visible #wrapper {
			-moz-filter: blur(0.25em);
			-webkit-filter: blur(0.25em);
			-ms-filter: blur(0.25em);
			filter: blur(0.25em);
		}

		@media screen and (max-width: 736px) {
			#wrapper {
				min-height: 0;
                padding-top: 80px;
				padding-bottom: 20px;
			}
		}

/* Scroll Zone */
	.scrollZone {
		position: fixed;
		width: 6rem;
		height: 100vh;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: -ms-grab;
		cursor: grab;
		z-index: 10001;
		background: rgba(184, 124, 132, 0.1);
	}

		.scrollZone.left {
			left: 0;
		}

		.scrollZone.right {
			right: 0;
		}

		@media screen and (max-width: 736px) {
			.scrollZone {
				display: none;
			}
		}

/* Main */
	#main {
		-moz-transition: opacity 1s ease-in-out;
		-webkit-transition: opacity 1s ease-in-out;
		-ms-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
		-moz-transition-delay: 0.5s;
		-webkit-transition-delay: 0.5s;
		-ms-transition-delay: 0.5s;
		transition-delay: 0.5s;
		position: relative;
		z-index: 1;
		width: -moz-min-content;
		width: -webkit-min-content;
		width: -ms-min-content;
		width: min-content;
		max-width: 100vw;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 5px 5px 5px 6rem;
	}

		#main .items {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
		}

			#main .items > :last-child {
				border-right: solid 10px rgba(255, 255, 255, 0.1);
			}

		#main .item {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			margin: 5px;
			height: 16em;
			box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
			background: rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			overflow: hidden;
			backdrop-filter: blur(10px);
			border: 1px solid rgba(206, 175, 145, 0.3);
		}

			#main .item.span-1 {
				width: 20em;
			}

			#main .item.span-2 {
				width: 30em;
			}

			#main .item.span-3 {
				width: 40em;
			}

			#main .item.intro {
				background: linear-gradient(135deg, rgba(184, 124, 132, 0.9), rgba(206, 175, 145, 0.9));
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				padding: 2.5em 3em;
				text-align: center;
				backdrop-filter: blur(20px);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

				/* Логотип в блоке intro вместо h1 */
				.intro-logo {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 1em;
					width: 100%;
				}

				.intro-logo img {
					max-width: 100%;
					height: auto;
					max-height: 100px;
					width: auto;
					object-fit: contain;
					filter: drop-shadow(0 4px 20px rgba(75, 41, 10, 0.4));
					transition: transform 0.3s ease;
				}

				.intro-logo img:hover {
					transform: scale(1.05);
				}

			/* Хлебные крошки */
			.breadcrumbs {
				padding: 1rem 2rem 0.5rem 2rem;
				/* max-width: 1200px; */
				margin: 0 auto;
			}

			.breadcrumb-list {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				gap: 0.5rem;
				font-size: 0.9em;
			}

			.breadcrumb-list li {
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}

			.breadcrumb-list li:not(:last-child)::after {
				content: '→';
				color: var(--secondary);
				margin-left: 0.5rem;
			}

			.breadcrumb-list a {
				color: var(--secondary);
				text-decoration: none;
				transition: color 0.3s ease;
			}

			.breadcrumb-list a:hover {
				color: var(--accent);
			}

			.breadcrumb-list .current {
				color: var(--text);
				font-weight: 600;
			}

				#main .item.intro h1 {
					font-size: 3em;
					line-height: 1.1em;
					color: var(--text);
					text-shadow: 0 2px 15px rgba(75, 41, 10, 0.5);
					margin-bottom: 0.5em;
					font-weight: 700;
				}

				#main .item.intro p {
					font-size: 1.25em;
					line-height: 1.6em;
					margin: 0;
					color: rgba(248, 244, 240, 0.95);
					font-weight: 400;
					font-family: 'Open Sans', sans-serif;
				}

			#main .item.thumb {
				display: block;
				position: relative;
				background: rgba(255, 255, 255, 0.1);
				cursor: pointer;
				transition: all 0.4s ease;
				border: 1px solid rgba(206, 175, 145, 0.3);
			}

				#main .item.thumb:hover {
					transform: translateY(-8px);
					box-shadow: 0 20px 40px var(--shadow), 0 0 0 3px rgba(255, 255, 255, 0.1);
					border-color: var(--accent);
					background: rgba(255, 255, 255, 0.2);
				}

				#main .item.thumb h2 {
					position: absolute;
					bottom: 0;
					left: 0;
					background: #4b290a;
					width: 100%;
					padding: 0.5em 1em 0.5em;
					font-weight: 600;
					line-height: 1.2em;
					z-index: 2;
					color: var(--text);
					font-family: 'Montserrat', sans-serif;
					font-size: 1.1em;
					backdrop-filter: blur(5px);
				}

				#main .item.thumb img {
					display: block;
					z-index: 1;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					-moz-object-fit: cover;
					-webkit-object-fit: cover;
					-ms-object-fit: cover;
					object-fit: cover;
					-moz-object-position: center;
					-webkit-object-position: center;
					-ms-object-position: center;
					object-position: center;
					-moz-transition: all 0.75s ease-in-out;
					-webkit-transition: all 0.75s ease-in-out;
					-ms-transition: all 0.75s ease-in-out;
					transition: all 0.75s ease-in-out;
					-moz-transition-delay: 1.25s;
					-webkit-transition-delay: 1.25s;
					-ms-transition-delay: 1.25s;
					transition-delay: 1.25s;
				}

				#main .item.thumb:hover img {
					transform: scale(1.08);
				}

				#main .item.thumb.delay-1 img {
					-moz-transition-delay: 1.375s;
					-webkit-transition-delay: 1.375s;
					-ms-transition-delay: 1.375s;
					transition-delay: 1.375s;
				}

				#main .item.thumb.delay-2 img {
					-moz-transition-delay: 1.5s;
					-webkit-transition-delay: 1.5s;
					-ms-transition-delay: 1.5s;
					transition-delay: 1.5s;
				}

				#main .item.thumb.delay-3 img {
					-moz-transition-delay: 1.625s;
					-webkit-transition-delay: 1.625s;
					-ms-transition-delay: 1.625s;
					transition-delay: 1.625s;
				}

				#main .item.thumb.delay-4 img {
					-moz-transition-delay: 1.75s;
					-webkit-transition-delay: 1.75s;
					-ms-transition-delay: 1.75s;
					transition-delay: 1.75s;
				}

				#main .item.thumb.delay-5 img {
					-moz-transition-delay: 1.875s;
					-webkit-transition-delay: 1.875s;
					-ms-transition-delay: 1.875s;
					transition-delay: 1.875s;
				}

				#main .item.thumb.delay-6 img {
					-moz-transition-delay: 2s;
					-webkit-transition-delay: 2s;
					-ms-transition-delay: 2s;
					transition-delay: 2s;
				}

				#main .item.thumb .review-excerpt {
					display: -webkit-box;
					-webkit-line-clamp: 7;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1.5;
					max-height: 10.5em;
				}

		body.is-preload #main {
			opacity: 0;
		}

			body.is-preload #main .item.thumb img {
				opacity: 0;
			}

		@media screen and (max-width: 1680px) {
			#main .item {
				height: 14em;
			}

				#main .item.span-1 {
					width: 17em;
				}

				#main .item.span-2 {
					width: 25.5em;
				}

				#main .item.span-3 {
					width: 34em;
				}
		}

		@media screen and (max-width: 736px) {
			#main {
				width: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				padding: 2.5px;
			}

				#main .items {
					-moz-flex-wrap: wrap;
					-webkit-flex-wrap: wrap;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;
					-moz-justify-content: center;
					-webkit-justify-content: center;
					-ms-justify-content: center;
					justify-content: center;
				}

					#main .items > :last-child {
						border-right: 0;
					}

				#main .item {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					width: calc(50vw - 15px) !important;
					margin: 2.5px;
					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
					border-radius: 8px;
				}

					#main .item.intro {
						width: calc(100vw - 20px) !important;
						text-align: center;
						height: auto;
						padding: 2em 1.5em;
					}

						#main .item.intro h1 {
							font-size: 2em;
						}

						#main .item.intro p {
							font-size: 1em;
						}

					/* Убираем звезды из заголовка на мобильных */
					#main .item.thumb h2 .gold-star {
                        display: none;
                    }
    
                    /* Обрезаем текст отзыва до 3 строк */
                    #main .item.thumb .review-excerpt {
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 1.4;
                        max-height: 4.2em;
                    }
		}

		@media screen and (max-width: 480px) {
			#main .item {
				height: 10em;
			}
		}

/* Footer */
	#footer {
		width: 100%;
		padding: 2em 1.5em;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		z-index: 10002;
		background: rgba(75, 41, 10, 0.9);
		color: var(--text);
		border-top: 3px solid var(--accent);
		backdrop-filter: blur(10px);
	}

		#footer > section:first-child {
			text-align: left;
			max-width: 36em;
			padding-right: 2em;
		}

		#footer > section:last-child {
			text-align: right;
			max-width: 36em;
		}

		#footer h2 {
			font-size: 2.25em;
			margin: 0 0 1em 0;
			color: var(--text);
		}

		#footer .copyright li {
			display: inline-block;
			margin-left: 1em;
			padding-left: 1em;
			border-left: solid 1px rgba(248, 244, 240, 0.4);
			line-height: 1em;
			color: var(--text-light);
			font-family: 'Open Sans', sans-serif;
		}

			#footer .copyright li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}

		#footer a {
			color: var(--secondary);
			font-weight: 500;
		}

			#footer a:hover {
				color: var(--text);
			}

		@media screen and (max-width: 980px) {
			#footer {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				text-align: center;
			}

				#footer > section:first-child {
					width: 100%;
					padding-right: 0;
					margin-bottom: 1.5em;
				}

				#footer > section:last-child {
					text-align: center;
					margin: 0;
					width: 100%;
				}
		}

		@media screen and (max-width: 736px) {
			#footer {
				padding: 2em 1em;
			}

				#footer .copyright li {
					display: block;
					margin: 0.5em 0 0 0;
					padding-left: 0;
					border-left: 0;
				}

					#footer .copyright li:first-child {
						margin-top: 0;
					}
		}

/* Popup */
	.poptrox-popup {
		background: rgba(75, 41, 10, 0.95);
		cursor: default;
		border-radius: 12px;
		overflow: hidden;
		backdrop-filter: blur(20px);
		border: 1px solid rgba(206, 175, 145, 0.3);
	}

		.poptrox-popup .loader {
			display: block;
			width: 48px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -24px 0 0 -24px;
			background: url("images/loader.gif");
			opacity: 0.3;
		}

		.poptrox-popup .caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #4b290a;
			display: block;
			width: 100%;
			line-height: 75px;
			text-align: center;
			font-size: 1.25em;
			color: var(--text);
			font-family: 'Montserrat', sans-serif;
			font-weight: 500;
			backdrop-filter: blur(10px);
		}

		.poptrox-popup .nav-next, .poptrox-popup .nav-previous {
			text-decoration: none;
			font-weight: normal;
			font-style: normal;
			-moz-transition: all 0.25s ease-in-out;
			-webkit-transition: all 0.25s ease-in-out;
			-ms-transition: all 0.25s ease-in-out;
			transition: all 0.25s ease-in-out;
			opacity: 0.8;
			color: var(--secondary);
		}

			.poptrox-popup .nav-next:hover, .poptrox-popup .nav-previous:hover {
				opacity: 1.0;
				background: rgba(184, 124, 132, 0.2);
			}

		.poptrox-popup .nav-next, .poptrox-popup .nav-previous {
			text-decoration: none;
			text-transform: none !important;
			width: 150px;
			height: 75px;
			position: absolute;
			bottom: 0;
			cursor: pointer;
			font-size: 3em;
			line-height: 75px;
		}

			.poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

		.poptrox-popup .nav-next {
			right: 0;
			text-align: right;
			padding-right: 30px;
			border-radius: 12px 0 0 0;
		}

			.poptrox-popup .nav-next:before {
				content: '\f105';
			}

		.poptrox-popup .nav-previous {
			left: 0;
			text-align: left;
			padding-left: 30px;
			border-radius: 0 12px 0 0;
		}

			.poptrox-popup .nav-previous:before {
				content: '\f104';
			}

		@media screen and (max-width: 736px) {
			.poptrox-popup {
				background: rgba(75, 41, 10, 0.98);
				box-shadow: 0px 0px 30px 10px rgba(75, 41, 10, 0.6);
				border: solid 2.5px var(--secondary);
				/* Убеждаемся что попап занимает всю ширину на мобильных */
				width: 95vw !important;
				max-width: 95vw !important;
				height: auto !important;
				max-height: 90vh !important;
			}

				.poptrox-popup .caption {
					display: block !important;
			        position: relative;
			        bottom: auto;
			        background: rgba(75, 41, 10, 0.9);
			        line-height: 50px;
 			        font-size: 1em;
 			        padding: 0 15px;
 			        backdrop-filter: blur(10px);
				}

				.poptrox-popup .nav-next,
				.poptrox-popup .nav-previous {
			        display: block !important;
			        width: 80px;
			        height: 50px;
			        bottom: 0;
			        font-size: 2em;
			        line-height: 50px;
			        background: rgba(184, 124, 132, 0.3);
			        backdrop-filter: blur(10px);
			        border-radius: 0;
					transition: all 0.3s ease !important;
				}

				    .poptrox-popup .nav-next {
				        right: 0;
				        padding-right: 20px;
				        border-radius: 8px 0 0 0;
						/* height: 50px; */
                        /* font-size: 2em; */
                        /* line-height: 50px; */
				    }
    
				    .poptrox-popup .nav-previous {
				        left: 0;
				        padding-left: 20px;
				        border-radius: 0 8px 0 0;
						/* height: 50px; */
                        /* font-size: 2em; */
                        /* line-height: 50px; */
					}
    
				    /* Ховер-эффект только при активном взаимодействии */
					.poptrox-popup .nav-next:hover,
					.poptrox-popup .nav-previous:hover,
					.poptrox-popup .nav-next:active,
				    .poptrox-popup .nav-previous:active {
				        background: rgba(184, 124, 132, 0.5) !important;
				    }

					/* Сбрасываем фон после клика */
					.poptrox-popup .nav-next:not(:hover):not(:active),
					.poptrox-popup .nav-previous:not(:hover):not(:active) {
						background: rgba(184, 124, 132, 0.3) !important;
					}
    
				    /* Улучшаем отображение изображения на мобильных */
				    .poptrox-popup .pic {
				        max-height: calc(90vh - 110px) !important;
				        width: auto !important;
				    }
		}

/* Button Styles */
.btn-modern {
	background: var(--accent);
	color: var(--text);
	padding: 12px 30px;
	border: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Montserrat', sans-serif;
	border-radius: 8px;
	font-size: 0.9em;
	backdrop-filter: blur(10px);
}

.btn-modern:hover {
	background: var(--secondary);
	color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(184, 124, 132, 0.4);
}