/*
 * Homepage Latest Products — title + owl carousel
 * Dark industrial gold band — contrasts with About Us / Feature Products
 */

/* ══════════════════════════════════════
   SECTION TITLE (Latest Products L)
   ══════════════════════════════════════ */

section.home-latest-title {
	background:
		radial-gradient(ellipse 70% 80% at 50% 120%, rgba(252, 201, 0, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, #0c0c0c 0%, #141414 100%);
	position: relative;
	overflow: hidden;
}

section.home-latest-title::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(252, 201, 0, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(252, 201, 0, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
	pointer-events: none;
}

section.home-latest-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--nav-gold, #FCC900) 35%,
		var(--nav-gold, #FCC900) 65%,
		transparent 100%
	);
	opacity: 0.55;
}

section.home-latest-title .l-section-h {
	padding: 3.2rem 0 1.6rem !important;
	position: relative;
	z-index: 1;
}

section.home-latest-title .vg-front-page-title {
	margin: 0;
	padding: 0 24px;
	position: relative;
	text-align: center;
	animation: latestTitleIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

section.home-latest-title .vg-front-page-title::before {
	content: "— NEW ARRIVALS —";
	display: block;
	font-family: "Syne", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.38em;
	color: var(--nav-gold, #FCC900);
	margin-bottom: 14px;
	opacity: 0.92;
}

section.home-latest-title .vg-front-page-title h2 {
	display: inline-block;
	font-family: "Syne", sans-serif !important;
	font-size: clamp(22px, 2.8vw, 30px) !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	line-height: 1.2 !important;
	text-transform: uppercase;
	text-align: center !important;
	color: #fff !important;
	position: relative;
	z-index: 2;
	padding: 0 8px;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, rgba(252, 201, 0, 0.85) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

section.home-latest-title .vg-front-page-title h2::before,
section.home-latest-title .vg-front-page-title h2::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 1px;
	width: clamp(40px, 6vw, 72px);
	margin: 0 clamp(14px, 2vw, 28px);
	background: linear-gradient(90deg, transparent, rgba(252, 201, 0, 0.75));
	position: relative;
	top: -2px;
}

section.home-latest-title .vg-front-page-title h2::after {
	background: linear-gradient(90deg, rgba(252, 201, 0, 0.75), transparent);
}

section.home-latest-title .vg-front-page-title h2 .word-shadow {
	border-bottom: none !important;
	color: rgba(252, 201, 0, 0.07) !important;
	-webkit-text-fill-color: rgba(252, 201, 0, 0.07) !important;
	font-family: "Syne", sans-serif;
	font-size: clamp(72px, 11vw, 120px) !important;
	font-weight: 800 !important;
	line-height: 0.85 !important;
	padding: 0 clamp(30px, 5vw, 60px);
	pointer-events: none;
	z-index: 0;
	letter-spacing: -0.02em;
	user-select: none;
}

section.home-latest-title .vg-front-page-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	background: var(--nav-gold, #FCC900);
	margin: 18px auto 0;
	border-radius: 2px;
	box-shadow: 0 2px 16px rgba(252, 201, 0, 0.5);
}

@keyframes latestTitleIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ══════════════════════════════════════
   CAROUSEL SECTION
   ══════════════════════════════════════ */

section.home-latest-carousel {
	background:
		radial-gradient(ellipse 50% 60% at 10% 50%, rgba(252, 201, 0, 0.05) 0%, transparent 65%),
		radial-gradient(ellipse 40% 50% at 90% 40%, rgba(252, 201, 0, 0.04) 0%, transparent 60%),
		linear-gradient(180deg, #141414 0%, #101010 100%);
	position: relative;
	overflow: visible;
}

section.home-latest-carousel .l-section-h {
	padding: 0.5rem 0 3.5rem !important;
	position: relative;
	z-index: 1;
}

section.home-latest-carousel .home-latest-carousel-wrap {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 56px 32px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(252, 201, 0, 0.14);
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: visible;
}

section.home-latest-carousel .home-latest-carousel-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, transparent, var(--nav-gold, #FCC900), transparent);
	opacity: 0.65;
	pointer-events: none;
	z-index: 0;
}

section.home-latest-carousel .home-latest-slider {
	position: relative;
	z-index: 1;
	margin: 0 54px;
	width: auto;
}

/* ── Carousel items ── */

section.home-latest-carousel .item {
	padding: 6px 4px 4px;
	animation: latestItemIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

section.home-latest-carousel .owl-item:nth-child(1) .item  { animation-delay: 0.04s; }
section.home-latest-carousel .owl-item:nth-child(2) .item  { animation-delay: 0.08s; }
section.home-latest-carousel .owl-item:nth-child(3) .item  { animation-delay: 0.12s; }
section.home-latest-carousel .owl-item:nth-child(4) .item  { animation-delay: 0.16s; }
section.home-latest-carousel .owl-item:nth-child(5) .item  { animation-delay: 0.20s; }

@keyframes latestItemIn {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

section.home-latest-carousel .sunlons-ovr {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.08),
		0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s ease;
	position: relative;
	aspect-ratio: 1 / 1;
}

section.home-latest-carousel .sunlons-ovr::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--nav-gold, #FCC900), rgba(252, 201, 0, 0.1));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 3;
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr {
	transform: translateY(-6px);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.1),
		0 18px 40px rgba(0, 0, 0, 0.28);
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr::before {
	transform: scaleX(1);
}

section.home-latest-carousel .sunlons-ovr > a {
	display: block;
	height: 100%;
}

section.home-latest-carousel .sunlons-ovr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr img {
	transform: scale(1.07);
}

/* Gold overlay on hover */
section.home-latest-carousel .sunlons-ovr .ovrlyT,
section.home-latest-carousel .sunlons-ovr .ovrlyB {
	background: rgba(15, 15, 15, 0.5) !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0;
	transition: opacity 0.35s ease, background 0.35s ease;
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr .ovrlyT,
.no-touch section.home-latest-carousel .item:hover .sunlons-ovr .ovrlyB {
	opacity: 1;
	background: rgba(252, 201, 0, 0.72) !important;
}

section.home-latest-carousel .sunlons-ovr .buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

section.home-latest-carousel .sunlons-ovr .buttons::after {
	content: "VIEW";
	font-family: "Syne", sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: #111;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr .buttons::after {
	opacity: 1;
	transform: translateY(0);
}

section.home-latest-carousel .sunlons-ovr .buttons .fa {
	background: #fff !important;
	color: #111 !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important;
	font-size: 13px !important;
	line-height: 42px !important;
	width: 42px !important;
	height: 42px !important;
	opacity: 0 !important;
	transform: scale(0.55) !important;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.35s ease,
	            color 0.25s ease !important;
}

.no-touch section.home-latest-carousel .item:hover .sunlons-ovr .buttons .fa {
	opacity: 1 !important;
	transform: scale(1) !important;
	color: var(--nav-gold, #FCC900) !important;
}

/* Product name */
section.home-latest-carousel .item > a h3,
section.home-latest-carousel .item h3 {
	text-align: center !important;
	font-family: "Syne", sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	line-height: 1.45 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	margin: 12px 6px 0 !important;
	padding: 0 4px 4px;
	transition: color 0.25s ease;
}

section.home-latest-carousel .item > a {
	display: block;
	text-decoration: none;
}

section.home-latest-carousel .item > a::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: var(--nav-gold, #FCC900);
	margin: 8px auto 0;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.no-touch section.home-latest-carousel .item:hover > a h3 {
	color: #fff !important;
}

.no-touch section.home-latest-carousel .item:hover > a::after {
	width: 32px;
}

/* Hide default Owl nav (clicks fall through to products) */
section.home-latest-carousel .home-latest-slider .owl-nav {
	display: none !important;
}

/* External prev/next — above carousel, always clickable */
section.home-latest-carousel .home-latest-nav {
	position: absolute;
	top: 50%;
	z-index: 50;
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(252, 201, 0, 0.55);
	border-radius: 50%;
	background: rgba(18, 18, 18, 0.92);
	color: var(--nav-gold, #FCC900);
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform: translateY(-50%);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	transition:
		background 0.28s ease,
		border-color 0.28s ease,
		transform 0.28s ease,
		box-shadow 0.28s ease;
}

section.home-latest-carousel .home-latest-nav--prev {
	left: 8px;
}

section.home-latest-carousel .home-latest-nav--next {
	right: 8px;
}

section.home-latest-carousel .home-latest-nav:hover,
section.home-latest-carousel .home-latest-nav:active,
section.home-latest-carousel .home-latest-nav:focus {
	background: var(--nav-gold, #FCC900);
	border-color: var(--nav-gold, #FCC900);
	color: #111;
	outline: none;
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 8px 24px rgba(252, 201, 0, 0.45);
}

section.home-latest-carousel .home-latest-slider .owl-stage-outer {
	position: relative;
	z-index: 1;
}

section.home-latest-carousel .home-latest-slider .owl-stage-outer {
	overflow: hidden;
	padding: 4px 0 8px;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 1280px) {
	section.home-latest-carousel .home-latest-carousel-wrap {
		padding: 24px 52px 28px;
	}

	section.home-latest-carousel .home-latest-nav {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	section.home-latest-carousel .home-latest-slider {
		margin: 0 48px;
	}

	section.home-latest-carousel .home-latest-nav--prev {
		left: 4px;
	}

	section.home-latest-carousel .home-latest-nav--next {
		right: 4px;
	}
}

@media (max-width: 768px) {
	section.home-latest-title .l-section-h {
		padding: 2.2rem 0 1.2rem !important;
	}

	section.home-latest-title .vg-front-page-title::before {
		font-size: 9px;
		letter-spacing: 0.28em;
	}

	section.home-latest-title .vg-front-page-title h2 {
		font-size: 18px !important;
		letter-spacing: 0.12em;
	}

	section.home-latest-title .vg-front-page-title h2::before,
	section.home-latest-title .vg-front-page-title h2::after {
		width: 24px;
		margin: 0 10px;
	}

	section.home-latest-title .vg-front-page-title h2 .word-shadow {
		font-size: 52px !important;
	}

	section.home-latest-carousel .l-section-h {
		padding-bottom: 2.5rem !important;
	}

	section.home-latest-carousel .home-latest-carousel-wrap {
		padding: 20px 48px 24px;
		border-radius: 10px;
	}

	section.home-latest-carousel .home-latest-slider {
		margin: 0 44px;
	}

	section.home-latest-carousel .home-latest-nav {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	section.home-latest-carousel .item {
		animation: none;
	}

	section.home-latest-carousel .item > a h3,
	section.home-latest-carousel .item h3 {
		font-size: 11px !important;
	}
}

@media (max-width: 480px) {
	section.home-latest-title .vg-front-page-title h2::before,
	section.home-latest-title .vg-front-page-title h2::after {
		display: none;
	}

	section.home-latest-carousel .home-latest-carousel-wrap {
		padding: 16px 44px 20px;
	}

	section.home-latest-carousel .home-latest-slider {
		margin: 0 40px;
	}

	section.home-latest-carousel .home-latest-nav {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}