/* Sales & Deals landing (special_deals.php + offerZone.php) — UI v2 "Warm Modern".
   Tokens only (headerStyle.php :root); legacy emitter classes restyled in place
   because the category/product fragments come from shared HtmlCache emitters. */

/* ── Breadcrumbs ── */
.Breadcrumbs{padding:14px 0; font-size:13px; color:var(--tch-muted);}
.Breadcrumbs a{color:var(--tch-muted);}
.Breadcrumbs a:hover{color:var(--tch-brand-dark);}
.Breadcrumbs span{color:var(--tch-line); padding:0 8px;}

/* ── Hero / Sales & Deals heading ── */
.SpecialDeals h1{
	font-family:var(--tch-font-display);
	color:var(--tch-ink);
	font-size:var(--tch-text-2xl);
	text-align:center;
	font-weight:500;
	line-height:1.2;
	margin:18px 0 10px 0;
	letter-spacing:-0.3px;
}
.SpecialDeals h1 span{
	color:var(--tch-brand);
	font-size:var(--tch-text-sm);
	font-style:normal;
	font-family:var(--tch-font-body);
	font-weight:700;
	display:block;
	margin-top:6px;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.SpecialDeals h2{
	font-family:var(--tch-font-body);
	color:var(--tch-ink-2);
	text-align:center;
	font-size:var(--tch-text-lg);
	font-weight:400;
	margin:12px 0;
}

/* ── Deal banner ── */
.DealBanner{
	text-align:center;
	border-radius:var(--tch-radius-lg);
	overflow:hidden;
	box-shadow:var(--tch-shadow);
	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:var(--tch-surface);
	flex:auto;
	border:1px solid var(--tch-line);
	min-width:180px;
	border-radius:var(--tch-radius);
	box-shadow:var(--tch-shadow-sm);
	transition:box-shadow .18s ease, transform .18s ease;
}
.SpecialDealCategory ul li a{color:var(--tch-ink); padding:15px; display:block; font-size:15px; font-weight:500;}
.SpecialDealCategory ul li:hover{
	box-shadow:var(--tch-shadow);
	transform:translateY(-2px);
}
.SpecialDealCategory ul li a img{max-height:130px; margin-bottom:6px;}

/* ── Section titles ── */
.SecTitle{text-align:center; color:var(--tch-ink); margin-bottom:var(--tch-space-4);}
.SecTitle h2{
	font-family:var(--tch-font-display);
	font-size:var(--tch-text-2xl);
	font-weight:500;
	margin:0 0 6px 0;
	letter-spacing:-0.3px;
}
.SecTitle p{
	font-family:var(--tch-font-body);
	font-size:var(--tch-text-md);
	color:var(--tch-muted);
	margin-top:6px;
}
.SecTitle .clearancesale{
	font-family:var(--tch-font-display);
	font-size:var(--tch-text-xl);
	font-weight:500;
	margin-bottom:24px;
	color:var(--tch-brand-dark);
}

/* ── Top Picks products (shared HtmlCache emitter markup) ── */
.TopPicksForYou{background:var(--tch-surface-sand); padding:var(--tch-space-6) 0; border-radius:var(--tch-radius-lg);}
.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 var(--tch-line);
	border-radius:var(--tch-radius);
	padding:0 0 12px 0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	max-width:210px;
	align-content:center;
	background:var(--tch-surface);
	overflow:hidden;
	box-shadow:var(--tch-shadow-sm);
	transition:box-shadow .18s ease, transform .18s ease;
}
.TopPicksForYou ul li .thumb{
	background:var(--tch-surface-warm);
	text-align:center;
	padding:12px;
	margin-bottom:8px;
}
.TopPicksForYou ul li a{color:var(--tch-ink); text-decoration:none;}
.TopPicksForYou ul li .thumb img{max-height:175px;}
.TopPicksForYou ul li:hover{
	box-shadow:var(--tch-shadow-lg);
	transform:translateY(-2px);
}
.TopPicksForYou ul p{margin:0 10px; padding-top:6px; text-align:center;}
.TopPicksForYou ul p b{font-size:17px; color:var(--tch-brand-dark); font-weight:700;}
.TopPicksForYou ul p strike{color:var(--tch-muted); font-size:13.5px; margin-left:4px; font-weight:400;}
.TopPicksForYou ul h4{
	margin:6px 10px 0 10px;
	font-size:13px;
	font-weight:400;
	text-align:center;
	color:var(--tch-ink-2);
	line-height:1.4;
}

/* ── View More button (legacy class kept for cached markup; pill per design system) ── */
.TopPicksForYou a.SDViewMoreBtn,
.StockClearance a.SDViewMoreBtn{
	background:var(--tch-brand);
	color:#fff;
	border-radius:var(--tch-radius-pill);
	display:block;
	width:220px;
	font-weight:600;
	font-family:var(--tch-font-body);
	margin:var(--tch-space-5) auto 0 auto;
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:.06em;
	padding:14px 10px;
	text-align:center;
	text-decoration:none;
	transition:background .18s ease, box-shadow .18s ease;
	box-shadow:0 8px 20px color-mix(in srgb, var(--tch-brand) 25%, transparent);
}
.TopPicksForYou a.SDViewMoreBtn:hover,
.StockClearance a.SDViewMoreBtn:hover{
	background:var(--tch-brand-dark);
	color:#fff;
	box-shadow:var(--tch-shadow);
}

/* ── 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:var(--tch-radius); overflow:hidden; box-shadow:var(--tch-shadow-sm);}
.SDsaleBanner > div img{display:block; width:100%; height:auto; transition:transform .3s ease;}
.SDsaleBanner > div img:hover{transform:scale(1.02);}

/* ── Clearance sale slider (fragment injected from offerZoneProcessor HtmlCache) ── */
#clearanceSaleSlider .item{
	border:1px solid var(--tch-line);
	text-align:center;
	border-radius:var(--tch-radius);
	overflow:hidden;
	background:var(--tch-surface);
	box-shadow:var(--tch-shadow-sm);
	height:100%;
}
#clearanceSaleSlider .ProductThumb{background:var(--tch-surface-warm); padding:10px 0;}
#clearanceSaleSlider .ProductDetail{padding:0 10px 12px 10px;}
#clearanceSaleSlider .ProductDetail h4 a{font-weight:500; color:var(--tch-ink); font-size:14px; text-decoration:none; line-height:1.4;}
#clearanceSaleSlider .ProductDetail h4 a:hover{color:var(--tch-brand-dark);}
#clearanceSaleSlider .ProductDetail p{margin-bottom:0; font-size:17px; font-weight:600; color:var(--tch-brand-dark);}
#clearanceSaleSlider .ProductDetail p b{font-weight:700;}
#clearanceSaleSlider .ProductDetail p strike{font-size:13.5px; color:var(--tch-muted); font-weight:400;}

/* Swiper shell built client-side from the cached fragment (Owl markup adapted in JS) */
#clearanceSaleSlider .tch-deal-swiper{position:relative; padding:4px 2px;}
#clearanceSaleSlider .tch-deal-swiper .swiper-slide{height:auto;}
#clearanceSaleSlider .swiper-button-prev,
#clearanceSaleSlider .swiper-button-next{
	width:40px; height:40px;
	border-radius:50%;
	background:var(--tch-surface);
	border:1px solid var(--tch-line);
	box-shadow:var(--tch-shadow-sm);
	color:var(--tch-ink);
	--swiper-navigation-size:15px;
}
#clearanceSaleSlider .swiper-button-prev:hover,
#clearanceSaleSlider .swiper-button-next:hover{color:var(--tch-brand-dark); border-color:var(--tch-brand);}
#clearanceSaleSlider .swiper-button-prev:after,
#clearanceSaleSlider .swiper-button-next:after{font-weight:700;}
#clearanceSaleSlider .swiper-button-prev{left:0;}
#clearanceSaleSlider .swiper-button-next{right:0;}

/* (The old Owl fallback skin is gone — Owl is retired site-wide and the JS fallback
   path was removed with it.) */

/* ── Stock Clearance section ── */
.StockClearance{padding:var(--tch-space-6) 0;}
.StockClearSec{display:flex; flex-wrap:wrap;}
.StockClearSec > div{width:33%;}
.StockClearSec .CateBlock{
	background:var(--tch-surface);
	border-radius:var(--tch-radius);
	border:1px solid var(--tch-line);
	margin:12px;
	padding:24px 22px;
	min-height:330px;
	position:relative;
	box-shadow:var(--tch-shadow-sm);
	transition:box-shadow .18s ease, transform .18s ease;
}
.StockClearSec .CateBlock:hover{
	box-shadow:var(--tch-shadow);
	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:var(--tch-brand);
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.1em;
	margin-bottom:8px;
	font-family:var(--tch-font-body);
}
.StockClearSec .CateBlock p a{
	color:var(--tch-ink);
	text-transform:uppercase;
	font-size:13px;
	font-weight:600;
	font-family:var(--tch-font-body);
	transition:color .18s ease;
	text-decoration:none;
	border-bottom:2px solid var(--tch-brand);
	padding-bottom:2px;
}
.StockClearSec .CateBlock p a:hover{color:var(--tch-brand-dark);}
.StockClearSec .CateBlock h4{
	font-family:var(--tch-font-display);
	color:var(--tch-ink);
	font-size:var(--tch-text-lg);
	font-weight:500;
	margin:0 0 14px 0;
	line-height:1.3;
}
.StockClearSec .CateBlock figure{transition:transform .3s ease;}
.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:var(--tch-text-xl);}
	.SpecialDeals h1{font-size:var(--tch-text-xl);}
	.SecTitle .clearancesale{font-size:var(--tch-text-lg); 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;}
}