.site-header {
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: rgba(12, 10, 9, .34);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background .45s ease, height .45s ease, box-shadow .45s ease
}

.site-header.is-scrolled {
	height: 100px;
	background: #f4f1e9;
	border-bottom: 1px solid rgba(139, 3, 4, .22);
}

.site-header .inner {
	width: 100%;
	max-width: none;
	padding: 0 72px;
	box-sizing: border-box;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative
}

.hamburger {
	width: 38px;
	height: 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
	overflow: visible;
	transition: transform .45s cubic-bezier(.22, .72, .22, 1)
}

.hamburger span {
	display: block;
	width: 100%;
	height: 2.5px;
	background: var(--red);
	border-radius: 999px;
	transform-origin: center;
	transition:
		transform .52s cubic-bezier(.22, .72, .22, 1),
		opacity .32s ease,
		width .42s cubic-bezier(.22, .72, .22, 1),
		background .35s ease
}

.hamburger.is-active span:nth-child(1) {
	transform: translateY(11.5px) rotate(45deg);
	width: 100%
}

.hamburger.is-active span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.18);
	width: 100%
}

.hamburger.is-active span:nth-child(3) {
	transform: translateY(-11.5px) rotate(-45deg);
	width: 100%
}


.hamburger.is-active:hover span:nth-child(1) {
	transform: translateY(11.5px) rotate(45deg);
	width: 100%;
}

.hamburger.is-active:hover span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.15);
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.hamburger.is-active:hover span:nth-child(3) {
	transform: translateY(-11.5px) rotate(-45deg);
	width: 100%;
}
.logo {
	position: absolute;
	left: 50%;
	top: 10px;
	transform: translateX(-50%);
	width: 100px;
	text-align: center;
	transition: top .45s ease
}

.site-header.is-scrolled .logo {
	top: 10px
}

.logo-mark {
	width: 100px;
	height: 80px;
	margin: 0 auto;
	object-fit: contain
}


/* =========================
   LANGUAGE SWITCHER
========================= */

.header-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:28px;
	margin-left:auto;
}

.language-switcher{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:35px;
	padding-right:5px;
}

.language-switcher select{
	border:0;
	background:transparent;
	outline:none;
	cursor:pointer;
	color:#8b0304;
	font-family:var(--font-body);
	font-size:12px;
	line-height:1;
	font-weight:600;
	letter-spacing:.28em;
	text-transform:uppercase;

	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;

	padding:0 8px 0 0;

	transition:
		color .35s ease,
		opacity .35s ease;

	opacity:.92;
}

.language-switcher::after{
	content:"";

	position:absolute;
	right:0;
	top:50%;

	width:5px;
	height:5px;

	border-right:1px solid #8b0304;
	border-bottom:1px solid #8b0304;

	color:#8b0304;

	transform:translateY(-68%) rotate(45deg);

	pointer-events:none;

	opacity:.7;
}

.language-switcher select option{
	background:#f4f1e9;
	color:#2d1d18;

	font-size:13px;
	font-weight:500;

	letter-spacing:.08em;
	text-transform:uppercase;
}

.language-switcher:hover select{
	opacity:1;
}

.site-header.is-scrolled .language-switcher select,
.site-header.is-scrolled .language-switcher::after{
	color:#8b0304;
}
.room-btn {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 42px;
	min-width: 168px;
	padding: 0 34px;

	background: transparent;
	color: #fff;

	border: 1px solid var(--red);

	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;

	cursor: pointer;

	z-index: 1;

	transition:
		color .45s ease,
		border-color .45s ease,
		transform .35s ease;
}

/* DEFAULT RED LAYER */

.room-btn::before {
	content: "";

	position: absolute;
	inset: 0;

	background: var(--red);

	z-index: -1;

	transform: translateX(0);

	transition:
		transform .55s cubic-bezier(.22, .72, .22, 1);
}

/* HOVER */

.room-btn:hover {
	color: var(--red);
	transform: translateY(-1px);
}

/* RED SLIDE OUT */

.room-btn:hover::before {
	transform: translateX(101%);
}

/* ACTIVE */

.room-btn:active {
	transform: translateY(0);
}


.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--cream);
	color: #000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .55s ease, visibility .55s ease;
	overflow: auto
}

.menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.menu-top {
	position: sticky;
	top: 0;
	z-index: 4;
	height: 100px;
	padding: 0 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0, 0, 0, .28);
	background: var(--cream)
}

.menu-brand {
	display: flex;
	align-items: center;
	gap: 34px
}

.menu-close,
.desktop-booking-close,
.mobile-booking-close {
	position: relative;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: transform .45s cubic-bezier(.22, .72, .22, 1)
}

.menu-close:hover,
.desktop-booking-close:hover,
.mobile-booking-close:hover {
	transform: rotate(90deg)
}

.menu-close {
	width: 38px;
	height: 38px
}

.menu-close::before,
.menu-close::after,
.desktop-booking-close::before,
.desktop-booking-close::after,
.mobile-booking-close::before,
.mobile-booking-close::after {
	content: "";
	position: absolute;
	background: var(--red);
	border-radius:999px;
	transition:
		background .35s ease,
		transform .45s cubic-bezier(.22,.72,.22,1),
		opacity .35s ease
}

.menu-close::before,
.menu-close::after {
	left: 5px;
	top: 18px;
	width: 28px;
	height: 2px
}

.menu-close::before,
.desktop-booking-close::before,
.mobile-booking-close::before {
	transform: rotate(45deg)
}

.menu-close::after,
.desktop-booking-close::after,
.mobile-booking-close::after {
	transform: rotate(-45deg)
}

.menu-logo {
	width: 45px;
	height: auto;
	object-fit: contain
}

.menu-social,
.desktop-booking-social {
	display: flex;
	align-items: center;
	gap: 18px
}

.menu-social a,
.desktop-booking-social a {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333
}

.menu-social svg,
.desktop-booking-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block
}

.menu-social a:hover,
.desktop-booking-social a:hover {
	color: var(--red)
}

.menu-inner {
	position: relative;
	z-index: 1;
	min-height: calc(100vh - 88px);
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: start;
	padding: 0 72px 70px 0
}

.menu-nav {
	position: sticky;
	top: 88px;
	min-height: calc(100vh - 88px);
	padding: 56px 34px 40px 72px;
	border-right: 1px solid rgba(0, 0, 0, .16);
	display: grid;
	align-content: start;
	gap: 14px
}

.menu-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-family: var(--font-title);
	font-size: 16px;
	line-height: 1.15;
	color: rgba(0, 0, 0, .42);
	transform: translateY(16px);
	opacity: 0;
	transition: color .35s ease
}

.menu-nav a.is-active,
.menu-nav a:hover {
	color: #4a251d
}

.menu-nav a.is-active::after {
	content: "›";
	font-family:var(--font-title);
	font-size: 32px;
	line-height: 1;
	color: #4a251d;
	padding-left: 22px
}

.menu-overlay.is-open .menu-nav a {
	animation: menuItemUp .9s cubic-bezier(.22, .72, .22, 1) forwards
}

.menu-overlay.is-open .menu-nav a:nth-child(1) {
	animation-delay: .08s
}

.menu-overlay.is-open .menu-nav a:nth-child(2) {
	animation-delay: .15s
}

.menu-overlay.is-open .menu-nav a:nth-child(3) {
	animation-delay: .22s
}

.menu-overlay.is-open .menu-nav a:nth-child(4) {
	animation-delay: .29s
}

@keyframes menuItemUp {
	to {
		transform: translateY(0);
		opacity: 1
	}
}

.menu-content {
	padding: 52px 0 0 58px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .55s ease, visibility .55s ease, transform .55s ease
}

.menu-overlay.show-hotels .menu-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto
}

.menu-section-title {
	font-size: 12px;
	font-weight: normal;
	letter-spacing: .30em;
	text-transform: uppercase;
	color: #4a251d;
	margin: 0 0 28px
}

.menu-hotels-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px 32px;
	margin-bottom: 60px
}

.menu-hotel-card {
	display: block;
	color: #000;
	opacity: 0;
	transform: translateY(18px)
}

.menu-overlay.is-open.show-hotels .menu-hotel-card {
	animation: menuItemUp .9s cubic-bezier(.22, .72, .22, 1) forwards
}

.menu-hotel-card img {
	height: 245px;
	object-fit: cover;
	margin-bottom: 16px;
	filter: saturate(.92);
	transition: filter .35s ease, transform .35s ease
}

.menu-hotel-card:hover img {
	filter: saturate(1.05);
	transform: translateY(-3px)
}

.menu-hotel-card span {
	font-family: var(--font-title);
	font-size: 19px;
	line-height: 1.25
}

.desktop-booking-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 140;
	background: var(--cream);
	color: #000;
	transform: translateY(-105%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .62s cubic-bezier(.22, .72, .22, 1), opacity .42s ease, visibility .42s ease;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .10)
}

.desktop-booking-panel.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.desktop-booking-top {
	height: 100px;
	padding: 0 72px;
	display: grid;
	grid-template-columns: 80px 1fr 180px;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, .26)
}

.desktop-booking-top img {
	width: 150px;
	height: 52px;
	object-fit: contain;
	justify-self: start
}

.desktop-booking-close {
	width: 32px;
	height: 32px
}

.desktop-booking-close::before,
.desktop-booking-close::after {
	left: 3px;
	top: 15px;
	width: 26px;
	height: 1.5px
}

.desktop-booking-form {
	height: 112px;
	display: grid;
	grid-template-columns: 1.15fr 1.1fr 1.35fr 1.05fr 270px;
	align-items: stretch;
	border-bottom: 1px solid rgba(0, 0, 0, .26);
	padding-left: 260px;
	background: var(--cream)
}

.booking-field {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 26px;
	border-left: 1px solid rgba(0, 0, 0, .14)
}

.booking-field:first-child {
	border-left: 0
}

.booking-field span {
	display: block;
	margin-bottom: 18px;
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .36em;
	text-transform: uppercase
}

.booking-field input,
.booking-field select {
	border: 0;
	outline: none;
	background: transparent;
	color: #2a2a2a;
	padding: 0;
	font-family: var(--font-title);
	font-size: 22px;
	line-height: 1.2;
	width: 100%;
	appearance: none
}



.booking-submit {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--red);
	background: transparent;
	color: #fff;

	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .32em;
	text-transform: uppercase;

	cursor: pointer;

	z-index: 1;

	transition:
		color .45s ease,
		border-color .45s ease,
		transform .35s ease;
}

/* DEFAULT RED LAYER */

.booking-submit::before {
	content: "";

	position: absolute;
	inset: 0;

	background: var(--red);

	z-index: -1;

	transform: translateX(0);

	transition:
		transform .55s cubic-bezier(.22, .72, .22, 1);
}

/* HOVER */

.booking-submit:hover {
	color: var(--red);
	transform: translateY(-1px);
}

/* RED SLIDE OUT */

.booking-submit:hover::before {
	transform: translateX(101%);
}

/* ACTIVE */

.booking-submit:active {
	transform: translateY(0);
}



.mobile-room-btn,
.mobile-booking-panel {
	display: none
}

@media(max-width:1280px) {
	.site-header .inner{
		padding-left:48px;
		padding-right:48px;
	}

	.menu-top{
		padding-left:48px;
		padding-right:48px;
	}

	.menu-nav{
		padding-left:48px;
	}

	.desktop-booking-top{
		padding-left:48px;
		padding-right:48px;
	}

	.desktop-booking-form {
		padding-left: 120px;
		grid-template-columns: 1.05fr 1fr 1.25fr 1fr 250px
	}

	.booking-field input,
	.booking-field select {
		font-size: 20px
	}
}

@media(max-width:980px) {
	.desktop-booking-panel {
		display: none
	}
}



@media(max-width:900px){
	.header-actions{
		gap:18px;
	}

	.language-switcher select{
		min-width:108px;
		font-size:11px;
		letter-spacing:.20em;
	}
}

@media(max-width:900px) {
	.menu-top {
		height: 76px;
		padding: 0 24px
	}

	.menu-logo {
		width: 40px
	}

	.menu-inner {
		grid-template-columns: 1fr;
		padding: 0 22px 54px
	}

	.menu-nav {
		position: relative;
		top: auto;
		min-height: auto;
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, .16);
		padding: 34px 0 30px;
		text-align: center;
		justify-items: center
	}

	.menu-nav a {
		justify-content: center;
		width: auto;
		font-size: 16px
	}

	.menu-nav a.is-active::after {
		display: none
	}

	.menu-content {
		padding: 36px 0 0
	}

	.menu-section-title {
		text-align: center
	}

	.menu-hotels-grid {
		grid-template-columns: 1fr;
		gap: 28px
	}

	.menu-hotel-card {
		text-align: center
	}

	.menu-hotel-card img {
		height: 230px
	}
}

@media(max-width:560px) {

	html,
	body {
		overflow-x: hidden
	}

	.site-header {
		height: 96px;
		background: rgba(20, 14, 8, .50)
	}

	.site-header.is-scrolled {
		height: 82px;
		background: rgba(232, 227, 214, .94)
	}

	.site-header .inner {
		width: 100%;
		padding: 0 24px;
		display: grid;
		grid-template-columns: 48px 1fr auto;
		column-gap:14px
	}

	.hamburger {
		width: 38px;
		gap: 9px;
		justify-self: start
	}

	.logo {
		position: static;
		transform: none;
		justify-self: center;
		width: auto
	}

	.logo-mark {
		width: 104px;
		height: 62px
	}


	.header-actions{
		justify-self:end;
		gap:0;
		margin-left:0;
	}

	.language-switcher{
		height:34px;
	}

	.language-switcher select{
		min-width:auto;
		width:auto;
		max-width:116px;
		height:34px;
		padding-right:2px;
		color:var(--red);
		font-size:11px;
		font-weight:600;
		letter-spacing:.22em;
	}

	.language-switcher::after{
		color:var(--red);
		width:5px;
		height:5px;
	}

	.room-btn {
		display: none
	}

	.mobile-room-btn {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		height: 52px;
		align-items: center;
		justify-content: center;
		background: var(--red);
		color: #fff;
		border: 0;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .24em;
		text-transform: uppercase
	}

	.mobile-booking-panel {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 180;
		background: var(--cream);
		color: #000;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(18px);
		transition: opacity .48s ease, visibility .48s ease, transform .48s ease;
		overflow: auto
	}

	.mobile-booking-panel.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0)
	}

	.mobile-booking-top {
		height: 86px;
		display: grid;
		grid-template-columns: 56px 1fr 56px;
		align-items: center;
		padding: 0 28px;
		border-bottom: 1px solid rgba(0, 0, 0, .25)
	}

	.mobile-booking-top img {
		width: 58px;
		height: 58px;
		object-fit: contain;
		justify-self: center
	}

	.mobile-booking-close {
		width: 34px;
		height: 34px
	}

	.mobile-booking-close::before,
	.mobile-booking-close::after {
		left: 3px;
		top: 16px;
		width: 28px;
		height: 2px
	}

	.mobile-booking-form {
		padding: 44px 38px 60px
	}

	.mobile-booking-form label {
		display: block;
		margin-bottom: 34px;
		border-bottom: 1px solid rgba(0, 0, 0, .16);
		padding-bottom: 18px
	}

	.mobile-booking-form span {
		display: block;
		margin-bottom: 18px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: #553d34
	}

	.mobile-booking-form input,
	.mobile-booking-form select {
		width: 100%;
		border: 0;
		background: transparent;
		outline: none;
		color: #333;
		font-family: var(--font-title);
		font-size: 30px;
		line-height: 1.2;
		padding: 0;
		appearance: none
	}

	.mobile-booking-form button[type="submit"] {
		width: 100%;
		height: 52px;
		margin-top: 8px;
		border: 1px solid var(--red);
		background: var(--red);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase
	}
}
/* ===== Luxury booking picker: calendar + rooms/adults/children ===== */
.booking-enhanced .booking-field,
.booking-enhanced .mobile-booking-label{
	position: relative;
}

.booking-picker-trigger{
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: left;
	color: #2a2a2a;
	cursor: pointer;
}

.booking-picker-trigger strong{
	display: block;
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.booking-picker-trigger small{
	display: block;
	margin-top: 7px;
	font-family:var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(74,37,29,.62);
}

.booking-popover{
	position: absolute;
	top: calc(100% + 18px);
	left: 22px;
	z-index: 220;
	width: 382px;
	padding: 24px;
	background: #fbf4ea;
	border: 1px solid rgba(139,3,4,.18);
	box-shadow: 0 24px 70px rgba(48, 25, 18, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
}

.booking-popover.is-open{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.booking-calendar-popover{
	width: 410px;
}

.booking-calendar-head{
	display: grid;
	grid-template-columns: 38px 1fr 38px;
	align-items: center;
	gap: 12px;
	padding-bottom: 17px;
	border-bottom: 1px solid rgba(74,37,29,.13);
}

.booking-calendar-head strong{
	display: block;
	font-family: var(--font-title);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.1;
	color: #3b211a;
	text-align: center;
}

.booking-calendar-head small{
	display: block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: rgba(74,37,29,.56);
	text-align: center;
}

.booking-cal-nav,
.booking-counter button{
	width: 38px;
	height: 38px;
	border: 1px solid rgba(139,3,4,.24);
	background: transparent;
	color: var(--red);
	font-family: var(--font-title);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.booking-cal-nav:hover,
.booking-counter button:hover{
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.booking-weekdays,
.booking-calendar-grid{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
}

.booking-weekdays{
	margin: 18px 0 10px;
}

.booking-weekdays span{
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(74,37,29,.52);
	text-align: center;
}

.booking-day{
	height: 38px;
	border: 1px solid transparent;
	background: rgba(255,255,255,.38);
	color: #3b211a;
	font-family:var(--font-body);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.booking-day:hover{
	border-color: rgba(139,3,4,.34);
	background: #fff;
}

.booking-day.is-muted{
	background: transparent;
	color: rgba(74,37,29,.28);
	pointer-events: none;
}

.booking-day.is-disabled{
	color: rgba(74,37,29,.22);
	text-decoration: line-through;
	pointer-events: none;
}

.booking-day.is-start,
.booking-day.is-end{
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.booking-day.is-range{
	background: rgba(139,3,4,.10);
	border-color: rgba(139,3,4,.03);
	color: #3b211a;
}

.booking-calendar-actions{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	padding-top: 17px;
	border-top: 1px solid rgba(74,37,29,.13);
}

.booking-calendar-actions button,
.booking-popover-done{
	border: 0;
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--red);
	cursor: pointer;
}

.booking-calendar-actions button:last-child,
.booking-popover-done{
	min-width: 112px;
	height: 38px;
	padding: 0 18px;
	background: #0b0b0b;
	color: #fff;
}

.booking-guest-popover{
	width: 360px;
}

.booking-counter-row{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 17px 0;
	border-bottom: 1px solid rgba(74,37,29,.12);
}

.booking-counter-row:first-child{
	padding-top: 0;
}

.booking-counter-row strong{
	display: block;
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 400;
	color: #3b211a;
}

.booking-counter-row small{
	display: block;
	margin-top: 5px;
	font-size: 11px;
	letter-spacing: .06em;
	color: rgba(74,37,29,.58);
}

.booking-counter{
	display: inline-grid;
	grid-template-columns: 38px 38px 38px;
	align-items: center;
	gap: 8px;
}

.booking-counter b{
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	color: #3b211a;
}

.booking-popover-done{
	width: 100%;
	margin-top: 20px;
}

@media(max-width:1280px){
	.booking-picker-trigger strong{
		font-size: 20px;
	}
}

@media(max-width:980px){
	.booking-popover{
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: 18px;
		padding: 22px;
		box-shadow: 0 18px 48px rgba(48,25,18,.13);
	}
}

@media(max-width:560px){
	.mobile-booking-form .mobile-booking-label,
	.mobile-booking-form .booking-date-field,
	.mobile-booking-form .booking-guest-field{
		display: block;
		margin-bottom: 34px;
		border-bottom: 1px solid rgba(0,0,0,.16);
		padding-bottom: 18px;
	}

	.mobile-booking-form .booking-date-field > span,
	.mobile-booking-form .booking-guest-field > span,
	.mobile-booking-form .mobile-booking-label > span{
		display: block;
		margin-bottom: 18px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: #553d34;
	}

	.mobile-booking-form .booking-picker-trigger strong{
		font-size: 29px;
		white-space: normal;
	}

	.mobile-booking-form .booking-picker-trigger small{
		font-size: 10px;
		letter-spacing: .13em;
	}

	.mobile-booking-form .booking-popover{
		margin-top: 22px;
		padding: 20px 18px;
	}

	.mobile-booking-form .booking-calendar-head{
		grid-template-columns: 34px 1fr 34px;
	}

	.mobile-booking-form .booking-calendar-head strong{
		font-size: 20px;
	}

	.mobile-booking-form .booking-weekdays,
	.mobile-booking-form .booking-calendar-grid{
		gap: 5px;
	}

	.mobile-booking-form .booking-day{
		height: 35px;
		font-size: 12px;
	}

	.mobile-booking-form .booking-counter-row strong{
		font-size: 19px;
	}

	.mobile-booking-form .booking-counter{
		grid-template-columns: 34px 34px 34px;
	}

	.mobile-booking-form .booking-counter button{
		width: 34px;
		height: 34px;
	}
}

/* ===== Booking collection select + mobile picker fix ===== */
.booking-custom-select{position:relative;}
.booking-collection-trigger{text-align:left;}
.booking-collection-popover{
  width: 330px;
  left: 18px;
  padding: 10px;
  background: rgba(251,244,234,.98);
  border: 1px solid rgba(139,3,4,.18);
  box-shadow: 0 28px 80px rgba(35,18,12,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.booking-collection-popover button{
  width:100%;
  min-height:44px;
  border:0;
  border-bottom:1px solid rgba(74,37,29,.08);
  background:transparent;
  color:#34221b;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  font-family:var(--font-title);
  font-size:18px;
  font-weight:400;
  line-height:1.15;
  text-align:left;
  transition:background .25s ease,color .25s ease,padding .25s ease;
}
.booking-collection-popover button:last-child{border-bottom:0;}
.booking-collection-popover button::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 0 1px rgba(139,3,4,.18);
  transition:background .25s ease,box-shadow .25s ease;
}
.booking-collection-popover button:hover{
  background:rgba(139,3,4,.07);
  color:var(--red);
  padding-left:18px;
}
.booking-collection-popover button.is-selected{
  color:var(--red);
  background:rgba(139,3,4,.09);
}
.booking-collection-popover button.is-selected::after{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(139,3,4,.10);
}

@media(max-width:980px){
  .booking-enhanced .booking-popover{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    max-height:0;
    margin-top:0;
    padding:0;
    border-width:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    box-shadow:none;
    transition:max-height .45s cubic-bezier(.22,.72,.22,1), opacity .25s ease, margin .25s ease, padding .25s ease;
  }
  .booking-enhanced .booking-popover.is-open{
    max-height:680px;
    margin-top:20px;
    padding:20px 18px;
    border-width:1px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:0 18px 48px rgba(48,25,18,.13);
  }
}

@media(max-width:560px){
  .mobile-booking-panel{padding-top:env(safe-area-inset-top);}
  .mobile-booking-form{
    padding:30px 0 calc(88px + env(safe-area-inset-bottom));
  }
  .mobile-booking-form .mobile-booking-label,
  .mobile-booking-form .booking-date-field,
  .mobile-booking-form .booking-guest-field{
    width:100%;
    margin:0;
    padding:24px 24px 28px;
    border-left:0;
    border-right:0;
    border-bottom:1px solid rgba(74,37,29,.14);
    box-sizing:border-box;
  }
  .mobile-booking-form .booking-picker-trigger strong{
    font-size:27px;
    line-height:1.18;
  }
  .mobile-booking-form .booking-collection-popover button{
    min-height:48px;
    font-size:21px;
    padding:0 12px;
  }
  .mobile-booking-form .booking-popover.is-open{
    margin-top:18px;
    padding:18px 14px;
  }
  .mobile-booking-form .booking-calendar-grid,
  .mobile-booking-form .booking-weekdays{gap:4px;}
  .mobile-booking-form .booking-day{height:34px;}
  .mobile-booking-form .booking-submit,
  .mobile-booking-form button[type="submit"]{
    width:calc(100% - 48px);
    margin:26px 24px 0;
  }
}
/* =========================
   FINAL FIX: MENU MOBILE STAY / ROOMS
   + SCROLL LOCK
========================= */

html.menu-open,
body.menu-open{
	overflow:hidden;
	height:100%;
}

.menu-overlay{
	height:100dvh;
	max-height:100dvh;
	overflow:hidden;
}

.menu-overlay.is-open{
	overflow:hidden;
}

.menu-inner{
	height:calc(100dvh - 82px);
	min-height:calc(100dvh - 82px);
	overflow:hidden;
}

.menu-nav{
	height:calc(100dvh - 82px);
	min-height:calc(100dvh - 82px);
	overflow:hidden;
}

.menu-content{
	max-height:calc(100dvh - 82px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

@media(max-width:900px){
	.menu-overlay{
		height:100dvh;
		max-height:100dvh;
	}

	.menu-inner{
		height:calc(100dvh - 76px);
		min-height:calc(100dvh - 76px);
		overflow:hidden;
	}

	.menu-nav{
		height:auto;
		min-height:auto;
		overflow:visible;
	}

	.menu-content{
		display:block;
		max-height:calc(100dvh - 260px);
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
	}

	.menu-overlay.show-hotels .menu-content{
		display:block;
		opacity:1;
		visibility:visible;
		transform:translateY(0);
		pointer-events:auto;
	}
}

/* =========================
   MENU ROOMS META - SAFE ADDITION
   Keeps existing menu layout, only styles room details inside open menu.
========================= */
.menu-room-card small.menu-room-meta{
	display:block;
	margin-top:8px;
	font-family:var(--font-body);
	font-size:11px;
	line-height:1.5;
	font-weight:500;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:rgba(74,37,29,.62);
}

@media(max-width:900px){
	.menu-room-card small.menu-room-meta{
		font-size:10px;
		letter-spacing:.10em;
	}
}


/* ===== FINAL INTERACTION FIX: menu + booking click layers ===== */
.site-header,
.site-header .inner,
.hamburger,
.header-actions,
.room-btn,
.mobile-room-btn{
  pointer-events:auto;
}

.menu-overlay.is-open{
  z-index:1200;
}

.desktop-booking-panel.is-open,
.mobile-booking-panel.is-open{
  z-index:1400;
}

.booking-popover.is-open{
  z-index:1500;
}

.booking-picker-trigger,
.booking-cal-nav,
.booking-day,
.booking-calendar-actions button,
.booking-counter button,
.booking-popover-done,
.booking-collection-popover button,
.menu-close,
.desktop-booking-close,
.mobile-booking-close,
.menu-nav a,
.menu-hotel-card{
  pointer-events:auto;
}

.menu-room-card small.menu-room-meta{
  display:block;
  margin-top:8px;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(74,37,29,.62);
}

@media(max-width:560px){
  .mobile-booking-panel.is-open{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* ===== FINAL FORCE FIX: clickable menu + booking layers ===== */
.site-header{z-index:9000;}
.menu-overlay{z-index:9500;}
.menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.desktop-booking-panel{z-index:9800;}
.desktop-booking-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.mobile-booking-panel{z-index:9900;}
.mobile-booking-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.booking-picker-trigger,
.booking-cal-nav,
.booking-day,
.booking-counter button,
.booking-popover-done,
[data-collection-option],
.hamburger,
.menu-close,
.room-btn,
.mobile-room-btn,
.booking-submit{touch-action:manipulation;}
.menu-room-card small.menu-room-meta{
  display:block;
  margin-top:8px;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(74,37,29,.62);
}
html.booking-open,
body.booking-open{overflow:hidden;}
@media(max-width:560px){
  .mobile-booking-panel.is-open{overflow-y:auto;-webkit-overflow-scrolling:touch;}
}


/* =========================================================
   FINAL HEADER INTERACTION FIX
   Menu, booking panel, calendar, close button visibility
========================================================= */
.site-header{z-index:9000;}
.hamburger,
.room-btn,
.mobile-room-btn,
.booking-picker-trigger,
.booking-day,
.booking-cal-nav,
.booking-counter button,
.booking-submit,
.menu-close,
.desktop-booking-close,
.mobile-booking-close{pointer-events:auto!important;}

.menu-overlay{z-index:9500!important;}
.menu-overlay.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.menu-overlay.is-open .menu-inner,
.menu-overlay.is-open .menu-nav,
.menu-overlay.is-open .menu-content{pointer-events:auto!important;}

.desktop-booking-panel{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:9800!important;
}
.desktop-booking-panel.is-open{
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.desktop-booking-panel.is-open .desktop-booking-top{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.desktop-booking-close{
  display:block!important;
  z-index:3!important;
}
.desktop-booking-form{
  position:relative!important;
  z-index:2!important;
}

.mobile-booking-panel{z-index:9900!important;}
.mobile-booking-panel.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}

.booking-popover{z-index:10020!important;}
.booking-popover.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.booking-day.is-start,
.booking-day.is-end{
  background:var(--red)!important;
  border-color:var(--red)!important;
  color:#fff!important;
}
.booking-day.is-range{
  background:rgba(139,3,4,.10)!important;
  color:#3b211a!important;
}
html.menu-open,
body.menu-open,
html.booking-open,
body.booking-open{overflow:hidden;}

@media(max-width:980px){
  .booking-enhanced .booking-popover.is-open{
    max-height:760px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* =========================================================
   FINAL REQUEST FIX
   1) Stay rooms list is hidden until Stay is clicked
   2) Smooth open/close for room list
   3) Calendar supports two-click arrival/departure selection
========================================================= */
.menu-overlay:not(.show-hotels) .menu-content{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(18px)!important;
}

.menu-overlay.show-hotels .menu-content{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
  transition:
    opacity .55s ease,
    visibility .55s ease,
    transform .55s cubic-bezier(.22,.72,.22,1)!important;
}

.menu-overlay:not(.show-hotels) .menu-hotel-card{
  opacity:0!important;
  transform:translateY(18px)!important;
  animation:none!important;
}

.menu-overlay.show-hotels .menu-hotel-card{
  opacity:0;
  transform:translateY(18px);
  animation:menuItemUp .75s cubic-bezier(.22,.72,.22,1) forwards!important;
}

.menu-overlay.show-hotels .menu-hotel-card:nth-child(1){animation-delay:.06s!important;}
.menu-overlay.show-hotels .menu-hotel-card:nth-child(2){animation-delay:.13s!important;}
.menu-overlay.show-hotels .menu-hotel-card:nth-child(3){animation-delay:.20s!important;}
.menu-overlay.show-hotels .menu-hotel-card:nth-child(4){animation-delay:.27s!important;}

#hotelMenuTrigger::after{
  transition:transform .35s ease, opacity .35s ease!important;
}

.menu-overlay.show-hotels #hotelMenuTrigger::after{
  transform:translateX(9px)!important;
}

.booking-calendar-popover[data-selecting="checkout"] .booking-calendar-head small::after{
  content:" · choose departure";
}

.booking-day.is-start:not(.is-end){
  box-shadow:inset 0 0 0 1px rgba(139,3,4,.18)!important;
}

.booking-day.is-range{
  background:rgba(139,3,4,.11)!important;
  border-color:rgba(139,3,4,.02)!important;
}

@media(max-width:900px){
  .menu-overlay:not(.show-hotels) .menu-content{
    max-height:0!important;
    overflow:hidden!important;
    padding-top:0!important;
  }

  .menu-overlay.show-hotels .menu-content{
    max-height:calc(100dvh - 260px)!important;
    overflow-y:auto!important;
    padding-top:36px!important;
  }
}


/* =========================
   FINAL FIX: STAY ARROW MOTION
   - Click Stay: arrow moves slightly forward
   - Click again: arrow returns
   - No downward rotation
========================= */
#hotelMenuTrigger::after{
  transform:translateX(0)!important;
  transition:
    transform .38s cubic-bezier(.22,.72,.22,1),
    opacity .35s ease!important;
}

.menu-overlay.show-hotels #hotelMenuTrigger::after{
  transform:translateX(9px)!important;
}

@media(max-width:900px){
  #hotelMenuTrigger::after{
    display:inline-block!important;
    transform:translateX(0)!important;
  }

  .menu-overlay.show-hotels #hotelMenuTrigger::after{
    transform:translateX(7px)!important;
  }
}

/* =========================================================
   FINAL EXACT FIX: STAY + / - ICON ONLY
   - Replace arrow after Stay with plain +
   - When room list is open, show plain −
   - No circle, no rotation, no movement
   - Safe override only for #hotelMenuTrigger
========================================================= */
.menu-nav a#hotelMenuTrigger::after,
.menu-nav a#hotelMenuTrigger.is-active::after{
  content:"+" !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  min-width:14px !important;
  margin-left:18px !important;
  padding-left:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#4a251d !important;
  font-family:var(--font-body) !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:300 !important;
  transform:none !important;
  opacity:1 !important;
  transition:opacity .28s ease, color .28s ease !important;
}

.menu-overlay.show-hotels .menu-nav a#hotelMenuTrigger::after,
.menu-overlay.show-hotels .menu-nav a#hotelMenuTrigger.is-active::after{
  content:"−" !important;
  transform:none !important;
}

.menu-nav a#hotelMenuTrigger:hover::after{
  color:var(--red) !important;
}

@media(max-width:900px){
  .menu-nav a#hotelMenuTrigger::after,
  .menu-nav a#hotelMenuTrigger.is-active::after{
    display:inline-flex !important;
    margin-left:12px !important;
    font-size:22px !important;
    transform:none !important;
  }

  .menu-overlay.show-hotels .menu-nav a#hotelMenuTrigger::after,
  .menu-overlay.show-hotels .menu-nav a#hotelMenuTrigger.is-active::after{
    content:"−" !important;
    transform:none !important;
  }
}


/* =========================================================
   SAFE FIX: HEADER LANGUAGE TABS
   - EN | VI | KO horizontal style
   - Clicked language uses .is-active red state
   - Scoped only to .site-header .language-switcher
========================================================= */
.site-header .language-switcher{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:42px;
	padding:0;
	white-space:nowrap;
}

.site-header .language-switcher::after{
	display:none!important;
	content:none!important;
}

.site-header .language-option{
	border:0;
	background:transparent;
	outline:none;
	padding:0;
	margin:0;
	cursor:pointer;
	font-family:var(--font-body);
	font-size:14px;
	line-height:1;
	font-weight:500;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:rgba(45,29,24,.78);
	transition:color .28s ease, opacity .28s ease;
}

.site-header .language-option:hover,
.site-header .language-option.is-active{
	color:var(--red, #8b0304);
}

.site-header .language-separator{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-body);
	font-size:17px;
	line-height:1;
	font-weight:400;
	color:rgba(45,29,24,.58);
	transform:translateY(-1px);
	user-select:none;
}

.site-header.is-scrolled .language-option{
	color:rgba(45,29,24,.78);
}

.site-header.is-scrolled .language-option:hover,
.site-header.is-scrolled .language-option.is-active{
	color:var(--red, #8b0304);
}

@media(max-width:900px){
	.site-header .language-switcher{
		gap:7px;
		height:34px;
	}

	.site-header .language-option,
	.site-header .language-separator{
		font-size:13px;
		letter-spacing:.06em;
	}
}

@media(max-width:560px){
	.site-header .language-switcher{
		gap:6px;
		height:34px;
	}

	.site-header .language-option,
	.site-header .language-separator{
		font-size:11px;
		letter-spacing:.05em;
	}
}


/* =========================================================
   SAFE FIX: LITTLE HOI AN HEADER TOP / SCROLL LOGO
   - Top header: black transparent gradient, no solid block
   - Remove header border bottom
   - Top logo: full red logo
   - Scroll header: lower height, red symbol only
   - Scope: header logo/background only
========================================================= */
.site-header{
	height:100px;
	border-bottom:0!important;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.58) 0%,
			rgba(0,0,0,.34) 42%,
			rgba(0,0,0,.12) 76%,
			rgba(0,0,0,0) 100%
		)!important;
	box-shadow:none!important;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
	transition:
		background .45s ease,
		height .45s cubic-bezier(.22,.72,.22,1),
		box-shadow .45s ease;
}

.site-header.is-scrolled{
	height:74px!important;
	border-bottom:0!important;
	background:rgba(244,241,233,.96)!important;
	box-shadow:0 14px 36px rgba(40,24,18,.08)!important;
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
}

.site-header .logo{
	top:10px;
	width:118px;
	transition:
		top .45s cubic-bezier(.22,.72,.22,1),
		width .45s cubic-bezier(.22,.72,.22,1),
		opacity .35s ease;
}

.site-header .logo-mark{
	width:118px;
	height:80px;
	object-fit:contain;
	display:block;
	filter:brightness(0) saturate(100%) invert(10%) sepia(95%) saturate(3778%) hue-rotate(352deg) brightness(88%) contrast(104%);
	transition:
		width .45s cubic-bezier(.22,.72,.22,1),
		height .45s cubic-bezier(.22,.72,.22,1),
		filter .35s ease,
		opacity .35s ease;
}

.site-header.is-scrolled .logo{
	top:10px!important;
	width:54px;
}

.site-header.is-scrolled .logo-mark{
	width:54px!important;
	height:54px!important;
	object-fit:contain;
	filter:brightness(0) saturate(100%) invert(10%) sepia(95%) saturate(3778%) hue-rotate(352deg) brightness(88%) contrast(104%);
}

@media(max-width:560px){
	.site-header{
		height:96px;
		border-bottom:0!important;
		background:
			linear-gradient(
				180deg,
				rgba(0,0,0,.60) 0%,
				rgba(0,0,0,.35) 48%,
				rgba(0,0,0,0) 100%
			)!important;
	}

	.site-header.is-scrolled{
		height:72px!important;
		background:rgba(244,241,233,.96)!important;
	}

	.site-header .logo{
		width:auto;
	}

	.site-header .logo-mark{
		width:104px;
		height:62px;
	}

	.site-header.is-scrolled .logo-mark{
		width:48px!important;
		height:48px!important;
	}
}

/* =========================================================
   FINAL STANDARD HEADER UPDATE - Little Hoian
   Standardized across Little Oasis / Riverside / Allegro / Residence / Little Hoi An.
   Scope: header background, scroll shadow, logo sizing/source only.
   - Top header: black gradient falling downward, no blur, no border.
   - Scrolled header: same height/background/shadow across all hotels.
   - Scrolled logo: uses img/symbol.svg through the safe header JS.
========================================================= */
:root{
  --lhag-header-top-height:100px;
  --lhag-header-scroll-height:74px;
  --lhag-header-scroll-height-mobile:72px;
  --lhag-header-gradient:linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.40) 46%, rgba(0,0,0,.18) 72%, rgba(0,0,0,0) 100%);
  --lhag-header-scroll-bg:rgba(244,241,233,.96);
  --lhag-header-scroll-shadow:0 14px 36px rgba(40,24,18,.08);
  --lhag-logo-top-filter:brightness(0) saturate(100%) invert(10%) sepia(95%) saturate(3778%) hue-rotate(352deg) brightness(88%) contrast(104%);
  --lhag-logo-scroll-filter:brightness(0) saturate(100%) invert(10%) sepia(95%) saturate(3778%) hue-rotate(352deg) brightness(88%) contrast(104%);
}

.site-header{
  height:var(--lhag-header-top-height)!important;
  border-bottom:0!important;
  background:var(--lhag-header-gradient)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:
    background .45s ease,
    height .45s cubic-bezier(.22,.72,.22,1),
    box-shadow .45s ease!important;
}

.site-header:not(.is-scrolled){
  background:var(--lhag-header-gradient)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.site-header.is-scrolled{
  height:var(--lhag-header-scroll-height)!important;
  border-bottom:0!important;
  background:var(--lhag-header-scroll-bg)!important;
  box-shadow:var(--lhag-header-scroll-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.site-header .inner{
  height:100%!important;
}

.site-header:not(.is-scrolled) .logo{
  top:10px!important;
  width:118px!important;
}

.site-header:not(.is-scrolled) .logo-mark{
  width:118px!important;
  height:80px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:var(--lhag-logo-top-filter)!important;
}

.site-header.is-scrolled .logo{
  width:54px!important;
  height:54px!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}

.site-header.is-scrolled .logo-mark{
  display:block!important;
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:var(--lhag-logo-scroll-filter)!important;
}

@media(max-width:560px){
  .site-header{
    height:96px!important;
    background:var(--lhag-header-gradient)!important;
    border-bottom:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .site-header.is-scrolled{
    height:var(--lhag-header-scroll-height-mobile)!important;
    background:var(--lhag-header-scroll-bg)!important;
    box-shadow:var(--lhag-header-scroll-shadow)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .site-header:not(.is-scrolled) .logo{
    position:static!important;
    width:auto!important;
    top:auto!important;
    transform:none!important;
    justify-self:center!important;
  }

  .site-header:not(.is-scrolled) .logo-mark{
    width:104px!important;
    height:62px!important;
  }

  .site-header.is-scrolled .logo{
    position:static!important;
    width:48px!important;
    height:48px!important;
    top:auto!important;
    transform:none!important;
    justify-self:center!important;
  }

  .site-header.is-scrolled .logo-mark{
    width:48px!important;
    height:48px!important;
  }
}


/* =========================================================
   FINAL FIX - Little Hoi An
   Solid 100% scrolled header background + unified shadow
   Scope: header background / scroll state only
========================================================= */
:root{
  --lhag-header-scroll-bg:#f4f1e9!important;
  --lhag-header-scroll-shadow:0 14px 36px rgba(40,24,18,.10)!important;
}

.site-header{
  border-bottom:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.site-header:not(.is-scrolled){
  background:var(--lhag-header-gradient)!important;
  box-shadow:none!important;
}

.site-header.is-scrolled{
  height:var(--lhag-header-scroll-height)!important;
  background:#f4f1e9!important;
  background-color:#f4f1e9!important;
  background-image:none!important;
  border-bottom:0!important;
  box-shadow:var(--lhag-header-scroll-shadow)!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(max-width:560px){
  .site-header.is-scrolled{
    height:var(--lhag-header-scroll-height-mobile)!important;
    background:#f4f1e9!important;
    background-color:#f4f1e9!important;
    background-image:none!important;
    border-bottom:0!important;
    box-shadow:var(--lhag-header-scroll-shadow)!important;
    opacity:1!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}