/* ==========================================================================
   Siam District — Homepage hero slideshow
   ========================================================================== */

.hero-slider {
	position: relative;
	overflow: hidden;
	height: 640px;
	background: #000000;
}

.hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	--spot-x: 62%;
	--spot-y: 42%;
	background-color: #000000;
	background-image:
		radial-gradient(ellipse 1100px 900px at var(--spot-x) var(--spot-y), var(--spot-1) 0%, var(--spot-2) 16%, var(--spot-3) 36%, var(--spot-4) 56%, var(--spot-5) 76%, #000000 92%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Colour themes — pick the one closest to the product photo's palette */

.hero-slide--red {
	--spot-1: #ff5347;
	--spot-2: #d62a20;
	--spot-3: #8f1512;
	--spot-4: #3d0a09;
	--spot-5: #140302;
}

.hero-slide--gold {
	--spot-1: #ffd35c;
	--spot-2: #f5a623;
	--spot-3: #c2530f;
	--spot-4: #4a1f0a;
	--spot-5: #180b04;
}

.hero-slide--green {
	--spot-1: #8fe86a;
	--spot-2: #4fb43a;
	--spot-3: #257022;
	--spot-4: #0e2f0d;
	--spot-5: #051005;
}

.hero-slide--silver {
	--spot-1: #ffffff;
	--spot-2: #d0d0d0;
	--spot-3: #8a8a8a;
	--spot-4: #3a3a3a;
	--spot-5: #121212;
}

/* Reversed layout — image left, content right (alternate slides for rhythm) */

.hero-slide--reverse {
	--spot-x: 38%;
}

.hero-slide__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40%;
}

.hero-slide--reverse .hero-slide__image {
	right: auto;
	left: 0;
}

.hero-slide__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	display: block;
}

.hero-slide--reverse .hero-slide__image img {
	object-position: left center;
}

.hero-slide__content {
	position: relative;
	z-index: 2;
	max-width: 560px;
	padding: 0 5% 0 6%;
	color: var(--sd-color-white);
}

.hero-slide--reverse .hero-slide__content {
	padding: 0 6% 0 5%;
	margin-left: auto;
}

.hero-slide__content::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4%;
	width: 130px;
	height: 90%;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27620%27%20viewBox%3D%270%200%20200%20620%27%3E%3Ctext%20x%3D%27100%27%20y%3D%27320%27%20text-anchor%3D%27middle%27%20fill%3D%27%23232323%27%20font-family%3D%27sans-serif%27%20font-size%3D%27150%27%20font-weight%3D%27800%27%20transform%3D%27rotate%28-90%20100%20320%29%27%3E%E0%B8%A1%E0%B8%A7%E0%B8%A2%E0%B9%84%E0%B8%97%E0%B8%A2%20%E0%B8%A1%E0%B8%A7%E0%B8%A2%E0%B9%84%E0%B8%97%E0%B8%A2%3C%2Ftext%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: -1;
	pointer-events: none;
}

.hero-slide--reverse .hero-slide__content::before {
	left: auto;
	right: 4%;
}

.hero-slide__eyebrow {
	margin: 0 0 12px;
	font-family: var(--sd-font-button);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.85);
}

.hero-slide__title {
	margin: 0 0 28px;
	font-family: var(--sd-font-heading);
	font-size: 78px;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--sd-color-white);
	text-shadow: 0 4px 0 rgba(10, 15, 36, 0.5), 0 10px 24px rgba(10, 15, 36, 0.45);
}

.hero-slide__button {
	display: inline-block;
	padding: 14px 32px;
	background: var(--sd-color-brand);
	color: var(--sd-color-button-text);
	font-family: var(--sd-font-button);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: var(--sd-radius);
	transition: background-color 0.15s ease;
}

.hero-slide__button:hover,
.hero-slide__button:focus-visible {
	background: var(--sd-color-brand-hover);
}

.hero-slider__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(0, 0, 0, 0.25);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	color: var(--sd-color-white);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-slider__arrow svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.45);
	border-color: rgba(255, 255, 255, 0.85);
}

.hero-slider__arrow--prev {
	left: 20px;
}

.hero-slider__arrow--next {
	right: 20px;
}

@media (max-width: 599.98px) {
	.hero-slider__arrow {
		width: 34px;
		height: 34px;
	}

	.hero-slider__arrow--prev {
		left: 12px;
	}

	.hero-slider__arrow--next {
		right: 12px;
	}
}

.hero-slider__dots {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.hero-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-slider__dot.is-active {
	background: var(--sd-color-brand);
	border-color: var(--sd-color-brand);
}

@media (max-width: 999.98px) {
	.hero-slider {
		height: 620px;
	}

	.hero-slide {
		flex-direction: column;
		align-items: stretch;
		background-image: none;
	}

	/* Photo as a full-bleed backdrop behind everything */
	.hero-slide__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.hero-slide__image img {
		object-fit: cover;
		object-position: center 15%;
	}

	.hero-slide--reverse .hero-slide__image img {
		object-position: center 15%;
	}

	/* Content pinned to the bottom, sitting on a gradient that fades from
	   transparent (photo shows through) to the theme colour to black —
	   same idea as the desktop spotlight, just anchored to one edge. */
	.hero-slide__content {
		position: relative;
		z-index: 2;
		margin-top: auto;
		margin-left: 0;
		max-width: 100%;
		padding: 64px 24px 48px;
		text-align: left;
		background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 15%, rgba(0, 0, 0, 0.85) 35%, var(--spot-5) 60%, #000000 92%);
	}

	.hero-slide__eyebrow {
		color: #ffffff;
		text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
	}

	.hero-slide__title {
		text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.9);
	}

	.hero-slide--reverse .hero-slide__content {
		padding: 64px 24px 48px;
	}

	.hero-slide__content::before,
	.hero-slide--reverse .hero-slide__content::before {
		display: none;
	}

	.hero-slide__title {
		font-size: 34px;
		margin-bottom: 20px;
	}
}

@media (max-width: 599.98px) {
	.hero-slider {
		height: 560px;
	}

	.hero-slide__title {
		font-size: 28px;
	}
}