/* =============================================================================
   Shared tokens
   ============================================================================= */

:root {
	--anim-duration:      0.6s;
	--anim-ease:          ease-out;
	--overlay-light:      rgba(89, 89, 89, 0);
	--overlay-dark:       rgba(89, 89, 89, 1);
	--accent:             #2464ab;
}

/* =============================================================================
   Hero slider
   ============================================================================= */

.hero-swiper-section {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.hero-swiper {
	height: 480px;
	width: 100%;
}

.hero-swiper .swiper-slide {
	overflow: hidden;
	position: relative;
}

.hero-swiper .swiper-slide img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 5s ease;
	width: 100%;
}

.hero-swiper .swiper-slide-active img {
	transform: scale(1);
}

.slide-overlay {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	inset: 0;
	justify-content: center;
	padding: 2rem;
	position: absolute;
	text-align: center;
	z-index: 10;
}

.slide-overlay h2 {
	color: #fff;
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
	opacity: 0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
	transform: translateY(20px);
	transition:
		opacity   var(--anim-duration) var(--anim-ease) 0.2s,
		transform var(--anim-duration) var(--anim-ease) 0.2s;
}

.hero-swiper .swiper-slide-active .slide-overlay h2 {
	opacity: 1;
	transform: translateY(0);
}

.slide-overlay .shop-now-btn {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity   var(--anim-duration) var(--anim-ease) 0.4s,
		transform var(--anim-duration) var(--anim-ease) 0.4s;
}

.hero-swiper .swiper-slide-active .slide-overlay .shop-now-btn {
	opacity: 1;
	transform: translateY(0);
}

.hero-swiper .swiper-pagination-bullet {
	background: #fff;
	height: 10px;
	opacity: 1;
	transition: background 0.3s, transform 0.3s;
	width: 10px;
}

.hero-swiper .swiper-pagination-bullet-active {
	background: var(--accent);
	transform: scale(1.3);
}

.hero-swiper-section svg {
	color: #2464ab;
	fill: #2464ab;
}

/* =============================================================================
   Brands grid
   ============================================================================= */

.home-brands-inner {
	margin: 0 auto;
	max-width: 1320px;
	padding-bottom: 90px;
	padding-top: 90px;
}

.home-brands h2 {
	letter-spacing: 0.5rem;
	text-align: center;
	text-transform: uppercase;
}

.home-brands-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
}

.brand-card {
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.brand-card__image-wrap {
	inset: 0;
	position: absolute;
}

.brand-card__bg {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform var(--anim-duration) var(--anim-ease);
	width: 100%;
}

.brand-card:hover .brand-card__bg {
	transform: scale(1.04);
}

.brand-card__logo-wrap {
	align-items: center;
	background: linear-gradient(
		to bottom,
		var(--overlay-light) 0%,
		var(--overlay-dark)  100%
	);
	inset: 0;
	display: flex;
	justify-content: center;
	padding: 1rem;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* =============================================================================
   Lifestyle mosaic
   ============================================================================= */

.home-lifestyle {
	padding: 0 0 90px;
}

.lifestyle-grid {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 420px 420px;
}

/* Row 1: large (50%) left, two small (25%) right */
.lifestyle-grid > .lifestyle-cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.lifestyle-grid > .lifestyle-cell:nth-child(2) { grid-column: 3;     grid-row: 1; }
.lifestyle-grid > .lifestyle-cell:nth-child(3) { grid-column: 4;     grid-row: 1; }

/* Row 2: two small (25%) left, large (50%) right */
.lifestyle-grid > .lifestyle-cell:nth-child(4) { grid-column: 1;     grid-row: 2; }
.lifestyle-grid > .lifestyle-cell:nth-child(5) { grid-column: 2;     grid-row: 2; }
.lifestyle-grid > .lifestyle-cell:nth-child(6) { grid-column: 3 / 5; grid-row: 2; }

.lifestyle-cell {
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.lifestyle-cell img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform var(--anim-duration) var(--anim-ease);
	width: 100%;
}

.lifestyle-cell:hover img {
	transform: scale(1.04);
}

.lifestyle-cell__overlay {
	align-items: flex-end;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.lifestyle-cell__overlay h2 {
	background: linear-gradient(
		to bottom,
		var(--overlay-light) 0%,
		var(--overlay-dark)  100%
	);
	color: #fff;
	letter-spacing: 0.06em;
	margin: 0;
	padding: 1rem;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	width: 100%;
}

/* =============================================================================
   Recommends swiper
   ============================================================================= */

.home-recommends {
	padding: 0 0 90px;
}

.home-recommends-inner {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 1rem;
}

.home-recommends-inner > img {
	display: block;
	margin: 0 auto 2.5rem;
}

.recommends-swiper {
	overflow: hidden;
	position: relative;
}

.recommends-swiper .swiper-wrapper {
	align-items: stretch;
}

.recommends-cell {
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	border-radius: 4px;
}

.recommends-cell__image-wrap {
	display: block;
	overflow: hidden;
	width: 100%;
}

.recommends-cell img {
	display: block;
	height: auto;
	transition: transform var(--anim-duration) var(--anim-ease);
	width: 100%;
}

.recommends-cell:hover img {
	transform: scale(1.04);
}

.recommends-cell__info {
	padding: 0.6rem 0.25rem 0;
}

.recommends-cell__info h3 {
	color: #595959;
	font-size: 1em;
	margin-bottom: .5em;
}

.recommends-cell__price {
	color: #595959;
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: .5em;
}

.home-recommends svg {
	color: #2464ab;
	fill: #2464ab;
}