/**
 * Flourish — supplementary styles.
 *
 * theme.json handles colour, type and spacing. This file covers only what it
 * cannot: the marquee animation, the hatched image placeholders, the facet
 * sidebar, and the layout of the dynamic blocks.
 *
 * Everything is scoped to .flourish-* classes or WooCommerce block classes, so
 * it will not fight core block styles.
 */

/* ---------------------------------------------------------------------------
   Tokens mirrored from theme.json for use inside this file.
   --------------------------------------------------------------------------- */

:root {
	--flourish-hatch: repeating-linear-gradient(135deg, #20241f 0px, #20241f 12px, #242a23 12px, #242a23 24px);
}

/* ---------------------------------------------------------------------------
   Base niceties
   --------------------------------------------------------------------------- */

body {
	text-wrap: pretty;

	/* The marquee is deliberately 100vw wide, which is a hair wider than the
	   content area once a scrollbar is present. Clip rather than scroll. */
	overflow-x: hidden;
}

::selection {
	background: #cdb6a4;
	color: #161714;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where(summary):focus-visible,
:where([tabindex]):focus-visible {
	outline: 2px solid #cdb6a4;
	outline-offset: 2px;
}

/* Inputs: the dark field treatment, applied once. */
.flourish-facets input[type="text"],
.wp-block-search__input,
.wc-block-components-text-input input {
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	color: #eae5d9;
	font-family: inherit;
	padding: 0.8rem 0.9rem;
}

/* ---------------------------------------------------------------------------
   Marquee
   --------------------------------------------------------------------------- */

.flourish-marquee {
	background: #cdb6a4;
	color: #161714;
	overflow: hidden;
	padding: 1rem 0;

	/* Full-bleed, self-contained.
	   WordPress emits `.has-global-padding > .alignfull { margin-left/right }`
	   which is two classes deep and therefore beats a single `.flourish-marquee`
	   selector — that is why earlier attempts landed on one side only. These
	   margins have to win outright, hence !important. calc(50% - 50vw) is the
	   standard breakout: pull back half the parent, push out half the viewport.
	   Safe because the band is decorative (aria-hidden) and body clips overflow. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	display: flex;
}

.flourish-marquee-track {
	display: flex;
	flex: 0 0 auto;
	animation: flourish-slide 38s linear infinite;
	will-change: transform;
}

.flourish-marquee-track > span {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: "Instrument Serif", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.5rem, 3vw, 2.375rem);
	padding-right: 2.25rem;
}

@keyframes flourish-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.flourish-marquee-track {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
   Hatched placeholders — drop-in markers for photography.
   Delete these rules once every slot has a real image.
   --------------------------------------------------------------------------- */

.flourish-hatch {
	background: var(--flourish-hatch);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 20rem;
}

.flourish-hatch--hero    { min-height: clamp(21rem, 52vh, 39rem); }
.flourish-hatch--square  { aspect-ratio: 1 / 1; min-height: 0; }
.flourish-hatch--tile    { min-height: 12.5rem; margin: 0; }
.flourish-hatch--wide    { grid-column: span 2; }

/* Hero image fills its half of the split exactly. The copy column sets the row
   height; the image is pinned inside its own column so it can never drive it. */
.flourish-hero-media {
	align-self: stretch;
	position: relative;
	min-height: 0;
	padding: 0;
}

.flourish-hero-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.flourish-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Stacked on narrow viewports, where there is no adjacent column to match. */
@media (max-width: 781px) {
	.flourish-hero-media {
		position: static;
		min-height: 20rem;
	}

	.flourish-hero-image {
		position: static;
		height: 20rem;
	}
}

.flourish-hatch-note {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: #7d8a7f;
	line-height: 1.7;
	padding: 0 1.5rem;
	margin: 0;
}

.flourish-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	background: var(--flourish-hatch);
	font-family: ui-monospace, monospace;
	font-size: 0.6875rem;
	color: #7d8a7f;
}

.flourish-photo-cluster {
	gap: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Eyebrows, headings, small type
   --------------------------------------------------------------------------- */

.flourish-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8fa693;
	margin: 0 0 0.75rem;
}

.flourish-heading-italic {
	font-family: "Instrument Serif", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.05;
	margin: 0 0 1.125rem;
}

.flourish-dim   { color: #8f8b80; }
.flourish-notes { font-size: 0.875rem; line-height: 1.7; color: #8f8b80; }

.flourish-link-arrow a {
	border-bottom: 1px solid #4b5c4f;
	padding-bottom: 0.375rem;
}

.flourish-section-head {
	margin-bottom: 2.25rem;
}

/* Ticked lists in the membership pattern. */
.flourish-ticks {
	list-style: none;
	padding: 0;
	/* margin:0 killed the gap core puts between this and the paragraph above,
	   so the bullets ran straight into the last line of copy. */
	margin: 1.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.flourish-ticks li {
	display: flex;
	gap: 0.875rem;
	font-size: 0.9375rem;
	color: #d6d2c6;
}

.flourish-ticks li::before {
	content: "✦";
	color: #cdb6a4;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Trope grid
   --------------------------------------------------------------------------- */

.flourish-trope-tile {
	margin: 0;
}

.flourish-trope-tile a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1.375rem 1.5rem;
	border: 1px solid #2c2e28;
	background: #1b1f1b;
	font-size: 1rem;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.flourish-trope-tile a:hover {
	border-color: #4b5c4f;
	background: #20241f;
}

.flourish-trope-tile span {
	color: #8fa693;
}

/* ---------------------------------------------------------------------------
   Book cards (recommendations, and any grid using flourish_book_card)
   --------------------------------------------------------------------------- */

.flourish-grid {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.flourish-grid--books {
	/*
	 * Two covers per row on a phone. The floor is a percentage rather than a
	 * pixel value so the track can shrink: at 190px it only ever fits one
	 * column on a 375px screen, and a single cover filling the whole viewport
	 * makes the grid read as a list and kills the sense of a shelf.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 11.875rem), 1fr));
}

.flourish-card {
	display: flex;
	flex-direction: column;
	gap: 0.8125rem;
}

.flourish-card-media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--flourish-hatch);
}

.flourish-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.flourish-card:hover .flourish-card-media img {
	transform: scale(1.03);
}

.flourish-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.flourish-card-title {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.1875rem;
	line-height: 1.15;
}

.flourish-card-author { font-size: 0.8125rem; color: #8f8b80; }
.flourish-card-reason { font-size: 0.75rem;   color: #6e6a61; }
.flourish-card-price  { font-size: 0.875rem;  color: #cdb6a4; padding-top: 0.1875rem; }

.flourish-badge {
	position: absolute;
	top: 0.6875rem;
	left: 0.6875rem;
	background: #cdb6a4;
	color: #161714;
	padding: 0.3125rem 0.5625rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	z-index: 2;
}

/* Shop search, above the facets. */
.flourish-facet-search {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.flourish-facet-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: #1b1f1b;
	border: 1px solid #2c322c;
	color: #f7f2ec;
	padding: 0.5rem 0.625rem;
	font-size: 0.8125rem;
}

.flourish-facet-search button {
	background: #cdb6a4;
	color: #161714;
	border: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Header controls: one row, one baseline
   --------------------------------------------------------------------------- */

/*
 * The hamburger, search, account and cart each arrive from a different block
 * with its own padding and line-height, which is what made them read as
 * jumbled. Every control is normalised to the same 44px square box, centred, so
 * alignment comes from the box rather than from each icon's own metrics. 44px is
 * also the minimum touch target, so mobile gets it for free.
 */
.flourish-header-controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px;
}

.flourish-header-controls > * {
	display: flex;
	align-items: center;
	margin: 0;
}

.flourish-search-toggle,
.flourish-header-controls .wp-block-woocommerce-customer-account a,
.flourish-header-controls .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	color: #cdb6a4;
	line-height: 1;
	text-decoration: none;
}

/*
 * The hamburger gets the same 44px box, but only where it should exist at all.
 * It was previously sized in the rule above, which set `display: flex` on it at
 * every width and overrode the block's own `display: none` above 600px — this
 * theme's stylesheet loads later, so it won. Two visible symptoms, one cause: a
 * stray hamburger floating above the menu on desktop, and the nav items pushed
 * onto a second line, because core sets `flex-wrap: wrap` on the navigation
 * block and the button and the menu could not fit one row together.
 *
 * The breakpoint is the theme's, not the block's. Core switches the menu to an
 * overlay below 600px, but the full row — 162px logo, four top-level items, and
 * three icon controls — needs about 880px to fit on one line, so between 600 and
 * 880 the controls wrapped under the logo (the two-line header in the report).
 * Below 900px the menu therefore collapses into the hamburger and the header is
 * one line at every width. Core's inline layout is suppressed here rather than
 * in the block's own media query, which cannot be reached from a stylesheet.
 */
@media (max-width: 899px) {
	.flourish-header .flourish-header-controls .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Wedged against the logo the hamburger read as part of the wordmark. It
	   moves to the end of the row — search, account, cart, menu — where it also
	   sits nearest the thumb. Scoped to the widths where the button exists; the
	   desktop menu keeps its place at the start of the row. */
	.flourish-header-controls > nav.wp-block-navigation {
		order: 5;
	}

	.flourish-header-controls .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		color: #cdb6a4;
		line-height: 1;
	}
}

/* ---------------------------------------------------------------------------
   Mobile menu: collapsed by default

   The overlay opened with every submenu expanded — Shop alone carries twenty
   descendants across three nested levels, so the menu was about twenty-six rows
   and had to be scrolled before The Coven was reachable. A wall of text.

   The collapse itself is core's, switched on with `openSubmenusOnClick` in
   parts/header.html: each parent becomes a real <button aria-expanded> and its
   children stay hidden until pressed. Native, announced correctly, and keyboard
   operable, where a hand-rolled toggle would have had to fight the block's own
   interactivity for control of the same elements.

   Note this also changes desktop from hover-to-open to click-to-open. That is a
   deliberate second effect rather than a side effect: a three-level hover menu
   has no touch equivalent and is on the audit's list either way.

   Everything below is spacing and hit targets for the collapsed overlay. Four
   rows instead of twenty-six leaves room for each one to be tappable.
   --------------------------------------------------------------------------- */

.flourish-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 10px clamp(16px, 5vw, 28px) clamp(16px, 5vw, 28px);
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #2c2e28;
}

/* The row itself — link or submenu button — is the target, edge to edge. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 52px;
	padding: 0.5rem 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-align: left;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* Core rotates this on expand; give it room to be hit and to be seen. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 0 0 0.5rem;
	color: #8fa693;
}

/* Children: indented, quieter, and no border wrapper of their own — the parent
   row already reads as the group's heading. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	padding: 0 0 0.5rem 0.9rem;
	background: transparent;
	border: 0;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	min-height: 44px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0.04em;
	color: #b6b3a7;
}

/* The close button clears the first row rather than sitting on top of it. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 10px;
	right: clamp(16px, 5vw, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: #cdb6a4;
}

/* Clears the close button and nothing more. This used to be 52px on top of the
   container's own padding, which put the first row most of an inch down the
   screen on a phone. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	padding-top: 26px;
}

/* Collapsed by default; nav-accordion.js adds the class. The !important is
   answering core's own overlay rule, which forces submenus visible. */
.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	display: none !important;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.flourish-submenu-open > .wp-block-navigation__submenu-container {
	display: block !important;
}

.flourish-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.flourish-submenu-open > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

.flourish-search-toggle:hover,
.flourish-header-controls .wc-block-mini-cart__button:hover,
.flourish-header-controls .wp-block-woocommerce-customer-account a:hover {
	color: #f7f2ec;
}

/* The cart carries a price, so it is wider than a square and aligns by centre.
   The count badge is absolutely positioned off the icon's top-right corner and
   overhangs it, so the gap has to clear the badge, not the icon — at 8px the
   badge sat on top of the dollar sign. */
.flourish-header-controls .wc-block-mini-cart__button {
	gap: 16px;
	justify-content: flex-end;
}

.flourish-header-controls .wc-block-mini-cart__amount {
	font-size: 12px;
	letter-spacing: 0.06em;
}

.flourish-header-controls .wc-block-mini-cart__badge {
	margin: 0;
}

/* Icons differ by a pixel or two between blocks; one size settles it. */
.flourish-header-controls svg {
	width: 19px;
	height: 19px;
}

/*
 * The header row itself must never wrap. The flex group carries the block
 * editor's default `flex-wrap: wrap`, which is what let the controls drop to a
 * second line instead of the menu collapsing.
 *
 * The selector is deliberately shallow: a constrained group renders its children
 * directly, with no inner wrapper, so an earlier `.flourish-header > * > *`
 * version of this rule matched nothing and the header still broke in two.
 */
.flourish-header .wp-block-group.alignwide {
	flex-wrap: nowrap;
}

/* With no wrapping to fall back on, the logo is the item that yields — it scales
   down rather than pushing the controls off the edge. */
.flourish-header .wp-block-site-logo {
	flex: 0 1 auto;
	min-width: 0;
}

.flourish-header .wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

.flourish-header-controls {
	flex: 0 0 auto;
}

/*
 * Phone widths: the cart's running total is the one control wide enough to break
 * the single line at 320px (logo 104 + three 44px targets + the amount). The
 * badge still carries the item count, and the total is one tap away.
 */
@media (max-width: 480px) {
	.flourish-header-controls {
		gap: 12px;
	}

	.flourish-header-controls .wc-block-mini-cart__amount {
		display: none;
	}

	/* Without the amount the button is a square again, and right-alignment would
	   leave the badge hanging past the row's edge. */
	.flourish-header-controls .wc-block-mini-cart__button {
		gap: 0;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   Search overlay
   --------------------------------------------------------------------------- */

/*
 * Fixed, so opening search cannot shift the header or the page behind it. The
 * scroll lock removes the scrollbar, which would shift layout on its own, so
 * its width is added back as padding.
 */
.flourish-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	justify-content: center;
	padding: clamp(12px, 8vh, 96px) 16px 16px;
	background: rgba(10, 12, 10, 0.82);
	backdrop-filter: blur(3px);
	overscroll-behavior: contain;
}

.flourish-search-overlay[hidden] {
	display: none;
}

html.flourish-search-open {
	overflow: hidden;
	padding-right: var(--flourish-scrollbar, 0);
}

.flourish-search-panel {
	width: 100%;
	max-width: 620px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	background: #161714;
	border: 1px solid #2c322c;
}

.flourish-search-panel form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid #2c322c;
}

.flourish-search-panel-icon {
	flex: 0 0 auto;
	color: #cdb6a4;
}

.flourish-search-panel input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: #f7f2ec;
	font-size: 1.0625rem;
	padding: 6px 0;
	-webkit-appearance: none;
	appearance: none;
}

.flourish-search-panel input[type="search"]:focus {
	outline: none;
}

.flourish-search-panel input[type="search"]::placeholder {
	color: #7f8a7f;
}

.flourish-search-dismiss {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid #2c322c;
	color: #8f9a8f;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 8px;
	cursor: pointer;
}

.flourish-search-dismiss:hover {
	color: #f7f2ec;
	border-color: #cdb6a4;
}

.flourish-search-results {
	overflow-y: auto;
	padding: 6px 0 10px;
}

.flourish-search-group + .flourish-search-group {
	border-top: 1px solid #21261f;
	margin-top: 6px;
	padding-top: 6px;
}

.flourish-search-group-label {
	margin: 10px 16px 6px;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-search-hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	min-height: 44px;
	color: #f7f2ec;
	text-decoration: none;
}

.flourish-search-hit img {
	width: 34px;
	height: 48px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #21261f;
}

.flourish-search-hit-mark {
	width: 34px;
	height: 1px;
	flex: 0 0 auto;
	background: #3a4a3e;
}

.flourish-search-hit-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.flourish-search-hit-label {
	font-size: 0.9375rem;
	line-height: 1.3;
}

.flourish-search-hit-meta {
	font-size: 0.75rem;
	color: #8fa693;
}

.flourish-search-hit:hover,
.flourish-search-hit.is-active {
	background: #21261f;
}

.flourish-search-hit.is-active .flourish-search-hit-label {
	color: #cdb6a4;
}

.flourish-search-empty {
	margin: 0;
	padding: 18px 16px;
	font-size: 0.875rem;
	color: #b6b3a7;
}

.flourish-search-empty strong {
	color: #f7f2ec;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Coven membership: shirt size
   --------------------------------------------------------------------------- */

.flourish-coven-size {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 1.25rem;
}

.flourish-coven-size label {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-coven-size select,
.flourish-coven-size input[type="text"] {
	min-height: 44px;
	background: #1b1f1b;
	border: 1px solid #2c322c;
	color: #f7f2ec;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
}

.flourish-coven-size input[type="text"]::placeholder {
	color: #6f7a70;
}

.flourish-coven-size-note {
	margin: 0;
	max-width: 46ch;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #8f9a8f;
}

/*
 * The plan picker, matched to the size field above it: same label treatment,
 * same 44px control height, same surface and border. The Subscriptions plugin's
 * own dropdown is left in the DOM and hidden — a hidden control still submits,
 * so the plugin keeps owning the value.
 */
.flourish-plans-enhanced > *:not(.flourish-plan-picker) {
	display: none;
}

/*
 * And the select at any depth, in case the plugin nests it inside a wrapper the
 * rule above cannot reach — which is exactly what happened on first deploy.
 * Belt and braces: the script hides it inline too, so a stale cached script or
 * a stale cached stylesheet each still leave a clean page.
 */
.flourish-plans-enhanced select[name^="convert_to_sub_"] {
	display: none;
}

.flourish-plan-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 1.5rem;
}

.flourish-plan-picker-label {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-plan-picker-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* One column below 400px: two plans side by side stop being tappable. */
@media (max-width: 400px) {
	.flourish-plan-picker-options {
		grid-template-columns: 1fr;
	}
}

.flourish-plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	min-height: 64px;
	padding: 0.75rem 0.9rem;
	background: #1b1f1b;
	border: 1px solid #2c322c;
	color: #f7f2ec;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.flourish-plan:hover {
	border-color: #4b5c4f;
}

.flourish-plan.is-selected {
	border-color: #cdb6a4;
	background: #232821;
}

.flourish-plan-name {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-plan.is-selected .flourish-plan-name {
	color: #cdb6a4;
}

.flourish-plan-price {
	font-size: 1.0625rem;
	line-height: 1.2;
}

/* New releases earn the warm accent; everything else stays bone. */.flourish-badge-new {
	background: #9d6a4c;
	color: #f7f2ec;
}

/* Category, demoted below title and price on the shop card. */
.flourish-loop-category,
.flourish-loop-category a {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Product page: book details block
   --------------------------------------------------------------------------- */

.flourish-book-details {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	margin: 1.375rem 0;
}

.flourish-callout {
	background: #242f27;
	border-left: 2px solid #cdb6a4;
	padding: 1.125rem 1.25rem;
}

.flourish-callout p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #e5e0d4;
}

.flourish-field {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.flourish-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
}

.flourish-field h5 {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5625rem;
}

.flourish-chip {
	border: 1px solid #2c2e28;
	background: #1b1f1b;
	padding: 0.5625rem 0.875rem;
	font-size: 0.8125rem;
	color: #d6d2c6;
	transition: border-color 0.2s ease;
}

.flourish-chip:hover {
	border-color: #4b5c4f;
}

.flourish-spice {
	color: #cdb6a4;
	letter-spacing: 0.1em;
	font-size: 1rem;
}

/* Edition switcher: hardcover / paperback / signed for one work. */
.flourish-editions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.flourish-edition {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 11rem;
	padding: 0.5rem 0.875rem 0.5rem 0.5rem;
	border: 1px solid #2c2e28;
	background: #1b1f1b;
	color: #d6d2c6;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.flourish-edition:hover,
a.flourish-edition:focus-visible {
	border-color: #4b5c4f;
	background: #202520;
}

.flourish-edition--current {
	border-color: #6d8271;
	background: #232823;
	cursor: default;
}

.flourish-edition__cover {
	display: block;
	width: 2.25rem;
	height: auto;
	flex: 0 0 auto;
	border: 1px solid #2c2e28;
}

.flourish-edition__cover--empty {
	aspect-ratio: 2 / 3;
	background: #23271f;
}

.flourish-edition__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.3;
}

.flourish-edition__format {
	font-size: 0.8125rem;
}

.flourish-edition__price {
	font-size: 0.8125rem;
	color: #cdb6a4;
}

.flourish-edition__price del {
	opacity: 0.6;
	margin-right: 0.25rem;
}

.flourish-edition__note {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-edition--out .flourish-edition__cover {
	opacity: 0.55;
}

.flourish-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.375rem), 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
}

.flourish-specs dt {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
	margin-bottom: 0.3125rem;
}

.flourish-specs dd {
	margin: 0;
	font-size: 0.9375rem;
	color: #d6d2c6;
}

.flourish-preorder-note,
.flourish-stock-note {
	font-size: 0.875rem;
	color: #cdb6a4;
	margin: 0.75rem 0;
}

/* ---------------------------------------------------------------------------
   Series + author context row

   Either block can be absent — a standalone title has no series, a merch item
   has no author — so this is a grid that reflows rather than a fixed two-column
   layout with a hole in it.
   --------------------------------------------------------------------------- */

.flourish-book-context {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

/* ---------------------------------------------------------------------------
   Product story
   --------------------------------------------------------------------------- */

.flourish-story {
	border-top: 1px solid #2c2e28;
	padding-top: 1.75rem;
	margin-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* The shop's own take, as distinct from the publisher's description. Written as
   labelled selling points, so it renders as a list rather than a paragraph. */
.flourish-story-why {
	background: #1b1f1b;
	border-left: 2px solid #cdb6a4;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.flourish-story-why h5 {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-why-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Flex rather than grid: the label and the sentence after it are separate DOM
   nodes, and as grid items they were each assigned their own track — which
   collapsed the label to one character per line. Wrapping them in a single
   span and flexing keeps them as one run of text. */
.flourish-why-list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #d6d2c6;
}

.flourish-why-mark {
	flex: 0 0 auto;
	color: #cdb6a4;
}

.flourish-why-text {
	flex: 1 1 auto;
	min-width: 0;
}

.flourish-why-list li strong {
	color: #eae5d9;
	font-weight: 600;
}

.flourish-why-list li strong::after {
	content: " ";
}

.flourish-story-hook {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.4;
	color: #cdb6a4;
}

.flourish-story-heading {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 1.5rem;
}

.flourish-story-body {
	color: #b6b3a7;
	line-height: 1.75;
}

.flourish-story-body p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Author note
   --------------------------------------------------------------------------- */

.flourish-author-note {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	flex-wrap: wrap;
	background: #161714;
	border: 1px solid #2c2e28;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin: 0;
}

.flourish-author-photo {
	flex: 0 0 auto;
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--flourish-hatch);
}

.flourish-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flourish-author-body {
	flex: 1 1 14rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.flourish-author-body h5 {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-author-name {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.15;
}

.flourish-author-bio {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #b6b3a7;
}

.flourish-author-link {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #cdb6a4;
	margin-top: 0.25rem;
}

/* Legal row */
.flourish-legal-row a {
	color: #8f8b80;
}

.flourish-legal-row a:hover {
	color: #cdb6a4;
}

/* ---------------------------------------------------------------------------
   Membership page
   --------------------------------------------------------------------------- */

.flourish-perk {
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	height: 100%;
}

.flourish-perk h3 {
	margin: 0;
}

.flourish-perk p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.flourish-tier {
	position: relative;
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	padding: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.flourish-tier.is-featured {
	border-color: #cdb6a4;
}

.flourish-tier-flag {
	position: absolute;
	top: -0.6875rem;
	left: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
	background: #cdb6a4;
	color: #161714;
	padding: 0.25rem 0.75rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.flourish-tier-price {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 2.75rem;
	line-height: 1;
	color: #cdb6a4;
}

.flourish-tier-price span {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 0.9375rem;
	color: #8f8b80;
	letter-spacing: 0.02em;
}

.flourish-tier p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.flourish-tier .wp-block-buttons {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Series strip
   --------------------------------------------------------------------------- */

.flourish-series-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.flourish-series-item {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	padding: 1.125rem 0;
	border-top: 1px solid #2c2e28;
	flex-wrap: wrap;
}

.flourish-series-number {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.375rem;
	color: #8fa693;
	flex: 0 0 auto;
	min-width: 2rem;
}

.flourish-series-title {
	flex: 1 1 10rem;
	min-width: 0;
	font-size: 1.0625rem;
}

.flourish-series-state {
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: #cdb6a4;
}

.flourish-series-item.is-current {
	background: #1b1f1b;
	padding-inline: 1rem;
}

.flourish-series-item.is-current .flourish-series-title {
	color: #cdb6a4;
}

/* ---------------------------------------------------------------------------
   Faceted sidebar
   --------------------------------------------------------------------------- */

.flourish-facets {
	display: flex;
	flex-direction: column;
	gap: 2.125rem;
	position: sticky;
	top: 5.625rem;
}

.flourish-facets-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid #2c2e28;
}

.flourish-facets-head h5 {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #cdb6a4;
}

.flourish-facets-head a {
	font-size: 0.75rem;
	color: #8f8b80;
	text-decoration: underline;
}

.flourish-facet {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/* Groups read as a stack of sections rather than one continuous list. */
.flourish-facet + .flourish-facet {
	padding-top: 1.5rem;
	border-top: 1px solid #2c2e28;
}

.flourish-facet[data-collapsed="true"] .flourish-facet-option.is-extra {
	display: none;
}

.flourish-facet-more {
	align-self: flex-start;
	margin-top: 0.125rem;
	padding: 0.25rem 0;
	background: none;
	border: 0;
	color: #8fa693;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.flourish-facet-more:hover {
	color: #cdb6a4;
}

.flourish-facet legend {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa693;
	padding: 0;
	margin-bottom: 0.25rem;
}

.flourish-facet-option {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	font-size: 0.9375rem;
	color: #d6d2c6;
	padding: 0.1875rem 0;
}

.flourish-facet-box {
	flex: 0 0 auto;
	width: 0.9375rem;
	height: 0.9375rem;
	border: 1px solid #4b5c4f;
	background: transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.flourish-facet-option.is-active .flourish-facet-box {
	background: #cdb6a4;
	border-color: #cdb6a4;
}

.flourish-facet-option.is-active .flourish-facet-label {
	color: #cdb6a4;
}

/* Filter tap feedback: the page reloads, so the tapped option flips at once
   and the rest of the panel dims until the new results arrive. */
.flourish-facet-option.is-pending .flourish-facet-box {
	background: #cdb6a4;
	border-color: #cdb6a4;
	animation: flourish-facet-pulse 0.9s ease-in-out infinite;
}

.flourish-facet-option.is-active.is-pending .flourish-facet-box {
	background: transparent;
}

.flourish-facet-option.is-pending .flourish-facet-label {
	color: #eae5d9;
}

.flourish-facets.is-loading .flourish-facet-option:not(.is-pending),
.flourish-facets.is-loading .flourish-facet-more,
.flourish-facets.is-loading .flourish-facets-clear {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.flourish-facets-loading {
	font-size: 0.8125rem;
	color: #8fa693;
	letter-spacing: 0.04em;
	margin: 0.25rem 0 0.75rem;
}

@keyframes flourish-facet-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

.flourish-facet-label {
	flex: 1 1 auto;
	min-width: 0;
}

.flourish-facet-count {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	color: #6e6a61;
	font-variant-numeric: tabular-nums;
}

.flourish-spice-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.flourish-spice-button {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: grid;
	place-items: center;
	border: 1px solid #2c2e28;
	color: #d6d2c6;
	font-size: 0.875rem;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.flourish-spice-button:hover  { border-color: #4b5c4f; }
.flourish-spice-button.is-active {
	background: #cdb6a4;
	border-color: #cdb6a4;
	color: #161714;
}

.flourish-price-range {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.flourish-price-range input {
	flex: 1 1 0;
	min-width: 0;
}

.flourish-price-range button {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid #4b5c4f;
	color: #eae5d9;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.8rem 1rem;
	cursor: pointer;
}

.flourish-facet-toggle {
	background: transparent;
	border: 1px solid #4b5c4f;
	color: #eae5d9;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.625rem 0.875rem;
	min-height: 2.75rem;
	cursor: pointer;
}

/* Mobile: sidebar becomes a collapsible panel. */
@media (max-width: 781px) {
	.flourish-facets {
		position: static;
	}

	.flourish-facets[data-collapsed="true"] .flourish-facet {
		display: none;
	}
}

.flourish-facet-all {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Pagination — shop, category, trope and tag archives
   Same vocabulary as the facet options: 44px hit targets, thin rules, no fills.
   --------------------------------------------------------------------------- */

.wp-block-query-pagination {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 3rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid #2c2e28;
	font-size: 0.875rem;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid #2c2e28;
	border-radius: 2px;
	color: #d8d4c8;
	text-decoration: none;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-numbers {
	display: inline-flex;
	gap: 0.375rem;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: #8fa693;
	color: #fff;
}

.wp-block-query-pagination .page-numbers.current {
	border-color: #c9a27e;
	color: #c9a27e;
	font-weight: 600;
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 1.5rem;
	padding: 0;
	color: #8f8b80;
}

/* Arrow-only prev/next: the word is for screen readers. */
.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow {
	margin: 0;
	font-size: 1.125rem;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-size: 0;
	padding: 0;
	width: 44px;
}

.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow {
	font-size: 1.125rem;
}

@media (max-width: 781px) {
	.wp-block-query-pagination {
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	.wp-block-query-pagination-numbers {
		gap: 0.25rem;
	}

	/* Fit 5 boxes + 2 arrows on a 360px screen. */
	.wp-block-query-pagination .page-numbers,
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		min-width: 40px;
		padding: 0 0.5rem;
	}

	.wp-block-query-pagination .page-numbers.dots {
		min-width: 1rem;
		padding: 0;
	}

	/* Phones keep first, last, current and its neighbours; the rest collapse. */
	.wp-block-query-pagination .page-numbers:not(.current):not(.dots):not(:first-child):not(:last-child) {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Sort bar
   --------------------------------------------------------------------------- */

.flourish-sort-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.125rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #2c2e28;
}

.flourish-sort-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.flourish-sort-form label {
	flex: 0 0 auto;
	/* The select is wide enough to squeeze the label into a flex item narrower
	   than the word, which broke "Sort" across two lines. */
	white-space: nowrap;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-sort-form select {
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	color: #eae5d9;
	font-family: inherit;
	font-size: 0.875rem;
	padding: 0.625rem 0.875rem;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Event rows and cards
   --------------------------------------------------------------------------- */

.flourish-event-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.875rem, 3vw, 2.75rem);
	padding: 1.625rem 0;
	border-top: 1px solid #3a4a3e;
}

/* Upcoming event cards — events archive.
   Media column is an Instagram embed, a featured image, or nothing at all;
   the text-only modifier drops the grid to a single column so a card with no
   media does not sit next to an empty half. */
.flourish-upcoming {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 3.4vw, 3rem);
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

.flourish-upcoming-head,
.flourish-upcoming-month-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.flourish-upcoming-head {
	border-bottom: 1px solid var(--wp--preset--color--line, #2c2e28);
	padding-bottom: 1.25rem;
}

.flourish-upcoming-month {
	display: flex;
	flex-direction: column;
	gap: clamp(1.125rem, 2.4vw, 1.625rem);
}

.flourish-upcoming-month-head {
	align-items: baseline;
	justify-content: flex-start;
	gap: 1rem;
}

.flourish-upcoming-label {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
	color: var(--wp--preset--color--blush, #cdb6a4);
}

.flourish-upcoming-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--line, #2c2e28);
	background: var(--wp--preset--color--panel, #1b1f1b);
}

.flourish-upcoming-card--text {
	grid-template-columns: minmax(0, 1fr);
}

.flourish-upcoming-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: clamp(1.125rem, 2.4vw, 1.625rem);
}

.flourish-upcoming-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flourish-upcoming-embed {
	width: 100%;
	max-width: 25rem;
	border: 1px solid #3a4a3e;
	box-shadow: 0 0 0 6px var(--wp--preset--color--ground, #20241f);
	background: #fff;
}

.flourish-upcoming-embed iframe {
	display: block;
	width: 100%;
	height: 47.5rem;
	border: 0;
}

.flourish-upcoming-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.375rem, 3vw, 2.125rem);
}

.flourish-upcoming-tags {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.flourish-upcoming-kind {
	border: 1px solid #5c7061;
	padding: 0.375rem 0.75rem;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blush-warm, #e2c4b1);
}

.flourish-upcoming-when {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--blush, #cdb6a4);
}

.flourish-upcoming-title {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.625rem, 3vw, 2.375rem);
	line-height: 1.08;
}

.flourish-upcoming-title a { color: inherit; }

.flourish-upcoming-blurb {
	margin: 0;
	max-width: 52ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted, #b6b3a7);
	text-wrap: pretty;
}

.flourish-upcoming-facts {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	font-size: 0.875rem;
	color: #9fb6a5;
}

.flourish-upcoming-cost { color: #8f8b80; }

.flourish-upcoming-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding-top: 0.25rem;
}

.flourish-upcoming-cta,
.flourish-upcoming-alt {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.flourish-upcoming-cta {
	padding: 0.875rem 1.75rem;
	background: var(--wp--preset--color--bone, #eae5d9);
	color: var(--wp--preset--color--ground, #161714);
	font-weight: 600;
}

.flourish-upcoming-alt {
	padding: 0.875rem 1.5rem;
	border: 1px solid #4b5c4f;
	color: inherit;
}

.flourish-past-events {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.6vw, 1.875rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding-top: clamp(2rem, 4vw, 3.25rem);
	border-top: 1px solid var(--wp--preset--color--line, #2c2e28);
}

.flourish-past-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.flourish-past-month {
	display: grid;
	grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	border: 1px solid #24261f;
	background: #191c18;
	padding: clamp(1.25rem, 2.6vw, 1.875rem);
}

@media (max-width: 600px) {
	.flourish-past-month { grid-template-columns: minmax(0, 1fr); }
}

.flourish-past-label {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	color: #8fa693;
}

.flourish-past-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-width: 0;
}

.flourish-past-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #24261f;
}

.flourish-past-body {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	min-width: 0;
}

.flourish-past-title { font-size: 1.0625rem; line-height: 1.35; color: #cfcabd; }
.flourish-past-venue { font-size: 0.875rem; color: #7d8a7f; }

.flourish-past-link {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8f8b80;
	border-bottom: 1px solid #33362e;
	padding-bottom: 0.25rem;
}

.flourish-event-date {
	flex: 0 0 auto;
	min-width: 4.875rem;
	display: flex;
	flex-direction: column;
}

.flourish-event-day {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.625rem;
	line-height: 1.1;
}

.flourish-event-dow {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9fb6a5;
}

.flourish-event-body {
	flex: 1 1 12.5rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.flourish-event-title { font-size: 1.1875rem; }
.flourish-event-meta  { font-size: 0.875rem; color: #9fb6a5; }

.flourish-event-aside {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.125rem;
	flex-wrap: wrap;
}

.flourish-tag {
	border: 1px solid #5c7061;
	padding: 0.4375rem 0.875rem;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e2c4b1;
	white-space: nowrap;
}

.flourish-event-link {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.flourish-event-card .flourish-event-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flourish-tag-list a {
	border: 1px solid #5c7061;
	padding: 0.375rem 0.75rem;
	color: #e2c4b1;
}

/* ---------------------------------------------------------------------------
   Cart add-ons
   --------------------------------------------------------------------------- */

.flourish-addons {
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.flourish-addons h3 { margin: 0; }
.flourish-addons > p { margin: 0; font-size: 0.875rem; }

.flourish-addon-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.flourish-addon {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	background: #161714;
	border: 1px solid #2c2e28;
	flex-wrap: wrap;
}

.flourish-addon-thumb {
	flex: 0 0 auto;
	width: 2.625rem;
	height: 2.625rem;
	background: var(--flourish-hatch);
	overflow: hidden;
}

.flourish-addon-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flourish-addon-name {
	flex: 1 1 8rem;
	min-width: 0;
	font-size: 0.9375rem;
}

.flourish-addon-price {
	flex: 0 0 auto;
	font-size: 0.9375rem;
	color: #cdb6a4;
}

.flourish-addon-add {
	flex: 0 0 auto;
	border: 1px solid #4b5c4f;
	padding: 0.625rem 1rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	min-height: 2.75rem;
	display: grid;
	place-items: center;
}

/* Capped rather than full-width: spanning the whole column made the bar read as
   a decorative rule instead of a meter. */
.flourish-shipping-progress {
	max-width: 30rem;
	font-size: 1.0625rem;
	color: #cdb6a4;
	padding: 0.875rem 0;
}

.flourish-shipping-progress.is-met {
	color: #8fa693;
}

.flourish-shipping-progress__label {
	margin: 0 0 0.75rem;
	font-size: inherit;
	color: inherit;
	line-height: 1.4;
}

/* The amount gets the display treatment the front page gives "feral" and
   "20% off any book": Instrument Serif, italic, blush. Held at blush rather than
   currentColor because the met state carries no amount to recolour. */
.flourish-shipping-progress__amount {
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	font-size: 1.625rem;
	line-height: 1;
	color: #cdb6a4;
	white-space: nowrap;
}

/* The fill takes currentColor, so the is-met colour change carries the bar with
   it and there is one place to change either. */
.flourish-shipping-progress__track {
	box-sizing: border-box;
	height: 10px;
	background: rgba( 205, 182, 164, 0.1 );
	border: 1px solid rgba( 205, 182, 164, 0.28 );
	overflow: hidden;
}

.flourish-shipping-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: currentColor;
	transition: width 0.45s ease;
}

.flourish-shipping-progress__target {
	margin: 0.625rem 0 0;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --wp--preset--color--faint );
}

/* Once it is met the target is noise — the sentence already says so. */
.flourish-shipping-progress.is-met .flourish-shipping-progress__target {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.flourish-shipping-progress__fill {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   WooCommerce loop adjustments
   --------------------------------------------------------------------------- */

.flourish-product-collection .wc-block-product,
.flourish-product-collection li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.flourish-product-collection img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	width: 100%;
}

.flourish-loop-author {
	display: block;
	font-size: 0.8125rem;
	color: #8f8b80;
}

.flourish-loop-spice {
	display: block;
	font-size: 0.75rem;
	color: #cdb6a4;
	letter-spacing: 0.08em;
}

.woocommerce-breadcrumb {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8f8b80;
}

.woocommerce-breadcrumb a {
	color: #8f8b80;
}

/* Category / trope intro copy: their SEO paragraphs run long, so cap the
   measure and keep it visually subordinate to the product grid. */
.flourish-term-description {
	max-width: 62ch;
	line-height: 1.7;
}

.flourish-term-description p:last-child {
	margin-bottom: 0;
}

/* Partial borders set via block supports.

   When a template declares only border-bottom, WordPress emits
   `border-style: solid` for all four sides and the unset sides inherit
   currentColor — which on this theme is bone, producing three accidental
   light borders per section. Kill all border styles, then re-enable only the
   sides that carry an explicit width. */
.wp-block-group.has-border-color,
.wp-block-columns.has-border-color,
.wp-block-column.has-border-color {
	border-style: none;
}

.wp-block-group[style*="border-bottom-width"],
.wp-block-columns[style*="border-bottom-width"],
.wp-block-column[style*="border-bottom-width"] {
	border-bottom-style: solid;
}

.wp-block-group[style*="border-top-width"],
.wp-block-columns[style*="border-top-width"],
.wp-block-column[style*="border-top-width"] {
	border-top-style: solid;
}

/* Fully-bordered elements (event cards) declare border-width, not a side. */
.wp-block-group[style*="border-width"],
.wp-block-columns[style*="border-width"],
.wp-block-column[style*="border-width"] {
	border-style: solid;
}

/* Woo notices, restyled for the dark ground. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #1b1f1b;
	border-top: 2px solid #cdb6a4;
	color: #eae5d9;
}

/* Quantity and add-to-cart: 44px minimum targets. */
.quantity input.qty,
.single_add_to_cart_button,
.wc-block-components-quantity-selector input {
	min-height: 2.75rem;
}

/* ---------------------------------------------------------------------------
   WooCommerce cart & checkout blocks

   Deliberately minimal. An earlier, more thorough pass overrode Woo's own
   layout for radio options and the express-payment area and broke both — the
   block markup carries its own positioning that fights external padding.

   Only two things are handled here: making text inputs legible on the dark
   ground, and the quantity bubble, which ships light-on-light. Everything else
   is left to Woo's defaults until it can be styled against the real markup.
   --------------------------------------------------------------------------- */

/* Text inputs: Woo ships light-theme fields, unreadable on charcoal. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="password"],
.wc-block-checkout textarea,
.wp-block-woocommerce-cart input[type="text"],
.wc-block-components-text-input input,
.wc-block-components-textarea {
	background: #1b1f1b !important;
	border: 1px solid #2c2e28 !important;
	border-radius: 0 !important;
	color: #eae5d9 !important;
	-webkit-text-fill-color: #eae5d9 !important;
	box-shadow: none !important;
}

/* Chrome autofill repaints fields white regardless of background. */
.wc-block-checkout input:-webkit-autofill,
.wc-block-checkout input:-webkit-autofill:hover,
.wc-block-checkout input:-webkit-autofill:focus {
	-webkit-text-fill-color: #eae5d9 !important;
	-webkit-box-shadow: 0 0 0 100px #1b1f1b inset !important;
	caret-color: #eae5d9;
}

.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
	color: #8f8b80 !important;
	background: transparent !important;
}

/* Quantity bubble on order-summary thumbnails. */
.wc-block-components-order-summary-item__quantity {
	background: #cdb6a4 !important;
	color: #161714 !important;
	border: 2px solid #1b1f1b !important;
	border-radius: 999px !important;
	font-weight: 600;
	box-shadow: none !important;
}

/* Order-summary product links added by checkout.js. */
.flourish-summary-link {
	color: inherit;
	text-decoration: none;
}

.flourish-summary-link:hover {
	color: #cdb6a4;
}

.wc-block-components-order-summary-item__image a {
	display: block;
}

/* ---------------------------------------------------------------------------
   Missing product images

   Woo's stock placeholder is a light grey box, which on a dark grid reads as a
   broken image rather than an absent one. flourish_placeholder_image() swaps in
   a dark SVG; these rules make sure it fills the frame the same way a real
   cover would.
   --------------------------------------------------------------------------- */

img.woocommerce-placeholder,
.wc-block-components-product-image img[src*="flourish-placeholder"] {
	background: var(--flourish-hatch);
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Hover swap on loop covers (flourish_loop_hover_image)

   The alt image sits under the cover at the same size; on hover or focus the
   cover fades out to reveal it. Pointer devices only — touch taps navigate.
   --------------------------------------------------------------------------- */

.flourish-has-alt { position: relative; }
.wc-block-components-product-image { position: relative; }

.flourish-has-alt .flourish-cover-alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.flourish-has-alt img:not(.flourish-cover-alt) {
	position: relative;
	z-index: 1;
	transition: opacity 0.35s ease;
}


/* Only the first alt layer sits under the cover; further layers wait for a swipe. */
.flourish-has-alt .flourish-cover-alt:not([data-view="1"]) { opacity: 0; }

/* View dots: one per image, over the bottom edge of the cover. */
.flourish-cover-dots {
	position: absolute;
	left: 0; right: 0; bottom: 0.5rem;
	display: flex;
	justify-content: center;
	gap: 0.375rem;
	z-index: 2;
	pointer-events: none;
}
.flourish-cover-dots i {
	width: 0.375rem; height: 0.375rem;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
	transition: background 0.3s ease;
}
.flourish-cover-dots i:first-child { background: #fff; }

/* Hover swap on desktop lights the second dot. */
@media (hover: hover) and (pointer: fine) {
	.flourish-has-alt:hover .flourish-cover-dots i:first-child,
	.flourish-has-alt:focus-within .flourish-cover-dots i:first-child { background: rgba(255,255,255,0.45); }
	.flourish-has-alt:hover .flourish-cover-dots i:nth-child(2),
	.flourish-has-alt:focus-within .flourish-cover-dots i:nth-child(2) { background: #fff; }
}

/* Covers with a second shot crossfade to it on their own, everywhere: 4.8s
   cycle, ~1.2s on the alt image, staggered so the grid never flips in unison.
   Opacity only, so it composites on the GPU. The dots run the same clock.
   Desktop hover pins the alt view; on touch a swipe (cover-swipe.js) adds
   .is-manual, which stops the cycle and pins whichever view was swiped to. */
@keyframes flourish-cover-cycle {
	0%, 62%   { opacity: 1; }
	70%, 92%  { opacity: 0; }
	100%      { opacity: 1; }
}
@keyframes flourish-dot-cycle {
	0%, 62%   { background: #fff; }
	70%, 92%  { background: rgba(255,255,255,0.45); }
	100%      { background: #fff; }
}
@keyframes flourish-dot-cycle-2 {
	0%, 62%   { background: rgba(255,255,255,0.45); }
	70%, 92%  { background: #fff; }
	100%      { background: rgba(255,255,255,0.45); }
}

.flourish-has-alt:not(.is-manual) img:not(.flourish-cover-alt) {
	animation: flourish-cover-cycle 4.8s ease-in-out infinite;
}
.flourish-has-alt:not(.is-manual) .flourish-cover-dots i:first-child { animation: flourish-dot-cycle 4.8s ease-in-out infinite; }
.flourish-has-alt:not(.is-manual) .flourish-cover-dots i:nth-child(2) { animation: flourish-dot-cycle-2 4.8s ease-in-out infinite; }
.wc-block-product:nth-child(3n+2) .flourish-has-alt img:not(.flourish-cover-alt),
.wc-block-product:nth-child(3n+2) .flourish-cover-dots i,
.flourish-card:nth-child(3n+2) .flourish-has-alt img:not(.flourish-cover-alt),
.flourish-card:nth-child(3n+2) .flourish-cover-dots i,
li:nth-child(3n+2) .flourish-has-alt img:not(.flourish-cover-alt),
li:nth-child(3n+2) .flourish-cover-dots i { animation-delay: -1.6s; }
.wc-block-product:nth-child(3n) .flourish-has-alt img:not(.flourish-cover-alt),
.wc-block-product:nth-child(3n) .flourish-cover-dots i,
.flourish-card:nth-child(3n) .flourish-has-alt img:not(.flourish-cover-alt),
.flourish-card:nth-child(3n) .flourish-cover-dots i,
li:nth-child(3n) .flourish-has-alt img:not(.flourish-cover-alt),
li:nth-child(3n) .flourish-cover-dots i { animation-delay: -3.2s; }

.flourish-has-alt { touch-action: pan-y; }

/* Hover / focus pins the alt view and lights its dot. */
@media (hover: hover) and (pointer: fine) {
	.flourish-has-alt:hover img:not(.flourish-cover-alt),
	.flourish-has-alt:focus-within img:not(.flourish-cover-alt),
	.flourish-card:hover .flourish-has-alt img:not(.flourish-cover-alt) { animation: none; opacity: 0; }
	.flourish-has-alt:hover .flourish-cover-dots i,
	.flourish-has-alt:focus-within .flourish-cover-dots i,
	.flourish-card:hover .flourish-cover-dots i { animation: none; }
	.flourish-card:hover .flourish-cover-dots i:first-child { background: rgba(255,255,255,0.45); }
	.flourish-card:hover .flourish-cover-dots i:nth-child(2) { background: #fff; }
}

/* Card media already positions and sizes its img; the alt layers inherit. */
.flourish-card-media.flourish-has-alt .flourish-cover-alt { position: absolute; inset: 0; }

/* Manual mode: every layer hidden except the active one; matching dot lit.
   Auto mode (3+ images, cover-swipe.js) uses the same rules with a slower fade. */
.flourish-has-alt.is-manual img,
.flourish-has-alt.is-auto img { transition: opacity 0.3s ease; opacity: 0; animation: none; }
.flourish-has-alt.is-auto img { transition-duration: 0.6s; }
.flourish-has-alt.is-manual img.is-active,
.flourish-has-alt.is-auto img.is-active { opacity: 1; }
.flourish-has-alt.is-manual .flourish-cover-dots i,
.flourish-has-alt.is-auto .flourish-cover-dots i { background: rgba(255,255,255,0.45); animation: none; }
.flourish-has-alt.is-manual .flourish-cover-dots i.is-active,
.flourish-has-alt.is-auto .flourish-cover-dots i.is-active { background: #fff; }

/* Hover on an auto-cycling card holds the current view rather than jumping to layer 1. */
@media (hover: hover) and (pointer: fine) {
	.flourish-has-alt.is-auto:hover img:not(.flourish-cover-alt),
	.flourish-card:hover .flourish-has-alt.is-auto img:not(.flourish-cover-alt) { opacity: 0; }
	.flourish-has-alt.is-auto:hover img.is-active,
	.flourish-card:hover .flourish-has-alt.is-auto img.is-active { opacity: 1; }
	.flourish-has-alt.is-auto:hover .flourish-cover-dots i,
	.flourish-card:hover .flourish-has-alt.is-auto .flourish-cover-dots i { background: rgba(255,255,255,0.45); }
	.flourish-has-alt.is-auto:hover .flourish-cover-dots i.is-active,
	.flourish-card:hover .flourish-has-alt.is-auto .flourish-cover-dots i.is-active { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	.flourish-has-alt img:not(.flourish-cover-alt),
	.flourish-cover-dots i { transition: none; animation: none; }
}

/* Italic emphasis inside headings carries the blush accent — the display serif
   was chosen for its italic, and this is where the palette shows up in type. */
h1 em, h2 em, h3 em, h4 em,
.wp-block-heading em,
.wp-block-post-title em,
.flourish-heading-italic em {
	color: #cdb6a4;
	font-style: italic;
}

/* Except on the blush and bone bands, where it would vanish. */
.has-blush-background-color h1 em,
.has-blush-background-color h2 em,
.has-blush-background-color h3 em,
.has-bone-background-color h1 em,
.has-bone-background-color h2 em,
.has-bone-background-color h3 em {
	color: #5d5348;
}

/* ---------------------------------------------------------------------------
   Site logo

   The supplied mark is white-on-transparent, which suits the dark ground but
   disappears on the blush and bone bands. Those cases get an inverted copy via
   filter rather than a second asset.
   --------------------------------------------------------------------------- */

.wp-block-site-logo img {
	height: auto;
	display: block;
}

.wp-block-site-logo a {
	display: block;
	line-height: 0;
}

/* On light bands (newsletter, any bone/blush section) flip the white mark. */
.has-blush-background-color .wp-block-site-logo img,
.has-bone-background-color .wp-block-site-logo img,
.has-blush-warm-background-color .wp-block-site-logo img {
	filter: invert(1);
}

/* ---------------------------------------------------------------------------
   Footer lists
   --------------------------------------------------------------------------- */

/* The column headings sat directly on their first link, so each group read as a
   four-item list with a bold first row rather than a heading and its links. */
/* Padding, not margin: the block layout's own gap rule owns margin-block-start
   on these siblings and quietly wins, which is why a margin here did nothing. */
.flourish-footer-list {
	list-style: none;
	padding: 0.875rem 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.flourish-footer-list a {
	color: #b6b3a7;
}

.flourish-footer-list a:hover {
	color: #cdb6a4;
}

/* ---------------------------------------------------------------------------
   Print — order confirmations and event details get printed more than you
   would think.
   --------------------------------------------------------------------------- */

@media print {
	.flourish-marquee,
	.flourish-facets,
	.flourish-sort-bar,
	.wp-block-navigation,
	.wp-block-woocommerce-mini-cart {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* Blush Club feature ---------------------------------------------------------- */

.flourish-pill {
	margin: 0;
	padding: 0.4375rem 0.8125rem;
}

.flourish-rhythm-grid .flourish-perk p {
	color: #b6b3a7;
}

.instagram-media {
	min-width: 0 !important;
}

/* Logo: full size on desktop, smaller on phones ------------------------------
   The header logo's inline width comes from the block (162px). At phone widths
   that pushes the nav and cart onto a second line, so scale the mark down there
   and let the nav sit beside it. Uses !important because the block prints the
   width as an inline attribute on the img. */

@media (max-width: 781px) {
	header .wp-block-site-logo img,
	.wp-block-site-logo.is-header-logo img {
		width: 122px !important;
	}
}

@media (max-width: 480px) {
	header .wp-block-site-logo img {
		width: 104px !important;
	}

	/* Tighten the row so the nav has room to stay alongside. */
	header .wp-block-group.alignwide {
		gap: 14px;
	}
}

/* ---------------------------------------------------------------------------
   Out-of-stock recovery: special order + Bookshop.org
   --------------------------------------------------------------------------- */

.flourish-special-order {
	color: #cdb6a4;
	font-size: 0.9375rem;
}

.flourish-oos {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line, #2c2e28);
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.flourish-oos-lead {
	margin: 0;
	font-size: 0.9375rem;
	color: #b6b3a7;
}

.flourish-oos-routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.flourish-oos-route {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem;
	border: 1px solid #2c2e28;
	background: #1b1f1b;
}

.flourish-oos-route h4 {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.15;
}

.flourish-oos-route p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #b6b3a7;
}

.flourish-oos-link {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.75rem 1.25rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	border: 1px solid #5c7061;
	color: #e2c4b1;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}

.flourish-oos-link:hover {
	background: #e2c4b1;
	border-color: #e2c4b1;
	color: #161714;
}

.flourish-oos-note {
	font-size: 0.75rem !important;
	color: #6e6a61 !important;
	line-height: 1.5;
}

.flourish-loop-badge {
	display: inline-block;
	margin-bottom: 0.375rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid #4b5c4f;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fb6a5;
}

.flourish-oos-link--primary {
	background: #eae5d9;
	border-color: #eae5d9;
	color: #161714;
}

.flourish-oos-link--primary:hover {
	background: #cdb6a4;
	border-color: #cdb6a4;
	color: #161714;
}

/* Coven Year One shirt: the mockup's own background is #262f28, within a hair of
   the `forest` section it sits in, so the image is let run wider than its column
   and no frame, border or radius is applied — the edges are meant to disappear.
   Any replacement image must keep that background or this will show a seam.
   --------------------------------------------------------------------------- */

.flourish-coven-tee img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.flourish-coven-tee {
		margin-inline: -4%;
	}
}

/* Coven perks: three hero cards + lighter "also included" list
   --------------------------------------------------------------------------- */

.flourish-perk-hero {
	background: #1f231e;
	border: 1px solid #cdb6a4;
	padding: clamp(30px, 3.2vw, 40px) clamp(28px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.flourish-perk-hero > * {
	margin: 0;
}

.flourish-perk-hero h3 {
	line-height: 1.12;
}

.flourish-perk-hero p:last-child {
	font-size: 1rem;
	line-height: 1.65;
	color: #c3bfb2;
	text-wrap: pretty;
}

.flourish-perks-list .flourish-perk-item {
	margin: 0;
	line-height: 1.65;
	text-wrap: pretty;
	padding-left: 1.35em;
	position: relative;
}

.flourish-perks-list .flourish-perk-item::before {
	content: "\2726";
	position: absolute;
	left: 0;
	color: #cdb6a4;
	font-size: 0.8125rem;
}

.flourish-perks-list .flourish-perk-item strong {
	font-weight: 400;
	color: #eae5d9;
}

/* Blush Club page ------------------------------------------------------------- */

/* Two columns, pinned. The hero was a grid with a 21rem minimum column, which
   on a wide screen fitted a third column and left it empty next to the photo. */
.flourish-club-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

@media (max-width: 781px) {
	.flourish-club-hero { grid-template-columns: minmax(0, 1fr); }
}

.flourish-club-hero-photo,
.flourish-club-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(21rem, 52vh, 39rem);
	object-fit: cover;
	object-position: center 42%;
}

.flourish-club-hero > .flourish-hatch {
	margin: 0;
	min-height: 100%;
}

.flourish-club-stats,
.flourish-club-flags {
	margin: 0;
}

.flourish-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.flourish-stat-n {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 2.125rem;
	line-height: 1;
}

.flourish-stat-l,
.flourish-eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-club-flags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.flourish-pill-solid {
	background: #cdb6a4;
	color: #161714;
	padding: 6px 12px;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

.flourish-club-date {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
}

.flourish-club-facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(46%, 150px), 1fr));
	gap: 16px 24px;
	padding: 20px 0;
	border-top: 1px solid #2c2e28;
	border-bottom: 1px solid #2c2e28;
}

.flourish-club-facts dt {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
	margin-bottom: 5px;
}

.flourish-club-facts dd {
	margin: 0;
	font-size: 0.9375rem;
	color: #d6d2c6;
}

.flourish-step-n {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1;
	margin: 0;
}

.flourish-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr));
	gap: clamp(16px, 2vw, 28px);
	/* Cards top-align to the row. Stretched cards let a tile whose height comes
	   from aspect-ratio push its row taller and the covers beside it drift down. */
	align-items: start;
}

.flourish-picks .flourish-pick {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	/* Core's flow layout adds margin-block-start to every child after the first,
	   which dropped every cover 30px below the August tile. */
	margin-block-start: 0;
}

.flourish-pick img,
.flourish-pick-pending {
	width: 100%;
	margin: 0; /* a block-gap margin was landing on the covers and pushing each
	              card down about 30px next to the pending tile */
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: #20241f;
	display: block;
	/* The tile is a flex item in a column card. Without an explicit basis the
	   aspect ratio loses to the flex sizing and the tile draws over the meta
	   lines below it. */
	flex: 0 0 auto;
	height: auto; /* replaced elements ignore aspect-ratio without it, so the
	                 covers kept their own ratio and sat shorter than the tile */
	min-height: 0;
}

.flourish-pick-pending {
	box-sizing: border-box; /* padding + border are inside the tile, or it out-grows the covers */
	border: 1px solid #2c2e28;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	text-align: center;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.1875rem;
	line-height: 1.25;
	color: #8fa693;
}

.flourish-pick-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.flourish-pick-month {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-pick-title {
	font-size: 0.9375rem;
	line-height: 1.35;
}

.flourish-pick-author {
	font-size: 0.8125rem;
	color: #8f8b80;
}

/* Announcement bar ------------------------------------------------------------ */

.flourish-announce {
	margin: 0;
}

.flourish-announce a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(185, 201, 189, 0.45);
	padding-bottom: 1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.flourish-announce a:hover,
.flourish-announce a:focus-visible {
	color: #e2c4b1;
	border-bottom-color: #e2c4b1;
}

.flourish-announce-div {
	display: inline-block;
	padding: 0 0.6em;
	color: #4b5c4f;
}

/* The Coven membership page
   ---------------------------------------------------------------------------
   These classes exist because the page's mockup asks for things the block
   presets cannot express: a split hero where each half owns its own
   background and bleeds to the edge, price cards with the button pinned to the
   bottom regardless of copy length, and FAQ rows that read as a two-column
   question/answer table. Scoped with a `coven` prefix so the generic
   `.flourish-tier` / `.flourish-faq` styles used elsewhere stay untouched.
   --------------------------------------------------------------------------- */

.flourish-coven-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.flourish-coven-hero-copy {
	background: #1b1f1b;
	/* Less on top than the sides: the heading is the first thing on the page and
	   needs no runway above it, while the sides still hold the column in. */
	padding: clamp(28px, 4vw, 72px) clamp(24px, 5vw, 72px) clamp(44px, 6vw, 92px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
}

.flourish-coven-hero-copy > * {
	margin: 0;
}

/*
 * Panel ground is sampled from the flyer art itself (#212d25 at its corners),
 * not picked. The Year One art carries its own green ground and ornamental
 * border, so any panel colour that differs shows up as a second edge inside
 * the first — matching it leaves only the border reading as a frame.
 */
.flourish-coven-hero-art {
	position: relative;
	background: #212d25;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 2vw, 32px) clamp(12px, 2vw, 32px) clamp(84px, 8vw, 120px);
	min-height: clamp(420px, 58vh, 640px);
}

.flourish-coven-hero-art figure,
.flourish-coven-hero-art img {
	margin: 0;
	display: block;
	width: 100%;
	height: auto;
}

.flourish-coven-hero-cap {
	position: absolute;
	left: clamp(20px, 3vw, 40px);
	bottom: clamp(20px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
}

.flourish-coven-hero-cap > * {
	margin: 0;
}

/* Pill used for the "new set every year" / "links go up early" asides. */
.flourish-coven-note {
	align-self: flex-start;
	margin-top: 4px !important;
	border: 1px solid #4b5c4f;
	padding: 7px 13px;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #cdb6a4;
}

/* Clothing + book: the everyone / Coven comparison pair. */
.flourish-coven-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: stretch;
	gap: 14px;
}

.flourish-coven-compare > * {
	margin-block: 0;
}

.flourish-coven-card {
	border: 1px solid #3a4a3e;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.flourish-coven-card.is-coven {
	border-color: #e2c4b1;
	background: #1f2a22;
}

.flourish-coven-card > * {
	margin: 0;
}

.flourish-coven-card-price {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1.1;
}

.flourish-coven-art {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.flourish-coven-art figure {
	margin: 0;
	height: 100%;
}

.flourish-coven-art img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 210px;
	object-fit: cover;
}

/* The hand-picked 2x2 of covers between the two shirt photographs. A striped
   placeholder shows through while a cover loads, and stays if one never
   resolves — an empty cell reads as a broken image, a striped one reads as a
   deliberate swatch. */
.flourish-coven-covers {
	background: #20241f;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 14px;
	align-content: center;
	min-height: 210px;
}

.flourish-coven-covers img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: repeating-linear-gradient(135deg, #242a23 0, #242a23 10px, #2a3129 10px, #2a3129 20px);
}

.flourish-coven-art > .flourish-coven-span {
	grid-column: span 2;
}

/* Price cards. Button pinned to the bottom edge so the two cards agree
   visually even though the monthly one carries an extra callout. */
.flourish-coven-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}

.flourish-coven-tier {
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	padding: clamp(30px, 3.4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flourish-coven-tier.is-featured {
	border-color: #cdb6a4;
}

.flourish-coven-tier > * {
	margin: 0;
}

.flourish-coven-tier-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.flourish-coven-tier-head > * {
	margin: 0;
}

.flourish-coven-flag {
	background: #cdb6a4;
	color: #161714;
	padding: 6px 12px;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

.flourish-coven-price {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: clamp(52px, 6vw, 72px);
	line-height: 1;
}

.flourish-coven-price span {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 0.9375rem;
	color: #8f8b80;
	letter-spacing: 0;
}

.flourish-coven-callout {
	padding: 11px 15px;
	background: #20241f;
	border-left: 2px solid #cdb6a4;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #d6d2c6;
}

/* The plan note above Sign up: states both first payments, per Cory's rule that
   the $35 never arrives as a surprise at checkout. Sits between WCSATT's plan
   tiles and the button, so it reads as part of the choice rather than fine print. */
.flourish-coven-plan-note {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #d6d2c6;
	max-width: 46ch;
	text-wrap: pretty;
}

.flourish-coven-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.flourish-coven-list li {
	position: relative;
	padding-left: 1.35em;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #d6d2c6;
}

.flourish-coven-list li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	color: #cdb6a4;
}

.flourish-coven-tier .wp-block-buttons {
	margin-top: auto;
}

.flourish-coven-tier .wp-block-button,
.flourish-coven-tier .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.flourish-coven-tier .wp-block-button__link span {
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 400;
}

/* Discount explainer panel. */
.flourish-coven-rule {
	background: #1b1f1b;
	border-left: 2px solid #cdb6a4;
	padding: 28px clamp(24px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flourish-coven-rule > * {
	margin: 0;
	max-width: 62ch;
}

/* FAQ as a question/answer table. */
.flourish-coven-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 3vw, 44px);
	padding: 26px 0;
	border-bottom: 1px solid #2c2e28;
}

.flourish-coven-faq:first-of-type {
	border-top: 1px solid #2c2e28;
}

.flourish-coven-faq > * {
	margin: 0;
}

.flourish-coven-faq h3 {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.35;
	color: #eae5d9;
	text-wrap: pretty;
}

.flourish-coven-faq p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #b6b3a7;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Product gallery thumbnails
   WooCommerce floats these edge to edge, which reads as one torn strip under
   the cover. Lay them out with a gap instead.
   --------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	/* Woo resets the list margin after this file loads, so the break between the
	   selected image and the thumbnail row is padding on the list itself. */
	padding: 1.5rem 0 0;
	list-style: none;
}

/* FlexSlider hides the wrapper's overflow; keep the row clear of the image. */
.woocommerce-product-gallery .flex-viewport {
	margin-bottom: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	float: none;
	width: calc(25% - 0.5625rem);
	margin: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.72;
	transition: opacity 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* Checkout add-on strip. Sits above the order summary in a ~380px column, so
   the row is tighter than the cart page's and the thumbnail is a photograph
   rather than a catalogue shot. */

.flourish-addons--checkout {
	margin-bottom: 1.25rem;
	gap: 0.75rem;
}

.flourish-addons--checkout .flourish-addon-list {
	gap: 0.5rem;
}

.flourish-addons--checkout .flourish-addon {
	gap: 0.625rem;
	padding: 0.5rem;
}

.flourish-addons--checkout .flourish-addon-thumb {
	width: 3.25rem;
	height: 3.25rem;
	display: block;
	overflow: hidden;
	border-radius: 2px;
}

.flourish-addons--checkout .flourish-addon-name {
	font-size: 0.8125rem;
	line-height: 1.3;
}

.flourish-addons--checkout .flourish-addon-name a {
	color: inherit;
	text-decoration: none;
}

.flourish-addons--checkout .flourish-addon-name a:hover,
.flourish-addons--checkout .flourish-addon-name a:focus-visible {
	text-decoration: underline;
}

.flourish-addon-add--choose {
	border-color: #cdb6a4;
	color: #cdb6a4;
}

/* Already in the cart: marked, not hidden, so the strip does not reshuffle
   itself under someone mid-checkout. data-added is set by cart-addons.js on a
   successful Store API add, so the marker survives an add without a reload. */

.flourish-addon--added {
	opacity: 0.7;
}

.flourish-addon-add[data-added="true"] {
	pointer-events: none;
	border-color: #4b5c4f;
	color: #b6b3a7;
}

.flourish-addon-add[data-added="true"]::after {
	content: "ed";
}

/* "Add" plus the ::after "ed" has to stay on one line. nowrap alone could not do
   it: the button is display:grid, which makes the text node and the ::after two
   separate grid items and stacks them in a column. grid-auto-flow is the fix. */
.flourish-addon-add {
	white-space: nowrap;
	grid-auto-flow: column;
	justify-content: center;
}

/* Two buttons in a tile that was tight for one, so they share a row where there
   is room and stack where there is not. */
.flourish-addon-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.flourish-addon-actions .flourish-addon-add {
	flex: 1 1 auto;
}

/* Quieter than Add: browsing is the secondary action on a tile whose job is to
   put one thing in the cart. */
.flourish-addon-add--browse {
	border-color: #2c2e28;
	color: #9a968a;
}

/* Spare tiles wait in the markup. .flourish-addon sets a display, so the hidden
   attribute needs the help. */
.flourish-addon[hidden] {
	display: none;
}

/* The checkout order summary prints each product's description, which on this
   catalogue is keyword-padded search text — "Bookish Stickers / Book Lover Gift /
   Bookish Merch…". Useless at the point of paying and it buries the price.
   Variation details (Size: M) are deliberately left alone: at the last step a
   shopper needs to be able to confirm which size they are buying. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

/* Remove control on checkout order-summary lines. Sits under the line's own
   details, not in the header row, where it would collide with the price. */
.flourish-summary-remove {
	display: block;
	margin: 0.375rem 0 0;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8d887c;
	cursor: pointer;
}

.flourish-summary-remove:hover,
.flourish-summary-remove:focus-visible {
	color: #cdb6a4;
}

.flourish-summary-remove[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* Stock can change between page load and click, so the button still needs a
   dead end that explains itself. Reason goes in the title attribute. */
.flourish-addon-add[data-failed="true"] {
	pointer-events: none;
	border-color: #4b5c4f;
	color: #8d887c;
}

.flourish-addon-note {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Add-on button states: the Store API round trip is fast but not instant. */
.flourish-addon-add[aria-busy="true"] {
	opacity: 0.55;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   The Coven product page: recurring-charge terms and the restated FAQ
   --------------------------------------------------------------------------- */

.flourish-coven-terms {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.4rem;
	background: #1b1f1b;
	border: 1px solid #2c322c;
}

.flourish-coven-terms-head {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-coven-terms ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.flourish-coven-terms li {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #c6c2b6;
	text-wrap: pretty;
}

.flourish-coven-terms-note {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #2c322c;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: #8f9a8f;
	text-wrap: pretty;
}

.flourish-coven-product-faq {
	margin: clamp(40px, 6vw, 72px) 0 0;
}

/* ---------------------------------------------------------------------------
   Checkout: the auto-renewal disclosure and its consent checkbox

   Sits between the order review and the payment methods, so it reads as part of
   the payment step rather than as another summary panel. Deliberately not fine
   print: same body size as the order table, full contrast, always open.
   --------------------------------------------------------------------------- */

.flourish-recurring-disclosure {
	margin: 1.5rem 0;
	padding: 1.25rem 1.4rem;
	background: #1b1f1b;
	border: 1px solid #3a4239;
	border-top: 2px solid #cdb6a4;
}

.flourish-recurring-disclosure__title {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: #ece7dc;
}

.flourish-recurring-disclosure__terms {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.flourish-recurring-disclosure__terms li {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #d3cfc3;
	text-wrap: pretty;
}

.flourish-recurring-disclosure__links {
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid #2c322c;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #9aa59a;
}

/* The checkbox is a required control, so it gets a real hit target: the whole
   label is clickable and clears 44px at every width. */
.flourish-recurring-consent {
	margin: 1.25rem 0;
}

.flourish-recurring-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.55rem 0;
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #d3cfc3;
	text-wrap: pretty;
}

.flourish-recurring-consent__input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0.1rem 0 0;
	accent-color: #cdb6a4;
	cursor: pointer;
}

.flourish-recurring-consent .required {
	color: #cdb6a4;
	border: 0;
	text-decoration: none;
}

.woocommerce-invalid .flourish-recurring-consent__label {
	color: #ece7dc;
}

/* The block checkout renders the same field through WooCommerce's own
   CheckboxControl, which brings its own markup — so the theme sizes that control
   rather than replacing it. Same 44px floor, same colours. */
.flourish-recurring-consent--blocks .wc-block-components-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.55rem 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #d3cfc3;
	text-wrap: pretty;
}

.flourish-recurring-consent--blocks .wc-block-components-checkbox__input {
	width: 22px;
	height: 22px;
	margin: 0.1rem 0 0;
	accent-color: #cdb6a4;
}

.flourish-recurring-consent--blocks .wc-block-components-validation-error {
	margin: 0.35rem 0 0;
	color: #e2c4b1;
	font-size: 0.8125rem;
}

.flourish-coven-product-faq > h2 {
	margin: 0 0 1.25rem;
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: #eae5d9;
}

/* The rows carry their own borders; the first one needs the top edge back. */
.flourish-coven-product-faq .flourish-coven-faq:first-of-type {
	border-top: 1px solid #2c2e28;
}

/* ---------------------------------------------------------------------------
   Google sign-in
   The button is a white rectangle in a dark shop, and deliberately so: Google's
   brand terms do not allow their mark to be re-tinted or the button restyled
   past a small set of approved treatments. Trying to make it look Flourish is
   the one place here where matching the palette would be the wrong call.
   --------------------------------------------------------------------------- */

.flourish-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.flourish-social__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.875rem;
  color: var(--wp--preset--color--faint);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flourish-social__divider::before,
.flourish-social__divider::after {
  content: "";
  height: 1px;
  background: var(--wp--preset--color--line);
}

.flourish-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.6875rem 1.25rem;
  /* Google's dark variant. Their brand guidelines publish both a light and a
     dark button; the white slab out-shouted Log in and was the only pale block
     on the page. The full-colour G mark stays untouched, which is the part the
     guidelines actually require. Aug 16 2026. */
  border: 1px solid #3a3d34;
  border-radius: 4px;
  background: #14170f;
  color: #eae5d9;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.flourish-social__btn:hover,
.flourish-social__btn:focus-visible {
  background: #1b1f1b;
  border-color: #cdb6a4;
  color: #eae5d9;
  text-decoration: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.flourish-social__mark {
  flex: none;
}

.flourish-social__note {
  margin: 0;
  color: var(--wp--preset--color--dim);
  font-size: var(--wp--preset--font-size--small);
}

/* Checkout sits above the block, where there is no form to divide from. */
.flourish-checkout-social .flourish-social {
  max-width: 22rem;
  margin: 0 0 var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
   Account portal
   WooCommerce ships My Account as a bare nav-and-content pair. A block theme
   picks up almost none of Woo's own CSS, so everything below is first paint
   rather than correction — the two-column frame, the menu, address blocks,
   order tables and, most visibly, form fields, which otherwise render as
   browser-default white boxes in a very dark shop.
   --------------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/*
 * "Lost your password?" is hidden because customers do not have passwords.
 * Registration is off (woocommerce_enable_myaccount_registration = no) and the
 * only signup route is the Google button, so nobody arriving here has a
 * password to recover — the link is an invitation to a dead end.
 *
 * Hidden, not removed: the link lives in Woo's form-login.php ahead of every
 * hook the theme can reach, so deleting the markup would mean carrying a copy
 * of that whole template to drop one line. The password fields stay and stay
 * working — accounts created at checkout or in wp-admin do have passwords, and
 * wp-login.php remains the way in for those and for admins.
 *
 * If registration is ever switched on, delete this rule: the link becomes
 * meaningful the moment a customer can choose a password.
 */
.woocommerce-account .woocommerce-LostPassword {
  display: none;
}

/*
 * Woo's own stylesheet floats the two panels and sizes them 30%/68%. Floats are
 * inert on grid items but the percentage widths are not: they resolve against
 * the grid track and shrink both panels to a fraction of their column. Reset
 * both, and place the panels explicitly rather than trusting auto-placement.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

@media (min-width: 782px) {
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Logged out there is no menu, and a full-width login form looks abandoned. */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 30rem;
}

/*
 * Unless registration is on, in which case there are two columns inside that
 * 30rem and both get crushed — 480px split two ways left the privacy paragraph
 * wrapping every three words. Conditioned on the register column actually
 * existing rather than on a body class, because Woo does not add one: turn
 * registration off again and the lone login form gets its narrow measure back
 * with no second rule to remember.
 */
@media (min-width: 700px) {
  .woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login > .col-2) {
    max-width: none;
  }
}

/*
 * And stood down entirely for the Google-only sign-in panel, which sets its own
 * measure. The 30rem above is a container cap, and the container's horizontal
 * padding comes out of it — about 366px of usable width, so a 27rem panel never
 * had the room and "Continue with Google" wrapped onto two lines. Keyed on the
 * panel's presence for the same reason as the rule above: nothing to remember
 * if it goes away.
 */
.woocommerce-account:not(.logged-in) .woocommerce:has(.flourish-login) {
  max-width: none;
}

/* Belt and braces: the panel is centred on its own, so an ancestor cap left
   behind by any of Woo's login wrappers cannot narrow it. */
.woocommerce-account:not(.logged-in) .woocommerce:has(.flourish-login) #customer_login,
.woocommerce-account:not(.logged-in) .woocommerce:has(.flourish-login) .col2-set,
.woocommerce-account:not(.logged-in) .woocommerce:has(.flourish-login) .col-1 {
  max-width: none;
  width: 100%;
}

/* --- Menu --- */

/*
 * Redrawn to the approved mockup (Flourish Account v1). The earlier treatment
 * used a divider between every item; the design uses a 2px left rule that only
 * appears on the current section, with a panel fill behind it. Same information,
 * far less line noise, and the active state is legible at a glance instead of
 * being carried by text colour alone.
 */
.woocommerce-MyAccount-navigation {
  align-self: start;
}

/* The design labels this column. Woo emits no element for it. */
.woocommerce-MyAccount-navigation::before {
  content: "Your account";
  display: block;
  padding-bottom: 0.875rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fa693;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.8125rem 1rem;
  border-left: 2px solid transparent;
  color: #b6b3a7;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
  background: #1b1f1b;
  color: #eae5d9;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
  background: #1b1f1b;
  border-left-color: #cdb6a4;
  color: #eae5d9;
}

/* Sign out is not a peer of the sections above it. */
.woocommerce-MyAccount-navigation--link--customer-logout a {
  margin-top: 0.875rem;
  border-top: 1px solid #2c2e28;
  color: #8f8b80;
}

/*
 * Below the two-column breakpoint the rail stacks above the content, and nine
 * full-width rows pushed the greeting and the panels off the first screen. The
 * same list becomes a dropdown: a bordered control naming the current section,
 * opening the existing menu as a panel over the page.
 *
 * Progressive enhancement — the toggle is hidden and the list is open until
 * account-nav.js sets data-collapsible, so a blocked or stale script leaves the
 * stacked list rather than an unreachable menu.
 */
.flourish-account-nav-toggle {
  display: none;
}

@media (max-width: 781px) {
  .woocommerce-MyAccount-navigation[data-collapsible="true"] {
    position: relative;
  }

  .woocommerce-MyAccount-navigation[data-collapsible="true"] .flourish-account-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6875rem 1rem;
    background: #1b1f1b;
    border: 1px solid #2c2e28;
    color: #eae5d9;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease;
  }

  .woocommerce-MyAccount-navigation[data-collapsible="true"] .flourish-account-nav-toggle:hover {
    border-color: #4b5c4f;
  }

  .flourish-account-nav-chevron {
    flex: 0 0 auto;
    color: #8fa693;
    transition: transform 120ms ease;
  }

  .woocommerce-MyAccount-navigation[data-open="true"] .flourish-account-nav-chevron {
    transform: rotate(180deg);
  }

  .woocommerce-MyAccount-navigation[data-collapsible="true"] > ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 4px;
    padding: 0.375rem;
    background: #161714;
    border: 1px solid #2c2e28;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  .woocommerce-MyAccount-navigation[data-collapsible="true"][data-open="false"] > ul {
    display: none;
  }

  /* Inside a panel the sign-out rule reads as a divider, not a stray line. */
  .woocommerce-MyAccount-navigation[data-collapsible="true"] .woocommerce-MyAccount-navigation--link--customer-logout a {
    margin-top: 0.375rem;
  }
}

/* --- Content --- */

/*
 * No max-width. The design runs a 1320px shell with a 240px rail, which leaves
 * the content column around 1030px — the membership card, the three-panel row
 * and the orders table all need it. The previous 44rem cap predates that and is
 * most of why the live page reads as cramped.
 *
 * Consequence to handle when those endpoints get styled: a single-column form
 * such as edit-address stretches the full width and looks thin. Cap those
 * individually rather than reinstating a global limit.
 */

.woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

/*
 * The single-column forms, capped individually — the deferred half of the
 * decision above. A 1030px-wide column of one-per-row text inputs reads as a
 * spreadsheet; 44rem is the measure the rest of the portal's prose uses.
 *
 * Matched on the form elements rather than on endpoint body classes: Woo emits
 * these same forms from more than one endpoint, and the cap should follow the
 * form wherever it renders.
 *
 * Deliberately NOT capped: `.woocommerce-Addresses`, the two-card billing and
 * shipping index. That is a grid, it was widened on purpose, and narrowing it
 * would undo the two-column fix.
 */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content form#add_payment_method,
.woocommerce-MyAccount-content form.woocommerce-ResetPassword {
  max-width: 44rem;
}

/*
 * Woo emits h2 and h3 freely inside the account panes. Left alone they inherit
 * the display serif and "Billing address" arrives four lines tall, which is
 * what the raw portal looked like. These are labels, not headlines.
 */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0 0 0.875rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--wp--preset--color--moss);
}

/* --- Account dashboard --- */

.flourish-panel__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fa693;
}

.flourish-panel__link {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cdb6a4;
  text-decoration: none;
  white-space: nowrap;
}

.flourish-panel__link:hover,
.flourish-panel__link:focus-visible {
  color: #eae5d9;
  text-decoration: none;
}

.flourish-badge {
  padding: 0.375rem 0.75rem;
  border: 1px solid #2c2e28;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.flourish-badge--on {
  background: #cdb6a4;
  border-color: #cdb6a4;
  color: #161714;
  font-weight: 600;
}

.flourish-chip {
  padding: 0.4375rem 0.75rem;
  border: 1px solid #2c2e28;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b6b3a7;
  white-space: nowrap;
}

.flourish-button {
  padding: 0.9375rem 1.75rem;
  background: #eae5d9;
  color: #161714;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
}

.flourish-button:hover,
.flourish-button:focus-visible {
  background: #cdb6a4;
  color: #161714;
  text-decoration: none;
}

.flourish-button--quiet {
  background: none;
  border: 1px solid #2c2e28;
  color: #eae5d9;
}

.flourish-button--quiet:hover,
.flourish-button--quiet:focus-visible {
  background: none;
  border-color: #cdb6a4;
  color: #eae5d9;
}

/* Membership card. Accent border because it is the one panel that is a status
   rather than a list — it should read as the header of the page. */
.flourish-member-card {
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
  background: #1b1f1b;
  border: 1px solid #cdb6a4;
}

.flourish-member-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.125rem);
  border-bottom: 1px solid #2c2e28;
}

.flourish-member-card__title {
  margin: 0.375rem 0 0.875rem;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.flourish-member-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.flourish-member-card__renews {
  text-align: right;
}

.flourish-member-card__date {
  margin: 0.375rem 0 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.1;
}

.flourish-member-card__method {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #8f8b80;
}

.flourish-member-card__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.flourish-member-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid #2c2e28;
}

/* Vertical rules between panels only, never a trailing one. */
.flourish-member-panel + .flourish-member-panel {
  border-left: 1px solid #2c2e28;
}

.flourish-member-panel__value {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.15;
}

.flourish-member-panel__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8f8b80;
  text-wrap: pretty;
}

.flourish-member-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid #2c2e28;
}

/* Recent orders. */
.flourish-panel {
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
  background: #1b1f1b;
  border: 1px solid #2c2e28;
}

.flourish-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid #2c2e28;
}

.flourish-panel__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.flourish-order-row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 9rem) auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.375rem) clamp(1.25rem, 2.4vw, 1.75rem);
}

.flourish-order-row + .flourish-order-row {
  border-top: 1px solid #2c2e28;
}

.flourish-order-row__number {
  display: block;
  font-size: 0.9375rem;
}

.flourish-order-row__date,
.flourish-order-row__saved,
.flourish-order-row__method {
  display: block;
  font-size: 0.8125rem;
  color: #8f8b80;
}

.flourish-order-row__items span:first-child {
  display: block;
  font-size: 0.9375rem;
}

.flourish-order-row__saved {
  color: #8fa693;
}

.flourish-order-row__money {
  text-align: right;
}

.flourish-order-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

/* Below the orders table the row collapses; four columns of two words each is
   worse than four stacked lines. */
@media (max-width: 781px) {
  .flourish-order-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .flourish-order-row__money,
  .flourish-order-row__actions {
    text-align: left;
    justify-content: flex-start;
  }
}

/* Address, card, support. */
.flourish-detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.875rem;
}

.flourish-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: #1b1f1b;
  border: 1px solid #2c2e28;
}

.flourish-detail__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #eae5d9;
  text-wrap: pretty;
}

/* --- Advanced Coupons: store credit accordion --- */

/*
 * The plugin ships light-theme styling, so its accordion header rendered as near
 * black on the dark order summary — legible only by knowing it was there. Its
 * caret is a dark SVG image, invisible for the same reason, so it gets inverted
 * rather than replaced.
 *
 * Everything here is scoped to the plugin's own `acfw-` classes. The cart and
 * checkout section higher up in this file records an earlier broad pass over
 * Woo's block markup that broke the radio options and express-payment area;
 * plugin-prefixed selectors cannot repeat that.
 *
 * Colour is set on .acfw-accordion-content rather than on the paragraphs inside
 * it because the plugin nests a <div> inside a <p>. Browsers close the paragraph
 * early and lift the div out, so the balance text is a sibling of the element it
 * appears to belong to. Inheritance from the container is unaffected by that,
 * targeting .acfw-store-credit-user-balance would not be.
 */
.acfw-accordion .acfw-accordion-title {
  color: #eae5d9;
}

.acfw-accordion h3 {
  color: #eae5d9;
}

.acfw-accordion .caret img {
  filter: invert(1);
  opacity: 0.6;
}

.acfw-accordion .acfw-accordion-content {
  color: #b6b3a7;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.acfw-accordion .acfw-accordion-content .woocommerce-Price-amount {
  color: #eae5d9;
}

.acfw-accordion .acfw-accordion-content input[type="text"],
.acfw-accordion .acfw-accordion-content input[type="number"] {
  background: #1b1f1b;
  border: 1px solid #2c2e28;
  border-radius: 0;
  color: #eae5d9;
}

/* --- Advanced Coupons: the store credit panel in the block checkout --- */

/*
 * "Apply store credit discounts?" at the foot of the order summary.
 *
 * Reported unreadable three times, and each earlier attempt here was wrong about
 * why. It is not dark text on the dark panel. The plugin **injects its own
 * stylesheet at runtime from JavaScript**, and that sheet says:
 *
 *     .acfwf-components .acfw-accordion h3      { background: #f5f5f5 }
 *     .acfwf-components .acfw-accordion-inner   { background: #fcfcfc }
 *
 * So it is a near-white bar carrying the theme's pale inherited text. Two
 * consequences worth knowing before touching this again:
 *
 * 1. **The plugin's sheet lands in <head> after the theme's**, so equal
 *    specificity loses. The earlier `[class*="acfw"]` attempt scored (0,2,0)
 *    against their (0,2,1) and was overruled — it was never a matching problem.
 *    These selectors add the checkout wrapper to outscore them outright.
 * 2. Nothing about this markup is in the plugin's PHP. It is built by
 *    `packages/acfwf-checkout-block/store-credit/store-credit-form.tsx` and
 *    registered through `ExperimentalOrderMeta`, which is why grepping the
 *    templates found only the classic checkout's version.
 *
 * Class names taken from the plugin's compiled bundle, not inferred.
 */
.wc-block-checkout .acfwf-components .acfw-accordion h3,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.8rem 1.2rem;
  background: #1b1f1b;
  border-top: 1px solid #2c2e28;
  color: #ece7dc;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.wc-block-checkout .acfwf-components .acfw-accordion h3:hover,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion h3:hover {
  color: #cdb6a4;
}

/*
 * The title is a <span class="acfw-accordion-title"> inside that h3 — confirmed
 * from the page, not inferred. It needs its own rule because the earlier fix in
 * this file already set it to #eae5d9 for the *classic* checkout, where the bar
 * is dark. Left alone, that pale colour is what sat on the #f5f5f5 background.
 */
.wc-block-checkout .acfwf-components .acfw-accordion-title,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion-title {
  color: #ece7dc;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.875rem;
}

.wc-block-checkout .acfwf-components .acfw-accordion h3:hover .acfw-accordion-title,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion h3:hover .acfw-accordion-title {
  color: #cdb6a4;
}

.wc-block-checkout .acfwf-components .acfw-accordion .acfw-accordion-inner,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion .acfw-accordion-inner {
  background: #161714;
}

.wc-block-checkout .acfwf-components .acfw-accordion .acfw-accordion-content,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion .acfw-accordion-content {
  color: #d3cfc3;
  font-size: 0.875rem;
  line-height: 1.6;
}

.wc-block-checkout .acfw-store-credit-user-balance strong,
.wp-block-woocommerce-checkout .acfw-store-credit-user-balance strong {
  color: #ece7dc;
}

/* Their caret is a raster image, dark on dark once the bar is dark. */
.wc-block-checkout .acfwf-components .acfw-accordion h3 .caret img,
.wp-block-woocommerce-checkout .acfwf-components .acfw-accordion h3 .caret img {
  filter: invert(1);
  opacity: 0.65;
}

/* The redeem field and its button, matched to the theme. */
.wc-block-checkout .acfw-redeem-store-credit-form-field input.input-text,
.wp-block-woocommerce-checkout .acfw-redeem-store-credit-form-field input.input-text {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  background: #1b1f1b;
  border: 1px solid #3a4239;
  border-radius: 0;
  color: #ece7dc;
}

.wc-block-checkout .acfw_coupon_btn_wrap .button,
.wp-block-woocommerce-checkout .acfw_coupon_btn_wrap .button {
  min-height: 44px;
  background: #eae5d9;
  border: 0;
  border-radius: 0;
  color: #161714;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wc-block-checkout .acfw_coupon_btn_wrap .button:hover,
.wp-block-woocommerce-checkout .acfw_coupon_btn_wrap .button:hover {
  background: #cdb6a4;
  color: #161714;
}

/* --- Cart: how discounts work --- */

.flourish-discount-note {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 1.4rem;
  background: #1b1f1b;
  border-left: 2px solid #cdb6a4;
}

.flourish-discount-note__title {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fa693;
}

.flourish-discount-note__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #b6b3a7;
  text-wrap: pretty;
}

/* --- My Discounts --- */

.flourish-discounts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.flourish-discounts__heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.08;
  /* Overrides the uppercase label treatment applied to h2 in account panes. */
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.flourish-discounts__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flourish-discounts__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1.4rem;
  background: #1b1f1b;
  border-left: 2px solid #cdb6a4;
}

.flourish-discounts__value {
  font-size: 1.0625rem;
  color: #eae5d9;
}

.flourish-discounts__note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8f8b80;
  text-wrap: pretty;
}

.flourish-discounts__upsell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #242f27;
  border: 1px solid #3a4a3e;
}

.flourish-discounts__upsell-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9fb6a5;
}

.flourish-discounts__upsell-lead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  text-wrap: pretty;
}

.flourish-discounts__upsell-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #c3d3c7;
}

.flourish-discounts__upsell-list li {
  padding-left: 1.125rem;
  position: relative;
}

.flourish-discounts__upsell-list li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: #9fb6a5;
}

/* --- Membership: non-member invite --- */

/*
 * Replaces Subscriptions' "You have no active subscriptions / Browse products"
 * notice. Colours are the design's green panel rather than the usual #1b1f1b,
 * because this is the one promotional surface inside the account and it should
 * not read as another data card.
 */
.flourish-coven-invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background: #242f27;
  border: 1px solid #3a4a3e;
}

.flourish-coven-invite__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9fb6a5;
}

.flourish-coven-invite__lead {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.08;
}

.flourish-coven-invite__body {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #c3d3c7;
  text-wrap: pretty;
}

.flourish-coven-invite__cta {
  padding: 1rem 2rem;
  background: #cdb6a4;
  color: #161714;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
}

.flourish-coven-invite__cta:hover,
.flourish-coven-invite__cta:focus-visible {
  background: #eae5d9;
  color: #161714;
  text-decoration: none;
}

/* --- Dashboard greeting --- */

/*
 * Replaces Woo's "Hello NAME (not NAME? Log out)" and its blurb, which listed
 * the same destinations as the rail beside it. Rendered by the dashboard.php
 * override in woocommerce/myaccount/.
 */
.flourish-account-greeting {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
}

.flourish-account-greeting__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.125rem);
  line-height: 1.04;
}

.flourish-account-greeting__since {
  margin: 0;
  font-size: 1rem;
  color: #8f8b80;
}

/* --- Login and register --- */

/*
 * form-login.php wraps the two forms in the same col2-set / col-1 / col-2
 * markup as the addresses pane, so woocommerce-layout.css floats them and
 * sizes them by percentage. Unfixed it reads as two narrow strips adrift in
 * the middle of a wide page, with the privacy paragraph wrapping every three
 * words. Same reset, same explicit placement.
 *
 * Only relevant once registration is switched on: with it off Woo renders the
 * login form alone and there is no second column to fight over. That is why
 * this went unnoticed until Google sign-up needed users_can_register.
 *
 * Breakpoint is 700px rather than the 600px used for addresses — two forms of
 * labelled inputs need more room before splitting than two address blocks.
 */
#customer_login {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

#customer_login > .col-1,
#customer_login > .col-2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

@media (min-width: 700px) {
  #customer_login {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #customer_login > .col-1 {
    grid-column: 1;
    grid-row: 1;
  }

  #customer_login > .col-2 {
    grid-column: 2;
    grid-row: 1;
  }
}

/* --- Addresses --- */

.woocommerce-Addresses {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Woo's col2-set sizes these 48% and floats them; both must go, as above. */
.woocommerce-Addresses > .col-1,
.woocommerce-Addresses > .col-2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

@media (min-width: 600px) {
  .woocommerce-Addresses {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .woocommerce-Addresses > .col-1 {
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce-Addresses > .col-2 {
    grid-column: 2;
    grid-row: 1;
  }
}

.woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.woocommerce-Address-title .edit {
  flex: none;
  font-size: var(--wp--preset--font-size--small);
}

.woocommerce-Address address {
  margin: 0;
  font-style: normal;
  line-height: 1.75;
  color: var(--wp--preset--color--muted);
}

/* --- Tables (orders, downloads, subscriptions) --- */

.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.woocommerce-MyAccount-content table.shop_table th {
  padding: 0 1rem 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--dim);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.woocommerce-MyAccount-content table.shop_table td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}

.woocommerce-MyAccount-content table.shop_table td:last-child,
.woocommerce-MyAccount-content table.shop_table th:last-child {
  padding-right: 0;
}

/*
 * Store Credits: the plugin's own table, given the same treatment.
 *
 * Advanced Coupons renders the credit history as a plain table with its own
 * `acfw-` classes rather than WooCommerce's `shop_table`, so none of the rules
 * above reached it and it shipped as the plugin's light theme — white cells and
 * near-black text on the dark ground, which is the "white table" on the punch
 * list. The selectors mirror the shop_table block deliberately: one visual
 * treatment for every table in the portal, whoever printed it.
 *
 * Scoped to .woocommerce-MyAccount-content and to `acfw-` class names, per the
 * rule this file learned the hard way at the checkout: never a broad pass over
 * plugin or block markup.
 *
 * ⚠ The exact class names are from the plugin's templates, not from a live page.
 * Confirm on staging with the Store Credits endpoint open; if the table carries
 * a different class, add it to this selector list rather than widening it to
 * `table`.
 */
.woocommerce-MyAccount-content table.acfw-store-credit-table,
.woocommerce-MyAccount-content table.acfw-store-credits-table,
.woocommerce-MyAccount-content .acfw-store-credit table,
.woocommerce-MyAccount-content .acfw-store-credits table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 0.9375rem;
}

.woocommerce-MyAccount-content table.acfw-store-credit-table th,
.woocommerce-MyAccount-content table.acfw-store-credits-table th,
.woocommerce-MyAccount-content .acfw-store-credit table th,
.woocommerce-MyAccount-content .acfw-store-credits table th {
  padding: 0 1rem 0.75rem 0;
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: #8fa693;
}

.woocommerce-MyAccount-content table.acfw-store-credit-table td,
.woocommerce-MyAccount-content table.acfw-store-credits-table td,
.woocommerce-MyAccount-content .acfw-store-credit table td,
.woocommerce-MyAccount-content .acfw-store-credits table td {
  padding: 1rem 1rem 1rem 0;
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: #d3cfc3;
  vertical-align: top;
}

.woocommerce-MyAccount-content table.acfw-store-credit-table td:last-child,
.woocommerce-MyAccount-content table.acfw-store-credits-table td:last-child,
.woocommerce-MyAccount-content .acfw-store-credit table td:last-child,
.woocommerce-MyAccount-content .acfw-store-credits table td:last-child {
  padding-right: 0;
}

/* The balance figure is the one number on the page; it reads as the heading. */
.woocommerce-MyAccount-content .acfw-store-credit-user-balance,
.woocommerce-MyAccount-content .acfw-store-credit-balance {
  color: #ece7dc;
}

.woocommerce-MyAccount-content [class*="acfw-store-credit"] .woocommerce-Price-amount {
  color: #ece7dc;
}

/* Any stray light-ground panel the plugin prints around it. */
.woocommerce-MyAccount-content [class*="acfw-store-credit"] {
  background: transparent;
}

/* --- Form fields --- */

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.woocommerce form .form-row label {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100%;
  float: none;
}

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--wp--preset--color--line-light);
  border-radius: 2px;
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.woocommerce .input-text::placeholder,
.woocommerce textarea::placeholder {
  color: var(--wp--preset--color--faint);
}

.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  border-color: var(--wp--preset--color--edge);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Woo wraps password fields to hang its reveal toggle inside the field. */
.woocommerce .password-input {
  position: relative;
  display: block;
}

.woocommerce .show-password-input {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  cursor: pointer;
}

.woocommerce form .form-row-wide .woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

/* --- Notices --- */

/*
 * Woo has two notice systems and only one was styled here. The classic
 * .woocommerce-info markup is handled above; My Account emits the newer block
 * banner instead, which shares no classes with it. That is why the
 * temporary-password notice arrived as a white card with a blue icon on a dark
 * page — not a specificity problem, a different element entirely.
 */
.woocommerce-account .wc-block-components-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  background: #1b1f1b;
  border: 0;
  border-top: 2px solid #cdb6a4;
  border-radius: 0;
  color: #eae5d9;
  font-size: 0.95rem;
  line-height: 1.6;
}

.woocommerce-account .wc-block-components-notice-banner > svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  fill: #cdb6a4;
}

/*
 * Woo colours the icon and action per notice variant from its own block
 * stylesheet, which enqueues after the theme's, so equal-specificity rules
 * lose on order alone. Same problem the cart and checkout section deals with
 * further up, same remedy: raise specificity and force the two colour
 * properties. Nothing else here needs !important.
 *
 * Scoped to .is-info deliberately. The error and success variants carry real
 * signal in their colour and should not be repainted accent without deciding
 * what replaces that signal.
 */
.woocommerce-account .wc-block-components-notice-banner.is-info > svg,
.woocommerce-account .wc-block-components-notice-banner.is-info > svg path {
  fill: #cdb6a4 !important;
}

.woocommerce-account .wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content > .button {
  color: #cdb6a4 !important;
}

.woocommerce-account .wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content > .button:hover {
  color: #eae5d9 !important;
}

/*
 * Woo's markup here is an `<a class="button wc-forward">Resend</a>` followed by
 * a bare text node — the action first, the message second, both inheriting a
 * centre alignment from the banner. Read together on a dark ground that looks
 * like the link is sitting on top of the text. It never was; it is ordinary
 * inline content in an unhelpful order.
 *
 * Laid out as a wrapping flex row so the message can lead and the action can
 * drop below it when the column is narrow. The text node becomes an anonymous
 * flex item with order 0, so giving the link order 1 is enough to reverse them
 * without touching the markup.
 */
.woocommerce-account .wc-block-components-notice-banner__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  text-align: left;
}

/* .button is Woo's, and its default styling is invisible here. Make it read as
   the secondary action it is rather than a missing button. */
.woocommerce-account .wc-block-components-notice-banner__content > .button {
  order: 1;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #cdb6a4;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.woocommerce-account .wc-block-components-notice-banner__content > .button:hover {
  background: none;
  color: #eae5d9;
}


.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--wp--preset--color--line-light);
  border-left-width: 2px;
  border-left-color: var(--wp--preset--color--blush);
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--muted);
  font-size: 0.9375rem;
  list-style: none;
}

/* ---------------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------------- */

/*
 * Two columns on anything wider than a phone, with the message spanning both.
 * Field styling matches the checkout and account forms rather than inventing a
 * third look — the same 44px minimum target, the same panel fill and edge.
 */
.flourish-contact {
	max-width: 46rem;
}

.flourish-contact-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2rem;
}

@media (min-width: 700px) {
	.flourish-contact-form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.flourish-contact-field.is-wide,
	.flourish-contact-submit {
		grid-column: 1 / -1;
	}
}

.flourish-contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.flourish-contact-field label {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-contact-optional {
	letter-spacing: 0.04em;
	text-transform: none;
	color: #6f7a70;
}

.flourish-contact-field input,
.flourish-contact-field select,
.flourish-contact-field textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.75rem 0.875rem;
	background: #1b1f1b;
	border: 1px solid #2c2e28;
	border-radius: 0;
	color: #eae5d9;
	font-family: inherit;
	font-size: 1rem;
}

.flourish-contact-field textarea {
	min-height: 9rem;
	line-height: 1.5;
	resize: vertical;
}

.flourish-contact-field input:focus,
.flourish-contact-field select:focus,
.flourish-contact-field textarea:focus {
	border-color: #cdb6a4;
	outline: none;
}

.flourish-contact-submit {
	margin: 0;
}

.flourish-contact-submit button {
	min-height: 2.75rem;
	padding: 0.875rem 2rem;
	background: #cdb6a4;
	border: 0;
	color: #161714;
	font-family: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 120ms ease;
}

.flourish-contact-submit button:hover {
	background: #e0cbba;
}

/* Hidden from people, reachable by bots. Not display:none — some bots skip
   fields they can tell are hidden that way. */
.flourish-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.flourish-contact-notice {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.125rem;
	border-left: 2px solid #cdb6a4;
	background: #1b1f1b;
	color: #eae5d9;
	font-size: 0.9375rem;
}

.flourish-contact-notice.is-bad {
	border-left-color: #b4674f;
}

/* ---------------------------------------------------------------------------
   Plain page header
   --------------------------------------------------------------------------- */

/*
 * Contact, FAQ, Shipping, Returns and the legal pages used to open with the
 * post title at display size — a 3.25rem serif banner announcing a word the
 * customer just clicked. The page name is now a small marker and the opening
 * sentence carries the page.
 *
 * It stays an h1, so the document outline and everything that reads it are
 * unchanged; only the type size moved. theme.json sets h1 through :where(),
 * which carries no specificity, so a single class overrides it cleanly.
 */
.flourish-page-label {
	margin: 0 0 1.375rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #cdb6a4;
}

/*
 * The first paragraph becomes the page's opening line. Automatic rather than a
 * per-page class, so nothing has to be remembered when a page is added — and
 * the plugin-rendered legal pages are untouched, because their first child is
 * an embed rather than a paragraph.
 */
body.page .wp-block-post-content > p:first-child {
	/* The constrained layout sets `margin-left/right: auto` with !important on
	   every child, so a max-width here centres the block instead of setting a
	   measure. Beating !important is the only way to keep the line flush left. */
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	line-height: 1.2;
	color: #eae5d9;
	text-wrap: pretty;
}

/* The sentence after the lead is the supporting line, not body copy. */
body.page .wp-block-post-content > p:first-child + p {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 60ch;
	color: #b6b3a7;
}

/* On archives the label sits under the breadcrumb, which is the same size and
   case, so it needs air above it to read as a heading rather than a second
   breadcrumb line. */
.wp-block-query-title.flourish-page-label {
	margin-top: 0.875rem;
}

/* The Shop archive names itself three times over — breadcrumb, heading, and the
   filter panel beside it — so the heading is kept for machines and dropped for
   eyes. Not display:none, which would take it out of the accessibility tree
   along with the page's only h1. */
.flourish-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The same treatment under WordPress's own class name. Core ships this rule in
   the block library stylesheet, and `parts/header.html` relies on it for the
   search field's label — but that stylesheet is the first thing a performance
   plugin unloads, and an unlabelled search input is a real failure to take on
   trust. Declaring it here costs eight lines and removes the dependency. */
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Skip link

   Printed by inc/accessibility.php on wp_body_open, so it is the first stop in
   the tab order, and pointed at the id that module adds to <main>. Hidden until
   focused, then a real, readable control rather than a 1px sliver — someone who
   has just tabbed into an invisible element cannot tell whether they hit it.
   --------------------------------------------------------------------------- */

.flourish-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	transform: translateY(-120%);
	display: inline-block;
	padding: 0.85rem 1.5rem;
	background: #eae5d9;
	color: #161714;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 120ms ease-out;
}

.flourish-skip-link:focus {
	transform: translateY(0);
	color: #161714;
	outline: 2px solid #cdb6a4;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.flourish-skip-link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Shop quick filters
   --------------------------------------------------------------------------- */

/*
 * Three sections over the grid, so the common case — "show me clothing" — takes
 * one tap instead of a scroll through the sidebar. Deliberately links, not
 * facet toggles: each one is a real category archive.
 */
.flourish-quick-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.flourish-quick-filter {
	display: inline-flex;
	align-items: center;
	min-height: 2.375rem;
	padding: 0.5rem 1.125rem;
	border: 1px solid #2c2e28;
	color: #b6b3a7;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.flourish-quick-filter:hover {
	border-color: #4b5c4f;
	color: #eae5d9;
	text-decoration: none;
}

.flourish-quick-filter.is-active {
	background: #cdb6a4;
	border-color: #cdb6a4;
	color: #161714;
}

/* Phones: one row, equal thirds. Three sections fit; a fourth would need a
   horizontal scroll instead. */
@media (max-width: 781px) {
	.flourish-quick-filters {
		flex-wrap: nowrap;
		gap: 0.375rem;
	}

	.flourish-quick-filter {
		flex: 1 1 0;
		justify-content: center;
		padding: 0.5rem 0.5rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
}


/* Hidden-Seam Dragon Egg
   ---------------------------------------------------------------------------
   The listing drives Woo's real variation selects from buttons, so the
   selects are hidden rather than removed — Woo still owns price and stock. */

/* Moved off-canvas rather than clipped to 1px: a table cannot lay out narrower
   than its own content, so the usual visually-hidden recipe left this at full
   width where it sat, and its select labels pushed the page sideways on a
   phone. Left of the viewport adds no scrollable area. */
.flourish-dragon-egg .variations,
.flourish-dragon-egg .reset_variations {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

.flourish-dragon-egg .single_variation_wrap {
	margin-top: var(--wp--preset--spacing--40);
}

/* Woo prints the chosen variation's price and dimensions again inside the form,
   directly under controls that already say both. The live price at the top of
   the column is the one place it belongs. The add-to-cart row is a sibling of
   this element, so hiding it costs no function. */
/* !important because Woo's variation script slides this open with an inline
   display:block, which a plain rule cannot outrank. */
.flourish-dragon-egg .single_variation {
	display: none !important;
}

/* The live price, where the range used to be. Its own air above: against the
   description it read as another line of the paragraph. */
.flourish-egg-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.875rem;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
}

.flourish-egg-price__amount {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 34px;
	line-height: 1;
	color: var(--wp--preset--color--blush);
}

/* Only says anything on a premium filament, and collapses to nothing otherwise —
   an empty span with a gap would still push the line. */
.flourish-egg-price__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.flourish-egg-price__note:empty {
	display: none;
}

/* The chosen colorway, named. Sits directly under the price with the price's
   own bottom margin transferred to it, so adding the line did not add a gap. */
.flourish-egg-price {
	margin-bottom: 0.625rem;
}

.flourish-egg-chosen {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.flourish-egg-chosen__dot {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 1.125rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.flourish-egg-chosen__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}

.flourish-egg-chosen__name {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-egg-chosen__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
}

.flourish-egg-chosen__note:empty {
	display: none;
}

.flourish-egg-label {
	display: block;
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
}

/* Gallery */

.flourish-egg-gallery {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	position: sticky;
	top: 6rem;
}

.flourish-egg-gallery__hero {
	aspect-ratio: 4 / 3;
	background: #17181a center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flourish-egg-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.625rem;
}

.flourish-egg-gallery__thumb {
	aspect-ratio: 4 / 3;
	padding: 0;
	background: #17181a center / contain no-repeat;
	border: 1px solid var(--wp--preset--color--line);
	cursor: pointer;
}

.flourish-egg-gallery__thumb.is-active {
	border-color: var(--wp--preset--color--blush);
}

.flourish-egg-gallery__thumb:hover {
	border-color: var(--wp--preset--color--moss);
}

.flourish-egg-gallery__hero.is-pending,
.flourish-egg-gallery__thumb.is-pending,
.flourish-egg-scale__figure.is-pending {
	background-image: repeating-linear-gradient(135deg, #20241f 0, #20241f 12px, #242a23 12px, #242a23 24px);
}

.flourish-egg-gallery__pending,
.flourish-egg-scale__figure span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
	text-align: center;
	padding: 0 1.25rem;
}

/* Sizes */

.flourish-egg-sizes {
	margin-bottom: var(--wp--preset--spacing--40);
}

.flourish-egg-sizes__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.flourish-egg-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.flourish-egg-size:hover {
	border-color: var(--wp--preset--color--moss);
}

.flourish-egg-size.is-selected {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--blush);
}

.flourish-egg-size__body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.flourish-egg-size__dot {
	display: block;
	width: 1.3rem;
	height: 2.1rem;
	flex: 0 0 1.3rem;
	border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset -4px -5px 9px rgba(0, 0, 0, 0.42);
}

/* The ring page reuses the egg size rows, so the glyph has to stop being an
   egg. A masked disc keeps the swatch colour the picker writes inline and
   reads as a band rather than a solid dot. The mask clips the inset shadows,
   so depth comes from a drop shadow under the ring instead. */

.flourish-ring-sizes .flourish-egg-size__dot {
	width: 1.7rem;
	height: 1.7rem;
	flex: 0 0 1.7rem;
	border-radius: 50%;
	box-shadow: none;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 41%, #000 42%);
	mask-image: radial-gradient(circle at 50% 50%, transparent 0 41%, #000 42%);
}

.flourish-egg-size__text {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 0;
}

.flourish-egg-size__name {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-egg-size__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
}

.flourish-egg-size__price {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1.5rem;
	color: var(--wp--preset--color--blush);
	white-space: nowrap;
}

/* Colorways */

.flourish-egg-colorways {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.flourish-egg-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5625rem;
}

.flourish-egg-group__label {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}

.flourish-egg-group__note {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blush);
}

.flourish-egg-swatches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5625rem;
}

.flourish-egg-swatches--plain {
	display: flex;
	flex-wrap: wrap;
}

.flourish-egg-swatch {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	padding: 0.625rem 0.75rem;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.flourish-egg-swatch--plain {
	padding: 0.4375rem;
}

/*
 * A premium filament in the plain set. The group heading's "+$2" note only
 * covers the named premium grid, so the rim is what tells a shopper this one
 * costs more. Two rings: the inner one in the panel colour separates the gold
 * from the chip.
 */
.flourish-egg-swatch--premium .flourish-egg-swatch__chip {
	box-shadow: 0 0 0 2px var(--wp--preset--color--panel), 0 0 0 3px #b08d3f;
}

.flourish-egg-swatch:hover {
	border-color: var(--wp--preset--color--moss);
}

.flourish-egg-swatch.is-selected {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--blush);
}

.flourish-egg-swatch__chip {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
	flex: 0 0 auto;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset -3px -4px 7px rgba(0, 0, 0, 0.4);
}

.flourish-egg-swatch__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.flourish-egg-swatch__name {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bone);
	line-height: 1.25;
}

.flourish-egg-swatch__note {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--dim);
	line-height: 1.3;
}

/* Lead time */

.flourish-egg-lead {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 1.125rem 1.25rem;
	background: var(--wp--preset--color--forest);
	border-left: 2px solid var(--wp--preset--color--blush);
}

.flourish-egg-lead p {
	margin: 0;
}

.flourish-egg-lead__headline {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-egg-lead__detail {
	margin-top: 0.5rem !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sage);
}

/* Materials note */

.flourish-egg-material {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.flourish-egg-material__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	flex: none;
	padding: 0.5rem 0.75rem;
	border: 1px solid #5c7061;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fb6a5;
}

.flourish-egg-material__badge svg {
	display: block;
	flex: none;
}

.flourish-egg-material__text {
	margin: 0 !important;
	flex: 1 1 16rem;
	min-width: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sage);
	text-wrap: pretty;
}

/* Footnote under the egg page. Kept narrow so it reads as a footnote rather
   than a body paragraph running the full 1320px. */

.flourish-egg-disclaimer {
	max-width: 46rem;
	margin-left: auto !important;
	margin-right: auto !important;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Ring Page Holder — only the parts that differ from the egg.

   The listing borrows the egg's body class, so every swatch, gallery and
   lead-time rule above already applies. What follows is the short list of
   places where three ring sizes at one price behave differently from five
   egg sizes at ten.
   --------------------------------------------------------------------------- */

.flourish-ring-sizes__hint {
	margin: 0.75rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
}

/* Three sizes, evenly spaced — the egg's weighted columns exist to make the
   labels sit under the eggs in its line-up photograph, which does not apply
   to a row of near-identical rings. */
.flourish-ring-scale .flourish-egg-scale__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flourish-ring-scale .flourish-egg-scale__spacer {
	display: none;
}

.flourish-ring-scale__us {
	color: var(--wp--preset--color--dim) !important;
}

.flourish-ring-measure {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: start;
	max-width: 70ch;
	margin: 2.5rem auto 0;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
}

.flourish-ring-measure__title {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--bone);
}

.flourish-ring-measure__steps {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

.flourish-ring-measure__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.flourish-ring-measure__table th {
	padding: 0 0 0.5rem;
	text-align: left;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.flourish-ring-measure__table td {
	padding: 0.55rem 0;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.flourish-ring-measure__table tr:last-child td {
	border-bottom: 0;
}

.flourish-ring-measure__foot {
	grid-column: 1 / -1;
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
	text-wrap: pretty;
}

@media (max-width: 600px) {
	.flourish-ring-measure {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* Size comparison */

.flourish-egg-scale__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 400;
}

.flourish-egg-scale__figure {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #17181a center / contain no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The label columns are weighted to sit under the eggs in the photograph,
   which are not evenly spaced — the smallest sits close to the frame edge
   and the gaps widen towards the Large. A trailing spacer absorbs the
   margin to the right of the Large. */
.flourish-egg-scale__list {
	display: grid;
	grid-template-columns: minmax(0, 23.4fr) minmax(0, 15fr) minmax(0, 31fr) minmax(0, 23.2fr) minmax(0, 7.4fr);
	margin: 1.25rem 0 0;
}

.flourish-egg-scale__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0.375rem;
}

.flourish-egg-scale__row dt {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-egg-scale__row dd {
	margin: 0.1875rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
}

.flourish-egg-scale__price {
	margin-top: 0.5rem !important;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--blush) !important;
}

.flourish-egg-scale__foot {
	max-width: 70ch;
	margin: 1.25rem auto 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
	text-align: center;
	text-wrap: pretty;
}

@media (max-width: 600px) {
	.flourish-egg-scale__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.flourish-egg-scale__spacer {
		display: none;
	}
}

/* Dragon egg showcase ---------------------------------------------------------
   Two photographs, one per shape of screen, each at its natural aspect so the
   whole frame is always visible — the wide line-up cropped to a phone loses the
   eggs at both ends, and a fixed height plus object-fit crops one or the other
   at every width in between. Full-bleed, like the hero. */

.flourish-egg-showcase {
	margin: 0;
	line-height: 0;
}

.flourish-egg-showcase img {
	display: block;
	width: 100%;
	height: auto;
}

.flourish-egg-showcase--narrow {
	display: none;
}

@media (max-width: 781px) {
	.flourish-egg-showcase--wide {
		display: none;
	}

	.flourish-egg-showcase--narrow {
		display: block;
	}
}

/* Breadcrumb on small screens --------------------------------------------------
   Four uppercase, letter-spaced segments are a wide line. Reducing the tracking
   before the size keeps it legible: at 0.14em the spacing is doing most of the
   damage, and dropping it buys more room than another step down in type would. */

.flourish-shop-back {
	display: none;
}

@media (max-width: 781px) {
	/* The trail is four uppercase, letter-spaced segments — too wide for a phone,
	   and there is nothing to put in its place now that the back link is gone
	   (removed Aug 15 2026; the browser's own back button does the job). So the
	   whole band collapses rather than leaving an empty padded strip above the
	   product. Desktop keeps the trail. */
	.flourish-crumb-bar {
		display: none;
	}
}

/* Horizontal scroll guards -----------------------------------------------------
   A grid or flex item's default minimum size is its content, so one long word —
   a product title, a colorway name — makes the whole row wider than the viewport
   and the page scrolls sideways. These set the floor to zero where the content
   is text that may wrap. */

.flourish-egg-sizes__list > *,
.flourish-egg-swatches > *,
.flourish-egg-scale__row,
.flourish-egg-swatch,
.flourish-egg-swatch__text {
	min-width: 0;
}

.flourish-egg-swatch__name,
.flourish-egg-swatch__note,
.flourish-egg-scale__row dt,
.flourish-egg-scale__row dd {
	overflow-wrap: anywhere;
}

/* Mini-cart drawer: same problem, plus the drawer is fixed to the viewport, so
   anything overflowing it scrolls the page behind rather than the panel. */

.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__content {
	max-width: 100vw;
	overflow-x: hidden;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	overflow-wrap: anywhere;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata,
.wc-block-mini-cart__drawer td {
	min-width: 0;
}

/* Category copy, moved below the grid ------------------------------------------
   The SEO paragraph used to sit between the heading and the first product, which
   put prose in front of everyone on a phone before a single cover appeared. It
   is the same block, indexed the same, now after the grid where it reads as a
   closing note rather than a toll gate. */

.flourish-term-description-foot .flourish-term-description {
	max-width: 70ch;
	margin: 0;
}

/* Two products per row on phones -----------------------------------------------
   One card per row turned a category into a scroll of full-screen covers. Two
   columns is what a shopper expects and what makes a grid scannable; the block's
   own responsive rule collapses to a single column, so this overrides it for
   every product grid in the shop. */

@media (max-width: 600px) {
	.flourish-product-collection .wp-block-post-template,
	.flourish-product-collection .wc-block-product-template,
	.flourish-product-collection ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.25rem 0.875rem !important;
	}

	.flourish-product-collection .wc-block-product,
	.flourish-product-collection li.product {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* Titles get two words to a line at this width, so the type steps down with
	   the column rather than staying at reading size. */
	.flourish-product-collection .wp-block-post-title {
		font-size: 0.9375rem;
		line-height: 1.3;
	}
}

/* Event detail panel -----------------------------------------------------------
   Facts first, then the three things a reader does with them: put it in my
   calendar, take me there, show me the post. Actions are laid out as a wrapping
   row rather than a stack so a phone gets two per line instead of six screens
   of buttons. */

.flourish-event-details {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 1.5rem;
	background: #1b1f1b;
	border: 1px solid #2c2e28;
}

.flourish-event-status {
	margin: 0 0 1rem;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

/* Sold out is the one status that changes what a reader should do next, so it is
   the one status that gets a colour. */
.flourish-event-status.is-sold-out,
.flourish-schedule-status.is-sold-out {
	color: #cdb6a4;
}

.flourish-event-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 1rem 1.5rem;
	margin: 0 0 1.5rem;
}

.flourish-event-fact dt {
	margin-bottom: 0.3125rem;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7f8a7f;
}

.flourish-event-fact dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #e5e0d4;
	overflow-wrap: anywhere;
}

.flourish-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
}

.flourish-event-cta {
	padding: 0.875rem 1.75rem;
	background: #eae5d9;
	color: #161714;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
}

.flourish-event-cta:hover {
	background: #cdb6a4;
	color: #161714;
}

.flourish-event-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid #4b5c4f;
	color: #b9c9bd;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.flourish-event-action:hover {
	border-color: #cdb6a4;
	color: #f7f2ec;
}

/* Phones: two buttons per row, equal width, so five actions take three rows
   instead of five. The ticket CTA keeps the full row. */
@media (max-width: 781px) {
	.flourish-event-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.flourish-event-actions .flourish-event-cta {
		grid-column: 1 / -1;
		text-align: center;
	}

	.flourish-event-action {
		justify-content: center;
		padding: 0 0.75rem;
		text-align: center;
	}
}

/* Month schedule ---------------------------------------------------------------
   The flyer, in HTML: date rail on the left, event and venue in the middle,
   status on the right. Whole row is the link — on a phone the title alone is a
   small target and the date is the part people aim at. */

.flourish-schedule {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #2c2e28;
}

.flourish-schedule-row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.125rem 0;
	border-bottom: 1px solid #2c2e28;
	color: inherit;
	text-decoration: none;
}

.flourish-schedule-row:hover {
	background: #20241f;
}

.flourish-schedule-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}

.flourish-schedule-dow {
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fa693;
}

.flourish-schedule-day {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.75rem;
	color: #f7f2ec;
}

.flourish-schedule-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.flourish-schedule-title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.25rem;
	line-height: 1.25;
	color: #f7f2ec;
	text-wrap: pretty;
}

.flourish-schedule-meta {
	font-size: 0.8125rem;
	color: #8f8b80;
}

.flourish-schedule-status {
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fa693;
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* Status drops under the title rather than squeezing the middle column. */
	.flourish-schedule-row {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 0.875rem;
	}

	.flourish-schedule-status {
		grid-column: 2;
		white-space: normal;
	}

	.flourish-schedule-title {
		font-size: 1.0625rem;
	}
}


/* Blush Club — "what a night actually looks like".
   An explicit three-column grid: the lead group shot spans the full row as a
   letterbox, the three supporting shots sit under it as square crops. WP's own
   grid block was wrapping these two-up at this container width. */
.flourish-club-shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
	margin-top: clamp(24px, 3vw, 40px);
}

.flourish-club-shot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.flourish-club-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--panel, #1b1f1b);
}

.flourish-club-shot--wide {
	grid-column: 1 / -1;
}

.flourish-club-shot--wide img {
	aspect-ratio: 21 / 9;
	object-position: 50% 30%;
}

.flourish-club-shot figcaption {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #8f8b80);
	text-align: left;
}

.flourish-club-shot figcaption em {
	font-style: normal;
	color: var(--wp--preset--color--parchment, #b6b3a7);
}

@media (max-width: 781px) {
	.flourish-club-shots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.flourish-club-shot--wide img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 480px) {
	.flourish-club-shots {
		grid-template-columns: 1fr;
	}
}


/* Everyday promo tiles — label and figure above their own photo, so on a phone
   (where the text column stacks) each price still sits with the thing it
   describes rather than both labels landing under both images. */
.flourish-promo-tile {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.flourish-promo-tile > * {
	margin-block: 0;
}

.flourish-promo-tile figure {
	margin-block-start: 0.75rem !important;
}

/* The Coven variant is a footnote to the offer, not a second offer. */
.flourish-promo-footnote {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

.flourish-promo-footnote p {
	margin: 0;
	max-width: 60ch;
	color: #8f8b80;
}

/* Instagram's embed reserves room for a comment field that never fills, so a
   fixed 760px leaves a white void on a phone. Height tracks the viewport
   instead: the media is square, and the chrome above and below is fixed. */
.flourish-event-embed iframe,
.flourish-upcoming-embed iframe {
	height: 47.5rem;
}

@media (max-width: 782px) {
	.flourish-event-embed iframe,
	.flourish-upcoming-embed iframe {
		height: calc(100vw + 9.5rem);
		max-height: 47.5rem;
	}

	/* Event rows: the date was vertically centred against a much taller body,
	   which read as floating in the middle of the row. Stack instead. */
	.flourish-event-row {
		align-items: flex-start;
		gap: 0.75rem;
	}

	.flourish-event-date {
		flex: 1 1 100%;
		flex-direction: row;
		align-items: baseline;
		gap: 0.625rem;
		min-width: 0;
	}

	.flourish-event-body {
		flex: 1 1 100%;
	}

	.flourish-event-aside {
		flex: 1 1 100%;
	}
}


/* ---------------------------------------------------------------------------
   Page headers — the space above them.

   Every page opened with a header band carrying a full spacing-60 step top and
   bottom, sitting under a top bar that already has its own padding. Stacked,
   that put the first words of the page a long way down an empty screen. These
   rules apply only to the FIRST thing inside main, so a band lower down the
   page keeps its generous spacing: the complaint is dead space at the top, not
   dead space in general.
   --------------------------------------------------------------------------- */

main > *:first-child {
	margin-top: 0 !important;
}

main > .wp-block-group:first-child:not(.flourish-crumb-bar):not(.wp-block-post-content) {
	padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* A columns hero pads its columns, not itself — reach through to them, and
   leave the horizontal padding alone so the band keeps its shape. */
main > .wp-block-columns:first-child > .wp-block-column {
	padding-top: clamp(1.75rem, 3.5vw, 3rem) !important;
	padding-bottom: clamp(1.75rem, 3.5vw, 3rem) !important;
}

/* On a phone the band is the whole first screen, so it can afford less still. */
@media (max-width: 781px) {
	main > .wp-block-group:first-child:not(.flourish-crumb-bar):not(.wp-block-post-content),
	main > .wp-block-columns:first-child > .wp-block-column {
		padding-top: 1.25rem !important;
		padding-bottom: 1.25rem !important;
	}
}


/* Coven sign-up: page holder size + birthday
   ---------------------------------------------------------------------------
   The membership form collects four things now (Aug 2026): shirt size, page
   holder size, and the month and day of a birthday. The existing
   .flourish-coven-size wrapper already styles labels and selects, so these two
   additions only handle what it had no case for — a collapsed sizing guide, and
   two selects that belong on one line. */

.flourish-coven-guide {
	margin: 0.75rem 0 0;
	border: 1px solid var(--wp--preset--color--edge, #2c2e28);
	padding: 0.75rem 0.9rem;
}

.flourish-coven-guide > summary {
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--wp--preset--color--blush, #cdb6a4);
}

.flourish-coven-guide[open] > summary {
	margin-bottom: 1rem;
}

/* The guide is authored for a full-width product page. Inside the sign-up
   column it has to give up the two-column grid or the table crushes. */
.flourish-coven-guide .flourish-ring-measure {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	padding: 0;
	border: 0;
}

.flourish-coven-birthday {
	margin-top: 1rem;
}

.flourish-coven-birthday__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #b6b3a7);
}

.flourish-coven-birthday select {
	display: inline-block;
	width: auto;
	min-width: 8rem;
	margin-right: 0.5rem;
}

@media (max-width: 480px) {
	.flourish-coven-birthday select {
		width: 100%;
		margin-right: 0;
		margin-bottom: 0.5rem;
		min-width: 0;
	}
}


/* Cancellation confirmation dialog
   ---------------------------------------------------------------------------
   A native <dialog>, so Escape and focus trapping come for free. Only the
   backdrop and the panel need styling. The panel is deliberately not a scare
   screen: the primary action is keeping the membership, but cancelling is a
   plain visible button, not a hidden link. */

.flourish-guard {
	max-width: 34rem;
	width: calc(100% - 2rem);
	padding: 0;
	border: 1px solid #cdb6a4;
	background: #1b1f1b;
	color: #eae5d9;
}

.flourish-guard::backdrop {
	background: rgba(10, 11, 9, 0.72);
}

.flourish-guard__inner {
	padding: 1.75rem;
	display: grid;
	gap: 0.9rem;
}

.flourish-guard__eyebrow,
.flourish-guard__label {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #cdb6a4;
}

.flourish-guard__title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 400;
	line-height: 1.15;
}

.flourish-guard__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.flourish-guard__list {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #b6b3a7;
}

.flourish-guard__terms {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid #2c2e28;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #8f8c82;
}

.flourish-guard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.flourish-guard__keep,
.flourish-guard__go {
	font: inherit;
	cursor: pointer;
	padding: 0.85rem 1.4rem;
	border: 1px solid transparent;
	min-height: 44px;
}

.flourish-guard__keep {
	background: #cdb6a4;
	border-color: #cdb6a4;
	color: #161714;
	flex: 1 1 14rem;
}

.flourish-guard__go {
	background: transparent;
	border-color: #4a4d44;
	color: #b6b3a7;
}

.flourish-guard__go:hover,
.flourish-guard__go:focus-visible {
	border-color: #b6b3a7;
	color: #eae5d9;
}

.flourish-guard__go[disabled] {
	opacity: 0.5;
	cursor: default;
}


/* Classic account forms: the dark field treatment
   ---------------------------------------------------------------------------
   The rule at the top of this file dresses fields for the block checkout, the
   search input and the facets. **The classic WooCommerce forms were never in
   that list** — login, lost password, edit address, edit account — so they render
   Woo's light-theme defaults: white boxes on charcoal, a red asterisk, and a
   browser-default checkbox. Reported Aug 16 2026 on the login page.

   Scoped to .woocommerce rather than to the login form alone, because every one
   of those forms has the same problem and fixing one of them invites the same
   report about the next. */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="password"] {
	width: 100%;
	padding: 0.85rem 0.9rem;
	min-height: 48px;
	background: #14170f;
	border: 1px solid #3a3d34;
	border-radius: 0;
	color: #eae5d9;
	font: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-account form input:focus {
	outline: 2px solid #cdb6a4;
	outline-offset: 1px;
	border-color: #cdb6a4;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b6b3a7;
}

/* Woo's asterisk is bright red on a near-black panel, which reads as an error
   rather than "required". Every field on these forms is required anyway. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: #cdb6a4;
	border: 0;
	text-decoration: none;
}

/* The reveal button ships a black glyph, invisible here until hovered. */
.woocommerce form .form-row .show-password-input,
.woocommerce form .form-row .show-password-input::after {
	color: #b6b3a7;
	filter: invert(1) brightness(1.6);
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
	color: #b6b3a7;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: #cdb6a4;
}

/* The panel itself: a bordered box with no padding reads as a stray outline. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid #2c2e28;
	background: #1b1f1b;
	margin: 0;
}

.woocommerce-form-login .form-row,
.woocommerce-ResetPassword .form-row {
	margin: 0;
	padding: 0;
}

.woocommerce-form-login button[type="submit"] {
	width: 100%;
	min-height: 48px;
}

.woocommerce-LostPassword {
	margin: 0;
	font-size: 0.9375rem;
}

/* The Google button is the theme's own `.flourish-social__btn` from
   inc/social-login.php, not Nextend markup — see its rule above. Nextend does the
   OAuth; the button is ours. Selectors targeting Nextend classes were removed
   after an hour spent looking for a plugin setting that could not have helped. */


/* Login page: one centred panel
   ---------------------------------------------------------------------------
   Cory, Aug 16: drop the heading, centre the box, scale it up. The "Login"
   heading lives in the My Account page's own content rather than the template,
   and it carried most of the empty space above the form — so hiding it closes the
   gap as well as removing a label the form already gives.

   Only when logged out. Signed in, the same page is the account portal and its
   headings are doing real work. */

/* The heading is WooCommerce's, not ours. `form-login.php` prints <h2>Login</h2>
   above the form whenever registration is enabled — which it is, because Google
   sign-up needs `users_can_register`. It inherits the theme's display serif, so it
   reads as a page title, and it carried the empty space above the form. The form
   is self-evidently a login form; the heading only labels it twice.

   Both the h1 (if a page ever adds one) and Woo's own h2 are covered. */
.woocommerce-account:not(.logged-in) .entry-content > h1,
.woocommerce-account:not(.logged-in) main > h1,
.woocommerce-account:not(.logged-in) #customer_login h2,
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .u-column1 > h2 {
	display: none;
}

/* No heading above it any more, so the panel carries no top space of its own —
   the template's own padding is enough and anything more reads as a dead band. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: 0;
}

.woocommerce-account:not(.logged-in) main {
	padding-top: clamp(16px, 2vw, 28px) !important;
}

/* With the heading gone the panel is the first thing in the column, so it must
   not inherit a heading-sized top margin from anything above it. */
.woocommerce-account:not(.logged-in) #customer_login,
.woocommerce-account:not(.logged-in) #customer_login > .col-1 {
	margin-top: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
	gap: 1.35rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text {
	min-height: 52px;
	font-size: 1.0625rem;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login button[type="submit"] {
	min-height: 52px;
	font-size: 1rem;
}

/* Woo prints the checkbox as a sibling of the label text inside the label, and
   the browser default is a white square that survives accent-color alone. */
.woocommerce-account form input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 0.55rem 0 0;
	accent-color: #cdb6a4;
	background: #14170f;
	border: 1px solid #3a3d34;
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	vertical-align: text-bottom;
	cursor: pointer;
}

.woocommerce-account form input[type="checkbox"]:checked {
	background: #cdb6a4;
	border-color: #cdb6a4;
}

.woocommerce-account form input[type="checkbox"]:checked::after {
	content: "";
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid #161714;
	border-bottom: 2px solid #161714;
	transform: translateY(-1px) rotate(-45deg);
}

/* "Remember me" was inheriting the uppercase field-label treatment, which made
   a sentence shout. Field names shout; sentences do not. */
.woocommerce-form__label-for-checkbox,
.woocommerce-form-login .woocommerce-form-login__rememberme {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
}


/* Express payment: collapse when there is nothing in it
   ---------------------------------------------------------------------------
   With no Google Pay or Apple Pay card available, WooCommerce still renders the
   express-payment block — an empty bordered region at the very top of checkout,
   which reads as a broken payment area before the customer has done anything.
   Logged as a defect Aug 15 2026, fixed here.

   **Not removed from the template.** `page-checkout.html` and `page-cart.html`
   keep the block, because Square can serve Apple Pay and Google Pay: delete the
   block and express checkout can never appear again without a template edit.
   Collapsing while empty keeps it automatic — the moment a real button renders,
   `:has()` stops matching and the region returns.

   Matching on both button and iframe: the wallets render as a button in some
   integrations and inside a frame in others.

   Deliberately `display: none` and nothing else. The note higher up in this file
   records an earlier, more thorough pass over this same area that broke Woo's own
   layout; this must not repeat it. */

.wp-block-woocommerce-checkout-express-payment-block:not(:has(button)):not(:has(iframe)),
.wp-block-woocommerce-cart-express-payment-block:not(:has(button)):not(:has(iframe)),
.wc-block-checkout__express-payment:not(:has(button)):not(:has(iframe)),
.wc-block-cart__express-payment:not(:has(button)):not(:has(iframe)) {
	display: none !important;
}

/* The "or" rule that separates express from the form goes with it. Written for
   both cases because the divider sits inside the block in some Woo versions and
   as its sibling in others. */
.wp-block-woocommerce-checkout-express-payment-block:not(:has(button)):not(:has(iframe)) + .wc-block-checkout__express-payment-continue-rule,
.wc-block-checkout__express-payment:not(:has(button)):not(:has(iframe)) + .wc-block-checkout__express-payment-continue-rule {
	display: none !important;
}


/* ---------------------------------------------------------------------------
   Checkout: country and state controls
   ---------------------------------------------------------------------------
   These two are the only fields Woo renders as a combobox — a text input plus a
   listbox — rather than the plain inputs the rest of the form uses, so the
   input[type] rules further up never reached them and Woo's own stylesheet
   painted them white. Two pale slabs in a dark form (reported Aug 23 2026).

   Same fill, border and text colour as every other field. Native selects lose
   their arrow to appearance:none, so one is drawn back in the field colour.
   --------------------------------------------------------------------------- */

.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout .wc-block-components-country-input input,
.wc-block-checkout .wc-block-components-state-input input,
.wc-block-components-address-form .wc-block-components-combobox input,
.wc-block-checkout select,
.wc-block-components-address-form select {
	background: #1b1f1b !important;
	border: 1px solid #2c2e28 !important;
	border-radius: 0 !important;
	color: #eae5d9 !important;
	-webkit-text-fill-color: #eae5d9 !important;
	box-shadow: none !important;
	min-height: 44px;
}

.wc-block-checkout select,
.wc-block-components-address-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23eae5d9' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
}

/* The floating label sits on the field, so it takes the same treatment the
   text-input labels already get rather than Woo's white chip. */
.wc-block-checkout .wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-country-input label,
.wc-block-checkout .wc-block-components-state-input label {
	color: #8f8b80 !important;
	background: transparent !important;
}

/* The open listbox, which Woo also ships light. */
.wc-block-components-combobox-list {
	background: #1b1f1b !important;
	border: 1px solid #2c2e28 !important;
	border-radius: 0 !important;
	color: #eae5d9 !important;
}

.wc-block-components-combobox-list-item {
	color: #eae5d9 !important;
}

.wc-block-components-combobox-list-item.is-highlighted,
.wc-block-components-combobox-list-item[aria-selected="true"] {
	background: #2c2e28 !important;
	color: #f5f1e8 !important;
}

/* ---------------------------------------------------------------------------
   Termly policy embeds — the seven legal pages
   ---------------------------------------------------------------------------
   Shipping, Return, Privacy, Cookie, Terms, Disclaimer, Accessibility.

   There is deliberately no styling here, and there cannot be. Termly's embed
   renders each policy inside an iframe served from app.termly.io, so the policy
   markup is never part of this document — it is a separate, cross-origin one.
   No parent-page CSS reaches into it, and scripted access to its DOM is blocked
   by the browser's same-origin policy.

   A full block of `[name="termly-embed"]` overrides lived here from 24 Aug and
   never applied to anything. Removed 24 Aug once the iframe was confirmed.
   Dropping `data-type="iframe"` from the embed div does not make it inline
   either; Termly ignores the omission and iframes it regardless.

   Policy colours are therefore set in Termly's own dashboard, per policy, under
   the embed's theme settings — text, headings and link colour all live there.
   If a legal page ever reads black-on-dark again, that is where to look; do not
   add CSS here, it cannot work.

   The one thing on our side of the boundary is the fallback link in the
   paragraph after the embed, shown if the embed script is blocked.
   --------------------------------------------------------------------------- */

[name="termly-embed"] + p a,
.flourish-policy-fallback a {
	color: var(--wp--preset--color--blush) !important;
}

/* ---------------------------------------------------------------------------
   Skull book nook
   ---------------------------------------------------------------------------
   The third printed product, and the third to borrow the egg's body class, so
   every swatch, gallery and lead-time rule above already applies. What differs:
   the edition buttons carry a price (the ring's three sizes cost the same, so
   theirs deliberately do not), the colorway picker governs one part of a
   two-tone object rather than the whole thing, and there is a designer credit
   that has to look like a credit rather than a footnote.
   --------------------------------------------------------------------------- */

/* The price sits at the far end of the button, away from the name and meta, so
   the three rows read as a price list rather than three sentences. */
.flourish-nook-editions .flourish-egg-size__body {
	justify-content: space-between;
	gap: 0.75rem;
}

.flourish-nook-editions__price {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
	white-space: nowrap;
}

.flourish-nook-editions__price .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

.flourish-nook-editions__hint {
	margin: 0.75rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dim);
}

/* Shown until an edition is chosen, then hidden by the script. Woo already
   refuses to add an unselected variation, but its refusal appears down by the
   button after the click; this says so before it. */
.flourish-nook-editions__prompt {
	margin: 0.75rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--blush);
}

.flourish-nook-editions__prompt[hidden] {
	display: none;
}

/* Scope note above the swatch grid — unused since the nook dropped its colour
   picker on Aug 23 2026 (licensed design, printed as drawn). Kept because the
   next printed product may well be two-tone and colour-selectable. */
.flourish-nook-colorways__scope {
	margin: 0 0 0.875rem !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Retired Aug 23 2026 with the "one colourway" panel it styled: the licensing
   and print-process explanation was internal detail a customer cannot act on.
   Rule kept in case a future product needs a note beside the buy button. */
.flourish-nook-asdrawn {
	margin: 1.5rem 0 0;
	padding: 1rem 1.125rem;
	border-left: 2px solid var(--wp--preset--color--blush);
	background: var(--wp--preset--color--panel);
}

.flourish-nook-asdrawn__headline {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-nook-asdrawn__detail {
	margin: 0.375rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

/* Licence condition, so it gets a rule of its own rather than inheriting the
   disclaimer's grey. Superseded by the quieter treatment further down this file
   when the credit moved below the add-to-cart button on Aug 23 2026. */
.flourish-nook-credit--boxed {
	margin: 1.25rem 0 0 !important;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

.flourish-nook-credit--boxed a {
	color: var(--wp--preset--color--blush);
	text-underline-offset: 0.2em;
}

.flourish-nook-credit--boxed a:hover,
.flourish-nook-credit--boxed a:focus-visible {
	color: var(--wp--preset--color--bone);
}

/* Three editions, evenly spaced — same reasoning as the ring: the egg's
   weighted columns exist to line labels up under a line-up photograph.

   The egg's version of this strip centres everything and lets the columns run
   the full width of the page, which works when each column sits under its own
   photograph and reads as a caption. With no photographs and only three items,
   that left an eighth of the row as text stranded in a field of black. So this
   one is a bounded, left-aligned table with rules between the columns. */
.flourish-nook-scale {
	max-width: 940px;
	margin-inline: auto;
}

.flourish-nook-scale .flourish-egg-scale__title {
	margin-bottom: 1.5rem !important;
	text-align: left;
}

.flourish-nook-scale .flourish-egg-scale__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.flourish-nook-scale .flourish-egg-scale__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	padding: 1.25rem 1.5rem 1.5rem 0;
	text-align: left;
}

.flourish-nook-scale .flourish-egg-scale__row + .flourish-egg-scale__row {
	padding-left: 1.5rem;
	border-left: 1px solid var(--wp--preset--color--line);
}

.flourish-nook-scale .flourish-egg-scale__row dt {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--bone);
}

.flourish-nook-scale .flourish-egg-scale__row dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.flourish-nook-scale .flourish-egg-scale__spacer {
	display: none;
}

.flourish-nook-scale__blurb {
	color: var(--wp--preset--color--dim) !important;
	line-height: 1.6;
	text-wrap: pretty;
}

.flourish-nook-scale .flourish-egg-scale__foot {
	margin: 1.5rem 0 0 !important;
	max-width: 60ch;
	text-align: left;
	text-wrap: pretty;
}

@media (max-width: 700px) {

	.flourish-nook-scale .flourish-egg-scale__list {
		grid-template-columns: 1fr;
	}

	.flourish-nook-scale .flourish-egg-scale__row {
		padding: 1.125rem 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.flourish-nook-scale .flourish-egg-scale__row + .flourish-egg-scale__row {
		padding-left: 0;
		border-left: 0;
	}
}

/* The egg's size dot is a scale cue — it grows with the egg. The nook's three
   options differ in count and hand, not size, so an identical dot beside each
   was decoration pretending to be information. Removed from the markup; this
   hides any that come back via a shared template. */
.flourish-skull-nook .flourish-egg-size__dot {
	display: none;
}

/* Attribution, not a selling point: small, quiet, and below the button. */
.flourish-nook-credit {
	margin: 1rem 0 0 !important;
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--dim);
}

.flourish-nook-credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 0.2em;
}

.flourish-nook-credit a:hover,
.flourish-nook-credit a:focus-visible {
	color: var(--wp--preset--color--bone);
}

/* Thumbnails carry their own background images on this product, because the
   nook's script sets them per shot rather than per colorway. */
.flourish-skull-nook .flourish-egg-gallery__thumb {
	background-size: cover;
	background-position: center;
}

/* Reference caption, retired Aug 23 2026 when the blue stopped being a stand-in
   and became the product: the design is licensed as drawn, so the photographs
   are accurate rather than indicative. Rule kept for the next printed product
   that ships before its photography does. */
.flourish-nook-reference {
	margin: 0.875rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--dim);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Request Restock
   ---------------------------------------------------------------------------
   The form under the out-of-stock routes. Field styling is borrowed wholesale
   from .flourish-contact-field rather than restated — same inputs, same focus
   ring, one place to change them. Only the grid, the intro line and the button
   are new.
   --------------------------------------------------------------------------- */

.flourish-restock {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
	/* The header is sticky, so an anchor jump would otherwise land under it. */
	scroll-margin-top: 6rem;
}

.flourish-restock-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 1.25rem;
}

@media (min-width: 40rem) {
	.flourish-restock-form {
		grid-template-columns: 1fr 1fr;
	}

	.flourish-restock-intro,
	.flourish-restock-form .flourish-contact-field.is-wide,
	.flourish-restock-submit {
		grid-column: 1 / -1;
	}
}

.flourish-restock-intro {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--dim);
}

.flourish-restock-submit {
	margin: 0;
}

.flourish-restock-submit button {
	appearance: none;
	padding: 0.875rem 2rem;
	border: 1px solid var(--wp--preset--color--bone);
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ground);
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.flourish-restock-submit button:hover,
.flourish-restock-submit button:focus-visible {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--blush);
}

.flourish-restock .flourish-contact-honeypot {
	display: none;
}

/* Account sign-in panel --------------------------------------------------------
   /my-account/ logged out holds one control, so the page has to carry itself on
   composition rather than content: a centred panel with a title, one line of
   explanation, the button, and one line of reassurance. Without the panel the
   button floated alone against several screens of empty ground. */

.flourish-login {
	width: 100%;
	/* Padding inside the width, or `width: 100%` plus padding overflows the
	   viewport on a phone and takes the whole page into horizontal scroll. */
	box-sizing: border-box;
	/* 34rem, not 27: the root font size on this site is fluid, so rem here is
	   larger than 16px and 27rem measured ~496px — narrow enough that the button
	   label wrapped and the panel read as crushed. */
	max-width: 34rem;
	margin: clamp(2.5rem, 9vh, 6rem) auto;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	text-align: center;
}

.flourish-login__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 5vw, 2.625rem);
	font-weight: 400;
	line-height: 1.04;
	color: var(--wp--preset--color--bone);
}

.flourish-login__lead {
	margin: 0.875rem auto 2rem;
	max-width: 22rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

/* The button is the only thing to press, so it takes the full panel width. */
.flourish-login .flourish-social {
	margin: 0;
}

.flourish-login .flourish-social__btn {
	width: 100%;
	/* Same reason as the panel: the button carries its own horizontal padding,
	   and without border-box `width: 100%` renders wider than the panel. */
	box-sizing: border-box;
	justify-content: center;
	white-space: nowrap;
}

.flourish-login__foot {
	margin: 1.75rem auto 0;
	max-width: 20rem;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.6;
	color: var(--wp--preset--color--faint);
	text-wrap: pretty;
}


/* ---------------------------------------------------------------------------
   Featured release (flourish/featured-release)
   ---------------------------------------------------------------------------
   Ambient dragon silhouettes crossing the section, tinted through a CSS mask
   so they always take palette colors. Delayed fliers carry opacity: 0 inline
   with the keyframes overriding it while they play — without that they sit
   parked at the left edge until their delay elapses. All motion stops under
   prefers-reduced-motion. */

.flourish-featured-release {
	position: relative;
	overflow: hidden;
}

.flourish-featured-release::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 78% 45%, rgba(70, 46, 34, 0.55) 0%, rgba(22, 23, 20, 0) 65%);
	pointer-events: none;
}

.flourish-featured-release > .wp-block-columns {
	position: relative;
}

.flourish-fr-sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.flourish-fr-dragon {
	position: absolute;
	left: 0;
	opacity: 0;
}

.flourish-fr-dragon > span {
	display: inline-block;
	background-color: var(--wp--preset--color--blush, #cdb6a4);
	-webkit-mask: url('../img/dragon-silhouette.png') center / contain no-repeat;
	mask: url('../img/dragon-silhouette.png') center / contain no-repeat;
	animation: flourish-fr-flap 0.7s ease-in-out infinite alternate;
}

.flourish-fr-dragon--a { top: 6%; animation: flourish-fr-fly-a 26s linear infinite; }
.flourish-fr-dragon--a > span { width: 52px; height: 35px; }

.flourish-fr-dragon--b { top: 12%; animation: flourish-fr-fly-b 34s linear infinite 6s; }
.flourish-fr-dragon--b > span { width: 36px; height: 24px; transform: scaleX(-1); background-color: var(--wp--preset--color--sage, #8fa693); animation-duration: 0.9s; animation-delay: 0.3s; }

.flourish-fr-dragon--c { top: 4%; animation: flourish-fr-fly-c 44s linear infinite 14s; }
.flourish-fr-dragon--c > span { width: 24px; height: 16px; background-color: var(--wp--preset--color--bone, #eae5d9); animation-duration: 1.1s; animation-delay: 0.6s; }

.flourish-fr-ember {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
}

.flourish-fr-ember--a { bottom: 18%; left: 62%; width: 3px; height: 3px; background: var(--wp--preset--color--blush-warm, #e2c4b1); animation: flourish-fr-ember 9s ease-out infinite; }
.flourish-fr-ember--d { bottom: 22%; left: 8%; width: 2px; height: 2px; background: var(--wp--preset--color--blush, #cdb6a4); animation: flourish-fr-ember 11s ease-out infinite 2s; }
.flourish-fr-ember--e { bottom: 8%; left: 22%; width: 3px; height: 3px; background: var(--wp--preset--color--blush-warm, #e2c4b1); animation: flourish-fr-ember 8s ease-out infinite 5.5s; }
.flourish-fr-ember--f { bottom: 16%; left: 38%; width: 2px; height: 2px; background: var(--wp--preset--color--sage, #8fa693); animation: flourish-fr-ember 13s ease-out infinite 3s; }
.flourish-fr-ember--g { bottom: 6%; left: 52%; width: 2px; height: 2px; background: var(--wp--preset--color--bone, #eae5d9); animation: flourish-fr-ember 10s ease-out infinite 8.5s; }
.flourish-fr-ember--h { bottom: 24%; left: 92%; width: 2px; height: 2px; background: var(--wp--preset--color--blush-warm, #e2c4b1); animation: flourish-fr-ember 9s ease-out infinite 6s; }
.flourish-fr-ember--b { bottom: 10%; left: 74%; width: 2px; height: 2px; background: var(--wp--preset--color--blush, #cdb6a4); animation: flourish-fr-ember 12s ease-out infinite 4s; }
.flourish-fr-ember--c { bottom: 14%; left: 86%; width: 2px; height: 2px; background: var(--wp--preset--color--sage, #8fa693); animation: flourish-fr-ember 10s ease-out infinite 7s; }

.flourish-fr-book img {
	width: 100%;
	height: auto;
	max-height: 580px;
	object-fit: contain;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

@keyframes flourish-fr-fly-a {
	0% { transform: translate(-6vw, 8vh) rotate(4deg); opacity: 0; }
	8% { opacity: 0.34; }
	50% { transform: translate(50vw, 2vh) rotate(-3deg); }
	92% { opacity: 0.34; }
	100% { transform: translate(106vw, 10vh) rotate(5deg); opacity: 0; }
}

@keyframes flourish-fr-fly-b {
	0% { transform: translate(106vw, 4vh) rotate(4deg); opacity: 0; }
	10% { opacity: 0.26; }
	55% { transform: translate(44vw, 12vh) rotate(-3deg); }
	90% { opacity: 0.26; }
	100% { transform: translate(-8vw, 6vh) rotate(4deg); opacity: 0; }
}

@keyframes flourish-fr-fly-c {
	0% { transform: translate(-4vw, 26vh) rotate(-2deg); opacity: 0; }
	12% { opacity: 0.16; }
	100% { transform: translate(104vw, 18vh) rotate(3deg); opacity: 0; }
}

@keyframes flourish-fr-flap {
	from { transform: scaleY(1); }
	to { transform: scaleY(0.72); }
}

/* Dragon B's inner span owns a scaleX(-1); restate it so the flap does not
   drop the mirror when the keyframe writes transform. */
.flourish-fr-dragon--b > span {
	animation-name: flourish-fr-flap-mirrored;
}

@keyframes flourish-fr-flap-mirrored {
	from { transform: scaleX(-1) scaleY(1); }
	to { transform: scaleX(-1) scaleY(0.72); }
}

@keyframes flourish-fr-ember {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 0.5; }
	85% { opacity: 0.35; }
	100% { transform: translateY(-140px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.flourish-fr-dragon,
	.flourish-fr-ember {
		animation: none !important;
		opacity: 0 !important;
	}
}

@media (max-width: 781px) {
	.flourish-fr-book img {
		max-height: 420px;
	}
}


/* Wishlist ---------------------------------------------------------------------
   Product page: a quiet outlined button under Add to cart, and a one-line count
   that only exists once somebody has saved the book. Account: the shop card grid
   with a Remove link under each cover. */
.flourish-wishlist {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	margin: 1rem 0 0;
}

.flourish-wish-form { margin: 0; }

.flourish-wish-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	background: none;
	border: 1px solid #2c2e28;
	color: #eae5d9;
	font: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.flourish-wish-button:hover,
.flourish-wish-button:focus-visible {
	border-color: #cdb6a4;
	color: #cdb6a4;
	text-decoration: none;
}

.flourish-wish-button[disabled] { opacity: 0.6; cursor: wait; }

.flourish-wish-icon { flex: 0 0 auto; transition: fill 0.2s ease, color 0.2s ease; }

/* Saved: the heart fills in blush; the frame stays quiet. */
.flourish-wish-button[aria-pressed="true"] { border-color: #4b5c4f; }
.flourish-wish-button[aria-pressed="true"] .flourish-wish-icon { fill: #cdb6a4; color: #cdb6a4; }

.flourish-wish-count {
	margin: 0;
	font-size: 0.875rem;
	color: #b6b3a7;
}

.flourish-wish-count[hidden] { display: none; }

/* Account list. */
.flourish-wish-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.flourish-wish-remove {
	align-self: flex-start;
	padding: 0.5rem 0;
	min-height: 44px;
	background: none;
	border: 0;
	color: #8d887c;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.flourish-wish-remove:hover,
.flourish-wish-remove:focus-visible { color: #eae5d9; }

.flourish-wishlist-empty {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	max-width: 40ch;
}

.flourish-wishlist-empty p { margin: 0; color: #b6b3a7; }

/* Threshing Day bundle (inc/threshing-gift.php) */
.flourish-tbundle__field { display: grid; gap: 0.375rem; margin: 0 0 1rem; }
.flourish-tbundle__field label { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--sage); }
.flourish-tbundle__field select { max-width: 22rem; }
.flourish-tbundle__row { display: flex; align-items: stretch; gap: 0.75rem; margin-top: 1rem; }
.flourish-tbundle__row .quantity input.qty { width: 5rem; height: 100%; padding: 0 0.75rem; background: #1b1f1b; border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--bone); text-align: center; }
.flourish-tbundle__row .single_add_to_cart_button { padding: 0.875rem 1.75rem; background: var(--wp--preset--color--bone); color: var(--wp--preset--color--ground); border: 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.flourish-tbundle__row .single_add_to_cart_button:hover { background: var(--wp--preset--color--blush-warm); }
.flourish-tbundle__egglink { font-size: 0.875rem; margin-left: 0.75rem; text-decoration: underline; }
.flourish-tgift-free { font-weight: 600; }