/* ==============================================================================
   Elementor-Style Full-Width Hero Banner Stylesheet
   Shoptimizer Child Theme - OG Hemp
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

/* Full Width Hero Container */
.elementor-style-hero {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	visibility: visible !important;
	position: relative !important;
	width: 100vw !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	background: linear-gradient(135deg, #0d2319 0%, #1b3d2f 50%, #081710 100%) !important;
	color: #ffffff !important;
	padding: 96px 24px 108px 24px !important;
	min-height: 570px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	border-bottom: 1px solid rgba(46, 204, 113, 0.25) !important;
	margin-bottom: 40px !important;
	z-index: 10 !important;
}

/* Decorative Ambient Radial Glow */
.elementor-style-hero::before {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 800px !important;
	height: 450px !important;
	background: radial-gradient(circle, rgba(46, 204, 113, 0.2) 0%, rgba(13, 35, 25, 0) 70%) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* Content Container */
.elementor-hero-inner {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

/* Breadcrumb Pill */
.hero-breadcrumb-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(8px) !important;
	padding: 6px 18px !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: #e2e8f0 !important;
	margin-bottom: 20px !important;
}

.hero-breadcrumb-pill a {
	color: #2ecc71 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.hero-breadcrumb-pill a:hover {
	color: #ffffff !important;
}

.hero-breadcrumb-pill .sep {
	opacity: 0.5 !important;
	font-size: 11px !important;
}

/* Hero H1 Title */
.elementor-hero-inner h1.hero-title,
h1.hero-title {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 44px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
	margin: 0 0 16px 0 !important;
	letter-spacing: -0.5px !important;
	text-transform: none !important;
}

.elementor-hero-inner h1.hero-title span,
h1.hero-title span {
	background: linear-gradient(135deg, #2ecc71 0%, #a8e6cf 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	display: inline !important;
}

/* Hero Subtitle */
.elementor-hero-inner p.hero-tagline,
p.hero-tagline {
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: #cbd5e1 !important;
	max-width: 780px !important;
	margin: 0 auto 28px auto !important;
	font-weight: 400 !important;
}

/* Badges Row */
.hero-badges-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-top: 12px !important;
}

.hero-badge-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(13, 35, 25, 0.7) !important;
	border: 1px solid rgba(46, 204, 113, 0.4) !important;
	padding: 8px 18px !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #f1f5f9 !important;
}

.hero-badge-pill svg {
	color: #2ecc71 !important;
	flex-shrink: 0 !important;
}

/* Responsive Rules */
@media (max-width: 768px) {
	.elementor-style-hero {
		padding: 40px 16px 48px 16px !important;
		margin-bottom: 28px !important;
	}

	.elementor-hero-inner h1.hero-title,
	h1.hero-title {
		font-size: 30px !important;
	}

	.elementor-hero-inner p.hero-tagline,
	p.hero-tagline {
		font-size: 15px !important;
	}

	.hero-badges-row {
		gap: 10px !important;
	}

	.hero-badge-pill {
		font-size: 12px !important;
		padding: 6px 12px !important;
	}
}

/* Hide duplicate old heading widget on Power of Hemp blog page & WooCommerce shop header */
.page-id-18 .elementor-element-d774212,
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
	display: none !important;
}

/* Interactive Category Filter Pills Row */
.hero-category-pills-row {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 28px !important;
	width: 100% !important;
}

.category-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 22px !important;
	background: rgba(13, 35, 25, 0.85) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 30px !important;
	color: #f1f5f9 !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.25s ease !important;
	backdrop-filter: blur(8px) !important;
}

.category-pill:hover {
	background: rgba(46, 204, 113, 0.25) !important;
	border-color: #2ecc71 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(46, 204, 113, 0.35) !important;
}

.category-pill.active {
	background: #2ecc71 !important;
	border-color: #2ecc71 !important;
	color: #081710 !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 15px rgba(46, 204, 113, 0.5) !important;
}

.category-pill .count-badge {
	background: rgba(0, 0, 0, 0.35) !important;
	color: #e2e8f0 !important;
	padding: 2px 8px !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
}

.category-pill.active .count-badge {
	background: rgba(8, 23, 16, 0.3) !important;
	color: #081710 !important;
}

@media (max-width: 768px) {
	.hero-category-pills-row {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		justify-content: flex-start !important;
		padding-bottom: 8px !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.category-pill {
		flex-shrink: 0 !important;
		font-size: 13px !important;
		padding: 8px 14px !important;
	}
}

/* Shop & Category Archives Container Breathing Space & Right Margin Uniformity */
.post-type-archive-product .site-content > .col-full,
.tax-product_cat .site-content > .col-full,
.post-type-archive-product #content,
.tax-product_cat #content {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box !important;
}

.post-type-archive-product #primary,
.tax-product_cat #primary {
	width: 100% !important;
	padding-right: 15px !important;
	box-sizing: border-box !important;
}

.post-type-archive-product ul.products,
.tax-product_cat ul.products {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product {
	box-sizing: border-box !important;
}