/* body.jakes-client-view-shell-page {
	margin: 0;
	background: var(--jakes-cream, #f6f0e8);
	color: var(--jakes-ink, #241c19);
} */

body.jakes-client-view-shell-page > header.tvhp7na {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

body.jakes-client-view-shell-page > header.tvhp7na > [data-etch-element="container"] {
	width: calc(100% - 2rem);
	max-width: none;
	margin-inline: auto;
}

.jakes-client-view-shell {
	box-sizing: border-box;
	width: min(100% - 2rem, var(--content-width, 76rem));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 5vw, 5rem);
}

/*
 * Product pages: ACSS gives every top-level <section> section padding, and the
 * Client View product section adds its own top margin. Both stacked on the
 * shell padding (about 187px at desktop), so the shell padding is the only gap.
 */
main.jakes-client-view-shell .product-information {
	margin-block-start: 0;
	padding-block-start: 0;
}

/* Builder pages: same stacking, from ACSS section padding on the Vue template section. */
main.jakes-client-view-shell .builder-page > .vue-plugin-template:first-child {
	padding-block-start: 0;
}

/*
 * Product pages, desktop: the image column spans the three right-hand rows
 * (options, Add to Quote, CTA slot), so its extra height was spread across them
 * and opened big gaps. Pack the rows at the top and let the last one absorb it.
 */
main.jakes-client-view-shell .product-desktop-sticky-boundary {
	grid-template-rows: auto auto 1fr;
	align-content: start;
}

/* "Need more options?" slot sits just under Add to Quote (offsets the 1.5rem row gap). */
main.jakes-client-view-shell .vp-template-slot--single-product-cta {
	margin-block-start: calc(var(--space-xs) - 1.5rem);
}

.jakes-client-view-shell.vue-plugin-shell-cart-default {
	width: 100%;
	padding-block-start: 0;
}

.jakes-client-view-shell.vue-plugin-shell-cart-default > #vue-plugin-app {
	box-sizing: border-box;
	width: min(100% - 2rem, var(--content-width, 76rem));
	margin-inline: auto;
}

.jakes-client-view-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(22rem, 46svh, 32rem);
	overflow: hidden;
	color: #fff;
}

.jakes-client-view-hero__image,
.jakes-client-view-hero__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jakes-client-view-hero__image {
	z-index: -2;
	object-fit: cover;
}

.jakes-client-view-hero__shade {
	z-index: -1;
	background: linear-gradient(90deg, rgba(35, 14, 13, .9), rgba(35, 14, 13, .42));
}

.jakes-client-view-hero__content {
	box-sizing: border-box;
	width: min(100% - 2rem, var(--content-width, 76rem));
	margin-inline: auto;
	padding-block: clamp(4rem, 8vw, 7rem);
}

.jakes-client-view-hero__content h1 {
	margin: .55rem 0 1rem;
	color: #fff;
	font-size: var(--h1, clamp(2.5rem, 5vw, 4.5rem));
	line-height: 1.05;
}

.jakes-client-view-hero__content p {
	max-width: 58ch;
	margin: 0;
	color: rgba(255, 255, 255, .9);
}

.jakes-client-view-hero__kicker {
	color: var(--jakes-gold, #e5a72e) !important;
	font-size: var(--text-s, .82rem);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 48rem) {
	.jakes-client-view-shell,
	.jakes-client-view-shell.vue-plugin-shell-cart-default > #vue-plugin-app,
	.jakes-client-view-hero__content {
		width: min(100% - 1.25rem, var(--content-width, 76rem));
	}
}