/* ==========================================================================
   Safe & Cozy — components
   These are the pieces that become WPBakery elements in stage 4. Each one is
   driven by custom properties so a widget param can override a single value
   inline without shipping a per-instance <style> block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icon badge — the coloured circle used by every card variant.
   -------------------------------------------------------------------------- */

.sc-icon-badge {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--sc-icon-size, 52px);
	height: var(--sc-icon-size, 52px);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-icon-bg, var(--sc-green-900));
	color: var(--sc-icon-color, #fff);
}

.sc-icon-badge svg {
	width: 55%;
	height: 55%;
}

/* --------------------------------------------------------------------------
   Card grid — grid on desktop, optionally a swipeable carousel on small
   screens. Column counts come from --sc-cols-* so a widget can set them
   per device without generating new classes.
   -------------------------------------------------------------------------- */

.sc-cardgrid {
	display: grid;
	grid-template-columns: repeat(var(--sc-cols-d, 4), minmax(0, 1fr));
	gap: var(--sc-grid-gap);
	align-items: stretch;
}

@media (max-width: 991px) {
	.sc-cardgrid {
		grid-template-columns: repeat(var(--sc-cols-t, 2), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.sc-cardgrid {
		grid-template-columns: repeat(var(--sc-cols-m, 1), minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Carousel mode. Same DOM as the grid, no re-init on resize: a media query
   swaps `display: grid` for a scroll-snap flex row. --sc-slides-* may be
   fractional (1.15) so the next card peeks and the row reads as swipeable.
   -------------------------------------------------------------------------- */

.sc-cardgrid--scroller {
	display: flex;
	gap: var(--sc-grid-gap);
	margin-inline: calc(var(--sc-gutter) * -1);
	padding-inline: var(--sc-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sc-gutter);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sc-cardgrid--scroller::-webkit-scrollbar {
	display: none;
}

.sc-cardgrid--scroller > * {
	scroll-snap-align: start;
}

@media (min-width: 641px) and (max-width: 991px) {
	.sc-cardgrid[data-sc-tablet="carousel"] {
		display: flex;
		gap: var(--sc-grid-gap);
		margin-inline: calc(var(--sc-gutter) * -1);
		padding-inline: var(--sc-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sc-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.sc-cardgrid[data-sc-tablet="carousel"]::-webkit-scrollbar {
		display: none;
	}

	.sc-cardgrid[data-sc-tablet="carousel"] > * {
		flex: 0 0
			calc(
				(100% - var(--sc-grid-gap) * (var(--sc-slides-t, 2.2) - 1)) /
					var(--sc-slides-t, 2.2)
			);
		scroll-snap-align: start;
	}
}

@media (max-width: 640px) {
	.sc-cardgrid[data-sc-mobile="carousel"] {
		display: flex;
		gap: var(--sc-grid-gap);
		margin-inline: calc(var(--sc-gutter) * -1);
		padding-inline: var(--sc-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sc-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.sc-cardgrid[data-sc-mobile="carousel"]::-webkit-scrollbar {
		display: none;
	}

	.sc-cardgrid[data-sc-mobile="carousel"] > * {
		flex: 0 0
			calc(
				(100% - var(--sc-grid-gap) * (var(--sc-slides-m, 1.15) - 1)) /
					var(--sc-slides-m, 1.15)
			);
		scroll-snap-align: start;
	}
}

/* Hairline rules between columns. Desktop only, where the row never wraps. */
@media (min-width: 992px) {
	.sc-cardgrid--divided > * + *::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--sc-grid-gap) / -2);
		width: 1px;
		background: var(--sc-line);
	}
}

/* --------------------------------------------------------------------------
   Card — one component, two layouts.
     .sc-card--stacked  media on top, icon badge straddling its corner
     .sc-card--inline   icon beside the copy, optional media underneath
   -------------------------------------------------------------------------- */

.sc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--sc-card-bg, transparent);
	border-radius: var(--sc-card-radius, var(--sc-radius-lg));
	transition: box-shadow var(--sc-dur) var(--sc-ease),
		transform var(--sc-dur) var(--sc-ease);
}

.sc-card__media {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
	background: var(--sc-line-soft);
}

/* aspect-ratio + object-fit means no reflow once the file lands. */
.sc-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--sc-media-ratio, 16 / 10);
	object-fit: cover;
	transition: transform 0.45s var(--sc-ease);
}

.sc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-2);
	min-width: 0;
}

.sc-card__title {
	color: var(--sc-green-900);
}

.sc-card__text {
	color: var(--sc-body);
	font-size: var(--sc-fs-sm);
	line-height: 1.5;
}

.sc-card__cta {
	margin-top: var(--sc-space-2);
	color: var(--sc-teal-600);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
}

/* A whole-card link that keeps the heading as the accessible name. */
.sc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* --- Stacked (What We Offer) --------------------------------------------- */

.sc-card--stacked {
	--sc-card-bg: var(--sc-surface);

	overflow: hidden;
	box-shadow: var(--sc-shadow-card);
}

.sc-card--stacked .sc-card__media {
	border-radius: 0;
}

.sc-card--stacked .sc-card__media .sc-icon-badge {
	position: absolute;
	top: var(--sc-space-3);
	left: var(--sc-space-3);
	/* The white ring reads as the card cutting a notch out of the photo. */
	box-shadow: 0 0 0 5px var(--sc-surface);
}

/* No image set: the badge is a direct child, so it sits in the flow instead of
   floating over the title. */
.sc-card--stacked > .sc-icon-badge {
	margin: var(--sc-space-5) var(--sc-space-5) 0;
}

.sc-card--stacked .sc-card__body {
	padding: var(--sc-space-4) var(--sc-space-5) var(--sc-space-5);
}

/* --- Inline (Built for… / Why Safe & Cozy) -------------------------------- */

.sc-card--inline {
	gap: var(--sc-space-5);
}

.sc-card--inline .sc-card__head {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-4);
}

.sc-card--inline .sc-card__media {
	/* Pushed to the bottom so photos line up across a row of uneven copy. */
	margin-top: auto;
	border-radius: var(--sc-radius-md);
}

/* --- Hover ---------------------------------------------------------------- */

@media (hover: hover) {
	.sc-card--hover:hover {
		transform: translateY(-4px);
		box-shadow: var(--sc-shadow-card-hover);
	}

	.sc-card--hover:hover .sc-card__media img {
		transform: scale(1.045);
	}
}

/* --------------------------------------------------------------------------
   Carousel affordance — dots for the mobile card carousel.
   -------------------------------------------------------------------------- */

.sc-dots {
	display: none;
	justify-content: center;
	gap: var(--sc-space-2);
	margin-top: var(--sc-space-5);
}

.sc-dots--active {
	display: flex;
}

.sc-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-line);
	cursor: pointer;
	transition: width var(--sc-dur) var(--sc-ease),
		background-color var(--sc-dur) var(--sc-ease);
}

.sc-dots button[aria-current="true"] {
	width: 20px;
	background: var(--sc-green-900);
}

/* --------------------------------------------------------------------------
   Element wrappers
   These exist so the WPBakery elements have something to hang on without
   changing the components above. A card grid dropped into a builder row must
   not add its own container or section padding — the row supplies both.
   -------------------------------------------------------------------------- */

.sc-heading--left {
	text-align: left;
}

.sc-heading--left .sc-section-head {
	text-align: left;
}

.sc-heading--left .sc-section-head__rule {
	justify-content: flex-start;
}

.sc-heading--left .sc-section-head__rule::before {
	display: none;
}

/* Stacked card with the white surface switched off. */
.sc-card--plain {
	--sc-card-bg: transparent;

	box-shadow: none;
}

.sc-card--plain .sc-card__media {
	border-radius: var(--sc-radius-lg);
}

.sc-card--plain .sc-card__body {
	padding-inline: 0;
}

/* Denser card rhythm, as in the Why Safe & Cozy band: smaller type, icon
   centred against the copy rather than aligned to the first line. */
.sc-cardgrid-block--compact .sc-card__title {
	font-size: var(--sc-fs-sm);
}

.sc-cardgrid-block--compact .sc-card__text {
	font-size: var(--sc-fs-xs);
}

.sc-cardgrid-block--compact .sc-card__head {
	align-items: center;
	gap: var(--sc-space-4);
}

.sc-cardgrid-block--compact .sc-card__body {
	gap: var(--sc-space-1);
}

/* ==========================================================================
   Element overrides
   Custom properties the WPBakery elements write. Each falls back to the
   design default, so an untouched control changes nothing.
   ========================================================================== */

.sc-cardgrid-block,
.sc-card-block {
	font-family: var(--sc-font);
	line-height: var(--sc-line-height, var(--sc-lh-body));
}

/* A card row is a section, so it carries the design's vertical rhythm by
   default rather than collapsing onto its neighbours. The Spacing tab
   overrides it. */
.sc-cardgrid-block {
	padding-top: var(--sc-pad-top, var(--sc-section-y));
	padding-bottom: var(--sc-pad-bottom, var(--sc-section-y));
}

/* A single card sits inside a column the builder already spaces. */
.sc-card-block {
	padding-top: var(--sc-pad-top, 0);
	padding-bottom: var(--sc-pad-bottom, 0);
}

.sc-card__title {
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, var(--sc-fs-h3));
	font-weight: var(--sc-title-weight, 700);
	color: var(--sc-title-color, var(--sc-green-900));
}

.sc-card__subtitle {
	color: var(--sc-text-color, var(--sc-muted));
	font-size: var(--sc-fs-xs);
	font-weight: 600;
}

.sc-card__text {
	font-size: var(--sc-text-size, var(--sc-fs-sm));
	color: var(--sc-text-color, var(--sc-body));
	line-height: var(--sc-line-height, 1.5);
}

/* Padding is set on the body for the stacked card, which has a surface, and on
   the whole card for the inline one, which does not. */
.sc-card--stacked .sc-card__body {
	padding: var(--sc-card-padding, var(--sc-space-4) var(--sc-space-5) var(--sc-space-5));
}

.sc-card--inline {
	padding: var(--sc-card-padding, 0);
}

.sc-card {
	border-radius: var(--sc-card-radius, var(--sc-radius-lg));
}

/* A border only appears once a colour is chosen. */
.sc-card[style*="--sc-card-border"] {
	border: var(--sc-card-border-width, 1px) solid var(--sc-card-border);
}

.sc-card--center {
	text-align: center;
}

.sc-card--center .sc-card__head {
	flex-direction: column;
	align-items: center;
}

.sc-card--right {
	text-align: right;
}

/* --- Icon shapes --------------------------------------------------------- */

.sc-icon-badge--rounded {
	border-radius: var(--sc-radius-lg);
}

.sc-icon-badge--square {
	border-radius: 0;
}

.sc-icon-badge--none {
	background: none;
	color: var(--sc-icon-color, var(--sc-green-900));
}

.sc-card--stacked .sc-card__media .sc-icon-badge--none {
	box-shadow: none;
}

/* An uploaded image or SVG icon. */
.sc-icon-badge__img {
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.sc-icon-badge--none .sc-icon-badge__img {
	width: 100%;
	height: 100%;
}

/* A Font Awesome glyph from the theme. */
.sc-icon-badge i {
	font-size: calc(var(--sc-icon-size, 52px) * 0.42);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Overlap card

   Media on top, then the icon and title together on a row that straddles the
   photo's bottom edge, then the copy. Used by "What You Can Book" and
   "Ideal For" on the RV Rentals page.
   -------------------------------------------------------------------------- */

.sc-card--overlap {
	--sc-card-bg: var(--sc-surface);

	box-shadow: var(--sc-shadow-card);
}

.sc-card--overlap .sc-card__media {
	border-radius: var(--sc-card-radius, var(--sc-radius-lg))
		var(--sc-card-radius, var(--sc-radius-lg)) 0 0;
}

.sc-card--overlap .sc-card__body {
	/* The media is positioned, so the body has to be too or it paints
	   underneath and the overlapping badge gets its top half clipped. */
	position: relative;
	z-index: 1;
	padding: 0 var(--sc-space-5) var(--sc-space-6);
}

.sc-card--overlap .sc-card__head {
	display: flex;
	align-items: center;
	gap: var(--sc-space-4);
	/* The badge just catches the photo's edge; the title beside it sits clear
	   of the photo, level with the badge's centre, as in the design. */
	margin-top: calc(var(--sc-icon-size, 52px) * -0.15);
	margin-bottom: var(--sc-space-2);
}

.sc-card--overlap .sc-icon-badge {
	box-shadow: 0 0 0 4px var(--sc-surface);
}

.sc-card--overlap .sc-card__title {
	margin-top: 6px;
}

/* The copy lines up under the title rather than under the badge. */
.sc-card--overlap .sc-card__text {
	margin: 0;
	padding-left: calc(var(--sc-icon-size, 52px) + var(--sc-space-4));
}

@media (max-width: 480px) {
	.sc-card--overlap .sc-card__head {
		gap: var(--sc-space-3);
	}

	.sc-card--overlap .sc-card__text {
		padding-left: calc(var(--sc-icon-size, 52px) + var(--sc-space-3));
	}
}

/* --------------------------------------------------------------------------
   Steps

   A numbered process laid out across a row, with a marker between each pair.
   Stacks on small screens, where the markers turn vertical.
   -------------------------------------------------------------------------- */

.sc-steps {
	display: grid;
	grid-template-columns: repeat(var(--sc-steps-cols, 4), minmax(0, 1fr));
	gap: var(--sc-grid-gap);
	align-items: start;
}

.sc-steps--boxed {
	padding: clamp(20px, 12.8px + 1.8vw, 36px);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
}

.sc-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* A fixed first row keeps the copy aligned across steps even when one
	   title wraps to two lines. */
	grid-template-rows: minmax(var(--sc-step-size, 44px), auto) auto;
	gap: var(--sc-space-2) var(--sc-space-4);
	min-width: 0;
}

.sc-step__number {
	display: grid;
	place-items: center;
	grid-row: 1;
	width: var(--sc-step-size, 44px);
	height: var(--sc-step-size, 44px);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-step-bg, var(--sc-green-900));
	color: var(--sc-step-color, #fff);
	font-size: var(--sc-fs-h3);
	font-weight: 700;
	line-height: 1;
}

.sc-step__title {
	grid-row: 1;
	align-self: center;
	color: var(--sc-title-color, var(--sc-green-900));
	font-size: var(--sc-title-size, var(--sc-fs-sm));
	font-weight: var(--sc-title-weight, 700);
	line-height: 1.25;
	text-wrap: balance;
}

.sc-step__icon {
	grid-row: 2;
	display: grid;
	place-items: center;
	width: var(--sc-step-size, 44px);
	color: var(--sc-step-bg, var(--sc-green-900));
}

.sc-step__icon svg {
	width: 34px;
	height: 34px;
}

.sc-step__text {
	grid-row: 2;
	color: var(--sc-text-color, var(--sc-body));
	font-size: var(--sc-text-size, var(--sc-fs-xs));
	line-height: var(--sc-line-height, 1.5);
}

/* The marker sits in the gap between two steps. */
.sc-step + .sc-step::before {
	content: "";
	position: absolute;
	top: calc(var(--sc-step-size, 44px) + 12px);
	left: calc(var(--sc-grid-gap) / -2 - 6px);
	width: 12px;
	height: 12px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-gold-500);
	box-shadow: 0 0 0 3px var(--sc-surface);
}

@media (max-width: 991px) {
	.sc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.sc-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sc-space-8);
	}

	/* Stacked, the marker belongs above each step rather than beside it. */
	.sc-step + .sc-step::before {
		top: calc(var(--sc-space-8) / -2 - 6px);
		left: calc(var(--sc-step-size, 44px) / 2 - 6px);
	}
}

/* --------------------------------------------------------------------------
   Horizontal card

   Photo on the left, icon straddling its right edge, copy on the right. Used
   by "Who It's For", "Perfect For", "Great For", "Who This Helps" and
   "Popular Store Highlights" — six of the eight page designs.
   -------------------------------------------------------------------------- */

.sc-card--horizontal {
	--sc-card-bg: var(--sc-surface);

	flex-direction: row;
	align-items: stretch;
	box-shadow: var(--sc-shadow-card);
}

.sc-card--horizontal .sc-card__media {
	/* About half the card, as in every photo-left row of the design. */
	flex: 0 0 var(--sc-media-width, 48%);
	border-radius: var(--sc-card-radius, var(--sc-radius-lg)) 0 0
		var(--sc-card-radius, var(--sc-radius-lg));
}

/* The photo fills its column rather than keeping a fixed ratio, so both
   sides of the card end level however long the copy runs. */
/* The photo is taken out of flow so the card's height comes from its copy and
   the picture fills whatever that turns out to be. In flow it could not: the
   image asked for 100% of a box whose own height it was the only thing
   setting, and a cycle like that resolves to whatever the browser guesses —
   on the live site, a 1500px-tall sliver. */
.sc-card--horizontal .sc-card__media {
	min-height: var(--sc-media-min, 150px);
}

.sc-card--horizontal .sc-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
}

.sc-card--horizontal .sc-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sc-space-2);
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sc-card-padding, var(--sc-space-5));
}

.sc-card--horizontal .sc-card__head {
	display: flex;
	align-items: center;
	gap: var(--sc-space-3);
}

/* Pulls the badge back over the seam between photo and copy. Applied to the
   badge itself, so a card without one keeps its copy inside the card instead
   of dragging the title over the photo. */
.sc-card--horizontal .sc-icon-badge {
	margin-left: calc(var(--sc-icon-size, 52px) / -2 - var(--sc-space-5));
	box-shadow: 0 0 0 4px var(--sc-surface);
}

@media (max-width: 640px) {
	.sc-card--horizontal {
		flex-direction: column;
	}

	.sc-card--horizontal .sc-card__media {
		flex: none;
		border-radius: var(--sc-card-radius, var(--sc-radius-lg))
			var(--sc-card-radius, var(--sc-radius-lg)) 0 0;
	}

	.sc-card--horizontal .sc-card__media {
		min-height: 0;
	}

	.sc-card--horizontal .sc-card__media img {
		position: static;
		height: auto;
		aspect-ratio: var(--sc-media-ratio, 2 / 1);
	}

	.sc-card--horizontal .sc-icon-badge {
		margin-left: 0;
		margin-top: calc(var(--sc-icon-size, 52px) / -2 - var(--sc-space-5));
	}
}

/* --------------------------------------------------------------------------
   Commerce bits — price and add-to-cart, for WooCommerce-backed cards
   -------------------------------------------------------------------------- */

.sc-card__price {
	color: var(--sc-green-900);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
}

.sc-card__price del {
	margin-right: 6px;
	color: var(--sc-muted);
	font-weight: 500;
}

.sc-card__price ins {
	text-decoration: none;
}

.sc-card__action {
	position: relative;
	z-index: 1;
	margin-top: var(--sc-space-3);
}

/* WooCommerce's own loop button, restyled to match rather than replaced, so
   its AJAX add-to-cart behaviour keeps working. */
.sc-card__action .button {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-2);
	padding: 9.6px 17.6px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.sc-card__action .button:hover {
	background: var(--sc-green-700);
	color: var(--sc-on-dark);
}

.sc-card__action .added_to_cart {
	display: inline-block;
	margin-left: var(--sc-space-3);
	color: var(--sc-teal-600);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Steps — variants used across the page set
   -------------------------------------------------------------------------- */

/* Each step in its own frame, rather than one frame around the row. */
.sc-steps--cards .sc-step {
	padding: var(--sc-space-5);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-surface);
}

/* A photo instead of an icon, with the number over its corner. */
.sc-step__media {
	grid-column: 1 / -1;
	grid-row: 1;
	position: relative;
	overflow: hidden;
	border-radius: var(--sc-radius-md);
}

.sc-step__media img {
	width: 100%;
	aspect-ratio: var(--sc-media-ratio, 16 / 10);
	object-fit: cover;
}

.sc-step--media {
	grid-template-rows: auto auto auto;
}

.sc-step--media .sc-step__number {
	position: absolute;
	top: var(--sc-space-3);
	left: var(--sc-space-3);
	z-index: 1;
	width: 28px;
	height: 28px;
	font-size: var(--sc-fs-xs);
}

.sc-step--media .sc-step__title {
	grid-column: 1 / -1;
	grid-row: 2;
}

.sc-step--media .sc-step__text {
	grid-column: 1 / -1;
	grid-row: 3;
}

/* Connector styles. */
.sc-steps--plain .sc-step + .sc-step::before {
	display: none;
}

.sc-steps--chevron .sc-step + .sc-step::before {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sc-line);
	content: "›";
	font-size: 30px;
	line-height: 1;
	left: calc(var(--sc-grid-gap) / -2 - 5px);
}

.sc-steps--arrow .sc-step + .sc-step::before {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sc-gold-500);
	content: "▶";
	font-size: 12px;
	line-height: 1;
	left: calc(var(--sc-grid-gap) / -2 - 6px);
}

/* Shown only to someone who can edit the page, when a store-backed row has
   nothing to render. Visitors never see it. */
.sc-editor-note {
	padding: 14px 18px;
	border: 1px dashed var(--sc-line);
	border-radius: var(--sc-radius-md);
	background: var(--sc-cream);
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
}

/* Badge on the photo's bottom edge instead of its top corner, with the title
   on its own line below — the Shop page's category cards. */
.sc-card--badge-bottom .sc-card__media .sc-icon-badge {
	top: auto;
	bottom: calc(var(--sc-icon-size, 52px) / -2);
	overflow: visible;
}

.sc-card--badge-bottom .sc-card__media {
	overflow: visible;
}

.sc-card--badge-bottom .sc-card__media img {
	border-radius: var(--sc-card-radius, var(--sc-radius-lg))
		var(--sc-card-radius, var(--sc-radius-lg)) 0 0;
}

.sc-card--badge-bottom .sc-card__body {
	padding-top: calc(var(--sc-icon-size, 52px) / 2 + var(--sc-space-4));
}

/* The card itself must not clip the badge hanging off the photo. */
.sc-card--stacked.sc-card--badge-bottom {
	overflow: visible;
}

/* --------------------------------------------------------------------------
   Plan cards — the Membership Options row

   A plan is a card plus a feature list and an optional highlight, so it gets
   its own element rather than bending the card grid around a checklist.
   -------------------------------------------------------------------------- */

.sc-plans {
	display: grid;
	grid-template-columns: repeat(var(--sc-plans-cols, 2), minmax(0, 1fr));
	gap: var(--sc-grid-gap);
}

.sc-plan {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-4);
	overflow: hidden;
	padding: var(--sc-card-padding, var(--sc-space-6));
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-card-radius, var(--sc-radius-lg));
	background: var(--sc-surface);
}

/* The plan's photo fills the right-hand half and fades into the card at its
   left edge, so it reads as a picture rather than a wash behind the words.
   The copy keeps to the left. */
.sc-plan__media {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 52%;
}

.sc-plan__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-plan__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--sc-surface) 0%,
		rgb(255 255 255 / 75%) 22%,
		rgb(255 255 255 / 0%) 62%
	);
}

.sc-plan:has(.sc-plan__media) {
	min-height: 300px;
}

.sc-plan:has(.sc-plan__media) > .sc-plan__head,
.sc-plan:has(.sc-plan__media) > .sc-plan__features,
.sc-plan:has(.sc-plan__media) > .sc-plan__cta {
	max-width: 60%;
}

/* One column is too narrow to share: the photo goes behind the whole card
   again, washed out far enough for the copy to stay readable. */
@media (max-width: 767px) {
	.sc-plan__media {
		inset: 0;
		width: auto;
	}

	.sc-plan__media::after {
		background: linear-gradient(
			90deg,
			var(--sc-surface) 0%,
			rgb(255 255 255 / 94%) 55%,
			rgb(255 255 255 / 80%) 100%
		);
	}

	.sc-plan:has(.sc-plan__media) {
		min-height: 0;
	}

	.sc-plan:has(.sc-plan__media) > .sc-plan__head,
	.sc-plan:has(.sc-plan__media) > .sc-plan__features,
	.sc-plan:has(.sc-plan__media) > .sc-plan__cta {
		max-width: none;
	}
}

.sc-plan--featured {
	border-color: var(--sc-gold-500);
	box-shadow: 0 2px 4px rgb(20 40 30 / 6%), 0 14px 32px rgb(20 40 30 / 10%);
}

.sc-plan__flag {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 14px;
	border-bottom-left-radius: var(--sc-radius-md);
	background: var(--sc-gold-500);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 700;
}

.sc-plan__head {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-4);
}

.sc-plan__head .sc-icon-badge {
	flex: none;
}

.sc-plan__intro {
	min-width: 0;
}

.sc-plan__intro .sc-plan__text {
	margin-top: var(--sc-space-2);
}

.sc-plan__title {
	color: var(--sc-title-color, var(--sc-green-900));
	font-size: var(--sc-title-size, var(--sc-fs-h3));
	font-weight: var(--sc-title-weight, 700);
}

.sc-plan__price {
	display: block;
	margin-top: 2px;
	color: var(--sc-green-900);
	font-size: var(--sc-fs-h2);
	font-weight: 800;
	line-height: 1.1;
}

.sc-plan__text {
	color: var(--sc-text-color, var(--sc-body));
	font-size: var(--sc-text-size, var(--sc-fs-sm));
	line-height: var(--sc-line-height, 1.5);
}

.sc-plan__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-3);
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	line-height: 1.5;
}

.sc-plan__features li + li {
	margin-top: var(--sc-space-2);
}

.sc-plan__features svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 2px;
	color: var(--sc-teal-600);
}

.sc-plan__cta {
	margin-top: auto;
	padding-top: var(--sc-space-2);
}

@media (max-width: 767px) {
	.sc-plans {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Dashed run between steps, as on Marketplace and Roadside Support. */
.sc-steps--dashed .sc-step + .sc-step::before {
	width: calc(var(--sc-grid-gap) - 10px);
	height: 0;
	border-top: 1.5px dashed var(--sc-green-900);
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 0.7;
	left: calc(var(--sc-grid-gap) * -1 + 4px);
}

.sc-steps--dashed .sc-step + .sc-step::after {
	content: "";
	position: absolute;
	top: calc(var(--sc-step-size, 44px) / 2);
	left: -7px;
	width: 0;
	height: 0;
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	border-left: 5px solid var(--sc-green-900);
	opacity: 0.7;
	transform: translateY(-50%);
}

/* A photo step has no number beside the copy, so the run lines up with the
   middle of the picture instead. */
.sc-step--media + .sc-step--media::before,
.sc-step--media + .sc-step--media::after {
	top: 32%;
}

@media (max-width: 991px) {
	.sc-step--media + .sc-step--media::before,
	.sc-step--media + .sc-step--media::after {
		top: calc(var(--sc-space-8) / -2 - 6px);
	}
}

/* Centred steps — icon over the copy rather than beside it, as on RV Delivery.
   The number keeps its corner so the sequence still reads left to right. */
.sc-steps--center .sc-step {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	justify-items: center;
	padding-top: var(--sc-space-7);
	text-align: center;
}

.sc-steps--center .sc-step__number {
	position: absolute;
	grid-area: auto;
	top: var(--sc-space-5);
	left: var(--sc-space-5);
}

.sc-steps--center.sc-steps--cards .sc-step {
	padding-top: calc(var(--sc-space-5) + var(--sc-step-size, 44px) + var(--sc-space-2));
}

.sc-steps--center .sc-step__icon {
	grid-column: 1;
	grid-row: 1;
	width: auto;
}

.sc-steps--center .sc-step__title {
	grid-column: 1;
	grid-row: 2;
}

.sc-steps--center .sc-step__text {
	grid-column: 1;
	grid-row: 3;
}

.sc-steps--center .sc-step__icon svg {
	width: 38px;
	height: 38px;
}

/* Stacked, the marker belongs above the next step. The left-aligned rule
   lines it up with the number column, which a centred step does not have. */
@media (max-width: 991px) {
	.sc-steps--center .sc-step + .sc-step::before {
		left: calc(50% - 8px);
	}
}

@media (max-width: 767px) {
	.sc-steps--dashed .sc-step + .sc-step::before,
	.sc-steps--dashed .sc-step + .sc-step::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Note — a quiet small-print strip. Used on its own and by the booking
   results, so it lives with the components rather than a page section.
   -------------------------------------------------------------------------- */

.sc-note {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-4);
	padding: var(--sc-space-5) var(--sc-space-6);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-cream);
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	line-height: 1.55;
}

.sc-note svg {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--sc-green-900);
}

/* --------------------------------------------------------------------------
   Card extras — a label above the title and a row of facts with icons
   -------------------------------------------------------------------------- */

.sc-card__kicker {
	color: var(--sc-teal-600);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2) var(--sc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
}

.sc-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.sc-card__meta svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--sc-green-900);
}

.sc-card__amount {
	color: var(--sc-green-900);
	font-size: var(--sc-fs-h3);
	font-weight: 800;
}

.sc-card__unit {
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

/* Once dates are chosen: what the trip costs, under the nightly rate. */
.sc-card__stay {
	display: block;
	margin-top: 4px;
	color: var(--sc-ink);
	font-size: var(--sc-fs-xs);
	font-weight: 600;
}

/* A refundable deposit is not part of what the stay costs, so it sits under
   the price rather than inside it. */
.sc-card__deposit {
	display: block;
	margin-top: 2px;
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Booking results — RV Rental Booking's results, drawn as our cards

   Rendered through a theme override on a page that is otherwise the theme's,
   so the wrapper borrows the .sc-page scope without its page backdrop.
   -------------------------------------------------------------------------- */

.sc-booking-results {
	overflow: visible;
	margin-bottom: var(--sc-space-8);
	background: transparent;
}

.sc-booking-results__count {
	margin: 0 0 var(--sc-space-5);
	color: var(--sc-green-900);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
}

.sc-booking-results .sc-card--stacked {
	box-shadow: var(--sc-shadow-card);
}

.sc-booking-results .sc-card--stacked .sc-card__body {
	flex: 1 1 auto;
}

/* Price and button sit on the card's floor, so a row of cards lines up
   however long each name runs. */
.sc-booking-results .sc-card__price {
	margin-top: auto;
	padding-top: var(--sc-space-3);
	border-top: 1px solid var(--sc-line-soft);
}

.sc-booking-results .sc-card__action .sc-btn {
	width: 100%;
	justify-content: center;
}

.sc-booking-results__empty {
	max-width: 640px;
	font-size: var(--sc-fs-sm);
}

.sc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2);
	margin-top: var(--sc-space-8);
}

.sc-pagination__page {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-surface);
	color: var(--sc-green-900);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease);
}

.sc-pagination__page:hover,
.sc-pagination__page.is-current {
	border-color: var(--sc-green-900);
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
}

/* --------------------------------------------------------------------------
   Price breakdown — an RV's page

   RV Rental Booking loads this into its booking form. Same terms as the
   results card: the trip total, then the refundable deposit, then what
   checkout charges.
   -------------------------------------------------------------------------- */

.sc-quote {
	overflow: visible;
	margin: 0 0 var(--sc-space-5);
	padding: var(--sc-space-5);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-cream);
}

.sc-quote dl {
	margin: 0;
}

.sc-quote__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sc-space-4);
	padding: 6px 0;
	font-size: var(--sc-fs-sm);
}

.sc-quote__line dt,
.sc-quote__line dd {
	margin: 0;
	color: var(--sc-body);
	font-weight: 500;
}

.sc-quote__line dd {
	flex: none;
	color: var(--sc-ink);
	text-align: right;
}

.sc-quote__line small {
	display: block;
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

.sc-quote__summary {
	margin-top: var(--sc-space-2);
	padding-top: var(--sc-space-2);
	border-top: 1px solid var(--sc-line);
}

.sc-quote__trip dt,
.sc-quote__trip dd {
	color: var(--sc-green-900);
	font-weight: 700;
}

.sc-quote__deposit {
	padding-bottom: var(--sc-space-3);
}

.sc-quote__due {
	margin-top: var(--sc-space-1);
	padding-top: var(--sc-space-3);
	border-top: 1px dashed var(--sc-line);
}

.sc-quote__due dt,
.sc-quote__due dd {
	color: var(--sc-green-900);
	font-size: var(--sc-fs-h3);
	font-weight: 800;
}

/* With no deposit the closing total follows the lines directly. */
.sc-quote__summary > .sc-quote__due:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* --------------------------------------------------------------------------
   Book button — an RV's page

   RV Rental Booking's submit button, restyled as our primary button. Only its
   look changes; it is still WooCommerce's add-to-cart button underneath.

   The theme paints every WooCommerce "alt" button yellow with !important
   (styles.css, `.woocommerce button.button.alt`), so matching it needs
   !important too. The selector is deliberately longer than the theme's, and
   narrow enough that it only ever reaches this one button.
   -------------------------------------------------------------------------- */

form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt {
	display: flex !important;
	float: none !important;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-2);
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 14px 24px !important;
	border: 0 !important;
	border-radius: var(--sc-radius-sm) !important;
	background: var(--sc-green-900) !important;
	box-shadow: none;
	color: var(--sc-on-dark) !important;
	font-family: var(--sc-font);
	font-size: var(--sc-fs-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	line-height: 1.2 !important;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--sc-dur) var(--sc-ease),
		transform var(--sc-dur) var(--sc-ease);
}

form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt:hover,
form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt:focus-visible {
	background: var(--sc-green-700) !important;
	color: var(--sc-on-dark) !important;
	transform: translateY(-1px);
}

form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt:active {
	transform: translateY(0);
}

form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt:focus-visible {
	outline: 2px solid var(--sc-green-900);
	outline-offset: 3px;
}

/* WooCommerce's own busy and disabled states stay readable. */
form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt:disabled,
form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt.disabled {
	background: var(--sc-line) !important;
	color: var(--sc-muted) !important;
	cursor: not-allowed;
	transform: none;
}

form.rvrb-booking-form.cart button.single_add_to_cart_button.rvrb-button--book.alt.loading {
	opacity: 0.75;
}

/* The theme colours every WooCommerce price near-black (styles.css,
   `span.amount`). Inside our cards and breakdown, a price takes the colour of
   the line it sits on. */
.sc-card__price .amount,
.sc-quote .amount {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Step connectors — one height for every marker

   Each connector style used to work out its own height, so a dashed line and
   its arrowhead could land 30px apart, and markers between framed cards sat
   near the top instead of mid-card. Every marker now reads one value:

     boxed cards   the middle of the card
     photo steps   the middle of the photo
     otherwise     level with the step's icon, as before

   Only for the row layout; stacked on smaller screens the markers sit above
   each step as before.
   -------------------------------------------------------------------------- */

.sc-steps {
	--sc-conn-y: calc(var(--sc-step-size, 44px) + 18px);
}

/* Boxed cards match in height, so a row of them lines up top and bottom. */
.sc-steps--cards {
	--sc-conn-y: 50%;

	align-items: stretch;
}

@media (min-width: 992px) {
	/* A photo step measures itself, so the marker can find mid-photo. */
	.sc-steps .sc-step--media {
		container-type: inline-size;
	}

	.sc-steps .sc-step--media + .sc-step--media {
		--sc-conn-y: calc(100cqw / (var(--sc-media-ratio, 16 / 10)) / 2);
	}

	.sc-steps:not(.sc-steps--plain) .sc-step + .sc-step::before,
	.sc-steps.sc-steps--dashed .sc-step + .sc-step::after {
		top: var(--sc-conn-y);
		transform: translateY(-50%);
	}
}

/* The design's marker between steps sharing one frame: a small dot in a
   light ring, with a hairline either side, filling the gap. It takes the
   colour of the step it leads to. Row layout only; stacked, the plain dot
   stays. */
.sc-steps--dot:not(.sc-steps--cards) {
	--sc-conn-y: calc(var(--sc-step-size, 44px) + 2px);
}

@media (min-width: 992px) {
	.sc-steps.sc-steps--dot .sc-step + .sc-step::before {
		--sc-conn-color: var(--sc-step-bg, var(--sc-green-900));

		left: calc(var(--sc-grid-gap) * -1 + 6px);
		width: calc(var(--sc-grid-gap) - 12px);
		height: 16px;
		border-radius: 0;
		background:
			radial-gradient(
				circle,
				color-mix(in srgb, var(--sc-conn-color) 70%, #fff) 0 3.5px,
				var(--sc-surface) 4px 5.5px,
				color-mix(in srgb, var(--sc-conn-color) 25%, #fff) 6px 7.5px,
				transparent 8px
			) center / 16px 16px no-repeat,
			linear-gradient(var(--sc-line), var(--sc-line)) center / 100% 1px no-repeat;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   Card rows — options for the later pages
   -------------------------------------------------------------------------- */

/* Desktop carousel: this many cards in view, the rest a scroll away. */
.sc-cardgrid--scroller > * {
	flex: 0 0 calc((100% - var(--sc-grid-gap) * (var(--sc-slides-d, 4) - 1)) / var(--sc-slides-d, 4));
	min-width: 0;
}

@media (max-width: 991px) {
	.sc-cardgrid--scroller > * {
		flex-basis: calc((100% - var(--sc-grid-gap) * (var(--sc-slides-t, 2.2) - 1)) / var(--sc-slides-t, 2.2));
	}
}

@media (max-width: 640px) {
	.sc-cardgrid--scroller > * {
		flex-basis: calc((100% - var(--sc-grid-gap) * (var(--sc-slides-m, 1.15) - 1)) / var(--sc-slides-m, 1.15));
	}
}

/* Previous / next, just outside the row's edges. Phones swipe instead. */
.sc-carousel {
	position: relative;
}

.sc-arrow {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-surface);
	box-shadow: 0 6px 16px rgb(20 40 30 / 12%);
	color: var(--sc-green-900);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity var(--sc-dur) var(--sc-ease), background-color var(--sc-dur) var(--sc-ease);
}

.sc-arrow:hover {
	background: var(--sc-cream);
}

.sc-arrow:disabled {
	/* Solid, so a card never shows through it; only the chevron fades. */
	color: var(--sc-line);
	box-shadow: none;
	cursor: default;
}

.sc-arrow svg {
	width: 20px;
	height: 20px;
}

/* Outside the cards where there is room, as in the design; never past the
   window's edge. The row lets them hang out (see below). */
.sc-arrow--prev {
	left: max(-60px, calc((100% - 100vw) / 2 + 8px));
}

.sc-arrow--prev svg {
	transform: rotate(180deg);
}

.sc-arrow--next {
	right: max(-60px, calc((100% - 100vw) / 2 + 8px));
}

/* The theme clips every row (.vc_row { overflow: hidden }), which would
   cut the arrows off. The scroller clips its own cards. */
.vc_row:has(.sc-carousel),
.vc_row:has(.sc-carousel) .wpb_column,
.vc_row:has(.sc-carousel) .vc_column-inner,
.vc_row:has(.sc-carousel) .wpb_wrapper {
	overflow: visible;
}

@media (max-width: 991px) {
	.sc-arrow {
		display: none;
	}
}

/* One white panel around the row; the cards inside go frameless. */
.sc-cardgrid-block--panel > .sc-cardgrid,
.sc-cardgrid-block--panel > .sc-carousel > .sc-cardgrid {
	padding: 18px;
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
	box-shadow: 0 12px 32px rgb(20 40 30 / 9%);
}

.sc-cardgrid-block--panel .sc-card {
	background: transparent;
	box-shadow: none;
}

.sc-cardgrid-block--panel .sc-card--hover:hover {
	box-shadow: none;
	transform: none;
}

.sc-cardgrid-block--panel .sc-card--stacked {
	overflow: visible;
}

.sc-cardgrid-block--panel .sc-card--stacked .sc-card__media {
	border-radius: var(--sc-radius-md);
}

.sc-cardgrid-block--panel .sc-card--stacked .sc-card__body {
	padding-inline: 4px;
}

/* Pulled up over the section above. The row it sits in has to let it out. */
.sc-cardgrid-block--raised {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--sc-raise, 0px) * -1);
}

.vc_row:has(.sc-cardgrid-block--raised),
.wpb_row:has(.sc-cardgrid-block--raised) {
	overflow: visible;
}

/* A button under the row. */
.sc-cardgrid__more {
	display: flex;
	justify-content: center;
	margin-top: var(--sc-space-6);
}

/* --- Text over the photo ------------------------------------------------- */

.sc-card--cover {
	--sc-title-color: #fff;

	position: relative;
	justify-content: flex-end;
	aspect-ratio: var(--sc-media-ratio, 3 / 2);
	overflow: hidden;
	/* Until a photo is picked: a deep green with the site's topo texture, so
	   the card still reads as designed rather than as a blank box. */
	background:
		url("../img/topo.svg") center / 420px auto,
		linear-gradient(160deg, var(--sc-green-700), var(--sc-green-900));
	box-shadow: var(--sc-shadow-card);
	color: #fff;
}

.sc-card--cover .sc-card__media {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sc-card--cover .sc-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* The photo stays bright; only its foot darkens, enough for the copy. */
.sc-card--cover .sc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(10 25 18 / 0%) 45%,
		rgb(10 25 18 / 38%) 68%,
		rgb(10 25 18 / 72%) 100%
	);
}

/* Top left, ringed in white — on the photo, or on the card without one. */
.sc-card--cover .sc-card__media .sc-icon-badge,
.sc-card--cover > .sc-icon-badge {
	--sc-icon-size: 50px;

	position: absolute;
	top: var(--sc-space-4);
	left: var(--sc-space-4);
	z-index: 1;
	border: 2px solid rgb(255 255 255 / 92%);
	box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}

.sc-card--cover .sc-icon-badge svg {
	width: 24px;
	height: 24px;
}

.sc-card--cover .sc-card__body {
	position: relative;
	z-index: 1;
	gap: var(--sc-space-1);
	padding: var(--sc-space-4) var(--sc-space-5) var(--sc-space-5);
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.sc-card--cover .sc-card__title,
.sc-card--cover .sc-card__title a {
	color: #fff;
}

.sc-card--cover .sc-card__text {
	color: rgb(255 255 255 / 92%);
	font-size: var(--sc-fs-xs);
	line-height: 1.45;
}

/* --- Photo on the right, framed ------------------------------------------ */

.sc-card--media-right {
	flex-direction: row-reverse;
	align-items: stretch;
	gap: var(--sc-space-3);
	padding: 14px;
}

.sc-card--horizontal.sc-card--media-right .sc-card__media {
	flex-basis: var(--sc-media-width, 46%);
	border-radius: var(--sc-radius-md);
}

.sc-card--media-right .sc-card__body {
	padding: 6px 4px 6px 8px;
	justify-content: center;
}

.sc-card--media-right .sc-card__head {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-4);
}

/* Nothing to straddle: the badge sits in the copy. */
.sc-card--horizontal.sc-card--media-right .sc-icon-badge {
	margin-left: 0;
	box-shadow: none;
}

@media (max-width: 640px) {
	.sc-card--media-right {
		flex-direction: column-reverse;
	}
}

/* --------------------------------------------------------------------------
   Plans — framed photo

   The photo in its own rounded frame beside the copy (Loyalty, Non-Profit),
   rather than faded behind it.
   -------------------------------------------------------------------------- */

.sc-plans--framed .sc-plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42%;
	align-content: start;
	column-gap: var(--sc-space-5);
	row-gap: var(--sc-space-4);
	min-height: 0;
}

.sc-plans--framed .sc-plan > *,
.sc-plans--framed .sc-plan:has(.sc-plan__media) > * {
	grid-column: 1;
	max-width: none;
}

.sc-plans--framed .sc-plan > .sc-plan__media {
	position: relative;
	inset: auto;
	z-index: auto;
	grid-column: 2;
	grid-row: 1 / span 6;
	width: auto;
	min-height: 170px;
	overflow: hidden;
	border-radius: var(--sc-radius-md);
}

.sc-plans--framed .sc-plan__media img {
	position: absolute;
	inset: 0;
}

.sc-plans--framed .sc-plan__media::after {
	display: none;
}

.sc-plans--framed.sc-plans--photo-left .sc-plan {
	grid-template-columns: 42% minmax(0, 1fr);
}

.sc-plans--framed.sc-plans--photo-left .sc-plan > *,
.sc-plans--framed.sc-plans--photo-left .sc-plan:has(.sc-plan__media) > * {
	grid-column: 2;
}

.sc-plans--framed.sc-plans--photo-left .sc-plan > .sc-plan__media {
	grid-column: 1;
}

@media (max-width: 640px) {
	.sc-plans--framed .sc-plan,
	.sc-plans--framed.sc-plans--photo-left .sc-plan {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-plans--framed .sc-plan > *,
	.sc-plans--framed .sc-plan:has(.sc-plan__media) > *,
	.sc-plans--framed.sc-plans--photo-left .sc-plan > *,
	.sc-plans--framed.sc-plans--photo-left .sc-plan:has(.sc-plan__media) > * {
		grid-column: 1;
	}

	.sc-plans--framed .sc-plan > .sc-plan__media,
	.sc-plans--framed.sc-plans--photo-left .sc-plan > .sc-plan__media {
		grid-column: 1;
		grid-row: 1;
		min-height: 180px;
	}
}

/* --------------------------------------------------------------------------
   Plans — pricing

   Name, a line on who it suits, the price, the ticked list, and a full-width
   button on the card's floor. The highlighted plan stands a little taller
   with a gold tab; a "Custom" card is centred with a text link.
   -------------------------------------------------------------------------- */

.sc-plans--pricing {
	align-items: stretch;
}

.sc-plan--price {
	gap: var(--sc-space-2);
	background: var(--sc-cream);
	border-color: var(--sc-line);
}

.sc-plan--price .sc-plan__title {
	font-size: var(--sc-title-size, 24px);
}

.sc-plan--price .sc-plan__text {
	margin: 0;
}

.sc-plan__price {
	margin: var(--sc-space-2) 0 var(--sc-space-2);
	color: var(--sc-green-900);
	line-height: 1;
}

.sc-plan__amount {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sc-plan__per {
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

.sc-plan--price .sc-plan__features {
	margin-bottom: var(--sc-space-4);
}

.sc-plan--price .sc-plan__cta {
	margin-top: auto;
}

.sc-plan--price .sc-plan__cta .sc-btn {
	display: flex;
	width: 100%;
}

.sc-plan--price.sc-plan--featured {
	padding-top: calc(var(--sc-card-padding, var(--sc-space-6)) + 30px);
	border-color: var(--sc-gold-500);
	background: var(--sc-surface);
	transform: translateY(-12px);
}

.sc-plans--pricing .sc-plan__flag {
	right: 0;
	left: 0;
	padding: 7px 14px;
	border-radius: 0;
	text-align: center;
}

/* The centred Custom card. */
.sc-plan--simple {
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--sc-surface);
}

.sc-plan--simple .sc-icon-badge {
	--sc-icon-size: 64px;

	margin-bottom: var(--sc-space-3);
}

.sc-plan--simple .sc-plan__cta {
	margin-top: var(--sc-space-3);
}

.sc-plan__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-2);
	color: var(--sc-green-900);
	font-weight: 700;
}

.sc-plan__link svg {
	width: 18px;
	height: 18px;
	transition: transform var(--sc-dur) var(--sc-ease);
}

.sc-plan__link:hover svg {
	transform: translateX(3px);
}

@media (max-width: 991px) {
	.sc-plans--pricing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-plan--price.sc-plan--featured {
		transform: none;
	}
}

@media (max-width: 640px) {
	.sc-plans--pricing {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Steps — icon in a filled circle (Loyalty)

   The markup is the usual number, title, icon, text; this only moves them:
   the icon to a circle on the left, the number small and gold above the
   title. The step colour setting still colours the number.
   -------------------------------------------------------------------------- */

.sc-steps--badge .sc-step {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-items: start;
	column-gap: var(--sc-space-4);
	row-gap: 6px;
}

.sc-steps--badge .sc-step__icon {
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: center;
	width: 60px;
	height: 60px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-green-900);
	color: #fff;
}

.sc-steps--badge .sc-step__icon svg {
	width: 28px;
	height: 28px;
}

.sc-steps--badge .sc-step__number {
	grid-column: 2;
	grid-row: 1;
	width: 26px;
	height: 26px;
	background: var(--sc-step-bg, var(--sc-gold-500));
	font-size: 13px;
}

.sc-steps--badge .sc-step__title {
	grid-column: 2;
	grid-row: 2;
}

.sc-steps--badge .sc-step__text {
	grid-column: 2;
	grid-row: 3;
}

/* --------------------------------------------------------------------------
   Steps — centred, without card frames (Non-Profit)

   The number stays in the column, centred above the icon, and the markers
   between steps meet it at its middle.
   -------------------------------------------------------------------------- */

.sc-steps--center:not(.sc-steps--cards) {
	--sc-conn-y: calc(var(--sc-step-size, 44px) / 2);
}

.sc-steps--center:not(.sc-steps--cards) .sc-step {
	grid-template-rows: auto auto auto auto;
	padding-top: 0;
}

.sc-steps--center:not(.sc-steps--cards) .sc-step__number {
	position: static;
	grid-row: 1;
	justify-self: center;
}

.sc-steps--center:not(.sc-steps--cards) .sc-step__icon {
	grid-row: 2;
	margin-top: var(--sc-space-3);
}

.sc-steps--center:not(.sc-steps--cards) .sc-step__title {
	grid-row: 3;
}

.sc-steps--center:not(.sc-steps--cards) .sc-step__text {
	grid-row: 4;
}

/* --------------------------------------------------------------------------
   Steps and plans honour the Spacing tab

   Both elements offer top and bottom spacing in the editor; nothing read it.
   Zero by default, so existing pages keep their rhythm.
   -------------------------------------------------------------------------- */

.sc-steps-block,
.sc-plans-block {
	padding-top: var(--sc-pad-top, 0);
	padding-bottom: var(--sc-pad-bottom, 0);
}

/* --------------------------------------------------------------------------
   Framed plans in narrow cards

   Three to a row (Non-Profit), the copy beside the photo gets tight: the
   type steps down a size so the lists read in lines, not single words.
   -------------------------------------------------------------------------- */

.sc-plans--framed .sc-plan {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.sc-plans--framed .sc-plan__title {
		font-size: var(--sc-fs-h4);
	}

	.sc-plans--framed .sc-plan__features {
		font-size: 13px;
	}

	.sc-plans--framed .sc-plan__head {
		gap: var(--sc-space-3);
	}

	.sc-plans--framed .sc-plan__head .sc-icon-badge {
		--sc-icon-size: 40px;
	}
}

/* The featured plan's gold button is the size of its neighbours', not the
   CTA band's large one. */
.sc-plan .sc-btn--gold {
	padding: 11.52px 21.6px;
	font-size: var(--sc-fs-sm);
}

/* --------------------------------------------------------------------------
   Text over the photo: a smaller title, and room for two lines of it
   -------------------------------------------------------------------------- */

.sc-card--cover .sc-card__title {
	font-size: var(--sc-title-size, 18px);
	font-weight: 700;
	line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Compact horizontal cards — Recent Issue Previews

   Four to a row, so the photo takes a little under half and the copy steps
   down a size. The link keeps its arrow on its line.
   -------------------------------------------------------------------------- */

.sc-cardgrid-block--compact .sc-card--horizontal {
	--sc-media-width: 42%;
	--sc-media-min: 130px;
}

.sc-cardgrid-block--compact .sc-card--horizontal .sc-card__body {
	padding: var(--sc-space-4);
	gap: var(--sc-space-2);
}

.sc-cardgrid-block--compact .sc-card--horizontal .sc-card__text {
	font-size: 13px;
	line-height: 1.45;
}

.sc-card__cta {
	white-space: nowrap;
}