/*
 * Design Refresh v2 consumer chrome (area C1; template-parts/v2/chrome/consumer-*.php).
 *
 * The header, mobile menu, bottom bar and footer use the theme's Tailwind build (dist/style.css), as the
 * export did (its legacy.css is that build). This file adds what the export's own stylesheets gave the
 * chrome, ported from film-design.css, brand-system.css, interaction-polish.css and classic-update.css
 * (their copies in redesign-v2/assets are scoped to .hwr2, the page content, and do not reach it):
 * the product menu bar, the footer resource strip, scroll padding under the sticky header, focus rings,
 * touch-action and the reduced-motion switch. Phone additions: 44px touch targets, 16px form text.
 * Everything is keyed to body.hitek-v2-chrome-consumer (inc/v2/pages.php).
 */

/* ---- Document: anchors land below the sticky header + product bar (classic-update.css). ---- */
html:has(> body.hitek-v2-chrome-consumer) {
	scroll-padding-top: 190px;
}

@media (max-width: 900px) {
	html:has(> body.hitek-v2-chrome-consumer) {
		scroll-padding-top: 170px;
	}
}

/* The export's brand-system.css sets the page text to line-height 1.6 (html body); the chrome follows. */
.hitek-v2-chrome-consumer #page {
	line-height: 1.6;
}

body.hitek-v2-chrome-consumer :is(a, button, input, select, summary) {
	touch-action: manipulation;
}

/*
 * Design decorations that reach past the screen edge (e.g. the tilted dot floor behind
 * .current-title, a 3D-transformed ::before) must not make the page scroll sideways; the export
 * itself scrolls 290px sideways on /about-us/ at 1440px. clip (not hidden) keeps position: sticky
 * inside the content working.
 */
.hitek-v2-chrome-consumer #content > .hwr2,
.hitek-v2-chrome-consumer .hitek-v2-band.hwr2 {
	overflow-x: clip;
}

body.hitek-v2-chrome-consumer :is(input, select, textarea, button, a, summary):focus-visible {
	outline: 2px solid #ed001e;
	outline-offset: 3px;
}

/*
 * The chrome's form controls use the page font, as the export's stylesheet makes every button and field do
 * ("body button, body input, … { font-family: HitekInter }"; its copy in redesign-v2 is scoped to .hwr2 and
 * does not reach the chrome). Tailwind's preflight is off, so they kept the browser's font (Arial): the header
 * search's "Search" button and its field, and the cart count.
 */
body.hitek-v2-chrome-consumer :is(#site-header, #nav-menu, #cart-sidebar, #colophon) :is(button, input, select, textarea) {
	font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
	html:has(> body.hitek-v2-chrome-consumer) {
		scroll-behavior: auto !important;
	}

	body.hitek-v2-chrome-consumer *,
	body.hitek-v2-chrome-consumer *::before,
	body.hitek-v2-chrome-consumer *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* A signed-in user without a shop role has the admin bar: keep the sticky header under it. */
body.hitek-v2-chrome-consumer.admin-bar #site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.hitek-v2-chrome-consumer.admin-bar #site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* WordPress unpins the admin bar on small phones. */
	body.hitek-v2-chrome-consumer.admin-bar #site-header {
		top: 0;
	}
}

/*
 * The mobile menu and the cart drawer (fixed, z-index 70) open over the whole screen, but the admin bar
 * (#wpadminbar, z-index 99999: administrators, and product staff without a shop role) covered their tops,
 * close buttons included, so a tap there hit the toolbar. With the toolbar they and their overlays sit above
 * it, as WordPress's own modals do; it shows again when they close. The menu and the overlays are hidden while
 * closed (visibility), so they keep that place. The closed cart drawer only moves off screen and its shadow
 * reaches into the page: it is lifted while open and for its 0.4s slide-out (the theme's transition).
 */
body.hitek-v2-chrome-consumer.admin-bar :is(#nav-overlay, #cart-overlay) {
	z-index: 100000;
}

body.hitek-v2-chrome-consumer.admin-bar #nav-menu {
	z-index: 100001;
}

body.hitek-v2-chrome-consumer.admin-bar #cart-sidebar {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s linear 0.4s;
}

body.hitek-v2-chrome-consumer.admin-bar #cart-sidebar.is-open {
	z-index: 100001;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}

/*
 * The masthead's backdrop-filter makes it a stacking context with z-index auto, which painted the primary menu's
 * sub-menus and flyouts (Category, Products) under the product bar below it (z-index 80), so their first items
 * could not be hovered or clicked. Lift the masthead above the bar; the bar's own panels open downwards, away
 * from it, and the header search (inside the masthead) now also covers the bar while it is open.
 */
.hitek-v2-chrome-consumer #masthead {
	position: relative;
	z-index: 90;
}

/*
 * Primary menu dropdowns (desktop): the theme's hover rule (.hitek-nav .sub-menu li a:hover) indents a row by
 * widening its left padding 1.25rem -> 1.5rem. The menus are only as wide as their longest row (200px at
 * least), so the hovered "Automotive & Marine Tint" wrapped onto two lines and pushed the rows below it down
 * 18px: aiming at "Architectural" opened Security's flyout, and the rows jumped back when the pointer left.
 * The hovered row gives the 4px back on its right (both paddings animate together), so its text keeps its
 * width and every row its height; the arrow of a row with a flyout stays where it was.
 */
.hitek-v2-chrome-consumer .hitek-nav .sub-menu li a {
	transition: color 0.2s, border-color 0.2s, background 0.2s, padding 0.2s;
}

.hitek-v2-chrome-consumer .hitek-nav .sub-menu li a:hover {
	padding-right: 1rem;
}

.hitek-v2-chrome-consumer .hitek-nav .sub-menu li.menu-item-has-children > a::before {
	transition: translate 0.2s;
}

.hitek-v2-chrome-consumer .hitek-nav .sub-menu li.menu-item-has-children > a:hover::before {
	translate: -0.25rem 0;
}

/* ---- Product menu bar: nav.hitek-core-nav (film-design.css + brand-system.css + interaction-polish.css). ---- */
.hitek-v2-chrome-consumer .hitek-core-nav {
	position: relative;
	z-index: 80;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	justify-content: center;
	align-items: stretch;
	gap: 0;
	padding-inline: clamp(12px, 3vw, 42px);
	background: #101010;
	border-block: 1px solid #292929;
	border-bottom-color: #3d3d3d;
	box-shadow: 0 5px 20px #0005;
	color: #fff;
	font-family: var(--hitek-font-sans, Inter, Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.hitek-v2-chrome-consumer .hitek-core-nav > details,
.hitek-v2-chrome-consumer .hitek-core-nav > a {
	min-width: 0;
	text-align: center;
}

.hitek-v2-chrome-consumer .hitek-core-nav details {
	position: relative;
}

.hitek-v2-chrome-consumer .hitek-core-nav summary,
.hitek-v2-chrome-consumer .hitek-core-nav > a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 50px;
	padding: 12px 10px;
	color: #ddd;
	line-height: 1.4;
	white-space: normal;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
}

.hitek-v2-chrome-consumer .hitek-core-nav > details > summary {
	height: 100%;
}

.hitek-v2-chrome-consumer .hitek-core-nav summary::-webkit-details-marker {
	display: none;
}

.hitek-v2-chrome-consumer .hitek-core-nav summary::after {
	content: "\2304";
	flex: 0 0 auto;
	margin-left: 7px;
	color: #ed001e;
}

.hitek-v2-chrome-consumer .hitek-core-nav a {
	transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.hitek-v2-chrome-consumer .hitek-core-nav summary:hover,
.hitek-v2-chrome-consumer .hitek-core-nav details[open] > summary {
	color: #ed001e;
	background: #1c1a1a;
}

.hitek-v2-chrome-consumer .hitek-core-nav a:hover {
	color: #fff;
	background: #ed001e0d;
	box-shadow: inset 0 -2px #ed001e;
}

.hitek-v2-chrome-consumer .hitek-core-nav :is(summary.is-current, a[aria-current="page"]) {
	color: #fff;
	background: #131313;
	box-shadow: inset 0 -2px #ed001e;
}

.hitek-v2-chrome-consumer .hitek-core-nav :is(a, summary):focus-visible {
	outline: 2px solid #ed001e;
	outline-offset: -3px;
}

.hitek-v2-chrome-consumer .hitek-core-nav .core-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	box-sizing: border-box;
	min-width: 235px;
	max-height: 65vh;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 8px;
	background: #151313;
	border: 1px solid #555;
	border-top: 2px solid #ed001e;
	box-shadow: 0 16px 36px rgb(0 0 0 / 0.6), 0 1px 0 rgba(237, 0, 30, 0.25);
	text-align: left;
}

.hitek-v2-chrome-consumer .hitek-core-nav details:last-child .core-menu {
	left: auto;
	right: 0;
}

.hitek-v2-chrome-consumer .hitek-core-nav .core-menu a {
	display: block;
	padding: 10px 12px;
	color: #ddd;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
}

.hitek-v2-chrome-consumer .hitek-core-nav .core-menu a:first-child {
	margin-bottom: 5px;
	border-bottom: 1px solid #393333;
	color: #fff;
	font-weight: 700;
}

@media (max-width: 1050px) {
	.hitek-v2-chrome-consumer .hitek-core-nav summary,
	.hitek-v2-chrome-consumer .hitek-core-nav > a {
		font-size: 11px;
	}
}

@media (max-width: 900px) {
	.hitek-v2-chrome-consumer .hitek-core-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-inline: 12px;
	}

	.hitek-v2-chrome-consumer .hitek-core-nav summary,
	.hitek-v2-chrome-consumer .hitek-core-nav > a {
		min-height: 48px;
	}
}

@media (max-width: 600px) {
	.hitek-v2-chrome-consumer .hitek-core-nav {
		padding-inline: 8px;
	}

	.hitek-v2-chrome-consumer .hitek-core-nav details {
		position: static;
	}

	.hitek-v2-chrome-consumer .hitek-core-nav summary,
	.hitek-v2-chrome-consumer .hitek-core-nav > a {
		padding: 9px 5px;
		font-size: 10px;
	}

	.hitek-v2-chrome-consumer .hitek-core-nav .core-menu,
	.hitek-v2-chrome-consumer .hitek-core-nav details:last-child .core-menu {
		left: 12px;
		right: 12px;
		min-width: 0;
		max-height: 55vh;
	}
}

/* Touch (phones and tablets, like the rest of the chrome below 1024px): full-height rows in the open panel. */
@media (max-width: 1023px) {
	.hitek-v2-chrome-consumer .hitek-core-nav .core-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-block: 8px;
	}
}

/* ---- Footer resource strip: nav.classic-resources (classic-update.css + interaction-polish.css). ---- */
.hitek-v2-chrome-consumer .classic-resources {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	background: #101010;
	border-top: 1px solid #282828;
	border-bottom: 1px solid #242424;
	font-family: var(--hitek-font-sans, Inter, Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.hitek-v2-chrome-consumer .classic-resources a {
	color: #ddd;
	text-decoration: none;
	white-space: nowrap;
}

.hitek-v2-chrome-consumer .classic-resources a:hover,
.hitek-v2-chrome-consumer .classic-resources a[aria-current="page"] {
	color: #ed001e;
}

@media (max-width: 900px) {
	.hitek-v2-chrome-consumer .classic-resources {
		padding: 12px 15px;
		font-size: 11px;
	}
}

/* "Cookie settings" (consent re-open): looks like the legal links next to it. */
.hitek-v2-chrome-consumer .hitek-v2-footer__cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.hitek-v2-chrome-consumer .hitek-v2-footer__cookies:hover {
	color: #ed001e;
}

/* The footer's wave canvas paints over the strip (as in the export) but must not take its taps. */
.hitek-v2-chrome-consumer .hitek-v2-footer .hitek-ocean-wave {
	pointer-events: none;
}

/* ---- Mobile bottom bar (legacy-template routes only) ---- */
.hitek-v2-chrome-consumer .hitek-bottom-bar__item {
	min-height: 44px;
	color: hsla(0, 0%, 100%, 0.45);
}

.hitek-v2-chrome-consumer .hitek-bottom-bar__item:hover,
.hitek-v2-chrome-consumer .hitek-bottom-bar__item:active {
	color: #fff;
}

@media (max-width: 1023px) {
	/* The theme pads #content for its bottom bar on every page; the export only has the bar (and that padding)
	   on its legacy-template pages. */
	body.hitek-v2-chrome-consumer:not(.hitek-v2-has-bottom-bar) #content {
		padding-bottom: 0;
	}

	/* The fixed bottom bar overlays the end of the page: keep the footer's last line clear of it. */
	body.hitek-v2-has-bottom-bar .hitek-footer-main {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ---- Phones and tablets: touch targets and form text ---- */
@media (max-width: 1023px) {
	.hitek-v2-chrome-consumer .hitek-v2-mobile-actions {
		gap: 0;
		margin-right: -10px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-tap {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* The hamburger grows to 44x44; its lines stay where they were. */
	.hitek-v2-chrome-consumer .hitek-hamburger.hitek-v2-tap {
		width: 44px;
		height: 44px;
	}

	.hitek-v2-chrome-consumer .hitek-hamburger.hitek-v2-tap .hitek-hamburger__line {
		left: 12px;
	}

	.hitek-v2-chrome-consumer .hitek-hamburger.hitek-v2-tap .hitek-hamburger__line--1 {
		top: 16px;
	}

	.hitek-v2-chrome-consumer .hitek-hamburger.hitek-v2-tap .hitek-hamburger__line--2 {
		top: 22px;
	}

	.hitek-v2-chrome-consumer .hitek-hamburger.hitek-v2-tap .hitek-hamburger__line--3 {
		top: 28px;
	}

	/* The logo row keeps its height with the larger buttons. */
	.hitek-v2-chrome-consumer #masthead > .mx-auto {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	/* Header logo: a 44px link around the 28px logo (the row is already 44px tall: the menu buttons). */
	.hitek-v2-chrome-consumer #masthead .custom-logo-link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Mobile menu: parent rows, the social links and the footer links of the menu. */
	.hitek-v2-chrome-consumer .hitek-mobile-menu a {
		min-height: 44px;
	}

	/* The menu's bottom block: phone number, Dealer Login / Dashboard and Logout. */
	.hitek-v2-chrome-consumer #nav-menu .border-t > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		box-sizing: border-box;
	}

	.hitek-v2-chrome-consumer #nav-menu .border-t > a[href^="tel:"] {
		display: inline-flex;
		justify-content: flex-start;
	}

	/*
	 * Cart drawer (signed-in users; dealers on the visualizer and PPF Ultra): the close button (32px) and each
	 * item's remove button (28px; main.js re-renders the items, so this keys on the class) get 44x44 hit areas;
	 * the negative margins keep the drawer's layout where it was.
	 */
	.hitek-v2-chrome-consumer #cart-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: -6px;
	}

	.hitek-v2-chrome-consumer .hitek-cart-item__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: -8px;
	}

	/* "View Cart" / "Checkout" (42px) and the empty drawer's "Go to Dashboard" (36px) grow to 44px. */
	.hitek-v2-chrome-consumer #cart-sidebar .hitek-cart-sidebar__btn {
		min-height: 44px;
		box-sizing: border-box;
	}

	.hitek-v2-chrome-consumer #cart-sidebar .hitek-cart-empty a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		box-sizing: border-box;
	}

	/*
	 * An item's name link (20px; it clips its text with overflow: hidden) is tapped through a 44px area over
	 * the item's text column (name and quantity line), drawn by its ::after against the column, which the
	 * name's overflow does not clip. The remove button beside the column keeps its own 44px area.
	 */
	.hitek-v2-chrome-consumer #cart-sidebar .hitek-cart-item__details {
		position: relative;
	}

	.hitek-v2-chrome-consumer #cart-sidebar a.hitek-cart-item__name::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: max(100%, 44px);
		transform: translateY(-50%);
	}

	/* Header search bar (open): the Search button (40px) and the close button (40px, .hitek-v2-tap) at 44px. */
	.hitek-v2-chrome-consumer #header-search .hitek-v2-search-submit {
		min-height: 44px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-menu-social {
		gap: 0;
		margin-left: -14px;
	}
}

/*
 * Header search results: the "View all results" link at the end of the panel (tailwind.css .mega-search-footer:
 * 12px of padding around an 11px label, 43px) is 44px tall on phones and tablets (the header's width range, like the
 * search button and close button above) and on touch screens of any width (the desktop header opens the same
 * panel). The row is a flex box, so its label stays centred; the result rows above it are 54-60px. With a mouse at
 * desktop widths it keeps the theme's 43px.
 */
@media (max-width: 1023px), (pointer: coarse) {
	.hitek-v2-chrome-consumer .mega-search-footer {
		box-sizing: border-box;
		min-height: 44px;
	}
}

@media (max-width: 639px) {
	/* Footer legal row: with the separator before "Cookie settings" the three items still fit one line at 375px. */
	.hitek-v2-chrome-consumer .hitek-v2-footer__legal {
		column-gap: 1rem;
	}
}

/*
 * The vehicle visualizer's "Drag to compare" shade slider (/window-film-visualizer/, visitor film pages;
 * vehicle-visualizer.js) is a 16px-tall range input: on phones and on touch screens of any width (a 768px
 * tablet, like the visualizer's other controls) it gets a 44px touch box. Chrome and Safari keep the track and
 * thumb centred in it; the toolbar around it keeps its height (80px at 768-1023px).
 */
@media (max-width: 767px), (pointer: coarse) {
	body.hitek-v2-chrome-consumer .hwr2 label.vv-slider input[type="range"] {
		height: 44px;
		margin-block: 0;
	}
}

@media (max-width: 767px) {
	/*
	 * iOS zooms into form fields under 16px: every field of the content area (designed .hwr2 pages and the
	 * WooCommerce/theme forms of kind 'woo' and '' requests, e.g. the visitor login) and the header search.
	 */
	.hitek-v2-chrome-consumer #header-search-input,
	body.hitek-v2-chrome-consumer :is(#content, .hwr2) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]), select, textarea) {
		font-size: 16px;
	}
}

/* Footer on touch screens (phones and tablets, like the header's targets): every control at least 44x44 (spec §8a). */
@media (max-width: 1023px) {
	/* List rows take the list spacing into their height. */
	.hitek-v2-chrome-consumer .hitek-v2-footer .hitek-footer-main li a {
		display: inline-flex;
		align-items: center;
		min-width: 44px;
		min-height: 44px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-footer .hitek-footer-main ul > li + li {
		margin-top: 0;
	}

	/* The logo link grows to 44px around the 28px logo; the margins keep the logo where it was. */
	.hitek-v2-chrome-consumer .hitek-v2-footer__logo {
		margin-top: -8px;
		margin-bottom: 8px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-footer__logo > a {
		display: flex;
		align-items: center;
		width: fit-content;
		min-height: 44px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-footer .hitek-v2-footer__social {
		gap: 8px;
		margin-left: -4px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-footer .hitek-v2-footer__social > a {
		width: 44px;
		height: 44px;
	}

	.hitek-v2-chrome-consumer .hitek-v2-footer__legal :is(a, button) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.hitek-v2-chrome-consumer .classic-resources {
		row-gap: 0;
		padding-block: 4px;
	}

	/*
	 * Resource links: 44px tall rows; a label narrower than 44px ("FAQ", 22px) gets a 44px-wide hit area from
	 * its ::after, centred on it, so the strip keeps the export's even 10px spacing (a 44px min-width box
	 * centred the short label and doubled the gaps around it). The 10px gaps hold 10 of the 11px it needs on
	 * each side; the last pixel lies over the neighbour's edge (z-index 1), whose own ::after stays 2px inside
	 * its box, so the neighbour keeps the rest (FAQ 44px, "PPF Ultra" and "Aftercare" 48px).
	 */
	.hitek-v2-chrome-consumer .classic-resources a {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.hitek-v2-chrome-consumer .classic-resources a::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 50%;
		width: max(100% - 4px, 44px);
		height: 100%;
		transform: translateX(-50%);
	}
}

/*
 * HITEK Manager chat widget (#hitek-chat-iframe, inc/rest-api.php): 110x110 at the bottom left, z-index 999998,
 * position/bottom/left pinned inline with !important and re-asserted by the widget whenever its style attribute
 * changes. Spec §8a: fixed elements must not cover each other. consumer.js sets hitek-v2-chat-closed while it shows
 * only the launcher and --hitek-v2-bottom-bar (the bar's height); the launcher is then lifted above the mobile
 * bottom bar with a transform (the widget's style attribute is left alone; the open chat panel stays where the
 * widget puts it). It is hidden while the mobile menu or the cart drawer is open, which it would cover.
 */
@media (max-width: 1023px) {
	body.hitek-v2-has-bottom-bar.hitek-v2-chat-closed #hitek-chat-iframe {
		transform: translateY(calc(-1 * var(--hitek-v2-bottom-bar, 0px)));
	}

	/* At the end of the page the footer's last controls (legal links) clear the lifted launcher too. */
	body.hitek-v2-has-bottom-bar.hitek-v2-chat-closed .hitek-footer-main {
		padding-bottom: calc(4.5rem + var(--hitek-v2-chat-launcher, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

body.hitek-v2-chrome-consumer:has(#nav-menu.is-open, #cart-sidebar.is-open) #hitek-chat-iframe {
	visibility: hidden;
}