/*
 * Detail pages — the shared components for product and integration detail
 * pages built in Elementor: /producten/<product>/ and /integraties/<partner>/.
 *
 * FIRST ELEMENTOR-NATIVE COMPONENTS. The five migrated pages mirror a theme
 * pattern, so their classes sit on elements typed into Text Editor markup and
 * elementor.css flattens widget wrappers to make them direct grid children.
 * Detail pages have no pattern twin, so these components are written against
 * Elementor's own boxes instead:
 *
 *   - every class goes in the widget's or container's "CSS Classes" field,
 *     never into Text Editor markup, so an editor cannot delete one from the
 *     HTML tab and break a card (the caveat in docs/elementor-migration.md)
 *   - layout lives on containers; a widget wrapper is never flattened
 *   - text styles sit on the widget wrapper and are inherited by the <p>,
 *     <ul> or <h*> Elementor renders inside it
 *
 * Specificity: `.elementor .fx-dp .fx-…` is (0,3,0), and containers add
 * `.e-con` for (0,4,0) — the same authority level the bridge settled on, for
 * the same reason: Elementor writes per-element CSS at three classes. This
 * file loads after elementor.css, so equal specificity resolves in its favour.
 *
 * Section wrappers carry `fx-elementor-section fx-elementor-section--flush
 * fx-dp`, plus `fx-dp--gap` on every section after the first.
 *
 * Every value is a theme.json token. Mobile-first; breakpoints are the site's
 * 48rem / 64rem / 80rem. The final CTA is home.css's .fx-close band, reused
 * as-is, and the buttons are the bridge's .elementor-button, so neither is
 * restyled here.
 *
 * Loaded on Elementor pages whose parent is /producten/ or /integraties/, and on
 * any other page detail-page.php generated (/waarom-foodyx/, /kosten/, …);
 * see foodyx_elementor_page_styles().
 */

/* ---- Page rhythm --------------------------------------------------------- */

/*
 * One distance between sections, set on the wrapper so no component carries a
 * bespoke margin and a section can be reordered or dropped in the editor
 * without the rhythm breaking.
 */
.elementor .fx-elementor-section.fx-dp--gap {
	margin-block-start: var(--wp--preset--spacing--90);
}

@media (min-width: 48rem) {
	.elementor .fx-elementor-section.fx-dp--gap {
		margin-block-start: var(--wp--preset--spacing--100);
	}
}

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

.elementor .fx-dp .fx-d-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.4;
}

/* The one h1: the products overview's scale and tracking, so both read alike. */
.elementor .fx-dp .fx-d-h1 {
	margin: 0;
	max-width: 20ch;
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* h2: xl on phones so it steps down from the h1, display-sm from 48rem —
   the scale .fx-section-title uses on the homepage. */
.elementor .fx-dp .fx-d-h2 {
	margin: 0;
	max-width: 24ch;
	font-size: var(--wp--preset--font-size--xl);
	text-wrap: balance;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-d-h2 {
		font-size: var(--wp--preset--font-size--display-sm);
	}
}

.elementor .fx-dp .fx-d-lede,
.elementor .fx-dp .fx-d-body {
	margin-block-start: var(--wp--preset--spacing--50);
	max-width: 58ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

.elementor .fx-dp .fx-d-lede {
	color: var(--wp--preset--color--ink);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-d-lede {
		font-size: var(--wp--preset--font-size--md);
	}
}

/* h3 inside cards and strips. */
.elementor .fx-dp .fx-d-h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.elementor .fx-dp .fx-d-text {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/*
 * Hero action rows wrap, as home.css intends with `flex-wrap: wrap`.
 * Elementor's container sets its own nowrap default above that, so two long
 * labels in a narrow hero column ran out of the column instead of onto a
 * second line: "Bekijk alle producten" by 54px on /producten/pos/ at 1024.
 * Wrapping only engages when the row does not fit, so wider layouts, where
 * both buttons share a line, are unchanged.
 */
.elementor .fx-dp .fx-dhero .e-con.fx-actions {
	flex-wrap: wrap;
}

/* A row of actions that follows a section rather than a hero. */
.elementor .fx-dp .fx-d-after {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* The theme's round accent badge around an icon shortcode. */
.fx-dp .fx-d-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-dp .fx-d-icon svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* ---- Hero: product and integration ---------------------------------------- */

/*
 * Copy first on phones, the visual beneath. From 64rem the two sit side by
 * side, copy on the narrower track. The visual is framed on the accent wash so
 * a dark product screenshot reads as a product, not as a hole in the page.
 */
.elementor .fx-dp .e-con.fx-dhero {
	--display: grid;
	display: grid;
	gap: var(--wp--preset--spacing--80);
	align-items: center;
}

.elementor .fx-dp .e-con.fx-dhero__copy {
	--display: block;
	display: block;
}

.elementor .fx-dp .e-con.fx-dhero__media {
	--display: flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--surface--accent-wash);
}

.elementor .fx-dp .fx-dhero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* A frame, not a mount: just enough wash to read as a product surface. */
@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dhero__media {
		padding: var(--wp--preset--spacing--50);
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dhero {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--wp--preset--spacing--80);
	}
}

/*
 * The integration hero's visual: partner -> POSHUB -> Foodyx POS. Three marks,
 * never a logo wall: the page is about one link and the layer it runs
 * through. POSHUB is the only filled mark, ringed in the accent wash, so it
 * reads as the connector rather than a third product.
 *
 * Marks are the icon token on phones, where three marks, two connectors and
 * "Thuisbezorgd" have to share ~280px, and the icon-field token from 48rem.
 */
.elementor .fx-dp .e-con.fx-dpair {
	--fx-mark: var(--wp--custom--size--icon);

	--display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--70);
}

.elementor .fx-dp .e-con.fx-dpair__node {
	--display: flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex: 0 1 auto;
	min-width: 0;
}

.elementor .fx-dp .fx-dpair__node img,
.elementor .fx-dp .fx-dpair__node .fx-d-icon {
	box-sizing: border-box;
	width: var(--fx-mark);
	height: var(--fx-mark);
	border-radius: 50%;
}

/* A Foodyx product: an outlined mark, the way the products page draws one. */
.elementor .fx-dp .fx-dpair__node .fx-d-icon {
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--accent);
}

.elementor .fx-dp .fx-dpair__node .fx-d-icon svg {
	width: 40%;
	height: 40%;
}

/* POSHUB: filled, and ringed with an outline -- a ring, not a shadow. */
.elementor .fx-dp .fx-dpair__node--hub .fx-d-icon {
	border-color: var(--wp--preset--color--accent);
	outline: 0.375rem solid var(--wp--custom--surface--accent-soft);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dpair__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.elementor .fx-dp .fx-dpair__node--hub .fx-dpair__label {
	color: var(--wp--preset--color--accent-strong);
	letter-spacing: 0.02em;
}

/* A dashed connector with an arrowhead: presentation only, no markup. */
.elementor .fx-dp .e-con.fx-dpair__link {
	position: relative;
	flex: 1 1 2rem;
	min-width: 1rem;
	max-width: 5rem;
	height: var(--wp--custom--border--connector);
	/* Level with the marks' centres, whatever the labels wrap to. */
	margin-block-start: calc(var(--fx-mark) / 2 - 1px);
	border-block-start: var(--wp--custom--border--connector) dashed var(--wp--preset--color--connector);
}

.elementor .fx-dp .fx-dpair__link::after {
	content: "";
	position: absolute;
	inset-inline-end: -1px;
	top: -6px;
	width: 8px;
	height: 8px;
	border-block-start: var(--wp--custom--border--connector) solid var(--wp--preset--color--connector);
	border-inline-end: var(--wp--custom--border--connector) solid var(--wp--preset--color--connector);
	transform: rotate(45deg);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dpair {
		--fx-mark: var(--wp--custom--size--icon-field);

		gap: var(--wp--preset--spacing--40);
		padding-block: var(--wp--preset--spacing--80);
	}

	.elementor .fx-dp .fx-dpair__label {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/*
 * fx-dpair--card: the same partner -> POSHUB -> product sequence, compact, on
 * a white card. Here POSHUB is the quiet middle (pale mark) and the Foodyx
 * product is the destination (dark mark) -- a card over a photograph needs
 * one strong end, not a strong middle.
 */
.elementor .fx-dp .e-con.fx-dpair--card {
	--fx-mark: 2.5rem;

	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.elementor .fx-dp .fx-dpair--card .fx-dpair__node--hub .fx-d-icon {
	border-color: var(--wp--custom--surface--accent-soft);
	outline: 0;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.elementor .fx-dp .fx-dpair--card .fx-dpair__node--hub .fx-dpair__label {
	color: var(--wp--preset--color--ink);
	letter-spacing: normal;
}

.elementor .fx-dp .fx-dpair--card .fx-dpair__node--product .fx-d-icon {
	border-color: var(--wp--preset--color--accent-strong);
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dpair--card .fx-dpair__label {
	font-size: var(--wp--preset--font-size--xs);
}

.elementor .fx-dp .e-con.fx-dpair--card .fx-dpair__link {
	max-width: 3.5rem;
}

@media (min-width: 80rem) {
	.elementor .fx-dp .e-con.fx-dpair--card {
		--fx-mark: 3rem;

		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}

	.elementor .fx-dp .fx-dpair--card .fx-dpair__label {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* ---- Incoming order card ---------------------------------------------------- */

/*
 * An illustration of an incoming order -- a notification, not an app screen:
 * a partner mark, a title, a time, and three rows. No navigation, no
 * controls, nothing that implies a Foodyx interface. The rows are an ordinary
 * table in one Text Editor, so an editor changes an item like any other text.
 */
.elementor .fx-dp .e-con.fx-dorder {
	--display: block;
	display: block;
	padding: var(--wp--preset--spacing--50);
}

.elementor .fx-dp .e-con.fx-dorder__head {
	--display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.elementor .fx-dp .fx-dorder__head img {
	display: block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
}

.elementor .fx-dp .fx-dorder__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
}

.elementor .fx-dp .fx-dorder__status {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: 0 0 auto;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.3;
}

.elementor .fx-dp .fx-dorder__status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--custom--on-dark--accent);
}

.elementor .fx-dp .fx-dorder__rows table {
	width: 100%;
	margin: var(--wp--preset--spacing--40) 0 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

.elementor .fx-dp .fx-dorder__rows td {
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	vertical-align: baseline;
}

.elementor .fx-dp .fx-dorder__rows td + td {
	padding-inline-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
}

.elementor .fx-dp .fx-dorder__rows td:last-child {
	text-align: end;
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-dorder__rows table {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* ---- Integration hero with a partner photograph ------------------------ */

/*
 * fx-dhero--photo: copy on the left, the partner's photograph on the right
 * with two native cards floating over it -- the integration flow and an
 * incoming order. Everything but the photo is live text, so a partner page
 * swaps the photo, the mark and the rows in the editor and keeps the layout.
 *
 * No wash panel around the photo: the photograph IS the visual. A pale wash
 * shape sits behind it, offset and turned a few degrees, as the approved
 * mockup does; it is decoration, drawn with ::before.
 *
 * Phones and tablets: copy first, the photo beneath in a landscape crop, the
 * cards below it with the first one lifted over the photo's bottom edge.
 * From 64rem: 42/58 columns, the photo portrait and dominant, the cards
 * floating over its lower half, clear of the subject's face.
 */
.elementor .fx-dp .e-con.fx-dhero--photo {
	gap: var(--wp--preset--spacing--80);
}

.elementor .fx-dp .e-con.fx-dhero__visual {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	isolation: isolate;
}

/*
 * width/height auto: Elementor sizes every .e-con::before (its background
 * overlay) at 100% x 100%, which beat this inset -- the wash came out full
 * width and 3% off-centre, and rotated its corner 1px past the page edge on
 * phones. Auto lets the inset set the box, as intended.
 */
.elementor .fx-dp .fx-dhero__visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 12% 3% -3% 3%;
	width: auto;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--surface--accent-wash);
	transform: rotate(-2deg);
}

/*
 * The photograph. Cropped, never squeezed: the box sets the shape and
 * object-fit fills it. The subject's face sits in the top quarter of the
 * source, so the crop is anchored high.
 */
.elementor .fx-dp .fx-dhero__photo img,
.elementor .fx-dp .e-con.fx-dstage {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: var(--wp--custom--radius--lg);
}

/* The floating cards: white, a hairline, and only a whisper of lift. */
.elementor .fx-dp .e-con.fx-dpair--card,
.elementor .fx-dp .e-con.fx-dorder,
.elementor .fx-dp .e-con.fx-dstatus {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	margin-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--field);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
}

.elementor .fx-dp .e-con.fx-dpair--card {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--80));
}

.elementor .fx-dp .e-con.fx-dorder,
.elementor .fx-dp .e-con.fx-dstatus {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dhero__photo img,
	.elementor .fx-dp .e-con.fx-dstage {
		aspect-ratio: 16 / 9;
	}

	/* Side by side, both lifted over the photo's bottom edge. */
	.elementor .fx-dp .e-con.fx-dhero__visual {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.elementor .fx-dp .fx-dhero__visual > .fx-dhero__photo,
	.elementor .fx-dp .fx-dhero__visual > .fx-dstage {
		grid-column: 1 / -1;
	}

	.elementor .fx-dp .e-con.fx-dpair--card,
	.elementor .fx-dp .e-con.fx-dorder,
	.elementor .fx-dp .e-con.fx-dstatus {
		margin-block-start: calc(-1 * var(--wp--preset--spacing--90));
	}

	.elementor .fx-dp .e-con.fx-dpair--card {
		margin-inline: var(--wp--preset--spacing--60) 0;
	}

	.elementor .fx-dp .e-con.fx-dorder,
	.elementor .fx-dp .e-con.fx-dstatus {
		margin-inline: 0 var(--wp--preset--spacing--60);
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dhero--photo {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		gap: var(--wp--preset--spacing--80);
		align-items: center;
	}

	.elementor .fx-dp .e-con.fx-dhero__visual {
		display: block;
	}

	/* Out past the photo's left edge into the column gap, as in the mockup. */
	.elementor .fx-dp .fx-dhero__visual::before {
		inset: 10% 6% -3% -5%;
	}

	.elementor .fx-dp .fx-dhero__photo img,
	.elementor .fx-dp .e-con.fx-dstage {
		aspect-ratio: 5 / 6;
		max-height: 44rem;
	}

	/*
	 * Over the lower half of the photo, as in the mockup: the flow card across
	 * the middle, the order card below it and further left, overlapping it a
	 * little. Percentages of the photo box, so both scale with it.
	 */
	.elementor .fx-dp .e-con.fx-dpair--card,
	.elementor .fx-dp .e-con.fx-dorder,
	.elementor .fx-dp .e-con.fx-dstatus {
		position: absolute;
		margin: 0;
	}

	.elementor .fx-dp .e-con.fx-dpair--card {
		top: 47%;
		left: 18%;
		width: min(24rem, 64%);
	}

	.elementor .fx-dp .e-con.fx-dorder {
		top: 67%;
		left: 4%;
		width: min(27rem, 70%);
	}

	/* A status is shorter than an order: narrower, and to the right. */
	.elementor .fx-dp .e-con.fx-dstatus {
		top: 73%;
		left: auto;
		right: 6%;
		width: min(18rem, 56%);
	}
}

/* ---- Payment hero: stage and status card --------------------------------- */

/*
 * fx-dhero--payment, fx-dhero--loyalty and fx-dhero--accounting are
 * fx-dhero--photo with a status card (fx-dstatus) in the second card slot: a
 * payment outcome, points added, or revenue sent to the books. One card,
 * different lines; the modifiers only name the variant. Where a partner has no approved photograph yet, fx-dstage holds
 * the photo's place: the same box at every width, filled with the pale accent
 * surface and the partner's approved mark. Swap the stage for an Image widget
 * with class fx-dhero__photo and nothing else changes.
 *
 * The mark sits in the upper part of the stage, where a photo's subject would
 * be, so the floating cards cover the same lower half they do over a photo.
 * Two hairline rings around it are drawn in CSS; they are decoration only.
 */
.elementor .fx-dp .e-con.fx-dstage {
	--display: flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding-block-start: 14%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background:
		radial-gradient(circle at 50% 30%, var(--wp--preset--color--field) 0, transparent 60%),
		var(--wp--custom--surface--accent-wash);
}

/* The widget box is the mark's box, so the rings drawn on it stay circles. */
.elementor .fx-dp .fx-dstage .elementor-widget-image {
	position: relative;
	flex: 0 0 auto;
	width: clamp(4rem, 22%, 7.5rem);
	aspect-ratio: 1;
}

.elementor .fx-dp .fx-dstage img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.elementor .fx-dp .fx-dstage .elementor-widget-image::before,
.elementor .fx-dp .fx-dstage .elementor-widget-image::after {
	content: "";
	position: absolute;
	inset: -35%;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: 50%;
	pointer-events: none;
}

.elementor .fx-dp .fx-dstage .elementor-widget-image::after {
	inset: -75%;
}

/*
 * Without a photograph there is no subject to give the portrait box its
 * height, so from 64rem the stage is squarer and shorter: the cards keep their
 * positions (percentages of the box) and the panel stops reading as empty.
 */
@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dstage {
		aspect-ratio: 1 / 1;
		max-height: 34rem;
		padding-block-start: 11%;
	}

	/*
	 * Over a photo the flow card sits low to clear the subject's face; over the
	 * stage it only has to clear the mark, so it rides higher and leaves the
	 * status card its own space below.
	 */
	.elementor .fx-dp .fx-dstage ~ .e-con.fx-dpair--card {
		top: 40%;
	}
}

/* On the 16:9 tablet stage the mark sits higher, clear of the lifted cards. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.elementor .fx-dp .e-con.fx-dstage {
		padding-block-start: 7%;
	}
}

/*
 * The status card: a notification, not a provider screen. A mark and a few
 * lines -- title, amount, meta -- in whatever order the page needs: a payment
 * outcome with amount and order, or points added with a running total.
 * Nothing that implies a dashboard, a balance screen or a payout. Each line is its own Text Editor so an
 * editor changes the amount or order number like any other text.
 */
.elementor .fx-dp .e-con.fx-dstatus {
	--display: grid;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding: var(--wp--preset--spacing--50);
}

.elementor .fx-dp .fx-dstatus > .elementor-widget:not(.elementor-widget-shortcode) {
	grid-column: 2;
}

.elementor .fx-dp .fx-dstatus .fx-d-icon {
	grid-column: 1;
	grid-row: 1 / span 4;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dstatus__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
}

.elementor .fx-dp .fx-dstatus__amount {
	margin-block-start: var(--wp--preset--spacing--20);
}

.elementor .fx-dp .fx-dstatus > .elementor-widget-shortcode + .fx-dstatus__amount {
	margin-block-start: 0;
}

.elementor .fx-dp .fx-dstatus__amount {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
}

.elementor .fx-dp .fx-dstatus__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

/* ---- Benefit strip -------------------------------------------------------- */

/*
 * One bordered panel, not four cards: the strip is a summary of the hero, so it
 * reads as one object. Items are divided by hairlines — horizontal while they
 * stack, vertical once they share a row.
 */
.elementor .fx-dp .e-con.fx-dstrip {
	--display: grid;
	display: grid;
	box-sizing: border-box;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .e-con.fx-dstrip__item {
	--display: block;
	display: block;
	padding: var(--wp--preset--spacing--60);
}

.elementor .fx-dp .fx-dstrip__item + .fx-dstrip__item {
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.elementor .fx-dp .fx-dstrip__item .fx-d-icon {
	margin-block-end: var(--wp--preset--spacing--50);
}

.elementor .fx-dp .fx-dstrip__title {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dstrip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elementor .fx-dp .fx-dstrip__item + .fx-dstrip__item {
		border-block-start: 0;
	}

	.elementor .fx-dp .fx-dstrip__item:nth-child(n + 3) {
		border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}

	.elementor .fx-dp .fx-dstrip__item:nth-child(even) {
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .e-con.fx-dstrip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.elementor .fx-dp .fx-dstrip__item:nth-child(n + 3) {
		border-block-start: 0;
	}

	.elementor .fx-dp .fx-dstrip__item + .fx-dstrip__item {
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}
}

/* ---- Section head and split ---------------------------------------------- */

.elementor .fx-dp .e-con.fx-dhead {
	--display: block;
	display: block;
	margin-block-end: var(--wp--preset--spacing--80);
}

/*
 * A head beside its content from 64rem: the argument on the left, the evidence
 * on the right. Stacks, head first, below that.
 */
.elementor .fx-dp .e-con.fx-dsplit {
	--display: grid;
	display: grid;
	gap: var(--wp--preset--spacing--80);
}

.elementor .fx-dp .fx-dsplit > .fx-dhead,
.elementor .fx-dp .fx-dband > .fx-dhead {
	margin-block-end: 0;
}

@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dsplit {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--wp--preset--spacing--80);
		align-items: start;
	}

	.elementor .fx-dp .e-con.fx-dsplit--center {
		align-items: center;
	}
}

/* ---- Cards: benefit blocks and the feature grid --------------------------- */

.elementor .fx-dp .e-con.fx-dcards {
	--display: grid;
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dcards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/*
 * Three to a row, each card is ~200px: a smaller title step and less run-up
 * keep the three reading as a compact set beside the head, not three columns
 * of air.
 */
.elementor .fx-dp .fx-dcards--3 .e-con.fx-dcard {
	padding-block-start: var(--wp--preset--spacing--40);
}

.elementor .fx-dp .fx-dcards--3 .fx-d-h3 {
	font-size: var(--wp--preset--font-size--base);
}

@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dcards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60);
	}

	/*
	 * A four-up grid that holds fewer cards (an integration page whose related
	 * products or reasons were trimmed to what it can claim) fills the row
	 * instead of leaving an empty slot.
	 */
	.elementor .fx-dp .e-con.fx-dcards--4:has(> .fx-dcard:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elementor .fx-dp .e-con.fx-dcards--4:has(> .fx-dcard:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Default card: a hairline and air — an argument, not a product tile. The rule
 * is the neutral hairline with a short accent lead-in, so four of them read as
 * one calm set rather than four heavy petrol bars.
 */
.elementor .fx-dp .e-con.fx-dcard {
	--display: block;
	display: block;
	padding-block-start: var(--wp--preset--spacing--50);
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left top / var(--wp--preset--spacing--70) var(--wp--custom--border--connector) no-repeat,
		linear-gradient(var(--wp--preset--color--rule), var(--wp--preset--color--rule)) left top / 100% var(--wp--custom--border--hairline) no-repeat;
}

/* Text cards sit closer together than boxed ones: they have no box to separate them. */
.elementor .fx-dp .e-con.fx-dcards:not(:has(.fx-dcard--boxed)) {
	row-gap: var(--wp--preset--spacing--60);
}

/* Boxed card: the site's bordered white card, as on /producten/. */
.elementor .fx-dp .e-con.fx-dcard--boxed {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--field); /* shorthand: drops the default card's rule */
}

/*
 * A boxed card or partner tile that links: its container's HTML tag is "a"
 * and it has a link. A card links only to a page that exists, and only where
 * the page's context calls for it. The whole card is then one target: the
 * border and title take the accent on hover, and focus gets the site's ring.
 */
.elementor .fx-dp a.e-con.fx-dcard--boxed,
.elementor .fx-dp a.e-con.fx-dlogo {
	color: inherit;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.elementor .fx-dp a.e-con.fx-dcard--boxed:hover,
.elementor .fx-dp a.e-con.fx-dlogo:hover {
	border-color: var(--wp--preset--color--accent);
}

.elementor .fx-dp a.e-con.fx-dcard--boxed:hover .fx-d-h3,
.elementor .fx-dp a.e-con.fx-dlogo:hover .elementor-widget-text-editor {
	color: var(--wp--preset--color--accent-strong);
}

.elementor .fx-dp a.e-con.fx-dcard--boxed:focus-visible,
.elementor .fx-dp a.e-con.fx-dlogo:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/*
 * A link inside running text (a contextual link to another product page) is
 * underlined, so it is never told apart by colour alone.
 */
.elementor .fx-dp :is(.fx-d-body, .fx-d-text, .fx-dlist) a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.elementor .fx-dp :is(.fx-d-body, .fx-d-text, .fx-dlist) a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.elementor .fx-dp .fx-dcard .fx-d-icon {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* ---- Platform band and flow diagram --------------------------------------- */

/*
 * The one dark band on a detail page, spent on the platform argument: this is
 * where Foodyx stops being a single product. Contained rather than full-bleed,
 * like the products page's hub band, so it does not read as the footer.
 */
.elementor .fx-dp .e-con.fx-dband {
	--display: grid;
	display: grid;
	gap: var(--wp--preset--spacing--80);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dband .fx-d-h2 {
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dband .fx-d-body {
	color: var(--wp--custom--on-dark--muted);
}

/* A contextual link on the dark band: the footer's on-dark accent, not petrol. */
.elementor .fx-dp .fx-dband .fx-d-body a {
	color: var(--wp--custom--on-dark--accent);
}

.elementor .fx-dp .fx-dband .fx-d-body a:hover {
	color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dband .fx-d-body a:focus-visible {
	outline-color: var(--wp--custom--on-dark--accent);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dband {
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dband {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--wp--preset--spacing--90);
		align-items: center;
	}
}

/*
 * THE FLOW DIAGRAM. Each tier is one Text Editor: a list of nodes, or a single
 * paragraph for the hub. The arrows are ::before on every tier after the
 * first, so they are never content, never reach a screen reader, and survive
 * an editor adding, removing or renaming a node. What assistive technology
 * gets is the tiers in order — sources, POSHUB, the till, the outputs.
 *
 * Nodes wrap and centre, so a tier of four fits a 320px band on two lines
 * instead of overflowing it.
 */
.elementor .fx-dp .e-con.fx-dflow {
	--display: flex;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.elementor .fx-dp .fx-dflow__tier {
	text-align: center;
}

.elementor .fx-dp .fx-dflow__tier + .fx-dflow__tier::before {
	content: "";
	display: block;
	width: 0.625rem;
	height: var(--wp--preset--spacing--80);
	margin-inline: auto;
	/* A shaft and an arrowhead, both masks over one token colour. */
	background-color: var(--wp--custom--on-dark--muted);
	-webkit-mask:
		linear-gradient(#000, #000) center top / var(--wp--custom--border--connector) calc(100% - 4px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 0h10L5 7z'/%3E%3C/svg%3E") center bottom / 100% 7px no-repeat;
	mask:
		linear-gradient(#000, #000) center top / var(--wp--custom--border--connector) calc(100% - 4px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 0h10L5 7z'/%3E%3C/svg%3E") center bottom / 100% 7px no-repeat;
}

.elementor .fx-dp .fx-dflow__tier ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor .fx-dp .fx-dflow__tier li,
.elementor .fx-dp .fx-dflow__tier p {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--on-dark--rule);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--field);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
}

/* A bolded node is the one this page is about. */
.elementor .fx-dp .fx-dflow__tier strong {
	color: var(--wp--custom--on-dark--accent);
}

.elementor .fx-dp .fx-dflow__tier li:has(strong) {
	border-color: var(--wp--custom--on-dark--accent);
}

/* POSHUB: the only saturated node, as on the products page's hub band. */
.elementor .fx-dp .fx-dflow__tier--hub p,
.elementor .fx-dp .fx-dflow__tier--hub li {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* The till: solid and light, the node everything lands on. */
.elementor .fx-dp .fx-dflow__tier--core p,
.elementor .fx-dp .fx-dflow__tier--core li {
	border-color: var(--wp--preset--color--field);
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---- Numbered order flow ------------------------------------------------- */

/*
 * A real <ol> in one Text Editor: the order IS the content, so the numbers are
 * list counters rather than typed digits and renumber themselves when a step is
 * added.
 *
 * Read as a pipeline, not a flowchart: zero-padded step numbers on small
 * square markers (the homepage's product numbering), a solid accent hairline
 * between them, and only the last marker filled -- the order
 * has arrived where it was going. Stacked with the track down the markers on
 * phones; four compact cards with the track running across from 64rem.
 */
.elementor .fx-dp .fx-dsteps {
	--fx-marker: 2rem;
	--fx-step-gap: var(--wp--preset--spacing--50);
	--fx-step-pad: var(--wp--preset--spacing--50);
}

.elementor .fx-dp .fx-dsteps ol {
	display: grid;
	gap: var(--fx-step-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fx-step;
}

.elementor .fx-dp .fx-dsteps li {
	position: relative;
	display: grid;
	grid-template-columns: var(--fx-marker) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	counter-increment: fx-step;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	line-height: 1.35;
}

.elementor .fx-dp .fx-dsteps li::before {
	content: counter(fx-step, decimal-leading-zero);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--fx-marker);
	height: var(--fx-marker);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.elementor .fx-dp .fx-dsteps li:last-child::before {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--field);
}

/* The track: from this marker's centre to the next one's. */
.elementor .fx-dp .fx-dsteps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: calc(var(--fx-marker) / 2);
	height: calc(100% + var(--fx-step-gap));
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent);
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dsteps ol {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.elementor .fx-dp .fx-dsteps li {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--40);
		padding: var(--fx-step-pad);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--field);
	}

	.elementor .fx-dp .fx-dsteps li:not(:last-child)::after {
		top: calc(var(--fx-step-pad) + var(--fx-marker) / 2);
		inset-inline-start: calc(var(--fx-step-pad) + var(--fx-marker));
		width: calc(100% + var(--fx-step-gap) - var(--fx-marker));
		height: 0;
		border-inline-start: 0;
		border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent);
	}
}

/* ---- Partner logos -------------------------------------------------------- */

/*
 * Mark and name, as on the homepage's integration groups, in bordered tiles so
 * a row of six reads as a set. The mark is decorative (empty alt): the name
 * beside it already says who the partner is.
 */
.elementor .fx-dp .e-con.fx-dlogos {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.elementor .fx-dp .e-con.fx-dlogo {
	--display: flex;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	min-height: 3.5rem;
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dlogo img {
	display: block;
	flex: 0 0 auto;
	width: var(--wp--custom--size--badge);
	height: var(--wp--custom--size--badge);
	border-radius: 50%;
}

.elementor .fx-dp .fx-dlogo .elementor-widget-text-editor {
	min-width: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
}

/* Mark above name on phones, where a 150px tile cannot hold both on a line
   without breaking "Thuisbezorgd"; side by side from 48rem. */
@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dlogos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elementor .fx-dp .e-con.fx-dlogo {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.elementor .fx-dp .fx-dlogo .elementor-widget-text-editor {
		flex: 1 1 0%;
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .e-con.fx-dlogos {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/*
 * fx-dlogos--brand: the official partner logos (assets/img/integrations/
 * brand/), shown the way the Integraties mega menu shows them — each mark
 * whole, never recoloured, in a small white hairline tile with object-fit:
 * contain, so round badges and wide wordmarks keep their proportions. The
 * plain row (the grey Foodyx badges in a circle) is unchanged.
 */
.elementor .fx-dp .fx-dlogos--brand .fx-dlogo img {
	box-sizing: border-box;
	padding: 3px;
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--field);
	object-fit: contain;
}

/* ---- Checked list and media panel ---------------------------------------- */

/*
 * An ordinary <ul> in a Text Editor, marked with an accent tick. The tick is a
 * rotated border, so it needs no icon file and scales with the text.
 */
.elementor .fx-dp .fx-dlist ul {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

.elementor .fx-dp .fx-dlist li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--ink);
	line-height: 1.45;
}

.elementor .fx-dp .fx-dlist li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	inset-inline-start: 0.3rem;
	width: 0.4rem;
	height: 0.75rem;
	border-block-end: var(--wp--custom--border--connector) solid var(--wp--preset--color--accent);
	border-inline-end: var(--wp--custom--border--connector) solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
}

/* The list as the evidence column: boxed, and without the leading space. */
.elementor .fx-dp .fx-dlist--boxed {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dlist--boxed ul {
	margin: 0;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dlist--boxed {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}
}

/*
 * A product photo on white. The photo carries its own white margin, so the
 * panel adds only the hairline and radius — padding on top of that read as an
 * empty mount around a small product.
 */
.elementor .fx-dp .e-con.fx-dmedia {
	--display: block;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dmedia img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Final CTA ------------------------------------------------------------ */

/*
 * The band is home.css's .fx-close. Two things are restated for detail pages:
 *
 *   leading margin  home.css gives it spacing-110 at one class and Elementor's
 *                   container margin outranks that, so it landed straight under
 *                   the section above. Detail pages use their own section
 *                   rhythm here instead, so the band is one more section.
 *   padding         the homepage band also holds the newsletter signup; here it
 *                   holds a heading, a sentence and two buttons, and 128px
 *                   above and below read as empty. One step down the scale.
 */
.elementor .fx-elementor-section.fx-close.fx-dp {
	margin-block-start: var(--wp--preset--spacing--90);
	padding-block: var(--wp--preset--spacing--80);
}

@media (min-width: 48rem) {
	.elementor .fx-elementor-section.fx-close.fx-dp {
		margin-block-start: var(--wp--preset--spacing--100);
		padding-block: var(--wp--preset--spacing--90);
	}
}

/*
 * --compact: for a closing band that holds a two-line heading, one sentence
 * and the buttons, and nothing else. One more step down the spacing scale.
 */
.elementor .fx-elementor-section.fx-close.fx-dp.fx-close--compact {
	padding-block: var(--wp--preset--spacing--70);
}

@media (min-width: 48rem) {
	.elementor .fx-elementor-section.fx-close.fx-dp.fx-close--compact {
		padding-block: var(--wp--preset--spacing--80);
	}
}

/* ---- Hero reassurance row --------------------------------------------------- */

/*
 * Three short proof points under the hero actions: supporting copy, not a
 * section. Each is one Text Editor; the pale check badge is drawn on its
 * wrapper so it stays out of the content. They wrap on narrow screens and
 * take a hairline divider between them once they share a line.
 */
.elementor .fx-dp .e-con.fx-dassure {
	--display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.elementor .fx-dp .fx-dassure__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: auto;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
}

.elementor .fx-dp .fx-dassure__item::before {
	content: "";
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
}

.elementor .fx-dp .fx-dassure__item::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: 0.5rem;
	width: 0.3rem;
	height: 0.55rem;
	margin-block-start: -0.35rem;
	border-block-end: var(--wp--custom--border--connector) solid var(--wp--preset--color--accent);
	border-inline-end: var(--wp--custom--border--connector) solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
}

/* ---- Handheld device and screen detail ------------------------------------ */

/*
 * Two generic components for products whose screen runs on a handheld or
 * tablet: MPOS first; QR Ordering, Tablet Menu and Kiosk can use the same
 * two. Both go on an Image widget's "CSS Classes" field and frame a REAL
 * product screenshot. Neither draws a UI, and neither adds brand hardware,
 * reflections or a notch: a plain dark bezel is enough to read as a device.
 *
 * fx-ddevice     the whole screen inside a handheld bezel, centred and capped
 *                at a phone-like width so a portrait capture never becomes a
 *                page-high image. --fx-device-width sets the cap.
 * fx-dscreen     a detail of the same kind of screen at a readable scale: the
 *                top of the capture, cropped by CSS (the pixels are untouched)
 *                in a dark panel, for a section that talks about what is on
 *                the screen.
 *
 * The bezel and corner derive from tokens: the spacing step and 4x the large
 * radius, a device's physical shape rather than a new token.
 */
.elementor .fx-dp .fx-ddevice {
	--fx-device-width: 15rem;
	--fx-device-bezel: var(--wp--preset--spacing--30);
	--fx-device-radius: calc(var(--wp--custom--radius--lg) * 4);
}

.elementor .fx-dp .fx-ddevice img {
	display: block;
	box-sizing: border-box;
	width: min(100%, var(--fx-device-width));
	height: auto;
	margin-inline: auto;
	border: var(--fx-device-bezel) solid var(--wp--preset--color--ink);
	border-radius: var(--fx-device-radius);
	background-color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--md);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-ddevice {
		--fx-device-width: 17rem;
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-ddevice {
		--fx-device-width: 19rem;
	}
}

/*
 * A hero whose visual is a device: the wash panel stays (the product is still
 * framed on the product surface), with more air so the handheld stands in it
 * rather than filling it edge to edge.
 */
.elementor .fx-dp .e-con.fx-dhero__media--device {
	align-items: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dhero__media--device {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	}
}

.elementor .fx-dp .fx-dscreen {
	box-sizing: border-box;
	overflow: hidden;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--ink);
}

.elementor .fx-dp .fx-dscreen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* The crop — except on fx-dscreen--whole, which keeps the capture's own ratio. */
.elementor .fx-dp .fx-dscreen:not(.fx-dscreen--whole) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dscreen {
		padding: var(--wp--preset--spacing--50);
	}
}

/* ---- Channel flow ----------------------------------------------------------- */

/*
 * fx-dpair--flow: the fx-dpair chain stretched to a whole order route — a
 * channel, POSHUB and where the order ends up (Webshop now; Kiosk and QR
 * Ordering can use the same). Four to six nodes, each with a short caption
 * (fx-dpair__note) under its label. POSHUB keeps its filled, ringed mark.
 *
 * Phones: the chain runs down the page, connectors vertical, because five
 * marks and their captions cannot share a 300px row. From 48rem it runs
 * across, like the integration chain, inside a white hairline panel so it
 * reads as one diagram rather than loose icons.
 */
.elementor .fx-dp .e-con.fx-dpair--flow {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dpair--flow .e-con.fx-dpair__node {
	gap: var(--wp--preset--spacing--30);
	max-width: 14rem;
}

.elementor .fx-dp .fx-dpair__note {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	text-align: center;
}

/* Vertical connector: the same dashed line and arrowhead, turned down. */
.elementor .fx-dp .fx-dpair--flow .e-con.fx-dpair__link {
	flex: 0 0 auto;
	width: 0;
	min-width: 0;
	max-width: none;
	height: var(--wp--preset--spacing--60);
	margin: 0;
	border-block-start: 0;
	border-inline-start: var(--wp--custom--border--connector) dashed var(--wp--preset--color--connector);
}

.elementor .fx-dp .fx-dpair--flow .fx-dpair__link::after {
	top: auto;
	bottom: -1px;
	inset-inline-end: auto;
	inset-inline-start: -5px;
	transform: rotate(135deg);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dpair--flow {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	}

	.elementor .fx-dp .fx-dpair--flow .e-con.fx-dpair__node {
		flex: 1 1 0;
	}

	.elementor .fx-dp .fx-dpair--flow .e-con.fx-dpair__link {
		flex: 0 1 3rem;
		width: auto;
		min-width: 1rem;
		height: var(--wp--custom--border--connector);
		margin-block-start: calc(var(--fx-mark) / 2 - 1px);
		border-inline-start: 0;
		border-block-start: var(--wp--custom--border--connector) dashed var(--wp--preset--color--connector);
	}

	.elementor .fx-dp .fx-dpair--flow .fx-dpair__link::after {
		top: -6px;
		bottom: auto;
		inset-inline-start: auto;
		inset-inline-end: -1px;
		transform: rotate(45deg);
	}
}

/*
 * The channel the page is about (fx-dpair__node--product): outlined in the
 * accent on the soft accent ground, its label in the strong accent -- the
 * platform band's treatment of a bolded node. Not filled: POSHUB keeps the
 * only solid mark and its ring, so it stays the centre of the route.
 */
.elementor .fx-dp .fx-dpair--flow .fx-dpair__node--product .fx-d-icon {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.elementor .fx-dp .fx-dpair--flow .fx-dpair__node--product .fx-dpair__label {
	color: var(--wp--preset--color--accent-strong);
}

/* ---- Standing hardware ------------------------------------------------------ */

/*
 * For a product that is a piece of hardware on the floor rather than in a
 * hand: Kiosk first; a Tablet Menu on a stand can use the same two. Both size
 * the visual by HEIGHT (--fx-stand-height), not width, so a tall portrait
 * device stays a device and never becomes a page-high image, and it stands on
 * the bottom of its panel instead of floating in the middle.
 *
 * fx-dhero__media--stand  hero media modifier: the wash panel, device on its base
 * fx-dstand               a white hairline panel with a floor: the lower band in
 *                         the ground colour, a soft rule at the horizon just
 *                         behind the device's base (5% up the visual)
 *
 * Neither draws the device; both frame an Image widget.
 */
.elementor .fx-dp .fx-dhero__media--stand,
.elementor .fx-dp .fx-dstand {
	--fx-stand-height: 22rem;
}

.elementor .fx-dp .e-con.fx-dhero__media--stand {
	align-items: center;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.elementor .fx-dp .fx-dhero__media--stand img,
.elementor .fx-dp .fx-dstand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--fx-stand-height);
	margin-inline: auto;
	border-radius: 0;
	object-fit: contain;
	/* A device wider than its column is letterboxed: keep it on the floor. */
	object-position: center bottom;
}

.elementor .fx-dp .e-con.fx-dstand {
	--fx-stand-floor: calc(var(--wp--preset--spacing--60) + var(--fx-stand-height) * 0.05);

	--display: flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(
		to top,
		var(--wp--preset--color--ground) var(--fx-stand-floor),
		var(--wp--custom--surface--rule-soft) var(--fx-stand-floor) calc(var(--fx-stand-floor) + var(--wp--custom--border--hairline)),
		var(--wp--preset--color--field) calc(var(--fx-stand-floor) + var(--wp--custom--border--hairline))
	);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dhero__media--stand,
	.elementor .fx-dp .fx-dstand {
		--fx-stand-height: 26rem;
	}

	.elementor .fx-dp .e-con.fx-dhero__media--stand {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dhero__media--stand,
	.elementor .fx-dp .fx-dstand {
		--fx-stand-height: 30rem;
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-dhero__media--stand,
	.elementor .fx-dp .fx-dstand {
		--fx-stand-height: 32rem;
	}
}

/*
 * fx-dsplit--flip: the visual on the left from 64rem, the head on the right.
 * The head stays first in the document (and on phones), so the heading order
 * and reading order do not change; only the columns swap.
 */
@media (min-width: 64rem) {
	.elementor .fx-dp .e-con.fx-dsplit--flip {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.elementor .fx-dp .fx-dsplit--flip > .fx-dhead {
		order: 2;
	}
}

/*
 * fx-dstrip--3: the benefit strip with three items — one row of three from
 * 48rem instead of the four-up strip's two-then-four, so no item is left alone
 * on a second row.
 */
@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dstrip--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elementor .fx-dp .fx-dstrip--3 .fx-dstrip__item:nth-child(n + 3) {
		border-block-start: 0;
	}

	.elementor .fx-dp .fx-dstrip--3 .fx-dstrip__item + .fx-dstrip__item {
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}
}

/* ---- Visual cue ------------------------------------------------------------ */

/*
 * fx-dcue: a small secondary visual pinned to the lower inline-start corner of
 * the media panel it sits in, over the panel's padding and just touching the
 * main visual — the QR card beside the phone on QR Ordering; a table card
 * beside a Tablet Menu could use the same. An Image widget class; the panel
 * becomes the positioning context because it holds one. Decorative: the copy
 * says what it shows, so the image has no alt text.
 */
.elementor .fx-dp .e-con:has(> .fx-dcue) {
	position: relative;
}

.elementor .fx-dp .fx-dcue {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--50);
	inset-block-end: var(--wp--preset--spacing--50);
	z-index: 1;
	width: 5rem;
}

.elementor .fx-dp .fx-dcue img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dcue {
		inset-inline-start: var(--wp--preset--spacing--70);
		inset-block-end: var(--wp--preset--spacing--70);
		width: 6.5rem;
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dcue {
		width: 7.5rem;
	}
}

/*
 * A flat cue (the QR card, not a small device) never covers the main visual's
 * screen. Beside a phone there is room for it only in the wider panels; where
 * there is not, it gets smaller or moves below the phone:
 *   below 48rem   the panel is barely wider than the phone, so the card goes
 *                 under it, in the lower corner — the panel's bottom padding
 *                 grows by exactly the card's height (the card is 174x206);
 *   64rem–80rem   the hero column is narrowest here, so the card is smaller.
 */
.elementor .fx-dp .fx-dcue:not(.fx-ddevice) {
	--fx-cue-width: 3.5rem;
	inset-block-end: var(--wp--preset--spacing--40);
	width: var(--fx-cue-width);
}

.elementor .fx-dp .e-con:has(> .fx-dcue:not(.fx-ddevice)) {
	padding-block-end: calc(var(--fx-cue-width, 3.5rem) * 206 / 174 + var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dcue:not(.fx-ddevice) {
		inset-block-end: var(--wp--preset--spacing--70);
		width: 6.5rem;
	}

	.elementor .fx-dp .e-con:has(> .fx-dcue:not(.fx-ddevice)) {
		padding-block-end: var(--wp--preset--spacing--80);
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dcue:not(.fx-ddevice) {
		width: 5.5rem;
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-dcue:not(.fx-ddevice) {
		width: 7.5rem;
	}
}

/*
 * fx-dsteps--stack: the numbered steps stay stacked, track down the markers, at
 * every width — for steps in the narrow head column beside a device, where the
 * four-across cards from 64rem would be ~100px each. In a section head it
 * keeps a body's distance from the text around it.
 */
.elementor .fx-dp .fx-dhead .fx-dsteps--stack {
	margin-block: var(--wp--preset--spacing--60);
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dsteps--stack ol {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .fx-dp .fx-dsteps--stack li {
		grid-template-columns: var(--fx-marker) minmax(0, 1fr);
		grid-template-rows: none;
		align-items: center;
		padding: 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
	}

	.elementor .fx-dp .fx-dsteps--stack li:not(:last-child)::after {
		top: 50%;
		inset-inline-start: calc(var(--fx-marker) / 2);
		width: auto;
		height: calc(100% + var(--fx-step-gap));
		border-block-start: 0;
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent);
	}
}

/*
 * fx-ddevice--tablet: the same plain bezel around a landscape tablet screen —
 * Tablet Menu first; any landscape device screen can use it. Wider than the
 * phone cap, and a smaller corner relative to its size, so a tablet does not
 * read as a stretched phone. Width-sized like fx-ddevice; for a tablet on a
 * stand use fx-dstand instead.
 */
.elementor .fx-dp .fx-ddevice--tablet {
	--fx-device-width: 100%;
	--fx-device-radius: calc(var(--wp--custom--radius--lg) * 2);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-ddevice--tablet {
		--fx-device-width: 32rem;
		--fx-device-bezel: var(--wp--preset--spacing--40);
		--fx-device-radius: calc(var(--wp--custom--radius--lg) * 3);
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-ddevice--tablet {
		--fx-device-width: 36rem;
	}
}

/*
 * fx-dscreen--whole: the dark screen panel around the WHOLE capture, uncropped —
 * for a wide screenshot that is the product at a glance (KDS: a row of order
 * cards), where fx-dscreen's 4:3 top crop would cut it to its middle. Pair it
 * with plain fx-dscreen elsewhere on the page for the readable detail.
 *
 * It needs no rule of its own: the crop above is scoped to exclude it. Do not
 * "reset" aspect-ratio here — any author value (even `auto`) drops the ratio
 * the browser maps from the img's width/height attributes, and a lazy image
 * with sizes="auto" (size-contained) then falls back to its 3000x1500 intrinsic
 * placeholder.
 */

/*
 * A small device as the cue (fx-dcue + fx-ddevice on one Image widget): the
 * handheld bezel and corner scaled to the cue's size, so a phone beside a
 * larger screen still reads as a phone and not as a card. POS Analytics: the
 * phone dashboard in front of the desktop one.
 */
.elementor .fx-dp .fx-dcue.fx-ddevice img {
	border-width: var(--wp--preset--spacing--20);
	border-radius: calc(var(--wp--custom--radius--lg) * 2);
}

/*
 * fx-dstand--wide: the stand panel for a wide device (Tablet Menu: a landscape
 * tablet in a table cradle). A height-sized wide device is letterboxed in most
 * columns and leaves a band of air above it, so this sizes the image by the
 * panel's WIDTH instead, edge to edge. The visual then draws its own tabletop
 * (the ground band and horizon rule) so the floor always meets the holder;
 * the panel keeps its hairline, radius and top air and drops the gradient
 * floor. Plain fx-dstand (Kiosk) is unchanged.
 */
.elementor .fx-dp .e-con.fx-dstand--wide {
	overflow: hidden;
	padding: var(--wp--preset--spacing--80) 0 0;
	background: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dstand--wide img {
	width: 100%;
	max-width: none;
	height: auto;
}

/*
 * fx-dstand--photo: the stand panel for a product photo shot on a white
 * studio background (Kiosk: the kiosk on its floor column). The photo brings
 * its own floor and contact shadow, so the panel drops the drawn floor — a
 * second floor behind the photo's reads as two planes — and becomes one flat
 * white field. A colour, not a gradient: Elementor's lazy-loaded backgrounds
 * only strip background-image. The photo's studio white is 253–254, not 255:
 * brightness(1.01) lifts it to pure white (everything else moves 1%, which
 * nobody sees) and multiply keeps any remaining off-white on the field's
 * terms, so no rectangle shows. The photo has little air of its own
 * above and below the kiosk, so the panel can carry it taller than a drawn
 * device; the heights stay within the column at every width. The photo is
 * otherwise unchanged. The theme has no dark scheme; revisit if it gets one.
 */
.elementor .fx-dp .fx-dstand--photo {
	--fx-stand-height: 26rem;
}

.elementor .fx-dp .e-con.fx-dstand--photo {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dstand--photo img {
	filter: brightness(1.01);
	mix-blend-mode: multiply;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dstand--photo {
		--fx-stand-height: 36rem;
	}
}

@media (min-width: 64rem) {
	.elementor .fx-dp .fx-dstand--photo {
		--fx-stand-height: 38rem;
	}
}

@media (min-width: 80rem) {
	.elementor .fx-dp .fx-dstand--photo {
		--fx-stand-height: 42rem;
	}
}

/* ---- Roadmap: "Binnenkort" and "In ontwikkeling" --------------------------- */

/*
 * Roadmap items must never read as available features
 * (docs/foodyx-website-handoff/claimmatrix.md: BINNENKORT only with the label,
 * RICHTING only as an outlook). A roadmap card has a dashed rule instead of a
 * solid one, sits on the ground instead of white, carries no tick or icon, and
 * leads with a text badge, so the difference is never colour alone.
 *
 *   fx-dcard--soon  on a card (boxed or plain) in a grid of available ones, or
 *                   on its own
 *   fx-dbadge       a Text Editor with the label, first in the card
 */
.elementor .fx-dp .e-con.fx-dcard--soon {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) dashed var(--wp--preset--color--connector);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ground);
}

.elementor .fx-dp .fx-dbadge p {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0.15em 0.6em;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--ink-muted);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: uppercase;
}

.elementor .fx-dp .fx-dcard--soon .fx-d-text {
	color: var(--wp--preset--color--ink-muted);
}

/* ---- Price cards ------------------------------------------------------------ */

/* The "vanaf" price on a boxed card: one figure, the card's largest text. */
.elementor .fx-dp .fx-dprice {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
}

.elementor .fx-dp .fx-dprice p {
	margin: 0;
}

/* ---- Cost calculator -------------------------------------------------------- */

/*
 * [foodyx_section slug="cost-calculator"], inc/partials/cost-calculator.php.
 * One bordered white panel: the orders, three model cards (one column on
 * phones, three from 60rem), then the result on the tinted ground. Inputs are
 * 44px tall (touch target) with 1rem text, so iOS does not zoom on focus.
 */
.elementor .fx-dp .fx-calc {
	box-sizing: border-box;
	/*
	 * A flex item (its widget wrapper is flattened): without min-width: 0 the
	 * table's widest figure set the block's minimum width, so extreme values
	 * pushed it past a phone screen instead of scrolling inside .fx-calc__scroll.
	 */
	width: 100%;
	min-width: 0;
	max-width: 64rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-calc {
		padding: var(--wp--preset--spacing--70);
	}
}

.elementor .fx-dp .fx-calc__sub {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* A group of fields: the browser's fieldset frame off, the legend as a heading. */
.elementor .fx-dp .fx-calc__set {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.elementor .fx-dp .fx-calc__legend {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.3;
}

.elementor .fx-dp .fx-calc__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-calc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.elementor .fx-dp .fx-calc__models {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
}

@media (min-width: 60rem) {
	.elementor .fx-dp .fx-calc__models {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Each model on its own card; the legend sits inside it (float keeps it in the flow). */
.elementor .fx-dp .fx-calc__model {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
}

.elementor .fx-dp .fx-calc__model > .fx-calc__legend {
	float: left;
	width: 100%;
	margin: 0;
}

.elementor .fx-dp .fx-calc__model--foodyx {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--custom--surface--accent-wash);
}

.elementor .fx-dp .fx-calc__what {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

/* Foodyx's two fixed figures, in the place the other cards have fields. */
.elementor .fx-dp .fx-calc__fixed {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.elementor .fx-dp .fx-calc__fixed div {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

.elementor .fx-dp .fx-calc__fixed :is(dt, dd) {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.elementor .fx-dp .fx-calc__fixed dd {
	color: var(--wp--preset--color--accent-strong);
	font-weight: 700;
	white-space: nowrap;
}

.elementor .fx-dp .fx-calc__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.4;
}

.elementor .fx-dp .fx-calc__control {
	display: flex;
	min-height: 44px;
	overflow: hidden;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--connector);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-calc__control:focus-within {
	border-color: var(--wp--preset--color--accent);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.elementor .fx-dp .fx-calc__input,
.elementor .fx-dp .fx-calc__select {
	box-sizing: border-box;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.elementor .fx-dp .fx-calc__input {
	flex: 1 1 auto;
	width: 100%;
}

.elementor .fx-dp .fx-calc__select {
	flex: 0 0 auto;
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	background: var(--wp--custom--surface--accent-wash);
	cursor: pointer;
}

.elementor .fx-dp .fx-calc__unit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 0 var(--wp--preset--spacing--40);
	border-inline-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	background: var(--wp--custom--surface--accent-wash);
	color: var(--wp--preset--color--ink-muted);
}

.elementor .fx-dp .fx-calc__unit--after {
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-inline-end: 0;
}

.elementor .fx-dp .fx-calc__hint {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
}

.elementor .fx-dp .fx-calc__result {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ground);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-calc__result {
		padding: var(--wp--preset--spacing--60);
	}
}

/* What the comparison covers, above the figures — not only in the note. */
.elementor .fx-dp .fx-calc__excl {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.45;
}

.elementor .fx-dp .fx-calc__diffs {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-calc__diffs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.elementor .fx-dp .fx-calc__big {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.elementor .fx-dp .fx-calc__big strong {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

/* Scrolls only for extreme values; typical figures fit at 360px. */
.elementor .fx-dp .fx-calc__scroll {
	overflow-x: auto;
}

.elementor .fx-dp .fx-calc__scroll:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.elementor .fx-dp .fx-calc__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.elementor .fx-dp .fx-calc__table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.elementor .fx-dp .fx-calc__table :is(th, td) {
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	background: none;
	font-weight: 400;
	text-align: end;
	white-space: nowrap;
	vertical-align: top;
}

/* Row labels are words: the table's tabular numerals would widen their colons. */
.elementor .fx-dp .fx-calc__table tbody th {
	padding-inline: 0 var(--wp--preset--spacing--40);
	font-variant-numeric: normal;
	text-align: start;
	white-space: normal;
}

.elementor .fx-dp .fx-calc__table thead :is(th, td) {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.elementor .fx-dp .fx-calc__total :is(th, td) {
	font-weight: 700;
}

.elementor .fx-dp .fx-calc__foodyx :is(th, td) {
	border-block-end: 0;
	color: var(--wp--preset--color--accent-strong);
	font-weight: 700;
}

/*
 * Phones: each row's label on its own line, the two figures under it in fixed
 * columns lined up with the header, so typical figures fit at 360px without
 * scrolling. The table keeps its semantics through explicit ARIA roles in the
 * markup (a display change can drop them otherwise).
 */
@media (max-width: 29.99rem) {
	.elementor .fx-dp .fx-calc__table,
	.elementor .fx-dp .fx-calc__table :is(thead, tbody) {
		display: block;
	}

	.elementor .fx-dp .fx-calc__table tr {
		display: grid;
		grid-template-columns: 1fr minmax(5.5rem, max-content) minmax(5.5rem, max-content);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

	.elementor .fx-dp .fx-calc__table tr.fx-calc__foodyx {
		border-block-end: 0;
	}

	.elementor .fx-dp .fx-calc__table :is(th, td) {
		border-block-end: 0;
	}

	.elementor .fx-dp .fx-calc__table tbody th {
		grid-column: 1 / -1;
		padding-block-end: 0;
		padding-inline-end: 0;
	}

	.elementor .fx-dp .fx-calc__table tbody td:first-of-type {
		grid-column: 2;
	}
}

/* The disclaimer: in the ink colour at body size, so it reads as part of the result. */
.elementor .fx-dp .fx-calc__note {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.elementor .fx-dp .fx-calc__note p {
	margin: 0;
}

.elementor .fx-dp .fx-calc__note-lead {
	font-weight: 700;
}

.elementor .fx-dp .fx-calc__note ul {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	padding-inline-start: 1.1rem;
}

/* ---- Hardware: media cards and the brand strip (/hardware/) ---------------- */

/*
 * A media card: the boxed card with a frame on top for the official product
 * photo or, where none is approved, the category icon on a soft wash, so a
 * grid with and without photos keeps one rhythm. The frame is the page's
 * ground tone, a quiet stage for transparent product shots; never a price
 * tile. Its own element class: .fx-dmedia is the bordered media panel of the
 * product pages and stays as it is.
 */
.elementor .fx-dp .e-con.fx-dcard--boxed.fx-dcard--media {
	--display: flex;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

/*
 * An explicit width: in the card's flex column the frame otherwise has no
 * definite width to take the 4:3 ratio from, and on phones it collapsed to its
 * border (its only child, the photo, is positioned out of the flow).
 */
.elementor .fx-dp .e-con.fx-dcard__media {
	--display: grid;
	display: grid;
	position: relative;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	background: var(--wp--preset--color--ground);
}

/* The photo fills the frame and is contained in it, whatever its proportions. */
.elementor .fx-dp .fx-dcard__media .elementor-widget-image {
	position: absolute;
	inset: 0;
}

.elementor .fx-dp .fx-dcard__media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--wp--preset--spacing--50);
	object-fit: contain;
}

/*
 * A frame without an approved photo: the category icon on a soft wash, in a
 * white badge, so it reads as a designed tile beside the photos and not as an
 * image that failed to load.
 */
.elementor .fx-dp .e-con.fx-dcard__media--icon {
	background: var(--wp--custom--surface--accent-wash);
}

.elementor .fx-dp .fx-dcard__media .fx-d-icon {
	width: 4.5rem;
	height: 4.5rem;
	background-color: var(--wp--preset--color--field);
}

.elementor .fx-dp .fx-dcard__media .fx-d-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.elementor .fx-dp .e-con.fx-dcard__body {
	--display: block;
	display: block;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

/*
 * The brands strip: a small muted title and four even tiles, two by two on a
 * phone, one row from 48rem. A logo is shown in one tone so the four read as a
 * set and no brand outshouts the page; without a logo file the name stands in
 * as a quiet wordmark.
 */
.elementor .fx-dp .e-con.fx-dbrands {
	--display: grid;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.elementor .fx-dp .fx-dbrands__title {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.elementor .fx-dp .e-con.fx-dbrands__row {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 48rem) {
	.elementor .fx-dp .e-con.fx-dbrands__row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.elementor .fx-dp .e-con.fx-dbrand {
	--display: grid;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-height: 4.5rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--field);
}

/*
 * One height for every logo, the width following each mark's own proportions,
 * and one tone: the marks are shown as an even grey silhouette (their shapes
 * untouched) so Epson's blue, SUNMI's black and FEC's grey read as one quiet set.
 */
.elementor .fx-dp .fx-dbrand img {
	display: block;
	width: auto;
	max-width: 70%;
	height: 1.5rem;
	object-fit: contain;
	filter: grayscale(1) brightness(0);
	opacity: 0.55;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dbrand img {
		height: 1.75rem;
	}
}

/* A stacked logo (mark above the name, e.g. RUCKUS) needs more height to read at the size of the wordmarks. */
.elementor .fx-dp .fx-dbrand--stacked img {
	height: 2.25rem;
}

@media (min-width: 48rem) {
	.elementor .fx-dp .fx-dbrand--stacked img {
		height: 2.5rem;
	}
}

.elementor .fx-dp .fx-dbrand__name p {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}