/**
 * Angel Oaks cremation form - page and form styling.
 *
 * Tokens and treatments are lifted from the site's own contact page
 * (Core Pages/contact.html, the `.co-form-wrap` block), so this form looks like
 * the rest of the site rather than like default Gravity Forms.
 *
 * WHY EVERYTHING IS !important
 * This page renders inside a theme that also loads Elementor, Elementor Pro,
 * Hozio Pro and Gravity Forms' own orbital theme. All of them ship broad
 * selectors that will otherwise win against these rules. The site's own contact
 * page solves it the same way. Note that the media queries at the bottom are
 * ALSO marked !important - without that the desktop rules above would outrank
 * them and mobile would silently break.
 *
 * The token block is deliberately left unmarked: the names are namespaced
 * --aox-*, so nothing else can define them and there is nothing to out-rank.
 *
 * Design intent: someone filling this in has just lost their pet. Nothing here
 * should feel like a checkout. Generous spacing, quiet colour, one clear action
 * per screen, and the phone number always within reach.
 *
 * @package AngelOaksPricing
 */

.aox-page,
.aox-hero,
.aox-formlayout,
.aox-band,
.aox-next,
.aox-thanks,
.aox-aftercare,
.aox-cremation-form_wrapper {
	/*
	 * Matches the Elementor kit's container_width (1400px), so this page's
	 * content lines up with the site header. Do NOT rely on the Elementor
	 * container carrying a CSS class - it does not render one.
	 *
	 * EVERY NEW TOP-LEVEL BLOCK HAS TO BE ADDED TO THIS LIST. Because the
	 * container carries no class, these variables have nowhere higher to live,
	 * and a block left off the list resolves var(--aox-container) to nothing —
	 * which silently drops max-width and the gutter to their initial values and
	 * lets the block run edge to edge.
	 */
	--aox-container: 1400px;
	--aox-gutter: clamp(20px, 4vw, 48px);

	/* Every text input, select and the buttons share this height so fields on the
	   same row line up exactly. */
	--aox-control-height: 52px;

	--aox-sage: #80be80;
	--aox-sage-deep: #308b30;
	--aox-sage-darker: #165816;
	--aox-moss: #218a21;
	--aox-moss-dark: #0c2a0c;
	--aox-cream: #fbf7ee;
	--aox-cream-2: #f4ecd8;
	--aox-terracotta: #c97a50;
	--aox-rust: #a6552f;
	--aox-char: #2a2a24;
	--aox-char-2: #54524a;
	--aox-rule: #ddd3b7;

	--aox-serif: "Sentient", Georgia, "Times New Roman", serif;
	--aox-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Own the box model rather than inheriting it. A padded element whose width is
 * set by flex stretch adds its padding on top under content-box and pushes the
 * page sideways.
 */
.aox-page,
.aox-page *,
.aox-page *::before,
.aox-page *::after {
	box-sizing: border-box !important;
}

/* ─── HERO ───────────────────────────────────────────────────────── */

/*
 * Full-bleed band, content constrained to the site container. Every block on
 * this page uses the same __inner pattern so their left edges line up with the
 * header, whatever the theme wraps them in.
 */
.aox-hero {
	position: relative !important;
	/* The chalk paw-print pattern the site already uses elsewhere, kept faint
	   under a cream wash so the headline stays fully readable over it. */
	background-color: var(--aox-cream-2) !important;
	background-image:
		linear-gradient(90deg, rgba(244, 236, 216, 0.96) 0%, rgba(244, 236, 216, 0.82) 55%, rgba(244, 236, 216, 0.55) 100%),
		url("https://www.angeloakspetcrematory.com/wp-content/uploads/2026/05/Chalk-Paw-Prints-Pattern-Harris-County-Texas.webp") !important;
	background-repeat: no-repeat, repeat !important;
	background-size: 100% 100%, 420px auto !important;
	background-position: 0 0, center top !important;
	border-top: 3px solid var(--aox-sage-deep) !important;
	padding: clamp(38px, 6vw, 68px) 0 clamp(34px, 5vw, 56px) !important;
	margin: 0 0 48px !important;
	overflow: hidden !important;
	text-align: left !important;
}

.aox-hero__inner,
.aox-band__inner,
.aox-next__inner,
.aox-thanks__inner,
.aox-aftercare__inner {
	max-width: var(--aox-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--aox-gutter) !important;
	padding-right: var(--aox-gutter) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* A soft bloom of green in the corner, so the band is not a flat rectangle.
   Purely decorative and behind the text. */
.aox-hero::after {
	content: "" !important;
	position: absolute !important;
	right: -90px !important;
	top: -110px !important;
	width: 320px !important;
	height: 320px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(128, 190, 128, 0.32) 0%, rgba(128, 190, 128, 0) 70%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.aox-hero__inner {
	position: relative !important;
	z-index: 1 !important;
}

/* Wrapper for blocks that sit on the page ground rather than in a band. */
.aox-band {
	display: block !important;
	margin: 0 0 40px !important;
}

.aox-hero__mark {
	display: block !important;
	height: 46px !important;
	width: auto !important;
	margin: 0 0 22px !important;
}

.aox-hero__eyebrow {
	font-family: var(--aox-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-deep) !important;
	margin: 0 0 14px !important;
}

.aox-hero__title {
	font-family: var(--aox-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 5.4vw, 52px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	color: var(--aox-moss-dark) !important;
	margin: 0 0 18px !important;
	text-wrap: balance !important;
	max-width: 18ch !important;
}

.aox-hero__lede {
	font-family: var(--aox-sans) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--aox-char-2) !important;
	max-width: 56ch !important;
	margin: 0 0 26px !important;
}

.aox-hero__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aox-hero__meta li {
	font-family: var(--aox-sans) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--aox-char) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
}

.aox-hero__meta li::before {
	content: "" !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--aox-sage-deep) !important;
	flex: none !important;
}

/* ─── PAGE FURNITURE ─────────────────────────────────────────────── */

.aox-page {
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 20px 72px !important;
	font-family: var(--aox-sans) !important;
	color: var(--aox-char) !important;
}

/* The alternative to filling anything in. Deliberately above the form, because
   someone who cannot face one should not have to scroll past it. */
.aox-callout {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px !important;
	background: var(--aox-cream) !important;
	border: 1.5px solid var(--aox-rule) !important;
	border-left: 3px solid var(--aox-terracotta) !important;
	border-radius: 10px !important;
	padding: 18px 22px !important;
	margin: 0 0 40px !important;
}

.aox-callout__text {
	margin: 0 !important;
	font-family: var(--aox-sans) !important;
	font-size: 15.5px !important;
	line-height: 1.55 !important;
	color: var(--aox-char) !important;
	flex: 1 1 260px !important;
}

.aox-callout__phone {
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	color: #fff !important;
	background: var(--aox-sage-deep) !important;
	border-radius: 999px !important;
	padding: 12px 24px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background 0.22s ease, transform 0.22s ease !important;
}

.aox-callout__phone:hover,
.aox-callout__phone:focus {
	background: var(--aox-sage-darker) !important;
	transform: translateY(-1px) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* A quiet band so the section reads as its own moment, not a trailing footnote. */
.aox-next {
	display: block !important;
	background: var(--aox-cream) !important;
	border-top: 1px solid var(--aox-rule) !important;
	padding: clamp(44px, 6vw, 72px) 0 clamp(48px, 6vw, 76px) !important;
	margin: 56px 0 0 !important;
}

.aox-next__eyebrow {
	font-family: var(--aox-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-deep) !important;
	margin: 0 0 12px !important;
}

.aox-next__title {
	font-family: var(--aox-serif) !important;
	font-size: clamp(26px, 3.4vw, 36px) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--aox-moss-dark) !important;
	margin: 0 0 32px !important;
}

.aox-next__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 20px !important;
	align-items: stretch !important;
}

.aox-next__card {
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 1.5px solid var(--aox-rule) !important;
	border-radius: 14px !important;
	padding: 28px 26px 26px !important;
	margin: 0 !important;
	position: relative !important;
	transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

.aox-next__card:hover {
	border-color: var(--aox-sage) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 28px -12px rgba(22, 88, 22, 0.28) !important;
}

.aox-next__num {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: var(--aox-sage-deep) !important;
	color: #fff !important;
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	margin: 0 0 18px !important;
	flex: none !important;
}

.aox-next__cardtitle {
	font-family: var(--aox-sans) !important;
	font-size: 16.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--aox-char) !important;
	margin: 0 0 10px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.aox-next__body {
	font-family: var(--aox-sans) !important;
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	color: var(--aox-char-2) !important;
	margin: 0 !important;
}

/* ─── GRAVITY FORMS ──────────────────────────────────────────────── */

/*
 * The form sits in the same 1400px column as everything else so its left edge
 * lines up with the header, but the fields themselves stay at a readable
 * measure - 1400px-wide inputs would be unusable.
 */
.aox-cremation-form_wrapper {
	font-family: var(--aox-sans) !important;
	max-width: var(--aox-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--aox-gutter) !important;
	padding-right: var(--aox-gutter) !important;
	box-sizing: border-box !important;
}

.aox-cremation-form_wrapper form {
	max-width: 860px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Address layout.
 *
 * Gravity Forms pairs city/state on one row, then zip/country on the next. The
 * country sub-field is hidden on this form, which left the ZIP stranded alone on
 * a row of its own. This lays street and line 2 full width, then puts city,
 * state and ZIP together on a single row.
 */
.aox-cremation-form_wrapper .ginput_container_address {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 16px !important;
	float: none !important;
}

.aox-cremation-form_wrapper .ginput_container_address > span {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;   /* let grid children shrink instead of overflowing */
}

.aox-cremation-form_wrapper .ginput_container_address .address_line_1,
.aox-cremation-form_wrapper .ginput_container_address .address_line_2 {
	grid-column: 1 / -1 !important;
}

.aox-cremation-form_wrapper .ginput_container_address .address_city { grid-column: span 3 !important; }
.aox-cremation-form_wrapper .ginput_container_address .address_state { grid-column: span 2 !important; }
.aox-cremation-form_wrapper .ginput_container_address .address_zip { grid-column: span 1 !important; }
.aox-cremation-form_wrapper .ginput_container_address .address_country { display: none !important; }

/*
 * Show the form as soon as the page paints.
 *
 * Gravity Forms hides .gform_wrapper in CSS and reveals it with JavaScript, so
 * the form appears roughly two seconds after load. This page's styles are in the
 * document head, so there is no unstyled flash to protect against.
 */
.aox-cremation-form_wrapper.gform_wrapper {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.aox-cremation-form_wrapper .gform_fields { row-gap: 26px !important; }

.aox-cremation-form_wrapper .gfield_label,
.aox-cremation-form_wrapper legend.gfield_label {
	font-family: var(--aox-sans) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--aox-char-2) !important;
	margin-bottom: 7px !important;
	display: block !important;
}

.aox-cremation-form_wrapper .gfield_required {
	color: var(--aox-terracotta) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* The typed-signature box is excluded: it is a signature, not a data field, and
   the Signature add-on sets its script font inline. An !important font-family
   here would beat that inline style and render every typed signature in the
   body face, which quietly breaks the font picker sitting under it. */
.aox-cremation-form_wrapper input[type="text"]:not(.gfield_signature_text_input),
.aox-cremation-form_wrapper input[type="email"],
.aox-cremation-form_wrapper input[type="tel"],
.aox-cremation-form_wrapper input[type="number"],
.aox-cremation-form_wrapper input[type="date"],
.aox-cremation-form_wrapper select,
.aox-cremation-form_wrapper textarea {
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	color: var(--aox-char) !important;
	background: var(--aox-cream) !important;
	border: 1.5px solid var(--aox-rule) !important;
	border-radius: 10px !important;
	padding: 13px 16px !important;
	width: 100% !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	outline: none !important;
	margin: 0 !important;
	/* One shared control height, so inputs and selects line up on the same row. */
	min-height: var(--aox-control-height) !important;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.aox-cremation-form_wrapper textarea {
	min-height: 120px !important;
}

/*
 * Selects need their own sizing. A <select> does not honour line-height the way
 * an input does, so the shared 1.5 line-height clipped long option text - the
 * state dropdown cut "South Carolina" in half. Explicit height and normal
 * line-height fix it, plus the chevron the site's contact page uses.
 */
.aox-cremation-form_wrapper select {
	line-height: normal !important;
	/* Exact height, not min-height: a select sizes itself differently from an
	   input, and left to itself it sat visibly taller than the fields beside it. */
	height: var(--aox-control-height) !important;
	min-height: var(--aox-control-height) !important;
	padding: 0 42px 0 16px !important;
	/* With zero vertical padding, the line-height has to do the centering:
	   control height minus the 1.5px border on each side. */
	line-height: calc(var(--aox-control-height) - 3px) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	text-overflow: ellipsis !important;
	background-image:
		linear-gradient(var(--aox-cream), var(--aox-cream)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23308B30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 0 0, right 14px center !important;
	background-size: 100% 100%, 14px 14px !important;
	cursor: pointer !important;
}

.aox-cremation-form_wrapper select:focus {
	background-image:
		linear-gradient(#fff, #fff),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23308B30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 0 0, right 14px center !important;
	background-size: 100% 100%, 14px 14px !important;
}

.aox-cremation-form_wrapper input:focus,
.aox-cremation-form_wrapper select:focus,
.aox-cremation-form_wrapper textarea:focus {
	border-color: var(--aox-sage-deep) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(48, 139, 48, 0.1) !important;
}

.aox-cremation-form_wrapper .gfield_description,
.aox-cremation-form_wrapper .gform_fileupload_rules {
	font-family: var(--aox-sans) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: var(--aox-char-2) !important;
	padding-top: 6px !important;
}

.aox-cremation-form_wrapper .gsection {
	border-bottom: 1px solid var(--aox-rule) !important;
	padding-bottom: 14px !important;
	margin-bottom: 8px !important;
}

.aox-cremation-form_wrapper .gsection_title {
	font-family: var(--aox-serif) !important;
	font-size: 27px !important;
	font-weight: 400 !important;
	color: var(--aox-moss-dark) !important;
	margin: 0 0 6px !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
}

.aox-cremation-form_wrapper .gsection_description {
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--aox-char-2) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}

.aox-cremation-form_wrapper .gchoice {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	padding: 4px 0 !important;
}

.aox-cremation-form_wrapper .gchoice input[type="radio"],
.aox-cremation-form_wrapper .gchoice input[type="checkbox"] {
	accent-color: var(--aox-sage-deep) !important;
	width: 19px !important;
	height: 19px !important;
	margin: 1px 0 0 !important;
	flex: none !important;
}

.aox-cremation-form_wrapper .gchoice label {
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--aox-char) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}

.aox-cremation-form_wrapper .gform_button,
.aox-cremation-form_wrapper .gform_next_button,
.aox-cremation-form_wrapper .gform_previous_button {
	font-family: var(--aox-sans) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	border-radius: 999px !important;
	padding: 15px 34px !important;
	border: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
	transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

.aox-cremation-form_wrapper .gform_button,
.aox-cremation-form_wrapper .gform_next_button {
	color: #fff !important;
	background: var(--aox-sage-deep) !important;
	box-shadow: 0 2px 8px rgba(42, 42, 36, 0.12) !important;
}

.aox-cremation-form_wrapper .gform_button:hover,
.aox-cremation-form_wrapper .gform_next_button:hover {
	background: var(--aox-sage-darker) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 24px -4px rgba(22, 88, 22, 0.35) !important;
}

.aox-cremation-form_wrapper .gform_previous_button {
	color: var(--aox-char-2) !important;
	background: transparent !important;
	border: 1.5px solid var(--aox-rule) !important;
	box-shadow: none !important;
}

.aox-cremation-form_wrapper .gform_previous_button:hover {
	border-color: var(--aox-sage-deep) !important;
	color: var(--aox-sage-darker) !important;
	background: transparent !important;
}

.aox-cremation-form_wrapper .gform_page_footer {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	border-top: 1px solid var(--aox-rule) !important;
	padding-top: 24px !important;
	margin-top: 34px !important;
}

/* Progress: eleven pages is a lot, so showing how far along they are matters. */
.aox-cremation-form_wrapper .gf_progressbar_wrapper { margin-bottom: 34px !important; }

.aox-cremation-form_wrapper .gf_progressbar_title {
	font-family: var(--aox-sans) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--aox-char-2) !important;
	margin-bottom: 9px !important;
}

.aox-cremation-form_wrapper .gf_progressbar {
	background: var(--aox-cream-2) !important;
	border-radius: 999px !important;
	height: 8px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

.aox-cremation-form_wrapper .gf_progressbar_percentage {
	background: var(--aox-sage-deep) !important;
	border-radius: 999px !important;
	height: 8px !important;
	transition: width 0.35s ease !important;
}

.aox-cremation-form_wrapper .gf_progressbar_percentage span { display: none !important; }

/* Validation: terracotta, not the default alarm red. This is a gentle context. */
.aox-cremation-form_wrapper .gfield_error input,
.aox-cremation-form_wrapper .gfield_error select,
.aox-cremation-form_wrapper .gfield_error textarea {
	border-color: var(--aox-terracotta) !important;
	background: #fff !important;
}

.aox-cremation-form_wrapper .validation_message {
	font-family: var(--aox-sans) !important;
	font-size: 13.5px !important;
	color: var(--aox-rust) !important;
	background: transparent !important;
	border: none !important;
	padding: 6px 0 0 !important;
	font-weight: 500 !important;
}

.aox-cremation-form_wrapper .gform_validation_errors {
	background: var(--aox-cream-2) !important;
	border: 1px solid var(--aox-terracotta) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.aox-cremation-form_wrapper .gform_validation_errors h2,
.aox-cremation-form_wrapper .gform_validation_errors .gform_submission_error {
	color: var(--aox-rust) !important;
	font-family: var(--aox-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* ─── IMAGE PICKERS ──────────────────────────────────────────────── */

.aox-image-choices ul,
.aox-image-choices .image_picker_selector {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 14px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.aox-image-choices li {
	display: flex !important;
	flex-direction: column !important;
	flex: 0 1 168px !important;
	margin: 0 !important;
}

.aox-image-choices .thumbnail,
.aox-image-choices li > * {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	border-radius: 12px !important;
}

.aox-image-choices img {
	width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
	background: var(--aox-cream) !important;
}

.aox-image-choices .selected,
.aox-image-choices li .selected {
	outline: 2.5px solid var(--aox-sage-deep) !important;
	outline-offset: 2px !important;
}

/* ─── STATEMENT ──────────────────────────────────────────────────── */

/*
 * The statement. This is the moment the customer finds out what it costs, so it
 * gets treated as a receipt rather than a data table: one quiet card, the labels
 * and the amounts in two clean columns, and the total set apart.
 *
 * The site theme puts borders on every table cell, which drew a grid through
 * this and left a stray vertical rule between the columns. Every border is
 * therefore declared here explicitly rather than only the ones we want added.
 */
[data-aox-statement] {
	display: block !important;
	background: var(--aox-cream) !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 14px !important;
	padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px) !important;
	box-sizing: border-box !important;
}

.aox-statement {
	width: 100% !important;
	border: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	margin: 0 !important;
	table-layout: auto !important;
	color: var(--aox-char) !important;
	font-family: var(--aox-sans) !important;
	font-variant-numeric: tabular-nums !important;
	background: transparent !important;
	box-shadow: none !important;
}

.aox-statement tr,
.aox-statement tbody,
.aox-statement tfoot {
	background: transparent !important;
	border: 0 !important;
}

.aox-statement td,
.aox-statement th {
	border: 0 !important;
	border-bottom: 1px solid var(--aox-rule) !important;
	padding: 13px 0 !important;
	text-align: left !important;
	vertical-align: baseline !important;
	background: transparent !important;
	box-shadow: none !important;
}

.aox-statement td {
	color: var(--aox-char-2) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	font-weight: 400 !important;
}

/* The amount column sizes to its content and never wraps, so the labels get
   whatever width is left instead of the two columns splitting 50/50. */
.aox-statement .aox-amount {
	text-align: right !important;
	white-space: nowrap !important;
	width: 1% !important;
	padding-left: 28px !important;
	color: var(--aox-char) !important;
	font-weight: 500 !important;
}

.aox-statement tbody tr:last-child td {
	border-bottom: 0 !important;
	padding-bottom: 16px !important;
}

.aox-statement tfoot th {
	border: 0 !important;
	border-top: 2px solid var(--aox-sage-deep) !important;
	padding: 18px 0 0 !important;
	font-family: var(--aox-serif) !important;
	font-size: clamp(20px, 2.4vw, 26px) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--aox-moss-dark) !important;
}

.aox-statement tfoot th.aox-amount {
	padding-left: 28px !important;
	font-weight: 500 !important;
}

/* Sits under the total: what tax is already included, in a quieter voice. */
.aox-statement__tax {
	font-family: var(--aox-sans) !important;
	font-size: 13px !important;
	color: var(--aox-char-2) !important;
	text-align: right !important;
	margin: 8px 0 0 !important;
}

.aox-statement__empty {
	font-family: var(--aox-sans) !important;
	color: var(--aox-char-2) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.aox-statement__notice {
	font-family: var(--aox-sans) !important;
	color: var(--aox-char) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	margin: 18px 0 0 !important;
	padding: 12px 14px !important;
	background: #fff !important;
	border: 1px solid var(--aox-rule) !important;
	border-left: 3px solid var(--aox-terracotta) !important;
	border-radius: 8px !important;
}

[data-aox-statement].is-loading {
	opacity: 0.55 !important;
	transition: opacity 0.15s ease !important;
}

/*
 * Announced to screen readers, invisible on screen. Not display:none, which
 * would remove it from the accessibility tree and silence the announcement.
 */
.aox-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
/* These also carry !important, or the rules above would out-rank them. */

@media (min-width: 760px) {
	.aox-next__list {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 24px !important;
	}
}

@media (max-width: 600px) {
	.aox-page { padding: 0 16px 56px !important; }

	.aox-hero {
		padding: 32px 0 30px !important;
		margin: 0 0 32px !important;
	}

	.aox-hero__title { max-width: none !important; }
	.aox-hero__mark { height: 38px !important; }

	.aox-next {
		padding: 38px 0 42px !important;
		margin: 40px 0 0 !important;
	}

	.aox-next__card { padding: 24px 20px 22px !important; }

	.aox-cremation-form_wrapper .gform_page_footer {
		flex-direction: column-reverse !important;
	}

	.aox-cremation-form_wrapper .gform_button,
	.aox-cremation-form_wrapper .gform_next_button,
	.aox-cremation-form_wrapper .gform_previous_button {
		width: 100% !important;
		justify-content: center !important;
	}

	.aox-image-choices li { flex: 1 1 calc(50% - 7px) !important; }

	/* City gets its own row; state and ZIP share the next. */
	.aox-cremation-form_wrapper .ginput_container_address {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	.aox-cremation-form_wrapper .ginput_container_address .address_city {
		grid-column: 1 / -1 !important;
	}
	.aox-cremation-form_wrapper .ginput_container_address .address_state,
	.aox-cremation-form_wrapper .ginput_container_address .address_zip {
		grid-column: span 1 !important;
	}

	/*
	 * Both of these are required together: align-items must stay `stretch` or
	 * children size to content and spill past the padding, and the text's
	 * flex-basis must reset because in a column container basis sets HEIGHT.
	 */
	.aox-callout {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.aox-callout__text { flex: 0 1 auto !important; }
	.aox-callout__phone { text-align: center !important; }
}

@media (prefers-reduced-motion: reduce) {
	.aox-cremation-form_wrapper *,
	.aox-callout__phone,
	[data-aox-statement] {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
   Save & Continue screens. GF renders the "progress saved" message inside
   the form wrapper and the "link sent" message in a separate
   .gform_confirmation_wrapper, neither of which is a <form>, so the
   860px reading column and serif heading have to be applied here too.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .form_saved_message,
.gform_confirmation_wrapper.aox-cremation-form {
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 8px var(--aox-gutter) 48px !important;
	box-sizing: border-box !important;
}
.aox-cremation-form_wrapper .form_saved_message .gform_confirmation_heading,
.gform_confirmation_wrapper.aox-cremation-form .gform_confirmation_heading {
	font-family: var(--aox-serif) !important;
	font-size: clamp(26px, 3.4vw, 36px) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--aox-char) !important;
	margin: 0 0 16px !important;
}
.aox-cremation-form_wrapper .form_saved_message p,
.gform_confirmation_wrapper.aox-cremation-form p {
	font-family: var(--aox-sans) !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--aox-char-2) !important;
	margin: 0 0 16px !important;
}
.aox-cremation-form_wrapper .resume_form_link {
	color: var(--aox-sage-deep) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	overflow-wrap: anywhere !important;
}

/* ------------------------------------------------------------------
   Date picker. Gravity Forms 3.x renders its own calendar
   (.gform-datepicker-calendar) inside the field, driven by
   --gf-ctrl-date-picker-* custom properties. Three things fought the
   design: the generic select rule above hit the year/month dropdowns,
   the theme's global table striping painted alternate weeks grey, and
   GF's default blue marked today/selected. Everything here is scoped to
   the calendar so the rest of the form is untouched.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .gform-datepicker-calendar {
	--gf-ctrl-date-picker-bg-color: #fff !important;
	--gf-ctrl-date-picker-radius: 14px !important;
	--gf-ctrl-date-picker-shadow: 0 14px 36px rgba(42, 42, 36, 0.14), 0 2px 6px rgba(42, 42, 36, 0.06) !important;
	--gf-ctrl-date-picker-width: 344px !important;
	--gf-ctrl-date-picker-padding-y: 16px !important;
	--gf-ctrl-date-picker-padding-x: 16px !important;
	--gf-ctrl-date-picker-cell-height: 40px !important;
	--gf-ctrl-date-picker-cell-padding: 2px !important;
	--gf-ctrl-date-picker-cell-padding-y: 2px !important;
	--gf-ctrl-date-picker-cell-font-size: 14px !important;
	--gf-ctrl-date-picker-cell-font-weight: 500 !important;
	--gf-ctrl-date-picker-cell-line-height: 1 !important;
	--gf-ctrl-date-picker-cell-content-radius: 50% !important;
	--gf-ctrl-date-picker-cell-content-color: var(--aox-char) !important;
	--gf-ctrl-date-picker-cell-content-bg-color-hover: var(--aox-cream-2) !important;
	--gf-ctrl-date-picker-cell-content-color-hover: var(--aox-char) !important;
	--gf-ctrl-date-picker-cell-content-bg-color-selected: var(--aox-moss) !important;
	--gf-ctrl-date-picker-cell-content-color-selected: #fff !important;
	--gf-ctrl-date-picker-cell-content-border: 0 !important;
	--gf-ctrl-date-picker-cell-content-bg-color-disabled: transparent !important;
	--gf-ctrl-date-picker-cell-content-color-disabled: #b9b3a0 !important;
	--gf-ctrl-date-picker-head-cell-font-size: 11px !important;
	--gf-ctrl-date-picker-head-cell-font-weight: 600 !important;
	--gf-ctrl-date-picker-head-cell-line-height: 1 !important;
	--gf-ctrl-date-picker-header-icons-size: 34px !important;
	--gf-ctrl-date-picker-header-icons-font-size: 14px !important;
	--gf-ctrl-date-picker-header-icons-prev-inset-x-start: 0 !important;
	--gf-ctrl-date-picker-header-icons-next-inset-x-end: 0 !important;

	font-family: var(--aox-sans) !important;
	background: #fff !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 14px !important;
	box-shadow: 0 14px 36px rgba(42, 42, 36, 0.14), 0 2px 6px rgba(42, 42, 36, 0.06) !important;
	width: 344px !important;
	max-width: calc(100vw - 32px) !important;
	padding: 16px !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

/* Kill the theme's table styling: striping, header bands, cell borders. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar,
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar tr,
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar th,
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	table-layout: fixed !important;
	font-size: 14px !important;
}

/* Year and month rows. The <select> is the real control; strip the form's
   field styling and make it read as a quiet text button with a chevron. */
.aox-cremation-form_wrapper .gform-datepicker-calendar .yearSelector td,
.aox-cremation-form_wrapper .gform-datepicker-calendar .monthSelector td {
	padding: 0 0 6px !important;
	vertical-align: middle !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar .monthSelector td {
	padding-bottom: 12px !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar select.nav.select {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 auto !important;
	padding: 0 30px 0 14px !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23308B30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 12px !important;
	box-shadow: none !important;
	font-family: var(--aox-sans) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 34px !important;
	color: var(--aox-char) !important;
	text-align: center !important;
	text-align-last: center !important;
	cursor: pointer !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar select.nav.select.year {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	color: var(--aox-char-2) !important;
	height: 30px !important;
	min-height: 30px !important;
	line-height: 28px !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar select.nav.select:hover,
.aox-cremation-form_wrapper .gform-datepicker-calendar select.nav.select:focus {
	background-color: var(--aox-cream-2) !important;
	border-color: var(--aox-rule) !important;
	outline: none !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar select.nav.select:focus-visible {
	box-shadow: 0 0 0 2px var(--aox-sage-deep) !important;
}

/* Previous / next arrows: round, quiet, sage. */
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.prev,
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.next {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--aox-sage-deep) !important;
	box-shadow: none !important;
	position: relative !important;
	inset: auto !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.prev::before,
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.next::before {
	color: var(--aox-sage-deep) !important;
	font-size: 14px !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.prev:hover,
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.next:hover,
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.prev:focus-visible,
.aox-cremation-form_wrapper .gform-datepicker-calendar td.nav.btn.next:focus-visible {
	background: var(--aox-cream-2) !important;
	border-color: var(--aox-sage-deep) !important;
	outline: none !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar .yearSelector td.nav.btn.prev,
.aox-cremation-form_wrapper .gform-datepicker-calendar .yearSelector td.nav.btn.next {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	border-color: transparent !important;
}

/* Day-name header. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar th {
	height: 28px !important;
	padding: 6px 0 8px !important;
	font-family: var(--aox-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--aox-char-2) !important;
	vertical-align: middle !important;
}

/* Day cells. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.day {
	height: 40px !important;
	padding: 2px !important;
	vertical-align: middle !important;
	color: var(--aox-char) !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.day span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-family: var(--aox-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	transition: background-color 0.12s ease, color 0.12s ease !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.day:where(:not(.selected):not(.dayMarked):not(.disabled)) span:hover {
	background: var(--aox-cream-2) !important;
	color: var(--aox-char) !important;
}
/* Today: a sage ring, not a fill, so it never competes with the selection. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td[aria-current="date"] span {
	background: transparent !important;
	color: var(--aox-sage-darker) !important;
	font-weight: 600 !important;
	box-shadow: inset 0 0 0 1.5px var(--aox-sage-deep) !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td[aria-current="date"] span:hover {
	background: var(--aox-cream-2) !important;
}
/* Selected day. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.dayMarked span,
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.dayMarked span:hover,
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.dayMarked span:focus {
	background: var(--aox-moss) !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.selected span {
	border: 0 !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.disabled span {
	color: #b9b3a0 !important;
	background: transparent !important;
	cursor: default !important;
}
/* Keyboard focus lands on the cell (role=button); draw it on the circle. */
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.day:focus-visible {
	outline: none !important;
}
.aox-cremation-form_wrapper .gform-datepicker-calendar table.calendar td.day:focus-visible span {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--aox-sage-deep) !important;
}

/* "Press F1 for help" - keep it for assistive tech, drop it from the layout. */
.aox-cremation-form_wrapper .gform-datepicker-calendar .monthMessage {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Calendar icon: sit it inside the field, like the select chevron. */
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date {
	position: relative !important;
	display: block !important;
}
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date input.datepicker {
	width: 100% !important;
	padding-right: 48px !important;
}
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date button.gform-datepicker-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--aox-sage-deep) !important;
	cursor: pointer !important;
	--gf-field-date-icon-color: var(--aox-sage-deep) !important;
	--gf-field-date-icon-size: 22px !important;
}
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date button.gform-datepicker-toggle:hover .gform-datepicker-toggle-icon--default,
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date:focus-within .gform-datepicker-toggle-icon--default {
	color: var(--aox-moss) !important;
}
.aox-cremation-form_wrapper .gfield--input-type-datepicker .ginput_container_date button.gform-datepicker-toggle:focus-visible {
	outline: 2px solid var(--aox-sage-deep) !important;
	outline-offset: 2px !important;
	border-radius: 6px !important;
}

/* ------------------------------------------------------------------
   Prices on choices. class-aox-gf-hooks.php appends
   <span class="aox-choice-price"> to urn, engraving and keepsake labels at
   render time. Inline after a plain radio label; its own line under an
   image card.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .aox-choice-price {
	display: inline-block !important;
	margin-left: 8px !important;
	font-family: var(--aox-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	color: var(--aox-sage-deep) !important;
	white-space: nowrap !important;
}
.aox-cremation-form_wrapper .aox-image-choices .aox-choice-price {
	display: block !important;
	margin: 4px 0 0 !important;
	font-size: 15px !important;
}

/* A rate is a sentence, not a figure, so it wraps and sits quieter. */
.aox-cremation-form_wrapper .aox-choice-note {
	display: block !important;
	margin: 2px 0 0 !important;
	font-family: var(--aox-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--aox-char-2) !important;
	white-space: normal !important;
}

/* The Image Picker add-on draws its selected state (border, label, check
   badge) from one custom property it sets inline to #0077FF. Point it at the
   site green so a chosen urn or keepsake reads like every other selected
   control on the form. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp,
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp[class*="pcafe_theme_"] {
	--gfimp-global-color: var(--aox-moss) !important;
}

/* Layout. The add-on lays the choices out as a wrap-flex of fixed 150px
   items, which packs five narrow cards onto a row and wraps product names
   onto three lines. A grid of flexible tracks with a real minimum gives each
   card room to breathe and reflows to one column on a phone instead of
   overflowing — auto-fill rather than auto-fit so a row of two or three does
   not stretch each card across the full width.

   align-items:stretch matters too: the add-on sets flex-start, so a card with
   a two-line name used to sit shorter than the one beside it. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gfield_checkbox,
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gfield_radio {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) !important;
	gap: 18px !important;
	align-items: stretch !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice {
	width: auto !important;
	max-width: none !important;
	align-items: stretch !important;
}

/* Taller image now that the card is wider, so the proportions still read. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice label img {
	height: 170px !important;
}

/*
 * The card chrome lives on .gchoice, not on the label.
 *
 * The add-on styles the <label> as the card, which is fine until something has
 * to sit inside the card without being part of the label — the quantity box.
 * Any click inside a <label> toggles its control, so a number input in there
 * would tick and untick the item every time someone tried to type in it.
 * Moving border, radius and shadow out to the wrapper leaves the label as
 * purely the clickable image-and-name area, with room beneath it.
 */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	transition:
		border-color 0.18s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice label {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: auto !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

/* Full-bleed image across the top of the card. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .pcafe_imgp_wrap {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice label img {
	display: block !important;
	width: 100% !important;
	height: 170px !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

/* Bottom padding is light because the price has moved down into its own row. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .pcafe_imgp_text {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 12px 14px 8px !important;
	box-sizing: border-box !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(42, 42, 36, 0.1) !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice.is-selected {
	border-color: var(--aox-moss) !important;
	box-shadow: 0 12px 28px rgba(33, 138, 33, 0.18) !important;
	transform: translateY(-3px) !important;
}

/* Keyboard focus has to be visible on the card, since the real input is hidden. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice:focus-within {
	border-color: var(--aox-sage-deep) !important;
	box-shadow: 0 0 0 3px rgba(48, 139, 48, 0.25) !important;
}

/* ------------------------------------------------------------------
   Price and quantity share one row at the foot of the card.

   aox-statement.js builds that row and moves both the price and the
   quantity field into it, on every render. The quantity stays a real
   Gravity Forms field — same id, conditional rule and validation — it is
   only relocated, and it sits outside the <label> because a click inside
   a label toggles that label's control.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-card-foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 0 14px 14px !important;
	box-sizing: border-box !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-card-foot .aox-choice-price {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
}


/* The full label ("Clay Paw Print — how many?") is redundant beside the
   product name it sits under, but screen readers still need it. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty .gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty .ginput_container_number {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/*
 * No "Quantity" caption. It made sense when this was a full-width strip of its
 * own; sitting inches from the price on the same line it is just noise, and a
 * stepper reads as a quantity without being told. The real field label is still
 * there for screen readers, hidden visually above.
 */

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty input[type="number"] {
	flex: 0 0 auto !important;
	width: 66px !important;
	max-width: 66px !important;
	min-height: 36px !important;
	height: 36px !important;
	padding: 0 4px 0 10px !important;
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background: #fff !important;
}

/* "Please enter a number from 1 to 10" is noise on a card this small — but the
   validation message shares this class, so only the plain hint is dropped. */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty .gfield_description:not(.validation_message) {
	display: none !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .aox-qty .validation_message {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	background: none !important;
	border: 0 !important;
}

/*
 * The price sits with the name, not pushed to the foot of the card.
 *
 * It used to be margin-top:auto so prices shared a baseline across a row, which
 * worked while every card held the same things. Now a selected card also grows a
 * quantity strip, so that alignment cannot hold anyway — and pushing the price
 * down left unselected cards with the name stranded at the top and the price
 * floating at the bottom, next to selected cards where the two sat together.
 */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .pcafe_imgp_text .aox-choice-price {
	margin-top: 0 !important;
	padding-top: 4px !important;
}

/* ------------------------------------------------------------------
   The selected tick.

   The add-on hangs its badge off the bottom-right of the image at
   `bottom: -18px`, so it floats half-outside the picture in the middle of
   the card — which is what made it look arbitrary. That one is switched
   off and replaced with a badge pinned to the card's own top-right
   corner, the conventional place for "this one is chosen", with a white
   ring so it reads against any photo.

   It scales up with a single overshoot and settles; nothing bounces.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice .pcafe_imgp_wrap::before {
	display: none !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice::after {
	content: "" !important;
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background-color: var(--aox-moss) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 14px 14px !important;
	box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(42, 42, 36, 0.3) !important;
	opacity: 0 !important;
	transform: scale(0.4) !important;
	transition:
		opacity 0.14s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	pointer-events: none !important;
	z-index: 3 !important;
}

.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice.is-selected::after {
	opacity: 1 !important;
	transform: scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
	.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice,
	.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice:hover,
	.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice.is-selected {
		transform: none !important;
		transition: none !important;
	}
	.aox-cremation-form_wrapper .gfield.init_pcafe_imgp .gchoice::after {
		transform: scale(1) !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------
   Quantity steppers for the paid keepsakes. Each one is a normal Gravity
   Forms number field that conditional logic reveals when its card is
   ticked, so state, validation and save-and-resume all keep working; only
   the presentation is compacted here into a row of small controls.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .aox-qty {
	max-width: 260px !important;
}

.aox-cremation-form_wrapper .aox-qty .gfield_label {
	font-size: 13px !important;
	margin-bottom: 4px !important;
}

.aox-cremation-form_wrapper .aox-qty input[type="number"] {
	max-width: 120px !important;
	text-align: center !important;
}

/* ------------------------------------------------------------------
   Two-column layout: the form, and a running total that stays with the
   customer as they scroll. Desktop only — on a phone the cart would push
   the form itself below the fold, and the statement page already does the
   same job at the end.
   ------------------------------------------------------------------ */
.aox-formlayout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 40px !important;
	width: 100% !important;
	max-width: var(--aox-container) !important;
	margin: 0 auto !important;
	padding: 0 var(--aox-gutter) !important;
	box-sizing: border-box !important;
}

.aox-formlayout__main {
	min-width: 0 !important;
}

/* One column: keep the comfortable reading width the form had on its own. */
.aox-formlayout__main .aox-cremation-form_wrapper {
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.aox-formlayout__aside {
	display: none !important;
}

@media (min-width: 1100px) {
	.aox-formlayout {
		grid-template-columns: minmax(0, 1fr) 330px !important;
		align-items: start !important;
	}

	.aox-formlayout__main .aox-cremation-form_wrapper {
		max-width: none !important;
		margin: 0 !important;
	}

	.aox-formlayout__aside {
		display: block !important;
		position: sticky !important;
		/*
		 * Clears the site's fixed header, whose visible bottom edge sits at 89px
		 * and does not shrink on scroll (measured). At the old 24px the top of
		 * the cart slid underneath it.
		 */
		top: var(--aox-sticky-top, 110px) !important;
		/* Keep the whole cart reachable if it ever grows taller than the gap. */
		max-height: calc(100vh - var(--aox-sticky-top, 110px) - 24px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
	}
}

.aox-cart {
	background: var(--aox-cream) !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 14px !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}

.aox-cart__title {
	font-family: var(--aox-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-darker) !important;
	margin: 0 0 12px !important;
}

/* The cart reuses the statement renderer, so it needs the card chrome
   stripped back off — it is already inside one. */
.aox-cart [data-aox-statement] {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.aox-cart .aox-statement td {
	font-size: 13px !important;
	padding: 9px 0 !important;
	line-height: 1.35 !important;
}

.aox-cart .aox-statement .aox-amount {
	padding-left: 12px !important;
	font-size: 13px !important;
}

.aox-cart .aox-statement tfoot th {
	font-size: 19px !important;
	padding-top: 12px !important;
}

.aox-cart .aox-statement__tax {
	font-size: 12px !important;
}

.aox-cart .aox-statement__empty {
	font-size: 13px !important;
}

.aox-cart .aox-statement__notice {
	font-size: 12px !important;
	padding: 9px 10px !important;
	margin-top: 12px !important;
}

.aox-cart__foot {
	font-family: var(--aox-sans) !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2) !important;
	margin: 14px 0 0 !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--aox-rule) !important;
}

.aox-cart__phone {
	display: inline-block !important;
	margin-top: 8px !important;
	font-family: var(--aox-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--aox-sage-deep) !important;
	text-decoration: none !important;
}

.aox-cart__phone:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

/* ------------------------------------------------------------------
   Gravity Forms' own UI text — validation banners and field errors.

   The Elementor kit sets `letter-spacing: -1.5px` on every h2 site-wide,
   which is right for a 36px display heading and ruinous on a 16px bold
   error message: it crushed "There was a problem with your submission"
   into one unbroken word, 900px of text squeezed into 604px. These
   elements are copy, not display type, so their spacing is reset.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .gform_validation_errors h2,
.aox-cremation-form_wrapper .gform_submission_error,
.aox-cremation-form_wrapper .validation_message,
.aox-cremation-form_wrapper .gfield_validation_message,
.aox-cremation-form_wrapper .gform_confirmation_message,
.aox-cremation-form_wrapper .gfield_description {
	letter-spacing: normal !important;
	word-spacing: normal !important;
}

.aox-cremation-form_wrapper .gform_validation_errors {
	background: var(--aox-cream-2) !important;
	border: 1px solid var(--aox-terracotta) !important;
	border-left: 4px solid var(--aox-terracotta) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	padding: 14px 18px !important;
	margin: 0 0 24px !important;
}

.aox-cremation-form_wrapper .gform_validation_errors h2,
.aox-cremation-form_wrapper .gform_submission_error {
	font-family: var(--aox-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var(--aox-rust) !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   Clickable step navigation, replacing the read-only progress bar.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .aox-steps {
	margin: 0 0 28px !important;
}

.aox-cremation-form_wrapper .aox-steps__title {
	font-family: var(--aox-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-darker) !important;
	margin: 0 0 8px !important;
}

.aox-cremation-form_wrapper .aox-steps__bar {
	height: 5px !important;
	border-radius: 999px !important;
	background: var(--aox-cream-2) !important;
	overflow: hidden !important;
	margin: 0 0 14px !important;
}

.aox-cremation-form_wrapper .aox-steps__bar span {
	display: block !important;
	height: 100% !important;
	border-radius: 999px !important;
	background: var(--aox-moss) !important;
	transition: width 0.3s ease !important;
}

.aox-cremation-form_wrapper .aox-steps__list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aox-cremation-form_wrapper .aox-steps__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aox-cremation-form_wrapper .aox-steps__item::before,
.aox-cremation-form_wrapper .aox-steps__item::marker {
	content: none !important;
}

.aox-cremation-form_wrapper .aox-steps__step {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 12px 6px 7px !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: none !important;
	font-family: var(--aox-sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--aox-char-2) !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
}

.aox-cremation-form_wrapper .aox-steps__num {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--aox-cream-2) !important;
	color: var(--aox-char-2) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
}

.aox-cremation-form_wrapper .aox-steps__step:hover,
.aox-cremation-form_wrapper .aox-steps__step:focus-visible {
	border-color: var(--aox-sage-deep) !important;
	background: var(--aox-cream) !important;
	color: var(--aox-char) !important;
	outline: none !important;
	transform: none !important;
}

.aox-cremation-form_wrapper .aox-steps__step.is-done .aox-steps__num {
	background: var(--aox-sage-deep) !important;
	color: #fff !important;
}

.aox-cremation-form_wrapper .aox-steps__step.is-current {
	border-color: var(--aox-moss) !important;
	background: var(--aox-moss) !important;
	color: #fff !important;
	font-weight: 600 !important;
	cursor: default !important;
}

.aox-cremation-form_wrapper .aox-steps__step.is-current .aox-steps__num {
	background: rgba(255, 255, 255, 0.22) !important;
	color: #fff !important;
}

@media (max-width: 600px) {
	/* Names would wrap to three lines on a phone; the numbers still navigate. */
	.aox-cremation-form_wrapper .aox-steps__name {
		display: none !important;
	}
	.aox-cremation-form_wrapper .aox-steps__step {
		padding: 6px !important;
	}
	.aox-cremation-form_wrapper .aox-steps__step.is-current .aox-steps__name {
		display: inline !important;
	}
}

/* Start over. Sits in the page footer beside Continue, deliberately as a quiet
   text link rather than a fourth button — it is an escape hatch, not a step. */
.aox-cremation-form_wrapper .aox-restart {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	min-height: 0 !important;
	width: auto !important;
	font-family: var(--aox-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--aox-char-2) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	cursor: pointer !important;
	align-self: center !important;
}

.aox-cremation-form_wrapper .aox-restart:hover,
.aox-cremation-form_wrapper .aox-restart:focus-visible {
	color: var(--aox-rust) !important;
	background: none !important;
	transform: none !important;
}

/* ------------------------------------------------------------------
   Signature.

   The add-on marks its toolbar controls `gform-theme__disable`, which stops
   Gravity Forms styling them — and lets the site theme's generic button rule
   through instead. That is what made the font picker a fat green pill with
   black text clipped to "Yo...": 40px of horizontal padding inside a 125px
   box. Everything here is scoped to this form's signature field.

   Box size comes from the field's own boxWidth setting, not CSS, so the canvas
   gets a real drawing surface at that size instead of a stretched 300px one.
   ------------------------------------------------------------------ */
.aox-cremation-form_wrapper .ginput_container_signature {
	max-width: 100% !important;
}

.aox-cremation-form_wrapper .gfield_signature_container {
	max-width: 100% !important;
	height: auto !important;
}

/*
 * No `display` here on purpose. Switching to typed mode works by the add-on
 * setting the canvas to display:none inline — an !important display rule beat
 * that, so the empty pad stayed on screen above the text box and the field
 * showed two stacked boxes. vertical-align does the job display:block was
 * doing (killing the inline descender gap) without overriding the mode switch.
 */
.aox-cremation-form_wrapper .gfield_signature_container canvas {
	vertical-align: top !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
	touch-action: none !important;
}

/* Typed-signature mode. The selector carries the element and the container as
   well as the class, because the form's generic `input[type="text"]` rule is
   more specific than a lone class and would otherwise squash this back down to
   a 52px data field.

   White, like the canvas: the two signing modes produce the same artefact and
   should look like the same thing. */
.aox-cremation-form_wrapper .ginput_container_signature input.gfield_signature_text_input {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 92px !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--aox-char) !important;
	font-size: 32px !important;
	line-height: 1.2 !important;
	text-indent: 0 !important;
	padding: 10px 18px !important;
	box-sizing: border-box !important;
}

.aox-cremation-form_wrapper .ginput_container_signature input.gfield_signature_text_input:focus {
	border-color: var(--aox-sage-deep) !important;
	outline: none !important;
}

/* Toolbar: font picker on the left, mode and reset icons on the right. */
.aox-cremation-form_wrapper .gfield_signature_toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 44px !important;
	margin: 12px 0 0 !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_dropdown {
	position: relative !important;
	width: auto !important;
	min-width: 0 !important;
	flex: 0 1 auto !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_select_button {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: auto !important;
	min-width: 190px !important;
	max-width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1.5px solid var(--aox-rule) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--aox-char) !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_select_button:hover,
.aox-cremation-form_wrapper .gfield_signature_font_select_button:focus-visible {
	background: var(--aox-cream) !important;
	border-color: var(--aox-sage-deep) !important;
	color: var(--aox-char) !important;
	outline: none !important;
	transform: none !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_select_chevron,
.aox-cremation-form_wrapper .gfield_signature_font_select_button .gform-common-icon--chevron-down {
	flex: 0 0 auto !important;
	color: var(--aox-sage-deep) !important;
	font-size: 18px !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_select_list {
	margin: 6px 0 0 !important;
	padding: 6px !important;
	border: 1px solid var(--aox-rule) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 14px 36px rgba(42, 42, 36, 0.14) !important;
	list-style: none !important;
	z-index: 20 !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_option {
	padding: 10px 12px !important;
	border-radius: 8px !important;
	color: var(--aox-char) !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
}

.aox-cremation-form_wrapper .gfield_signature_font_option:hover,
.aox-cremation-form_wrapper .gfield_signature_font_option:focus {
	background: var(--aox-cream-2) !important;
}

/* Pencil / text / reset. Round, quiet, sage — same language as the date picker
   arrows rather than three bare glyphs floating on the page. */
.aox-cremation-form_wrapper .gfield_signature_toolbar_icons {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 0 0 auto !important;
}

.aox-cremation-form_wrapper .gfield_signature_toolbar_icons button,
.aox-cremation-form_wrapper .gfield_signature_text_button,
.aox-cremation-form_wrapper .gfield_signature_draw_button,
.aox-cremation-form_wrapper .gfield_signature_reset_button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--aox-rule) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--aox-sage-deep) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.aox-cremation-form_wrapper .gfield_signature_toolbar_icons button:hover,
.aox-cremation-form_wrapper .gfield_signature_toolbar_icons button:focus-visible {
	background: var(--aox-cream-2) !important;
	border-color: var(--aox-sage-deep) !important;
	color: var(--aox-moss) !important;
	outline: none !important;
	transform: none !important;
}

@media (max-width: 600px) {
	.aox-cremation-form_wrapper .gfield_signature_toolbar {
		flex-wrap: wrap !important;
	}
	.aox-cremation-form_wrapper .gfield_signature_font_select_button {
		min-width: 150px !important;
		font-size: 18px !important;
	}
}

/* =========================================================================
   Appointment booking — a calendar and a list of times.

   Replaces the date box and the dropdown on step 6. The two Gravity Forms
   fields stay in the page, hidden, because they are still what validation
   reads and what the server claims a slot from; see assets/aox-booking.js.
   Their validation message is deliberately left visible, so an error still
   has somewhere to appear.
   ========================================================================= */

.aox-booking-source .gfield_label,
.aox-booking-source .ginput_container,
.aox-booking-source .gfield_description,
.aox-booking-source .gform-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.aox-booking-source {
	grid-column: 1 / -1 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* An error still needs to be seen, so it is the one thing left on screen. */
.aox-booking-source .validation_message {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 14px !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}

.aox-booking {
	/*
	 * Gravity Forms lays its fields out on a twelve-column grid, and anything
	 * inserted among them becomes a grid item. Without this the whole card is
	 * squeezed into a single column about sixty pixels wide.
	 */
	grid-column: 1 / -1 !important;
	width: 100% !important;
	margin: 0 0 8px !important;
	padding: 26px 26px 24px !important;
	background: var(--aox-cream, #fbf7ee) !important;
	border: 1px solid var(--aox-rule, #ddd3b7) !important;
	border-radius: 14px !important;
}

.aox-booking__head {
	margin: 0 0 22px !important;
}

.aox-booking__title {
	margin: 0 0 4px !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-booking__sub {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-booking__body {
	display: grid !important;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important;
	gap: 26px !important;
	align-items: start !important;
}

/* ---------------------------------------------------------------- Calendar */

.aox-cal {
	padding: 16px !important;
	background: #ffffff !important;
	border: 1px solid var(--aox-rule, #ddd3b7) !important;
	border-radius: 12px !important;
}

.aox-cal__nav {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 0 14px !important;
}

.aox-cal__month {
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 19px !important;
	color: var(--aox-char, #2a2a24) !important;
	letter-spacing: normal !important;
}

.aox-cal__arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: var(--aox-char, #2a2a24) !important;
	background: var(--aox-cream-2, #f4ecd8) !important;
	border: 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.aox-cal__arrow:hover:not(:disabled) {
	background: var(--aox-rule, #ddd3b7) !important;
}

.aox-cal__arrow:disabled {
	opacity: 0.32 !important;
	cursor: default !important;
}

.aox-cal__dow,
.aox-cal__grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px !important;
}

.aox-cal__dow {
	margin: 0 0 6px !important;
}

.aox-cal__dow span {
	padding: 4px 0 !important;
	text-align: center !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-cal__day {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--aox-char, #2a2a24) !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease !important;
}

.aox-cal__day:hover:not(:disabled):not(.is-selected) {
	background: var(--aox-cream-2, #f4ecd8) !important;
}

.aox-cal__day.is-today:not(.is-selected) {
	border-color: var(--aox-rule, #ddd3b7) !important;
}

.aox-cal__day.is-selected {
	background: var(--aox-moss, #218a21) !important;
	border-color: var(--aox-moss, #218a21) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
}

.aox-cal__day.is-closed {
	color: #b9b3a3 !important;
	cursor: default !important;
}

.aox-cal__day.is-outside {
	color: #cdc7b7 !important;
}

.aox-cal__day.is-outside.is-closed {
	color: #ddd8ca !important;
}

/* ------------------------------------------------------------------- Times */

.aox-times__head {
	margin: 0 0 14px !important;
}

.aox-times__title {
	margin: 0 0 2px !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-times__sub {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-times__list {
	max-height: 340px !important;
	overflow-y: auto !important;
	padding-right: 4px !important;
}

.aox-times__part {
	margin: 16px 0 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-times__part:first-child {
	margin-top: 0 !important;
}

.aox-times__empty {
	margin: 6px 0 0 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-times__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(102px, 100%), 1fr)) !important;
	gap: 8px !important;
}

.aox-slot {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	min-height: 0 !important;
	padding: 11px 8px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--aox-char, #2a2a24) !important;
	background: #ffffff !important;
	border: 1px solid var(--aox-rule, #ddd3b7) !important;
	border-radius: 9px !important;
	cursor: pointer !important;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease !important;
}

.aox-slot:hover:not(:disabled):not(.is-selected) {
	border-color: var(--aox-moss, #218a21) !important;
	background: var(--aox-cream, #fbf7ee) !important;
}

.aox-slot__tick {
	width: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	font-size: 13px !important;
	transition: width 0.14s ease, opacity 0.14s ease !important;
}

.aox-slot.is-selected {
	background: var(--aox-moss, #218a21) !important;
	border-color: var(--aox-moss, #218a21) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
}

.aox-slot.is-selected .aox-slot__tick {
	width: 13px !important;
	opacity: 1 !important;
}

.aox-slot.is-gone {
	color: #a9a394 !important;
	background: var(--aox-cream-2, #f4ecd8) !important;
	border-color: transparent !important;
	cursor: default !important;
}

.aox-slot.is-gone .aox-slot__label {
	text-decoration: line-through !important;
}

/* ------------------------------------------------------- Legend and summary */

.aox-legend {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin: 16px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid var(--aox-rule, #ddd3b7) !important;
}

.aox-legend__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 13px !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-legend__dot {
	display: inline-block !important;
	width: 11px !important;
	height: 11px !important;
	border-radius: 50% !important;
}

.aox-legend__dot.is-free {
	background: #ffffff !important;
	border: 1px solid var(--aox-rule, #ddd3b7) !important;
}

.aox-legend__dot.is-picked {
	background: var(--aox-moss, #218a21) !important;
}

.aox-legend__dot.is-gone {
	background: #ddd8ca !important;
}

.aox-booking__note {
	margin: 14px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--aox-char-2, #54524a) !important;
}

@media (max-width: 880px) {
	.aox-booking__body {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 22px !important;
	}

	.aox-times__list {
		max-height: none !important;
		overflow-y: visible !important;
	}
}

@media (max-width: 560px) {
	.aox-booking {
		padding: 20px 16px 18px !important;
	}

	.aox-booking__title {
		font-size: 22px !important;
	}

	.aox-cal {
		padding: 12px !important;
	}

	.aox-times__grid {
		grid-template-columns: repeat(auto-fill, minmax(min(102px, 100%), 1fr)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aox-cal__day,
	.aox-slot,
	.aox-slot__tick {
		transition: none !important;
	}
}

/* ---------------------------------------------- Waiting for a day's times */

.aox-waiting {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 15px !important;
	padding: 54px 0 !important;
}

.aox-waiting__ring {
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	border: 3px solid var(--aox-rule, #ddd3b7) !important;
	border-top-color: var(--aox-moss, #218a21) !important;
	border-radius: 50% !important;
	animation: aox-spin 0.85s linear infinite !important;
}

@keyframes aox-spin {
	to {
		transform: rotate(360deg);
	}
}

.aox-waiting__text {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2, #54524a) !important;
}

@media (prefers-reduced-motion: reduce) {
	.aox-waiting__ring {
		animation-duration: 3s !important;
	}
}

/* ------------------------------------- The chosen appointment, full width */

.aox-summary {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 6px 14px !important;
	margin: 22px 0 0 !important;
	padding: 14px 20px !important;
	background: var(--aox-cream-2, #f4ecd8) !important;
	border-radius: 10px !important;
}

.aox-summary__icon {
	font-size: 17px !important;
	line-height: 1 !important;
	align-self: center !important;
}

.aox-summary__label {
	margin: 0 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--aox-moss-darker, #165816) !important;
}

.aox-summary__value {
	margin: 0 !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-summary__zone {
	margin: 0 0 0 auto !important;
	font-size: 12px !important;
	color: var(--aox-char-2, #54524a) !important;
}

@media (max-width: 560px) {
	.aox-summary__zone {
		margin-left: 0 !important;
	}
}

/* ------------------------------------------- Collection distance and fee */

.aox-travel-field {
	grid-column: 1 / -1 !important;
}

.aox-travel {
	margin: 4px 0 8px !important;
	padding: 18px 20px !important;
	background: var(--aox-cream-2, #f4ecd8) !important;
	border-left: 3px solid var(--aox-moss, #218a21) !important;
	border-radius: 0 10px 10px 0 !important;
}

.aox-travel__label {
	margin: 0 0 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--aox-moss-darker, #165816) !important;
}

.aox-travel__note {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-travel__address {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2, #54524a) !important;
}

.aox-travel__distance {
	margin: 0 0 12px !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-travel__sums {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 0 2px !important;
}

.aox-travel__sums th,
.aox-travel__sums td {
	padding: 7px 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-align: left !important;
	letter-spacing: normal !important;
	color: var(--aox-char-2, #54524a) !important;
	border: 0 !important;
	background: none !important;
}

.aox-travel__sums td:last-child,
.aox-travel__sums th:last-child {
	text-align: right !important;
	white-space: nowrap !important;
	font-variant-numeric: tabular-nums !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-travel__sums tfoot th {
	padding-top: 11px !important;
	border-top: 1px solid var(--aox-rule, #ddd3b7) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--aox-moss-darker, #165816) !important;
}

.aox-travel__sums tfoot th:last-child {
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-travel.is-waiting .aox-travel__note {
	opacity: 0.65 !important;
}

@media (max-width: 560px) {
	.aox-travel {
		padding: 15px 16px !important;
	}

	.aox-travel__distance {
		font-size: 19px !important;
	}
}

/* =========================================================================
   Thank you page — second pass.

   Replaces the first attempt's flat hero and its two-column closing block.
   Everything on this page is centred, so both had to be: a hero with the same
   chalk paw texture the form page opens with, a phone callout held to the
   hero's own measure instead of spanning the full width, and one centred
   column at the end rather than two columns with several hundred pixels of
   nothing between them.
   ========================================================================= */

.aox-thanks {
	position: relative !important;
	overflow: hidden !important;
	padding: clamp(52px, 7vw, 78px) 0 clamp(46px, 6vw, 66px) !important;
	border-top: 3px solid var(--aox-sage-deep, #308b30) !important;
	border-bottom: 1px solid var(--aox-rule, #ddd3b7) !important;
	text-align: center !important;

	/*
	 * The chalk paw pattern the site already uses, washed out under a cream
	 * veil so the headline stays fully readable over it. The veil is radial and
	 * centred here, not the left-to-right one the form page uses, because this
	 * hero's text sits in the middle rather than down the left.
	 */
	background-color: var(--aox-cream-2, #f4ecd8) !important;
	background-image:
		radial-gradient(
			ellipse 90% 75% at 50% 38%,
			rgba(251, 247, 238, 0.97) 0%,
			rgba(251, 247, 238, 0.9) 42%,
			rgba(244, 236, 216, 0.66) 100%
		),
		url("https://www.angeloakspetcrematory.com/wp-content/uploads/2026/05/Chalk-Paw-Prints-Pattern-Harris-County-Texas.webp") !important;
	background-repeat: no-repeat, repeat !important;
	background-size: 100% 100%, 420px auto !important;
	background-position: center center, center top !important;
}

/* Two soft blooms of green, one each side, so a centred hero stays symmetric
   rather than leaning the way the form page's single corner bloom does. */
.aox-thanks::before,
.aox-thanks::after {
	content: "" !important;
	position: absolute !important;
	top: -120px !important;
	width: 360px !important;
	height: 360px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(128, 190, 128, 0.3) 0%, rgba(128, 190, 128, 0) 70%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.aox-thanks::before {
	left: -130px !important;
}

.aox-thanks::after {
	right: -130px !important;
}

.aox-thanks__inner {
	position: relative !important;
	z-index: 1 !important;
	max-width: 820px !important;
}

.aox-thanks__mark {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 66px !important;
	height: 66px !important;
	margin: 0 0 24px !important;
	border-radius: 50% !important;
	background: var(--aox-moss, #218a21) !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 9px rgba(128, 190, 128, 0.22) !important;
}

.aox-thanks__mark svg {
	display: block !important;
}

.aox-thanks__eyebrow {
	margin: 0 0 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-deep, #308b30) !important;
}

.aox-thanks__title {
	margin: 0 0 18px !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: clamp(34px, 5.4vw, 52px) !important;
	font-weight: 400 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	color: var(--aox-moss-dark, #0c2a0c) !important;
	text-wrap: balance !important;
}

.aox-thanks__lede {
	margin: 0 auto !important;
	max-width: 54ch !important;
	font-size: 18px !important;
	line-height: 1.65 !important;
	color: var(--aox-char-2, #54524a) !important;
	text-wrap: pretty !important;
}

/* -------------------------------------------------- The phone callout here

   Same component as the form page, but sitting INSIDE the hero rather than in a
   band of its own below it. As a sibling it stood on the page's white ground
   between two cream blocks, which left white either side of it and a gap
   underneath — the strip that had to go. In here the hero's background runs
   behind it and there is nothing to see between the two sections. */

.aox-thanks .aox-callout {
	margin: 38px auto 0 !important;
	max-width: 100% !important;
	text-align: left !important;
	justify-content: space-between !important;
	box-shadow: 0 1px 2px rgba(42, 42, 36, 0.05), 0 12px 30px rgba(42, 42, 36, 0.07) !important;
}

/* ------------------------------------------------------ The closing section

   One centred column. The first pass split this into 1.6fr / 1fr, which at the
   container's full width left a few hundred pixels of dead space between a
   short paragraph and three links. */

.aox-aftercare {
	display: block !important;
	margin: 0 0 72px !important;
	padding: 0 !important;
}

.aox-aftercare__inner {
	max-width: 720px !important;
	padding-top: 44px !important;
	border-top: 1px solid var(--aox-rule, #ddd3b7) !important;
	text-align: center !important;
}

.aox-aftercare__title {
	margin: 0 0 12px !important;
	font-family: 'Sentient', Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	color: var(--aox-char, #2a2a24) !important;
}

.aox-aftercare__body {
	margin: 0 auto 36px !important;
	max-width: 56ch !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--aox-char-2, #54524a) !important;
	text-wrap: pretty !important;
}

.aox-aftercare__eyebrow {
	margin: 0 0 16px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--aox-sage-deep, #308b30) !important;
}

.aox-aftercare__list {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aox-aftercare__list li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.aox-aftercare__list a {
	display: inline-block !important;
	padding: 11px 20px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--aox-sage-darker, #165816) !important;
	background: var(--aox-cream-2, #f4ecd8) !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.aox-aftercare__list a:hover,
.aox-aftercare__list a:focus-visible {
	background: var(--aox-cream, #fbf7ee) !important;
	border-color: var(--aox-moss, #218a21) !important;
	text-decoration: none !important;
}

@media (max-width: 700px) {
	.aox-thanks .aox-callout {
		margin-top: 28px !important;
		justify-content: flex-start !important;
	}

	.aox-aftercare {
		margin-bottom: 52px !important;
	}

	.aox-aftercare__inner {
		padding-top: 34px !important;
	}

	.aox-aftercare__list a {
		padding: 10px 16px !important;
		font-size: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aox-aftercare__list a {
		transition: none !important;
	}
}

/* The steps block is borrowed from the form page, where the whole page reads
   down the left. Here everything else is centred, so its heading is too — the
   cards themselves stay left-aligned, because that is how they are read. */

/*
 * The steps block also carries a 56px top margin from the form page, where it
 * needs breathing room after the form. Here it follows the hero directly, and
 * that margin exposed a strip of the page's white ground between two cream
 * blocks. Gone, and the hero keeps no bottom rule of its own so the two blocks
 * meet on one hairline rather than two.
 */
.aox-next--thanks {
	margin-top: 0 !important;
}

.aox-thanks {
	border-bottom: 0 !important;
}

.aox-next--thanks .aox-next__eyebrow,
.aox-next--thanks .aox-next__title {
	text-align: center !important;
}

.aox-next--thanks .aox-next__title {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   Square card field (page 10, field class .aox-card)

   Square draws the card number / expiry / CVV box inside its own iframe, so
   the colours and corners of THAT box are set in PHP through the add-on's
   gform_square_card_style filter (AOX_GF_Hooks::card_style), not here. This
   block only handles what sits around it: the cardholder input above, the
   gap between the two, and the add-on's repeated captions under each input,
   which are switched off on the field (hidden_label) and belt-and-braced here.
   ========================================================================= */

.aox-cremation-form_wrapper .aox-card .gform-field-label--type-sub {
	display: none !important;
}

.aox-cremation-form_wrapper .aox-card .ginput_container_square_card {
	display: block !important;
}

.aox-cremation-form_wrapper .aox-card .ginput_container_square_card > .gform-grid-col {
	margin: 0 0 12px !important;
	padding: 0 !important;
	width: 100% !important;
}

.aox-cremation-form_wrapper .aox-card .ginput_container_square_card > .gform-grid-col:last-child {
	margin-bottom: 0 !important;
}

/* The cardholder input is a plain text input, so the form's generic input
   rule already styles it; only its placeholder needs the form's muted tone. */
.aox-cremation-form_wrapper .aox-card input.sq-input::placeholder {
	color: var(--aox-char-2) !important;
	opacity: 0.7 !important;
}

/* The visible outline of the card box is THIS wrapper, not anything inside
   Square's iframe: the single-card element draws no border of its own, so
   the wrapper carries the same box as every other input on the form. Focus
   cannot be shown from out here, and the SDK's own focus colour is handed
   over in AOX_GF_Hooks::card_style(). */
.aox-cremation-form_wrapper .aox-card .sq-card-iframe-container {
	margin: 0 !important;
	padding: 0 8px !important;
	border: 2px solid var(--aox-rule) !important;
	border-radius: 10px !important;
	background: var(--aox-cream) !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.aox-cremation-form_wrapper .aox-card .sq-card-iframe-container iframe {
	display: block !important;
	width: 100% !important;
}

.aox-cremation-form_wrapper .aox-card .sq-card-message {
	display: block !important;
	margin: 6px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2) !important;
}

.aox-cremation-form_wrapper .aox-card .sq-card-message:empty {
	display: none !important;
}

.aox-cremation-form_wrapper .aox-card .gfield_description {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: var(--aox-char-2) !important;
}

/* =========================================================================
   Booking widget — the times column before a day is chosen

   Three numbered steps and an hours line, so the right half of the card
   explains itself instead of sitting empty until the first click.
   ========================================================================= */

.aox-times__intro {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	margin: 18px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none !important;
}

.aox-times__step {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aox-times__num {
	flex: 0 0 26px !important;
	width: 26px !important;
	height: 26px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: var(--aox-moss) !important;
	color: #ffffff !important;
	font-family: var(--aox-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.aox-times__steptext {
	font-family: var(--aox-sans) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--aox-char) !important;
	padding-top: 3px !important;
}

.aox-times__hours {
	margin: 18px 0 0 !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
	background: var(--aox-cream-2) !important;
	font-family: var(--aox-sans) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--aox-char-2) !important;
}

@media (max-width: 700px) {
	.aox-times__intro {
		margin-top: 12px !important;
		gap: 10px !important;
	}

	.aox-times__hours {
		margin-top: 14px !important;
	}
}

/* The Square add-on reads the COMPUTED border of the cardholder input at
   attach time and hands it to Square's iframe as its inner input style. Square
   only accepts whole-pixel widths there, so this one input uses 2px rather
   than the form's usual 1.5px, and the wrapper above matches it. */
.aox-cremation-form_wrapper .aox-card input.sq-input {
	border-width: 2px !important;
}