/*
 * Homeward & Kin: site chrome for Direction A "Gallery" on top of Salient's
 * header (format "centered-logo-between-menu-alt") and footer.
 * 1 offer bar · 2 header (desktop) · 3 bag · 4 header (phones) · 5 off-canvas
 * menu · 6 footer · 7 footer base row.   SPEC §2; prototype a-gallery/styles.css.
 *
 * Salient styles its header with IDs and !important, so these rules are
 * scoped under body.hk-site and use !important only where Salient does.
 * Salient switches to its phone header at 1024px and below (Theme Options
 * "Header Mobile Breakpoint" = 1024, printed as max-width: 1024px), so the
 * desktop header here starts at 1025px.
 */

:root {
	/* Menu icon (two lines, 20x12) and close icon (20px x), drawn as masks. */
	--hk-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M0 1h20M0 11h20' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	--hk-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 3l14 14M17 3L3 17' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	--hk-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 6.5h12l-.8 11H4.8L4 6.5Z' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.2 8.5V5.2a2.8 2.8 0 0 1 5.6 0v3.3' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
 * 1. Offer bar (Salient Secondary Header Bar = [hk_offer_bar]): ink ground,
 *    one line, centred; "|" separators; short wording under 768px. The
 *    items fit at 360px and up, so the plugin never rotates them.
 * ------------------------------------------------------------------------ */
html body.hk-site #header-outer #header-secondary-outer,
body.hk-site #header-secondary-outer {
	position: relative;
	top: auto;
	height: auto !important;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--hk-ink);
	color: var(--hk-on-ink);
	--hk-focus-color: var(--hk-gilt);
}

body.hk-site #header-secondary-outer > .container,
body.hk-site #header-secondary-outer > .container > nav {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
}

body.hk-site #header-secondary-outer > .container > nav {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	padding: 0;
}

body.hk-site #header-secondary-outer .nectar-center-text {
	position: static;
	left: auto;
	top: auto;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	transform: none;
	color: var(--hk-on-ink);
	font-family: var(--hk-font-sans);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	overflow: visible;
}

body.hk-site #header-secondary-outer .hk-offer-bar {
	height: auto;
}

/* 11px above and below the text: the strip is 35px tall, like the prototype.
 * The list clips itself (plugin), so the padding also keeps the link's
 * focus ring inside it. */
body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__list {
	padding: 11px 6px;
	font-size: inherit;
	line-height: 1;
}

body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__item {
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

/* The line fits at normal text spacing. With larger text or user spacing
 * overrides (WCAG 1.4.12) it wraps onto a second line instead of clipping
 * (the plugin clips the list to one line). Items never break inside. The
 * one-at-a-time mode below 360px keeps the plugin's own clip. */
body.hk-site #header-secondary-outer .hk-offer-bar:not(.is-compact) .hk-offer-bar__list {
	flex-wrap: wrap;
	row-gap: 6px;
	overflow: visible;
	white-space: normal;
}

body.hk-site #header-secondary-outer .hk-offer-bar:not(.is-compact) .hk-offer-bar__item {
	white-space: nowrap;
}

/* The launch link: a taller hit area inside the 35px strip, same look. */
body.hk-site #header-secondary-outer .hk-offer-bar:not(.is-compact) a.hk-offer-bar__link {
	display: inline-block;
	padding: 11px 0;
	margin: -11px 0;
}

/* Below 360px the plugin shows one item at a time ("compact") with a
 * Pause/Play button on the right: keep room for it and the 35px height. */
body.hk-site #header-secondary-outer .hk-offer-bar.is-compact .hk-offer-bar__list {
	padding: 11px 30px 11px 2px;
}

body.hk-site #header-secondary-outer .hk-offer-bar.is-compact .hk-offer-bar__item.is-active {
	padding-top: 0;
	padding-bottom: 0;
}

body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__toggle {
	color: var(--hk-on-ink);
}

body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__toggle:focus-visible {
	outline: 2px solid var(--hk-gilt);
	outline-offset: -2px;
}

body.hk-site #header-secondary-outer .hk-offer-bar b,
body.hk-site #header-secondary-outer .hk-offer-bar strong,
body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__price {
	font-weight: 500;
	color: #ffffff;
}

/* "|" at 40% instead of the plugin's "·". */
body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__sep {
	display: inline-block;
	margin: 0 10px;
	padding: 0;
	font-size: 0;
	line-height: 1;
	opacity: 0.4;
}

body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__sep::before {
	content: "|";
	font-size: 12.5px;
	font-weight: 300;
}

body.hk-site #header-secondary-outer .hk-offer-bar a.hk-offer-bar__link {
	color: inherit;
	text-decoration: none;
}

body.hk-site #header-secondary-outer .hk-offer-bar a.hk-offer-bar__link:hover,
body.hk-site #header-secondary-outer .hk-offer-bar a.hk-offer-bar__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.hk-site #header-secondary-outer .hk-offer-bar a.hk-offer-bar__link:focus-visible {
	outline: 2px solid var(--hk-gilt);
	outline-offset: 2px;
	border-radius: 0;
}

/* Long wording from 768px, short under it; returns only from 768px. */
body.hk-site #header-secondary-outer .hk-ob-long {
	display: none;
}

body.hk-site #header-secondary-outer .hk-ob-short {
	display: inline;
}

body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__item--returns {
	display: none !important;
}

/* Every item shows before (and without) the plugin script too: the line fits
 * from 360px. Below 360px the plugin's one-at-a-time rotation is the fallback. */
@media (min-width: 360px) {
	html body.hk-site #header-secondary-outer .hk-offer-bar:not(.is-ready) .hk-offer-bar__item:not(.is-active) {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}

	html body.hk-site #header-secondary-outer .hk-offer-bar:not(.is-ready) .hk-offer-bar__sep {
		display: inline-block;
	}
}

@media (min-width: 768px) {
	body.hk-site #header-secondary-outer .nectar-center-text {
		font-size: 13px;
	}

	body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__sep::before {
		font-size: 13px;
	}

	body.hk-site #header-secondary-outer .hk-ob-long {
		display: inline;
	}

	body.hk-site #header-secondary-outer .hk-ob-short {
		display: none;
	}

	body.hk-site #header-secondary-outer .hk-offer-bar .hk-offer-bar__item--returns {
		display: inline-flex !important;
	}
}

/* --------------------------------------------------------------------------
 * 2. Header: white, a 1px line under it, not sticky. Desktop (1025px and
 *    up): a 1fr auto 1fr grid with the nav left, the wordmark lockup centred
 *    and the bag right, 72px tall.
 * ------------------------------------------------------------------------ */
html body.hk-site #header-outer {
	position: relative !important;
	top: auto !important;
	transform: none !important;
	padding: 0 !important;
	background-color: var(--hk-paper) !important;
	border-bottom: 1px solid var(--hk-line);
	box-shadow: none !important;
	z-index: 9998;
}

body.hk-site #header-space {
	display: none !important;
	height: 0 !important;
}

body.hk-site #header-outer #top {
	background: var(--hk-paper);
}

body.hk-site #header-outer #top > .container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--hk-max) + 2 * var(--hk-gutter));
	margin: 0 auto;
	padding-left: var(--hk-gutter) !important;
	padding-right: var(--hk-gutter) !important;
}

html body.hk-site #header-outer #top > .container > .row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: var(--hk-header-h);
	margin: 0;
	padding: 0;
}

body.hk-site #header-outer #top > .container > .row::before,
body.hk-site #header-outer #top > .container > .row::after {
	content: none;
	display: none;
}

/* The three Salient columns become grid cells. */
html body.hk-site #header-outer #top > .container > .row > .col,
html body.hk-site #header-outer #top > .container > .row > .right-aligned-menu-items {
	position: static !important;
	float: none !important;
	width: auto !important;
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
}

html body.hk-site #header-outer #top > .container > .row > .span_3 {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

html body.hk-site #header-outer #top > .container > .row > .span_9 {
	display: contents !important;
}

/* Clearfix pseudo-elements of a display: contents column would become grid
 * items (a second row). */
html body.hk-site #header-outer #top > .container > .row > .col::before,
html body.hk-site #header-outer #top > .container > .row > .col::after {
	content: none !important;
	display: none !important;
}

html body.hk-site #header-outer #top > .container > .row > .span_9 > nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 0;
	float: none;
}

html body.hk-site #header-outer #top > .container > .row > .right-aligned-menu-items {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex !important;
	align-items: center;
	pointer-events: all;
}

/* Wordmark lockup: Besley 500 25px, gilt-ink italic ampersand, descriptor. */
html body.hk-site #header-outer #logo,
html body.hk-site #header-outer #top #logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static;
	margin: 0 !important;
	padding: 0;
	transform: none !important;
	color: var(--hk-ink) !important;
	text-decoration: none;
	line-height: 1;
	font-size: inherit;
}

body.hk-site #header-outer #logo .hk-wordmark {
	display: inline-grid;
	justify-items: center;
	white-space: nowrap;
}

body.hk-site #header-outer #logo .hk-wordmark__name {
	font-family: var(--hk-font-mark);
	font-weight: 500;
	font-size: 25px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--hk-ink);
}

body.hk-site #header-outer #logo .hk-amp {
	font-family: var(--hk-font-mark);
	font-style: italic;
	font-weight: 500;
	color: var(--hk-gilt-ink);
}

body.hk-site #header-outer #logo .hk-wordmark__descriptor {
	margin-top: 4px;
	font-family: var(--hk-font-sans);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--hk-stone);
}

body.hk-site #header-outer #logo:focus-visible {
	outline: var(--hk-focus);
	outline-offset: 4px;
}

/* Nav: Hanken 14px ink-2, 30px apart; current page ink with a 1px ink rule. */
html body.hk-site #header-outer #top nav > ul.sf-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	float: none;
	margin: 0;
	padding: 0;
}

html body.hk-site #header-outer #top nav > ul.sf-menu > li {
	float: none;
	margin: 0;
	padding: 0;
}

html body.hk-site #header-outer #top nav > ul.sf-menu > li.hk-ocm-only {
	display: none;
}

html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li > a {
	display: inline-block;
	margin: 0 !important;
	padding: 6px 0 !important;
	color: var(--hk-ink-2) !important;
	font-family: var(--hk-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: color var(--hk-dur-control) ease, box-shadow var(--hk-dur-control) ease;
}

html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li:not(#social-in-menu) > a:hover,
html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li.sfHover:not(#social-in-menu) > a,
html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li > a[aria-current],
html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li.current-menu-item > a,
html body.hk-site #header-outer[data-lhe] #top nav > ul.sf-menu > li.current_page_item > a {
	color: var(--hk-ink) !important;
	box-shadow: inset 0 -1px 0 var(--hk-ink);
}

/* Salient's hover underline / button effects on nav links. */
body.hk-site #header-outer #top nav > ul.sf-menu > li > a::after,
body.hk-site #header-outer #top nav > ul.sf-menu > li > a::before,
body.hk-site #header-outer #top nav > ul.sf-menu > li > a .menu-title-text::after {
	content: none !important;
	display: none !important;
}

body.hk-site #header-outer #top nav > ul.sf-menu > li > a .menu-title-text {
	color: inherit;
	text-decoration: none;
}

body.hk-site #header-outer #top nav > ul > li > a:focus-visible {
	outline: var(--hk-focus);
	outline-offset: var(--hk-focus-offset);
}

/* Dropdowns (none today): white, mist hover. */
body.hk-site #header-outer #top nav .sf-menu ul {
	background: var(--hk-paper);
	box-shadow: 0 10px 28px -8px rgba(40, 34, 20, 0.16);
}

/* --------------------------------------------------------------------------
 * 3. Bag: the 20px outline bag and a plain 12px tabular count, 6px apart.
 *    Desktop (.cart-contents) prints an inline SVG; Salient's first phone
 *    link prints an icon-font <i>, drawn here as the same bag.
 * ------------------------------------------------------------------------ */
body.hk-site #header-outer #top .right-aligned-menu-items nav,
body.hk-site #header-outer #top .right-aligned-menu-items ul.buttons,
body.hk-site #header-outer #top .right-aligned-menu-items li.nectar-woo-cart {
	display: flex;
	align-items: center;
	float: none;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;
}

body.hk-site #header-outer #top .cart-outer,
body.hk-site #header-outer #top .cart-menu-wrap,
body.hk-site #header-outer #top .cart-menu {
	position: relative !important;
	display: flex;
	align-items: center;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	transform: none !important;
	background: none !important;
	border: 0 !important;
}

body.hk-site #header-outer #top a.cart-contents,
body.hk-site #header-outer #top #mobile-cart-link {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	box-sizing: border-box;
	width: auto !important;
	min-width: 44px;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 0 0 10px !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	transform: none !important;
	color: var(--hk-ink-2) !important;
	line-height: 1 !important;
	text-decoration: none;
	background: none;
}

body.hk-site #header-outer #top a.cart-contents .cart-icon-wrap {
	position: static !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

body.hk-site #header-outer #top .hk-bag__icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

/* Salient's first phone link: the icon-font <i> becomes the same bag. */
html body.hk-site #header-outer #top #mobile-cart-link i.icon-salient-cart,
html body.hk-site #header-outer #top a.cart-contents i.icon-salient-cart {
	position: static !important;
	display: block !important;
	flex: none;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: inherit !important;
	background-color: currentColor !important;
	-webkit-mask: var(--hk-icon-bag) center / 20px 20px no-repeat;
	mask: var(--hk-icon-bag) center / 20px 20px no-repeat;
	transition: none !important;
}

body.hk-site #header-outer #top #mobile-cart-link i.icon-salient-cart::before,
body.hk-site #header-outer #top #mobile-cart-link i.icon-salient-cart::after,
body.hk-site #header-outer #top a.cart-contents i.icon-salient-cart::before {
	content: none !important;
}

/* The count: plain number, no circle, always shown (0 included). */
html body.hk-site #header-outer #top a.cart-contents .cart-wrap,
html body.hk-site #header-outer #top #mobile-cart-link .cart-wrap {
	position: static !important;
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	line-height: 1 !important;
	background: none !important;
}

html body.hk-site #header-outer #top a.cart-contents .cart-wrap span,
html body.hk-site #header-outer #top #mobile-cart-link .cart-wrap span {
	position: static !important;
	display: inline !important;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--hk-ink-2) !important;
	font-family: var(--hk-font-sans) !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	font-variant-numeric: tabular-nums;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body.hk-site #header-outer #top a.cart-contents:hover,
body.hk-site #header-outer #top #mobile-cart-link:hover {
	color: var(--hk-ink) !important;
}

body.hk-site #header-outer #top a.cart-contents:focus-visible,
body.hk-site #header-outer #top #mobile-cart-link:focus-visible {
	outline: var(--hk-focus);
	outline-offset: 0;
}

/* --------------------------------------------------------------------------
 * 4. Phones and tablets (Salient's phone header, 1024px and below): the
 *    same grid, 58px tall. Menu button left (two lines, 44px target),
 *    wordmark centred at 21px (20px under 390) with a 10.5px descriptor,
 *    bag right.
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	html body.hk-site #header-outer #top > .container > .row {
		height: 58px;
	}

	html body.hk-site #header-outer #top > .container > .row > .span_9 > nav,
	html body.hk-site #header-outer #top > .container > .row > .right-aligned-menu-items {
		display: none !important;
	}

	html body.hk-site #header-outer #top > .container > .row > .span_9 > .nectar-mobile-only.mobile-header {
		display: none !important;
	}

	/* Menu button. */
	html body.hk-site #header-outer #top :is(.span_9, .row) > .slide-out-widget-area-toggle.mobile-icon {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: flex !important;
		align-items: center;
		order: 0;
		width: 44px;
		height: 44px;
		margin: 0 0 0 -12px !important;
		padding: 0 !important;
		position: static !important;
		transform: none !important;
	}

	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon > div {
		position: static !important;
		top: auto !important;
		display: flex;
		width: 44px;
		height: 44px;
		transform: none !important;
	}

	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		color: var(--hk-ink) !important;
	}

	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a > span[aria-hidden="true"] {
		display: block !important;
		width: 20px;
		height: 12px;
		background-color: currentColor;
		-webkit-mask: var(--hk-icon-menu) center / 20px 12px no-repeat;
		mask: var(--hk-icon-menu) center / 20px 12px no-repeat;
	}

	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a > span[aria-hidden="true"] > * {
		display: none !important;
	}

	/* While the menu is open the same button is the close button: a 20px x. */
	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a[aria-expanded="true"] > span[aria-hidden="true"],
	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a.open > span[aria-hidden="true"] {
		width: 20px;
		height: 20px;
		-webkit-mask: var(--hk-icon-close) center / 20px 20px no-repeat;
		mask: var(--hk-icon-close) center / 20px 20px no-repeat;
	}

	html body.hk-site #header-outer #top .slide-out-widget-area-toggle.mobile-icon a:focus-visible {
		outline: var(--hk-focus);
		outline-offset: -4px;
	}

	/* Bag. */
	html body.hk-site #header-outer #top .span_9 > #mobile-cart-link {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		order: 0;
		margin-right: -2px !important;
	}

	/* Wordmark. */
	body.hk-site #header-outer #logo .hk-wordmark__name {
		font-size: 21px;
	}

	body.hk-site #header-outer #logo .hk-wordmark__descriptor {
		margin-top: 3px;
		font-size: 10.5px;
	}
}

@media (max-width: 389px) {
	body.hk-site #header-outer #logo .hk-wordmark__name {
		font-size: 20px;
	}
}

/* Salient hides the phone items on desktop with its own rules; keep them
 * out of the grid there. */
@media (min-width: 1025px) {
	html body.hk-site #header-outer #top :is(.span_9, .row) > .slide-out-widget-area-toggle,
	html body.hk-site #header-outer #top .span_9 > #mobile-cart-link,
	html body.hk-site #header-outer #top .span_9 > .nectar-mobile-only {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
 * 5. Off-canvas menu (phones; Salient "fullscreen-alt"): a white panel under
 *    the header. The big links (Hanken 300 28px ink, 14px apart), then the
 *    Help list in 15px stone. The header button closes it (a 20px x).
 * ------------------------------------------------------------------------ */
body.hk-site #slide-out-widget-area-bg,
body.hk-site #slide-out-widget-area-bg.fullscreen-alt {
	background-color: var(--hk-paper) !important;
}

body.hk-site #slide-out-widget-area-bg .bg-inner {
	background-color: var(--hk-paper) !important;
}

body.hk-site #slide-out-widget-area.fullscreen-alt {
	color: var(--hk-ink);
	font-family: var(--hk-font-sans);
	background: transparent;
}

body.hk-site #slide-out-widget-area.fullscreen-alt .inner-wrap {
	align-items: flex-start;
	padding-top: 94px !important; /* offer bar 35 + header 58 + rule 1 */
}

body.hk-site.hk-no-announcement #slide-out-widget-area.fullscreen-alt .inner-wrap {
	padding-top: 59px !important;
}

/* While the menu is open the header stays at the top of the screen, above
 * the panel, even if the page was scrolled (js/hk-chrome.js sets the class). */
html.hk-ocm-open body.hk-site #header-outer {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	width: 100%;
}

html.hk-ocm-open body.hk-site.admin-bar #header-outer {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}

body.hk-site #slide-out-widget-area.fullscreen-alt .inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0;
	/* Salient pads .inner-wrap by the header height, and the panel is 20px
	 * wider than the screen (it hides the scrollbar): compensate right. */
	padding: 32px calc(var(--hk-gutter) + 20px) 40px var(--hk-gutter) !important;
	text-align: left;
	top: 0;
	transform: none;
}

/* Salient's own close button duplicates the header button. */
body.hk-site #slide-out-widget-area.fullscreen-alt .slide_out_area_close {
	display: none !important;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container,
html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container .menu-wrap,
html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu {
	display: grid;
	gap: 14px;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu:empty {
	display: none;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li {
	margin: 0;
	padding: 0;
	line-height: 1.2;
	border: 0;
	text-align: left;
	opacity: 1 !important;
	transform: none !important;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li > a,
html body.hk-site #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container li a {
	display: block;
	width: fit-content;
	min-height: 0;
	padding: 2px 0;
	color: var(--hk-ink) !important;
	font-family: var(--hk-font-sans) !important;
	font-weight: 300 !important;
	font-size: 28px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-decoration: none;
	text-transform: none;
	opacity: 1 !important;
	transform: none !important;
	transition: color var(--hk-dur-control) ease;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li > a:hover {
	color: var(--hk-stone) !important;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container ul.menu > li > a[aria-current] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container li a::after,
html body.hk-site #slide-out-widget-area.fullscreen-alt .off-canvas-menu-container li a::before {
	content: none !important;
}

/* Help list (widget area "Off Canvas Menu", menu "Menu: Help (phone)"). */
html body.hk-site #slide-out-widget-area.fullscreen-alt .widget {
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hk-line);
	text-align: left;
	opacity: 1 !important;
	transform: none !important;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .widget .widget-title,
html body.hk-site #slide-out-widget-area.fullscreen-alt .widget h4 {
	margin: 0 0 10px;
	color: var(--hk-ink) !important;
	font-family: var(--hk-font-sans) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .widget ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .widget li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .widget li a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0;
	color: var(--hk-stone) !important;
	font-family: var(--hk-font-sans) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	text-decoration: none;
}

html body.hk-site #slide-out-widget-area.fullscreen-alt .widget li a:hover {
	color: var(--hk-ink) !important;
}

body.hk-site #slide-out-widget-area .bottom-meta-wrap:empty,
body.hk-site #slide-out-widget-area .off-canvas-menu-container ul.secondary-header-items:empty {
	display: none;
}

body.hk-site #slide-out-widget-area a:focus-visible {
	outline: var(--hk-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * 6. Footer: Mist, 14px. Brand block spanning both columns on phones; at
 *    900px a 2fr 1fr 1fr 1fr grid.
 * ------------------------------------------------------------------------ */
html body.hk-site #footer-outer {
	margin-top: 0;
	padding: 56px 0 28px;
	border: 0;
	background-color: var(--hk-mist) !important;
	color: var(--hk-stone);
	font-family: var(--hk-font-sans);
	font-size: 14px;
	line-height: 1.55;
}

html body.hk-site #footer-outer #footer-widgets {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

html body.hk-site #footer-outer #footer-widgets > .container,
html body.hk-site #footer-outer #copyright > .container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--hk-max) + 2 * var(--hk-gutter));
	margin: 0 auto;
	padding: 0 var(--hk-gutter) !important;
}

html body.hk-site #footer-outer #footer-widgets .container > .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
	margin: 0;
	padding: 0;
}

body.hk-site #footer-outer #footer-widgets .container > .row::before,
body.hk-site #footer-outer #footer-widgets .container > .row::after {
	content: none;
	display: none;
}

html body.hk-site #footer-outer #footer-widgets .col {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
}

html body.hk-site #footer-outer #footer-widgets .col:first-child {
	grid-column: 1 / -1;
}

html body.hk-site #footer-outer #footer-widgets .widget {
	margin: 0;
	padding: 0;
}

/* Brand block: wordmark 24px (no descriptor), tagline stone, 30ch. */
html body.hk-site #footer-outer .hk-footer-brand p {
	margin: 0;
	padding: 0 !important;
}

body.hk-site #footer-outer .hk-footer-brand .hk-wordmark {
	display: inline-block;
}

body.hk-site #footer-outer .hk-footer-brand .hk-wordmark__name {
	font-family: var(--hk-font-mark);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--hk-ink);
}

body.hk-site #footer-outer .hk-footer-brand .hk-amp {
	color: var(--hk-gilt-ink);
}

html body.hk-site #footer-outer .hk-footer-brand .hk-footer-brand__tagline {
	max-width: 30ch;
	margin-top: 8px;
}

body.hk-site #footer-outer .hk-footer-brand .hk-tagline {
	display: block;
	color: var(--hk-stone);
	font-family: var(--hk-font-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
}

/* Link columns. */
html body.hk-site #footer-outer #footer-widgets .widget .widget-title,
html body.hk-site #footer-outer #footer-widgets .widget h4,
html body.hk-site #footer-outer #footer-widgets .widget .hk-widget-title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--hk-ink) !important;
	font-family: var(--hk-font-sans) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	opacity: 1;
}

html body.hk-site #footer-outer #footer-widgets .widget ul {
	margin: 0;
	padding: 0;
}

html body.hk-site #footer-outer #footer-widgets .widget ul li {
	float: none;
	margin: 7px 0;
	padding: 0 !important;
	border: 0;
	list-style: none;
	background: none;
	line-height: 1.55;
}

body.hk-site #footer-outer #footer-widgets .widget ul li::before {
	content: none;
}

html body.hk-site #footer-outer #footer-widgets .widget ul li a {
	display: inline;
	padding: 0;
	color: var(--hk-stone) !important;
	font-family: var(--hk-font-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
	transition: color var(--hk-dur-control) ease;
}

html body.hk-site #footer-outer #footer-widgets .widget ul li a:hover {
	color: var(--hk-ink) !important;
}

html body.hk-site #footer-outer #footer-widgets .widget ul li a:focus-visible {
	outline: var(--hk-focus);
	outline-offset: 3px;
}

/* Phones: each footer link is a 44px row (the hit area was 18px tall). */
@media (max-width: 899px) {
	html body.hk-site #footer-outer #footer-widgets .widget ul li {
		margin: 0;
	}

	html body.hk-site #footer-outer #footer-widgets .widget ul li a {
		display: inline-block;
		padding: 11px 0 !important; /* Salient pads footer menu links with !important */
	}

	html body.hk-site #footer-outer #footer-widgets .widget ul li a:focus-visible {
		outline-offset: -2px;
	}
}

/* A section reached from a same-page link takes focus (js/hk-chrome.js) so
 * the next Tab starts there; the section itself is not a control. */
[data-hk-anchor-target]:focus {
	outline: none;
}

@media (min-width: 900px) {
	html body.hk-site #footer-outer #footer-widgets .container > .row {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}

	html body.hk-site #footer-outer #footer-widgets .col:first-child {
		grid-column: auto;
	}
}

/* --------------------------------------------------------------------------
 * 7. Footer base row (copyright-bar.php): a line-strong rule, then the
 *    copyright + "Made to order in Florida." left and the metal right.
 * ------------------------------------------------------------------------ */
html body.hk-site #ajax-content-wrap #footer-outer #copyright,
html body.hk-site #footer-outer #copyright {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background-color: transparent !important;
}

html body.hk-site #footer-outer #copyright > .container::before,
html body.hk-site #footer-outer #copyright > .container::after {
	display: none;
}

body.hk-site .hk-foot-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--hk-line-strong);
	color: var(--hk-stone);
	font-family: var(--hk-font-sans);
	font-size: 12.5px;
	line-height: 1.55;
}

html body.hk-site #footer-outer .hk-foot-base p {
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}