/*
 * Homeward & Kin: Home page (static front page), direction A "Gallery".
 * design/gallery-build/SPEC.md §3; target: design/directions/a-gallery/index.html.
 * Loaded on the front page only by mu-plugins/hk-design-home.php. Owned by the Home builder.
 *
 * Sections (each a WPBakery row with .hk-row from css/hk-base.css, which spans the screen
 * and makes the column wrapper a padded .hk-wrap):
 *   1a .hkh-hero-media  worn diptych (swipe track on phones, 2-up from 768)
 *   1b .hkh-hero-copy   H1 + lead, price, the one black button, assurance line
 *   2  .hkh-months      [hk_home_months]: 12 flower crops, gold / steel toggle
 *   3  .hkh-cards       the three cards on Mist (swipe row on phones, 3-up from 768)
 *   3b .hkh-band        one full-bleed photo (in the hand, window light): the break
 *   4  .hkh-arrives     [hk_home_arrives]: the Mist stage with callouts, then spec rows
 *   5  .hkh-story       type only
 *   6  .hkh-mom         Mist band, text link
 *   7  .hkh-faq         4 accordions; the page ends here (no closing button, no
 *                       phone sticky bar: the hero button is the one call to action)
 *
 * Tokens, type classes and shared components (.hk-h1, .hk-toggle, .hk-acc, .hk-spec,
 * .hk-ph, .hk-btn, .hk-buybar …) come from css/hk-base.css (foundations); this file only
 * lays the sections out and fits Salient's markup to them.
 * Breakpoints: 640, 768, 900, 1024, 1200 (the prototype's).
 * Motion: one moment, the hero "settle" (starts visible, scale only, off with reduced
 * motion); the month-tile hover zoom on pointer devices is feedback.
 */

/* ---------------------------------------------------------------------------
 * 0. Page frame and Salient spacing inside the Home rows
 * ------------------------------------------------------------------------ */

body.hk-home .container-wrap,
body.hk-home .container-wrap .main-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.hk-home .main-content > .row {
	padding-bottom: 0 !important;
}

body.hk-home .wpb_row.hk-row {
	margin-top: 0;
	scroll-margin-top: 12px;
}

/* Salient's clearfix pseudo-elements would become items of the grids below. */
body.hk-home .hk-row > .row_col_wrap_12::before,
body.hk-home .hk-row > .row_col_wrap_12::after,
body.hk-home .hk-row .row_col_wrap_12_inner::before,
body.hk-home .hk-row .row_col_wrap_12_inner::after {
	content: none;
	display: none;
}

body.hk-home .hk-row .wpb_column {
	float: none;
	min-height: 0;
}

/*
 * Salient makes full-width rows "equal height" and turns every column (and, under
 * 1000 px, the column wrapper) into a flex box. The Home layouts are grids set on the
 * wrapper below, so the columns go back to plain blocks.
 */
body.hk-home .wpb_row.vc_row.hk-row > .span_12 > .vc_column_container,
body.hk-home .wpb_row.vc_row.hk-row > .span_12 > .vc_column_container > .vc_column-inner,
body.hk-home .wpb_row.vc_row.hk-row .inner_row > .row_col_wrap_12_inner > .vc_column_container > .vc_column-inner {
	display: block;
}

/*
 * Type classes set on a paragraph itself (<p class="hk-story">, <p class="hk-small">):
 * hk-base.css sizes them with "body .hk-story", which loses to its own
 * "body .container-wrap p" base size. Re-assert the §1.1 sizes here for Home's markup.
 * (REQUEST → foundations: raise these in hk-base.css; this block can then go.)
 */
body.hk-home .container-wrap p.hk-small {
	font-size: 14px;
	line-height: 1.45;
}

body.hk-home .container-wrap p.hk-lead {
	font-size: 16.5px;
	line-height: 1.5;
}

body.hk-home .container-wrap p.hk-story {
	font-size: 26px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: var(--hk-ink);
}

@media (min-width: 768px) {
	body.hk-home .container-wrap p.hk-lead {
		font-size: 18px;
	}
}

@media (min-width: 1024px) {
	body.hk-home .container-wrap p.hk-story {
		font-size: 46px;
		line-height: 1.12;
		letter-spacing: -0.03em;
	}
}

body.hk-home .hk-row .wpb_wrapper > div,
body.hk-home .hk-row .wpb_content_element,
body.hk-home .hk-row .img-with-aniamtion-wrap,
body.hk-home .hk-row .inner_row {
	margin-bottom: 0 !important;
}

body.hk-home .hk-row .inner_row {
	margin-top: 0;
	padding: 0 !important;
}

body.hk-home .hk-row .inner_row > .row-bg-wrap {
	display: none;
}

body.hk-home .hk-row .img-with-aniamtion-wrap .inner,
body.hk-home .hk-row .img-with-aniamtion-wrap .hover-wrap,
body.hk-home .hk-row .img-with-aniamtion-wrap .hover-wrap-inner {
	display: block;
	width: 100%;
}

body.hk-home .hk-row img.img-with-animation {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 !important;
}

body.hk-home .hk-row :is(h1, h2, h3, p, ul, dl, dd, details) {
	margin-top: 0;
	margin-bottom: 0;
}

body.hk-home .hk-row :is(h1, h2, h3, p):not(.hk-acc p) {
	padding-bottom: 0;
}

/* Empty paragraphs left by wpautop around conditional shortcodes. */
body.hk-home .hk-row p:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 1a. Hero: the worn diptych
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.vc_row.hkh-hero-media > .row_col_wrap_12 {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

body.hk-home .wpb_row.vc_row.hkh-hero-media > .row_col_wrap_12::-webkit-scrollbar {
	display: none;
}

body.hk-home .hkh-hero-media .hkh-hero-fig {
	position: relative;
	flex: 0 0 100%;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	scroll-snap-align: start;
}

body.hk-home .hkh-hero-fig > .vc_column-inner,
body.hk-home .hkh-hero-fig .wpb_wrapper {
	position: relative;
	height: 100%;
}

body.hk-home .hkh-hero-fig .img-with-aniamtion-wrap {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hk-mist);
}

body.hk-home .hkh-hero-fig .img-with-aniamtion-wrap .inner,
body.hk-home .hkh-hero-fig .img-with-aniamtion-wrap .hover-wrap,
body.hk-home .hkh-hero-fig .img-with-aniamtion-wrap .hover-wrap-inner {
	height: 100%;
}

body.hk-home .hkh-hero-fig img.hkh-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/*
 * The one authored motion on Home (SPEC §1.6): the photos "settle" from 1.035 to 1 once
 * on load. They are fully visible from the first frame (opacity never changes). The
 * scale runs on the image's wrapper, because hk-base.css pins every Salient
 * .img-with-animation to transform: none !important (its no-hidden-content safety net).
 */
@media (prefers-reduced-motion: no-preference) {
	body.hk-home .hkh-hero-fig .hover-wrap-inner {
		transform-origin: 50% 42%;
		animation: hk-settle 1.4s var(--hk-ease-out) both;
	}
}

/* Phones: the swipe track's keyboard focus ring is drawn inside the photos (an outline
 * on the full-bleed track would fall off the screen edges and under the header). */
body.hk-home .wpb_row.vc_row.hkh-hero-media > .row_col_wrap_12:focus-visible {
	outline: none;
}

body.hk-home .wpb_row.vc_row.hkh-hero-media > .row_col_wrap_12:focus-visible .img-with-aniamtion-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: inset 0 0 0 2px var(--hk-gilt);
	pointer-events: none;
}

body.hk-home .hkh-hero-cap {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 12px;
	z-index: 1;
	margin: 0 !important;
	pointer-events: none;
}

body.hk-home .hkh-hero-cap p {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: #ffffff;
	font-size: 12.5px;
	line-height: 1.35;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

body.hk-home .hkh-hero-cap .hkh-count {
	flex: none;
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
	body.hk-home .wpb_row.vc_row.hkh-hero-media > .row_col_wrap_12 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px;
		overflow: visible;
	}

	body.hk-home .hkh-hero-fig .img-with-aniamtion-wrap {
		aspect-ratio: auto;
		height: clamp(420px, calc(100vh - 330px), 720px);
		height: clamp(420px, calc(100svh - 330px), 720px);
	}

	body.hk-home .hkh-hero-cap {
		left: 24px;
		bottom: 18px;
	}

	body.hk-home .hkh-hero-cap p {
		font-size: 13px;
	}

	body.hk-home .hkh-hero-cap .hkh-count {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 1b. Hero copy and the buy block (the page's one in-page black button)
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.vc_row.hkh-hero-copy > .row_col_wrap_12 {
	display: block;
	padding-top: 18px;
	padding-bottom: 8px;
}

body.hk-home .hkh-hero-copy .wpb_column {
	width: 100% !important;
}

/* The prototype's break ("Birth flower name / necklace" at 390), not a balanced one. */
body.hk-home .hkh-hero-title h1.hk-h1 {
	text-wrap: wrap;
}

body.hk-home .container-wrap .hkh-hero-title p.hk-lead {
	max-width: 46ch;
	margin-top: 10px;
	font-size: 15.5px;
}

body.hk-home .hkh-buy {
	margin-top: 16px !important;
}

body.hk-home .hkh-buy .wpb_wrapper {
	display: grid;
	gap: 12px;
}

body.hk-home .hkh-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	line-height: 1.3;
}

body.hk-home .hkh-price b {
	color: var(--hk-ink);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

body.hk-home .hkh-price span {
	color: var(--hk-stone);
	font-size: 13.5px;
}

body.hk-home .hkh-price span:empty {
	display: none;
}

body.hk-home .hkh-assure {
	color: var(--hk-stone);
	font-size: 13.5px;
	line-height: 1.45;
}

body.hk-home .hkh-assure strong {
	color: var(--hk-ink);
	font-weight: 500;
}

@media (min-width: 768px) {
	body.hk-home .wpb_row.vc_row.hkh-hero-copy > .row_col_wrap_12 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 48px;
		padding-top: 28px;
	}

	body.hk-home .hkh-hero-copy .wpb_column {
		width: auto !important;
	}

	body.hk-home .container-wrap .hkh-hero-title p.hk-lead {
		max-width: 54ch;
		font-size: 17px;
	}

	body.hk-home .hkh-buy {
		margin-top: 0 !important;
	}

	body.hk-home .hkh-buy .wpb_wrapper {
		grid-template-columns: auto auto;
		align-items: center;
		gap: 12px 28px;
	}

	body.hk-home .hkh-price {
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
		text-align: right;
	}

	body.hk-home .hkh-buy .hkh-assure-block {
		grid-column: 1 / -1;
		justify-self: end;
		max-width: 44ch;
		text-align: right;
	}

	body.hk-home .container-wrap a.nectar-button.hkh-cta--hero {
		min-width: 232px;
	}
}

@media (min-width: 1200px) {
	body.hk-home .wpb_row.vc_row.hkh-hero-copy > .row_col_wrap_12 {
		padding-top: 32px;
	}

	body.hk-home .hkh-hero-title .hk-h1 {
		margin-bottom: 4px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Start with her birth month ([hk_home_months])
 * ------------------------------------------------------------------------ */

body.hk-home .hkh-months__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 40px;
	margin-bottom: 24px;
}

body.hk-home .hkh-months__head .hk-toggle[hidden] {
	display: none;
}

body.hk-home .hkh-months__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hk-home .hkh-months__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hk-home .hkh-tile {
	display: block;
	color: var(--hk-ink);
	text-decoration: none;
}

body.hk-home .hkh-tile__img {
	aspect-ratio: 4 / 5;
}

body.hk-home .hkh-tile__m {
	display: block;
	margin-top: 8px;
	color: var(--hk-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
}

body.hk-home .hkh-tile__f {
	display: block;
	color: var(--hk-stone);
	font-size: 11.5px;
	line-height: 1.3;
	hyphens: manual;
}

/* Feedback, pointer devices only (SPEC §1.6). */
@media (hover: hover) and (pointer: fine) {
	body.hk-home .hkh-tile__img img {
		transition: transform 0.5s ease;
	}

	body.hk-home .hkh-tile:hover .hkh-tile__img img {
		transform: scale(1.04);
	}
}

@media (min-width: 640px) {
	body.hk-home .hkh-months__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 28px 14px;
	}

	body.hk-home .hkh-tile__m {
		margin-top: 10px;
		font-size: 14.5px;
	}

	body.hk-home .hkh-tile__f {
		font-size: 13.5px;
	}
}

@media (min-width: 1024px) {
	body.hk-home .hkh-months__head {
		margin-bottom: 36px;
	}
}

@media (min-width: 1200px) {
	body.hk-home .hkh-months__grid {
		gap: 36px 20px;
	}
}

/* ---------------------------------------------------------------------------
 * 3. The card it arrives on
 * ------------------------------------------------------------------------ */

body.hk-home .hk-row .wpb_wrapper > div.hkh-cards-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 40px;
	margin-bottom: 24px !important;
}

body.hk-home .hkh-cards-head .hk-small {
	max-width: 40ch;
}

/* Phones: a swipe row that bleeds into the gutters. */
body.hk-home .wpb_row.vc_row.hkh-card-row > .row_col_wrap_12_inner {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	margin: 0 calc(var(--hk-gutter) * -1);
	padding: 6px var(--hk-gutter) 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--hk-gutter);
	scrollbar-width: none;
}

body.hk-home .wpb_row.vc_row.hkh-card-row > .row_col_wrap_12_inner::-webkit-scrollbar {
	display: none;
}

body.hk-home .hkh-card-row .hkh-card {
	flex: 0 0 80%;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

body.hk-home .hkh-card img.hkh-card-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* The printed card lies on a Mist ground like every product photo (no shadow). */
body.hk-home .hkh-card .img-with-aniamtion-wrap {
	box-sizing: border-box;
	padding: 9%;
	background: var(--hk-mist);
	box-shadow: none;
}

body.hk-home .hkh-card .img-with-aniamtion-wrap :is(.inner, .hover-wrap, .hover-wrap-inner) {
	box-shadow: none;
}

body.hk-home .hkh-card-cap {
	margin-top: 18px !important;
}

body.hk-home .hkh-card-t {
	color: var(--hk-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

body.hk-home .hkh-card-w {
	color: var(--hk-stone);
	font-size: 14px;
	line-height: 1.45;
}

body.hk-home .hkh-read {
	margin-top: 10px !important;
}

body.hk-home .hkh-read > summary {
	display: inline-block;
	color: var(--hk-ink);
	font-size: 14px;
	line-height: 1.45;
	list-style: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hk-line-strong);
	text-underline-offset: 4px;
	cursor: pointer;
}

/* A 44px hit area without changing the look. */
body.hk-home .hkh-read > summary {
	padding: 12px 0;
	margin: -12px 0;
}

body.hk-home .hkh-read > summary::-webkit-details-marker {
	display: none;
}

body.hk-home .hkh-read > summary:hover {
	text-decoration-color: var(--hk-ink);
}

body.hk-home .hkh-read > p {
	margin-top: 10px;
	color: var(--hk-ink-2);
	font-size: 15px;
	line-height: 1.6;
}

body.hk-home .hkh-read > p i {
	display: block;
	margin-top: 6px;
	color: var(--hk-stone);
}

@media (min-width: 768px) {
	body.hk-home .hk-row .wpb_wrapper > div.hkh-cards-head {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: end;
		gap: 28px;
	}

	body.hk-home .hkh-cards-head .hk-h2 {
		grid-column: 1 / 3;
	}

	body.hk-home .hkh-cards-head .hk-small {
		grid-column: 3;
		max-width: 36ch;
	}

	body.hk-home .wpb_row.vc_row.hkh-card-row > .row_col_wrap_12_inner {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		margin: 0;
		padding: 6px 0 0;
		overflow: visible;
	}

	/* The card art is legible from here, so the typed copy of it goes. */
	body.hk-home .hkh-read {
		display: none;
	}
}

@media (min-width: 1024px) {
	body.hk-home .hk-row .wpb_wrapper > div.hkh-cards-head {
		margin-bottom: 36px !important;
	}
}

@media (min-width: 1200px) {
	body.hk-home .hk-row .wpb_wrapper > div.hkh-cards-head,
	body.hk-home .wpb_row.vc_row.hkh-card-row > .row_col_wrap_12_inner {
		gap: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * 3b. The break: one full-bleed photo between the cards and What arrives. No
 * heading: the photo carries the section (real necklaces, window light, a hand
 * for scale). Square on phones, a wide crop from 768.
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.vc_row.hkh-band {
	padding-top: 0 !important;
	padding-bottom: var(--hk-sec-y) !important;
}

body.hk-home .hkh-band .hkh-band-fig {
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
}

body.hk-home .hkh-band .img-with-aniamtion-wrap {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	background: var(--hk-mist);
}

body.hk-home .hkh-band .img-with-aniamtion-wrap :is(.inner, .hover-wrap, .hover-wrap-inner) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body.hk-home .hkh-band img.hkh-band-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	object-position: 50% 45%;
}

body.hk-home .hkh-band .hkh-band-cap {
	margin: 10px 0 0 !important;
	padding: 0 var(--hk-gutter);
}

body.hk-home .hkh-band .hkh-band-cap p {
	color: var(--hk-stone);
	font-size: 13px;
	line-height: 1.4;
}

@media (min-width: 768px) {
	body.hk-home .hkh-band .img-with-aniamtion-wrap {
		aspect-ratio: auto;
		height: clamp(420px, 52vw, 760px);
	}

	body.hk-home .hkh-band .hkh-band-cap {
		box-sizing: border-box;
		max-width: calc(var(--hk-max) + 2 * var(--hk-gutter));
		margin: 12px auto 0 !important;
	}
}

/* ---------------------------------------------------------------------------
 * 4. What arrives ([hk_home_arrives]) and the spec rows
 * ------------------------------------------------------------------------ */

body.hk-home .hkh-stage {
	position: relative;
	margin: 0 calc(var(--hk-gutter) * -1);
	background: var(--hk-mist);
}

body.hk-home .hkh-stage__copy {
	padding: 28px var(--hk-gutter) 4px;
}

body.hk-home .hkh-stage__copy .hk-small {
	max-width: 34ch;
	margin-top: 10px;
}

body.hk-home .hkh-stage--no-img .hkh-stage__copy {
	padding-bottom: 28px;
}

body.hk-home img.hkh-stage__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	mix-blend-mode: multiply;
}

body.hk-home .hkh-stage__note {
	padding: 2px var(--hk-gutter) 14px;
	color: var(--hk-stone);
	font-size: 12.5px;
	line-height: 1.4;
}

body.hk-home .hkh-callout {
	display: none;
}

body.hk-home .hkh-spec-block {
	margin-top: 28px !important;
}

body.hk-home .hk-row .hk-spec > div > :is(dt, dd) {
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	body.hk-home .hkh-stage {
		margin: 0;
		container-type: inline-size;
		aspect-ratio: 100 / 63;
	}

	body.hk-home img.hkh-stage__img {
		position: absolute;
		left: 22cqw;
		top: 3.5cqw;
		width: 56cqw;
		height: 56cqw;
	}

	body.hk-home .hkh-stage__copy {
		position: absolute;
		left: 3.2cqw;
		top: 3.2cqw;
		width: 17cqw;
		padding: 0;
	}

	body.hk-home .hkh-stage__note {
		position: absolute;
		right: 3.2cqw;
		bottom: 2.6cqw;
		max-width: 34cqw;
		padding: 0;
		text-align: right;
	}

	body.hk-home .hkh-callout {
		position: absolute;
		top: calc(3.5cqw + var(--y) * 56cqw);
		display: flex;
		align-items: center;
		margin: 0;
		color: var(--hk-ink-2);
		font-size: 14px;
		line-height: 1.35;
		white-space: nowrap;
		transform: translateY(-50%);
	}

	body.hk-home .hkh-callout span {
		flex: none;
	}

	body.hk-home .hkh-callout::before,
	body.hk-home .hkh-callout::after {
		content: "";
	}

	body.hk-home .hkh-callout--l {
		left: 3.2cqw;
		width: calc(22cqw + var(--x) * 56cqw - 3.2cqw);
	}

	body.hk-home .hkh-callout--l span {
		order: 0;
		padding-right: 12px;
	}

	body.hk-home .hkh-callout--l::before {
		order: 1;
		flex: 1;
		height: 1px;
		background: var(--hk-ink);
		opacity: 0.55;
	}

	body.hk-home .hkh-callout--l::after {
		order: 2;
		width: 7px;
		height: 7px;
		margin-right: -3.5px;
		border-radius: 50%;
		background: var(--hk-ink);
		box-shadow: 0 0 0 2px #ffffff;
	}

	body.hk-home .hkh-callout--r {
		left: calc(22cqw + var(--x) * 56cqw);
		right: 3.2cqw;
	}

	body.hk-home .hkh-callout--r::before {
		order: 0;
		width: 7px;
		height: 7px;
		margin-left: -3.5px;
		border-radius: 50%;
		background: var(--hk-ink);
		box-shadow: 0 0 0 2px #ffffff;
	}

	body.hk-home .hkh-callout--r::after {
		order: 1;
		flex: 1;
		height: 1px;
		background: var(--hk-ink);
		opacity: 0.55;
	}

	body.hk-home .hkh-callout--r span {
		order: 2;
		padding-left: 12px;
		text-align: left;
	}

	body.hk-home .hkh-spec-block {
		margin-top: 36px !important;
	}
}

/* 1024-1199: the left margin of the stage is narrower than the longest callout, so the
 * left callouts wrap instead of running into the render. */
@media (min-width: 1024px) and (max-width: 1199px) {
	body.hk-home .hkh-callout {
		font-size: 13px;
		line-height: 1.3;
		white-space: normal;
	}

	body.hk-home .hkh-callout--l span {
		max-width: calc(18.8cqw - 12px);
	}
}

/* ---------------------------------------------------------------------------
 * 5. Why we make it (type only)
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.vc_row.hkh-story > .row_col_wrap_12 {
	position: relative;
	display: grid;
	gap: 18px;
}

body.hk-home .hkh-story .wpb_column {
	width: 100% !important;
}

body.hk-home .hkh-story .hk-story {
	max-width: 26ch;
}

body.hk-home .hkh-story-p {
	max-width: 52ch;
	margin-top: 18px !important;
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	body.hk-home .wpb_row.vc_row.hkh-story > .row_col_wrap_12 {
		grid-template-columns: 3fr 9fr;
		gap: 20px 40px;
		padding-top: 56px;
	}

	/* The hairline across the top, inside the wrap. */
	body.hk-home .wpb_row.vc_row.hkh-story > .row_col_wrap_12::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: var(--hk-gutter);
		right: var(--hk-gutter);
		height: 1px;
		background: var(--hk-line);
	}

	body.hk-home .hkh-story .hkh-story-l {
		width: auto !important;
		padding-top: 12px !important;
	}

	body.hk-home .hkh-story .hkh-story-r {
		width: auto !important;
	}

	body.hk-home .hkh-story .hk-story {
		max-width: 24ch;
	}

	body.hk-home .hkh-story-p {
		margin-top: 32px !important;
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------------
 * 6. One for Mom (Mist band)
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.hkh-mom {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
	background-color: var(--hk-mist);
}

body.hk-home .wpb_row.vc_row.hkh-mom > .row_col_wrap_12 {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: start;
	gap: 18px;
}

body.hk-home .hkh-mom .wpb_column {
	width: auto !important;
}

body.hk-home .hkh-mom img.hkh-mom-card {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* Salient's image wrappers form their own blend group: give it the Mist ground so the
 * render's white surround multiplies into the band instead of showing as a box. */
body.hk-home .hkh-mom .img-with-aniamtion-wrap .hover-wrap-inner {
	background: var(--hk-mist);
}

body.hk-home .hkh-mom .hkh-mom-h,
body.hk-home .hkh-mom .hk-h2.hkh-mom-h {
	font-size: 22px;
}

body.hk-home .hkh-mom-text p {
	max-width: 54ch;
	margin-top: 8px;
	color: var(--hk-ink-2);
	font-size: 15px;
	line-height: 1.55;
}

body.hk-home .hkh-mom .hkh-mom-buy {
	grid-column: 1 / -1;
}

body.hk-home .hkh-mom-buy-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 16px;
	border-top: 1px solid var(--hk-line-strong);
}

body.hk-home .hkh-mom-price b {
	color: var(--hk-ink);
	font-size: 18px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

body.hk-home .hkh-mom-price .hk-small {
	margin-left: 6px;
}

body.hk-home .hkh-mom-link a {
	font-size: 15px;
}

@media (min-width: 768px) {
	body.hk-home .hkh-mom .hkh-mom-h,
	body.hk-home .hkh-mom .hk-h2.hkh-mom-h {
		font-size: 30px;
	}
}

@media (min-width: 900px) {
	body.hk-home .wpb_row.hkh-mom {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	body.hk-home .wpb_row.vc_row.hkh-mom > .row_col_wrap_12 {
		grid-template-columns: 200px minmax(0, 1fr) auto;
		align-items: center;
		gap: 48px;
	}

	body.hk-home .hkh-mom .hkh-mom-buy {
		grid-column: auto;
	}

	body.hk-home .hkh-mom-buy-text {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
		padding-top: 0;
		border-top: 0;
		text-align: right;
	}
}

@media (min-width: 1200px) {
	body.hk-home .wpb_row.vc_row.hkh-mom > .row_col_wrap_12 {
		grid-template-columns: 220px minmax(0, 1fr) auto;
		gap: 64px;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Questions (the page ends here)
 * ------------------------------------------------------------------------ */

body.hk-home .wpb_row.vc_row.hkh-faq > .row_col_wrap_12 {
	display: grid;
	gap: 22px;
}

body.hk-home .hkh-faq .wpb_column {
	width: 100% !important;
}

body.hk-home .hkh-faq-more {
	margin-top: 10px !important;
}

body.hk-home .hkh-faq .hk-acc > p {
	margin: 0;
}

body.hk-home .hkh-faq .hk-acc > p:last-child {
	padding-bottom: 20px;
}

/* "Personalize hers · $49.95": the three parts spaced like .hk-btn's own gap. */
body.hk-home .container-wrap a.nectar-button.hkh-cta > span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

@media (min-width: 1024px) {
	body.hk-home .wpb_row.vc_row.hkh-faq > .row_col_wrap_12 {
		grid-template-columns: 5fr 7fr;
		gap: 72px;
	}

	body.hk-home .hkh-faq .wpb_column {
		width: auto !important;
	}
}