/**
 * Product index page styles
 *
 * @copyright   2026, ON1
 */

/* !- Hero */
.hero {
	align-items: center;
	aspect-ratio: 2880 / 1200;
	background: url(https://ononesoft.cachefly.net/images/products/v2/hero-bg@2x.jpg) center center no-repeat;
	background-size: cover;
	display: flex;
	margin-top: 0;
	max-width: 100%;
	min-height: 600px;
	position: relative;
}

@media (max-width: 575.98px) {
	.hero {
		min-height: 640px;
	}
}

.hero::before {
	background: radial-gradient(ellipse 62% 85% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0) 70%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

@media (max-width: 991.98px) {
	.hero::before {
		background: rgba(0, 0, 0, 0.65);
	}
}

.hero .eyebrow {
	background: rgba(33, 206, 110, 0.067);
	border: 1px solid rgba(33, 206, 110, 0.267);
	border-radius: 0.25em;
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.25rem 0.75rem;
}

.hero-h1 {
	color: var(--white);
	font-size: var(--text-6xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-bottom: 1.25rem;
}

.hero-sub-bold {
	color: var(--white);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0.875rem;
}

.hero-sub {
	color: var(--text);
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2.25rem;
}

.hero-buttons {
	justify-content: center;
	margin-bottom: 2.25rem;
}

.hero-proof {
	color: var(--text-white);
	font-size: var(--text-xs);
	margin: 0;
}

.hero-proof .list-inline-item {
	margin-right: 1.75rem;
	padding-left: 0.875rem;
	position: relative;
}

.hero-proof .list-inline-item:last-child {
	margin-right: 0;
}

.hero-proof .list-inline-item::before {
	background: var(--green);
	border-radius: 50%;
	content: '';
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.375rem;
}

/* !- Eyebrow */
.eyebrow {
	color: var(--green);
}

/* !- Product chooser */
#choose-options.section-block {
	padding-bottom: 5rem;
}

#choose-options .section-copy {
	padding: 5rem 4.375rem 3.75rem;
}

@media (max-width: 575.98px) {
	#choose-options .section-copy {
		padding: 5rem 0;
	}
}

#choose-options .btn {
	font-size: var(--text-sm);
	padding: 0.5rem 0.75rem;
}

.opt-btn {
	background: var(--slate-900);
	border: 1px solid var(--slate-800);
	border-radius: 0.375rem;
	cursor: pointer;
	font-size: var(--text-sm);
	padding: 0.625rem 1rem;
}

.opt-btn.active {
	background: rgba(33, 206, 110, 0.2);
	border: 1px solid var(--green);
	color: var(--green);
}

.opt-btn .check i {
	font-weight: 400;
}

.opt-btn.active .check i {
	font-weight: 900;
}

.recommendation {
	background: var(--slate-900);
	border: 1px solid var(--slate-800);
	border-radius: 0.375rem;
}

.rec-header {
	border-bottom: 1px solid var(--slate-800);
	padding: 1.5rem 2rem 1.25rem;
}

.rec-header .eyebrow {
	font-size: var(--text-micro);
	margin-bottom: 0.5rem;
}

.product-top {
	align-items: center;
	column-gap: 1rem;
	display: grid;
	grid-template-columns: auto 1fr;
	margin-bottom: 1.25rem;
}

.product-top .prod-icon {
	grid-column: 1;
	grid-row: 1 / 3;
}

.product-card {
	border-bottom: 1px solid var(--slate-800);
	padding: 1.75rem;
}

.rec-body > .col:last-child .product-card {
	border-bottom: none;
}

@media ( min-width: 768px ) {
	.product-card {
		border-bottom: none;
		border-right: 1px solid var(--slate-800);
	}

	.rec-body > .col:last-child .product-card {
		border-right: none;
	}
}

.product-card .product-name {
	color: var(--text);
	font-weight: 600;
	margin-bottom: 0;
}

.product-card .product-tagline {
	color: var(--slate-300);
	font-size: var(--text-xs);
	margin-bottom: 0;
}

.product-card .on1-badge {
	align-self: flex-start;
	background: rgba(33, 206, 110, 0.067);
	border: 1px solid rgba(33, 206, 110, 0.267);
	border-radius: 0.25em;
	color: var(--green);
	display: inline-block;
	font-size: var(--text-mini);
	font-weight: 500;
	margin-bottom: 1.25rem;
	padding: 0.125rem 0.5rem;
}

.product-card .feature-bullets {
	margin-bottom: 1.75rem;
	margin-top: 0;
	padding-left: 0.75rem;
}

.section-block.individual-product .section-h2 {
	align-items: center;
	display: flex;
}

.section-block.individual-product .section-h2 img {
	border: 1px solid transparent;
	border-radius: 0.55rem;
	margin-right: 0.625rem;
}

.section-block.individual-product .section-h2 img.needs-border {
	border: 1px solid var(--slate-800);
	border-radius: 0.55rem;
}

.section-block.individual-product .feature-bullets {
	margin-bottom: 1.75rem;
	margin-top: 0;
}