/**
 * FunkyPrints Core front-end styles.
 * Uses theme tokens (--fp-*) with fallbacks so it still works after a theme change.
 */

/* Price ------------------------------------------------------------ */
.fp-price__amount {
	color: var(--fp-maroon, #7B1E28);
	font-weight: 700;
}

/* Lists (contents, branding) --------------------------------------- */
.fp-list {
	margin: 0;
	padding-left: 1.25em;
}

.fp-list li + li {
	margin-top: 0.25em;
}

.fp-list li::marker {
	color: var(--fp-gold, #B08D3F);
}

/* Slab pricing table ----------------------------------------------- */
.fp-slab-table {
	width: 100%;
	max-width: 420px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.fp-slab-table th,
.fp-slab-table td {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(43, 43, 43, 0.12);
	text-align: left;
}

.fp-slab-table th {
	background-color: var(--fp-cream, #F5EFE3);
	color: var(--fp-charcoal, #2B2B2B);
	font-weight: 600;
}

.fp-slab-table td:last-child,
.fp-slab-table th:last-child {
	text-align: right;
}

/* ================================================================== */
/* Base fallbacks                                                      */
/* Zero specificity (:where) so the child theme's tokens.css wins when  */
/* present; these keep templates usable if the theme ever changes.      */
/* ================================================================== */
:where(.fp-container) {
	width: 100%;
	max-width: var(--fp-container, 1200px);
	margin-inline: auto;
	padding-inline: var(--fp-gutter, 16px);
	box-sizing: border-box;
}

:where(.fp-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75em 1.75em;
	border: 2px solid transparent;
	border-radius: var(--fp-radius, 4px);
	font-family: var(--fp-font-body, "Inter", Arial, sans-serif);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

:where(.fp-btn--primary) {
	background-color: var(--fp-maroon, #7B1E28);
	border-color: var(--fp-maroon, #7B1E28);
	color: #FFFFFF;
}

:where(.fp-btn--primary:hover, .fp-btn--primary:focus-visible) {
	background-color: var(--fp-maroon-dark, #5E1620);
	border-color: var(--fp-maroon-dark, #5E1620);
	color: #FFFFFF;
}

:where(.fp-btn--secondary) {
	background-color: transparent;
	border-color: var(--fp-gold, #B08D3F);
	color: var(--fp-charcoal, #2B2B2B);
}

:where(.fp-btn--secondary:hover, .fp-btn--secondary:focus-visible) {
	background-color: var(--fp-gold, #B08D3F);
	color: var(--fp-charcoal, #2B2B2B);
}

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

:where(.screen-reader-text) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Hello's reset.css uses selectors stronger than one class:
 * `a:visited` (underline) and `button:hover/focus` (pink #c36 background).
 * Neutralise them for our components. Kept above the component rules so
 * deliberate hover styles later in this file still apply.
 */
:is(.fp-btn, .fp-tag, .fp-chip, .fp-header a, .fp-card a, .fp-footer a, .fp-breadcrumb a):visited {
	text-decoration: none;
}

/* Extra button variants */
.fp-btn--large {
	min-height: 56px;
	padding: 0.9em 2em;
	font-size: 1.0625rem;
}

.fp-btn--light {
	background-color: var(--fp-cream, #F5EFE3);
	border-color: var(--fp-cream, #F5EFE3);
	color: var(--fp-maroon, #7B1E28);
}

.fp-btn--light:hover,
.fp-btn--light:focus-visible {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--fp-maroon, #7B1E28);
}

/* Skip link */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: #FFFFFF;
	color: var(--fp-maroon, #7B1E28);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Shared bits */
.fp-tag {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--fp-gold, #B08D3F);
	border-radius: 999px;
	background-color: var(--fp-cream, #F5EFE3);
	color: var(--fp-maroon, #7B1E28);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.fp-tag:hover,
.fp-tag:focus-visible {
	background-color: var(--fp-gold, #B08D3F);
	color: var(--fp-charcoal, #2B2B2B);
}

.fp-eyebrow {
	margin: 0 0 8px;
	color: var(--fp-maroon, #7B1E28);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ================================================================== */
/* Header: fixed masthead = announcement bar (optional) + 80px row     */
/* Heights live in two variables on <html>, so the page's top padding  */
/* always equals the header: the bar's height drops to 0 below 768px,  */
/* when switched off, or once dismissed (classes set before paint by   */
/* FP_Site_Chrome::announcement_flag()). Nothing is measured in JS.    */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
html {
	--fp-announce-h: 0px;
	--fp-header-row-h: 80px;
	--fp-header-h: calc(var(--fp-header-row-h) + var(--fp-announce-h));
}

@media (min-width: 768px) {
	html.fp-has-announce:not(.fp-announce-off) {
		--fp-announce-h: 36px;
	}
}

html:has(> body.fp-chrome) {
	scroll-padding-top: calc(var(--fp-header-h) + 16px); /* anchor jumps land below the header */
}

body.fp-chrome {
	padding-top: var(--fp-header-h);
}

.fp-masthead {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px); /* below the admin bar when logged in */
	right: 0;
	left: 0;
	z-index: 1000;
}

/* Announcement bar ------------------------------------------------- */
.fp-announce {
	display: none;
	background-color: var(--fp-charcoal);
	color: var(--fp-cream);
}

@media (min-width: 768px) {
	html.fp-has-announce:not(.fp-announce-off) .fp-announce {
		display: block;
	}
}

.fp-announce__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--fp-announce-h);
	padding-inline: 48px; /* keeps centred text clear of the close button */
}

/* One line, always: a fixed height is what keeps the page padding exact. */
.fp-announce__text {
	margin: 0;
	overflow: hidden;
	font-family: var(--fp-font-body);
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fp-announce__text a,
.fp-announce__text a:visited {
	color: var(--fp-cream);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fp-announce__text a:hover {
	color: var(--fp-white);
}

.fp-announce .fp-announce__close {
	position: absolute;
	top: 50%;
	right: var(--fp-gutter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--fp-radius);
	background: transparent;
	color: var(--fp-cream);
	cursor: pointer;
	transform: translateY(-50%);
}

.fp-announce .fp-announce__close:hover,
.fp-announce .fp-announce__close:focus {
	background-color: color-mix(in srgb, var(--fp-cream) 15%, transparent);
	color: var(--fp-white);
}

.fp-announce .fp-announce__close:focus-visible,
.fp-announce__text a:focus-visible {
	outline: 2px solid var(--fp-gold);
	outline-offset: 2px;
}

/* Main row --------------------------------------------------------- */
.fp-header {
	box-sizing: border-box;
	height: var(--fp-header-row-h);
	border-bottom: 1px solid color-mix(in srgb, var(--fp-gold) 35%, transparent);
	background-color: var(--fp-white);
	transition: box-shadow 0.2s ease;
}

/* Past 40px of scroll (frontend.js). Only the shadow changes, never the height. */
.fp-masthead.is-scrolled .fp-header {
	box-shadow: var(--fp-shadow-sm);
}

.fp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
}

.fp-header__brand {
	flex: 0 0 auto;
}

.fp-header__brand .custom-logo-link {
	display: block;
}

.fp-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: 40px;
}

/* Shown only while no logo is uploaded (Appearance > Customize > Site Identity). */
.fp-header__name,
.fp-header__name:visited {
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.fp-header__brand a:focus-visible,
.fp-nav__link:focus-visible {
	outline: 3px solid var(--fp-gold);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Row shortcuts (below 1100px): WhatsApp, plus Catalogue from 640px. */
.fp-header__quick {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Menu toggle (below 1100px). A real <button>: aria-expanded + aria-controls. */
.fp-header .fp-header__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 20%, transparent);
	border-radius: var(--fp-radius);
	background: transparent;
	color: var(--fp-charcoal);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.fp-header .fp-header__toggle:hover,
.fp-header .fp-header__toggle:focus {
	border-color: var(--fp-maroon);
	background-color: transparent;
	color: var(--fp-maroon);
}

.fp-header__toggle-bars,
.fp-header__toggle-bars::before,
.fp-header__toggle-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background-color: currentColor;
}

.fp-header__toggle-bars {
	position: relative;
}

.fp-header__toggle-bars::before,
.fp-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.fp-header__toggle-bars::before { top: -6px; }
.fp-header__toggle-bars::after { top: 6px; }

.fp-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-nav__link,
.fp-nav__link:visited {
	position: relative;
	display: block;
	padding: 10px 0;
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}

.fp-nav__link:hover {
	color: var(--fp-maroon);
}

/* Current band: maroon text, 2px gold underline. Drawn, so nothing shifts. */
.fp-nav__link.is-current {
	color: var(--fp-maroon);
}

.fp-nav__link.is-current::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 2px;
	background-color: var(--fp-gold);
}

/* The Gift finder is a tool, not a budget band: gold-deep text (4.7:1 on
   white; plain gold would be 3.0:1) and a small gold dot. Lower specificity
   than .is-current and :hover, so the active and hover states still win. */
.fp-nav__link--tool {
	color: var(--fp-gold-deep);
}

.fp-nav__link--tool::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin-right: 7px;
	border-radius: 50%;
	background-color: var(--fp-gold);
	vertical-align: 0.15em;
}

.fp-header__actions {
	display: flex;
	gap: 12px;
}

/* Header-sized buttons: 44px tall so they sit comfortably in the 80px row. */
.fp-header .fp-header__btn {
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
	white-space: nowrap;
}

.fp-header__btn svg {
	flex-shrink: 0;
}

/* Secondary: cream fill, gold border. Text stays charcoal (gold on cream fails AA). */
.fp-header .fp-header__btn--catalogue,
.fp-header .fp-header__btn--catalogue:visited {
	border-color: var(--fp-gold);
	background-color: var(--fp-cream);
	color: var(--fp-charcoal);
}

.fp-header .fp-header__btn--catalogue:hover,
.fp-header .fp-header__btn--catalogue:focus-visible {
	border-color: var(--fp-gold);
	background-color: var(--fp-gold);
	color: var(--fp-charcoal);
}

.fp-header .fp-header__btn--whatsapp:visited {
	color: var(--fp-white);
}

/*
 * Below 1100px: the panel slides in from the right, full height, over a
 * backdrop. Open/closed, focus trap, Escape and backdrop close: frontend.js.
 * Closed, it is visibility:hidden, so nothing inside can take focus.
 * Without JS the toggle is hidden; the footer carries the same links.
 */
@media (max-width: 1099.98px) {
	html:not(.fp-js) .fp-header .fp-header__toggle {
		display: none;
	}

	.fp-header__panel {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		bottom: 0;
		z-index: 1002;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: min(380px, 88vw);
		padding: 12px var(--fp-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--fp-cream);
		box-shadow: var(--fp-shadow-lg);
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.fp-header__panel.is-open {
		visibility: visible;
		transform: none;
		transition: transform 0.25s ease, visibility 0s;
	}

	.fp-header__backdrop {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
		z-index: 1001;
		background-color: color-mix(in srgb, var(--fp-charcoal) 55%, transparent);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}

	.fp-header__backdrop.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.25s ease, visibility 0s;
	}

	/* The page behind does not scroll while the panel is open. */
	html.fp-menu-open {
		overflow: hidden;
	}

	.fp-header__panel-head {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 8px;
	}

	.fp-header .fp-header__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--fp-radius);
		background: transparent;
		color: var(--fp-charcoal);
		cursor: pointer;
		/* Not Hello's `transition: all`: that would also ease the inherited
		   visibility, leaving the button hidden when JS focuses it on open. */
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.fp-header .fp-header__close:hover,
	.fp-header .fp-header__close:focus {
		background-color: var(--fp-cream-mid);
		color: var(--fp-maroon);
	}

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

	/* Stacked items: 18px, 56px tap targets, hairline dividers. */
	.fp-header__nav .fp-nav > li + li {
		border-top: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
	}

	.fp-nav__link,
	.fp-nav__link:visited {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: 0 4px;
		font-size: 18px;
		white-space: normal;
	}

	/* Current band: the 2px gold underline sits under the text, not the full row. */
	.fp-nav__link.is-current::after {
		display: none;
	}

	.fp-nav__link.is-current {
		text-decoration: underline;
		text-decoration-color: var(--fp-gold);
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}

	.fp-nav__link:focus-visible {
		outline-offset: -3px;
	}

	/* Both buttons full-width at the foot of the panel. */
	.fp-header__panel .fp-header__actions {
		flex-direction: column;
		margin-top: auto;
		padding-top: 24px;
	}

	.fp-header__panel .fp-header__btn {
		width: 100%;
		min-height: 52px;
		font-size: 16px;
	}
}

/* Below 640px: logo, WhatsApp and an icon-only menu button. Catalogue is in the panel. */
@media (max-width: 639.98px) {
	.fp-header__inner {
		gap: 8px;
	}

	.fp-header__quick .fp-header__btn--catalogue {
		display: none;
	}

	.fp-header .fp-header__quick .fp-header__btn {
		padding: 0 12px;
	}

	.fp-header .fp-header__toggle {
		padding: 0;
	}

	.fp-header__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.fp-header__name,
	.fp-header__name:visited {
		font-size: 1.25rem;
	}
}

/*
 * Desktop: logo left, menu centred, buttons right, all on the one 80px row.
 * Today's six items (Corporate Gifting, Hampers, Dry Fruits, Shop by budget,
 * Gift finder, How it works) fit with both buttons. With all five categories
 * showing they do not: ~190px over at 1100px (see FP_Site_Chrome::nav_items()).
 */
@media (min-width: 1100px) {
	.fp-header .fp-header__toggle,
	.fp-header__quick,
	.fp-header__backdrop,
	.fp-header__panel-head {
		display: none;
	}

	.fp-header__inner {
		gap: 12px;
	}

	.fp-header__panel {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}

	.fp-header__nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
	}

	.fp-nav {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.fp-header__actions {
		flex: 0 0 auto;
		gap: 8px;
	}

	.fp-header .fp-header__btn {
		padding: 0 10px;
	}
}

/* 1280px up: a little roomier. The container stops growing at 1200px, so
   this is sized for the same worst case, not for wide screens. */
@media (min-width: 1280px) {
	.fp-header__inner,
	.fp-header__panel {
		gap: 24px;
	}

	.fp-nav {
		gap: 16px;
	}

	.fp-header__actions {
		gap: 12px;
	}

	.fp-header .fp-header__btn {
		padding: 0 14px;
	}
}

/*
 * "Shop by budget": a dropdown from 1100px, an expandable group in the panel
 * below it. frontend.js drives aria-expanded; the list shows while it is
 * "true". Without JS: hover/focus opens it on desktop, and in the (always
 * open) panel the list simply shows.
 * The button is a .fp-nav__link, so it shares the link's type and current
 * state. Hello styles bare buttons, hence the .fp-header resets.
 */
.fp-nav__group {
	position: relative;
}

.fp-header .fp-nav__toggle,
.fp-header .fp-nav__toggle:hover,
.fp-header .fp-nav__toggle:focus {
	gap: 6px;
	width: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	cursor: pointer;
}

.fp-header .fp-nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.fp-header .fp-nav__toggle:hover,
.fp-header .fp-nav__toggle[aria-expanded="true"],
.fp-header .fp-nav__toggle.is-current {
	color: var(--fp-maroon);
}

.fp-nav__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.fp-nav__toggle[aria-expanded="true"] .fp-nav__chevron {
	transform: rotate(180deg);
}

.fp-nav__sub {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-nav__toggle[aria-expanded="true"] + .fp-nav__sub {
	display: block;
}

.fp-nav__sublink,
.fp-nav__sublink:visited {
	display: block;
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.fp-nav__sublink:hover,
.fp-nav__sublink.is-current {
	color: var(--fp-maroon);
}

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

@media (max-width: 1099.98px) {
	/* Panel: a full-width row like its neighbours, chevron at the far end. */
	.fp-header .fp-nav__toggle {
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding: 0 4px;
		font-size: 18px;
		text-align: left;
	}

	.fp-nav__sub {
		padding-bottom: 8px;
	}

	/* No JS: the panel is always open, so the group is too. */
	html:not(.fp-js) .fp-nav__sub {
		display: block;
	}

	.fp-nav__sublink,
	.fp-nav__sublink:visited {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 4px 0 20px;
		font-size: 16px;
		white-space: normal;
	}

	.fp-nav__sublink.is-current {
		text-decoration: underline;
		text-decoration-color: var(--fp-gold);
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
}

@media (min-width: 1100px) {
	.fp-nav__sub {
		position: absolute;
		top: calc(100% + 12px);
		left: -16px;
		z-index: 10;
		min-width: 200px;
		padding: 8px 0;
		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-lg);
	}

	/* Bridges the 12px gap so the pointer can reach the list without it closing. */
	.fp-nav__sub::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 13px;
	}

	html:not(.fp-js) .fp-nav__group:hover .fp-nav__sub,
	html:not(.fp-js) .fp-nav__group:focus-within .fp-nav__sub {
		display: block;
	}

	.fp-nav__sublink,
	.fp-nav__sublink:visited {
		position: relative;
		padding: 11px 20px;
		font-size: 14px;
	}

	.fp-nav__sublink:hover {
		background-color: var(--fp-cream);
	}

	/* Current band: a gold bar at the left edge. */
	.fp-nav__sublink.is-current::before {
		content: "";
		position: absolute;
		top: 8px;
		bottom: 8px;
		left: 0;
		width: 3px;
		background-color: var(--fp-gold);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.fp-header,
	.fp-header__panel,
	.fp-header__panel.is-open,
	.fp-header__backdrop,
	.fp-header__backdrop.is-open {
		transition: none;
	}
}

@media print {
	.fp-masthead {
		position: static;
	}

	body.fp-chrome {
		padding-top: 0;
	}
}

/* ================================================================== */
/* Footer                                                              */
/* ================================================================== */
.fp-footer {
	margin-top: var(--fp-space-section-md, 64px);
	background-color: var(--fp-maroon, #7B1E28);
	color: var(--fp-cream, #F5EFE3);
	font-size: 0.9375rem;
}

.fp-footer a {
	color: var(--fp-cream, #F5EFE3);
	text-decoration: none;
}

.fp-footer a:hover,
.fp-footer a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
}

.fp-footer .fp-btn--light,
.fp-footer .fp-btn--light:hover,
.fp-footer .fp-btn--light:focus-visible {
	color: var(--fp-maroon, #7B1E28);
	text-decoration: none;
}

.fp-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-block: 56px 40px;
}

.fp-footer__name {
	margin: 0 0 8px;
	color: #FFFFFF;
	font-family: var(--fp-font-heading, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	font-weight: 700;
}

.fp-footer h2 {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fp-gold, #B08D3F);
	color: #FFFFFF;
	font-family: var(--fp-font-body, "Inter", Arial, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fp-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-footer li + li {
	margin-top: 8px;
}

.fp-footer__facts li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	border-radius: 50%;
	background-color: var(--fp-gold, #B08D3F);
	vertical-align: middle;
}

.fp-footer__download {
	margin-top: 16px;
}

.fp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px;
	border-top: 1px solid rgba(245, 239, 227, 0.2);
	font-size: 0.875rem;
}

.fp-footer__bottom p {
	margin: 0;
}

.fp-footer .fp-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.fp-footer .fp-footer__policies li + li {
	margin-top: 0;
}

@media (min-width: 768px) {
	.fp-footer__bottom {
		padding-bottom: 24px;
	}
}

/* ================================================================== */
/* Grid + card (shared by archives and related gifts)                  */
/* ================================================================== */
.fp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.fp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(43, 43, 43, 0.1);
	border-radius: var(--fp-radius, 4px);
	background-color: #FFFFFF;
	transition: box-shadow 0.2s ease;
}

.fp-card:hover {
	box-shadow: 0 10px 28px rgba(43, 43, 43, 0.1);
}

/* Optional B2B badge, top-left over the image. Colours from tokens.css.
   One line only: anything too wide for the card ends in an ellipsis. */
.fp-card {
	position: relative;
}

.fp-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	max-width: calc(100% - 24px);
	padding: 4px 10px;
	overflow: hidden;
	border-radius: 2px;
	font-family: var(--fp-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	box-sizing: border-box;
	pointer-events: none;
}

/* Deep gold, not --fp-gold: white on --fp-gold is 3.1:1, below AA for 11px text; this is 4.9:1. */
.fp-card__badge--gold {
	background-color: var(--fp-gold-deep);
	color: var(--fp-white);
}

.fp-card__badge--maroon {
	background-color: var(--fp-maroon);
	color: var(--fp-cream);
}

.fp-card__media {
	display: block;
	box-sizing: border-box; /* the padding sits inside the square, not outside it */
	aspect-ratio: var(--fp-product-ratio);
	padding: var(--fp-product-pad);
	background-color: var(--fp-product-bg);
}

.fp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fp-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #6B5A33;
	font-size: 0.875rem;
}

/* Category eyebrow above the name: small caps, gold-deep on white (4.9:1). */
.fp-card .fp-card__category {
	margin: 0 0 2px;
	color: var(--fp-gold-deep);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Three facts under the price: minimum order, GST invoice, branding. */
.fp-card .fp-card__spec {
	margin: -2px 0 0;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: 0.75rem;
	line-height: 1.45;
}

.fp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px;
}

.fp-card__title {
	margin: 0;
	font-family: var(--fp-font-heading, "Playfair Display", Georgia, serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.fp-card__title a {
	color: var(--fp-charcoal, #2B2B2B);
	text-decoration: none;
}

.fp-card__title a:hover,
.fp-card__title a:focus-visible {
	color: var(--fp-maroon, #7B1E28);
}

.fp-card__price {
	margin: 0;
}

/* Colour variants: up to five 12px dots, then "+N". Decorative; the names
   are in the screen-reader text beside them. */
.fp-card__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.fp-card__dot {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: 50%;
	background-color: var(--fp-swatch, transparent);
}

.fp-card__dot-more {
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-size: 12px;
	line-height: 1;
}

.fp-card__cta {
	width: 100%;
	margin-top: auto;
}

/* ================================================================== */
/* Archive                                                             */
/* ================================================================== */
.fp-archive__header {
	padding-block: 40px 16px;
}

.fp-archive__title {
	margin: 0;
	font-size: var(--fp-h1, 2.5rem);
}

.fp-archive__description {
	max-width: 720px;
	margin-top: 12px;
}

.fp-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 12px;
}

.fp-chips__label {
	font-size: 0.875rem;
	font-weight: 600;
}

.fp-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 1px solid rgba(43, 43, 43, 0.2);
	border-radius: 999px;
	color: var(--fp-charcoal, #2B2B2B);
	font-size: 0.9375rem;
	text-decoration: none;
}

.fp-chip:hover,
.fp-chip:focus-visible {
	border-color: var(--fp-maroon, #7B1E28);
	color: var(--fp-maroon, #7B1E28);
}

.fp-chip.is-current {
	border-color: var(--fp-maroon, #7B1E28);
	background-color: var(--fp-maroon, #7B1E28);
	color: #FFFFFF;
}

.fp-archive .fp-grid {
	margin-top: 24px;
}

.fp-archive .navigation {
	margin-top: 32px;
}

/* Catalogue grid filters ([fp_gift_grid]) */
.fp-card[hidden],
.fp-empty[hidden] {
	display: none;
}

.fp-filters {
	display: grid;
	gap: 4px;
	padding: 20px;
	border-radius: var(--fp-radius, 4px);
	background-color: var(--fp-cream, #F5EFE3);
}

.fp-filters .fp-chips {
	margin-bottom: 0;
}

.fp-filters .fp-chips__label {
	min-width: 72px;
}

.fp-filters .fp-chip {
	background-color: #FFFFFF;
}

.fp-filters .fp-chip.is-current {
	background-color: var(--fp-maroon, #7B1E28);
}

.fp-empty {
	margin-top: 24px;
	padding: 32px;
	border-radius: var(--fp-radius, 4px);
	background-color: var(--fp-cream, #F5EFE3);
}

/* ================================================================== */
/* Single gift                                                         */
/* ================================================================== */
.fp-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 20px 0;
	list-style: none;
	font-size: 0.875rem;
}

.fp-breadcrumb li + li::before {
	content: "/";
	margin-right: 4px;
	color: #767676;
}

.fp-breadcrumb a {
	color: var(--fp-maroon, #7B1E28);
}

.fp-gift__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* the column may be narrower than the pricing table */
	gap: 32px;
}

.fp-gallery__main {
	box-sizing: border-box;
	aspect-ratio: var(--fp-product-ratio); /* square, matching the cards */
	padding: var(--fp-product-pad);
	overflow: hidden;
	border-radius: var(--fp-radius, 4px);
	background-color: var(--fp-product-bg);
}

.fp-gallery__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fp-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.fp-gallery__thumb {
	display: block;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	padding: var(--fp-product-pad);
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--fp-radius, 4px);
	background: var(--fp-cream, #F5EFE3);
	cursor: pointer;
}

.fp-gallery__thumb:hover,
.fp-gallery__thumb:focus {
	border-color: var(--fp-gold, #B08D3F);
	background-color: var(--fp-cream, #F5EFE3);
}

.fp-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fp-gallery__thumb[aria-pressed="true"],
.fp-gallery__thumb[aria-pressed="true"]:hover,
.fp-gallery__thumb[aria-pressed="true"]:focus {
	border-color: var(--fp-maroon, #7B1E28);
}

.fp-gallery__thumb:focus-visible {
	outline: 3px solid var(--fp-gold, #B08D3F);
	outline-offset: 2px;
}

.fp-gift__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0; /* each block below sets its own bottom margin */
}

.fp-gift__excerpt {
	margin: 0 0 22px;
}

.fp-gift__excerpt p {
	margin: 0;
}

.fp-gift__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin: 0 0 16px;
}

.fp-gift__description {
	max-width: 760px;
	margin-top: 48px;
}

.fp-related {
	margin-top: 64px;
}

@media (min-width: 600px) {
	.fp-gift__actions {
		flex-direction: row;
	}
}

@media (min-width: 1024px) {
	.fp-gift__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 56px;
		align-items: start;
	}
}

/* ================================================================== */
/* Landing grids: [fp_band_tiles] cards, [fp_category_tiles]         */
/* ================================================================== */
.fp-cat-tiles {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Budget cards [fp_band_tiles] ------------------------------------- */
/* Card 1 solid maroon, cards 2-4 cream with a gold border. Equal      */
/* heights (grid stretch), CTA pinned to the foot, hover lift.         */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
.fp-band-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.fp-band-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--fp-gold);
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
	box-shadow: var(--fp-shadow-card);
	color: var(--fp-maroon);
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-band-card:hover,
.fp-band-card:focus-within {
	box-shadow: var(--fp-shadow-md);
	transform: translateY(-2px);
}

.fp-band-card--lead {
	border-color: var(--fp-maroon);
	background-color: var(--fp-maroon);
	color: var(--fp-cream);
}

.fp-band-card p {
	margin: 0;
}

/* Badge (optional) top-left, tier number top-right. */
.fp-band-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.fp-band-card__tag {
	padding: 3px 10px;
	border-radius: 999px;
	background-color: var(--fp-maroon);
	color: var(--fp-cream);
	font-family: var(--fp-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.fp-band-card--lead .fp-band-card__tag {
	background-color: var(--fp-cream);
	color: var(--fp-maroon);
}

.fp-band-card__num {
	margin-left: auto;
	color: var(--fp-gold-ink);
	font-family: var(--fp-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.fp-band-card--lead .fp-band-card__num {
	color: var(--fp-gold);
}

/* Small uppercase labels: gold-ink on cream (5.9:1), cream on maroon. */
.fp-band-card__eyebrow,
.fp-band-card__label {
	color: var(--fp-gold-ink);
	font-family: var(--fp-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.fp-band-card--lead :is(.fp-band-card__eyebrow, .fp-band-card__label) {
	color: var(--fp-cream);
}

.fp-band-card .fp-band-card__eyebrow {
	margin-bottom: 6px;
}

.fp-band-card .fp-band-card__name {
	margin: 0 0 8px;
	color: inherit;
	font-family: var(--fp-font-heading);
	font-size: var(--fp-h4);
	font-weight: 600;
	line-height: 1.25;
}

.fp-band-card .fp-band-card__range {
	margin: 0;
	color: inherit;
	font-family: var(--fp-font-heading);
	/*
	 * One line always. The longest range, "₹1,200 – ₹2,500", is 7.05em wide,
	 * so the size is the card's text width / 7.6, capped at 2.25rem. The width
	 * is worked out from the viewport per layout (1, 2 or 4 columns) rather
	 * than with container units: container-type on the cards made Chrome
	 * over-measure the Elementor widget around the grid, leaving ~400px of
	 * empty space under the stacked cards on phones.
	 * Text width = card - 48px padding - 2px border; section gutters 16px.
	 */
	font-size: min(2.25rem, calc((100vw - 82px) / 7.6));
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

/* Two columns, then four (content at most 1200px wide: Elementor boxed width). */
@media (min-width: 640px) {
	.fp-band-card .fp-band-card__range {
		font-size: min(2.25rem, calc(((100vw - 52px) / 2 - 50px) / 7.6));
	}
}

@media (min-width: 1100px) {
	.fp-band-card .fp-band-card__range {
		font-size: min(2.25rem, calc(((min(100vw, 1232px) - 92px) / 4 - 50px) / 7.6));
	}
}

.fp-band-card .fp-band-card__per {
	margin: 4px 0 24px;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-cream));
	font-size: var(--fp-text-sm);
}

.fp-band-card--lead .fp-band-card__per {
	color: var(--fp-cream);
}

/* Divider, "What's inside", four lines with a gold check. Omitted when empty. */
.fp-band-card__inside {
	margin-bottom: 24px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--fp-gold) 50%, transparent);
}

.fp-band-card .fp-band-card__label {
	margin-bottom: 12px;
}

.fp-band-card__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-band-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Decorative (list semantics carry the meaning), so no contrast minimum. */
.fp-band-card__check {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--fp-gold);
}

/* CTA pinned to the foot so buttons line up across cards. */
.fp-band-card .fp-band-card__cta,
.fp-band-card .fp-band-card__cta:visited {
	width: 100%;
	min-height: 52px;
	margin-top: auto;
	padding-inline: 10px; /* "Get a quote for this range →" fits one line from 1280px */
	border-color: var(--fp-maroon);
	background-color: transparent;
	font-size: 15px;
	color: var(--fp-maroon);
	text-align: center;
}

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

/* Card 1: gold button. Charcoal on gold is 4.5:1; maroon or white on gold fail. */
.fp-band-card--lead .fp-band-card__cta,
.fp-band-card--lead .fp-band-card__cta:visited {
	border-color: var(--fp-gold);
	background-color: var(--fp-gold);
	color: var(--fp-charcoal);
}

.fp-band-card--lead .fp-band-card__cta:hover,
.fp-band-card--lead .fp-band-card__cta:focus-visible {
	border-color: var(--fp-cream);
	background-color: var(--fp-cream);
	color: var(--fp-maroon);
}

.fp-band-card--lead .fp-band-card__cta:focus-visible {
	outline-color: var(--fp-cream);
}

/* 1100-1279px: four narrow cards, so "Get a quote for this range" takes two
   lines. Give every CTA that height so the buttons still line up. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
	.fp-band-card .fp-band-card__cta {
		min-height: 66px;
	}
}

.fp-cat-tiles {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.fp-cat-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(43, 43, 43, 0.1);
	border-radius: var(--fp-radius, 4px);
	background-color: #FFFFFF;
	color: var(--fp-charcoal, #2B2B2B);
	text-decoration: none;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.fp-cat-tile:hover,
.fp-cat-tile:focus-visible,
.fp-cat-tile:visited {
	color: var(--fp-charcoal, #2B2B2B);
	text-decoration: none;
}

.fp-cat-tile:hover,
.fp-cat-tile:focus-visible {
	box-shadow: 0 10px 28px rgba(43, 43, 43, 0.12);
}

.fp-cat-tile:focus-visible {
	outline: 3px solid var(--fp-gold, #B08D3F);
	outline-offset: 3px;
}

.fp-cat-tile__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--fp-cream, #F5EFE3);
}

.fp-cat-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-cat-tile .fp-cat-tile__name {
	margin: 0;
	padding: 14px 16px 16px;
	color: var(--fp-charcoal, #2B2B2B);
	font-family: var(--fp-font-heading, "Playfair Display", Georgia, serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.fp-cat-tile:hover .fp-cat-tile__name {
	color: var(--fp-maroon, #7B1E28);
}

/*
 * No photo yet: the whole tile is solid maroon, name centred in cream serif.
 * A 4:3 spacer (sized from the column width) keeps it at least as tall as a
 * photo; the name sits in the same grid cell, centred on top of it.
 */
.fp-cat-tile--text {
	display: grid;
	place-items: center;
	padding: 20px;
	border-color: var(--fp-maroon, #7B1E28);
	background-color: var(--fp-maroon, #7B1E28);
	text-align: center;
}

.fp-cat-tile--text::before {
	content: "";
	grid-area: 1 / 1;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.fp-cat-tile--text .fp-cat-tile__name {
	grid-area: 1 / 1;
}

.fp-cat-tile--text:hover,
.fp-cat-tile--text:focus-visible {
	background-color: var(--fp-maroon-dark, #5E1620);
}

.fp-cat-tile--text .fp-cat-tile__name,
.fp-cat-tile--text:hover .fp-cat-tile__name {
	padding: 0;
	color: var(--fp-cream, #F5EFE3);
	font-size: 1.375rem;
	line-height: 1.25;
}

/* Collapsed tile sections (too few stocked categories, or no stocked bands). */
.fp-tiles-collapsed {
	display: flex;
	justify-content: center;
}

/* Hide the section's Elementor heading and intro so only the button remains. */
:is(.e-con, .e-con-inner):has(> .elementor-widget-shortcode .fp-tiles-collapsed) > :is(.elementor-widget-heading, .elementor-widget-text-editor) {
	display: none;
}

/* collapse="hide": remove the whole top-level section. */
.elementor > .e-con:has(.fp-tiles-collapsed--hide) {
	display: none;
}

/* Phones: category tiles 2 x 2. */
@media (max-width: 599px) {
	.fp-cat-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.fp-cat-tile .fp-cat-tile__name {
		padding: 10px 12px 12px;
		font-size: 1rem;
	}

	.fp-cat-tile--text {
		padding: 12px;
	}

	.fp-cat-tile--text .fp-cat-tile__name {
		font-size: 1.125rem;
	}
}

/* ================================================================== */
/* Enquiry form (Fluent Forms #3 inside an element with class         */
/* fp-enquiry: Home, Contact, Custom Branding, Corporate Gifting).     */
/* Two columns from 768px: fields with class fp-half pair up, the rest */
/* span the row. Labels: 11px uppercase gold-deep (4.9:1 on white).    */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
.fp-enquiry .frm-fluent-form fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 20px;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (min-width: 768px) {
	.fp-enquiry .frm-fluent-form fieldset {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.fp-enquiry .frm-fluent-form fieldset > :not(.fp-half) {
		grid-column: 1 / -1;
	}
}

.fp-enquiry .frm-fluent-form .ff-el-group {
	margin-bottom: 20px;
}

.fp-enquiry .ff-el-input--label label {
	color: var(--fp-gold-deep);
	font-family: var(--fp-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Fluent's required asterisk is its "danger" red; keep it on-brand.
   Fluent's own selector is 4 classes deep, so this one needs 5. */
.fp-enquiry .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fp-enquiry .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	color: var(--fp-maroon);
}

.fp-enquiry .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px; /* tap target */
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 1rem; /* 16px: stops iOS zooming into the field */
}

.fp-enquiry textarea.ff-el-form-control {
	min-height: 112px;
	resize: vertical;
}

.fp-enquiry .ff-el-form-control::placeholder {
	color: color-mix(in srgb, var(--fp-charcoal) 55%, var(--fp-white));
	opacity: 1;
}

.fp-enquiry .ff-el-form-control:focus {
	border-color: var(--fp-maroon);
	outline: 2px solid var(--fp-maroon);
	outline-offset: 0;
	box-shadow: none;
}

/* Button, then "We reply the same day." beside it (moved there by frontend.js). */
.fp-enquiry .frm-fluent-form .ff_submit_btn_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 4px 0 0;
}

/* Fluent's clearfix pseudo-elements would become flex items and push the
   button 20px right (the gap). A flex row needs no clearfix. */
.fp-enquiry .frm-fluent-form .ff_submit_btn_wrapper::before,
.fp-enquiry .frm-fluent-form .ff_submit_btn_wrapper::after {
	content: none;
}

.fp-enquiry .frm-fluent-form .ff-btn-submit.fp-btn {
	min-height: 56px;
	padding: 0.9em 2.25em;
	border: 2px solid var(--fp-maroon);
	border-radius: var(--fp-radius);
	background-color: var(--fp-maroon);
	color: var(--fp-white);
	font-family: var(--fp-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	opacity: 1;
}

.fp-enquiry .frm-fluent-form .ff-btn-submit.fp-btn:hover,
.fp-enquiry .frm-fluent-form .ff-btn-submit.fp-btn:focus-visible {
	border-color: var(--fp-maroon-dark);
	background-color: var(--fp-maroon-dark);
	color: var(--fp-white);
}

/* Beats the field spacing (.frm-fluent-form .ff-el-group), which would lift it off centre. */
.fp-enquiry .frm-fluent-form .ff-el-group.fp-form-note,
.fp-enquiry .fp-form-note p {
	margin: 0;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

.fp-enquiry .ff-message-success {
	padding: 20px 24px;
	border: 0;
	border-left: 4px solid var(--fp-gold);
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
	box-shadow: none;
	color: var(--fp-charcoal);
}

@media (prefers-reduced-motion: reduce) {
	.fp-card,
	.fp-band-card,
	.fp-cat-tile {
		transition: none;
	}

	.fp-band-card:hover,
	.fp-band-card:focus-within {
		transform: none;
	}
}

/* ================================================================== */
/* Trust strip [fp_trust_strip]                                        */
/* Base = static and centred (used from 1100px, and as the safe        */
/* fallback). Below 1100px: pure-CSS marquee, or a swipeable row when  */
/* the visitor prefers reduced motion.                                 */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
.fp-trust {
	padding-block: 15px; /* was 22px: -30% */
	background-color: var(--fp-maroon);
	color: var(--fp-white);
}

/* Focus ring on the band itself: the viewport's edge mask would fade it. */
.fp-trust:has(.fp-trust__viewport:focus-visible) {
	outline: 2px solid var(--fp-gold);
	outline-offset: -2px;
}

.fp-trust__viewport {
	overflow: hidden;
	outline: none;
}

.fp-trust__track {
	display: flex;
	justify-content: center;
}

.fp-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The loop copy only exists for the marquee. */
.fp-trust__list--dup {
	display: none;
}

/* Spacing lives on the items (18px each side), so both copies of the list
   have identical widths and the -50% loop point lands exactly on a seam. */
.fp-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-inline: 18px;
	font-family: var(--fp-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.fp-trust__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--fp-gold);
}

@keyframes fp-trust-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 1100-1279px: the five items need 1116px at 18px spacing, so tighten to
   12px (~1056px) to keep them on one line. Full spacing returns at 1280px. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
	.fp-trust__item {
		padding-inline: 12px;
	}
}

/* Below 1100px (1099.98 avoids a gap at fractional widths from display scaling). */
@media (max-width: 1099.98px) {
	.fp-trust {
		padding-block: 14px; /* was 20px: -30% */
	}

	.fp-trust__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fp-maroon) 10%, var(--fp-maroon) 90%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, var(--fp-maroon) 10%, var(--fp-maroon) 90%, transparent 100%);
	}

	.fp-trust__track {
		width: max-content;
		justify-content: flex-start;
	}

	.fp-trust__list {
		flex-shrink: 0;
		flex-wrap: nowrap;
	}
}

/* Marquee: only when motion is fine with the visitor. */
@media (max-width: 1099.98px) and (prefers-reduced-motion: no-preference) {
	.fp-trust__list--dup {
		display: flex;
	}

	.fp-trust__track {
		animation: fp-trust-marquee 30s linear infinite;
	}

	.fp-trust__viewport:hover .fp-trust__track,
	.fp-trust__viewport:focus-within .fp-trust__track {
		animation-play-state: paused;
	}
}

/* Reduced motion: no animation; one copy in a swipeable row, scrollbar hidden. */
@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
	.fp-trust__track {
		padding-inline: 24px; /* first and last items clear the faded edges */
	}

	.fp-trust__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.fp-trust__viewport::-webkit-scrollbar {
		display: none;
	}
}

/* ================================================================== */
/* Featured gift card [fp_featured_gift] (Home hero photo)             */
/* Position is set by the theme (tokens.css, .fp-hero__media).         */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
/* Query container: the card lays out by its own width, not the viewport. */
.fp-feature-wrap {
	container-type: inline-size;
}

.fp-feature {
	position: relative; /* anchor for the stretched link */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 14px 18px;
	background-color: color-mix(in srgb, var(--fp-cream) 95%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow-md);
	color: var(--fp-charcoal);
}

.fp-feature p {
	margin: 0;
}

.fp-feature__text {
	flex: 1 1 10rem;
	min-width: 0;
}

/* gold-ink, not gold: small text on cream needs 4.5:1. */
.fp-feature__eyebrow {
	color: var(--fp-gold-ink);
	font-family: var(--fp-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.fp-feature__name {
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

.fp-feature__name a,
.fp-feature__name a:visited {
	color: var(--fp-charcoal);
	text-decoration: none;
}

.fp-feature__name a:hover {
	color: var(--fp-maroon);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The whole card is the link's hit area. */
.fp-feature__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--fp-radius);
}

.fp-feature__name a:focus-visible {
	outline: none;
}

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

.fp-feature__price {
	flex: 0 0 auto;
	text-align: right;
}

.fp-feature__amount {
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.fp-feature__amount span {
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text-sm);
	font-weight: 400;
}

.fp-feature__note {
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Narrow card (phones, and 900-1100px desktops): price drops under the name,
   left-aligned, amount and note on one line. */
@container (max-width: 379.98px) {
	.fp-feature__name {
		font-size: 1.125rem;
	}

	.fp-feature__price {
		flex-basis: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
		text-align: left;
	}
}

/* ================================================================== */
/* Branding techniques [fp_branding_grid] (Home, Custom Branding)      */
/* Cards: 4:3 photo, gold label top-left, heading, two lines of body.  */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
.fp-branding-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.fp-branding-card {
	display: flex;
	flex-direction: column;
}

.fp-branding-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--fp-radius);
	box-shadow: var(--fp-shadow-card);
}

.fp-branding-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Gold chip: charcoal on gold is 4.5:1, readable over any photo. */
.fp-branding-card__label {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 2px;
	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.4;
	text-transform: uppercase;
}

.fp-branding-card .fp-branding-card__heading {
	margin: 16px 0 6px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

.fp-branding-card__body {
	margin: 0;
	color: var(--fp-charcoal);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/*
 * Home: the Custom Branding section (class fp-branding) hides while the grid
 * has no complete card, and the older teaser (class fp-branding-teaser)
 * shows in its place. The first complete card swaps them.
 */
.e-con.fp-branding:not(:has(.fp-branding-grid)) {
	display: none;
}

body:has(.fp-branding-grid) .e-con.fp-branding-teaser {
	display: none;
}

/* ================================================================== */
/* Home gift grid [fp_home_gifts]                                      */
/* Rows of up to 4 (2 tablet, 1 phone). Wrapping flex, not a grid, so  */
/* 1-3 gifts, or a short last row, sit centred instead of leaving      */
/* empty columns. Cards are the shared .fp-card.                       */
/* ================================================================== */
.fp-home-gifts__grid {
	--fp-home-gifts-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fp-home-gifts-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-home-gifts__item {
	display: flex;
	flex: 0 1 100%;
	min-width: 0;
}

.fp-home-gifts__item > .fp-card {
	flex: 1;
}

@media (min-width: 640px) {
	.fp-home-gifts__item {
		flex-basis: calc((100% - var(--fp-home-gifts-gap)) / 2);
	}
}

@media (min-width: 1100px) {
	.fp-home-gifts__item {
		flex-basis: calc((100% - 3 * var(--fp-home-gifts-gap)) / 4);
	}
}

.fp-home-gifts__more {
	margin: 40px 0 0;
	text-align: center;
}

/* No qualifying gift: the shortcode prints nothing and the section goes. */
.e-con.fp-home-gifts-section:not(:has(.fp-home-gifts__grid)) {
	display: none;
}

/* ================================================================== */
/* Gift Finder [fp_gift_finder]                                        */
/* Progress bar, stage chips, one question card at a time, then the    */
/* live "Gifts in this range" panel below it. Option rows are labels   */
/* around visually hidden radios: 56px minimum, keyboard-operable.     */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
/* Tool pages (Gift finder): no hero, no catalogue rail — just a small head
   and the tool, in the tool's own column with a gutter on phones. The
   template is Elementor Full Width, which adds no container of its own. */
.fp-page-tool {
	max-width: 760px;
	margin-inline: auto;
	padding: 40px 16px 64px;
}

.fp-page-tool .fp-finder {
	max-width: none;
}

.fp-page-tool .fp-page-head__title {
	margin: 0 0 8px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.75rem;
	line-height: 1.2;
}

.fp-page-tool .fp-page-head__intro {
	margin: 0 0 28px;
	color: color-mix(in srgb, var(--fp-charcoal) 74%, var(--fp-white));
	font-size: 1rem;
}

.fp-finder {
	max-width: 760px;
	margin-inline: auto;
	color: var(--fp-charcoal);
}

.fp-finder [hidden] {
	display: none !important;
}

.fp-finder p {
	margin: 0;
}

/* Progress */
.fp-finder__progress {
	margin-bottom: 16px;
}

.fp-finder__progress-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	font-size: var(--fp-text-sm);
	font-weight: 600;
}

.fp-finder__progress-top [data-fp-percent] {
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-weight: 500;
}

.fp-finder__bar {
	--fp-finder-pct: 0%;
	position: relative;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--fp-cream-mid);
}

.fp-finder__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--fp-finder-pct);
	border-radius: inherit;
	background-color: var(--fp-maroon);
	transition: width 0.3s ease;
}

/* Stage chips: current highlighted, completed clickable, future disabled. */
.fp-finder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.fp-finder .fp-finder__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px; /* tap target */
	padding: 6px 14px 6px 6px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 18%, transparent);
	border-radius: 999px;
	background-color: var(--fp-white);
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	line-height: 1;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fp-finder .fp-finder__chip:disabled {
	color: color-mix(in srgb, var(--fp-charcoal) 60%, var(--fp-white));
	cursor: default;
}

.fp-finder__chip-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--fp-cream-mid);
	color: var(--fp-charcoal);
	font-size: 0.8125rem;
}

.fp-finder .fp-finder__chip.is-done {
	border-color: var(--fp-gold);
}

.fp-finder .fp-finder__chip.is-done .fp-finder__chip-num {
	background-color: var(--fp-gold);
}

.fp-finder .fp-finder__chip.is-done:not(:disabled):hover,
.fp-finder .fp-finder__chip.is-done:not(:disabled):focus {
	background-color: var(--fp-cream);
	color: var(--fp-maroon);
}

.fp-finder .fp-finder__chip.is-current {
	border-color: var(--fp-maroon);
	background-color: var(--fp-maroon);
	color: var(--fp-white);
}

.fp-finder .fp-finder__chip.is-current .fp-finder__chip-num {
	background-color: var(--fp-cream);
	color: var(--fp-maroon);
}

.fp-finder .fp-finder__chip:focus-visible,
.fp-finder .fp-finder__back:focus-visible {
	outline: 3px solid var(--fp-gold);
	outline-offset: 2px;
}

/* Question card */
.fp-finder__card {
	padding: 32px;
	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-md);
}

.fp-finder__step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.fp-finder .fp-finder__eyebrow {
	margin-bottom: 8px;
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-finder .fp-finder__title {
	margin: 0 0 8px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
	line-height: 1.2;
}

.fp-finder__title:focus {
	outline: none;
}

.fp-finder .fp-finder__help {
	margin-bottom: 24px;
	color: color-mix(in srgb, var(--fp-charcoal) 78%, var(--fp-white));
}

/* Options: full-width rows, name + optional line left, tick right. */
.fp-finder__options {
	display: grid;
	gap: 10px;
}

.fp-finder__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 18%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fp-finder__option:hover {
	border-color: var(--fp-gold);
}

/* The radio stays in the page for keyboard and screen readers, just unseen. */
.fp-finder__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

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

.fp-finder__option:has(.fp-finder__radio:checked) {
	border-color: var(--fp-maroon);
	background-color: var(--fp-cream);
}

.fp-finder__option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fp-finder__option-name {
	font-weight: 600;
	line-height: 1.3;
}

.fp-finder__option-line {
	overflow: hidden;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The checkbox square: empty until chosen, then a maroon tick. */
.fp-finder__tick {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid color-mix(in srgb, var(--fp-charcoal) 35%, transparent);
	border-radius: 4px;
	background-color: var(--fp-white);
	color: transparent;
}

.fp-finder__option:has(.fp-finder__radio:checked) .fp-finder__tick {
	border-color: var(--fp-maroon);
	color: var(--fp-maroon);
}

.fp-finder .fp-finder__note {
	margin-top: 16px;
	padding: 12px 16px;
	border-left: 3px solid var(--fp-gold);
	background-color: var(--fp-cream);
	font-size: var(--fp-text-sm);
}

/* Text and date fields (step 4, email form). */
.fp-finder__fields {
	display: grid;
	gap: 16px;
}

@media (min-width: 640px) {
	.fp-finder__fields {
		grid-template-columns: 1fr 1fr;
	}
}

.fp-finder__field label {
	display: block;
	margin-bottom: 6px;
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-finder__field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 1rem; /* 16px: stops iOS zooming into the field */
}

.fp-finder__field input:focus {
	border-color: var(--fp-maroon);
	outline: 2px solid var(--fp-maroon);
	outline-offset: 0;
}

/* Back bottom-left; "Step X of 4" and Continue bottom-right. */
.fp-finder__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
}

.fp-finder .fp-finder__back {
	min-height: 44px;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--fp-maroon);
	font-family: var(--fp-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.fp-finder .fp-finder__back:hover,
.fp-finder .fp-finder__back:focus {
	background: none;
	color: var(--fp-maroon-dark);
	text-decoration: underline;
}

.fp-finder__nav-end {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.fp-finder__count {
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

.fp-finder .fp-finder__next:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.fp-finder .fp-finder__error {
	margin-top: 12px;
	color: var(--fp-maroon);
	font-weight: 600;
}

/* Live match panel, below the card. */
.fp-finder__match {
	margin-top: 24px;
	padding: 24px;
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
}

.fp-finder .fp-finder__match-title {
	margin: 0 0 16px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
}

.fp-finder__gifts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two classes: page content styles underline links with .page-content a. */
.fp-finder .fp-finder__gift,
.fp-finder .fp-finder__gift:visited {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	overflow: hidden;
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	box-shadow: var(--fp-shadow-card);
	color: var(--fp-charcoal);
	text-decoration: none;
}

.fp-finder__gift:hover .fp-finder__gift-name {
	color: var(--fp-maroon);
	text-decoration: underline;
}

.fp-finder__gift img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fp-product-ratio);
	padding: var(--fp-product-pad);
	background-color: var(--fp-product-bg);
	object-fit: contain;
}

.fp-finder__gift-name {
	padding: 8px 12px 0;
	font-family: var(--fp-font-heading);
	font-weight: 600;
	line-height: 1.3;
}

.fp-finder__gift-price {
	padding: 0 12px 12px;
	color: var(--fp-maroon);
	font-size: var(--fp-text-sm);
	font-weight: 600;
}

.fp-finder .fp-finder__specs {
	margin-top: 16px;
	color: color-mix(in srgb, var(--fp-charcoal) 78%, var(--fp-cream));
	font-size: var(--fp-text-sm);
}

/* Result screen */
.fp-finder__result:focus {
	outline: none;
}

.fp-finder .fp-finder__headline {
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
	line-height: 1.15;
}

.fp-finder .fp-finder__lede {
	color: color-mix(in srgb, var(--fp-charcoal) 78%, var(--fp-white));
	font-size: 1.0625rem;
}

/* Fact chips: quantity, city, date, minimum order. */
.fp-finder__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 28px;
	padding: 0;
	list-style: none;
}

.fp-finder__fact {
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 45%, transparent);
	border-radius: 999px;
	background-color: var(--fp-cream);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	line-height: 1.3;
}

/* Gift cards: 3 across, stacked on phones. */
.fp-finder__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.fp-finder__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fp-finder__rcard {
	position: relative; /* anchors the badge */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 12%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	box-shadow: var(--fp-shadow-card);
}

.fp-finder__rcard .fp-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	max-width: calc(100% - 20px);
}

.fp-finder__rcard-media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fp-product-ratio);
	padding: var(--fp-product-pad);
	background-color: var(--fp-product-bg);
	object-fit: contain;
}

.fp-finder__rcard-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 16px;
}

.fp-finder .fp-finder__also {
	margin-bottom: 4px;
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fp-finder .fp-finder__rcard-title {
	margin: 0;
	font-family: var(--fp-font-heading);
	font-size: 1.125rem;
	line-height: 1.3;
}

.fp-finder .fp-finder__rcard-title a,
.fp-finder .fp-finder__rcard-title a:visited {
	color: var(--fp-charcoal);
	text-decoration: none;
}

.fp-finder .fp-finder__rcard-title a:hover,
.fp-finder .fp-finder__rcard-title a:focus-visible {
	color: var(--fp-maroon);
	text-decoration: underline;
}

.fp-finder .fp-finder__sku,
.fp-finder .fp-finder__moq {
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: 0.8125rem;
}

.fp-finder .fp-finder__rcard-price {
	margin-top: 4px;
	font-size: var(--fp-text-sm);
}

.fp-finder__rcard-price strong {
	color: var(--fp-maroon);
	font-size: 1rem;
}

.fp-finder__contents {
	margin: 8px 0 0;
	padding: 10px 0 0 18px;
	border-top: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.fp-finder__contents li::marker {
	color: var(--fp-gold);
}

/* CTA block */
.fp-finder__cta {
	padding: 20px;
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
}

.fp-finder .fp-finder__cta-line {
	margin-bottom: 16px;
}

.fp-finder__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fp-finder__actions .fp-btn {
	min-height: 52px;
}

/* Page content underlines links (.page-content a); buttons never. */
.fp-finder a.fp-btn,
.fp-finder a.fp-btn:visited,
.fp-finder a.fp-btn:hover {
	text-decoration: none;
}

.fp-finder__cta .fp-btn--secondary {
	background-color: var(--fp-white);
}

.fp-finder__email {
	display: grid;
	gap: 16px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
}

/* Slab table, last. The note sits above the table in full size: it is the
   basis of every number below it. Scrolls sideways inside its own box on phones. */
.fp-finder__slabs {
	margin-top: 32px;
}

.fp-finder .fp-finder__slabs-title {
	margin: 0 0 6px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.375rem;
}

.fp-finder .fp-finder__slabs-note {
	margin-bottom: 14px;
	padding: 10px 14px;
	border-left: 3px solid var(--fp-gold);
	background-color: var(--fp-cream);
	font-size: 0.9375rem;
	font-weight: 600;
}

.fp-finder__table-wrap {
	overflow-x: auto;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
	-webkit-overflow-scrolling: touch;
}

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

.fp-finder__table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: separate; /* collapse lets scrolled cells show beside the sticky column */
	border-spacing: 0;
	font-size: 0.9375rem;
}

.fp-finder__table th,
.fp-finder__table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--fp-charcoal) 10%, transparent);
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

.fp-finder__table thead th {
	background-color: var(--fp-cream);
	color: var(--fp-charcoal);
	font-size: 0.8125rem;
	font-weight: 600;
}

.fp-finder__table tbody tr:last-child > * {
	border-bottom: 0;
}

.fp-finder__table tbody th {
	font-weight: 600;
	white-space: normal;
}

.fp-finder__table-gift {
	display: block;
}

.fp-finder__table-sku {
	display: block;
	color: color-mix(in srgb, var(--fp-charcoal) 65%, var(--fp-white));
	font-size: 0.75rem;
	font-weight: 500;
}

/* Gift column stays put while the rates scroll sideways (phones). */
.fp-finder__table thead th:first-child,
.fp-finder__table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 1px 0 0 color-mix(in srgb, var(--fp-charcoal) 12%, transparent);
}

.fp-finder__table tbody th {
	min-width: 150px;
	max-width: 180px;
}

/* Phones hide scrollbars, so say the table scrolls. Hidden where it fits. */
.fp-finder .fp-finder__table-hint {
	display: none;
	margin-top: 8px;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: 0.8125rem;
}

@media (max-width: 639.98px) {
	.fp-finder .fp-finder__table-hint {
		display: block;
	}

	/* Result buttons full width and stacked: no two-line button labels. */
	.fp-finder__actions .fp-btn,
	.fp-finder__email-actions .fp-btn {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
	}

	.fp-finder__actions .fp-btn {
		padding-inline: 16px;
		font-size: 15px; /* "Get slab pricing on WhatsApp" fits one line from 390px; two below that */
	}

	.fp-finder__cta {
		padding: 16px;
	}

	/* The progress bar already says "Step X of 4": drop the repeat so Back and
	   Continue share one row. */
	.fp-finder__count {
		display: none;
	}
}

.fp-finder__table td.is-quote {
	color: color-mix(in srgb, var(--fp-charcoal) 65%, var(--fp-white));
	font-style: italic;
}

/* Zebra rows: the table's background differs from the white card. */
.fp-finder__table tbody tr:nth-child(odd) > * {
	background-color: var(--fp-white);
}

.fp-finder__table tbody tr:nth-child(even) > * {
	background-color: color-mix(in srgb, var(--fp-cream) 45%, var(--fp-white));
}

.fp-finder .fp-finder__hp {
	position: absolute;
	left: -9999px;
}

.fp-finder__status {
	font-weight: 600;
}

.fp-finder .fp-finder__restart {
	margin-top: 20px;
}

.fp-finder__noscript {
	padding: 16px;
	background-color: var(--fp-cream);
}

@media (max-width: 639.98px) {
	.fp-finder__card {
		padding: 24px 16px;
	}

	.fp-finder__match {
		padding: 20px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-finder__bar-fill,
	.fp-finder__option,
	.fp-finder .fp-finder__chip {
		transition: none;
	}
}

/* ================================================================== */
/* Catalogue [fp_gift_grid]                                            */
/* Sticky filter rail beside the grid; the bar carries the count,      */
/* search and sort; "Load more" instead of pagination. Filtering and   */
/* sorting happen in assets/js/catalogue.js: without it the controls   */
/* are hidden and every gift is listed.                                */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
/* Hello styles buttons with display, which would beat the hidden attribute. */
.fp-cat [hidden] {
	display: none !important;
}

html:not(.fp-js) .fp-cat__rail,
html:not(.fp-js) .fp-cat__controls,
html:not(.fp-js) .fp-cat__more {
	display: none;
}

/* Editorial copy. The intro sits above the rail and grid; the long copy on
   an archive sits under the products so it never pushes them down the page.
   Both are absent from the DOM or hidden when the term has none, so neither
   can leave a gap behind. */
.fp-cat__intro,
.fp-archive__below {
	max-width: 70ch;
	margin: 0 0 28px;
	color: color-mix(in srgb, var(--fp-charcoal) 82%, var(--fp-white));
}

.fp-archive__below {
	margin: 48px 0 0;
}

.fp-cat__intro p,
.fp-archive__below p {
	margin: 0 0 12px;
}

.fp-cat__intro p:last-child,
.fp-archive__below p:last-child {
	margin-bottom: 0;
}

.fp-cat [hidden],
.fp-cat__intro[hidden] {
	display: none !important;
}

.fp-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (min-width: 1024px) {
	.fp-cat {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 40px;
	}

	/* Clears the fixed header (tokens.css sets --fp-header-h). */
	.fp-cat__rail {
		position: sticky;
		top: calc(var(--fp-header-h, 80px) + 24px);
	}
}

/* Filter rail */
.fp-cat__rail {
	display: grid;
	gap: 24px;
	padding: 20px;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 35%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
}

.fp-cat__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.fp-cat .fp-cat__group legend {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 0 0 8px;
	border-bottom: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
	color: var(--fp-gold-deep);
	font-family: var(--fp-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-cat__check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px; /* tap target */
	cursor: pointer;
}

.fp-cat__check input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--fp-maroon);
}

.fp-cat__check span {
	font-size: 0.9375rem;
	line-height: 1.3;
}

.fp-cat__check:hover span:first-of-type {
	color: var(--fp-maroon);
}

.fp-cat__count-badge {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--fp-cream);
	color: color-mix(in srgb, var(--fp-charcoal) 75%, var(--fp-white));
	font-size: 0.75rem;
	font-weight: 600;
}

.fp-cat__specs {
	margin: 0;
	padding: 14px;
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
	color: var(--fp-charcoal);
	font-size: var(--fp-text-sm);
	line-height: 1.5;
}

.fp-cat .fp-cat__reset {
	justify-self: start;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fp-maroon);
	font-family: var(--fp-font-body);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.fp-cat .fp-cat__reset:hover,
.fp-cat .fp-cat__reset:focus {
	background: none;
	color: var(--fp-maroon-dark);
}

/* Bar: count on the left, search and sort on the right. */
.fp-cat__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.fp-cat .fp-cat__count {
	margin: 0;
	color: color-mix(in srgb, var(--fp-charcoal) 75%, var(--fp-white));
	font-size: 0.9375rem;
}

.fp-cat__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fp-cat .fp-cat__control {
	display: grid;
	gap: 4px;
	margin: 0;
}

.fp-cat__control label {
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-cat__control input,
.fp-cat__control select {
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	color: var(--fp-charcoal);
	font-family: var(--fp-font-body);
	font-size: 1rem; /* 16px: stops iOS zooming into the field */
}

.fp-cat__control input {
	width: 220px;
	max-width: 100%;
}

.fp-cat__control input:focus,
.fp-cat__control select:focus {
	border-color: var(--fp-maroon);
	outline: 2px solid var(--fp-maroon);
	outline-offset: 0;
}

/* Cards: 1 / 2 / 3 across. */
.fp-cat__grid {
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.fp-cat__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.fp-cat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fp-cat__item {
	display: flex;
	min-width: 0;
}

.fp-cat__item > .fp-card {
	flex: 1;
}

.fp-cat__more {
	margin: 28px 0 0;
	text-align: center;
}

.fp-cat__empty {
	margin-top: 0;
}

/* ================================================================== */
/* Single gift page (templates/single-gift.php)                        */
/* Left: 4:5 image with thumbnails. Right: everything a buyer decides  */
/* on — contents, slab pricing, branding add-ons, dispatch, CTAs.      */
/* Every value comes from the gift's fields.                           */
/* Colours: tokens.css only (no hex, no fallbacks).                    */
/* ================================================================== */
/* Category on the left, MOQ pill on the right, sharing one baseline.
   The summary is a gapless flex column, so each block sets its own margin. */
.fp-gift__top-line {
	display: flex;
	margin: 0 0 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fp-gift__eyebrow {
	margin: 0;
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-gift .fp-gift__sku {
	margin: 0 0 14px;
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

.fp-gift__chip {
	display: inline-block;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 45%, transparent);
	border-radius: 999px;
	background-color: var(--fp-cream);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* Name: serif maroon, tight leading. */
.fp-gift .fp-gift__title {
	margin: 0 0 8px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 2.25rem;
	line-height: 1.12;
}

/* "from ₹950 per piece" on one baseline, GST chip alongside. */
.fp-gift .fp-gift__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 22px;
	font-size: inherit;
}

.fp-gift__price-from {
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

.fp-gift__price-amount {
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 2rem;
	line-height: 1;
}

.fp-gift__price-unit {
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

.fp-gift__price-chip {
	margin-left: auto;
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--fp-cream);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* The chosen variant has no price (and the gift has no main price). */
.fp-gift .fp-gift__price[hidden] {
	display: none;
}

/* Slab table or its "on quote" line, whichever the chosen variant needs. */
.fp-gift [data-fp-slab-table][hidden],
.fp-gift [data-fp-slab-quote][hidden] {
	display: none;
}

/* Variants: a radio group under the price. The radios are visually hidden
   but stay focusable, so arrow keys work; the swatch or pill next to each
   draws its checked and focus states. */
.fp-variants {
	min-width: 0;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.fp-variants__legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--fp-charcoal);
	font-size: var(--fp-text-sm);
	font-weight: 600;
}

.fp-variants__chosen {
	font-weight: 400;
}

.fp-variants__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fp-variant {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.fp-variant__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	opacity: 0;
}

/* Colour: a 36px round swatch with its name underneath. The ring sits 3px
   out, so a white or cream swatch still reads as selected. */
.fp-variants--swatch .fp-variant {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 56px;
	text-align: center;
}

.fp-variant__swatch {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: 50%;
	background-color: var(--fp-swatch, transparent);
	box-shadow: 0 0 0 3px var(--fp-white), 0 0 0 4px transparent;
	transition: box-shadow 0.15s ease;
}

.fp-variants--swatch .fp-variant__label {
	color: color-mix(in srgb, var(--fp-charcoal) 75%, var(--fp-white));
	font-size: 12px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.fp-variant:hover .fp-variant__swatch {
	box-shadow: 0 0 0 3px var(--fp-white), 0 0 0 4px color-mix(in srgb, var(--fp-charcoal) 35%, transparent);
}

.fp-variant__input:checked + .fp-variant__swatch {
	box-shadow: 0 0 0 3px var(--fp-white), 0 0 0 5px var(--fp-maroon);
}

.fp-variant__input:checked ~ .fp-variant__label {
	color: var(--fp-charcoal);
	font-weight: 600;
}

/* Other types: pills. */
.fp-variants--pill .fp-variant__label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 25%, transparent);
	border-radius: 999px;
	background-color: var(--fp-white);
	color: var(--fp-charcoal);
	font-size: var(--fp-text-sm);
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fp-variants--pill .fp-variant:hover .fp-variant__label {
	border-color: var(--fp-maroon);
}

.fp-variants--pill .fp-variant__input:checked + .fp-variant__label {
	border-color: var(--fp-maroon);
	background-color: var(--fp-maroon);
	color: var(--fp-white);
}

/* Keyboard focus: the gold ring the rest of the site uses. */
.fp-variant__input:focus-visible + .fp-variant__swatch,
.fp-variants--pill .fp-variant__input:focus-visible + .fp-variant__label {
	outline: 3px solid var(--fp-gold);
	outline-offset: 5px;
}

.fp-variants--pill .fp-variant__input:focus-visible + .fp-variant__label {
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fp-variant__swatch,
	.fp-variants--pill .fp-variant__label {
		transition: none;
	}
}

/* Boxed blocks down the right column. min-width:0 lets the grid column be
   narrower than the pricing table, so only the table scrolls sideways. */
.fp-gift__summary,
.fp-gift__box {
	min-width: 0;
}

/* The summary is a flex column whose items size to their content; the boxes
   must take the column width instead, or the pricing table widens the page. */
.fp-gift__summary > * {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

.fp-gift__box {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid color-mix(in srgb, var(--fp-gold) 30%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-cream);
}

.fp-gift .fp-gift__box-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: 1.25rem;
	line-height: 1.25;
}

.fp-gift__box-count {
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-family: var(--fp-font-body);
	font-size: var(--fp-text-sm);
	font-weight: 500;
}

/* Contents: two columns, quantity then item, gold check per row. */
.fp-gift__contents {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.fp-gift__contents {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fp-gift__contents li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.fp-gift__check {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--fp-gold);
}

.fp-gift__qty {
	font-weight: 600;
}

.fp-gift .fp-gift__note {
	margin: -6px 0 12px;
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
}

/* Supporting detail rather than a headline: the same cream box as the
   contents block, so the two read as a pair, but tighter. */
.fp-gift .fp-gift__box--supporting {
	padding: 14px 20px 16px;
}

.fp-gift .fp-gift__box--supporting .fp-gift__box-title {
	margin-bottom: 10px;
	font-size: 1.125rem;
}

/* Key features: one column with a gold disc, deliberately unlike the
   contents list's two columns and check icons, so the two never read as one
   list. Absent from the DOM when the field is empty. */
.fp-gift__features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-gift__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.fp-gift__features li::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-top: 0.5em;
	border-radius: 50%;
	background-color: var(--fp-gold);
}

/* Slab table: scrolls sideways on phones; the largest band is highlighted. */
.fp-gift__table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 12%, transparent);
	border-radius: var(--fp-radius);
	-webkit-overflow-scrolling: touch;
}

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

.fp-gift .fp-slab-table {
	width: 100%;
	min-width: 0; /* fits the column on desktop; scrolls on phones (below) */
	max-width: none; /* the shared [fp_slab_table] rule caps it at 420px */
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9375rem;
}

.fp-gift .fp-slab-table th,
.fp-gift .fp-slab-table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--fp-charcoal) 10%, transparent);
	text-align: left;
	vertical-align: top;
}

/* Quantity and price never wrap; the wordier columns may. */
.fp-gift .fp-slab-table td:nth-child(-n+2),
.fp-gift .fp-slab-table th:nth-child(-n+2) {
	white-space: nowrap;
}

@media (max-width: 639.98px) {
	.fp-gift .fp-slab-table {
		min-width: 520px;
	}

	.fp-gift .fp-slab-table th,
	.fp-gift .fp-slab-table td {
		white-space: nowrap;
	}
}

.fp-gift .fp-slab-table thead th {
	background-color: var(--fp-cream-mid);
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fp-gift .fp-slab-table tbody tr:last-child > td {
	border-bottom: 0;
}

/* Best rate on the page: the largest quantity band. Gold-ink on cream-dark
   is 5.1:1; plain gold would be 2.7:1. */
.fp-gift .fp-slab-table tbody tr.is-top > * {
	background-color: var(--fp-cream-dark);
	color: var(--fp-gold-ink);
	font-weight: 600;
}

/* Quantity column stays put while the rest scrolls sideways on phones.
   Each cell carries its own background, or the scrolled text shows through. */
.fp-gift .fp-slab-table th {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: var(--fp-cream);
	box-shadow: 1px 0 0 color-mix(in srgb, var(--fp-charcoal) 10%, transparent);
	text-align: left;
}

.fp-gift .fp-slab-table tbody th {
	font-weight: 600;
}

/* Branding add-ons: white cards, 2 x 2 from 480px up. Ticking one adds it
   to the WhatsApp message, so the ones included in the price start ticked. */
.fp-gift__addons {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.fp-gift__addons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fp-gift__addons li {
	display: flex;
	min-width: 0;
}

.fp-gift__addon {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-height: 56px; /* tap target */
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--fp-charcoal) 18%, transparent);
	border-radius: var(--fp-radius);
	background-color: var(--fp-white);
	cursor: pointer;
}

.fp-gift__addon:hover {
	border-color: var(--fp-gold);
}

/* Drawn box rather than the OS control, so the checked state is the maroon
   square the design asks for. The input keeps its native semantics. */
.fp-gift__addon input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 1.5px solid color-mix(in srgb, var(--fp-charcoal) 35%, transparent);
	border-radius: 4px;
	background-color: var(--fp-white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.fp-gift__addon input:checked {
	border-color: var(--fp-maroon);
	background-color: var(--fp-maroon);
	/* White tick, drawn inline so it needs no image file. */
	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%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.fp-gift__addon:has(input:checked) {
	border-color: var(--fp-maroon);
}

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

.fp-gift__addon-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fp-gift__addon-label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.fp-gift__addon-price {
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
	font-size: var(--fp-text-sm);
	font-weight: 500;
}

.fp-gift__addon--included .fp-gift__addon-price {
	color: var(--fp-gold-ink);
	font-weight: 600;
}

/* Dispatch note: grey box, truck icon, one line. */
.fp-gift .fp-gift__dispatch {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: var(--fp-radius);
	background-color: color-mix(in srgb, var(--fp-charcoal) 7%, var(--fp-white));
	font-size: 0.9375rem;
	line-height: 1.4;
}

.fp-gift .fp-gift__dispatch svg {
	flex-shrink: 0;
	color: color-mix(in srgb, var(--fp-charcoal) 75%, var(--fp-white));
}

/* Two CTAs, equal width, each with a sub-line. */
.fp-gift__cta {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	min-height: 64px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var(--fp-radius);
	text-align: center;
	text-decoration: none;
}

.fp-gift .fp-gift__cta:hover,
.fp-gift .fp-gift__cta:focus {
	text-decoration: none;
}

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

.fp-gift__cta-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
}

.fp-gift__cta-main svg {
	flex-shrink: 0;
}

.fp-gift__cta-sub {
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.85;
}

/* Charcoal on WhatsApp green is 7.1:1; white on it is 2:1 and fails. */
.fp-gift .fp-gift__cta--wa,
.fp-gift .fp-gift__cta--wa:hover,
.fp-gift .fp-gift__cta--wa:focus {
	background-color: var(--fp-whatsapp);
	color: var(--fp-charcoal);
}

.fp-gift .fp-gift__cta--wa:hover {
	background-color: color-mix(in srgb, var(--fp-whatsapp) 88%, var(--fp-charcoal));
}

.fp-gift .fp-gift__cta--quote,
.fp-gift .fp-gift__cta--quote:hover,
.fp-gift .fp-gift__cta--quote:focus {
	background-color: var(--fp-maroon);
	color: var(--fp-white);
}

.fp-gift .fp-gift__cta--quote:hover {
	background-color: var(--fp-maroon-dark);
}

/* Reassurance: three items, gold dots between them. */
.fp-gift .fp-gift__reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin: 0 0 10px;
	padding: 0;
	color: color-mix(in srgb, var(--fp-charcoal) 74%, var(--fp-white));
	font-size: var(--fp-text-sm);
	list-style: none;
}

.fp-gift .fp-gift__reassurance li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fp-gift .fp-gift__reassurance li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--fp-gold);
}

.fp-gift .fp-gift__spec {
	margin: 0;
	color: color-mix(in srgb, var(--fp-charcoal) 70%, var(--fp-white));
	font-size: 0.8125rem;
}

/* Badge sits over the main image. */
.fp-gallery__main {
	position: relative;
}

.fp-gallery__main .fp-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

/* Related gifts -----------------------------------------------------
   Eyebrow, heading and "View all gifts" on one line; 1 / 2 / 4 cards.
   Equal heights come from the grid: cards in a row stretch to the tallest
   and the foot is pushed down with margin-top:auto. In the single-column
   layout each card is its own grid row, so stacked cards keep their own
   height with no rule to undo.                                        */
.fp-related__eyebrow {
	margin: 0 0 6px;
	color: var(--fp-gold-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 0 0 24px;
}

.fp-related .fp-related__title {
	margin: 0;
	color: var(--fp-maroon);
	font-family: var(--fp-font-heading);
	font-size: var(--fp-h3, 1.75rem);
	line-height: 1.2;
}

.fp-related .fp-related__all {
	color: var(--fp-maroon);
	font-size: var(--fp-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.fp-related .fp-related__all:hover,
.fp-related .fp-related__all:focus-visible {
	text-decoration: underline;
}

.fp-related__grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.fp-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.fp-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Compact card: no WhatsApp button, and the whole card is the link.
   The title's link is stretched over the card, so there is still exactly
   one focusable link per card and the keyboard order stays sane. */
.fp-card--compact {
	position: relative;
}

.fp-card--compact .fp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.fp-card--compact:hover .fp-card__title a,
.fp-card--compact:focus-within .fp-card__title a {
	color: var(--fp-maroon);
}

.fp-card--compact:focus-within {
	outline: 3px solid var(--fp-gold);
	outline-offset: 2px;
}

/* Foot row: minimum order left, "View details" right, pinned to the
   bottom so the four cards line up along it. */
.fp-card .fp-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: auto 0 0; /* pinned to the foot, so the four rows align */
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--fp-charcoal) 10%, transparent);
	font-size: 0.75rem;
}

.fp-card__moq {
	color: color-mix(in srgb, var(--fp-charcoal) 72%, var(--fp-white));
}

.fp-card__more {
	color: var(--fp-maroon);
	font-weight: 600;
	white-space: nowrap;
}

.fp-card__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.fp-card--compact:hover .fp-card__arrow {
	transform: translateX(3px);
}

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

	.fp-card--compact:hover .fp-card__arrow {
		transform: none;
	}
}

/* Two lines of name, then an ellipsis, so the rows below stay aligned. */
.fp-card__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}