body{background:#FFF;}

/* ── Hero / Sales & Deals heading ── */
.SpecialDeals{}
.SpecialDeals h1{
	font-family:'Playfair Display',serif;
	color:#1a1a1a;
	font-size:36px;
	text-align:center;
	font-weight:700;
	line-height:1.2;
	margin:18px 0 10px 0;
	letter-spacing:-0.3px;
}
.SpecialDeals h1 span{
	color:#c55b39;
	font-size:17px;
	font-style:normal;
	font-family:'Inter',sans-serif;
	font-weight:500;
	display:block;
	margin-top:4px;
	letter-spacing:0.5px;
	text-transform:uppercase;
}
.SpecialDeals h2{
	font-family:'Inter',sans-serif;
	color:#444;
	text-align:center;
	font-size:22px;
	font-weight:400;
	margin:12px 0;
}

/* ── Deal banner ── */
.DealBanner{
	text-align:center;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 4px 18px rgba(0,0,0,0.10);
	margin-bottom:10px;
}
.DealBanner img{display:block; width:100%; height:auto;}

/* ── Category tiles ── */
.TopPicksForYou ul li a, .SpecialDealCategory ul li a{text-decoration:none;}
.SpecialDealCategory{padding-bottom:20px;}
.SpecialDealCategory ul{margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:space-between;}
.SpecialDealCategory ul li{
	list-style:none;
	margin:8px;
	text-align:center;
	background:#FFF;
	flex:auto;
	border:1px solid #ebebeb;
	min-width:180px;
	border-radius:10px;
	transition:box-shadow 0.25s, transform 0.25s;
}
.SpecialDealCategory ul li a{color:#333; padding:15px; display:block; font-size:15px; font-weight:500;}
.SpecialDealCategory ul li:hover{
	box-shadow:0 6px 20px rgba(0,0,0,0.11);
	transform:translateY(-2px);
}
.SpecialDealCategory ul li a img{max-height:130px; margin-bottom:6px;}

/* ── Section titles ── */
.SecTitle{text-align:center; color:#1b1b1b; margin-bottom:10px;}
.SecTitle h2{
	font-family:'Playfair Display',serif;
	font-size:36px;
	font-weight:700;
	margin:0 0 6px 0;
	letter-spacing:-0.3px;
}
.SecTitle p{
	font-family:'Inter',sans-serif;
	font-size:17px;
	color:#777;
	margin-top:6px;
}
.SecTitle .clearancesale{
	font-family:'Playfair Display',serif;
	font-size:28px;
	font-weight:600;
	margin-bottom:24px;
	color:#c55b39;
}

/* ── Top Picks products ── */
.TopPicksForYou{background:#fafafa; padding:28px 0;}
.TopPicksForYou h3, .FeatureBrand h3{margin:0 0 10px 0; font-weight:500; font-size:20px;}
.TopPicksForYou ul{margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center;}
.TopPicksForYou ul li{
	margin:8px;
	list-style:none;
	border:1px solid #ebebeb;
	border-radius:12px;
	padding:0 0 12px 0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	max-width:210px;
	align-content:center;
	background:#fff;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
	transition:box-shadow 0.25s, transform 0.25s;
}
.TopPicksForYou ul li .thumb{
	background:#f6f6f6;
	text-align:center;
	padding:12px;
	margin-bottom:8px;
}
.TopPicksForYou ul li a{color:#222; text-decoration:none;}
.TopPicksForYou ul li .thumb img{max-height:175px;}
.TopPicksForYou ul li:hover{
	box-shadow:0 6px 22px rgba(0,0,0,0.12);
	transform:translateY(-2px);
}
.TopPicksForYou ul p{margin:0 10px; padding-top:6px; text-align:center;}
.TopPicksForYou ul p b{font-size:17px; color:#c55b39; font-weight:700;}
.TopPicksForYou ul p strike{color:#aaa; font-size:14px; margin-left:4px;}
.TopPicksForYou ul h4{
	margin:6px 10px 0 10px;
	font-size:13px;
	font-weight:400;
	text-align:center;
	color:#444;
	line-height:1.4;
}

/* ── View More button ── */
.TopPicksForYou a.SDViewMoreBtn,
.StockClearance a.SDViewMoreBtn{
	background:#c55b39;
	color:#fff;
	border-radius:6px;
	display:block;
	width:200px;
	font-weight:600;
	font-family:'Inter',sans-serif;
	margin:20px auto 0 auto;
	text-transform:uppercase;
	font-size:15px;
	padding:14px 10px;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.5px;
	transition:background 0.25s, box-shadow 0.25s;
	box-shadow:0 3px 10px rgba(213,43,42,0.25);
}
.TopPicksForYou a.SDViewMoreBtn:hover,
.StockClearance a.SDViewMoreBtn:hover{
	background:#b71f1e;
	box-shadow:0 5px 16px rgba(213,43,42,0.35);
}

/* ── Feature brand ── */
.FeatureBrand{padding:10px 0 5px 0;}

/* ── Sale banner pair ── */
.SDsaleBanner{display:flex; flex-wrap:wrap; justify-content:space-between; padding:18px 0 8px 0; text-align:center; gap:16px;}
.SDsaleBanner > div{width:calc(50% - 8px); border-radius:10px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,0.08);}
.SDsaleBanner > div img{display:block; width:100%; height:auto; transition:transform 0.3s;}
.SDsaleBanner > div img:hover{transform:scale(1.02);}

/* ── Clearance sale slider ── */
#clearanceSaleSlider .item{
	border:1px solid #ebebeb;
	text-align:center;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
#clearanceSaleSlider .ProductDetail h4 a{font-weight:500; color:#333; font-size:15px; text-decoration:none;}
#clearanceSaleSlider .ProductDetail h4 a:hover{color:#000;}
#clearanceSaleSlider .ProductDetail p{margin-bottom:0; font-size:18px; font-weight:600; color:#c55b39;}
#clearanceSaleSlider .ProductDetail p b{font-weight:700;}
#clearanceSaleSlider .ProductDetail p strike{font-size:14px; color:#aaa; font-weight:400;}

#clearanceSaleSlider .owl-nav{top:50%; position:absolute; width:100%; margin-top:-40px;}
#clearanceSaleSlider .owl-nav .owl-prev{
	float:left; border:1px solid #e0e0e0;
	height:80px; width:40px; background:#fff;
	text-align:center; line-height:80px;
	border-radius:6px; font-size:20px;
	color:#888; margin-left:-20px;
	box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
#clearanceSaleSlider .owl-nav .owl-next{
	float:right; border:1px solid #e0e0e0;
	height:80px; width:40px; background:#fff;
	text-align:center; line-height:80px;
	border-radius:6px; font-size:20px;
	color:#888; margin-right:-20px;
	box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
#clearanceSaleSlider .owl-nav .owl-next:hover,
#clearanceSaleSlider .owl-nav .owl-prev:hover{color:#333; border-color:#bbb;}

/* ── Stock Clearance section ── */
.StockClearance{padding:28px 0;}
.StockClearSec{display:flex; flex-wrap:wrap;}
.StockClearSec > div{width:33%;}
.StockClearSec .CateBlock{
	background:#fff;
	border-radius:12px;
	border:1px solid #ebebeb;
	margin:12px;
	padding:24px 22px;
	min-height:330px;
	position:relative;
	box-shadow:0 2px 10px rgba(0,0,0,0.05);
	transition:box-shadow 0.25s, transform 0.25s;
}
.StockClearSec .CateBlock:hover{
	box-shadow:0 6px 24px rgba(0,0,0,0.10);
	transform:translateY(-2px);
}
.StockClearSec .CateBlock.positi figure{position:absolute; right:20px; bottom:20px;}
.StockClearSec .CateBlock.centrmrgn{text-align:center;}
.StockClearSec .CateBlock figure{margin:0; text-align:center;}
.StockClearSec .CateBlock.centrmrgn figure{margin:50px 0;}
.StockClearSec .CateBlock.boxheight{min-height:480px;}
.StockClearSec .CateBlock.boxheight figure{margin:40px 0;}
.StockClearSec .CateBlock p.offer{
	color:#c55b39;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.8px;
	margin-bottom:8px;
	font-family:'Inter',sans-serif;
}
.StockClearSec .CateBlock p a{
	color:#333;
	text-transform:uppercase;
	font-size:13px;
	font-weight:600;
	font-family:'Inter',sans-serif;
	transition:color 0.2s;
	text-decoration:none;
	border-bottom:2px solid #c55b39;
	padding-bottom:2px;
}
.StockClearSec .CateBlock p a:hover{color:#c55b39;}
.StockClearSec .CateBlock h4{
	font-family:'Playfair Display',serif;
	color:#1a1a1a;
	font-size:24px;
	font-weight:600;
	margin:0 0 14px 0;
	line-height:1.3;
}
.StockClearSec .CateBlock figure{transition:transform 0.3s;}
.StockClearSec .CateBlock:hover figure{transform:scale(1.04);}

/* ── Responsive ── */
@media only screen and (min-width:0px) and (max-width:999px){
	.SiteContainer{width:100% !important; max-width:1100px;}
}
@media only screen and (min-width:0px) and (max-width:980px){
	.StockClearSec, .SDsaleBanner{display:block;}
	.StockClearSec > div{margin:0 auto; min-width:400px; width:auto;}
	.SDsaleBanner > div{margin:0 auto 16px auto; min-width:480px; width:auto;}
}
@media only screen and (min-width:0px) and (max-width:620px){
	.SecTitle h2{font-size:28px;}
	.SpecialDeals h1{font-size:28px;}
	.SecTitle .clearancesale{font-size:22px; margin-bottom:16px;}
	.StockClearSec > div{margin:0 auto; min-width:320px;}
	.StockClearSec .CateBlock.boxheight figure,.StockClearSec .CateBlock.centrmrgn figure{margin:0;}
	.StockClearSec .CateBlock{margin:10px 0;}
	.StockClearSec .CateBlock.boxheight{min-height:auto;}
	.SDsaleBanner > div{margin:0 auto 12px auto; min-width:auto; width:auto;}
}
@media only screen and (min-width:0px) and (max-width:360px){
	.TopPicksForYou ul li{max-width:125px;}
	.SpecialDealCategory ul li{min-width:125px;}
}
@media only screen and (min-width:360px) and (max-width:410px){
	.TopPicksForYou ul li{max-width:150px; margin:5px; padding:0 0 10px 0;}
	.SpecialDealCategory ul li{min-width:130px; margin:5px;}
	.SpecialDealCategory ul li a{padding:5px; font-size:14px;}
}
@media only screen and (min-width:410px) and (max-width:535px){
	.TopPicksForYou ul li{max-width:150px;}
	.SpecialDealCategory ul li{min-width:160px;}
	.SpecialDealCategory ul li a{padding:5px; font-size:14px;}
	.SpecialDeals h2{margin:20px 0 0 0;}
}
