@layer hongli.components {
	.hg-kicker {
		color: var(--hg-blue-700);
		font-size: var(--hg-text-xs);
		font-weight: 800;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.hg-button {
		display: inline-flex;
		min-height: var(--hg-control-height);
		align-items: center;
		justify-content: center;
		gap: var(--hg-space-1);
		padding: 0.75rem 1.25rem;
		border: 0.0625rem solid transparent;
		border-radius: var(--hg-radius-sm);
		font-size: var(--hg-text-sm);
		font-weight: 750;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: background-color var(--hg-transition), border-color var(--hg-transition), color var(--hg-transition), transform var(--hg-transition);
	}

	.hg-button:hover {
		transform: translateY(-0.0625rem);
	}

	.hg-button--primary {
		color: var(--hg-ink-950);
		background: var(--hg-yellow-500);
	}

	.hg-button--secondary {
		color: var(--hg-white);
		background: var(--hg-blue-700);
	}

	.hg-button--outline {
		color: var(--hg-ink-950);
		border-color: var(--hg-border-strong);
		background: var(--hg-white);
	}

	.hg-button--whatsapp {
		color: var(--hg-white);
		background: var(--hg-green-600);
	}

	.hg-button--wide {
		width: 100%;
	}

	.hg-card {
		min-width: 0;
		border: 0.0625rem solid var(--hg-border);
		border-radius: var(--hg-radius-md);
		background: var(--hg-white);
		box-shadow: var(--hg-shadow-sm);
		overflow: clip;
	}

	.hg-card__body {
		display: grid;
		gap: var(--hg-space-2);
		padding: var(--hg-space-3);
	}

	.hg-media-frame {
		display: grid;
		aspect-ratio: 4 / 3;
		place-items: end center;
		padding: var(--hg-space-2);
		background: var(--hg-white);
		overflow: hidden;
	}

	.hg-media-frame img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: 50% 82%;
	}

	.hg-spec-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 0.0625rem solid var(--hg-border);
	}

	.hg-spec {
		display: grid;
		gap: 0.25rem;
		padding: var(--hg-space-2) 0;
		border-bottom: 0.0625rem solid var(--hg-border);
	}

	.hg-spec:nth-child(odd) {
		padding-right: var(--hg-space-2);
	}

	.hg-spec:nth-child(even) {
		padding-left: var(--hg-space-2);
	}

	.hg-spec__label {
		color: var(--hg-muted);
		font-size: var(--hg-text-xs);
	}

	.hg-spec__value {
		color: var(--hg-ink-950);
		font-weight: 750;
	}

	.hg-hero {
		position: relative;
		display: grid;
		min-height: clamp(30rem, 42vw, 36rem);
		isolation: isolate;
		overflow: clip;
	}

	.hg-hero__media,
	.hg-hero__overlay {
		position: absolute;
		inset: 0;
	}

	.hg-hero__media {
		z-index: -2;
		background: var(--hg-surface-soft);
	}

	.hg-hero__media picture,
	.hg-hero__media img {
		width: 100%;
		height: 100%;
	}

	.hg-hero__media img {
		object-fit: cover;
		object-position: var(--hg-hero-focus, 65% 50%);
	}

	.hg-hero__overlay {
		z-index: -1;
		background: linear-gradient(90deg, rgb(255 255 255 / 99%) 0%, rgb(255 255 255 / 97%) 31%, rgb(255 255 255 / 88%) 43%, rgb(255 255 255 / 24%) 60%, transparent 78%);
		pointer-events: none;
	}

	.hg-hero__content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		padding-block: var(--hg-space-8);
	}

	.hg-hero__copy {
		display: grid;
		gap: var(--hg-space-3);
		width: min(34rem, 46%);
	}

	.hg-hero__content p {
		font-size: var(--hg-text-lg);
	}

	.hg-breadcrumb {
		display: flex;
		flex-wrap: wrap;
		gap: var(--hg-space-1);
		color: var(--hg-muted);
		font-size: var(--hg-text-sm);
	}

	.hg-accordion {
		border-top: 0.0625rem solid var(--hg-border);
	}

	.hg-accordion details {
		border-bottom: 0.0625rem solid var(--hg-border);
	}

	.hg-accordion summary {
		padding-block: var(--hg-space-2);
		color: var(--hg-ink-950);
		font-weight: 750;
		cursor: pointer;
	}

	.hg-accordion details > div {
		padding-bottom: var(--hg-space-3);
	}

	@media (max-width: 74.999rem) {
		.hg-hero {
			min-height: 32rem;
		}

		.hg-hero__copy {
			width: min(31rem, 48%);
		}
	}

	@media (max-width: 47.999rem) {
		.hg-hero {
			display: block;
			min-height: 0;
		}

		.hg-hero__media {
			position: relative;
			inset: auto;
			height: clamp(13rem, 53vw, 17rem);
		}

		.hg-hero__media img {
			object-fit: contain;
			object-position: center;
		}

		.hg-hero__overlay {
			display: none;
		}

		.hg-hero__content {
			width: 100%;
			padding-block: var(--hg-space-4) var(--hg-space-5);
		}

		.hg-hero__copy {
			width: 100%;
		}

		.hg-hero__content h1 {
			font-size: clamp(2.25rem, 11vw, 3.25rem);
		}

		.hg-spec-grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.hg-spec:nth-child(n) {
			padding-inline: 0;
		}
	}
}