/*
 * Design Refresh v2, area C2: consumer product pages, dealer gate and unlisted notices
 * (inc/v2/products-visitor.php). Loaded after the export stylesheets of the page's record;
 * only fixes for the theme context and phones. The wrapper is div.hwr2.hitek-v2-pv.
 */

/*
 * Spectrum: spectrum.js prepends its decorative backdrop to <body>, outside the .hwr2 wrapper the
 * export CSS is scoped to, so the export's rules (spectrum.css "Red atmosphere") are repeated
 * here for that element; the page layers above it stay transparent, as in the export.
 */
body.hitek-spectrum-effects > .hs-page-background {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	max-width: none;
	overflow: hidden;
	pointer-events: none;
	background: #090909;
	contain: strict;
}

body.hitek-spectrum-effects > .hs-page-background::before {
	content: "";
	position: absolute;
	inset: -22%;
	background: radial-gradient(ellipse at 8% 22%, #ed001e25, transparent 43%), radial-gradient(ellipse at 88% 70%, #ed001e20, transparent 38%);
	animation: hs-background-light 18s ease-in-out infinite alternate;
}

body.hitek-spectrum-effects > .hs-page-background::after {
	content: "";
	position: absolute;
	inset: -10%;
	background: linear-gradient(116deg, transparent 24.9%, #ed001e13 25%, transparent 25.1%), linear-gradient(116deg, transparent 63.9%, #ed001e17 64%, transparent 64.1%), linear-gradient(116deg, transparent 85.9%, #ed001e0d 86%, transparent 86.1%);
	transform: translate3d(0, 0, 0);
}

body.hitek-spectrum-effects > .hs-page-background .hs-background-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

body.hitek-spectrum-effects #page,
body.hitek-spectrum-effects #content,
body.hitek-spectrum-effects .hwr2.hitek-v2-pv {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	body.hitek-spectrum-effects > .hs-page-background::before {
		animation: none;
	}
}

@media print {
	body.hitek-spectrum-effects > .hs-page-background {
		display: none;
	}
}

/*
 * Gate: a WooCommerce product photo without a designer catalog copy (inc/v2/products-visitor.php
 * hitek_v2_pv_gate_photo()). One shot on a light background (--light) sits on a white card inside
 * the export's public-product-photo frame instead of a hard-edged square; one shot on black
 * (--dark) sits straight on the dark gate card, as the export's catalog cut-outs do: `lighten`
 * shows the card's gradient wherever the photo is darker than it. Those backdrops are studio
 * gradients (#171717 at the top to #000), a shade lighter than the card (#191919 to #111) at the
 * top, which drew a lighter box: the inline SVG filter #hitek-v2-pv-black-backdrop takes them to
 * black, and the photo's edges fade out (mask) for photos whose subject reaches the edge.
 */
.hwr2 .public-product-photo.hitek-v2-pv-woo-photo img {
	box-sizing: border-box;
	height: auto;
	border-radius: 8px;
}

.hwr2 .public-product-photo.hitek-v2-pv-woo-photo--light img {
	padding: 12px;
	background: #fff;
}

.hwr2 .public-product-photo.hitek-v2-pv-woo-photo--dark .hitek-v2-pv-photo-filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
 * The mask is drawn on the img box, so the box must be the photo itself: interaction-polish.css
 * gives the img width: 100% (440px) with max-height: 340px and object-fit: contain, which drew a
 * square photo 340px wide in the middle of a 440px box and put the left/right fade on the empty
 * sides (hard vertical edges at 768 and 1440). Auto width keeps the box at the drawn size
 * (max-width/max-height scale it by its own ratio), centred like the contained image was.
 */
.hwr2 .public-product-photo.hitek-v2-pv-woo-photo--dark img {
	display: block;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	filter: url("#hitek-v2-pv-black-backdrop");
	mix-blend-mode: lighten;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	mask-composite: intersect;
}

/*
 * WooCommerce notices (v2/gate.php, v2/product-visitor.php), e.g. "Sign in with your HITEK dealer
 * account to order." after a signed-out add-to-cart link. On product pages and film gates they sit
 * inside the main, in the page's own column (hitek_v2_pv_place_notices()): before the breadcrumb,
 * whose top margin then sets the gap, or first in the main above the gate section or the PPF Ultra
 * hero. Generic gates print them above the main, in the gate card's 780px column. Product pages
 * always print the wrapper, empty without notices: it stays as it was.
 */
.hwr2.hitek-v2-pv [data-hwr-main] .woocommerce-notices-wrapper:has(> *) {
	margin: 0 0 20px;
}

.hwr2.hitek-v2-pv > .imported-content > .woocommerce-notices-wrapper:has(> *) {
	box-sizing: border-box;
	width: min(1216px, calc(100% - 32px)); /* The film pages' .wrap box (classic-update.css --max). */
	margin: 24px auto 0;
}

.hwr2.hitek-v2-pv > .imported-content > .woocommerce-notices-wrapper:has(> *):has(+ [data-hwr-main] > .public-dealer-gate) {
	width: min(780px, calc(100% - 32px));
}

/*
 * The notices' look, as on the account, cart and checkout pages (account.css): legacy.css printed
 * the refusal in #ed001e on a 6% red tint, 4.29:1 on the dark page (WCAG AA needs 4.5:1). Now light
 * text on #121212 with a coloured left edge (error red, message green, info grey): about 14:1,
 * links white and underlined.
 */
.hwr2.hitek-v2-pv .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	position: relative;
	display: block;
	margin: 0;
	padding: 16px 20px 16px 22px;
	list-style: none;
	background: #121212;
	border: 1px solid #353535;
	border-left: 3px solid #8a8a8a;
	border-radius: 5px;
	color: #e9e9e9;
	font-size: 14px;
	line-height: 1.6;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper > * + * {
	margin-top: 12px;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper .woocommerce-message {
	border-left-color: #3fae6a;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #ed001e;
	color: #ffd7dc;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper .woocommerce-error li {
	margin: 2px 0;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before {
	content: none;
}

/* Spectrum's "#hitek-spectrum a { color: inherit; text-decoration: none }" needs the ID to be outranked. */
.hwr2.hitek-v2-pv .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a:not(.button),
.hwr2.hitek-v2-pv #hitek-spectrum .woocommerce-notices-wrapper a:not(.button) {
	color: #fff;
	font-weight: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hwr2.hitek-v2-pv .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) .button {
	float: right;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -6px 0 0 18px;
}

/*
 * The designer's catalog copy of the HITEK Decals photo (/product/hitek-decal/) has a 1px grey
 * (208) column along its left edge, which tools-images.js does not mask (its threshold is 238), so
 * it drew a thin vertical line on the dark gate card. Clip that edge (1 CSS px is at least one
 * image pixel at every gate size); the rest of the image is transparent there. tools-images.js
 * swaps the src for a data: URL and keeps the original in data-tools-original. A clean asset from
 * the designer makes this rule unnecessary.
 */
.hwr2 .public-product-photo img:is([src$="/catalog/af698d6f1504153d.avif"], [data-tools-original$="/catalog/af698d6f1504153d.avif"]) {
	clip-path: inset(0 0 0 1px);
}

/*
 * Warranty & coverage: the compact disclosure (product-visitor.js, core-product-nav block 05) moves
 * the panel's children into details > .compact-disclosure-body. The panel's grid goes with them
 * (site.css .warranty-panel and its 1160px/680px steps); left on the section, the whole disclosure
 * sat in the 115px emblem column (62px on phones). The range pages' panel has no emblem (h2, text,
 * link): below 1160px it stacks, where the emblem columns would squeeze its h2 into 86px/62px.
 */
.hwr2.hitek-v2-pv .warranty-panel.compact-disclosure-section {
	display: block;
}

.hwr2.hitek-v2-pv .warranty-panel > .compact-disclosure > .compact-disclosure-body {
	display: grid;
	grid-template-columns: 115px 1fr 0.8fr;
	gap: 35px;
	align-items: center;
}

@media (max-width: 1160px) {
	.hwr2.hitek-v2-pv .warranty-panel > .compact-disclosure > .compact-disclosure-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.hwr2.hitek-v2-pv .warranty-panel > .compact-disclosure > .compact-disclosure-body:has(> .warranty-emblem) {
		grid-template-columns: 86px 1fr;
		gap: 26px;
		align-items: center;
	}
}

@media (max-width: 680px) {
	.hwr2.hitek-v2-pv .warranty-panel > .compact-disclosure > .compact-disclosure-body:has(> .warranty-emblem) {
		grid-template-columns: 62px 1fr;
		gap: 23px 18px;
	}
}

/*
 * Range pages: the WooCommerce description's titles were h1s in the export (site.css .hwr2 h1:
 * clamp(38px, 3.5vw, 54px), line-height 1.1 from brand-system.css, margin 8px 0 20px). Under the
 * page's own h1 they are h2s (inc/v2/products-visitor.php), which film-design.css sets to 26px
 * with !important (.hitek-film-page .content-section > h2); they keep the designer's size.
 */
.hwr2.hitek-v2-pv .source-product-description h2.hitek-v2-pv-desc-title {
	font-size: clamp(38px, 3.5vw, 54px) !important;
	line-height: 1.1;
	margin: 8px 0 20px;
}

/*
 * Password-protected products: the theme's unlock card (woocommerce/single-product.php, Tailwind
 * utilities) sits inside the dealer shell for dealers (div.hwr2.hwr-dealer-context), where the
 * export's element rules outrank its one-class utilities: the title took the page h1 (50px, four or
 * five lines), the hint and the wrong-password error the grey paragraph colour and margins, the
 * field and button the inherited 16px text. They get the values the card has for visitors (its
 * utilities plus the browser's heading and paragraph margins), so both audiences see the same card;
 * div.hwr2 outranks the export's .hwr2.live-format / .hwr2.portal-scheme heading rules, which load
 * after this file there. Visitors' card is outside .hwr2: these rules do not reach it.
 */
div.hwr2 .hitek-password-gate h1 {
	margin: 0.67em 0 0.5rem;
	font-family: var(--hitek-font-heading, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.75rem;
	letter-spacing: normal;
	text-transform: none;
}

div.hwr2 .hitek-password-gate h1 + p {
	margin: 1em 0 1.5rem;
	color: rgb(255 255 255 / 40%);
}

div.hwr2 .hitek-password-gate .hitek-pw-error {
	margin: 0.5rem 0 1em;
	color: #f87171;
}

div.hwr2 .hitek-password-gate .hitek-pw-input {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

div.hwr2 .hitek-password-gate .hitek-pw-submit {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.15em;
}

/* Range pages: tables of the WooCommerce description scroll in their own wrapper (spec §8a). */
.hwr2.hitek-v2-pv .hitek-v2-pv-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/*
 * Touch (spec §8a): targets of at least 44px on phones and on touch screens (coarse pointers such
 * as tablets at 768px and up; the same breakpoint as the dealer shell and listings), without
 * changing the desktop look. Text links and small controls get an invisible 44px-high hit area
 * (::before); controls the design draws just under 44px grow to 44px.
 */
@media (max-width: 767px), (pointer: coarse) {
	.hwr2.hitek-v2-pv :is(.breadcrumb a, .ultra-breadcrumb a, .hitek-breadcrumbs a, a.text-link, a.vv-link, a.classic-text-link, .public-dealer-note a, .comparison-notes a, .film-glass-panel a, .hs-text-link, .hs-warranty-inline, a.filter-pill, .auto-spec-source > summary, .perf-source > summary, .glass-tool-link a, .catalog-legacy-notice .breadcrumb a, .woocommerce-notices-wrapper a) {
		position: relative;
	}

	.hwr2.hitek-v2-pv :is(.breadcrumb a, .ultra-breadcrumb a, .hitek-breadcrumbs a, a.text-link, a.vv-link, a.classic-text-link, .public-dealer-note a, .comparison-notes a, .film-glass-panel a, .hs-text-link, .hs-warranty-inline, a.filter-pill, .auto-spec-source > summary, .perf-source > summary, .glass-tool-link a, .catalog-legacy-notice .breadcrumb a, .woocommerce-notices-wrapper a)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}

	/*
	 * The open "HITEK specification source" disclosure shows its source link 3px under the summary,
	 * inside the summary's centred area: a tap on "View original HITEK source" closed the disclosure
	 * instead of opening the chart. Open, the summary's area reaches up from its bottom edge (over the
	 * disclosure's top and the note above it) and the link's reaches down from its top edge (over the
	 * panel's end below it), so each keeps 44px and neither covers the other, as on the dealer pages
	 * (product-dealer.css). The summary rule has the specificity of the :is() rule above, so it comes
	 * after it; the link rule outranks any centred area the link may take from the list above.
	 * performance-charts.js turns the automotive charts' .auto-spec-source into .perf-source; both are
	 * listed for a panel the script has not rebuilt.
	 */
	.hwr2.hitek-v2-pv :is(.perf-source, .auto-spec-source)[open] > summary::before {
		top: auto;
		bottom: 0;
		transform: translateX(-50%);
	}

	.hwr2.hitek-v2-pv :is(.perf-source, .auto-spec-source)[open] > p a {
		position: relative;
	}

	.hwr2.hitek-v2-pv :is(.perf-source, .auto-spec-source)[open] > p a::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: none;
	}

	/* Buttons the design draws just under 44px; the architectural comparison's view modes (Outside /
	   Split view / Inside, 39px, 42px on phones) as on the content pages (consumer-pages.css), and
	   Spectrum's finish filters (36px) and visualizer tools (Compare original, Larger view, Save look:
	   38px on tablets, 42px on phones), as the dealer page's filters (product-dealer.css). */
	.hwr2.hitek-v2-pv :is(.ultra-sizes button, .vv-choices button, .vv-toggle button, .view-modes button, #hitek-spectrum .hs-btn, #hitek-spectrum .hs-filter, #hitek-spectrum .hs-tool, #hitek-spectrum .hs-search input) {
		box-sizing: border-box;
		min-height: 44px;
	}

	/* Spectrum's breadcrumb ("Home / PPF / …" with 10px " / " gaps): the centred area of "PPF" (23px
	   wide) covered the end of "Home", which kept 37px. As on the dealer page (product-dealer.css),
	   each area reaches 4px into a gap: the first link's grows to the left, the others' to the right
	   over the plain text after them. */
	.hwr2.hitek-v2-pv #hitek-spectrum .hitek-breadcrumbs a::before {
		left: -4px;
		width: max(100% + 8px, 44px);
		transform: translateY(-50%);
	}

	.hwr2.hitek-v2-pv #hitek-spectrum .hitek-breadcrumbs a:first-child::before {
		left: auto;
		right: -4px;
	}

	/* Spectrum's small buttons keep their look and get a 44x44 hit area: the dialogs' close button
	   (38x38; the dialog head's 18px/24px padding holds the area), the search field's clear button
	   (32x32, inside the 44px field) and the empty search's "Show all colors" (19px text button). */
	.hwr2.hitek-v2-pv #hitek-spectrum :is(.hs-dialog-close, #hs-reset-search) {
		position: relative;
	}

	.hwr2.hitek-v2-pv #hitek-spectrum :is(.hs-dialog-close, .hs-clear-search, #hs-reset-search)::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}

	/* Password-protected products (the theme's unlock form inside the v2 chrome, kind ''). */
	body.hitek-v2 .hitek-password-gate .hitek-password-form :is(.hitek-pw-input, .hitek-pw-submit) {
		box-sizing: border-box;
		min-height: 44px;
	}

	/* Their theme breadcrumb above the card ("Home / Protected: …", hitek_breadcrumbs(): a 39x20
	   "Home"), in either chrome. */
	body.hitek-v2:has(.hitek-password-gate) nav.hitek-breadcrumbs a {
		position: relative;
	}

	body.hitek-v2:has(.hitek-password-gate) nav.hitek-breadcrumbs a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}
}

/*
 * Phones: 16px form text (iOS zooms into smaller fields); galleries with more than four thumbnails
 * wrap into rows of four (eight thumbnails in one row are 31px wide at 375px).
 */
@media (max-width: 767px) {
	.hwr2.hitek-v2-pv [data-hwr-main] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
		font-size: 16px;
	}

	.hwr2.hitek-v2-pv [data-hwr-main] .thumbs:has(> :nth-child(5)) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
	}

	.hwr2.hitek-v2-pv #hitek-spectrum .hs-search input {
		font-size: 16px;
	}
}

/*
 * Spectrum's "selected look" bar is sticky at 760px and below (spectrum.css, top: 8px), which put it
 * under the consumer chrome's sticky header (170px, z-index 50) while the swatches scroll. It sticks
 * 8px below the header instead: product-visitor.js keeps --hitek-v2-pv-sticky-top at the header's
 * stuck bottom edge (admin bar included); 170px until the script has run.
 */
@media (max-width: 760px) {
	.hwr2.hitek-v2-pv #hitek-spectrum .hs-mobile-selected-look {
		top: calc(var(--hitek-v2-pv-sticky-top, 170px) + 8px);
	}
}

/*
 * Dealer notices (unlisted products inside the dealer shell, which has no .hitek-v2-pv wrapper): the
 * "Current catalog" breadcrumb gets the same 44px hit area, at the shell's touch breakpoint
 * (dealer-chrome.css: phones, and coarse pointers such as iPads with the docked sidebar).
 */
@media (max-width: 760px), (pointer: coarse) {
	.hwr2.hwr-dealer-context .catalog-legacy-notice .breadcrumb a {
		position: relative;
	}

	.hwr2.hwr-dealer-context .catalog-legacy-notice .breadcrumb a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}
}