/* ══════════════════════════════════════
   Hero Banner Section
   ══════════════════════════════════════ */

/* Override base style.css .nco-hero rules */
.home .nco-hero{
	position:relative;
	width:100%;
	min-height:420px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	margin:0;
	padding:0;
	margin-bottom: 20px;
	border:none;
	background:none;
	border-radius:0;
}

/* Background image — fills the hero */
.nco-hero-bg{
	position:absolute;
	inset:0;
	z-index:0;
}
.nco-hero-bg img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
}

/* Dark gradient overlay for readability */
.nco-hero-overlay{
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(
		135deg,
		rgba(0,30,60,.82) 0%,
		rgba(0,70,140,.60) 50%,
		rgba(0,112,186,.40) 100%
	);
}

/* Content on top */
.nco-hero-content{
	position:relative;
	z-index:2;
	max-width:720px;
	text-align:center;
	padding:60px 24px;
	animation:nco-hero-fadeIn .8s ease both;
}



/* Title */
.nco-hero-title{
	color:#fff;
	font-size:clamp(26px, 4vw, 44px);
	font-weight:900;
	line-height:1.2;
	margin:0 0 16px;
	text-shadow:0 2px 12px rgba(0,0,0,.30);
}

/* Subtitle */
.nco-hero-subtitle{
	color:rgba(249, 246, 246, 0.88);
	font-size:clamp(14px, 1.8vw, 17px);
	font-weight:400;
	line-height:1.6;
	margin:0 0 28px;
	max-width:560px;
	margin-left:auto;
	margin-right:auto;
}

/* Action buttons row */
.nco-hero-actions{
	display:flex;
	gap:14px;
	margin: 20px 0;
	justify-content:center;
	flex-wrap:wrap;
}

/* Shared button base */
.nco-hero-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:12px 30px;
	border-radius:50px;
	font-size:15px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
	transition:all .25s ease;
	letter-spacing:.3px;
}

/* Primary CTA */
.nco-hero-btn-primary{
	background:linear-gradient(135deg,#0070ba 0%,#005a96 100%);
	color:#fff;
	border:none;
	box-shadow:0 6px 24px rgba(0,112,186,.40);
}
.nco-hero-btn-primary:hover{
	background:linear-gradient(135deg,#005a96 0%,#004578 100%);
	transform:translateY(-2px);
	box-shadow:0 10px 30px rgba(0,112,186,.50);
}

/* Outline / secondary CTA */
.nco-hero-btn-outline{
	background:transparent;
	color:#fff;
	border:2px solid rgba(255,255,255,.5);
}
.nco-hero-btn-outline:hover{
	background:rgba(255,255,255,.12);
	border-color:rgba(255,255,255,.8);
	transform:translateY(-2px);
}

/* Entrance animation */
@keyframes nco-hero-fadeIn{
	from{opacity:0;transform:translateY(20px);}
	to{opacity:1;transform:translateY(0);}
}

/* ══════════════════════════════════════
   Section Header & Title
   ══════════════════════════════════════ */

.nco-section-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin:30px 20px 20px;
	padding:0 4px;
}

.nco-section-title{
	font-size:clamp(18px, 2.5vw, 24px);
	font-weight:900;
	color:#111;
	margin:0;
	display:flex;
	align-items:center;
	gap:10px;
	line-height:1.3;
}

.nco-section-icon{
	color:#0070ba;
	font-size:.85em;
}

.nco-section-link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	font-weight:600;
	color:#0070ba;
	text-decoration:none;
	white-space:nowrap;
	padding:8px 18px;
	border-radius:50px;
	border:1.5px solid rgba(0,112,186,.20);
	background:rgba(0,112,186,.05);
	transition:all .2s ease;
}
.nco-section-link:hover{
	background:rgba(0,112,186,.12);
	border-color:rgba(0,112,186,.35);
	transform:translateX(2px);
}
.nco-section-link i{
	font-size:11px;
	transition:transform .2s ease;
}
.nco-section-link:hover i{
	transform:translateX(3px);
}

/* Light variant — for use on dark banner overlays */
.nco-section-link-light{
	color:#fff;
	border-color:rgba(255,255,255,.35);
	background:rgba(255,255,255,.12);
	margin-top:14px;
}
.nco-section-link-light:hover{
	background:rgba(255,255,255,.22);
	border-color:rgba(255,255,255,.55);
	color:#fff;
}

/* ══════════════════════════════════════
   Top Picks — Product Scroll Container
   ══════════════════════════════════════ */

/* Desktop: normal grid wrap inside the card */
.nco-picks-scroll{
	background:#fff;
	border:none;
	border-radius:16px;
	padding:18px 100px;
	box-shadow:none;
	max-width:100%;
	overflow:hidden;
}

/* Mobile: horizontal scroll */
@media (max-width: 768px){
	.nco-picks-scroll{
		padding:14px;
		overflow:hidden;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		max-width:100%;
	}
	.nco-picks-scroll::-webkit-scrollbar{
		display:none;
	}

	/* Force products into a single horizontal row */
	.nco-picks-scroll .woocommerce ul.products,
	.nco-picks-scroll ul.products{
		display:flex !important;
		flex-wrap:nowrap !important;
		gap:14px;
		padding-bottom:4px;
		width:max-content;
		max-width:none;
	}

	.nco-picks-scroll ul.products li.product{
		min-width:160px;
		max-width:180px;
		flex:0 0 auto;
		scroll-snap-align:start;
		margin:0 !important;
		width:auto !important;
	}
}

/* ══════════════════════════════════════
   Category Showcase Section
   (Air Conditioners, etc.)
   ══════════════════════════════════════ */

.nco-cat-showcase{
	margin-top:32px;
	max-width:100%;
	overflow:hidden;
}

/* ── Banner with image ── */
.nco-cat-showcase-banner{
	position:relative;
	border-radius:16px;
	overflow:hidden;
	min-height:200px;
	display:flex;
	align-items:flex-end;
}
.nco-cat-showcase-banner img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.nco-cat-showcase-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(
		180deg,
		rgba(0,20,50,.30) 0%,
		rgba(0,20,50,.80) 100%
	);
}
.nco-cat-showcase-banner-text{
	position:relative;
	z-index:1;
	padding:28px 24px;
}
.nco-cat-showcase-badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:rgba(255,255,255,.14);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	border:1px solid rgba(255,255,255,.20);
	color:#fff;
	font-size:12px;
	font-weight:700;
	padding:5px 14px;
	border-radius:50px;
	margin-bottom:10px;
	letter-spacing:.3px;
}
.nco-cat-showcase-title{
	color:#fff;
	font-size:clamp(20px, 3vw, 30px);
	font-weight:900;
	margin:0 0 8px;
	line-height:1.2;
	text-shadow:0 2px 10px rgba(0,0,0,.30);
}
.nco-cat-showcase-subtitle{
	color:rgba(255,255,255,.80);
	font-size:clamp(13px, 1.6vw, 15px);
	margin:0;
	max-width:480px;
	line-height:1.5;
}

/* ── Sub-category pill buttons ── */
.nco-cat-showcase-tags{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin:18px 0;
}
.nco-cat-tag{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 18px;
	border-radius:50px;
	font-size:13px;
	font-weight:700;
	color:#333;
	background:#fff;
	border:1.5px solid rgba(0,0,0,.10);
	text-decoration:none;
	transition:all .2s ease;
	letter-spacing:.2px;
}
.nco-cat-tag:hover{
	background:rgba(0,112,186,.08);
	border-color:rgba(0,112,186,.30);
	color:#0070ba;
	transform:translateY(-1px);
	box-shadow:0 4px 14px rgba(0,112,186,.12);
}
.nco-cat-tag i{
	font-size:12px;
	opacity:.7;
}
.nco-cat-tag-count{
	font-size:11px;
	font-weight:800;
	background:rgba(0,0,0,.06);
	padding:2px 7px;
	border-radius:50px;
	color:#555;
}
.nco-cat-tag:hover .nco-cat-tag-count{
	background:rgba(0,112,186,.12);
	color:#0070ba;
}

/* "All" button — slightly emphasized */
.nco-cat-tag-all{
	background:linear-gradient(135deg,#0070ba 0%,#005a96 100%);
	color:#fff;
	border-color:transparent;
}
.nco-cat-tag-all:hover{
	background:linear-gradient(135deg,#005a96 0%,#004578 100%);
	color:#fff;
	box-shadow:0 4px 16px rgba(0,112,186,.30);
}
.nco-cat-tag-all .nco-cat-tag-count{
	background:rgba(255,255,255,.20);
	color:#fff;
}

/* ── Responsive ── */
@media (max-width: 1092px){
	.nco-cat-showcase-banner{
		min-height:170px;
	}
	.nco-cat-showcase-banner-text{
		padding:20px 16px;
	}
	.nco-cat-showcase-tags{
		gap:8px;
		display:flex;
		overflow-x:auto;
		flex-wrap:nowrap !important;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		padding-bottom:4px;
		margin-left:-4px;
		margin-right:-4px;
		padding-left:4px;
		padding-right:4px;
	}
	.nco-cat-showcase-tags::-webkit-scrollbar{display:none}
	.nco-cat-tag{
		flex:0 0 auto;
		white-space:nowrap;
		scroll-snap-align:start;
	}
}

/* ══════════════════════════════════════
   Grid / Sidebar tweaks
   ══════════════════════════════════════ */

/* ensure the home sidebar stays compact and docked */
.home .nco-grid{
	grid-template-columns:260px 1fr;
}

@media (max-width: 1092px){
	.home .nco-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   Hero Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px){
	.nco-hero{
		min-height:340px;
	}
	.nco-hero-content{
		padding:40px 18px;
	}
	.nco-hero-btn{
		padding:10px 22px;
		font-size:14px;
	}
}