/* Ethnic Hanger — 3D coverflow category slider.
   Class prefix: .ehs-cs-  | works on top of Swiper's coverflow effect. */

.ehs-cs {
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px 46px;
	box-sizing: border-box;
	--ehs-accent: #c0392b;
	--ehs-cs-h: 320px;
}

.ehs-cs-swiper {
	overflow: hidden;
	padding: 10px 0 28px;
}

/* Each slide is sized to its card so coverflow centres nicely */
.ehs-cs-slide {
	width: 460px;
	max-width: 86%;
	height: var(--ehs-cs-h);
}

/* The card */
.ehs-cs-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(135deg, #fbeef0 0%, #f7e9e3 100%);
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	border: 1px solid rgba(0,0,0,.05);
}

/* Big faded watermark of the category name, sitting behind the image */
.ehs-cs-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 130%;
	text-align: center;
	font-size: clamp(40px, 8vw, 92px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: rgba(120, 5, 60, 0.10);
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

/* Foreground image (model / product), anchored to the right like the reference */
.ehs-cs-imgwrap {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 58%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ehs-cs-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: center bottom;
	display: block;
}

/* Category name label, bottom-left */
.ehs-cs-name {
	position: absolute;
	left: 22px;
	bottom: 22px;
	max-width: 55%;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: #1a1a1a;
	text-transform: uppercase;
	letter-spacing: .01em;
	z-index: 2;
}
.ehs-cs-name::after {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-top: 8px;
	background: var(--ehs-accent);
	border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   Full-bleed "cover" style: the category photo fills the whole card with a dark
   gradient and the name on top. Best for normal product photos (not cutouts).
---------------------------------------------------------------------------- */
.ehs-cs-style-cover .ehs-cs-card {
	background: #2a2326;
}
.ehs-cs-style-cover .ehs-cs-imgwrap {
	position: absolute;
	inset: 0;
	width: 100%;
	display: block;
}
.ehs-cs-style-cover .ehs-cs-img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center 30%;
}
/* Dark gradient for legibility behind the name */
.ehs-cs-style-cover .ehs-cs-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,0) 68%);
	z-index: 1;
}
.ehs-cs-style-cover .ehs-cs-name {
	color: #fff;
	max-width: 82%;
	font-size: 26px;
	text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
/* Keep a faint watermark on top of the photo for the brand feel */
.ehs-cs-style-cover .ehs-cs-watermark {
	z-index: 1;
	color: rgba(255,255,255,0.16);
	mix-blend-mode: overlay;
}
/* If a category has no image, still show the watermark over the dark card */
.ehs-cs-style-cover .ehs-cs-card:not(:has(.ehs-cs-imgwrap)) .ehs-cs-watermark {
	color: rgba(255,255,255,0.10);
	mix-blend-mode: normal;
}

/* Dim the non-active slides a touch so the centre one pops */
.ehs-cs-swiper .swiper-slide:not(.swiper-slide-active) .ehs-cs-card { opacity: .85; }

/* Arrows */
.ehs-cs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #e0e0e0;
	background: #fff;
	color: #333;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	z-index: 5;
}
.ehs-cs-prev { left: 2px; }
.ehs-cs-next { right: 2px; }
.ehs-cs-nav:hover { color: #fff; background: var(--ehs-accent); border-color: var(--ehs-accent); }

/* Pagination dots */
.ehs-cs .swiper-pagination {
	position: static;
	margin-top: 6px;
	text-align: center;
}
.ehs-cs .swiper-pagination-bullet-active { background: var(--ehs-accent); }

@media (max-width: 600px) {
	.ehs-cs { padding: 6px 14px; --ehs-cs-h: 240px; }
	.ehs-cs-slide { width: 300px; }
	.ehs-cs-name { font-size: 19px; }
	.ehs-cs-nav { display: none; }
}