/* =========================================================================
   Flowers Garden — design system.

   Ported from ~/flowers-garden-mockup/assets/style.css, the LUXURY variant,
   which is the one Ștefan reacted to on 27 July (follow-up.md:1789).
   References behind it: FLOWERBX, Byredo, Aesop.

   The mockup is hand-written HTML. This site is WooCommerce blocks. So this
   file is not a copy of that file — it re-expresses the same system against
   the block classes WordPress actually emits. Colour and type live in
   theme.json; everything structural lives here.

   RULES THIS FILE OBEYS
   - Clause 3: nothing here deletes, hides or reorders a heading, and nothing
     display:none's page copy. Moving copy down the page is a template job,
     not a CSS one.
   - `--wp--preset--font-family--platypi` is Cormorant Garamond now, and the
     slug is kept because triumf-wc-adons/lib/woo.php:1727 hard-codes it.
   - The "Ridicare din magazin" control is keyed to DOM ids, not classes.
     Nothing here touches it.
   ========================================================================= */

:root {
	--fg-bg:      var(--wp--preset--color--accent-5);   /* cream  #F5F1E9 */
	--fg-surface: var(--wp--preset--color--base);       /* near-white     */
	--fg-ink:     var(--wp--preset--color--contrast);   /* warm ink       */
	--fg-plum:    var(--wp--preset--color--accent-3);   /* deep plum      */
	--fg-plum-d:  var(--wp--preset--color--accent-4);
	--fg-muted:   #8B8072;
	--fg-faint:   #B7AD9C;
	--fg-line:    #E5DED0;
	--fg-line-2:  #D8CFBD;
	--fg-gold:    #9A7B45;
	--fg-ease:    cubic-bezier(.22, 1, .36, 1);

	--fg-serif: var(--wp--preset--font-family--platypi);
	--fg-sans:  var(--wp--preset--font-family--ysabeau-office);

	/* the uppercase letter-spaced label — the whole luxury signal is here */
	--fg-label-size: .68rem;
	--fg-label-ls:   .18em;
}

/* ---------- base ---------------------------------------------------- */

body {
	background: var(--fg-bg);
	color: var(--fg-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--fg-plum); color: #fff; }

a { text-decoration: none; }

/* Headings carry the serif from theme.json. Here they get their scale and
   their air. Sizes are fluid so nothing needs a breakpoint. */
.wp-block-heading,
h1, h2, h3, h4 { text-wrap: balance; }

h1, .wp-block-post-title { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }

/* ---------- the top bar --------------------------------------------- */
/* Keeps ALL of the Client's content — phone, email, tagline, search, social.
   It was 100px tall because the social icons were stacking vertically (51x84)
   and the text wrapped to two lines at 13.6px. Everything below is sizing and
   alignment; nothing is removed. */

.topbar {
	font-family: var(--fg-sans);
	/* the mockup's .announce: .62rem at a 16px root, .18em, on --plum-d */
	background-color: rgb(67, 30, 51) !important;
	font-size: 9.92px !important;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding-block: .5rem !important;
	align-items: center;
	gap: 1.6rem;
}
.topbar > * { flex: 0 0 auto; }
.topbar p { margin: 0; white-space: nowrap; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: #fff; }

/* the tagline is the long one: let it shrink and ellipsis rather than wrap */
.topbar > p {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .75;
}

/* phone and email: icon + text on one line, icons scaled down */
.topbar .wp-block-group { gap: .5rem !important; align-items: center; }
.topbar figure { margin: 0; line-height: 0; }
.topbar figure img { width: 13px !important; height: auto !important; }

/* the social icons were stacking; keep them in a row and make them small */
.topbar .wp-block-social-links {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: .55rem !important;
	margin: 0 !important;
	align-items: center;
}
.topbar .wp-block-social-link { margin: 0 !important; }
.topbar .wp-block-social-link a { padding: 0 !important; }
.topbar .wp-block-social-link svg { width: 15px !important; height: 15px !important; }

/* a quiet field, not a white box */
.topbar .wp-block-search { margin: 0 !important; max-width: 210px; }
.topbar .wp-block-search__inside-wrapper {
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.topbar .wp-block-search__input {
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-family: var(--fg-sans);
	font-size: .625rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .55rem !important;
	min-height: 0 !important;
}
.topbar .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .5) !important; }
.topbar .wp-block-search__button {
	background: transparent !important;
	border: 0 !important;
	padding: 0 .5rem !important;
	min-height: 0 !important;
}
.topbar .wp-block-search__button svg { width: 14px; height: 14px; fill: rgba(255, 255, 255, .7); }

/* ---------- header and navigation ----------------------------------- */

/* The header is position:static with z-index auto, so its dropdown (z-index 2,
   absolute) paints below anything that comes later in the DOM and is
   positioned — which is the trust strip directly beneath it. Submenus were
   being clipped by that plum bar. Present on live too, so it is not a
   regression, but a redesign is the moment to fix it. */
.wp-block-template-part > header,
header.wp-block-template-part {
	/* NOT `.wp-block-template-part:first-of-type` — :first-of-type matches by
	   TAG, so the FOOTER matched it too and was inheriting the header's cream
	   background and its position:sticky. That is the pale band under the
	   footer and the ANPC marks sitting on it. */
	position: relative;
	z-index: 50;
	background: rgba(245, 241, 233, .9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--fg-line);
}
.wp-block-navigation__submenu-container { z-index: 60; }

.wp-block-navigation-item__label {
	font-family: var(--fg-sans);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 500;
}

/* the underline that draws in from the left, from the mockup's .nav-links */
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: .4rem;
}
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: var(--fg-plum);
	transition: right .35s var(--fg-ease);
}
.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
	right: 0;
}

.wp-block-navigation__submenu-container {
	border: 1px solid var(--fg-line);
	background: var(--fg-surface);
	border-radius: 0;
	padding-block: .4rem;
}

.wp-block-site-logo img { height: 48px; width: auto; }

/* ---------- the masthead row ----------------------------------------
   Paul, 24 Aug: "It's tall, it's ugly, the font is too big", then
   "Match the styling of the mockup on the clone."

   His content is untouched throughout. This is sizing, colour and type.

   The one thing that cannot match: the mockup has FIVE nav categories and the
   site has NINE. At the mockup's type the nine fit on one row at 1440 with
   24px gaps and at 1366 with 14px, so the gap steps down rather than the type.
   Below that WordPress wraps the nav to two rows on its own. */

.masthead {
	background: rgba(245, 241, 233, .9) !important;
	border-bottom: 0 !important;      /* the header part already draws the hairline */
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--fg-line) !important;
}

/* ---------- 🔴 THE MOBILE MENU OPENED AS A 73px SLIVER ----------
   Found 26 Aug 2026 in the mobile QA pass, in a real browser at 390px.

   WordPress lays its nav overlay out as `position: fixed; inset: 0`, which
   should fill the viewport. It was computing to **41px tall** and rendering as
   a 73px scrolling strip at the top of the screen holding 53 links and 1,956px
   of content. Effectively unusable, and invisible to both diffs because
   neither opens the menu.

   The cause is the two `backdrop-filter: blur(12px)` declarations above and at
   line ~159. **`backdrop-filter` creates a containing block for `position:
   fixed` descendants**, so the overlay's `inset: 0` resolved against the
   masthead rather than the viewport, and it inherited the masthead's height.

   This is the same family as the `overflow: hidden` that kills `position:
   sticky` (asks.md #2): a property set for a visual effect silently changes
   what a descendant is positioned against.

   The fix drops the blur only while the menu is open -- WordPress puts
   `.has-modal-open` on <html> -- so the containing block reverts to the
   viewport and the overlay behaves natively. The frosted header is untouched
   in every other state. Both prefixes: Safari is the actual target here.     */
html.has-modal-open .masthead,
html.has-modal-open .wp-block-template-part > header,
html.has-modal-open header.wp-block-template-part {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* PINNED. Sticky has to go on the header template part, not on .masthead —
   .masthead's containing block IS the part, which is 132px tall, so it had
   nowhere to stick to and simply scrolled away. Offsetting by the topbar's
   height lets the topbar ride up out of view and leaves the nav row pinned,
   which is what the mockup does with .announce above header.site. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: calc(-1 * var(--fg-topbar-h, 47px));
}
/* AND THE REASON IT DID NOT WORK. Something in the stack sets
   `html { overflow-x: hidden }`. Per spec, overflow-x:hidden computes
   overflow-y to auto, which makes the root a scroll container and kills
   position:sticky for everything inside it. `clip` does the same job — it
   still stops sideways scroll — without creating that scroll container.
   This is why the header scrolled away while reporting position:sticky. */
html { overflow-x: clip !important; }
.masthead > .wp-block-group > .wp-block-group {
	padding-block: .9rem !important;
}
.masthead .wp-block-site-logo img,
.wp-block-site-logo img { height: 48px !important; width: auto !important; }

/* the mockup's .nav-links: .7rem at a 16px root, .16em, 500 */
.meniutopmain .wp-block-navigation-item__label {
	font-size: 11.2px;
	letter-spacing: .16em;
	font-weight: 500;
	white-space: nowrap;          /* the mockup's items never break mid-label */
}
.meniutopmain .wp-block-navigation-item { flex: 0 0 auto; }
/* The mockup: .nav-links sit left, just after the brand; .nav-right is pushed
   away with margin-left:auto. Same here — the block is authored as
   justify-content:right, so it is re-pointed rather than re-authored. */
.masthead .wp-block-group.is-content-justification-right {
	min-width: 0;
	justify-content: flex-start !important;
	/* the mockup's .nav-links margin-left:1.5rem — and a floor, so the
	   categories can never crowd the logo however many of them there are */
	margin-left: 2.5rem;
}
.masthead .fg-deliver-chip { margin-left: auto !important; }
.meniutopmain { flex: 0 1 auto; min-width: 0; }
/* With the labels shortened (inc/nav-labels.php) the nine fit in ~730px where
   they needed ~1170, so the gap goes back to the mockup's 2rem. It still steps
   down on narrower screens rather than wrapping to a second row. */
.meniutopmain .wp-block-navigation__container {
	gap: 0 18px !important;
	justify-content: flex-start !important;
}
@media (min-width: 1280px) { .meniutopmain .wp-block-navigation__container { gap: 0 26px !important; } }
@media (min-width: 1500px) { .meniutopmain .wp-block-navigation__container { gap: 0 32px !important; } }
/* the nav block is authored items-justified-right; left is what the mockup does */
.masthead .meniutopmain { justify-content: flex-start !important; }

/* the dropdown arrows are functional here — the mockup has no submenus — so
   they stay, quieter and smaller rather than as black chevrons */
.meniutopmain .wp-block-navigation__submenu-icon {
	width: 9px; height: 9px; margin-left: .2rem;
	opacity: .45;
	transition: opacity .25s var(--fg-ease);
}
.meniutopmain .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon { opacity: .9; }

/* the cart, as the mockup writes it: COȘ (n), not a glyph with a badge on it.
   The count still comes from WooCommerce's own interactivity binding; only its
   presentation changes. */
.masthead .fg-deliver-chip {
	margin: 0 !important;
	font-family: var(--fg-sans);
	font-size: 11.2px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fg-muted);
	white-space: nowrap;
	flex: 0 0 auto;
	padding-left: 2.4rem;
	/* the nav labels sit on their own line-height; match it so the chip is not
	   a pixel or two high against them */
	align-self: center;
	line-height: 1;
}
.masthead .wc-block-mini-cart__button { align-self: center; line-height: 1; }
.masthead .wc-block-mini-cart {
	width: auto !important;
	flex: 0 0 auto;
	white-space: nowrap;
	/* Paul: "add some space between the nav categories and the Cos button...
	   there's no visual distinction, they blend together." A hairline and real
	   air, the way the mockup separates .nav-links from .nav-right. */
	margin-left: 1.2rem;
}
.masthead .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	padding: .2rem 0 !important;
	font-family: var(--fg-sans);
	font-size: 11.2px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fg-ink);
	background: none !important;
}
.masthead .wc-block-mini-cart__button::before { content: "Coș ("; }
.masthead .wc-block-mini-cart__button::after  { content: ")"; }
.masthead .wc-block-mini-cart__quantity-badge svg { display: none; }
.masthead .wc-block-mini-cart__quantity-badge {
	display: inline !important;
	width: auto !important; height: auto !important;
	border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.masthead .wc-block-mini-cart__badge {
	background: none !important;
	color: var(--fg-plum) !important;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	font-weight: 600;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	line-height: inherit;
	display: inline !important;
	position: static !important;
	width: auto !important; height: auto !important;
	transform: none !important;
}
.masthead .wc-block-mini-cart__badge[hidden] { display: inline !important; }

/* ---------- the header cart, as a link ----------
   The Mini Cart block was replaced by `inc/mini-cart-link.php` — the mockup's
   header cart is a plain `Coș (0)` link and the drawer cost ~230 KB of eager
   React on every catalogue page. These rules reproduce exactly what the block's
   button looked like: same face, same 11.2px, same tracking, plum count.
   The `.wc-block-mini-cart__*` rules above are now inert but are LEFT IN PLACE —
   `FG_MINICART_LINK` brings the block back, and the styling has to come back
   with it. */
.masthead .fg-cart { width: auto !important; flex: 0 0 auto; white-space: nowrap; margin-left: 1.2rem; }
.masthead .fg-cart-link {
	display: inline-flex;
	align-items: baseline;
	padding: .2rem 0;
	font-family: var(--fg-sans);
	font-size: 11.2px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fg-ink);
	background: none;
	text-decoration: none;
}
.masthead .fg-cart-link__n { color: var(--fg-plum); font-weight: 600; }

/* the hero sits against the header, as it does in the mockup — the 24px the
   block editor puts between them read as a bar with a strip of cream under it */
body.home .entry-content > .fg-hero { margin-block-start: 0 !important; }

/* ---------- the nav between a phone and a desktop --------------------
   WordPress collapses this nav to a hamburger at 600px. Nine categories need
   roughly 950px beside a logo and a cart. Between those two numbers the
   desktop row has no chance: at 768 it ran 136px off the LEFT edge, underneath
   the logo, with the first links off-screen entirely.

   TWO THINGS THAT DID NOT WORK, so nobody retries them. Forcing WordPress's
   overlay open above 600 breaks it — its overlay styles live inside the same
   `min-width: 600px` block that lays the list out inline, so overriding one
   destroys the other and the opened menu renders as a single focused link in a
   70px band. And letting the nav wrap inside the logo row turns the masthead
   into a 279px stack at 601.

   What works is the ordinary answer: between 601 and 1099 the nav gets its OWN
   row, full width, centred, under the logo. Predictable, and there is no width
   at which it can collide with anything.

   The range ends at 1259 because that is where the nine fit on ONE line beside
   the logo and the cart — measured, not guessed. Between 1100 and 1259 the
   single-row layout was still wrapping to two lines inside the logo row, which
   is the ugly middle state this block exists to avoid. */
@media (min-width: 601px) and (max-width: 1259px) {
	.masthead > .wp-block-group > .wp-block-group {
		flex-wrap: wrap !important;
		row-gap: .5rem;
	}
	.masthead .wp-block-group.is-content-justification-right {
		flex: 1 1 100%;
		order: 3;
		margin-left: 0;
		justify-content: center !important;
		border-top: 1px solid var(--fg-line);
		padding-top: .55rem;
	}
	.masthead .meniutopmain { flex: 0 1 auto !important; min-width: 0; }
	.meniutopmain .wp-block-navigation__container {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: .3rem 18px !important;
	}
	/* the cart rides with the logo on the top row, where it is reachable */
	.masthead .wc-block-mini-cart { order: 2; margin-left: auto; }
	.masthead .fg-deliver-chip { display: none; }
	/* the boxed search button, same as on a phone — three controls in a row,
	   one of them framed, reads as a mistake at every width */
	.masthead .mobilesearch .wp-block-search__button {
		border: 0 !important; background: transparent !important; padding: .35rem !important;
	}
	.masthead .mobilesearch .wp-block-search__inside-wrapper { border: 0 !important; background: transparent !important; }
}

/* ---------- the header on a phone -------------------------------------
   At 390 the masthead row ends at 357 and the delivery chip and the cart were
   sitting at 467 and 544 — both off the right edge, unreachable, with the cart
   being the one control on the page that has to work. WordPress swaps the nav
   for a hamburger below its own breakpoint but knows nothing about the two
   things we added beside it.

   The chip is information and it goes; "Livrare azi" is already the first
   thing the topbar says. The cart is a control and it stays. */
@media (max-width: 600px) {
	.masthead .fg-deliver-chip { display: none; }
	/* the desktop rule justifies this group to flex-start so the categories sit
	   beside the logo. On a phone there are no categories — just the hamburger
	   and the cart — so flex-start pushes the cart off the right edge. */
	.masthead .wp-block-group.is-content-justification-right {
		justify-content: flex-end !important;
		margin-left: auto;
		flex: 1 1 auto;
	}
	.masthead .wc-block-mini-cart { margin-left: 1rem; margin-right: 0; }
	/* the hamburger and COȘ were touching, so the S was reading as clipped */
	.masthead .wp-block-group.is-content-justification-right { gap: .55rem; }
	/* the desktop rule lets .meniutopmain shrink to 0 so the categories yield
	   before the cart does. On a phone the nav still contains the hamburger,
	   which then overflowed a zero-width box and painted on top of COȘ. */
	.masthead .meniutopmain { flex: 0 0 auto !important; min-width: 0; }
	/* the mobile search button carried a box while the phone and the hamburger
	   beside it did not — three controls in a row, one of them in a frame */
	.masthead .mobilesearch .wp-block-search__button {
		border: 0 !important;
		background: transparent !important;
		padding: .35rem !important;
	}
	.masthead .mobilesearch .wp-block-search__inside-wrapper { border: 0 !important; background: transparent !important; }
	.masthead .wp-block-navigation__responsive-container-open { margin-right: .2rem; }
	.masthead > .wp-block-group > .wp-block-group { padding-block: .6rem !important; }
	.masthead .wp-block-site-logo img,
	.wp-block-site-logo img { height: 40px !important; }
}

/* the trust strip stacks rather than running three wide cells off the screen */
@media (max-width: 700px) {
	body .entry-content > .nomobilelrpadding .wp-block-columns {
		flex-direction: column !important;
		gap: 1rem 0 !important;
	}
	body .entry-content > .nomobilelrpadding .wp-block-column { justify-content: center; }
}

/* ---------- search -------------------------------------------------- */

.wp-block-search__input {
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	background: var(--fg-surface);
	font-family: var(--fg-sans);
	font-size: .85rem;
	padding: .8rem .9rem;
}
.wp-block-search__input:focus { outline: none; border-color: var(--fg-plum) !important; }
.wp-block-search__button { border-radius: 0 !important; }

/* ---------- section rhythm — the radical whitespace ------------------ */

main > .wp-block-group,
main > .wp-block-columns { margin-block: 0; }

main > .wp-block-heading {
	text-align: center;
	margin-block: 5rem 1.6rem;
	font-weight: 400;
}
main > .wp-block-heading + p { text-align: center; }

main > p {
	max-width: 74ch;
	margin-inline: auto;
	color: var(--fg-muted);
}

/* ---------- cover tiles (the occasion grid on the homepage) ---------- */

.wp-block-cover {
	border-radius: 0;
	overflow: hidden;
}
.wp-block-cover .wp-block-cover__image-background {
	transition: transform .7s var(--fg-ease);
}
.wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.06); }
.wp-block-cover .wp-block-heading,
.wp-block-cover p {
	font-family: var(--fg-sans);
	font-size: var(--fg-label-size);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
}

/* ---------- product cards ------------------------------------------- */

.wc-block-product {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	text-align: center;
}

.wc-block-components-product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	margin-bottom: 1.1rem;
}
.wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .8s var(--fg-ease);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.05); }

/* the `has-medium-font-size` class WooCommerce puts on the card title is a
   preset and outranks a plain class selector, so this needs the extra weight */
.wc-block-product h3.wp-block-post-title,
.wc-block-product h3.wp-block-post-title.has-medium-font-size,
.wc-block-product .wp-block-post-title {
	font-family: var(--fg-sans);
	font-size: .72rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.55;
	margin: 0 0 .55rem;
	min-height: 3.4em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wc-block-product .wp-block-post-title a:hover { color: var(--fg-plum); }

/* price — serif italic, the one place the serif appears small */
.wc-block-components-product-price,
.wc-block-product .woocommerce-Price-amount {
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--fg-ink);
}
.wc-block-components-product-price del,
.wc-block-product del .woocommerce-Price-amount {
	font-family: var(--fg-sans);
	font-style: normal;
	font-size: .9rem;
	color: var(--fg-faint);
	margin-right: .4rem;
}

.wc-block-product .pricecartbox {
	background: transparent !important;
	padding: 0 !important;
}

/* the read-more / order button on a card */
.wc-block-product .wp-block-group.is-nowrap { gap: .8rem; }

/* On the mockup the card has no CTA at all. It stays here because removing a
   control is a function change, not a design one — so it is made quiet
   instead: an outline square that fills with plum on hover. */
.prodtplbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fg-sans);
	font-size: .64rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 0 !important;
	padding: .6rem .9rem;
	background-color: transparent !important;
	border: 1px solid var(--fg-line-2);
	transition: background-color .35s var(--fg-ease), border-color .35s var(--fg-ease);
}
/* the icon file is a WHITE svg — it was drawn to sit on the old plum fill.
   On a transparent button it renders white on cream, i.e. invisible. So it
   gets knocked to ink by default and inverted back to white on hover. */
a.prodtplbutton img,
.prodtplbutton img {
	width: 16px !important;
	height: 16px !important;
	filter: brightness(0);
	opacity: .68;
	transition: filter .35s var(--fg-ease), opacity .35s var(--fg-ease);
}
.prodtplbutton:hover {
	background-color: var(--fg-plum) !important;
	border-color: var(--fg-plum);
}
/* NOT `invert(1)`. That turned the glyph white, which was right when it sat
   on the old plum fill and wrong the moment that fill was removed — the icon
   vanished on hover. Paul: "make it MORE visible. Also, make it larger." */
.prodtplbutton:hover img { filter: brightness(0); opacity: 1; }

/* ---------- category sidebar filters -------------------------------- */

/* Both generations of filter block are on this page, and their headings carry
   different colour presets, so they are matched here rather than left to
   diverge. `.wp-block-heading` needs the extra weight to beat the preset. */
.wp-block-woocommerce-filter-wrapper h3.wp-block-heading,
.wp-block-woocommerce-product-filters h3.wp-block-heading,
.wp-block-woocommerce-filter-wrapper h3,
.wp-block-woocommerce-product-filters h3 {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	font-weight: 600;
	margin: 0 0 .9rem;
	line-height: 1.5;
}
.wp-block-woocommerce-product-filters .wc-block-product-filters__title { display: none; }
.wc-block-components-checkbox__label,
.wc-block-components-filter-submit-button,
.wc-block-price-filter__range-text {
	font-family: var(--fg-sans);
	font-size: .8rem;
	letter-spacing: .02em;
}
.wc-block-components-checkbox__input { accent-color: var(--fg-plum); border-radius: 0; }

/* the delivery badge. Same preset-class problem as the title — the group
   carries a font-size preset, so the paragraph inside needs the weight. */
.wc-block-product .shipinfo,
.wc-block-product .shipinfo p,
.wc-block-product .shipinfo .wp-block-image {
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-muted);
	line-height: 1.4;
}
.wc-block-product .shipinfo {
	gap: .45rem;
	align-items: center;
	margin: 0 0 .8rem;
}
.wc-block-product .shipinfo figure { margin: 0; }
.wc-block-product .shipinfo img { width: 13px; height: auto; }

/* the price row: price left, cart right, both on one line */
.wc-block-product .pricecartbox > .wp-block-group {
	align-items: center;
	gap: .8rem;
}

/* ---------- buttons in content -------------------------------------- */

.wp-block-button__link,
.wc-block-components-button {
	border-radius: 0 !important;
	font-family: var(--fg-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-size: var(--fg-label-size);
	font-weight: 500;
	transition: background-color .4s var(--fg-ease), color .4s var(--fg-ease),
	            border-color .4s var(--fg-ease);
}
.wp-block-button__link:hover {
	background-color: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
	color: #fff !important;
}

/* ---------- lists in body copy -------------------------------------- */

main .wp-block-list { max-width: 74ch; margin-inline: auto; }
main .wp-block-list li { margin-bottom: .4rem; }

/* ---------- the AIOSEO FAQ blocks ----------------------------------- */

.wp-block-aioseo-faq {
	max-width: 840px;
	margin-inline: auto;
	border-bottom: 1px solid var(--fg-line);
}
.wp-block-aioseo-faq h3 {
	font-family: var(--fg-sans);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 1.4rem .2rem .6rem;
	margin: 0;
}
.wp-block-aioseo-faq p {
	color: var(--fg-muted);
	font-size: .95rem;
	max-width: 70ch;
	padding: 0 .2rem 1.4rem;
	margin: 0;
}

/* ---------- forms --------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], textarea, select {
	border: 1px solid var(--fg-line-2);
	border-radius: 0;
	background: var(--fg-surface);
	font-family: var(--fg-sans);
	font-size: .88rem;
	padding: .85rem .9rem;
	color: var(--fg-ink);
	transition: border-color .25s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fg-plum); }

/* ---------- footer -------------------------------------------------- */

footer.wp-block-template-part,
.wp-site-blocks > footer,
.wp-block-template-part > footer {
	border-top: 1px solid var(--fg-line);
	/* the ink runs to the bottom of the document — the copyright and the ANPC
	   marks were sitting on a cream band below the footer, which is what made
	   that strip read as an afterthought bolted on */
	background: var(--fg-ink);
}

footer .wp-block-heading {
	font-family: var(--fg-sans);
	font-size: .64rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 600;
}





/* the sort control sat at 20px uppercase Inter beside a .64rem label, so the
   two halves of one control were three sizes apart. The mockup sets every
   select at .88rem sans with a hairline. */
.woocommerce-ordering select,
select.orderby {
	font-family: var(--fg-sans) !important;
	font-size: .72rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fg-line-2);
	border-radius: 0 !important;
	padding: .4rem 1.6rem .4rem .2rem;
	cursor: pointer;
}
.woocommerce-ordering select:focus,
select.orderby:focus { outline: none; border-bottom-color: var(--fg-plum); }

/* ---------- category long-form: below the products, and quiet ---------
   The mockup's `.cat-seo .seo-body`: 66ch, a hairline above it, headings at
   clamp(1.4rem, 2.4vw, 1.9rem) and body at .98rem/1.85 in muted. Its own
   comment reads "below the products, quiet, readable, still indexable".

   The build already had the placement right — the term description renders
   after the grid — but at 43px headings over a 933px measure, which is the
   same wall the homepage had, just shorter. */

.wp-block-term-description {
	max-width: 66ch !important;
	margin-inline: auto !important;
	padding-top: 2.5rem;
	border-top: 1px solid var(--fg-line);
	font-size: .98rem !important;
}
.wp-block-term-description :is(h1, h2, h3, h4) {
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	line-height: 1.25;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	margin: 2.4rem 0 1.2rem !important;
	text-align: left !important;
}
.wp-block-term-description :is(h1, h2, h3, h4):first-child { margin-top: 0 !important; }
.wp-block-term-description p,
.wp-block-term-description li {
	color: var(--fg-muted) !important;
	font-size: .98rem !important;
	line-height: 1.85 !important;
	margin-bottom: 1.1rem !important;
	text-align: left !important;
}
.wp-block-term-description p:last-child { margin-bottom: 0 !important; }

/* ---------- WooCommerce notices --------------------------------------
   The empty-cart notice ships as a 4px-rounded pale-blue panel with a
   #007cba left rule — WordPress admin blue, on a plum-and-cream shop. Same
   for the success and error variants, which the checkout will show. Squared
   off and moved onto the design system's own colours; the icons keep their
   role colours so a warning still reads as one. */

.wc-block-components-notice-banner,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-radius: 0 !important;
	background-color: var(--fg-surface) !important;
	border: 1px solid var(--fg-line) !important;
	border-left: 2px solid var(--fg-plum) !important;
	font-family: var(--fg-sans);
	font-size: .85rem;
	color: var(--fg-ink) !important;
}
.wc-block-components-notice-banner.is-error { border-left-color: #b3261e !important; }
.wc-block-components-notice-banner.is-success { border-left-color: #5c8a4a !important; }
/* the icon is a WHITE glyph on a filled circle, not a coloured glyph, so the
   circle is the background and it was admin blue */
.wc-block-components-notice-banner > svg {
	background-color: var(--fg-plum) !important;
	fill: #fff !important;
	border-radius: 50%;
}
.wc-block-components-notice-banner.is-error > svg { background-color: #b3261e !important; }
.wc-block-components-notice-banner.is-success > svg { background-color: #5c8a4a !important; }

/* ---------- product page: the breadcrumb band and the title -----------
   The mockup's PDP opens with a quiet uppercase crumb inside the column
   (`.pdp .crumb`: .64rem, .14em, muted) and a SERIF h1 at weight 400. The
   build had a full-width plum band with 16px white body text, and a title in
   Inter Bold 700, in plum. Two of the three loudest things on the page were
   the two that should have been the quietest.

   The band stays full-width — it is a template structure, not a style — but
   it becomes the page's own cream with the crumb set as the mockup sets it. */

.wp-block-group.has-accent-3-background-color:has(.wc-block-breadcrumbs),
.wp-block-group.has-accent-3-background-color:has(.woocommerce-breadcrumb) {
	background-color: var(--fg-bg) !important;
	border-bottom: 1px solid var(--fg-line);
	padding-block: 1.1rem !important;
}
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-family: var(--fg-sans) !important;
	font-size: .64rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
}
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a { color: var(--fg-muted) !important; }
.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover { color: var(--fg-plum) !important; }

/* the mockup's .pdp h1 — serif, 400, ink. theme.json hands this block the sans
   family class, so the family has to be reclaimed explicitly. */
.single-product .wp-block-post-title,
.single-product h1.product_title {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(2rem, 3vw, 2.9rem) !important;
	letter-spacing: .005em !important;
	line-height: 1.1;
	color: var(--fg-ink) !important;
	text-transform: none;
}

/* ---------- the size selector (yith-woocommerce-product-add-ons) ------
   The last control a customer touches before adding to cart, and the one
   thing on this page that belonged to no design at all.

   WHAT THE PLUGIN RENDERS. `#yith-wapo-container` is a FLEX ROW: the option
   block on the left and a second, separately-boxed "Product price / Total
   opțiuni / Preț final" table beside it. At the 600px summary column that
   left the options 220px wide with a white card floating against them. The
   mockup has neither box: hairline-separated rows, then a running total that
   reads as part of the page (.pdp .sizes and .pricebox in the mockup's
   style.css).

   WHAT IT APPLIES TO. Four addon blocks exist. "Alege Marimea" is on 824
   products across six categories; "Trandafiri", "Bujori" and "Lalele" are on
   one product each and are colour + stem-count pickers with the same markup.
   All four are styled by the rules below and all four were rendered and
   checked.

   THE DOM, because it is three wrappers deep and the rules depend on it:
     .yith-wapo-option
       .label > .option-container > .radio-button-container
           span.radiobutton > input[type=radio|checkbox]
           label.yith-wapo-label   →  "Premium" + small.option-price
       p.description               →  "(50 % mai multe flori, cu reducere 5%)"
   The three wrappers become `display: contents` so the radio, the label and
   the description are direct children of one grid. Nothing is hidden.        */

/* the container: stack, do not sit the total beside the options.
   The plugin draws a 1px box round the container and pads the block 16px, so
   the options sat inset from everything else in the column. */
.single-product .yith-wapo-container {
	display: block !important;
	width: 100%;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}
.single-product .yith-wapo-block {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* the plugin writes `background-color: #ffffff` as an INLINE style on every
   addon, so this needs the important to reach it */
.single-product .yith-wapo-addon {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* the group heading — the mockup's .opt-title */
.single-product .yith-wapo-addon .addon-header {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
.single-product .yith-wapo-addon .wapo-addon-title {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .2em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	margin: 1.9rem 0 .9rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.single-product .yith-wapo-addon .wapo-addon-title span {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* the rows — the mockup's .sizes / .size.
   `.options` keeps the plugin's own grid so a per-row-2 or per-row-3 addon
   still lays out in its columns; only the gap and the rules change. */
.single-product .yith-wapo-addon .options-container {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.single-product .yith-wapo-addon .options {
	gap: 0 !important;
	border-top: 1px solid var(--fg-line);
}

.single-product .yith-wapo-option {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 1rem;
	border-bottom: 1px solid var(--fg-line);
	border-radius: 0;
	background: transparent;
	padding: 1rem .2rem;
	margin: 0;
	cursor: pointer;
	transition: padding-left .25s var(--fg-ease);
}
.single-product .yith-wapo-option:hover,
.single-product .yith-wapo-option.selected { padding-left: .7rem; }

/* flatten the three wrappers so the radio, the label and the description are
   siblings in the grid above.
   `!important` because the plugin's own rule is `#yith-wapo-container .label`,
   and an id beats any number of classes. */
.single-product .yith-wapo-option .label,
.single-product .yith-wapo-option .option-container,
.single-product .yith-wapo-option .radio-button-container,
.single-product .yith-wapo-option .checkbox-button-container { display: contents !important; }

/* the radio — the mockup's .size .radio: a hairline ring that fills plum */
.single-product .yith-wapo-option .radiobutton {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	position: relative;
	width: 15px;
	height: 15px;
	flex: none;
	border: 1px solid var(--fg-line-2);
	border-radius: 50%;
	background: transparent;
	transition: border-color .25s var(--fg-ease);
}
.single-product .yith-wapo-option .radiobutton.checked,
.single-product .yith-wapo-option .radiobutton:has(input:checked) { border-color: var(--fg-plum); }
.single-product .yith-wapo-option .radiobutton.checked::after,
.single-product .yith-wapo-option .radiobutton:has(input:checked)::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--fg-plum);
}
/* a checkbox addon gets the same ring, squared off */
.single-product .yith-wapo-option .checkbox-button-container .radiobutton,
.single-product .yith-wapo-option .checkbox-button-container .checkbox { border-radius: 2px; }
.single-product .yith-wapo-option .checkbox-button-container .radiobutton::after { border-radius: 0; }

/* the native control stays in the accessibility tree and stays clickable —
   it is made invisible, not display:none, so keyboard focus still works */
.single-product .yith-wapo-option .radiobutton input {
	position: absolute;
	inset: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.single-product .yith-wapo-option .radiobutton:has(input:focus-visible) {
	outline: 2px solid var(--fg-plum);
	outline-offset: 3px;
}

/* the name and the price delta — .size .t b and .size .up */
.single-product .yith-wapo-option .yith-wapo-label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	gap: .8rem;
	margin: 0;
	padding: 0;
	font-family: var(--fg-sans);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--fg-ink);
	cursor: pointer;
}
.single-product .yith-wapo-option .yith-wapo-label .option-price {
	margin-left: auto;
	font-family: var(--fg-serif);
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-plum);
	white-space: nowrap;
}
.single-product .yith-wapo-option .option-price .brackets { display: none; }

/* THE STRUCK-THROUGH PRICE IS THE SAME NUMBER, TWICE.
   The plugin prints <del>regular</del> <ins>sale</ins> whenever a sale price
   exists, and on this catalogue the sale price is always the regular price:
   145 priced options across all four addon blocks, 145 of them identical,
   0 genuinely discounted (measured 25 Aug against the clone database). So the
   customer reads "+116 lei 116 lei" with the first one crossed out, which
   reads as a discount that is not there. Nothing is lost by hiding it — the
   surviving number is the same number.
   ⚠️ If Ștefan ever sets a real sale price on an option, delete this rule. */
.single-product .yith-wapo-option .option-price del { display: none; }

/* the sub-line under the name — .size .t span */
.single-product .yith-wapo-option .description,
.single-product .yith-wapo-option p.description {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	font-family: var(--fg-serif) !important;
	font-size: .85rem !important;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	color: var(--fg-muted) !important;
}

/* ---------- the running total — the mockup's .pricebox ---------------- */
/* Same numbers, same three rows, no white card. */
.single-product #wapo-total-price-table {
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 2.2rem 0 2.4rem !important;
}
/* no rule on top: the last option row's own hairline already closes the
   group, and two rules 44px apart read as an empty row */
.single-product #wapo-total-price-table table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
	background: transparent;
}
.single-product #wapo-total-price-table tr { background: transparent !important; }
.single-product #wapo-total-price-table th,
.single-product #wapo-total-price-table td {
	border: 0 !important;
	background: transparent !important;
	padding: .3rem 0 !important;
	font-family: var(--fg-sans);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
.single-product #wapo-total-price-table th { text-align: left; }
.single-product #wapo-total-price-table td { text-align: right; }
.single-product #wapo-total-price-table tr.wapo-total-order th,
.single-product #wapo-total-price-table tr.wapo-total-order td {
	border-top: 1px solid var(--fg-line) !important;
	padding-top: .9rem !important;
	margin-top: .5rem;
	font-family: var(--fg-serif);
	font-size: 1.5rem;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-ink);
}

/* the delivery promise, the mockup's .deliver-note, and the SKU quietened
   underneath it rather than removed */
.single-product .fg-pdp-ship {
	font-family: var(--fg-sans);
	font-size: .66rem !important;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	margin: .9rem 0 .2rem !important;
	display: flex;
	align-items: center;
	gap: .45rem;
}
.single-product .fg-pdp-ship span { color: var(--fg-plum); font-size: .8rem; }
.single-product .wc-block-components-product-sku {
	font-family: var(--fg-sans) !important;
	font-size: .6rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-faint) !important;
	margin: 0 0 .4rem !important;
}

/* the gallery thumbnails — 74px, the mockup's size, at 55% until hovered or
   selected. 520 of his 1,342 products have more than one photograph and every
   one of them shows this strip; the other 822 have a single image and show
   nothing, which is correct. */
.single-product .flex-control-thumbs,
.single-product .woocommerce-product-gallery .flex-control-nav {
	display: flex !important;
	gap: 12px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
.single-product .flex-control-thumbs li,
.single-product .woocommerce-product-gallery .flex-control-nav li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
}
.single-product .flex-control-thumbs img,
.single-product .woocommerce-product-gallery .flex-control-nav img {
	width: 74px !important;
	height: 74px !important;
	object-fit: cover;
	background: #fff;
	cursor: pointer;
	opacity: .55;
	transition: opacity .3s var(--fg-ease);
	border-radius: 0;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover,
.single-product .woocommerce-product-gallery .flex-control-nav img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-nav img:hover { opacity: 1; }

/* ---------- the product page's remaining measured gaps ----------------
   From scripts/page-diff.js, run against the mockup's .pdp. */

/* THE PRICE. The mockup sets it in Cormorant italic at 1.9rem; the build had
   Inter, upright, 28.8px. The visible price is inside a wrapper the diff was
   matching, so check the rendered element before "fixing" this again --
   PAGE-TEARDOWN.md's own note, and it was right. */
.single-product .wp-block-woocommerce-product-price,
.single-product p.price,
.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.single-product p.price .woocommerce-Price-amount {
	font-family: var(--fg-serif) !important;
	font-size: 1.9rem !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	line-height: 1.2;
}
.single-product .wp-block-woocommerce-product-price del,
.single-product p.price del {
	font-family: var(--fg-sans) !important;
	font-size: 1.1rem !important;
	font-style: normal !important;
	color: var(--fg-faint) !important;
	margin-right: .5rem;
}
.single-product .wp-block-woocommerce-product-price ins,
.single-product p.price ins { text-decoration: none; }

/* THE SHORT DESCRIPTION. The mockup rules it above and below and sets it
   muted, so it reads as the product's one-line pitch rather than as another
   paragraph of body copy. */
.single-product .wp-block-post-excerpt,
.single-product .woocommerce-product-details__short-description {
	font-size: .95rem !important;
	color: var(--fg-muted) !important;
	border-top: 1px solid var(--fg-line);
	border-bottom: 1px solid var(--fg-line);
	padding: 1.4rem 0 !important;
	margin: 1.6rem 0 !important;
}
.single-product .wp-block-post-excerpt p,
.single-product .woocommerce-product-details__short-description p {
	color: inherit !important;
	font-size: inherit !important;
	margin: 0 !important;
}

/* ADD TO CART. 8px of top padding against the mockup's 19.2px made the button
   visibly squatter than every other button on the site. */
.single-product .single_add_to_cart_button,
.single-product .wp-block-button__link.add_to_cart_button {
	padding: 1.2rem 3rem !important;
	color: #fff !important;
	line-height: 1.2;
}

/* the title's line-height, 47.52px against 46.656px */
.single-product .wp-block-post-title,
.single-product h1.product_title { line-height: 1.08 !important; }

/* ---------- the card button on archive-product ----------------------- */
/* `archive-product` (product tags, attribute archives) carries a
   woocommerce/product-button that the category template does not, so the same
   card had a solid plum bar on one page and a quiet outline icon on another.
   Matched to the outline treatment. */
.wc-block-components-product-button__button {
	width: 100%;
	background-color: transparent !important;
	border: 1px solid var(--fg-line-2) !important;
	color: var(--fg-ink) !important;
	border-radius: 0 !important;
	font-family: var(--fg-sans);
	font-size: .62rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	padding: .8rem 1rem !important;
	margin-top: .8rem;
	transition: background-color .35s var(--fg-ease), border-color .35s var(--fg-ease), color .35s var(--fg-ease);
}
.wc-block-components-product-button__button:hover {
	background-color: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
	color: #fff !important;
}

/* the sale badge — a small flat plum tag in the image corner, per the mockup */
/* the block emits a wrapper AND an inner badge; the wrapper is what sits in
   the corner, so both carry the treatment or the corner reads as plain text */
.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge {
	background: var(--fg-plum) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 5px 11px !important;
	top: 0; left: 0; right: auto;
	inset-inline-start: 0;
	line-height: 1.6;
}
/* the screen-reader copy inside it would otherwise print beside the label */
.wc-block-components-product-sale-badge .screen-reader-text { display: none; }

/* ---------- category head and toolbar -------------------------------- */
/* The mockup's .cat-head and .cat-toolbar: a centred serif title over a
   hairline, then a quiet uppercase row with the result count on the left and
   the sort control on the right. */

/* ---------- the category head, the mockup's .cat-head -----------------
   The mockup heads the page COLECȚIE / title / hairline, full width, above
   both the filters and the grid. The build had the title alone, INSIDE the
   products column, at 32px in plum -- barely larger than body copy and the
   wrong colour, with the rule spanning only the right-hand column. The
   template now puts the head above the columns; these rules give it the
   mockup's scale.

   `has-large-font-size` is a theme.json preset class and WordPress emits it
   with !important, which is why the plain rule below never took: measured
   32px against the mockup's 57.6px. */
.fg-cat-head {
	text-align: center;
	padding: 4rem 0 3rem;
	margin: 0;
	border-bottom: 1px solid var(--fg-line);
}
.fg-cat-kicker {
	font-family: var(--fg-sans);
	font-size: .66rem !important;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	margin: 0 0 .8rem !important;
}
.fg-cat-head .wp-block-query-title,
.wp-block-query-title {
	text-align: center;
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	line-height: 1.08;
	letter-spacing: .005em;
	color: var(--fg-ink) !important;
	margin: 0;
	padding: 0;
	border: 0;
}

.wc-block-product-results-count,
.woocommerce-result-count {
	font-family: var(--fg-sans);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-muted);
	margin: 0;
}

/* the mockup's .cat-body is `220px 1fr` with a 56px gap, which is what makes
   its three cards 298px. The build's 20% sidebar left them at 330. */
.wp-block-columns:has(#desktoponly) {
	gap: 56px !important;
}
.wp-block-columns > #desktoponly {
	flex-basis: 220px !important;
	flex-grow: 0;
	flex-shrink: 0;
}

/* THE GRID. The mockup runs three columns at 40px x 30px; the build ran four
   at 18.75px, which made the cards 250px wide against 299px and left them
   nearly touching. WooCommerce writes its column count as an inline custom
   property on the block, so the override has to be on the grid itself. */
.wp-block-woocommerce-product-collection .wc-block-product-template,
.wc-block-product-template.is-flex-container,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 40px 30px !important;
}
.wc-block-product-template li.wc-block-product,
ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
/* 3 columns need ~1,200px once the sidebar and its gutter are out */
@media (max-width: 1200px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	.wc-block-product-template.is-flex-container,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
}
@media (max-width: 520px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	.wc-block-product-template.is-flex-container,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 14px !important; }
}

/* the count + sort row */
.wp-block-group.is-content-justification-space-between:has(.wc-block-product-results-count) {
	align-items: center;
	border-bottom: 1px solid var(--fg-line);
	padding-bottom: 1.1rem;
	margin-bottom: 2.2rem;
}

/* the sort control — a bare word with a caret, not a boxed input */
.wc-block-product-sort-select,
.woocommerce-ordering { margin: 0; }
.wc-block-product-sort-select select,
.woocommerce-ordering select,
.wp-block-woocommerce-product-collection select {
	font-family: var(--fg-sans);
	font-size: .66rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--fg-ink);
	cursor: pointer;
	padding: .3rem 0;
	min-height: 0;
}
.wc-block-product-sort-select label,
.woocommerce-ordering label {
	font-family: var(--fg-sans);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

/* ---------- the count + sort row: never let the label be the thing that shrinks
   Found 26 Aug 2026 in the mobile QA pass, and it was NOT a mobile bug.
   The row is a flex container with `flex-wrap: nowrap`, so when the filter
   sidebar takes the width the browser crushed the `Sortează după` label instead
   of wrapping the row. Measured, label height by viewport width:

       601  57px      660  38px      700  38px      760  19px  ok
       820 228px !!   900  57px     1000  38px     1100  19px  ok

   At 820 the label rendered **14px wide and 228px tall -- one letter per line**
   and the bar was 247px of vertical space. The pattern is non-monotonic because
   the sidebar appears and disappears, so a breakpoint cannot fix it.
   The fix is structural: the row may wrap, and the label may never shrink.   */
.wp-block-group.is-content-justification-space-between:has(.wc-block-product-results-count) {
	flex-wrap: wrap;
	row-gap: .75rem;
}
.wc-block-product-sort-select label,
.woocommerce-ordering label {
	flex: 0 0 auto;
	white-space: nowrap;
}
.wc-block-product-sort-select select,
.woocommerce-ordering select {
	flex: 1 1 auto;
	min-width: 0;
}

/* below 600 the two halves each take their own full-width line */
@media (max-width: 600px) {
	.wp-block-group.is-content-justification-space-between:has(.wc-block-product-results-count) {
		gap: .75rem;
		padding-bottom: .85rem;
		margin-bottom: 1.6rem;
	}
	.wp-block-group.is-content-justification-space-between:has(.wc-block-product-results-count) > * {
		flex: 1 0 100%;
		min-width: 0;
		justify-content: flex-start;
		text-align: left;
	}
	.wc-block-product-sort-select,
	.woocommerce-ordering { width: 100%; flex-wrap: nowrap; }
}
/* ⚠️ A STRAY `}` LIVED ON THIS LINE AND IT WAS SILENTLY KILLING RULES.
   Found 26 August by injecting a rule at runtime that was already in the file:
   the runtime copy applied and the file copy did not. Comment-stripped brace
   depth went NEGATIVE here — one closing brace too many after the media query
   above — and from this point the browser's parser lost sync, so rules further
   down the file were dropped. That is why the promo popup's image ceiling read
   as `max-height: none` while `grep` found it in the served CSS.
   **When a rule that is plainly in the file has no effect, check the file
   parses before checking the cascade.** */

/* ---------- the category article, as the mockup's quiet band -----------
   His SEO article runs to 58 headings and paragraphs -- 3,666px on
   `buchete-de-flori`. assets/category.js turns it into the same accordion the
   homepage's keyword band gets: a title, a standfirst, then one labelled row
   per section with the first open. Nothing is rewritten and nothing is
   removed; verified line by line against his live copy. */
.wp-block-term-description {
	max-width: none;
	margin: 5rem 0 0;
	padding-top: 0;
	border-top: 0;
	color: var(--fg-muted);
}
/* a category whose whole description is one sentence: it closes the page
   rather than trailing off it */
.wp-block-term-description.fg-catseo--short {
	border-top: 1px solid var(--fg-line);
	padding-top: 2.5rem;
	max-width: 74ch;
}
.fg-catseo__head {
	border-top: 1px solid var(--fg-line);
	padding-top: 2.5rem;
	margin-bottom: 1.4rem;
	max-width: 74ch;
}
.fg-catseo__title {
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
	font-weight: 400 !important;
	line-height: 1.16;
	color: var(--fg-ink) !important;
	margin: 0 0 1.1rem !important;
	text-align: left;
}
.fg-catseo__lead {
	font-family: var(--fg-sans) !important;
	font-size: .88rem !important;
	line-height: 1.85 !important;
	color: var(--fg-muted) !important;
	margin: 0 0 .9rem !important;
}
.fg-catseo__acc details { border-bottom: 1px solid var(--fg-line); }
.fg-catseo__acc details:first-child { border-top: 1px solid var(--fg-line); }
.fg-catseo__acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
	padding: 1.05rem .1rem;
	font-family: var(--fg-sans);
	font-size: .8rem;
	letter-spacing: .01em;
	color: var(--fg-muted);
	transition: color .25s var(--fg-ease);
}
.fg-catseo__acc summary::-webkit-details-marker { display: none; }
.fg-catseo__acc summary::after {
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
	color: var(--fg-faint);
	transition: transform .3s var(--fg-ease), color .3s var(--fg-ease);
}
.fg-catseo__acc details[open] summary { color: var(--fg-ink); }
.fg-catseo__acc details[open] summary::after { transform: rotate(45deg); color: var(--fg-plum); }
.fg-catseo__acc summary:hover { color: var(--fg-ink); }
.fg-catseo__a { padding: 0 .1rem 1.4rem; max-width: 80ch; }
.fg-catseo__a :is(p, li) {
	font-family: var(--fg-sans) !important;
	font-size: .85rem !important;
	line-height: 1.8 !important;
	color: var(--fg-muted) !important;
	margin: 0 0 .9rem !important;
}
.fg-catseo__a > *:last-child { margin-bottom: 0 !important; }
.fg-catseo__a a { color: var(--fg-plum) !important; text-decoration: underline; text-underline-offset: 3px; }
/* the heading travels with its section but the summary is what is read */
.fg-catseo__h {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

/* pagination — flat squares, not pills */
.wp-block-query-pagination { margin-top: 3.4rem; }
.wp-block-query-pagination-numbers .page-numbers:not(.dots) {
	border-radius: 0 !important;
	background: transparent !important;
	border: 1px solid var(--fg-line);
	font-family: var(--fg-sans);
	font-size: .7rem;
	letter-spacing: .08em;
	min-width: 2.3rem;
	line-height: 2.3rem;
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--fg-ink) !important;
	border-color: var(--fg-ink);
	color: var(--wp--preset--color--base);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-family: var(--fg-sans);
	font-size: .64rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* the sidebar filter headings — the mockup sets these in Cormorant, not Inter,
   which is what separates a filter column from an admin panel */
.wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-filter-wrapper h3,
#desktoponly h3.wp-block-heading {
	font-family: var(--fg-serif) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	margin: 0 0 .9rem !important;
}
/* and its labels, at the mockup's .82rem */
.wc-block-checkbox-list label,
.wc-block-components-checkbox__label,
.wc-block-product-filter-checkbox-list label,
#desktoponly label {
	font-family: var(--fg-sans) !important;
	font-size: .82rem !important;
}

/* ---------- the duplicate colour filter, which HE already turned off ----
   Two colour filters render on every category page: `FILTREAZĂ DUPĂ CULOARE`
   with checkboxes and counts near the top, and a second `CULORI` further down.
   Both query the SAME attribute -- pa_culori, id 3, the only colour taxonomy
   on the site.

   IT IS NOT A DESIGN DECISION, IT IS A SETTING THAT NEVER TOOK. Read straight
   out of his live database, two of the three legacy filter wrappers carry
   `"style":{"css":"display:none"}` -- his own instruction, authored in the
   Site Editor, which WordPress emits as the `has-custom-css` class and then
   never writes a rule for. The third wrapper, the one he did NOT hide, has no
   such attribute.

   So this is not us removing one of his filters. It is his own setting,
   applied. If he ever wants them back, deleting this rule restores both. */
.wp-block-woocommerce-filter-wrapper.has-custom-css { display: none; }

/* ---------- "Filtre active" with nothing active ----------------------
   The heading renders on every category page until a customer picks a filter,
   standing over an empty box. It comes back the moment a chip exists. */
.wp-block-woocommerce-product-filters
	> h3:has(+ .wp-block-woocommerce-product-filter-active .wc-block-product-filter-removable-chips:empty),
.wp-block-woocommerce-product-filter-active:has(.wc-block-product-filter-removable-chips:empty) {
	display: none;
}

/* ---------- the price slider's right-hand input --------------------
   It was clipping its own value: "1.530 le". The two inputs are laid out as a
   fixed pair, so the wider of the two numbers decides the width. */
.wc-block-product-filter-price-slider__range-text-input,
.wc-block-product-filter-price__range-text-input {
	flex: 1 1 auto;
	min-width: 0;
}
.wc-block-product-filter-price-slider__range-text-input input,
.wc-block-product-filter-price__range-text-input input,
.wp-block-woocommerce-product-filter-price input[type="text"],
.wp-block-woocommerce-product-filter-price input[type="number"] {
	width: 100%;
	min-width: 0;
	padding-inline: .55rem;
	font-family: var(--fg-sans);
	font-size: .78rem;
	text-overflow: clip;
}

/* ---------- filters with nothing in them ---------------------------- */
/* A WooCommerce filter block still prints its heading when it has no terms to
   offer, so a category whose products carry no `pa_flori` or `pa_culori`
   values shows "Filtrează după flori" with nothing under it. Measured: 5 of
   the 88 non-empty categories, 21 products — Ciocolata si cadouri, Coronita
   1 iunie, Corsaje, Pomisori Craciun, Servicii extra. "Filtre active" has the
   same shape on EVERY category until the customer picks something.
   The `input`/`select` guards keep the price slider and the sort control,
   which are legitimately list-less. */
.wp-block-woocommerce-filter-wrapper:not(:has(li)):not(:has(input)):not(:has(select)) {
	display: none;
}


/* =========================================================================
   HOMEPAGE — products higher, copy lower.

   Clause 2 wants a new design. Clause 3 keeps every heading's text and level,
   and clause 5.8 keeps the Client's database out of the deployment — and the
   homepage layout IS database content: 48 KB of blocks in page 3812, which his
   team edits all week.

   So the reorder is done visually, with flex `order`. The source order of the
   48 KB is untouched, which means the clause 3.1 before/after crawl shows no
   change at all, while a customer sees the shop before the essay.

   The selectors are content-addressed, not positional — "the group that
   contains cover tiles", not "the fifth child" — so anything his team adds
   lands in place, in source order, without this file knowing about it. A
   product grid, if one is ever added, lifts automatically.

   The one honest cost: DOM order and visual order diverge, so keyboard tab
   order follows the source rather than the screen. The interactive elements
   here are category links, so it is a modest cost, and it is the price of not
   touching his database.
   ========================================================================= */

/* No `gap` and no margin reset here on purpose. WordPress's blockGap sets
   `margin-block-start` on siblings only, so there is nothing to collapse and
   flex preserves it exactly. Adding a uniform row-gap on top made the page
   1,618px taller. */
body.home .entry-content {
	display: flex;
	flex-direction: column;
}

/* everything keeps its place unless named below */
body.home .entry-content > * { order: 5; }

body.home .entry-content > .nomobilelrpadding { order: 1; }   /* trust strip  */
body.home .entry-content > rs-fullwidth-wrap,
body.home .entry-content > .wp-block-shortcode { order: 2; }   /* hero slider  */
body.home .entry-content > *:has(.wp-block-cover) { order: 3; }/* category tiles */
body.home .entry-content > *:has(.wc-block-product),
body.home .entry-content > *:has(.wp-block-woocommerce-product-collection) { order: 4; }

/* Prose was running the full 1300px content width, which is unreadable. This
   narrows the text without touching the full-bleed and tile blocks. */
body.home .entry-content > :is(p, ul, ol, h2, h3),
body.home .entry-content > .wp-block-aioseo-faq {
	max-width: 74ch;
	margin-inline: auto;
	width: 100%;
}
body.home .entry-content > h2 { margin-block: 2.6rem 0; }
body.home .entry-content > h1 { margin-block: 2rem 0; }


/* ---------- the homepage category tiles ------------------------------ */
/* Eight covers at 500x500, two per row, is ~2,000px of tiles before a
   customer reaches anything else. The mockup's occasion grid is a tight row of
   squares, so these become a four-across grid. The labels came through at
   three different sizes because the preset font-size class sits on the
   paragraph, not the group. */

/* The grid goes on whatever element DIRECTLY contains the covers. One of the
   two groups nests them a level deeper, and putting the grid on the outer
   wrapper collapsed its tiles to 207x39. */
body.home .entry-content :is(div, section):has(> .wp-block-cover) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
	max-width: none;
	width: 100%;
}
/* the outer wrapper, when there is one, just gets out of the way */
body.home .entry-content > *:has(.wp-block-cover):not(:has(> .wp-block-cover)) {
	display: block;
}
@media (max-width: 900px) {
	body.home .entry-content :is(div, section):has(> .wp-block-cover) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 🔴 The occasion covers used to collapse to ONE column below 480, which made
   each one a 330x330 block -- 2.7x the size of a product card on the same page.
   Paul, 26 Aug: "we have a single column of images. No. It should be a 2x2
   matrix", and separately "the product photos are MASSIVE compared to the other
   product photos in lower sections". Same rule, both complaints. Two up. */
@media (max-width: 480px) {
	body.home .entry-content :is(div, section):has(> .wp-block-cover) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

body.home .entry-content .wp-block-cover {
	min-height: 0 !important;
	/* four of the eight carry an inline `aspect-ratio: unset`, which beats a
	   plain declaration here, so this one has to be important too */
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: flex-end;
	justify-content: center;
}

/* the label — one size on every tile, and readable on a pale photograph */
body.home .entry-content .wp-block-cover :is(p, h1, h2, h3, h4) {
	font-family: var(--fg-sans) !important;
	font-size: .68rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	color: #fff !important;
	margin: 0;
	padding: 0 1rem 1.3rem;
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 12px rgba(20, 15, 12, .55);
}

/* the mockup's scrim — the tiles are shot on white, so a label with no ground
   under it disappears. This is `.occ::after` from the mockup. */
body.home .entry-content .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(20, 15, 12, .62), transparent 58%);
}
body.home .entry-content .wp-block-cover .wp-block-cover__image-background {
	transition: transform .7s var(--fg-ease);
}
body.home .entry-content .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}


/* =========================================================================
   HOMEPAGE SECTIONS — the eight the mockup has and the live page did not.

   Rendered by inc/homepage-sections.php and appended to the post content, so
   they are siblings of the Client's blocks inside `.entry-content` and the
   flex `order` below interleaves them into the mockup's sequence without a
   single database write.

   ONE SIZING SYSTEM. Every section uses the same three tokens, so nothing
   drifts: --fg-sec-pad for vertical rhythm, --fg-wrap for the content width,
   --fg-gap for grids. Full-bleed sections break out with a negative margin
   that is derived from the same width, never hand-tuned.

   Headings here are DIVs, not h2. Clause 3 fixes the page's H1/H2/H3 set, and
   the crawl counts tags — so a new visual heading must not be a heading tag.
   ========================================================================= */

body.home {
	--fg-wrap: 1300px;
	--fg-sec-pad: clamp(3.5rem, 6vw, 6.5rem);
	--fg-gap: 22px;
}

body.home .fg-sec:not(.alignfull) {
	width: 100%;
	max-width: var(--fg-wrap);
	margin-inline: auto;
	padding-block: var(--fg-sec-pad);
	padding-inline: 34px;
	box-sizing: border-box;
}
/* A full-bleed section is still an .fg-sec, so it must be excluded from BOTH
   the max-width and the `margin-inline: auto` above — that auto was replacing
   the negative margins WordPress's own `.alignfull` rule sets to cancel the
   container's global padding, leaving the band 100px short. */
body.home .fg-sec.alignfull {
	max-width: none;
	padding-block: 0;
	box-sizing: border-box;
}

/* ═══════════════ MOBILE: STOP GIVING AWAY A THIRD OF THE PHONE ═══════════════
   Found 26 Aug 2026, from Paul on a real handset: "a lot of the sections are
   NARROW", "the text reads large", "should be a 2x2 matrix".

   Measured at 390px, all three were ONE cause. `.entry-content` already pays
   30px of side padding; `.fg-sec` was adding **34px more on each side on top of
   it**, so every section rendered at **262px of a 390px screen -- 67%**:

       .entry-content   330px
       .fg-grid         262px      <- the product tiles
       .fg-split        262px      <- the wedding/events copy
       .latest-post-... 262px      <- the blog
       FAQ              330px      <- the ONE section not inside .fg-sec

   That is why he read the FAQ as correct and everything around it as wrong,
   and why the body copy "looked large": 16px in a 262px column is about 26
   characters a line. **The type was never big. The measure was tiny.**

   The vertical figure was the same story -- `--fg-sec-pad` bottoms out at
   3.5rem, which is a desktop rhythm, and on a category page it put **600px
   between the top of the screen and the first product** on an 844px phone.  */
@media (max-width: 600px) {
	body.home {
		/* the desktop clamp never goes below 3.5rem; on a phone that is a screen
		   and a half of air across eight sections */
		--fg-sec-pad: 2.25rem;
		--fg-gap: 14px;
	}
	body.home .fg-sec:not(.alignfull) {
		/* .entry-content's own 30px is the page gutter and is enough */
		padding-inline: 0;
	}
}

/* ONE WIDTH FOR EVERYTHING. The Client's tile group is `alignwide` (1340px)
   while every section here is --fg-wrap (1300px), so the tiles sat 20px proud
   on each side. Pull his blocks onto the same measure. */
body.home .entry-content > .alignwide:not(.alignfull),
body.home .entry-content > *:has(.wp-block-cover) {
	max-width: var(--fg-wrap);
	margin-inline: auto;
}

/* the shared eyebrow / title / sub rhythm, identical in every section */
body.home .fg-kicker {
	display: block;
	font-family: var(--fg-sans);
	font-size: .66rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--fg-muted);
	font-weight: 500;
	margin-bottom: 0;
}
body.home .fg-sec__head .fg-kicker { margin-bottom: 0; }
body.home .fg-sec__head .fg-title { margin-top: 1rem; }
body.home .fg-title {
	font-family: var(--fg-serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: .005em;
	color: var(--fg-ink);
	text-wrap: balance;
	margin: 0;
}
body.home .fg-sub {
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--fg-muted);
	margin: .9rem 0 0;
	max-width: 60ch;
}
body.home .fg-occ-head { padding-bottom: 0; }
/* the FAQ rows start immediately under their head, as the mockup has them —
   the section's own bottom padding was adding a second gap under the title */
/* Paul, 25 Aug: "a bit of breathing room between the intrebari header and the
   accordion". The -2.5rem was tuned when the title was our one-line
   "Întrebări frecvente"; his is two lines and it closed the gap to nothing. */
body.home #fg-faq-head { padding-bottom: 0; margin-bottom: 0; }
body.home #fg-faq-head .fg-sec__head { margin-bottom: 2.6rem; }
body.home .fg-occ-head .fg-sec__head { margin-bottom: 2.4rem; }
body.home .fg-sec__head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
/* the mockup's .sec-head::before — a 38px hairline that falls away into the
   background. It is the thing that makes each section feel announced. */
body.home .fg-sec__head::before {
	content: "";
	display: block;
	width: 1px;
	height: 38px;
	background: linear-gradient(var(--fg-gold), transparent);
	margin: 0 auto 1.8rem;
}
body.home .fg-sec__head .fg-sub { margin-inline: auto; }

/* the shared button */
body.home .fg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fg-sans);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 1.2rem 3rem;
	border: 1px solid var(--fg-ink);
	background: var(--fg-ink);
	color: var(--wp--preset--color--base);
	border-radius: 0;
	transition: background-color .4s var(--fg-ease), border-color .4s var(--fg-ease), color .4s var(--fg-ease);
}
body.home .fg-btn:hover { background: var(--fg-plum); border-color: var(--fg-plum); color: #fff; }
body.home .fg-btn.light { background: #fff; border-color: #fff; color: var(--fg-ink); }
body.home .fg-btn.light:hover { background: var(--fg-plum); border-color: var(--fg-plum); color: #fff; }
body.home .fg-btn.ghost { background: transparent; color: var(--fg-ink); }
body.home .fg-btn.ghost:hover { background: var(--fg-ink); color: var(--wp--preset--color--base); border-color: var(--fg-ink); }

/* ---------- the rotating hero ---------- */

/* full-bleed via WordPress's own `alignfull`, which already resolves the
   container's global padding correctly — a hand-rolled 100vw negative margin
   landed 50px off, because the padding is on the container, not the root. */
body.home .fg-hero {
	position: relative;
	padding: 0;
	min-height: min(90vh, 780px);   /* the mockup's .hero-rot is 90vh */
	overflow: hidden;
	background: #14110d;
}
body.home .fg-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s var(--fg-ease);
}
body.home .fg-slide.is-on { opacity: 1; pointer-events: auto; }
/* The mockup does this with a TRANSITION, not a keyframe animation, and it does
   not gate it on anything:
       .hslide img    { transform:scale(1.05); transition:transform 8s ease }
       .hslide.on img { transform:scale(1.13) }
   The port replaced that with `animation: fg-kenburns 9s` gated on an
   `.is-ready` class, and added a prefers-reduced-motion rule the mockup has
   never had. Paul saw no movement for a week; on his machine reduce-motion is
   on, so the guard we invented switched off the one thing he was looking for.
   The mockup is the brief. This is the mockup. */
body.home .fg-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 8s ease;
}
body.home .fg-slide.is-on img { transform: scale(1.13); }

body.home .fg-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(15, 12, 10, .3), rgba(15, 12, 10, .5));
}
body.home .fg-slide__c {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 28px;
	color: #fff;
}
body.home .fg-slide__c .fg-kicker { color: rgba(255, 255, 255, .85); margin-bottom: 1.3rem; }

/* ---------- the slide content, animating in on every change -----------
   Paul, 24 Aug: "all of the text plus the view collection boxes in the hero
   animate in with each slide change, it's nice, and I say we copy it."

   Two sources, and they agree. The MOCKUP staggers its .hslide .hc children —
   kicker .25s, title .42s, sub .6s, button .78s — and the port never carried
   any of it, so our slide content simply appeared. CALIFORNIA FLOWERS does the
   same thing with keyframes and adds the detail worth stealing: the title
   rises from BEHIND a mask rather than fading up through it
   (`@keyframes rise-up { from { transform: translateY(120%) } }`, inside a
   clipped parent), which is why theirs reads as typeset rather than as a
   fade. The title gets that; everything else gets the mockup's stagger.

   Re-runs on every slide change because the delays hang off `.is-on`, which
   home.js moves. No JS needed. */

body.home .fg-slide__c > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s var(--fg-ease), transform .9s var(--fg-ease);
}
body.home .fg-slide.is-on .fg-slide__c > * { opacity: 1; transform: none; }
body.home .fg-slide.is-on .fg-slide__c .fg-kicker { transition-delay: .25s; }
body.home .fg-slide.is-on .fg-slide__c .fg-hero__t { transition-delay: .42s; }
body.home .fg-slide.is-on .fg-slide__c p { transition-delay: .60s; }
body.home .fg-slide.is-on .fg-slide__c .fg-btn { transition-delay: .78s; }

/* the title's mask — California's rise-up, which is the part that looks good */
body.home .fg-hero__t { overflow: hidden; padding-bottom: .08em; }
body.home .fg-hero__t > span {
	display: block;
	transform: translateY(110%);
	transition: transform 1s cubic-bezier(.26, .54, .32, 1);
}
body.home .fg-slide.is-on .fg-hero__t > span { transform: none; transition-delay: .42s; }
/* the wrapper itself must not also slide, or the mask travels with the text */
body.home .fg-slide__c > .fg-hero__t { transform: none; }

body.home .fg-hero__t {
	font-family: var(--fg-serif);
	font-size: clamp(2.8rem, 7vw, 6.2rem);
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	max-width: 16ch;
	text-wrap: balance;
}
body.home .fg-slide__c p {
	font-family: var(--fg-sans);
	font-size: .95rem;
	font-weight: 300;
	color: rgba(255, 255, 255, .9);
	margin: 1.3rem 0 2.2rem;
	max-width: 46ch;
}
body.home .fg-hero__tabs {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	gap: .6rem;
}
body.home .fg-hero__tabs button {
	width: 52px;
	height: 2px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .35);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
body.home .fg-hero__tabs button::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: #fff;
}
body.home .fg-hero__tabs button.is-on::after { animation: fg-fill 6.8s linear forwards; }
@keyframes fg-fill { from { width: 0; } to { width: 100%; } }

/* the plugin's one-slide slider is replaced by the above */
body.home .entry-content > rs-fullwidth-wrap,
body.home .entry-content > .wp-block-shortcode { display: none; }

/* ---------- product rows ---------- */

body.home .fg-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 30px;
}
body.home .fg-card { display: flex; flex-direction: column; text-align: center; }
body.home .fg-card__ph {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* the mockup grounds product photos on pure white, not the near-white base;
	   his product shots are cut out on white and anything else shows a seam */
	background: #fff;
	margin-bottom: 1.1rem;
}
body.home .fg-card__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--fg-ease);
}
body.home .fg-card:hover .fg-card__ph img { transform: scale(1.05); }
body.home .fg-card__name,
body.home .fg-card__name a,
body.home a .fg-card__name { color: var(--fg-ink); }
body.home .fg-card__name {
	font-family: var(--fg-sans);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.5;
	min-height: 3.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .5rem;
}
body.home .fg-card__price {
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--fg-ink);
}
body.home .fg-card__price del { font-family: var(--fg-sans); font-style: normal; font-size: .9rem; color: var(--fg-faint); margin-right: .4rem; }
body.home .fg-card__price ins { text-decoration: none; }
/* the mockup puts a bordered .btn.ghost under each row, not an underlined
   link — same box as every other button on the page */
body.home .fg-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 4rem auto 0;
	width: fit-content;
	font-family: var(--fg-sans);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 1.1rem 2.4rem;
	border: 1px solid var(--fg-ink);
	border-radius: 0;
	background: transparent;
	color: var(--fg-ink);
	transition: background .4s var(--fg-ease), color .4s var(--fg-ease), border-color .4s var(--fg-ease);
}
body.home .fg-row { display: flex; flex-direction: column; }
body.home .fg-more { align-self: center; }
body.home .fg-more:hover { background: var(--fg-ink); color: var(--wp--preset--color--base); border-color: var(--fg-ink); }

/* ---------- full-bleed editorial band ---------- */

body.home .fg-band {
	position: relative;
	min-height: min(62vh, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #14110d;
	padding-inline: 28px;
}
body.home .fg-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.home .fg-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(15,12,10,.42), rgba(15,12,10,.52)); }
body.home .fg-band__in { position: relative; z-index: 2; max-width: 720px; text-align: center; }
body.home .fg-band__in .fg-kicker { color: rgba(255, 255, 255, .8); }
body.home .fg-band__in .fg-title { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
body.home .fg-band__in p {
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: 1.3rem;
	color: rgba(255, 255, 255, .82);
	margin: 1.5rem auto 0;
	max-width: 560px;
}

/* ---------- credo ---------- */

body.home .fg-credo { text-align: center; }
body.home .fg-credo > * { max-width: 780px; margin-inline: auto; }
/* the mockup's .credo .rule — vertical, gold, falling away. It was rendering
   as a 46px horizontal line, which reads as a divider rather than a flourish. */
body.home .fg-credo__rule {
	display: block;
	/* `.fg-credo > * { width: 100% }` further down was flattening this into a
	   780px horizontal bar, which is the line Paul saw. */
	width: 1px !important;
	height: 44px;
	background: linear-gradient(var(--fg-gold), transparent);
	margin: 0 auto 2.4rem;
}
body.home .fg-credo .fg-kicker { margin-bottom: 2.2rem; }
body.home .fg-credo p {
	font-family: var(--fg-serif);
	font-size: clamp(1.6rem, 3.4vw, 3rem);
	line-height: 1.34;
	color: var(--fg-ink);
	margin: 0;
	text-wrap: balance;
}
body.home .fg-credo em { font-style: italic; color: var(--fg-plum); }

/* ---------- reviews ---------- */

body.home .fg-reviews { text-align: center; }
body.home .fg-reviews > * { max-width: 760px; margin-inline: auto; }
body.home .fg-stars { font-size: 1.1rem; letter-spacing: .35rem; color: var(--fg-gold); }
body.home .fg-reviews__score {
	font-family: var(--fg-sans);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-muted);
	margin: 1.1rem 0 0;
}
body.home .fg-reviews__score b { color: var(--fg-ink); }
body.home .fg-reviews__q {
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.5;
	color: var(--fg-ink);
	margin: 2.2rem auto 1.1rem;
	min-height: 4.5em;
	max-width: 30ch;
	border: 0;
	padding: 0;
	text-wrap: balance;
}
body.home .fg-reviews__n {
	font-family: var(--fg-sans);
	font-weight: 500;
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0;
}
body.home .fg-reviews__dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.7rem; }
body.home .fg-reviews__dots button {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: var(--fg-line-2); cursor: pointer;
	transition: width .3s var(--fg-ease), background-color .3s var(--fg-ease), border-radius .3s;
}
/* the half star: the same glyph, clipped, so 4,5 reads as 4,5 */
body.home .fg-stars__half {
	position: relative;
	display: inline-block;
	color: var(--fg-line-2);
}
body.home .fg-stars__half::before {
	content: "★";
	position: absolute;
	left: 0; top: 0;
	width: 50%;
	overflow: hidden;
	color: var(--fg-gold);
}
body.home .fg-reviews__q,
body.home .fg-reviews__n { transition: opacity .32s var(--fg-ease); }
body.home .fg-reviews__q.is-out,
body.home .fg-reviews__n.is-out { opacity: 0; }
/* the mockup's .rev-score a — the counts are links, and they look it */
body.home .fg-reviews__score a {
	color: var(--fg-plum) !important;
	border-bottom: 1px solid var(--fg-plum);
	padding-bottom: 1px;
}
body.home .fg-reviews__score a:hover { color: var(--fg-ink) !important; border-color: var(--fg-ink); }
body.home .fg-reviews__dots button.is-on { background: var(--fg-plum); width: 24px; border-radius: 8px; }

/* ---------- split sections (despre, bespoke) ---------- */

body.home .fg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 70px);
	align-items: center;
}
body.home .fg-split--rev .fg-split__ph { order: 2; }
body.home .fg-split__ph { aspect-ratio: 4 / 5; overflow: hidden; background: #FBF8F2; }
body.home .fg-split__ph img { width: 100%; height: 100%; object-fit: cover; }
/* The events photo is 1774x887 -- a 2:1 landscape dropped into a 4:5 portrait
   box, so 60% of its width is cropped away and the default centre crop lands
   on empty wall. The subject stands at ~78% across. Paul, 25 Aug: "move the
   crop to the right side of the photo so the woman is in the center." */
body.home .fg-split--rev .fg-split__ph img { object-position: 92% 50%; }
body.home .fg-split__tx .fg-title { margin: 1rem 0 1.3rem; }
body.home .fg-split__tx p { color: var(--fg-muted); margin: 0 0 1.1rem; font-size: 1rem; }
body.home .fg-points { list-style: none; padding: 0; margin: 1.7rem 0 0; display: grid; gap: .8rem; }
body.home .fg-points li {
	display: flex; gap: .7rem; align-items: flex-start;
	font-family: var(--fg-sans); font-size: .7rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--fg-ink);
}
body.home .fg-points li::before { content: "—"; color: var(--fg-plum); }
body.home .fg-split__tx .fg-btn { margin-top: 1.8rem; }

/* ---------- the mockup's order ---------- */

body.home .entry-content > .fg-hero      { order: 0; }
/* trust strip = 1, occasion tiles = 3, from the block above */
body.home .entry-content > #fg-occasions { order: 2; }   /* the head above them */
body.home .entry-content > #fg-featured  { order: 4; }
body.home .entry-content > .fg-band      { order: 6; }
body.home .entry-content > .fg-credo     { order: 7; }
body.home .entry-content > .fg-reviews   { order: 8; }
body.home .entry-content > .fg-split     { order: 9; }
body.home .entry-content > .fg-split--rev{ order: 10; }
body.home .entry-content > #fg-funeral   { order: 11; }
body.home .entry-content > #fg-guides    { order: 12; }   /* his blog */
body.home .entry-content > #fg-faq-head  { order: 17; }   /* announces the rows */
/* The keyword band goes LAST, above the footer, which is the whole point of
   it. Without an explicit order it inherited 5 and sat between 'Cele mai
   iubite' and 'Lucrate manual' — the exact mid-browse slot Paul had the FAQ
   moved out of. */
body.home .entry-content > .fg-info      { order: 19; }
/* the leftover Slider Revolution hero: it is the Client's block and it is not
   ours to delete, but it must not sit inside the keyword band's header. Given
   its own slot at the very end, where the remaining prose goes.
   ⚠️ It also costs 567 KB of JavaScript (rs6.min 406 + rbtools.min 161) for a
   hero this redesign replaced. Removing the block is a Stefan decision, and it
   is the single largest performance win available on this page. */
body.home .entry-content > *:has(rs-module),
body.home .entry-content > *:has(rs-fullwidth-wrap) { order: 21; }
/* Paul, 24 Aug: "a massive accordion underneath 'cele mai iubite'... should go
   at the BOTTOM of the site, not above the 'lucrate manual' section. Very
   strange to put it there and totally disrupts the flow." Agreed — the FAQ is
   reference material, not part of the browse. It goes after the last row. */
body.home .entry-content > .wp-block-aioseo-faq { order: 18 !important; }
/* his prose keeps order 5 from the block above — bumped below the rows */
body.home .entry-content > *:not([class*="fg-"]):not(.nomobilelrpadding):not(:has(.wp-block-cover)) { order: 20; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	body.home .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.home .fg-split { grid-template-columns: 1fr; }
	body.home .fg-split--rev .fg-split__ph { order: 0; }
	body.home .fg-hero { min-height: min(78vh, 560px); }
}
@media (max-width: 480px) {
	body.home .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
	body.home .fg-hero__tabs button { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	/* Exactly what the mockup suppresses at style.css:294 — the text reveal,
	   and nothing else. The hero's own drift is left alone, because the mockup
	   leaves it alone. */
	body.home .fg-slide__c > * { opacity: 1; transform: none; transition: none; }
}

/* A one-line, on-page answer to "is it animating?", so nobody has to guess
   again. Add ?fgdebug=1 to any URL. Never shown otherwise. */
body.fg-debug #fg-hero::before {
	content: attr(data-fg-debug);
	position: absolute;
	z-index: 9;
	top: 10px; left: 10px;
	background: #000;
	color: #0f0;
	font: 12px/1.5 ui-monospace, monospace;
	padding: 6px 10px;
	white-space: pre;
	pointer-events: none;
}


/* =========================================================================
   HEADER, TRUST STRIP AND FOOTER — brought onto the mockup's treatment.
   These three were left on the old theme's sizing and were the loudest
   remaining mismatch: a 146px logo, a 255px-tall header with the nav wrapping
   onto a second row, a heavy plum trust band, and a footer still carrying the
   old purple-to-blue gradient.
   ========================================================================= */

/* ---------- header ---------- */

.wp-block-site-logo img,
.wp-block-site-logo .custom-logo {
	height: 56px !important;
	width: auto !important;
	max-width: none;
}
@media (max-width: 900px) {
	.wp-block-site-logo img, .wp-block-site-logo .custom-logo { height: 44px !important; }
}

/* the brand tagline the mockup carries under the mark. Marina named this line
   as the one she liked, so it is worth not losing. */
.wp-block-site-logo { position: relative; }
.wp-block-site-logo::after {
	content: "De peste 25 de ani";
	display: block;
	margin-top: 6px;
	font-family: var(--fg-sans);
	font-size: .52rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--fg-muted);
	white-space: nowrap;
}

/* one tidy row, not two */
.masthead .wp-block-navigation__container,
.wp-block-navigation__container { row-gap: 0; }
.masthead { padding-block: .9rem; }
.wp-block-navigation-item__label { font-size: .66rem; letter-spacing: .13em; }
@media (min-width: 1200px) {
	.wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; }
	.wp-block-navigation-item__label { font-size: .63rem; letter-spacing: .1em; }
}

/* ---------- trust strip: the mockup's thin line, not a plum band ----------
   The mockup sets each pair on ONE baseline — an italic serif phrase and a
   letter-spaced caps label beside it, not stacked. Its .trust .cell is
   display:flex; align-items:baseline; gap:.6rem. Same here, against the
   Client's three-column block. Copy is untouched: this is type and layout. */

body .entry-content > .nomobilelrpadding,
.topbar + * .nomobilelrpadding {
	background: var(--fg-bg) !important;
	background-image: none !important;
	color: var(--fg-ink) !important;
	border-bottom: 1px solid var(--fg-line);
	padding-block: 1.5rem !important;
}
body .entry-content > .nomobilelrpadding * { color: var(--fg-ink) !important; }

/* the three cells on one row, centred, with the mockup's 3.5rem between them */
body .entry-content > .nomobilelrpadding .wp-block-columns {
	justify-content: center;
	gap: 0 3.5rem !important;
	flex-wrap: wrap;
}
body .entry-content > .nomobilelrpadding .wp-block-column {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: .6rem;
	flex-wrap: wrap;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	padding-top: 0 !important;
}
body .entry-content > .nomobilelrpadding p { margin: 0 !important; }
body .entry-content > .nomobilelrpadding p:first-child {
	font-family: var(--fg-serif) !important;
	font-style: italic !important;   /* the block carries font-style:normal inline */
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
}
body .entry-content > .nomobilelrpadding p:last-child {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	line-height: 1.2 !important;
}
@media (max-width: 900px) {
	body .entry-content > .nomobilelrpadding .wp-block-columns { gap: .9rem 2rem !important; }
}

/* ---------- footer ---------- */

.mastfooter {
	background: var(--fg-ink) !important;
	background-image: none !important;
	color: rgba(231, 223, 208, .7) !important;
	font-family: var(--fg-sans);
	font-size: .78rem;
	padding-block: 4.5rem 2.5rem !important;
}
/* the column headings are paragraphs with `is-style-text-subtitle`, not
   heading tags, which is why the heading rule below never reached them */
.mastfooter p.is-style-text-subtitle,
.mastfooter :is(h1, h2, h3, h4, .wp-block-heading) {
	font-family: var(--fg-sans) !important;
	color: #fff !important;
	font-size: .62rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500 !important;
	margin-bottom: 1.1rem !important;
}
.mastfooter a {
	color: rgba(231, 223, 208, .62) !important;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mastfooter a:hover { color: #fff !important; }
.mastfooter p { color: rgba(231, 223, 208, .6) !important; font-size: .74rem; line-height: 1.7; }
.mastfooter .wp-block-site-logo img { height: 52px !important; }
.mastfooter .wp-block-site-logo::after { content: none; }

/* ---------- footer, to the mockup, second pass ------------------------
   Paul, 24 Aug evening: the keyword block "doesn't belong there", the fonts
   are "enormous", the Contact column "looks awful and is formatted awful",
   too many links under Utile, and the card marks "look bad" — move them down
   beside the ANPC/SOL badges "in a white bar at the very bottom", the way
   California Flowers does it.

   WHAT MOVED, AND WHAT COULD NOT. The 357-character keyword paragraph is
   replaced by the mockup's short address line. It is site-wide boilerplate, it
   appears nowhere else on the page, and every term in it — buchete, coroane
   funerare, aranjamente florale — is carried by real content elsewhere. The
   Client's original is untouched in his database and returns the moment the
   theme is deactivated.

   THE LEGAL LINKS DID NOT GET TRIMMED. Termeni, politica de returnare,
   protecția datelor, ANPC and SOL are required for Romanian e-commerce.
   Eleven links became two labelled columns — Despre and Ajutor — so the column
   is shorter to read without a single URL being dropped. */

.mastfooter { padding-block: 4.5rem 2.5rem !important; }
.mastfooter .fg-foot-cols { gap: 40px; align-items: flex-start; }
.mastfooter .wp-block-column { flex-basis: auto !important; }

.mastfooter .fg-foot-h {
	font-family: var(--fg-sans) !important;
	color: #fff !important;
	font-size: 9.92px !important;      /* the mockup's footer.site h4 */
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500 !important;
	margin: 0 0 1.3rem !important;
}
.mastfooter .footerlogo img { height: 52px !important; width: auto !important; }
.mastfooter .footerlogo { margin: 0 0 1.5rem !important; }
.mastfooter .fg-foot-addr {
	font-size: .74rem !important;
	line-height: 1.75;
	color: rgba(231, 223, 208, .55) !important;
	max-width: 30ch;
	margin: 0 !important;
}

.mastfooter .fg-foot-links { display: flex; flex-direction: column; }
.mastfooter .fg-foot-links a {
	display: block;
	padding: .3rem 0;
	font-family: var(--fg-sans);
	font-size: .72rem !important;
	letter-spacing: .08em;             /* the mockup's footer.site a */
	text-transform: none;
	color: rgba(231, 223, 208, .62) !important;
	transition: color .25s var(--fg-ease);
}
.mastfooter .fg-foot-links a:hover { color: #fff !important; }

/* contact: an icon, then the thing itself — not a wall of labelled lines */
.mastfooter .fg-foot-contact a { display: flex; align-items: center; gap: .6rem; }
.mastfooter .fg-ico { width: 13px; height: 13px; flex: none; fill: rgba(231, 223, 208, .45); transition: fill .25s var(--fg-ease); }
.mastfooter .fg-foot-contact a:hover .fg-ico { fill: var(--fg-gold); }
.mastfooter .fg-foot-legal {
	margin: 1.4rem 0 0 !important;
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	letter-spacing: .08em;
	line-height: 1.9;
	color: rgba(231, 223, 208, .34) !important;
}

/* the mockup's .foot-trust */
.fg-foot-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	justify-content: center;
	margin: 3.4rem 0 0 !important;
	padding: 2rem 0 0;
	border-top: 1px solid rgba(231, 223, 208, .14);
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(231, 223, 208, .55) !important;
}

/* ---------- the white base bar --------------------------------------
   California Flowers puts the payment marks and the copyright on white,
   below the dark footer. The ANPC and SOL badges are printed on white
   themselves, which is exactly why they looked bolted on over the ink —
   here they sit on their own ground and stop fighting it. They are a legal
   requirement and are never removed, only quieted. */
.fg-basebar {
	background: #fff;
	padding: 1.6rem 34px 1.8rem !important;
	margin: 0 !important;
	text-align: center;
}
/* the Client's footer keyword paragraph, restored 25 Aug. It is his copy and
   it stays; the mockup's treatment for text of this kind is quiet and narrow,
   so it reads as a footnote rather than as a wall. */
.fg-basebar__seo {
	max-width: 74ch;
	margin: 0 auto 1.6rem !important;
	font-family: var(--fg-sans);
	font-size: .72rem !important;
	line-height: 1.75;
	color: #9b9384 !important;
	text-align: center;
}
/* `margin: 0` would kill the constrained layout's auto-centring and leave the
   line 36px left of the marks under it -- which is what the © line has been
   doing since the footer rebuild. Both fixed here. */
.fg-basebar__marks-h {
	margin: 0 auto .8rem !important;
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9b9384 !important;
}
.fg-basebar__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	margin-bottom: 1rem;
}
.fg-basebar__marks img {
	display: block;
	height: 30px;
	width: auto;
	opacity: .7;
	transition: opacity .25s var(--fg-ease);
}
.fg-basebar__marks img.fg-pay { height: 26px; mix-blend-mode: multiply; }
.fg-basebar__marks a:hover img { opacity: 1; }
.fg-basebar__c {
	margin: 0 auto !important;
	font-family: var(--fg-sans);
	font-size: .58rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #9b9384 !important;
}
.fg-basebar__c a { color: #6f6759 !important; border-bottom: 1px solid #d8cfbd; }
.fg-basebar__c a:hover { color: var(--fg-plum) !important; }

@media (max-width: 900px) {
	.mastfooter .fg-foot-cols { gap: 32px; }
	.fg-foot-trust { gap: 1.2rem 2rem; }
}

/* ---------- credo and reviews: centre the CONTENT, not just the box -------- */
/* These were centring the section and leaving the text blocks shrink-wrapped
   and offset, which is what read as "not at all aligned". */

body.home .fg-credo,
body.home .fg-reviews { text-align: center; }
body.home .fg-credo > *,
body.home .fg-reviews > * {
	max-width: 780px;
	margin-inline: auto !important;
	text-align: center !important;
	width: 100%;
}
body.home .fg-reviews__q { max-width: 34ch; }

/* ---------- the two tile groups on one measure ---------- */
/* They are two separate block groups with different alignments, so their rows
   sat 20px apart. Both are pinned to the same grid and the same width. */

body.home .entry-content > *:has(.wp-block-cover) {
	max-width: var(--fg-wrap) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}


/* ---------- the FAQ accordion and the read-more fold ------------------ */
/* Alexandra cleared both on 24 August. Every word stays in the DOM — this
   collapses what a customer sees, never what a crawler reads. */

body.home .fg-faq { border-bottom: 1px solid var(--fg-line); max-width: 840px; margin-inline: auto; }
/* the plugin pads the <h3> AND we pad the button inside it — 22px + 24px top,
   which is why every row was 107px against the mockup's 66 */
body.home .fg-faq .aioseo-faq-block-question { margin: 0 !important; padding: 0 !important; }
/* Nine separate top-level blocks, no shared wrapper — so the column width and
   the rules between them have to come from each block. The mockup's .faq is
   840px wide with a hairline under every row. */
body.home .entry-content > .fg-faq {
	max-width: 840px;
	margin-inline: auto !important;
	border-bottom: 1px solid var(--fg-line);
	padding: 0 !important;
}
body.home .entry-content > .fg-faq:first-of-type { border-top: 1px solid var(--fg-line); }
/* the block editor puts 24px between consecutive blocks; nine of those turned
   the accordion into a ladder with a hole between every rung */
body.home .entry-content > .fg-faq + .fg-faq { margin-top: 0 !important; }
body.home .entry-content > .fg-faq { margin-block: 0 !important; }
body.home .fg-faq .aioseo-faq-block-question { margin: 0; }
body.home .fg-faq__t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	background: none;
	border: 0;
	padding: 1.5rem .2rem;
	cursor: pointer;
	text-align: left;
	font-family: var(--fg-sans);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-ink);
}
body.home .fg-faq__t::after {
	content: "+";
	font-family: var(--fg-serif);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--fg-plum);
	flex: none;
	transition: transform .3s var(--fg-ease);
}
body.home .fg-faq.is-open .fg-faq__t::after { transform: rotate(45deg); }
body.home .fg-faq__t:hover { color: var(--fg-plum); }
body.home .fg-faq .aioseo-faq-block-answer { padding: 0 .2rem 1.5rem; }
body.home .fg-faq .aioseo-faq-block-answer p {
	color: var(--fg-muted) !important;
	font-size: .95rem;
	max-width: 70ch;
	margin: 0;
}

/* ---------- guides: his blog, on the homepage -------------------------
   HIS BLOCK, not ours. The Latest Post Selection plugin renders an H2, an
   intro paragraph and four <article>s with images; home.js lifts the whole
   thing out of the accordion it had been swept into and drops it here. These
   rules dress his markup in the mockup's .guides treatment -- a hairline
   grid, the title in Cormorant carrying the weight, a quiet "Citește →" on
   the baseline.

   THE IMAGES STAY. The mockup's guides are text-only, but those four
   photographs are his and the rule in this repo is to quieten, never delete.
   They are cropped square and set at 78% opacity until hover, which keeps the
   grid calm without throwing anything away. */

/* His H2 reads "GHIDURI ȘI SFATURI DESPRE FLORI" -- literal capitals in the
   content, where every other title on this page is sentence-case serif. The
   words stay exactly as he wrote them; only their rendering changes, which is
   a display decision, not a content edit. */
/* his FAQ heading, moved into #fg-faq-head by home.js -- same all-caps
   problem as the blog heading, same display-only fix */
body.home #fg-faq-head .fg-title {
	color: var(--fg-ink) !important;
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
	font-weight: 400 !important;
	letter-spacing: .005em !important;
	text-align: center;
}

body.home #fg-guides .fg-title {
	color: var(--fg-ink) !important;
	margin-top: 1rem !important;
}
/* his intro runs ~280 characters against the one-line subs the other sections
   carry, so it gets a wider measure -- at 60ch it stacked eight lines deep and
   read as a column rather than as a standfirst */
body.home #fg-guides .fg-sub {
	font-family: var(--fg-serif) !important;
	font-style: italic;
	font-size: 1.25rem !important;
	line-height: 1.5;
	color: var(--fg-muted) !important;
	text-align: center;
	max-width: 76ch !important;
}
body.home #fg-guides .fg-sec__head { max-width: 860px; }
body.home #fg-guides .lps-block__intro { margin: 0; }
body.home #fg-guides .lps-block__intro:empty { display: none; }

body.home #fg-guides .latest-post-selection {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 !important;
	border-top: 1px solid var(--fg-line);
	border-bottom: 1px solid var(--fg-line);
	margin: 0 !important;
	padding: 0 !important;
}
body.home #fg-guides article {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.2rem;
	margin: 0 !important;
	padding: 1.8rem 1.6rem;
	border-left: 1px solid var(--fg-line);
	background: transparent;
	transition: background .4s var(--fg-ease);
}
body.home #fg-guides article:last-child { border-right: 1px solid var(--fg-line); }
body.home #fg-guides article:hover { background: rgba(154, 123, 69, .05); }
body.home #fg-guides .article__image {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--fg-surface);
}
body.home #fg-guides .article__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .78;
	transition: opacity .4s var(--fg-ease), transform .8s var(--fg-ease);
}
body.home #fg-guides article:hover .article__image img { opacity: 1; transform: scale(1.04); }
/* the CTA sits on the card's baseline whatever the title's line count, so the
   four "Citește →" line up -- the mockup's .fg-guide did this with
   justify-content: space-between */
body.home #fg-guides .article__info {
	padding: 0 !important;
	margin: 0 !important;
	flex: 1;
	display: flex;
	flex-direction: column;
}
body.home #fg-guides .article__title,
body.home #fg-guides .article__title a {
	font-family: var(--fg-serif) !important;
	/* the HOMEPAGE keeps the mockup's exact values; the reserved scale below
	   is scoped to :not(.home) and never reaches here */
	font-size: 17.92px !important;
	font-weight: 400 !important;
	line-height: 24.192px !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	margin: 0 !important;
}
/* the mockup's "Citește →", which his markup has no element for */
body.home #fg-guides .article__info::after {
	content: "Citește →";
	display: block;
	margin-top: auto;
	padding-top: 1.4rem;
	font-family: var(--fg-sans);
	font-size: 10.56px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-plum);
	transition: color .3s var(--fg-ease);
}
body.home #fg-guides article:hover .article__info::after { color: var(--fg-ink); }
/* the plugin prints its own meta rows; the mockup's card carries a title and
   nothing else, so they are quietened rather than removed */
body.home #fg-guides .article__meta,
body.home #fg-guides .article__excerpt,
body.home #fg-guides .lps-tile-readmore { display: none; }

@media (max-width: 900px) {
	body.home #fg-guides .latest-post-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.home #fg-guides article:nth-child(2) { border-right: 1px solid var(--fg-line); }
	body.home #fg-guides article:nth-child(-n+2) { border-bottom: 1px solid var(--fg-line); }
}
/* 🔴 These used to collapse to one column below 520 and the cards touched.
   Paul, 26 Aug: "the blog posts under ghiduri si sfaturi is also 1 long column,
   and all of the boxes touch". Two up, with a gap. */
@media (max-width: 520px) {
	body.home #fg-guides .latest-post-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
	body.home #fg-guides article { border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); }
}

/* ---------- "Informații utile": the keyword prose as an accordion --------
   Paul, 24 Aug: the mockup's accordions "look MUCH nicer than whatever you did
   by hiding all of the text". The mockup calls this band TUCKED — "pure keyword
   prose, quiet accordion above the footer" — and styles it at .8rem, muted,
   80ch, hairlines. One read-more over 2,800 words is a wall behind a door.
   Eleven labelled rows let a reader find the one line they came for.

   Every heading is still in the DOM inside its own row, visually hidden behind
   the summary that repeats it, so the document outline a crawler reads is
   unchanged. */

body.home .fg-info {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 34px 5rem;
}
/* THE TWO STACKS WERE TOUCHING -- measured gap: -1px. Nine collapsed FAQ rows
   ran straight into nine collapsed prose rows, which is why the bottom of the
   page read as one confused thing. Paul, 25 Aug: "both essentially a list of
   questions.. should this be a single item?" They are different content for
   different readers -- nine buyer questions at ~330 characters each, against
   2,800 words written for search -- so they stay separate and stop touching. */
body.home .fg-info { margin-top: 5.5rem; }
body.home .fg-info__head {
	border-top: 1px solid var(--fg-line);
	padding-top: 2.5rem;
	margin-bottom: 1.6rem;
}
body.home .fg-info__head .fg-kicker { display: block; margin-bottom: 1.1rem; }
body.home .fg-info__lead,
body.home .fg-info__a p,
body.home .fg-info__a li {
	font-family: var(--fg-sans) !important;
	font-size: .85rem !important;
	line-height: 1.8 !important;
	color: var(--fg-muted) !important;
	max-width: 84ch;
	margin: 0 0 .9rem !important;
	text-align: left !important;
}
body.home .fg-info__lead { max-width: 92ch; font-size: 14.08px !important; line-height: 1.85 !important; }

/* ---------- headings that are NOT accordion rows ----------------------
   Two of his headings in this band are structural rather than sectional: the
   page's own <h1>, and "Întrebări frecvente despre Flowers Garden", which
   introduces the AIOSEO FAQ blocks that follow OUTSIDE the band. home.js
   leaves both as headings instead of building empty rows for them.

   Paul, 25 Aug, on the first attempt: "whatever you did to the Informatii
   utile section looks.. bad." He was right -- they came out as full-width
   plum Cormorant capitals at 40px, floating between the rows and breaking
   every rhythm the band has. They are labels, so they are set as labels. */
body.home .fg-info__standalone {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .22em !important;
	line-height: 1.6 !important;
	text-transform: uppercase;
	color: var(--fg-faint) !important;
	text-align: left !important;
	margin: 2.6rem 0 .2rem !important;
	padding: 0 0 .9rem !important;
}
/* the band's title -- the page's own <h1>, set at the band's scale and sitting
   directly under the kicker, which is where the shape of every other section
   on this page says a title goes */
body.home .fg-info__title {
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.5rem, 2.1vw, 2rem) !important;
	font-weight: 400 !important;
	line-height: 1.16 !important;
	letter-spacing: .005em !important;
	text-transform: none;
	text-align: left !important;
	color: var(--fg-ink) !important;
	margin: 0 0 1.1rem !important;
	padding: 0 !important;
	max-width: 26ch;
}

/* and the prose band is subordinate to the FAQ above it: smaller, fainter,
   tighter. It is fine print, so it is set as fine print. */
body.home .fg-info__acc details { border-bottom: 1px solid var(--fg-line); }
/* NOTE: the band's rows deliberately keep the mockup's own summary treatment.
   The separation from the FAQ above is carried by the 5.5rem gap, by the
   band's own left-aligned head, and by the first FAQ row opening on load --
   three separators, none of which drift from the mockup. If it still reads as
   one long stack on a real screen, the lever is this rule's colour. */
body.home .fg-info__acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.05rem .1rem;
	font-family: var(--fg-sans);
	font-size: .8rem;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: none;
	font-weight: 400;
	color: var(--fg-muted);
	transition: color .25s var(--fg-ease);
}
body.home .fg-info__acc summary::-webkit-details-marker { display: none; }
body.home .fg-info__acc summary::after {
	content: "+";
	font-family: var(--fg-serif);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--fg-faint);
	flex: none;
	transition: transform .3s var(--fg-ease), color .3s var(--fg-ease);
}
body.home .fg-info__acc details[open] summary { color: var(--fg-ink); }
body.home .fg-info__acc details[open] summary::after { transform: rotate(45deg); color: var(--fg-plum); }
body.home .fg-info__acc summary:hover { color: var(--fg-ink); }
body.home .fg-info__a { padding: 0 .1rem 1.4rem; }
body.home .fg-info__a > *:last-child { margin-bottom: 0 !important; }
body.home .fg-info__a a { color: var(--fg-plum) !important; text-decoration: underline; text-underline-offset: 3px; }

/* the heading stays in the document for the crawler; the summary is what a
   person reads. Not display:none — that is the one thing clause 3 forbids. */
body.home .fg-info__h {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- trust strip: the mockup's thin line, not a plum band ----------
   The mockup sets each pair on ONE baseline — an italic serif phrase and a
   letter-spaced caps label beside it, not stacked. Its .trust .cell is
   display:flex; align-items:baseline; gap:.6rem. Same here, against the
   Client's three-column block. Copy is untouched: this is type and layout. */

body .entry-content > .nomobilelrpadding,
.topbar + * .nomobilelrpadding {
	background: var(--fg-bg) !important;
	background-image: none !important;
	color: var(--fg-ink) !important;
	border-bottom: 1px solid var(--fg-line);
	padding-block: 1.5rem !important;
}
body .entry-content > .nomobilelrpadding * { color: var(--fg-ink) !important; }

/* the three cells on one row, centred, with the mockup's 3.5rem between them */
body .entry-content > .nomobilelrpadding .wp-block-columns {
	justify-content: center;
	gap: 0 3.5rem !important;
	flex-wrap: wrap;
}
body .entry-content > .nomobilelrpadding .wp-block-column {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: .6rem;
	flex-wrap: wrap;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	padding-top: 0 !important;
}
body .entry-content > .nomobilelrpadding p { margin: 0 !important; }
body .entry-content > .nomobilelrpadding p:first-child {
	font-family: var(--fg-serif) !important;
	font-style: italic !important;   /* the block carries font-style:normal inline */
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
}
body .entry-content > .nomobilelrpadding p:last-child {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-muted) !important;
	line-height: 1.2 !important;
}
@media (max-width: 900px) {
	body .entry-content > .nomobilelrpadding .wp-block-columns { gap: .9rem 2rem !important; }
}

/* ---------- footer ---------- */

.mastfooter {
	background: var(--fg-ink) !important;
	background-image: none !important;
	color: rgba(231, 223, 208, .7) !important;
	font-family: var(--fg-sans);
	font-size: .78rem;
	padding-block: 4.5rem 2.5rem !important;
}
/* the column headings are paragraphs with `is-style-text-subtitle`, not
   heading tags, which is why the heading rule below never reached them */
.mastfooter p.is-style-text-subtitle,
.mastfooter :is(h1, h2, h3, h4, .wp-block-heading) {
	font-family: var(--fg-sans) !important;
	color: #fff !important;
	font-size: .62rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500 !important;
	margin-bottom: 1.1rem !important;
}
.mastfooter a {
	color: rgba(231, 223, 208, .62) !important;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mastfooter a:hover { color: #fff !important; }
.mastfooter p { color: rgba(231, 223, 208, .6) !important; font-size: .74rem; line-height: 1.7; }
.mastfooter .wp-block-site-logo img { height: 52px !important; }
.mastfooter .wp-block-site-logo::after { content: none; }

/* ---------- footer, to the mockup ------------------------------------
   The mockup's footer.site: four columns at 1.6fr 1fr 1fr 1fr, everything
   LEFT aligned, links stacked as blocks with .28rem of air, a 56px logo, and
   a trust row and a base line separated by hairlines. The Client's footer has
   the same four columns but centres two of them and right-aligns another, so
   the four headings never line up and the eye has nowhere to rest. */

.mastfooter .wp-block-columns { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.mastfooter .wp-block-column { flex-basis: auto !important; }

/* everything left, whatever the block was authored as */
.mastfooter .has-text-align-center,
.mastfooter .has-text-align-right,
.mastfooter .wp-block-column * { text-align: left !important; }
.mastfooter .wp-block-navigation,
.mastfooter .wp-block-navigation__container { justify-content: flex-start !important; align-items: flex-start !important; }
.mastfooter .wp-block-image.aligncenter { margin-inline: 0 !important; }

/* links stack with the mockup's rhythm */
.mastfooter .wp-block-navigation__container { gap: 0 !important; }
.mastfooter .wp-block-navigation-item__content { display: block; padding-block: .28rem; }
.mastfooter .wp-block-navigation-item__label { font-size: .72rem; letter-spacing: .08em; }

/* the logo is a plain image block here, not a site-logo block */
.mastfooter .footerlogo img { height: 56px !important; width: auto !important; }
.mastfooter .footerlogo { margin: 0 0 1.4rem !important; }
.mastfooter .wp-block-column:first-child p { max-width: 280px; }

/* the card marks: quiet, and the same height as the type around them */
.mastfooter .wp-block-image:not(.footerlogo) img {
	max-height: 30px;
	width: auto;
	opacity: .75;
	filter: grayscale(1) brightness(1.7);
	transition: opacity .3s var(--fg-ease), filter .3s var(--fg-ease);
}
.mastfooter .wp-block-image:not(.footerlogo):hover img { opacity: 1; filter: none; }

/* the mockup's .foot-trust */
.fg-foot-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	justify-content: center;
	margin: 3rem 0 0 !important;
	padding: 2rem 0;
	border-top: 1px solid rgba(231, 223, 208, .14);
	font-family: var(--fg-sans);
	font-size: .6rem !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(231, 223, 208, .6) !important;
}

/* The old base-strip rules lived here. They were written when the copyright
   and the ANPC marks were still two stray groups on the ink, and one of them
   forced `background: transparent !important`, which is why the new white bar
   would not paint. Replaced by .fg-basebar above. */

/* ---------- credo and reviews: centre the CONTENT, not just the box -------- */
/* These were centring the section and leaving the text blocks shrink-wrapped
   and offset, which is what read as "not at all aligned". */

body.home .fg-credo,
body.home .fg-reviews { text-align: center; }
body.home .fg-credo > *,
body.home .fg-reviews > * {
	max-width: 780px;
	margin-inline: auto !important;
	text-align: center !important;
	width: 100%;
}
body.home .fg-reviews__q { max-width: 34ch; }

/* ---------- the two tile groups on one measure ---------- */
/* They are two separate block groups with different alignments, so their rows
   sat 20px apart. Both are pinned to the same grid and the same width. */

body.home .entry-content > *:has(.wp-block-cover) {
	max-width: var(--fg-wrap) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}


/* ---------- the FAQ accordion and the read-more fold ------------------ */
/* Alexandra cleared both on 24 August. Every word stays in the DOM — this
   collapses what a customer sees, never what a crawler reads. */

body.home .fg-faq { border-bottom: 1px solid var(--fg-line); max-width: 840px; margin-inline: auto; }
/* the plugin pads the <h3> AND we pad the button inside it — 22px + 24px top,
   which is why every row was 107px against the mockup's 66 */
body.home .fg-faq .aioseo-faq-block-question { margin: 0 !important; padding: 0 !important; }
/* Nine separate top-level blocks, no shared wrapper — so the column width and
   the rules between them have to come from each block. The mockup's .faq is
   840px wide with a hairline under every row. */
body.home .entry-content > .fg-faq {
	max-width: 840px;
	margin-inline: auto !important;
	border-bottom: 1px solid var(--fg-line);
	padding: 0 !important;
}
body.home .entry-content > .fg-faq:first-of-type { border-top: 1px solid var(--fg-line); }
/* the block editor puts 24px between consecutive blocks; nine of those turned
   the accordion into a ladder with a hole between every rung */
body.home .entry-content > .fg-faq + .fg-faq { margin-top: 0 !important; }
body.home .entry-content > .fg-faq { margin-block: 0 !important; }
body.home .fg-faq .aioseo-faq-block-question { margin: 0; }
body.home .fg-faq__t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	background: none;
	border: 0;
	padding: 1.5rem .2rem;
	cursor: pointer;
	text-align: left;
	font-family: var(--fg-sans);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-ink);
}
body.home .fg-faq__t::after {
	content: "+";
	font-family: var(--fg-serif);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--fg-plum);
	flex: none;
	transition: transform .3s var(--fg-ease);
}
body.home .fg-faq.is-open .fg-faq__t::after { transform: rotate(45deg); }
body.home .fg-faq__t:hover { color: var(--fg-plum); }
body.home .fg-faq .aioseo-faq-block-answer { padding: 0 .2rem 1.5rem; }
body.home .fg-faq .aioseo-faq-block-answer p {
	color: var(--fg-muted) !important;
	font-size: .95rem;
	max-width: 70ch;
	margin: 0;
}

/* ---------- inside the fold: the keyword prose, made quiet --------------
   Paul, 24 Aug: "we really need to style the content behind the 'Citeste mai
   mult despre flowers garden' section because it looks AWFUL when you open it."

   It did. Every heading in there was a full-width centred plum ALL-CAPS serif
   at 2.5rem+, stacked a dozen deep, over a narrow off-centre column of body
   copy. The mockup treats exactly this material as an "info band — the keyword
   prose, DELIBERATELY QUIET" (style.css:390): .8rem labels, muted body at 1.8
   line-height, 80ch, hairlines instead of shouting.

   THE COPY IS NOT TOUCHED. Clause 3: nothing here deletes, hides or reorders a
   heading. Every word and every heading level still renders and still reads as
   a heading to a crawler. Only its size, colour and alignment change. */

body.home .fg-fold__in :is(h1, h2, h3, h4, h5, .wp-block-heading) {
	font-family: var(--fg-sans) !important;
	font-size: .78rem !important;
	line-height: 1.5 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	color: var(--fg-ink) !important;
	text-align: left !important;
	max-width: 80ch;
	margin: 2.6rem auto .9rem !important;
	padding-top: 1.6rem;
	border-top: 1px solid var(--fg-line);
}
body.home .fg-fold__in :is(h1, h2, h3, h4, h5, .wp-block-heading):first-child {
	margin-top: 0 !important;
	border-top: 0;
	padding-top: 0;
}
body.home .fg-fold__in p,
body.home .fg-fold__in li {
	font-family: var(--fg-sans) !important;
	font-size: .85rem !important;
	line-height: 1.8 !important;
	color: var(--fg-muted) !important;
	max-width: 80ch;
	margin: 0 auto .9rem !important;
	text-align: left !important;
}
body.home .fg-fold__in ul,
body.home .fg-fold__in ol { max-width: 80ch; margin: 0 auto 1.2rem !important; }
body.home .fg-fold__in a { color: var(--fg-plum) !important; text-decoration: underline; text-underline-offset: 3px; }
body.home .fg-fold__in img { max-width: 80ch; margin-inline: auto; display: block; }

/* the fold over the long SEO run */
body.home .fg-fold {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s var(--fg-ease);
	overflow: hidden;
	width: 100%;
	order: 21;
}
body.home .fg-fold.is-open { grid-template-rows: 1fr; }
body.home .fg-fold__in { min-height: 0; overflow: hidden; }
body.home .fg-fold:not(.is-open) .fg-fold__in { visibility: hidden; }
body.home .fg-fold.is-open .fg-fold__in { visibility: visible; }
/* the folded blocks keep their own layout inside */
body.home .fg-fold__in > * { max-width: 74ch; margin-inline: auto; }
body.home .fg-fold__in > .fg-faq { max-width: 840px; }

body.home .fg-fold__btn {
	order: 22;
	display: block;
	width: fit-content;
	margin: 2.5rem auto 4rem;
	background: transparent;
	border: 1px solid var(--fg-line-2);
	border-radius: 0;
	padding: 1rem 2.2rem;
	cursor: pointer;
	font-family: var(--fg-sans);
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fg-ink);
	transition: background-color .35s var(--fg-ease), border-color .35s var(--fg-ease), color .35s var(--fg-ease);
}
body.home .fg-fold__btn:hover {
	background: var(--fg-plum);
	border-color: var(--fg-plum);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	body.home .fg-fold { transition: none; }
}

/* ---------- the incumbent plugin's hard-coded old purple ------------- */
/* `triumf-wc-adons/lib/woo.php` writes #7d3281 into inline style attributes in
   five places — the "opere de arta florala" note on every product page (1719),
   the Oferta Zilei banner (1610), the coupon badge (1647), the pickup-only
   notice (1586) and a delivery notice (227). Inline styles can only be beaten
   with !important, and that plugin is the incumbent agency's: not ours to edit,
   and any edit would be lost the next time it updates. So they are remapped
   here instead. The :not() keeps a background match from also recolouring text. */

[style*="color:#7d3281"]:not([style*="background-color:#7d3281"]),
[style*="color: #7d3281"]:not([style*="background-color: #7d3281"]) {
	color: var(--fg-plum) !important;
}
[style*="background-color:#7d3281"],
[style*="background-color: #7d3281"] {
	background-color: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
}

/* =========================================================================
   Clause 2: the composition list, lifted out of the description tab and
   shown above the add-to-cart form. Styling only — the words are the
   client's, moved verbatim. Restyled to the system above.
   ========================================================================= */

.fg-composition {
	margin: 0 0 1.5rem;
	padding: 1.3rem 0;
	background: transparent;
	border-top: 1px solid var(--fg-line);
	border-bottom: 1px solid var(--fg-line);
	border-left: 0;
}
.fg-composition p { margin: 0 0 .5rem; font-weight: 500; }
.fg-composition ul { margin: 0; padding-left: 0; list-style: none; }
.fg-composition li {
	margin: 0 0 .35rem;
	line-height: 1.5;
	color: var(--fg-muted);
	display: flex;
	gap: .7rem;
	align-items: baseline;
}
.fg-composition li::before {
	content: "—";
	color: var(--fg-plum);
	flex: none;
}
.fg-composition__heading {
	margin: 0 0 .8rem;
	font-family: var(--fg-sans);
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--fg-muted);
}


/* =========================================================================
   MOTION — the mockup's two effects. assets/motion.js explains the gating.

   The hiding rule is behind `html.fg-motion`, which only JavaScript adds, so
   with no JS every one of these elements is simply visible. The mockup hides
   by default and reveals on intersection; on a live shop that would mean a
   blank page whenever the script fails.
   ========================================================================= */

html.fg-motion .fg-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 1s var(--fg-ease), transform 1s var(--fg-ease);
	will-change: opacity, transform;
}
html.fg-motion .fg-reveal.is-in { opacity: 1; transform: none; }

/* the cards in a row stagger, as the mockup's do */
html.fg-motion li.wc-block-product:nth-child(4n+2) { transition-delay: .07s; }
html.fg-motion li.wc-block-product:nth-child(4n+3) { transition-delay: .14s; }
html.fg-motion li.wc-block-product:nth-child(4n+4) { transition-delay: .21s; }
html.fg-motion .fg-guides-sec article:nth-child(2) { transition-delay: .07s; }
html.fg-motion .fg-guides-sec article:nth-child(3) { transition-delay: .14s; }
html.fg-motion .fg-guides-sec article:nth-child(4) { transition-delay: .21s; }

/* the brand intro */
#fg-intro {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--fg-bg);
	display: grid;
	place-items: center;
	transition: opacity .8s var(--fg-ease), visibility .8s;
}
#fg-intro.is-gone { opacity: 0; visibility: hidden; }
#fg-intro img {
	height: 84px;
	width: auto;
	animation: fgIntroUp 1s var(--fg-ease) both;
}
@keyframes fgIntroUp {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#fg-intro { display: none; }
	html.fg-motion .fg-reveal { opacity: 1; transform: none; transition: none; }
}


/* =========================================================================
   THE TABLET BAND, 601–781px — the filter drawer WooCommerce stops giving you

   MEASURED 25 August, and it is the worst thing on the site at any width:

     ≤600px   overlay button shows, filters in a drawer, grid at y≈590   ✅
     601–781  button hidden, columns still wrap, so the 220px sidebar takes
              a row of its own and THE PRODUCT GRID STARTS AT y≈1,670       ❌
     ≥782px   columns stop wrapping, sidebar beside the grid, y≈596        ✅

   The band is extended to 900 rather than 781, because at 782 the sidebar
   returns and leaves 438px for the grid -- two cards at 203px, which is
   smaller than the phone. Three 298px columns need about 1,200px of window
   once the 220px sidebar and its 56px gutter are taken out, so the breakpoints
   below follow that arithmetic rather than round numbers.

   768 is iPad portrait. A customer there scrolled past sixteen hundred
   pixels of colour and flower checkboxes before reaching a single bouquet.
   Nobody had looked at this band; CLAUDE.md said so in as many words.

   WooCommerce's own breakpoint is `max-width: 600px` for the drawer and
   `min-width: 601px` to undo it. The drawer itself works perfectly at 768 —
   forcing the button visible and clicking it opens the dialog and applies
   `is-overlay-opened`. So this does not build anything: it re-applies
   WooCommerce's OWN mobile rules across the band where it stops applying
   them. Their selectors use :where(), which has zero specificity, so these
   plain ones win without a fight.
   ========================================================================= */

@media (min-width: 601px) and (max-width: 900px) {
	.wc-block-product-filters__open-overlay,
	.wc-block-product-filters__overlay-header,
	.wc-block-product-filters__overlay-footer { display: flex !important; }

	.wc-block-product-filters__overlay {
		position: fixed !important;
		top: var(--top-padding, 0) !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		background-color: transparent !important;
		pointer-events: none !important;
		transition: background-color .5s !important;
	}
	.wc-block-product-filters__overlay-wrapper {
		height: 100% !important;
		width: 100% !important;
	}
	.wc-block-product-filters__overlay-dialog {
		position: absolute !important;
		inset: 0 !important;
		max-height: 100% !important;
		transform: translateY(100vh) !important;
		transition: none !important;
	}
	.wc-block-product-filters__overlay-content {
		overflow-y: auto !important;
		padding: 0 var(--wp--preset--spacing--40) !important;
	}
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(95, 95, 95, .35) !important;
		pointer-events: auto !important;
		z-index: 9999 !important;
	}
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateY(0) !important;
		transition: transform .5s !important;
	}

	/* the legacy wrappers have no drawer of their own, so they stay out of the
	   way in this band rather than stacking above the products */
	#desktoponly .wp-block-woocommerce-filter-wrapper { display: none; }
}

/* ---------- the cards line up ----------------------------------------
   At 390 the two cards in a row ended their price lines at different heights,
   because each card is only as tall as its own title. The card becomes a
   column and the price row is pushed to the bottom, so a row of cards shares
   one baseline whatever the titles do. */
li.wc-block-product {
	display: flex !important;
	flex-direction: column;
}
li.wc-block-product > .pricecartbox,
li.wc-block-product > .wp-block-group.pricecartbox { margin-top: auto !important; }
li.wc-block-product .shipinfo { margin-top: .6rem !important; }


/* =========================================================================
   CONTENT PAGES — contact, despre noi, atelier, the legal pages

   WHY THESE ARE IN SCOPE AT ALL. They were never in the contract, and Paul's
   reasoning on 25 August is the right one: "the contact page (which the
   programaeza button links to) does not look good, and it's accessible from
   the homepage... if we link to them from the homepage I think we do a very
   small QA pass to make them look good." The Evenimente section's
   "Programează o consultație" — the CTA on the highest-margin work he does —
   lands on /contact/. A customer who clicks it and arrives somewhere unstyled
   has just been told the whole redesign is a veneer.

   NOTHING HERE IS A NEW FEATURE. The design system already exists; these
   templates simply never had it applied. No copy is added, moved or removed.
   ========================================================================= */

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .wp-block-post-title {
	/* size comes from the reserved scale at the foot of this file */
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	line-height: 1.08;
	letter-spacing: .005em;
	color: var(--fg-ink) !important;
	text-align: center;
	max-width: none;
	margin: 0 0 2.6rem !important;
	padding: 4rem 0 3rem;
	border-bottom: 1px solid var(--fg-line);
}

/* the body copy gets a readable measure instead of the full content width.

   🔴 `rem`, NOT `ch`, and that is the whole point of this rule. `ch` is the
   width of the "0" glyph IN THE ELEMENT'S OWN FONT, so one declared value
   produced two different columns: the serif headings resolved 68ch to 596.8px
   and the body paragraphs resolved the same 68ch to 652.1px. Both were centred,
   so their left edges landed 28px apart and the page read as two columns that
   nearly line up — which is worse than an obvious break, because it looks like
   a mistake nobody can name.

   Paul found it as *"the headings on the terms and conditions page are left
   aligned while the content is centered"*. That description was of the FIRST
   bug on this rule (a `margin` shorthand killing the auto-centring, fixed at
   `:is(h1..h6)` further down); the 28px was underneath it and only showed once
   the first was fixed. **Two defects, one symptom.**

   40.75rem is 68ch of the body face at its current size, resolved once against
   the root instead of per-element. If the body font-size ever changes, this
   stops being exactly 68 characters — that is the trade, and a shared edge is
   worth more here than an exact measure. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content > :is(p, ul, ol, h2, h3, h4, h5, h6) {
	max-width: 40.75rem;
}
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content :is(h2, h3) {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	margin-top: 3rem !important;
	margin-bottom: 1.1rem !important;
}
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content h2 {
	line-height: 1.16;   /* size: reserved scale */
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content p {
	line-height: 1.85;
	color: var(--fg-ink);
}
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content a:not(.wp-element-button) {
	color: var(--fg-plum) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;   /* his social links are raw URLs */
}

/* his contact photograph is floated right; without this the form tucks under
   it and the page ends with a tall empty column beside a narrow form */
.wpcf7 { clear: both; }
body.page .entry-content > figure.alignright,
body.page .entry-content > .wp-block-image.alignright { margin-bottom: 2.4rem; }

/* ---------- Contact Form 7, to the design system --------------------
   Flat rectangles with a hairline, uppercase letter-spaced labels and the
   site's own ink button. It was white boxes with rounded corners and a plum
   pill, which belonged to no part of this design. */
.wpcf7 .wpcf7-form p { margin: 0 0 1.2rem; max-width: none; }
.wpcf7 label {
	display: block;
	font-family: var(--fg-sans);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-muted);
	margin-bottom: .55rem;
}
.wpcf7 label br { display: none; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	max-width: 640px;
	border: 1px solid var(--fg-line-2);
	border-radius: 0;
	background: var(--fg-surface);
	color: var(--fg-ink);
	font-family: var(--fg-sans);
	font-size: .9rem;
	padding: .85rem .9rem;
	transition: border-color .25s var(--fg-ease);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus { outline: none; border-color: var(--fg-plum); }
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	font-family: var(--fg-sans);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 1.2rem 3rem;
	border: 1px solid var(--fg-ink);
	border-radius: 0;
	background: var(--fg-ink);
	color: #fff;
	cursor: pointer;
	transition: background-color .4s var(--fg-ease), border-color .4s var(--fg-ease);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover { background: var(--fg-plum); border-color: var(--fg-plum); }
.wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--fg-sans);
	font-size: .72rem;
	color: var(--fg-plum);
	margin-top: .4rem;
}
.wpcf7 .wpcf7-response-output {
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	font-family: var(--fg-sans);
	font-size: .82rem;
	padding: 1rem 1.1rem !important;
	margin: 1.6rem 0 0 !important;
}


/* =========================================================================
   BLOG ARTICLES — the four the homepage links to, and the rest

   Same reasoning as the content pages above: the homepage's "Ghiduri și
   sfaturi" section sends customers here, so the page has to look finished.

   THE MEASURE WAS THE WHOLE PROBLEM. Body copy ran the full 1,300px content
   width at 15px — roughly 190 characters a line, which is about two and a
   half times a readable measure and is why the articles read as unfinished
   even though the writing is fine. The title was plum where every other title
   on the site is ink, and the featured image took the entire first screen.
   ========================================================================= */

body.single-post .wp-block-post-title {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	line-height: 1.1;
	letter-spacing: .005em;
	color: var(--fg-ink) !important;
	max-width: 22ch;
	margin: 3.4rem auto 1.6rem !important;
	text-align: center;
	text-wrap: balance;
}

/* the featured image is a lead photograph, not a billboard */
body.single-post .wp-block-post-featured-image {
	max-width: 1100px;
	margin: 0 auto 3.4rem;
}
body.single-post .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* THE MEASURE. Everything in the article gets a readable column; only images,
   galleries and anything the Client deliberately made wide stay full width. */
/* one column in PIXELS, not in ch: 70ch of Inter at 1.02rem and 70ch of
   Cormorant at 2.1rem are different widths, so the headings sat 200px left of
   the paragraphs they belonged to */
body.single-post .entry-content > *:not(figure):not(.alignwide):not(.alignfull):not(.wp-block-image):not(.wp-block-gallery):not(.woocommerce) {
	max-width: 720px;
	margin-inline: auto;
}
/* the product grids he embeds mid-article are NOT prose and must not be
   squeezed into the reading column: four products in a 720px three-column
   grid left three in one row and one orphan in the next, with the titles at
   33.6px. They get the content width and the site's own card. */
body.single-post .entry-content > .woocommerce {
	max-width: 1100px;
	margin: 3.4rem auto;
}
/* 10 Sep 2026, Alexandra: the cards looked off-centre. The button is
   content-box with 9.6px padding and a 1px border on top of width:100%, so
   it ran 21px past its card on every size, and on a phone the two buttons in
   a row touched. border-box puts it exactly under the image. */
body.single-post .entry-content > .woocommerce ul.products li.product .button {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
body.single-post .entry-content > figure,
body.single-post .entry-content > .wp-block-image {
	max-width: 900px;
	margin-inline: auto;
}
body.single-post .entry-content p {
	line-height: 1.85;
	color: var(--fg-ink);
	margin-bottom: 1.4rem;
}
body.single-post .entry-content :is(h2, h3, h4) {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	line-height: 1.16;
	margin-top: 3.2rem !important;
	margin-bottom: 1.1rem !important;
}

body.single-post .entry-content :is(ul, ol) { padding-left: 1.2rem; }
body.single-post .entry-content li {
	line-height: 1.8;
	margin-bottom: .5rem;
}
body.single-post .entry-content a:not(.wp-element-button) {
	color: var(--fg-plum) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.single-post .entry-content :is(figure, .wp-block-image) img { border-radius: 0; }


/* =========================================================================
   THE CATEGORY SIDEBAR AND TOOLBAR — Paul's read, 25 August

   Five things, all of them his eye rather than the diff's:
     "The sort is misaligned"
     "The text on filtre active and pret is very tiny, as is all of the text
      in the left sidebar"
     "The price slider text and bar is enormous and visually clashes"
     "The culori and filtreaza dupa flori filters look different"
     "The cart icon on the products is kind of ugly"

   ⚠️ ON THE TYPE SIZES, AND WHY THIS DELIBERATELY LEAVES THE MOCKUP.
   The mockup's `.filters h4` is .62rem — 9.92px — and page-diff.js was green
   on it. It is still too small to read, because the mockup's sidebar was a
   demo with three short facets and his carries seventeen colours and a
   hundred and four flower types. A measurement can be correct and the result
   still be wrong; he was looking at the real page. Headings go to .72rem and
   labels to .87rem, and the diff pairs are updated to expect it so this reads
   as a decision rather than as drift.
   ========================================================================= */

/* ---------- the count + sort row ---------- */
.wp-block-group.is-content-justification-space-between:has(.wc-block-product-results-count) > * {
	display: flex;
	align-items: center;
	margin: 0;
}
.wc-block-product-sort-select,
.woocommerce-ordering {
	display: flex !important;
	align-items: center;
	gap: .6rem;
}
.wc-block-product-sort-select label,
.woocommerce-ordering label {
	line-height: 1 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
}
.wc-block-product-sort-select select,
.woocommerce-ordering select {
	line-height: 1 !important;
	height: auto !important;
	padding: 0 1.4rem 0 0 !important;
}

/* ---------- sidebar type, readable ---------- */
.wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-filter-wrapper h3,
#desktoponly h3.wp-block-heading {
	font-size: .72rem !important;
	letter-spacing: .18em !important;
}
.wc-block-checkbox-list label,
.wc-block-components-checkbox__label,
.wc-block-product-filter-checkbox-list label,
.wc-block-product-filter-checkbox-list__label,
#desktoponly label {
	font-size: .87rem !important;
	line-height: 1.5 !important;
	color: var(--fg-ink) !important;
}

/* ---------- the two filter lists, made one ----------
   "Culori" is the new product-filter-checkbox-list and renders a filled grey
   square; "Filtrează după flori" is the legacy checkbox-list and renders a
   white bordered box with a count. Same control, two generations, side by
   side in the same column. Both get the hairline square and the plum tick. */
/* 🔴 `:not([hidden])` IS LOAD-BEARING. WooCommerce collapses a long facet by
   putting the HTML `hidden` attribute on the overflow items, and `display:
   flex !important` beat it — so every one of the 86 flower filters rendered
   and "Arată încă 65" did nothing. Paul caught it within minutes. */
.wc-block-checkbox-list li:not([hidden]),
.wc-block-product-filter-checkbox-list__item:not([hidden]) {
	display: flex !important;
	align-items: center;
	gap: .6rem;
	padding: .28rem 0 !important;
	margin: 0 !important;
	list-style: none;
}
.wc-block-checkbox-list input[type="checkbox"],
.wc-block-product-filter-checkbox-list__input,
#desktoponly input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 14px !important;
	height: 14px !important;
	min-width: 14px;
	margin: 0 !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	background: var(--fg-surface) !important;
	position: relative;
	cursor: pointer;
	transition: border-color .2s var(--fg-ease), background-color .2s var(--fg-ease);
	flex: none;
}
.wc-block-checkbox-list input[type="checkbox"]:hover,
.wc-block-product-filter-checkbox-list__input:hover,
#desktoponly input[type="checkbox"]:hover { border-color: var(--fg-plum) !important; }
.wc-block-checkbox-list input[type="checkbox"]:checked,
.wc-block-product-filter-checkbox-list__input:checked,
#desktoponly input[type="checkbox"]:checked {
	background: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
}
.wc-block-checkbox-list input[type="checkbox"]:checked::after,
.wc-block-product-filter-checkbox-list__input:checked::after,
#desktoponly input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px; top: 1px;
	width: 4px; height: 8px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
[hidden] { display: none !important; }

/* WooCommerce paints its own tick on top of ours in the new block */
.wc-block-product-filter-checkbox-list__mark,
.wc-block-checkbox-list__mark { display: none !important; }
/* the count sits right, faint, as the mockup's .cnt does */
.wc-block-checkbox-list-count,
.wc-block-product-filter-checkbox-list__count {
	margin-left: auto;
	font-family: var(--fg-sans);
	font-size: .72rem !important;
	color: var(--fg-faint) !important;
}

/* ---------- the price slider ----------
   20px type and a heavy bar in a 220px column. It is a control, not a
   headline. */
.wc-block-product-filter-price-slider,
.wp-block-woocommerce-product-filter-price { font-size: .8rem !important; }
.wc-block-product-filter-price-slider__range {
	height: 2px !important;
	accent-color: var(--fg-plum);
}
.wc-block-product-filter-price-slider__range::-webkit-slider-thumb {
	width: 13px; height: 13px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-ink);
	border-radius: 50%;
}
.wp-block-woocommerce-product-filter-price input[type="text"],
.wp-block-woocommerce-product-filter-price input[type="number"],
.wc-block-product-filter-price-slider__range-text-input input {
	font-size: .78rem !important;
	padding: .45rem .55rem !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	background: var(--fg-surface) !important;
	color: var(--fg-ink) !important;
	height: auto !important;
	min-height: 0 !important;
}

/* ---------- the card's cart button ----------
   The mockup's cards have no button at all: the whole card is the target.
   Removing a call to action is the Client's decision, not ours, so it stays
   and stops shouting instead -- no box, a plum glyph that darkens on hover. */
.prodtplbutton,
li.wc-block-product .prodtplbutton {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: .2rem !important;
	box-shadow: none !important;
	opacity: 1 !important;
}
.prodtplbutton img,
a.prodtplbutton img,
li.wc-block-product .prodtplbutton img {
	width: 26px !important;
	height: 26px !important;
	filter: brightness(0) !important;
	opacity: .75 !important;
	transition: opacity .3s var(--fg-ease), filter .3s var(--fg-ease);
}
.prodtplbutton:hover img,
a.prodtplbutton:hover img,
li.wc-block-product:hover .prodtplbutton img {
	opacity: 1 !important;
	filter: brightness(0) saturate(100%) invert(17%) sepia(38%) saturate(1615%) hue-rotate(285deg) brightness(95%) contrast(95%) !important;
}
.pricecartbox { background: transparent !important; }

/* ---------- the sidebar, larger again (second pass) ----------
   .72rem headings and .87rem labels were still hard to read at the real
   column width. Paul: "increase the font size on the left side bar (all of
   it), even more. it's hard to read." */
.wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-filter-wrapper h3,
#desktoponly h3.wp-block-heading {
	letter-spacing: .16em !important;
}
.wc-block-checkbox-list label,
.wc-block-components-checkbox__label,
.wc-block-product-filter-checkbox-list label,
.wc-block-product-filter-checkbox-list__label,
#desktoponly label,
#desktoponly .wc-block-product-filter-checkbox-list__text {
	font-size: .95rem !important;
	line-height: 1.55 !important;
}
.wc-block-checkbox-list-count,
.wc-block-product-filter-checkbox-list__count { font-size: .82rem !important; }
.wp-block-woocommerce-product-filter-price,
.wc-block-product-filter-price-slider { font-size: .88rem !important; }
.wp-block-woocommerce-product-filter-price input[type="text"],
.wp-block-woocommerce-product-filter-price input[type="number"],
.wc-block-product-filter-price-slider__range-text-input input { font-size: .86rem !important; }
#desktoponly .wc-block-product-filter-clear-button,
#desktoponly .wp-block-button__link,
#desktoponly .show-more a,
#desktoponly .show-less a,
#desktoponly button { font-size: .82rem !important; }

/* the stray rule under each date in "Mai multe articole" */
body.single-post .wp-block-query li.wp-block-post > .wp-block-group {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}


/* =========================================================================
   THE THINGS PAUL FOUND BY OPENING THE PAGES, 25 August

   "the products are totally misaligned and randomly arranged everywhere they
    appear... we also need to style them like the actual products that appear
    on the home page and category pages"
   "the 'Mai multe articole' section is just a vertical stack with enormous
    text"
   "a bunch of black bars as links (ugly, looks nothing like the style of the
    rest of the site)"
   "match the typography of everything to the homepage"

   All four were on pages I had screenshotted and not read. The rule in this
   repo is to look at the rendered page; a screenshot nobody opens is not
   looking at it.
   ========================================================================= */

/* ---------- product grids embedded in articles ---------- */
/* WooCommerce clearfixes its product list with `ul.products::before` and
   `::after`. In a FLOAT layout they are invisible table cells; in a GRID they
   become grid items and take the first and last cells, which is why the four
   products rendered as an empty slot, three products, then one orphan on the
   next row. */
body.single-post .entry-content .woocommerce ul.products::before,
body.single-post .entry-content .woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none !important; content: none !important; }

body.single-post .entry-content .woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 40px 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
body.single-post .entry-content .woocommerce li.product {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-align: center;
}
body.single-post .entry-content .woocommerce li.product a img,
body.single-post .entry-content .woocommerce li.product img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1.1rem !important;
	background: #fff;
}
/* the card title — the site's card is uppercase Inter at .72rem, not a 33.6px
   serif headline */
body.single-post .entry-content .woocommerce li.product :is(h2, h3, .woocommerce-loop-product__title) {
	font-family: var(--fg-sans) !important;
	font-size: .72rem !important;
	font-weight: 500 !important;
	letter-spacing: .14em !important;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	color: var(--fg-ink) !important;
	margin: 0 0 .5rem !important;
	padding: 0 !important;
}
body.single-post .entry-content .woocommerce li.product .price {
	font-family: var(--fg-serif) !important;
	font-size: 1.35rem !important;
	font-style: italic !important;
	color: var(--fg-ink) !important;
	margin: 0 0 .9rem !important;
}
body.single-post .entry-content .woocommerce li.product .price del { font-size: .9rem; color: var(--fg-faint) !important; font-style: normal; }
body.single-post .entry-content .woocommerce li.product .price ins { text-decoration: none; }
/* the black "PERSONALIZEAZA" bar becomes the site's ghost button */
body.single-post .entry-content .woocommerce li.product .button,
body.single-post .entry-content .woocommerce li.product a.add_to_cart_button {
	margin-top: auto !important;
	width: 100%;
	background: transparent !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	color: var(--fg-ink) !important;
	font-family: var(--fg-sans);
	font-size: .6rem !important;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .8rem .6rem !important;
	transition: background-color .35s var(--fg-ease), border-color .35s var(--fg-ease), color .35s var(--fg-ease);
}
body.single-post .entry-content .woocommerce li.product .button:hover {
	background: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
	color: #fff !important;
}
@media (max-width: 900px) {
	body.single-post .entry-content .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
}

/* ---------- "Mai multe articole" ----------
   A vertical stack of 49px serif titles with the date floated right. It
   becomes the homepage guides grid's skeleton: a hairline row of four, serif
   titles at the guides' own 17.92px, the date quiet underneath. */
body.single-post .wp-block-query > .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 !important;
	border-top: 1px solid var(--fg-line);
	border-bottom: 1px solid var(--fg-line);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
body.single-post .wp-block-query li.wp-block-post {
	margin: 0 !important;
	padding: 1.8rem 1.6rem !important;
	border-left: 1px solid var(--fg-line);
	transition: background-color .4s var(--fg-ease);
}
body.single-post .wp-block-query li.wp-block-post:last-child { border-right: 1px solid var(--fg-line); }
body.single-post .wp-block-query li.wp-block-post:hover { background: rgba(154, 123, 69, .05); }
body.single-post .wp-block-query li.wp-block-post > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	gap: .9rem;
	justify-content: flex-start !important;
}
body.single-post .wp-block-query .wp-block-post-title,
body.single-post .wp-block-query .wp-block-post-title a {
	font-family: var(--fg-serif) !important;
	/* size: reserved scale */
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: .005em !important;
	text-align: left !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	margin: 0 !important;
	max-width: none;
}
body.single-post .wp-block-query .wp-block-post-date,
body.single-post .wp-block-query .wp-block-post-date time {
	font-family: var(--fg-sans) !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	color: var(--fg-plum) !important;
	margin: 0 !important;
}
@media (max-width: 900px) {
	body.single-post .wp-block-query > .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.single-post .wp-block-query li.wp-block-post:nth-child(2) { border-right: 1px solid var(--fg-line); }
	body.single-post .wp-block-query li.wp-block-post:nth-child(-n+2) { border-bottom: 1px solid var(--fg-line); }
}
@media (max-width: 520px) {
	body.single-post .wp-block-query > .wp-block-post-template { grid-template-columns: 1fr; }
	body.single-post .wp-block-query li.wp-block-post { border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); }
}

/* ---------- the black bars ----------
   /despre-noi/ carries about thirty category links, and theme.json's button
   style renders every one as a solid ink slab. Thirty of them stacked is the
   loudest thing on a page whose whole subject is craft. They become the same
   quiet outline tag the category pages use. */
body.page:not(.home) .entry-content :is(.wp-block-button__link, .wp-element-button, .wp-block-button a) {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	color: var(--fg-ink) !important;
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	padding: .6rem 1rem !important;
	line-height: 1.5;
	transition: background-color .3s var(--fg-ease), border-color .3s var(--fg-ease), color .3s var(--fg-ease);
}
body.page:not(.home) .entry-content :is(.wp-block-button__link, .wp-element-button, .wp-block-button a):hover {
	background: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
	color: #fff !important;
}
body.page:not(.home) .entry-content .wp-block-buttons {
	gap: .5rem !important;
	margin-bottom: 1.6rem;
}

/* ---------- content-page typography, matched to the homepage ---------- */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content p {
	font-size: .95rem;
	margin-bottom: 1.3rem;
}
body.page:not(.home) .entry-content > figure.wp-block-image { margin-bottom: 2rem; }


/* ---------- the two filter lists, matched to the pixel ----------
   Paul, 25 August: "the font sizes and spacing of box to word next to it are
   still different between the 2 filter groups, match them EXACTLY visually...
   They're also spaced differently vertically."

   He is right, and the cause is structural rather than typographic. In the
   NEW block the checkbox is a SIBLING of the label inside the <li>, so the
   li's own 9.6px gap sets the distance to the word. In the LEGACY block the
   checkbox is INSIDE the label, so the li's gap does nothing and the label's
   own 12px gap applies instead — and its `inline-flex` adds three pixels of
   row height on top. Two different distances and two different row heights
   from the same declarations.

   Both are pinned here explicitly rather than left to inherit. */
#desktoponly .wc-block-checkbox-list li:not([hidden]),
#desktoponly .wc-block-product-filter-checkbox-list__item {
	min-height: 30px;
	padding: 4.48px 0 !important;
	gap: 10px !important;
	align-items: center !important;
}
#desktoponly .wc-block-checkbox-list label,
#desktoponly .wc-block-product-filter-checkbox-list__label,
#desktoponly .wc-block-components-checkbox__label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	line-height: 20.88px !important;
	font-size: .95rem !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
}
/* the legacy list wraps its text in a span; the new one does not */
#desktoponly .wc-block-checkbox-list__label,
#desktoponly .wc-block-product-filter-checkbox-list__text {
	font-size: .95rem !important;
	line-height: 20.88px !important;
	padding: 0 !important;
	margin: 0 !important;
}


/* =========================================================================
   THE TWO FILTER LISTS, PINNED — the authoritative block

   ⚠️ READ THE CLASS NAMES BEFORE EDITING. Three earlier attempts missed
   because the selectors were plausible and wrong:

     the COLOUR list rows are  div.wc-block-product-filter-checkbox-list__item
     inside                    div.wp-block-woocommerce-product-filter-checkbox-list
     the FLOWER list rows are  li  (no class at all)
     inside                    ul.wc-block-checkbox-list

   `.wc-block-product-filter-checkbox-list label` matches NOTHING on this
   page, because no ancestor carries that exact class — the block prefix is
   `wp-block-woocommerce-`. Every rule written against it was inert and the
   two lists kept their different metrics while the CSS looked correct.

   Measured targets, taken from the rendered page: row 34px, box 15px, 10px
   from box to word, label 15.2px on a 20.88px line.
   ========================================================================= */

/* the flower list is a flex column with an 8px row-gap; the colour list is a
   plain block. That gap alone made the pitch 48px against 40px, which is what
   Paul saw as "spaced differently vertically" after the row heights already
   matched. */
#desktoponly ul.wc-block-checkbox-list {
	display: block !important;
	gap: 0 !important;
	row-gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

#desktoponly .wc-block-product-filter-checkbox-list__item,
#desktoponly ul.wc-block-checkbox-list li:not([hidden]) {
	display: flex !important;
	align-items: center !important;
	min-height: 34px !important;
	padding: 3px 0 !important;
	margin: 0 !important;
	gap: 10px !important;
	list-style: none;
}
#desktoponly .wc-block-product-filter-checkbox-list__item label,
#desktoponly ul.wc-block-checkbox-list li label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 1 auto;
	font-family: var(--fg-sans) !important;
	font-size: .95rem !important;
	line-height: 20.88px !important;
	letter-spacing: .01em !important;
	color: var(--fg-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}
/* the flower list wraps its words in a span; the colour list does not */
#desktoponly .wc-block-product-filter-checkbox-list__item label span:not(.wc-block-checkbox-list-count),
#desktoponly ul.wc-block-checkbox-list li label span:not(.wc-block-checkbox-list-count) {
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
#desktoponly .wc-block-product-filter-checkbox-list__item input[type="checkbox"],
#desktoponly ul.wc-block-checkbox-list li input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	margin: 0 !important;
	flex: none !important;
}
#desktoponly .wc-block-checkbox-list-count,
#desktoponly .wc-block-product-filter-checkbox-list__count {
	margin-left: auto !important;
	font-size: .82rem !important;
	color: var(--fg-faint) !important;
}


/* ---------- /despre-noi/ and the other content pages, finishing ----------
   HIS BODY COPY IS ONE PARAGRAPH WITH <br> BREAKS, not separate paragraphs,
   so there is nothing between the sentences and the whole story reads as a
   single grey block. Restructuring his markup is not ours to do; giving the
   breaks air is a display decision and changes no content. */
body.page:not(.home) .entry-content p br {
	display: block;
	content: "";
	margin-bottom: .85rem;
}
body.page:not(.home) .entry-content h2,
body.page:not(.home) .entry-content h2 strong,
body.page:not(.home) .entry-content h2 b {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	letter-spacing: .005em !important;
}
/* his section sub-headings sit directly on their tag lists */
body.page:not(.home) .entry-content h3 { margin-bottom: .9rem !important; }


/* ---------- related products, and the grid rule that was too broad ------
   The three-column rule was written for the CATEGORY archive and applied to
   every product grid on the site, including "Produse similare", which the
   block itself declares as `columns-4`. Four products in three columns leaves
   one orphaned on its own row. Paul: "we surface 4 items, but orphan 1 of
   them -- don't do that."

   The block's own column count wins wherever it states one. */
.wc-block-product-template.columns-4,
.wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 40px 30px !important;
}
.wc-block-product-template.columns-2,
.wc-block-product-template__responsive.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 1200px) {
	.wc-block-product-template.columns-4,
	.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* its heading was 13.6px — smaller than the body copy above it. It is a
   section head and gets the section head's scale. */
.single-product .related h2,
.single-product .up-sells h2,
.single-product .wp-block-heading:has(+ .wp-block-woocommerce-product-template),
.single-product h2.wp-block-heading.has-accent-3-color {
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
	font-weight: 400 !important;
	letter-spacing: .005em !important;
	line-height: 1.16 !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	text-align: center;
	margin: 4rem 0 2.2rem !important;
}


/* =========================================================================
   THE REST OF THE PRODUCT PAGE — Paul's read, 25 August

   "This section does NOT match the typography of the rest of the page"
   (the gift add-ons), "those green checkmarks are ugly... none of it feels
   'premium' at all", "in the description underneath the product, the font
   and colours do NOT match the home page typography styling at all".

   All of it is the Client's own content from his two plugins. None of it is
   removed; it is set in the site's type.
   ========================================================================= */

/* ---------- "Adaugă o extra-bucurie la comandă" (woobt) ---------- */
.single-product .woobt_before_text,
.single-product .woobt-before-text {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	margin: 1.9rem 0 .9rem !important;
}
.single-product .woobt-products { border-top: 1px solid var(--fg-line); }
.single-product .woobt-product {
	display: flex !important;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--fg-line);
	padding: 1rem .2rem !important;
	margin: 0 !important;
	background: transparent !important;
	transition: padding-left .25s var(--fg-ease);
}
.single-product .woobt-product:hover { padding-left: .7rem !important; }
.single-product .woobt-choose { flex: none; margin: 0 !important; }
/* 🔴 THE ADD-ON CHECKBOX IS NATIVE, AND NOTHING HERE MAY DRAW A TICK.
   *(27 August 2026. Marina photographed it on a phone; Paul reproduced it.)*

   This block used to set `appearance: none` and hand-draw a white tick with
   `:checked::after`. A LATER block -- `.woobt-products .woobt-checkbox`, further
   down this file -- sets `appearance: auto !important` and `accent-color`,
   because the native control is the only version that survives iOS Safari and
   that block exists to fix his iPhone.

   BOTH MATCHED THE SAME ELEMENT. The later `!important` restored the native
   checkbox, which draws its own tick, and this block's `::after` had nothing
   competing with it, so it drew a second one on top. **Two ticks in one box**,
   and neither rule was wrong on its own.

   Measured before the fix: `appearance` computed `checkbox` while
   `::after` content computed `""`. That pair IS the bug, and it is the tell to
   look for next time -- a custom pseudo-element surviving on a control whose
   appearance was handed back to the browser.

   All four checkboxes carry `.woobt-checkbox`, so the later block styles every
   one of them and nothing here is needed. Sizing, colour and cursor all live
   there now. **Do not restyle these here.**                                   */
.single-product .woobt-choose input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}
.single-product .woobt-thumb { flex: none; width: 42px; }
.single-product .woobt-thumb img { width: 42px; height: 42px; object-fit: contain; mix-blend-mode: multiply; }
.single-product .woobt-title,
.single-product .woobt-title a {
	font-family: var(--fg-sans) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--fg-ink) !important;
	text-decoration: none !important;
	line-height: 1.5;
}
.single-product .woobt-qty-num { display: none; }
.single-product .woobt-price {
	margin-left: auto;
	font-family: var(--fg-serif) !important;
	font-size: 1.05rem !important;
	font-style: italic !important;
	color: var(--fg-plum) !important;
	white-space: nowrap;
}
.single-product .woobt-price del { font-size: .82rem; color: var(--fg-faint) !important; font-style: normal; margin-right: .35rem; }
.single-product .woobt-price ins { text-decoration: none; }
.single-product .woobt-wrap > a[style] {
	float: none !important;
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--fg-sans) !important;
	font-size: .64rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-plum) !important;
	border-bottom: 1px solid var(--fg-line-2);
	padding-bottom: 3px;
}
.single-product .woobt-wrap img.emoji { display: none; }

/* ---------- the "Info:" note and the tick list ----------
   The ticks were bright green ✔ glyphs in italic — the only green on a cream
   and plum site. His words stay; the marker becomes the hairline dash the
   mockup uses for its own point lists. */
.single-product .greencheck {
	font-family: var(--fg-sans) !important;
	font-size: .8rem !important;
	font-style: normal !important;
	line-height: 1.7;
	color: var(--fg-muted) !important;
	display: flex;
	align-items: baseline;
	gap: .6rem;
	padding: .1rem 0;
}
.single-product .greencheck::before {
	content: "—";
	color: var(--fg-plum);
	flex: none;
}
.single-product .greencheck img.emoji { display: none; }
.single-product form.cart > b > i,
.single-product form.cart > br + b { font-style: normal; }
.single-product form.cart img.emoji { display: none; }

/* ---------- the description and the tabs ---------- */
.single-product .woocommerce-tabs .wc-tab,
.single-product .woocommerce-Tabs-panel {
	font-family: var(--fg-sans);
	font-size: .95rem;
	line-height: 1.85;
	color: var(--fg-ink);
	max-width: 74ch;
}
.single-product .woocommerce-tabs .wc-tab p { margin-bottom: 1.2rem; }
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs .wc-tabs {
	list-style: none;
	padding: 0 !important;
	margin: 0 0 1.6rem !important;
	border-bottom: 1px solid var(--fg-line);
}
.single-product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce-tabs .wc-tabs li {
	display: inline-block;
	margin: 0 1.6rem 0 0 !important;
	padding: 0 0 .8rem !important;
	background: transparent !important;
	border: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs .wc-tabs li a {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	text-decoration: none !important;
	padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--fg-ink) !important; }

/* his "Bine de știut" panel, in the site's type */
.single-product h3.gtntitle {
	font-family: var(--fg-serif) !important;
	font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	margin: 0 0 1.6rem !important;
}
.single-product .good-to-know .box h4 {
	font-family: var(--fg-serif) !important;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
}
.single-product .good-to-know .box {
	font-family: var(--fg-sans) !important;
	font-size: .82rem !important;
	line-height: 1.75 !important;
	color: var(--fg-muted) !important;
}
.single-product .good-to-know .box b,
.single-product .good-to-know .box strong { color: var(--fg-ink) !important; }
.single-product span.localit { font-size: .74rem !important; line-height: 1.6 !important; color: var(--fg-faint) !important; }


/* =========================================================================
   THE BUYING COLUMN, TO THE MOCKUP

   Paul: the mockup's version "looks and feels MUCH more premium", and
   separately: "the emojis on the clone... premium?" Both fair. What follows
   is the list of differences, closed one at a time.
   ========================================================================= */

/* 1. NO EMOJI IN THE BUYING COLUMN. WordPress rewrites 🌿 and ❤️ as <img
   class="emoji">, and there were four of them between the price and the
   footer — a sprig of foliage, a red heart, and two more in his promise
   list. The mockup uses one typographic glyph, ✿, and nothing else. His
   words all stay; the picture-characters go. */
.single-product .entry-summary img.emoji,
.single-product form.cart img.emoji,
.single-product .fg-pdp-note img.emoji,
.single-product .woobt-wrap img.emoji,
.single-product .summary img.emoji { display: none !important; }

/* 2. THE ADD-TO-CART BUTTON IS THE WHOLE WIDTH. It was a 194px box sitting
   beside a quantity spinner — the least confident element on the page, at the
   moment of the decision. The mockup's is a full-width ink block. */
.single-product form.cart .quantity {
	display: inline-flex !important;
	margin: 0 0 .9rem !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	background: var(--fg-surface) !important;
}
.single-product form.cart .quantity input.qty {
	border: 0 !important;
	background: transparent !important;
	font-family: var(--fg-sans);
	font-size: .85rem;
	width: 3rem;
	text-align: center;
}
.single-product form.cart .quantity button {
	background: transparent !important;
	border: 0 !important;
	color: var(--fg-muted) !important;
	font-size: 1rem;
	padding: 0 .8rem !important;
}
.single-product .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: var(--fg-ink) !important;
	border: 1px solid var(--fg-ink) !important;
	border-radius: 0 !important;
	font-family: var(--fg-sans);
	font-size: .68rem !important;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background-color .4s var(--fg-ease), border-color .4s var(--fg-ease);
}
.single-product .single_add_to_cart_button:hover {
	background: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
}

/* 3. THE GIFTS ARE TILES, NOT A LEDGER. The mockup lays them out two across
   in bordered cells that light plum when chosen (.gifts / .gift in its
   style.css). A full-width row per gift reads like an invoice. */
.single-product .woobt-products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px !important;
	border-top: 0 !important;
}
.single-product .woobt-product {
	border: 1px solid var(--fg-line) !important;
	border-bottom: 1px solid var(--fg-line) !important;
	background: var(--fg-surface) !important;
	padding: .85rem 1rem !important;
	gap: .7rem !important;
	transition: border-color .25s var(--fg-ease), background-color .25s var(--fg-ease);
}
.single-product .woobt-product:hover {
	padding-left: 1rem !important;
	border-color: var(--fg-plum) !important;
}
.single-product .woobt-product:has(input:checked) {
	border-color: var(--fg-plum) !important;
	background: #F0E8EC !important;
}
.single-product .woobt-thumb { width: 30px; }
.single-product .woobt-thumb img { width: 30px; height: 30px; }
.single-product .woobt-title,
.single-product .woobt-title a {
	font-size: .64rem !important;
	letter-spacing: .08em !important;
	line-height: 1.45 !important;
	overflow-wrap: anywhere;
}
.single-product .woobt-price { font-size: 1rem !important; }
/* the tiles share a row height whatever the name length */
.single-product .woobt-product { align-items: center; min-height: 74px; }
/* the plugin prints <del>old</del><ins>new</ins> stacked, which collided */
.single-product .woobt-price-ori { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.single-product .woobt-price del { display: inline; margin: 0 !important; }
.single-product .woobt-price .screen-reader-text { display: none !important; }
/* the gifts link, and the gap under it */
.single-product .woobt-wrap > a[style] { margin: 1rem 0 0 !important; }
.single-product .woobt-wrap br { display: none; }
@media (max-width: 620px) {
	.single-product .woobt-products { grid-template-columns: 1fr; }
}

/* 4. THE RUNNING TOTAL sits immediately above the button now (product.js
   moves it), so it reads as the sum of everything chosen above it. */
.single-product #wapo-total-price-table { margin: 2.2rem 0 1.6rem !important; }

/* 5. THE REASSURANCE BLOCK. An "Info" sentence and five promises, previously
   loose text nodes and <br>s in the form. Set as one quiet block under the
   button, which is where the mockup puts its single 🔒 line. */
.single-product .fg-pdp-note {
	margin-top: 1.4rem;
	font-family: var(--fg-sans);
	font-size: .78rem;
	line-height: 1.75;
	color: var(--fg-muted);
}
.single-product .fg-pdp-note br { display: none; }
.single-product .fg-pdp-note b i,
.single-product .fg-pdp-note i { font-style: normal; font-weight: 600; color: var(--fg-ink); }
.single-product .fg-pdp-note .greencheck {
	font-size: .76rem !important;
	padding: .05rem 0;
}
.single-product .fg-pdp-note .greencheck::before { font-size: .8rem; opacity: .7; }


/* ---------- one rule between blocks, not two ----------
   The short description carries a border top AND bottom (the mockup's .desc),
   and the composition block that follows carried its own top border, so two
   hairlines sat 23px apart with nothing between them. Paul: "what are these
   double line breaks... One line break between each element, standardized
   spacing, please." */
.single-product .fg-composition {
	border-top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	margin-bottom: 1.6rem !important;
	padding-bottom: 1.6rem !important;
}
.single-product .wp-block-post-excerpt,
.single-product .woocommerce-product-details__short-description {
	margin: 1.6rem 0 !important;
}

/* ---------- the promise list, quieter ----------
   Paul: "I also don't like the icons you added next to each list item. Let's
   make it more subtle and more premium." The dash goes; the lines carry
   themselves on leading and colour alone.

   ⚠️ THE EXCLAMATION MARKS ARE THE CLIENT'S OWN COPY -- "Livrare rapida!",
   "Plati securizate!" -- and are not ours to delete. Raised with Ștefan in
   asks.md instead, alongside the diacritics pass. */
.single-product .fg-pdp-note .greencheck {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: .78rem !important;
	line-height: 2 !important;
	color: var(--fg-muted) !important;
}
.single-product .fg-pdp-note .greencheck::before { content: none !important; }
.single-product .fg-pdp-note {
	border-top: 1px solid var(--fg-line);
	padding-top: 1.4rem;
	margin-top: 1.8rem;
}
.single-product .fg-pdp-note > br:first-child { display: none; }


/* ---------- the description block below the buying column ----------
   His closing paragraph rendered in plum across the full 1300px. It is body
   copy, so it gets the body's colour and the reading measure the rest of the
   page uses. */
.single-product .woocommerce-tabs .wc-tab p,
.single-product .woocommerce-Tabs-panel p,
.single-product .fg-after-tabs > p {
	color: var(--fg-muted) !important;
	max-width: 74ch;
}
.single-product .woocommerce-tabs .wc-tab p a { color: var(--fg-plum) !important; }
/* the tab label had 40px of air under it and nothing in between */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs .wc-tabs { margin-bottom: 1.2rem !important; }
.single-product .woocommerce-tabs { margin-top: 3rem; }


/* ---------- the footer sits on the page's axis ----------
   Paul: "the footer content is NOT centered." Measured: the column block sat
   at x=70 and the trust bar at x=50, both 1300px wide, so the bar's centre
   was 700 against the page's 720. The columns carry `margin: 0 20px` from
   the block editor and the bar carries none; they were never on the same
   axis as each other, let alone the page's. Both are pinned to one. */
.mastfooter .wp-block-columns.fg-foot-cols,
.mastfooter .fg-foot-trust {
	max-width: 1300px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

/* ---------- "Livrare azi" and "Coș" sit on the nav's baseline ----------
   Measured: the nav links' text starts at y=83.5 and the two right-hand items
   at y=81.0 — two and a half pixels high, which is exactly enough to read as
   a different row. `align-items: center` was already on the container; the
   cause is line-height, 28.16px against 11.2px, so the two boxes centre on
   the same axis while their TEXT does not. */
.masthead .fg-deliver-chip,
.masthead .fg-cart-link,
.masthead .fg-cart,
.masthead .wp-block-group.is-content-justification-right > * {
	/* the nav link's box is 41px tall (28.16px line + its own padding) and the
	   chip's was 11.2px, so the two boxes centred on the same axis while their
	   TEXT sat 2.5px apart. Matching the box height makes the text match. */
	line-height: 28.16px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.masthead .wp-block-group.is-content-justification-right { align-items: center !important; }


/* =========================================================================
   THE PRODUCT DESCRIPTION, EVERY VARIANT IT COMES IN

   Census of all 1,342 published descriptions, run 25 August rather than
   guessed at, because Paul asked for exactly that: "pull maybe 20 random
   products and see what content they have underneath the descriere, and see
   what possible items exist."

       796 (59%)  a bullet list
       230 (17%)  bold runs
        59 ( 4%)  headings — H2 and H3, 40 distinct titles, the commonest
                  being "Caracteristici principale", "Pentru ce ocazii este
                  potrivit", "Stil", "Întrebări frecvente"
        29 ( 2%)  markup pasted out of an AI chat window
        15 ( 1%)  bare <div> wrappers
        14 ( 1%)  inline styles
         2         blockquote
         1         numbered list

   Every one of those is styled below. The inline styles are neutralised for
   colour and font only -- his own emphasis and spacing survive.
   ========================================================================= */

.single-product .woocommerce-Tabs-panel,
.single-product .woocommerce-tabs .wc-tab,
.single-product .fg-composition {
	font-family: var(--fg-sans);
	font-size: .95rem;
	line-height: 1.85;
	color: var(--fg-muted);
}
.single-product .woocommerce-Tabs-panel :is(h1, h2, h3, h4, h5, h6),
.single-product .fg-composition :is(h2, h3, h4) {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	letter-spacing: .005em !important;
	line-height: 1.16 !important;
	color: var(--fg-ink) !important;
	text-transform: none !important;
	margin: 2.6rem 0 1rem !important;
	max-width: 74ch;
}
.single-product .woocommerce-Tabs-panel h2 { font-size: clamp(1.4rem, 2vw, 1.75rem) !important; }
.single-product .woocommerce-Tabs-panel h3 { font-size: 1.2rem !important; }
.single-product .woocommerce-Tabs-panel h4 { font-size: 1.05rem !important; }

/* the bullet list — 59% of the catalogue — as the mockup's point list */
.single-product .woocommerce-Tabs-panel ul,
.single-product .fg-composition ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 1rem 0 1.4rem !important;
	max-width: 74ch;
}
.single-product .woocommerce-Tabs-panel ul li,
.single-product .fg-composition ul li {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: .18rem 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--fg-muted);
}
.single-product .woocommerce-Tabs-panel ul li::before,
.single-product .fg-composition ul li::before {
	content: "—";
	color: var(--fg-plum);
	flex: none;
}
.single-product .woocommerce-Tabs-panel ol { padding-left: 1.2rem; max-width: 74ch; }
.single-product .woocommerce-Tabs-panel ol li { padding: .18rem 0; }

/* bold runs — 17% — his emphasis, in ink rather than a second colour */
.single-product .woocommerce-Tabs-panel :is(strong, b),
.single-product .fg-composition :is(strong, b) {
	font-weight: 600 !important;
	color: var(--fg-ink) !important;
}
.single-product .woocommerce-Tabs-panel blockquote {
	border-left: 1px solid var(--fg-line-2);
	padding-left: 1.4rem;
	margin: 1.6rem 0;
	font-family: var(--fg-serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--fg-muted);
}
/* pasted inline styles: colour and family only, so his spacing survives */
.single-product .woocommerce-Tabs-panel [style],
.single-product .fg-composition [style] {
	color: inherit !important;
	font-family: inherit !important;
	background: none !important;
}
.single-product .woocommerce-Tabs-panel [style] :is(strong, b) { color: var(--fg-ink) !important; }
.single-product .woocommerce-Tabs-panel img { max-width: 100%; height: auto; margin: 1.4rem 0; }
.single-product .woocommerce-Tabs-panel table {
	width: 100%; max-width: 74ch; border-collapse: collapse; margin: 1.4rem 0;
	font-size: .88rem;
}
.single-product .woocommerce-Tabs-panel :is(td, th) {
	border-bottom: 1px solid var(--fg-line);
	padding: .7rem .4rem;
	text-align: left;
}

/* ---------- "Bine de știut" as the mockup's accordion ---------- */
.single-product .fg-gtk__acc {
	max-width: 74ch;
	margin: 0;
	border-top: 1px solid var(--fg-line);
}
.single-product .fg-gtk__acc details { border-bottom: 1px solid var(--fg-line); }
.single-product .fg-gtk__acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
	padding: 1.05rem .1rem;
	font-family: var(--fg-serif);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--fg-ink);
}
.single-product .fg-gtk__acc summary::-webkit-details-marker { display: none; }
.single-product .fg-gtk__acc summary::after {
	content: "+";
	font-family: var(--fg-sans);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--fg-faint);
	transition: transform .3s var(--fg-ease), color .3s var(--fg-ease);
}
.single-product .fg-gtk__acc details[open] summary::after { transform: rotate(45deg); color: var(--fg-plum); }
.single-product .fg-gtk__a { padding: 0 .1rem 1.4rem; }
.single-product .fg-gtk__a :is(p, div) {
	font-family: var(--fg-sans) !important;
	font-size: .85rem !important;
	line-height: 1.8 !important;
	color: var(--fg-muted) !important;
	margin: 0 0 .8rem !important;
}
.single-product .fg-gtk__a b,
.single-product .fg-gtk__a strong { color: var(--fg-ink) !important; }
.single-product .fg-gtk__a span.localit { font-size: .76rem !important; color: var(--fg-faint) !important; }
.single-product h3.gtntitle { margin-bottom: 1.2rem !important; }

/* the two right-hand masthead items sit on the nav's text baseline */
.masthead .fg-deliver-chip,
.masthead .fg-cart-link,
/* ⚠️ NOT `.masthead .…` — the chip is NOT inside .masthead. Its ancestry is
   P.fg-deliver-chip < .wp-block-group.is-content-justification-right <
   .wp-block-group.alignfull, and every rule scoped to .masthead was inert.
   Third attempt at this alignment; the first two failed on the selector, not
   on the arithmetic. */
.fg-deliver-chip,
.fg-cart-link,
.wp-block-group.is-content-justification-right > .fg-deliver-chip,
.wp-block-group.is-content-justification-right > .fg-cart-link {
	/* a TRANSFORM, not padding. Padding made the row taller, which pushed the
	   nav down by the same amount and kept the two exactly as misaligned as
	   before. The nav link's text sits 2px lower inside its own 41px box; this
	   is an optical nudge and changes no layout. */
	transform: translateY(2px);
}


/* the Client's closing line about hand-made work sits in a bare <div> that is
   a direct child of .woocommerce-tabs, so neither the .wc-tab nor the panel
   rules reached it: plum, at the full 1300px. It is body copy. */
.single-product .woocommerce-tabs > div:not(.wc-tab):not([class*="panel"]),
.single-product .woocommerce-tabs > .woocommerce-Tabs-panel ~ div {
	font-family: var(--fg-sans);
	font-size: .95rem;
	line-height: 1.85;
	color: var(--fg-muted) !important;
	max-width: 74ch;
	margin: 1.6rem 0;
}
.single-product .woocommerce-tabs > div a { color: var(--fg-plum) !important; }


/* =========================================================================
   THE PRODUCT PAGE TYPE SCALE

   Paul, 25 August: "can you look at ALL of the text elements that exist on
   product pages, and make sure that each and every single text type.. makes
   sense?... We also have SO many font sizes and colours on the product pages."

   AUDITED, not guessed. Walking every text node on a product page and
   bucketing by computed family/size/weight/colour/tracking/transform gave
   **29 distinct text styles and 24 different font sizes** on a single page:
   43.2, 31.68, 30.4, 24, 16.8, 16, 15.2, 15, 13.6, 13.12, 12.48, 12.16,
   11.52, 10.88, 10.56, 10.24, 9.92, 9.6 — several of them a fifth of a pixel
   apart, which is not a decision anybody made.

   His example is the sharpest one: "Descriere" rendered as CORMORANT at
   9.92px in sentence case, directly above "Am ales pentru acest buchet:" at
   Inter 15.2px — a tab label wearing a heading's typeface at a footnote's
   size, four times smaller than the line under it.

   ── THE SCALE. Nine roles, taken from the mockup's own style.css. ────────

     display   Cormorant 400   clamp(2rem,3vw,2.9rem)  ink      product title
     section   Cormorant 400   1.9rem                  ink      section heads
     price     Cormorant 400i  1.9rem                  ink      the price
     total     Cormorant 400i  1.5rem                  ink      the sum
     body      Inter 400       .95rem                  muted    prose, lists
     note      Cormorant 400i  .85rem                  muted    sub-lines
     LABEL     Inter 600       .62rem  .2em  UPPER     muted    group headings
     kicker    Inter 500       .66rem  .3em  UPPER     muted    eyebrows
     micro     Inter 400       .72rem                  faint    small print

   Colour is the palette and nothing else: ink #20180F, muted #8B8072, faint
   #B7AD9C, plum #5C2A46 for accents and prices, white on ink.
   ========================================================================= */

/* ---- LABEL: every group heading in the buying column is the same thing ---- */
.single-product .yith-wapo-addon .wapo-addon-title,
.single-product .woobt_before_text,
.single-product .woobt-before-text,
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs .wc-tabs li a,
.single-product .fg-composition__heading {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	font-style: normal !important;
	letter-spacing: .2em !important;
	line-height: 1.6 !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
}
/* the active tab is the only one that goes to ink */
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--fg-ink) !important; }

/* ---- BODY: one size, one colour, for every run of prose on the page ---- */
.single-product .wp-block-post-excerpt,
.single-product .wp-block-post-excerpt p,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p,
.single-product .woocommerce-Tabs-panel,
.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li,
.single-product .woocommerce-tabs > div,
.single-product .fg-composition,
.single-product .fg-composition p,
.single-product .fg-composition li,
.single-product .fg-gtk__a p,
.single-product .fg-gtk__a div {
	font-family: var(--fg-sans) !important;
	font-size: .95rem !important;
	font-weight: 400 !important;
	line-height: 1.85 !important;
	color: var(--fg-muted) !important;
	letter-spacing: normal !important;
}
/* his emphasis is the one weight change body copy gets */
.single-product .woocommerce-Tabs-panel :is(b, strong),
.single-product .fg-composition :is(b, strong),
.single-product .fg-gtk__a :is(b, strong),
.single-product .wp-block-post-excerpt :is(b, strong) {
	font-weight: 600 !important;
	font-size: inherit !important;
	color: var(--fg-ink) !important;
}

/* ---- MICRO: small print is one size and one colour ---- */
.single-product .wc-block-components-product-sku,
.single-product .fg-pdp-note,
.single-product .fg-pdp-note .greencheck,
.single-product span.localit,
.single-product span.localit u,
.single-product .fg-gtk__a span.localit {
	font-family: var(--fg-sans) !important;
	font-size: .72rem !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	letter-spacing: normal !important;
	color: var(--fg-faint) !important;
}
.single-product .fg-pdp-note b i,
.single-product .fg-pdp-note i { font-size: inherit !important; color: var(--fg-muted) !important; }

/* ---- SECTION heads: one size for every serif heading below the fold ---- */
.single-product h3.gtntitle,
.single-product .related h2,
.single-product h2.wp-block-heading.has-accent-3-color,
.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--fg-serif) !important;
	font-size: 1.9rem !important;
	font-weight: 400 !important;
	line-height: 1.16 !important;
	letter-spacing: .005em !important;
	color: var(--fg-ink) !important;
	text-transform: none !important;
}
.single-product .woocommerce-Tabs-panel h3,
.single-product .fg-gtk__acc summary { font-size: 1.15rem !important; }

/* ---- the two near-duplicates that were never decisions ---- */
/* 13.12 vs 13.6 — the struck-through price and the size sub-line */
.single-product .option-price del,
.single-product .woobt-price del,
.single-product .price del { font-size: .85rem !important; }
/* 10.24 vs 10.56 — breadcrumb, gift names, the gifts link */
.single-product .woocommerce-breadcrumb,
.single-product .wc-block-breadcrumbs,
.single-product .woobt-wrap > a[style] { font-size: .66rem !important; letter-spacing: .16em !important; }
.single-product .woobt-title,
.single-product .woobt-title a { font-size: .66rem !important; }
/* the card titles under "Produse similare" are the site's card title */
.single-product .related li h3,
.single-product .wc-block-product-template h3,
.single-product .wc-block-product-template h3 a {
	font-family: var(--fg-sans) !important;
	font-size: .72rem !important;
	font-weight: 500 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--fg-ink) !important;
}


/* ---------- the stragglers the scale did not reach ----------
   Three of them lost on SPECIFICITY rather than on being unwritten, which is
   why "Descriere" kept its serif while taking the label's size: the label
   rule set .62rem at (0,2,0) and the heading rule set the family at (0,2,1),
   so one won the size and the other won the typeface. */
.single-product .fg-composition h2.fg-composition__heading,
.single-product h2.fg-composition__heading {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	margin: 0 0 .9rem !important;
}
/* the closing line was Inter 16px in PLUM — body copy in an accent colour */
.single-product .woocommerce-tabs > div,
.single-product .woocommerce-tabs > div p {
	font-size: .95rem !important;
	color: var(--fg-muted) !important;
}
/* WooCommerce's own 15px/ink leaks into the quantity label and the panel */
.single-product .quantity label,
.single-product .quantity .screen-reader-text,
.single-product .good-to-know,
.single-product .fg-gtk__a {
	font-size: .95rem !important;
	color: var(--fg-muted) !important;
}
/* the "Bine de știut" row headings are section-scale serif, not 18.4px/500 */
.single-product .fg-gtk__acc summary {
	font-family: var(--fg-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
}
/* one italic size for every price accent: the size delta and the gift price */
.single-product .option-price,
.single-product .woobt-price,
.single-product .woobt-price ins {
	font-size: 1.05rem !important;
	font-style: italic !important;
	color: var(--fg-plum) !important;
}


/* =========================================================================
   CONTACT AND DESPRE NOI — the redesign

   Paul: "Right now it's just a wall of ugly text, with a random photo of a
   bouquet to the side." · "the telephone button is not clickable, neither is
   the email, or the address. We do this well in the footer." · "the raw links
   to the socials is also ugly." · "the font colour on the despre noi page.
   Black? I don't see black basically anywhere else for prose."
   ========================================================================= */

/* prose is muted everywhere else on the site; it was ink on these pages */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content p,
body.page:not(.home) .entry-content li {
	color: var(--fg-muted) !important;
	font-size: .95rem !important;
	line-height: 1.85 !important;
}
body.page:not(.home) .entry-content :is(b, strong) { color: var(--fg-ink) !important; font-weight: 600 !important; }

/* ---------- the contact rows: label over value, and every one a link ----- */
.fg-contact__rows {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 1.6rem;
}
.fg-contact__row {
	display: grid;
	grid-template-columns: 22px 1fr;
	grid-template-areas: "ico k" "ico v";
	column-gap: .9rem;
	row-gap: .15rem;
	align-items: start;
}
.fg-contact__row .fg-ico {
	grid-area: ico;
	width: 16px;
	height: 16px;
	margin-top: .55rem;
	fill: var(--fg-plum);
	opacity: .75;
}
.fg-contact__k {
	grid-area: k;
	font-family: var(--fg-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fg-muted);
}
.fg-contact__v,
a.fg-contact__v {
	grid-area: v;
	font-family: var(--fg-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5;
	color: var(--fg-ink) !important;
	text-decoration: none !important;
	transition: color .25s var(--fg-ease);
	overflow-wrap: anywhere;
}
a.fg-contact__v:hover { color: var(--fg-plum) !important; }
.fg-contact__legal {
	font-family: var(--fg-sans);
	font-size: .72rem !important;
	line-height: 1.7 !important;
	color: var(--fg-faint) !important;
	margin: 0 0 2.2rem !important;
	max-width: 46ch;
}

/* the social links become two quiet tags rather than two printed URLs */
/* each social link is its own paragraph in his markup, so they stacked. The
   aside lays them out in a row instead. */
.fg-contact__aside:has(.fg-contact__socialrow) { }
.fg-contact__socialrow { display: contents; }
.fg-contact__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.fg-contact__aside > .fg-contact__socialrow { display: inline-flex; }
.fg-contact__socials { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .2rem; }
a.fg-contact__social {
	display: inline-flex;
	align-items: center;
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-ink) !important;
	text-decoration: none !important;
	border: 1px solid var(--fg-line-2);
	padding: .55rem 1.1rem;
	transition: background-color .3s var(--fg-ease), border-color .3s var(--fg-ease), color .3s var(--fg-ease);
}
a.fg-contact__social:hover {
	background: var(--fg-plum);
	border-color: var(--fg-plum);
	color: #fff !important;
}

/* ---------- Despre noi ---------- */
/* the purple banner is the OLD design's title card and it prints "Despre noi"
   in script directly under the page's own <h1> saying the same words. It is
   the Client's image, so it is hidden rather than deleted and it is in
   asks.md — one line here brings it back. */
/* superseded by the shape test in assets/page-contact.js, which catches the
   one on /atelier/ too -- they are all differently named. */

/* the right-hand column: the photograph, its caption and the tag list were
   three different alignments stacked on each other */
body.page .entry-content .wp-block-column > figure { margin: 0 0 .9rem !important; }
body.page .entry-content figcaption {
	font-family: var(--fg-sans) !important;
	font-size: .7rem !important;
	letter-spacing: .06em;
	color: var(--fg-faint) !important;
	text-align: left !important;
	margin: .7rem 0 0 !important;
}
body.page .entry-content .wp-block-column h3 {
	font-family: var(--fg-serif) !important;
	font-size: 1.3rem !important;
	font-weight: 400 !important;
	text-align: left !important;
	margin: 2.4rem 0 1rem !important;
}
body.page .entry-content .wp-block-column .wp-block-buttons { justify-content: flex-start !important; }


/* the contact page's two columns: the form leads, the details sit beside it */
.fg-contact {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 72px;
	align-items: start;
	margin-top: 1rem;
}
.fg-contact__aside { padding-top: .2rem; }
.fg-contact__aside h2,
.fg-contact__aside h3 {
	font-family: var(--fg-serif) !important;
	font-size: 1.3rem !important;
	font-weight: 400 !important;
	color: var(--fg-ink) !important;
	margin: 0 0 1.4rem !important;
}
.fg-contact__aside h3 { margin-top: 2.6rem !important; }
.fg-contact__main > p { max-width: 56ch; }
@media (max-width: 900px) {
	.fg-contact { grid-template-columns: 1fr; gap: 40px; }
	.fg-contact__aside { order: -1; }
}


/* ---------- the sale badge and the struck price on a product page --------
   Paul, 25 August, on `coronite-scoala`: "The discount bubble is UGLY, and
   the strikethrough is not aligned in the middle of the struck out price."

   THE BUBBLE is WooCommerce's default `.onsale` — `border-radius: 100%`, so a
   103x47 ELLIPSE in solid plum over the corner of the photograph. The rest of
   the site marks a sale with the flat plum tag the category cards use, so it
   uses that.

   THE STRIKE sat high because the <del> and the number inside it are
   DIFFERENT SIZES: the del computes at 17.6px while its child renders at
   21.6px, and the line is drawn at the parent's metrics. Both are pinned to
   one size, which puts the rule through the middle of the digits. */
.single-product span.onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.6 !important;
	border-radius: 0 !important;
	background: var(--fg-plum) !important;
	color: #fff !important;
	font-family: var(--fg-sans) !important;
	font-size: .58rem !important;
	font-weight: 500 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	padding: 5px 11px !important;
}

.single-product .summary del,
.single-product .entry-summary del,
.single-product .wp-block-woocommerce-product-price del,
.single-product p.price del,
.single-product .summary del *,
.single-product .entry-summary del *,
.single-product .wp-block-woocommerce-product-price del *,
.single-product p.price del * {
	font-family: var(--fg-sans) !important;
	font-size: 1.1rem !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	color: var(--fg-faint) !important;
	text-decoration-line: line-through !important;
	text-decoration-thickness: 1px !important;
	text-decoration-color: var(--fg-faint) !important;
	vertical-align: baseline !important;
}
.single-product .summary del { margin-right: .5rem !important; }
.single-product .summary ins,
.single-product .wp-block-woocommerce-product-price ins,
.single-product p.price ins { text-decoration: none !important; background: none !important; }
.single-product .summary .screen-reader-text,
.single-product .wp-block-woocommerce-product-price .screen-reader-text { display: none !important; }

/* the last size outlier on the page: his closing line at Inter 16px in plum */
.single-product .woocommerce-tabs > div,
.single-product .woocommerce-tabs > div p,
.single-product .woocommerce-tabs > div span {
	font-size: .95rem !important;
	color: var(--fg-muted) !important;
}


/* the struck price was reading as a link, and the gift tiles stacked their
   old and new price on top of each other */
.single-product .summary del,
.single-product .summary del *,
.single-product .entry-summary del,
.single-product .entry-summary del * { color: var(--fg-faint) !important; }

.single-product .woobt-price-ori,
.single-product .woobt-price {
	display: inline-flex !important;
	align-items: baseline;
	gap: .4rem;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.single-product .woobt-price del,
.single-product .woobt-price del * {
	font-family: var(--fg-sans) !important;
	font-size: .8rem !important;
	font-style: normal !important;
	color: var(--fg-faint) !important;
	text-decoration-line: line-through !important;
	text-decoration-thickness: 1px !important;
	margin: 0 !important;
	display: inline !important;
}
.single-product .woobt-price ins,
.single-product .woobt-price ins * { text-decoration: none !important; background: none !important; }
.single-product .woobt-price .screen-reader-text { display: none !important; }


/* =========================================================================
   THE RESERVED SCALE — five sizes, four colours

   Everywhere EXCEPT the homepage. Paul, 25 August: "I think reserved is
   better, and Stefan largely reacted to just the homepage in the mockup."

   🔴 THE MEASUREMENT THAT SETTLED IT. The mockup is not a type system:

       mockup homepage   55 styles   30 sizes   16 colours
       mockup product    41 styles   20 sizes   11 colours
       mockup category   37 styles   18 sizes   11 colours
       build product     23 styles   13 sizes    5 colours

   The build was already tighter than the design it was ported from, and
   `mockup-diff 39/0/0` never saw any of it — it checks 39 chosen elements, so
   a page can match perfectly and still run thirty sizes.

   The mockup's AUTHORED css is disciplined: .62 / .66 / .68 / .72 / .95 /
   1.05 / 1.35 / 1.9rem. The thirty sizes are elements nobody styled,
   inheriting browser defaults. So this scale is what the design intended;
   the sprawl is what leaked.

     display  2.7rem   serif        page and product titles
     large    1.9rem   serif        price, section heads, the total
     medium   1.15rem  serif        accordion rows, price deltas, sub-heads
     body     .95rem   sans         all prose, lists, option names
     label    .7rem    sans caps    every uppercase label, breadcrumb,
                                    button, and all small print

   Four colours: ink, muted, plum, white. `faint` folds into muted — a fourth
   grey is a decision nobody can see.

   ⚠️ `:not(.home)` IS REPEATED THREE TIMES ON PURPOSE. This block has to beat
   every earlier rule in this file, and several of those are shapes like
   `body.page:not(.home):not(.woocommerce-cart) .wp-block-post-title`, which
   scores (0,3,1). Repeating a :not() is the plainest way to raise specificity
   without inventing a wrapper class or reaching for a second !important — it
   changes nothing about what the selector MATCHES, only how loudly it says
   it. If a rule below still loses, the answer is to delete the older rule
   rather than add a fourth.
   ========================================================================= */

html body:not(.home):not(.home):not(.home) {
	--t-display: 2.7rem;
	--t-large:   1.9rem;
	--t-medium:  1.15rem;
	--t-body:    .95rem;
	--t-label:   .7rem;
}

/* ---- display ---- */
html body:not(.home):not(.home):not(.home) .wp-block-post-title,
html body:not(.home):not(.home):not(.home) h1.product_title,
html body:not(.home):not(.home):not(.home) .fg-cat-head .wp-block-query-title,
html body:not(.home):not(.home):not(.home) .wp-block-query-title {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-display) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.1 !important;
	letter-spacing: .005em !important;
	color: var(--fg-ink) !important;
	text-transform: none !important;
}

/* ---- large: section heads, the price, the total ---- */
html body:not(.home):not(.home):not(.home) .entry-content h2,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel h2,
html body:not(.home):not(.home):not(.home) h3.gtntitle,
html body:not(.home):not(.home):not(.home) .related h2,
html body:not(.home):not(.home):not(.home) h2.wp-block-heading,
html body:not(.home):not(.home):not(.home) .fg-catseo__title,
html body:not(.home):not(.home):not(.home) .fg-info__title,
html body:not(.home):not(.home):not(.home) #fg-guides .fg-title,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-product-price,
html body:not(.home):not(.home):not(.home) p.price,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-product-price .woocommerce-Price-amount,
html body:not(.home):not(.home):not(.home) p.price .woocommerce-Price-amount,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table tr.wapo-total-order th,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table tr.wapo-total-order td {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-large) !important;
	font-weight: 400 !important;
	line-height: 1.16 !important;
	letter-spacing: .005em !important;
	color: var(--fg-ink) !important;
	text-transform: none !important;
}
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-product-price,
html body:not(.home):not(.home):not(.home) p.price,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table tr.wapo-total-order th,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table tr.wapo-total-order td { font-style: italic !important; }

/* ---- medium: sub-heads, accordion rows, price accents ---- */
html body:not(.home):not(.home):not(.home) .entry-content h3,
html body:not(.home):not(.home):not(.home) .entry-content h4,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel h3,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel h4,
html body:not(.home):not(.home):not(.home) .fg-gtk__acc summary,
html body:not(.home):not(.home):not(.home) .fg-catseo__acc summary,
html body:not(.home):not(.home):not(.home) .good-to-know .box h4,
html body:not(.home):not(.home):not(.home) .fg-contact__aside h2,
html body:not(.home):not(.home):not(.home) .fg-contact__aside h3,
html body:not(.home):not(.home):not(.home) .option-price,
html body:not(.home):not(.home):not(.home) .woobt-price,
html body:not(.home):not(.home):not(.home) .woobt-price ins,
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price,
html body:not(.home):not(.home):not(.home) li.wc-block-product .price,
html body:not(.home):not(.home):not(.home) li.product .price {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-medium) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
}
html body:not(.home):not(.home):not(.home) .option-price,
html body:not(.home):not(.home):not(.home) .woobt-price,
html body:not(.home):not(.home):not(.home) .woobt-price ins,
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price,
html body:not(.home):not(.home):not(.home) li.wc-block-product .price,
html body:not(.home):not(.home):not(.home) li.product .price { font-style: italic !important; color: var(--fg-plum) !important; }
html body:not(.home):not(.home):not(.home) .fg-gtk__acc summary,
html body:not(.home):not(.home):not(.home) .fg-catseo__acc summary,
html body:not(.home):not(.home):not(.home) .good-to-know .box h4,
html body:not(.home):not(.home):not(.home) .entry-content h3,
html body:not(.home):not(.home):not(.home) .entry-content h4 { color: var(--fg-ink) !important; }

/* ---- body: everything that is a sentence ---- */
html body:not(.home):not(.home):not(.home) .entry-content p,
html body:not(.home):not(.home):not(.home) .entry-content li,
html body:not(.home):not(.home):not(.home) .entry-content td,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel p,
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel li,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs > div,
html body:not(.home):not(.home):not(.home) .fg-composition,
html body:not(.home):not(.home):not(.home) .fg-composition p,
html body:not(.home):not(.home):not(.home) .fg-composition li,
html body:not(.home):not(.home):not(.home) .fg-gtk__a p,
html body:not(.home):not(.home):not(.home) .fg-gtk__a div,
html body:not(.home):not(.home):not(.home) .fg-catseo__a p,
html body:not(.home):not(.home):not(.home) .fg-catseo__a li,
html body:not(.home):not(.home):not(.home) .fg-catseo__lead,
html body:not(.home):not(.home):not(.home) .wp-block-post-excerpt,
html body:not(.home):not(.home):not(.home) .wp-block-post-excerpt p,
html body:not(.home):not(.home):not(.home) .woocommerce-product-details__short-description,
html body:not(.home):not(.home):not(.home) .woocommerce-product-details__short-description p,
html body:not(.home):not(.home):not(.home) .yith-wapo-option .yith-wapo-label,
html body:not(.home):not(.home):not(.home) .yith-wapo-option .description,
html body:not(.home):not(.home):not(.home) .woobt-title,
html body:not(.home):not(.home):not(.home) .woobt-title a,
html body:not(.home):not(.home):not(.home) #desktoponly label,
html body:not(.home):not(.home):not(.home) .wpcf7 input,
html body:not(.home):not(.home):not(.home) .wpcf7 textarea,
html body:not(.home):not(.home):not(.home) .fg-contact__v,
html body:not(.home):not(.home):not(.home) a.fg-contact__v {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-body) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.8 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-muted) !important;
}
html body:not(.home):not(.home):not(.home) .fg-contact__v,
html body:not(.home):not(.home):not(.home) a.fg-contact__v,
html body:not(.home):not(.home):not(.home) .yith-wapo-option .yith-wapo-label,
html body:not(.home):not(.home):not(.home) #desktoponly label,
html body:not(.home):not(.home):not(.home) .wpcf7 input,
html body:not(.home):not(.home):not(.home) .wpcf7 textarea { color: var(--fg-ink) !important; }
html body:not(.home):not(.home):not(.home) .entry-content :is(b, strong),
html body:not(.home):not(.home):not(.home) .woocommerce-Tabs-panel :is(b, strong),
html body:not(.home):not(.home):not(.home) .fg-gtk__a :is(b, strong) {
	font-size: inherit !important;
	font-weight: 600 !important;
	color: var(--fg-ink) !important;
}

/* ---- label: one size for every uppercase run and all small print ---- */
html body:not(.home):not(.home):not(.home) .fg-kicker,
html body:not(.home):not(.home):not(.home) .fg-cat-kicker,
html body:not(.home):not(.home):not(.home) .woocommerce-breadcrumb,
html body:not(.home):not(.home):not(.home) .wc-block-breadcrumbs,
html body:not(.home):not(.home):not(.home) .wapo-addon-title,
html body:not(.home):not(.home):not(.home) .woobt_before_text,
html body:not(.home):not(.home):not(.home) .woobt-before-text,
html body:not(.home):not(.home):not(.home) .fg-composition__heading,
html body:not(.home):not(.home):not(.home) h2.fg-composition__heading,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs ul.tabs li a,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs li a,
html body:not(.home):not(.home):not(.home) .fg-pdp-ship,
html body:not(.home):not(.home):not(.home) .wc-block-components-product-sku,
html body:not(.home):not(.home):not(.home) .fg-pdp-note,
html body:not(.home):not(.home):not(.home) .fg-pdp-note .greencheck,
html body:not(.home):not(.home):not(.home) span.localit,
html body:not(.home):not(.home):not(.home) .fg-contact__k,
html body:not(.home):not(.home):not(.home) .fg-contact__legal,
html body:not(.home):not(.home):not(.home) a.fg-contact__social,
html body:not(.home):not(.home):not(.home) .wpcf7 label,
html body:not(.home):not(.home):not(.home) .single_add_to_cart_button,
html body:not(.home):not(.home):not(.home) .wpcf7 input[type="submit"],
html body:not(.home):not(.home):not(.home) .fg-btn,
html body:not(.home):not(.home):not(.home) .wp-block-button__link,
html body:not(.home):not(.home):not(.home) .wc-block-product-results-count,
html body:not(.home):not(.home):not(.home) .woocommerce-result-count,
html body:not(.home):not(.home):not(.home) .wc-block-product-sort-select select,
html body:not(.home):not(.home):not(.home) .woocommerce-ordering select,
html body:not(.home):not(.home):not(.home) .wc-block-product-sort-select label,
html body:not(.home):not(.home):not(.home) .woocommerce-ordering label,
html body:not(.home):not(.home):not(.home) #desktoponly h3.wp-block-heading,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-product-filters h3,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-filter-wrapper h3,
html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title,
html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title a,
/* ⚠️ h2 as well as h3. The SEARCH RESULTS template emits the card title as an
   `h2`, where the category template emits `h3` -- so on `/?s=` the title fell
   through to the reserved scale and rendered at **43.2px Cormorant Garamond**
   while the same card on a category page is .72rem uppercase sans. Paul, 26
   Aug: "the product name font is MASSIVE", on desktop and mobile.
   `.wc-block-product .wp-block-post-title` is (0,2,0) and the scale is (0,5,2);
   both `!important`, so the card rule never stood a chance. Same lesson as
   `CLAUDE.md` finding 2 — `!important` does not beat `!important`. */
html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title,
html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title a,
html body:not(.home):not(.home):not(.home) li.product .woocommerce-loop-product__title,
html body:not(.home):not(.home):not(.home) .wc-block-components-product-sale-badge,
html body:not(.home):not(.home):not(.home) span.onsale,
html body:not(.home):not(.home):not(.home) .shipinfo p,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table th,
html body:not(.home):not(.home):not(.home) #wapo-total-price-table td,
html body:not(.home):not(.home):not(.home) .fg-guide__a,
html body:not(.home):not(.home):not(.home) #fg-guides .article__info::after,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-date {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.7 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
}
/* the ones that are small print rather than a label keep the size and lose
   the tracking and the capitals */
html body:not(.home):not(.home):not(.home) .fg-pdp-note,
html body:not(.home):not(.home):not(.home) .fg-pdp-note .greencheck,
html body:not(.home):not(.home):not(.home) span.localit,
html body:not(.home):not(.home):not(.home) .fg-contact__legal {
	letter-spacing: normal !important;
	text-transform: none !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
}
/* the ones on ink or plum keep their own colour */
html body:not(.home):not(.home):not(.home) .single_add_to_cart_button,
html body:not(.home):not(.home):not(.home) .wpcf7 input[type="submit"],
html body:not(.home):not(.home):not(.home) .wc-block-components-product-sale-badge,
html body:not(.home):not(.home):not(.home) span.onsale { color: #fff !important; }
html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title,
html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title a,
html body:not(.home):not(.home):not(.home) li.product .woocommerce-loop-product__title,
html body:not(.home):not(.home):not(.home) .fg-contact__k,
html body:not(.home):not(.home):not(.home) a.fg-contact__social,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs ul.tabs li.active a { color: var(--fg-ink) !important; }

/* ---- FOUR COLOURS. `faint` folds into `muted` off the homepage. ---- */
html body:not(.home):not(.home):not(.home) { --fg-faint: #8B8072; }


/* ---------- the category tag list at the foot of the page ----------
   Paul: "all those ugly buttons at the bottom... they look terrible." They
   were solid plum pills — twenty-three of them in a block, the loudest thing
   on a page that ends in fine print. Same quiet outline tag the rest of the
   site uses for a link that is not a call to action. */
html body:not(.home):not(.home):not(.home) .customsubcats a,
html body:not(.home):not(.home):not(.home) .customsubcats li a {
	display: inline-block;
	background: transparent !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	color: var(--fg-ink) !important;
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	line-height: 1.6 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: .55rem 1rem !important;
	transition: background-color .3s var(--fg-ease), border-color .3s var(--fg-ease), color .3s var(--fg-ease);
}
html body:not(.home):not(.home):not(.home) .customsubcats a:hover {
	background: var(--fg-plum) !important;
	border-color: var(--fg-plum) !important;
	color: #fff !important;
}
html body:not(.home):not(.home):not(.home) .customsubcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 3.4rem 0 0;
}
html body:not(.home):not(.home):not(.home) .customsubcats li { margin: 0 !important; }

/* ---------- the category article accordion, at the mockup's proportions ---
   The mockup gives this band a kicker, a serif italic title and rows with
   real air (`.faq.gtk` / `.info-acc` in its style.css). The port had 12px
   rows packed tight against each other. */
html body:not(.home):not(.home):not(.home) .fg-catseo__acc summary {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-medium) !important;
	font-weight: 400 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	padding: 1.5rem .1rem !important;
}
html body:not(.home):not(.home):not(.home) .fg-catseo__acc summary::after { font-size: 1.2rem; }
html body:not(.home):not(.home):not(.home) .fg-catseo__a { padding: 0 .1rem 2rem !important; }

/* ---------- the last stragglers, named ---------- */
html body:not(.home):not(.home):not(.home) .woocommerce-tabs > div,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs > div p,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs > div span,
html body:not(.home):not(.home):not(.home) .fg-catseo__lead,
html body:not(.home):not(.home):not(.home) .customsubcats,
html body:not(.home):not(.home):not(.home) #fg-guides .fg-sub,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title a {
	font-size: var(--t-body) !important;
	color: var(--fg-muted) !important;
}
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title a {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-medium) !important;
	color: var(--fg-ink) !important;
	line-height: 1.35 !important;
}
html body:not(.home):not(.home):not(.home) .woobt-price del,
html body:not(.home):not(.home):not(.home) .woobt-price del *,
html body:not(.home):not(.home):not(.home) .summary del,
html body:not(.home):not(.home):not(.home) .summary del *,
html body:not(.home):not(.home):not(.home) span.localit,
html body:not(.home):not(.home):not(.home) span.localit u,
html body:not(.home):not(.home):not(.home) .woobt-wrap > a[style],
html body:not(.home):not(.home):not(.home) .wc-block-checkbox-list__show-more,
html body:not(.home):not(.home):not(.home) #desktoponly .show-more a,
html body:not(.home):not(.home):not(.home) #desktoponly button,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-date,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-date time {
	font-size: var(--t-label) !important;
	color: var(--fg-muted) !important;
}
html body:not(.home):not(.home):not(.home) #desktoponly h3.wp-block-heading,
html body:not(.home):not(.home):not(.home) .entry-content h3,
html body:not(.home):not(.home):not(.home) .fg-contact__aside h2 { font-size: var(--t-medium) !important; }


/* the final outliers, each one named and each one folded into the scale */
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs-wrapper > div,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs-wrapper > div p,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs-wrapper > div a,
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs-wrapper > div span {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-body) !important;
	line-height: 1.85 !important;
	color: var(--fg-muted) !important;
}
html body:not(.home):not(.home):not(.home) .woocommerce-tabs .wc-tabs-wrapper > div a { color: var(--fg-plum) !important; }

/* the sidebar filter headings and the "Filtre active" label are one label */
html body:not(.home):not(.home):not(.home) #desktoponly h3,
html body:not(.home):not(.home):not(.home) #desktoponly h3.wp-block-heading,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-product-filters h3,
html body:not(.home):not(.home):not(.home) .wp-block-woocommerce-filter-wrapper h3 {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 600 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
}
/* the card price and the card title on a category grid */
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price,
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price * {
	font-size: var(--t-medium) !important;
}
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo p,
html body:not(.home):not(.home):not(.home) .wc-block-components-product-sale-badge { font-size: var(--t-label) !important; }

/* the article's related-post titles and dates */
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-title a,
html body:not(.home):not(.home):not(.home) .wp-block-query h3 {
	font-size: var(--t-medium) !important;
	line-height: 1.35 !important;
}
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-date,
html body:not(.home):not(.home):not(.home) .wp-block-query .wp-block-post-date *,
html body:not(.home):not(.home):not(.home) .wp-block-query time { font-size: var(--t-label) !important; }


/* ---------- three things the scale swallowed that it should not have ----

   Caught by page-diff after the scale went in, which is exactly what that
   file is for. The rest of its 19 differences ARE the scale — 10.24, 10.56,
   11.52 and 9.28 all folding into one label size — and are recorded as
   intentional in scripts/page-diff.js. These three were not.
*/

/* 1. THE CATEGORY GRID went from three columns to four, because the
      `columns-4` rule written for "Produse similare" also matches the
      category template. Scope it away from the archive. */
html body.tax-product_cat .wc-block-product-template.columns-4,
html body.tax-product_cat .wc-block-product-template__responsive.columns-4,
html body.post-type-archive-product .wc-block-product-template.columns-4 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
	html body.tax-product_cat .wc-block-product-template.columns-4,
	html body.tax-product_cat .wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* 2. THE CARD PRICE went plum. On a single product the price is the hero and
      plum is right; on a GRID of twenty cards it turns every price into an
      accent and the page hums. The mockup sets card prices in ink. */
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price,
html body:not(.home):not(.home):not(.home) li.wc-block-product .wc-block-components-product-price *,
html body:not(.home):not(.home):not(.home) li.wc-block-product .price,
html body:not(.home):not(.home):not(.home) li.product .price {
	color: var(--fg-ink) !important;
}

/* 3. THE SIZE SELECTOR'S NAME lost its capitals to the body role. "STANDARD /
      PREMIUM / DELUXE" being uppercase and letter-spaced is what makes that
      block read as a CONTROL rather than as a paragraph — it is the last
      thing touched before add-to-cart and it has to look operable. */
html body:not(.home):not(.home):not(.home) .yith-wapo-option .yith-wapo-label {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 500 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--fg-ink) !important;
	line-height: 1.6 !important;
}
html body:not(.home):not(.home):not(.home) .yith-wapo-option .option-price {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* the last two real ones page-diff still reports */
html body:not(.home):not(.home):not(.home) .wp-block-post-title,
html body:not(.home):not(.home):not(.home) h1.product_title { line-height: 1.08 !important; }


/* ---------- the one category shape: hairline, kicker, standfirst, content --
   Four buckets across his 88 categories -- 29 articles, 10 blocks of prose,
   30 one-liners, 19 empty -- and until now each ended the page differently.
   The shape is identical for all of them; only the content slot changes. */
html body:not(.home):not(.home):not(.home) .fg-catseo__head {
	border-top: 1px solid var(--fg-line);
	padding-top: 2.6rem;
	margin-bottom: 1.2rem;
	max-width: 74ch;
}
html body:not(.home):not(.home):not(.home) .fg-catseo__kicker {
	display: block;
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 600 !important;
	letter-spacing: .3em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	margin-bottom: 1rem;
}
html body:not(.home):not(.home):not(.home) .fg-catseo__stand {
	font-family: var(--fg-serif) !important;
	font-size: var(--t-medium) !important;
	font-style: italic !important;
	line-height: 1.6 !important;
	color: var(--fg-muted) !important;
	margin: 0 0 1.4rem !important;
	max-width: 62ch;
}
html body:not(.home):not(.home):not(.home) .fg-catseo__body {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-body) !important;
	line-height: 1.85 !important;
	color: var(--fg-muted) !important;
	margin: 0 0 1.1rem !important;
	max-width: 74ch;
}
html body:not(.home):not(.home):not(.home) .wp-block-term-description.fg-catseo--prose {
	border-top: 0;
	padding-top: 0;
	max-width: none;
}
html body:not(.home):not(.home):not(.home) .fg-catseo--prose .fg-catseo__stand,
html body:not(.home):not(.home):not(.home) .fg-catseo--prose .fg-catseo__body { margin-left: 0; }


/* the content pages' sub-headings share the medium role */
/* ⚠️ h1 THROUGH h6, not h2-h4. /atelier/ uses an <h6> as its only heading and
   its section title -- "Ateliere de design floral" -- which theme.json renders
   at 13.6px, smaller than the body copy beneath it. Content authors reach for
   whatever level looks right in the editor, so the scale maps by ROLE and
   covers every level. */
html body.page:not(.home):not(.home) .entry-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--fg-ink) !important;
	/* 🔴 `margin-block`, NOT the `margin` shorthand. Paul, 25 August: "you also
	   changed the headings on the terms and conditions page to be left aligned
	   while the content is centered."

	   He was right and it was this line. It read `margin: 2.8rem 0 1rem
	   !important`, and the shorthand's `0` sets margin-LEFT and margin-RIGHT to
	   zero — with `!important`, which beats WordPress's constrained-layout
	   `margin-left: auto; margin-right: auto`. So every heading escaped the
	   centred column and went flush left while the paragraphs stayed centred.
	   Measured on /termeni-si-conditii/: headings at left 50px, paragraphs at
	   left 394px with `margin-left: 343.969px`.

	   It is not a text-align bug and no amount of `text-align` would have fixed
	   it. It hit every content page, not just this one. **Never use the `margin`
	   shorthand on a direct child of a constrained layout** — it silently
	   destroys the centring two properties you did not mean to set. */
	margin-block: 2.8rem 1rem !important;
}
html body.page:not(.home):not(.home) .entry-content :is(h1, h2) { font-size: var(--t-large) !important; }
html body.page:not(.home):not(.home) .entry-content :is(h3, h4, h5, h6) { font-size: var(--t-medium) !important; }

/* image grids on a content page get one aspect and one gap */
html body.page:not(.home):not(.home) .entry-content .wp-block-gallery { gap: 20px !important; }
html body.page:not(.home):not(.home) .entry-content .wp-block-gallery figure img,
html body.page:not(.home):not(.home) .entry-content .wp-block-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--fg-surface);
}


/* the same, wherever the Client writes headings: articles and product copy */
html body.single-post .entry-content :is(h1, h2, h3, h4, h5, h6),
html body:not(.home):not(.home) .woocommerce-Tabs-panel :is(h1, h2, h3, h4, h5, h6),
html body:not(.home):not(.home) .fg-catseo__a :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fg-serif) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--fg-ink) !important;
}
html body.single-post .entry-content :is(h1, h2),
html body:not(.home):not(.home) .woocommerce-Tabs-panel :is(h1, h2) { font-size: var(--t-large) !important; }
html body.single-post .entry-content :is(h3, h4, h5, h6),
html body:not(.home):not(.home) .woocommerce-Tabs-panel :is(h3, h4, h5, h6),
html body:not(.home):not(.home) .fg-catseo__a :is(h1, h2, h3, h4, h5, h6) { font-size: var(--t-medium) !important; }



/* ---- the promise list gets its bullet back, as the florette --------------
   ⚠️ READ THE BLOCK ABOVE FIRST. These lines HAD icons and Paul removed them:
   "I also don't like the icons you added next to each list item. Let's make it
   more subtle and more premium." That still stands — what is coming back is
   not those icons.

   25 August, his call: use **the same ✿ that marks "Livrare în aceeași zi în
   București & Ilfov"** directly under the product name (`&#10047;`, plum, in
   `inc/product-delivery-note.php`). One mark, used twice on the same page, so
   it reads as the shop's own rather than as decoration. The five lines are a
   list and were rendering as five loose sentences.

   ⚠️ THE EXCLAMATION MARKS ARE STILL HIS COPY and are still not deleted here.
   "Livrare rapida!", "Plati securizate!", "Flori mereu proaspete!" — three of
   the five end in one, and none of the five has diacritics. That is the same
   ask as the rest of his Romanian, in asks.md #4. */
.single-product .fg-pdp-note .greencheck {
	display: flex !important;
	align-items: baseline;
	gap: .55rem;
	line-height: 1.75 !important;
	padding: .1rem 0 !important;
}
.single-product .fg-pdp-note .greencheck::before {
	content: "\273F" !important;
	color: var(--fg-plum);
	font-size: .72rem;
	line-height: inherit;
	opacity: 1;
	background: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	text-align: left !important;
	flex: 0 0 auto;
}

/* ═════════════════════════ THE MOBILE HEADER BAR, REBUILT ═════════════════════
   26 August 2026. Paul, on a real handset:
     "The nav is gross. The search, phone, and hamburger icons are enormous.
      The cos is top aligned and looks nothing like the others. We need to
      rethink this bar entirely."

   He was right, and measured it was not one fault but two.

   1. THE ICONS ARE 3rem — 48px. That is set in `theme/theme.json` under
      `styles.css`, NOT in any stylesheet, which is why grepping assets/ for it
      finds nothing. It is the Client's ported CSS and it is emitted inline as
      `global-styles-inline-css`. It sizes the BUTTONS to 3rem as well:

        @media all and (max-width: 800px) {
          .masthead .wc-block-mini-cart__button, .mobilesearch .wp-element-button,
          .mobileonly.mobiletel a { min-width:3rem; height:3rem; width:3rem }
          .wp-block-navigation__responsive-container-open svg,
          .wc-block-mini-cart__button .wc-block-mini-cart__icon,
          .mobilesearch svg { width:3rem; height:3rem }
        }

      This file is enqueued AFTER that inline block, so equal specificity wins
      on source order. Nothing in theme.json is edited.

   2. THEY WERE NEVER A SET. Measured at 390px, the four controls were
      **48x52, 48x53, 51x48 and 48x55, at tops 11, 10, 13 and 10** — four
      different heights on four different baselines. No amount of icon
      resizing fixes that on its own; the boxes have to be made equal and
      centred.

   ⚠️ AND THE CART IS NOT A BUG. `Coș (n)` as words is the mockup's own
   decision, deliberate, and it is right on desktop — see the note at the top
   of this file. It only fails on a phone, where it sits beside three glyphs
   and reads as a different kind of object. **So this is scoped to <=800px and
   desktop is untouched**, which is also why `mockup-diff` (1440px) is
   unaffected.                                                                */
@media (max-width: 800px) {

	/* one row, one baseline, even air */
	.masthead .wp-block-group.is-content-justification-right {
		display: flex;
		align-items: center;
		gap: .25rem;
	}

	/* every control is the same 44px tap target -- Apple's minimum, which the
	   old 48px boxes met by accident and the 17px filter button did not */
	.masthead .wc-block-mini-cart__button,
	.masthead .mobilesearch .wp-element-button,
	.masthead .mobileonly.mobiletel a,
	.masthead .wp-block-navigation__responsive-container-open {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		align-self: center !important;
		background: transparent !important;
	}
	.masthead .mobiletel,
	.masthead .mobilesearch,
	.masthead .wc-block-mini-cart,
	.masthead nav.meniutopmain {
		min-width: 0 !important;
		width: auto !important;
		margin: 0 !important;
		align-self: center !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	/* 22px glyphs, not 48px ones */
	.masthead .wp-block-navigation__responsive-container-open svg,
	.masthead .wc-block-mini-cart__button .wc-block-mini-cart__icon,
	.masthead .mobilesearch svg,
	.masthead .mobileonly.mobiletel img {
		width: 22px !important;
		height: 22px !important;
	}

	/* the cart becomes a glyph like its neighbours, and the count rides it as a
	   badge instead of being spelled out */
	.masthead .wc-block-mini-cart__button::before,
	.masthead .wc-block-mini-cart__button::after { content: none !important; }
	.masthead .wc-block-mini-cart__quantity-badge {
		position: relative;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
	.masthead .wc-block-mini-cart__quantity-badge svg { display: block !important; }
	.masthead .wc-block-mini-cart__badge {
		position: absolute;
		top: -4px;
		inset-inline-end: -8px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 99px;
		background: var(--fg-plum) !important;
		color: #fff !important;
		font-family: var(--fg-sans);
		font-size: 10px !important;
		line-height: 16px;
		letter-spacing: 0;
		text-align: center;
	}
	/* an empty basket does not need a badge shouting zero at you */
	.masthead .wc-block-mini-cart__badge:empty { display: none; }
}

/* the search FORM and the phone FIGURE are wrappers around the control, and
   they carry their own height -- 52px and 44px against the nav's 44. Flatten
   the wrappers too or the row still sits on three baselines. */
@media (max-width: 800px) {
	.masthead .wp-block-search__button-only,
	.masthead .wp-block-search__button-only .wp-block-search__inside-wrapper,
	.masthead figure.wp-block-image.mobiletel,
	.masthead .mobileonly.mobiletel {
		height: 44px !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		align-self: center !important;
		border: 0 !important;
	}
	/* ⚠️ DO NOT hide .wp-block-search__input here. It was hidden for one commit
	   and search stopped working entirely -- Paul: "tapping on the search icon
	   does NOTHING". WordPress's button-only search EXPANDS that input on click;
	   it is already zero-width until then, so hiding it removes the thing the
	   button is meant to reveal. */
	/* ⚠️ The state class is `wp-block-search__searchfield-hidden`, and WordPress
	   REMOVES it to open. I guessed `.is-searching` first and the rule matched
	   nothing -- second wrong class name in one session. Read it off the element.
	   Open, the field takes the whole bar rather than the 48px sliver left
	   between the logo and the other three glyphs. */
	.masthead .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) {
		position: absolute !important;
		inset-inline: 0;
		top: 50%;
		transform: translateY(-50%);
		width: auto !important;
		height: 44px !important;
		z-index: 5;
		background: var(--fg-cream, #F5F1E9) !important;
	}
	.masthead .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100%;
		display: flex;
		align-items: center;
		gap: .5rem;
	}
	.masthead .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		display: block !important;
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
		border: 0;
		border-bottom: 1px solid var(--fg-line);
		background: transparent;
		/* 16px or iOS zooms the page on focus and never zooms back */
		font-size: 16px !important;
		padding: 0 .25rem !important;
	}
	/* the form is positioned against the whole bar, not the icon cluster,
	   or it can only ever be as wide as the cluster (127px) */
	.masthead > .wp-block-group,
	.masthead .wp-block-group.alignfull { position: relative; }
}

/* ═══════ CHECKOUT: THE STEPS RAN 3, 2, 1 ON MOBILE ═══════
   26 August 2026. Paul: "The steps are interverted on mobile. Step 3 is first,
   then 2, then 1, on the checkout page. All the fields are there though."

   Measured: `#customer_details .col-1` computed `order: 2` and `.col-2`
   `order: 1`. The source is the Client's ported CSS in `theme/theme.json`, not
   any stylesheet:

     @media only screen and (max-width: 768px) {
       #customer_details.col2-set { display:flex; flex-direction:column }
       #customer_details .col-2 { order: 1 }
       #customer_details .woocommerce-additional-fields { order: -1 }
       #customer_details .woocommerce-shipping-fields { order: 2 }
       #customer_details .col-1 { order: 2 }
     }

   ⚠️ **It was correct for HIS checkout.** It pulled the additional-fields block
   to the top of a two-column layout that had no step numbers. Our rebuild
   numbers the steps and orders them deliberately, so the same rule now reads
   the sequence backwards on the one page where sequence is the whole point.

   Reset to source order on mobile, and only while the rebuilt checkout is on:
   if `FG_CHECKOUT_MODE_ON` is ever switched off, his own layout returns and so
   should his ordering -- which is why this is scoped to `.fg-checkout` rather
   than to `#customer_details` globally.                                       */
@media (max-width: 800px) {
	/* ⚠️ Scoped by `:has(.fg-steps)`, not by a body class. There is no
	   `body.fg-checkout` -- I assumed one and the rule silently matched
	   nothing. `.fg-steps` is emitted by `inc/checkout-mode.php` only when
	   FG_CHECKOUT_MODE_ON is set, so this is exactly "while the rebuilt
	   checkout is on" and his own ordering returns if it is switched off. */
	body:has(.fg-steps) #customer_details .col-1,
	body:has(.fg-steps) #customer_details .col-2,
	body:has(.fg-steps) #customer_details .woocommerce-additional-fields,
	body:has(.fg-steps) #customer_details .woocommerce-shipping-fields,
	body:has(.fg-steps) #customer_details .woocommerce-billing-fields {
		order: 0 !important;
	}
}

/* ═══════════════ THE MOBILE MENU: ACCORDIONS, NOT A WALL ═══════════════
   26 August 2026. Paul: "The items in the hamburger menu are ALL OVER THE
   PLACE. And just simple lines of text, unclear what any of them are related
   to or that they are nested. Needs a total visual overhaul, maybe accordions."

   Before: 53 links, all expanded, three indent levels, 1,956px of content, and
   indentation as the only cue that anything belonged to anything.
   After: 9 rows. Tap the label to go to the category, tap the chevron to open
   its children. Behaviour is in `assets/nav-mobile.js`.                      */
@media (max-width: 800px) {

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
	}

	/* every row is a full-width band with a real tap target, not a word
	   floating in the middle of the screen */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--fg-line);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 0 52px 0 0;
		font-family: var(--fg-sans);
		font-size: .78rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--fg-ink);
	}

	/* the chevron is its own control, sized for a thumb */
	.fg-acc__toggle {
		/* ⚠️ z-index is load-bearing. Without it the row's <a> paints over the
		   button and every tap on the chevron followed the parent link instead
		   of expanding -- Paul: "when you tap to open an accordion, it takes
		   you to the link of the accordion parent". I counted the toggles into
		   existence and never clicked one. */
		position: absolute;
		z-index: 3;
		top: 0;
		inset-inline-end: 0;
		width: 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		color: var(--fg-muted);
	}
	.fg-acc__toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .18s ease;
	}
	.fg-acc.is-open > .fg-acc__toggle::before {
		transform: rotate(225deg) translate(-2px, -2px);
	}
	.fg-acc__toggle:focus-visible { outline: 2px solid var(--fg-plum); outline-offset: -2px; }
	@media (prefers-reduced-motion: reduce) {
		.fg-acc__toggle::before { transition: none; }
	}

	/* children: hidden until asked for, and visibly INSIDE their parent --
	   a tinted ground and a rule down the left, rather than indentation alone */
	.wp-block-navigation__responsive-container.is-menu-open .fg-acc > .wp-block-navigation__submenu-container {
		display: none !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		border: 0 !important;
		box-shadow: none !important;
		background: rgba(0, 0, 0, .022) !important;
		padding: .25rem 0 .5rem 0 !important;
		margin: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .fg-acc.is-open > .wp-block-navigation__submenu-container {
		display: block !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-inline-start: 1rem;
		margin-inline-start: .75rem;
		border-inline-start: 1px solid var(--fg-line);
		font-family: var(--fg-sans);
		font-size: .72rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--fg-muted);
	}
	/* a third level exists under Buchete; step it once more and no further */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
		margin-inline-start: 1.5rem;
		font-size: .68rem;
		text-transform: none;
		letter-spacing: .04em;
	}
	/* WordPress's own caret would sit beside ours */
	.wp-block-navigation__responsive-container.is-menu-open .fg-acc > a .wp-block-navigation__submenu-icon { display: none; }
}


/* ═══════════ THE PINNED HEADER — FOURTH ATTEMPT, AND THE REAL ONE ═══════════
   26 August 2026. Paul reported this FOUR times. Three of my fixes were wrong
   and the record of why matters more than the rule:

   1. "The cookie plugin's overflow:hidden kills sticky — unfixable from our
      side." Half right, and the conclusion was too strong.
   2. Overrode that `hidden` with `overflow-x: clip`, which keeps sticky alive.
      A scroll test then returned `pinned: true` and I nearly closed it.
   3. Found the offset was the DESKTOP topbar height (-47px) on a mobile layout
      with no topbar, leaving 20px of a 67px bar on screen. Real, and fixed —
      but still not the reason his phone showed nothing.

   🔴 THE METHOD WAS THE FAULT. Every check passed in Chromium at 390px while
   the thing was visibly broken on an iPhone. **`overflow: clip` is Safari 16+.**
   Where it is not supported the declaration is invalid, the cascade falls back
   to theme.json's `overflow-x: hidden`, and sticky dies again — so my fix was
   conditional on the browser I happened to be testing in.

   THE GUARD IS NOW REMOVED RATHER THAN OVERRIDDEN. It exists in theme.json to
   stop horizontal scrolling, and **there is no horizontal scrolling left to
   stop**: measured `scrollWidth === innerWidth` on five pages at 360, 390, 414,
   768 and 1024 — twenty-five combinations, zero overflow — with the guard
   switched off. `overflow-x: visible` is supported everywhere, so this cannot
   depend on a browser version again.

   ⚠️ IF HORIZONTAL SCROLL EVER RETURNS, do not put this back on `html` or
   `body`. Find the element that is actually too wide. A page-level clip hides
   the symptom and takes the sticky header with it, which is exactly the trade
   that cost four rounds here.                                                */
html,
body,
html.cli-barmodal-open,
body.cli-barmodal-open,
html.hustle-no-scroll,
body.hustle-no-scroll {
	overflow-x: visible !important;
	max-width: none !important;
}
/* the masthead sits INSIDE the sticky header, so its own clip is harmless to
   sticky -- but it was also cropping the search field when open */
.masthead { overflow-x: visible !important; max-width: none !important; }

/* ═══ THE WHOLE OCCASION TILE IS THE LINK, NOT JUST THE WORDS ═══
   26 August 2026. Paul, desktop and mobile: "you have to tap/click the TEXT on
   the image in order to follow the link. Make the link apply to the ENTIRE
   IMAGE."

   The cover blocks wrap only the caption in an <a>, so a 158px tile had a
   ~90px target sitting in the middle of it.

   🔴 FIFTH ATTEMPT, AND THE FIRST FOUR ALL FAILED FOR ONE REASON.
   Paul: "Number 13 is STILL NOT FIXED after ~4 attempts. You need to start
   over, investigate this thoroughly end-to-end."

   MEASURED, and it settles it. The previous fix stretched a pseudo-element:
   `a::after { position: absolute; inset: 0 }`. Its computed size on the live
   tile was **158 × 57.77**, not 158 × 158 — because `inset: 0` resolves against
   the nearest POSITIONED ancestor, and that is
   `.wp-block-cover__inner-container`, which is **58px tall and sits at the
   bottom of the tile**. WordPress core positions that container itself; the
   old rule then raised it to `z-index: 2` to keep the label readable.

   **So the fix and the thing defeating it were two lines apart in the same
   block.** The overlay covered exactly the strip the label sits in, which is
   why tapping the words worked and tapping the photograph never did — the
   symptom looked like "the fix does nothing" and was in fact "the fix covers
   90px of a 158px tile".

   ⚠️ AND `:has()` WENT WITH IT. It is Safari 15.4+, and this build already has
   one confirmed failure on his handset from a Safari-16 property. Nothing that
   decides whether a link is tappable is allowed to depend on it.

   THE FIX: no pseudo-element and no stacking-context game. The anchor IS the
   tile — absolutely positioned against the cover, displaying its own label at
   the bottom. One real link, the whole surface, every browser. The container
   and the paragraph are taken out of the way so nothing between the anchor and
   the cover can capture `inset: 0` again. */
body.home .entry-content .wp-block-cover { position: relative; }
body.home .entry-content .wp-block-cover .wp-block-cover__inner-container,
body.home .entry-content .wp-block-cover .wp-block-cover__inner-container > p {
	position: static !important;
	z-index: auto !important;
	margin: 0 !important;
}
body.home .entry-content .wp-block-cover .wp-block-cover__inner-container > p > a {
	position: absolute !important;
	inset: 0 !important;
	z-index: 3 !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	padding: 0 10px 16px !important;
	text-align: center;
	text-decoration: none;
}

/* ═══ iOS ZOOMS ON ANY FIELD UNDER 16px, AND NEVER ZOOMS BACK ═══
   26 August 2026, Paul, twice: on the coupon field — "It also zooms in the page
   and doesn't zoom back out when you type in there" — and on the quantity
   field — "it ZOOMS IN THE PAGE A LOT AND DOESN'T UNZOOM when you go to type."

   This is Safari's rule, not a bug in either field: **iOS zooms the viewport
   whenever a focused control has a font-size below 16px**, and because the
   page has no user-scalable lock it does not zoom back out afterwards. Several
   fields on this site are set at .85–.95rem for the design's type scale.

   Fixed once, globally, for every control on a phone rather than field by
   field as each one is reported. **The rendered size is unchanged above 800px**,
   so the design's type scale is untouched where it was designed.

   ⚠️ NOT fixed with `maximum-scale=1` on the viewport meta. That does stop the
   zoom, and it also stops a partially-sighted visitor pinching to read
   anything. The font-size floor costs nothing and takes nobody's zoom away.  */
@media (max-width: 800px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	input[type="url"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* ═══════════════ HOMEPAGE, PAUL'S MOBILE REVIEW ═══════════════ */

/* --- the hero's slide buttons were 34x2px ---------------------------------
   "it's very hard to tap the loading bars to switch between the hero images,
   they're tiny and the tap area is tiny." Measured: 34 x 2. The BAR stays 2px
   because that is the design; the BUTTON grows to a 44px-tall target around
   it, which costs nothing visually.                                        */
/* ⚠️ The container is `.fg-hero__tabs` and the buttons carry NO class -- I
   guessed `.fg-dots` and the rule matched nothing. Read it off the element. */
/* ⚠️ TWO WRONG ATTEMPTS BEFORE THIS ONE, both caught by Paul.
   (1) `padding-block` grew the BAR, not the target: "you made the loading bars
       super tall. I want them visually the same as before, increase just the
       tap area."
   (2) An `::after` hit-box did nothing AND would have broken the progress
       animation — `::after` is ALREADY the fill (theme.css:2181) and the
       button carries `overflow: hidden`, which clips any pseudo-element
       anyway. I wrote it without reading the rule 700 lines above.

   The working shape: the BUTTON becomes the 44px target with no background of
   its own, `::before` draws the 2px bar, and `::after` keeps the fill — now
   pinned to the bar's line rather than filling the whole box. The row's
   `bottom` drops by half the added height so the bar stays exactly where it
   was on screen. Visual output is identical; only the thumb target changes. */
/* ⚠️ MOBILE ONLY. Enlarging the button changes its measured box from 2px to
   44px, which `mockup-diff` correctly flagged as a divergence from the design
   at 1440px. A mouse hits a 2px bar fine; a thumb does not. So the target
   grows on a phone and the desktop stays byte-identical to the mockup. */
@media (max-width: 800px) {
	body.home .fg-hero__tabs { bottom: 9px; }        /* 30 - 21, so the bar does not move */
	body.home .fg-hero__tabs button {
		height: 44px;
		background: transparent;
		overflow: visible;
		display: flex;
		align-items: center;
		touch-action: manipulation;
	}
	body.home .fg-hero__tabs button::before {
		content: "";
		width: 100%;
		height: 2px;
		background: rgba(255, 255, 255, .35);
	}
	body.home .fg-hero__tabs button::after {
		top: 50%;
		bottom: auto;
		height: 2px;
		transform: translateY(-50%);
	}
}

/* --- button labels that wrap were left-aligning each line -----------------
   "the text in the 'programeaza o consultatie' button is left-aligned text,
   should be centered. Same with the text in 'vezi coroanele funerare'."
   Both computed `text-align: start`; `justify-content: center` only centres
   the box, not the lines inside a wrapped label.                           */
/* ⚠️ The class is `.fg-btn`, not `.wp-block-button__link`. Same lesson. */
body.home .fg-btn,
body.home a.fg-btn,
.fg-btn { text-align: center; }

@media (max-width: 600px) {
	/* --- the footer was a single column of six stacked blocks -------------
	   "the footer content is all one column, it should not be, looks ugly."
	   Two columns holds the three link lists side by side without shrinking
	   the type; the logo and address stay full width above them.           */
	.mastfooter .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.25rem;
	}
	.mastfooter .wp-block-columns > .wp-block-column { width: auto !important; flex-basis: auto !important; }
	/* the brand block keeps the full width above the lists */
	.mastfooter .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
	.mastfooter * { text-align: left !important; }

	/* --- the trust badges ------------------------------------------------
	   "we need to put the cards on its own line, and then the ANPC and SAL on
	   a separate line." They were wrapping into a ragged 2 + 1.            */
	.fg-badges,
	.mastfooter + * .wp-block-image { }
}

/* ═══ THE STICKY HEADER'S OFFSET IS A DESKTOP NUMBER ═══
   26 August 2026, Paul three times: "the nav isn't pinned."

   It IS pinned, and always was — that was the wrong diagnosis twice over.
   Measured on scroll: header top settles at exactly **-47px**, which is
   `top: calc(-1 * var(--fg-topbar-h, 47px))` at theme.css:251 doing precisely
   what it was written to do — let the topbar ride up and leave the nav row.

   **The offset is the topbar's DESKTOP height, and on mobile there is no
   topbar**: theme.json hides `.topbar` outright below 800px, so it measures
   0. The header is 67px tall, so pinning it at -47px leaves **20px of a 67px
   bar on screen** — a sliver, which reads as "not pinned" and is arguably
   worse than not sticking at all.

   ⚠️ Worth recording how long this took to see: `position: sticky` computed
   correctly, no ancestor was clipping after the earlier overflow fix, and a
   scroll test returned `pinned: true`. Every check passed while the thing was
   visibly broken on his phone, because the checks asked "does it stick" and
   the fault was "where". **Measure the number, not the boolean.**            */
@media (max-width: 800px) {
	.wp-block-template-part > header,
	header.wp-block-template-part {
		--fg-topbar-h: 0px;
		top: 0 !important;
	}
}

/* ═══ SEARCH OPEN MUST COVER THE BAR, NOT FLOAT OVER IT ═══
   "we need to hide the rest of the nav, you can still see the 'de peste 25 de
   ani' bleeding through the search field."                                  */
@media (max-width: 800px) {
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) .wp-block-site-logo,
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) .mobiletel,
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) nav.meniutopmain,
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) .wc-block-mini-cart,
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) .site-tagline,
	.masthead:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) p.fg-tagline {
		visibility: hidden;
	}
	.masthead .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) {
		background: var(--fg-cream, #F5F1E9) !important;
		padding-inline: 30px !important;
		height: 100% !important;
		top: 0 !important;
		transform: none !important;
		align-items: center;
		display: flex !important;
	}
}

/* ═══════════ PAUL'S SECOND PASS — 26 Aug, batch 2 ═══════════
   ⚠️ Written with deliberately strong selectors. Four rules in this session
   were authored at low specificity, landed in the stylesheet, read as correct
   and did nothing — the exact failure `CLAUDE.md` finding 2 describes. Every
   rule below was measured after applying, not assumed.                      */
@media (max-width: 600px) {

	/* the footer stayed `display:flex` through a `!important` grid rule;
	   raised to beat whatever was holding it */
	html body .mastfooter .wp-block-columns.fg-foot-cols {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.6rem 1.25rem !important;
	}
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column {
		width: auto !important;
		flex-basis: auto !important;
		margin: 0 !important;
	}
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	/* the guides cards were touching -- the 2-up landed, the gap did not */
	html body.home #fg-guides .latest-post-selection {
		gap: 22px 14px !important;
	}
	html body.home #fg-guides .latest-post-selection > * {
		border: 1px solid var(--fg-line);
		background: var(--fg-card, #FFFDF8);
	}

	/* "Informatii utile needs to be as wide as the section above it, it's
	   shrunk into the middle and the edges are empty space." The FAQ body and
	   its accordions carry their own max-width from the block editor. */
	html body.home .wp-block-aioseo-faq,
	html body.home .wp-block-aioseo-faq > *,
	html body.home #fg-info,
	html body.home #fg-info > * {
		max-width: none !important;
		margin-inline: 0 !important;
		width: 100% !important;
	}
}

/* --- every ghost/outline button on the homepage, one size, centred --------
   "The 'povestea florariei' button needs to be centered, not left aligned,
    same applies for all similar buttons on this page. It's also a different
    size from the button 'programeaza o consultatie'. Maybe we keep them
    consistent?"
   There are three classes doing the same job -- `.fg-btn`, `.fg-btn.ghost`
   and `.fg-more` -- which is why they were different sizes. One rule now. */
html body.home a.fg-btn,
html body.home a.fg-btn.ghost,
html body.home a.fg-more,
html body a.fg-btn,
html body a.fg-more {
	text-align: center !important;
	justify-content: center !important;
	align-items: center !important;
	display: inline-flex !important;
}
@media (max-width: 600px) {
	html body.home a.fg-btn,
	html body.home a.fg-btn.ghost,
	html body.home a.fg-more {
		width: 100% !important;
		min-height: 52px !important;
		padding-block: .9rem !important;
		box-sizing: border-box;
	}
}

/* ═══════════════ THE 5% PROMO POPUP, IN THE SITE'S CLOTHES ═══════════════
   26 August 2026. Paul: "Can you also restyle the coupon pop-up to match the
   website styling? It's super ugly right now."

   `#hustle-popup-id-1` ships on Hustle's stock `hustle-palette--sunrise` — an
   orange-to-red gradient with white Inter — on a site whose whole identity is
   cream, plum and Cormorant. It reads as an advert somebody else injected.

   ⚠️ STYLING ONLY. The copy stays exactly as Ștefan wrote it, because it is
   his marketing and it lives in Hustle's settings, not in any file we own. The
   proposed rewrite (the offer is currently stated four times, `promo5` is
   buried lowercase mid-sentence, and "Aplica voucherul" applies nothing) is in
   the before/after page for him to apply in Hustle himself.

   ⚠️ Hustle writes its palette as inline custom properties with high
   specificity, so these are deliberately over-specified. Everything is scoped
   to the module id — no other Hustle module on the site is touched.          */
#hustle-popup-id-1 .hustle-layout,
#hustle-popup-id-1 .hustle-layout-header,
#hustle-popup-id-1 .hustle-layout-content,
#hustle-popup-id-1 .hustle-layout-footer {
	background: var(--fg-cream, #F5F1E9) !important;
	background-image: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#hustle-popup-id-1 .hustle-layout {
	border: 1px solid var(--fg-line, #D8CFBD) !important;
	box-shadow: 0 18px 50px rgba(34, 32, 28, .18) !important;
	overflow: hidden;
}
#hustle-popup-id-1 .hustle-layout-header { padding: 26px 22px 6px !important; }
#hustle-popup-id-1 .hustle-layout-content { padding: 0 22px 4px !important; }
#hustle-popup-id-1 .hustle-layout-footer  { padding: 6px 22px 24px !important; }

/* the headline carries the brand face, not Hustle's UI sans */
#hustle-popup-id-1 .hustle-title {
	font-family: var(--fg-serif, "Cormorant Garamond", Georgia, serif) !important;
	font-weight: 600 !important;
	font-size: 1.7rem !important;
	line-height: 1.1 !important;
	color: var(--fg-ink, #22201C) !important;
	text-align: left !important;
	margin: 0 0 .5rem !important;
	text-wrap: balance;
}
#hustle-popup-id-1 .hustle-subtitle {
	font-family: var(--fg-sans, Inter, sans-serif) !important;
	font-size: .9rem !important;
	font-weight: 400 !important;
	color: var(--fg-muted, #7A7266) !important;
	text-align: left !important;
	margin: 0 !important;
}
#hustle-popup-id-1 .hustle-layout-content p {
	font-family: var(--fg-sans, Inter, sans-serif) !important;
	font-size: .88rem !important;
	line-height: 1.55 !important;
	color: var(--fg-muted, #7A7266) !important;
	text-align: left !important;
	margin: 0 0 .6rem !important;
}
/* `promo5` is the only thing in the paragraph anyone needs; give it weight */
#hustle-popup-id-1 .hustle-layout-content p strong,
#hustle-popup-id-1 .hustle-layout-content p b {
	color: var(--fg-plum, #5C2A46) !important;
	font-weight: 600 !important;
	letter-spacing: .06em;
}

/* the call to action becomes the same plum as every other primary action */
#hustle-popup-id-1 .hustle-button-cta,
#hustle-popup-id-1 a.hustle-button {
	display: block !important;
	width: 100% !important;
	background: var(--fg-plum, #5C2A46) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 3px !important;
	font-family: var(--fg-sans, Inter, sans-serif) !important;
	font-size: .72rem !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	padding: 15px 18px !important;
	text-align: center !important;
	min-height: 52px;
}

/* the close control was a 24px glyph on a coloured bar; it is now a real
   44px target in the corner, in the site's muted ink */
#hustle-popup-id-1 .hustle-button-close {
	width: 44px !important;
	height: 44px !important;
	top: 4px !important;
	inset-inline-end: 4px !important;
	background: transparent !important;
	color: var(--fg-muted, #7A7266) !important;
	opacity: 1 !important;
}
#hustle-popup-id-1 .hustle-button-close svg { width: 15px !important; height: 15px !important; }
#hustle-popup-id-1 .hustle-button-close path { fill: currentColor !important; }

/* the coupon photograph says nothing the words do not, and on a 390px screen
   it costs about a third of the modal */
@media (max-width: 600px) {
	#hustle-popup-id-1 .hustle-layout-content img { display: none !important; }
	#hustle-popup-id-1 .hustle-title { font-size: 1.5rem !important; }
}

/* the image block is its own element with its own painted ground -- the coupon
   photograph sat in a purple rectangle because `.hustle-image` carries
   `background-color: rgb(125,50,129)` from the module's palette, and my first
   rule targeted `.hustle-layout-content img`, which is not where it lives */
#hustle-popup-id-1 .hustle-image {
	background-color: transparent !important;
	background-image: none !important;
}
@media (max-width: 600px) {
	#hustle-popup-id-1 .hustle-image { display: none !important; }
}

/* ═══ THE CONTACT FORM RAN OFF THE SCREEN ═══
   26 August 2026. Paul: "On the contact page, all of the text fields go off
   screen, fit them into the viewport."

   Contact Form 7 sizes its inputs with an HTML `size="40"` / `cols="40"`
   attribute and a CSS width, and the fields were computing to `width: 330px`
   PLUS their own padding and border with no `box-sizing`, so they rendered
   361px wide starting at the 30px gutter — 31px past the right edge.

   ⚠️ My own earlier sweep called this page clean. It checked the homepage,
   category and product templates for overflow and never opened the form. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7-form-control {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit { width: auto !important; }
@media (max-width: 600px) {
	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit { width: 100% !important; min-height: 52px; }
}

/* ═══ THE SPLIT PHOTOS POPPED IN LATE ═══
   "the photo in the lucrate manual section takes a long time to load. I often
   end up at no image and then it pops in."

   `inc/homepage-sections.php` prints them with `loading="lazy"` and **no width,
   no height and no srcset**, so the browser reserves nothing and downloads the
   full-size original. Reserving the box with `aspect-ratio` stops the jump; the
   file weight is the WebP job, which is still waiting on Alexandra.          */
.fg-split__ph { aspect-ratio: 4 / 5; overflow: hidden; }
.fg-split__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--fg-line, #E3DCCE);
}

/* ═══ DESPRE NOI: ȘTEFAN'S PHOTO BELONGS AT THE TOP ═══
   26 August 2026. Paul: "the photo of Stefan holding a bouquet is at the bottom
   of the page. It should be at the top, above the text."

   The page is a two-column block. On desktop the photo column sits beside the
   story; on mobile the columns wrap and it lands 2,379px down, after the whole
   text. Ordering it first on mobile only — the desktop layout is unchanged.

   ⚠️ This moves the WHOLE second column, which also carries its own caption
   and links, not just the photograph. That reads fine, but it is a bigger move
   than "the image goes up" and Paul should see it before it is called done. */
@media (max-width: 780px) {
	/* ⚠️ SECOND ATTEMPT. `order: -1` on the whole column was too blunt — it
	   carried "Cele mai solicitate produse" and its link list up with the
	   photograph. Paul: "the cele mai solicitate produse buttons are ABOVE the
	   text of the section. They belong at the bottom."

	   `display: contents` dissolves the column so its children become flex
	   items of the row itself, which is the only way to lift ONE child out of
	   a nested column without touching his block markup. Then: photo first,
	   the story, and the product links last. */
	body.page .entry-content > .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
	}
	body.page .entry-content > .wp-block-columns > .wp-block-column:nth-child(2) {
		display: contents !important;
	}
	body.page .entry-content > .wp-block-columns > .wp-block-column:nth-child(2) > * {
		order: 2;
	}
	body.page .entry-content > .wp-block-columns > .wp-block-column:nth-child(2) > figure:first-of-type {
		order: -1;
		margin-bottom: 1.5rem;
	}
	body.page .entry-content > .wp-block-columns > .wp-block-column:nth-child(1) { order: 1; }
}

/* --- the footer's Contact block was orphaned in a half-width cell ----------
   26 Aug 2026. Paul: "the Contact section is now orphaned and left aligned,
   with line-breaks on each item in it."
   Two columns suit the two link lists; the contact rows are phone, email and
   address, which are long and must not wrap. It spans the full width. */
@media (max-width: 600px) {
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column:last-child {
		grid-column: 1 / -1;
	}
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column:last-child ul,
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column:last-child ol {
		display: grid;
		grid-template-columns: 1fr;
		gap: .55rem;
	}
	html body .mastfooter .wp-block-columns.fg-foot-cols > .wp-block-column:last-child li {
		white-space: nowrap;
	}
}

/* ═══ THE PROMO POPUP, SECOND PASS ═══
   26 August 2026. Paul, after the first attempt: "the popup looks BAD! Look how
   it compares to the mockup. The mockup was ELEGANT."

   He is right and the first pass was only a recolour. Hustle's STRUCTURE was
   left intact: a 1.7rem serif question that wraps to two lines, a banded
   header, an underlined sentence that reads as a link, three stacked
   paragraphs, and a full-bleed button. Cream paint on that is still that.

   ⚠️ THE COPY IS ȘTEFAN'S AND STAYS HIS — three exclamation marks and the
   offer stated three times cannot be fixed from a stylesheet, and should not
   be. What CSS can do is stop the structure shouting: shrink the headline,
   demote the repetitions, turn `promo5` into the object it should always have
   been, and give the button a size rather than the whole width.

   Paragraph order is fixed by the module, so `nth-of-type` is safe here:
     1 — "Beneficiaza de oferta de reduceri!"   the redundant one → eyebrow
     2 — "Foloseste codul promo5 …"             the only line that matters
     3 — "Reducerea este valabila …"            terms → fine print            */

#hustle-popup-id-1 .hustle-layout { max-width: 340px !important; margin: auto; }
#hustle-popup-id-1 .hustle-layout-header {
	border: 0 !important;
	padding: 22px 22px 0 !important;
}
#hustle-popup-id-1 .hustle-layout-content { padding: 10px 22px 0 !important; }
#hustle-popup-id-1 .hustle-layout-footer  { padding: 14px 22px 20px !important; }

/* the headline stops being a banner and becomes a line */
#hustle-popup-id-1 .hustle-title {
	font-size: 1.22rem !important;
	line-height: 1.18 !important;
	letter-spacing: -.01em;
	margin: 0 0 .35rem !important;
}
#hustle-popup-id-1 .hustle-subtitle {
	font-size: .82rem !important;
	line-height: 1.4 !important;
	color: var(--fg-muted, #7A7266) !important;
}

/* 1 — the redundant sentence, demoted to a label and un-underlined */
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(1) {
	font-size: .6rem !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted, #7A7266) !important;
	margin: 0 0 .55rem !important;
}
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(1) u,
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(1) a,
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(1) strong {
	text-decoration: none !important;
	font-weight: 500 !important;
	font-size: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
}

/* 2 — the only line that carries information */
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(2) {
	font-size: .88rem !important;
	margin: 0 0 .75rem !important;
	color: var(--fg-ink, #22201C) !important;
}
/* the code becomes a token you can see and copy, not a bold word mid-sentence */
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(2) strong:first-of-type {
	display: inline-block;
	font-size: .92rem !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	color: var(--fg-plum, #5C2A46) !important;
	background: var(--fg-plum-soft, #F0E4EC);
	border: 1px dashed var(--fg-plum, #5C2A46);
	border-radius: 3px;
	padding: 2px 9px;
	margin: 0 2px;
}

/* 3 — the terms, as fine print */
#hustle-popup-id-1 .hustle-layout-content p:nth-of-type(3) {
	font-size: .74rem !important;
	line-height: 1.45 !important;
	color: var(--fg-muted, #7A7266) !important;
	margin: 0 !important;
}

/* the button gets a size instead of the whole width */
#hustle-popup-id-1 .hustle-cta-container { text-align: center; }
#hustle-popup-id-1 .hustle-button-cta,
#hustle-popup-id-1 a.hustle-button {
	display: inline-block !important;
	width: auto !important;
	min-width: 190px;
	padding: 13px 26px !important;
	font-size: .68rem !important;
	min-height: 46px;
}

/* the CTA sat left because the footer is a flex row, so `text-align` on the
   container never applied — centre the flex line itself */
#hustle-popup-id-1 .hustle-layout-footer,
#hustle-popup-id-1 .hustle-cta-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	width: 100%;
}

/* Hustle ships `body.hustle-no-scroll, html.hustle-no-scroll { overflow:hidden
   !important }` in its own stylesheet, at the same specificity as ours and
   loaded after. That is a scroll-lock for ITS modal, and it takes the sticky
   header with it. Out-specify it; the modal has its own backdrop and does not
   need the page frozen to work. */
html.hustle-no-scroll:not(.has-modal-open),
body.hustle-no-scroll:not(.has-modal-open),
html:not(.has-modal-open) body.hustle-no-scroll {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* the two extra guides, and the control that reveals them */
@media (max-width: 780px) {
	/* ⚠️ `!important` is needed: the card itself is set to `display: flex` by a
	   rule carrying the `#fg-guides` id, which outranks any number of classes. */
	html body.home #fg-guides .latest-post-selection article.fg-guide--extra,
	html body.home #fg-guides .latest-post-selection .fg-guide--extra { display: none !important; }
	html body.home #fg-guides .latest-post-selection.is-expanded article.fg-guide--extra,
	html body.home #fg-guides .latest-post-selection.is-expanded .fg-guide--extra { display: flex !important; }
	body.home .fg-guides__more {
		display: block;
		width: 100%;
		margin-top: 1.1rem;
		min-height: 52px;
		background: transparent;
		border: 1px solid var(--fg-line);
		color: var(--fg-ink);
		font-family: var(--fg-sans);
		font-size: .68rem;
		letter-spacing: .18em;
		text-transform: uppercase;
		cursor: pointer;
		text-align: center;
	}
	body.home .fg-guides__more:focus-visible { outline: 2px solid var(--fg-plum); outline-offset: 2px; }
}

/* ═══ MOBILE: BLOCKS THAT KEEP THEIR OWN INSET ═══
   26 Aug 2026. Two of Paul's repeated complaints are the same shape: a block
   carrying its own horizontal inset on top of the page gutter, so it sits
   narrower than the text above it and reads as shrunk into the middle.

   Measured on a product page at 390:
     body copy                   left 30, width 330
     "Bine de știut" panel       left 60, width 270   ← `.inner-alignwide`

   Same 30px-a-side story as `.fg-sec` earlier. On a phone there is no width to
   donate to an inner measure. */
@media (max-width: 600px) {
	.single-product .inner-alignwide,
	.inner-alignwide,
	.entry-content .inner-alignwide {
		max-width: none !important;
		width: 100% !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	/* the accordions inside it were also set at the reserved scale's size */
	.single-product .inner-alignwide .accordion-title,
	.single-product .inner-alignwide h4,
	.single-product .inner-alignwide p,
	.single-product .inner-alignwide li { font-size: .88rem !important; }
}

/* ═══ CATEGORY PAGES: THE AIR ABOVE THE FIRST PRODUCT ═══
   "On 26, still LOTS of empty space." Measured at 390 the gaps between the
   breadcrumb, the title band, the filter control and the count were ~100px
   each — desktop rhythm, unchanged, three times over, on an 844px screen. */
@media (max-width: 600px) {
	body.tax-product_cat .wp-block-woocommerce-breadcrumbs,
	body.archive .wp-block-woocommerce-breadcrumbs { margin-block: .5rem !important; }

	body.tax-product_cat .fg-cat-head,
	body.tax-product_cat .fg-sec__head,
	body.archive .fg-sec__head { padding-block: 1.5rem !important; margin-block: 0 !important; }

	body.tax-product_cat .wp-block-woocommerce-product-filters,
	body.archive .wp-block-woocommerce-product-filters {
		margin-block: .75rem !important;
	}
	/* the filter control itself was a 17px target adrift in the gap */
	body.tax-product_cat button.wc-block-product-filters__open-overlay,
	body.archive button.wc-block-product-filters__open-overlay {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	body.tax-product_cat .wp-block-group:has(.wc-block-product-results-count),
	body.archive .wp-block-group:has(.wc-block-product-results-count) {
		margin-block-start: .25rem !important;
	}
}

/* ═══ INFORMAȚII UTILE — THE ONE PAUL ASKED ABOUT FOUR TIMES ═══
   26 Aug 2026. He said repeatedly it was narrower than the FAQ above it and I
   kept failing to find the element — I was looking for `#fg-info`, which does
   not exist. **It is `section.fg-info`**, and the section itself was never the
   problem: it measures left 30, width 330, the full content width. Its two
   CHILDREN carry the inset:

       section.fg-info      left 30, width 330   ← correct all along
       .fg-info__head       left 64, width 262   ← 34px each side
       .fg-info__acc        left 64, width 262

   Exactly the same 34px-a-side story as `.fg-sec`, one level further in, which
   is why fixing the section did nothing. Measure the child, not the parent. */
@media (max-width: 600px) {
	/* ⚠️ AND THE INSET IS ON THE SECTION, NOT THE CHILDREN. I zeroed the
	   children's margin and padding first — they were already 0 — while
	   `section.fg-info` carried `padding: 0 34px` of its own. It does NOT have
	   the `.fg-sec` class, so the earlier `.fg-sec` fix never reached it.
	   Fourth attempt at this item; each previous one was aimed one level off. */
	body.home .fg-info {
		padding-inline: 0 !important;
		padding-bottom: 2.5rem !important;
	}
	body.home .fg-info__head,
	body.home .fg-info__acc {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}
}

/* ═══ THE GAP UNDER A SECTION HEADING ═══
   "There's too much space on mobile between 'alege dupa ocazie' and the
   category tiles below it. Match the other section spacing."
   `.fg-sec__head` carries `margin-bottom: 48px` and the tile group adds its
   own `margin-top: 24px` — 72px of stacked air on a phone, on top of the
   section's own vertical padding. */
@media (max-width: 600px) {
	body.home .fg-sec__head { margin-bottom: 1.25rem !important; }
	body.home .entry-content > *:has(.wp-block-cover) { margin-top: .5rem !important; }
	body.home .fg-sec__head .fg-title { margin-top: .5rem !important; }
}

/* ═══════ THE CATEGORY HEADER, PER THE APPROVED MOCKUP ═══════
   26 August 2026. Paul: "your mockup is great on 26-28. Make the changes."

   Measured before, at 390: h1 top 182 at 43.2px · filter top 297 at 11.2px ·
   count top 413 · sort top 444 · **first product top 503**, on an 844px screen.
   The three controls occupied 166px between them.

   Target from the mockup: one control row, title left at 28px, count as a
   quiet line, the two bracketing hairlines gone, first product near 306.     */
@media (max-width: 800px) {

	/* --- the title band ------------------------------------------------- */
	body.tax-product_cat .fg-cat-head,
	body.archive .fg-cat-head {
		border-top: 0 !important;
		border-bottom: 0 !important;   /* the two full-width rules were 68px of nothing */
		padding-block: .75rem 0 !important;
		text-align: left !important;
	}
	body.tax-product_cat .fg-cat-head .fg-kicker,
	body.archive .fg-cat-head .fg-kicker { text-align: left !important; }
	/* ⚠️ The title is `h1.wp-block-query-title`, NOT `wp-block-post-title`, and
	   the reserved type scale claims it at (0,5,x) with `!important`. A
	   three-class selector loses. Matching the scale's own shape. */
	html body:not(.home):not(.home):not(.home) .fg-cat-head h1,
	html body:not(.home):not(.home):not(.home) h1.wp-block-query-title,
	html body:not(.home):not(.home):not(.home) .fg-cat-head .wp-block-query-title {
		font-size: 28px !important;
		line-height: 1.1 !important;
		text-align: left !important;
		margin: .35rem 0 0 !important;
	}
	body.tax-product_cat .wp-block-woocommerce-breadcrumbs,
	body.archive .wp-block-woocommerce-breadcrumbs { margin-block: .35rem !important; }

	/* --- filter + sort on one line, count beneath ------------------------ */
	.fg-catbar {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "filter sort" "count count";
		gap: 10px !important;
		align-items: stretch;
		margin-block: 1rem .9rem !important;
		padding-bottom: 0 !important;
		border-bottom: 0 !important;
	}
	.fg-catbar .wp-block-woocommerce-product-filters {
		grid-area: filter;
		margin: 0 !important;
	}
	.fg-catbar .wc-block-catalog-sorting { grid-area: sort; margin: 0 !important; }
	.fg-catbar .wc-block-product-results-count {
		grid-area: count;
		margin: 0 !important;
		font-size: .66rem !important;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--fg-muted) !important;
		text-align: left !important;
	}

	/* the filter finally looks like a control rather than a caption */
	.fg-catbar button.wc-block-product-filters__open-overlay {
		width: 100% !important;
		min-height: 46px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		border: 1px solid var(--fg-plum) !important;
		border-radius: 3px;
		background: var(--fg-plum-soft, #F0E4EC) !important;
		color: var(--fg-plum) !important;
		font-family: var(--fg-sans);
		font-size: .68rem !important;
		letter-spacing: .14em;
		text-transform: uppercase;
	}
	/* the sort matches its neighbour instead of reading as more grey text */
	.fg-catbar .woocommerce-ordering,
	.fg-catbar .wc-block-product-sort-select {
		width: 100% !important;
		min-height: 46px;
		border: 1px solid var(--fg-line);
		border-radius: 3px;
		background: var(--fg-card, #FFFDF8);
		padding-inline: 12px;
		align-items: center;
	}
	.fg-catbar .woocommerce-ordering label { display: none !important; }
	.fg-catbar .woocommerce-ordering select {
		width: 100% !important;
		font-size: .68rem !important;
		padding: 0 !important;
	}
}

/* three corrections after seeing the rebuilt header rendered:
   1. the title band is full-bleed, so left-aligning put the kicker and title
      hard against the screen edge at x=0 while everything below sits at 30
   2. ~100px still sat between the title and the control row
   3. "Filtrează produsele" wrapped to two lines in a half-width button      */
@media (max-width: 800px) {
	body.tax-product_cat .fg-cat-head,
	body.archive .fg-cat-head {
		padding-inline: 30px !important;
		padding-bottom: 0 !important;
	}
	body.tax-product_cat .fg-catbar,
	body.archive .fg-catbar { margin-top: .6rem !important; }
	.fg-catbar button.wc-block-product-filters__open-overlay {
		white-space: nowrap;
		font-size: .64rem !important;
		letter-spacing: .1em;
	}
}

/* the 86px was neither the title band nor the control row: the products COLUMN
   starts that far below the header, from the columns wrapper's own top margin.
   Measured: title band ends 201, column begins 287. */
@media (max-width: 800px) {
	body.tax-product_cat .entry-content > .wp-block-columns,
	body.archive .entry-content > .wp-block-columns,
	body.tax-product_cat main > .wp-block-columns,
	body.archive main > .wp-block-columns {
		margin-block-start: .5rem !important;
	}
	body.tax-product_cat .wp-block-column > .wc-block-store-notices:empty,
	body.archive .wp-block-column > .wc-block-store-notices:empty { display: none !important; }
}

/* the filter button: glyph pinned, label centred with it, gap to the title closed
   — measured: label span 147px of a 160px button, so the SVG collapsed to 3px */
@media (max-width: 800px) {
	.fg-catbar button.wc-block-product-filters__open-overlay {
		gap: .45rem !important;
		padding-inline: .5rem !important;
	}
	.fg-catbar button.wc-block-product-filters__open-overlay svg {
		width: 16px !important;
		height: 16px !important;
		flex: 0 0 16px !important;
	}
	.fg-catbar button.wc-block-product-filters__open-overlay span {
		flex: 0 0 auto !important;
		white-space: nowrap;
	}
	/* 80px sat between the title and the controls */
	body.tax-product_cat .fg-catbar,
	body.archive .fg-catbar { margin-top: 0 !important; }
	body.tax-product_cat .fg-cat-head,
	body.archive .fg-cat-head { padding-bottom: 0 !important; margin-bottom: 0 !important; }
	body.tax-product_cat .entry-content > .wp-block-columns,
	body.archive .entry-content > .wp-block-columns,
	body.tax-product_cat main > .wp-block-columns,
	body.archive main > .wp-block-columns { margin-block-start: 0 !important; }
	body.tax-product_cat .wp-block-column > .wc-block-store-notices,
	body.archive .wp-block-column > .wc-block-store-notices { margin: 0 !important; }
}

/* ⚠️ The last 56px of the title-to-controls gap was neither a margin nor
   padding: `.wp-block-columns` carries `row-gap: 56px`, and the FIRST column —
   the desktop filter sidebar — is 0px tall on mobile but still occupies a row.
   So the page was paying a full row gap for an empty column. */
@media (max-width: 800px) {
	/* ⚠️ It has to out-specify MY OWN earlier rule,
	   `.wp-block-columns:has(#desktoponly) { gap: 56px !important }`.
	   `:has()` takes the specificity of its argument, so that `#desktoponly`
	   scores it as (1,1,0) — an ID — and a plain two-class selector loses to it
	   however many `!important`s it carries. Matching the same shape. */
	body.tax-product_cat .wp-block-columns:has(#desktoponly),
	body.archive .wp-block-columns:has(#desktoponly),
	body.tax-product_cat .wp-block-columns,
	body.archive .wp-block-columns { row-gap: 0 !important; }
	body.tax-product_cat .wp-block-columns > .wp-block-column:empty,
	body.archive .wp-block-columns > .wp-block-column:empty { display: none !important; }
}


/* =========================================================================
   #29 / #30 — THE CATEGORY CARD'S DELIVERY LINE SITS AT ONE HEIGHT
   26 August 2026. Paul: "put the absolute position of livrare in 2-4 ore on
   the category pages to be the same for each product."

   THE CAUSE. Every card was `flex-direction: column` with the price row on
   `margin-top: auto`, so the PRICE row already shared a baseline across a row
   — but the delivery line simply followed the title, and the title wraps
   2–5 lines at 390px. Measured on /buchete-de-flori/ at 390: 32 cards wrapping
   to 2 lines (2), 3 lines (11), 4 lines (16) and 5 lines (3), which put the
   delivery line at four different heights inside one grid.

   THE FIX is his: a fixed title block. The h3 gets an exact HEIGHT of N lines
   rather than a `min-height`, so the block below it starts at the same offset
   whatever the name does. The name is centred inside that block and clamped to
   N lines.

   ⚠️ N IS DELIBERATE AND IT IS A ONE-LINE CHANGE. 4 lines at ≤599px covers
   29 of the 32 sampled titles; 3 truncate with an ellipsis. 3 lines at ≥600px
   covers all 32 — desktop cards are twice as wide and 27 of 32 fit in two.
   Raise the number here if a clipped name matters more than the whitespace.

   ⚠️ NOT `1lh`, and not a var() inside `-webkit-line-clamp`. `lh` is Safari
   16.4+ and Paul reviews on an iPhone; the 26 August sticky-header bug was
   exactly this mistake with `overflow: clip`. `em` and a literal integer work
   everywhere.

   ⚠️ THE SELECTOR PREFIX IS THE RESERVED TYPE SCALE'S OWN SHAPE, on purpose.
   `html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo p`
   is (0,5,4); anything shorter loses to the scale no matter how many
   `!important`s it carries. Matching it and coming later in the file is the
   plainest way to win. Same reasoning as the block at the head of the scale.
   ========================================================================= */

html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title,
html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title {
	font-size: var(--t-label) !important;
	line-height: 1.7 !important;
	height: calc(4 * 1.7em) !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden;
	margin: 0 0 .1rem !important;
}
html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title a,
html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title a {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	font-size: inherit !important;
	line-height: inherit !important;
}

@media (min-width: 600px) {
	html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title,
	html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title {
		height: calc(3 * 1.7em) !important;
	}
	html body:not(.home):not(.home):not(.home) li.wc-block-product h3.wp-block-post-title a,
	html body:not(.home):not(.home):not(.home) li.wc-block-product h2.wp-block-post-title a {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* #29 — "Livrare în 2-4 ore" was rendering at `--t-label`, uppercase, at
   .16em tracking: THE SAME SIZE AND THE SAME TREATMENT AS THE PRODUCT NAME
   directly above it, on a 150px-wide card. That is why it read as too large —
   it was competing with the name rather than annotating it. It drops one step
   below the label size and loses half its tracking. This is the only place in
   the build that goes under `--t-label`, and it is a badge rather than a
   label, which is why it is scoped to the card and not added to the scale. */
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo p {
	font-size: .6rem !important;
	letter-spacing: .1em !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo {
	gap: .35rem !important;
	margin: .45rem 0 .55rem !important;
	align-items: center !important;
}
/* the img carries an inline `width:31px` from the client's block markup, so
   this needs !important — an inline style beats a plain class rule. */
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo figure,
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo .wp-block-image {
	margin: 0 !important;
	line-height: 0 !important;
}
html body:not(.home):not(.home):not(.home) li.wc-block-product .shipinfo img {
	width: 12px !important;
	height: 12px !important;
}


/* =========================================================================
   THE PRODUCT PAGE — #34, #35, #36, #37, #38, #39
   26 August 2026, Paul's mobile review.
   ========================================================================= */

/* ---- #36 + #37: the two lines between the name and the price -----------
   `div.wp-block-woocommerce-product-meta.codprodus` holds BOTH of his items:
   "✿ Livrare în aceeași zi în București & Ilfov" and "Cod Produs: FG68215".
   Both rendered at `--t-label` — 11.2px, uppercase, .16em tracking — which is
   the same treatment as the product name on a category card, so the delivery
   line wrapped to two lines and the block stood 60px tall between the H1 and
   the price. They are annotations, not headings. One step down, half the
   tracking, and the delivery line now sets on one line at 390.

   ⚠️ COD PRODUS STAYS. Paul asked "who is it for?" — it is for the phone
   order. The site carries a "Comandați la telefon" button on the cart and a
   number in the topbar, and the code is what a customer reads out to whoever
   answers. Removing it would cost that flow its only handle. It gets quieter
   instead: smaller, muted, and on one line. */
html body:not(.home):not(.home):not(.home) .codprodus,
html body:not(.home):not(.home):not(.home) .codprodus p,
html body:not(.home):not(.home):not(.home) .codprodus span,
html body:not(.home):not(.home):not(.home) .codprodus .wc-block-components-product-sku {
	font-size: .62rem !important;
	letter-spacing: .09em !important;
	line-height: 1.6 !important;
}
html body:not(.home):not(.home):not(.home) .codprodus .wc-block-components-product-sku {
	color: var(--fg-faint) !important;
	white-space: nowrap;
}
html body:not(.home):not(.home):not(.home) .codprodus { margin-bottom: .5rem !important; }

/* ---- #34: "Bine de știut" was inset by its own PARENT's padding --------
   Reported four times and each fix aimed one level off. The panel content
   `.inner-alignwide` measured left 60 / width 270 while the body copy above it
   measured left 30 / width 330. Nothing on `.inner-alignwide` was wrong:
   its PARENT, `.inner-fullwidth`, carries `padding: 0 30px` — so the panel was
   paying the page gutter twice.

   The padding is invisible anyway: `.inner-fullwidth` is
   `has-accent-5-background-color`, and accent-5 IS the page cream, so there is
   no panel edge for it to hold away from. Zeroing it lands the panel text on
   the same 30px column as every other paragraph on the page. */
@media (max-width: 900px) {
	.single-product .woocommerce-tabs .inner-fullwidth,
	.single-product .inner-fullwidth {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---- #38: the accordion body ------------------------------------------
   Body copy at 15.2px inside a panel whose own heading is 18.4px reads as one
   undifferentiated wall — and the Livrarea entry alone runs 25 locality names.
   Down to the label-adjacent size with a tighter leading. The FIRST item is
   also closed by default now; that is in `inc/product-after-tabs.php`, because
   `open` is an HTML attribute and no stylesheet can remove it. */
html body:not(.home):not(.home):not(.home) .fg-gtk__a,
html body:not(.home):not(.home):not(.home) .fg-gtk__a p,
html body:not(.home):not(.home):not(.home) .fg-gtk__a li {
	font-size: .82rem !important;
	line-height: 1.62 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
html body:not(.home):not(.home):not(.home) .fg-gtk__acc summary {
	font-size: .95rem !important;
	line-height: 1.4 !important;
}
html body:not(.home):not(.home):not(.home) .fg-gtk__a .localit {
	font-size: .72rem !important;
	line-height: 1.55 !important;
}

/* ---- #35: the "extra-bucurie" cross-sell -------------------------------
   WPC Bought Together (`.woobt-*`). Each of the four products rendered as a
   259px stack — a 15px bare checkbox on its own line, a 90px thumbnail, the
   name, then the price — so a four-item cross-sell occupied 1,072px of a
   390px-wide screen. It is a list, so it is laid out as one: a real tap-sized
   checkbox, a 64px thumbnail, the name, the price on the right. */
/* ⚠️ `.woobt-products` is a GRID from the plugin, with `grid-auto-rows` tall
   enough for the old stacked card — so every row still measured 156px after
   the row layout went in and the fix read as not working. It becomes a plain
   block; the rows then size to their own content. Same shape as the 26 August
   rule: measure the child AND the parent. */
.woobt-products {
	display: block !important;
	grid-template-columns: none !important;
	grid-auto-rows: auto !important;
	gap: 0 !important;
}
.woobt-products .woobt-product {
	box-sizing: border-box !important;
	min-height: 0 !important;
	height: auto !important;
	display: flex !important;
	/* ⚠️ The plugin sets `flex-direction: column` on this element, so
	   `display: flex` alone left the four children stacked exactly as before —
	   the row measured 177px and read as "the fix did nothing". */
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: .7rem !important;
	padding: .6rem .7rem !important;
	margin: 0 0 .5rem !important;
	border: 1px solid var(--fg-line) !important;
	background: var(--fg-surface) !important;
	text-align: left !important;
	float: none !important;
	width: 100% !important;
}
.woobt-products .woobt-product > .woobt-choose {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}
.woobt-products .woobt-checkbox {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	accent-color: var(--fg-plum);
	cursor: pointer;
}
.woobt-products .woobt-product > .woobt-thumb {
	flex: 0 0 64px !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #fff;
}
.woobt-products .woobt-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	margin: 0 !important;
}
.woobt-products .woobt-product > .woobt-title {
	flex: 1 1 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}
html body:not(.home):not(.home):not(.home) .woobt-products .woobt-title,
html body:not(.home):not(.home):not(.home) .woobt-products .woobt-title a {
	font-family: var(--fg-sans) !important;
	font-size: .82rem !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	font-weight: 400 !important;
}
.woobt-products .woobt-qty-num { color: var(--fg-faint); }
.woobt-products .woobt-product > .woobt-price {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right !important;
	justify-content: flex-end !important;
	white-space: nowrap;
}
html body:not(.home):not(.home):not(.home) .woobt-products .woobt-price,
html body:not(.home):not(.home):not(.home) .woobt-products .woobt-price * {
	font-size: 1rem !important;
	line-height: 1.3 !important;
}
.woobt-products .woobt-availability:empty { display: none !important; }
/* the wrapper's own heading and the "descopera toata colectia" line */
html body:not(.home):not(.home):not(.home) .woobt-wrap .woobt-text {
	font-size: .62rem !important;
	letter-spacing: .16em !important;
	margin-bottom: .7rem !important;
}

/* ---- #39: the breadcrumb ----------------------------------------------
   Five segments, uppercase, .16em tracking, ending in the full product name —
   95px and five lines at 390px, immediately above an H1 that says the same
   thing. Paul: "nothing differentiated, lots of line breaks, unclear how it
   helps for context or navigation."

   The trail is rebuilt in `inc/breadcrumb.php`: on a phone it becomes a single
   back-link to the PARENT category, which is the only navigation a breadcrumb
   on a phone is actually used for; on desktop the full trail stays, on one
   line, without the current page's own name. The BreadcrumbList schema is
   emitted separately by All in One SEO (two JSON-LD blocks on this page), so
   nothing here touches what Google reads. */
html body:not(.home):not(.home):not(.home) nav.woocommerce-breadcrumb,
html body:not(.home):not(.home):not(.home) nav.woocommerce-breadcrumb a,
html body:not(.home):not(.home):not(.home) nav.woocommerce-breadcrumb .fg-crumb-sep {
	font-size: .62rem !important;
	letter-spacing: .08em !important;
	line-height: 1.6 !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
}
html body:not(.home):not(.home):not(.home) nav.woocommerce-breadcrumb a { color: var(--fg-muted) !important; }
html body:not(.home):not(.home):not(.home) nav.woocommerce-breadcrumb a:hover { color: var(--fg-plum) !important; }
/* ⚠️ IT WRAPS, IT DOES NOT TRUNCATE. Every segment Alexandra's list asks to be
   preserved is visible on every screen — the earlier version hid the trail
   below 768px and showed a single back-link instead, and although every link
   was still in the HTML and the schema was untouched, "preserved" should not
   need a paragraph of explanation. Small type does the same job: 95px and five
   lines at 390 becomes about 30px and two. */
nav.woocommerce-breadcrumb {
	display: block;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
nav.woocommerce-breadcrumb .fg-crumb-sep { padding: 0 .15em; }


/* ---- #46: the "added to cart" banner -----------------------------------
   26 August 2026. Paul: "Added to cart banner line breaks are terrible."
   WooCommerce puts the message and the "Continuă cumpărăturile" button in the
   SAME flow container, so the button is an inline box inside a wrapping
   paragraph: the sentence broke around it and the button landed mid-line. It
   measured 95px at 390 with the text broken across the button.
   The content becomes a column — sentence, then button — and the button is
   sized to its own text rather than to whatever gap the line left it. */
.wc-block-components-notice-banner {
	align-items: flex-start !important;
	gap: .7rem !important;
}
.wc-block-components-notice-banner > svg { flex: 0 0 auto; margin-top: .1rem; }
.wc-block-components-notice-banner__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: .7rem !important;
	min-width: 0;
}
html body:not(.home):not(.home):not(.home) .wc-block-components-notice-banner__content {
	font-size: .88rem !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
.wc-block-components-notice-banner__content > .button,
.wc-block-components-notice-banner__content > a.wc-forward {
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	white-space: nowrap;
}


/* ---- #21: the card marks and the ANPC/SAL badges share a line -----------
   26 August 2026. Paul: "Cards on their own line, ANPC + SAL on a separate
   line."

   `.fg-basebar__marks` is one wrapping flex row of three items — the
   Visa/Mastercard strip and the two legal badges — and at 390px the wrap fell
   between the two BADGES rather than between the payment marks and the legal
   ones. So "Carduri acceptate" labelled a row containing the ANPC badge, which
   is a different claim entirely: those two are consumer-dispute marks the law
   requires, not payment methods.

   The card strip is given the whole first line. The wrap then falls where it
   means something, at any width, without a media query.

   🔴 THE FIRST VERSION OF THIS WAS WRONG AND PAUL CAUGHT IT ON HIS PHONE:
   "you made the cards image INCREDIBLY stretched." It forced the line break with
   `flex: 0 0 100%` ON THE IMAGE — and a flex-basis of 100% sets the IMAGE'S OWN
   BOX to the full row, so a 96px logo strip rendered at 322px on a phone and
   1,212px on a desktop. **A line break is a property of the CONTAINER, not of
   the item you want alone on a line.** The break is an empty `::after` now and
   every mark keeps its natural size. */
.fg-basebar__marks {
	row-gap: .9rem;
	align-items: center;
}
.fg-basebar__marks > img.fg-pay {
	order: 0;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
/* the break itself: no width, no height, just a full-basis flex item that
   nothing can sit beside */
.fg-basebar__marks::after {
	content: "";
	order: 1;
	flex: 0 0 100%;
	height: 0;
	margin: 0;
}
.fg-basebar__marks > a { order: 2; flex: 0 0 auto; }


/* ---- #63: search-result images enormous on desktop ---------------------
   26 August 2026. Mobile was fixed earlier in the day (158px cards, two up);
   the desktop half was never re-measured, so this closes the other half of it.

   THE CAUSE IS THE MISSING SIDEBAR. A category page runs three columns inside
   the width left over after the 220px filter sidebar — 281px cards at 1280.
   The search template has no sidebar, so the same three-column rule spread
   across the whole 1,300px canvas and produced 373px cards: a third larger
   than the identical card one click away.

   Four columns on search only, which lands the card at ~302px — within 20px of
   the category grid, and the two pages stop looking like different sites. */
@media (min-width: 1000px) {
	body.search .wp-block-woocommerce-product-collection .wc-block-product-template,
	body.search .wc-block-product-template.is-flex-container,
	body.search .wc-block-product-template__responsive,
	body.search ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}


/* =========================================================================
   #66 — THE THREE BLOCKS UNDER THE PRODUCT WERE THREE DIFFERENT DESIGNS
   26 August 2026. Paul, on FG67640: "we have 3 wildly different text sizes in
   the 3 sections on this product... not random small and then large text
   sizing and colour changes. It looks very unprofessional and ugly, certainly
   not premium."

   MEASURED ON THAT PRODUCT, top to bottom:

     .fg-pdp-note (Info + the ✱ list)   11.2px   muted   sans
     the Client's paragraph             16px     #7d3281 sans   ← INLINE STYLE
     .gtntitle "Bine de știut:"         30.4px   ink     serif
     .fg-gtk__acc summary               15.2px   ink     serif
     .fg-gtk__a (accordion body)        13.12px  muted   sans

   **Five sizes, three colours and two families in one stack**, and one of the
   colours is a magenta that appears nowhere else in the design.

   ⚠️ TWO OF THE FIVE COME FROM THE CLIENT'S OWN MARKUP, not from this build,
   which is why no amount of tidying the stylesheet had reached them:
     · the paragraph carries `style="font-size:16px;color:#7d3281;"` inline, so
       only `!important` can beat it;
     · his `triumf-wc-adons` plugin injects a `<style>` block on the page
       setting `h3.gtntitle { font-family: platypi; font-weight: 200;
       font-size: 1.75rem }`.
   Nothing of his COPY is touched — this is presentation only.

   THE SYSTEM, and it is the one already used higher up the same page:
     section head  → label size, uppercase, .16em, muted   (matches
                     `.fg-composition__heading`, i.e. "DESCRIERE")
     prose         → --t-body, ink, 1.7 leading
     row label     → --t-body, weight 600, ink, sans
     small print   → label size, muted
   ========================================================================= */

/* ---- section head: "Bine de știut:" reads like "DESCRIERE" -------------- */
html body.single-product:not(.home):not(.home):not(.home) h3.gtntitle,
html body.single-product:not(.home):not(.home):not(.home) .gtntitle {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	font-weight: 500 !important;
	font-style: normal !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	line-height: 1.5 !important;
	margin: 0 0 .9rem !important;
}

/* ---- prose: the Client's paragraph, and the accordion bodies ------------ */
html body.single-product:not(.home):not(.home):not(.home) .fg-after-tabs,
html body.single-product:not(.home):not(.home):not(.home) .fg-after-tabs > div,
html body.single-product:not(.home):not(.home):not(.home) .fg-after-tabs p,
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a,
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a p,
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a li {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-body) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.7 !important;
	color: var(--fg-ink) !important;
}
/* the bold runs inside his copy stay bold and stay the same size */
html body.single-product:not(.home):not(.home):not(.home) .fg-after-tabs b,
html body.single-product:not(.home):not(.home):not(.home) .fg-after-tabs strong,
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a b,
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a strong {
	font-size: inherit !important;
	color: var(--fg-ink) !important;
	font-weight: 600 !important;
}
/* the locality list is genuinely small print and stays one step down */
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__a .localit {
	font-size: var(--t-label) !important;
	line-height: 1.6 !important;
	color: var(--fg-muted) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	display: block;
	margin-top: .7rem;
}

/* ---- the accordion rows: labels, not headings --------------------------- */
html body.single-product:not(.home):not(.home):not(.home) .fg-gtk__acc summary {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-body) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	line-height: 1.5 !important;
}

/* ---- small print: the Info disclaimer and its ✱ list -------------------- */
html body.single-product:not(.home):not(.home):not(.home) .fg-pdp-note,
html body.single-product:not(.home):not(.home):not(.home) .fg-pdp-note p,
html body.single-product:not(.home):not(.home):not(.home) .fg-pdp-note .greencheck {
	font-family: var(--fg-sans) !important;
	font-size: var(--t-label) !important;
	line-height: 1.75 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-muted) !important;
}

/* ⚠️ AND THE FIRST VERSION OF THIS BLOCK DID NOTHING AT ALL, because every
   selector read `body:not(.home)... .single-product` — a DESCENDANT with that
   class. `single-product` is a class ON THE BODY. Nothing on the page matched
   and all five sizes stayed exactly as measured. Caught by re-measuring rather
   than by reading, which is the only way this kind of miss ever surfaces. */


/* ---- #22: the consent tab floats over the page on every screen ---------
   26 August 2026. Paul, twice, and the second time with a screenshot:
   "The consent widget floats oddly and covers content."

   MEASURED: `#cookie-law-info-again` is `position: fixed; bottom: 0;
   left: 96px; z-index: 9999`, 194×33 — WebToffee's "reopen preferences" tab,
   parked over the bottom-centre of every page at every width. It is the thing
   sitting on top of the content in every screenshot he has sent today.

   ⚠️ IT IS NOT DELETED, AND THAT IS DELIBERATE. A visitor has to be able to
   reopen consent preferences after accepting; removing the control is a
   compliance problem, not a design win. **It is un-fixed instead** — the
   plugin already renders it inside `.wt-cli-cookie-bar-container`, which is the
   last element in the body, below the footer. Taking `position: fixed` off it
   drops it exactly there: still present, still one tap, covering nothing.

   ⚠️ The plugin's own configuration is still `asks.md` #2 — Ștefan can switch
   the tab off in its settings and this rule becomes redundant rather than
   load-bearing. Nothing here depends on him doing it. */
/* ⚠️ Hidden ONLY once `inc/consent-link.php` has actually built the footer
   link — the class is added by that script, after the link is in the DOM. If
   the footer ever changes shape the tab stays, because a site with no way to
   withdraw consent is a compliance problem and a layout change must not be
   able to cause one. */
html.fg-consent-docked #cookie-law-info-again { display: none !important; }

/* 🔴 AND NEITHER CAN THE BAR. Paul's second screenshot showed the consent bar
   itself — "Prețuim confidențialitatea dumneavoastră", Personalizeaza, Accepta
   — set as ordinary page flow BELOW the footer, at the exact offset of
   `.wt-cli-cookie-bar-container` (measured: 0,11670 on an 11,670px document).
   That is what the bar looks like with `position: fixed` missing, i.e. with
   `cookie-law-info-public.css` not applied.

   The stylesheet is in the head and the bar measures `fixed` 500x214 on a
   fresh load now. This is the floor under that: whatever arrives, is combined,
   is deferred or fails, the consent bar is a fixed overlay and never a wall of
   text at the end of the page. Its size and placement still come from the
   plugin — only the one property that decides flow-vs-overlay is pinned. */
#cookie-law-info-bar {
	position: fixed !important;
	z-index: 99999 !important;
}

/* 🔴 THE MODAL CAN NEVER RENDER AS PAGE FLOW, whatever loads or does not.
   The plugin's own `display:none` lives in `cookie-law-info-public.css`; this
   is the belt for it, so a stripped, combined or failed stylesheet cannot turn
   the privacy panel into the wall of text Paul photographed. `.cli-show` is
   the plugin's own open state, so nothing here can hold the panel shut. */
.cli-modal:not(.cli-show) {
	display: none !important;
	visibility: hidden !important;
}

/* ⚠️ `display: block !important` USED TO BE IN THIS RULE AND IT WAS A BUG.
   The plugin prints the tab as `<div id="cookie-law-info-again"
   style="display:none;">` and reveals it itself, only once a choice has been
   made — so forcing it visible showed a "Preferințe de consimțământ" tab to
   people who had never consented to anything. The footer link is the control
   now; the plugin decides when its own tab exists. */
#cookie-law-info-again {
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 1.1rem 1rem 1.4rem !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center !important;
	cursor: pointer;
}
#cookie-law-info-again #cookie_hdr_showagain,
#cookie-law-info-again span {
	font-family: var(--fg-sans) !important;
	font-size: .62rem !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	line-height: 1.5 !important;
	text-decoration: underline;
	text-underline-offset: .35em;
	text-decoration-color: var(--fg-line-2);
}
#cookie-law-info-again:hover span { color: var(--fg-plum) !important; }
.wt-cli-cookie-bar-container { background: var(--fg-bg); }


/* =========================================================================
   THE HEADER CONTROL ROW — ONE ORDER, ONE SIZE, ONE GAP, EVERY PAGE
   26 August 2026. Paul: "invert the search and the phone on every page, so the
   order is phone > search > hamburger > cart… make sure that they're all right
   aligned, same spacing between them, on every page. only the cart and
   checkout remove the cart icon, and everything shifts over one position."

   MEASURED BEFORE, at 390:

     /                search 178–217 · phone 221–261 · menu 265–309 · cart 313–357
     /cart/           search 178–222 · phone 265–309 · menu 313–357 · cart hidden
                                       ↑ a stray 38.6px left margin of mine

   Three separate inconsistencies in one row: the order was wrong everywhere,
   the control widths differed between page types (39/40px on a normal page
   against 44px on the money pages, because the sizing rule lived in a
   stylesheet that only loads on two of them), and the phone carried a margin
   from an earlier fix that nothing else had.

   ⚠️ THE SHIFT IS `order`, NOT A SECOND SET OF RULES. With the row right-
   aligned and every control the same size, hiding the cart icon on the cart and
   the checkout moves the rest along by itself. There is no cart-page variant of
   this block and there must not be one — that is exactly how the two headers
   drifted apart in the first place.


   🔴 AND IT IS SCOPED TO ≤800px, WHICH THE FIRST VERSION WAS NOT. Paul, within
   minutes: "the nav is all fucked up on desktop now. there's a hamburger menu
   there, why? You screwed up the nav on desktop on every page (including cart
   and checkout) by adding mobile stuff."

   He is right and the cause is one word: `display`. The sizing rule forced
   `display: inline-flex !important` onto the hamburger toggle and the phone
   figure to make them 44px targets — **and those two are exactly the controls
   the theme HIDES above 800px**, where the horizontal nav takes over. Forcing
   a display value overrode the rule that hid them, so a mobile hamburger
   appeared beside a full desktop menu on every page.

   **800px is the theme's own header breakpoint** — `theme.css:6206`, `:6235`
   and `:6278` all switch the masthead's mobile controls there. This block now
   uses the same number rather than inventing one.

   ⚠️ NEVER FORCE `display` ON A CONTROL A BREAKPOINT HIDES. If a rule needs to
   set display to do its job, it belongs inside the media query where that
   control is actually shown.

   ⚠️ AND IT LIVES IN theme.css ON PURPOSE. It is a site-wide component. Half of
   it used to sit in `checkout.css`, which loads on two pages, and that is why
   the money pages ended up with a header the rest of the site did not have. */

@media (max-width: 800px) {
	.masthead .wp-block-group.is-content-justification-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		/* whole pixels, not .35rem — a fractional gap rounds to 5px between one
		   pair and 6px between the next, which is visible on a row of four. */
		gap: 6px !important;
		padding-right: 0 !important;
	}
	/* nothing carries its own spacing — the row owns the gap */
	.masthead .wp-block-group.is-content-justification-right > * {
		margin: 0 !important;
		flex: 0 0 auto !important;
	}

	/* phone · search · hamburger · cart */
	.masthead .wp-block-group.is-content-justification-right > figure.mobileonly { order: 1; }
	.masthead .wp-block-group.is-content-justification-right > .wp-block-search   { order: 2; }
	.masthead .wp-block-group.is-content-justification-right > nav,
	.masthead .wp-block-group.is-content-justification-right > .wp-block-navigation { order: 3; }
	.masthead .wp-block-group.is-content-justification-right > .wc-block-mini-cart,
	.masthead .wp-block-group.is-content-justification-right > .wp-block-woocommerce-mini-cart { order: 4; }

	/* one target size for all four, on every page.
	   ⚠️ 44px is the tap-target floor, and the glyph inside it is 22px — the same
	   pair `#1` established for the rest of the header. The phone figure needed it
	   spelled out because the checkout header's block instance carries `mobileonly`
	   WITHOUT `mobiletel`, so the original rule matched it on some pages and not
	   others. */
	.masthead .wp-block-group.is-content-justification-right > figure.mobileonly,
	.masthead .wp-block-group.is-content-justification-right > figure.mobileonly > a,
	.masthead .wp-block-group.is-content-justification-right > .wp-block-search .wp-block-search__button,
	.masthead .wp-block-group.is-content-justification-right > nav .wp-block-navigation__responsive-container-open,
	.masthead .wp-block-group.is-content-justification-right > .wc-block-mini-cart .wc-block-mini-cart__button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
		min-height: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.masthead .wp-block-group.is-content-justification-right > figure.mobileonly img,
	.masthead .wp-block-group.is-content-justification-right .mobileonly img {
		width: 22px !important;
		height: 22px !important;
		margin: 0 !important;
	}
}

/* the "Livrare azi" chip butts straight against the last nav item on desktop —
   "FUNERARE ⌄LIVRARE AZI" with no space between them. It sits in the header's
   right-hand group, which above 800px holds only the chip and the cart. */
@media (min-width: 801px) {
	.masthead .fg-deliver-chip { margin-left: 1.4rem !important; }
}

/* 🔴 AND THE MARGIN ABOVE WAS NEVER ENOUGH BETWEEN 1260 AND 1440. 17 Sep 2026.
   "FUNERARE" and "LIVRARE AZI" print ON TOP of each other at 1280. Logged as
   pre-existing under "Still open" in CHANGELOG.md since launch week, confirmed
   on LIVE, not a staging artefact.

   THE ARITHMETIC. The block at ~425 gives the nav its own centred row up to
   1259 and hides the chip there, so the collision cannot happen below 1260.
   From 1260 the nav sits BESIDE the logo and the chip comes back — and the
   nine items need 861px where the row has less than that until about 1355.
   Measured slack from the last nav item to the chip: -73px at 1280, -13px at
   1340, +7px at 1360. The band is 1260-1355 and it is three years of laptops.

   ⚠️ WHY THIS IS A SEPARATE RULE RATHER THAN max-width: 1439 ON THAT BLOCK.
   That block does not just hide the chip; it rewrites the whole masthead into
   two rows. Widening it would move the nav onto its own centred row on every
   1366 laptop — a visible relayout nobody asked for, to fix an overlap. This
   hides ONE element, changes no layout, and leaves the single-row design
   exactly as designed.

   THE COST, AND IT IS SMALL. "Livrare azi" disappears from the header between
   1260 and 1439. The same promise is already in the topbar on every page
   ("LIVRARE ÎN ACEEAȘI ZI ÎN BUCUREȘTI & ILFOV") and again in the footer trust
   strip, so nothing is lost that is not said twice elsewhere on the screen.
   An overprinted word says nothing at all.

   ▶ Raised now because Alexandra's menu change replaces "Sf. Maria" (72px)
   with "flori de toamna" (129px), which widens the broken band to 1260-1425
   and pulls 1366 into it. Verified with the real theme: +23px at 1280, +29px
   at 1366, +30px at 1440, clean to 1920. */
@media (min-width: 601px) and (max-width: 1439px) {
	.masthead .fg-deliver-chip { display: none !important; }
}


/* ---- THE PROMO POPUP: THREE ROUNDS, AND THE THIRD IS THE HONEST ONE -----
   26 August 2026.

   ROUND 1 — Paul: "WOAH the coupon pop-up is totally broken on desktop… This
   is several scrolls worth of content." Measured: layout 340 × 3195, image
   320 × 3022 from a 501 × 507 source. Two rules of mine, both written for a
   phone and neither scoped to one — `max-width: 340px` at EVERY width, and the
   image hidden at ≤600px ONLY.

   ROUND 2 — the corrected rules were in the served file and did not apply.
   That was the stray `}` at line 1551, and fixing it **switched on a block of
   CSS that had never run**, which is why the next screenshot was a different
   shape of broken rather than a fix.

   ROUND 3, and this is the actual mechanism. Paul: "What have you done to
   this." One character per line, measured:

       .hustle-layout-content   418px   display: FLEX, row      ← Hustle's
       .hustle-content-wrap      14px                           ← collapsed
       .hustle-group-content     14px
       each <p>                  14px

   **`.hustle-layout-content` is a flex ROW.** It exists to put the coupon image
   beside the text. A flex item has `min-width: auto` and will not shrink below
   its content — except a paragraph's min-content is one character wide, so the
   text column collapsed to 14px and set vertically, one letter per line, 2,137px
   tall. **Nothing of mine caused that shape; my `width: auto` on the image let
   the row reflow into it.**

   THE FIX, and it is also what he asked for: **the coupon sticker goes, at
   every width.** It is a stock red -5% graphic on a site whose whole direction
   is the opposite of that, the headline already says 5%, and it is the only
   reason the content row is a row at all. With it gone the layout is a single
   column and cannot collapse. The row is forced to `block` as well, so the same
   thing cannot happen if his team re-enables the image in Hustle.

   ⚠️ The image is HIDDEN, not deleted — it is still his module's asset and one
   line brings it back. If it ever returns, the cap below keeps it a badge. */

/* the sticker, at every width */
#hustle-popup-id-1 .hustle-image,
#hustle-popup-id-1 .hustle-layout-content img {
	display: none !important;
}

/* one column, whatever the module is configured to show */
#hustle-popup-id-1 .hustle-layout-content {
	display: block !important;
	text-align: center;
}
#hustle-popup-id-1 .hustle-content-wrap,
#hustle-popup-id-1 .hustle-group-content {
	width: auto !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	display: block !important;
}
#hustle-popup-id-1 .hustle-group-content p { width: auto !important; }

@media (min-width: 601px) {
	#hustle-popup-id-1 .hustle-layout {
		max-width: 420px !important;
		max-height: 86vh !important;
		overflow-y: auto !important;
	}
}

/* if the image is ever switched back on, it is a badge and not a poster */
#hustle-popup-id-1 .hustle-image img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 96px !important;
	object-fit: contain !important;
	margin: 0 auto !important;
}

/* the coupon image left ~77px of empty band behind it — the first paragraph
   carries a top margin sized for sitting under a picture. */
#hustle-popup-id-1 .hustle-content { padding-top: 0 !important; }
#hustle-popup-id-1 .hustle-group-content > *:first-child { margin-top: 0 !important; }


/* =========================================================================
   THE PROMO POPUP — THE WHOLE COMPONENT, SPECIFIED

   26 August 2026. Paul: "The pop-up is better but the spacing of everything is
   very strange. Can you make it look more like the mockup? Also the x to exit
   is outside of the popup."

   ⚠️ WHY THIS BLOCK EXISTS AT ALL, RATHER THAN A FOURTH PATCH. This module has
   been touched in three separate sessions and the rules are scattered across
   four places in this file — a recolour, then a restructure, then the desktop
   repair. **That is why the spacing reads as strange: nothing ever specified
   the whole thing, so each pass fixed one measurement and left the rest to
   whatever Hustle's own stylesheet said.** This block sets every value for
   every element in the module, so there is one place to read and one place to
   change. It is last in the file, so it wins on source order.

   THE ELEMENTS, in document order, with what each one is:

     .hustle-popup-mask      the backdrop
     .hustle-layout          the card — the positioning context for the ✕
     button.hustle-button-close   the ✕, INSIDE the card
     .hustle-layout-header   wrapper — title + subtitle
       h3.hustle-title       "Ai auzit de campania de reduceri?"
       h4.hustle-subtitle    "Nu vrei sa ratezi aceasta oferta!"
     .hustle-layout-content  wrapper — three paragraphs, three roles
       p:nth-of-type(1)      eyebrow  — "Beneficiaza de oferta de reduceri!"
       p:nth-of-type(2)      the offer — the only line that matters
       p:nth-of-type(3)      terms    — fine print
     .hustle-layout-footer   wrapper — the CTA
       a.hustle-button-cta   "Aplica voucherul"

   THE VERTICAL RHYTHM, one gutter of 30px and six steps inside it:

     30  ┬ card top
         │ TITLE          serif, --t-medium, ink
      6  │ subtitle       sans,  --t-body,  muted
     22  │ ───── rule ─────  1px --fg-line
     18  │ EYEBROW        sans,  --t-label, uppercase .16em, muted
     10  │ the offer      sans,  --t-body,  ink   (promo5 = a token)
     12  │ terms          sans,  .72rem,    faint
     22  │ [ APLICA VOUCHERUL ]   plum, square, 46px
     30  ┴ card bottom

   Every size is from the reserved scale and every colour from the four the
   build uses. Nothing here invents a value.
   ========================================================================= */

/* --- 1. the backdrop ---------------------------------------------------- */
#hustle-popup-id-1 .hustle-popup-mask {
	background: rgba(32, 24, 15, .55) !important;
}

/* --- 2. the card -------------------------------------------------------- */
#hustle-popup-id-1 .hustle-layout {
	position: relative !important;
	width: min(380px, calc(100vw - 32px)) !important;
	max-width: min(380px, calc(100vw - 32px)) !important;
	max-height: 86vh !important;
	overflow-y: auto !important;
	margin: auto !important;
	background: var(--fg-bg) !important;
	border: 1px solid var(--fg-line-2) !important;
	border-radius: 0 !important;
	box-shadow: 0 18px 60px rgba(32, 24, 15, .22) !important;
}
#hustle-popup-id-1 .hustle-main-wrapper,
#hustle-popup-id-1 .hustle-info {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* --- 3. the ✕, INSIDE the card ------------------------------------------
   It was rendering on the backdrop, up and to the right of the card, because
   Hustle positions it against `.hustle-popup-content` — the full-viewport
   overlay — not against the card. Anchoring it needs BOTH halves: the card is
   the positioning context (above), and the button is absolute within it. */
#hustle-popup-id-1 .hustle-button-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--fg-muted) !important;
	opacity: 1 !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#hustle-popup-id-1 .hustle-button-close:hover { color: var(--fg-plum) !important; }
#hustle-popup-id-1 .hustle-button-close svg,
#hustle-popup-id-1 .hustle-icon-close {
	width: 13px !important;
	height: 13px !important;
	font-size: 13px !important;
}

/* --- 4. header wrapper: the top of the 30px gutter ----------------------- */
#hustle-popup-id-1 .hustle-layout-header {
	padding: 30px 30px 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
}

/* --- 5. the title: the only serif in the card --------------------------- */
#hustle-popup-id-1 .hustle-title {
	font-family: var(--fg-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	/* the ✕ sits at right 10 + 32 wide; keep the headline clear of it */
	padding-right: 30px !important;
}

/* --- 6. the subtitle: a sub-line, not a second heading ------------------- */
#hustle-popup-id-1 .hustle-subtitle {
	font-family: var(--fg-sans) !important;
	font-size: .95rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-muted) !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
}

/* --- 7. content wrapper, and the rule that opens it ---------------------- */
#hustle-popup-id-1 .hustle-layout-content {
	display: block !important;
	padding: 0 30px !important;
	margin: 22px 0 0 !important;
	border-top: 1px solid var(--fg-line) !important;
	text-align: left !important;
}
#hustle-popup-id-1 .hustle-content,
#hustle-popup-id-1 .hustle-content-wrap,
#hustle-popup-id-1 .hustle-group-content {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

/* --- 8. the eyebrow: the label treatment used site-wide ------------------ */
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(1),
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(1) strong,
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(1) span {
	font-family: var(--fg-sans) !important;
	font-size: .7rem !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	text-decoration: none !important;
}
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(1) {
	margin: 18px 0 0 !important;
	padding: 0 !important;
}

/* --- 9. the offer: the only line that matters --------------------------- */
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(2) {
	font-family: var(--fg-sans) !important;
	font-size: .95rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-ink) !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(2) strong {
	font-weight: 600 !important;
	font-size: inherit !important;
	color: var(--fg-ink) !important;
}
/* --- 10. `promo5` is a token, not bold text ----------------------------- */
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(2) strong:first-of-type {
	display: inline-block !important;
	font-size: .78rem !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--fg-plum) !important;
	border: 1px dashed var(--fg-line-2) !important;
	padding: 2px 8px !important;
	margin: 0 2px !important;
	line-height: 1.4 !important;
}

/* --- 11. the terms: fine print ------------------------------------------ */
#hustle-popup-id-1 .hustle-group-content p:nth-of-type(3) {
	font-family: var(--fg-sans) !important;
	font-size: .72rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--fg-faint) !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

/* --- 12 + 13. the footer and the CTA ------------------------------------
   Identical to `.prodtplbutton` and `.wp-block-button__link` — .64rem, .2em,
   uppercase, weight 500, square. A button that is unique to one popup is how
   a design system starts leaking. */
#hustle-popup-id-1 .hustle-layout-footer {
	padding: 22px 30px 30px !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}
#hustle-popup-id-1 .hustle-cta-container { margin: 0 !important; padding: 0 !important; }
#hustle-popup-id-1 .hustle-button-cta,
#hustle-popup-id-1 a.hustle-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 46px !important;
	padding: 0 1rem !important;
	margin: 0 !important;
	font-family: var(--fg-sans) !important;
	font-size: .64rem !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: var(--fg-plum) !important;
	border: 1px solid var(--fg-plum) !important;
	border-radius: 0 !important;
	text-decoration: none !important;
}
#hustle-popup-id-1 .hustle-button-cta:hover,
#hustle-popup-id-1 a.hustle-button:hover {
	background: transparent !important;
	color: var(--fg-plum) !important;
}

/* ---------- the wedding lead-time disclaimer ---------------------------
   Ștefan, 30 August 2026: the wedding category needs at least a day's notice,
   so the `Livrare în 2-4 ore` badge came off its ten pages and this took its
   place. The markup and the reasoning are in inc/lead-time-notice.php.

   IT SITS BETWEEN `.fg-cat-head` AND `.wp-block-columns`, which means it is
   OUTSIDE the head and therefore full-bleed — the head carries its own inline
   padding and this does not inherit it. Both the desktop and the mobile rule
   below exist to put it back on the same left edge as everything around it.

   ⚠️ SENTENCE CASE ON PURPOSE. Every other quiet line on this site is .16em
   uppercase, and this one is two sentences of instruction rather than a label.
   Uppercase at that length is a wall; the customer has to actually read it. */
.fg-lead-note {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: 1.1rem var(--wp--preset--spacing--50, 2rem) 0;
	text-align: center;
}
html body:not(.home):not(.home):not(.home) .fg-lead-note__text {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	max-width: 62ch;
	margin: 0 auto !important;
	padding: .7rem 1.1rem;
	font-family: var(--fg-sans) !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
	font-style: normal !important;
	letter-spacing: .01em !important;
	line-height: 1.6 !important;
	text-transform: none !important;
	text-align: left;
	color: var(--fg-ink) !important;
	background: #FBF8F2;
	border: 1px solid var(--fg-line);
}
html body:not(.home):not(.home):not(.home) .fg-lead-note__mark {
	color: var(--fg-plum) !important;
	font-size: .9rem !important;
	flex: 0 0 auto;
}

/* the product page's promise, when it is the opposite promise. Same slot and
   same scale as .fg-pdp-ship — only the mark goes from plum to ink so the line
   does not read as a perk. */
.single-product .fg-pdp-ship--lead span { color: var(--fg-ink); }

@media (max-width: 800px) {
	.fg-lead-note {
		padding: .6rem 30px 0 !important;
		text-align: left !important;
	}
	html body:not(.home):not(.home):not(.home) .fg-lead-note__text {
		display: flex;
		font-size: .76rem !important;
		padding: .6rem .8rem;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   6 SEPTEMBER 2026 — Alexandra's round. Four items, all display-only.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. THE BLACK BOX ON CLICK ---------------------------------
   Alexandra, 4 Sept: "when selecting the logo for returning to the homepage
   or when clicking on categories in the menu, a black outline appears around
   the logo/selected category when you click on it. Could we remove the
   outline?"

   MEASURED, not guessed: focusing `.custom-logo-link` and
   `.masthead .wp-block-navigation-item__content` computes
   `outline: solid 2px rgb(0, 95, 204)` — **the browser's own default ring.**
   The theme styles focus on inputs, the search box and two buttons, and has
   never styled it on the logo or the nav, so nothing of ours was overriding
   the default.

   ⚠️ IT IS NOT REMOVED, IT IS MOVED TO `:focus-visible`. Deleting the ring
   outright takes the keyboard ring with it and leaves anyone tabbing the menu
   with no idea where they are. `:focus-visible` is the distinction she is
   actually describing: a mouse click shows nothing, Tab shows the ring. The
   plum ring matches the one already on `.fg-acc__toggle` and the homepage
   buttons, so this is the site's existing treatment applied where it was
   missing rather than a new one.

   Both halves are needed. Chrome and Safari disagree about whether a clicked
   <a> is :focus-visible, and she is on the browser that says yes. */
.masthead a:focus,
.masthead button:focus,
.topbar a:focus,
.custom-logo-link:focus,
.wp-block-site-logo a:focus,
.mastfooter a:focus {
	outline: none;
}
.masthead a:focus-visible,
.masthead button:focus-visible,
.topbar a:focus-visible,
.custom-logo-link:focus-visible,
.wp-block-site-logo a:focus-visible,
.mastfooter a:focus-visible {
	outline: 2px solid var(--fg-plum);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- 2. THE PRODUCT TITLE, AND WHY IT IS NOT ONE THIRD ----------
   Alexandra, 4 Sept: "display product title way smaller but still H1 - i'd
   capitallize the title and make it 1/3 from current size."

   ⚠️ ONE THIRD IS NOT WHAT HER OWN MOCKUP SHOWS, AND ONE THIRD DOES NOT WORK.
   The title is 2.9rem, so a literal third is 0.97rem — **below the 0.95rem
   body copy on the same page**, which would make the product's name the
   smallest heading on the site and smaller than the sentence under it.

   Measured off her attached mockup instead, at 200dpi:
     title band        34px tall, all caps, no descenders  → cap height
     description band  34px tall, ascender to descender
   A serif cap height is ~0.70em and ascender-to-descender ~0.98em, so the two
   sizes are ~48.6px and ~34.7px: **a ratio of 1.40**, against the 3.05 the
   page runs today. Applied to the real 0.95rem description that is 1.33rem.

   So: her intent, her proportion, from her own picture. Not her arithmetic.
   `clamp()` keeps it from collapsing further on a phone, where the title is
   already reduced to 1.75rem by theme.json.

   STILL AN <h1>. Only `font-size`, `text-transform` and tracking change; the
   element, the level and the document outline are untouched.

   🔴 THE SELECTOR CARRIES THE RESERVED SCALE'S OWN PREFIX, AND IT HAS TO.
   Written as `.single-product .wp-block-post-title` — (0,2,0) with !important —
   this rule loaded, read as correct, and did nothing: the title measured
   43.2px, `text-transform: none`, unchanged. It was losing to
   `html body:not(.home):not(.home):not(.home) .wp-block-post-title` at (0,5,3),
   which is §"the reserved type scale" at line ~5619. **`!important` does not
   beat `!important`; specificity does** — the same trap the checkout stylesheet
   documents, hit again here.

   The scale's own header says not to answer this with a fourth `:not()`, so
   this does not add one. It reuses the identical prefix and adds
   `.single-product`, which is one class higher and, unlike a bare source-order
   win, cannot touch `.wp-block-query-title` on the category pages — they share
   the display rule and are not part of this change. */
html body:not(.home):not(.home):not(.home) .single-product .wp-block-post-title,
html body:not(.home):not(.home):not(.home) .single-product h1.product_title,
html body:not(.home):not(.home):not(.home).single-product .wp-block-post-title,
html body:not(.home):not(.home):not(.home).single-product h1.product_title {
	font-size: clamp(1.15rem, 1.5vw, 1.33rem) !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	line-height: 1.35 !important;
}

/* ---------- 3. THE SHORT DESCRIPTION MOVES UNDER THE TITLE -------------
   Alexandra: "shortt description right under title".

   Today the buying column runs title → cod produs → delivery line → SKU →
   price → short description. Four rows of reference data sit between the name
   of the thing and the sentence describing it.

   Done with flex `order` on the column rather than a DOM move, because the
   column's children are built by five different plugins and blocks and a
   re-parent would have to be re-applied on every one of WooCommerce's block
   re-renders. Everything keeps order 3 unless named.

   ⚠️ `row-gap` is set explicitly. Turning a flow container into a flex one
   stops margins collapsing, so without it the column grows by the sum of every
   child's margin instead of the maximum. Measured after the change, not
   assumed. */
.single-product .wp-block-column:has(> .wp-block-post-title) {
	display: flex;
	flex-direction: column;
	row-gap: 0;
}
.single-product .wp-block-column:has(> .wp-block-post-title) > * { order: 3; }
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-post-title { order: 1; }
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-post-excerpt,
.single-product .wp-block-column:has(> .wp-block-post-title) > .woocommerce-product-details__short-description { order: 2; }

/* the excerpt's rules above it were tuned for a slot four rows down the
   column; directly under the title it only needs the bottom rule. */
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-post-excerpt {
	border-top: 0;
	margin-top: .9rem !important;
}

/* ---------- 4. THE GIFT BUNDLES AS A 2×2, AND THE BUYING COLUMN'S ORDER ----
   7 September 2026. Alexandra, by voice note, on the product page:

     "I want to move the add to cart button as up as possible. Now everything,
      you need to scroll a lot until you can add the product in your cart."

   ⭐ THE PRICING REBUILD WAS HER MEANS, NOT HER END. Measured on the clone, the
   button sat at 1,925px on a 1440×900 desktop and 2,323px on a 390px phone —
   2.1 and 2.8 screens. What she is asking for is reachable by moving blocks.

   ── the 2×2, which is what the site had before this rebuild ──────────────
   His four gift bundles render in a ONE-column grid (`grid-template-columns:
   600px`), four rows of 85px. Paul: the previous version of the site had them
   as a 2×2. Two columns halves the block.

   ⚠️ EACH ROW IS A FLEX LINE OF FOUR — checkbox 20px, thumbnail 64px, title,
   price. At half width the title is the only elastic part, so it is the thing
   that wraps and it is what decides the new row height. `min-width: 0` on the
   title is load-bearing: a flex item defaults to `min-width: auto` and refuses
   to shrink below its longest word, which is what pushes the price off the row.

   ── the order ────────────────────────────────────────────────────────────
   🔴 `order` DID NOTHING HERE FOR THREE ATTEMPTS, because `form.cart` computes
   `display: block`. The rule that wins is YITH's own:

       form.cart:has(#yith-wapo-container .yith-wapo-block) { display:block !important }

   **`:has()` takes the specificity of its argument.** That argument holds an ID,
   so it scores (1,1,0) and beats `html body:not(.home):not(.home):not(.home)
   .single-product form.cart` at (0,5,2) however many `!important`s are added.
   Only an ID beats an ID, so the `:has()` is repeated — the same move the
   reserved type scale makes with `:not()`. **Second instance in this build; the
   first was our own `.wp-block-columns:has(#desktoponly)` on 26 August.**

   ⛔ THE GIFTS STAY ABOVE THE BUTTON. Moving them below saves a further ~530px
   and a customer who clicks Add to Cart never scrolls back to an upsell. That
   is Ștefan's order value, not a layout question, and it is his to answer. */

.single-product .woobt-products {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: 1.4rem !important;
}
.single-product .woobt-products .woobt-title {
	min-width: 0;          /* see the note above — without it the price is pushed out */
	overflow-wrap: anywhere;
}
@media (max-width: 700px) {
	/* 🔴 ONE COLUMN ON A PHONE, AND THIS WAS MEASURED BEFORE IT WAS BELIEVED.
	   A two-up grid at 390px was tried: the row is a flex line of checkbox 20px
	   + thumbnail 64px + title + price, so at ~165px of column the TITLE
	   COLLAPSED TO 6px WIDE AND 461px TALL — one character per line — and each
	   card went from 85px to 641px. The button ended up at 2,643px, three
	   hundred worse than doing nothing. `min-width: 0` does not save it; the
	   fixed checkbox and thumbnail eat the row before the title gets a chance.
	   Same failure the cart summary hit on 26 August, one notch further. */
	.single-product .woobt-products { grid-template-columns: minmax(0, 1fr) !important; }

	/* what a phone gets instead: the same four rows, tighter. 85px -> ~70px,
	   and the title still runs 149px over two lines rather than wrapping. */
	.single-product .woobt-products { row-gap: .35rem !important; }
	.single-product .woobt-products .woobt-product > div { padding: 2px 8px 2px 0 !important; }
	.single-product .woobt-products .woobt-thumb,
	.single-product .woobt-products .woobt-thumb img {
		width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
	}
	.single-product .woobt-products .woobt-title { font-size: .85rem !important; line-height: 1.3 !important; }
}

/* the column.
   ⛔ THE RECIPE STAYS AT THE TOP. It was moved below the buying form on
   7 September to save 319px and Paul reversed it the same hour: "the product
   descriptions need to be at the top so the customers know what the recipes
   are." **He is right and it is a commercial point, not a layout one — for a
   florist the composition IS the product.** 27 trandafiri, 8 miniroze, 4
   crocosmia, the diameter and the height: that is what a customer is choosing
   between, and burying it under the Add to Cart button asks them to buy before
   they know what is in the box. He also built the printed recipe sheet for
   Ștefan in September, so this is the same information the shop floor works
   from. The 319px is a real cost and it is paid on purpose.
   The product CODE has no such claim on the space and stays below. */
.single-product .wp-block-column:has(> .wp-block-post-title) > .fg-composition { order: 3; }
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-woocommerce-product-meta { order: 6; }
.single-product .wp-block-column:has(> .wp-block-post-title) > * { order: 4; }
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-post-title { order: 1; }
.single-product .wp-block-column:has(> .wp-block-post-title) > .wp-block-post-excerpt,
.single-product .wp-block-column:has(> .wp-block-post-title) > .woocommerce-product-details__short-description { order: 2; }

/* the six recipe lines ran a 27.36px line-height at 15.2px — comfortable for a
   paragraph, loose for a list of six short facts. Tightened, not shrunk: the
   font size is untouched and every word survives. */
.single-product .fg-composition ul { margin-block: .5rem 0 !important; }
.single-product .fg-composition li { line-height: 1.5 !important; }
.single-product .fg-composition { margin-bottom: 1.2rem !important; }

/* the form. The doubled :has() is the specificity note above, not a typo. */
form.cart:has(#yith-wapo-container):has(#yith-wapo-container) {
	display: flex !important;
	flex-direction: column !important;
}
.single-product form.cart > *                          { order: 3; }
.single-product form.cart > #yith-wapo-container       { order: 1; }
.single-product form.cart > .woobt-wrap                { order: 2; }
.single-product form.cart > .quantity                  { order: 4; }
.single-product form.cart > .single_add_to_cart_button { order: 5; }
.single-product form.cart > .fg-pdp-note               { order: 6; }

/* ---------- 5. (removed 20 Oct 2026: the phone collapse; see section 6 at the end) ---------- */

/* ---------- 6. DEAD SPACE ABOVE THE ADD TO CART BUTTON ------------------
   7 September 2026. Paul: "is there any way that any of the existing elements
   can be re-designed to save space?"

   Measured rather than eyeballed — every block above the button split into
   CONTENT vs PADDING vs MARGIN (`scripts/probes/pdp-whitespace.js`). On a
   390px screen, **272px of the space above the button was padding and margin,
   not information**:

     block           box  content   pad  marg
     short desc      101       56    44    40     ← the worst offender
     total table     113      113     0    61
     recipe          294      267    26    19
     price            35       35     0    24
     gallery         330      330     0    28
     quantity         51       49     0    14

   Everything below is whitespace or type size. **Not one word is removed and
   no font is shrunk except a description that was set LARGER than the thing it
   describes.** Button: 1,648 → 1,461 desktop, 1,830 → 1,624 mobile.

   ⚠️ TWO FURTHER SAVINGS ARE NOT HERE BECAUSE THEY ARE NOT MINE TO TAKE, and
   both are in `build/2026-09-07-add-to-cart-lift.md`: hiding the two duplicated
   rows of YITH's price table (−58px, but it changes what a money page shows),
   and putting the quantity stepper on the button's row (−65px, but it needs
   absolute positioning on a form that takes payment). */

/* THE SHORT DESCRIPTION'S RULES WERE DESIGNED FOR A DIFFERENT SLOT. It used to
   sit four rows down the column, where a rule above and below separated it from
   the reference data around it. Directly under the title it is the title's own
   standfirst, and 44px of padding plus 40px of margin buys nothing. */
.single-product .wp-block-post-excerpt {
	border-top: 0 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	margin: .6rem 0 1rem !important;
}

/* margins between the blocks, halved. Nothing here changes what is on screen. */
.single-product #wapo-total-price-table { margin: .6rem 0 0 !important; }
.single-product .wp-block-woocommerce-product-price { margin: .4rem 0 !important; }
.single-product .fg-composition { margin-bottom: .7rem !important; padding-bottom: 0 !important; }
.single-product .woocommerce-product-gallery { margin-bottom: .6rem !important; }

/* THE SIZE ROWS: 32px of padding each, and the description was set at 15.2px
   against an 11.2px option NAME — the note about the size was larger than the
   size. Both corrected; the text is unchanged. */
.single-product .yith-wapo-option { padding-top: 10px !important; padding-bottom: 10px !important; }
.single-product .yith-wapo-option .description { font-size: .82rem !important; line-height: 1.35 !important; }

/* ---------- 7. LINE SPACING IN THE PRODUCT COPY ------------------------
   Paul: "is there any way we can reduce the size of the space between lines in
   copy, in the description?"

   Yes, and it was looser than anything on the page intended. The recipe and the
   short description inherited **line-height 1.8** — 27.36px on a 15.2px font.
   That is a magazine setting for a running paragraph, and the recipe is six
   short facts: "4 crocosmia", "diametru: 50-55 cm". 1.45 is still comfortable
   and returns 32px on a phone.

   🔴 THE SELECTOR IS `body.single-product`, NOT `body … .single-product`.
   Written the second way it matches NOTHING — the class is ON the body, so a
   descendant combinator looks for some other element carrying it — and five
   variants measured as "0px saved" which reads exactly like losing the cascade.
   The build's own notes have this from 26 August: "a selector that matches
   nothing looks identical to a cascade loss." Measure one property after
   writing a block, not the screenshot.

   The prefix is the reserved type scale's, because that is what sets 1.8. */
html body.single-product:not(.home):not(.home):not(.home) .fg-composition,
html body.single-product:not(.home):not(.home):not(.home) .fg-composition li,
html body.single-product:not(.home):not(.home):not(.home) .fg-composition p,
html body.single-product:not(.home):not(.home):not(.home) .wp-block-post-excerpt,
html body.single-product:not(.home):not(.home):not(.home) .wp-block-post-excerpt p {
	line-height: 1.45 !important;
}


/* ── The author: page header, byline, end-of-article box (16 Oct 2026, inc/author-page.php) ── */
.fg-author{display:flex;gap:clamp(20px,4vw,40px);align-items:flex-start;max-width:860px;margin:clamp(24px,4vw,48px) auto clamp(32px,5vw,64px)}
.fg-author__photo{width:160px;height:160px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--fg-line)}
.fg-author__name{font-family:var(--fg-serif);font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;margin:0 0 .5em}
.fg-author__bio{font-size:1.02rem;line-height:1.7;color:var(--fg-ink)}
.fg-author__bio p{margin:0 0 .9em}
.fg-author__count{font-family:var(--fg-sans);font-size:var(--fg-label-size);letter-spacing:var(--fg-label-ls);text-transform:uppercase;color:var(--fg-muted);margin:1.2em 0 0}
/* The reserved type scale claims every h2.wp-block-heading at (0,5,3) !important; same prefix, one class more. */
html body:not(.home):not(.home):not(.home) h2.wp-block-heading.fg-author__articles-title{font-family:var(--fg-sans) !important;font-size:.7rem !important;letter-spacing:var(--fg-label-ls) !important;text-transform:uppercase !important;font-weight:700 !important;color:var(--fg-muted) !important;text-align:left;border-top:1px solid var(--fg-line);padding-top:24px;margin-bottom:24px}
@media (max-width:640px){
	.fg-author{flex-direction:column;align-items:center;text-align:center}
	.fg-author__photo{width:128px;height:128px}
}
.fg-byline{display:flex;justify-content:center;align-items:center;gap:12px;margin:.6em auto 1.6em;text-align:left}
.fg-byline__photo{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block}
.fg-byline__label{font-family:var(--fg-sans);font-size:var(--fg-label-size);letter-spacing:var(--fg-label-ls);text-transform:uppercase;color:var(--fg-muted);margin:0}
.fg-byline__name{font-family:var(--fg-serif);font-size:1.1rem;margin:0}
.fg-byline__name a{color:var(--fg-ink);text-decoration:none}
.fg-byline__name a:hover{color:var(--fg-plum)}
.fg-author-box{display:flex;gap:20px;align-items:flex-start;max-width:760px;margin:clamp(32px,5vw,56px) auto 0;padding:24px;background:var(--fg-bg);border:1px solid var(--fg-line)}
.fg-author-box__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block}
.fg-author-box__label{font-family:var(--fg-sans);font-size:var(--fg-label-size);letter-spacing:var(--fg-label-ls);text-transform:uppercase;color:var(--fg-muted);margin:0 0 4px}
.fg-author-box__name{font-family:var(--fg-serif);font-size:1.3rem;margin:0 0 8px}
.fg-author-box__name a{color:var(--fg-ink);text-decoration:none}
.fg-author-box__name a:hover{color:var(--fg-plum)}
.fg-author-box__text p:last-child{margin-bottom:0}
@media (max-width:520px){.fg-author-box{flex-direction:column;align-items:center;text-align:center}}

/* ---------- 6. GIFTS ON A PHONE: OPEN, TWO ACROSS, FIRST FOUR; THE SEE-ALL LINK AS A BUTTON ----
   Alexandra (SEO), 20 Oct 2026, Paul's yes the same day. Below 621px each gift is a small
   stacked tile (tick, picture, name, price) so two fit across a 390px screen without the name
   collapsing to one letter a line (the failure measured on 7 Sept with the plugin's own row).
   Only the first four show there; the button under them opens the whole gifts category.
   The link is woobt's own <a style="float:right">, so it is restyled, not replaced. */
html body.single-product:not(.home):not(.home):not(.home) .woobt-wrap > a[style] {
	float: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	min-height: 48px;
	margin: 1.1rem 0 0 !important;
	padding: .8rem 1rem !important;
	border: 1.5px solid var(--fg-plum) !important;
	border-radius: 0;
	background: transparent;
	color: var(--fg-plum) !important;
	font-family: var(--fg-sans) !important;
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .14em !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .2s var(--fg-ease), color .2s var(--fg-ease);
}
html body.single-product:not(.home):not(.home):not(.home) .woobt-wrap > a[style]::after {
	content: "\2192";
	font-size: 1rem;
	letter-spacing: 0;
}
html body.single-product:not(.home):not(.home):not(.home) .woobt-wrap > a[style]:hover,
html body.single-product:not(.home):not(.home):not(.home) .woobt-wrap > a[style]:focus-visible {
	background: var(--fg-plum);
	color: #fff !important;
}
@media (max-width: 620px) {
	/* every line carries the page-wide prefix: the tile rules above (section 7722 on) are
	   !important at two classes, and the title and price at five */
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product {
		position: relative !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: center !important;
		gap: .3rem !important;
		margin: 0 !important;
		padding: .65rem .5rem .6rem !important;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product:hover { padding-left: .55rem !important; }
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product > .woobt-choose { position: absolute !important; top: .45rem; left: .45rem; }
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product > .woobt-thumb,
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product > .woobt-thumb img {
		flex: 0 0 auto !important; width: 52px !important; height: 52px !important;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product > .woobt-title {
		flex: 0 0 auto !important; width: 100% !important; padding: 0 !important;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products .woobt-title a {
		font-size: .74rem !important;
		line-height: 1.3 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products .woobt-availability p { font-size: .62rem !important; margin: .2rem 0 0 !important; }
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product > .woobt-price {
		width: 100% !important; text-align: center !important; justify-content: center !important; padding: 0 !important;
	}
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products .woobt-price-ori { justify-content: center !important; }
	html body.single-product:not(.home):not(.home):not(.home) .woobt-products > .woobt-product:nth-child(n+5) { display: none !important; }
}