/*
 * Gelato page (post 18992) layout corrections.
 * Scoped to .elementor-18992 so nothing here can affect another page.
 *
 * A redesign of this page is coming; the intent here is only to calm the
 * current Wix-imported layout, not to restyle it. Fonts and colours are left
 * exactly as they are.
 *
 * Covers two issues from the client notes:
 *   7.4  Sections sit too tightly together and the body copy is dense and a
 *        touch heavy. Add modest breathing room between sections, open the
 *        line-height a little, and drop body copy to a regular weight.
 *   7.5  Buttons are oversized with generous padding. Make them sit quietly,
 *        and balance the button at the foot of the page within its block.
 */

/* Gelato display face — the client's own custom heading font (uploaded to their
 * Wix site; self-hosted here for an exact match). Used on every gelato heading;
 * it is a condensed decorative slab-serif, NOT Oswald. */
@font-face {
	font-family: "GelatoDisplay";
	src: url("fonts/gelato-display.woff2") format("woff2"),
	     url("fonts/gelato-display.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "GelatoDisplay2";
	src: url("fonts/gelato-display-2.woff2") format("woff2"),
	     url("fonts/gelato-display-2.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --- 7.4 Spacing & body copy ------------------------------------------------
 * Add a gap between consecutive top-level sections. Using margin between
 * sections (rather than padding on each) is additive — it never fights the
 * padding or background each section already carries. */
.elementor-18992 > .e-con.e-parent + .e-con.e-parent {
	margin-top: 2.5rem !important;
}

/* Body copy — matched to the Wix reference (measured): Avenir LT 35 Light
 * (our "Avenir" at weight 300), looser line-height. The import left some
 * paragraphs at a medium/600 weight and the wrong face. Applied to the
 * text-editor and image-box body copy only. */
.elementor-18992 .elementor-widget-text-editor,
.elementor-18992 .elementor-widget-text-editor p,
.elementor-18992 .elementor-image-box-description {
	font-family: "Avenir", "Roboto", Arial, sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;   /* reference body copy is 16px, not 18 */
	line-height: 1.8 !important;  /* 28.8/16 on the reference */
}
/* The intro band (3e4a18b) is a lead statement set in Avenir 85 Heavy at 18px
 * with a tight line — NOT the light body face. */
.elementor-18992 .elementor-element-3e4a18b .elementor-widget-text-editor,
.elementor-18992 .elementor-element-3e4a18b .elementor-widget-text-editor p,
.elementor-18992 .elementor-element-3e4a18b .elementor-widget-text-editor span {
	font-family: "Avenir", "Roboto", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1.1 !important;
}

/* Keep genuine emphasis bold — the weight reset above would otherwise flatten
 * the <strong> lead-ins in the body copy. */
.elementor-18992 .elementor-widget-text-editor strong,
.elementor-18992 .elementor-image-box-description strong {
	font-weight: 700 !important;
}

/* --- 7.5 Buttons ------------------------------------------------------------
 * Shrink the button and tighten its padding so it reads as a quiet call to
 * action rather than a block. Applies to all three page buttons uniformly. */
.elementor-18992 .elementor-widget-button .elementor-button {
	/* Reference button text: Avenir LT 85 Heavy, 15px, 0.75px tracking, white on
	 * the rust background (#8C421F, already set on the widget). The import used
	 * Albert Sans 13.6px. */
	font-family: "Avenir", "Roboto", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.75px !important;
	/* Reference buttons are a fixed 241x47 rust box with the label centred (no
	 * padding of their own); the QA import rendered them ~33px tall and cramped. */
	width: 241px !important;
	height: 47px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
	/* Centre the label in the button both ways. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* Kill any stray line-box offset on the label span so the text is optically
 * centred within the button. */
.elementor-18992 .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
.elementor-18992 .elementor-widget-button .elementor-button .elementor-button-text {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
}

/* The button at the foot of the page (widget 243f9f0, "ENQUIRE ABOUT GELATO")
 * should sit centred within its block with equal space around it: the flexbox
 * centres it left/right, and the equal top/bottom margin balances it
 * vertically. */
/* The "ENQUIRE ABOUT GELATO" button widget is a833e99. The reference leaves
 * ~57px above it and ~78px below (vs ~20px / ~40px on the import). Add the
 * difference as widget margin (the section already contributes ~20px above and
 * ~40px below via the next section's top margin). */
.elementor-18992 .elementor-element-a833e99 {
	text-align: center !important;
	margin-top: 37px !important;
	margin-bottom: 38px !important;
}
.elementor-18992 .elementor-element-a833e99 .elementor-button-wrapper {
	display: flex !important;
	justify-content: center !important;
}

/* --- Headings — matched to the Wix reference (measured, deepest text node) ---
 * EVERY gelato heading (section + card) uses the client's custom display face
 * "GelatoDisplay" (the Wix `ufonts` file), weight 400, ~0.15em tracking
 * (4.8px @32 / 4.35px @29). Not Oswald, not the imported Yeseva One. Per-heading
 * colours/sizes are set elsewhere/by Elementor. */
.elementor-18992 .elementor-heading-title,
.elementor-18992 .elementor-widget-heading .elementor-heading-title,
.elementor-18992 .elementor-image-box-title,
.elementor-18992 .elementor-widget-heading h1,
.elementor-18992 .elementor-widget-heading h2,
.elementor-18992 .elementor-widget-heading h3,
.elementor-18992 h1, .elementor-18992 h2,
.elementor-18992 h3, .elementor-18992 h4 {
	font-family: "GelatoDisplay", "Oswald", serif !important;
	font-weight: 400 !important;
	letter-spacing: 0.15em !important;
}
/* The three card headings (BASES / PASTES / VARIEGATES) → 29px. */
.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-title,
.elementor-18992 .elementor-element-f27ee7a .elementor-heading-title,
.elementor-18992 .elementor-element-f27ee7a h2,
.elementor-18992 .elementor-element-f27ee7a h3 {
	font-size: 29px !important;
	line-height: 1.4 !important;
}
/* Green "Understanding Gelato" panel body: 17px Avenir Light, looser line. */
.elementor-18992 .elementor-element-8a437d2 .elementor-widget-text-editor,
.elementor-18992 .elementor-element-8a437d2 .elementor-widget-text-editor p {
	font-size: 17px !important;
	line-height: 1.6 !important;
}
/* The three cards' body copy: 16px, tighter line. */
.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-description {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

/* --- A. "UNDERSTANDING GELATO, PROPERLY" — three image cards -----------------
 * The three cards (BASES / PASTES / VARIEGATES) are image-box widgets, one per
 * atomic-flexbox column inside the row f27ee7a:
 *   f27ee7a (row) > d9aa601 | 81678f4 | 3da24e7  (each holds one image-box)
 * The source images are all 358x356 but the columns are not held to equal
 * widths and the image_size is 100%, so the squares render at different sizes
 * and their tops do not line up. Force three equal columns, an even gap, and a
 * true equal square per card, centred, with tops aligned. Spacing/sizing/
 * alignment only — no fonts or colours are touched. */
.elementor-18992 .elementor-element-f27ee7a {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;   /* tops aligned */
	justify-content: center !important;   /* row centred as a whole */
	gap: 2.5rem !important;               /* even spacing between the three */
	/* Reference sits this row inside the boxed content width with clear page
	 * margins — not full-bleed. Cap and centre it so the squares render near
	 * their native ~358px instead of stretching edge-to-edge. */
	max-width: 1160px !important;
	margin-inline: auto !important;
	padding-inline: 24px !important;
	box-sizing: border-box !important;
}

/* Each of the three columns takes an equal share, so the squares end up the
 * same size regardless of their captions' length. */
.elementor-18992 .elementor-element-f27ee7a > .e-con {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* Force each image to a real, equal square, centred in its column. object-fit
 * keeps it undistorted by cropping rather than stretching. */
.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-img {
	text-align: center !important;
	margin: 0 auto !important;
}
.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-img img {
	display: block !important;
	width: 100% !important;
	max-width: 360px !important;          /* native size — don't upscale */
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	margin: 0 auto !important;
}

/* Centre the caption block (title + lead line + body) beneath each square. */
.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-content {
	text-align: center !important;
}

/* --- B. "FROM KITCHEN TO COUNTER" — full-width split band -------------------
 * Band 7499202 is a top-level atomic flexbox (video half 4420145 | sage panel
 * 8a437d2). Because it is atomic it carries no .e-parent class, so the general
 * inter-section margin rule above never reaches it and the band sits tight
 * against its neighbours. Give it generous, even vertical spacing, make the two
 * halves equal and meet cleanly (no gap, stretched to equal height), and let
 * the media fill its half edge-to-edge. Colours and the button are untouched. */
.elementor-18992 .elementor-element-7499202 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;      /* both halves equal height */
	gap: 0 !important;                    /* halves meet cleanly */
	margin-top: 4rem !important;          /* even breathing room above */
	margin-bottom: 4rem !important;       /* and below */
}

/* Two equal halves. */
.elementor-18992 .elementor-element-4420145,
.elementor-18992 .elementor-element-8a437d2 {
	flex: 1 1 50% !important;
	min-width: 0 !important;
}

/* The photo/video fills its half edge-to-edge and matches the panel's height
 * so the two meet flush with no awkward gap. */
/* Extra .elementor-element class beats Elementor's own
 * `.elementor .e-flexbox-base { padding-top:10px !important }` — that 10px top
 * padding was shrinking the video's content box to 457px, leaving the gap. */
.elementor-18992 .elementor-element.elementor-element-4420145 {
	display: flex !important;
	align-self: stretch !important;
	overflow: hidden !important;
	padding: 0 !important;
}
.elementor-18992 .elementor-element-4420145 > video,
.elementor-18992 .elementor-element-4420145 video {
	width: 100% !important;
	height: 100% !important;
	/* Elementor's self-hosted video base sets `aspect-ratio:16/9`, which forced
	 * the video to 457px in a 467px column (a 10px gap above it, so it didn't
	 * line up with the green panel). Drop the aspect lock so height:100% fills. */
	aspect-ratio: auto !important;
	object-fit: cover !important;
	display: block !important;
}

/* The video kept its own 16:9 height and rendered ~10px short of the green
 * panel, so their tops did not line up. Force every wrapper in the video half
 * to full height so the media truly fills its side and both halves align. */
.elementor-18992 .elementor-element-4420145 > .elementor-widget-video,
.elementor-18992 .elementor-element-4420145 .elementor-widget-video,
.elementor-18992 .elementor-element-4420145 .elementor-widget-container,
.elementor-18992 .elementor-element-4420145 .e-hosted-video,
.elementor-18992 .elementor-element-4420145 .elementor-video-container,
.elementor-18992 .elementor-element-4420145 .elementor-wrapper,
.elementor-18992 .elementor-element-4420145 .elementor-fit-aspect-ratio {
	height: 100% !important;
	min-height: 100% !important;
	padding-bottom: 0 !important;
}

/* Reference shows the media as a clean frame (no player chrome). Hide the
 * native video controls so it reads like the still in the comp. */
.elementor-18992 .elementor-element-4420145 video::-webkit-media-controls,
.elementor-18992 .elementor-element-4420145 video::-webkit-media-controls-enclosure {
	display: none !important;
}

/* Sage panel: centre the heading + copy + button as a group and give it even
 * padding, so the text sits in the middle of the panel rather than hugging the
 * divider and top edge (matches the reference). The extra .elementor-element
 * class raises specificity above Elementor's own per-element padding rule
 * (which otherwise pins padding to "10px 0 0" and leaves the content with no
 * left/right breathing room). Colours/fonts untouched. */
.elementor-18992 .elementor-element.elementor-element-8a437d2 {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;   /* vertical centre in the panel */
	align-items: flex-start !important;    /* text left-aligned, as the comp */
	padding: 3.5rem 160px !important;      /* content inset ~160px l/r matches the reference green panel */
	box-sizing: border-box !important;
}

/* Inner container (atomic panels wrap children in .e-con-inner) — make sure it
 * doesn't re-impose a full-bleed/zero-pad of its own. */
.elementor-18992 .elementor-element.elementor-element-8a437d2 > .e-con-inner {
	width: 100% !important;
	padding: 0 !important;
	align-items: flex-start !important;
}

/* --- "START WITH THE RIGHT FOUNDATION" (last band, 22da780) -----------------
 * The import left it cramped: ~10px above the heading and nothing below the
 * button. The reference gives it ~75px of air above the heading and ~100px
 * below the button. The extra .elementor-element class beats Elementor's own
 * `e-flexbox-base` 10px top-padding rule; the inner container is zeroed so the
 * section padding is the only vertical spacing. */
.elementor-18992 .elementor-element.elementor-element-22da780 {
	padding-top: 75px !important;
	/* 68px + the button wrapper's own ~32px margin ≈ the reference's 100px gap
	 * below the button. */
	padding-bottom: 68px !important;
}
.elementor-18992 .elementor-element-22da780 > .e-con-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- Responsive -------------------------------------------------------------
 * The forced flex-row/nowrap rules above are desktop-only; on phones they would
 * squish the three cards into one tiny row and keep the band side-by-side. Below
 * Elementor's mobile breakpoint, stack everything full-width. */
@media (max-width: 767px) {
	/* Three cards → stacked column, each full width */
	.elementor-18992 .elementor-element-f27ee7a {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		max-width: 100% !important;
		gap: 2rem !important;
	}
	.elementor-18992 .elementor-element-f27ee7a > .e-con {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 420px !important;
	}
	.elementor-18992 .elementor-element-f27ee7a .elementor-image-box-img img {
		max-width: 100% !important;
	}

	/* Split band → image on top, sage panel below */
	.elementor-18992 .elementor-element-7499202 {
		flex-direction: column !important;
	}
	.elementor-18992 .elementor-element-4420145,
	.elementor-18992 .elementor-element-8a437d2 {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
	.elementor-18992 .elementor-element-4420145 {
		min-height: 240px !important;
	}
	/* Match the raised desktop specificity so this tighter mobile padding wins */
	.elementor-18992 .elementor-element.elementor-element-8a437d2 {
		padding: 2rem 1.5rem !important;
	}
}