/* Ported from inline <style> blocks in the legacy main.blade.php (loading overlay, FAQ accordion, form error text). */

.faq-section {
	margin: auto;
	background: #fff;
	padding: 25px;
	font-family: SohoStd-Regular;
}

.faq-item {
	border-bottom: 1px solid #ddd;
	padding: 15px 0;
}

.faq-question {
	position: relative;
	color: #ab7229;
	font-family: SohoStd-Regular;
	font-weight: 700;
	line-height: 25px;
	font-size: 18px;
	cursor: pointer;
}

.faq-question::after {
	content: "+";
	position: absolute;
	right: 0;
	font-size: 18px;
	transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
	content: "\2212";
}

.faq-answer {
	display: none;
	margin-top: 10px;
	color: #444;
	line-height: 25px;
}

.error {
	color: black !important;
}

label.error {
	font-weight: normal !important;
	font-size: 13px;
	padding-top: 6px;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000000;
}

.overlay.loaded {
	z-index: -100;
	transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
	transition-delay: 0.8s;
}

.overlay .overlayDoor:before,
.overlay .overlayDoor:after {
	content: "";
	position: absolute;
	width: 50%;
	height: 100%;
	background: #c19049;
	transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
	transition-delay: 0.8s;
}

.overlay .overlayDoor:before {
	left: 0;
}

.overlay .overlayDoor:after {
	right: 0;
}

.overlay.loaded .overlayDoor:before {
	left: -50%;
}

.overlay.loaded .overlayDoor:after {
	right: -50%;
}

.overlay.loaded .overlayContent {
	opacity: 0;
	margin-top: -15px;
}

.overlay .overlayContent {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}

.overlay .overlayContent .skip {
	display: block;
	width: 130px;
	text-align: center;
	margin: 50px auto 0;
	cursor: pointer;
	color: #fff;
	font-family: "Nunito";
	font-weight: 700;
	padding: 12px 0;
	border: 2px solid #fff;
	border-radius: 3px;
	transition: 0.2s ease;
}

.overlay .overlayContent .skip:hover {
	background: #ddd;
	color: #444;
	border-color: #ddd;
}

/* Page-load overlay spinner — scoped to .overlay so it doesn't collide with the differently-styled
   .loader used for the collection "load more" spinner (both reused the bare .loader class name in
   the legacy per-page @yield('style') blocks; scoping avoids one clobbering the other here). */
.overlay .loader {
	width: 128px;
	height: 128px;
	border: 3px solid #fff;
	border-bottom: 3px solid transparent;
	border-radius: 50%;
	position: relative;
	animation: cs-spin 1s linear infinite;
	display: flex;
	justify-content: center;
	align-items: center;
}

.overlay .loader .inner {
	width: 64px;
	height: 64px;
	border: 3px solid transparent;
	border-top: 3px solid #fff;
	border-radius: 50%;
	animation: cs-spin-inner 1s linear infinite;
}

/* Collection "load more" infinite-scroll spinner (ported from tabSection.blade.php's own
   page-specific inline style — was never wired up into the theme's CSS at all before). */
.collectionpagewrap .loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #b17d41;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 20px auto;
	animation: cs-spin 2s linear infinite;
}

@keyframes cs-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes cs-spin-inner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-720deg); }
}

.vector-map-label {
	position: absolute;
	display: none;
	border-radius: 3px;
	background: #292929;
	color: white;
	font-family: sans-serif, Verdana;
	font-size: smaller;
	padding: 3px;
	pointer-events: none;
}

#globalVMapOnHome,
#globalVMap {
	width: 100%;
}

/* Ported from home-new.blade.php's own inline <style> block (separate from main.blade.php's). */
.heroarea .slide-item-bg {
	height: 670px;
}

.hero-slide {
	height: 670px;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	.heroarea .slide-item-bg {
		height: 330px;
	}

	.hero-slide {
		height: 330px;
		overflow: hidden;
	}
}

/*
 * Canonical rich-text content styling — the single source of truth for any long-form article
 * content (Services landing pages, generic CMS pages, and similar). Apply `.new-content-section`
 * to the wrapper around any block of pasted/WYSIWYG HTML content, whether it's laid out full-width
 * (`.fullccontentcms`, no sidebar image) or two-column (`.GeneralLeft`/`.GeneralRight`, with a
 * sidebar image) — this covers both, so new pages built either way automatically match.
 *
 * These pages were originally hand-pasted from different rich-text editors/exports, each carrying
 * its own inline font-size/color spans, some using real <h2>/<h3> tags and others faking headings
 * with <p><strong>. The `!important` on font-size/line-height/color here is deliberate: it's the
 * only way to normalize appearance without hand-editing every inline `style="..."` span in every
 * page's content — new pages pasted in the same messy way will still render consistently.
 */
.new-content-section {
	text-align: left;
	color: #545352;
	font-family: SohoStd-Regular;
	/* Guaranteed breathing room below the breadcrumb bar regardless of which tag happens to come
	   first in the content (a <p> has no top margin of its own, unlike h1-h6, so pages starting
	   with plain prose instead of a heading were rendering flush against the breadcrumb). */
	padding-top: 25px;
}

.new-content-section h1,
.new-content-section h2,
.new-content-section h3,
.new-content-section h4,
.new-content-section h5,
.new-content-section h6 {
	font-family: SohoStd-Regular;
	color: #ab7229;
	font-weight: 700;
	text-align: left;
	margin: 30px 0 15px;
}

.new-content-section h1 { font-size: 28px; line-height: 36px; }
.new-content-section h2 { font-size: 24px; line-height: 32px; }
.new-content-section h3 { font-size: 19px; line-height: 27px; }
.new-content-section h4 { font-size: 17px; line-height: 25px; }
.new-content-section h5,
.new-content-section h6 { font-size: 15px; line-height: 23px; }

.new-content-section p,
.new-content-section p span,
.new-content-section li span {
	font-family: SohoStd-Regular !important;
	font-size: 15px !important;
	line-height: 26px !important;
	color: #545352 !important;
	background: transparent !important;
	text-align: left;
	margin-bottom: 15px;
}

.new-content-section p:empty {
	display: none;
}

.new-content-section strong,
.new-content-section p strong,
.new-content-section li strong {
	font-weight: bold;
	color: inherit;
}

.new-content-section a {
	color: #ab7229;
	text-decoration: underline;
}

/*
 * stylesn.css has a couple of *unscoped* `ul li { display: inline-block; float: left; padding:
 * ...20px... }` rules meant for a nav/tag widget elsewhere on the site. Because a bare `ul`/`li`
 * selector is how content lists were being styled before, those legacy rules kept winning on the
 * properties this file didn't redeclare (display/float/padding) — short list items ended up
 * inline-block/floated with huge padding, which is why nested lists especially rendered as
 * centered, widely-spaced pairs instead of a normal bulleted list.
 *
 * Fix: dedicated classes (`.cs-content-list`, `.cs-content-list-ol`) instead of bare `ul`/`li`
 * tag selectors. A class selector already outranks stylesn.css's unscoped element selector on
 * every property, every time, with no `!important` needed and no risk of the next unscoped `ul`/
 * `li` rule anyone adds anywhere else in the CSS ever winning again. Apply `.cs-content-list` to
 * every `<ul>` (or `.cs-content-list-ol` to `<ol>`) inside `.new-content-section` content;
 * `<li>`s underneath need no class of their own.
 */
.new-content-section .cs-content-list,
.new-content-section .cs-content-list-ol {
	list-style: disc;
	margin: 0 0 20px 20px;
	padding: 0;
}

.new-content-section .cs-content-list-ol {
	list-style: decimal;
}

.new-content-section .cs-content-list .cs-content-list,
.new-content-section .cs-content-list-ol .cs-content-list {
	list-style: circle;
	margin: 5px 0 5px 20px;
}

.new-content-section .cs-content-list li,
.new-content-section .cs-content-list-ol li {
	display: list-item;
	float: none;
	font-family: SohoStd-Regular;
	font-size: 15px;
	color: #545352;
	text-align: left;
	line-height: 26px;
	padding: 0;
	margin-bottom: 10px;
}

.new-content-section .cs-content-list li strong,
.new-content-section .cs-content-list-ol li strong {
	font-weight: bold;
	color: #ab7229;
}

/* Fallback for any bare <ul>/<li> not yet migrated to the classes above — same rules, kept as a
   safety net so nothing regresses while pages get updated. */
.new-content-section ul:not(.cs-content-list):not(.cs-content-list-ol),
.new-content-section ol:not(.cs-content-list):not(.cs-content-list-ol) {
	list-style: disc;
	margin: 0 0 20px 20px;
	padding: 0;
}

.new-content-section ol:not(.cs-content-list):not(.cs-content-list-ol) {
	list-style: decimal;
}

.new-content-section li {
	display: list-item !important;
	float: none !important;
	font-family: SohoStd-Regular;
	font-size: 15px;
	color: #545352;
	text-align: left;
	line-height: 26px;
	padding: 0 !important;
	margin-bottom: 10px;
}

.new-content-section li strong {
	font-weight: bold;
	color: #ab7229;
}

.new-content-section table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 25px;
}

.new-content-section table th,
.new-content-section table td {
	border: 1px solid #ddd;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
	line-height: 22px;
}

.new-content-section table th {
	background-color: #ffe9c0;
	color: #6a4212;
	font-weight: 700;
}

.new-content-section table tr:nth-child(even) td {
	background-color: #fbfbfb;
}

.new-content-section .GeneralRight img,
.new-content-section .fullccontentcms img {
	max-width: 100%;
	height: auto;
}

/* The sidebar image column is almost always much shorter than the article text beside it —
   left top-anchored, that reads as a large empty gap under the image for the rest of the page.
   Sticky keeps the image in view as the reader scrolls the article instead. Desktop only: on
   mobile the columns stack, so sticky would just pin the image awkwardly mid-scroll. */
@media (min-width: 768px) {
	.new-content-section .GeneralRight {
		position: sticky;
		top: 100px;
	}
}

/* Some pasted content wraps each <li>'s text in its own <p> (valid but redundant) — kill the
   paragraph's own bottom margin there so it doesn't stack on top of the li's margin. */
.new-content-section li p {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Blog redesign — listing grid, featured post, pagination, detail page meta,
   tags, share buttons, and the sidebar "recent post" cards. New dedicated
   `.cs-blog-*` classes throughout (same reasoning as `.cs-content-list`
   earlier: a class always wins over stylesn.css's unscoped element rules,
   no !important needed, and nothing here can be clobbered by legacy CSS).
   ========================================================================== */

.cs-blog-intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}

.cs-blog-intro h1 {
	font-family: SohoStd-Regular;
	color: #292929;
	font-size: 32px;
	margin-bottom: 10px;
}

.cs-blog-intro p {
	color: #6a6a6a;
	font-size: 16px;
	line-height: 26px;
}

/* Featured (latest) post — large editorial card. */
.cs-blog-featured {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 35px;
	align-items: center;
	background: #fbfbfb;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 50px;
}

.cs-blog-featured__image {
	display: block;
	width: 100%;
	height: 360px;
	background-size: cover;
	background-position: center;
}

.cs-blog-featured__body {
	padding: 10px 35px 10px 0;
}

.cs-blog-chip {
	display: inline-block;
	background: #ffe9c0;
	color: #ab7229;
	font-family: SohoStd-Regular;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 14px;
}

.cs-blog-featured__body h2 {
	font-family: SohoStd-Regular;
	font-size: 26px;
	line-height: 34px;
	margin: 0 0 14px;
}

.cs-blog-featured__body h2 a {
	color: #292929;
	text-decoration: none;
}

.cs-blog-featured__body h2 a:hover {
	color: #ab7229;
}

.cs-blog-featured__body p {
	color: #6a6a6a;
	font-size: 15px;
	line-height: 25px;
	margin-bottom: 18px;
}

.cs-blog-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ab7229;
	font-family: SohoStd-Regular;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.cs-blog-readmore i {
	transition: transform 0.2s ease;
}

.cs-blog-readmore:hover i {
	transform: translateX(4px);
}

/* Card grid. */
.cs-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 40px;
}

@media (max-width: 991px) {
	.cs-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.cs-blog-featured { grid-template-columns: 1fr; }
	.cs-blog-featured__image { height: 260px; }
	.cs-blog-featured__body { padding: 0 25px 25px; }
}

@media (max-width: 600px) {
	.cs-blog-grid { grid-template-columns: 1fr; }
}

.cs-blog-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cs-blog-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.cs-blog-card__image-link {
	display: block;
	overflow: hidden;
}

.cs-blog-card__image {
	width: 100%;
	height: 190px;
	background-size: cover;
	background-position: center;
	transition: transform 0.35s ease;
}

.cs-blog-card:hover .cs-blog-card__image {
	transform: scale(1.06);
}

.cs-blog-card__body {
	padding: 20px 22px 24px;
}

.cs-blog-card__date {
	font-family: SohoStd-Regular;
	font-size: 12px;
	color: #ab7229;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.cs-blog-card__body h4 {
	font-family: SohoStd-Regular;
	font-size: 17px;
	line-height: 24px;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cs-blog-card__body h4 a {
	color: #292929;
	text-decoration: none;
}

.cs-blog-card__body h4 a:hover {
	color: #ab7229;
}

.cs-blog-card__body p {
	color: #6a6a6a;
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pagination. */
.cs-blog-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 20px 0 10px;
	flex-wrap: wrap;
}

.cs-blog-pagination a,
.cs-blog-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 6px;
	border: 1px solid #e2e2e2;
	color: #545352;
	font-family: SohoStd-Regular;
	font-size: 14px;
	text-decoration: none;
}

.cs-blog-pagination a:hover {
	border-color: #ab7229;
	color: #ab7229;
}

.cs-blog-pagination span.current {
	background: #ab7229;
	border-color: #ab7229;
	color: #fff;
}

/* Detail page — meta bar, share buttons, tag pills, sidebar cards. */
.cs-blog-detail-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin: 6px 0 20px;
	color: #6a6a6a;
	font-size: 14px;
	font-family: SohoStd-Regular;
}

.cs-blog-detail-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cs-blog-detail-meta i {
	color: #ab7229;
}

/* Full image, uncropped — these are infographic-style featured images with text baked in
 * (headline, icons), so object-fit:cover was cutting off real content, not just empty space. */
.cs-blog-hero-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 25px;
}

/* Blog post hero banner: solid brand colour instead of the stock photo background. Scoped to
 * .cs-blog-banner (only single.php's blog branch) rather than changing .innerbanner itself, which
 * Trade Show / News & Media / the generic post banner also use with a real background image. */
.innerbanner.cs-blog-banner {
	background: #ab7229;
	padding: 50px 0;
}

.innerbanner.cs-blog-banner::after {
	content: none;
}

.innerbanner.cs-blog-banner h1 {
	text-shadow: none;
}

.cs-blog-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 35px;
	padding-top: 25px;
	border-top: 1px solid #ececec;
}

.cs-blog-share span {
	font-family: SohoStd-Regular;
	font-size: 14px;
	color: #545352;
	font-weight: 700;
	margin-right: 4px;
}

.cs-blog-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f5f5f5;
	color: #545352;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.cs-blog-share a:hover {
	background: #ab7229;
	color: #fff;
}

/* Play-button overlay for News & Media cards backed by a YouTube video instead of an image
   (page-templates/page-news-and-media.php uses the video's own thumbnail as the card background). */
.cs-blog-featured__image--video::after,
.cs-blog-card__image--video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='22' height='22'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 58% center;
	background-size: 22px;
}

.cs-blog-featured__image--video,
.cs-blog-card__image--video {
	position: relative;
}

.catewrap .sub-btn {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 14px;
	border-radius: 20px;
	background: #f5f5f5;
	color: #545352 !important;
	font-size: 13px;
	border: none;
}

.catewrap .sub-btn:hover {
	background: #ab7229;
	color: #fff !important;
}

.RecentPost li {
	border-bottom: 1px solid #ececec;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.RecentPost li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.RecentPost li img {
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.RecentPost li h4 {
	font-size: 11px;
	color: #ab7229;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.RecentPost li p {
	font-size: 14px;
	line-height: 20px;
	color: #292929;
	margin: 0;
}

/* "Most Recent Blogs" section header (template-parts/recent-blogs.php, shown on ~14 pages plus the
   homepage). stylesn.css's `.allpagesblog h2 a { float: right; ... }` is a bare grey box left over
   from the legacy design — it doesn't sit on the same line as the heading text and clashes with the
   redesigned card grid below it. Flex row instead: title and button share one baseline, button
   matches the new brand-styled pill/button convention used elsewhere. */
.allpagesblog h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	float: none;
	/* stylesn.css sets margin-bottom:0 here — it relied on the *grid items* having their own
	   top margin for spacing instead (the old float-based .blogbox had margin:20px 0 0). The new
	   CSS-grid .cs-blog-grid has no such per-item top margin, so without this the header row and
	   the cards below it touch directly, as seen in the redesign. */
	margin-bottom: 30px;
}

.allpagesblog h2 a {
	float: none;
	background: #ab7229;
	color: #fff;
	font-family: SohoStd-Regular;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 25px;
	white-space: nowrap;
}

.allpagesblog h2 a:hover {
	background: #292929;
	color: #fff;
}

/* ==========================================================================
 * Contact Form 7 (Contact Us / Career Application / Product Enquiry forms).
 * ========================================================================== */

/* CF7 auto-wraps every field in <p><span class="wpcf7-form-control-wrap">...</span></p> — collapse
 * those wrapper elements out of the box model so .form-group's own spacing/flex layout applies
 * cleanly, with no double spacing. */
.wpcf7-form p,
.wpcf7-form-control-wrap {
	display: contents;
}

.wpcf7-form .form-group {
	margin-bottom: 20px;
}

/* Icon-prefixed inputs: brand-colored icon, smooth focus state, rounded corners.
 *
 * stylesn.css only pins the icon absolutely via ".form .form-group span" — i.e. it requires a
 * ".form" ANCESTOR class on top of ".form-group", which not every CF7 form's wrapper carries (only
 * the Contact Us form's outer <div> happens to have "row form"). Pin position/top/left explicitly
 * here, scoped to ".wpcf7-form" instead of ".form", so every CF7 form's icon is absolutely
 * positioned regardless of whether its markup also happens to include the legacy ".form" class —
 * without this, the icon renders in normal flow and the field wraps below it instead of beside it.
 */
.wpcf7-form .form-group {
	position: relative;
}

.wpcf7-form .form-group > span {
	position: absolute !important;
	top: 17px !important;
	left: 13px !important;
	transition: color 0.2s ease;
	z-index: 1;
}

.wpcf7-form .form-control {
	box-sizing: border-box;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background-color: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form .form-control:focus {
	border-color: #ab7229;
	box-shadow: 0 0 0 3px rgba(171, 114, 41, 0.15);
}

.wpcf7-form .form-group:focus-within > span {
	color: #ab7229;
}

.wpcf7-form select.form-control {
	cursor: pointer;
}

.wpcf7-form textarea.form-control {
	border-radius: 10px;
	height: auto;
	min-height: 175px;
	resize: vertical;
}

/* Homepage "Contact Us" section (template-parts/global-contact-form.php) — the message box matches
 * the combined height of the left column's 3 stacked fields (48px input + 20px gap, x3, minus the
 * trailing gap) so both columns read as balanced. */
.homecontact .wpcf7-form textarea.form-control {
	min-height: 184px;
}

/* No icons on this form (see inc/migration/create-cf7-forms.php) — drop the base .form-control's
 * icon-space left padding so text starts flush instead of leaving unexplained blank space. */
.homecontact .wpcf7-form .form-control {
	padding-left: 15px;
}

/* The dedicated /contact-us/ page ("Write to Us") keeps its own original plain single-column
 * design — no icons, square corners, full-width uppercase button — which stylesn.css already
 * defines via .contactwrap-scoped rules (.contactwrap .form-control, .contactwrap .sub-btn). Those
 * rules match CF7's fields fine on their own; this block only undoes the icon+2-column+rounded
 * "stylish" treatment meant for the icon-prefixed forms elsewhere, so it doesn't leak in here. */
.contactwrap .wpcf7-form > .row.form > [class*="col-sm-"] {
	float: none;
	width: 100%;
}

.contactwrap .wpcf7-form .form-group > span {
	display: none;
}

.contactwrap .wpcf7-form .form-control {
	border-radius: 0;
	border-color: #d1c9c9;
}

.contactwrap .wpcf7-form .form-control:focus {
	box-shadow: none;
}

.contactwrap .wpcf7-form textarea.form-control {
	border-radius: 0;
}

.contactwrap .wpcf7-form button[type="submit"] i {
	display: none;
}

.contactwrap .wpcf7-form button[type="submit"]:hover {
	transform: none;
	box-shadow: none;
}

.wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 10px;
	vertical-align: middle;
}

.wpcf7-form .wpcf7-response-output {
	border-radius: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
}

/* CF7 core colors this border amber/yellow for the validation-error state specifically (form.invalid)
 * — override to the same red used for per-field errors so both read as one consistent "error" color. */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}

/* Quick Enquiry modal: the CF7 form now supplies its own submit button inside .modal-body, so give
 * it the same top spacing the old separate .modal-footer button had. */
#EnquiryNow .wpcf7-form .form-group:last-child {
	margin-top: 10px;
	margin-bottom: 0;
}

/* Per-field validation errors: a small, clearly-red line directly under the field, rather than
 * CF7's default plain (and here, effectively invisible-looking) red text.
 *
 * CF7 renders this as <span class="wpcf7-not-valid-tip"> INSIDE the same .wpcf7-form-control-wrap
 * that holds the field itself — since display:contents only changes box generation, not DOM
 * descendance, stylesn.css's icon-positioning rule (".form-group span { position:absolute;
 * top:17px; left:13px; color:#999; font-size:18px }") still matches this span too, pinning it on
 * top of the field (in the icon's spot) in light gray at 18px. !important is used deliberately here
 * — this is overriding a same-purpose property (position/color/font-size) on the same selector
 * shape, not a specificity workaround, and stylesn.css is a large legacy vendor file not meant to
 * be hand-edited for a single exception like this. */
.wpcf7-form .wpcf7-not-valid-tip {
	position: static !important;
	display: block !important;
	background: none !important;
	color: #c0392b !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	padding: 0 !important;
	margin: 4px 0 12px !important;
	border: none !important;
}

/* Hides a field's error tip the moment the visitor clicks back into it, instead of leaving it
 * displayed (and instead of waiting for CF7's normal re-validate-on-blur/submit cycle) — the tip
 * is the field's next sibling within the same (display:contents) wrap, so :focus + general sibling
 * combinator reaches it directly with no JS needed. */
.wpcf7-form .form-control:focus ~ .wpcf7-not-valid-tip {
	display: none !important;
}

/* Field borders turn red too, matching the error text. */
.wpcf7-form .wpcf7-not-valid {
	border-color: #c0392b !important;
}

.wpcf7-form .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* Visual-only reCAPTCHA v2 widget (see inc/migration/create-cf7-forms.php) sits in its own
 * .form-group; the widget itself has no .form-control styling to inherit. */
.wpcf7-form .g-recaptcha {
	margin-bottom: 15px;
	transform-origin: 0 0;
}

/* Submit buttons: a subtle lift on hover for a more polished feel. */
.wpcf7-form button[type="submit"] {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(171, 114, 41, 0.3);
}

/* Career Application's resume upload: Bootstrap-style custom file input (invisible, full-size,
 * layered under a decorative label + "Browse" button drawn via ::after in stylesn.css). The CF7
 * wrap span is already display:contents (see above), so .custom-file-input sits directly inside
 * .upImg as this markup expects. */
.upImg {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}

.custom-file-label {
	border-radius: 6px 0 0 6px;
}

/* =====================================================================
 * Quick Enquiry form redesign (.detailform, on the Product Detail page).
 * Rest of the page is unchanged legacy styling — this is scoped to just the
 * enquiry card so it can't affect anything else. Preserves the CF7 shortcode
 * output, field ids, and the .form-control/.form-group/.sub-btn classes the
 * rest of the site (and inc/cf7-integration.php) already relies on.
 * ===================================================================== */
.productdetailwrap .detailform {
	background: #fff;
	border: 1px solid #ececec;
	border-top: 3px solid #ab7229;
	padding: 28px 28px 24px;
	box-shadow: 0 10px 30px rgba(41, 41, 41, 0.06);
}

.productdetailwrap .detailform h3 {
	color: #292929;
	font-family: SohoStd-ExtraLight, "SohoStd-Regular", serif;
	font-size: 22px;
	text-transform: none;
	margin-bottom: 6px;
}

.productdetailwrap .detailform h3::before {
	content: "Tell us what you need";
	display: block;
	font-family: "SohoStd-Regular", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ab7229;
	margin-bottom: 8px;
}

/* Neutralise Bootstrap's .row negative margins / .col-sm-6 gutter padding —
 * the CF7 form markup (inc/migration/create-cf7-forms.php) pairs fields with
 * .row > .col-sm-6.custom-padding, which otherwise bleeds past this card's
 * own padding. */
.productdetailwrap .detailform .wpcf7-form .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 18px;
	margin: 0;
}

.productdetailwrap .detailform .wpcf7-form .row > [class*="col-"] {
	padding: 0;
	min-width: 0; /* allow shrinking below the <input size="40"> intrinsic content width */
	flex: 1 1 0;
}

.productdetailwrap .detailform .form-group {
	margin-bottom: 16px;
}

/* The actual bug this whole block works around: stylesn.css has a leftover rule from the old
 * hand-written icon-prefixed inputs — `.form .form-group span{position:absolute;top:17px;left:13px}`
 * — meant for the <span><i class="..."></i></span> icon wrapper those used. CF7's own markup also
 * wraps every field in a <span class="wpcf7-form-control-wrap">, which that old selector matches
 * too, so every field was being pulled completely out of normal flow and absolutely positioned at
 * a fixed 17/13px offset — which is why pairing them into two flex columns produced overlapping,
 * seemingly-random-width fields instead of a real 2-up layout. `position: static` below is the
 * actual fix; the rest (display/width/margin) just restores normal CF7 "no double spacing" sizing
 * on top of that, same outcome as the sitewide display:contents rule, without it. */
.productdetailwrap .detailform .wpcf7-form p,
.productdetailwrap .detailform .wpcf7-form-control-wrap {
	display: block;
	position: static;
	width: 100%;
	margin: 0;
}

.productdetailwrap .detailform .form-control {
	width: 100%;
	height: 46px;
	border: 1px solid #ddd;
	border-radius: 2px;
	background: #fff;
	padding: 0 14px;
	font-size: 14px;
	color: #292929;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.productdetailwrap .detailform select.form-control {
	padding-right: 32px;
}

.productdetailwrap .detailform textarea.form-control {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
}

.productdetailwrap .detailform .form-control:focus {
	border-color: #ab7229;
	box-shadow: 0 0 0 3px rgba(171, 114, 41, 0.14);
	outline: none;
}

.productdetailwrap .detailform .wpcf7-not-valid-tip {
	font-size: 12px;
	margin-top: 4px;
}

.productdetailwrap .detailform .g-recaptcha {
	margin-bottom: 16px;
	transform-origin: 0 0;
}

.productdetailwrap .detailform .sub-btn {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-top: 2px;
}

@media (max-width: 480px) {
	.productdetailwrap .detailform .wpcf7-form .row {
		grid-template-columns: 1fr;
	}

	.productdetailwrap .detailform {
		padding: 22px 18px 18px;
	}
}