/*
 * Component styles added outside app.css.
 * Every rule is scoped to its component's [data-component] root.
 * Breakpoints follow app.css: 1299, 999 and 599px.
 */

/* Shared: inline SVG icons */
[data-component] .icon-svg {
	display: block;
	flex-shrink: 0;
}

/* Basic Hero: optional logo right of the heading (above it below 1000px) */
[data-component="basic-hero"] .herobrand1 {
	display: flex;
	align-items: center;
	gap: 48px;
}

[data-component="basic-hero"] .herobrand1 h1 {
	flex: 1 1 auto;
	min-width: 0;
}

[data-component="basic-hero"] .herobrand1-logo {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: 180px;
	max-width: 100%;
}

@media (max-width: 999px) {
	[data-component="basic-hero"] .herobrand1 {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	[data-component="basic-hero"] .herobrand1-logo {
		order: -1;
		height: 120px;
	}
}

@media (max-width: 599px) {
	[data-component="basic-hero"] .herobrand1 {
		gap: 16px;
	}

	[data-component="basic-hero"] .herobrand1-logo {
		height: 96px;
	}
}

/* Cards: icon style */
[data-component="cards"][data-style="icon"] .icards1.-gray {
	padding: 32px;
	background: var(--c_b2);
}

[data-component="cards"][data-style="icon"] .icards1-list {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-component="cards"][data-style="icon"] .icard1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 28px 24px 24px;
	border: 1.5px solid var(--c_o3);
	border-radius: 8px;
	background: #fff;
	color: var(--c_d1);
	text-align: center;
	transition: box-shadow .2s, transform .2s;
}

[data-component="cards"][data-style="icon"] .icard1:before {
	display: none;
}

[data-component="cards"][data-style="icon"] .icard1:hover {
	box-shadow: 0 6px 24px rgba(22, 46, 76, .13);
}

[data-component="cards"][data-style="icon"] .icard1-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--c_o3);
	border-radius: 50%;
	background: var(--c_b2);
	color: var(--c_d1);
}

[data-component="cards"][data-style="icon"] .icard1-icon .icon-svg {
	stroke-width: 1.8;
}

[data-component="cards"][data-style="icon"] .icard1-kicker {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
}

[data-component="cards"][data-style="icon"] .icard1-title {
	margin: 0;
	color: var(--c_d1);
	font: 600 15px/1.3 var(--ff_1);
}

[data-component="cards"][data-style="icon"] .icard1-action {
	margin: 0;
}

[data-component="cards"][data-style="icon"] .icard1-link {
	color: var(--c_a2);
	font: italic 600 14px/1.4 var(--ff_1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

[data-component="cards"][data-style="icon"] .icard1-link:hover,
[data-component="cards"][data-style="icon"] .icard1-link:focus-visible {
	color: #a93226;
}

[data-component="cards"][data-style="icon"] .icard1-panel {
	width: 100%;
	padding: 15px;
	border: 1px solid var(--c_o3);
	border-radius: 6px;
	background: var(--c_b2);
	color: var(--c_d2);
	font: italic 13px/1.4 var(--ff_1);
	text-align: left;
}

[data-component="cards"][data-style="icon"] .icard1-panel p {
	margin: 0;
	font: inherit;
}

[data-component="cards"][data-style="icon"] .icard1-panel p + p {
	margin-top: 18px;
}

[data-component="cards"][data-style="icon"] .icard1-panel a {
	color: var(--c_a2);
	font-weight: 600;
	text-decoration: none;
}

[data-component="cards"][data-style="icon"] .icard1-panel a:hover,
[data-component="cards"][data-style="icon"] .icard1-panel a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	[data-component="cards"][data-style="icon"] .icard1:hover {
		transform: translateY(-3px);
	}
}

@media (max-width: 999px) {
	[data-component="cards"][data-style="icon"] .icards1-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	[data-component="cards"][data-style="icon"] .icards1.-gray {
		padding: 16px;
	}

	[data-component="cards"][data-style="icon"] .icard1 {
		padding: 24px 20px 20px;
	}
}

/* Wysiwyg: navy bar style */
[data-component="wysiwyg"][data-style="bar"] .callout1 {
	padding: 16px 32px;
	background: var(--c_d1);
	color: rgba(255, 255, 255, .85);
	font: italic 13px/1.4 var(--ff_1);
	text-align: center;
}

[data-component="wysiwyg"][data-style="bar"] .callout1 p {
	margin: 0;
	font: inherit;
	color: inherit;
}

[data-component="wysiwyg"][data-style="bar"] .callout1 a {
	color: #7eb8f7;
	text-decoration: underline;
	text-underline-offset: 2px;
}

[data-component="wysiwyg"][data-style="bar"] .callout1 a:hover,
[data-component="wysiwyg"][data-style="bar"] .callout1 a:focus-visible {
	color: #fff;
}

@media (max-width: 599px) {
	[data-component="wysiwyg"][data-style="bar"] .callout1 {
		padding: 16px 20px;
	}
}

/* Feature Band: navy band, copy | image | copy */
[data-component="feature-band"] .band1 {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	overflow: hidden;
	padding: 48px 32px 40px;
	background: linear-gradient(135deg, var(--c_d1) 0%, var(--c_a1) 100%);
	color: #fff;
}

[data-component="feature-band"] .band1:before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

[data-component="feature-band"] .band1-side,
[data-component="feature-band"] .band1-image {
	position: relative;
	z-index: 1;
	min-width: 0;
	margin: 0;
}

[data-component="feature-band"] .band1-side p {
	margin: 0;
	color: inherit;
	font: 25px/1.6 var(--ff_1);
}

[data-component="feature-band"] .band1-side p + p {
	margin-top: 16px;
}

[data-component="feature-band"] .band1-side.-left {
	max-width: 350px;
	color: rgba(255, 255, 255, .88);
}

[data-component="feature-band"] .band1-side.-left p {
	line-height: 1.65;
}

[data-component="feature-band"] .band1-side strong {
	color: #fff;
	font-weight: 600;
}

[data-component="feature-band"] .band1-side.-right {
	max-width: 300px;
	margin-left: auto;
	color: rgba(255, 255, 255, .75);
	text-align: right;
}

[data-component="feature-band"] .band1-side.-left p.band1-action {
	margin-top: 20px;
	font: inherit;
}

[data-component="feature-band"] .band1-button {
	display: inline-block;
	padding: 11px 24px;
	border: 2px solid var(--c_a2);
	border-radius: 4px;
	background: var(--c_a2);
	color: #fff;
	font: 600 14px/1.4 var(--ff_1);
	letter-spacing: .3px;
	text-decoration: none;
	transition: background .2s, border-color .2s, transform .15s;
}

[data-component="feature-band"] .band1-button:hover,
[data-component="feature-band"] .band1-button:focus-visible {
	border-color: #a93226;
	background: #a93226;
	color: #fff;
}

[data-component="feature-band"] .band1-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

[data-component="feature-band"] .band1-image img {
	display: block;
	width: 484px;
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	[data-component="feature-band"] .band1-button:hover,
	[data-component="feature-band"] .band1-button:focus-visible {
		transform: translateY(-1px);
	}
}

@media (max-width: 1299px) {
	[data-component="feature-band"] .band1-side.-left,
	[data-component="feature-band"] .band1-side.-right {
		max-width: none;
	}

	[data-component="feature-band"] .band1-side p,
	[data-component="feature-band"] .band1-side.-left p {
		font-size: 20px;
		line-height: 1.6;
	}

	[data-component="feature-band"] .band1-image img {
		width: 360px;
	}
}

@media (max-width: 999px) {
	[data-component="feature-band"] .band1 {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding: 40px 32px;
		text-align: center;
	}

	[data-component="feature-band"] .band1-side.-left,
	[data-component="feature-band"] .band1-side.-right {
		max-width: 640px;
		margin: 0 auto;
		text-align: center;
	}

	[data-component="feature-band"] .band1-side p,
	[data-component="feature-band"] .band1-side.-left p {
		font-size: 25px;
	}

	[data-component="feature-band"] .band1-image img {
		width: 484px;
	}
}

@media (max-width: 599px) {
	[data-component="feature-band"] .band1 {
		padding: 32px 20px;
	}

	[data-component="feature-band"] .band1-side.-left,
	[data-component="feature-band"] .band1-side.-right {
		max-width: none;
	}

	[data-component="feature-band"] .band1-side p,
	[data-component="feature-band"] .band1-side.-left p {
		font-size: 20px;
	}

	[data-component="feature-band"] .band1-image img {
		width: 100%;
		max-width: 484px;
	}
}

/* Button Bar: equal-width buttons with icons */
[data-component="button-bar"] .bbar1 {
	display: grid;
	grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-component="button-bar"] .bbar1 > li {
	margin: 0;
	padding: 0;
}

[data-component="button-bar"] .bbar1 > li:before {
	display: none;
}

[data-component="button-bar"] .bbar1-button {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	min-height: 60px;
	padding: 18px 24px;
	color: #fff;
	font: italic 600 17px/1.4 var(--ff_1);
	text-align: center;
	text-decoration: none;
	transition: filter .2s, transform .15s;
}

[data-component="button-bar"] .bbar1-button.-red {
	background: var(--c_a2);
}

[data-component="button-bar"] .bbar1-button.-navy {
	background: var(--c_d1);
}

[data-component="button-bar"] .bbar1-button:hover,
[data-component="button-bar"] .bbar1-button:focus-visible {
	color: #fff;
	filter: brightness(1.1);
}

[data-component="button-bar"] .bbar1-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

[data-component="button-bar"] .bbar1-button .icon-svg {
	stroke-width: 2.2;
}

@media (prefers-reduced-motion: no-preference) {
	[data-component="button-bar"] .bbar1-button:hover,
	[data-component="button-bar"] .bbar1-button:focus-visible {
		transform: translateY(-1px);
	}
}

@media (max-width: 820px) {
	[data-component="button-bar"] .bbar1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Panels */
[data-component="panels"] .panels1 {
	display: grid;
	grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin: 0;
}

[data-component="panels"] .panels1.-gray {
	background: var(--c_b2);
	padding: 24px 32px 32px;
}

[data-component="panels"] .panel1 {
	min-width: 0;
	margin: 0;
	padding: 28px;
	background: #fff;
	border: 1.5px solid var(--c_o3);
	border-radius: 8px;
	color: var(--c_d1);
}

[data-component="panels"] .panel1-title {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--c_o3);
	color: var(--c_d1);
	font: 600 18px/1.2 var(--ff_1);
}

[data-component="panels"] .panel1-text > * {
	margin: 0;
}

[data-component="panels"] .panel1-text > * + * {
	margin-top: 16px;
}

/* Panels: link list */
[data-component="panels"] .linklist1 {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-component="panels"] .linklist1 li {
	margin: 0;
	padding: 0;
}

[data-component="panels"] .linklist1 li:before {
	display: none;
}

[data-component="panels"] .linklist1-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--c_o3);
	border-radius: 6px;
	color: var(--c_d1);
	font: 400 14px/1.4 var(--ff_1);
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

[data-component="panels"] .linklist1-link:hover,
[data-component="panels"] .linklist1-link:focus-visible {
	background: var(--c_b2);
	border-color: var(--c_d1);
	color: var(--c_d1);
}

[data-component="panels"] .linklist1-link:focus-visible {
	outline: 2px solid var(--c_a1);
	outline-offset: 2px;
}

[data-component="panels"] .linklist1-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin: 0;
	background: var(--c_b2);
	border: 1px solid var(--c_o3);
	border-radius: 4px;
}

[data-component="panels"] .linklist1-icon .icon-svg {
	stroke-width: 2;
}

/* Panels: quote slides */
[data-component="panels"] .slides1 {
	margin: 0;
}

[data-component="panels"] .slides1-track {
	display: grid;
	gap: 16px;
	margin: 0;
}

[data-component="panels"] .slides1-slide {
	position: relative;
	margin: 0;
	padding: 24px 28px 24px 76px;
	border-radius: 6px;
	color: #fff;
}

[data-component="panels"] .slides1-slide.-buyer {
	background: linear-gradient(100deg, #24456f 0%, var(--c_d1) 100%);
}

[data-component="panels"] .slides1-slide.-supplier {
	background: linear-gradient(100deg, var(--c_a2) 0%, #3b2d4f 35%, var(--c_d1) 75%);
}

[data-component="panels"] .slides1-mark {
	position: absolute;
	top: 20px;
	left: 24px;
	color: #fff;
	font-size: 36px;
	line-height: 1;
}

[data-component="panels"] .slides1-quote {
	margin: 0;
	padding: 0;
	box-shadow: none;
	color: #fff;
	font: 400 16px/1.5 var(--ff_1);
}

[data-component="panels"] .slides1-quote p {
	margin: 0;
}

[data-component="panels"] .slides1-cite {
	margin: 12px 0 0;
	color: #fff;
	font: 600 14px/1.4 var(--ff_1);
}

/* The admin preview has no [js]; show it as the page looks on load: first quote and controls. */
[js] [data-component="panels"] .slides1-slide,
.component-preview [data-component="panels"] .slides1-slide {
	grid-area: 1 / 1;
}

[js] [data-component="panels"] .slides1-slide:not(.is-active),
.component-preview [data-component="panels"] .slides1-slide:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

[data-component="panels"] .slides1-controls:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 15px 0 0;
}

[data-component="panels"] .slides1-pause,
[data-component="panels"] .slides1-dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--c_d1);
	cursor: pointer;
}

[data-component="panels"] .slides1-pause[hidden] {
	display: none;
}

[data-component="panels"] .slides1-pause i {
	font-size: 14px;
}

[data-component="panels"] .slides1-dot:before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: rgba(22, 46, 76, .55);
}

[data-component="panels"] .slides1-dot[aria-current="true"]:before {
	background: var(--c_a2);
}

[data-component="panels"] .slides1-pause:focus-visible,
[data-component="panels"] .slides1-dot:focus-visible {
	outline: 2px solid var(--c_a1);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	[js] [data-component="panels"] .slides1-slide {
		transition: opacity .6s, visibility .6s;
	}
}

@media (max-width: 999px) {
	[data-component="panels"] .panels1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	[data-component="panels"] .panels1.-gray {
		padding: 16px;
	}

	[data-component="panels"] .panel1 {
		padding: 20px;
	}

	[data-component="panels"] .slides1-slide {
		padding: 20px 20px 20px 60px;
	}

	[data-component="panels"] .slides1-mark {
		left: 16px;
		font-size: 30px;
	}

	[data-component="panels"] .slides1-quote {
		font-size: 15px;
	}
}