/**
 * FunkyPrints design tokens + utility layer.
 *
 * Tokens are the source of truth for hand-written CSS. Elementor widgets
 * should use Elementor > Site Settings globals, which carry the same values.
 *
 * Base element rules use plain element selectors: same specificity as
 * Hello's reset.css, and this file loads after it, so ours win. Elementor
 * widgets style through classes, so they still override these.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
	/* Brand palette */
	--fp-maroon:        #7B1E28;
	--fp-gold:          #B08D3F;
	--fp-cream:         #F5EFE3;
	--fp-charcoal:      #2B2B2B;
	--fp-white:         #FFFFFF;

	/* Derived shades */
	--fp-maroon-dark:   #5E1620; /* primary button hover */
	--fp-gold-deep:     #8A6D2A; /* gold for text: 4.9:1 on white; base gold is 3.1:1 */
	--fp-gold-ink:      #6B5A33; /* gold for small text on cream: 5.9:1 (gold-deep is 4.3:1) */
	--fp-gold-light:    #E0C78A; /* gold for small text on maroon: 6.2:1 (4.6:1 on the lighter WhatsApp block) */
	--fp-whatsapp:     #25D366; /* WhatsApp brand green; pair with charcoal text (7.1:1), never white (2:1) */
	--fp-cream-mid:     #EDE5D6; /* hero offset plate, card edges */
	--fp-cream-dark:    #E8DCC4; /* alternating section backgrounds */

	/* Shadows (charcoal-tinted, so they stay warm on cream) */
	--fp-shadow-card:   0 2px 8px color-mix(in srgb, var(--fp-charcoal) 6%, transparent); /* resting cards */
	--fp-shadow-sm:     0 4px 12px -4px color-mix(in srgb, var(--fp-charcoal) 16%, transparent);
	--fp-shadow-md:     0 16px 32px -12px color-mix(in srgb, var(--fp-charcoal) 22%, transparent);
	--fp-shadow-lg:     0 24px 48px -12px color-mix(in srgb, var(--fp-charcoal) 18%, transparent);

	/* Typography */
	--fp-font-heading:  "Playfair Display", Georgia, "Times New Roman", serif;
	--fp-font-body:     "Inter", "Segoe UI", Roboto, Arial, sans-serif;

	/* Heading scale (fluid between ~360px and ~1200px viewports) */
	--fp-h1:            clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
	--fp-h2:            clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	--fp-h3:            clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--fp-h4:            clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--fp-h5:            1.125rem;
	--fp-h6:            1rem;
	--fp-text:          1rem;
	--fp-text-sm:       0.875rem;
	--fp-leading-tight: 1.2;
	--fp-leading-body:  1.6;

	/* Section padding scale */
	--fp-space-section-sm: clamp(2rem, 1.5rem + 2vw, 3rem);
	--fp-space-section-md: clamp(3rem, 2rem + 4vw, 5rem);
	--fp-space-section-lg: clamp(4rem, 2.5rem + 6vw, 7.5rem);

	/* Layout */
	--fp-container:     1200px;
	--fp-container-narrow: 760px;
	--fp-gutter:        16px;

	/* Shape */
	--fp-radius:        4px;
	--fp-border-width:  2px;

	/* Product photography. Supplier images are square, so the frame is square
	   and the photo is contained, never cropped: a notebook with its edge cut
	   off looks broken, and cover crops the moment a file is not exactly this
	   ratio. Set here once — the single gift, every card, the gallery
	   thumbnails and the finder all read these. */
	--fp-product-ratio: 1;
	--fp-product-pad:   5%;
	/* White, because supplier product shots are cut out on white: cream would
	   draw a frame around the photo's own white square. One value to change
	   if the photography ever arrives on a different backdrop. */
	--fp-product-bg:    var(--fp-white);
}

/* ------------------------------------------------------------------ */
/* 2. Base (element selectors, overrides Hello's reset.css)            */
/* ------------------------------------------------------------------ */
body {
	font-family: var(--fp-font-body);
	font-size: var(--fp-text);
	line-height: var(--fp-leading-body);
	color: var(--fp-charcoal);
	background-color: var(--fp-white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fp-font-heading);
	font-weight: 600;
	line-height: var(--fp-leading-tight);
	color: var(--fp-charcoal);
}

h1 { font-size: var(--fp-h1); }
h2 { font-size: var(--fp-h2); }
h3 { font-size: var(--fp-h3); }
h4 { font-size: var(--fp-h4); }
h5 { font-size: var(--fp-h5); }
h6 { font-size: var(--fp-h6); }

a { color: var(--fp-maroon); }

/* Elementor's Heading widget ships line-height: 1, too tight for 2-line headlines. */
.elementor-widget-heading .elementor-heading-title { line-height: var(--fp-leading-tight); }

/* ------------------------------------------------------------------ */
/* 3. Utilities                                                        */
/* ------------------------------------------------------------------ */

/* Heading scale as classes, for when the visual size differs from the tag. */
.fp-h1 { font-family: var(--fp-font-heading); font-size: var(--fp-h1); line-height: var(--fp-leading-tight); }
.fp-h2 { font-family: var(--fp-font-heading); font-size: var(--fp-h2); line-height: var(--fp-leading-tight); }
.fp-h3 { font-family: var(--fp-font-heading); font-size: var(--fp-h3); line-height: var(--fp-leading-tight); }
.fp-h4 { font-family: var(--fp-font-heading); font-size: var(--fp-h4); line-height: var(--fp-leading-tight); }

/* Buttons */
.fp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px; /* comfortable touch target */
	padding: 0.75em 1.75em;
	border: var(--fp-border-width) solid transparent;
	border-radius: var(--fp-radius);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hello's reset underlines a:visited (more specific than one class). */
.fp-btn:visited {
	text-decoration: none;
}

.fp-btn:focus-visible {
	outline: 3px solid var(--fp-gold);
	outline-offset: 2px;
}

.fp-btn--primary {
	background-color: var(--fp-maroon);
	border-color: var(--fp-maroon);
	color: var(--fp-white);
}

.fp-btn--primary:hover,
.fp-btn--primary:focus-visible {
	background-color: var(--fp-maroon-dark);
	border-color: var(--fp-maroon-dark);
	color: var(--fp-white);
}

/* Gold outline. Text stays charcoal: gold text on white fails AA contrast. */
.fp-btn--secondary {
	background-color: transparent;
	border-color: var(--fp-gold);
	color: var(--fp-charcoal);
}

.fp-btn--secondary:hover,
.fp-btn--secondary:focus-visible {
	background-color: var(--fp-gold);
	border-color: var(--fp-gold);
	color: var(--fp-charcoal);
}

/*
 * Home section headers. Eyebrow: <p class="fp-section-eyebrow"> in a Text
 * Editor widget (add fp-section-eyebrow--center when the section is centred).
 * Heading: CSS class fp-section-heading on the Heading widget, colour set to
 * the Primary (maroon) global in Elementor.
 */
.fp-section-eyebrow {
	margin: 0 0 12px;
	color: var(--fp-gold-deep); /* 4.9:1 on white; plain gold is 3.1:1, too faint at 11px */
	font-family: var(--fp-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The 1.5px gold rule beneath: decorative, so full gold. */
.fp-section-eyebrow::after {
	content: "";
	display: block;
	width: 32px;
	height: 1.5px;
	margin-top: 8px;
	background-color: var(--fp-gold);
}

.fp-section-eyebrow--center::after {
	margin-inline: auto;
}

/* On cream sections gold-deep drops to 4.3:1; gold-ink holds 5.9:1. */
.fp-section--cream .fp-section-eyebrow,
.e-con.fp-bg-cream .fp-section-eyebrow {
	color: var(--fp-gold-ink);
}

.fp-section-heading .elementor-heading-title {
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
}

/* Outline button for maroon sections: cream on maroon is 8.9:1, where the
   gold outline's charcoal text would be 2.4:1. */
.fp-btn--outline-light,
.fp-btn--outline-light:visited {
	background-color: transparent;
	border-color: var(--fp-cream);
	color: var(--fp-cream);
}

.fp-btn--outline-light:hover,
.fp-btn--outline-light:focus-visible {
	background-color: var(--fp-cream);
	border-color: var(--fp-cream);
	color: var(--fp-maroon);
}

/* Section padding */
.fp-section    { padding-block: var(--fp-space-section-md); }
.fp-section--sm { padding-block: var(--fp-space-section-sm); }
.fp-section--lg { padding-block: var(--fp-space-section-lg); }
.fp-section--cream { background-color: var(--fp-cream); }
.fp-section--maroon { background-color: var(--fp-maroon); color: var(--fp-white); }

/* Container */
.fp-container {
	width: 100%;
	max-width: var(--fp-container);
	margin-inline: auto;
	padding-inline: var(--fp-gutter);
	box-sizing: border-box;
}

.fp-container--narrow { max-width: var(--fp-container-narrow); }

/* ------------------------------------------------------------------ */
/* 4. Home hero (Elementor section with class fp-hero)                 */
/* Layout switches at 900px, which is not an Elementor breakpoint, so  */
/* it lives here. Headline and buttons use Elementor globals; chips,   */
/* trust lines and the image are styled here, from tokens.             */
/* Selectors carry ".e-con.e-flex": Elementor sets the same variables  */
/* with that pair and loads after this file, so ours needs one more.   */
/* ------------------------------------------------------------------ */
.fp-hero__title .elementor-heading-title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/*
 * Media column: image, offset backing plate, featured-gift card.
 * The column is padded top and right by the plate offset so the plate
 * (shifted up and right) stays inside it and never causes side-scroll.
 * Capped at 480px of image on narrow screens.
 */
/* Padding set directly: Elementor's per-element CSS zeroes its --padding-* vars
   with a selector that loads later and matches ours in specificity. */
.e-con.e-flex.fp-hero__media {
	--fp-plate: 16px;
	padding-block-start: var(--fp-plate);
	padding-inline-end: var(--fp-plate);
	position: relative;
	width: 100%;
	max-width: calc(480px + var(--fp-plate));
}

/* Portrait 4:5 image ([fp_hero_image], set in Gifts > Site Details), whatever file is chosen. */
.fp-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow-lg);
}

/* Offset plate: same size as the photo, shifted up and right, behind it. */
.fp-hero-image {
	position: relative;
	isolation: isolate;
}

.fp-hero-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translate(var(--fp-plate), calc(-1 * var(--fp-plate)));
	background-color: var(--fp-cream-mid);
	border-radius: var(--fp-radius);
}

/* No hero image set: drop the whole column (plate and card have nothing to sit on). */
.e-con.e-flex.fp-hero__media:not(:has(.fp-hero-image)) {
	display: none;
}

/* Featured-gift card ([fp_featured_gift], widget class fp-hero__feature) pinned
   inside the photo's lower edge. The card's own look is in funkyprints-core's
   frontend.css (.fp-feature). */
.e-con.fp-hero__media > .fp-hero__feature {
	position: absolute;
	left: var(--fp-plate);
	right: calc(var(--fp-plate) * 2);
	bottom: var(--fp-plate);
	z-index: 1;
	width: auto;
	margin: 0;
}

/* Under 900px: one column, text first, image below at a sensible size. */
.e-con.e-flex.fp-hero__row {
	--flex-direction: column;
	--align-items: stretch;
}

/*
 * Spec chips (Icon List widget, class fp-hero__chips, inline layout).
 * Reassurance, not headlines: small, white, soft shadow, gold icon.
 * Overrides the kit's icon-list defaults (gold text, maroon icons).
 */
.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: var(--fp-white);
	box-shadow: var(--fp-shadow-sm);
}

.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item::after {
	display: none; /* no dividers between chips */
}

.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-item .elementor-icon-list-icon {
	padding: 0;
}

.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-item .elementor-icon-list-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--fp-gold); /* icon, not text: 3.1:1 on white clears the 3:1 minimum */
}

.elementor-widget-icon-list.fp-hero__chips .elementor-icon-list-item .elementor-icon-list-text {
	padding: 0;
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text-sm);
	font-weight: 500;
	line-height: 1.3;
}

/* Secondary CTA ([fp_catalogue_download fallback="none"]): sized like Elementor's
   "lg" button beside it. Prints nothing without a PDF; then drop the empty widget
   too, so it leaves no gap in the button row. */
.fp-hero .fp-hero__cta {
	min-height: 0;
	padding: 20px 40px;
	font-size: 18px;
	line-height: 1;
}

.fp-hero .elementor-widget-shortcode.fp-hero__catalogue:not(:has(a)) {
	display: none;
}

/* Trust line, then the pricing basis beneath it: smaller and muted. */
.fp-hero__trust p,
.fp-hero__fineprint p {
	margin: 0;
}

.fp-hero__trust {
	color: var(--fp-charcoal);
	font-size: var(--fp-text);
	font-weight: 500;
}

.fp-hero .fp-hero__fineprint {
	margin-top: -8px; /* sits as a sub-line of the trust line */
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

@media (min-width: 900px) {
	.e-con.e-flex.fp-hero__row {
		--flex-direction: row;
		--flex-wrap: nowrap;
		--align-items: center;
	}

	.e-con.e-flex.fp-hero__text {
		--width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	.e-con.e-flex.fp-hero__media {
		--width: auto;
		flex: 0 0 min(42%, calc(480px + var(--fp-plate)));
	}
}

/* ------------------------------------------------------------------ */
/* 5. Value strip (Elementor section with class fp-values)            */
/* Content (images, headings, copy) and the 4/2/1 grid are edited in   */
/* Elementor; everything visual comes from here, colours from tokens.  */
/* Widgets carry no Elementor colour or font settings on purpose.      */
/* Images are optional: each panel also holds [fp_value_icon] (widget  */
/* class fp-values__icon-widget), shown only while the Image widget    */
/* has no image, in the same 4:3 slot so mixed rows line up.           */
/* ------------------------------------------------------------------ */
.fp-values {
	background-color: var(--fp-white);
}

.fp-values__panel:has(.elementor-widget-image img) .fp-values__icon-widget {
	display: none;
}

/* Decorative, so gold's 3.1:1 is fine; the heading names the value. */
.fp-values__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 35%, transparent);
	border-radius: 4px;
	background-color: var(--fp-cream);
	color: var(--fp-gold);
}

.fp-values__icon svg {
	display: block;
	width: 56px;
	height: 56px;
}

/* Any photo dropped in is shown at 4:3. */
.fp-values__panel .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--fp-charcoal) 22%, transparent);
}

.fp-values__panel .elementor-widget-heading .elementor-heading-title {
	margin: 8px 0 0;
	color: var(--fp-charcoal);
	font-family: var(--fp-font-heading);
	font-size: var(--fp-h4);
	font-weight: 600;
	line-height: 1.25;
}

.fp-values__panel .elementor-widget-text-editor {
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text);
	line-height: var(--fp-leading-body);
}

.fp-values__panel .elementor-widget-text-editor p {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 6. How it works (Elementor section #how-it-works)                   */
/* Grid container class fp-steps; each step container class fp-step,   */
/* holding: number (p.fp-step__num), heading (widget class             */
/* fp-step__title), body, tag (widget class fp-step__tag).             */
/* Copy is edited in Elementor; everything visual comes from here.     */
/* ------------------------------------------------------------------ */
.e-con.e-flex.fp-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 640px) {
	.e-con.e-flex.fp-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.e-con.e-flex.fp-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.e-con.e-flex.fp-step {
	border: 1px solid color-mix(in srgb, var(--fp-gold) 35%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	box-shadow: var(--fp-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.e-con.e-flex.fp-step:hover {
	box-shadow: var(--fp-shadow-md);
	transform: translateY(-2px);
}

.fp-step p {
	margin: 0;
}

/* Large text, so gold's 3.1:1 on white clears the 3:1 large-text minimum. */
.fp-step .fp-step__num {
	color: var(--fp-gold);
	font-family: var(--fp-font-heading);
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
}

.fp-step .fp-step__title .elementor-heading-title {
	font-size: 1.375rem;
	line-height: 1.25;
}

.fp-step .elementor-widget-text-editor {
	color: var(--fp-charcoal);
	font-size: 0.9375rem;
	line-height: var(--fp-leading-body);
}

/* Tag pinned to the card's foot, so tags line up across the row. */
.e-con.fp-step > .fp-step__tag {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--fp-gold) 35%, transparent);
}

.fp-step .fp-step__tag p {
	color: var(--fp-gold-deep); /* 4.9:1 on white at 12px */
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 7. Enquiry (Elementor section #enquiry)                             */
/* One card (class fp-enquiry-card): maroon intro panel (5/12, class    */
/* fp-enquiry-card__intro) beside a white form panel (7/12, class      */
/* fp-enquiry-card__form). Stacked below 900px, maroon on top. The     */
/* card clips its corners, so the maroon runs edge to edge. Form field */
/* styles: funkyprints-core frontend.css (.fp-enquiry).                */
/* ------------------------------------------------------------------ */
.e-con.e-flex.fp-enquiry-card {
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	box-shadow: var(--fp-shadow-lg);
}

.e-con.e-flex.fp-enquiry-card > .e-con {
	width: 100%;
}

.e-con.e-flex.fp-enquiry-card__intro {
	gap: 20px;
	padding: 40px 24px;
	background-color: var(--fp-maroon);
	color: var(--fp-cream);
}

.e-con.e-flex.fp-enquiry-card__form {
	padding: 32px 20px;
}

@media (min-width: 900px) {
	.e-con.e-flex.fp-enquiry-card {
		flex-direction: row;
		align-items: stretch;
	}

	.e-con.e-flex.fp-enquiry-card > .e-con.fp-enquiry-card__intro {
		flex: 0 0 41.6667%; /* 5/12 */
		width: 41.6667%;
		padding: 56px 48px;
	}

	.e-con.e-flex.fp-enquiry-card > .e-con.fp-enquiry-card__form {
		flex: 1 1 58.3333%; /* 7/12 */
		width: auto;
		min-width: 0;
		padding: 48px;
	}
}

.fp-enquiry-card__intro p {
	margin: 0;
}

/* Gold pill: charcoal on gold is 4.5:1. */
.fp-enquiry-card .fp-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--fp-gold);
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fp-enquiry-card__intro .fp-enquiry-card__title .elementor-heading-title {
	color: var(--fp-cream);
	font-family: var(--fp-font-heading);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
}

.fp-enquiry-card__intro .fp-enquiry-card__lede {
	color: var(--fp-cream);
	font-size: var(--fp-text);
	line-height: var(--fp-leading-body);
}

/* Icon rows: gold icon (3.3:1, fine for an icon), cream heading, muted line (6:1). */
.e-con .fp-enquiry-point.elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

.e-con .fp-enquiry-point.elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 2px 0 0;
}

.e-con .fp-enquiry-point.elementor-widget-icon-box .elementor-icon {
	color: var(--fp-gold);
	fill: var(--fp-gold);
	font-size: 22px;
}

.e-con .fp-enquiry-point.elementor-widget-icon-box .elementor-icon svg {
	width: 22px;
	height: 22px;
}

.e-con .fp-enquiry-point .elementor-icon-box-title {
	margin: 0 0 4px;
	color: var(--fp-cream);
	font-family: var(--fp-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.e-con .fp-enquiry-point .elementor-icon-box-description {
	margin: 0;
	color: color-mix(in srgb, var(--fp-cream) 78%, var(--fp-maroon));
	font-size: var(--fp-text-sm);
	line-height: 1.5;
}

/* WhatsApp block ([fp_whatsapp_card]): pinned to the panel's foot, all one link. */
.e-con.fp-enquiry-card__intro > .fp-enquiry-card__wa {
	margin-top: auto;
	padding-top: 8px;
}

.fp-wa-card,
.fp-wa-card:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 20px 24px;
	border-radius: var(--fp-radius);
	background-color: color-mix(in srgb, var(--fp-maroon) 88%, var(--fp-white));
	color: var(--fp-cream);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fp-wa-card:hover,
.fp-wa-card:focus-visible {
	background-color: color-mix(in srgb, var(--fp-maroon) 80%, var(--fp-white));
	color: var(--fp-cream);
}

.fp-wa-card:focus-visible {
	outline: 3px solid var(--fp-gold-light);
	outline-offset: 2px;
}

.fp-wa-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fp-wa-card__label {
	color: var(--fp-gold-light); /* 4.6:1 here; plain gold would be 2.4:1 */
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.fp-wa-card__number {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.fp-wa-card svg {
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fp-btn { transition: none; }

	.fp-wa-card {
		transition: none;
	}

	.e-con.e-flex.fp-step,
	.e-con.e-flex.fp-step:hover {
		transform: none;
		transition: none;
	}
}