/**
 * Unit17 native header + footer.
 * Desktop layout only — mobile is handled separately.
 * Geometry mirrors the previous Elementor templates (#3201 / #3182) at 1440px.
 */

/* ============================================================ tokens */
/* Brand tokens (--u17-teal, --u17-wrap, ...) live in u17-system.css. */
:root {
	--u17-pad: 10px; /* Elementor's column gutter, kept for pixel parity */
}

/* ============================================================ header */
.u17-header {
	position: relative;
	z-index: 10;
}

.u17-header *,
.u17-footer * {
	box-sizing: border-box;
}

/* ---------- band 1: promo ---------- */
.u17-promo {
	background-color: var(--u17-teal);
	padding: 10px 0;
}

.u17-promo__inner {
	max-width: var(--u17-wrap);
	margin: 0 auto;
	padding: 0 var(--u17-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-family: "Kanit", sans-serif;
	font-size: 14px;
	line-height: 29px;
	font-weight: 400;
	color: var(--u17-black); /* ink on teal, like the phone bar (white on teal was 2.1:1) */
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

.u17-promo__item strong {
	font-weight: 700;
}

/* an announcement with a link (wp-admin → Homepage → Announcement bar) */
.u17-promo__link {
	color: inherit;
	text-decoration: none;
}

.u17-promo__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Items side by side, split by a hairline; a line icon and the code chip
   instead of the old 🔥 emoji (2026-09 redesign: no longer pixel-locked). */
.u17-promo__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 var(--u17-space-4);
}

.u17-promo__item + .u17-promo__item {
	box-shadow: inset 1px 0 0 rgba(11, 11, 11, 0.28);
}

.u17-promo__icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* the discount code: the phone strip's chip (inc/mobile.php .u17-m__promo-code) */
.u17-promo__code {
	display: inline-block;
	padding: 0 8px;
	border-radius: 3px;
	background: var(--u17-ink);
	color: var(--u17-teal);
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* ---------- band 2: main ---------- */
.u17-main {
	background-color: #000;
	padding-bottom: 10px;
}

.u17-main__inner {
	max-width: var(--u17-wrap);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
}

/* brand: the trimmed logo (792x220, no transparent margin; u17_header_logo()),
   centred on the band's two rows (links + icons, then search + menu). The
   10px on top balances .u17-main's 10px bottom padding, so the mark sits in
   the middle of the black band. */
.u17-brand {
	flex: 0 0 auto;
	align-self: center;
	padding: 10px 36px 0 var(--u17-pad);
}

.u17-brand__link {
	display: block;
	line-height: 0;
}

.u17-brand__img {
	display: block;
	width: 252px;
	height: 70px;
}

/* right side */
.u17-main__right {
	flex: 1 1 1056.421875px;
	max-width: none;
	min-width: 0;
}

/* utility row */
.u17-utility {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	margin-top: 9px;
	height: 63px;
	border-bottom: 1px solid var(--u17-teal);
}

.u17-utilnav__list {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.u17-utilnav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-utilnav__list li {
	display: flex;
	align-items: center;
}

/* 2x11 white divider between items, as the previous header drew it */
.u17-utilnav__list li:not(:last-child)::after {
	content: "";
	flex: 0 0 2px;
	width: 2px;
	height: 11px;
	background-color: #fff;
}

.u17-utilnav__list a {
	display: block;
	padding: 13px 20px;
	font-family: "Kanit", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-decoration: none;
}

.u17-utilnav__list a:hover {
	color: var(--u17-teal);
}

.u17-utility__actions {
	display: flex;
	align-items: flex-start;
	width: 72.140625px;
	height: 62px;
	padding-left: 24.0625px;
	border-left: 1px solid var(--u17-teal);
}

.u17-account {
	display: inline-block;
	width: 23px;
	height: 23px;
	margin: 16.5px 0 0;
	font-size: 23px;
	color: #fff;
	text-decoration: none;
}

/* Hello's reset turns a:hover navy (#336), invisible on the black header */
.u17-account:hover,
.u17-account:focus-visible {
	color: var(--u17-teal);
}

/* icons: inline SVG, one em tall (u17_icon()) — the old icon-font glyph's box */
.u17-ico {
	display: inline-block;
	height: 1em;
	vertical-align: top;
	fill: currentColor;
	overflow: visible;
}

.u17-account i {
	display: block;
	width: 23px;
	height: 23px;
	font-size: 23px;
	line-height: 23px;
	text-align: center;
}

.u17-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 3.203125px;
	margin-right: 0.453125px;
	padding: 18px 23px 16px 17px;
	background-color: var(--u17-teal);
	border: 0 solid rgb(105, 114, 125);
	font-family: "Kanit", sans-serif;
	font-size: 15px;
	line-height: 15px;
	font-weight: 400;
	color: rgb(105, 114, 125);
	text-decoration: none;
}

.u17-cart__icon i {
	display: block;
	font-size: 28px;
	line-height: 28px;
	color: #fff;
}

.u17-cart__qty {
	position: absolute;
	top: 15px;
	left: 32px;
	width: 16px;
	height: 16px;
	background-color: #000;
	color: #fff;
	border-radius: 50%;
	font-family: "Kanit", sans-serif;
	font-size: 10px;
	line-height: 15px;
	font-weight: 400;
	text-align: center;
}

/* search + primary nav row */
.u17-navrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 16px;
}

.u17-search {
	width: 369.734375px;
	flex: 0 0 369.734375px;
	padding-top: 1px;
}

.u17-search .aws-container,
.u17-search form {
	width: 100%;
}

/* primary nav */
.u17-primary {
	margin-right: 0.03125px;
}

.u17-primary__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-primary__list > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-primary__list > li > a {
	display: flex;
	align-items: center;
	padding: 13px 15px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.u17-primary__list > li > a:hover {
	color: var(--u17-teal);
}

/* caret: Font Awesome's chevron-down drawn as a mask (no icon font), in the
   glyph's own box (448:512 of 11.2px) */
.u17-primary__list > li.menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 9.8px;
	height: 11.2px;
	margin-left: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* dropdowns */
.u17-primary__list ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 160px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #000;
	z-index: 999;
}

.u17-primary__list li:hover > ul.sub-menu {
	display: block;
}

.u17-primary__list ul.sub-menu li {
	position: relative;
	list-style: none;
}

.u17-primary__list ul.sub-menu a {
	display: block;
	padding: 12px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	color: #fff;
	text-transform: none;
	white-space: nowrap;
	text-decoration: none;
}

.u17-primary__list ul.sub-menu a:hover {
	color: var(--u17-teal);
}

.u17-primary__list ul.sub-menu ul.sub-menu {
	top: 0;
	left: 100%;
}

/* ---------- band 3: make / model / category ---------- */
.u17-makebar {
	background-color: rgba(14, 14, 14, 0.86);
	/* The Elementor section closed the header with a 1px teal rule; the band is
	   81px including it, so the padding is 10/10 and the border makes up the
	   last pixel. */
	padding: 10px 0;
	border-bottom: 1px solid rgb(87, 197, 187);
}

.u17-makebar__inner {
	max-width: var(--u17-wrap);
	margin: 0 auto;
}

/* the shortcode's wrappers: full width, no spacing of their own */
.u17-makebar .search-filter,
.u17-makebar .search-filter > .u17-finder,
.u17-makebar .Filters,
.u17-makebar .products-search-wrap {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.u17-makebar form#searchForm {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * The shortcode's columns already carry 10px padding, so the 20px gutter comes
 * from two adjacent paddings — gap stays 0 and the last column loses its right
 * padding so the row ends flush with the 1350px container.
 */
.u17-makebar form#searchForm > .u17-finder__row {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.u17-makebar form#searchForm > .u17-finder__row > .u17-finder__col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 10px;
}

.u17-makebar form#searchForm > .u17-finder__row > .u17-finder__col:last-child {
	flex: 0 0 auto;
	padding-right: 0;
}

.u17-makebar .form-control {
	display: block;
	width: 100%;
	height: 40px;
	padding: 8px 10px;
	background-color: #000;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid var(--u17-teal);
	border-radius: 0;
}

.u17-makebar #searchButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 117px;
	height: 40px;
	background-color: var(--u17-teal);
	color: #000;
	text-decoration: none;
}

.u17-makebar #searchButton i {
	font-size: 16px;
	line-height: 16px;
	color: #000;
}

/* ---- searchable make / model / category (assets/js/u17-finder.js): each box
   looks like the select it stands in for; the select stays, hidden, as the
   source of truth */
.u17-makebar .u17-combo {
	position: relative;
	width: 361px;
}

/* (#searchForm: outranks style.css's `#searchForm select` padding) */
.u17-makebar #searchForm .u17-combo__native {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.u17-makebar .u17-combo__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 8px 34px 8px 10px;
	border: 1px solid var(--u17-teal);
	border-radius: 0;
	background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
	font: inherit;
	font-size: 14px;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

.u17-makebar .u17-combo__input::placeholder {
	color: #fff;
	opacity: 1;
}

.u17-makebar .u17-combo.is-open .u17-combo__input {
	cursor: text;
}

.u17-makebar .u17-combo__input:focus-visible,
.u17-makebar .u17-combo.is-open .u17-combo__input {
	outline: 2px solid var(--u17-teal);
	outline-offset: -2px;
}

.u17-makebar .u17-combo.is-open .u17-combo__input::placeholder {
	color: var(--u17-on-dark-muted);
}

.u17-makebar .u17-combo__list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	box-sizing: border-box;
	width: 100%;
	min-width: 280px;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--u17-surface);
	border: 1px solid var(--u17-teal);
	border-top: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	font-family: var(--u17-font);
	font-size: 15px;
	line-height: 1.3;
	color: var(--u17-on-dark-2);
	text-align: left;
}

.u17-makebar .u17-combo__list[hidden] {
	display: none;
}

.u17-makebar .u17-combo__opt {
	/* children step in under their parent */
	padding: 8px 14px 8px calc(14px + var(--u17-combo-depth, 0) * 18px);
	cursor: pointer;
}

.u17-makebar .u17-combo__opt[aria-selected="true"] {
	color: var(--u17-teal);
}

.u17-makebar .u17-combo__opt.is-active {
	background: var(--u17-teal);
	color: #000;
}

/* category tree: each top-level category starts a group */
.u17-makebar .u17-combo--tree .u17-combo__opt.is-parent {
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--u17-on-dark);
}

.u17-makebar .u17-combo--tree .u17-combo__opt.is-parent:not(.is-first) {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--u17-edge-3);
}

.u17-makebar .u17-combo--tree .u17-combo__opt.is-child {
	position: relative;
	font-size: 14px;
}

.u17-makebar .u17-combo--tree .u17-combo__opt.is-child::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(14px + (var(--u17-combo-depth, 1) - 1) * 18px + 4px);
	width: 8px;
	border-top: 1px solid var(--u17-on-dark-dim);
}

.u17-makebar .u17-combo--tree .u17-combo__opt.is-active {
	color: #000;
}

.u17-makebar .u17-combo--tree .u17-combo__opt.is-child.is-active::before {
	border-top-color: #000;
}

/* a parent shown only because one of its children matches */
.u17-makebar .u17-combo__opt.is-context:not(.is-active) {
	color: var(--u17-on-dark-muted);
}

.u17-makebar .u17-combo__empty {
	padding: 10px 14px;
	color: var(--u17-on-dark-muted);
}

.u17-makebar .u17-combo__empty[hidden] {
	display: none;
}

/* ============================================================ footer */
.u17-footer__top {
	background-color: #010101;
	padding: 65px 0;
}

.u17-footer__inner {
	max-width: var(--u17-wrap);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
}

/* left: logo + contact */
.u17-footer__brand {
	flex: 0 0 414.421875px;
	max-width: 414.421875px;
	padding: 10px var(--u17-pad) 0;
}

.u17-footer__logo {
	display: block;
	line-height: 0;
}

.u17-footer__logo img {
	display: block;
	width: 145px;
	height: auto;
}

.u17-footer__contact {
	margin-top: 20px;
}

.u17-footer__contact table {
	border-collapse: collapse;
	border: 0;
	margin: 0;
	width: 394.421875px;
	font-family: "Kanit", sans-serif;
	font-size: 13.5px;
	line-height: 20.25px;
	font-weight: 200;
}

.u17-footer .u17-footer__contact table td,
.u17-footer__contact td {
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: "Kanit", sans-serif;
	font-size: 13.5px;
	line-height: 20.25px;
	font-weight: 200;
	color: #eee;
	vertical-align: top;
}

.u17-footer__contact td:first-child {
	width: 94.765625px;
}

/* right: three columns */
.u17-footer__cols {
	flex: 1 1 855.5625px;
	max-width: none;
	display: flex;
	align-items: flex-start;
	margin-top: 46px;
	min-width: 0;
}

.u17-footer__col--links {
	flex: 0 0 234.828125px;
	max-width: 234.828125px;
}

.u17-footer__col--cats {
	flex: 0 0 297.1875px;
	max-width: 297.1875px;
}

.u17-footer__col--subscribe {
	flex: 0 0 320.625px;
	max-width: 320.625px;
}

.u17-footer__heading {
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 2px solid #fff;
	font-family: "Kanit", sans-serif;
	font-size: 20px;
	line-height: 40px;
	font-weight: 400;
	letter-spacing: 1.8px;
	color: #fff;
	text-transform: uppercase;
}

.u17-footer__heading--social {
	margin-top: 20px;
}

.u17-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-footer__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-footer__menu a {
	display: block;
	padding: 1px 0;
	font-family: "Kanit", sans-serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: 300;
	color: #eee;
	text-transform: uppercase;
	text-decoration: none;
}

/* the previous markup used a block-level <i>, so pin the box rather than let it
   ride the text baseline (baseline alignment drifts by a sub-pixel per page) */
.u17-footer__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	position: relative;
	top: 2.5px;
	width: 9.375px;
	height: 15px;
	margin-left: 10px;
	vertical-align: top;
	/* Font Awesome's caret-down drawn as a mask (no icon font) */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.u17-footer__menu a:hover,
.u17-footer__menu .current-menu-item > a {
	color: var(--u17-teal);
}

/* the footer menus are single level here */
.u17-footer__menu ul.sub-menu {
	display: none;
}

/* social */
/* padding rather than margin: a margin here collapses with the heading's */
.u17-social {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 0;
	padding-top: 15px;
}

.u17-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #000;
	border: 2px solid #fff;
	font-size: 20px;
	line-height: 20px;
	color: rgb(105, 114, 125);
	text-decoration: none;
}

.u17-social__icon i {
	font-size: 20px;
	line-height: 20px;
	color: #fff;
}

/* iOS zooms the page into a focused field smaller than 16px: on phones and
   touch screens the chrome's small fields (newsletter, desktop search and
   vehicle bar on large tablets) are 16px */
@media (max-width: 1279px), (hover: none) and (pointer: coarse) {
	.u17-subscribe .u17-subscribe__group .u17-subscribe__input,
	.u17-header .aws-container .aws-search-field,
	.u17-makebar #searchForm select,
	.u17-makebar .u17-combo__input {
		font-size: 16px;
	}
}

/* subscribe */
.u17-subscribe .u17-subscribe__label {
	display: block;
	height: 16px;
	font-family: "Kanit", sans-serif;
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	color: #000;
}

.u17-subscribe .u17-subscribe__input {
	display: block;
	width: 321px;
	height: 41px;
	padding: 8px 16px;
	background-color: #010101;
	border: 2px solid #fff;
	border-radius: 0;
	font-family: "Kanit", sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 300;
	color: #fff;
}

.u17-subscribe .u17-subscribe__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 165.671875px;
	height: 40px;
	margin-top: 10px;
	padding: 0 24px;
	background-color: var(--u17-teal);
	border: 0;
	border-radius: 0;
	font-family: "Kanit", sans-serif;
	font-size: 20px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 1.9px;
	color: var(--u17-black); /* ink on teal (white on teal was 2.1:1) */
	text-transform: uppercase;
	cursor: pointer;
}

.u17-subscribe .u17-subscribe__btn:visited {
	color: var(--u17-black);
}

.u17-subscribe .u17-subscribe__btn:hover,
.u17-subscribe .u17-subscribe__btn:focus-visible {
	background-color: var(--u17-white);
	color: var(--u17-black);
}

/* bottom bar */
.u17-footer__bottom {
	background-color: #0d0d0d;
	padding: 20px 0;
}

.u17-footer__copy {
	max-width: var(--u17-wrap);
	margin: 0 auto;
	padding: 10px var(--u17-pad);
	text-align: center;
	font-family: "Kanit", sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: var(--u17-teal);
}

.u17-footer__copy a {
	color: var(--u17-teal);
	text-decoration: none;
}

.u17-footer__copy small {
	font-size: 11.2px;
}

/* Turnstile slot: 1px at rest, exactly like the reCAPTCHA field it replaced;
   grows only if Cloudflare asks the visitor to confirm. */
.u17-subscribe__captcha-group,
.u17-subscribe__captcha {
	min-height: 1px;
}

.u17-subscribe__captcha.is-needed {
	margin-top: 10px;
}

.u17-subscribe .u17-subscribe__btn[disabled] {
	opacity: 0.7;
	cursor: progress;
}

/* submit feedback — empty at rest, so it never affects the resting layout */
.u17-subscribe__msg:empty {
	display: none;
}

.u17-subscribe__msg {
	margin-top: 10px;
	font-family: "Kanit", sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: var(--u17-teal);
}

.u17-subscribe__msg.is-error {
	color: #ff6b6b;
}

/* ============================================================ mobile
   The desktop rules above are pixel-locked to the previous header and use fixed
   flex-basis values: the header needs 1270px, so everything below 1280px is
   replaced rather than reflowed (between 1025 and 1279px the desktop header ran
   off the right edge, hiding the cart). Tokens follow the mobile design:
   Barlow / Barlow Condensed on near-black. */

.u17-m,
.u17-m__vehicle { display: none; }

@media (max-width: 1279px) {

	:root {
		/* aliases of the design-system dark palette (u17-system.css) */
		--u17m-teal: var(--u17-teal);
		--u17m-bg: var(--u17-ink);
		--u17m-panel: var(--u17-surface);
		--u17m-card: var(--u17-surface-2);
		--u17m-card2: var(--u17-surface-3);
		--u17m-line: var(--u17-edge);
		--u17m-edge: var(--u17-edge-2);
		--u17m-edge2: var(--u17-edge-3);
		--u17m-txt: var(--u17-on-dark);
		--u17m-body: var(--u17-on-dark-2);
		--u17m-mut: var(--u17-on-dark-muted);
		--u17m-dim: var(--u17-on-dark-dim);
	}

	/* the desktop header is replaced wholesale */
	.u17-header { display: none; }

	.u17-m,
	.u17-m *,
	.u17-m-drawer *,
	.u17-m-search *,
	.u17-m-sheet *,
	.u17-m-cart * { box-sizing: border-box; }

	/* ---------- top chrome ---------- */
	/* Promo strip + icon bar pin to the top. The vehicle bar is a sibling, not a
	   child, so it scrolls away with the content instead of pinning too. */
	.u17-m {
		display: block;
		position: sticky;
		top: 0;
		z-index: 900;
		background: var(--u17m-bg);
		font-family: "Barlow", sans-serif;
		-webkit-font-smoothing: antialiased;
	}

	.u17-m__promo {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 8px 16px;
		background: var(--u17m-teal);
		color: #0b0b0b;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: .08em;
		text-transform: uppercase;
		text-align: center;
	}

	.u17-m__promo-link {
		color: inherit;
		text-decoration: none;
	}

	.u17-m__promo-code {
		background: #0b0b0b;
		color: var(--u17m-teal);
		padding: 2px 7px;
		border-radius: 3px;
		white-space: nowrap;
	}

	.u17-m__bar {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 10px 12px;
		border-bottom: 1px solid var(--u17m-edge);
	}

	.u17-m__burger {
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		border: 0;
		background: transparent;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		cursor: pointer;
	}

	.u17-m__burger span {
		width: 22px;
		height: 2px;
		background: var(--u17m-txt);
		display: block;
	}

	/* Logo: assets/img/unit17-logo-{400,792}.png, the header logo trimmed to its
	   edges (792x220, 3.6:1), so --u17m-logo-h is the mark's height.
	   The bar's fixed chrome (padding + burger + 3 icons + gaps) is 216px, so the
	   logo takes what's left and caps at 44px (52px on tablets, below). */
	.u17-m__logo {
		--u17m-logo-h: clamp(22px, calc((100vw - 216px) / 3.6), 44px);

		display: flex;
		align-items: center;
		flex: 0 1 auto;
		height: var(--u17m-logo-h);
		margin-left: 4px;
		margin-right: auto;
		line-height: 0;
	}

	.u17-m__logo img {
		display: block;
		width: auto;
		height: var(--u17m-logo-h);
		max-width: none;
	}

	.u17-m__icon {
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		border: 0;
		background: transparent;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--u17m-txt);
		cursor: pointer;
		position: relative;
	}

	.u17-m__icon svg { width: 24px; height: 24px; }

	.u17-m__badge {
		position: absolute;
		top: 5px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		padding: 0 3px;
		border-radius: 8px;
		background: var(--u17m-txt);
		color: #0b0b0b;
		font-size: 10px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Vehicle bar. It sits outside the sticky block so it scrolls away, which
	   leaves it losing the paint order to the home page's first Elementor
	   section (that section carries a -80px top margin so it tucks under the
	   chrome). A stacking position keeps the bar on top, as it was when it
	   lived inside the sticky block. */
	.u17-m__vehicle {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 52px;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 0 16px;
		background: var(--u17m-card);
		border: 0;
		border-bottom: 1px solid var(--u17m-edge);
		color: var(--u17m-txt);
		cursor: pointer;
		text-align: left;
		font-family: inherit;
	}

	.u17-m__vehicle svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--u17m-txt); }
	.u17-m__vehicle.is-set svg { color: var(--u17m-teal); }

	.u17-m__vehicle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }

	.u17-m__vehicle-kicker {
		font-size: 11px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--u17m-mut);
		font-weight: 600;
	}

	.u17-m__vehicle-title {
		font-size: 15px;
		color: var(--u17m-txt);
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.u17-m__vehicle-action { font-size: 14px; color: var(--u17m-teal); font-weight: 600; }

	/* ---------- shared overlay chrome ---------- */
	.u17-m-scrim {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .6);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
		z-index: 1000;
	}

	.u17-m-scrim.is-on { opacity: 1; pointer-events: auto; }

	.u17-m-drawer,
	.u17-m-search,
	.u17-m-sheet,
	.u17-m-cart {
		position: fixed;
		z-index: 1001;
		font-family: "Barlow", sans-serif;
		color: var(--u17m-txt);
		-webkit-font-smoothing: antialiased;
	}

	.u17-m-head {
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 8px 0 20px;
		border-bottom: 1px solid var(--u17m-edge);
		flex-shrink: 0;
	}

	.u17-m-head__label {
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 15px;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--u17m-mut);
	}

	.u17-m-head__title {
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 24px;
		letter-spacing: .03em;
		text-transform: uppercase;
	}

	.u17-m-head__count {
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 11px;
		background: var(--u17m-edge2);
		font-family: "Barlow", sans-serif;
		font-size: 12px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u17-m-x {
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		color: var(--u17m-txt);
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
	}

	.u17-m-block__label {
		font-size: 11px;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--u17m-dim);
		font-weight: 600;
	}

	.u17-m-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		border: 0;
		border-radius: 10px;
		background: var(--u17m-teal);
		color: #0b0b0b;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 17px;
		letter-spacing: .08em;
		text-transform: uppercase;
		cursor: pointer;
		text-decoration: none;
		width: 100%;
	}

	.u17-m-cta[disabled] { opacity: .35; cursor: default; }

	.u17-m-textbtn {
		height: 44px;
		border: 0;
		background: transparent;
		color: var(--u17m-mut);
		font-family: "Barlow", sans-serif;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u17-m-ghost {
		height: 46px;
		width: 100%;
		border-radius: 10px;
		border: 1px solid #3a3a3a;
		background: #1f1f1f;
		color: var(--u17m-txt);
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.u17-m-error { color: #f08a7e; font-size: 13px; }

	/* hide scrollbars on the panels, as the design does */
	.u17-m-drawer__body,
	.u17-m-panel__body,
	.u17-m-search__body,
	.u17-m-cart__scroll,
	.u17-m-rail { scrollbar-width: none; }

	.u17-m-drawer__body::-webkit-scrollbar,
	.u17-m-panel__body::-webkit-scrollbar,
	.u17-m-search__body::-webkit-scrollbar,
	.u17-m-cart__scroll::-webkit-scrollbar,
	.u17-m-rail::-webkit-scrollbar { display: none; }
}

@media (max-width: 1279px) {

	/* ---------- drawer ---------- */
	.u17-m-drawer {
		top: 0;
		bottom: 0;
		left: 0;
		width: 86%;
		max-width: 420px;
		background: var(--u17m-panel);
		transform: translateX(-105%);
		transition: transform .35s cubic-bezier(.3, .7, .2, 1);
		overflow: hidden;
		box-shadow: 0 0 40px rgba(0, 0, 0, .5);
	}

	.u17-m-drawer[hidden] { display: none; } /* closed = not rendered (iPhone graphics memory); u17-mobile.js hides after the transition */
	.u17-m-drawer.is-on { transform: translateX(0); }

	.u17-m-drawer__root {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: var(--u17m-panel);
		transform: translateX(0);
		transition: transform .35s cubic-bezier(.3, .7, .2, 1);
	}

	.u17-m-drawer.is-deep .u17-m-drawer__root { transform: translateX(-30%); }

	.u17-m-drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

	.u17-m-searchtrigger-wrap { padding: 16px 16px 8px; }

	.u17-m-searchtrigger {
		width: 100%;
		height: 46px;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0 12px;
		background: #1a1a1a;
		border: 1px solid var(--u17m-edge2);
		border-radius: 10px;
		color: var(--u17m-mut);
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		cursor: pointer;
	}

	.u17-m-searchtrigger svg { width: 20px; height: 20px; }

	/* the theme's global button hover/focus (pink) would take over the box */
	.u17-m-drawer .u17-m-searchtrigger:hover,
	.u17-m-drawer .u17-m-searchtrigger:focus {
		background: #1a1a1a;
		border-color: var(--u17m-edge2);
		color: var(--u17m-mut);
	}

	/* root nav list (from wp_nav_menu) */
	.u17-m-nav,
	.u17-m-nav ul { list-style: none; margin: 0; padding: 0; }

	.u17-m-nav > li > a,
	.u17-m-nav > li > .u17-m-nav__btn {
		height: 60px;
		margin: 0 16px;
		padding: 0 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		border: 0;
		border-bottom: 1px solid var(--u17m-line);
		background: transparent;
		color: var(--u17m-txt);
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 24px;
		letter-spacing: .03em;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
		width: calc(100% - 32px);
		text-align: left;
	}

	/* chevron on items that open a panel */
	.u17-m-nav > li.menu-item-has-children > .u17-m-nav__btn::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--u17m-mut);
		border-top: 2px solid var(--u17m-mut);
		transform: rotate(45deg);
		margin-right: 6px;
		flex: 0 0 8px;
	}

	/* nested lists become panels, so they never render inline */
	.u17-m-nav ul { display: none; }

	.u17-m-drawer__foot {
		margin-top: auto;
		padding: 24px 16px 28px;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.u17-m-flink {
		height: 44px;
		display: flex;
		align-items: center;
		gap: 12px;
		border: 0;
		background: transparent;
		padding: 0;
		color: var(--u17m-body);
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}

	.u17-m-flink svg { width: 20px; height: 20px; color: var(--u17m-mut); flex: 0 0 20px; }

	/* ---------- drill-down panels (built by JS) ---------- */
	.u17-m-panel {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: var(--u17m-panel);
		transform: translateX(100%);
		transition: transform .35s cubic-bezier(.3, .7, .2, 1);
	}

	.u17-m-panel.is-on { transform: translateX(0); }

	.u17-m-panel__head {
		height: 64px;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0 8px;
		border-bottom: 1px solid var(--u17m-edge);
		flex-shrink: 0;
	}

	.u17-m-back {
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u17-m-back::before {
		content: "";
		width: 9px;
		height: 9px;
		border-left: 2px solid var(--u17m-txt);
		border-bottom: 2px solid var(--u17m-txt);
		transform: rotate(45deg);
		margin-left: 4px;
	}

	.u17-m-panel__title {
		flex: 1;
		min-width: 0;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 22px;
		letter-spacing: .04em;
		text-transform: uppercase;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.u17-m-panel__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 16px 24px; }

	.u17-m-panel__body a,
	.u17-m-panel__body .u17-m-nav__btn {
		min-height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		border: 0;
		border-bottom: 1px solid var(--u17m-line);
		background: transparent;
		padding: 0 4px;
		color: var(--u17m-body);
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		text-align: left;
		width: 100%;
	}

	.u17-m-panel__body .u17-m-all { color: var(--u17m-teal); font-weight: 600; }

	.u17-m-panel__body .u17-m-nav__btn::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--u17m-mut);
		border-top: 2px solid var(--u17m-mut);
		transform: rotate(45deg);
		flex: 0 0 8px;
		margin-right: 4px;
	}

	/* ---------- search ---------- */
	.u17-m-search {
		inset: 0;
		background: var(--u17m-bg);
		display: flex;
		flex-direction: column;
		opacity: 0;
		transform: translateY(-24px);
		pointer-events: none;
		transition: opacity .25s, transform .3s cubic-bezier(.3, .7, .2, 1);
	}

	.u17-m-search[hidden] { display: none; }
	.u17-m-search.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }

	.u17-m-search__title {
		padding: 20px 20px 0;
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 26px;
		letter-spacing: .03em;
		text-transform: uppercase;
		flex-shrink: 0;
	}

	.u17-m-search__bar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 12px 18px 16px;
		border-bottom: 1px solid var(--u17m-edge);
		flex-shrink: 0;
	}

	.u17-m-search__field { flex: 1; min-width: 0; }

	/* the AWS form supplies the input; restyle it to the design */
	.u17-m-search__field .aws-container,
	.u17-m-search__field form { width: 100%; }

	/* three classes deep: style.css sets this field to 14px with three, and iOS
	   zooms the whole page into a focused field smaller than 16px */
	.u17-m-search .u17-m-search__field .aws-search-field {
		width: 100%;
		height: 48px;
		background: #1a1a1a;
		border: 1px solid var(--u17m-teal);
		border-radius: 10px;
		color: var(--u17m-txt);
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		padding: 0 12px;
		text-transform: none;
		letter-spacing: normal;
	}

	.u17-m-search__cancel {
		height: 44px;
		border: 0;
		background: transparent;
		color: var(--u17m-txt);
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		padding: 0 6px;
		flex-shrink: 0;
	}

	.u17-m-search__body { flex: 1; overflow-y: auto; padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 24px; }

	.u17-m-block { display: flex; flex-direction: column; gap: 12px; }

	.u17-m-chips { display: flex; flex-wrap: wrap; gap: 8px; }

	.u17-m-chip {
		height: 38px;
		padding: 0 14px;
		border-radius: 19px;
		border: 1px solid var(--u17m-edge2);
		background: var(--u17m-card2);
		color: var(--u17m-body);
		font-family: "Barlow", sans-serif;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}

	.u17-m-browse {
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--u17m-line);
		color: var(--u17m-body);
		font-size: 16px;
		font-weight: 500;
		text-decoration: none;
	}

	.u17-m-browse i {
		width: 7px;
		height: 7px;
		border-right: 1.6px solid var(--u17m-dim);
		border-top: 1.6px solid var(--u17m-dim);
		transform: rotate(45deg);
		margin-right: 6px;
	}

	/* ---------- bottom sheets ---------- */
	.u17-m-sheet {
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--u17m-card);
		border-radius: 24px 24px 0 0;
		border-top: 1px solid var(--u17m-edge2);
		transform: translateY(105%);
		transition: transform .35s cubic-bezier(.3, .7, .2, 1);
		padding: 10px 20px 32px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-height: 88vh;
		overflow-y: auto;
	}

	.u17-m-sheet[hidden] { display: none; }
	.u17-m-sheet.is-on { transform: translateY(0); }

	.u17-m-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: #3a3a3a; align-self: center; flex-shrink: 0; }

	.u17-m-sheet__head { display: flex; align-items: center; justify-content: space-between; }

	.u17-m-sheet__title {
		font-family: "Barlow Condensed", sans-serif;
		font-weight: 700;
		font-size: 26px;
		letter-spacing: .03em;
		text-transform: uppercase;
	}

	/* finder */
	.u17-m-finder__form { display: flex; flex-direction: column; gap: 12px; }

	.u17-m-steps { display: flex; align-items: center; gap: 10px; }
	.u17-m-steps__bars { flex: 1; display: flex; gap: 4px; }
	.u17-m-steps__bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--u17m-edge2); }
	.u17-m-steps__bars i.is-on { background: var(--u17m-teal); }
	.u17-m-steps__label { font-size: 12px; color: var(--u17m-teal); font-weight: 600; }

	.u17-m-select {
		appearance: none;
		-webkit-appearance: none;
		height: 50px;
		border-radius: 10px;
		border: 1px solid #333;
		background: var(--u17m-bg);
		color: var(--u17m-txt);
		padding: 0 14px;
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		font-weight: 500;
		width: 100%;
	}

	.u17-m-select:disabled { opacity: .4; }
	.u17-m-select option { background: var(--u17m-card); color: var(--u17m-txt); }

	/* account */
	.u17-m-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--u17m-bg); border-radius: 10px; }

	.u17-m-tab {
		height: 40px;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: var(--u17m-mut);
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.u17-m-tab.is-on { background: var(--u17m-edge2); color: var(--u17m-txt); }

	.u17-m-form { display: flex; flex-direction: column; gap: 14px; }
	.u17-m-form[hidden] { display: none; } /* display:flex above would override [hidden] (the Log in / Register tabs) */

	.u17-m-label {
		display: flex;
		flex-direction: column;
		gap: 6px;
		color: #b5b5b2;
		font-size: 13px;
		font-weight: 600;
	}

	.u17-m-label input {
		height: 50px;
		border-radius: 10px;
		border: 1px solid #333;
		background: var(--u17m-bg);
		color: var(--u17m-txt);
		padding: 0 14px;
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		outline: none;
		width: 100%;
	}

	.u17-m-label input:focus { border-color: var(--u17m-teal); }

	.u17-m-pw { position: relative; display: flex; }
	.u17-m-pw input { padding-right: 64px; }

	.u17-m-pw__toggle {
		position: absolute;
		right: 4px;
		top: 3px;
		height: 44px;
		padding: 0 10px;
		border: 0;
		background: transparent;
		color: var(--u17m-mut);
		font-family: "Barlow", sans-serif;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
	}

	.u17-m-form__row { display: flex; align-items: center; justify-content: space-between; }
	.u17-m-check { display: flex; align-items: center; gap: 8px; color: var(--u17m-body); font-size: 14px; min-height: 44px; }
	.u17-m-check input { width: 18px; height: 18px; accent-color: var(--u17m-teal); margin: 0; }

	.u17-m-note,
	.u17-m-foot-note { color: var(--u17m-mut); font-size: 13px; line-height: 1.45; margin: 0; }
	.u17-m-foot-note { color: var(--u17m-dim); text-align: center; }
	.u17-m-account__in { display: flex; flex-direction: column; gap: 12px; }
	.u17-m-account__hi { margin: 0; color: var(--u17m-body); font-size: 15px; }

	/* "Register" tab: sign-up itself happens on My Account (inc/accounts.php) */
	.u17-m-join { display: flex; flex-direction: column; gap: 14px; }
	.u17-m-join[hidden] { display: none; }
	.u17-m-join .u17-m-cta { text-decoration: none; }
	.u17-m-join__perks { margin: 0; padding: 0; list-style: none; color: var(--u17m-body); font-size: 15px; line-height: 1.45; }
	.u17-m-join__perks li { position: relative; padding-left: 24px; }
	.u17-m-join__perks li + li { margin-top: 8px; }

	.u17-m-join__perks li::before {
		content: "";
		position: absolute;
		top: .35em;
		left: 2px;
		width: 11px;
		height: 6px;
		border-left: 2px solid var(--u17m-teal);
		border-bottom: 2px solid var(--u17m-teal);
		transform: rotate(-45deg);
	}
}

@media (max-width: 1279px) {

	/* ---------- cart drawer ---------- */
	.u17-m-cart {
		top: 0;
		bottom: 0;
		right: 0;
		width: 92%;
		max-width: 460px;
		background: var(--u17m-panel);
		display: flex;
		flex-direction: column;
		transform: translateX(105%);
		transition: transform .35s cubic-bezier(.3, .7, .2, 1);
		box-shadow: 0 0 40px rgba(0, 0, 0, .5);
	}

	.u17-m-cart[hidden] { display: none; }
	.u17-m-cart.is-on { transform: translateX(0); }

	.u17-m-cart__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.u17-m-cart__scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

	.u17-m-cart__ship { padding: 14px 20px 16px; border-bottom: 1px solid var(--u17m-line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--u17m-body); }
	.u17-m-bar { height: 4px; border-radius: 2px; background: var(--u17m-edge2); overflow: hidden; display: flex; }
	.u17-m-bar i { background: var(--u17m-teal); transition: width .4s; }

	.u17-m-cart__items { display: flex; flex-direction: column; padding: 0 20px; }

	.u17-m-line { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--u17m-line); }

	.u17-m-line__img { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 8px; overflow: hidden; background: #1a1a1a; }
	.u17-m-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

	.u17-m-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
	.u17-m-line__top { display: flex; justify-content: space-between; gap: 8px; }

	.u17-m-line__name { color: var(--u17m-txt); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; }
	.u17-m-line__total { color: var(--u17m-txt); font-size: 15px; font-weight: 700; white-space: nowrap; }
	.u17-m-line__meta { color: var(--u17m-mut); font-size: 13px; }
	.u17-m-line__meta p { margin: 0; }

	.u17-m-line__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

	.u17-m-qty { display: flex; align-items: center; height: 40px; border: 1px solid var(--u17m-edge2); border-radius: 8px; }
	.u17-m-qty button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--u17m-txt); font-size: 18px; cursor: pointer; }
	.u17-m-qty button[disabled] { color: #444; cursor: default; }
	.u17-m-qty span { min-width: 24px; text-align: center; font-size: 15px; font-weight: 600; }

	.u17-m-line__rm {
		height: 40px;
		border: 0;
		background: transparent;
		color: var(--u17m-mut);
		font-family: "Barlow", sans-serif;
		font-size: 13px;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
		padding: 0 2px;
	}

	.u17-m-undo {
		margin: 12px 20px 0;
		padding: 0 8px 0 14px;
		height: 48px;
		border-radius: 10px;
		background: #1a1a1a;
		border: 1px solid var(--u17m-edge2);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.u17-m-undo span { color: var(--u17m-body); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.u17-m-undo button { height: 40px; border: 0; background: transparent; color: var(--u17m-teal); font-family: "Barlow", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }

	.u17-m-cart__upsell { padding: 20px 0 4px; display: flex; flex-direction: column; gap: 12px; }
	.u17-m-cart__upsell .u17-m-block__label { padding: 0 20px; }
	.u17-m-rail { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px; }

	.u17-m-upcard { flex: 0 0 150px; border: 1px solid var(--u17m-edge2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
	.u17-m-upcard img { width: 100%; height: 84px; object-fit: cover; border-radius: 6px; display: block; }
	.u17-m-upcard__name { color: var(--u17m-txt); font-size: 13px; font-weight: 600; line-height: 1.25; min-height: 32px; }
	.u17-m-upcard__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
	.u17-m-upcard__price { color: var(--u17m-body); font-size: 13px; font-weight: 700; }
	.u17-m-upcard__price .amount { color: inherit; }
	.u17-m-upcard__add {
		height: 32px;
		padding: 0 12px;
		border-radius: 6px;
		border: 1px solid var(--u17m-teal);
		background: transparent;
		color: var(--u17m-teal);
		font-family: "Barlow", sans-serif;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
	}

	.u17-m-cart__coupon { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px; }
	.u17-m-couponrow { display: flex; gap: 8px; }
	.u17-m-couponrow input {
		flex: 1;
		min-width: 0;
		height: 48px;
		border-radius: 10px;
		border: 1px solid #333;
		background: var(--u17m-bg);
		color: var(--u17m-txt);
		padding: 0 14px;
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		outline: none;
	}
	.u17-m-couponrow button {
		height: 48px;
		padding: 0 18px;
		border-radius: 10px;
		border: 1px solid #3a3a3a;
		background: #1f1f1f;
		color: var(--u17m-txt);
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.u17-m-coupon {
		height: 48px;
		border-radius: 10px;
		border: 1px dashed var(--u17m-teal);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6px 0 14px;
	}
	.u17-m-coupon > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
	.u17-m-coupon__code { color: var(--u17m-teal); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
	.u17-m-coupon__desc { color: var(--u17m-mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.u17-m-coupon__desc a { display: none; }

	.u17-m-cart__shipcalc { margin: 20px 20px 0; border-top: 1px solid var(--u17m-line); border-bottom: 1px solid var(--u17m-line); }

	.u17-m-acc {
		width: 100%;
		height: 54px;
		border: 0;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		padding: 0;
	}
	.u17-m-acc > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
	.u17-m-acc__title { color: var(--u17m-txt); font-size: 15px; font-weight: 600; }
	.u17-m-acc__sub { color: var(--u17m-mut); font-size: 12px; }
	.u17-m-acc i {
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--u17m-mut);
		border-bottom: 2px solid var(--u17m-mut);
		transform: rotate(45deg);
		transition: transform .2s;
		margin-right: 6px;
	}
	.u17-m-acc.is-open i { transform: rotate(225deg); }
	.u17-m-acc__body { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }
	.u17-m-acc__body[hidden] { display: none; } /* display:flex above would override [hidden] */
	/* Hello paints button:hover/:focus pink (#c36); this is a plain disclosure row */
	.u17-m-acc:hover,
	.u17-m-acc:focus { background: transparent; color: inherit; }
	.u17-m-acc:focus-visible { outline: 2px solid var(--u17m-teal); outline-offset: 2px; }

	.u17-m-shiprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
	.u17-m-shiprow select,
	.u17-m-shiprow input {
		height: 48px;
		min-width: 0;
		border-radius: 10px;
		border: 1px solid #333;
		background: var(--u17m-bg);
		color: var(--u17m-txt);
		padding: 0 12px;
		font-family: "Barlow", sans-serif;
		font-size: 16px;
		outline: none;
		appearance: none;
		-webkit-appearance: none;
	}

	.u17-m-rates { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
	.u17-m-rate {
		min-height: 52px;
		border-radius: 10px;
		border: 1px solid var(--u17m-edge2);
		background: transparent;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px 14px;
		cursor: pointer;
		text-align: left;
	}
	.u17-m-rate.is-on { border-color: var(--u17m-teal); background: #15201f; }
	.u17-m-rate i {
		width: 18px;
		height: 18px;
		border-radius: 9px;
		border: 2px solid var(--u17m-edge2);
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.u17-m-rate.is-on i { border-color: var(--u17m-teal); }
	.u17-m-rate.is-on i::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--u17m-teal); }
	.u17-m-rate__label { color: var(--u17m-txt); font-size: 14px; font-weight: 600; }
	.u17-m-rate__price { margin-left: auto; color: var(--u17m-txt); font-size: 14px; font-weight: 700; }
	.u17-m-rate > span { display: flex; flex-direction: column; line-height: 1.25; }

	.u17-m-cart__foot {
		flex-shrink: 0;
		border-top: 1px solid var(--u17m-edge);
		background: var(--u17m-card);
		padding: 14px 20px 24px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.u17-m-tot { display: flex; justify-content: space-between; font-size: 14px; color: #b5b5b2; }
	.u17-m-tot.is-disc { color: var(--u17m-teal); }
	.u17-m-tot.is-total { align-items: baseline; margin: 4px 0 8px; }
	.u17-m-tot.is-total span:first-child { color: var(--u17m-txt); font-size: 16px; font-weight: 600; }
	.u17-m-tot.is-total span:last-child { color: var(--u17m-txt); font-size: 22px; font-weight: 700; }
	.u17-m-tot .amount { color: inherit; }

	.u17-m-cart__footrow { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
	.u17-m-cart__footrow a { color: var(--u17m-body); font-size: 14px; font-weight: 600; text-decoration: underline; }
	.u17-m-secure { display: flex; align-items: center; gap: 6px; color: var(--u17m-mut); font-size: 12px; }
	.u17-m-secure svg { width: 14px; height: 14px; }

	.u17-m-cart__empty {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 0 32px;
		text-align: center;
	}
	.u17-m-cart__empty svg { width: 44px; height: 44px; color: #3a3a3a; }
	.u17-m-cart__emptytitle { color: var(--u17m-txt); font-size: 18px; font-weight: 600; }
	.u17-m-cart__emptytext { color: var(--u17m-mut); font-size: 14px; }
	.u17-m-cart__empty .u17-m-cta { width: auto; padding: 0 24px; margin-top: 10px; }

	/* in the empty state the undo is a plain text action, not the bar */
	.u17-m-cart__empty .u17-m-undo {
		margin: 4px 0 0;
		padding: 0;
		height: 44px;
		background: transparent;
		border: 0;
		justify-content: center;
		gap: 6px;
	}

	/* ---------- footer: stack ---------- */
	.u17-footer__inner { flex-direction: column; }
	.u17-footer__brand,
	.u17-footer__cols,
	.u17-footer__col--links,
	.u17-footer__col--cats,
	.u17-footer__col--subscribe {
		flex: 0 1 auto;
		width: 100%;
		max-width: 100%;
	}
	.u17-footer__cols { flex-direction: column; margin-top: 24px; gap: 24px; }
	.u17-footer__top { padding: 40px 0; }
	.u17-footer__inner,
	.u17-footer__copy { max-width: 100%; padding-left: 16px; padding-right: 16px; }
	.u17-footer__brand { padding: 0; }
	.u17-footer__contact table { width: 100%; }
	.u17-footer__contact td:first-child { width: 95px; }
	.u17-subscribe .u17-subscribe__input { width: 100%; }
	.u17-subscribe .u17-subscribe__btn { width: 100%; }
}

@media (max-width: 1279px) {

	/* global button radius leaks in from the theme; the design has none here */
	.u17-m__burger,
	.u17-m__icon,
	.u17-m__vehicle,
	.u17-m-nav__btn,
	.u17-m-flink,
	.u17-m-x,
	.u17-m-back,
	.u17-m-search__cancel { border-radius: 0; }

	/* AWS appends its own light dropdown to <body>; the overlay renders results
	   itself, so suppress AWS's while the overlay is open */
	.u17-m-searching .aws-search-result,
	.u17-m-searching .aws-loader,
	.u17-m-search .aws-search-btn,
	.u17-m-search .aws-loader { display: none !important; }

	/* ---------- inline search results ---------- */
	.u17-m-results { display: flex; flex-direction: column; gap: 2px; }

	.u17-m-result {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--u17m-line);
		text-decoration: none;
	}

	.u17-m-result__img {
		width: 64px;
		height: 64px;
		flex: 0 0 64px;
		border-radius: 8px;
		overflow: hidden;
		background: #1a1a1a;
	}

	.u17-m-result__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

	.u17-m-result__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
	.u17-m-result__name { color: var(--u17m-txt); font-size: 15px; font-weight: 600; line-height: 1.25; }
	.u17-m-result__fit { color: var(--u17m-mut); font-size: 13px; }
	.u17-m-result__price { color: var(--u17m-txt); font-size: 15px; font-weight: 700; white-space: nowrap; }
	.u17-m-result__price .amount,
	.u17-m-result__price bdi { color: inherit; }

	.u17-m-viewall {
		height: 50px;
		margin-top: 16px;
		border-radius: 10px;
		border: 1px solid var(--u17m-edge2);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--u17m-txt);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
		padding: 0 12px;
	}

	.u17-m-noresults { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; text-align: center; }
	.u17-m-noresults__title { color: var(--u17m-txt); font-size: 17px; font-weight: 600; }
	.u17-m-noresults__text { color: var(--u17m-mut); font-size: 14px; }

}

@media (max-width: 1279px) {

	/* WooCommerce price HTML carries screen-reader copy and del/ins for sales;
	   keep it accessible but out of the visual row */
	.u17-m-result__price .screen-reader-text,
	.u17-m-line__total .screen-reader-text,
	.u17-m-upcard__price .screen-reader-text,
	.u17-m-tot .screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.u17-m-result__price,
	.u17-m-upcard__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }

	.u17-m-result__price del,
	.u17-m-upcard__price del { color: var(--u17m-dim); font-weight: 500; font-size: 12px; text-decoration: line-through; }

	.u17-m-result__price ins,
	.u17-m-upcard__price ins { color: var(--u17m-txt); text-decoration: none; background: transparent; }
}

@media (max-width: 1279px) {
	/* AWS highlights the matched words */
	.u17-m-result__name strong { color: var(--u17m-teal); font-weight: 700; }
}

/* ============================================================ small desktop
   1024–1279px: the compact header, but the page content already uses its
   desktop layout (pages switch at 1024px), whose sticky parts (filters, product
   summary, section nav, checkout summary) expect a header that scrolls away
   like the desktop one. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.u17-m {
		position: relative;
	}
}

/* ============================================================ tablet
   Between ~600px and the desktop breakpoint the phone layout would otherwise
   stretch edge to edge — a 929px search field, a full-bleed finder sheet. Bands
   stay full width; their contents get a container and the lockup scales up. */
@media (min-width: 600px) and (max-width: 1279px) {

	:root { --u17m-gutter: clamp(16px, 4vw, 40px); }

	/* header bands: keep the background full width, contain the content */
	.u17-m__promo,
	.u17-m__bar,
	.u17-m__vehicle { padding-inline: var(--u17m-gutter); }

	/* the lockup can breathe at this size */
	.u17-m__logo { --u17m-logo-h: clamp(22px, calc((100vw - 216px) / 3.6), 52px); }

	/* bottom sheets become centred cards */
	.u17-m-sheet {
		left: 50%;
		right: auto;
		transform: translate(-50%, 105%);
		width: min(520px, calc(100vw - 2 * var(--u17m-gutter)));
		border-radius: 24px 24px 0 0;
		border-left: 1px solid var(--u17m-edge2);
		border-right: 1px solid var(--u17m-edge2);
	}

	.u17-m-sheet.is-on { transform: translate(-50%, 0); }

	/* Search overlay: one centred column. The inline padding is dropped so the
	   heading, the field, the rule under it and the chips all share one edge —
	   with the padding kept, the rule ran a gutter wider than its own content. */
	.u17-m-search__title,
	.u17-m-search__bar,
	.u17-m-search__body {
		width: min(680px, calc(100% - 2 * var(--u17m-gutter)));
		margin-inline: auto;
		padding-inline: 0;
	}

	.u17-m-search__title { padding-top: 28px; }

	/* drawer + cart already cap their width; give them a touch more room */
	.u17-m-drawer { width: 420px; }
	.u17-m-cart { width: 480px; }

	/* footer can use two columns at this size */
	.u17-footer__cols { flex-direction: row; flex-wrap: wrap; gap: 32px 24px; }
	.u17-footer__col--links,
	.u17-footer__col--cats { flex: 1 1 220px; max-width: none; }
	.u17-footer__col--subscribe { flex: 1 1 100%; max-width: 520px; }
	.u17-footer__inner,
	.u17-footer__copy { padding-inline: var(--u17m-gutter); }
}

/* ---------- iPhone memory: skip rendering far below the screen ----------
   Phones and tablets: the footer isn't laid out or painted until the visitor
   scrolls near it, so it takes no graphics layers on the first screens. It
   stays in the page for search, find-in-page and screen readers. `auto`
   keeps the real height once it has rendered (no scrollbar jumps). Page
   sections do the same in their own stylesheets (u17-home.css, u17-pdp.css). */
@media (max-width: 1279px) {
	.u17-footer {
		content-visibility: auto;
		contain-intrinsic-size: auto 1200px;
	}
}