/**
 * Kittels — unified horizontal grid aligned to header.
 * Safe with Elementor: CSS only, no JSON edits.
 */

:root {
	--kittels-site-max: 1880px;
	--kittels-gutter: clamp(15px, 1.25vw, 48px);
}

/* Header + footer: same outer gutter as content */
header.whb-header .container,
footer.wd-footer .container,
.wd-footer .container {
	max-width: var(--kittels-site-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kittels-gutter) !important;
	padding-right: var(--kittels-gutter) !important;
	box-sizing: border-box !important;
}

/* Woo / Woodmart page containers */
.wd-page-content .container,
.wd-page-content .wd-content-layout.container,
.wd-page-content .wd-content-area > .container {
	max-width: var(--kittels-site-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kittels-gutter) !important;
	padding-right: var(--kittels-gutter) !important;
	box-sizing: border-box !important;
}

/* Elementor boxed sections — align inner column to header content edges */
.wd-page-content main .elementor .e-con-boxed > .e-con-inner {
	width: 100% !important;
	max-width: var(--kittels-site-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kittels-gutter) !important;
	padding-right: var(--kittels-gutter) !important;
	box-sizing: border-box !important;
}

/* Full-bleed backgrounds stay edge-to-edge; content stays padded inside .e-con-inner */
.wd-page-content main .elementor .e-con-boxed.e-parent {
	width: 100% !important;
	max-width: 100% !important;
}

/* Fluid Elementor columns (avoid rigid px widths breaking on tablet) */
.wd-page-content main .elementor .e-con.e-con-full,
.wd-page-content main .elementor .e-con.e-child {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.wd-page-content main .elementor .e-con.e-flex > .e-con {
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* Legacy Elementor sections */
.wd-page-content main .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--kittels-site-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kittels-gutter) !important;
	padding-right: var(--kittels-gutter) !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	:root {
		--kittels-gutter: clamp(12px, 4vw, 20px);
	}
}

/*
 * Cooperation benefits (103) — text cards: icon → title → body at the TOP.
 * Elementor post-103 sets justify-content: space-between on every breakpoint.
 */
.elementor-103 .elementor-element.elementor-element-0f42083,
.elementor-103 .elementor-element.elementor-element-4c5a0ed,
.elementor-103 .elementor-element.elementor-element-b17fc02 {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
	--align-items: flex-start !important;
	gap: clamp(32px, 6vw, 113px) !important;
	--row-gap: clamp(32px, 6vw, 113px) !important;
	--column-gap: 0px !important;
}

.elementor-103 .elementor-element-0f42083 > .elementor-widget-image,
.elementor-103 .elementor-element-4c5a0ed > .elementor-widget-image,
.elementor-103 .elementor-element-b17fc02 > .elementor-widget-image {
	flex: 0 0 auto !important;
	align-self: flex-start !important;
}

.elementor-103 .elementor-element-0f42083 > .e-con,
.elementor-103 .elementor-element-4c5a0ed > .e-con,
.elementor-103 .elementor-element-b17fc02 > .e-con {
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-self: flex-start !important;
	width: 100% !important;
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
	gap: 16px !important;
	--row-gap: 16px !important;
}

.elementor-103 .elementor-element-43f226c .elementor-element-615b62b .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-36a37b0 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-2194879 .wd-text-block {
	font-family: "Inter Tight", sans-serif !important;
	font-size: 32px !important;
	font-weight: 500 !important;
	line-height: 100% !important;
	color: #1d1f1e !important;
}

.elementor-103 .elementor-element-43f226c .elementor-element-cdf4e04 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-3ef1327 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-8ab6488 .wd-text-block {
	font-family: "Manrope", sans-serif !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 140% !important;
	color: #1d1f1e !important;
}

@media (max-width: 767px) {
	.elementor-103 .elementor-element-43f226c .elementor-element-615b62b .wd-text-block,
	.elementor-103 .elementor-element-43f226c .elementor-element-36a37b0 .wd-text-block,
	.elementor-103 .elementor-element-43f226c .elementor-element-2194879 .wd-text-block {
		font-size: 24px !important;
	}

	.elementor-103 .elementor-element-43f226c .elementor-element-cdf4e04 .wd-text-block,
	.elementor-103 .elementor-element-43f226c .elementor-element-3ef1327 .wd-text-block,
	.elementor-103 .elementor-element-43f226c .elementor-element-8ab6488 .wd-text-block {
		font-size: 14px !important;
	}
}

/*
 * Card grids — desktop only (≥1025px). Tablet/phone use Elementor responsive layout.
 * Homepage steps (73/bd0ff99) — 4×2 Figma stagger
 * About steps (101/e0496ea) — same layout
 * Cooperation benefits (103/43f226c)
 * Cooperation directions (103/ef4dc36) — 4-col Figma layout
 */
@media (min-width: 1025px) {
.elementor-73 .elementor-element-bd0ff99,
.elementor-101 .elementor-element-e0496ea {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px) !important;
	--row-gap: clamp(12px, 1.4vw, 20px) !important;
	--column-gap: clamp(12px, 1.4vw, 20px) !important;
	flex-wrap: nowrap !important;
}

.elementor-103 .elementor-element-43f226c {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px) !important;
	--row-gap: clamp(12px, 1.4vw, 20px) !important;
	--column-gap: clamp(12px, 1.4vw, 20px) !important;
}

.elementor-103 .elementor-element-ef4dc36 {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px) !important;
	--row-gap: clamp(12px, 1.4vw, 20px) !important;
	--column-gap: clamp(12px, 1.4vw, 20px) !important;
}

.elementor-73 .elementor-element-bd0ff99 > .elementor-element-5da3ef7,
.elementor-73 .elementor-element-bd0ff99 > .elementor-element-7502321,
.elementor-73 .elementor-element-bd0ff99 > .elementor-element-9d05e95,
.elementor-73 .elementor-element-bd0ff99 > .elementor-element-a1284b3,
.elementor-73 .elementor-element-bd0ff99 > .elementor-element-1f96ab2,
.elementor-73 .elementor-element-bd0ff99 > .elementor-element-a80245b,
.elementor-101 .elementor-element-e0496ea > .elementor-element-cf8d5d2,
.elementor-101 .elementor-element-e0496ea > .elementor-element-382baba,
.elementor-101 .elementor-element-e0496ea > .elementor-element-68a3e09,
.elementor-101 .elementor-element-e0496ea > .elementor-element-c9c926e,
.elementor-101 .elementor-element-e0496ea > .elementor-element-95439dd,
.elementor-101 .elementor-element-e0496ea > .elementor-element-1642f89,
.elementor-103 .elementor-element-43f226c > .e-con,
.elementor-103 .elementor-element-ef4dc36 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: none !important;
	--width: 100% !important;
	--flex-basis: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	--margin-left: 0 !important;
	--margin-right: 0 !important;
	min-height: clamp(220px, 26vw, 375px) !important;
}

.elementor-103 .elementor-element-43f226c > .e-con > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	flex: 0 0 auto !important;
}

/* Benefits — Figma: 4 cards in one row (3 text + photo) */
.elementor-103 .elementor-element-43f226c {
	align-items: stretch !important;
}

.elementor-103 .elementor-element-0f42083 {
	grid-column: 1;
	grid-row: 1;
}

.elementor-103 .elementor-element-4c5a0ed {
	grid-column: 2;
	grid-row: 1;
}

.elementor-103 .elementor-element-3692be8 {
	grid-column: 3;
	grid-row: 1;
	align-self: stretch;
}

.elementor-103 .elementor-element-b17fc02 {
	grid-column: 4;
	grid-row: 1;
}

/* Beat Elementor post-103: space-between + min-height 375px */
.elementor-103 .elementor-element.elementor-element-0f42083,
.elementor-103 .elementor-element.elementor-element-4c5a0ed,
.elementor-103 .elementor-element.elementor-element-b17fc02 {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
	--align-items: flex-start !important;
	min-height: 0 !important;
	--min-height: 0px !important;
	height: 100% !important;
	gap: 113px !important;
	--row-gap: 113px !important;
	--column-gap: 0px !important;
	box-sizing: border-box !important;
}

.elementor-103 .elementor-element-0f42083 > .elementor-widget-image,
.elementor-103 .elementor-element-4c5a0ed > .elementor-widget-image,
.elementor-103 .elementor-element-b17fc02 > .elementor-widget-image {
	flex: 0 0 auto !important;
	align-self: flex-start !important;
}

.elementor-103 .elementor-element-43f226c > .e-con > .elementor-widget-image {
	flex: 0 0 auto;
	width: 100%;
}

.elementor-103 .elementor-element-43f226c > .e-con > .elementor-widget-image .elementor-widget-container {
	margin: 0 !important;
}

.elementor-103 .elementor-element-43f226c > .e-con > .elementor-widget-image img {
	display: block;
	width: 56px;
	height: auto;
}

.elementor-103 .elementor-element-0f42083 .elementor-element-8b89586,
.elementor-103 .elementor-element-4c5a0ed .elementor-element-34a891f,
.elementor-103 .elementor-element-b17fc02 .elementor-element-e872e6b {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
	gap: 16px !important;
	--row-gap: 16px !important;
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	align-self: flex-start !important;
}

.elementor-103 .elementor-element-43f226c .elementor-element-615b62b .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-36a37b0 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-2194879 .wd-text-block {
	font-family: "Inter Tight", sans-serif !important;
	font-size: 32px !important;
	font-weight: 500 !important;
	line-height: 100% !important;
	color: #1d1f1e !important;
}

.elementor-103 .elementor-element-43f226c .elementor-element-cdf4e04 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-3ef1327 .wd-text-block,
.elementor-103 .elementor-element-43f226c .elementor-element-8ab6488 .wd-text-block {
	font-family: "Manrope", sans-serif !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 140% !important;
	color: #1d1f1e !important;
}

.elementor-103 .elementor-element-43f226c .wd-text-block p,
.elementor-103 .elementor-element-43f226c .wd-text-block div {
	margin: 0 !important;
}

.elementor-103 .elementor-element.elementor-element-3692be8 {
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
	min-height: 0 !important;
	--min-height: 0px !important;
	height: 100% !important;
	padding: 0 !important;
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	overflow: hidden;
}

.elementor-103 .elementor-element-3692be8 > .e-con {
	flex: 1 1 auto !important;
	min-height: 100% !important;
	height: 100% !important;
	padding: 0 !important;
}

.elementor-103 .elementor-element-3692be8:not(.elementor-motion-effects-element-type-background),
.elementor-103 .elementor-element-3692be8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: cover !important;
	background-position: center center !important;
}

/* Steps grid — 4×2 stagger (homepage + about) */
.elementor-73 .elementor-element-5da3ef7,
.elementor-101 .elementor-element-cf8d5d2 {
	grid-column: 1;
	grid-row: 1;
}

.elementor-73 .elementor-element-7502321,
.elementor-101 .elementor-element-382baba {
	grid-column: 3;
	grid-row: 1;
}

.elementor-73 .elementor-element-9d05e95,
.elementor-101 .elementor-element-68a3e09 {
	grid-column: 4;
	grid-row: 1;
}

.elementor-73 .elementor-element-a1284b3,
.elementor-101 .elementor-element-c9c926e {
	grid-column: 1;
	grid-row: 2;
}

.elementor-73 .elementor-element-1f96ab2,
.elementor-101 .elementor-element-95439dd {
	grid-column: 2;
	grid-row: 2;
}

.elementor-73 .elementor-element-a80245b,
.elementor-101 .elementor-element-1642f89,
.elementor-73 .elementor-element-a80245b.kittels-grid-cta,
.elementor-101 .elementor-element-1642f89.kittels-grid-cta {
	grid-column: 4;
	grid-row: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #1d1f1e !important;
	min-height: clamp(220px, 26vw, 375px) !important;
	cursor: pointer;
	position: relative;
	z-index: 3;
	pointer-events: auto !important;
	transition: background-color 180ms ease, transform 180ms ease;
}

.elementor-73 .elementor-element-a80245b:hover,
.elementor-73 .elementor-element-a80245b:focus-visible,
.elementor-101 .elementor-element-1642f89:hover,
.elementor-101 .elementor-element-1642f89:focus-visible,
.elementor-73 .elementor-element-a80245b.kittels-grid-cta:hover,
.elementor-101 .elementor-element-1642f89.kittels-grid-cta:hover {
	background: #f14941 !important;
}

.elementor-73 .elementor-element-a80245b:active,
.elementor-101 .elementor-element-1642f89:active,
.elementor-73 .elementor-element-a80245b.kittels-grid-cta:active,
.elementor-101 .elementor-element-1642f89.kittels-grid-cta:active {
	transform: scale(0.985);
}

.elementor-73 .elementor-element-a80245b *,
.elementor-101 .elementor-element-1642f89 *,
.elementor-73 .elementor-element-a80245b.kittels-grid-cta *,
.elementor-101 .elementor-element-1642f89.kittels-grid-cta * {
	pointer-events: none;
}

.elementor-73 .elementor-element-a80245b .wd-text-block,
.elementor-73 .elementor-element-a80245b .wd-text-block *,
.elementor-101 .elementor-element-1642f89 .wd-text-block,
.elementor-101 .elementor-element-1642f89 .wd-text-block * {
	color: #fff !important;
	text-align: center !important;
}

/* Cooperation directions — 4×2 grid per Figma */
.elementor-103 .elementor-element-5f45789 {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
}

.elementor-103 .elementor-element-a9c033f {
	grid-column: 2;
	grid-row: 1;
}

.elementor-103 .elementor-element-bc2d0b9 {
	grid-column: 3;
	grid-row: 1;
}

.elementor-103 .elementor-element-14525d4 {
	grid-column: 4;
	grid-row: 1;
}

.elementor-103 .elementor-element-09152fb {
	grid-column: 1;
	grid-row: 2;
}

.elementor-103 .elementor-element-239c5d7 {
	grid-column: 3;
	grid-row: 2;
}

.elementor-103 .elementor-element-3c91611,
.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta,
.elementor-103 .elementor-element-3c91611.kittels-grid-cta {
	grid-column: 4;
	grid-row: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #1d1f1e !important;
	min-height: clamp(220px, 26vw, 375px) !important;
	cursor: pointer;
	position: relative;
	z-index: 3;
	pointer-events: auto !important;
	transition: background-color 180ms ease, transform 180ms ease;
}

.elementor-103 .elementor-element-3c91611:hover,
.elementor-103 .elementor-element-3c91611:focus-visible,
.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta:hover,
.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta:focus-visible {
	background: #f14941 !important;
}

.elementor-103 .elementor-element-3c91611:active,
.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta:active {
	transform: scale(0.985);
}

.elementor-103 .elementor-element-3c91611 *,
.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta * {
	pointer-events: none;
}

.elementor-103 .elementor-element-3c91611 .wd-text-block,
.elementor-103 .elementor-element-3c91611 .wd-text-block * {
	color: #fff !important;
	text-align: center !important;
}
}

/* Mobile/tablet card grids — 2 columns (Figma), CTA = last cell */
@media (max-width: 1024px) {
	.elementor-73 .elementor-element-73231a1 > .e-con-inner,
	.elementor-101 .elementor-element-e0496ea,
	.elementor-103 .elementor-element-56311bd > .e-con-inner,
	.elementor-103 .elementor-element-f14fd20 > .e-con-inner {
		width: 100% !important;
		max-width: 100% !important;
		--width: 100% !important;
	}

	.elementor-73 .elementor-element-bd0ff99,
	.elementor-101 .elementor-element-e0496ea,
	.elementor-103 .elementor-element-43f226c,
	.elementor-103 .elementor-element-ef4dc36 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-flow: row dense !important;
		gap: clamp(8px, 2.5vw, 12px) !important;
		--row-gap: clamp(8px, 2.5vw, 12px) !important;
		--column-gap: clamp(8px, 2.5vw, 12px) !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		align-items: stretch !important;
	}

	/* Desktop-only spacer in benefits row */
	.elementor-103 .elementor-element-3692be8 {
		display: none !important;
	}

	.elementor-73 .elementor-element-bd0ff99 > .e-con,
	.elementor-101 .elementor-element-e0496ea > .e-con,
	.elementor-103 .elementor-element-43f226c > .e-con,
	.elementor-103 .elementor-element-ef4dc36 > .e-con {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: none !important;
		--width: 100% !important;
		--flex-basis: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		--margin-left: 0 !important;
		--margin-right: 0 !important;
		align-self: stretch !important;
		min-height: 284px !important;
		height: 284px !important;
		box-sizing: border-box !important;
	}

	/* Benefits text cards: content from top, not space-between at bottom */
	.elementor-103 .elementor-element-43f226c > .elementor-element-0f42083,
	.elementor-103 .elementor-element-43f226c > .elementor-element-4c5a0ed,
	.elementor-103 .elementor-element-43f226c > .elementor-element-b17fc02 {
		height: auto !important;
		min-height: 284px !important;
		--min-height: 0px !important;
	}

	.elementor-73 .elementor-element-a80245b,
	.elementor-101 .elementor-element-1642f89,
	.elementor-103 .elementor-element-3c91611,
	.elementor-73 .elementor-element-a80245b.kittels-grid-cta,
	.elementor-101 .elementor-element-1642f89.kittels-grid-cta,
	.elementor-103 .elementor-element-3c91611.kittels-cooperation-cta,
	.elementor-103 .elementor-element-3c91611.kittels-grid-cta {
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: #1d1f1e !important;
		min-height: 284px !important;
		height: 284px !important;
	}

	.elementor-73 .elementor-element-a80245b .wd-text-block,
	.elementor-73 .elementor-element-a80245b .wd-text-block *,
	.elementor-101 .elementor-element-1642f89 .wd-text-block,
	.elementor-101 .elementor-element-1642f89 .wd-text-block *,
	.elementor-103 .elementor-element-3c91611 .wd-text-block,
	.elementor-103 .elementor-element-3c91611 .wd-text-block * {
		color: #fff !important;
		text-align: center !important;
	}
}