/* Artmark Manufacturers & Downloads widget — dark section with a gradient
   heading over two outlined panels: a grid of manufacturer tiles on one side
   and a ruled list of downloads with a button on the other.

   Namespaced .am-mfg. Colours, typography, spacing, the split between the two
   panels and the heading gradient are all widget controls; the values here are
   the design defaults. */

.am-mfg {
	width: 100%;
	background-color: #0e1a21;
}

.am-mfg__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- */
/* Head                                                              */
/* ---------------------------------------------------------------- */

/* Block, not flex: the alignment control sets text-align here and the
   inline-flex label follows it, so one control moves label and heading. */
.am-mfg__head {
	width: 100%;
	margin-bottom: 52px;
}

.am-mfg__labelrow {
	display: block;
	width: 100%;
}

.am-mfg__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	border: 0 solid transparent;
	font-size: 13px;
	line-height: 1;
	color: #dfe6ea;
}

.am-mfg__plus {
	font-size: 14px;
	line-height: 1;
}

/* background-clip: text over a linear gradient — the same technique as
   .am-tband__title, with both stops and the angle exposed as controls. */
.am-mfg__title {
	margin: 0;
	max-width: var(--am-mfg-titlew, 820px);
	font-size: 52px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	background-image: linear-gradient(
		var(--am-mfg-h-angle, 129deg),
		var(--am-mfg-h-a, #ffffff),
		var(--am-mfg-h-b, #b4ddff)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* "Solid Colour" fill mode — the class lands on the widget wrapper. */
.am-mfg-fill-solid .am-mfg__title {
	background-image: none;
	color: var(--am-mfg-h-solid, #ffffff);
	-webkit-text-fill-color: currentColor;
}

/* ---------------------------------------------------------------- */
/* Panels                                                            */
/* ---------------------------------------------------------------- */

.am-mfg__panels {
	display: flex;
	align-items: stretch;
	gap: var(--am-mfg-gap, 24px);
}

.am-mfg__panel {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: var(--am-mfg-pad, 34px);
	background-color: var(--am-mfg-panelbg, transparent);
	border: var(--am-mfg-bdw, 1px) solid var(--am-mfg-bd, rgba(255, 255, 255, 0.12));
}

.am-mfg__panel--brands {
	flex: 0 0 var(--am-mfg-split, 42%);
	max-width: var(--am-mfg-split, 42%);
}

.am-mfg__panel--files {
	flex: 1 1 auto;
}

.am-mfg__panel-label {
	margin: 0 0 var(--am-mfg-labelgap, 20px);
	padding-bottom: var(--am-mfg-labelpad, 18px);
	border-bottom: var(--am-mfg-rulew, 1px) solid var(--am-mfg-rule, rgba(255, 255, 255, 0.12));
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8896a0;
}

/* ---------------------------------------------------------------- */
/* Manufacturer tiles                                                */
/* ---------------------------------------------------------------- */

.am-mfg__brands {
	display: grid;
	grid-template-columns: repeat(var(--am-mfg-cols, 3), minmax(0, 1fr));
	column-gap: var(--am-mfg-brandgap, 12px);
	row-gap: var(--am-mfg-brandrowgap, 12px);
	align-content: start;
}

.am-mfg__brand {
	--am-mfg-brand-bd: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--am-mfg-brandh, 82px);
	padding: 12px;
	text-align: center;
	background-color: var(--am-mfg-brand-bg, transparent);
	border: var(--am-mfg-brand-bdw, 1px) solid var(--am-mfg-brand-bd);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.am-mfg__brand-in {
	display: block;
	min-width: 0;
	max-width: 100%;
}

.am-mfg__brand img {
	display: block;
	max-width: 100%;
	max-height: var(--am-mfg-logoh, 40px);
	object-fit: contain;
}

/* Themes repaint links on hover/focus/active and a pseudo-class selector beats
   a bare class. Colours come back through custom properties the controls set,
   so the controls still win. */
a.am-mfg__brand,
a.am-mfg__brand:link,
a.am-mfg__brand:visited,
a.am-mfg__brand:hover,
a.am-mfg__brand:focus,
a.am-mfg__brand:focus-visible,
a.am-mfg__brand:active {
	background-image: none;
	background-color: var(--am-mfg-brand-bg, transparent);
	border-color: var(--am-mfg-brand-bd, rgba(255, 255, 255, 0.18));
	box-shadow: none;
	outline: 0;
	color: var(--am-mfg-brand-color, #ffffff);
	text-decoration: none;
	transform: none;
}

a.am-mfg__brand:hover {
	background-color: var(--am-mfg-brand-bg-h, var(--am-mfg-brand-bg, transparent));
	border-color: var(--am-mfg-brand-bd-h, var(--am-mfg-brand-bd, rgba(255, 255, 255, 0.18)));
	color: var(--am-mfg-brand-color-h, var(--am-mfg-brand-color, #ffffff));
}

a.am-mfg__brand:focus-visible {
	outline: 2px solid var(--am-mfg-focus, #8fd0f5);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Download rows                                                     */
/* ---------------------------------------------------------------- */

/* One column by default; the Columns control sets --am-mfg-filecols for rows
   side by side (the downloads panel under the brand cards uses two). */
.am-mfg__files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--am-mfg-filecols, 1), minmax(0, 1fr));
	column-gap: var(--am-mfg-filecolgap, 32px);
}

.am-mfg__file {
	border-bottom: var(--am-mfg-rulew, 1px) solid var(--am-mfg-rule, rgba(255, 255, 255, 0.12));
}

/* Single column: no rule under the last row (as before). More than one
   column: every row keeps its rule, so the columns end level. */
.am-mfg__file:last-child {
	border-bottom-width: min(var(--am-mfg-rulew, 1px), calc((var(--am-mfg-filecols, 1) - 1) * 9999px));
}

.am-mfg__filelink {
	display: flex;
	align-items: center;
	gap: var(--am-mfg-filegap, 14px);
	min-width: 0;
	padding: var(--am-mfg-filepad, 18px) 0;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}

a.am-mfg__filelink,
a.am-mfg__filelink:link,
a.am-mfg__filelink:visited,
a.am-mfg__filelink:hover,
a.am-mfg__filelink:focus,
a.am-mfg__filelink:focus-visible,
a.am-mfg__filelink:active {
	background: none;
	border: 0;
	box-shadow: none;
	outline: 0;
	text-decoration: none;
	transform: none;
	color: var(--am-mfg-file-color, #e8edf0);
}

a.am-mfg__filelink:hover {
	color: var(--am-mfg-file-color-h, var(--am-mfg-file-color, #e8edf0));
}

a.am-mfg__filelink:focus-visible {
	outline: 2px solid var(--am-mfg-focus, #8fd0f5);
	outline-offset: 2px;
}

.am-mfg__fileicon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-mfg-fileicon, 18px);
	height: var(--am-mfg-fileicon, 18px);
	color: var(--am-mfg-fileicon-color, #9fb3c0);
}

.am-mfg__fileicon svg,
.am-mfg__fileicon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-mfg__filetext {
	min-width: 0;
	overflow-wrap: break-word;
}

/* The button sits at the foot of the panel, so it lines up whatever the list
   length. */
.am-mfg__foot {
	margin-top: var(--am-mfg-btngap, 26px);
	display: flex;
	justify-content: var(--am-mfg-btnalign, flex-start);
}

.am-mfg__btn {
	min-width: 0;
}

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

@media (max-width: 1024px) {
	.am-mfg__head {
		margin-bottom: 36px;
	}

	.am-mfg__title {
		font-size: 38px;
	}

	.am-mfg__panels {
		flex-direction: column;
	}

	/* Stacked, a percentage width would be a fraction of the full row, not of
	   a column beside it — both panels take the whole width instead. */
	.am-mfg__panel--brands,
	.am-mfg__panel--files {
		flex: 0 0 auto;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.am-mfg__title {
		font-size: 28px;
	}

	.am-mfg__panel {
		padding: 24px 20px;
	}

	.am-mfg__brands {
		--am-mfg-cols: 2;
	}

	.am-mfg__brand {
		min-height: 68px;
		font-size: 15px;
	}

	.am-mfg__filelink {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------- */
/* Brand cards layout ("Trusted Manufacturers")                      */
/* ---------------------------------------------------------------- */

/* Full-width grid instead of the two panels: numbered light-blue cards with
   a short dash in the corner and one notched corner, then a darker "And more
   brands" card with an arrow. Sizes, colours, the notch, the index and the
   dash are widget controls; the values here are the design defaults. */

.am-mfg__cards {
	display: grid;
	grid-template-columns: repeat(var(--am-mfg-ccols, 3), minmax(0, 1fr));
	column-gap: var(--am-mfg-cgap, 16px);
	row-gap: var(--am-mfg-crowgap, 16px);
	align-content: start;
}

.am-mfg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	min-height: var(--am-mfg-ch, 168px);
	padding: 24px 28px;
	box-sizing: border-box;
	background-color: var(--am-mfg-card-bg, #b4ddff);
	color: var(--am-mfg-card-color, #0b1b2b);
	text-decoration: none;
	overflow: hidden;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-mfg-notch, 18px)),
		calc(100% - var(--am-mfg-notch, 18px)) 100%,
		0 100%
	);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.am-mfg-notch-tr .am-mfg__card {
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-mfg-notch, 18px)) 0,
		100% var(--am-mfg-notch, 18px),
		100% 100%,
		0 100%
	);
}

.am-mfg-notch-bl .am-mfg__card {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--am-mfg-notch, 18px) 100%,
		0 calc(100% - var(--am-mfg-notch, 18px))
	);
}

.am-mfg-notch-tl .am-mfg__card {
	clip-path: polygon(
		var(--am-mfg-notch, 18px) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--am-mfg-notch, 18px)
	);
}

.am-mfg-notch-none .am-mfg__card {
	clip-path: none;
}

/* Top row: index on the left, dash pinned right (stays right when the index
   is switched off) */
.am-mfg__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 1em;
}

.am-mfg__card-idx {
	display: none;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.am-mfg-idx-yes .am-mfg__card-idx {
	display: block;
}

.am-mfg__card-dash {
	display: none;
	flex: 0 0 auto;
	width: var(--am-mfg-dashw, 16px);
	height: var(--am-mfg-dashh, 2px);
	margin-left: auto;
	background-color: var(--am-mfg-dash, #0080b8);
}

.am-mfg-dash-yes .am-mfg__card-dash {
	display: block;
}

/* Bottom row: the name (or logo), and on the "more" card the arrow */
.am-mfg__card-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
}

.am-mfg__card-name > span:first-child {
	min-width: 0;
	overflow-wrap: break-word;
}

.am-mfg__card-name img {
	display: block;
	max-width: 100%;
	max-height: var(--am-mfg-clogoh, 28px);
	object-fit: contain;
}

.am-mfg__card-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-mfg-carrow, 20px);
	height: var(--am-mfg-carrow, 20px);
	transition: transform 0.25s ease;
}

.am-mfg__card-arrow svg,
.am-mfg__card-arrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-mfg__card--more {
	background-color: var(--am-mfg-more-bg, #0080b8);
	color: var(--am-mfg-more-color, #ffffff);
}

/* Themes repaint links on hover/focus/active and a pseudo-class selector beats
   a bare class. Colours come back through the custom properties the controls
   set, so the controls still win. */
a.am-mfg__card,
a.am-mfg__card:link,
a.am-mfg__card:visited,
a.am-mfg__card:hover,
a.am-mfg__card:focus,
a.am-mfg__card:focus-visible,
a.am-mfg__card:active {
	background-image: none;
	background-color: var(--am-mfg-card-bg, #b4ddff);
	border: 0;
	box-shadow: none;
	outline: 0;
	color: var(--am-mfg-card-color, #0b1b2b);
	text-decoration: none;
}

/* Hover on every card, linked or not: white by default (the control sets it) */
.am-mfg__card:hover,
a.am-mfg__card:hover {
	background-color: var(--am-mfg-card-bg-h, #ffffff);
	color: var(--am-mfg-card-color-h, var(--am-mfg-card-color, #0b1b2b));
}

a.am-mfg__card--more,
a.am-mfg__card--more:link,
a.am-mfg__card--more:visited,
a.am-mfg__card--more:hover,
a.am-mfg__card--more:focus,
a.am-mfg__card--more:focus-visible,
a.am-mfg__card--more:active {
	background-color: var(--am-mfg-more-bg, #0080b8);
	color: var(--am-mfg-more-color, #ffffff);
}

.am-mfg__card--more:hover,
a.am-mfg__card--more:hover {
	background-color: var(--am-mfg-more-bg-h, var(--am-mfg-more-bg, #0080b8));
	color: var(--am-mfg-more-color-h, var(--am-mfg-more-color, #ffffff));
}

a.am-mfg__card:focus-visible {
	outline: 2px solid var(--am-mfg-focus, #8fd0f5);
	outline-offset: 2px;
}

/* Hover motion: a small lift; the "more" arrow slides right */
.am-mfg-lift-yes .am-mfg__card:hover {
	transform: translateY(-3px);
}

.am-mfg-lift-yes .am-mfg__card--more:hover .am-mfg__card-arrow {
	transform: translateX(4px);
}

/* Downloads panel under the cards (optional) */
.am-mfg__panels--below {
	margin-top: var(--am-mfg-gap, 24px);
}

.am-mfg__panels--below .am-mfg__panel--files {
	flex: 1 1 auto;
	max-width: none;
}

@media (max-width: 767px) {
	.am-mfg__card {
		padding: 18px 20px;
		min-height: 132px;
	}

	.am-mfg__card-name {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-mfg-lift-yes .am-mfg__card:hover,
	.am-mfg-lift-yes .am-mfg__card--more:hover .am-mfg__card-arrow {
		transform: none;
	}
}

/* ---------------------------------------------------------------- */
/* Downloads style: Featured catalog                                 */
/* ---------------------------------------------------------------- */

/* Photo on one side, cream panel with title and a notched dark button on
   the other; the whole card has its top-right corner cut. The card is a
   query container, so it stacks (photo on top) whenever it is narrow:
   tablet, phone, or the half column of the two-panel layout. */
.am-mfg__panels--feat {
	margin-top: 48px;
}

.am-mfg__feat {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.am-mfg__feat-label {
	margin-bottom: 20px;
}

.am-mfg__feat-in {
	display: flex;
	align-items: stretch;
	min-height: 300px;
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-mfg-feat-notch, 40px)) 0,
		100% var(--am-mfg-feat-notch, 40px),
		100% 100%,
		0 100%
	);
}

.am-mfg-featimg-right .am-mfg__feat-in {
	flex-direction: row-reverse;
}

.am-mfg__feat-media {
	position: relative;
	flex: 0 0 49%;
	max-width: 49%;
	min-width: 0;
	overflow: hidden;
	background-color: #0e1a21;
}

.am-mfg__feat-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.am-mfg__feat-body {
	background-color: #fcf7ee;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 26px;
	padding: 56px;
	text-align: left;
}

.am-mfg__feat-title {
	margin: 0;
	max-width: 560px;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #020713;
}

.am-mfg__feat-text {
	margin: 0;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.6;
	color: #3f3b34;
}

/* The button: every state set here, so a theme's link or button colours
   cannot bleed in. Colours come from the widget controls. */
.am-mfg a.am-mfg__featbtn,
.am-mfg a.am-mfg__featbtn:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: var(--am-mfg-fb-bg, #020713);
	color: var(--am-mfg-fb-c, #ffffff);
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-mfg-fb-notch, 8px)),
		calc(100% - var(--am-mfg-fb-notch, 8px)) 100%,
		0 100%
	);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.am-mfg a.am-mfg__featbtn:hover,
.am-mfg a.am-mfg__featbtn:focus,
.am-mfg a.am-mfg__featbtn:active {
	background-color: var(--am-mfg-fb-hbg, #0081e4);
	color: var(--am-mfg-fb-hc, #ffffff);
	text-decoration: none;
	box-shadow: none;
}

/* clip-path would cut an outline off, so focus is drawn inside. */
.am-mfg a.am-mfg__featbtn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #b4ddff;
}

.am-mfg__featbtn-ico {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.am-mfg__featbtn-ico svg,
.am-mfg__featbtn-ico img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Narrow card: photo on top at its own height, panel below. !important
   beats the per-element width and min-height the controls print. Phones
   always; the two-panel layout also between 768 and 1280px, where the
   catalog sits in the half column beside the manufacturers. Media queries
   only: a container query here makes the widget twice its height inside
   Elementor's flex containers (Chromium sizes a container-type element at
   its intrinsic width when it computes the flex item's height). */
@media (min-width: 768px) and (max-width: 1280px) {
	.am-mfg-layout-panels .am-mfg__feat-in {
		flex-direction: column !important;
		min-height: 0 !important;
	}

	.am-mfg-layout-panels .am-mfg__feat-media,
	.am-mfg-layout-panels.am-mfg-featimg-right .am-mfg__feat-media {
		flex: 0 0 auto !important;
		max-width: none !important;
		width: 100%;
		height: var(--am-mfg-feat-imgh, 260px);
		clip-path: none;
	}
}

@media (max-width: 767px) {
	.am-mfg__feat-in {
		flex-direction: column !important;
		min-height: 0 !important;
	}

	.am-mfg__feat-media {
		flex: 0 0 auto !important;
		max-width: none !important;
		width: 100%;
		height: var(--am-mfg-feat-imgh, 220px);
	}

	.am-mfg__feat-body {
		padding: 28px 24px;
	}
}

@media (max-width: 1024px) {
	.am-mfg__feat-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.am-mfg__feat-title {
		font-size: 26px;
	}
}

/* Phones: the catalog title flows freely; a desktop line break would leave a
   short orphan line. */
@media (max-width: 767px) {
	.am-mfg__feat-title br {
		display: none;
	}
}

/* Featured catalog dropdown: the chevron turns while the menu is open. */
.am-mfg__featbtn-ico svg,
.am-mfg__featbtn-ico img {
	transition: transform 0.2s ease;
}

.am-mfg__featbtn.is-open .am-mfg__featbtn-ico svg,
.am-mfg__featbtn.is-open .am-mfg__featbtn-ico img {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.am-mfg__featbtn-ico svg,
	.am-mfg__featbtn-ico img {
		transition: none;
	}
}

/* The photo's outer bottom corner is cut too (bottom left; bottom right when
   the photo is on the right). The cream sits on the text panel only, so the
   cut shows the section behind the card, as in the design. Side by side
   only: stacked, the corner would land on the seam with the panel. */
.am-mfg__feat-media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--am-mfg-feat-inotch, 32px) 100%,
		0 calc(100% - var(--am-mfg-feat-inotch, 32px))
	);
}

.am-mfg-featimg-right .am-mfg__feat-media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--am-mfg-feat-inotch, 32px)),
		calc(100% - var(--am-mfg-feat-inotch, 32px)) 100%,
		0 100%
	);
}

@media (max-width: 767px) {
	.am-mfg__feat-media,
	.am-mfg-featimg-right .am-mfg__feat-media {
		clip-path: none;
	}
}