/**
 * Vastar Eyewear OEM & ODM page draft.
 * All rules are scoped to the Gutenberg .vastar-oem wrapper.
 * Depends only on tokens present in the Studio child theme's baseline main.css.
 */

.vastar-oem {
	--vastar-oem-ink: var(--hocin-color-heading, #161616);
	--vastar-oem-text: var(--hocin-color-text, #333333);
	--vastar-oem-muted: var(--hocin-color-text-secondary, #6f6f6f);
	--vastar-oem-line: var(--hocin-color-border, #e5e5e2);
	--vastar-oem-paper: var(--hocin-color-background, #f7f7f5);
	--vastar-oem-white: var(--hocin-color-surface, #ffffff);
	--vastar-oem-accent: var(--hocin-color-accent, #d86a2c);
	--vastar-oem-focus: #a84212;
	background: var(--vastar-oem-paper);
	color: var(--vastar-oem-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-inline: auto;
	max-width: 1280px;
	width: 100%;
}

.vastar-oem .vastar-oem__section {
	border-bottom: 1px solid var(--vastar-oem-line);
	padding: 48px 16px;
}

.single-content .vastar-oem > .vastar-oem__section {
	margin-bottom: 0;
	margin-top: 0;
}

.vastar-oem .vastar-oem__section:last-child {
	border-bottom: 0;
}

.vastar-oem .vastar-oem__section > :first-child,
.vastar-oem .vastar-oem__card > :first-child,
.vastar-oem .vastar-oem__faq-item > :first-child {
	margin-top: 0;
}

.vastar-oem .vastar-oem__section > :last-child,
.vastar-oem .vastar-oem__card > :last-child,
.vastar-oem .vastar-oem__faq-item > :last-child {
	margin-bottom: 0;
}

.vastar-oem .vastar-oem__eyebrow {
	color: var(--vastar-oem-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.vastar-oem .vastar-oem__h1,
.vastar-oem .vastar-oem__h2,
.vastar-oem .vastar-oem__h3 {
	color: var(--vastar-oem-ink);
	font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.vastar-oem .vastar-oem__h1 {
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.1;
	margin: 0;
	max-width: 12ch;
}

.vastar-oem .vastar-oem__h2 {
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.18;
	margin: 0 0 16px;
	max-width: 22ch;
}

.vastar-oem .vastar-oem__h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 8px;
}

.vastar-oem .vastar-oem__lead {
	color: var(--vastar-oem-text);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.55;
	margin: 0;
	max-width: 42rem;
}

.vastar-oem .vastar-oem__intro,
.vastar-oem .vastar-oem__body {
	line-height: 1.65;
	max-width: 48rem;
}

.vastar-oem .vastar-oem__intro {
	color: var(--vastar-oem-muted);
	margin: 0 0 32px;
}

.vastar-oem .vastar-oem__body {
	margin: 0;
}

.vastar-oem .vastar-oem__hero {
	background: var(--vastar-oem-ink);
	color: var(--vastar-oem-white);
}

.vastar-oem .vastar-oem__hero .vastar-oem__eyebrow {
	color: #d8d8d5;
}

.vastar-oem .vastar-oem__hero .vastar-oem__h1,
.vastar-oem .vastar-oem__hero .vastar-oem__lead {
	color: var(--vastar-oem-white);
}

.vastar-oem .vastar-oem__hero-note {
	border-left: 2px solid var(--vastar-oem-accent);
	color: #e5e5e2;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 32px 0 0;
	max-width: 30rem;
	padding-left: 16px;
}

.vastar-oem .wp-block-image.vastar-oem__image {
	margin: 0;
	min-width: 0;
}

.vastar-oem .vastar-oem__image img {
	border-radius: 8px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vastar-oem .vastar-oem__image figcaption {
	color: var(--vastar-oem-muted);
	font-size: 0.75rem;
	line-height: 1.4;
	margin: 8px 0 0;
	text-align: left;
}

.vastar-oem .vastar-oem__hero-image {
	margin-top: 32px;
}

.vastar-oem .vastar-oem__hero-image img,
.vastar-oem .vastar-oem__product-image img {
	aspect-ratio: 4 / 3;
}

.vastar-oem .vastar-oem__hero-image figcaption {
	color: #d8d8d5;
}

.vastar-oem .vastar-oem__custom-image img {
	aspect-ratio: 3 / 2;
	border-radius: 4px;
}

.vastar-oem .vastar-oem__workflow-image {
	margin-bottom: 32px;
}

.vastar-oem .vastar-oem__workflow-image img {
	aspect-ratio: 2 / 1;
}

.vastar-oem .wp-block-image.vastar-oem__custom-image,
.vastar-oem .wp-block-image.vastar-oem__product-image {
	margin: 0 auto 24px;
	max-width: 500px;
	width: 100%;
}

.vastar-oem .wp-block-image.vastar-oem__custom-image {
	margin-bottom: 20px;
}

.vastar-oem .vastar-oem__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 32px;
}

.vastar-oem .vastar-oem__card,
.vastar-oem .vastar-oem__faq-item {
	background: var(--vastar-oem-white);
	border: 1px solid var(--vastar-oem-line);
	border-radius: 8px;
	min-width: 0;
	padding: 24px;
}

.vastar-oem .vastar-oem__grid > .vastar-oem__card,
.vastar-oem .vastar-oem__faq-list > .vastar-oem__faq-item {
	margin-block: 0;
}

.vastar-oem .vastar-oem__card .vastar-oem__body,
.vastar-oem .vastar-oem__faq-item .vastar-oem__body {
	color: var(--vastar-oem-muted);
}

.vastar-oem .vastar-oem__index {
	color: #9a4a20;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 24px;
}

.vastar-oem .vastar-oem__category {
	align-items: end;
	display: flex;
	min-height: 112px;
}

.vastar-oem .vastar-oem__category .vastar-oem__h3 {
	margin: 0;
}

.vastar-oem .vastar-oem__faq-list {
	display: grid;
	gap: 16px;
	margin-top: 32px;
}

.vastar-oem .vastar-oem__cta {
	background: var(--vastar-oem-white);
	text-align: center;
}

.vastar-oem .vastar-oem__cta .vastar-oem__h2,
.vastar-oem .vastar-oem__cta .vastar-oem__intro {
	margin-inline: auto;
}

.vastar-oem .vastar-oem__cta .vastar-oem__cta-actions {
	justify-content: center;
}

.vastar-oem .vastar-oem__cta-button,
.vastar-oem .vastar-oem__cta .wp-block-button__link {
	align-items: center;
	background: var(--vastar-oem-accent);
	border: 1px solid var(--vastar-oem-accent);
	border-radius: 4px;
	color: var(--vastar-oem-ink);
	display: inline-flex;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	margin-top: 8px;
	min-height: 44px;
	padding: 12px 24px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.vastar-oem .vastar-oem__cta-button:hover:not(:disabled),
.vastar-oem .vastar-oem__cta .wp-block-button__link:hover {
	background: #b8521c;
	border-color: #b8521c;
	color: var(--vastar-oem-ink);
}

.vastar-oem .vastar-oem__cta-button:focus-visible,
.vastar-oem .vastar-oem__cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--vastar-oem-focus);
	outline-offset: 3px;
}

.vastar-oem .vastar-oem__cta-button:disabled {
	background: var(--vastar-oem-line);
	border-color: var(--vastar-oem-line);
	color: var(--vastar-oem-muted);
	cursor: not-allowed;
}

@media (min-width: 768px) {
	.vastar-oem .vastar-oem__section {
		padding: 64px 32px;
	}

	.vastar-oem .vastar-oem__grid,
	.vastar-oem .vastar-oem__faq-list {
		gap: 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vastar-oem .vastar-oem__hero {
		align-items: center;
		display: grid;
		gap: 48px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 560px;
		padding-block: 96px;
	}

	.vastar-oem .vastar-oem__hero > :not(.vastar-oem__hero-image) {
		grid-column: 1;
	}

	.vastar-oem .vastar-oem__hero-image {
		align-self: center;
		grid-column: 2;
		grid-row: 1 / span 4;
		margin-top: 0;
	}

	.vastar-oem .vastar-oem__hero-note {
		margin-top: 48px;
	}

	.vastar-oem .vastar-oem__grid-three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media (min-width: 1200px) {
	.vastar-oem .vastar-oem__grid-four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vastar-oem .vastar-oem__cta-button,
	.vastar-oem .vastar-oem__cta .wp-block-button__link {
		transition: none;
	}
}