/*
 * Homeward & Kin: content pages, Direction A "Gallery" (design/gallery-build/SPEC.md §5.4).
 *   Our story (About)  WPBakery rows: hero (title | worn photo), one column of facts
 *   FAQ                WPBakery row: intro + help panel | <details class="hk-acc"> list
 *   Policy pages       Shipping, Refund and returns, Privacy, Terms, Contact,
 *                      Track your order: Gutenberg content in .hk-page, one reading column
 *   Store pages        My account and 404 in the policy pages' reading column
 *                      (/shop/ redirects to the necklace; front-end search is off)
 *
 * Loaded only on those pages by mu-plugins/hk-design-content.php, which adds the
 * body classes .hkc + .hkc--about | .hkc--faq | .hkc--legal, and .hkc-util +
 * .hkc-util--shop | --account | --404. Every rule is scoped to them.
 *
 * Tokens (--hk-*) and the shared classes (.hk-row, .hk-sec, .hk-h1 … .hk-caption,
 * .hk-num, .hk-link, .hk-btn, .hk-acc, .hk-panel) come from hk-base.css
 * (foundations). This file only lays the pages out. Header, footer and the offer
 * bar belong to hk-chrome.css.
 *
 * Motion: one moment, on About only: the hero photo "settles" from 1.035 to 1 once
 * on load (the Home hero's hk-settle keyframes). It is fully visible from the
 * first frame, only the scale moves, and it is off under prefers-reduced-motion.
 * No entrance animations, no reveals. The FAQ intro stays in view with
 * position: sticky (layout, not motion).
 *
 * Breakpoints: 640, 768, 1024, 1200 (the prototype's).
 */

/* ------------------------------------------------------------------ */
/* 1. Page frame                                                       */
/* ------------------------------------------------------------------ */

body.hkc .container-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.hkc .container-wrap .main-content > .row {
	padding-bottom: 0;
}

/* Text inside our WPBakery rows: no theme paddings or margins; spacing is set below. */
body.hkc .hk-row .wpb_text_column :where(p, h1, h2, h3, h4, ul, ol, li) {
	margin: 0;
	padding: 0;
}

body.hkc .hk-row .wpb_text_column :where(ul, ol, li) {
	list-style: none;
}

/* Owner notes (HTML comments) that wpautop wrapped in a <p> take no space. */
body.hkc .hk-row p:empty,
body.hkc .hk-page p:empty {
	display: none;
}

/* hk-base's type classes on a <p> lose to its own "body .container-wrap p"
 * (0,1,2 beats 0,1,1), so a p.hk-lead or p.hk-story would print at 16px.
 * The same values, restated for these pages until hk-base settles it. */
body.hkc .container-wrap p.hk-lead {
	font-size: 16.5px;
	line-height: 1.5;
}

body.hkc .container-wrap p.hk-story {
	font-size: 26px;
	line-height: 1.2;
}

body.hkc .container-wrap p.hk-small {
	font-size: 14px;
	line-height: 1.45;
}

body.hkc .container-wrap p.hk-caption {
	font-size: 13px;
	line-height: 1.4;
}

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

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

/* Salient's column grid is replaced by CSS grid inside our rows. */
body.hkc .hk-row > .row_col_wrap_12 {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
}

body.hkc .hk-row > .row_col_wrap_12::before,
body.hkc .hk-row > .row_col_wrap_12::after {
	content: none;
	display: none;
}

body.hkc .hk-row > .row_col_wrap_12 > .wpb_column {
	width: auto !important;
	min-width: 0;
	max-width: none;
	float: none;
	flex: none;
}

/* ------------------------------------------------------------------ */
/* 2. Our story (About)                                                */
/* ------------------------------------------------------------------ */

/* 2.1 Hero: the title, then the real worn photo (March daffodil, 18K gold finish).
 * Phones: the photo leads, full bleed under the header, as on Home and the
 * product page; the title follows. From 768: title | photo side by side. */
body.hkc .hk-row.hkc-hero {
	padding-top: 0 !important;
	padding-bottom: 56px !important;
}

body.hkc .hkc-hero > .row_col_wrap_12 {
	align-items: center;
	gap: 24px;
}

body.hkc .hkc-hero .hk-h1 {
	max-width: 20ch;
}

body.hkc .hkc-hero .hk-lead {
	max-width: 46ch;
	margin-top: 16px;
}

body.hkc .hk-row.hkc-hero .wpb_column.hkc-hero__media {
	order: -1;
	margin-left: calc(-1 * var(--hk-gutter));
	margin-right: calc(-1 * var(--hk-gutter));
}

/* Salient puts the el_class on the <img>; its wrappers are reached through the column. */
body.hkc .hkc-hero__media .img-with-aniamtion-wrap {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--hk-mist);
}

body.hkc .hkc-hero__media .img-with-aniamtion-wrap :is(.inner, .hover-wrap, .hover-wrap-inner) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 1 !important;
}

body.hkc .hkc-hero__media .img-with-aniamtion-wrap .inner {
	transform: none !important;
}

body.hkc img.hkc-photo {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	opacity: 1 !important;
	transform: none !important;
}

body.hkc .hkc-hero__media .hkc-photo__cap {
	margin-top: 10px !important;
	padding: 0 var(--hk-gutter);
}

/* The one authored motion on About: the photo settles once on load. It never
 * starts hidden (opacity is pinned to 1 above); the scale runs on the image's
 * inner wrapper because hk-base.css pins .img-with-animation and .hover-wrap to
 * transform: none !important. hk-base.css turns it off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	body.hkc .hkc-hero__media .img-with-aniamtion-wrap .hover-wrap-inner {
		transform-origin: 50% 50%;
		animation: hk-settle 1.4s var(--hk-ease-out) both;
	}
}

@media (min-width: 768px) {
	body.hkc .hk-row.hkc-hero {
		padding-top: 40px !important;
		padding-bottom: 64px !important;
	}

	body.hkc .hkc-hero > .row_col_wrap_12 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}

	body.hkc .hk-row.hkc-hero .wpb_column.hkc-hero__media {
		order: 0;
		margin-left: 0;
		margin-right: 0;
	}

	body.hkc .hkc-hero__media .hkc-photo__cap {
		padding: 0;
	}
}

@media (min-width: 1024px) {
	body.hkc .hk-row.hkc-hero {
		padding-top: 56px !important;
		padding-bottom: 88px !important;
	}

	body.hkc .hkc-hero > .row_col_wrap_12 {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 56px;
	}

	body.hkc .hkc-hero .hk-lead {
		margin-top: 20px;
	}
}

@media (min-width: 1200px) {
	body.hkc .hkc-hero > .row_col_wrap_12 {
		gap: 72px;
	}
}

/* 2.2 Who makes it: one reading column of plain facts under a hairline, set
 * on the hero's text edge. No side label, no display line, no closing button:
 * the page ends on the contact line. */
body.hkc .hkc-prose > .row_col_wrap_12 {
	position: relative;
	padding-top: 40px;
}

body.hkc .hkc-prose > .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.hkc .hkc-prose__text {
	max-width: 60ch;
}

body.hkc .container-wrap .hkc-prose__text p {
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.6;
}

body.hkc .container-wrap .hkc-prose__text p + p {
	margin-top: 16px;
}

body.hkc .container-wrap .hkc-prose__text p:first-child {
	color: var(--hk-ink);
}

/* Founder note: shown only once the owner writes it (placeholder hidden by the plugin). */
body.hkc .hkc-founder-note {
	max-width: 60ch;
	margin-top: 40px !important;
	padding: 20px 24px;
	background: var(--hk-mist);
}

body.hkc .hkc-founder-note p {
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.6;
}

body.hkc .hkc-founder-note p + p {
	margin-top: 10px;
}

@media (min-width: 1024px) {
	body.hkc .hkc-prose > .row_col_wrap_12 {
		padding-top: 56px;
	}

	body.hkc .container-wrap .hkc-prose__text p {
		font-size: 18px;
	}

	body.hkc .container-wrap .hkc-prose__text p + p {
		margin-top: 18px;
	}
}

/* Buttons on content pages: the dimmed " · " separator with the prototype's air
 * (hk-base resets every span in a Salient button to full opacity). */
body.hkc a.nectar-button.hk-btn span.sep {
	margin: 0 6px;
	opacity: 0.5 !important;
	font-weight: 400 !important;
}

/* ------------------------------------------------------------------ */
/* 3. FAQ                                                              */
/* ------------------------------------------------------------------ */

body.hkc .hkc-faq__head .hk-lead {
	max-width: 36ch;
	margin-top: 14px;
}

/* Help panel: the support address is its action (no buy button here). */
body.hkc .hkc-faq__help.hk-panel {
	padding: 20px;
}

body.hkc .hkc-faq__help p {
	margin-top: 6px;
	color: var(--hk-ink-2);
	font-size: 15px;
	line-height: 1.5;
}

body.hkc .container-wrap .hkc-faq__help p.hkc-faq__mail {
	margin-top: 10px;
	font-size: 18px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

body.hkc .hkc-faq__help p.hkc-faq__mail a {
	display: inline-block;
	padding: 6px 0;
	color: var(--hk-ink);
}

/* Answers: several paragraphs, links in the quiet underline. */
body.hkc .hkc-faq__qs .hk-acc > summary {
	margin: 0;
}

/* Spacing hangs below each paragraph, so the empty ones wpautop leaves around
 * the offer shortcodes and owner notes (hidden above) add nothing. */
body.hkc .hkc-faq__qs .hk-acc__body {
	padding-bottom: 10px;
}

body.hkc .hkc-faq__qs .hk-acc__body > * {
	margin: 0 0 10px;
}

body.hkc .hkc-faq__qs .hk-acc__body p {
	line-height: 1.6;
}

/* A question opened from a link (/faq/#christmas) lands clear of the edge. */
body.hkc .hkc-faq__qs .hk-acc {
	scroll-margin-top: 16px;
}

/* Future quarter photo beside the size answer (see the note in the page). */
body.hkc .hkc-faq-media {
	display: grid;
	gap: 16px;
}

body.hkc .hkc-photo-slot {
	margin: 0;
	background: var(--hk-mist);
}

body.hkc .hkc-photo-slot img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 640px) {
	body.hkc .hkc-faq-media {
		grid-template-columns: minmax(0, 1fr) 240px;
		align-items: start;
	}
}

/* Phones: title, then the questions, then the help panel. The intro column's
 * wrappers step aside (display: contents) so the panel can follow the list. */
@media (max-width: 1023px) {
	body.hkc .hkc-faq > .row_col_wrap_12 {
		gap: 0;
	}

	body.hkc .hkc-faq__intro,
	body.hkc .hkc-faq__intro > .vc_column-inner,
	body.hkc .hkc-faq__intro > .vc_column-inner > .wpb_wrapper {
		display: contents !important;
	}

	body.hkc .hkc-faq__head {
		order: 1;
	}

	body.hkc .hkc-faq__list {
		order: 2;
		margin-top: 28px !important;
	}

	body.hkc .hkc-faq__help {
		order: 3;
		margin-top: 40px !important;
	}
}

@media (min-width: 768px) {
	body.hkc .hkc-faq__head .hk-h1 {
		font-size: 48px;
		letter-spacing: -0.03em;
	}

	body.hkc .hkc-faq__help.hk-panel {
		padding: 24px;
	}
}

@media (min-width: 1024px) {
	/* Salient sets "body { overflow: hidden }", which makes the body a scroll
	 * container and stops position: sticky. overflow-x: clip still stops sideways
	 * scrolling without creating one. */
	body.hkc--faq {
		overflow-x: clip;
		overflow-y: visible;
	}

	body.hkc .hkc-faq > .row_col_wrap_12 {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 72px;
		align-items: start;
	}

	body.hkc .hkc-faq__intro {
		position: sticky;
		top: 24px;
	}

	body.hkc .hkc-faq__help {
		max-width: 400px;
		margin-top: 36px !important;
	}
}

@media (min-width: 1200px) {
	body.hkc .hkc-faq__head .hk-h1 {
		letter-spacing: -0.032em;
	}
}

/* ------------------------------------------------------------------ */
/* 4. Policy pages (Gutenberg content in .hk-page)                     */
/* ------------------------------------------------------------------ */

/* One reading column: 720px with the gutters (about 70 characters a line). */
body.hkc--legal .hk-page {
	box-sizing: border-box;
	max-width: calc(720px - 2 * var(--hk-gutter));
	margin: 0 auto;
	padding: 48px 0 96px;
	color: var(--hk-ink-2);
}

@media (min-width: 1024px) {
	body.hkc--legal .hk-page {
		padding-top: 72px;
	}
}

body.hkc--legal .hk-page > * {
	margin-top: 0;
	margin-bottom: 0;
}

body.hkc--legal .hk-page > * + * {
	margin-top: 16px;
}

body.hkc--legal .hk-page :where(p, li, td) {
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.65;
	padding-bottom: 0;
}

body.hkc--legal .hk-page strong {
	color: var(--hk-ink);
	font-weight: 500;
}

/* Title: the .hk-h1 style at 32 / 40px, sentence case, no period. */
body.hkc--legal .hk-page > .hk-page-title {
	margin: 0;
	padding: 0;
	color: var(--hk-ink);
	font-family: var(--hk-font-sans);
	font-weight: 300;
	font-size: 32px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-transform: none;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	body.hkc--legal .hk-page > .hk-page-title {
		font-size: 40px;
	}
}

/* "Effective / Questions" line under the title. */
body.hkc--legal .hk-page > .hk-page-title + p:not(.hk-lead) {
	margin-top: 18px;
	color: var(--hk-stone);
	font-size: 14px;
	line-height: 1.6;
}

body.hkc--legal .hk-page > .hk-page-title + p:not(.hk-lead) strong {
	color: var(--hk-ink-2);
}

body.hkc--legal .hk-page > p.hk-lead,
body.hkc--legal .hk-page p.hk-lead {
	max-width: 46ch;
	margin-top: 18px;
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	body.hkc--legal .hk-page p.hk-lead {
		font-size: 18px;
	}
}

/* Section headings: plain, numbered in gilt ink where the policy numbers them. */
body.hkc--legal .hk-page h2 {
	margin: 40px 0 0;
	padding: 0;
	color: var(--hk-ink);
	font-family: var(--hk-font-sans);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	scroll-margin-top: 16px;
}

body.hkc--legal .hk-page h2 .hk-num {
	margin-right: 4px;
}

body.hkc--legal .hk-page h3 {
	margin: 28px 0 0;
	padding: 0;
	color: var(--hk-ink);
	font-family: var(--hk-font-sans);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

body.hkc--legal .hk-page > :is(h2, h3) + * {
	margin-top: 12px;
}

body.hkc--legal .hk-page hr.wp-block-separator {
	width: 100%;
	max-width: none;
	height: 0;
	margin: 40px 0 0;
	border: 0;
	border-top: 1px solid var(--hk-line);
	background: none;
	opacity: 1;
}

body.hkc--legal .hk-page hr.wp-block-separator + h2 {
	margin-top: 28px;
}

/* Lists: 8px rhythm, quiet markers. */
body.hkc--legal .hk-page :is(ul, ol) {
	margin-left: 0;
	padding-left: 1.3em;
}

body.hkc--legal .hk-page ul {
	list-style: disc outside;
}

body.hkc--legal .hk-page ol {
	list-style: decimal outside;
}

body.hkc--legal .hk-page li {
	margin: 0;
	padding-left: 4px;
	list-style: inherit;
}

body.hkc--legal .hk-page li + li {
	margin-top: 8px;
}

body.hkc--legal .hk-page ul > li::marker {
	color: var(--hk-stone);
}

body.hkc--legal .hk-page ol > li::marker {
	color: var(--hk-gilt-ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Links: the Gallery text link. */
body.hkc--legal .hk-page a:not(.hk-btn):not(.button) {
	color: var(--hk-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hk-line-strong);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--hk-dur-control) ease;
	overflow-wrap: anywhere;
}

body.hkc--legal .hk-page a:not(.hk-btn):not(.button):hover {
	text-decoration-color: var(--hk-ink);
}

/* Tables: hairlines, stone headings; they scroll inside themselves on phones. */
body.hkc--legal .hk-page .wp-block-table {
	max-width: 100%;
	margin-top: 20px;
	overflow-x: auto;
}

body.hkc--legal .main-content .hk-page .wp-block-table table {
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	border-collapse: collapse;
}

body.hkc--legal .main-content .hk-page .wp-block-table :is(thead, tbody, tfoot, tr) {
	background: none;
	border: 0;
}

body.hkc--legal .main-content .hk-page .wp-block-table tr :is(th, td) {
	padding: 12px 16px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--hk-line);
	background: none;
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.5;
}

body.hkc--legal .main-content .hk-page .wp-block-table tr :is(th, td):last-child {
	padding-right: 0;
}

body.hkc--legal .main-content .hk-page .wp-block-table thead tr th {
	padding-top: 0;
	padding-bottom: 10px;
	border-bottom-color: var(--hk-line-strong);
	color: var(--hk-stone);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
}

@media (max-width: 639px) {
	body.hkc--legal .hk-page .wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	body.hkc--legal .main-content .hk-page .wp-block-table tr :is(th, td) {
		padding-right: 12px;
		font-size: 14px;
	}

	body.hkc--legal .main-content .hk-page .wp-block-table thead tr th {
		font-size: 13px;
	}
}

/* Facts only the owner can supply: highlighted for editors only. Visitors get
 * each mark's data-public text instead (hkc_public_placeholders()). */
body.hkc mark.hk-todo {
	padding: 0 0.2em;
	border-radius: 0;
	background: var(--hk-mist);
	color: var(--hk-ink);
	outline: 1px dashed var(--hk-error);
	outline-offset: 0;
}

/* Editors only: the list of placeholders left (hk-design-content.php). */
body.hkc--legal .hkc-todo {
	max-width: calc(720px - 2 * var(--hk-gutter));
	margin: 24px auto 0;
	padding: 16px;
	background: var(--hk-mist);
	color: var(--hk-ink-2);
	font-size: 14px;
	line-height: 1.5;
}

body.hkc--legal .hkc-todo p {
	font-size: 14px;
	padding: 0;
}

body.hkc--legal .hkc-todo p + p {
	margin-top: 6px;
	color: var(--hk-stone);
}

body.hkc--legal .hkc-todo + .hk-page {
	padding-top: 32px;
}

/* Contact: the address is the call to action. */
body.hkc--legal .hk-page p.hkc-contact-email {
	margin-top: 20px;
}

body.hkc--legal .hk-page p.hkc-contact-email a {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	body.hkc--legal .hk-page p.hkc-contact-email a {
		font-size: 22px;
	}
}

/* Track your order: WooCommerce's form in the Gallery fields, one black button. */
body.hkc--legal .hk-page > .woocommerce {
	margin-top: 28px;
}

body.hkc--legal .hk-page > .woocommerce + p {
	margin-top: 28px;
}

body.hkc--legal .hk-page .track_order {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* WooCommerce's own "To track your order…" line repeats the lead. */
body.hkc--legal .hk-page .track_order > p:first-child {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

body.hkc--legal .hk-page .track_order .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.hkc--legal .hk-page .track_order .clear {
	display: none;
}

body.hkc--legal .hk-page .track_order label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--hk-ink-2);
	font-family: var(--hk-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
}

body.hkc--legal .hk-page .track_order input.input-text {
	width: 100%;
}

body.hkc--legal .hk-page .track_order button[type="submit"] {
	width: 100%;
	margin-top: 4px;
}

@media (min-width: 640px) {
	body.hkc--legal .hk-page .track_order {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 16px;
	}

	body.hkc--legal .hk-page .track_order > .form-row:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}

	body.hkc--legal .hk-page .track_order button[type="submit"] {
		width: auto;
		min-width: 200px;
	}
}

/* WooCommerce notices on the tracking page (order not found). */
body.hkc--legal .hk-page .woocommerce-error,
body.hkc--legal .hk-page .woocommerce-info,
body.hkc--legal .hk-page .woocommerce-message {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: var(--hk-mist);
	color: var(--hk-ink-2);
	font-size: 15px;
	list-style: none;
}

body.hkc--legal .hk-page .woocommerce-error {
	color: var(--hk-error);
}

body.hkc--legal .hk-page :is(.woocommerce-error, .woocommerce-info, .woocommerce-message)::before {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------ */
/* 5. Store pages: Shop, My account, 404 (sanity pass only)            */
/* ------------------------------------------------------------------ */

/* Salient paints the shop archive grey (".post-type-archive-product.woocommerce .container-wrap"). */
body.hkc-util .container-wrap,
body.hkc-util #ajax-content-wrap,
body.hkc-util.woocommerce :is(.container-wrap, #page-header-wrap) {
	background-color: var(--hk-paper);
}

body.hkc-util :is(h1, h2, h3, h4) {
	color: var(--hk-ink);
	font-family: var(--hk-font-sans);
	text-transform: none;
	letter-spacing: -0.01em;
}

body.hkc-util :is(.price, .amount, .woocommerce-Price-amount) {
	color: var(--hk-ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

body.hkc-util :is(del, ins) {
	text-decoration: none;
}

/* Shop grid: product names and prices in the Gallery type; image grounds in Mist. */
body.hkc-util--shop .woocommerce-products-header__title,
body.hkc-util--shop .page-title {
	font-weight: 300;
	font-size: 34px;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

body.hkc-util--shop ul.products li.product {
	background: transparent;
	box-shadow: none;
}

body.hkc-util--shop ul.products li.product :is(.woocommerce-loop-product__title, h2, h3) {
	color: var(--hk-ink);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0;
}

body.hkc-util--shop ul.products li.product .price {
	color: var(--hk-ink-2);
	font-size: 15px;
}

body.hkc-util--shop ul.products li.product :is(.product-wrap, .product-image-wrap, .background-color-expand) {
	background-color: var(--hk-mist) !important;
}

body.hkc-util--shop .woocommerce-result-count {
	margin: 0 16px 0 0;
	color: var(--hk-stone);
	font-size: 14px;
	line-height: 52px;
}

body.hkc-util--shop :is(.onsale, .nectar-woo-flickity .onsale) {
	display: none !important;
}

/* My account: navigation as text links, tables on hairlines. */
body.hkc-util--account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hkc-util--account .woocommerce-MyAccount-navigation li a {
	color: var(--hk-stone);
	text-decoration: none;
}

body.hkc-util--account .woocommerce-MyAccount-navigation li.is-active a,
body.hkc-util--account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--hk-ink);
	box-shadow: inset 0 -1px 0 var(--hk-ink);
}

/* Account pages share the policy pages' reading column: a left-aligned H1
 * ("Sign in", "Your account", "Reset your password"), then the form, no box. */
body.hkc-util--account .container-wrap .main-content > .row {
	box-sizing: border-box;
	max-width: calc(720px - 2 * var(--hk-gutter));
	margin: 0 auto;
	padding: 48px 0 96px;
}

@media (min-width: 1024px) {
	body.hkc-util--account .container-wrap .main-content > .row {
		padding-top: 72px;
	}
}

body.hkc-util--account .woocommerce .hkc-account-title,
body.hkc-util--account .hkc-account-title {
	margin: 0 0 28px;
	padding: 0;
	color: var(--hk-ink);
	font-weight: 300;
	font-size: 32px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-align: left;
}

@media (min-width: 1024px) {
	body.hkc-util--account .woocommerce .hkc-account-title,
	body.hkc-util--account .hkc-account-title {
		font-size: 40px;
	}
}

body.hkc-util--account .woocommerce :is(form.login, form.register, form.lost_reset_password) {
	max-width: 440px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	text-align: left;
}

body.hkc-util--account .woocommerce form :is(.form-row, .woocommerce-form-row) {
	margin: 0 0 18px !important;
	padding: 0 !important;
}

body.hkc-util--account .woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	line-height: 1.4;
}

/* The required asterisks: the fields say so to screen readers already. */
body.hkc-util--account .woocommerce form label .required {
	display: none;
}

/* "Remember me" beside its box, then the full-width button on its own line. */
body.hkc-util--account .woocommerce form.login p.form-row:not(.form-row-wide) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
}

body.hkc-util--account .woocommerce form.login #rememberme {
	margin: 0;
}

body.hkc-util--account .woocommerce form label.woocommerce-form__label-for-checkbox {
	display: inline-block;
	margin: 0;
	padding: 10px 0;
}

body.hkc-util--account .woocommerce form label.woocommerce-form__label-for-checkbox > span:empty {
	display: none;
}

body.hkc-util--account .woocommerce form button.woocommerce-Button {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 14px 0 0;
}

body.hkc-util--account .woocommerce form .lost_password {
	margin: 16px 0 0 !important;
	font-size: 14px;
}

body.hkc-util--account .woocommerce form .lost_password a {
	display: inline-block;
	padding: 10px 0;
	color: var(--hk-ink-2);
}

/* Password reveal: a 44px target over the field's right edge (WCAG 2.5.8). */
body.hkc-util--account .woocommerce .password-input {
	position: relative;
	display: block;
}

body.hkc-util--account .woocommerce .password-input input {
	padding-right: 52px !important;
}

body.hkc-util--account .woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background-position: center;
}

body.hkc-util--account .woocommerce .show-password-input::after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
}

body.hkc-util--account .woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
}

body.hkc-util--account .woocommerce table.shop_table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--hk-line);
}

body.hkc-util .woocommerce :is(label, .woocommerce-form-row label) {
	color: var(--hk-ink-2);
	font-size: 14px;
	font-weight: 400;
}

/* 404 (themes/salient-child/404.php): the policy pages' reading column, a
 * left-aligned title, one line of copy and two text links. */
body.hkc-util--404 .container-wrap .main-content.hkc-404 {
	padding-top: 0;
	padding-bottom: 0;
}

body.hkc-util--404 .hkc-404__page {
	box-sizing: border-box;
	max-width: calc(720px - 2 * var(--hk-gutter));
	margin: 0 auto;
	padding: 48px 0 120px;
}

body.hkc-util--404 .hkc-404__page .hk-h1 {
	margin: 0;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

body.hkc-util--404 .container-wrap .hkc-404__page p {
	margin: 18px 0 0;
	padding: 0;
	max-width: 46ch;
	color: var(--hk-ink-2);
	font-size: 16.5px;
	line-height: 1.55;
}

body.hkc-util--404 .container-wrap .hkc-404__page p.hkc-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin-top: 22px;
}

body.hkc-util--404 .hkc-404__links a {
	display: inline-block;
	padding: 10px 0;
}

@media (min-width: 1024px) {
	body.hkc-util--404 .hkc-404__page {
		padding-top: 72px;
		padding-bottom: 160px;
	}

	body.hkc-util--404 .hkc-404__page .hk-h1 {
		font-size: 40px;
	}

	body.hkc-util--404 .container-wrap .hkc-404__page p {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------ */
/* 6. Reduced motion: nothing here moves on its own; colour changes    */
/*    on links and buttons also stop.                                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.hkc *,
	body.hkc-util * {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}