/**
 * Styles for the MRB custom Elementor widgets:
 * Spec Table, Info + Image, Process Steps (product detail sections).
 *
 * Loaded by Elementor only on pages using these widgets (get_style_depends).
 *
 * @package MRB
 */

/* ---------- Shared ---------- */

/* Section rhythm (--mrb-pd-gap / --mrb-pd-head-gap) comes from
   section-rhythm.css, loaded as a dependency of this stylesheet. */

.mrb-section {
	--mrb-orange: #f5821f;
	--mrb-dark: #1a1a1a;
	--mrb-text: #666672;
	--mrb-border: #d9d9de;
	font-family: "DM Sans", sans-serif;
	color: var(--mrb-text);
}

.mrb-section-head {
	margin-bottom: 40px;
}

.mrb-tagline {
	display: block;
	color: var(--mrb-orange);
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 12px;
}

.mrb-tagline::after {
	content: "";
	display: block;
	height: 1px;
	background: #e5e5e8;
	margin-top: 12px;
}

.mrb-heading {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 2.1vw, 40px);
	line-height: 1.2;
	color: var(--mrb-dark);
	margin: 0;
}

.mrb-section-desc {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mrb-dark);
	margin: 16px 0 0;
}

.mrb-text {
	font-size: 18px;
	line-height: 1.6;
}

.mrb-text p {
	margin: 0 0 16px;
}

.mrb-text p:last-child {
	margin-bottom: 0;
}

/* ---------- Spec Table ---------- */

.mrb-spec-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mrb-spec-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--mrb-border);
}

.mrb-spec-table th,
.mrb-spec-table td {
	border: 1px solid var(--mrb-border);
	padding: 14px 24px;
	text-align: left;
	font-size: 16px;
	line-height: 1.5;
	vertical-align: top;
}

.mrb-spec-table th {
	font-weight: 600;
	color: var(--mrb-dark);
}

.mrb-spec-table td:first-child {
	width: 24%;
	min-width: 180px;
	color: var(--mrb-dark);
	font-weight: 500;
}

/* ---------- Info + Image ---------- */

.mrb-info-media {
	display: flex;
	align-items: center;
	gap: 64px;
	background: #f8f8f9;
	border: 1px solid var(--mrb-border);
	padding: 56px;
}

.mrb-info-media.mrb-image-right {
	flex-direction: row-reverse;
}

.mrb-info-media-img {
	flex: 0 0 42%;
}

.mrb-info-media-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.mrb-info-media-content {
	flex: 1;
	min-width: 0;
}

.mrb-info-media-content .mrb-heading {
	margin-bottom: 24px;
}

.mrb-bullet-list {
	list-style: disc;
	margin: 20px 0 20px 22px;
	padding: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--mrb-dark);
	font-weight: 500;
}

.mrb-bullet-list li {
	margin-bottom: 8px;
}

/* ---------- Process Steps ---------- */

.mrb-step-list {
	list-style: none;
	margin: 24px 0;
	padding: 0;
}

.mrb-step-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--mrb-dark);
	font-weight: 500;
	margin-bottom: 16px;
}

.mrb-step-list li:last-child {
	margin-bottom: 0;
}

.mrb-step-icon {
	flex-shrink: 0;
	margin-top: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	.mrb-info-media {
		gap: 40px;
		padding: 40px;
	}
}

/* Cards go to a single column a tier earlier than phones — side-by-side is
   too cramped on tablet portrait once the image takes ~40% of the row. */
@media (max-width: 991px) {
	.mrb-info-media,
	.mrb-info-media.mrb-image-right {
		flex-direction: column;
		gap: 32px;
		padding: 32px;
	}

	.mrb-info-media-img {
		flex-basis: auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.mrb-section-head {
		margin-bottom: 24px;
	}

	.mrb-text,
	.mrb-step-list li {
		font-size: 16px;
	}

	/* Card stacks: image above content regardless of position setting. */
	.mrb-info-media,
	.mrb-info-media.mrb-image-right {
		flex-direction: column;
		gap: 24px;
		padding: 24px;
	}

	.mrb-info-media-img {
		flex-basis: auto;
		width: 100%;
	}

	/* Table becomes stacked label/value pairs instead of side-scrolling. */
	.mrb-spec-table thead {
		display: none;
	}

	.mrb-spec-table,
	.mrb-spec-table tbody,
	.mrb-spec-table tr,
	.mrb-spec-table td {
		display: block;
		width: 100%;
	}

	.mrb-spec-table td {
		border: 0;
		padding: 4px 16px;
	}

	.mrb-spec-table tr {
		border-bottom: 1px solid var(--mrb-border);
		padding: 12px 0;
	}

	.mrb-spec-table td:first-child {
		width: 100%;
		min-width: 0;
		padding-top: 8px;
	}

	.mrb-spec-table td:last-child {
		padding-bottom: 8px;
	}
}

/* ------------------------------------------------------------------
 * Product Types Slider (Figma 205:192)
 * ------------------------------------------------------------------ */

.mrb-types-slider-section .mrb-section-head {
	margin-bottom: var(--mrb-pd-head-gap);
}

.mrb-types-heading {
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.2;
}

.mrb-types-swiper {
	overflow: hidden;
	/* Cards bleed past the right edge of the container, per Figma. */
	margin-right: calc(-1 * (100vw - 100%) / 2);
	padding-right: 0;
}

.mrb-type-card {
	outline: none;
}

.mrb-type-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 453 / 500;
}

.mrb-type-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrb-type-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 26px 26px 33px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #000000 87.4%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.mrb-type-card:hover .mrb-type-overlay,
.mrb-type-card:focus .mrb-type-overlay,
.mrb-type-card:focus-within .mrb-type-overlay {
	opacity: 1;
}

.mrb-type-overlay p {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #ffffff;
	margin: 0;
}

.mrb-type-name {
	display: flex;
	align-items: center;
	gap: 25px;
	margin-top: 12px;
}

.mrb-type-star {
	width: 30px;
	height: 30px;
	flex: none;
}

.mrb-type-name a,
.mrb-type-name span {
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 26px;
	color: var(--mrb-dark);
	text-decoration: none;
}

.mrb-type-name a:hover {
	color: var(--mrb-orange);
}

@media (max-width: 767px) {
	.mrb-type-name {
		gap: 16px;
	}

	.mrb-type-name a,
	.mrb-type-name span {
		font-size: 18px;
	}

	.mrb-type-star {
		width: 24px;
		height: 24px;
	}
}

/* ------------------------------------------------------------------
 * Product detail intro section (Figma 205:117) — overrides the Barsi
 * tx_team_lists widget + certification-container styles from home.css.
 * ------------------------------------------------------------------ */

.certification-container.product-detail-container .bs-team-4-area {
	background-color: #ffffff !important;
}

/* The theme's .bs-container-2 steps down (1140px @1366, 720px @768) while
   every other section uses the shared content box. containers.css now puts
   every .bs-container-* on that box site-wide, so no override is needed. */

/* Tagline: Inter 500 18px, normal case, light divider, tight gap below. */
.certification-container.product-detail-container .bs-subtitle-4 {
	text-transform: none;
	border-bottom-color: #e5e5e8;
	padding-bottom: 13px;
	margin-bottom: 12px;
}

.certification-container.product-detail-container .bs-subtitle-4 .text {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
	color: var(--mrb-orange);
}

/* Heading: Albert Sans 700 54/65, no letter-spacing, spans both columns
   like Figma, with the 62px gap to the text/image row below it. */
.certification-container.product-detail-container .bs-team-4-content .title {
	line-height: 1.2;
	letter-spacing: 0;
	margin-bottom: var(--mrb-pd-head-gap);
	grid-column: 1 / -1;
}

/* Content row: 668px text / 620px image, 64px gap, no right bleed.
   display:contents lifts title + paragraph into the grid so the heading
   can span full width while text and image share the second row. */
.certification-container.product-detail-container .bs-team-4-wrap {
	grid-template-columns: 668fr 620fr;
	gap: 0 64px;
	margin-bottom: 0;
	align-items: start;
}

.certification-container.product-detail-container .bs-team-4-content {
	max-width: none;
	display: contents;
}

.certification-container.product-detail-container .bs-team-4-content .disc {
	max-width: none;
	font-size: 18px;
	line-height: 1.28;
	color: #2d2d2d;
	margin-bottom: 0;
}

.certification-container.product-detail-container .bs-team-4-img {
	height: 334px;
	margin-right: 0;
}

.certification-container.product-detail-container .bs-team-4-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma has no team/certificate cards in this section. */
.certification-container.product-detail-container .bs-team-4-member {
	display: none;
}

@media (max-width: 991px) {
	.certification-container.product-detail-container .bs-team-4-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.certification-container.product-detail-container .bs-team-4-content .title {
		margin-bottom: 8px;
	}

	.certification-container.product-detail-container .bs-team-4-img {
		height: auto;
		aspect-ratio: 620 / 334;
	}
}

/* ------------------------------------------------------------------
 * Spec table section — match Figma 205:132.
 * ------------------------------------------------------------------ */

/* Grey full-width band with 72px padding; inner width matched to the
   theme's .bs-container-2 (1344px minus 12px bootstrap gutters) so the
   table aligns exactly with the intro section above it. */
.e-con:has(.mrb-spec-table-section) {
	background-color: #f8f8f9;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.e-con:has(.mrb-spec-table-section) > .e-con-inner {
	padding-top: 0;
	padding-bottom: 0;
}

.mrb-spec-table-section .mrb-section-head {
	margin-bottom: var(--mrb-pd-head-gap);
}

.mrb-spec-table-section .mrb-tagline {
	font-family: "Albert Sans", sans-serif;
	font-size: 18px;
	line-height: 27px;
	margin-bottom: 12px;
}

.mrb-spec-table-section .mrb-heading {
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.2;
}

.mrb-spec-table {
	background: #f8f8f9;
	border: 0.8px solid var(--mrb-dark);
}

.mrb-spec-table th,
.mrb-spec-table td {
	border: 0.8px solid var(--mrb-dark);
	padding: 11px 32px;
	font-size: 18px;
	line-height: 23px;
	color: var(--mrb-dark);
}

.mrb-spec-table th {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	line-height: 22px;
	padding: 22px 32px;
}

.mrb-spec-table td:first-child {
	width: 26.3%;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	line-height: 22px;
	color: var(--mrb-dark);
}

@media (max-width: 1199px) {
	.mrb-spec-table th,
	.mrb-spec-table td {
		padding: 11px 20px;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* Restate the stacked-table mobile styles (the desktop rules above
	   appear later in the file and would otherwise win). */
	.mrb-spec-table td {
		border: 0;
		padding: 4px 16px;
	}

	.mrb-spec-table td:first-child {
		width: 100%;
		padding-top: 8px;
	}

	.mrb-spec-table td:last-child {
		padding-bottom: 8px;
	}
}

/* ------------------------------------------------------------------
 * Product types slider section wrapper — align with the sections above
 * (Figma 205:192: same 1352px start point, 72px padding, white band).
 * ------------------------------------------------------------------ */

/* !important beats the per-element width/padding saved in the Elementor
   editor (post CSS sets max-width:1475px and 40px padding on this section,
   and loads after this file). */
.e-con:has(.mrb-types-slider-section),
.elementor-section:has(.mrb-types-slider-section) {
	background-color: #ffffff;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.e-con:has(.mrb-types-slider-section) > .e-con-inner,
.elementor-section:has(.mrb-types-slider-section) > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Kill the 10px default column-gap padding inside the legacy section so the
   slider's left edge lands exactly on the container edge. */
.elementor-section:has(.mrb-types-slider-section) .elementor-widget-wrap {
	padding: 0;
}

/* Star sits top-aligned in the 37px name row like Figma. */
.mrb-type-name {
	align-items: flex-start;
}

.mrb-type-name a,
.mrb-type-name span {
	margin-top: 5px;
}

/* ------------------------------------------------------------------
 * Material grades grid on product detail pages (Figma 205:230).
 * Base styling comes from infrastructure.css (now loaded on services
 * pages too); these are the product-page-specific deltas.
 * ------------------------------------------------------------------ */

.single-services .facility-title-container {
	/* Head→cards gap: same rhythm as every other section head on this page
	   (overrides infrastructure.css's fixed 62/40px steps). */
	padding-bottom: var(--mrb-pd-head-gap) !important;
}

/* infrastructure.css pins 40px on this section; on product pages the grid is
   the section's end, so it must carry the full section gap at every tier. */
.single-services .facility-process-container {
	/* vertical padding: spacing.css */
}

/* Figma card gaps: 32px between rows, 16px between columns. */
.single-services .facility-process-container .elementor-container {
	gap: 32px 16px;
}

@media (max-width: 767px) {
	/* Single-column phones: 32px rows read as excess air — 16px between
	   stacked cards, and the section gutter is the only side inset. */
	.single-services .facility-process-container .elementor-container {
		gap: 16px;
	}

	.single-services .facility-process-container .elementor-column > .elementor-element-populated {
		padding: 0 !important;
	}
}

/* Card border per Figma: 0.8px #bebebe (theme ships 1px #dbdbdb). */
.single-services .facility-process-container .bs-career-item-single {
	border: 0.8px solid #bebebe;
}

/* ------------------------------------------------------------------
 * Info + Image cards — match Figma 205:316.
 * ------------------------------------------------------------------ */

/* Container: same 1344px alignment as every section above, 72px section
   padding and 72px gap between the two cards (!important beats the 40px
   padding saved in the editor's post CSS). */
.e-con:has(.mrb-info-media) {
	gap: calc(var(--mrb-space) * 2);
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.e-con:has(.mrb-info-media) > .e-con-inner {
	padding-top: 0;
	padding-bottom: 0;
	gap: calc(var(--mrb-space) * 2);
}

.mrb-info-media {
	background: #e8e8e8;
	border: 1.6px solid #1a1a1a;
	padding: 56px 52px;
}

.mrb-info-media-img {
	flex: 0 0 37.7%;
}

.mrb-info-media-content .mrb-heading {
	font-size: clamp(28px, 2.8vw, 54px);
	line-height: 1.2;
	color: #2d2d2d;
}

.mrb-info-media .mrb-text {
	color: #333340;
	line-height: 23px;
}

/* Figma list: disc bullets, Inter 500 18/22, #333340. */
.mrb-bullet-list {
	list-style: disc;
	margin: 24px 0 24px 24px;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: #333340;
}

.mrb-bullet-list li {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	/* Restate the stacked-card mobile padding (the 56px/52px desktop rule
	   above appears later in the file and would otherwise win). */
	.mrb-info-media {
		padding: 24px;
	}

	.mrb-info-media-img {
		flex-basis: auto;
	}

	.mrb-bullet-list {
		font-size: 16px;
		line-height: 1.4;
	}
}

/* ------------------------------------------------------------------
 * Manufacturing Standards tabs (Figma 277:349) — restyle the Barsi
 * tx_tabs style_4 (.bs-work-1) component on product detail pages.
 * ------------------------------------------------------------------ */

/* Width and gutters come from the shared content box (containers.css). */

.single-services .bs-work-1-area {
	padding-top: 0;
}

/* The Elementor wrapper around the tabs widget carries its own 40px bottom
   padding on top of the widget's section gap — strip it. */
.single-services .elementor-section:has(> .elementor-container .bs-work-1-area) {
	padding-bottom: 0 !important;
}

/* Columns: 731px tabs / 527px content, 86px gap, top aligned. */
.single-services .bs-work-1-wrap {
	grid-template-columns: 731fr 527fr;
	gap: 86px;
	align-items: start;
}

/* Tab rows: Albert Sans 600 34/41, 16px vertical padding, 24px gap,
   divider below each row instead of above. */
.single-services .bs-work-1-tabs-btn .nav-link {
	font-family: "Albert Sans", sans-serif;
	font-size: clamp(22px, 1.8vw, 34px);
	line-height: 1.2;
	font-weight: 600;
	color: #666672;
	padding: 16px 0;
	gap: 24px;
	align-items: center;
	border-top: 0;
	border-bottom: 1px solid #878787;
}

.single-services .bs-work-1-tabs-btn .nav-link:not(:first-child) {
	border-top: 0;
}

.single-services .bs-work-1-tabs-btn .nav-link .number {
	font-size: 25px;
	line-height: 30px;
	font-weight: 700;
	transform: none;
}

.single-services .bs-work-1-tabs-btn .nav-link.active {
	color: #f5821f;
	font-weight: 600;
}

/* Active underline: 260px orange line; the theme hides it on smaller
   viewports — keep it visible on desktop. */
.single-services .bs-work-1-tabs-btn .nav-link .line {
	background-color: #f16319;
}

@media (min-width: 1200px) {
	.single-services .bs-work-1-tabs-btn .nav-link .line {
		display: block;
	}
}

/* Content pane caption: DM Sans 18/23 #666672 (theme ships #7a7a7a). */
.single-services .bs-work-1-tabs-item-single .item-disc {
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	line-height: 23px;
	color: #666672;
	margin-bottom: 0;
}

@media (max-width: 991px) {
	.single-services .bs-work-1-wrap {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.single-services .bs-work-1-tabs-item-single .item-img {
		height: auto;
	}
}

/* ------------------------------------------------------------------
 * Flange Manufacturing Process (Figma 298:1493) — scoped to the custom
 * .Manufactor-process-container class set on the Elementor section.
 * ------------------------------------------------------------------ */

.Manufactor-process-container {
	background-color: #f8f8f9 !important;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.Manufactor-process-container > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.Manufactor-process-container .elementor-widget-wrap {
	padding: 0;
}

.Manufactor-process-container .mrb-section-head {
	margin-bottom: var(--mrb-pd-head-gap);
}

.Manufactor-process-container .mrb-heading {
	font-size: clamp(30px, 2.8vw, 54px);
	line-height: 1.2;
}

/* Intro paragraph: DM Sans 18/28 #2d2d2d, 12px gap to the list. */
.Manufactor-process-container .mrb-text {
	color: #2d2d2d;
	line-height: 28px;
}

.Manufactor-process-container .mrb-step-list {
	margin: 12px 0 24px;
}

/* Steps: Inter 500 18/22 #2d2d2d, 16px between rows. */
.Manufactor-process-container .mrb-step-list li {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #2d2d2d;
	margin-bottom: 16px;
}

.Manufactor-process-container .mrb-step-icon {
	margin-top: 2px;
}

/* Closing line: DM Sans 18/23. */
.Manufactor-process-container .mrb-step-list + .mrb-text {
	line-height: 23px;
}

@media (max-width: 767px) {
	.Manufactor-process-container .mrb-step-list li {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------
 * Applications of Flanges (Figma 205:339) — scoped to the custom
 * .application-title-container / .application-data-container classes.
 * ------------------------------------------------------------------ */

/* Heading block: same treatment as the other section heads. */
.application-title-container {
	background-color: #ffffff;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.application-title-container > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.application-title-container .bs-subtitle-1 .icon {
	display: none !important;
}

.application-title-container .bs-subtitle-1,
.application-title-container .bs-subtitle-1 * {
	text-transform: none !important;
}

.application-title-container .bs-subtitle-1 {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: #f5821f;
	width: 100%;
	padding-bottom: 13px;
	border-bottom: 1px solid #e5e5e8;
}

.application-title-container .bs-sec-title-1 {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 2.8vw, 54px);
	line-height: 1.2;
	color: #1a1a1a;
	margin-bottom: 16px;
}

/* Card grid: 1344px aligned, Figma gaps and separator lines. */
.application-data-container {
	background-color: #ffffff;
}

/* No max-width of its own: at 1320px it sat 12px inside the shared 1344px
   box, so the cards started 12px right of the "Applications" heading above
   them at every width above 1400px. */
.application-data-container .bs-core-feature-4-area {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid #bebebe;
}

.application-data-container .bs-core-feature-4-line {
	background: #bebebe;
}

.application-data-container .bs-core-feature-4-wrap {
	position: relative;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px 28px;
	padding: 24px 30px;
}

/* Continuous divider between the two card rows. */
.application-data-container .bs-core-feature-4-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #bebebe;
}

.application-data-container .bs-core-feature-4-item {
	padding: 30px 0;
}

.application-data-container .bs-core-feature-4-item:not(:last-child) {
	padding-right: 28px;
	border-right: 1px solid #bebebe;
}

/* No trailing border at the end of the first row (4-up grid). */
.application-data-container .bs-core-feature-4-item:nth-child(4) {
	border-right: none;
	padding-right: 0;
}

.application-data-container .bs-core-feature-4-item .item-title,
.application-data-container .bs-core-feature-4-item .item-title a {
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 26px;
	color: #1a1a1a;
}

.application-data-container .bs-core-feature-4-item .item-title {
	margin-bottom: 42px;
}

.application-data-container .bs-core-feature-4-item .item-icon {
	margin-bottom: 42px;
	height: 64px;
	display: flex;
	align-items: flex-end;
}

.application-data-container .bs-core-feature-4-item .item-disc {
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	line-height: 23px;
	color: #2d2d2d;
	margin-bottom: 0;
}

@media (max-width: 1200px) {
	.application-data-container .bs-core-feature-4-wrap {
		grid-template-columns: 1fr 1fr;
		padding: 24px 12px;
	}

	/* Grades cards: drop the extra Elementor column padding (12px all round
	   at this tier) — it stacks on top of the grid gap between cards and
	   pushes them off the 12px section gutter. The gap alone spaces them. */
	.single-services .facility-process-container .elementor-column > .elementor-element-populated {
		padding: 0 !important;
	}

	.application-data-container .bs-core-feature-4-wrap::after {
		display: none;
	}

	.application-data-container .bs-core-feature-4-item:not(:last-child),
	.application-data-container .bs-core-feature-4-item:nth-child(4) {
		border-right: none;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.application-data-container .bs-core-feature-4-wrap {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 16px 12px;
	}

	/* Desktop cards carry 42px title/icon gaps and 30px vertical padding —
	   step them down so single-column cards stay compact. */
	.application-data-container .bs-core-feature-4-item {
		padding: 16px 0;
	}

	.application-data-container .bs-core-feature-4-item .item-title,
	.application-data-container .bs-core-feature-4-item .item-icon {
		margin-bottom: 20px;
	}

	.application-data-container .bs-core-feature-4-item .item-icon {
		height: 48px;
	}
}

/* ------------------------------------------------------------------
 * FAQ section (Figma 205:639) — scoped to the custom .faq-continer
 * class set on the Elementor section.
 * ------------------------------------------------------------------ */

.faq-continer {
	background-color: #ffffff;
}

/* Width and side gutter come from the site-wide content box in
   containers.css; only the vertical padding is this section's own. */
.faq-continer > .elementor-container {
	padding-top: 0;
	padding-bottom: 0;
}

.faq-continer .elementor-widget-wrap {
	padding: 0;
}

/* Elementor's default 10px column padding indents these sections' headings
   (and the stacked FAQ accordion) relative to every other section's 12px
   gutter — strip the horizontal padding so all sections share one edge. */
.faq-continer > .elementor-container > .elementor-column > .elementor-element-populated,
.application-title-container > .elementor-container > .elementor-column > .elementor-element-populated,
.single-services .facility-title-container > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0;
	padding-right: 0;
}

/* Figma columns: 570px head+image / 750px accordion, 32px gap. */
.faq-continer .elementor-column:first-child {
	width: 42.2%;
	padding-right: 32px;
}

.faq-continer .elementor-column:last-child {
	width: 57.8%;
}

/* Left column heading: same treatment as the other section heads. */
.faq-continer .bs-subtitle-1 .icon {
	display: none !important;
}

.faq-continer .bs-subtitle-1,
.faq-continer .bs-subtitle-1 * {
	text-transform: none !important;
}

.faq-continer .bs-subtitle-1 {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: #f5821f;
	width: 100%;
	padding-bottom: 13px;
	margin-bottom: 12px;
	border-bottom: 1px solid #e5e5e8;
}

.faq-continer .bs-sec-title-1 {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 2.8vw, 54px);
	line-height: 1.2;
	color: #1a1a1a;
}

/* 76px gap between heading block and the image below it. */
.faq-continer .tx-heading-section {
	margin-bottom: 76px;
}

.faq-continer .elementor-widget-image img {
	width: 100%;
	height: 521px;
	object-fit: cover;
}

/* Accordion: Figma borders/colors/typography. */
.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item {
	border: 0.8px solid #ededed;
}

.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item:is(.active) {
	background-color: #f8f8f9;
}

.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 22px;
	line-height: 26px;
	font-weight: 500;
	color: #1a1a1a;
}

.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-title .dot {
	background-color: #2d2d2d;
	opacity: 1;
}

.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-body p {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 19px;
	color: #1a1a1a;
	padding-left: 32px;
	padding-right: 32px;
	padding-bottom: 10px;
}

@media (max-width: 991px) {
	.faq-continer .elementor-column:first-child,
	.faq-continer .elementor-column:last-child {
		width: 100%;
		padding-right: 0;
	}

	.faq-continer .elementor-column:first-child {
		margin-bottom: 24px;
	}

	.faq-continer .tx-heading-section {
		margin-bottom: 24px;
	}

	/* Elementor's editor values (post-75.css) are sized for the side-by-side
	   desktop layout: a 90px top offset on the image and 50px on the
	   accordion column, which pushed the image down against the heading and
	   left ~90px of dead space above the questions once stacked.
	   !important because those come from a higher-specificity Elementor
	   selector. */
	.faq-continer .elementor-widget-image {
		margin-top: 24px !important;
	}

	.faq-continer .elementor-column:last-child > .elementor-widget-wrap {
		margin-top: 0 !important;
	}

	/* The image is a transparent cut-out sized to fill its desktop column, so
	   at full tablet width it rendered ~830px tall — a whole screen of
	   decoration before the first question — and simply shrinking it left a
	   small object floating in an empty column.

	   Instead it becomes a proper feature panel: a full-width tinted card
	   with the same 12px radius as the accordion below it, with the cut-out
	   centred inside at a generous size. The block reads as designed, fills
	   the column edge to edge, and its height stays bounded. */
	.faq-continer .elementor-widget-image {
		background: linear-gradient(180deg, #f8f8f9 0%, #ededed 100%);
		border-radius: 12px;
		padding: 32px 24px;
		text-align: center;
	}

	.faq-continer .elementor-widget-image img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 420px;
		margin: 0 auto;
	}

	.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-title {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.faq-continer .elementor-column:first-child {
		margin-bottom: 20px;
	}

	.faq-continer .tx-heading-section {
		margin-bottom: 20px;
	}

	.faq-continer .elementor-widget-image {
		margin-top: 16px !important;
	}

	.faq-continer .elementor-widget-image {
		padding: 24px 20px;
	}

	.faq-continer .elementor-widget-image img {
		max-height: 300px;
	}

	/* 25px/32px of padding per question is a lot of empty card on a phone.
	   Questions also wrap to two lines here, and the theme centres the bullet
	   against the whole block — align it to the first line instead. */
	.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-title {
		padding: 18px 20px;
		align-items: flex-start;
	}

	.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-title .dot {
		margin-top: 9px;
	}

	.faq-continer .bs-accordion:is(.has-details-page) .bs-accordion-item .item-body p {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   PAGE RHYTHM — one spacing scale for the whole product detail page

   Measured on /products/flanges/ before this block, the SAME relationship
   was rendering at different sizes depending on which widget drew it:

     heading → its description : 0px, 16px, 24px and 25px
     eyebrow → its heading     : 8px and 12px
     section → section         : 144px, but 72px around the "Why Choose" band

   Every one of those now resolves to a token from section-rhythm.css, so
   the page steps 144 → 62 → 24 → 12 and reads as a single system. Values
   are set as the heading's margin-bottom (never the paragraph's margin-top)
   so adjacent-sibling margin collapsing cannot reintroduce a mismatch.
   ========================================================================== */

/* Eyebrow/kicker → heading. Covers the four theme heading sections
   (Grades, Manufactor, Applications, FAQ), which sat at 8/8/8/12px. */
.tx-heading-section .bs-subtitle-1 {
	margin-bottom: var(--mrb-pd-eyebrow-gap);
}

/* Heading → description, theme heading sections (was 0px and 16px). */
.tx-heading-section .tx-title {
	margin-bottom: var(--mrb-pd-title-gap);
}

.tx-heading-section .tx-description {
	margin-top: 0;
}

/* Heading → description, custom sections (was 16px). */
.mrb-section-head .mrb-heading {
	margin-bottom: var(--mrb-pd-title-gap);
}

.mrb-section-head .mrb-section-desc {
	margin-top: 0;
}

/* Heading → body copy in the two info+media blocks (already 24px — pinned
   to the token so it stays in step if the scale is ever retuned). */
.mrb-info-media-content .mrb-heading {
	margin-bottom: var(--mrb-pd-title-gap);
}

.mrb-info-media-content .mrb-text {
	margin-top: 0;
}

/* Heading → description inside the dark "Why Choose" band (was 25px).
   NOTE: the hero heading deliberately keeps --mrb-pd-head-gap instead --
   it spans the grid and introduces a text+image row, so it is a heading
   block → content relationship, not a heading → description one. */
.why-choose-container .bs-choose-4-content .title {
	margin-bottom: var(--mrb-pd-title-gap);
}

.why-choose-container .bs-choose-4-content .disc {
	margin-top: 0;
}

/* Section → section. The page separates blocks in three consistent ways,
   depending on what the block is:

     plain section  72px of padding each side  = 144px text-to-text
     full-bleed band  edges sit FLUSH against its neighbours, and the band's
                      own 72px of internal padding supplies the same 144px
     inset card       72px between card edges, plus the card's own padding

   The measured outlier was the dark "Why Choose" band: it sits flush like
   the other two bands (correct), but its internal padding came from the
   parent theme at 120px top / 95px bottom instead of the 72px/72px that
   .e-con:has(.mrb-spec-table-section) and .Manufactor-process-container
   use. That is what made the band read as differently spaced. Match it to
   the other bands rather than pushing the band away from its neighbours —
   adding outer padding here would leave a white strip above the band that
   no other band on the page has. */
.why-choose-container .bs-choose-4-content {
	padding-top: var(--mrb-space-edge);
	padding-bottom: var(--mrb-space-edge);
}

/* The stacked-card tier sets `padding: 32px` on both cards, but the desktop
   `padding: 56px 52px` rule sits later in the file and wins for the plain
   .mrb-info-media selector — so the left card kept 52px of side padding
   while the right one (matched by the two-class .mrb-image-right selector)
   used 32px. Restate the side padding here, after both, so the pair match. */
@media (max-width: 991px) {
	.mrb-info-media,
	.mrb-info-media.mrb-image-right {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 767px) {
	.mrb-info-media,
	.mrb-info-media.mrb-image-right {
		padding-left: 24px;
		padding-right: 24px;
	}
}