/**
 * UniVicoustic Products — Public CSS
 *
 * Styles the public-facing product listing and detail pages.
 * All colors and fonts use CSS variables defined in uvp_generate_css_variables()
 * so the Settings panel can override them without code changes.
 *
 * v3.5.0 — Visual rework per Sayani's design refresh:
 *   - Listing cards: full-card anchor, breadcrumb / name / pill row,
 *     NRC badge bottom-left, arrow icon bottom-right. "Downloads" and
 *     "View Details" CTAs removed from card.
 *   - Section-grouped listing: "Wall Solutions" / "Ceiling Solutions"
 *     headers when no Solution Type filter is active.
 *   - Detail card: product name in --uvp-accent (orange), Core pills
 *     top-right, muted breadcrumb text, 2-col Downloads grid, Configure
 *     card returns, "<< Back" link bottom-right, Inquire kept as small
 *     ghost CTA below Configure.
 *   - Sidebar: All chips on every group, Core group restored.
 *
 *   Pre-3.5.0 rules retained as legacy fallbacks for any pages still
 *   referencing old class names (e.g. cached Elementor snapshots).
 */

/* === SCOPED RESET === */
.uvp-page,
.uvp-page * {
	box-sizing: border-box;
}

.uvp-page {
	/* v4.0.2: The plugin is a content box — the host owns width and
	 * background. Removed the hardcoded `max-width: 1400px; margin: 0 auto`
	 * (the host's Elementor container / theme content area now controls
	 * width) and `--uvp-surface` now defaults to `transparent` (the theme
	 * background shows through instead of the plugin painting white over
	 * it). Sites that genuinely need the plugin to paint an opaque
	 * background can still set `:root { --uvp-surface: #fff; }` in their
	 * own CSS — the token override path is unchanged. */
	background: var(--uvp-surface);
	font-family: var(--uvp-font-body);
	color: var(--uvp-warm-mid);
	font-size: 16px;
	line-height: 1.6;
}

.uvp-page,
.uvp-page p,
.uvp-page span,
.uvp-page div { font-family: inherit; }

/* Default link styling — but EXCLUDE elements that have their own color rules. */
.uvp-page a:not(.uvp-app-pill):not(.uvp-btn-ghost):not(.uvp-btn-solid):not(.uvp-btn-inquire):not(.uvp-card-link):not(.uvp-config-inline-link):not(.uvp-detail-series-badge):not(.uvp-detail-breadcrumb-text):not(.uvp-back-to-products):not(.uvp-product-card):not(.uvp-dl-btn):not(.uvp-detail-back-link):not(.uvp-section-nav-item) {
	text-decoration: none;
	color: var(--uvp-link);
}
.uvp-page a:not(.uvp-app-pill):not(.uvp-btn-ghost):not(.uvp-btn-solid):not(.uvp-btn-inquire):not(.uvp-card-link):not(.uvp-config-inline-link):not(.uvp-detail-series-badge):not(.uvp-detail-breadcrumb-text):not(.uvp-back-to-products):not(.uvp-product-card):not(.uvp-dl-btn):not(.uvp-detail-back-link):not(.uvp-section-nav-item):hover {
	color: var(--uvp-accent);
}

/* ============================================================
 * v3.6.13 — THEME-RENDERED FEATURED IMAGE SUPPRESSION
 *
 * Defensive CSS that hides common theme/block selectors used to auto-render
 * the WordPress Featured Image on single posts. WordPress core, Astra,
 * Twenty Twenty-* themes, and Gutenberg blocks all use overlapping class
 * names — covering all of them as a safety net so the Featured Image never
 * appears outside the plugin's controlled hero rendering.
 *
 * Scoped to `body.single-uvp_product` so non-product posts are unaffected.
 * ============================================================ */
body.single-uvp_product .post-thumbnail,
body.single-uvp_product .post-thumb,
body.single-uvp_product .entry-thumb,
body.single-uvp_product .entry-header .post-thumbnail-inner,
body.single-uvp_product .ast-single-post-banner,
body.single-uvp_product .wp-block-post-featured-image,
body.single-uvp_product article > .attachment-post-thumbnail,
body.single-uvp_product .ast-article-single > a > .wp-post-image,
body.single-uvp_product .uvp-detail-page ~ .wp-post-image,
body.single-uvp_product .uvp-detail-page ~ img.attachment-large {
	display: none !important;
}

/* ============================================================
 * IMAGE HERO — listing page + detail page header (LEGACY)
 * v3.1: plugin no longer renders heroes (theme owns them) but the
 * styles remain in case a host page still references the markup.
 * ============================================================ */

.uvp-image-hero {
	position: relative;
	width: 100%;
	min-height: 380px;
	background-size: cover;
	background-position: center;
	background-color: var(--uvp-charcoal);
	display: flex;
	align-items: flex-end;
	padding: 3rem 2.5rem;
}

.uvp-image-hero-detail {
	min-height: 320px;
}

.uvp-image-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.55) 100%
	);
	pointer-events: none;
}

.uvp-image-hero-content {
	position: relative;
	z-index: 2;
	color: var(--uvp-white);
	max-width: 720px;
}

.uvp-image-hero-heading {
	font-family: var(--uvp-font-heading);
	font-size: 48px;
	line-height: 1.15;
	margin: 0 0 0.5rem 0;
	color: var(--uvp-white);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.uvp-image-hero-subhead {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.6;
	margin: 0;
	max-width: 540px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.uvp-text-hero {
	background: var(--uvp-sand-dark);
	padding: 2.5rem 2rem;
	border-bottom: 1px solid rgba(112, 112, 112, 0.18);
}

.uvp-text-hero-heading {
	font-family: var(--uvp-font-heading);
	font-size: 42px;
	line-height: 1.15;
	margin: 0 0 0.5rem 0;
	color: var(--uvp-charcoal);
}

.uvp-text-hero-subhead {
	font-size: 15px;
	color: var(--uvp-warm-mid);
	line-height: 1.6;
	margin: 0;
	max-width: 600px;
}

/* ============================================================
 * APPLICATION BAR
 * ============================================================ */

.uvp-app-bar {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	padding: 1rem 2rem;
	background: var(--uvp-surface);
	border-bottom: 1px solid rgba(112, 112, 112, 0.15);
	scrollbar-width: thin;
}

/* v3.5.2: App pills lose their capsule shape entirely. They're now text-only
 * with an accent underline marking the active state. Matches Sayani's design
 * where the application bar reads as a tab strip, not a chip row. */
.uvp-app-pill,
a.uvp-app-pill,
.uvp-page a.uvp-app-pill {
	flex-shrink: 0;
	padding: 6px 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--uvp-charcoal);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
	background: transparent;
	text-decoration: none;
}

.uvp-app-pill:hover:not(.uvp-app-pill-active) {
	color: var(--uvp-accent);
}

.uvp-app-pill-active {
	color: var(--uvp-accent);
	border-bottom-color: var(--uvp-accent);
	background: transparent;
}

/* ============================================================
 * BREADCRUMB
 * ============================================================ */

.uvp-breadcrumb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0.85rem 2rem;
	background: var(--uvp-surface);
	border-bottom: 1px solid rgba(112, 112, 112, 0.15);
}

.uvp-breadcrumb {
	font-size: 12px;
	color: var(--uvp-warm-mid);
	flex: 1;
	min-width: 0;
}

.uvp-breadcrumb a {
	color: rgba(112, 112, 112, 0.55);
}

.uvp-breadcrumb a:hover {
	color: var(--uvp-accent);
}

.uvp-bc-sep {
	opacity: 0.3;
	margin: 0 8px;
}

.uvp-breadcrumb .uvp-bc-current,
.uvp-breadcrumb span:last-child {
	color: var(--uvp-accent);
	font-weight: 500;
}

/* Mobile filter toggle — hidden on desktop, shown on mobile via media query. */
.uvp-mobile-filter-toggle {
	display: none;
	align-items: center;
	gap: 6px;
	background: var(--uvp-charcoal);
	color: var(--uvp-white);
	border: none;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	font-family: inherit;
	flex-shrink: 0;
}

.uvp-mobile-filter-toggle:hover {
	opacity: 0.9;
}

.uvp-filter-icon {
	font-size: 14px;
	line-height: 1;
}

/* ============================================================
 * MAIN LAYOUT — sidebar + product area
 * ============================================================ */

.uvp-main-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 0;
	min-height: 80vh;
	position: relative;
	background: var(--uvp-surface);
}

.uvp-main-layout > * {
	min-width: 0;
}

/* ============================================================
 * FILTER SIDEBAR — sticky on desktop, drawer on mobile
 * ============================================================ */

.uvp-filter-panel {
	background: var(--uvp-surface);
	border-right: 1px solid rgba(112, 112, 112, 0.15);
	padding: 1.5rem 1.25rem;
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
	scrollbar-width: thin;
}

.uvp-back-to-products {
	display: inline-block;
	font-size: 12px;
	color: var(--uvp-accent);
	margin-bottom: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.uvp-back-to-products:hover {
	text-decoration: underline;
	color: var(--uvp-charcoal);
}

/* Mobile drawer backdrop. */
.uvp-mobile-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 26, 0.5);
	z-index: 99998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.uvp-mobile-filter-backdrop.uvp-mobile-filter-open {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

/* v3.5.2: Reverted to v3.4.5 typography — uppercase tracking, lighter weight.
 * Vish flagged that v3.5.0 made fonts heavier and a touch larger; rolling back. */
.uvp-filter-header {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--uvp-warm-mid);
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 0.5px solid rgba(112, 112, 112, 0.12);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.uvp-filter-header-label {
	letter-spacing: 0.12em;
	color: var(--uvp-warm-mid);
}

.uvp-filter-mobile-close {
	display: none;
}

/* v3.5.2: Sidebar collapse toggle (detail page only).
 * Sits above the REFINE header. Clicking it collapses the sidebar to a
 * narrow rail showing just the toggle, freeing horizontal space for content. */
.uvp-filter-collapse-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 0 0.75rem auto;
	background: transparent;
	color: var(--uvp-warm-mid);
	border: 1px solid rgba(112, 112, 112, 0.20);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	padding: 0;
}

.uvp-filter-collapse-toggle:hover {
	color: var(--uvp-accent);
	border-color: var(--uvp-accent);
}

.uvp-filter-collapse-icon {
	display: inline-block;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* Only render the toggle on the detail-page sidebar (server-side already
 * conditional, but defensive in case the partial is reused). */
.uvp-filter-panel-on-detail .uvp-filter-collapse-toggle {
	display: flex;
}

/* Collapsed-state styling. JS toggles this class. Sidebar narrows to a
 * 40px rail; only the toggle button remains visible (flipped chevron). */
.uvp-main-layout[data-sidebar-state="collapsed"] {
	grid-template-columns: 40px 1fr;
}

.uvp-filter-panel.uvp-filter-panel-collapsed {
	padding: 0.75rem 0.4rem;
	overflow: hidden;
}

.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-header,
.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-group,
.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-divider,
.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-back-to-products {
	display: none;
}

.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-collapse-toggle {
	margin: 0 auto;
}

.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-collapse-icon {
	transform: rotate(180deg);
}

.uvp-filter-clear {
	font-size: 11px;
	color: var(--uvp-accent);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.uvp-filter-clear:hover {
	text-decoration: underline;
}

.uvp-filter-group {
	margin-bottom: 1.25rem;
}

.uvp-filter-group-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--uvp-charcoal);
	margin-bottom: 0.6rem;
}

.uvp-filter-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.uvp-chip {
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 4px;
	border: 1px solid rgba(112, 112, 112, 0.25);
	background: var(--uvp-white);
	color: var(--uvp-navy);
	cursor: pointer;
	transition: all 0.15s;
	user-select: none;
	font-weight: 400;
	line-height: 1.4;
}

.uvp-chip:hover {
	border-color: var(--uvp-accent);
	color: var(--uvp-accent);
	background: rgba(var(--uvp-accent-rgb, 196, 69, 54), 0.06);
}

/* v4.3.11: Active chips are outlined with accent border + accent text (lightweight).
 * Previous solid-fill treatment made them too heavy. */
.uvp-chip.uvp-chip-active {
	background: transparent;
	border-color: var(--uvp-accent);
	color: var(--uvp-accent);
	font-weight: 500;
}

/* v3.5.0: "All" pseudo-chip on every group. Visually identical to a regular
 * chip — when active it's accent-filled, when inactive it's outlined. */
.uvp-chip-all {
	/* Inherits .uvp-chip and .uvp-chip-active. */
}

.uvp-filter-divider {
	height: 1px;
	background: rgba(112, 112, 112, 0.15);
	margin: 1rem 0;
}

/* v3.4.0: Empty state — shown when filters return zero products. */
.uvp-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 4rem 2rem;
	color: var(--uvp-charcoal);
}

.uvp-empty-state-icon {
	font-size: 48px;
	color: var(--uvp-accent);
	margin-bottom: 1rem;
	line-height: 1;
}

.uvp-empty-state-title {
	font-family: var(--uvp-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--uvp-charcoal);
	margin-bottom: 0.75rem;
}

.uvp-empty-state-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--uvp-warm-mid);
	max-width: 480px;
	margin: 0 auto;
}

.uvp-empty-state-text a {
	color: var(--uvp-accent);
	text-decoration: underline;
}

/* CONFIGURATOR CTA in sidebar (LEGACY — no longer rendered, kept for safety). */
.uvp-config-cta {
	background: linear-gradient(135deg, var(--uvp-charcoal) 0%, var(--uvp-charcoal-soft) 100%);
	border-radius: 8px;
	padding: 1.25rem;
	color: white;
	margin-top: 1.5rem;
}

.uvp-config-cta-title {
	font-family: var(--uvp-font-heading);
	font-size: 15px;
	margin-bottom: 6px;
}

.uvp-config-cta-desc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.uvp-config-btn {
	display: inline-block;
	background: var(--uvp-accent);
	color: var(--uvp-white) !important;
	border: none;
	padding: 10px 16px;
	border-radius: 21px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	transition: background 0.2s, transform 0.15s;
}

.uvp-config-btn:hover {
	background: var(--uvp-charcoal);
	transform: translateY(-1px);
}

/* ============================================================
 * PRODUCT AREA
 * ============================================================ */

.uvp-product-area {
	padding: 1.5rem 2rem 2.5rem;
	background: var(--uvp-sand);
}

.uvp-results-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
}

.uvp-results-count {
	font-size: 13px;
	color: var(--uvp-warm-mid);
}

.uvp-results-count strong {
	color: var(--uvp-charcoal);
}

/* ============================================================
 * v3.5.0 — SOLUTION SECTIONS (grouped listing)
 * Each section gets a colored heading and its own grid.
 * ============================================================ */

.uvp-product-grid-wrap {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.uvp-solution-section {
	display: flex;
	flex-direction: column;
}

.uvp-solution-section-title {
	font-family: var(--uvp-font-heading);
	font-size: 22px;
	font-weight: 600;
	color: var(--uvp-accent);
	margin: 0 0 1rem 0;
	padding: 0;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* ============================================================
 * PRODUCT GRID & CARDS — v3.5.0 new card shape
 * ============================================================ */

.uvp-product-grid,
.uvp-product-grid-in-section,
.uvp-product-grid-flat {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* Card is now an anchor — entire card is the link target. */
a.uvp-product-card,
.uvp-page a.uvp-product-card {
	display: flex;
	flex-direction: column;
	background: var(--uvp-white);
	border: 1px solid rgba(112, 112, 112, 0.12);
	border-radius: 10px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
}

a.uvp-product-card:hover,
.uvp-page a.uvp-product-card:hover {
	border-color: var(--uvp-accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
	color: inherit;
}

/* v4.3.13: Product card hover — orange fill, white arrow, no border. */
.uvp-product-card:hover .uvp-card-arrow {
	background: var(--uvp-accent);
	color: var(--uvp-white);
	border-color: var(--uvp-accent);
	transform: translateX(2px);
}

.uvp-product-img {
	height: 220px;
	background-color: var(--uvp-sand-dark);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uvp-img-placeholder {
	font-size: 12px;
	color: var(--uvp-warm-mid);
	background: rgba(255, 255, 255, 0.85);
	padding: 4px 10px;
	border-radius: 3px;
}

/* v4.3.13: Tighter vertical padding — card height reduced per design. */
.uvp-product-meta {
	padding: 0.75rem 1.1rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
	position: relative;
}

/* v3.5.0: New "Wall / Bespoke Graphics Series" breadcrumb on card. */
.uvp-product-breadcrumb {
	font-size: 11px;
	color: var(--uvp-accent);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

/* Legacy class kept so old AJAX-rendered markup still has a style. */
.uvp-product-series {
	font-size: 11px;
	color: var(--uvp-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.uvp-product-name {
	font-weight: 500;
	font-size: 17px;
	color: var(--uvp-charcoal);
	font-family: var(--uvp-font-heading);
	line-height: 1.3;
	margin: 0;
	/* v3.5.0: sentence case per Sayani (no uppercase transform). */
	text-transform: none;
}

/* v4.3.10: Variant line on product cards — shown below the product name. */
.uvp-card-variant {
	font-size: 11px;
	color: var(--uvp-warm-mid);
	margin-top: 2px;
}

/* v4.3.16: Per-substrate NRC lines on product cards — subtle styling.
 * NRC info is secondary metadata, kept visually quiet so it doesn't
 * compete with product name / variant. Only noticed by users who
 * specifically look for acoustic data. */
.uvp-card-nrc-substrates {
	margin-top: auto;
	padding-top: 6px;
	padding-right: 36px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.uvp-card-nrc-line {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10.5px;
	color: rgba(112, 112, 112, 0.5);
	letter-spacing: 0.01em;
}

.uvp-card-nrc-sub-label {
	font-weight: 500;
	color: rgba(112, 112, 112, 0.55);
}

.uvp-card-nrc-sep {
	color: rgba(112, 112, 112, 0.3);
	font-weight: 400;
}

.uvp-card-nrc-sub-value {
	font-weight: 400;
	color: rgba(112, 112, 112, 0.55);
}

/* v3.5.0: Pill row — application pills (outlined) + Core pill (darker, right). */
.uvp-product-pill-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 0.1rem;
}

.uvp-card-pill {
	font-size: 10.5px;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--uvp-white);
	border: 1px solid rgba(112, 112, 112, 0.22);
	color: var(--uvp-warm-mid);
	white-space: nowrap;
	line-height: 1.4;
}

.uvp-card-pill-core {
	background: rgba(23, 46, 102, 0.06);
	border-color: rgba(23, 46, 102, 0.18);
	color: var(--uvp-charcoal);
	font-weight: 600;
	margin-left: auto; /* push Core pill to the right of the row */
}

/* v3.5.0: Card footer — NRC badge bottom-left + arrow bottom-right.
 * v3.5.1: Horizontal padding zeroed since the footer sits inside `.uvp-product-meta`
 * which already supplies horizontal padding. Vertical padding kept for the
 * breathing room between the name and the footer row. */
/* v4.3.16: Card footer — arrow positioned bottom-right, aligned with the
 * NRC substrates block. Uses absolute positioning so NRC and arrow share
 * the same vertical level instead of stacking. */
.uvp-card-footer {
	position: absolute;
	bottom: 0.5rem;
	right: 1.1rem;
	padding: 0;
	margin: 0;
}

.uvp-card-nrc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(23, 46, 102, 0.08);
	color: var(--uvp-charcoal);
	letter-spacing: 0.02em;
}

.uvp-card-nrc-badge-empty {
	background: transparent;
	padding: 0;
	min-height: 22px;
}

/* v4.3.13: Arrow circles — white bg + accent arrow (default), orange bg +
 * white arrow (hover). Subtle border so the white circle is visible on the
 * white card surface. Applies to product cards and series cards alike. */
.uvp-card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--uvp-white);
	color: var(--uvp-accent);
	border: 1px solid rgba(112, 112, 112, 0.18);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
}

.uvp-card-arrow svg {
	display: block;
}

/* ============================================================
 * v4.1.0 — SERIES BROWSE CARDS
 *
 * Shown on the listing page's default/Solution-Type-only state — one card
 * per Series instead of dumping every product. Structurally mirrors the
 * product card (image top, meta below, footer with count + arrow) so the
 * two browse layers feel like one system. The grid layout, gaps, and
 * responsive column counts are inherited from `.uvp-product-grid-in-section`
 * (the series grid carries that class plus `.uvp-series-grid`).
 * ============================================================ */

a.uvp-series-card,
.uvp-page a.uvp-series-card {
	display: flex;
	flex-direction: column;
	background: var(--uvp-white);
	border: 1px solid rgba(112, 112, 112, 0.12);
	border-radius: 10px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
}

a.uvp-series-card:hover,
.uvp-page a.uvp-series-card:hover {
	border-color: var(--uvp-accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
	color: inherit;
}

/* v4.3.13: Series card hover — same orange fill + white arrow as product cards. */
.uvp-series-card:hover .uvp-card-arrow {
	background: var(--uvp-accent);
	color: var(--uvp-white);
	border-color: var(--uvp-accent);
	transform: translateX(2px);
}

.uvp-series-card-img {
	height: 200px;
	background-color: var(--uvp-sand-dark);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uvp-series-card-meta {
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.uvp-series-card-name {
	font-weight: 600;
	font-size: 16px;
	color: var(--uvp-charcoal);
	font-family: var(--uvp-font-heading);
	line-height: 1.3;
}

/* v4.3.13: Variant line on series cards — "Embossed | Groove" below the name. */
.uvp-series-card-variants {
	font-size: 11px;
	color: var(--uvp-warm-mid);
	margin-top: 2px;
	line-height: 1.3;
}

.uvp-series-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.uvp-series-card-count {
	font-size: 12px;
	color: var(--uvp-warm-mid);
	font-weight: 500;
}

/* LEGACY card sub-elements — old AJAX renders may still produce these.
 * Keep styles so cached pages don't break. */
.uvp-product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}

.uvp-tag {
	font-size: 10px;
	padding: 3px 7px;
	border-radius: 3px;
	background: var(--uvp-accent-pale);
	color: var(--uvp-accent);
}

.uvp-tag-core {
	background: #EFF5EE;
	color: #3F5A45;
}

.uvp-product-nrc {
	font-size: 12px;
	color: var(--uvp-warm-mid);
	display: flex;
	align-items: center;
	gap: 6px;
}

.uvp-nrc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--uvp-accent);
}

.uvp-card-actions {
	display: flex;
	gap: 6px;
	padding: 0 1rem 1rem;
}

.uvp-btn-ghost,
.uvp-btn-solid {
	flex: 1;
	padding: 7px 10px;
	font-size: 11px;
	border-radius: 18px;
	cursor: pointer;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: all 0.15s;
	display: inline-block;
	text-decoration: none;
}

.uvp-btn-ghost {
	border: 1px solid var(--uvp-accent);
	background: transparent;
	color: var(--uvp-accent) !important;
}

.uvp-btn-ghost:hover {
	background: var(--uvp-accent-pale);
	color: var(--uvp-accent) !important;
}

.uvp-btn-solid {
	background: var(--uvp-accent);
	color: var(--uvp-white) !important;
	border: 1px solid var(--uvp-accent);
}

.uvp-btn-solid:hover {
	background: var(--uvp-charcoal);
	border-color: var(--uvp-charcoal);
	transform: translateY(-1px);
}

.uvp-no-results {
	grid-column: 1 / -1;
	padding: 4rem 2rem;
	text-align: center;
	color: var(--uvp-warm-mid);
	background: var(--uvp-white);
	border: 1px dashed rgba(112, 112, 112, 0.20);
	border-radius: 10px;
}

.uvp-no-results a {
	color: var(--uvp-accent);
	text-decoration: underline;
}

.uvp-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* ============================================================
 * DETAIL PAGE — v3.5.0 layout
 * ============================================================ */

.uvp-detail-main {
	padding: 2rem;
	/* v4.0.2: The detail main area shares the `.uvp-product-area` class,
	 * which paints `--uvp-sand` (white). On the detail page we don't want
	 * that — the theme background should show through behind the beige
	 * product card. Override to transparent. (Listing page keeps
	 * `.uvp-product-area`'s --uvp-sand fill behind the product grid.) */
	background: transparent;
}

.uvp-detail-container {
	background: var(--uvp-white);
	border-radius: 12px;
	padding: 2.5rem;
	max-width: 1100px;
	margin: 0 auto;
	border: 1px solid rgba(112, 112, 112, 0.12);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
	position: relative;
}

.uvp-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* LEFT COLUMN — main image + thumbnail strip below. */
.uvp-detail-img {
	background-color: var(--uvp-sand);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-image 0.25s ease-in-out;
	border: 1px solid rgba(112, 112, 112, 0.08);
}

.uvp-detail-img-placeholder {
	color: var(--uvp-warm-mid);
	font-size: 13px;
}

/* v3.5.0: Thumbnail strip below main image. Hidden entirely if no swatches. */
.uvp-detail-thumb-strip {
	margin-top: 1rem;
}

.uvp-detail-thumb-strip .uvp-detail-thumb-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85rem;
}

.uvp-detail-thumb-strip .uvp-detail-thumb-row.uvp-detail-thumb-row-collapsed .uvp-swatch-chip-overflow {
	display: none;
}

.uvp-detail-thumb-strip .uvp-swatch-chip {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	text-align: left;
}

.uvp-detail-thumb-strip .uvp-swatch-chip-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color 0.15s, transform 0.15s;
	display: block;
}

.uvp-detail-thumb-strip .uvp-swatch-chip:hover .uvp-swatch-chip-img {
	border-color: var(--uvp-accent);
	transform: translateY(-1px);
}

.uvp-detail-thumb-strip .uvp-swatch-chip-active .uvp-swatch-chip-img {
	border-color: var(--uvp-accent);
	box-shadow: 0 0 0 1px var(--uvp-accent);
}

/* Suppress legacy `.uvp-swatch-chip-active` ring (border + outer box-shadow)
 * on the chip itself — the new strip puts the ring on the IMG instead. */
.uvp-detail-thumb-strip .uvp-swatch-chip-active {
	box-shadow: none;
	border-color: transparent;
}

/* Suppress legacy "checkmark overlay" — the new strip uses the image-border
 * ring + caption as the active affordance, no need for a check mark. */
.uvp-detail-thumb-strip .uvp-swatch-chip-check {
	display: none;
}

.uvp-swatch-chip-caption {
	font-size: 11px;
	color: var(--uvp-warm-mid);
	margin-top: 6px;
	line-height: 1.3;
	text-align: center;
	display: block;
}

.uvp-swatches-selected-line {
	font-size: 12px;
	color: var(--uvp-warm-mid);
	margin-top: 0.85rem;
}

.uvp-swatches-selected-line strong {
	color: var(--uvp-charcoal);
	font-weight: 600;
}

.uvp-show-all-swatches,
button.uvp-show-all-swatches {
	margin-top: 0.75rem !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--uvp-warm-mid) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	padding: 4px 0 !important;
	text-align: left !important;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	font-family: inherit !important;
	transition: all 0.15s;
}

.uvp-show-all-swatches:hover,
button.uvp-show-all-swatches:hover {
	color: var(--uvp-charcoal) !important;
	text-decoration: underline;
	background: transparent !important;
	background-color: transparent !important;
}

/* v5.3.29 — "Load more" + "Show less" sit side by side under the swatch grid. */
.uvp-swatch-more-less {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 0.5rem;
}

/* LEGACY swatch grid — kept in case other markup still produces this layout. */
.uvp-swatches-section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 0.5px solid rgba(112, 112, 112, 0.12);
}

.uvp-swatches-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.85rem;
	gap: 12px;
	flex-wrap: wrap;
}

.uvp-swatches-title {
	font-family: var(--uvp-font-heading);
	font-size: 18px;
	color: var(--uvp-charcoal);
	font-weight: 400;
}

.uvp-swatches-selected {
	font-size: 12px;
	color: var(--uvp-warm-mid);
}

.uvp-swatches-selected strong {
	color: var(--uvp-charcoal);
	font-weight: 500;
}

.uvp-swatches-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.uvp-swatches-grid.uvp-swatches-collapsed .uvp-swatch-chip-overflow {
	display: none;
}

/* Modal: pattern indicator. */
.uvp-modal-pattern-selected {
	background: var(--uvp-accent-pale);
	color: var(--uvp-charcoal);
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	margin-bottom: 1.25rem;
	border-left: 3px solid var(--uvp-accent);
}

.uvp-modal-pattern-selected strong {
	color: var(--uvp-accent);
	font-weight: 600;
}

/* RIGHT COLUMN — v3.5.0 layout. */
.uvp-detail-right {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Core pills top-right — absolute-positioned over the right column. */
.uvp-detail-core-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
}

.uvp-detail-core-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid rgba(112, 112, 112, 0.28);
	background: var(--uvp-white);
	color: var(--uvp-charcoal);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* v3.5.0: Muted breadcrumb-text (replaces v3.1.2 colored badge).
 * v3.5.1: Right padding dropped — Core pills no longer occupy top-right. */
.uvp-detail-breadcrumb-text {
	display: inline-block;
	font-size: 12px;
	color: var(--uvp-accent) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0;
	text-decoration: none;
	line-height: 1.4;
}

.uvp-detail-breadcrumb-text:hover {
	color: var(--uvp-charcoal) !important;
	text-decoration: none;
}

/* LEGACY badge — kept for any older markup. */
.uvp-detail-series-badge {
	display: inline-block;
	font-size: 12px;
	color: var(--uvp-accent) !important;
	background: var(--uvp-accent-pale);
	padding: 5px 14px;
	border-radius: 21px;
	margin-bottom: 1rem;
	letter-spacing: 0.04em;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.uvp-detail-series-badge:hover {
	background: var(--uvp-accent);
	color: var(--uvp-white) !important;
}

/* v3.5.0: Product name in ORANGE per Sayani's design (was navy).
 * v3.5.2: Size back to 32px (was bumped to 30px in v3.5.0 — Vish flagged the
 * font-size creep, rolling back). */
.uvp-detail-page h1.uvp-detail-name,
.uvp-detail-page .uvp-detail-name {
	font-family: var(--uvp-font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	padding: 0;
	color: var(--uvp-accent);
	letter-spacing: -0.01em;
	background: transparent;
	border: 0;
}

/* SPEC TABLE — v3.5.0 styling (cleaner divider lines, less padding). */
.uvp-detail-page .uvp-spec-table,
.uvp-detail-page .uvp-spec-table tbody,
.uvp-detail-page .uvp-spec-table tr,
.uvp-detail-page .uvp-spec-table td,
.uvp-detail-page .uvp-spec-table th {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.uvp-detail-page .uvp-spec-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0.5rem 0 0.5rem;
}

.uvp-detail-page .uvp-spec-table tr {
	border-bottom: 1px solid rgba(112, 112, 112, 0.12);
}

.uvp-detail-page .uvp-spec-table tr:last-child {
	border-bottom: 0;
}

.uvp-detail-page .uvp-spec-table td {
	padding: 12px 0;
	font-size: 14px;
	vertical-align: middle;
}

.uvp-detail-page .uvp-spec-label {
	color: var(--uvp-warm-mid);
}

.uvp-detail-page .uvp-spec-val {
	text-align: right;
	font-weight: 400;
	color: var(--uvp-charcoal);
}

.uvp-detail-page .uvp-spec-val-multiline {
	white-space: normal;
	line-height: 1.45;
}

/* v5.3.16 — Horizontal gutter between the spec label and its value. The cells
 * had only vertical padding (12px 0), so a long wrapping value (e.g. the Fire
 * Rating cert list) ran right up against the label. The base
 * `.uvp-detail-page .uvp-spec-table td` rule (0,2,1) outranks a plain
 * .uvp-spec-label (0,2,0), so we target td.uvp-spec-label (0,3,1) to win — on
 * desktop AND in the mobile td override. width:1% + nowrap keeps the label
 * column tight so the value gets the room; top-align lines the label up with
 * the first line of a multi-line value. */
.uvp-detail-page .uvp-spec-table td.uvp-spec-label {
	white-space: nowrap;
	width: 1%;
	padding-right: 48px;
	vertical-align: top;
}

.uvp-detail-page .uvp-spec-table td.uvp-spec-val {
	vertical-align: top;
}

@media (max-width: 767px) {
	.uvp-detail-page .uvp-spec-table td.uvp-spec-label {
		padding-right: 24px;
	}
}

/* LEGACY full-width Inquire button (kept for cached pages — no longer
 * the primary CTA in v3.5.0). */
.uvp-btn-inquire {
	display: block;
	width: 100%;
	padding: 14px 24px;
	background: var(--uvp-accent);
	color: var(--uvp-white);
	border: none;
	border-radius: 21px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	margin: 1rem 0 1.5rem;
	font-family: inherit;
	transition: background 0.2s, transform 0.15s;
}

.uvp-btn-inquire:hover {
	background: var(--uvp-charcoal);
	transform: translateY(-1px);
}

/* v3.5.0: Small ghost Inquire button — secondary CTA below Configure card.
 * The .uvp-btn-inquire-ghost variant overrides .uvp-btn-inquire's heavy
 * styling (full-width orange pill) with a subtle outlined look. */
.uvp-btn-inquire.uvp-btn-inquire-ghost {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 8px 16px;
	background: transparent;
	color: var(--uvp-warm-mid);
	border: 1px solid rgba(112, 112, 112, 0.25);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	align-self: flex-start;
}

.uvp-btn-inquire.uvp-btn-inquire-ghost:hover {
	border-color: var(--uvp-accent);
	color: var(--uvp-accent);
	background: transparent;
	transform: none;
}

/* DOWNLOADS — v3.5.0 2-col grid. */
.uvp-downloads-section {
	margin-top: 0.25rem;
}

.uvp-downloads-title {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 0.75rem;
	color: var(--uvp-charcoal);
}

/* v3.5.0: 2-column grid replaces the old flex-wrap row. */
.uvp-downloads-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}

/* LEGACY row layout — kept for older renders. */
.uvp-download-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.uvp-dl-btn,
a.uvp-dl-btn,
.uvp-page a.uvp-dl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid rgba(112, 112, 112, 0.22);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--uvp-charcoal) !important;
	background: var(--uvp-white);
	transition: all 0.15s;
	text-decoration: none;
	line-height: 1.3;
}

.uvp-dl-btn:hover {
	border-color: var(--uvp-accent);
	color: var(--uvp-accent) !important;
	background: var(--uvp-white);
}

.uvp-dl-label {
	flex: 1;
	text-align: left;
}

/* v5.3.32 — Per-item download icon: a slim, text-sized down-arrow with a line
 * (tray) below it, so each download link clearly reads as a download. Sized in
 * em so it scales with the link text; colour inherits the link (currentColor).
 * Nudges down slightly on hover. */
.uvp-dl-arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 1.05em;
	width: auto;       /* v5.3.33 — width follows the (cropped) icon so it hugs the text */
	transition: transform 0.15s ease;
}

.uvp-dl-arrow svg {
	display: block;
	height: 100%;
	width: auto;
}

.uvp-tabbed-downloads-link:hover .uvp-dl-arrow {
	transform: translateY(2px);
}

/* LEGACY download-button icon (kept for old markup). */
.uvp-dl-icon {
	width: 14px;
	height: 14px;
	background: var(--uvp-accent);
	border-radius: 2px;
	flex-shrink: 0;
}

/* v3.5.0: Configure card returns. Light orange tinted background,
 * left-aligned copy, primary orange CTA button.
 * Matches Sayani's design. */
.uvp-config-inline-cta {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--uvp-accent-pale);
	color: var(--uvp-charcoal);
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(236, 85, 42, 0.18);
}

.uvp-config-inline-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--uvp-charcoal);
	max-width: 60%;
}

.uvp-config-inline-text strong {
	display: block;
	margin-bottom: 6px;
	color: var(--uvp-charcoal);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.uvp-config-inline-link,
.uvp-page a.uvp-config-inline-link {
	background: transparent;
	color: var(--uvp-accent) !important;
	padding: 8px 16px;
	border: 1px solid var(--uvp-accent);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.02em;
	text-align: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s, color 0.2s, transform 0.15s;
	text-decoration: none;
	flex-shrink: 0;
}

.uvp-config-inline-link:hover {
	background: var(--uvp-accent);
	color: var(--uvp-white) !important;
	transform: translateY(-1px);
}

/* v3.6.4: Open Configurator arrow — same emoji-rendering fix as the sample
 * button. Inline SVG sits to the right of the button label and inherits the
 * button's white text color. */
.uvp-config-inline-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--uvp-white);
	color: var(--uvp-accent);
	border-radius: 50%;
	line-height: 1;
	flex-shrink: 0;
}

.uvp-config-inline-arrow svg {
	display: block;
	width: 10px;
	height: 10px;
}

/* v3.5.0: "<< Back" link bottom-right of detail card. */
.uvp-detail-back-row {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1rem;
}

.uvp-detail-back-link,
.uvp-page a.uvp-detail-back-link {
	font-size: 13px;
	color: var(--uvp-warm-mid);
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.02em;
	padding: 4px 0;
}

.uvp-detail-back-link:hover {
	color: var(--uvp-accent);
	text-decoration: none;
}

.uvp-detail-description {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 0.5px solid rgba(112, 112, 112, 0.12);
	font-size: 15px;
	line-height: 1.7;
	color: var(--uvp-charcoal);
}

/* ============================================================
 * INQUIRY MODAL — locked from v2.2 onward.
 * ============================================================ */

.uvp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.uvp-modal.uvp-modal-open {
	display: flex;
}

.uvp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 26, 0.7);
	backdrop-filter: blur(2px);
}

.uvp-modal-dialog {
	position: relative;
	background: var(--uvp-white);
	border-radius: 12px;
	padding: 2.5rem;
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* v5.3.12 — Close button = transparent outlined circle matching the other
 * buttons (the filled orange oval was the THEME's default <button> styling
 * leaking through; the plugin's transparent rule lost the cascade, so we force
 * it with !important). Hover fills accent + white and grows slightly, like the
 * rest of the CTAs. */
.uvp-modal-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 2px solid var(--uvp-accent) !important;
	border-radius: 50% !important;
	font-size: 22px;
	line-height: 1;
	color: var(--uvp-accent) !important;
	cursor: pointer;
	transition: transform 0.15s, background 0.2s, color 0.2s;
}

.uvp-modal-close:hover {
	background: var(--uvp-accent) !important;
	color: var(--uvp-white) !important;
	transform: scale(1.08);
}

.uvp-modal-title {
	font-family: var(--uvp-font-heading);
	font-size: 26px;
	margin: 0 0 0.5rem 0;
	color: var(--uvp-charcoal);
	font-weight: 400;
}

.uvp-modal-subtitle {
	font-size: 13px;
	color: var(--uvp-warm-mid);
	margin: 0 0 1.5rem 0;
}

.uvp-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.uvp-form-field {
	display: flex;
	flex-direction: column;
}

.uvp-form-field span {
	font-size: 12px;
	color: var(--uvp-charcoal);
	margin-bottom: 4px;
	font-weight: 500;
}

.uvp-required {
	color: var(--uvp-accent);
}

.uvp-form-full {
	grid-column: 1 / -1;
}

.uvp-form-field input,
.uvp-form-field select,
.uvp-form-field textarea {
	padding: 10px 12px;
	border: 0.5px solid rgba(112, 112, 112, 0.20);
	border-radius: 4px;
	font-size: 16px;
	font-family: inherit;
	background: var(--uvp-white);
	color: var(--uvp-charcoal);
}

.uvp-form-field input:focus,
.uvp-form-field select:focus,
.uvp-form-field textarea:focus {
	outline: none;
	border-color: var(--uvp-accent);
}

.uvp-honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: -10000px !important;
}

.uvp-form-actions {
	margin-top: 1.5rem;
}

/* v5.3.12 — Submit Inquiry matches the other CTAs (Inquire / Open Visual
 * Configurator): outlined accent pill, transparent fill, 2px accent border,
 * 999px radius, uppercase weight 600. Hover fills accent with white text —
 * the same behaviour as .uvp-btn-sample (was a solid-orange block before). */
.uvp-btn-submit {
	width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px !important;
	background: transparent !important;            /* beat Elementor's .elementor-kit-63 button orange fill */
	background-color: transparent !important;
	background-image: none !important;
	color: var(--uvp-accent) !important;
	border: 2px solid var(--uvp-accent) !important;
	border-radius: 999px !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.15s;
	font-family: inherit;
}

.uvp-btn-submit:hover {
	background: var(--uvp-accent) !important;
	background-color: var(--uvp-accent) !important;
	color: var(--uvp-white) !important;
	transform: translateY(-1px);
}

.uvp-btn-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.uvp-form-status {
	margin-top: 1rem;
	font-size: 13px;
	text-align: center;
}

.uvp-form-status.uvp-status-success {
	color: #3F5A45;
	padding: 1rem;
	background: #EFF5EE;
	border-radius: 6px;
}

.uvp-form-status.uvp-status-error {
	color: #b32d2e;
	padding: 1rem;
	background: #fef0f0;
	border-radius: 6px;
}

/* ============================================================
 * RESPONSIVE — mobile filter drawer + grid collapse
 * ============================================================ */

@media (max-width: 980px) {
	.uvp-image-hero {
		min-height: 280px;
		padding: 2rem 1.5rem;
	}
	.uvp-image-hero-heading {
		font-size: 32px;
	}
	.uvp-text-hero {
		padding: 2rem 1.5rem;
	}
	.uvp-text-hero-heading {
		font-size: 28px;
	}

	/* Single-column layout on mobile. Sidebar becomes a slide-out drawer. */
	.uvp-main-layout {
		grid-template-columns: 1fr;
	}

	.uvp-mobile-filter-toggle {
		display: inline-flex;
	}

	.uvp-filter-mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		font-size: 28px;
		line-height: 1;
		color: var(--uvp-warm-mid);
		background: transparent;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		padding: 0;
		z-index: 2;
	}
	.uvp-filter-mobile-close:hover {
		background: rgba(0, 0, 0, 0.05);
		color: var(--uvp-charcoal);
	}

	.uvp-filter-panel.uvp-filter-panel-open .uvp-filter-header {
		padding-right: 48px;
	}

	.uvp-filter-panel {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 88vw;
		max-height: 100vh;
		z-index: 99999;
		transform: translateX(-100%);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		border-right: 0.5px solid rgba(112, 112, 112, 0.12);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	}

	.uvp-filter-panel.uvp-filter-panel-open {
		transform: translateX(0);
	}

	.uvp-product-grid,
	.uvp-product-grid-in-section,
	.uvp-product-grid-flat {
		grid-template-columns: repeat(2, 1fr);
	}

	.uvp-detail-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.uvp-detail-core-pills {
		position: static;
		justify-content: flex-start;
		margin-bottom: 0.5rem;
	}

	.uvp-detail-breadcrumb-text {
		padding-right: 0;
	}

	.uvp-config-inline-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.uvp-config-inline-text {
		max-width: 100%;
	}

	.uvp-form-grid {
		grid-template-columns: 1fr;
	}

	.uvp-swatches-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.uvp-detail-thumb-strip .uvp-detail-thumb-row {
		grid-template-columns: repeat(4, 1fr);
	}

	.uvp-detail-main {
		padding: 1.5rem 1rem;
	}
}

@media (max-width: 600px) {
	.uvp-image-hero {
		min-height: 220px;
		padding: 1.5rem 1.25rem;
	}
	.uvp-image-hero-heading {
		font-size: 26px;
	}
	.uvp-image-hero-subhead {
		font-size: 13px;
	}
	.uvp-text-hero {
		padding: 1.5rem 1.25rem;
	}
	.uvp-text-hero-heading {
		font-size: 24px;
	}

	.uvp-product-grid,
	.uvp-product-grid-in-section,
	.uvp-product-grid-flat {
		grid-template-columns: 1fr;
	}
	.uvp-downloads-grid {
		grid-template-columns: 1fr;
	}
	.uvp-detail-main {
		padding: 1rem;
	}
	.uvp-detail-container {
		padding: 1.5rem;
	}
	.uvp-detail-name {
		font-size: 24px;
	}
	.uvp-modal {
		padding: 1rem;
	}
	.uvp-modal-dialog {
		padding: 1.5rem;
	}
	.uvp-swatches-grid {
		grid-template-columns: repeat(5, 1fr);
	}
	.uvp-detail-thumb-strip .uvp-detail-thumb-row {
		grid-template-columns: repeat(3, 1fr);
	}
	.uvp-swatches-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.uvp-breadcrumb-bar {
		padding: 0.75rem 1rem;
	}
	.uvp-solution-section-title {
		font-size: 19px;
	}
}

@media (max-width: 400px) {
	.uvp-swatches-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.uvp-detail-thumb-strip .uvp-detail-thumb-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
 * ============================================================
 * v4.0 — COMPREHENSIVE RESPONSIVE OVERHAUL
 *
 * The plugin had baseline responsive rules from v2.x onward but wasn't
 * mobile-optimized — chips and buttons rendered below the 44px touch
 * target minimum, the Tabbed Downloads tab strip wrapped to 2-3 lines on
 * phones instead of scrolling, there was no tablet-sweet-spot breakpoint
 * between 600px and 980px, and horizontally-scrollable strips lacked iOS
 * momentum scrolling.
 *
 * v4.0 layers on top of the existing breakpoints to fix all of the above.
 * Order: base improvements → 1100px → 980px → 768px (new) → 600px → 480px (new) → 360px.
 * Rules in this block take precedence over earlier responsive rules due
 * to source order — when both target the same property, later wins.
 * ============================================================
 * ============================================================ */

/* ---------- BASE IMPROVEMENTS — apply at every viewport ---------- */

/* iOS momentum scrolling on every horizontally-scrollable strip. Without
 * this, swiping on iOS jumps in chunks rather than rolling smoothly. */
.uvp-app-bar,
.uvp-tabbed-downloads-tabs,
.uvp-filter-chip-row {
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

/* Hide horizontal scrollbar on these strips when they DO overflow — looks
 * cleaner on touch devices. Track is still scrollable via swipe/drag. */
.uvp-app-bar::-webkit-scrollbar,
.uvp-tabbed-downloads-tabs::-webkit-scrollbar {
	height: 0;
	display: none;
}
.uvp-app-bar,
.uvp-tabbed-downloads-tabs {
	scrollbar-width: none;
}

/* ---------- LAPTOP-NARROW (≤1100px) ---------- */

@media (max-width: 1100px) {
	/* Detail container previously hit its max-width (1100px); now we let
	 * it use the full available width inside the main layout so cards
	 * don't get pinched on 13" laptops in split-screen mode. */
	.uvp-detail-container {
		max-width: 100%;
	}
}

/* ---------- TABLET PORTRAIT + SMALL LAPTOP (≤980px) ---------- */

@media (max-width: 980px) {
	/* Card arrow on listing cards — bump to 44x44 minimum tap target.
	 * Default 28x28 is too small for thumbs. Arrow SVG stays the same. */
	.uvp-card-arrow {
		width: 44px;
		height: 44px;
	}

	/* Filter chips — pad up to 44px tap height for thumb-friendly toggling
	 * inside the mobile drawer. Desktop chips stay tighter (26px). */
	.uvp-chip {
		padding: 11px 14px;
		font-size: 13px;
	}

	/* Mobile filter toggle button — already touch-sized, just confirming. */
	.uvp-mobile-filter-toggle {
		min-height: 44px;
		padding: 10px 16px;
	}

	/* Page-top breadcrumb — allow wrapping on long taxonomy paths so the
	 * product title doesn't get clipped at the right edge. */
	.uvp-breadcrumb {
		flex-wrap: wrap;
		line-height: 1.8;
	}

	/* Tabbed Downloads tab strip — switch from wrap to horizontal scroll
	 * so the 7 tabs stay on one line and the user swipes through them.
	 * Wrapping to 2-3 lines was visually heavy on phones. */
	.uvp-tabbed-downloads-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
		padding-bottom: 4px;
	}
	.uvp-tabbed-downloads-tab {
		flex-shrink: 0;
		padding: 12px 4px;
		font-size: 13px;
		min-height: 44px;
	}

	/* Tabbed Downloads list items — keep PDF/ZIP badge + filename on one
	 * line for as long as possible, then wrap gracefully. */
	.uvp-tabbed-downloads-link {
		padding: 14px 4px;
		min-height: 44px;
	}

	/* Page-level breadcrumb-bar padding shrinks a bit. */
	.uvp-breadcrumb-bar {
		padding: 0.75rem 1.25rem;
	}

	/* App bar text sizing — keep readable. */
	.uvp-app-pill {
		font-size: 13px;
		padding: 8px 2px;
		min-height: 44px;
	}

	/* Product card image height — slightly shorter so card density on
	 * a 2-col grid feels right. */
	.uvp-product-img {
		height: 200px;
	}
}

/* ---------- NEW BREAKPOINT — TABLET PORTRAIT SWEET SPOT (≤768px) ---------- */

@media (max-width: 768px) {
	/* Most of v3.x went straight from 980px to 600px, leaving iPad mini /
	 * Android tablets (~600-768px) with phone-portrait styles. v4.0 adds
	 * an explicit tablet stop that keeps two-column grids where they fit. */

	/* Product grid stays 2-col through tablet portrait. */
	.uvp-product-grid,
	.uvp-product-grid-in-section,
	.uvp-product-grid-flat {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Quick download buttons stay inline on tablet — they're short labels
	 * and there's room. */
	.uvp-detail-quick-downloads {
		gap: 0.5rem;
	}

	.uvp-btn-quick-dl {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	/* Detail page main area — tighter horizontal padding so cards get
	 * a touch more breathing room. */
	.uvp-detail-main {
		padding: 1.25rem 1rem;
	}

	/* Detail-card header — make sure long product names don't squeeze the
	 * Core pills off the right edge; let the pills wrap below the title. */
	.uvp-detail-product-card .uvp-detail-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.uvp-detail-card-header-pills {
		justify-content: flex-start;
	}

	/* Sustainability cards on tablet — 2 cols if there are at least 2 certs;
	 * otherwise the lone card stretches awkwardly. */
	.uvp-sustainability-grid {
		grid-template-columns: 1fr;
	}

	/* Tabbed Downloads section padding. */
	.uvp-tabbed-downloads-section {
		padding: 1.5rem 1.25rem;
	}
}

/* ---------- PHONE (≤600px) — existing breakpoint, refined ---------- */

@media (max-width: 600px) {
	/* Product grid: full-width cards. */
	.uvp-product-grid,
	.uvp-product-grid-in-section,
	.uvp-product-grid-flat {
		grid-template-columns: 1fr;
	}

	/* Card image is taller on phones since the full card is now full-width. */
	.uvp-product-img {
		height: 240px;
	}

	/* Top-card swatch grid on phones — 4 cols is the right density. */
	.uvp-detail-card-top .uvp-detail-swatch-grid,
	.uvp-detail-card-top .uvp-swatches-grid,
	.uvp-detail-card-top .uvp-detail-swatch-grid-placeholder {
		grid-template-columns: repeat(4, 1fr);
	}

	/* CTA row stacks vertically on phones. */
	.uvp-detail-cta-row {
		flex-direction: column;
	}

	/* Order a Sample button — full-width on phones for easier tapping. */
	.uvp-btn-sample {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Quick download buttons stack on phones — better tap targets than
	 * trying to fit them side by side. */
	.uvp-detail-quick-downloads {
		flex-direction: column;
	}
	.uvp-btn-quick-dl {
		width: 100%;
		justify-content: space-between;
	}

	/* Inquire pill button (.uvp-btn-sample-inquiry uses .uvp-btn-sample
	 * styles per v3.6.8) — full-width too. */
	.uvp-btn-sample-inquiry {
		width: 100%;
	}

	/* Configure inline card — body text + button always stack on phones
	 * (already covered by 980px rule, reconfirming here). */
	.uvp-config-inline-cta,
	.uvp-config-inline-cta-top {
		flex-direction: column;
		align-items: stretch;
	}
	.uvp-config-inline-cta-top .uvp-config-inline-link,
	.uvp-config-inline-cta .uvp-config-inline-link {
		width: 100%;
		justify-content: center;
		padding: 12px 18px;
	}

	/* Spec table padding tightens. */
	.uvp-detail-page .uvp-spec-table td {
		padding: 10px 0;
		font-size: 13px;
	}

	/* Section title sizes — refined down a notch. */
	.uvp-detail-section-title {
		font-size: 17px;
	}
	.uvp-sustainability-title {
		font-size: 16px;
		margin-bottom: 1.25rem;
	}
	.uvp-tabbed-downloads-title {
		font-size: 19px;
	}
	.uvp-detail-name {
		font-size: 24px;
	}

	/* Tabbed downloads list — vertically stack the ext badge above the
	 * filename on very narrow phones so long filenames don't truncate. */
	.uvp-tabbed-downloads-link {
		flex-wrap: wrap;
		gap: 10px;
	}
	.uvp-tabbed-downloads-item-title {
		font-size: 11px;
		letter-spacing: 0.04em;
	}

	/* Page breadcrumb font tighter. */
	.uvp-breadcrumb {
		font-size: 11px;
	}

	/* Sustainability card — logo + text stack on very narrow */
	.uvp-sustainability-card {
		grid-template-columns: 60px 1fr;
		gap: 0.75rem;
	}
	.uvp-sustainability-logo img {
		max-width: 60px;
		max-height: 60px;
	}

	/* v4.0.6: Secondary image / placeholder — shorter on phones. At ≤980px
	 * the specs grid is single-column, so this block stacks below the spec
	 * table; 380px would be an oversized empty band on a phone. */
	.uvp-detail-secondary-img {
		min-height: 220px;
	}
}

/* ---------- NEW BREAKPOINT — NARROW PHONE (≤480px) ---------- */

@media (max-width: 480px) {
	/* Below iPhone-SE-portrait (~375px). Several things tighten further. */

	.uvp-detail-product-card {
		padding: 1rem;
	}

	.uvp-detail-product-card .uvp-detail-card-header {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
	}

	.uvp-detail-product-card .uvp-detail-card-specs {
		margin-top: 1rem;
		padding-top: 1rem;
	}

	.uvp-sustainability-section,
	.uvp-tabbed-downloads-section {
		padding: 1.25rem 1rem;
		border-radius: 10px;
	}

	.uvp-detail-product-card {
		border-radius: 10px;
	}

	/* App bar gap tightens. */
	.uvp-app-bar {
		gap: 18px;
		padding: 0.75rem 1.25rem;
	}

	/* Listing product card image slightly shorter on narrow phones. */
	.uvp-product-img {
		height: 220px;
	}

	/* Sustainability cards become single-column logo-above-text on very
	 * narrow widths — more legible than a 60px logo cramped next to copy. */
	.uvp-sustainability-card {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.uvp-sustainability-logo {
		justify-content: flex-start;
	}
}

/* ---------- SMALL PHONE (≤360px) — original 400px breakpoint, refined ---------- */

@media (max-width: 360px) {
	/* Galaxy S8 / older Android portrait. Already covered by the original
	 * 400px breakpoint for swatch grids; v4.0 layers on a touch more. */

	.uvp-detail-card-top .uvp-detail-swatch-grid,
	.uvp-detail-card-top .uvp-swatches-grid,
	.uvp-detail-card-top .uvp-detail-swatch-grid-placeholder {
		grid-template-columns: repeat(3, 1fr);
	}

	.uvp-detail-name {
		font-size: 22px;
	}

	.uvp-app-bar {
		gap: 14px;
		padding: 0.6rem 1rem;
	}
}

/* ============================================================
 * ============================================================
 * v3.6.0 — DETAIL PAGE REDESIGN
 *
 * Replaces the single-card detail layout from v3.5.x with a stack of
 * insets: top card (hero + swatches + configure + order-sample),
 * specs card (breadcrumb + name + spec table + quick downloads +
 * secondary image), sustainability section (white), tabbed downloads
 * (theme beige).
 *
 * Strategy: override .uvp-detail-container's old card-style background
 * and let each .uvp-detail-card render its own inset card.
 * ============================================================
 * ============================================================ */

/* Color token — soft cream/tan card background. Tweak in one place. */
.uvp-detail-page {
	--uvp-card-inset: #F4ECDF;
	--uvp-card-inset-border: rgba(143, 113, 75, 0.16);
	--uvp-section-beige: var(--uvp-sand);
}

/* Strip the old single-card look — container is now just a max-width wrapper. */
.uvp-detail-page .uvp-detail-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	max-width: 1100px;
	margin: 0 auto;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* v3.6.3: TOP + SPECS zones share one continuous beige card. The wrapper
 * carries background, border, radius and outer padding; the inner zones
 * (`.uvp-detail-card-top`, `.uvp-detail-card-specs`) are pure layout
 * containers with no chrome of their own. */
.uvp-detail-product-card {
	background: var(--uvp-card-inset);
	border: 1px solid var(--uvp-card-inset-border);
	border-radius: 14px;
	padding: 2rem;
}

/* v3.6.6: Card header — full-width zone at the top of the product card.
 * Left side carries the breadcrumb + product name; right side carries the
 * Core pills. Sits above the hero-image + swatches grid. */
.uvp-detail-product-card .uvp-detail-card-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(143, 113, 75, 0.18);
}

.uvp-detail-card-header-left {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	flex: 1;
}

.uvp-detail-card-header-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
	flex-shrink: 0;
	padding-top: 0.25rem;
}

/* Top + specs zones get a soft divider between them (gap-line-gap rhythm
 * matching Sayani's mockup). The header above already has its own divider
 * border, so the chain reads: header — divider — top zone — divider — specs. */
.uvp-detail-product-card .uvp-detail-card-specs {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(143, 113, 75, 0.18);
}

/* v3.6.6: Section titles for the in-card sections. "Product Specifications"
 * (h2) opens the specs zone; "Downloads" (h3) sits above the two quick-link
 * download buttons. Tone-matched with the rest of the brand — accent-color
 * heading on the same beige card surround. */
.uvp-detail-section-title {
	font-family: var(--uvp-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--uvp-charcoal);
	margin: 0 0 1.25rem 0;
	letter-spacing: 0;
	line-height: 1.2;
}

.uvp-detail-subsection-title {
	font-family: var(--uvp-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--uvp-charcoal);
	margin: 1.25rem 0 0.75rem 0;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* Legacy single-card class kept as a no-op alias in case any cached page
 * still uses it. */
.uvp-detail-card {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ============================================================
 * TOP CARD — hero (left) + swatches & configure (right)
 * ============================================================ */

.uvp-detail-top-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.uvp-detail-top-left {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

/* Hero image inherits .uvp-detail-img base from earlier rules. v3.6.0 just
 * tweaks aspect ratio + adds a soft inner border for the cream surround. */
.uvp-detail-card-top .uvp-detail-img {
	aspect-ratio: 1 / 1;
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	border: 0;
}

/* Order a Sample — outlined pill button. v4.3.11: all properties use !important
 * to beat Astra theme's aggressive button overrides (background, border-radius,
 * font-size). Hover fills the button solid with white text. */
.uvp-btn-sample,
.uvp-page a.uvp-btn-sample,
a.uvp-btn-sample {
	align-self: flex-start;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 20px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--uvp-accent) !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: 2px solid var(--uvp-accent) !important;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s, color 0.2s;
	margin-top: 0.25rem;
	font-family: inherit !important;
	line-height: 1.4 !important;
}

.uvp-btn-sample:hover,
.uvp-page a.uvp-btn-sample:hover,
a.uvp-btn-sample:hover {
	background: var(--uvp-accent) !important;
	background-color: var(--uvp-accent) !important;
	color: var(--uvp-white) !important;
	transform: translateY(-1px);
}

/* v3.6.2: Pending state — JotForm URL not yet configured in plugin Settings.
 * Button still renders so admins can preview the layout, but reads as
 * "needs setup" via slight opacity. Tooltip on hover explains. */
.uvp-btn-sample.uvp-btn-sample-pending,
.uvp-page a.uvp-btn-sample.uvp-btn-sample-pending {
	opacity: 0.75;
	cursor: help;
}

.uvp-btn-sample.uvp-btn-sample-pending:hover {
	opacity: 1;
	transform: none;
	background: var(--uvp-accent) !important;
	background-color: var(--uvp-accent) !important;
}

/* v3.6.8: Inquire-for-Your-Project button reuses the Order a Sample format
 * (orange pill, white arrow circle) for visual consistency. The modifier
 * class adds top margin so it sits cleanly below the Downloads block in the
 * specs zone. */
.uvp-btn-sample.uvp-btn-sample-inquiry,
.uvp-page a.uvp-btn-sample.uvp-btn-sample-inquiry {
	margin-top: 1.5rem;
}

/* v3.6.4: Arrow chip houses an inline SVG. The Unicode ↗ glyph was being
 * promoted to colored emoji on macOS/Windows, breaking the white-circle +
 * accent-arrow look. SVG inherits currentColor so the styling holds. */
.uvp-btn-sample-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--uvp-white) !important;
	color: var(--uvp-accent) !important;
	border-radius: 50% !important;
	line-height: 1;
	flex-shrink: 0;
}

/* v4.3.13: CTA button arrow hover — fills orange, arrow becomes white,
 * matching the unified arrow-circle hover system. */
.uvp-btn-sample:hover .uvp-btn-sample-arrow {
	background: var(--uvp-accent) !important;
	color: var(--uvp-white) !important;
}

.uvp-btn-sample-arrow svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* v4.3.11: CTA row — Order a Sample + Open Visual Configurator side by side. */
.uvp-detail-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-top: 0.5rem;
}

/* v5.3.10 — Inquire + Configurator: compact, equal-sized, side by side.
 * The Inquire <button> also carries the legacy .uvp-btn-inquire class whose
 * `width:100%` (line ~1409) stretched it to the full column width — that was
 * the "too big / ugly" full-width button. We override it here so it matches the
 * Configurator: both share the row equally (flex:1), with a slightly smaller
 * font/padding so the labels fit on one line while staying easily readable. */
/* The .uvp-page prefix lifts specificity to 0,3,0 so this beats BOTH base
 * rules — the button's `.uvp-btn-sample` AND the anchor's `.uvp-page a.uvp-btn-sample`
 * (0,2,1) — which is why v5.3.10 only shrank the Inquire <button> and left the
 * Configurator <a> at its original size. Now identical values land on both. */
.uvp-page .uvp-detail-cta-row .uvp-btn-sample,
.uvp-page .uvp-detail-cta-row .uvp-btn-sample.uvp-btn-inquire,
.uvp-page .uvp-substrate-cta-row .uvp-btn-sample,
.uvp-page .uvp-substrate-cta-row .uvp-btn-sample.uvp-btn-data-sheet {
	width: auto !important;        /* fit content — compact pill, ALL CTAs identical (v5.3.28) */
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 9px 14px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--uvp-accent) !important;
	background: transparent !important;
	border: 2px solid var(--uvp-accent) !important;   /* same boundary weight on both */
	border-radius: 999px !important;
	white-space: nowrap;
}

/* Hover: identical to Configurator — fill accent, white text (both get this from
 * .uvp-btn-sample:hover already; restated here at matching specificity so the
 * legacy .uvp-btn-inquire:hover charcoal fill can never win on the button). */
.uvp-page .uvp-detail-cta-row .uvp-btn-sample:hover,
.uvp-page .uvp-substrate-cta-row .uvp-btn-sample:hover {
	background: var(--uvp-accent) !important;
	color: var(--uvp-white) !important;
}

.uvp-detail-cta-row .uvp-btn-sample-arrow,
.uvp-substrate-cta-row .uvp-btn-sample-arrow {
	width: 18px;
	height: 18px;
}
.uvp-detail-cta-row .uvp-btn-sample-arrow svg,
.uvp-substrate-cta-row .uvp-btn-sample-arrow svg {
	width: 10px;
	height: 10px;
}

/* RIGHT side of top card: breadcrumb + swatch grid + configure card. */
.uvp-detail-top-right {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* v3.6.2: Breadcrumb hoisted into the top card. Same look as before but
 * positioned at the top of the right column. */
.uvp-detail-top-right .uvp-detail-breadcrumb-top {
	margin-bottom: -0.25rem;  /* tighten against the swatch grid below */
	padding-right: 0;          /* no Core pills above to clear in this position */
}

/* v3.6.0: 5-column swatch grid matching Sayani's mockup. Overrides the
 * legacy `.uvp-swatches-grid` 8-column rule via higher specificity.
 * v3.6.2: Grid is now populated by non-interactive `.uvp-swatch-tile`
 * elements instead of clickable `.uvp-swatch-chip` buttons. Visual reference
 * only — users go to the configurator to explore variants. */
.uvp-detail-card-top .uvp-detail-swatch-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

/* v4.1.6: Overflow tiles hide themselves regardless of grid-collapsed state.
 * The "Load more" button reveals tiles by REMOVING the .uvp-swatch-tile-overflow
 * class from the next N hidden tiles, batch by batch. This replaces the older
 * all-or-nothing toggle. */
.uvp-detail-card-top .uvp-detail-swatch-grid .uvp-swatch-tile-overflow {
	display: none;
}

/* Non-interactive swatch tile (v3.6.2). No cursor, no hover, no focus ring,
 * no active state. Pure visual reference. */
.uvp-detail-card-top .uvp-swatch-tile {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
	cursor: default;
}

.uvp-detail-card-top .uvp-swatch-tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

/* Empty placeholder when product has no swatches — keeps the right column
 * height balanced so the Configure card doesn't shift to the top.
 * v3.6.9 — legacy single-block placeholder; superseded by the grid below. */
.uvp-detail-swatch-empty {
	min-height: 200px;
}

/* v4.0.5: The zero-tile placeholder block (v4.0.4) and the 15-tile
 * placeholder grid (v3.6.9) are both gone. When a product has no pattern/
 * finish tiles, nothing renders in this spot — the Configurator card is the
 * only child of the right column and rises to the top (the top grid uses
 * `align-items: start`). Zero tiles doesn't imply more are pending, so there
 * is no "coming soon" affordance. */

.uvp-swatch-chip-grid {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
}

.uvp-swatch-chip-grid:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.uvp-swatch-chip-grid .uvp-swatch-chip-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	border: 2px solid transparent;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.uvp-swatch-chip-grid.uvp-swatch-chip-active .uvp-swatch-chip-img {
	border-color: var(--uvp-accent);
	box-shadow: 0 0 0 1px var(--uvp-accent);
}

/* Suppress legacy chip-active outer ring + checkmark on grid chips. */
.uvp-detail-card-top .uvp-swatch-chip-active {
	box-shadow: none;
	border-color: transparent;
}

.uvp-detail-card-top .uvp-swatch-chip-check {
	display: none;
}

/* Top-card variant of the Configure inline card — sits below the swatches.
 * Smaller, white-bg (contrasts the cream card surround), inline layout. */
.uvp-config-inline-cta-top {
	background: var(--uvp-white);
	color: var(--uvp-charcoal);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	margin-top: 0.25rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
}

.uvp-config-inline-cta-top .uvp-config-inline-text {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--uvp-warm-mid);
	flex: 1;
	max-width: none;
}

.uvp-config-inline-cta-top .uvp-config-inline-link {
	padding: 8px 14px;
	font-size: 11.5px;
	border-radius: 999px;
	flex-shrink: 0;
}

/* ============================================================
 * SPECS CARD — left (breadcrumb / name / spec table / quick dls)
 *               right (secondary image)
 * ============================================================ */

/* v4.0.6: Specs grid is always two-column. The right column always has
 * content — either the uploaded Secondary Image or a placeholder block —
 * so there's no need for the v3.6.11 conditional modifier class. Collapses
 * to a single column at ≤980px (see the responsive block). */
.uvp-detail-specs-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.uvp-detail-specs-left {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Core pills (top-right) inside specs card. */
.uvp-detail-card-specs .uvp-detail-core-pills {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.uvp-detail-card-specs .uvp-detail-core-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid rgba(112, 112, 112, 0.28);
	background: var(--uvp-white);
	color: var(--uvp-charcoal);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Breadcrumb text inside specs card — reads "Wall / Bespoke Graphics Series". */
.uvp-detail-card-specs .uvp-detail-breadcrumb-text {
	padding-right: 140px;  /* leave room for core pills positioned top-right */
}

/* Spec table — already styled higher up; just remove the bottom margin so
 * the quick downloads sit close to it inside the cream card. */
.uvp-detail-card-specs .uvp-spec-table {
	margin-bottom: 0;
}

/* Quick downloads — two outlined ghost buttons inline. */
.uvp-detail-quick-downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1rem;
}

.uvp-btn-quick-dl,
.uvp-page a.uvp-btn-quick-dl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--uvp-white);
	color: var(--uvp-charcoal) !important;
	border: 1px solid rgba(28, 28, 26, 0.22);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.uvp-btn-quick-dl:hover {
	border-color: var(--uvp-accent);
	color: var(--uvp-accent) !important;
}

/* v3.6.4: Inline SVG download icon. Same emoji-rendering issue as the
 * arrow chips. SVG inherits currentColor → matches the button label color. */
.uvp-btn-quick-dl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.uvp-btn-quick-dl-icon svg {
	display: block;
}

/* Secondary image on the right of the specs card. */
.uvp-detail-specs-right {
	display: flex;
	align-items: stretch;
}

.uvp-detail-secondary-img {
	width: 100%;
	min-height: 380px;
	background-color: rgba(0, 0, 0, 0.04);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	/* v4.0.6: flex-center so the placeholder text sits in the middle when
	 * no image is uploaded. Harmless on the image variant — there's no
	 * child content there, just a background-image. */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* v4.0.6: Secondary image placeholder — empty-state for the specs-zone
 * image slot. Matches the hero image's "[ Product image coming soon ]"
 * treatment: same warm grey, same rounded corners, centered muted label. */
.uvp-detail-secondary-img-placeholder {
	background-color: rgba(0, 0, 0, 0.04);
}

/* ============================================================
 * SUSTAINABILITY — white-bg section, 2x2 grid of certs
 * ============================================================ */

/* v4.2.5: Certifications section — no background, no border. Logos sit
 * directly on the page background, evenly spread per design. */
.uvp-sustainability-section {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 1.5rem 0 0;
}

.uvp-sustainability-title {
	font-family: var(--uvp-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--uvp-accent);
	margin: 0 0 1.25rem 0;
	letter-spacing: -0.01em;
	text-align: left;
}

/* v4.1.6: Certifications strip — horizontal row of bordered, equal-width
 * cells, each holding one centered logo. Replaces the old 2-column grid
 * with title + description. Cells with a Link URL are <a> elements that
 * open the certificate PDF/page in a new tab. */
/* v4.2.3: Logos sit directly on the single section card. No per-cell tile,
 * no border, no per-cell background. Just clean evenly-spaced logos.
 * 5/3/2 per row at desktop/tablet/mobile. Wraps left-aligned so partial rows
 * never orphan a single centered logo. */
.uvp-cert-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	background: transparent;
	border: 0;
	overflow: visible;
	justify-content: flex-start;
}

.uvp-cert-cell {
	flex: 0 0 calc((100% - 4 * 24px) / 5); /* 5 per row, 4 horizontal gaps */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	transition: transform 0.15s, opacity 0.15s;
}

.uvp-cert-cell img {
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

.uvp-cert-cell-link {
	cursor: pointer;
}

.uvp-cert-cell-link:hover img {
	transform: scale(1.05);
}

.uvp-cert-cell-link:focus-visible {
	outline: 2px solid var(--uvp-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Tablet (≤980px): 3 per row */
@media (max-width: 980px) {
	.uvp-cert-cell {
		flex-basis: calc((100% - 2 * 24px) / 3);
	}
}

/* Legacy 2-col card grid styles below are retained but unused now that the
 * template emits .uvp-cert-strip. Kept for backward-compat with any cached
 * pages until that cache rotates. */
.uvp-sustainability-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 2.5rem;
}

.uvp-sustainability-card {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: 0.5rem 0;
}

.uvp-sustainability-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.uvp-sustainability-logo img {
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
	display: block;
}

.uvp-sustainability-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.uvp-sustainability-card-title {
	font-family: var(--uvp-font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--uvp-charcoal);
	margin: 0;
	line-height: 1.3;
}

.uvp-sustainability-card-desc {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--uvp-warm-mid);
	margin: 0;
}

/* ============================================================
 * TABBED DOWNLOADS — theme-beige section, tab strip + file list
 * ============================================================ */

.uvp-tabbed-downloads-section {
	background: var(--uvp-sand-dark);
	border-radius: 14px;
	padding: 2rem 2.25rem;
}

/* v5.1.21: Header row — title left, Download All button right. */
.uvp-tabbed-downloads-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
	gap: 1rem;
}

.uvp-tabbed-downloads-title {
	font-family: var(--uvp-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--uvp-charcoal);
	margin: 0;
	letter-spacing: -0.01em;
}

/* v5.1.21: "Download All" button — matches the CTA button style. */
.uvp-btn-download-all {
	display: none !important; /* v5.3.19 — "Download All" button removed per Vish */
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1.5px solid var(--uvp-accent);
	border-radius: 6px;
	background: transparent;
	color: var(--uvp-accent);
	font-family: var(--uvp-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}
.uvp-btn-download-all:hover {
	background: var(--uvp-accent);
	color: #fff;
}
.uvp-btn-download-all .uvp-btn-sample-arrow {
	display: inline-flex;
}
.uvp-btn-download-all .uvp-btn-sample-arrow svg {
	display: block;
}

/* Tab strip — text labels with accent underline on the active one. */
.uvp-tabbed-downloads-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	border-bottom: 1px solid rgba(112, 112, 112, 0.20);
	margin-bottom: 1rem;
}

/* v4.1.4: Aggressive resets — Astra/Elementor button styles can otherwise
 * repaint these tabs as full-width pills with oversized text. We force the
 * minimal text-tab look here using !important to win over theme cascade. */
.uvp-tabbed-downloads-tabs .uvp-tabbed-downloads-tab,
button.uvp-tabbed-downloads-tab {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 8px 2px !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	color: var(--uvp-warm-mid) !important;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	margin-bottom: -1px;
}

.uvp-tabbed-downloads-tab:hover:not(.uvp-tabbed-downloads-tab-active) {
	color: var(--uvp-charcoal) !important;
}

.uvp-tabbed-downloads-tab.uvp-tabbed-downloads-tab-active {
	color: var(--uvp-charcoal) !important;
	border-bottom-color: var(--uvp-charcoal) !important;
	font-weight: 600 !important;
}

.uvp-tabbed-downloads-panel[hidden] {
	display: none;
}

/* v4.1.6: Two-column layout, balanced split.
 * column-fill:balance (the browser default) distributes items evenly:
 * 4 items → 2 + 2, 6 items → 3 + 3, 8 items → 4 + 4. Container has a
 * stable min-height so switching between tabs with different counts
 * doesn't reflow the surrounding card. */
.uvp-tabbed-downloads-panel {
	min-height: 220px; /* room for up to 4 rows × ~55px */
}

.uvp-tabbed-downloads-list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 40px;
	column-fill: balance;
}

.uvp-tabbed-downloads-item {
	border-bottom: 0 !important;   /* v5.3.23 — no divider line under download items (was asymmetric: only non-last items showed it) */
	break-inside: avoid;        /* keep an item from splitting across columns */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Drop the divider on the LAST item in EACH column, not just the last child.
 * :last-child still applies but with columns we also want the 4th item (end of
 * col 1) to lose its border. Simpler: keep border on all and let it visually
 * separate; only strip from the very last item to avoid a trailing line. */
.uvp-tabbed-downloads-item:last-child {
	border-bottom: 0;
}

.uvp-tabbed-downloads-link,
.uvp-page a.uvp-tabbed-downloads-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* v5.3.33 — keep title + arrow together at the left */
	gap: 5px;
	padding: 12px 4px;
	color: var(--uvp-charcoal);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.15s;
}

.uvp-tabbed-downloads-link:hover {
	color: var(--uvp-accent);
}

/* v4.1.4: Badge removed from template. Hide defensively in case any
 * cached/older render still emits the span. */
.uvp-tabbed-downloads-ext {
	display: none !important;
}

.uvp-tabbed-downloads-item-title {
	flex: 0 1 auto;   /* v5.3.33 — don't stretch; arrow sits right after the text */
}

/* ============================================================
 * STICKY SECTION NAVIGATION (v5.1.21)
 * Frozen tab bar on product detail page — sticks below the header
 * when the user scrolls past it. IntersectionObserver in JS tracks
 * which section is in view and highlights the matching tab.
 * ============================================================ */

/* v5.3.7 — Section anchor nav relocated from inside the product card to a
 * top-level bar between the Applications bar and the breadcrumb. Aligns with
 * their 2rem horizontal padding; the surrounding bars' borders provide the
 * lines above and below. Solid white background so it stays readable when it
 * sticks over the product content on scroll. */
.uvp-section-nav {
	display: flex;
	align-items: center;
	gap: 28px;             /* match .uvp-app-bar item spacing */
	background: #fff;
	border-bottom: 1px solid rgba(112, 112, 112, 0.15);
	position: sticky;
	top: 0;                /* JS will adjust for fixed header */
	z-index: 90;
	padding: 0 2rem;       /* align with .uvp-app-bar / .uvp-breadcrumb-bar */
	transition: box-shadow 0.2s;
}

/* Subtle shadow when stuck (added by JS via .uvp-section-nav-stuck) */
.uvp-section-nav.uvp-section-nav-stuck {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* v5.3.8 — Match the Applications bar exactly. The theme's global <a> styling
 * was forcing these links to 18px / weight 400 / accent-red because the old
 * single-class selector lost the cascade. We now use the same high-specificity
 * pattern as the app pills (.uvp-page a.uvp-section-nav-item) so our styles win:
 *   - 13px / weight 500, brand-blue (charcoal) by default, title case
 *   - accent ONLY on hover and on the active (scrolled-to) section
 *   - the active item keeps its accent underline */
.uvp-section-nav-item,
a.uvp-section-nav-item,
.uvp-page a.uvp-section-nav-item {
	padding: 14px 0;
	font-family: var(--uvp-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--uvp-charcoal);
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
	cursor: pointer;
}

.uvp-page a.uvp-section-nav-item:hover:not(.uvp-section-nav-active) {
	color: var(--uvp-accent);
}

.uvp-page a.uvp-section-nav-item.uvp-section-nav-active {
	color: var(--uvp-accent);
	border-bottom-color: var(--uvp-accent);
}

/* ============================================================
 * Detail card responsive — collapse to single column on mobile
 * ============================================================ */

@media (max-width: 980px) {
	.uvp-detail-top-grid,
	.uvp-detail-specs-grid {
		grid-template-columns: 1fr;
	}

	.uvp-detail-card-specs .uvp-detail-core-pills {
		position: static;
		justify-content: flex-start;
		margin-bottom: 0.25rem;
	}

	.uvp-detail-card-specs .uvp-detail-breadcrumb-text {
		padding-right: 0;
	}

	.uvp-detail-product-card {
		padding: 1.5rem;
	}

	.uvp-detail-product-card .uvp-detail-card-header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.uvp-detail-card-header-pills {
		justify-content: flex-start;
	}

	.uvp-detail-product-card .uvp-detail-card-specs {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
	}

	/* v5.1.21 / v5.3.7: Sticky nav — horizontal scroll on mobile. Aligns with
	 * the mobile app-bar / breadcrumb padding (no card bleed now). */
	.uvp-section-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 20px;
		padding: 0 1.25rem;
	}
	.uvp-section-nav::-webkit-scrollbar {
		display: none;
	}
	/* v5.3.8 — match the high-specificity desktop selector so these mobile
	 * overrides actually apply. */
	.uvp-page a.uvp-section-nav-item {
		padding: 12px 0;
		font-size: 12px;
		flex-shrink: 0;
	}

	.uvp-sustainability-section {
		padding: 1.75rem 1.5rem;
	}

	.uvp-sustainability-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* v4.2.3: Phone — 2 per row, logos directly on the single card. */
	.uvp-cert-strip {
		flex-wrap: wrap;
		gap: 14px 16px;
		justify-content: flex-start;
	}
	.uvp-cert-cell {
		flex-basis: calc((100% - 16px) / 2);
		padding: 4px;
	}
	.uvp-cert-cell img {
		max-height: 70px;
	}

	.uvp-tabbed-downloads-section {
		padding: 1.5rem 1.25rem;
	}

	.uvp-detail-card-top .uvp-detail-swatch-grid,
	.uvp-detail-card-top .uvp-swatches-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.uvp-config-inline-cta-top {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 600px) {
	.uvp-detail-product-card {
		padding: 1.25rem;
	}

	.uvp-detail-product-card .uvp-detail-card-header {
		margin-bottom: 1.25rem;
		padding-bottom: 1.25rem;
	}

	.uvp-detail-product-card .uvp-detail-card-specs {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}

	.uvp-detail-card-top .uvp-detail-swatch-grid,
	.uvp-detail-card-top .uvp-swatches-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* v4.1.5: On phones, drop the 2-column downloads layout — items too
	 * cramped at 50% width. Use single column, let height grow naturally. */
	.uvp-tabbed-downloads-list {
		column-count: 1;
	}
	.uvp-tabbed-downloads-panel {
		min-height: 0;
	}

	.uvp-sustainability-card {
		grid-template-columns: 70px 1fr;
		gap: 0.85rem;
	}

	.uvp-sustainability-logo img {
		max-width: 70px;
		max-height: 70px;
	}

	.uvp-tabbed-downloads-tabs {
		gap: 14px;
	}

	.uvp-tabbed-downloads-tab {
		font-size: 12px;
	}
}

/* ============================================================
 * v4.2.0 — SUBSTRATE TABS (spec block on product detail page)
 *
 * Two-level tab structure matching catalog.univicoustic.com:
 *   - .uvp-substrate-tab    → primary (PET, PET WOOL) — pill-style toggle
 *   - .uvp-thickness-pill   → nested (12 MM, 25 MM) — also pill-style
 *   - .uvp-spec-block       → one labeled field per "Dimensions / NRC / …"
 *   - .uvp-fire-chip        → pipe-separated cert chips
 *   - .uvp-btn-data-sheet   → grey CTA for the PDF download
 * ============================================================ */

/* v4.2.4: Substrate & thickness tabs restyled to MATCH the Downloads tab
 * pattern — flat text labels with an underline on the active one. Earlier
 * heavy charcoal pills were overpowering the rest of the spec block. */
.uvp-substrate-tabs-wrap {
	margin-bottom: 1.5rem;
}

.uvp-substrate-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	border-bottom: 1px solid rgba(112, 112, 112, 0.20);
	margin-bottom: 1.25rem;
}

.uvp-substrate-tab,
button.uvp-substrate-tab {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 8px 2px !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--uvp-warm-mid) !important;
	cursor: pointer !important;
	transition: color 0.15s, border-color 0.15s;
	margin-bottom: -1px;
}

.uvp-substrate-tab:hover:not(.is-active) {
	color: var(--uvp-charcoal) !important;
}

.uvp-substrate-tab.is-active {
	color: var(--uvp-charcoal) !important;
	border-bottom-color: var(--uvp-charcoal) !important;
	font-weight: 600 !important;
}

/* Nested thickness pills — slightly smaller version of the same pattern */
.uvp-thickness-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	border-bottom: 1px solid rgba(112, 112, 112, 0.15);
	margin: 0 0 1.25rem 0;
}

.uvp-thickness-pill,
button.uvp-thickness-pill {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 6px 2px !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	font-family: inherit !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--uvp-warm-mid) !important;
	cursor: pointer !important;
	transition: color 0.15s, border-color 0.15s;
	margin-bottom: -1px;
}

.uvp-thickness-pill:hover:not(.is-active) {
	color: var(--uvp-charcoal) !important;
}

.uvp-thickness-pill.is-active {
	color: var(--uvp-charcoal) !important;
	border-bottom-color: var(--uvp-charcoal) !important;
	font-weight: 600 !important;
}

/* Substrate panels — only the active one shows */
.uvp-substrate-panel[hidden] {
	display: none;
}

.uvp-thickness-block[hidden] {
	display: none;
}

/* v4.2.4: Quieter spec lines — label is medium weight (not bold), values are
 * normal weight. Matches the calm look of the aux Variant/Country table the
 * user pointed at as the reference. */
.uvp-spec-block {
	margin-bottom: 1rem;
}

.uvp-spec-block-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--uvp-charcoal);
	margin-bottom: 2px;
	letter-spacing: 0;
}

.uvp-spec-block-value {
	font-size: 13px;
	color: var(--uvp-warm-mid);
	line-height: 1.55;
	font-weight: 400;
}

.uvp-spec-block-sub {
	color: var(--uvp-warm-mid);
	font-size: 12px;
}

.uvp-substrate-divider {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin: 1.4rem 0;
}

/* v4.2.4: Fire performance — single inline run with pipe separators that
 * stick to the preceding chip (never wraps onto its own line). */
.uvp-spec-fire-list {
	font-size: 13px;
	color: var(--uvp-warm-mid);
	line-height: 1.7;
}

.uvp-fire-chip {
	font-size: 13px;
	color: var(--uvp-warm-mid);
	display: inline;
}

.uvp-fire-chip + .uvp-fire-chip {
	white-space: normal;
}

.uvp-fire-chip + .uvp-fire-chip::before {
	content: " | ";
	color: rgba(0, 0, 0, 0.25);
	margin: 0 4px;
}

/* Detailed data sheet CTA — grey button matching the catalogue */
.uvp-substrate-data-sheet-wrap {
	margin-top: 1.25rem;
}

.uvp-btn-data-sheet,
.uvp-page a.uvp-btn-data-sheet {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	/* v5.3.21 — Match the standard .uvp-btn-sample pill: transparent fill +
	 * accent text (was white-on-white, which read as faded/grey). Border, pill
	 * shape and the accent-fill hover already come from .uvp-btn-sample. */
	background: transparent;
	color: var(--uvp-accent) !important;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 2px;
	transition: background 0.15s;
}

.uvp-btn-data-sheet:hover {
	background: var(--uvp-charcoal);
}

.uvp-btn-data-sheet-icon {
	display: inline-flex;
}

/* Auxiliary mini-table below substrate tabs — keeps Variant / Country / Recycled */
.uvp-spec-table-aux {
	margin-top: 1.25rem;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.10);
	padding-top: 1rem;
}

.uvp-spec-table-aux td {
	font-size: 12px;
	padding: 4px 0;
}

@media (max-width: 600px) {
	.uvp-substrate-tab,
	button.uvp-substrate-tab {
		padding: 8px 16px !important;
		font-size: 11px !important;
	}

	.uvp-thickness-pill,
	button.uvp-thickness-pill {
		padding: 7px 14px !important;
		font-size: 11px !important;
	}

	.uvp-spec-block-label,
	.uvp-spec-block-value {
		font-size: 12px;
	}
}

/* v4.3.2: Plugin-rendered family banner removed entirely. Banners are owned by
 * the Elementor Theme Builder templates (single uvp_product + archive uvp_series).
 * Series-only clean URLs 302-redirect to /series/<slug>/ to use that template. */

/* =========================================================================
 * v4.4.0 — Series Banner Overlay (tagline only, vertically centred)
 * ========================================================================= */

/* Force the Elementor section container AND column holding the banner to
 * vertically centre its content instead of the default bottom-alignment. */
.elementor-container:has(.uvp-series-banner-overlay) {
	align-items: center !important;
}
.elementor-widget-wrap:has(.uvp-series-banner-overlay) {
	align-content: center !important;
	align-items: center !important;
}

.uvp-series-banner-overlay {
	position: relative;
	padding: 0;
	max-width: 900px;
}

/* Subtle horizontal divider */
.uvp-banner-divider {
	width: 156px;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
	margin: 2.05rem 0 1.65rem;
}

/* Tagline — all white, left-aligned */
.uvp-banner-tagline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.32em;
	margin-bottom: 0;
}

/* v5.2.11 — Tagline must be clearly SUBORDINATE to the series name heading.
 * Reduced from 44px/400 → 20px/300 so the Elementor heading widget (series
 * name) is unmistakably the dominant text. Matches the user's mockup: big
 * bold series name on top, thin divider, small lightweight tagline below. */
.uvp-banner-tagline-1 {
	font-family: var(--uvp-font-display, 'Montserrat', sans-serif);
	font-size: clamp(28px, 3.15vw, 42px);
	font-weight: 300;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.2;
}

.uvp-banner-tagline-2 {
	font-family: var(--uvp-font-display, 'Montserrat', sans-serif);
	font-size: clamp(28px, 3.15vw, 42px);
	font-weight: 300;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.2;
}

/* v5.2.11 — On series archive pages (where [uvp_series_banner_overlay] is present),
 * boost the Elementor heading widget (series name) to be the dominant, bold text.
 * This matches the ecatalogue mockup: series name = big/bold/white, tagline = small/light.
 * Uses :has() to scope only when the overlay shortcode exists in the same section. */
.single-product-banner:has(.uvp-series-banner-overlay) .elementor-heading-title {
	/* v5.3.22 — Match SS1 (the default banner heading "Transforming soundscape").
	 * The theme registers Gotham as "gotham-light"; the old 'Gotham' stack matched
	 * no installed family and fell back to bold Helvetica/Arial (the "not vibing"
	 * look). Use the real family + weight 300 like SS1. */
	font-family: 'gotham-light', 'Gotham', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: clamp(40px, 5vw, 56px) !important;
	font-weight: 300 !important;
	color: #ffffff !important;
	letter-spacing: 0.01em;
	line-height: 1.1 !important;
	text-align: left !important;
	margin: 0 !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.single-product-banner:has(.uvp-series-banner-overlay) .elementor-widget-heading,
.single-product-banner:has(.uvp-series-banner-overlay) .elementor-widget-shortcode {
	text-align: left !important;
	margin-bottom: 0 !important;
}

/* Three-column spec grid — all white text */
.uvp-banner-specs {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0 2.5rem;
}

.uvp-banner-spec-col {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.uvp-banner-spec-label {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.4;
}

.uvp-banner-spec-value {
	font-size: 17px;
	font-weight: 400;
	color: var(--uvp-white, #fff);
	line-height: 1.35;
	white-space: nowrap;
}

/* Responsive: stack specs on narrow screens */
@media (max-width: 600px) {
	.uvp-series-banner-overlay {
		max-width: 100%;
	}

	.single-product-banner:has(.uvp-series-banner-overlay) .elementor-heading-title {
		font-size: 34px !important;
	}

	.uvp-banner-tagline-1,
	.uvp-banner-tagline-2 {
		font-size: 22px;
	}

	.uvp-banner-divider {
		width: 96px;
		margin: 1.25rem 0 1rem;
	}

	.uvp-banner-spec-label {
		font-size: 13px;
	}

	.uvp-banner-spec-value {
		font-size: 14px;
	}

	.uvp-banner-specs {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem 1.5rem;
	}
}

/* ============================================================
 * v4.4.5 / v4.4.6 — Mobile filter redesign (≤767px)
 * ------------------------------------------------------------
 * Drops the modal/drawer pattern in favor of an inline filter
 * section above the product grid:
 *   - No "Filter" toggle button (sidebar lives in page flow)
 *   - Background inherits page bg (var(--uvp-surface), transparent
 *     by default — so the sidebar visually merges with the page
 *     instead of painting a contrasting white block)
 *   - Position: static (NOT sticky)
 *   - Chips locked to 2-per-row so labels stay readable
 *   - Collapsible: the >> double-arrow toggle (v4.4.6) lets the
 *     user fold the filter section away, keeping just the REFINE
 *     header visible
 *
 * Drawer pattern is preserved for tablet (768–980px) where the
 * orange "Filter" button still makes sense.
 * ============================================================ */
@media (max-width: 767px) {

	/* No more "Filter" toggle button — sidebar lives in the page flow now. */
	.uvp-mobile-filter-toggle {
		display: none !important;
	}

	/* No more modal close button or backdrop — they're meaningless when the
	 * panel is inline. */
	.uvp-filter-mobile-close,
	.uvp-mobile-filter-backdrop {
		display: none !important;
	}

	/* Sidebar in the normal document flow, full width, inherits page bg. */
	.uvp-filter-panel {
		position: static;
		transform: none !important;
		width: 100%;
		max-width: 100%;
		max-height: none;
		background: var(--uvp-surface);  /* page bg — transparent by default */
		border-right: 0;
		border-bottom: 1px solid rgba(112, 112, 112, 0.18);
		box-shadow: none;
		padding: 1rem 1rem 1.25rem;
		margin: 0 0 1rem;
		z-index: auto;
		border-radius: 0;
	}

	/* The drawer's "open" state was a transform; no-op now. */
	.uvp-filter-panel.uvp-filter-panel-open {
		transform: none !important;
	}

	/* v4.4.6 — Show the collapse toggle on mobile (regardless of page type).
	 * The desktop-only `.uvp-filter-panel-on-detail .uvp-filter-collapse-toggle`
	 * rule keeps desktop listing pages from showing it. */
	.uvp-filter-collapse-toggle {
		display: flex;
	}

	/* v4.4.6 — Mobile collapsed state: keep the REFINE header visible so the
	 * user can see (and click) the toggle to re-expand. The legacy desktop
	 * collapsed rule hides the header (designed for the 40px-rail collapse),
	 * which on mobile would leave nothing to click. */
	.uvp-filter-panel.uvp-filter-panel-collapsed {
		padding: 0.75rem 1rem;
	}

	.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-header {
		display: flex;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Keep the toggle in the top-right of the collapsed panel on mobile
	 * (desktop centers it on the 40px rail — wrong placement for inline). */
	.uvp-filter-panel.uvp-filter-panel-collapsed .uvp-filter-collapse-toggle {
		margin: 0 0 0.5rem auto;
	}

	/* Override the desktop "40px sidebar rail" collapse layout — on mobile the
	 * grid is already single-column, and the data-sidebar-state attribute
	 * would otherwise force a 40px column. */
	.uvp-main-layout[data-sidebar-state="collapsed"] {
		grid-template-columns: 1fr;
	}

	/* The chip row — 2-column grid so every chip gets equal space and the
	 * labels stay readable. Filter button text is already small at 13px;
	 * wrapping to 3+ columns made the labels truncate. */
	.uvp-filter-chip-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Each chip fills its column — text centered for a balanced grid. */
	.uvp-filter-chip-row .uvp-chip {
		width: 100%;
		text-align: center;
		padding: 10px 8px;
		font-size: 13px;
		box-sizing: border-box;
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Tighter rhythm between filter sections inline. */
	.uvp-filter-divider {
		margin: 0.75rem 0;
	}

	.uvp-filter-header {
		margin-bottom: 0.75rem;
		padding-right: 0;
	}

	.uvp-filter-group-label {
		margin-bottom: 0.5rem;
	}
}

/* ============================================================
 * v5.0.0 — Meeting-feedback visual polish pass
 * ------------------------------------------------------------
 * Bundles a batch of fixes from the design review:
 *   1. Buttons (Order a Sample, Open Configurator, Inquire) →
 *      outline-only default, solid accent fill on HOVER (only)
 *   2. "Load more / Show less" swatch toggle → plain black text
 *      link (was an orange pill)
 *   3. Card breadcrumb → solution segment muted, series segment
 *      bolder (mirrors the page-top breadcrumb hierarchy)
 *   4. Card variant line → tighter, muted (it sits between the
 *      product name and the per-substrate NRC block and shouldn't
 *      out-shout either)
 *   5. Certifications strip → auto-fit grid (no more 2-column
 *      with a gaping middle), smaller logo cells, and the drop
 *      shadow behind the logos reduced to almost nothing
 *   6. Tabbed Downloads section → reduced padding/font sizes
 *      (was visually heavy on the page)
 *   7. Spec value cells → font-weight 400 (was inheriting too
 *      bold from the body text style)
 *   8. Mobile (≤767px): swatch grid switches to a smaller tile
 *      size so the grid doesn't dominate the viewport
 * ============================================================ */

/* --- 1. CTA buttons: outline default, solid accent on hover --- */
.uvp-btn-sample {
	background: transparent !important;
	color: var(--uvp-accent) !important;
	border: 1px solid var(--uvp-accent) !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uvp-btn-sample:hover,
.uvp-btn-sample:focus-visible {
	background: var(--uvp-accent) !important;
	color: #ffffff !important;
	border-color: var(--uvp-accent) !important;
}

.uvp-btn-sample:hover .uvp-btn-sample-arrow,
.uvp-btn-sample:focus-visible .uvp-btn-sample-arrow {
	color: #ffffff;
}

/* --- 2. "Load more / Show less" → plain black text link --- */
.uvp-show-all-swatches {
	background: transparent !important;
	color: var(--uvp-charcoal, #172E66) !important;
	border: 0 !important;
	padding: 6px 4px !important;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	border-radius: 0 !important;
}

.uvp-show-all-swatches:hover,
.uvp-show-all-swatches:focus-visible {
	background: transparent !important;
	color: var(--uvp-accent) !important;
	text-decoration: underline;
}

/* --- 3. Card breadcrumb shading --- */
.uvp-product-breadcrumb .uvp-bc-parent {
	color: var(--uvp-warm-mid, #707070);
	opacity: 0.7;
	font-weight: 400;
}

.uvp-product-breadcrumb .uvp-bc-sep {
	color: var(--uvp-warm-mid, #707070);
	opacity: 0.45;
	margin: 0 4px;
}

.uvp-product-breadcrumb .uvp-bc-current {
	color: var(--uvp-charcoal, #172E66);
	opacity: 1;
	font-weight: 500;
}

/* --- 4. Card variant line, slightly muted --- */
.uvp-card-variant {
	color: var(--uvp-warm-mid, #707070);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* --- 5. Certifications: ALL in one row, no shadows, tight spacing --- */
.uvp-cert-strip {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.uvp-cert-cell,
.uvp-cert-cell-link,
a.uvp-cert-cell-link {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
	padding: 4px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Nuclear: kill every shadow source on cert imagery (plugin, theme, plugin
 * media library defaults). The actual logo files may still carry baked-in
 * shadows — if these still appear after deploy, the source PNGs need to be
 * re-exported without shadow. */
.uvp-cert-cell img,
.uvp-cert-cell-link img,
.uvp-cert-strip img {
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	max-height: 60px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto !important;
}

.uvp-cert-cell-link:hover img,
.uvp-cert-cell-link:focus-visible img {
	transform: scale(1.05);
	filter: none !important;
}

/* --- 6. Tabbed Downloads — keep original horizontal padding (v5.0.1 fix) --- */
/* v5.0.0 mistakenly set padding:1.5rem 0 0 which collapsed the left/right
 * padding of the grey card. Restore the desktop padding (2rem 2.25rem from
 * the base rule) — only override TOP so the section sits a bit higher. */
.uvp-tabbed-downloads-section {
	padding-top: 1.5rem;
}

/* ============================================================
 * v5.1.0 — Featured Products grid ([uvp_featured_products])
 * ------------------------------------------------------------
 * Renders on the home page as a replacement for the legacy
 * WooCommerce Posts widget. 3-up grid on desktop, 2-up on
 * tablet, 1-up on mobile. Whole-card anchor with image, series
 * name (eyebrow), product name, and trailing arrow.
 * ============================================================ */
.uvp-featured-section {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 1rem 0;
}

/* Full-width featured row: bleed the section edge-to-edge so the cards scroll
   across the whole screen. First card aligns with the page content (~1200px). */
.uvp-featured-section .uvp-featured-grid {
	padding-left: max(20px, calc(50vw - 600px));
	padding-right: 20px;
	/* The grid is a scroll-snap container (scroll-snap-type: x mandatory) and the
	   cards snap-align to "start". Without this, mandatory snap pulls the first
	   card's edge to the scrollport start and EATS the leading padding-left, so
	   card #1 ends up clipped at the screen edge. scroll-padding-left insets the
	   snapport by the same amount, so the first card snaps to the content margin
	   instead of the edge — and every card thereafter snaps aligned to it too. */
	scroll-padding-left: max(20px, calc(50vw - 600px));
}

.uvp-featured-title {
	font-family: var(--uvp-font-heading, inherit);
	font-size: 28px;
	font-weight: 600;
	color: var(--uvp-charcoal, #172E66);
	margin: 0 0 1.5rem 0;
	letter-spacing: -0.01em;
}

.uvp-featured-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.uvp-featured-card {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit;
	background: var(--uvp-white, #ffffff);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(112, 112, 112, 0.10);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.uvp-featured-card:hover,
.uvp-featured-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--uvp-accent, #EC552A);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	color: inherit;
	text-decoration: none !important;
}

.uvp-featured-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uvp-featured-img-placeholder {
	color: var(--uvp-warm-mid, #707070);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.uvp-featured-meta {
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
}

.uvp-featured-series {
	color: var(--uvp-warm-mid, #707070);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important; /* v6.0.2 — no theme/Elementor link underline */
}

.uvp-featured-name {
	color: var(--uvp-charcoal, #172E66);
	font-size: 20px;
	font-weight: 500; /* v6.0.2 — medium (was 600 semibold) per Vish */
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-decoration: none !important; /* v6.0.2 — no theme/Elementor link underline */
}

.uvp-featured-arrow {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--uvp-accent-pale, #FDEDE5);
	color: var(--uvp-accent, #EC552A);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.uvp-featured-card:hover .uvp-featured-arrow {
	background: var(--uvp-accent, #EC552A);
	color: #ffffff;
	transform: translateX(2px);
}

/* Mobile — single column. */
@media (max-width: 600px) {
	.uvp-featured-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.uvp-featured-title {
		font-size: 22px;
	}
	.uvp-featured-name {
		font-size: 18px;
	}
}

/* Tablet — two-up. */
@media (min-width: 601px) and (max-width: 980px) {
	.uvp-featured-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

/* ============================================================
 * v5.0.2 — Configurable section heading size + color
 * ------------------------------------------------------------
 * Wires the two new plugin settings (section_heading_size,
 * section_heading_color) to the three section titles on the
 * single product page. Marked !important to win against themes
 * that paint generic h2 at 32–48px.
 * ============================================================ */
.uvp-detail-section-title,
.uvp-sustainability-title,
.uvp-tabbed-downloads-title,
.uvp-page .uvp-detail-section-title,
.uvp-page .uvp-sustainability-title,
.uvp-page .uvp-tabbed-downloads-title,
h2.uvp-detail-section-title,
h2.uvp-sustainability-title,
h2.uvp-tabbed-downloads-title {
	font-size: var(--uvp-section-heading-size, 20px) !important;
	color: var(--uvp-section-heading-color, #172E66) !important;
	line-height: 1.25 !important;
}

/* Match the responsive scale-downs to relative units so the per-viewport
 * overrides further up the file don't bypass the setting. The setting is
 * the canonical desktop value; mobile/tablet adjustments scale FROM it. */
@media (max-width: 980px) {
	.uvp-detail-section-title,
	.uvp-sustainability-title,
	.uvp-tabbed-downloads-title {
		font-size: calc(var(--uvp-section-heading-size, 20px) * 0.95) !important;
	}
}

@media (max-width: 600px) {
	.uvp-detail-section-title,
	.uvp-sustainability-title,
	.uvp-tabbed-downloads-title {
		font-size: calc(var(--uvp-section-heading-size, 20px) * 0.9) !important;
	}
}

.uvp-tabbed-downloads-title {
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

.uvp-tabbed-downloads-tab {
	font-size: 13px;
	padding: 10px 4px;
}

.uvp-tabbed-downloads-list {
	font-size: 14px;
}

.uvp-tabbed-downloads-item {
	padding: 8px 0;
}

/* Also reduce Certifications heading to match Downloads */
.uvp-sustainability-title {
	font-size: 1.6rem;
}

/* --- 7. Spec value font weight --- */
.uvp-spec-val,
.uvp-spec-val-multiline {
	font-weight: 400;
}

.uvp-spec-label {
	font-weight: 500;
}

/* --- 8. Mobile (≤767px): smaller swatch tiles --- */
@media (max-width: 767px) {
	.uvp-detail-swatch-grid {
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 6px !important;
	}
	.uvp-swatch-tile {
		min-height: 0;
	}

	/* Cert grid: 3 per row on phones instead of 2 — logos are small enough */
	.uvp-cert-strip {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
	}
	.uvp-cert-cell img {
		max-height: 54px;
	}

	/* Downloads tabs already wrap to multiple lines on mobile per v4.4.5 —
	 * just tighten the font and padding so the section doesn't dominate. */
	.uvp-tabbed-downloads-title {
		font-size: 1.4rem;
	}
}

/* ============================================================
 * v5.1.7 — Removed the v5.1.5 header-padding override block.
 *
 * The plugin was forcing padding-top / padding-bottom on the Elementor
 * header section (id 87e432e) to shrink the header to ~85 px. That's
 * Elementor's job, not ours. The replacement: edit section 87e432e
 * inside the header template (post 1237) → Advanced → Padding → Top 25,
 * Bottom 25 (desktop) for a ~100 px header. Tablet 20/20, mobile 18/18.
 * ============================================================ */

/* ============================================================
 * v5.1.5 — Card arrow refresh (orange filled circle + drop shadow)
 *
 * Match the approved card design (SS2): orange filled circle, white arrow,
 * subtle drop shadow under the chip so it lifts off the card background.
 * The arrow stays a clean diagonal (↗) inside the chip. Hover deepens the
 * shadow and nudges right.
 *
 * Applies to BOTH product cards and series cards because they share the
 * `.uvp-card-arrow` chip class. ============================================================ */
/* v5.1.17 — Card arrow chip: transparent w/ orange border + orange arrow in
 * normal state, solid orange fill w/ white arrow on hover (of the card OR
 * the chip itself). Mirrors the Order a Sample / Visual Configurator pill
 * aesthetic so the catalogue feels consistent. */
.uvp-card-arrow {
	width: 36px !important;
	height: 36px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--uvp-accent, #ee5a24) !important;
	border: 2px solid var(--uvp-accent, #ee5a24) !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.uvp-card-arrow svg {
	width: 16px;
	height: 16px;
}

.uvp-product-card:hover .uvp-card-arrow,
.uvp-series-card:hover .uvp-card-arrow,
.uvp-card-arrow:hover,
.uvp-card-arrow:focus-visible {
	background: var(--uvp-accent, #ee5a24) !important;
	background-color: var(--uvp-accent, #ee5a24) !important;
	color: #ffffff !important;
	border-color: var(--uvp-accent, #ee5a24) !important;
	transform: translateX(2px);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.10),
		0 8px 18px rgba(238, 90, 36, 0.25) !important;
}

/* ============================================================
 * v5.1.5 — Button arrow refresh (no circle, hover recolors)
 *
 * Previously: ↗ glyph sat inside a white circular chip with orange arrow.
 * New: bare arrow rendered in the button's text color, with no circle
 * background or border. On hover (where button bg fills orange and text
 * goes white), the arrow follows — recolored to white via currentColor.
 *
 * Applies to ALL `.uvp-btn-sample-arrow` instances (Order a Sample,
 * Open Visual Configurator, Inquire) plus the featured-card hover arrow.
 * ============================================================ */
.uvp-btn-sample-arrow {
	background: transparent !important;
	color: currentColor !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	margin-left: 4px;
}

.uvp-btn-sample-arrow svg {
	width: 14px !important;
	height: 14px !important;
	stroke-width: 2;
}

.uvp-btn-sample:hover .uvp-btn-sample-arrow,
.uvp-btn-sample:focus-visible .uvp-btn-sample-arrow {
	background: transparent !important;
	color: currentColor !important;
}

/* ============================================================
 * v5.1.6 — Flat downloads grid
 *
 * Replaces the legacy tabbed downloads. Up to 12 Dropbox-linked buttons in
 * a 3-col × 4-row grid on desktop, 2-col on tablet, 1-col on phone. Each
 * button mirrors the .uvp-btn-sample shape (label left, bare ↗ arrow right,
 * no circle around the arrow, hover fills orange and recolors arrow to
 * cream via currentColor).
 * ============================================================ */
.uvp-downloads-section.uvp-downloads-flat {
	margin: 2rem 0;
}

/* v5.1.12 — Heading: light weight (400). Selector specificity raised
 * to beat theme h3 (Astra forces 700 on h3 globally). The h3.<class>
 * variant matches at 0,2,1 which trumps Astra's body h3 at 0,0,2. */
.uvp-downloads-section.uvp-downloads-flat .uvp-downloads-heading,
.uvp-downloads-section.uvp-downloads-flat .uvp-section-heading,
h3.uvp-downloads-heading,
h3.uvp-section-heading.uvp-downloads-heading {
	font-size: var(--uvp-section-heading-size, 1.25rem) !important;
	color: var(--uvp-section-heading-color, #172E66) !important;
	font-weight: 400 !important;
	margin: 0 0 1rem !important;
	line-height: 1.3 !important;
}

/* v5.1.12 — Section bg transparent so the download buttons inherit the
 * surrounding page bg the same way Order a Sample / Visual Configurator
 * do. No more peach absorption from a parent card. */
.uvp-downloads-section.uvp-downloads-flat {
	background: transparent !important;
	background-color: transparent !important;
}

.uvp-downloads-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

/* v5.1.12 — EXACT match to .uvp-btn-sample (Order a Sample / Open Visual
 * Configurator) spec. Same padding (10 / 20), same font-size (12), same
 * letter-spacing, same 2 px border, transparent background. */
.uvp-download-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 10px 20px !important;
	min-width: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--uvp-accent, #ee5a24) !important;
	border: 2px solid var(--uvp-accent, #ee5a24) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	font-family: inherit !important;
	transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.uvp-download-btn-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uvp-download-btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--uvp-accent, #ee5a24);
	flex-shrink: 0;
	transition: color 0.18s ease;
}

.uvp-download-btn-arrow svg {
	display: block;
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

/* v5.1.11 — Hover/focus: solid orange fill, white text + arrow. Mirrors the
 * "Open Visual Configurator" hovered state the user provided in screenshots. */
.uvp-download-btn:hover,
.uvp-download-btn:focus-visible {
	background: var(--uvp-accent, #ee5a24) !important;
	color: #ffffff !important;
	border-color: var(--uvp-accent, #ee5a24) !important;
}

.uvp-download-btn:hover .uvp-download-btn-arrow,
.uvp-download-btn:focus-visible .uvp-download-btn-arrow {
	color: #ffffff;
}

@media (max-width: 980px) {
	.uvp-downloads-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.uvp-downloads-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.uvp-download-btn {
		padding: 14px 18px;
	}
}

/* ============================================================================
 * v5.1.13 — UNIFIED SECTION HEADINGS
 * Product Specifications (.uvp-detail-section-title, h2),
 * Certifications        (.uvp-sustainability-title, h2),
 * Downloads             (.uvp-section-heading.uvp-downloads-heading, h3),
 * all render IDENTICALLY: same font-family, size, weight, color, line-height,
 * letter-spacing, margin. !important here because each heading class already
 * has its own legacy rule earlier in this file with different values.
 * ========================================================================== */
.uvp-detail-section-title,
.uvp-sustainability-title,
.uvp-section-heading,
.uvp-downloads-heading,
.uvp-tabbed-downloads-title,
h2.uvp-detail-section-title,
h2.uvp-sustainability-title,
h2.uvp-tabbed-downloads-title,
h3.uvp-section-heading,
h3.uvp-downloads-heading,
.uvp-page .uvp-detail-section-title,
.uvp-page .uvp-sustainability-title,
.uvp-page .uvp-tabbed-downloads-title,
.uvp-page .uvp-section-heading,
.uvp-page .uvp-downloads-heading {
	/* v5.3.20 — added .uvp-tabbed-downloads-title so the "Downloads" heading
	 * matches "Product Specifications" / "Certifications" exactly (it was using
	 * its own font/weight because the current class wasn't in this unified set). */
	font-family: inherit !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	color: var(--uvp-charcoal, #172E66) !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	text-align: left !important;
	display: block !important;
}

/* v5.1.13 — Series banner overlay: enforce Gotham. Some browsers fall through
 * to a sans-serif system font because the theme's @font-face declarations
 * scope to specific selectors. Forcing inherit + an explicit Gotham stack
 * with a final system fallback so we never end up on Arial. */
.uvp-series-banner-overlay,
.uvp-series-banner-overlay *,
.uvp-banner-divider,
.uvp-banner-tagline,
.uvp-banner-tagline-1,
.uvp-banner-tagline-2 {
	/* v5.3.22 — Lead with the theme's real registered Gotham families
	 * (gotham-light / gotham-book) so banner text never falls back to Arial. */
	font-family: 'gotham-light', 'gotham-book', 'Gotham', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	letter-spacing: 0.01em;
}

/* v5.1.13 — Top breadcrumb: every segment same font-size (12 px, the smaller
 * one the user approved). Previously .uvp-bc-current inherited size but some
 * theme rules can bump <a> font-size — pinning explicitly here. */
.uvp-breadcrumb,
.uvp-breadcrumb a,
.uvp-breadcrumb span,
.uvp-breadcrumb .uvp-bc-sep,
.uvp-breadcrumb .uvp-bc-current,
.uvp-breadcrumb span:last-child,
.uvp-page .uvp-breadcrumb,
.uvp-page .uvp-breadcrumb a,
.uvp-page .uvp-breadcrumb span {
	font-size: 12px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	font-family: inherit !important;
}

.uvp-breadcrumb .uvp-bc-current,
.uvp-breadcrumb span:last-child {
	font-weight: 500 !important;
}

/* v5.1.13 — Per-substrate "Download Detailed Data Sheet" CTA row inside each
 * substrate tab panel. Uses .uvp-btn-sample styling for consistency with
 * Order a Sample / Open Visual Configurator. The row aligns the button
 * to the left below the spec table. */
.uvp-substrate-cta-row {
	display: flex;
	flex-wrap: wrap;            /* v5.3.27 — per-variant data-sheet buttons sit side by side when they fit, stack when they don't */
	align-items: center;
	gap: 12px;
	margin-top: 1rem;
}

.uvp-btn-data-sheet {
	/* inherits everything from .uvp-btn-sample */
}

/* v5.1.14 — DEFAULT LISTING BANNER
 * Shown above the application bar on the unfiltered /products/ view.
 * Background image is the admin-uploaded ombre (or whatever they pick);
 * heading text overlays it centered. Hides on series archive / any
 * filter via the PHP show_default_banner gate, not via CSS, so this
 * block trusts its render.
 *
 * v5.1.20 — Banner now renders even without an uploaded image. The
 * fallback gradient (navy→charcoal) ensures the white text overlay
 * is always readable. Admin image, when present, covers the gradient. */
.uvp-default-banner {
	position: relative;
	width: 100%;
	min-height: 220px;
	background-color: #231F20;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 2rem;
	margin: 0 0 1rem;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

/* When no admin image: dark gradient gives the same ombre feel. */
.uvp-default-banner.uvp-listing-banner-no-image {
	background: linear-gradient(135deg, #231F20 0%, #1A1718 40%, #3A3433 100%);
}

.uvp-default-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
	pointer-events: none;
}

.uvp-default-banner-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.uvp-default-banner-heading {
	font-family: 'Gotham', 'Gotham SSm', 'Gotham Book', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 500;
	color: #ffffff;
	letter-spacing: 0.02em;
	margin: 0;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

@media (max-width: 600px) {
	.uvp-default-banner {
		min-height: 160px;
		padding: 1.5rem 1rem;
	}
	.uvp-default-banner-heading {
		font-size: 26px;
	}
}

/* v5.1.15 — Banner subheading (small descriptor above the main heading). */
/* ============================================================
 * v5.2.8 — Dynamic series banner on Elementor listing page
 * ------------------------------------------------------------
 * When the user selects a single series via the AJAX filter on
 * /products/, updateElementorBanner() injects structured HTML
 * inside the Elementor heading widget and adds the class
 * .uvp-listing-series-active to the banner section. These rules
 * style the injected spans to match the ecatalogue layout:
 *   - Series name: bold, large, white
 *   - Thin divider line
 *   - Tagline: smaller, lightweight, white
 * ============================================================ */
/* v5.2.10 — Force the heading widget to flex-column so the series name,
 * divider, and tagline stack vertically. Left-aligned to match the
 * ecatalogue archive banner. */
.new-inner-banner-section.uvp-listing-series-active .elementor-heading-title {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	text-align: left !important;
}

.uvp-dyn-series-name {
	/* v5.3.22 — Match SS1 (the default banner heading "Transforming soundscape").
	 * The theme registers Gotham as "gotham-light"; the old 'Gotham' stack matched
	 * no installed family and fell back to bold Helvetica/Arial (the "not vibing"
	 * look). Use the real family + weight 300 like SS1. */
	font-family: 'gotham-light', 'Gotham', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: clamp(40px, 5vw, 56px) !important;
	font-weight: 300 !important;
	color: #ffffff !important;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.uvp-dyn-divider {
	display: block;
	width: 60px;
	height: 2px;
	background: rgba(255, 255, 255, 0.6);
	margin: 1rem 0 0.85rem;
}

.uvp-dyn-series-tagline {
	/* v5.3.22 — Match SS1 subtext (the theme's "gotham-book", weight 300). */
	font-family: 'gotham-book', 'gotham-light', 'Gotham', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: clamp(16px, 2.2vw, 24px) !important;
	font-weight: 300 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
	.uvp-dyn-series-name {
		font-size: 30px !important;
	}
	.uvp-dyn-series-tagline {
		font-size: 15px !important;
	}
	.uvp-dyn-divider {
		width: 40px;
		margin: 0.6rem 0;
	}
}

.uvp-default-banner-subheading {
	font-family: 'Gotham', 'Gotham SSm', 'Gotham Book', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 0.4rem;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ============================================================================
 * v5.1.15 — UNIFIED PRODUCT CARD TYPOGRAPHY
 * Variant chips and per-substrate NRC lines must render in the SAME font,
 * size, color, and (light) weight. Per user: the bold/dark token is reserved
 * for the active filter match (see .uvp-card-variant-chip-active below).
 * Tighter line gap between PET and PET WOOL NRC rows.
 * ========================================================================== */
.uvp-card-variant,
.uvp-card-variant-chip,
.uvp-card-variant-sep,
.uvp-card-nrc-line,
.uvp-card-nrc-sub-label,
.uvp-card-nrc-sub-value,
.uvp-card-nrc-sep,
.uvp-page .uvp-card-variant,
.uvp-page .uvp-card-variant-chip,
.uvp-page .uvp-card-nrc-line,
.uvp-page .uvp-card-nrc-sub-label,
.uvp-page .uvp-card-nrc-sub-value {
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--uvp-warm-mid, #707070) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.4 !important;
}

.uvp-card-variant {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 6px 0 8px;
}

.uvp-card-variant-sep {
	opacity: 0.45;
}

/* v5.1.15 — Substrate NRC lines: stack with TIGHT spacing (was loose before). */
.uvp-card-nrc-substrates {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
}

.uvp-card-nrc-line {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/* v5.1.15 — ACTIVE FILTER HIGHLIGHT on the card.
 * When a Variant filter is active, the matching variant chip on the card
 * renders bolder and darker. Non-matching variants stay in the light weight
 * (defined above) so the full variant set is still visible. */
.uvp-card-variant-chip-active,
.uvp-page .uvp-card-variant-chip-active {
	font-weight: 600 !important;
	color: var(--uvp-charcoal, #172E66) !important;
}

/* v5.1.21 — NRC HIGHLIGHT on the card.
 * v5.2.4: Per-LINE NRC highlight. Only the substrate line whose max NRC
 * falls in the active filter band is highlighted — not the entire section. */
.uvp-card-nrc-line-active .uvp-card-nrc-sub-label,
.uvp-card-nrc-line-active .uvp-card-nrc-sub-value,
.uvp-page .uvp-card-nrc-line-active .uvp-card-nrc-sub-label,
.uvp-page .uvp-card-nrc-line-active .uvp-card-nrc-sub-value {
	font-weight: 600 !important;
	color: var(--uvp-charcoal, #172E66) !important;
}
.uvp-card-nrc-line-active .uvp-card-nrc-sub-value,
.uvp-page .uvp-card-nrc-line-active .uvp-card-nrc-sub-value {
	color: var(--uvp-accent, #E8521F) !important;
}

/* v6.1.2 — Product-card NRC lines on the narrow desktop 3-up grid.
 * Previously "PET – NRC – 0.45 – 0.7 (Direct Fix)" was a single non-wrapping
 * flex row, so on narrow cards the value text crammed into a tiny column and
 * collided with the corner arrow. Now each line can wrap, and the value is
 * kept as one non-breaking unit so it drops to its own line as a whole when it
 * doesn't fit beside the label — giving a clean two-line read:
 *     PET – NRC –
 *     0.45 – 0.7 (Direct Fix)
 * Wider mobile/tablet cards still fit on one line (wrap only kicks in when
 * needed). The right padding reserves space so a wrapped value never sits
 * under the absolutely-positioned .uvp-card-footer arrow. */
.uvp-card-nrc-line {
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 0;
}
.uvp-card-nrc-sub-label,
.uvp-card-nrc-sub-value,
.uvp-card-nrc-sep {
	white-space: nowrap;
}
.uvp-card-nrc-substrates {
	padding-right: 52px;
}

/* v6.1.3 — "NRC" promoted to a single small heading above the substrate rows
 * (it used to repeat inline on every line, which read cramped). Each row now
 * reads "<substrate> – <range>", e.g. "PET – 0.45 – 0.7 (Direct Fix)". */
.uvp-card-nrc-heading {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uvp-warm-mid, #707070);
	margin-bottom: 3px;
}

/* ============================================================================
 * v5.1.15 — NRC FILTER CAVEAT
 * Small note rendered directly under the NRC Range chip row in the filter
 * sidebar. Explains the headline band is Direct Fix and performance can be
 * tuned higher with backing/airgap/infill.
 * ========================================================================== */
.uvp-filter-caveat {
	font-size: 11px;
	color: var(--uvp-warm-mid, #707070);
	margin: 6px 0 0;
	padding: 6px 8px;
	background: rgba(112, 112, 112, 0.06);
	border-left: 2px solid var(--uvp-accent, #ee5a24);
	border-radius: 0 4px 4px 0;
	line-height: 1.4;
	font-weight: 400;
}

/* ============================================================================
 * v5.1.16 — TASK 4: Certifications strip wraps to 2 rows.
 * Cell flex calc was sized to 5-per-row but with 10 cells they were rendering
 * in 1 row (too tight, too small). Switch to grid with explicit 5 columns so
 * 10 logos break into 5+5. min-height keeps logos legible.
 * ========================================================================== */
/* v5.3.17: Certifications — bigger logos, evenly distributed. Previous build
 * clustered fixed 168px columns to the left (justify-content:start), leaving a
 * dead gap on the right — looked unbalanced. Now 5 EQUAL columns span the full
 * strip width so the logos are spaced with even rhythm, each centred in its
 * cell, and the logo cap is raised to 128px (an earlier rule pins images at
 * 60px !important, so these use !important to win). 10 certs → 5 + 5. */
.uvp-cert-strip {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	column-gap: 20px !important;
	row-gap: 48px !important;
	align-items: center !important;
	justify-items: center !important;
}

.uvp-cert-cell {
	flex: none !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.uvp-cert-cell img {
	max-height: 128px !important;
	max-width: 100% !important;
}

@media (max-width: 1024px) {
	.uvp-cert-strip {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.uvp-cert-cell img {
		max-height: 112px !important;
	}
}

@media (max-width: 720px) {
	.uvp-cert-strip {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.uvp-cert-cell img {
		max-height: 100px !important;
	}
}

@media (max-width: 480px) {
	.uvp-cert-strip {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.uvp-cert-cell img {
		max-height: 92px !important;
	}
}

/* ============================================================================
 * v5.1.16 — TASK 1: Swatch tile shows code label on hover, no hero swap.
 * Tile relative positioning to anchor the absolute label; label fades in on
 * hover/focus. Label sits inside the tile so users see the swatch identifier
 * without forcing a hero image swap.
 * ========================================================================== */
.uvp-swatch-tile {
	position: relative;
	overflow: hidden;
}

.uvp-swatch-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4px 6px;
	background: rgba(23, 46, 102, 0.86);
	color: #ffffff !important;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uvp-swatch-tile:hover .uvp-swatch-tile-label,
.uvp-swatch-tile:focus-within .uvp-swatch-tile-label,
.uvp-swatch-tile.is-active .uvp-swatch-tile-label {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================================
 * v5.1.16 — TASK 2: Product card "Available in N colourways" line.
 * Matches the reference typography from the Wave Tile card: medium grey,
 * regular weight, comfortable spacing above. Sits below the variant chips
 * and above the NRC lines.
 * ========================================================================== */
.uvp-card-colourways {
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	color: var(--uvp-warm-mid, #707070);
	margin: 6px 0 8px;
	line-height: 1.4;
}

/* ============================================================================
 * v5.1.16 — TASK 3: Home page featured products → horizontal scroll.
 * Wraps the featured grid in a horizontal flex/overflow row so users can
 * swipe/scroll left-right on any device. Cards retain their fixed width so
 * the row actually overflows; otherwise grid would just shrink them.
 * ========================================================================== */
.uvp-featured-products .uvp-product-grid,
.uvp-featured-products-grid,
.uvp-featured-grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 20px;
	padding: 8px 4px 16px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.uvp-featured-products .uvp-product-grid > *,
.uvp-featured-products-grid > *,
.uvp-featured-grid > * {
	flex: 0 0 320px;
	max-width: 320px;
	scroll-snap-align: start;
}

.uvp-featured-products .uvp-product-grid::-webkit-scrollbar,
.uvp-featured-products-grid::-webkit-scrollbar,
.uvp-featured-grid::-webkit-scrollbar {
	height: 6px;
}

.uvp-featured-products .uvp-product-grid::-webkit-scrollbar-thumb,
.uvp-featured-products-grid::-webkit-scrollbar-thumb,
.uvp-featured-grid::-webkit-scrollbar-thumb {
	background: rgba(112, 112, 112, 0.25);
	border-radius: 3px;
}

@media (max-width: 600px) {
	.uvp-featured-products .uvp-product-grid > *,
	.uvp-featured-products-grid > *,
	.uvp-featured-grid > * {
		flex: 0 0 260px;
		max-width: 260px;
	}
}