/* v4.20.8/9 — CRITICAL MOBILE FIX: defeat the v4.4.61 gallery freeze * on mobile + body-level overflow safety net. * * v4.20.17 — strengthened: added !important to the body overflow * rule and a JavaScript runtime safety net at the end of the * style block that sets inline style on html+body. Inline styles * beat external CSS, so this is the final escape hatch if any * theme or third-party CSS rule has overflow:visible !important * on html/body. */ @media (max-width: 720px) { /* === v4.20.17 — Gallery responsive fix, frame-AGNOSTIC === * * The diagnostic at 396px viewport showed: * gallery width=438px inside parent width=364px * gallery parent:
(the * product container, display:flex) * Frame present: NO * * The .flowla-gallery-frame rules below don't apply when the * EOR relocator goes into SEO mode (not gallery mode) — no * frame wraps the gallery. Without a frame, the gallery is * a direct flex child of the product container with * min-width:auto (the default for flex items), which means * it refuses to shrink below the image's intrinsic width. * Image at ~510px intrinsic = gallery locked at 510px or * whatever its content forces. * * Fix: target .woocommerce-product-gallery directly with * min-width:0 to unblock flex shrinking, max-width:100% to * bound to parent. Plus images max-width:100% height:auto * to scale them responsively. */ .woocommerce-product-gallery, .product .woocommerce-product-gallery, .product div.images, .product .images { max-width: 100% !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; } .woocommerce-product-gallery img, .woocommerce-product-gallery .wp-post-image, .product div.images img, .product div.images .wp-post-image { max-width: 100% !important; height: auto !important; } /* FlexSlider viewport — WC's gallery wraps slides in this. * Without min-width:0 it inherits the same flex-shrink:auto * problem and the slide wrapper inside (with width:400% for * slide count) magnifies it. */ .woocommerce-product-gallery .flex-viewport { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Product container — ensure direct children are * shrinkable so flex distribution works correctly. */ [id^="product-"].product { max-width: 100% !important; box-sizing: border-box !important; } [id^="product-"].product > * { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Variation-add-to-cart wrapper — the QC's grand-parent. * Same flex-shrink unblock so its children can size to * available width rather than to content intrinsic width. */ .woocommerce-variation-add-to-cart, .variations_button, .variations_form, .single_variation_wrap { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* === v4.20.8 — Frame-scoped overrides (kept for pages where * the relocator does create a .flowla-gallery-frame) === */ .flowla-gallery-frame, .flowla-gallery-frame > .woocommerce-product-gallery, .flowla-gallery-frame > div.images, .flowla-gallery-frame .woocommerce-product-gallery, .flowla-gallery-frame .images { max-width: 100% !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; } .flowla-gallery-frame img, .flowla-gallery-frame .wp-post-image { max-width: 100% !important; width: auto !important; height: auto !important; } /* Body-level overflow safety net. */ html, body { max-width: 100vw !important; overflow-x: clip !important; overflow-x: hidden !important; /* fallback chain */ } @supports (overflow-x: clip) { html, body { overflow-x: clip !important; } } } .fx-eor-wrap { max-width: 1180px; margin: 30px auto; padding: 0 24px; font-family: 'Jost', system-ui, -apple-system, sans-serif; color: #1A1A1A; } /* v4.7.15: when the relocator has placed the wrapper inside .fbf-seo-copy or the gallery frame, drop the auto-margins + max-width so the wrapper fills its container naturally. The relocator adds a marker class. */ .fx-eor-wrap.fx-eor-wrap--inline { max-width: none; margin: 0 0 24px 0; padding: 0; } /* v4.18.5 — gallery frame defensive clamps. The relocator wraps the * WC product gallery in .flowla-gallery-frame and freezes it at the * pre-wrap width. If the freeze step ever fails (offsetWidth=0 at * freeze time — the trait-checkout-angel.php abort-on-zero-width * fix is the primary defence), these rules ensure the gallery and * its image stay clamped to the frame width regardless. * Low specificity so themes that intentionally want a wider gallery * can still win. */ .flowla-gallery-frame { max-width: 100%; box-sizing: border-box; } .flowla-gallery-frame .woocommerce-product-gallery, .flowla-gallery-frame > div.images { max-width: 100%; box-sizing: border-box; } .flowla-gallery-frame .woocommerce-product-gallery img, .flowla-gallery-frame .woocommerce-product-gallery .wp-post-image, .flowla-gallery-frame > div.images img { max-width: 100%; height: auto; } /* Anti-flash: hidden until the relocator finishes placing it. */ .fx-eor-wrap--anchoring { visibility: hidden; } /* v4.7.25: diagnostic panel — visible on-page after Add to Basket click. */ .fx-eor-diag { margin: 14px 0; background: #1F3A24; color: #E8F7D5; border-radius: 6px; overflow: hidden; font-family: 'Jost', system-ui, sans-serif; box-shadow: 0 4px 14px -6px rgba(31, 58, 36, 0.4); } .fx-eor-diag-header { padding: 10px 14px; background: rgba(0,0,0,0.18); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; } .fx-eor-diag-header strong { font-weight: 600; } .fx-eor-diag-copy { background: #85C727; color: #1F3A24; border: 0; padding: 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 3px; font-family: inherit; } .fx-eor-diag-copy:hover { background: #95D837; } .fx-eor-diag-copy:active { background: #75B717; } .fx-eor-diag-close { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); width: 26px; height: 26px; cursor: pointer; border-radius: 3px; font-size: 16px; line-height: 1; padding: 0; font-family: inherit; } .fx-eor-diag-close:hover { background: rgba(255,255,255,0.1); } .fx-eor-diag-body { padding: 12px 14px; margin: 0; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.4; color: #E8F7D5; white-space: pre-wrap; word-break: break-word; max-height: 400px; overflow-y: auto; background: rgba(0,0,0,0.1); } .fx-eor-diag--error { background: #5C1F1F; } .fx-eor-diag--error .fx-eor-diag-body { color: #FFD3B3; } .fx-eor-diag--success { background: #1F4A24; } .fx-eor-accordion { background: #FAFAF8; border: 1px solid #C8DEC0; border-radius: 6px; overflow: hidden; transition: all 0.2s; } /* v4.25.79 — SPEED (industry best practice): skip layout + paint of any * EOR section that is off-screen, so the browser doesn't have to render * all the below-the-fold content (especially the eager custom panes) * up front. The section renders the moment it nears the viewport, so * every product is still shown when scrolled to. contain-intrinsic-size * reserves an estimated height (auto = remember the real size after the * first render) to keep the scrollbar stable. This restores the * "only render what's needed" discipline and fixes the mobile scroll * hang caused by heavy off-screen sections. */ /* v0.2.36 — THE PHANTOM SPACE CURED (owner, 15 Aug: mobile "took * ages and didn't load properly"). The Guardian's v4.25.79 rule * above put content-visibility on the WHOLE section with a 600px * estimate — but the common case is a COLLAPSED section whose real * height is ~90px, so nine sections reserved ~3,600px of blank, * scroll-snapping space on every product page, both viewports * (measured live: wrap 5,515px reserved vs 1,885px real; the fix * measured live at 2,091px — 3,424px reclaimed). The optimisation * MOVES to the section BODY: a collapsed body is display:none and * costs nothing, an expanded off-screen body still skips layout/ * paint exactly as v4.25.79 intended for the heavy panes. */ .fx-eor-acc-body { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* v0.2.57 — RENDER ONCE, THEN STAY: a body seen once is held visible (eor-render-once.php marks fx-eor-seen) so images never vanish on scroll-back. RE-APPLIED (v0.2.70). */ .fx-eor-acc-body.fx-eor-seen { content-visibility: visible; contain-intrinsic-size: auto; } /* v4.7.33: spacing between stacked accordions when multiple sections present. */ .fx-eor-accordion + .fx-eor-accordion { margin-top: 12px; } .fx-eor-accordion.open { border-color: #85C727; box-shadow: 0 4px 14px -6px rgba(31, 58, 36, 0.12); } .fx-eor-acc-header { padding: 16px 22px; display: flex; align-items: center; gap: 16px; cursor: pointer; user-select: none; transition: background 0.15s; } .fx-eor-acc-header:hover { background: #F0F7E5; } /* v4.7.31: gradient flows cream → mint so it visually pours into the * mint body below. Eliminates the abrupt color shift James flagged. */ .fx-eor-accordion.open .fx-eor-acc-header { background: linear-gradient(180deg, #FAFAF8, #E8F7D5); border-bottom: 1px solid #C8DEC0; } /* v4.7.40: direct-link tab variant — visually matches the accordions * but the entire row is a navigation anchor. No dropdown body, no * chevron rotation. Arrow → replaces chevron ▼ as the affordance * indicator. Hover state mirrors accordion behaviour for consistency. */ a.fx-eor-accordion--direct { display: block; text-decoration: none; color: inherit; } a.fx-eor-accordion--direct:hover { border-color: #85C727; box-shadow: 0 4px 14px -6px rgba(31, 58, 36, 0.12); transform: translateY(-1px); } a.fx-eor-accordion--direct:hover .fx-eor-acc-header { background: linear-gradient(180deg, #FAFAF8, #E8F7D5); } a.fx-eor-accordion--direct:hover .fx-eor-acc-title h3 { color: #2A6132; } a.fx-eor-accordion--direct:hover .fx-eor-chevron--arrow { transform: translateX(4px); color: #2A6132; } .fx-eor-chevron--arrow { transition: transform 0.15s, color 0.15s; } .fx-eor-pill { background: #1F3A24; color: #85C727; font-size: 9px; padding: 4px 10px; border-radius: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; flex-shrink: 0; } /* v4.20.1 — In Season accordion pill + heading + items. * * The In Season pill uses a warm amber/gold tone (#C68B3A on cream) * to distinguish it from the sage-green pill family used by * Siblings / Floral Bunches / By Colour. Customers reading the * column register four distinct accordion "kinds": * ★ Siblings — sage pill (this product's variants) * (amber) In Season Now — amber pill (what's at peak THIS month) * ★★ Floral Bunches — sage pill (all varieties index) * ★★★ By Colour — sage pill (colour-axis collections) * * The amber tone signals "special, premium, time-limited" — same * language as the "Currently in season" copy in the order-received * card. The accordion also gets a faint amber top border so it * doesn't visually merge with the adjacent sage accordions when * collapsed. */ .fx-eor-pill--inseason { background: #C68B3A; color: #FFF8EC; letter-spacing: 1px; font-size: 10px; padding: 5px 11px; } .fx-eor-accordion--inseason { border-top: 2px solid #C68B3A; } .fx-eor-accordion--inseason.open { border-color: #C68B3A; box-shadow: 0 4px 14px -6px rgba(198, 139, 58, 0.20); } .fx-eor-accordion--inseason .fx-eor-acc-header:hover { background: #FFF8EC; } .fx-eor-accordion--inseason.open .fx-eor-acc-header { background: linear-gradient(180deg, #FAFAF8, #FFE8C5); border-bottom: 1px solid #E0C088; } /* Variety list — In Season variant. Star-marked items (peak bloom * this month) get a subtle amber background, bolder name, and * a star prefix that pulses gently on hover. * * v4.20.7 — Star items now span the FULL WIDTH of the accordion * body (grid-column: 1 / -1). The narrow 1/3 column was cramping * the blurb and forcing the sourcing line into a 3-column flex * wrap. Going full-width gives the star bloom room to breathe * and lets the sourcing line flow horizontally as a single * paragraph beneath the blurb. */ /* v4.20.18 — Star variety panel background. * * Was: linear-gradient(90deg, #FFF8EC 0%, transparent 60%) — * cream/gold fading right. James (2026-05-19): "the blended * gold on the Peonies one — just have the gold at the edge * as is and green for the rest". The gold border-left stays * (it's the only gold accent now); the inner panel switches * to FBF mint #E8F7D5 — same colour as .fx-eor-acc-body so * the star panel reads as a slightly-bordered subdivision * of the accordion rather than a separately-toned card. */ .fx-eor-variety-list--inseason .fx-eor-variety-item--peak { background: #E8F7D5; border-left: 3px solid #C68B3A; grid-column: 1 / -1; margin-bottom: 8px; border-radius: 0 4px 4px 0; } .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-name { font-weight: 600; color: #1F3A24; } .fx-eor-variety-peak-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #C68B3A; color: #fff; border-radius: 50%; font-size: 11px; line-height: 1; margin-right: 10px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(198, 139, 58, 0.3); } .fx-eor-variety-list--inseason .fx-eor-variety-link:hover .fx-eor-variety-peak-badge { transform: scale(1.12); transition: transform 0.15s; } /* v4.20.2 — Variety BLURB display. * * Star variety: blurb shown permanently beneath the name in * small italic grey. This is the month's headline flower so it * deserves a sentence of romance front-and-centre. * * Supporting cast: blurbs hide by default and reveal on hover * (desktop) — keeps the list scannable. On mobile, where hover * doesn't exist, all blurbs show inline because the list is * already vertically expanded so the extra height is fine. * * The .fx-eor-variety-row wrapper groups badge + name + arrow * into a single flex line so the blurb wraps neatly below the * name row, not inline with it. */ .fx-eor-variety-list--inseason .fx-eor-variety-link { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px; } .fx-eor-variety-list--inseason .fx-eor-variety-row { display: flex; align-items: center; justify-content: space-between; gap: 0; } /* v4.20.7 — Star variety: the row's first cluster (star + name) * sits left, the arrow pushes to the far right via space-between. * The blurb and sourcing then flow as full-width block paragraphs * below, aligned under the name (margin-left compensates for the * star badge so the text indents under "PEONIES" not under "★"). */ .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-row { justify-content: space-between; } .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-blurb { margin: 6px 0 0 28px; max-width: 100%; } .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-sourcing { margin: 4px 0 0 28px; max-width: 100%; } .fx-eor-variety-blurb { display: none; font-size: 12px; color: #4A5F4F; font-style: italic; line-height: 1.45; margin: 2px 0 0 28px; font-family: 'Jost', sans-serif; } /* Star variety: blurb always visible. */ .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-blurb { display: block; color: #2A6132; font-size: 12.5px; } /* Hover on any item reveals its blurb (desktop). */ @media (hover: hover) and (pointer: fine) { .fx-eor-variety-list--inseason .fx-eor-variety-link:hover .fx-eor-variety-blurb { display: block; } .fx-eor-variety-list--inseason .fx-eor-variety-link:hover .fx-eor-variety-sourcing { display: block; } } /* Mobile / coarse pointer: always show all blurbs. */ @media (hover: none), (pointer: coarse) { .fx-eor-variety-list--inseason .fx-eor-variety-blurb { display: block; font-size: 11.5px; margin-left: 0; } .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-blurb { margin-left: 0; } .fx-eor-variety-list--inseason .fx-eor-variety-sourcing { display: block; margin-left: 0; } } /* v4.20.5/7 — Sourcing line ("This month from: Netherlands + France..."). * v4.20.7 — Changed from display:flex (which created 3 stacked * mini-columns when squeezed into a narrow card) to display:block * with inline children. Now flows as one horizontal paragraph * that wraps naturally like body text. Star items get this at * full accordion width since they span the whole grid row. */ .fx-eor-variety-sourcing { display: none; font-size: 11.5px; color: #4A5F4F; margin: 4px 0 0 28px; font-family: 'Jost', sans-serif; line-height: 1.5; max-width: 100%; } .fx-eor-variety-sourcing-icon { display: inline; font-size: 12px; opacity: 0.7; margin-right: 4px; } .fx-eor-variety-sourcing-label { display: inline; font-weight: 500; color: #2A6132; margin-right: 4px; } .fx-eor-variety-sourcing-text { display: inline; font-style: italic; color: #4A5F4F; } /* Star variety: sourcing always visible (same as blurb). */ .fx-eor-variety-list--inseason .fx-eor-variety-item--peak .fx-eor-variety-sourcing { display: block; } /* ───────────────────────────────────────────────────────────── * v4.20.18 — Desktop layout overhaul for In Season Now accordion * (James 2026-05-19 image: 3-column variety grid + cramped Also * Available footer were rendering "terribly" inside the narrow * left column of the order-pay product page). * * v4.20.20 — Specificity bug fix + always-visible blurb/sourcing. * * Bug in v4.20.18: the single-column override `grid-template- * columns: 1fr` used selector `.fx-eor-variety-list--inseason` * (specificity 0,1,0). The base rule at line ~10873 uses * `.fx-eor-variety-list { ... grid-template-columns: repeat(3, * 1fr) }` — also (0,1,0). At equal specificity, the LATER rule * wins; base sits 1490 lines further down, so it won. The * in-season list stayed 3-column. Fix: chain both classes — * `.fx-eor-variety-list.fx-eor-variety-list--inseason` — * specificity (0,2,0), beats the base cleanly without needing * !important. * * Always-visible blurb + sourcing (NEW in v4.20.20). James * 2026-05-19 image IMG_2348: "I don't like the hover element * to it ... the text in the green section should look like * the PEONIES title and text section". Previously only the * star variety (PEONIES) showed its blurb + sourcing inline; * supporting varieties (Freesia, Iris, Lilies, Lisianthus, * Ranunculus, Stocks, Sweet Peas) only revealed theirs on * desktop hover via @media (hover: hover) rule at line ~9277. * On a touch device that pattern degrades fine (the * hover-none media query at line ~9286 shows everything) — * but James saw it on desktop and found the hover reveal * jumpy. v4.20.20 makes blurb + sourcing visible on ALL * in-season list items, on all viewports, no hover required. * The @media (hover: hover) rules below become no-ops (same * display:block they would have applied) — left in place so * the cascade is explicit if anyone reads it. * * Three changes wrapped together: * * (a) Variety list = single-column scrollable on every * viewport (was 3-column grid on desktop, 1-col on * mobile). Chained-class selector wins specificity. * Max-height keeps the accordion compact even when * many varieties peak. * * (b) text-decoration:none !important on the in-season * variety link AND on all its descendants. The theme's * a:link underline was bleeding through the plugin's * text-decoration:none from line 10775. * * (c) .fx-eor-also-available-list becomes a 3-column CSS * grid (was inline flow with " · " separators). * Separator dots display:none. 2 columns on mobile. * * (d) Blurb + sourcing visible on ALL in-season items, * styled to match PEONIES typography (green #2A6132, * 12.5px, italic). Left margin reset to 0 on supporting * items (no star badge so the 28px indent doesn't * align with anything). * ───────────────────────────────────────────────────────────── */ .fx-eor-variety-list.fx-eor-variety-list--inseason { grid-template-columns: 1fr; gap: 0; max-height: 380px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C8DEC0 transparent; padding-right: 4px; /* breathing room for scrollbar */ } .fx-eor-variety-list--inseason::-webkit-scrollbar { width: 6px; } .fx-eor-variety-list--inseason::-webkit-scrollbar-track { background: transparent; } .fx-eor-variety-list--inseason::-webkit-scrollbar-thumb { background: #C8DEC0; border-radius: 3px; } .fx-eor-variety-list--inseason::-webkit-scrollbar-thumb:hover { background: #A8C8A0; } .fx-eor-variety-list--inseason .fx-eor-variety-link, .fx-eor-variety-list--inseason .fx-eor-variety-link:link, .fx-eor-variety-list--inseason .fx-eor-variety-link:visited, .fx-eor-variety-list--inseason .fx-eor-variety-link:hover, .fx-eor-variety-list--inseason .fx-eor-variety-link:active { text-decoration: none !important; } .fx-eor-variety-list--inseason .fx-eor-variety-link *, .fx-eor-variety-list--inseason .fx-eor-variety-blurb, .fx-eor-variety-list--inseason .fx-eor-variety-sourcing, .fx-eor-variety-list--inseason .fx-eor-variety-sourcing-text, .fx-eor-variety-list--inseason .fx-eor-variety-sourcing-label, .fx-eor-variety-list--inseason .fx-eor-variety-name { text-decoration: none !important; } /* v4.20.20 — Always-visible blurb + sourcing on ALL in-season * varieties. Specificity (0,2,0) beats the base (0,1,0) * `.fx-eor-variety-blurb { display: none }` at line ~9261. * Star variety's (0,3,0) peak-specific rule at line ~9271 still * wins for PEONIES (which keeps its larger 12.5px green * styling) — supporting varieties inherit the new defaults * here: green-italic to match PEONIES family voice but at * 12px so PEONIES still reads as the dominant star. */ .fx-eor-variety-list--inseason .fx-eor-variety-blurb { display: block; color: #2A6132; font-size: 12px; font-style: italic; line-height: 1.45; font-family: 'Jost', sans-serif; margin: 4px 0 0 0; max-width: 100%; } .fx-eor-variety-list--inseason .fx-eor-variety-sourcing { display: block; font-size: 11.5px; color: #4A5F4F; margin: 3px 0 0 0; font-family: 'Jost', sans-serif; line-height: 1.5; max-width: 100%; } /* Per-item spacing: supporting items get a soft divider so the * stacked title+blurb+sourcing chunks read as separate cards * even without a box around each one. PEONIES already has its * own background + gold border treatment from line ~9198, so * exclude it from this rule. */ .fx-eor-variety-list--inseason .fx-eor-variety-item:not(.fx-eor-variety-item--peak) { border-bottom: 1px solid #D8E8D0; } .fx-eor-variety-list--inseason .fx-eor-variety-item:not(.fx-eor-variety-item--peak):last-child { border-bottom: 0; } .fx-eor-variety-list--inseason .fx-eor-variety-item:not(.fx-eor-variety-item--peak) .fx-eor-variety-link { padding: 10px 14px; } /* Hover: NO padding-jump (James 2026-05-19 called the layout- * shifting hover "the hover element" — getting rid of it). * Subtle background tint on supporting items only — PEONIES * has its own green-mint box so leave it alone. Name colour * darkens slightly + arrow nudges right as the click cue. */ .fx-eor-variety-list--inseason .fx-eor-variety-link:hover { background: transparent; } .fx-eor-variety-list--inseason .fx-eor-variety-item:not(.fx-eor-variety-item--peak) .fx-eor-variety-link:hover { background: #F4FAEB; } .fx-eor-variety-list--inseason .fx-eor-variety-link:hover .fx-eor-variety-name { color: #1F3A24; } .fx-eor-variety-list--inseason .fx-eor-variety-link:hover .fx-eor-variety-arrow { opacity: 1; color: #2A6132; transform: translateX(2px); } /* End v4.20.18/v4.20.20 in-season list overhaul ─────────────── */ /* v4.20.5 — "Also available this month" footer. * Lives below the variety list. Year-round varieties not at peak this * month still get a quiet shout-out so customers know they're sourceable. */ .fx-eor-also-available { margin-top: 22px; padding: 14px 16px; background: #FAFAF8; border-left: 3px solid #D8E8D0; border-radius: 0 4px 4px 0; font-family: 'Jost', sans-serif; max-width: 100%; box-sizing: border-box; } .fx-eor-also-available-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #2A6132; font-weight: 600; margin-bottom: 8px; } .fx-eor-also-available-list { /* v4.20.18 — 3-column CSS grid (was inline flow with " · " * separators). James (2026-05-19): "for the alternative * flower types these used to be split on three rows — * make that look like it does on mobile too". Mobile * gets 2 columns inside the @media (max-width: 700px) * block below. Separators (.fx-eor-also-available-sep) * are display:none so they don't occupy grid cells. */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; font-size: 13px; line-height: 1.5; color: #4A5F4F; overflow-wrap: anywhere; } .fx-eor-also-available-item { /* v4.20.18 — Clean text row inside the grid (was inline * link with dotted bottom-border on hover). Underline * forced off — theme a:link was bleeding through. */ color: #2A6132; text-decoration: none !important; padding: 2px 0; transition: color 0.15s, background 0.15s; border-radius: 2px; } .fx-eor-also-available-item:hover { color: #1F3A24; background: #F4FAEB; padding-left: 4px; } .fx-eor-also-available-sep { /* v4.20.18 — Hidden in grid mode (used to be the " · " * separator for inline flow). Kept in markup for * graceful degradation if CSS fails to load. */ display: none; } /* v4.20.5/6 — Floral Bunches accordion: peak + out-of-season indicators. * * Peak: small amber mark inline-block before the name, no flex-shrink * dependency. Out: reduced opacity on the whole item + a small * "Returns Dec" inline pill. Both elements are inline so they * participate in normal text flow and wrap correctly on mobile. */ .fx-eor-variety-bunches-peak-badge { display: inline-block; font-size: 13px; line-height: 1; vertical-align: -1px; } .fx-eor-variety-item--bunches-peak .fx-eor-variety-name { color: #1F3A24; font-weight: 500; } .fx-eor-variety-item--bunches-out { opacity: 0.55; } .fx-eor-variety-item--bunches-out:hover { opacity: 0.85; } .fx-eor-variety-returns { display: inline-block; padding: 1px 7px; background: #F3F0EA; color: #806950; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; border-radius: 10px; font-family: 'Jost', sans-serif; vertical-align: 1px; white-space: nowrap; } .fx-eor-acc-title { flex: 1; min-width: 0; } .fx-eor-acc-title h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #1F3A24; font-weight: 500; line-height: 1.1; margin: 0; } .fx-eor-preview { font-size: 11px; color: #4A5F4F; letter-spacing: 0.5px; margin-top: 1px; } /* v4.19.0 — Small inline count pill in header preview ("(207)" etc). */ .fx-eor-preview-count { color: #2A6132; font-weight: 500; margin-left: 2px; } /* v4.19.96 — MULTI-SELECT INSTRUCTION CUE. * * The "tick the boxes" instruction in the accordion header needs * to feel like a button-shaped pill — not a sentence of body text * that customers skim past. Sage-green chip, leading tick glyph * in a contrast circle, slight letter-spacing so it reads as a * label rather than running into the surrounding copy. * * The pill stays inline so the line still reads naturally: * "Same flower, different varieties. [✓ Tick the boxes...] (12)" * but the visual weight pulls the eye to the imperative. * ──────────────────────────────────────────────────────────────── */ .fx-eor-tick-cue { display: inline-flex; align-items: center; gap: 6px; background: #E8F7D5; border: 1px solid #85C727; color: #1F3A24; font-weight: 500; padding: 3px 10px 3px 4px; border-radius: 12px; margin: 0 4px; font-size: 11px; letter-spacing: 0.3px; text-transform: none; white-space: nowrap; } .fx-eor-tick-cue-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #2A6132; color: #fff; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1; flex-shrink: 0; } /* Mobile — wrap pill onto its own line so it doesn't crush. * v4.20.17: also allow the text INSIDE the pill to wrap so * the full "Tick the boxes to add multiple varieties to your * order" message doesn't extend past the viewport and overlap * the accordion's chevron arrow (which is what James reported * on 2026-05-19 14:53). The base rule's white-space:nowrap is * the right default for desktop where the pill sits inline * with the description on a single wide row; on mobile the * pill needs to soft-wrap. align-items:flex-start keeps the * ✓ icon aligned to the first line of text when wrapping. */ @media (max-width: 720px) { .fx-eor-tick-cue { display: inline-flex; margin: 4px 0 0 0; font-size: 10.5px; padding: 4px 10px 4px 4px; white-space: normal; max-width: 100%; align-items: flex-start; line-height: 1.35; } .fx-eor-tick-cue-icon { width: 14px; height: 14px; font-size: 10px; margin-top: 1px; } } /* v4.19.96 — TICK ATTENTION PULSE. * * When the accordion transitions to preview state, the ticks on * the visible cards pulse 3 times to teach the affordance. * Customers who've used the site before see one quick reminder; * customers who never noticed the ticks now notice them. * * Why 3 reps not infinite: an always-on pulse becomes noise. * 3 reps × 900ms = ~2.7s total then completely still — long * enough to teach, short enough not to nag. * * Animation only fires on .is-preview state (not .open). Once * the customer expands to full open OR ticks any card, we * remove the pulse class via JS so it doesn't replay. * * Pure CSS transforms + box-shadow only (cheap to animate). */ @keyframes fx-eor-tick-pulse { 0% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } 30% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(133, 199, 39, 0.45); } 60% { transform: scale(1); box-shadow: 0 0 0 0 rgba(133, 199, 39, 0); } 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } } @media (prefers-reduced-motion: no-preference) { .fx-eor-accordion.is-preview .fx-eor-frontcard:not(.selected) .fx-eor-check-col.fx-eor-tick-attention { animation: fx-eor-tick-pulse 900ms ease-out 3; } } /* Permanent visual reinforcement on the first card's tick in * preview state — a sage drop-shadow halo so even after the * pulse stops, the eye still lands there. */ .fx-eor-accordion.is-preview .fx-eor-frontcard:first-child:not(.selected) .fx-eor-check-col { box-shadow: 0 0 0 3px rgba(133, 199, 39, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08); } .fx-eor-chevron { color: #4A5F4F; font-size: 14px; transition: transform 0.25s; } .fx-eor-accordion.open .fx-eor-chevron { transform: rotate(180deg); color: #2A6132; } /* v4.19.95 — Preview-state chevron: half-rotated so it sits between * closed (0°) and fully-open (180°), signalling tri-state cycle. */ .fx-eor-accordion.is-preview .fx-eor-chevron { transform: rotate(90deg); color: #4A5F4F; } .fx-eor-acc-body { padding: 20px 22px 22px; display: none; background: #E8F7D5; } .fx-eor-accordion.open .fx-eor-acc-body { display: block; } /* v4.19.95 — TRI-STATE ACCORDION (.is-preview). * * The Explore Our Range accordion now cycles through three states * instead of the binary open/closed: * * State A — collapsed (default, no class) * → click expands to preview * State B — preview (.is-preview class on .fx-eor-accordion) * → body is visible, but only first N cards show, where N * matches the grid column count. Signals to customers that * there ARE more products without overwhelming them. * → click expands to fully open * State C — fully open (.open class on .fx-eor-accordion) * → all cards visible, current behaviour * → click returns to collapsed * * Implementation: .is-preview reuses the same display:block as .open * for the body, then a :nth-child(n+X) rule hides cards beyond the * first row. X = column count + 1 (single→2, double→3, triple→4). * * Filter-chip toolbar and search row remain visible in preview * mode — only the .fx-eor-frontcard children inside .fx-eor-grid * are hidden. This keeps the controls discoverable so a customer * who likes what they see in the preview row can immediately use * Sort / View / Search without having to click expand first. * ──────────────────────────────────────────────────────────────── */ .fx-eor-accordion.is-preview .fx-eor-acc-body { display: block; } /* Single-column preview: show only the first card */ .fx-eor-accordion.is-preview .fx-eor-grid:not(.fx-eor-grid--double):not(.fx-eor-grid--triple) .fx-eor-frontcard:nth-child(n+2) { display: none; } /* Double-column preview: show only the first 2 cards */ .fx-eor-accordion.is-preview .fx-eor-grid.fx-eor-grid--double .fx-eor-frontcard:nth-child(n+3) { display: none; } /* Triple-column preview: show only the first 3 cards */ .fx-eor-accordion.is-preview .fx-eor-grid.fx-eor-grid--triple .fx-eor-frontcard:nth-child(n+4) { display: none; } @media (max-width: 719px) { /* Default / 1-col: preview shows 1 card. */ .fx-eor-accordion.is-preview .fx-eor-grid .fx-eor-frontcard:nth-child(n+2) { display: none; } /* v4.25.69 — preview shows one full ROW for the chosen mobile column * count: 2-col → first 2 cards, 3-col → first 3 cards. */ .fx-eor-accordion.is-preview .fx-eor-grid.fx-eor-mcols-2 .fx-eor-frontcard:nth-child(-n+2) { display: flex; } .fx-eor-accordion.is-preview .fx-eor-grid.fx-eor-mcols-2 .fx-eor-frontcard:nth-child(n+3) { display: none; } } /* v4.19.97 — In preview state, hide every basket-related CTA. * * James's screenshot showed customers confused by the inline * basket bar appearing in preview state: they thought the big * "ADD TO BASKET" button was the way to proceed and clicked it * without selecting anything, OR thought they had to "complete" * the basket before they could browse. Preview is a discovery * surface, not a transaction surface. Hide all basket UI until * the customer commits to fully-open view. * * Hidden in preview: * .fx-eor-cta — inline white basket bar with "Show basket" toggle + ADD TO BASKET btn * .fx-eor-basket-bar — fixed-position sticky bar at viewport bottom (sibling, body-level) * .fx-eor-basket-modal — popup viewer (hidden-by-default anyway, defensive) * * The card ticks themselves still respond (.fx-eor-check-col not * hidden) — they just don't surface a basket bar. State accrues * silently and the bars reveal as soon as the customer expands * to fully-open view. */ .fx-eor-accordion.is-preview .fx-eor-cta { display: none !important; } /* Sticky bar + modal sit OUTSIDE the accordion in the DOM, so use * a body-level flag written by JS in sync with accordion state. */ body.fx-eor-preview-active .fx-eor-basket-bar, body.fx-eor-preview-active .fx-eor-basket-modal { display: none !important; } /* When in preview, the bottom of the body shows a clickable * "Click here to Explore Our Range" button. This was a CSS-only * ::after pseudo-element in v4.19.95 — but pseudo-elements can't * be clicked, so the line looked like a link and did nothing, * which was its own confusion. v4.19.97 replaced it with a real *