:root {
	/* HEW neutral gray palette — replaces all pure-white surfaces. */
	--hew-bg:            #F5F6F7; /* page bg */
	--hew-surface:       #F2F2F2; /* cards, panels, controls */
	--hew-surface-elev:  #F8F8F8; /* near-white – use sparingly for floats */
	--hew-surface-deep:  #D6D6D6; /* deeper section band */
	--hew-border:        #C8C8C8;
	--hew-border-soft:   #DCDCDC;
	--hew-text:          #262626;
	--hew-text-muted:    #6B6B6B;
	--hew-accent:        #0079C1;
	--hew-accent-dark:   #005F99;
	--hew-accent-tint:   rgba(0,121,193,0.08);

	--kendo-color-primary:        var(--hew-accent);
	--kendo-color-on-app-surface: var(--hew-text);
	--kendo-color-app-surface:    var(--hew-bg);
	--kendo-color-base:           var(--hew-surface);
	--kendo-color-base-hover:     var(--hew-border-soft);
	--kendo-color-base-active:    var(--hew-border);
}

html {
	scrollbar-gutter: stable;
	background: var(--hew-bg);
}

body {
	font-family: "proxima-nova", sans-serif;
	padding-top: 65px;
	background: var(--hew-bg);
	color: var(--hew-text);
	--kendo-color-on-app-surface: var(--hew-text);
}

[class*=block-grid-]{display:flex;flex-wrap:wrap;margin:0 -7.5px;padding:0}.block-grid-item{display:inline;float:left;height:auto;list-style:none;margin:0;padding:7.5px}@media (min-width:0){.block-grid-xs-1>.block-grid-item{align-items:center;justify-content:center;width:100%}.block-grid-xs-2>.block-grid-item{align-items:center;justify-content:center;width:50%}.block-grid-xs-3>.block-grid-item{align-items:center;justify-content:center;width:33.3333333333%}.block-grid-xs-4>.block-grid-item{align-items:center;justify-content:center;width:25%}.block-grid-xs-5>.block-grid-item{align-items:center;justify-content:center;width:20%}.block-grid-xs-6>.block-grid-item{align-items:center;justify-content:center;width:16.6666666667%}.block-grid-xs-7>.block-grid-item{align-items:center;justify-content:center;width:14.2857142857%}.block-grid-xs-8>.block-grid-item{align-items:center;justify-content:center;width:12.5%}.block-grid-xs-9>.block-grid-item{align-items:center;justify-content:center;width:11.1111111111%}.block-grid-xs-10>.block-grid-item{align-items:center;justify-content:center;width:10%}.block-grid-xs-11>.block-grid-item{align-items:center;justify-content:center;width:9.0909090909%}.block-grid-xs-12>.block-grid-item{align-items:center;justify-content:center;width:8.3333333333%}}@media (min-width:576px){.block-grid-sm-1>.block-grid-item{align-items:center;justify-content:center;width:100%}.block-grid-sm-2>.block-grid-item{align-items:center;justify-content:center;width:50%}.block-grid-sm-3>.block-grid-item{align-items:center;justify-content:center;width:33.3333333333%}.block-grid-sm-4>.block-grid-item{align-items:center;justify-content:center;width:25%}.block-grid-sm-5>.block-grid-item{align-items:center;justify-content:center;width:20%}.block-grid-sm-6>.block-grid-item{align-items:center;justify-content:center;width:16.6666666667%}.block-grid-sm-7>.block-grid-item{align-items:center;justify-content:center;width:14.2857142857%}.block-grid-sm-8>.block-grid-item{align-items:center;justify-content:center;width:12.5%}.block-grid-sm-9>.block-grid-item{align-items:center;justify-content:center;width:11.1111111111%}.block-grid-sm-10>.block-grid-item{align-items:center;justify-content:center;width:10%}.block-grid-sm-11>.block-grid-item{align-items:center;justify-content:center;width:9.0909090909%}.block-grid-sm-12>.block-grid-item{align-items:center;justify-content:center;width:8.3333333333%}}@media (min-width:768px){.block-grid-md-1>.block-grid-item{align-items:center;justify-content:center;width:100%}.block-grid-md-2>.block-grid-item{align-items:center;justify-content:center;width:50%}.block-grid-md-3>.block-grid-item{align-items:center;justify-content:center;width:33.3333333333%}.block-grid-md-4>.block-grid-item{align-items:center;justify-content:center;width:25%}.block-grid-md-5>.block-grid-item{align-items:center;justify-content:center;width:20%}.block-grid-md-6>.block-grid-item{align-items:center;justify-content:center;width:16.6666666667%}.block-grid-md-7>.block-grid-item{align-items:center;justify-content:center;width:14.2857142857%}.block-grid-md-8>.block-grid-item{align-items:center;justify-content:center;width:12.5%}.block-grid-md-9>.block-grid-item{align-items:center;justify-content:center;width:11.1111111111%}.block-grid-md-10>.block-grid-item{align-items:center;justify-content:center;width:10%}.block-grid-md-11>.block-grid-item{align-items:center;justify-content:center;width:9.0909090909%}.block-grid-md-12>.block-grid-item{align-items:center;justify-content:center;width:8.3333333333%}}@media (min-width:992px){.block-grid-lg-1>.block-grid-item{align-items:center;justify-content:center;width:100%}.block-grid-lg-2>.block-grid-item{align-items:center;justify-content:center;width:50%}.block-grid-lg-3>.block-grid-item{align-items:center;justify-content:center;width:33.3333333333%}.block-grid-lg-4>.block-grid-item{align-items:center;justify-content:center;width:25%}.block-grid-lg-5>.block-grid-item{align-items:center;justify-content:center;width:20%}.block-grid-lg-6>.block-grid-item{align-items:center;justify-content:center;width:16.6666666667%}.block-grid-lg-7>.block-grid-item{align-items:center;justify-content:center;width:14.2857142857%}.block-grid-lg-8>.block-grid-item{align-items:center;justify-content:center;width:12.5%}.block-grid-lg-9>.block-grid-item{align-items:center;justify-content:center;width:11.1111111111%}.block-grid-lg-10>.block-grid-item{align-items:center;justify-content:center;width:10%}.block-grid-lg-11>.block-grid-item{align-items:center;justify-content:center;width:9.0909090909%}.block-grid-lg-12>.block-grid-item{align-items:center;justify-content:center;width:8.3333333333%}}@media (min-width:1200px){.block-grid-xl-1>.block-grid-item{align-items:center;justify-content:center;width:100%}.block-grid-xl-2>.block-grid-item{align-items:center;justify-content:center;width:50%}.block-grid-xl-3>.block-grid-item{align-items:center;justify-content:center;width:33.3333333333%}.block-grid-xl-4>.block-grid-item{align-items:center;justify-content:center;width:25%}.block-grid-xl-5>.block-grid-item{align-items:center;justify-content:center;width:20%}.block-grid-xl-6>.block-grid-item{align-items:center;justify-content:center;width:16.6666666667%}.block-grid-xl-7>.block-grid-item{align-items:center;justify-content:center;width:14.2857142857%}.block-grid-xl-8>.block-grid-item{align-items:center;justify-content:center;width:12.5%}.block-grid-xl-9>.block-grid-item{align-items:center;justify-content:center;width:11.1111111111%}.block-grid-xl-10>.block-grid-item{align-items:center;justify-content:center;width:10%}.block-grid-xl-11>.block-grid-item{align-items:center;justify-content:center;width:9.0909090909%}.block-grid-xl-12>.block-grid-item{align-items:center;justify-content:center;width:8.3333333333%}}@media (min-width:1800px){.block-grid-spaced .block-grid-item{padding:1.125rem}}

@media(min-width: 1800px) {
	.container-xxxl {
		max-width: 1650px;
	}
}

#interactiveList .container.container-xxxl,
#quickShipGridWrapper .container.container-xxxl,
#priceUpdatesReport .container.container-xxxl {
	background: transparent;
	box-shadow: none;
	clip-path: none;
	padding-top: 0;
	padding-bottom: 3rem;
}

.k-listview-content > .k-selected {
	background-color: #0079c1;
	border-color: #0079c1;
	color: #fff;
}
.grid-list .k-listview-content > .k-selected {
	background-color: transparent;
	border-color: transparent;
}

.k-animation-container .k-hover, .k-animation-container .k-selected, .k-animation-container .k-selected:hover {
	background-color: #0079c1;
	color: #fff;
}

.k-list-item-text {
	width: 100%;
}

.field-validation-error {
	color: red !important;
}
.field-validation-valid {
	display: none;
}

input.input-validation-error {
	border: 1px solid #b94a48;
}
input[type=checkbox].input-validation-error {
	border: 0 none;
}

.validation-summary-errors {
	color: #b94a48;
}
.validation-summary-valid {
	display: none;
}

#navbar {
	flex-wrap: wrap !important;
	background-color: #fff !important;
	min-height: 65px;
	padding-bottom: 0;
}
#navbar > .container {
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
}
#navbar .navbar-toggler {
	border-color: var(--hew-border);
}
#navbar #navbar-title {
	flex-shrink: 0;
	margin-right: 0;
	display: flex;
	align-items: center;
}
#navbar .title {
	font-family: "proxima-nova", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 4px 0;
	padding-left: 0.75rem;
	line-height: 1;
}
#navbar .title.title-product {
	color: var(--hew-accent);
	padding-left: 0;
	padding-right: 0.75rem;
}
#navbar #searchBoxLoading {
	background: var(--hew-surface);
	border-radius: 8px;
	padding: 0 12px;
	width: 380px;
	height: 36px;
	align-items: center;
	gap: 8px;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}
#navbar #searchBoxLoading:focus-within {
	background: var(--hew-surface-elev);
	box-shadow: 0 0 0 2px rgba(0,121,193,0.18);
}
/* RepNet-style user pill — lives on the breadcrumb row, right-aligned (under the search). */
#breadcrumbBar .breadcrumbRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
#breadcrumbBar .breadcrumbRow .myBreadcrumb {
	flex: 1;
	min-width: 0;
}
#breadcrumbBar .userBtnRow {
	padding-bottom: 8px; /* visually aligns with the breadcrumbs' 10px bottom padding */
	flex-shrink: 0;
}
#breadcrumbBar .user-title-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 14px 3px 4px;
	border: 1px solid var(--hew-border);
	border-radius: 9999px;
	background: #fff;
	color: var(--hew-text, #333);
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#breadcrumbBar .user-title-btn:hover {
	background: var(--hew-surface);
	border-color: var(--hew-border);
}
#breadcrumbBar .user-title-btn .user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hew-text-muted);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}
#breadcrumbBar .user-title-btn.logged-in .user-avatar {
	background: var(--hew-accent);
}
#breadcrumbBar .user-title-btn.logged-in .user-email {
	color: var(--hew-accent);
}
/* Employees get dark green; agency stays accent blue. */
#breadcrumbBar .user-title-btn.logged-in.is-employee .user-avatar {
	background: #146c43;
}
#breadcrumbBar .user-title-btn.logged-in.is-employee .user-email {
	color: #146c43;
}
/* Anonymous: icon-only circular chip (label is empty; tooltip still offers "Login"). */
#breadcrumbBar .user-title-btn:not(.logged-in) {
	padding: 3px;
}
#breadcrumbBar .user-title-btn .user-email:empty {
	display: none;
}
#breadcrumbBar .user-title-btn .user-email {
	white-space: nowrap;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#navbar #searchBoxLoading .searchBoxIcon {
	color: var(--hew-text-muted);
	font-size: 13px;
	flex-shrink: 0;
}
#navbar #searchBox {
	border: 0;
	background: transparent;
	height: 30px;
	border-radius: 0;
	padding: 0;
	width: 100%;
	font-size: 13px;
	color: var(--hew-text);
}
#navbar #searchBox::placeholder {
	color: var(--hew-text-muted);
}
#navbar #searchBoxLoading .k-autocomplete {
	background: transparent;
	border: 0;
	box-shadow: none;
	flex: 1;
	min-width: 0;
}
#navbar #searchBoxLoading .k-input-inner {
	background: transparent;
	color: var(--hew-text);
	font-size: 13px;
	padding: 0;
}
#navbar #searchBoxLoading .k-input-inner::placeholder {
	color: var(--hew-text-muted);
}
#navbar .searchBoxSubmit {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--hew-text-muted);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#navbar .searchBoxSubmit:hover {
	color: var(--hew-accent);
}
#navbar #userIconBtn {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: var(--hew-surface);
	color: var(--hew-text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}
#navbar #userIconBtn:hover {
	background: var(--hew-accent-tint);
	color: var(--hew-accent);
}
#navbar #navbarMenu {
	font-weight: 600;
	align-items: center;
}
#navbar #navbarMenu #brandListView {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: auto;
}
@media(max-width: 1650px) {
	#navbar #searchBox {
		width: auto;
	}
	#navbar #navbarMenu #brandListView {
		gap: 0.15rem;
	}
}
@media (max-width: 1799.98px) {
	#navbar .title {
		font-size: 1.4rem;
		margin-top: 4px;
	}
	#navbar .brandButton {
		padding: 7px 14px;
	}
}
@media (max-width: 1499.98px) {
	#navbar .title {
		font-size: 1.15rem;
	}
	#navbar #searchBoxLoading {
		width: 350px;
	}
	#navbar .brandButton {
		padding: 7px 10px;
	}
}
@media (max-width: 1399.98px) {
	#navbar .title {
		font-size: 1rem;
	}
	#navbar #searchBoxLoading {
		width: 310px;
	}
	#navbar .brandButton {
		padding: 7px 7px;
	}
}
@media (max-width: 1199.98px) {
	#navbar #navbarMenu #brandListView {
		position: static;
		transform: none;
		gap: 0.25rem;
	}
}
@media (max-width: 991.98px) {
	#navbar #searchBox, #navbar #searchBoxLoading .k-autocomplete, #searchBoxLoading, #searchBoxLoading .k-autocomplete {
		width: 100%;
	}
	#navbar #navbarMenu {
		width: 100%;
		margin-top: 0.5rem;
	}
	#navbar #navbarMenu #brandListView {
		flex-direction: column;
		position: static;
		transform: none;
	}
}
@media (max-width: 575.98px) {
	#navbar .k-button {
		font-size: 0.6rem;
	}
	#navbar .title {
		font-size: 1.2rem;
	}
	#navbar .k-searchbar .k-input-inner {
		font-size: 0.6rem;
		padding-left: 0;
	}
}

.userName {
	color: #6d6d6d;
	float: right;
	vertical-align: middle;
	font-family: "proxima-nova", sans-serif;
	font-size: 14px;
	text-decoration: none;
}
.userName:hover {
	color: #6d6d6d;
	text-decoration: none;
	cursor: text;
}

/* User login icon */
#userIconBtn.logged-in {
	color: var(--hew-accent) !important;
}

/* Modal windows - no scrollbars */
#emailWindow.k-window-content,
#reportProblemWindow.k-window-content {
	overflow: hidden !important;
}

/* Modify Options window: cap height to the viewport and lay it out as a flex
   column so the option list scrolls and the Cancel/Apply footer stays pinned
   and visible at any browser zoom level. */
#optionsWindow.k-window-content {
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	max-height: 85vh;
	padding: 0;
}
#optionsWindow .optionsWindow-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
#optionsWindow .optionsWindow-footer {
	flex: 0 0 auto;
	padding: 10px;
	border-top: 1px solid #e0e0e0;
	background: #fff;
}
#optionsWindow .k-grid-content {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.k-loading-mask {
	animation: kendoLoadingFadeIn 0.4s ease both;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 10002 !important;
}
@keyframes kendoLoadingFadeIn {
	0%, 80% { opacity: 0; }
	100% { opacity: 1; }
}
.k-loading-image {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	width: 96px !important;
	height: 96px !important;
	margin: -48px 0 0 -48px !important;
	z-index: 10003 !important;
	background-image: url('../Images/loadinghew.gif') !important;
	background-size: 96px 96px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.k-loading-image::before,
.k-loading-image::after {
	display: none !important;
}

.k-grid .k-dirty {
	display: none;
}

.k-expander {
	border: 0;
}

.k-expander.k-expanded {
	margin-top: 0 !important;
	border: 0;
}

.k-expander.k-focus {
	box-shadow: none;
}

.k-expander:not(.k-expanded) {
	border: 0;
}

.k-expander:not(.k-expanded) .k-expander-header {
	border-bottom: 1.5px solid var(--hew-border);
}

.k-expander {
	background: transparent;
}

.k-expander .k-expander-header {
	transition: background 0.2s ease;
	background: transparent;
}
.k-expander .k-expander-header:hover {
	background: var(--hew-accent-tint);
}
.k-expander .k-expander-title {
	color: var(--hew-accent);
	text-transform: uppercase;
	justify-content: flex-start;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	line-height: 1;
	font-size: 1.5rem;
	font-weight: 600;
	width: calc(6vw + 250px);
}

.k-expander .k-expander-header {
	padding-block: 0.125rem;
	background: transparent;
	width: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	margin-right: auto;
	margin-left: auto;
	justify-content: flex-start;
}

.k-expander-indicator .k-icon svg {
	fill: #0079c1;
}

@media (min-width:576px){.k-expander .k-expander-header{max-width:540px}}
@media (min-width:768px){.k-expander .k-expander-header{max-width:720px}}
@media (min-width:992px){.k-expander .k-expander-header{max-width:960px}}
@media (min-width:1200px){.k-expander .k-expander-header{max-width:1140px}}
@media (min-width:1400px){.k-expander .k-expander-header{max-width:1320px}}
@media (min-width:1800px){.k-expander .k-expander-header{max-width:1650px}}

.panel-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--hew-border-soft);
	box-shadow: 0 1px 1px rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.05);
	overflow: hidden;
	margin: 0 auto 2rem;
}
.panel-card > .k-expander {
	background: transparent;
}
.panel-card:has(> [style*="display: none"]),
.panel-card:has(> [style*="display:none"]) {
	display: none;
}
@media (min-width:576px){.panel-card { max-width: 540px; }}
@media (min-width:768px){.panel-card { max-width: 720px; }}
@media (min-width:992px){.panel-card { max-width: 960px; }}
@media (min-width:1200px){.panel-card { max-width: 1140px; }}
@media (min-width:1400px){.panel-card { max-width: 1320px; }}
@media (min-width:1800px){.panel-card { max-width: 1650px; }}

.hew-banner-container {
	margin-bottom: 1rem;
}
.hew-banner-list,
.hew-banner-list.k-listview {
	list-style: none;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
}
.hew-banner-list .k-listview-content {
	background: transparent;
	border: 0;
	padding: 0;
}
.hew-banner {
	display: block;
	padding: 0.9rem 0;
	margin: 0.5rem 0;
	border-radius: 10px;
	font-weight: 600;
	text-align: center;
	border: 1px solid transparent;
}
.hew-banner-consult {
	background: #fde2e4;
	color: #8a1c1c;
	border-color: #f5b5b8;
}
.hew-banner-list .hew-banner-promotion {
	background: #dbeafe;
	color: #0b3d91;
	border: 1px solid #93c5fd;
}
.hew-banner-empty {
	display: none;
}
@media print {
	.hew-banner {
		border: 1px solid #999;
		color: #000;
		background: #fff;
	}
}

.k-expander .k-expander-header .k-icon {
	color: #0079c1;
}
.k-expander .k-expander-header .k-spacer {
	flex: unset;
}

.k-expander .k-expander-indicator {
	order: -1;
	margin-right: 1rem;
	margin-left: 0;
	transform: scale(1.5);
	transform-origin: left center;
}

.k-expander-content {
	padding: 0 !important;
}

#panelBar .k-link {
	padding-block: 0.42rem;
	background: #414141;
	color: #fff;
}

.k-expander + .k-expander.k-expanded, .k-expander.k-expanded + .k-expander {
	margin-top: 0;
}

.strucTable {
	text-align: center;
	background: transparent;
	border-spacing: 0;
	font-size: 17px;
	color: var(--hew-accent);
	margin-inline: 0.75rem;
	font-weight: 700;
}
.strucTable .k-input-value-text {
	font-weight: 700;
}
#catBuilder td:first-of-type {
	padding-left: 5px !important;
}
#catBuilder td:last-of-type {
	padding-right: 8px !important;
}

#catBuilder td {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.linearLengthLabel, .linearLengthLabelLetter {
	position: relative;
}
.linearLengthLabel {
	/* breathing room around the ft./in. unit labels (before and after each) */
	margin-left: 8px;
	margin-right: 8px;
}
.linearLengthLabelLetter {
	font-weight: bold;
	display: inline-block;
	width: 12px;
	color: #0079C1;
	/* gap between the run letter (A/B/C) and the feet input */
	margin-right: 8px;
}

.splashPage {
	box-shadow: 0 1px 1px rgba(31,42,53,0.04), 0 8px 24px rgba(31,42,53,0.10);
	margin: auto;
	margin-bottom: 2rem;
	padding: 1.5rem 2.5rem 2.5rem;
	background: #fff;
	border: 1px solid var(--hew-border-soft);
	border-radius: 12px;
}

.brandButton {
	height: 30px;
	vertical-align: middle;
	display: inline-block;
	padding: 7px 20px;
	cursor: pointer;
	line-height: 1;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}
.brandButtonSelected {
	background: #0079c1;
	color: white;
	border-bottom: none;
}
.brandButton:hover {
	background: #0079c1;
	color: white;
}

.mountingButton {
	max-width: 119px;
	cursor: pointer;
}

.shape, .mounting {
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--hew-surface);
	border: 1px solid var(--hew-border-soft);
	padding: 1rem;
	height: auto;
	list-style: none;
	margin: 0.5rem;
	cursor: pointer;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mounting {
	padding: 0;
}
.shapeButton {
	max-width: 101px;
}
.shape:hover, .shape.selected, .mounting:hover, .mounting.selected {
	background: #0079C1;
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0,121,193,0.25);
}

.shape:hover img, .shape.selected img {
	filter: brightness(0) saturate(100%) invert(99%) sepia(99%) saturate(0%) hue-rotate(321deg) brightness(104%) contrast(100%);
}

#divLinearShape figure, #divLinearMounting figure {
	width: 131px;
	box-sizing: border-box;
}
#divLinearShape {
	flex-wrap: nowrap;
	margin-left: auto;
	margin-right: auto;
}
#divLinearShape figcaption, #divLinearMounting figcaption {
	text-align: center;
}

.shapeButton {
	cursor: pointer;
}

.linearRotateDiv {
	position: relative;
	display: inline-block
}

.linearControlButtonContainer {
	position: relative;
}

.linearControlButton {
	height: 75px;
	width: 75px;
	cursor: pointer;
	padding: 2px;
	margin: 0;
	border-radius: 4px;
}

.background-wrap {
	position: absolute;
	height: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
}

.page-title {
	font-family: trade-gothic-next-condensed, sans-serif;
	font-weight: 600;
	font-size: 1.75rem;
	color: #333;
	margin-bottom: 1.25rem;
	text-align: center;
}
.grid-list .k-listview-content {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 300px));
	justify-content: center;
	gap: 1.4rem;
}
@media(max-width: 1200px) {
	.grid-list .k-listview-content {
		grid-template-columns: repeat(3, minmax(0, 300px));
	}
}
@media (max-width: 991.98px) {
	.grid-list .k-listview-content {
		grid-template-columns: repeat(3, minmax(0, 300px));
	}
}
@media (max-width: 767.98px) {
	.grid-list .k-listview-content {
		grid-template-columns: repeat(2, minmax(0, 300px));
	}
}
@media (max-width: 575.98px) {
	.grid-list .k-listview-content {
		grid-template-columns: minmax(0, 300px);
	}
	.grid-list .k-listview-content .style-image-container img {
		min-height: initial;
	}
}

.style {
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 300 / 346;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.style:hover {
	border: 2px solid transparent;
	padding: 0;
	transform: translateY(-4px);
}
.style:hover .style-image-container {
	box-shadow: 0 10px 28px rgba(31,42,53,0.12), 0 2px 6px rgba(31,42,53,0.06);
}
.k-selected .style {
	border: 2px solid var(--hew-accent);
}
.style:hover .productNameSpan {
	color: #0079c1;
}
.style-image-wrapper {
	background: var(--hew-surface);
	display: flex;
	height: 100%;
	border-radius: 2rem;
	border: 1px solid var(--hew-border-soft);
}
.style-image-wrapper .img {
	margin: auto;
	max-width: 100%;
	max-height: 12rem;
}
.style-image-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 2rem;
	transition: box-shadow 0.2s ease;
}
.style-image-container .image-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	display: flex;
	overflow: hidden;
	border-radius: 2rem;
}
.style-image-container .img {
	min-height: 100%;
	min-width: 100%;
	transition: transform 0.3s ease;
}
.style:hover .style-image-container .img {
	transform: scale(1.05);
}

.productNameSpan {
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 700;
	font-family: "trade-gothic-next-condensed", "proxima-nova", sans-serif;
	color: #414141;
	transition: color 0.2s ease;
}
.productImage {
	max-height: 148px;
	max-width: 208px;
	position: absolute;
	margin: auto;
	top: 16px;
	left: 16px;
	right: 16px;
	bottom: 16px;
}
.productImageContainer {
	display: inline-block;
	position: relative;
	height: 180px;
	width: 240px;
	vertical-align: middle;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid var(--hew-border-soft);
	padding: 16px;
	box-sizing: border-box;
}

.product-card {
	position: relative;
	background-color: #fff;
	height: 100%;
	cursor: pointer;
	border: 2px solid var(--hew-border-soft);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.product-card:hover {
	border-color: var(--hew-accent);
	padding: 0;
	background-color: var(--hew-bg);
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(31,42,53,0.12), 0 2px 6px rgba(31,42,53,0.06);
}
/* .k-listview-item IS the .product-card element here, so don't reset bg/border —
   defer entirely to .product-card. Keep this block empty for documentation. */
.product-card .body {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem 0;
}
.product-card .body .product-card-image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}
/* Hover swap for tiles that carry a long description (e.g. hardcoded New-tab tiles).
   On hover: tint the card, hide the product image, and reveal the long description in its place.
   Scoped via :has() so only tiles with the .product-card-long-desc child get the swap. */
.product-card-long-desc {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	font-style: italic;
	color: #555;
	font-size: calc(0.75rem + 0.4vmin);
	line-height: 1.3;
}
.product-card:has(.product-card-long-desc):hover {
	background-color: var(--hew-accent-tint);
}
.product-card:has(.product-card-long-desc):hover .product-card-image-wrap .img {
	visibility: hidden;
}
.product-card:has(.product-card-long-desc):hover .product-card-long-desc {
	display: flex;
}
/* Mute the code + sub-title on hover so the long description is the visual focus. */
.product-card:has(.product-card-long-desc):hover .body .title .standout,
.product-card:has(.product-card-long-desc):hover .body .sub-title {
	color: #888;
}
.product-card .body .product-card-image-wrap .wrap {
	display: flex;
	width: 100%;
	height: 15rem;
	max-width: 16rem;
}
.product-card .body .product-card-image-wrap .img {
	max-height: 14rem;
	margin: auto;
	max-width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}
.product-card:hover .product-card-image-wrap .img {
	transform: scale(1.05);
}
.product-card .body .title {
	text-align: center;
	color: var(--hew-text);
	font-size: calc(0.6rem + 0.5vmin);
	font-weight: 300;
	margin-bottom: 0;
}
.product-card .body .title .standout {
	font-weight: 600;
	font-size: calc(0.8rem + 1.2vmin);
	color: #0079c1;
	line-height: 1;
	font-family: trade-gothic-next-condensed,sans-serif;
	transition: color 0.2s ease;
}
.product-card:hover .body .title .standout {
	color: #005f99;
}
.product-card .body .sub-title {
	margin-bottom: 0;
	padding: 0 1rem;
}
.product-card-logo {
	position: absolute;
	top: 8px;
	left: 8px;
	height: 65px;
	z-index: 1;
}

.optionStyle {
	float: left;
	position: relative;
	width: 80px;
	height: 120px;
	margin: 4px;
	padding: 2px;
	cursor: pointer;
}
.optionStyle:hover {
	border: 2px solid black;
	padding: 0;
}

#addOptionsButton,
.addOptionsButton {
	height: 24px !important;
	line-height: 22px;
	cursor: pointer;
	color: #0079c1 !important;
	background: #e6f3fa !important;
	border: 1px solid #0079c1;
	border-radius: 999px;
	padding: 0 12px !important;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

#addOptionsButton:hover,
.addOptionsButton:hover {
	background: #0079c1 !important;
	color: #fff !important;
}

.standardButton {
	color: #fff;
	background: #0079c1;
	border: none;
	border-radius: 0;
	width: calc(100% - 10px);
	height: 30px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 2px 10px;
}

.acceptButton {
	color: #fff;
	background: #0079c1;
	border: none;
	border-radius: 6px;
	line-height: 1;
	display: inline-block;
	margin-left: .5rem;
	padding: .45rem .7rem;
	font-size: 16px;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.acceptButton:hover {
	background: #0086d3;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,121,193,0.18);
}
.acceptButton:active {
	background: #006aa8;
	transform: translateY(0);
	box-shadow: none;
}

.linearAdditionalOptionsLabel {
	width: 180px;
	text-align: left;
}

.linearStepLabel {
	color: #0079c1;
	text-transform: uppercase;
	padding: 4px;
	float: left;
	font-weight: bold;
	font-size: 1.275rem;
}

.linearStepDescriptionLabel {
	margin-left: 1rem;
	text-align: left;
	font-weight: 600;
	float: left;
	padding: 4px;
	font-size: 1.275rem;
}

#breadcrumbBar {
	flex-basis: 100%;
	background-color: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.04);
	margin-bottom: 1.5rem;
	position: sticky;
	top: 65px;
	z-index: 1020;
}
.myBreadcrumb {
	list-style: none;
	background-color: transparent;
	font-family: "trade-gothic-next-condensed", "proxima-nova", sans-serif;
	font-size: 13px;
	padding: 0 0 10px 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.myBreadcrumb a {
	color: var(--hew-text-muted);
	text-decoration: none;
	padding: 0;
	border-radius: 4px;
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	position: relative;
}
.myBreadcrumb a:hover {
	color: var(--hew-accent);
}
.myBreadcrumb a:active {
	transform: translateY(1px);
}
.myBreadcrumb > li {
	display: inline-flex;
	align-items: center;
}
.myBreadcrumb > li:last-child {
	color: var(--hew-text);
	font-weight: 700;
	padding: 0;
}
.myBreadcrumb > li:last-child a {
	color: var(--hew-text);
	background: transparent;
	padding: 0;
}
.myBreadcrumb > li:last-child a:hover {
	background: transparent;
	color: var(--hew-accent);
}
.myBreadcrumb > li + li:before {
	padding: 0 8px;
	color: var(--hew-border);
	content: "›";
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	align-self: center;
	transform: translateY(-1px);
}

.k-menu .k-item > .k-link {
	padding: 13px;
}

.k-widget.k-menu-horizontal > .k-item {
	border-right: none;
}

.k-menu .k-item > .k-link > .k-i-arrow-s {
	background-image: none;
}

a[href]:after {
	content: none;
}

@page {
	size: auto;
	margin-bottom: 5mm;
}
@media print {
	/* ── Hide non-printable elements ── */
	.no-print, .no-print * { display: none !important; }
	.show-print { display: block !important; }
	.strucbar-accept { display: none !important; }
	#fixtureToolbar { display: none !important; }
	#speedMessage { display: none !important; }
	#addOptionsButton { display: none !important; }
	#layoutPrintLogo { display: none !important; }
		#breadcrumbBar { display: none !important; }

	/* ── Hide the dropdown table but keep pricing bar ── */
	#catBuilder { display: none !important; }

	/* Rules panel hidden via JS (adds .no-print to Kendo wrapper) */

	/* ── Page setup ── */
	html, body { padding-top: 0 !important; margin: 0 !important; background: #fff !important; }
	.container, .container-xxxl { max-width: 100% !important; padding: 0 10px !important; }

	/* Drop slate surfaces back to paper-white for print. */
	.bg-standard, .bg-standout, .splashPage, #navbar,
	.product-card, .style-image-wrapper, .strucTable, #catResults .strucbar-scroll,
	#linearCanvas, #priceUpdatesContent, .k-grid .k-table-row,
	.k-grid .k-table-row.k-table-alt-row { background: #fff !important; }

	/* ── Force background colors to print ── */
	* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

	/* ── Print header ── */
	#printHeader { margin-bottom: 0.5rem; }

	/* ── Product title & image ── */
	#structureDescription { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.25rem; text-align: center; }
	.productImageContainer { text-align: center; }
	.productImage { max-height: 100px; }

	/* ── Catalog number - centered ── */
	#catalogNumber { font-size: 1rem; font-weight: 600; color: #0079c1; margin-bottom: 0.25rem; text-align: center !important; }

	/* ── Pricing bar - centered under catalog number ── */
	.pb-2 { text-align: center; }
	.strucbar-wrapper { display: block !important; text-align: center; }
	.strucbar { display: inline-block !important; }
	.strucbar-scroll { background: transparent !important; display: block !important; }
	.strucbar, .strucbar-scroll { overflow: visible !important; }
	#catMessageBackground {
		background-color: #d3d3d3 !important;
		padding: 4px 8px;
		font-size: 0.9rem;
		justify-content: center !important;
		display: inline-flex !important;
	}
	#catMessageBackground .cat-price { margin-left: 1.5rem !important; }

	/* ── Expansion panels: show content, simplify headers ── */
	.k-expander-indicator { display: none !important; }
	.k-expander-content-wrapper { display: block !important; height: auto !important; overflow: visible !important; }
	.k-expander-content { height: auto !important; overflow: visible !important; }
	.k-expander-header { max-width: 100% !important; }
	#title { margin: .5rem 0 !important; }
	.k-expander { border: none !important; box-shadow: none !important; overflow: visible !important; height: auto !important; }
	#pnlSummary, #pnlSummary_wrapper { height: auto !important; overflow: visible !important; }

	/* ── Summary grid ── */
	#catDetails { font-size: 0.75rem; }
	.k-grid { border: none !important; width: 100% !important; table-layout: auto !important; }
	.k-grid table { width: 100% !important; table-layout: auto !important; }
	.k-grid-header { border-bottom: 2px solid #333 !important; }
	.k-grid td, .k-grid th { padding: 2px 4px !important; white-space: normal !important; word-wrap: break-word !important; overflow: visible !important; }
	.k-grid col { width: auto !important; }
	.k-grid-content { overflow: visible !important; }

	/* ── Config notes ── */
	#configMessage { font-size: 14px !important; color: #0079c1 !important; margin-top: 0.25rem !important; text-align: center; }

	/* ── Linear designer ── */
	#linearDesigner > div { width: 100%; }

	/* ── Page break control ── */
	#pnlSummary { page-break-before: auto; page-break-inside: auto; }
	#catResults { height: auto !important; overflow: visible !important; }
	#catResults * { max-height: none !important; }
}

.fixture-toolbar-button {
	line-height: 1;
	display: flex;
	align-items: center;
	background: #fff;
	color: var(--hew-accent);
	border: 1px solid var(--hew-accent);
	border-radius: 6px;
	padding: .45rem .7rem;
	vertical-align: middle;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.fixture-toolbar-button:hover {
	background: var(--hew-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0,121,193,0.22);
}
.fixture-toolbar-button:hover svg,
.fixture-toolbar-button:hover svg [fill="#0079c1"] {
	fill: #fff;
}
.fixture-toolbar-button:hover svg [fill="#fff"] {
	fill: var(--hew-accent);
}
.fixture-toolbar-button:active {
	transform: translateY(0);
	box-shadow: none;
}

.fixture-toolbar-button svg {
	margin-left: 0.5rem;
}

.empty-toolbar-button {
	height: 28px;
	width: 28px;
	margin: 2px -1px 0 0;
	padding: 5px;
	display: inline-block;
}

.k-table-td {
	border-bottom: 1px solid var(--hew-border-soft) !important;
}

#catDetails.k-grid table {
	width: auto !important;
	table-layout: auto !important;
}

#catDetails,
#catLinearFixtures,
#catRows,
#catLinearBOM {
	margin: 0 1rem 1rem;
	border: 1px solid var(--hew-border-soft);
	border-radius: 8px;
	overflow: hidden;
}
#catDetails .k-grid-header .k-table-th:first-child,
#catDetails .k-table-th:first-child,
#catDetails td:first-child,
#catDetails .k-table-td:first-child,
#catLinearFixtures .k-grid-header .k-table-th:first-child,
#catLinearFixtures .k-table-th:first-child,
#catLinearFixtures td:first-child,
#catLinearFixtures .k-table-td:first-child,
#catRows .k-grid-header .k-table-th:first-child,
#catRows .k-table-th:first-child,
#catRows td:first-child,
#catRows .k-table-td:first-child,
#catLinearBOM .k-grid-header .k-table-th:first-child,
#catLinearBOM .k-table-th:first-child,
#catLinearBOM td:first-child,
#catLinearBOM .k-table-td:first-child {
	padding-left: 1rem !important;
}

.k-grid {
	border: 0 !important;
	background: transparent !important;
}
.k-grid .k-grid-header {
	font-weight: bold;
	background: transparent;
	color: var(--hew-text-muted);
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	border-bottom: 1.5px solid var(--hew-border);
}

.k-grid th.k-header {
	border: none;
	text-transform: uppercase;
}

.k-grid table td {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--hew-border-soft);
	padding-left: 2px !important;
}
.k-grid table tr {
	background-color: var(--hew-surface);
}
.k-grid table tr.k-state-selected {
	background: var(--hew-accent);
	color: #fff;
	border: 0;
}
.k-grid thead th {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	border-bottom: 1.5px solid var(--hew-border);
	padding-left: 2px !important;
}
.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
	background-color: var(--hew-accent);
	color: #fff;
}

.k-grid .k-table-row {
	background-color: var(--hew-surface);
}
.k-grid .k-table-row.k-table-alt-row {
	background-color: var(--hew-surface-elev);
}
.k-grid .k-table-row:hover {
	background-color: var(--hew-border-soft);
}

.k-grid .k-grid-md td, .k-grid .k-grid-md .k-table-td, .k-grid-md td, .k-grid-md .k-table-td {
	padding-block: 0.3rem;
}

.k-grid .k-grid-header .k-table-th:first-child, .k-grid .k-table-th:first-child, .k-grid td:first-child, .k-grid .k-table-td:first-child {
	padding-left: 2px !important;
}

.add-on .input-group-btn > .btn {
	border-left-width: 0;
	left: -2px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.add-on .form-control:focus {
	box-shadow: none;
	-webkit-box-shadow: none;
	border-color: #cccccc;
}

.standardDropDown {
	width: auto;
	max-width: 400px;
	padding: 0;
	margin-top: 0;
	border-radius: 0;
	background: transparent;
}

.standardDropDown:hover {
	background: transparent;
}

.standardDropDown > .k-dropdown-wrap.k-state-default {
	background-image: none;
	background-color: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--hew-border);
}

.standardDropDown .k-input-inner {
	padding-block: 0;
	padding-inline: 2px 1px;
	color: var(--hew-accent);
	font-size: 17px;
	min-width: 0;
}

.standardDropDown .k-input-button {
	padding-block: 0;
	padding-inline: 0;
	width: 16px;
	min-width: 0;
}

.standardDropDown .k-input-button .k-icon {
	font-size: 12px;
}

.arrow-down {
	width: 0;
	height: 0;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-left: calc(50% - 3px);
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 6px solid slategray;
}

.k-i-arrow-60-down:before {
	content: "\e006";
	color: #000;
}

.optAlternate {
	background-color: lightgrey;
}

.k-listview {
	border: 0;
}

.k-listview-content {
	overflow: unset;
	height: 100%;
}

#searchBoxLoading .k-autocomplete {
	border: 0;
	box-shadow: none;
}
#searchBoxLoading .k-clear-value {
	display: none;
}

#title {
	text-align: center;
	font-size: 3rem;
	margin: 1.4rem 0;
	font-weight: 700;
	color: #414141;
	font-family: "trade-gothic-next-condensed", "proxima-nova-condensed", "proxima-nova", sans-serif;
}

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

.bg-standard {
	background: var(--hew-bg);
}

#pnlLinearDesigner .bg-standard {
	background: #fff;
}

.bg-standout {
	background: var(--hew-surface-deep);
	border-top: 1px solid var(--hew-border-soft);
	border-bottom: 1px solid var(--hew-border-soft);
}

#catMessageBackground {
	background-color: transparent;
	color: var(--hew-text);
	border-top: 1px solid var(--hew-border-soft);
	font-size: medium;
	font-weight: 700;
	margin: 0;
	padding-top: 1rem;
	padding-right: 5px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	gap: .5rem;
}

/* price group pushes right as a unit, so empty tiers (e.g. no 10%) don't
   leave the visible prices stranded on the left */
#catMessageBackground .cat-prices {
	margin-left: auto;
	display: inline-flex;
	gap: 0.5rem;
}
#catMessageBackground .cat-price {
	line-height: 1.4;
	font-weight: 500;
}
#catMessageBackground .cat-price .cat-price-pct {
	color: var(--hew-accent);
}
#catMessageBackground .cat-price .cat-price-amt {
	color: #000;
}
/* collapse empty price spans (e.g. fixtures without a 10% tier) so remaining
   prices sit flush to the right */
#catMessageBackground .cat-price:empty {
	display: none;
}

#catMessageBackground.error {
	background-color: var(--hew-surface-elev);
}

#catMessageBackground.error #catMessage {
	color: red;
}

#speedMessage {
	font-size: x-small;
	padding-left: 5px;
	font-style: italic;
	text-align: center;
	margin-top: 10px;
	cursor: pointer;
}

#linearCanvas {
	background: var(--hew-surface-elev);
	border: 1px solid var(--hew-border-soft);
	border-radius: 8px;
	overflow: hidden;
}

#catalogNumber {
	font-size: x-large;
	color: rgb(0, 128, 193);
	margin-bottom: 0;
	white-space: normal;
	line-height: 1.4;
	overflow: hidden;
	text-align: left;
}

#structureDescription {
	font-size: x-large;
	font-weight: bold;
	color: #414141;
	text-align: left;
	margin-bottom: 0;
	white-space: normal;
	line-height: 1.4;
	overflow: hidden;
}

@media(max-width: 768px) {
	#catalogNumber {
		margin-left: 0;
		white-space: normal;
	}
	#structureDescription {
		margin-left: 0;
		white-space: normal;
	}
}

#catNo {
	font-weight: 600;
}

.lengths-group-header {
	display: inline-block;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

/* Center the LRX width tiles to match the mounting tile layout. */
#widthListView .k-listview-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Step 3 row alignment — normalize header spacing and content row height
   so Dimensions, Type, and Up/Dn columns line up horizontally. */
.step3-col .lengths-group-header {
	margin-bottom: 0.35rem;
	line-height: 1;
}
.step3-row {
	min-height: 28px;
	display: flex;
	align-items: center;
}
.step3-col > .step3-row + .step3-row {
	margin-top: 0.35rem;
}

.k-dropdownlist, .k-dropdown, .k-numerictextbox {
	border-radius: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hew-border-soft);
	color: var(--hew-text);
}

.k-dropdown {
	padding: 0 .2rem;
}

.k-numerictextbox {
	margin-bottom: 3px;
}

.k-numerictextbox .k-input-spinner button {
	background-color: var(--hew-surface);
	border: 0;
}

.k-numerictextbox input {
	padding-block: 0 !important;
	padding-inline: .2rem 0 !important;
}

.k-numerictextbox svg {
	fill: #959595;
}

[data-role="numerictextbox"]::-webkit-outer-spin-button, [data-role="numerictextbox"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[data-role="numerictextbox"] {
	-moz-appearance: textfield;
}

.customdesign-frame {
	flex-grow: 1;
	vertical-align: top;
}

@media(min-width: 768px) {
	.customdesign-frame {
		border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
	}
}

.customdesign-frame {
	border-top: 0;
	flex-grow: 1;
	min-width: 320px;
}

@media(max-width: 768px) {
	.customdesign-frame {
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
	}
}

.customdesign-control-container {
	display: inline-block;
}

#errorPage {
	background: var(--hew-bg);
	color: var(--hew-text);
	padding: 5rem 0;
}

#quickShipGrid {
	padding-top: 1rem;
}

#catResults {
  padding-top: 1rem;
}

#catResults .strucTable {
  background: transparent !important;
}

#catResults .strucbar {
  background: transparent;
  overflow-x: auto;
}

#catResults .strucbar-scroll {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--hew-border-soft);
  border-radius: 12px;
  overflow: hidden;
  min-width: fit-content;
  white-space: nowrap;
  padding: 1rem;
  box-shadow: 0 1px 1px rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.05);
}

#catResults .strucbar-wrapper {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
}

#catResults .strucbar-wrapper .strucbar-accept {
  display: flex;
  align-items: center;
}


#catResults #catBuilder {
  display: inline-table;
  width: auto !important;
  table-layout: auto !important;
}

#catResults .strucbar-scroll #catMessageBackground {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: .5rem;
  width: calc(100% - 1.5rem);
  margin-inline: 0.75rem;
  background: transparent;
}



/* bar content laid out in one line, shrink-wrapped */
#catResults #catMessageBackground {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-width: 0;
  padding-right: 5px;
  gap: .5rem;
}

/* Linear form control sizing */
.linear-input-sm { height: 25px; width: 60px; }
.linear-input-md { height: 25px; width: 65px; }
.linear-dropdown-sm { width: 110px; }
.linear-dropdown-md { width: 135px; }
.linear-dropdown-instruction { margin-left: 2px; height: 25px; width: 115px; }
.linear-dropdown-instruction-std { margin-left: 2px; height: 25px; width: 140px; }
.linear-length-row { height: 40px; margin: auto; vertical-align: middle; }
.linear-length-row-first { height: 40px; margin: 30px auto auto; vertical-align: middle; }
.linear-total-length { margin-top: 10px; margin-bottom: 2px; font-weight: 600; }
.linear-grid-border { border: solid 1px black; height: 200px; }
.linear-grid-border-auto { border: solid 1px black; }
.linear-control-img { height: 35px; width: 35px; }
.linear-next-btn { width: 112px; height: 42px; }
.linear-help-label { font-weight: bold; }

/* kill the inline float on the message span */
#catResults #catMessage {
  float: none !important;
  padding-left: 5px;
}

/* price group pushes right as a unit */
#catResults #catMessageBackground .cat-prices {
  margin-left: auto;
  display: inline-flex;
  gap: 0.5rem;
}
#catResults #catMessageBackground .cat-price:empty {
  display: none;
}

/* ── New Report ── */
#priceUpdatesContent {
  padding: 1.5rem 2rem 2rem;
  background: var(--hew-surface);
  border: 1px solid var(--hew-border-soft);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(31,42,53,0.04), 0 8px 24px rgba(31,42,53,0.08);
}

.price-update-series {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
}

.price-update-series:last-child {
  border-bottom: none;
}

.price-update-header {
  margin-bottom: 0.75rem;
}

.price-update-code {
  font-size: 1.1rem;
  font-weight: bold;
  color: #0079c1;
}

.price-update-name {
  font-size: 1.1rem;
  font-weight: bold;
  font-style: italic;
}

.price-update-body {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.price-update-image-wrap {
  flex-shrink: 0;
  width: 150px;
}

.price-update-image {
  max-width: 150px;
  max-height: 120px;
  object-fit: contain;
}

.price-update-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.price-update-table col.col-base        { width: 55%; }
.price-update-table col.col-price       { width: 20%; }
.price-update-table col.col-date        { width: 25%; }

.price-update-table th {
  text-align: left;
  padding: 4px 12px;
  border-bottom: 2px solid #999;
  white-space: nowrap;
  font-weight: 600;
}

.price-update-table td {
  padding: 4px 12px;
  border-bottom: 1px solid #e5e5e5;
}

.price-update-table td:nth-child(2),
.price-update-table th:nth-child(2) {
  text-align: right;
}

.price-update-table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
}

.price-update-table td:nth-child(3),
.price-update-table th:nth-child(3) {
  text-align: center;
}

.price-update-base-link {
  color: #0079c1;
  text-decoration: none;
  cursor: pointer;
}
.price-update-base-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .price-update-body {
    flex-direction: column;
  }
  .price-update-image-wrap {
    width: 100%;
    text-align: center;
  }
}

.k-autocomplete-popup:has(> #optionAutocomplete-list) {
    min-height: 200px !important;
}

/* ──────────────────────────────────────────────────────────────
   PRINT OVERRIDES — kept at the very end of the file on purpose.
   The main @media print block (~line 1093) is partially defeated
   during printing because several screen component rules
   (#structureDescription, #catalogNumber, #catResults
   #catMessageBackground, …) are declared *after* it and win
   equal-specificity cascade ties. Re-asserting the print intent
   here, last in source order, makes it actually apply.
   ────────────────────────────────────────────────────────────── */
@media print {
	/* Flatten card chrome — paper shouldn't carry web borders/shadows */
	.panel-card {
		max-width: 100% !important;
		margin: 0 0 0.75rem !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	/* Summary contents flush-left: drop the container + Kendo expander
	   left padding so the grid aligns to the card edge. */
	#pnlSummary .k-expander-content,
	#pnlSummary .container,
	#pnlSummary .container-xxxl {
		padding-left: 0 !important;
	}

	/* Product header: compact title/catalog, flat image box */
	#structureDescription { font-size: 1.25rem !important; line-height: 1.2 !important; }
	#catalogNumber { font-size: 1rem !important; line-height: 1.2 !important; }
	.productImageContainer {
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		height: auto !important;
		width: auto !important;
		margin: 1.75rem 0 0.75rem !important; /* extra space above (clear of the logo) + room below */
	}
	.productImage {
		position: static !important;
		max-height: 120px !important;
		max-width: 150px !important;
	}

	/* Pricing bar: plain left-aligned text, no box around "Complete Fixture".
	   .strucbar-scroll draws the rounded bordered card on screen — strip it. */
	#catResults .strucbar-wrapper { text-align: left !important; }
	#catResults .strucbar { display: block !important; }
	#catResults .strucbar-scroll {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	#catResults #catMessageBackground {
		display: flex !important;
		justify-content: flex-start !important;
		background-color: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		margin-inline: 0 !important;
		gap: 0.5rem !important;
		width: 100% !important;
	}
	/* Keep the prices next to "Complete Fixture" on the left instead of
	   pushing them to the right edge, with snug uniform spacing (the
	   .cat-prices flex gap handles the gaps; drop the 1.5rem per-price
	   margin set higher up in the print block). */
	#catResults #catMessageBackground .cat-prices { margin-left: 0 !important; }
	#catResults #catMessageBackground .cat-price { margin-left: 0 !important; }

	/* Summary grid: fit all 11 columns to the page.
	   table-layout:fixed + width:100% guarantees the table never
	   exceeds the page width, so long cells wrap instead of the
	   right-hand price columns clipping off the edge. */
	/* The table.k-grid-table qualifier is required: a Kendo rule
	   outranks a plain "#catDetails table" selector, leaving the
	   table on table-layout:auto (which ignores the column widths
	   below and lets verbose cells tower). Qualifying with the class
	   wins the cascade so fixed layout — and our widths — apply. */
	#catDetails { font-size: 0.58rem !important; }
	#catDetails table.k-grid-table {
		width: 100% !important;
		table-layout: fixed !important;
	}
	#catDetails table.k-grid-table td,
	#catDetails table.k-grid-table th {
		padding: 1px 3px !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important; /* break only long unbreakable tokens (e.g. part numbers) */
		vertical-align: top !important;
	}
	/* Keep short numeric values (e.g. 246.50) on one line — the price/cost
	   columns are narrow and otherwise wrap mid-number. */
	#catDetails table.k-grid-table td[style*="right"] { white-space: nowrap !important; }
	/* Column widths: Detail carries the verbose text so it gets the most
	   room; the numeric columns stay narrow. nth-child(n+6) covers every
	   price/cost column whether or not the empty 3%/7% columns render.
	   Order: Name, Code, ItemNo, Detail, ShipSeparateDesc, then numerics. */
	#catDetails table.k-grid-table colgroup col { width: auto !important; }
	#catDetails table.k-grid-table colgroup col:nth-child(1) { width: 11% !important; }  /* Name */
	#catDetails table.k-grid-table colgroup col:nth-child(2) { width: 5% !important; }   /* Code */
	#catDetails table.k-grid-table colgroup col:nth-child(3) { width: 7% !important; }   /* ItemNo */
	#catDetails table.k-grid-table colgroup col:nth-child(4) { width: 29% !important; }  /* Detail */
	#catDetails table.k-grid-table colgroup col:nth-child(5) { width: 9% !important; }   /* Ship Separate Desc */
	#catDetails table.k-grid-table colgroup col:nth-child(n+6) { width: 6.5% !important; } /* numeric price/cost cols */
}