:root {
	--ease: .5s cubic-bezier(.4, 0, .2, 1);
}



button {
	border: 0;
	background: none;
}

/* ============ HEADER ============ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #fff;
	color: #171717;

}

@media (min-width:992px) {
	.site-header {
		padding-top: 10px;
		padding-bottom: 10px
	}
}

.site-header.scrolled {
	padding-top: 0px;
	padding-bottom: 0px
}

.site-header .inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
}

@media (max-width:992px) {
	.site-header .inner {
		padding: 14px 12px;
	}
}

.header-side {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 22px);
	flex: 1 1 0;
	min-width: 0;
}

.header-side.right {
	justify-content: flex-end;
}

/* burger */
.burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	cursor: pointer;
	transition: color var(--ease);
}

.burger-btn .material-symbols-outlined {
	font-size: calc(36px + (34 - 36) * ((100vw - 640px) / (1920 - 640)));
}

/* reservation button (desktop only) */
.btn-reserve {
	display: none;
	align-items: center;
	/*			gap: 8px;*/
	color: inherit;
	padding: 8px 18px;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .3s, color var(--ease), border-color var(--ease);
	border: solid #ddd 1px;
	border-radius: 50px;

}

.btn-reserve .material-symbols-outlined {
	font-size: 16px;
}

.btn-reserve a.btn-reserve a:hover {
	text-decoration: underline;
	color: #fff;
}

.site-header.scrolled .btn-reserve a:hover {
	color: #171717 !important;
}

.logo-mobile {
	border-bottom: 1px solid #EBEBEB;
}

/* logo, center, cross-fades between white/black art */
.logo-mobile img {
	width: 120px;
}

.logo-swap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 44px;
}

.logo-swap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--ease);
}

.logo-swap .logo-black {
	opacity: 0;
}

@media (min-width:992px) {
	.site-header.scrolled .logo-swap .logo-white {
		opacity: 0;
	}

	.site-header.scrolled .logo-swap .logo-black {
		opacity: 1;
	}
}

/* right icons */
.header-side.right .icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	width: 34px;
	height: 34px;
	transition: color var(--ease);
}

.header-side.right a:hover {
	text-decoration: none
}

.header-side.right .icon-btn .material-symbols-outlined {
	font-size: calc(34px + (30 - 34) * ((100vw - 640px) / (1920 - 640)));
}

.icon-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #E0C665;
	color: #fff;
	font-size: .6rem;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ============ DESKTOP: header floats over hero ============ */
@media (min-width:992px) {
	.btn-reserve {
		display: inline-flex;
	}

	.site-header {
		position: fixed;
		top: var(--promo-h);
		left: 0;
		right: 0;
		background: transparent;
		color: #fff;
		box-shadow: none;
	}

	.site-header .inner {
		padding: 22px 40px;
	}

	.site-header.scrolled {
		top: 0;
		background: #fff;
		color: #171717;
		box-shadow: 0 2px 24px rgba(0, 0, 0, .08);
		border-bottom: 1px solid #efefef
	}

	.site-header.scrolled .inner {
		padding: 24px 40px;
	}
}

/* ============ OFFCANVAS ============ */
.offcanvas-custom-menu {
	width: 400px;
	background: #fff;
	color: #171717;
}

.offcanvas-custom-menu .offcanvas-header {
	padding: 24px 28px 0;
}

.offcanvas-custom-menu .offcanvas-body {
	padding: 20px 22px 40px;
}

.offcanvas-custom-menu .nav-links {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.offcanvas-custom-menu .nav-links li {
	border-bottom: 1px solid rgba(13, 13, 12, .05);
}

.offcanvas-custom-menu .nav-links li a {
	display: block;
	padding: 10px 4px;
	font-size: 14px;
	letter-spacing: .04em;
	transition: padding-left .3s, color .3s;
	text-transform: uppercase;
}

.offcanvas-custom-menu .nav-links li a:hover {
	padding-left: 14px;
	color: #E0C665;
	text-decoration: none
}

/* brands dropdown inside offcanvas */
.offcanvas-custom-menu .nav-link-toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 10px 4px;
	font-size: 14px;
	letter-spacing: .04em;
	color: inherit;
	cursor: pointer;
	text-transform: uppercase;
}

.offcanvas-custom-menu .nav-link-toggle .chevron {
	font-size: 22px;
	transition: transform .35s ease;
}

.offcanvas-custom-menu .nav-link-toggle[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

.offcanvas-custom-menu .brands-grid {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 4px 18px;
}

.offcanvas-custom-menu .brands-grid a {
	display: block;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.05);
	color: #171717;
	/*    opacity:.65;*/
	transition: opacity .3s, background-color .3s;
}

.offcanvas-custom-menu .brands-grid a:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.08);
}

.offcanvas-custom-menu .brands-grid img {
	height: 46px;
	width: auto;
	display: block;
}

.offcanvas-custom-menu .offcanvas-foot {
	margin-top: auto;
	padding-top: 24px;
	font-size: .78rem;
	letter-spacing: .08em;
	color: #6b665c;
}

.offcanvas-custom-menu .offcanvas-foot a {
	display: block;
	margin-top: 6px;
	color: #171717;
}

.offcanvas-custom-menu .offcanvas-foot .phone a {
	font-size: calc(18px + (20 - 18) * ((100vw - 640px) / (1920 - 640)));
}

.offcanvas-custom-menu .social-row {
	display: flex;
	gap: 16px;
	margin-top: 22px;
}

.offcanvas-custom-menu .social-row a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(13, 13, 12, .25);
	border-radius: 50%;
	color: #171717;
	font-size: 16px;
	transition: background-color .3s, color .3s, border-color .3s;
}

.offcanvas-custom-menu .social-row a:hover {
	background: #171717;
	color: #fff;
	border-color: #171717;
}



/* ============ header-brand ============ */
.header-brand {
	position: sticky;
	top: 0;
	padding-bottom: 0;
	padding-top: 0;
	z-index: 1030;
	background: #fff;
	color: #171717;
	box-shadow: 0 2px 24px rgba(0, 0, 0, .08);
	border-bottom: 1px solid #efefef;
}




.header-brand .btn-reserve a:hover {
	color: #171717
}

.offcanvas-custom-menu .products-grid {
	display: grid;
	grid-template-columns: repeat(2, 160px);
	column-gap: 20px;
	/*
  row-gap: 12px;
  padding: 16px 0;
*/
}

.offcanvas-custom-menu a.product-link {
	padding: 8px 6px !important;
	font-size: 14px !important;
	text-decoration: none;
	white-space: normal;
	transition: none !important;
	letter-spacing: 0.04em !important;
	text-transform: inherit !important;
	opacity: 0.7
}

.offcanvas-custom-menu a.product-link:hover {
	padding: 8px 6px !important;

}

.offcanvas-custom-menu .product-link:hover {
	opacity: 1;
}


.offcanvas-custom-menu .nav-links a.product-link:hover {
	color: #E0C665;
	text-decoration: none;
}




.offcanvas-custom-menu .nav-links.nav-links-custom li a {
	font-size: 15px !important;
	text-transform: capitalize;
}




/* ============ HERO ============ */
.hero {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 97vh;
}

@media (max-width:992px) {
	.hero {
		height: 70vh;
	}
}

.hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero h1 {
	font-size: calc(12px + (12 * 0.3vmin));
	position: absolute;
	left: 5vw;
	bottom: 6vh;
	color: #fff;
	z-index: 1;
	font-weight: 200;
	letter-spacing: 0.2em;
}

.hero video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.appointment-section {
	position: relative;
	overflow: hidden
}

.appointment-section .crown {
	position: absolute;
	right: 20px;
	bottom: -20px;
	opacity: 0.4
}

@media (max-width:991px) {
	.appointment-section .crown {
		display: none
	}
}

.appointment-section .btn-white {
	background-color: #F2F2F2
}

.appointment-section .btn-white:hover {
	background-color: #111
}

.appointment-section .description {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* ============ BRANDS SECTION ============ */
.brands-section .brands-title {
	text-align: center;
	font-size: calc(12px + (5 * 0.3vmin));
	font-weight: 400;
	text-transform: uppercase;
	color: #171717;
	margin: 0 0 40px;
}

.brands-section .brand-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3/4;
	overflow: hidden;
	border-radius: 2px;
}

.brands-section .brand-card .brand-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.brands-section .brand-card:hover .brand-img {
	transform: scale(1.06);
}

.brands-section .brand-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.brands-section .brand-logo {
	position: absolute;
	left: 22px;
	bottom: 22px;
	height: 50px;
	width: auto;
	max-width: 70%;
	filter: brightness(0) invert(1);
}

@media (max-width:992px) {
	.brands-section .brand-logo {
		left: 12px;
		bottom: 12px;
	}
}

/* ============ MODEN JOURNAL SECTION ============ */
.journal-section h1 {
	font-size: calc(12px + (5 * 0.3vmin)) !important;
}

.journal-section .journal-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	/* винаги квадрат, без значение от снимката */
	overflow: hidden;
	border-radius: 2px;
}

.journal-section .journal-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.journal-section .journal-card:hover .journal-img {
	transform: scale(1.06);
	/* същия ховър ефект като при брандовете */
}

.journal-section .journal-caption {
	margin: 14px 0 0;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b665c;
}

.journal-section .journal-card:hover~.journal-caption {
	color: #171717;
}

.journal-section .journal-caption {
	transition: color .3s ease;
}