/* Site header and footer, on every page. Loaded after style.css. Owner: header and footer.
   Settings, menus and widgets: site/setup/design/chrome.php. Hooks: inc/chrome.php. Icons: assets/chrome/.

   Desktop (1025px and up): black top bar with two facts, main row with the logo, the search field, the phone and the
   cart (sticky, shrinks to 60px), then the menu row with dropdowns.
   Phones and tablets (1024px and down): logo, phone, cart and menu on one sticky row, the search field on its own row,
   the menu in a side drawer with the search, the phone and the pickup line.
   Footer: the call-to-action row ("Can't find your part?", black with a red slash, every page but the cart and the
   checkout), then brand, Shop, Help and How to pay on black, then the copyright bar. */

:root {
	--jkd-chrome-muted: #9b9ea6;             /* small print on black */
	--jkd-chrome-rule: rgba(255, 255, 255, .1); /* hairlines on black */
	--jkd-chrome-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ Shared: focus rings, icons */
#masthead :is(a, button, input):focus-visible,
#mobile-drawer :is(a, button, input):focus-visible,
#colophon :is(a, button):focus-visible {
	outline: 2px solid var(--jkd-red);
	outline-offset: 3px;
	box-shadow: none;
}
#mobile-drawer :is(a, button, input):focus-visible { outline-color: #fff; }
.jkd-icon { display: block; width: 1em; height: 1em; flex: none; }

/* Header rows: Kadence spaces items with margins; here every row uses gaps instead. */
#masthead .site-header-item { margin: 0; }
#masthead .site-header-section { align-items: center; }

/* ------------------------------------------------------------------ The search field (header, phone header, drawer) */
.jkd-search {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0;
}
.jkd-search__input {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 60px 0 14px;
	border: 1px solid var(--jkd-line);
	border-radius: 4px;
	background: #fff;
	color: var(--jkd-text);
	font: 500 15px/1.3 var(--global-body-font-family, "Saira", sans-serif);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s;
}
.jkd-search__input::placeholder { color: var(--jkd-muted); opacity: 1; }
.jkd-search__input::-webkit-search-cancel-button,
.jkd-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.jkd-search__input:hover { border-color: var(--jkd-muted); }
/* One ring on focus: the site's red one (the general rule above), no second border change */
.jkd-search__input:focus { border-color: var(--jkd-line); box-shadow: none; }
.jkd-search__input:focus-visible { outline-offset: 2px; }
.jkd-search__button {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: var(--jkd-red);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	display: grid;
	place-items: center;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s;
}
.jkd-search__button:hover,
.jkd-search__button:focus { background: var(--global-palette2, #b0141f); color: #fff; box-shadow: none; }
.jkd-search__button:focus-visible { outline-offset: 2px; }

/* ------------------------------------------------------------------ Cart (both headers): icon with the count on it */
#masthead .header-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--jkd-black);
	font-size: 24px;
	text-decoration: none;
	transition: color .2s;
}
#masthead .header-cart-button:hover { color: var(--jkd-red); }
#masthead .header-cart-button .kadence-svg-iconset svg { width: 1em; height: 1em; }
#masthead .header-cart-total {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--jkd-red);
	color: #fff;
	font: 700 11px/18px var(--global-body-font-family, "Saira", sans-serif);
	text-align: center;
	letter-spacing: 0;
}
/* No badge while the cart is empty (the empty-check span is refreshed by WooCommerce along with the count) */
#masthead .header-cart-empty-check.header-cart-is-empty-true + .header-cart-inner-wrap .header-cart-total { display: none; }

/* ------------------------------------------------------------------ Phone buttons (header Button element, mobile Button element) */
#masthead .header-button-wrap,
#masthead .header-button-inner-wrap,
#masthead .mobile-header-button-wrap,
#masthead .mobile-header-button-inner-wrap { display: flex; }
#masthead .header-button.button-style-unfilled,
#masthead .mobile-header-button.button-style-unfilled {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--jkd-black);
	font: 700 17px/1 var(--global-body-font-family, "Saira", sans-serif);
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}
#masthead .header-button.button-style-unfilled::before,
#masthead .mobile-header-button.button-style-unfilled::before,
#mobile-drawer .jkd-drawer__call a::before,
#colophon .jkd-cta__phone a::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--jkd-red);
	-webkit-mask: url(../chrome/phone.svg) center / contain no-repeat;
	mask: url(../chrome/phone.svg) center / contain no-repeat;
}
#masthead .header-button.button-style-unfilled:hover,
#masthead .mobile-header-button.button-style-unfilled:hover { color: var(--jkd-red); background: transparent; }

/* ================================================================== Desktop header (1025px and up) */
@media (min-width: 1025px) {
	/* Top bar: the HTML element holds two spans, first on the left, second on the right */
	#main-header .site-top-header-inner-wrap { grid-template-columns: 1fr auto; min-height: 34px; }
	#main-header .site-top-header-wrap .site-header-item { flex: 1; }
	#main-header .header-html { width: 100%; }
	#main-header .header-html-inner {
		display: flex;
		justify-content: space-between;
		gap: 24px;
		color: var(--jkd-on-dark);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: .01em;
		line-height: 1.3;
		white-space: nowrap;
	}
	#main-header .header-html-inner > span:last-child { text-align: right; }
	#main-header .header-html-inner p { margin: 0; }

	/* Main row: logo, search (grows to 640px), then the phone and the cart on the right */
	#main-header .site-main-header-inner-wrap { grid-template-columns: 1fr auto; column-gap: 32px; }
	#main-header .site-header-main-section-left { gap: 36px; min-width: 0; }
	#main-header .site-header-main-section-left .site-header-item[data-section="kadence_customizer_header_search"] {
		flex: 1 1 300px;
		max-width: 640px;
		min-width: 0;
	}
	#main-header .site-header-main-section-left .jkd-search { width: 100%; }
	/* The cart icon's edge, not its 44px tap box, lines up with the page edge */
	#main-header .site-header-main-section-right { gap: 8px; margin-right: -10px; }
	#main-header .header-button.button-style-unfilled { padding: 0 14px; }

	/* Menu row: 44px, items aligned with the logo's left edge, red underline on hover and on the current page */
	#main-header .site-bottom-header-inner-wrap { grid-template-columns: 1fr auto; min-height: 44px; }
	#main-header .site-bottom-header-wrap .site-header-section { align-items: stretch; }
	#main-header .site-bottom-header-wrap .site-header-item-main-navigation { height: auto; }
	#main-header .header-navigation .menu { gap: 0 34px; }
	#main-header .header-navigation .menu > li.menu-item { margin: 0; }
	#main-header .header-navigation .menu > li.menu-item > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--jkd-black);
	}
	#main-header .header-navigation .menu > li.menu-item > a:hover,
	#main-header .header-navigation .menu > li.menu-item > a:focus { color: var(--jkd-red); }
	#main-header .header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li > a::after {
		height: 3px;
		bottom: -1px;
		background: var(--jkd-red);
	}
	#main-header .header-navigation .nav-drop-title-wrap { padding-right: 1.1em; }
	#main-header .header-navigation .dropdown-nav-toggle { color: var(--jkd-muted); font-size: .8em; opacity: 1; }
	#main-header .header-navigation li.menu-item > a:hover .dropdown-nav-toggle { color: inherit; }

	/* Dropdowns: black panel, light rows */
	#main-header .header-navigation ul ul.sub-menu {
		margin-top: 0;
		padding: 6px 0;
		border-radius: 0 0 6px 6px;
	}
	#main-header .header-navigation ul ul li.menu-item { border-color: var(--jkd-chrome-rule); }
	#main-header .header-navigation ul ul li.menu-item > a {
		padding: 11px 18px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	/* Sticky main row: the search keeps its 44px, the row shrinks to 60px around it */
	#main-header .site-main-header-wrap.item-is-fixed:not(.item-at-start) .site-main-header-inner-wrap { min-height: 60px; }
}

/* ================================================================== Phone and tablet header (1024px and down) */
@media (max-width: 1024px) {
	#mobile-header .site-main-header-inner-wrap { grid-template-columns: 1fr auto; min-height: 60px; }
	/* The menu icon's edge, not its 44px tap box, lines up with the page edge */
	#mobile-header .site-header-main-section-right { gap: 2px; margin-right: -10px; }
	#mobile-header .site-branding a.brand img { max-height: 36px; width: auto; }

	/* Phone: icon only on phones, the number appears from 600px (the word Menu from 480px) */
	#mobile-header .mobile-header-button.button-style-unfilled {
		width: 44px;
		padding: 0 11px;
		gap: 0;
		overflow: hidden;
		color: transparent;
		font-size: 15px;
	}
	#mobile-header .mobile-header-button.button-style-unfilled:hover { color: transparent; }

	/* Menu toggle: icon, and the word from 480px */
	#mobile-header .menu-toggle-open {
		min-width: 44px;
		height: 44px;
		padding: 0;
		gap: 6px;
		border: 0;
		color: var(--jkd-black);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		justify-content: center;
	}
	#mobile-header .menu-toggle-open:hover,
	#mobile-header .menu-toggle-open:focus { color: var(--jkd-red); }
	#mobile-header .menu-toggle-open .menu-toggle-label { display: none; padding: 0; }
	#mobile-header .menu-toggle-open .menu-toggle-icon { display: flex; font-size: 24px; }

	/* The search row: full width, under the logo row */
	#mobile-header .site-bottom-header-wrap .site-container { padding-bottom: 12px; }
	#mobile-header .site-bottom-header-inner-wrap { display: block; }
	#mobile-header .site-bottom-header-wrap .site-header-section,
	#mobile-header .site-bottom-header-wrap .site-header-item { display: block; width: 100%; }
	#mobile-header .jkd-search__input { min-height: 46px; font-size: 16px; } /* 16px: iOS doesn't zoom the page on focus */

	/* While the logo row is stuck, the search row scrolls away under it */
	#mobile-header .site-main-header-wrap.item-is-fixed:not(.item-at-start) { background: #fff; }
}
@media (min-width: 480px) and (max-width: 1024px) {
	#mobile-header .menu-toggle-open { padding: 0 0 0 10px; }
	#mobile-header .menu-toggle-open .menu-toggle-label { display: inline; }
}
@media (min-width: 600px) and (max-width: 1024px) {
	#mobile-header .mobile-header-button.button-style-unfilled { width: auto; gap: 8px; color: var(--jkd-black); }
	#mobile-header .mobile-header-button.button-style-unfilled:hover { color: var(--jkd-red); }
}

/* ------------------------------------------------------------------ The drawer (phone and tablet menu) */
#mobile-drawer .drawer-inner { background: var(--jkd-black); color: #fff; }
#mobile-drawer .drawer-header {
	min-height: 60px;
	padding: 0 12px 0 20px;
	align-items: center;
}
#mobile-drawer .drawer-header .drawer-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 24px;
	color: #fff;
	box-sizing: border-box;
}
#mobile-drawer .drawer-header .drawer-toggle:hover { color: var(--jkd-red); }
#mobile-drawer .drawer-content { padding: 4px 20px 32px; }
#mobile-drawer .drawer-content .site-header-item { margin: 0; }
#mobile-drawer .jkd-search--drawer { margin-bottom: 16px; }
#mobile-drawer .jkd-search--drawer .jkd-search__input { min-height: 48px; border-color: #fff; font-size: 16px; }
#mobile-drawer .jkd-search--drawer .jkd-search__input:focus { box-shadow: none; }

#mobile-drawer .mobile-navigation .menu > li.menu-item { border-bottom: 1px solid var(--jkd-chrome-rule); }
#mobile-drawer .mobile-navigation .menu > li.menu-item > a,
#mobile-drawer .mobile-navigation .menu > li.menu-item > .drawer-nav-drop-wrap > a {
	padding: 15px 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
#mobile-drawer .mobile-navigation .menu > li.current-menu-item > a,
#mobile-drawer .mobile-navigation .menu > li.current-menu-ancestor > .drawer-nav-drop-wrap > a { color: var(--jkd-red); }
#mobile-drawer .drawer-nav-drop-wrap { align-items: center; }
#mobile-drawer .drawer-nav-drop-wrap .drawer-sub-toggle {
	width: 48px;
	height: 48px;
	margin-right: -14px;
	padding: 0;
	justify-content: center;
	align-items: center;
	color: var(--jkd-on-dark);
	font-size: 14px;
}
#mobile-drawer .drawer-nav-drop-wrap .drawer-sub-toggle:hover { color: #fff; }
#mobile-drawer .mobile-navigation ul ul.sub-menu { padding: 0 0 10px; }
#mobile-drawer .mobile-navigation ul ul.sub-menu li.menu-item { border: 0; }
#mobile-drawer .mobile-navigation ul ul.sub-menu li.menu-item > a {
	padding: 10px 0 10px 18px;
	border-left: 2px solid var(--jkd-chrome-rule);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jkd-on-dark);
}
#mobile-drawer .mobile-navigation ul ul.sub-menu li.menu-item > a:hover { color: #fff; border-color: var(--jkd-red); }

#mobile-drawer .mobile-html { margin-top: 28px; }
#mobile-drawer .mobile-html p { margin: 0; color: var(--jkd-on-dark); font-size: 14px; line-height: 1.5; }
#mobile-drawer .jkd-drawer__call { margin-bottom: 8px !important; }
#mobile-drawer .jkd-drawer__call a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font: 800 26px/1 var(--jkd-display);
	letter-spacing: .02em;
	color: #fff;
	text-decoration: none;
}
#mobile-drawer .jkd-drawer__call a:hover { color: var(--jkd-red); }

/* ================================================================== Footer */
#colophon { color: var(--jkd-on-dark); }
#colophon .widget { margin-bottom: 0; }

/* ------------------------------------------------------------------ The call-to-action row: "Can't find your part?" (Footer 5 widget, Customize > Footer top row)
   Two Group blocks on one grid. Left: the title and one line on a red flag that runs in from the viewport's left edge
   and ends on the brand's slash (skewX -16deg, the hero's and the garages band's lean), drawn by the group's ::before.
   Right, on the footer's black: the phone number as the biggest type in the footer, then the link to the contact
   page. Nothing sits on the slash: the grid's gap is the slash's run plus a gutter, and the text column keeps a
   margin from its own edge. The row is off on the cart and the checkout (inc/chrome.php). */
#colophon .site-top-footer-wrap { position: relative; overflow: hidden; overflow: clip; }
#colophon .site-top-footer-inner-wrap { padding: 0; min-height: 0; }
#colophon .footer-widget5 { text-align: left; } /* Kadence centres a one-column row's widget */
#colophon .footer-widget5 .widget_block {
	--jkd-cta-pad: clamp(40px, 3.6vw, 72px);           /* the row's padding, top and bottom: 52 at 1440 */
	--jkd-cta-slant: 60px;                             /* the slash's run at the row's height (height x tan 16deg, 52px at 1440), rounded up */
	--jkd-cta-gutter: clamp(32px, 3.4vw, 64px);        /* from the slash's top corner to the phone number */
	--jkd-cta-h2: clamp(32px, 2vw + 12px, 60px);       /* 41 at 1440, 50 at 1920 */
	--jkd-cta-phone: clamp(44px, 3.2vw + 4px, 72px);   /* 50 at 1440, 65 at 1920, 72 from 2125 */
	--jkd-cta-fs: clamp(16px, .3vw + 12.5px, 18px);    /* the line and the link */
	--jkd-cta-m1: clamp(10px, .8vw, 14px);             /* title to line */
	/* Both columns are top-aligned and share two lines: the title's cap top with the number's, the line's baseline
	   with the link's. Saira Condensed's caps start (line-height - .68em) / 2 below the box: .13em at line-height
	   .94 (the title), .16em at 1 (the number). The line and the link are the same Saira at the same size, so their
	   baselines meet when the link's 44px box starts .75em - 22px above the line's box (the line's leading is .25em
	   each side, the link's text is centred in 44px). */
	--jkd-cta-shift: calc(var(--jkd-cta-h2) * .13 - var(--jkd-cta-phone) * .16);
	--jkd-cta-m2: calc(var(--jkd-cta-h2) * .94 + var(--jkd-cta-m1) + var(--jkd-cta-fs) * .75 - 22px - var(--jkd-cta-phone) - var(--jkd-cta-shift) + 14px);
	display: grid;
	grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
	column-gap: calc(var(--jkd-cta-slant) + var(--jkd-cta-gutter));
	padding: var(--jkd-cta-pad) 0;
	margin: 0;
	isolation: isolate; /* the flag sits under the text, over the row's black */
}
#colophon .jkd-cta__text,
#colophon .jkd-cta__act {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	min-width: 0;
}
/* The group's inner container comes with auto side margins (Kadence centres it); here it fills its column */
#colophon .jkd-cta__text > .wp-block-group__inner-container,
#colophon .jkd-cta__act > .wp-block-group__inner-container { width: 100%; max-width: none; margin: 0; }
#colophon .jkd-cta__text { position: relative; padding-right: 32px; }
#colophon .jkd-cta__text::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--jkd-cta-pad));
	bottom: calc(-1 * var(--jkd-cta-pad));
	left: -100vw; /* past the viewport's left edge at any width; the row clips it */
	right: 0;
	background: var(--jkd-red);
	transform: skewX(-16deg);
	transform-origin: 100% 100%; /* the foot of the slash stays on the column's edge, the top leans right */
}
#colophon .jkd-cta__text h2 {
	margin: 0;
	max-width: 10em;
	font: 800 var(--jkd-cta-h2)/.94 var(--jkd-display);
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	text-wrap: balance;
}
#colophon .jkd-cta__text p {
	margin: var(--jkd-cta-m1) 0 0;
	max-width: 36em; /* one line from 1440 up; it wraps on tablets, where the link keeps the first line's baseline */
	font-size: var(--jkd-cta-fs);
	line-height: 1.5;
	color: #fff;
}
/* The number: a tel link, the biggest type in the footer. On hover a red line grows under the digits. */
#colophon .jkd-cta__phone {
	margin: var(--jkd-cta-shift) 0 0;
	font: 800 var(--jkd-cta-phone)/1 var(--jkd-display);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#colophon .jkd-cta__phone a {
	position: relative;
	display: flex; /* block-level, so the paragraph and the link are one 1em box and the icon doesn't move the baseline */
	width: max-content;
	align-items: center;
	gap: .3em;
	color: #fff;
	text-decoration: none;
}
#colophon .jkd-cta__phone a::before { width: .6em; height: .6em; }
#colophon .jkd-cta__phone a::after {
	content: "";
	position: absolute;
	left: .9em; /* under the digits, not the icon */
	right: .02em;
	bottom: -.08em;
	height: .06em;
	background: var(--jkd-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--jkd-chrome-ease);
}
#colophon .jkd-cta__phone a:hover::after,
#colophon .jkd-cta__phone a:focus-visible::after { transform: scaleX(1); }
/* The second way in: a text link with the page's arrow, a 44px tap target without moving the text. It starts under the
   digits (the icon hangs in front of the number: .6em wide plus the .3em gap). */
#colophon .jkd-cta__go {
	margin: var(--jkd-cta-m2) 0 0;
	padding-left: calc(var(--jkd-cta-phone) * .9);
	font-size: var(--jkd-cta-fs);
	font-weight: 700;
	line-height: 1;
}
#colophon .jkd-cta__go a {
	display: flex; /* block-level (no inline baseline games) and the line's own 1.5 line-height, so its text sits in the same line box as the line's */
	width: max-content;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: -14px 0;
	line-height: 1.5;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(255, 255, 255, .4);
	transition: text-decoration-color .2s;
}
#colophon .jkd-cta__go a::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	transition: transform .25s var(--jkd-chrome-ease), background-color .25s;
}
#colophon .jkd-cta__go a:hover { text-decoration-color: #fff; }
#colophon .jkd-cta__go a:hover::after { transform: translateX(4px); background: var(--jkd-red); }
@media (prefers-reduced-motion: reduce) {
	#colophon .jkd-cta__phone a::after,
	#colophon .jkd-cta__go a::after { transition: none; }
}
/* Phones and small tablets: the red on top with the slash lying down (the hero's 8 degree seam), the actions under it */
@media (max-width: 781px) {
	#colophon .footer-widget5 .widget_block {
		--jkd-cta-h2: clamp(32px, 9vw, 48px);
		--jkd-cta-phone: clamp(44px, 12vw, 64px);
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		padding: 0;
	}
	#colophon .jkd-cta__text {
		margin: 0 calc(-1 * var(--global-content-edge-padding, 1.25rem));
		padding: 40px var(--global-content-edge-padding, 1.25rem) calc(14vw + 20px);
	}
	#colophon .jkd-cta__text::before {
		inset: 0;
		transform: none;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14vw), 0 100%); /* tan 8deg = .14 */
	}
	#colophon .jkd-cta__act { padding: 24px 0 40px; }
	#colophon .jkd-cta__phone { margin-top: 0; }
	#colophon .jkd-cta__go { margin-top: 16px; }
}

/* ------------------------------------------------------------------ The columns: brand, Shop, Help, How to pay */
#colophon .site-middle-footer-inner-wrap .widget-area .widget-title,
#colophon .site-middle-footer-inner-wrap h2.wp-block-heading {
	margin: 0 0 14px;
	font-family: var(--jkd-display);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}
#colophon .site-middle-footer-inner-wrap h2.jkd-foot__brand { font-size: 28px; letter-spacing: .05em; margin-bottom: 10px; }
#colophon .jkd-foot__about { margin: 0 0 16px; max-width: 32em; font-size: 15px; line-height: 1.5; }
#colophon .jkd-foot__facts { margin: 0; font-size: 14px; line-height: 1.7; }

/* Shop and Help menus */
#colophon .widget_nav_menu ul.menu { list-style: none; margin: 0; padding: 0; }
#colophon .widget_nav_menu ul.menu li { margin: 0; padding: 0; }
#colophon .widget_nav_menu ul.menu li a {
	display: inline-block;
	padding: 7px 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--jkd-on-dark);
	text-decoration: none;
	transition: color .2s;
}
#colophon .widget_nav_menu ul.menu li a:hover,
#colophon .widget_nav_menu ul.menu li.current-menu-item a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--jkd-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* How to pay: a List block, each item's class picks its line icon (assets/chrome/) */
#colophon .jkd-pay { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#colophon .jkd-pay__item { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; line-height: 1.3; }
#colophon .jkd-pay__item::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: #fff;
	-webkit-mask: url(../chrome/card.svg) center / contain no-repeat;
	mask: url(../chrome/card.svg) center / contain no-repeat;
}
#colophon .jkd-pay__item--wallet::before { -webkit-mask-image: url(../chrome/wallet.svg); mask-image: url(../chrome/wallet.svg); }
#colophon .jkd-pay__item--transfer::before { -webkit-mask-image: url(../chrome/transfer.svg); mask-image: url(../chrome/transfer.svg); }
#colophon .jkd-foot__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--jkd-chrome-muted); }

/* Bottom bar */
#colophon .site-bottom-footer-inner-wrap { align-items: center; min-height: 44px; }
#colophon .footer-html-inner p { margin: 0; font-size: 13px; color: var(--jkd-chrome-muted); }
#colophon .footer-navigation ul.menu { display: flex; flex-wrap: wrap; gap: 0 28px; justify-content: flex-end; }
#colophon .footer-navigation ul.menu li.menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-size: 13px;
	color: var(--jkd-chrome-muted);
	text-decoration: none;
}
#colophon .footer-navigation ul.menu li.menu-item > a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--jkd-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Tablets: the brand across the top, then Shop, Help and How to pay side by side; copyright and links on one line */
@media (max-width: 1024px) {
	#colophon .site-middle-footer-inner-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#colophon .site-footer-middle-section-1 { grid-column: 1 / -1; }
	#colophon .site-bottom-footer-inner-wrap { grid-template-columns: minmax(0, 1fr) auto; }
}
/* Phones: Shop and Help side by side, everything else full width, bottom bar stacked */
@media (max-width: 719px) {
	#colophon .site-middle-footer-inner-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	#colophon .site-footer-middle-section-1,
	#colophon .site-footer-middle-section-4 { grid-column: 1 / -1; }
	#colophon .site-middle-footer-inner-wrap h2.jkd-foot__brand { font-size: 26px; }
	#colophon .site-bottom-footer-inner-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	#colophon .footer-navigation ul.menu { justify-content: flex-start; }
	#colophon .site-footer-bottom-section-2 .footer-widget-area-inner { justify-content: flex-start; }
}