/* --- BASIC RESET --- */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: 'Poppins', sans-serif; background:#000 !important; color:#fff !important;}

#masthead {
	/* 	background-color: var(--sw-ash-black) !important ; */
	/* 	background-color: var(--sw-dark) ; */
}

/* --- HERO --- */
.hero {
	position: relative;
	height: 100vh;
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center;
	text-align: center;
	background: url('../../assets/img/viba-afrika-banner-002.jpg') center/cover no-repeat;
	color: #fff;
	background-position: top;
}
.hero::after {
	content:"";
	position:absolute; inset:0;
	background: rgba(0,0,0,0.55); /* overlay tint, replace per collection */
}
.hero > * {position: relative; z-index: 1;}
.hero h1 {font-size:3rem; margin-bottom:1rem;}
.hero p {font-size:1.25rem; margin-bottom:1.5rem;}
.btn {
	display:inline-block;
	padding:0.75rem 1.5rem;
	border-radius:9999px;
	background:#FFD15C; /* shared gold accent */
	color:#000; font-weight:bold; text-decoration:none;
	transition: all 0.3s ease;
}
.btn:hover {box-shadow:0 0 15px #FFD15C;}

/* --- DIVIDER --- */
.divider {
	text-align:center; 
	margin:2rem auto;
}
.divider span {
	display:inline-block; 
	width:80px; height:6px;
	background:#FFD15C; /* recolor per collection */
	mask: url('divider-motif.svg') repeat-x; 
	-webkit-mask: url('divider-motif.svg') repeat-x;
}

/* --- STORY BLOCK --- */
.story {
	display:flex; 
	gap:2rem; 
	align-items:center; 
	padding:4rem 2rem;

	background-color: #000;
}
.story img {flex:1; max-width:100%;}
.story-text {flex:1;}
.story-text h2 {margin-bottom:1rem;}
.story-text p {line-height:1.6;}

/* --- PRODUCT GRID --- */
.products {
	display:grid; 
	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
	gap:1.5rem; padding:2rem;
}
.product {
	background:#111; 
	padding:1rem; 
	border-radius:12px; 
	text-align:center;
	transition: transform 0.3s ease;
}
.product:hover {transform:scale(1.05);} /* collection-specific hover */
.product img {max-width:100%; border-radius:8px;}
.product h3 {margin-top:0.75rem;}

/* --- FEATURE HIGHLIGHT --- */
.feature {
	padding:4rem 2rem;
	background:#1a1a1a;
	text-align:center;
}
.feature h2 {margin-bottom:1rem;}

/* --- LOOKBOOK GRID --- */
.lookbook {
	display:grid;
	grid-template-columns: 2fr 1fr;
	gap:1rem; padding:2rem;
}
.lookbook img {width:100%; border-radius:12px;}
.lookbook .stacked {display:grid; gap:1rem;}

/* --- CLOSING CTA --- */
.closing {
	text-align:center;
	padding:4rem 2rem;
	background:#000;
}
.closing h2 {margin-bottom:1.5rem;}


img.inline-logo-small{
	width:200px;
	max-width: 200px;
}

img.inline-logo-medium{
	width:350px;
	max-width: 350px;
}

img.inline-logo-large{
	width:100%;
	max-width: 100%;
}


/* FEATURED PRODUCTS */
#fp-featured{
	background:linear-gradient(180deg,#0f1112 0%, #0b0b0c 100%);
	padding:2rem 1rem;
}

#fp-featured .wrap{
	display:grid;
	grid-template-columns:1fr 2fr;
	align-items:center;gap:36px;
}
#fp-featured h2{
	color:var(--muted);
	margin:0 0 8px;
}
#fp-featured p.subtitle{
	color:#bdb6aa;
	margin:0 0 18px;
}

#fp-featured {
	.product-grid{
		display:grid;
		grid-template-columns:repeat(3,1fr);gap:18px;
	}
	.product{
		background:var(--sw-bg);
		padding:18px;
		border-radius:12px;
		color:#111;
		display:flex;
		flex-direction:column;
		gap:12px;
		box-shadow:0 6px 24px rgba(5,5,6,0.55);
	}
	.product .image	{
		height:260px;
		border-radius:10px;
		overflow:hidden;
		background:linear-gradient(180deg,#efe6db,#e5d9cc);
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.product img{
		width:100%;
		height:100%;
		object-fit:cover;
		display:block;
	}
	.product h3{
		margin:0;
		font-size:18px;
	}
	.product p.desc{
		margin:0;
		color:#4b4b4b;
		font-size:13px;
	}
	.product .meta{
		display:flex;
		align-items:center;
		justify-content:space-between;
		margin-top:auto
	}
	.price{
		font-weight:800
	}
	.buy{
		background: var(--sw-accent);
		color: #fff;
		padding: 8px 12px;
		border-radius: 8px;
		border: 0;
		cursor: pointer;
		font-size: 13px;
	}
}

/* feat-2 */
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111;background:#0b0b0c;}

.wrap{max-width:1200px;margin:0 auto;padding:32px 24px;}

/* feat-2 container */
.feat-2{position:relative;height:72vh;min-height:520px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:40px}
.feat-2::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 400px at 20% 20%, rgba(20,56,89,0.55), transparent),
  radial-gradient(900px 300px at 80% 70%, rgba(197,60,90,0.45), transparent),
  linear-gradient(180deg, rgba(5,7,10,0.85), rgba(8,10,14,0.9));
  filter:contrast(1.05) saturate(1.05);z-index:0;}
.feat-2::after{content:"";position:absolute;inset:0;background-image:linear-gradient(transparent 40%, rgba(255,255,255,0.02) 41%, transparent 42%);mix-blend-mode:overlay;z-index:1}

.feat-2-content{position:relative;z-index:2;max-width:1100px;width:100%;display:flex;gap:36px;align-items:center;padding:28px}

/* model sides */
.feat-2-media{flex:0 0 44%;min-width:220px;display:flex;flex-direction:column;gap:12px}
.model{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));border-radius:12px;overflow:hidden;display:block}
.model img{display:block;width:100%;height:420px;object-fit:cover}

/* center section */
.feat-2-center{flex:1;min-width:240px;color:#e9e3d8;text-align:center}
.brand{font-weight:700;letter-spacing:2px;color:#e9e3d8;font-size:20px}
h1{margin:8px 0 12px;font-size:44px;line-height:1.02;color:#fff}
p.lead{margin:0 0 18px;color:rgba(255,255,255,0.9);font-size:16px}

/* CTA buttons */
.cta-row{display:flex;gap:12px;justify-content:center}
.sw-btn{background:#B76A35;color:white;padding:12px 20px;border-radius:10px;border:0;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.sw-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}
.sw-btn:hover{background:#8a4e24}

/* responsive */
@media (max-width:1000px){
  .feat-2{height:unset; !important}
  .feat-2-content{flex-direction:column}
  .feat-2-media{flex-basis:100%;width:unset}
  .model img{height:320px;width:auto;align-self:center;}
}
@media (max-width:640px){
  h1{font-size:28px}
  .feat-2{min-height:56vh}
  .model img{height:260px; width:auto;align-self:center;}
  .feat-2-center{text-align:center}
}
.feat-2 .model-left, .feat-2 .model-right{flex:0 0 36%}
@media (max-width:700px){
  .model-left, .model-right{order:0}
  .feat-2-media{display:block;width:unset}
  .feat-2 .model{display:block;margin:0 auto;max-width:420px}
  .feat-2-content{padding:18px}
}