:root {
	--bfc-theme-colour: #7f54b3;
}

/*
 * WooCommerce's own price display (the base range price before a
 * variation is chosen, and the specific variation's own price once one
 * is) only ever reflects the bare product/variation price - it never
 * includes our own extra-flowers or Rush-order surcharge, so once our
 * wizard is on the page it's not just redundant, it's actively
 * misleading (a customer sees two different totals). Our own
 * `.bfc-price-summary` is the one true total. `:has()` scopes this to
 * only product pages that actually have the wizard.
 */
.summary.entry-summary:has( #bfc-builder ) > .price,
.summary.entry-summary:has( #bfc-builder ) .woocommerce-variation-price {
	display: none !important;
}

/*
 * The CGKit swatch plugin's own markup (Format, Frame Color) - relocated
 * into Step 1 by frontend.js, but not restyled until now. `!important`
 * throughout: the plugin ships fixed 110px inline-block swatches that
 * just wrap however many fit, which is why the count-per-row was
 * inconsistent; this forces an explicit 4-per-row (desktop/tablet) /
 * 2-per-row (mobile) grid instead, and makes the selected state
 * unmistakable (a 1px border was easy to miss against a busy image).
 *
 * Scoped via `.summary.entry-summary:has( #bfc-builder )` rather than
 * `#bfc-variation-target` on purpose: the swatches only end up nested
 * inside #bfc-variation-target after frontend.js physically moves them
 * there, and some CSS optimizers (e.g. LiteSpeed's "Remove Unused CSS")
 * decide what to keep from a static/JS-less snapshot of the page - a
 * selector that only matches after a JS move looks "unused" to that scan
 * and gets stripped from what real visitors receive. #bfc-builder and the
 * swatches both exist in that static snapshot (just not yet nested), so
 * scoping to the product summary column keeps the rule visible to that
 * kind of scan while still only affecting this plugin's own swatches.
 */
.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.6em !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0.4em 0 0 !important;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch {
	position: relative;
	display: block !important;
	width: calc( 25% - 0.45em ) !important;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-swatch {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	border: 2px solid #ddd !important;
	border-radius: 8px !important;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-swatch.cgkit-swatch-selected {
	border: 3px solid var( --bfc-theme-colour ) !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}

/*
 * `:not(.cgkit-image)` here on purpose: an `.cgkit-image` row gets its own
 * `::after` below (the label text) - a single element can only have one
 * `::after`, and per-property cascade rules mean without this exclusion
 * BOTH rules would apply simultaneously property-by-property (this badge's
 * `position/width/height` winning against the label rule's `content`),
 * squeezing the label text into a tiny corner circle instead of showing
 * either cleanly.
 */
.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch:not( .cgkit-image ):has( .cgkit-swatch-selected )::after {
	content: "✓";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --bfc-theme-colour );
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
}

/*
 * "Choose your finish" - the image-bearing swatch groups only (Format,
 * Frame Colour: CGKit marks these `.cgkit-image`), restyled as full-width
 * bordered rows (small thumbnail + label) instead of a grid cell, matching
 * the reference layout. A plain text/pill attribute (e.g. Print Size,
 * marked `.cgkit-button` by CGKit) has no meaningful thumbnail and stays
 * exactly as it already is - the rules above still apply to it unchanged;
 * these ones only add on top for `.cgkit-image`, via higher specificity.
 * The label text comes from CGKit's own `data-cgkit-tooltip` attribute
 * (already present per swatch, confirmed via live DOM inspection) rather
 * than anything JS-added, so it's real static markup a CSS optimizer's
 * "unused CSS" scan will always see.
 */
.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch.cgkit-image {
	display: flex !important;
	align-items: center;
	gap: 1em;
	width: 100% !important;
	padding: 0.7em 1em;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch.cgkit-image::after {
	content: attr( data-cgkit-tooltip );
	font-weight: 700;
	font-size: 0.98em;
	color: #2b2b2b;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch.cgkit-image .cgkit-swatch {
	width: 56px !important;
	height: 56px !important;
	flex: 0 0 auto;
	border: none !important;
	box-shadow: none !important;
	border-radius: 6px !important;
}

.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch.cgkit-image:has( .cgkit-swatch-selected ) {
	border: 2px solid var( --bfc-theme-colour );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

@media ( max-width: 600px ) {
	.summary.entry-summary:has( #bfc-builder ) .cgkit-attribute-swatch:not( .cgkit-image ) {
		width: calc( 50% - 0.3em ) !important;
	}

	/*
	 * Each month has exactly two flowers (option_a/option_b), added to the
	 * grid back-to-back - a fixed 2-column layout keeps every pair on its
	 * own row so the "these two belong to the same month" grouping stays
	 * visible. `auto-fill` (used above 600px) doesn't guarantee that: at
	 * phone widths it was fitting 3 across, splitting pairs across rows.
	 */
	.bfc-flower-all-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.bfc-builder {
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
	max-width: 100%;
	box-sizing: border-box;
}

.bfc-builder * {
	box-sizing: border-box;
}

.bfc-field {
	margin-bottom: 1em;
}

.bfc-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.bfc-field input[type="text"],
.bfc-field textarea {
	width: 100%;
	max-width: 420px;
	padding: 0.5em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
}

.bfc-field textarea {
	resize: vertical;
}

/*
 * "Personalise it" fields (artwork title, quote, special requests) are
 * collapsed behind a checkbox by default and only reveal their input once
 * checked - pure CSS via `:has()`, matching the pattern already used
 * elsewhere in this file (no JS class-toggle involved), so the reveal
 * works even before frontend.js runs and can't be affected by a CSS
 * optimizer that only "sees" JS-added classes as unused.
 */
.bfc-reveal-field {
	margin-bottom: 1em;
}

.bfc-reveal-toggle {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 600;
	cursor: pointer;
}

.bfc-reveal-checkbox {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	cursor: pointer;
	accent-color: var( --bfc-theme-colour );
}

.bfc-reveal-content {
	display: none;
	margin-top: 0.6em;
	padding-left: 1.75em;
}

.bfc-reveal-field:has( .bfc-reveal-checkbox:checked ) .bfc-reveal-content {
	display: block;
}

#bfc-variation-target {
	margin-bottom: 1em;
}

.bfc-style-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-bottom: 1em;
}

.bfc-style-card {
	flex: 1 1 182px; /* 130px base, 40% bigger to match the image below */
	max-width: 238px; /* 170px base, 40% bigger */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	font: inherit;
	transition: border-color 0.15s ease;
}

.bfc-style-card.is-selected {
	border-color: var( --bfc-theme-colour );
	background: #f7f2fb;
}

.bfc-style-card-img {
	width: 100%;
	max-width: 185px; /* 132px, 40% bigger again per the user's ask */
	height: 185px;
	object-fit: contain;
	border-radius: 4px;
}

.bfc-style-card-label {
	font-weight: 600;
}

.bfc-production-options {
	margin-top: 0.4em;
}

/* ---- Production "Rush order" toggle ---- */

/*
 * !important throughout this block: .bfc-toggle-row is a <label> (needed
 * so clicking anywhere on the card toggles the checkbox natively), and
 * WooCommerce/theme stylesheets very commonly reset bare `label` elements
 * to `display: block` - which, without these, silently wins over our own
 * flex layout and stacks the icon/text/switch vertically instead of in a
 * row.
 */
.bfc-toggle-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.85em;
	padding: 1em 1.2em;
	background: #fff;
	border: 1px solid #e5d9cf;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bfc-toggle-row.is-active {
	background: #fdf1e7;
	border-color: #f0a35f;
}

.bfc-toggle-icon {
	flex: 0 0 auto !important;
	font-size: 1.3em;
	line-height: 1;
}

.bfc-toggle-text {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2em;
}

.bfc-toggle-title {
	font-weight: 700;
}

.bfc-toggle-sub {
	font-size: 0.85em;
	color: #767676;
}

.bfc-toggle-switch {
	position: relative;
	flex: 0 0 auto !important;
	display: inline-block !important;
	width: 46px;
	height: 26px;
}

.bfc-toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.bfc-toggle-slider {
	position: absolute;
	inset: 0;
	background: #d6d6d6;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.bfc-toggle-slider::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s ease;
}

.bfc-toggle-switch input:checked + .bfc-toggle-slider {
	background: #f0883e;
}

.bfc-toggle-switch input:checked + .bfc-toggle-slider::before {
	transform: translateX( 20px );
}

.bfc-toggle-switch input:focus-visible + .bfc-toggle-slider {
	outline: 2px solid var( --bfc-theme-colour );
	outline-offset: 2px;
}

/* ---- Section grouping ---- */

/*
 * Deliberately flat, not boxed - a full background+border panel per
 * section, nested inside the flower-slot card, inside the section,
 * inside the wizard, was stacking up to five visible borders around the
 * same small strip of content (worst on mobile, where every one of those
 * borders' padding also ate into the already-tight width). The colored
 * title bar (::before below) is enough to tell sections apart; a light
 * divider plus real breathing room does the rest.
 */
/*
 * No `:last-child` exemption on purpose: which section is visually last
 * depends on which optional sections exist (variation/colour) and whether
 * production is enabled, and `:last-child` doesn't know about the
 * `hidden` attribute - it would just as easily match a hidden section
 * that happens to be last in the DOM. `.bfc-price-summary`'s own
 * `margin-top` supplies the closing space instead, so every visible
 * section keeps the same consistent divider.
 */
.bfc-section {
	padding: 0 0 1.5em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid #eee;
}

.bfc-section[hidden] {
	display: none;
}

/*
 * Every section header is a numbered badge + bold title, so the customer
 * can see at a glance how many sections there are and where they are in
 * them without any step-by-step navigation - the numbers themselves are
 * written in by BFCWizard.renumberSections() so a hidden section (no
 * variation step, or a single-colour style) never leaves a gap.
 */
.bfc-section-heading {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.9em;
}

.bfc-section-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var( --bfc-theme-colour );
	color: #fff;
	font-size: 1em;
	font-weight: 800;
	line-height: 1;
}

.bfc-section-heading-text {
	font-size: 1.25em;
	font-weight: 800;
	color: #2b2b2b;
}

.bfc-flower-hint {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	background: #fff;
	border: 1px dashed #c9a8e0;
	border-radius: 4px;
	font-size: 0.9em;
	color: #555;
}

.bfc-flowers-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 1em;
}

.bfc-flower-slot {
	padding: 1em;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
}

.bfc-flower-slot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: -1em -1em 1em;
	padding: 0.65em 1em;
	background: #f0eaf7;
	border-bottom: 2px solid var( --bfc-theme-colour );
	border-radius: 8px 8px 0 0;
}

.bfc-flower-slot-title {
	font-weight: 800;
	font-size: 1.1em;
	color: var( --bfc-theme-colour );
}

.bfc-flower-edit-footer {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 0.5em;
}

.bfc-cancel-flower {
	color: #757575;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: 0.9em;
	text-decoration: underline;
}

/* ---- Compact ("added to bouquet") row ---- */

.bfc-flower-compact {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.bfc-flower-compact-index {
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --bfc-theme-colour );
	color: #fff;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 700;
}

.bfc-flower-compact-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.bfc-flower-compact-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: break-word;
}

.bfc-flower-compact-name--empty {
	font-weight: 400;
	font-style: italic;
	color: #888;
}

.bfc-flower-compact-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 0.25em;
}

.bfc-icon-btn {
	width: 2em;
	height: 2em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
}

.bfc-icon-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---- Flower picker grid ---- */

.bfc-flower-all-grid-wrap {
	margin-bottom: 1em;
}

.bfc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.bfc-flower-all-hint {
	margin: 0 0 0.75em;
	font-size: 0.85em;
	font-style: italic;
	color: #666;
}

.bfc-flower-all-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 90px, 1fr ) );
	gap: 0.6em;
	max-height: 420px;
	overflow-y: auto;
	/* A little padding+bottom fade, not a full box - the individual
	   card borders below are enough of a boundary; this just keeps
	   scroll-clipped cards from touching the very edge. */
	padding: 0.1em 0.1em 0.75em;
}

.bfc-flower-all-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	padding: 0.5em;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	cursor: pointer;
	text-align: center;
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bfc-flower-all-card.is-selected {
	border-color: var( --bfc-theme-colour );
	background: #f7f2fb;
}

.bfc-flower-all-card-img {
	width: 100%;
	max-width: 64px;
	height: 64px;
	object-fit: contain;
}

.bfc-flower-all-card-month {
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
}

.bfc-flower-all-card-label {
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.2;
}

/*
 * Deliberately an OUTLINE style, not filled - "Add another flower" and
 * "Add to Artwork" sat right next to each other as two solid buttons of
 * the same colour and were easy to mix up. !important guards against the
 * theme's own .button styling (which is what made them look identical in
 * the first place) winning the cascade back.
 */
.bfc-add-flower {
	background: #fff !important;
	color: #c1584f !important;
	border: 2px solid #e2a29c !important;
	box-shadow: none !important;
}

.bfc-add-flower:hover,
.bfc-add-flower:focus {
	background: #fdf3f2 !important;
	border-color: #c1584f !important;
}

.bfc-flowers-footer {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

.bfc-flower-count {
	margin: 0;
	color: #555;
	font-size: 0.95em;
}

.bfc-pricing-info {
	display: inline-flex;
}

.bfc-section-heading .bfc-help-icon,
.bfc-field label .bfc-help-icon {
	margin-left: 0.4em;
	vertical-align: middle;
}

.bfc-help-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: #e3d3f0;
	color: #46467a;
	font-size: 0.85em;
	font-weight: 700;
	cursor: help;
}

.bfc-help-panel {
	display: none;
	position: absolute;
	z-index: 10;
	bottom: 130%;
	/* Centered under the icon so it can't run off either screen edge. */
	left: 50%;
	transform: translateX( -50% );
	width: max-content;
	max-width: min( 240px, calc( 100vw - 24px ) );
	padding: 0.75em 1em;
	background: #2c2c2c;
	color: #fff;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	white-space: normal;
	cursor: auto;
}

.bfc-help-icon:hover .bfc-help-panel,
.bfc-help-icon:focus .bfc-help-panel {
	display: block;
}

.bfc-help-panel--image {
	padding: 0.5em;
	max-width: min( 280px, calc( 100vw - 24px ) );
}

.bfc-help-panel--image img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	border-radius: 3px;
}

.bfc-help-panel-link {
	color: #8ce0a0;
	text-decoration: underline;
}

.bfc-error {
	color: #d63638;
	background: #fcf0f1;
	border: 1px solid #d63638;
	border-radius: 4px;
	padding: 0.6em 0.9em;
	margin-bottom: 1em;
}

.bfc-price-summary {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	background: #f9f5fc;
	border: 1px solid #e3d3f0;
	border-radius: 8px;
	font-size: 1.15em;
	font-weight: 700;
}

.bfc-price-summary-label {
	margin-right: 0.35em;
}

.bfc-computed-price {
	font-size: 1.2em; /* 20% bigger than the surrounding summary text */
	font-weight: 800;
	color: var( --bfc-theme-colour );
}

.bfc-price-breakdown {
	margin: 0.4em 0 0;
	font-size: 0.75em;
	font-weight: 400;
	color: #666;
}

.bfc-learn-more-link {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0;
	background: none;
	border: none;
	color: var( --bfc-theme-colour );
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	vertical-align: middle;
}

.bfc-learn-more-link:hover,
.bfc-learn-more-link:focus {
	text-decoration: none;
}

/* ---- Lead-time modal ---- */

.bfc-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.5 );
}

.bfc-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	padding: 1.75em;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
}

.bfc-modal-close {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 50%;
	font-size: 1.4em;
	line-height: 1;
	color: #666;
	cursor: pointer;
}

.bfc-modal-close:hover,
.bfc-modal-close:focus {
	background: #f0f0f0;
}

.bfc-modal-title {
	margin: 0 0 0.6em;
	padding-right: 1.5em;
	font-size: 1.3em;
	font-weight: 800;
}

.bfc-modal-list {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

.bfc-modal-list li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

.bfc-modal-estimate {
	padding: 1em 1.2em;
	background: #fdf1e7;
	border: 1px solid #f0a35f;
	border-radius: 8px;
}

.bfc-modal-estimate-label {
	margin: 0 0 0.3em;
	font-size: 0.85em;
	font-weight: 600;
	color: #767676;
}

.bfc-modal-estimate-line {
	margin: 0;
	font-size: 1.15em;
	font-weight: 800;
	color: #b5651d;
}

.bfc-modal-estimate-hint,
.bfc-modal-format-hint {
	margin: 0.4em 0 0;
	font-size: 0.8em;
	color: #767676;
}

.bfc-modal-urgent {
	margin: 1.2em 0 0;
	line-height: 1.6;
}

.bfc-modal-urgent a {
	color: var( --bfc-theme-colour );
}

.bfc-modal-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 100px, 1fr ) );
	gap: 8px;
	margin-top: 1em;
}

.bfc-modal-gallery img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 6px;
}

.bfc-final-step-note {
	margin: 1.2em 0 0;
	padding: 0.75em 1em;
	background: #f3f9ee;
	border: 1px solid #cfe8bd;
	border-radius: 6px;
	color: #3d6b28;
	font-weight: 600;
	font-size: 0.92em;
}

.bfc-admin-warning {
	padding: 0.8em 1em;
	background: #fcf9e8;
	border: 1px solid #dba617;
	border-radius: 4px;
	margin-bottom: 1em;
}

@media ( max-width: 480px ) {
	.bfc-field input[type="text"] {
		max-width: 100%;
	}

	/*
	 * On a narrow phone screen, index + thumbnail + 4 icon buttons already
	 * eat most of the row width, leaving barely any room for the name
	 * itself (the actual bug report - names were unreadable). Wrapping the
	 * actions onto their own line gives the name the full row width
	 * instead.
	 */
	.bfc-flower-compact {
		flex-wrap: wrap;
	}

	.bfc-flower-compact-actions {
		flex: 1 1 100%;
		justify-content: flex-end;
		margin-top: 0.4em;
	}

	.bfc-style-card {
		flex: 1 1 140px; /* 100px base, 40% bigger to match the image above */
	}
}