/**
 * The shop menu (inc/nav.php): the desktop mega menu in the native header
 * (1280px and up), and a few touches for the phone menu in the drawer.
 * Colours, type and motion come from u17-system.css; the top links keep the
 * header's own type (u17-chrome.css).
 */

/* ============================================================ desktop: mega menu */
@media (min-width: 1280px) {

	/* the panels span the header's full width, just under the black band */
	.u17-main { position: relative; }

	.u17-mega > .u17-mega__item {
		position: static;
		display: flex;
	}

	/* ---------- top links ---------- */
	.u17-mega .u17-mega__top {
		position: relative;
		display: flex;
		align-items: center;
		gap: 9px;
		margin: 0;
		padding: 13px 15px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		line-height: 20px;
		font-weight: 700;
		letter-spacing: normal;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: color var(--u17-fast) var(--u17-ease);
	}

	.u17-mega .u17-mega__top:hover,
	.u17-mega .u17-mega__top:focus,
	.u17-mega .u17-mega__item.is-open > .u17-mega__top {
		background: none;
		color: var(--u17-teal);
	}

	/* caret */
	.u17-mega button.u17-mega__top::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform var(--u17-fast) var(--u17-ease);
	}

	.u17-mega .u17-mega__item.is-open > button.u17-mega__top::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* teal underline on hover / open / current page */
	.u17-mega .u17-mega__top::before {
		content: "";
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 5px;
		height: 2px;
		background: var(--u17-teal);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--u17-fast) var(--u17-ease);
	}

	.u17-mega .u17-mega__top:hover::before,
	.u17-mega .u17-mega__top[aria-current]::before,
	.u17-mega .u17-mega__item.is-open > .u17-mega__top::before {
		transform: scaleX(1);
	}

	/* ---------- panel ---------- */
	.u17-mega__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 60;
		background: var(--u17-surface);
		border-top: 1px solid var(--u17-edge-3);
		/* dims the page under the open panel; clipped so the header above stays
		   bright (the 12px above covers the gap under the top links, where the
		   band is black anyway, so the pointer can cross it) */
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
		clip-path: inset(-12px -100vmax -100vmax -100vmax);
		/* never taller than the screen below the header (set by u17-nav.js);
		   the rest scrolls inside the panel */
		max-height: var(--u17-mega-max, none);
		overflow-y: auto;
		overscroll-behavior: contain;
		color: var(--u17-on-dark-2);
		font-family: var(--u17-font);
		text-align: left;
		cursor: default;
	}

	/* Without the script: no height cap, so the hover bridge below isn't
	   clipped. (With it, a short delay before closing covers the gap.) */
	.u17-mega:not(.is-js) .u17-mega__panel { overflow: visible; }

	.u17-mega__panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 12px;
	}

	.u17-mega__item.is-open > .u17-mega__panel,
	.u17-mega:not(.is-js) > .u17-mega__item:hover > .u17-mega__panel,
	.u17-mega:not(.is-js) > .u17-mega__item:focus-within > .u17-mega__panel {
		display: block;
		animation: u17-mega-fade 0.2s var(--u17-ease);
	}

	.u17-mega__item.is-open .u17-mega__wrap {
		animation: u17-mega-rise 0.28s var(--u17-ease);
	}

	/* opened before its contents arrived (u17-nav.js fetches them on desktop):
	   say so, instead of an empty strip */
	.u17-mega__panel[data-u17-mega-src]::after {
		content: "Loading…";
		display: block;
		max-width: var(--u17-wrap);
		margin: 0 auto;
		padding: 28px 10px;
		font-size: var(--u17-fs-small);
		letter-spacing: 0.02em;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__wrap {
		max-width: var(--u17-wrap);
		margin: 0 auto;
		padding: 22px 10px 24px;
	}

	.u17-mega :is(p, ul) {
		margin: 0;
	}

	.u17-mega ul {
		list-style: none;
		padding: 0;
	}

	.u17-mega__panel a {
		text-decoration: none;
	}

	.u17-mega__panel :focus-visible {
		outline: 2px solid var(--u17-teal);
		outline-offset: 2px;
	}

	/* the number after a link */
	.u17-mega .u17-nav-n {
		flex: none;
		font-size: 13px;
		font-weight: 300;
		color: var(--u17-on-dark-muted);
		font-variant-numeric: tabular-nums;
	}

	/* ---------- shop by vehicle: cars down the left, the chosen car's parts on the right ---------- */
	.u17-mega__cars {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		/* one row per car; the last row takes up the rest when the parts run taller */
		grid-template-rows: repeat(var(--u17-mega-rows, 9), auto) 1fr;
		column-gap: 44px;
	}

	.u17-mega__car { display: contents; }

	.u17-mega .u17-mega__tab {
		grid-column: 1;
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 54px;
		margin: 0;
		padding: 6px 34px 6px 6px;
		background: transparent;
		border: 0;
		border-radius: 10px;
		box-shadow: none;
		font: inherit;
		color: var(--u17-on-dark-2);
		text-align: left;
		text-transform: none;
		letter-spacing: normal;
		cursor: pointer;
		transition: background-color var(--u17-fast) var(--u17-ease);
	}

	.u17-mega .u17-mega__tab:hover,
	.u17-mega .u17-mega__tab:focus {
		background: var(--u17-surface-3);
		color: var(--u17-on-dark-2);
	}

	.u17-mega .u17-mega__car.is-active > .u17-mega__tab {
		background: var(--u17-edge-2);
	}

	/* teal bar on the chosen car */
	.u17-mega__tab::before {
		content: "";
		position: absolute;
		left: 0;
		top: 12px;
		bottom: 12px;
		width: 3px;
		border-radius: 2px;
		background: var(--u17-teal);
		opacity: 0;
		transition: opacity var(--u17-fast) var(--u17-ease);
	}

	/* chevron */
	.u17-mega__tab::after {
		content: "";
		position: absolute;
		right: 16px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-top: 2px solid var(--u17-on-dark-dim);
		border-right: 2px solid var(--u17-on-dark-dim);
		transform: translateY(-50%) rotate(45deg);
		transition: border-color var(--u17-fast), right var(--u17-fast) var(--u17-ease);
	}

	.u17-mega__car.is-active > .u17-mega__tab::before { opacity: 1; }

	.u17-mega__car.is-active > .u17-mega__tab::after {
		right: 13px;
		border-color: var(--u17-teal);
	}

	.u17-mega__thumb {
		flex: none;
		width: 60px;
		aspect-ratio: 3 / 2;
		border-radius: 6px;
		overflow: hidden;
		background: var(--u17-edge-2);
	}

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

	.u17-mega__tabtext {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.u17-mega__tabname {
		font-size: 14px;
		line-height: 1.22;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--u17-on-dark);
	}

	.u17-mega__tabmeta {
		font-size: 12.5px;
		line-height: 1.3;
		font-weight: 300;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__car.is-active .u17-mega__tabmeta { color: var(--u17-teal); }

	/* "Your car" (the saved car; set by u17-nav.js) */
	.u17-mega__yourtag {
		display: inline-block;
		margin-left: 8px;
		padding: 1px 7px;
		border-radius: 999px;
		background: var(--u17-teal);
		color: var(--u17-black);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		vertical-align: 1px;
	}

	/* the brand lists, under a rule */
	.u17-mega .u17-mega__tab--plain {
		min-height: 48px;
		padding-left: 14px;
	}

	.u17-mega .u17-mega__car--brand.is-first > .u17-mega__tab {
		margin-top: 16px;
		/* a 1px rule 8px above the row */
		box-shadow: 0 -8px 0 -7px var(--u17-edge-3);
	}

	/* ---------- the chosen car ---------- */
	.u17-mega__detail {
		grid-column: 2;
		grid-row: 1 / -1;
		display: none;
		min-width: 0;
	}

	.u17-mega__car.is-active > .u17-mega__detail,
	.u17-mega:not(.is-js) .u17-mega__car:focus-within > .u17-mega__detail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"head feature"
			"cols feature"
			"more feature";
		column-gap: 40px;
		align-content: start;
		animation: u17-mega-fade 0.22s var(--u17-ease);
	}

	.u17-mega:not(.is-js) .u17-mega__cars:focus-within .u17-mega__car.is-active:not(:focus-within) > .u17-mega__detail {
		display: none;
	}

	.u17-mega__car.is-active > .u17-mega__detail--list,
	.u17-mega:not(.is-js) .u17-mega__car:focus-within > .u17-mega__detail--list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"head"
			"list";
	}

	.u17-mega__head {
		grid-area: head;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		column-gap: 24px;
		row-gap: 2px;
		padding: 4px 0 18px;
		border-bottom: 1px solid var(--u17-edge-2);
	}

	.u17-mega__kicker {
		flex-basis: 100%;
		font-size: 13px;
		line-height: 1.4;
		font-weight: 400;
		letter-spacing: var(--u17-tracking-label);
		text-transform: uppercase;
		color: var(--u17-teal);
	}

	.u17-mega__title {
		font-size: 34px;
		line-height: 1.1;
		font-weight: 300;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--u17-on-dark);
	}

	/* "Shop all … parts": the system's arrow link, on dark */
	.u17-mega__all {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
		padding-bottom: 4px;
		border-bottom: 1px solid currentColor;
		font-family: var(--u17-font);
		font-size: 14px;
		line-height: 1.3;
		font-weight: 500;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--u17-teal);
		white-space: nowrap;
		transition: color var(--u17-fast);
	}

	.u17-mega__all::after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--u17-fast) var(--u17-ease);
	}

	.u17-mega__all:hover { color: var(--u17-white); }
	.u17-mega__all:hover::after { transform: translateX(3px) rotate(45deg); }

	/* Front / Side / Rear */
	.u17-mega__cols {
		grid-area: cols;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		padding-top: 22px;
	}

	.u17-mega__colhead {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 0 0 8px;
		font-size: 14px;
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--u17-on-dark);
		transition: color var(--u17-fast);
	}

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

	.u17-mega__links a,
	.u17-mega__models a {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		font-size: 15px;
		line-height: 1.35;
		font-weight: 300;
		color: var(--u17-on-dark-2);
		transition: color var(--u17-fast), transform var(--u17-fast) var(--u17-ease);
	}

	.u17-mega__links a:hover,
	.u17-mega__models a:hover {
		color: var(--u17-teal);
		transform: translateX(3px);
	}

	.u17-mega__links a:hover .u17-nav-n,
	.u17-mega__models a:hover .u17-nav-n { color: inherit; }

	/* Interior, Engine, … */
	.u17-mega__more {
		grid-area: more;
		align-self: start;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-top: 22px;
		padding-top: 18px;
		border-top: 1px solid var(--u17-edge-2);
	}

	.u17-mega__morelabel {
		margin-right: 8px;
		font-size: 12px;
		letter-spacing: var(--u17-tracking-label);
		text-transform: uppercase;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__chip {
		display: inline-flex;
		align-items: baseline;
		gap: 8px;
		padding: 7px 14px;
		border: 1px solid var(--u17-edge-3);
		border-radius: 999px;
		font-size: 14px;
		line-height: 1.3;
		font-weight: 300;
		color: var(--u17-on-dark-2);
		transition: border-color var(--u17-fast), color var(--u17-fast);
	}

	.u17-mega__chip:hover {
		border-color: var(--u17-teal);
		color: var(--u17-teal);
	}

	.u17-mega__chip:hover .u17-nav-n { color: inherit; }

	/* the car's photo, and its best sellers under it */
	.u17-mega__side {
		grid-area: feature;
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-width: 0;
	}

	.u17-mega__feature {
		position: relative;
		display: block;
		aspect-ratio: 3 / 2;
		border-radius: 12px;
		overflow: hidden;
		background: var(--u17-edge-2);
	}

	.u17-mega__featureimg {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s var(--u17-ease);
	}

	.u17-mega__feature::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 58%);
	}

	.u17-mega__feature:hover .u17-mega__featureimg { transform: scale(1.04); }

	.u17-mega__featuretext {
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 13px;
		z-index: 1;
		font-size: 15px;
		line-height: 1.3;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--u17-white);
	}

	.u17-mega__pickslabel {
		margin: 0 0 8px;
		font-size: 12px;
		letter-spacing: var(--u17-tracking-label);
		text-transform: uppercase;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__picklist {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.u17-mega__pick {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 -8px;
		padding: 6px 8px;
		border-radius: 10px;
		color: var(--u17-on-dark-2);
		transition: background-color var(--u17-fast) var(--u17-ease);
	}

	.u17-mega__pick:hover { background: var(--u17-edge-2); }

	.u17-mega__pickimg {
		flex: none;
		width: 60px;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--u17-paper);
	}

	.u17-mega__pickimg.is-empty {
		background: linear-gradient(135deg, var(--u17-edge-3), var(--u17-surface-3));
	}

	.u17-mega__pickimg img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s var(--u17-ease);
	}

	.u17-mega__pick:hover .u17-mega__pickimg img { transform: scale(1.08); }

	.u17-mega__picktext {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.u17-mega__pickname {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 13.5px;
		line-height: 1.3;
		font-weight: 300;
		color: var(--u17-on-dark);
		transition: color var(--u17-fast);
	}

	.u17-mega__pick:hover .u17-mega__pickname { color: var(--u17-teal); }

	.u17-mega__pickprice {
		font-size: 14px;
		line-height: 1.3;
		font-weight: 500;
		color: var(--u17-on-dark);
	}

	/* WooCommerce's price: the old price struck through and muted, the sale price plain */
	.u17-mega__pickprice del {
		margin-right: 6px;
		font-weight: 300;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__pickprice ins {
		text-decoration: none;
	}

	/* WooCommerce's spoken price ("Original price was: …") stays for screen
	   readers only — without leaning on Elementor's .screen-reader-text rule */
	.u17-mega__pickprice .screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* a car without a photo */
	.u17-mega__ph {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at 30% 20%, #262626, #121212 72%);
		font-size: 10px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__ph--big {
		font-size: 22px;
		letter-spacing: 8px;
	}

	/* every model of a brand */
	.u17-mega__models {
		grid-area: list;
		columns: 4;
		column-gap: 36px;
		padding-top: 18px;
	}

	.u17-mega__models li { break-inside: avoid; }

	.u17-mega__brands {
		grid-area: list;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px;
		padding-top: 22px;
	}

	/* ---------- shop by part ---------- */
	.u17-mega__parts {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px;
	}

	.u17-mega__parts .u17-mega__colhead {
		margin-bottom: 10px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--u17-edge-2);
	}

	.u17-mega__tiles {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.u17-mega__tile {
		display: flex;
		align-items: center;
		gap: 14px;
		margin: 0 -8px;
		padding: 6px 8px;
		border-radius: 10px;
		color: var(--u17-on-dark-2);
		transition: background-color var(--u17-fast) var(--u17-ease);
	}

	.u17-mega__tile:hover { background: var(--u17-edge-2); }

	.u17-mega__tileimg {
		flex: none;
		width: 52px;
		height: 52px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--u17-paper);
	}

	/* a part type without a picture */
	.u17-mega__tileimg.is-empty {
		background: linear-gradient(135deg, var(--u17-edge-3), var(--u17-surface-3));
	}

	.u17-mega__tileimg img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s var(--u17-ease);
	}

	.u17-mega__tile:hover .u17-mega__tileimg img { transform: scale(1.08); }

	.u17-mega__tiletext {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.u17-mega__tilename {
		font-size: 15px;
		line-height: 1.25;
		font-weight: 400;
		color: var(--u17-on-dark);
		transition: color var(--u17-fast);
	}

	.u17-mega__tile:hover .u17-mega__tilename { color: var(--u17-teal); }

	.u17-mega__tilemeta {
		font-size: 13px;
		line-height: 1.3;
		font-weight: 300;
		color: var(--u17-on-dark-muted);
	}

	.u17-mega__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		margin-top: 24px;
		padding-top: 18px;
		border-top: 1px solid var(--u17-edge-2);
	}

	.u17-mega__yours {
		font-size: 15px;
		line-height: 1.4;
		font-weight: 300;
		color: var(--u17-on-dark-2);
	}

	.u17-mega__yours a {
		color: var(--u17-teal);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.u17-mega__yours a:hover { color: var(--u17-white); }

	@keyframes u17-mega-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes u17-mega-rise {
		from { transform: translateY(-6px); }
		to { transform: none; }
	}
}

/* ============================================================ phone: drawer
   The drawer's own slide-in panels (u17-mobile.js, styled in u17-chrome.css)
   carry the menu; the script moves each nested list into a panel of the
   drawer, hence the drawer-wide selectors. */
@media (max-width: 1279px) {

	/* the number after a part type or model */
	.u17-m-drawer .u17-nav-n {
		flex: none;
		font-size: 14px;
		font-weight: 400;
		color: var(--u17m-mut);
		font-variant-numeric: tabular-nums;
	}

	/* long car names wrap onto a second line rather than run off the edge */
	.u17-m-nav--shop > li > :is(a, .u17-m-nav__btn) {
		height: auto;
		min-height: 60px;
		padding-block: 10px;
		line-height: 1.1;
		white-space: normal;
	}

	.u17-m-drawer .u17-m-panel__body .u17-m-nav__btn { white-space: normal; }

	/* the shop's links, set apart from the menu above them */
	.u17-m-nav--shop > li.u17-m-nav__gap { margin-top: 20px; }

	.u17-m-nav--shop > li.u17-m-nav__gap > a { border-top: 1px solid var(--u17m-edge2); }
}

@media (prefers-reduced-motion: reduce) {
	.u17-mega__item.is-open > .u17-mega__panel,
	.u17-mega__item.is-open .u17-mega__wrap,
	.u17-mega__car.is-active > .u17-mega__detail { animation: none; }

	.u17-mega *,
	.u17-mega *::before,
	.u17-mega *::after { transition: none !important; }

	.u17-mega__feature:hover .u17-mega__featureimg,
	.u17-mega__tile:hover .u17-mega__tileimg img,
	.u17-mega__pick:hover .u17-mega__pickimg img,
	.u17-mega__links a:hover,
	.u17-mega__models a:hover { transform: none; }
}