/* Layout helpers for the v14 page templates (new design) */
.thai-decoration {
	margin-top: 3rem;
	line-height: 0;
}
.thai-decoration img {
	display: block;
	width: 100%;
	max-width: 1302px;
	height: auto;
	margin: 0 auto;
}
@media (min-width: 1400px) {
	.page-layout-default .container,
	.page-layout-product .container {
		max-width: 1320px;
	}
}

/* ---------------------------------------------------------------
 * Bootstrap 6 navbar (lg:navbar-expand + drawer + menu)
 * ------------------------------------------------------------- */
.header .navbar > .container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.header .navbar-toggler {
	color: #fff;
}
.header .navbar .navbar-nav {
	justify-content: center;
	width: 100%;
}
.header .navbar .nav-link {
	color: #fff;
	text-transform: uppercase;
	background: none;
	border: 0;
}
/* below lg (Bootstrap 6: 1024px) the menu sits in a light drawer */
@media (max-width: 1023.98px) {
	.header .drawer .nav-link {
		color: #555;
	}
	.header .drawer .nav-link.active,
	.header .drawer .nav-link:hover {
		color: #ea0029;
	}
}
/* desktop: active item underline */
@media (min-width: 1024px) {
	.header .navbar .nav-link.active {
		font-weight: 500;
	}
}
.header .menu-item {
	text-transform: none;
}
.lang-switcher a {
	color: #555;
}
body.header-scrolled .header {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* ---------------------------------------------------------------
 * Reveal on scroll (js/main.js) – Bootstrap .fade / .show
 * ------------------------------------------------------------- */
[data-reveal].fade {
	transition-duration: .6s;
}

/* ---------------------------------------------------------------
 * Lightbox (js/main.js) – Bootstrap 6 Dialog + Carousel
 * ------------------------------------------------------------- */
.lightbox-dialog .carousel-item img {
	max-height: 75vh;
}
.lightbox-dialog .lightbox-caption {
	font-size: .9rem;
}