/*!
 * FLGB Page Builder — pb-adv.css
 * GENERATED FILE — do not edit directly. Edit source files in core/css/ and run:
 *   php bin/build-css.php
 * Sources (in load order):
 *   - core/css/flgb-tokens.css
 *   - core/css/flgb-skins.css
 *   - core/css/flgb-primitives.css
 *   - core/css/flgb-node-wrapper.css
 *   - core/css/adv-layout.css
 *   - assets/css/footer.css
 */
/* === core/css/flgb-tokens.css === */
/**
 * V2 Builder — Design Tokens
 *
 * Shared CSS custom properties consumed by primitives and layout files.
 * Both ADV and SP surfaces inherit these tokens via .flgb-pb-page scope.
 *
 * Load order: 1 of 4 (tokens → primitives → node-wrapper → surface layout).
 *
 * Token namespace: --pb-* (shared base).
 * Per-page overrides (CTA colors, font, etc.) are emitted as a separate
 * inline <style> block by the render pipeline — they override these defaults.
 *
 * @since 0.3.0
 */

.flgb-pb-page {
    /* Typography */
    --pb-font-family: 'Montserrat', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    --pb-text-color: #222222;
    --pb-heading-color: var(--pb-text-color);
    --pb-muted-color: #707070;
    --pb-heading-weight: 700;
    --pb-link-color: #0074db;
    --pb-link-hover: #0063ba;

    /* Surfaces */
    --pb-page-bg: #ffffff;
    --pb-surface-light: #f7f7f7;
    --pb-border-color: #dddddd;
    --pb-star-color: #f9b404;

    /* Spacing */
    --pb-block-gap: 25px;
}

/* === core/css/flgb-skins.css === */
/**
 * V2 Builder — Skins
 *
 * Each skin = ONE class block that ONLY redefines existing CSS variables.
 * No element selectors, no direct styling — ever.
 *
 * Layering (root element, weakest first):
 *   .flgb-pb-page tokens (flgb-tokens.css, earlier source)
 *   .flgb-skin--{slug}   (this file — single class, later source)
 *   .flgb-pb-page--{scheme} + per-page inline overrides (explicit page choices win)
 * Node-level declarations on descendants are untouched by skins.
 *
 * Skin slugs are registered in the surface `skin` select FieldDef
 * (core/class-surface.php) — that list is the single source of truth.
 *
 * Fonts: a skin's font is declared in FLGB_PB_V2_Surface::SKIN_FONTS (PHP),
 * not here — @font-face emission and mapped-host URL rewriting require the
 * existing font system. The pipeline treats it as the doc's default font.
 *
 * Load: ADV bundle only (after flgb-tokens.css). SP joins later with its
 * own skin blocks — SP consumes --sp-* vars, ADV consumes --adv-* vars.
 *
 * @since 3.1.53
 */

/* ── Skin: One (values added incrementally) ──
   Font: Inter — via SKIN_FONTS map in class-surface.php. */
.flgb-skin--one {
    /* Base colors — headings follow text via the --pb-heading-color alias */
    --pb-text-color:  #1a1a1a;
    --pb-muted-color: #555555;

    /* Body text size (default 18px, all widths; line-height stays 1.7).
       18px desktop/tablet, 19px ≤768px (re-declared in the media query below). */
    --adv-base-font-size: 18px;

    /* Title node heading size (defaults 48/38/32/28) */
    --adv-title-size:    42px;
    --adv-title-size-t:  38px;
    --adv-title-size-pl: 32px;
    --adv-title-size-pp: 30px;

    /* Title node: heading → subtitle gap (default 8px) */
    --adv-title-sub-gap: 12px;

    /* Title node subtitle size (defaults 20/20/18/18) */
    --adv-subtitle-size:    20px;
    --adv-subtitle-size-t:  20px;
    --adv-subtitle-size-pl: 19px;
    --adv-subtitle-size-pp: 19px;

    /* Line heights — Title node heading (default 1.15), body h1/h2 (default 1.25) */
    --adv-title-lh: 1.2;
    --adv-subtitle-lh: 1.5;
    --adv-h1-lh:    1.3;
    --adv-h2-lh:    1.3;

    /* Body-node default padding, top+bottom (default 15px all widths).
       Single var, no responsive chain — re-declared in the media query
       below. Per-node VE padding (inline vars) still wins. */
    --flgb-node-pt: 30px;
    --flgb-node-pb: 30px;
}

@media (max-width: 768px) {
    .flgb-skin--one {
        --adv-base-font-size: 19px;
        --flgb-node-pt: 25px;
        --flgb-node-pb: 25px;
    }
}

/* === core/css/flgb-primitives.css === */
/**
 * V2 Builder — Shared Visual Primitives
 *
 * Defined once. Consumed by both ADV and SP surfaces via shared render helpers.
 * Surface layout files override spacing/width but never redefine these primitives.
 *
 * Load order: 2 of 4 (tokens → primitives → node-wrapper → surface layout).
 *
 * @since 0.3.0
 */

/* =========================================================================
 * Page Reset
 *
 * Shared across all surfaces. Both ADV and SP need identical box-sizing,
 * image normalization, and font-family application.
 * ========================================================================= */

:where(.flgb-pb-page *),
:where(.flgb-pb-page *::before),
:where(.flgb-pb-page *::after) { box-sizing: border-box; margin: 0; padding: 0; }
.flgb-pb-page :where(img) { max-width: 100%; height: auto; display: block; }
.flgb-pb-page a { text-decoration: none; }

.flgb-pb-page {
    background: var(--pb-page-bg);
    font-family: var(--pb-font-family);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* =========================================================================
 * CTA Button Visual
 *
 * Emitted by render_cta(). Shape, colors, transitions.
 * Surface layout adds width:100% and margin-bottom where needed.
 * CTA color presets (.flgb-pb-page--vibrant, --blue) are surface-specific.
 * ========================================================================= */

.flgb-pb-cta-btn {
    display: block;
    text-align: center;
    background: var(--cta-bg, #19af42);
    color: var(--cta-text, #ffffff);
    font-size: 22px;
    font-weight: var(--cta-weight, 700);
    font-family: inherit;
    padding: 20px 10px;
    border: none;
    border-bottom: 5px solid var(--cta-border-bottom, #178434);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
    line-height: 1;
}
.flgb-pb-cta-btn:hover {
    background: var(--cta-bg-hover, #198e38);
    color: var(--cta-text-hover, var(--cta-text, #ffffff));
    text-decoration: none;
}

/* Border variant — outline button */
.flgb-pb-cta-btn--border {
    background: transparent;
    color: var(--cta-border-btn-color, #000000);
    border: 2px solid var(--cta-border-btn-color, #000000);
    border-bottom-width: 2px;
    padding: 18px 10px;
}
.flgb-pb-cta-btn--border:hover {
    background: var(--cta-border-btn-color, #000000);
    color: var(--cta-border-btn-hover-text, #ffffff);
}

/* Border (light) variant — outline button for dark surfaces */
.flgb-pb-cta-btn--border-light {
    background: transparent;
    color: var(--cta-border-light-btn-color, #ffffff);
    border: 2px solid var(--cta-border-light-btn-color, #ffffff);
    border-bottom-width: 2px;
    padding: 18px 10px;
}
.flgb-pb-cta-btn--border-light:hover {
    background: var(--cta-border-light-btn-color, #ffffff);
    color: var(--cta-border-light-btn-hover-text, #000000);
}

/* No bottom border — filled variant only */
.flgb-pb-cta-btn--no-bb {
    border-bottom: none;
}

/* Uppercase text transform */
.flgb-pb-cta-btn--upper {
    text-transform: uppercase;
}

/* =========================================================================
 * Text / Richtext Paragraph Flow
 *
 * Inner paragraph spacing for .flgb-pb-text blocks.
 * Node-level margin-bottom is handled by the .flgb-node wrapper.
 * ========================================================================= */

.flgb-pb-text p {
    margin-bottom: 1em;
}
.flgb-pb-text p:last-child {
    margin-bottom: 0;
}
.flgb-pb-text strong,
.flgb-pb-text b {
    font-weight: 700;
}

/* =========================================================================
 * Unified Text Primitive
 *
 * Emitted by render_text(). One family, two modes (heading/body).
 * Parent-path/context CSS overrides live in surface layout files.
 * ========================================================================= */

.flgb-pb-text--heading {
    font-weight: var(--text-weight, var(--pb-heading-weight));
    color: var(--text-color, var(--pb-heading-color));
}
.flgb-pb-text--h1 { font-size: var(--text-size, 36px); line-height: 1.25; }
.flgb-pb-text--h2 { font-size: var(--text-size, 30px); line-height: 1.25; }
.flgb-pb-text--h3 { font-size: var(--text-size, 24px); line-height: 1.3; }
.flgb-pb-text--h4 { font-size: var(--text-size, 20px); line-height: 1.35; }
.flgb-pb-text--h5 { font-size: var(--text-size, 18px); line-height: 1.4; }
.flgb-pb-text--h6 { font-size: var(--text-size, 16px); line-height: 1.4; }

.flgb-pb-text--body {
    font-size: var(--text-size, inherit);
    font-weight: var(--text-weight, 400);
    color: var(--text-color, var(--pb-text-color));
}
.flgb-pb-text--body p { margin-bottom: 1em; }
.flgb-pb-text--body p:last-child { margin-bottom: 0; }

/* Muted profile: secondary/meta text tone. Fallback modifier — explicit
   inline --text-color (from color field) wins via cascade specificity. */
.flgb-pb-text--muted { color: var(--text-color, var(--pb-muted-color)); }

.flgb-pb-text--left { text-align: left; }
.flgb-pb-text--center { text-align: center; }
.flgb-pb-text--right { text-align: right; }

/* Inline formatting inside unified text */
.flgb-pb-text--heading strong,
.flgb-pb-text--heading b,
.flgb-pb-text--body strong,
.flgb-pb-text--body b { font-weight: 700; }
.flgb-pb-text--heading em,
.flgb-pb-text--heading i,
.flgb-pb-text--body em,
.flgb-pb-text--body i { font-style: italic; }

/* =========================================================================
 * Title Cluster
 *
 * Wrapper around pretitle + title + subtitle from render_title_cluster().
 * Page-level --tc-* vars (from page settings) provide global color defaults.
 * Per-node inline --text-color still wins when set.
 * ========================================================================= */

/* ── Title cluster: vertical rhythm ──
 * Gap cascade: local --title-gap (inline) → page --sp-title-gap → 10px fallback.
 * Responsive chains at each breakpoint. */
.flgb-pb-title-cluster {
    display: flex;
    flex-direction: column;
    gap: var(--title-gap, var(--sp-title-gap, 10px));
}
@media (max-width: 1024px) {
    .flgb-pb-title-cluster {
        gap: var(--title-gap-t, var(--title-gap, var(--sp-title-gap-t, var(--sp-title-gap, 10px))));
    }
}
@media (max-width: 768px) {
    .flgb-pb-title-cluster {
        gap: var(--title-gap-pl, var(--title-gap-t, var(--title-gap, var(--sp-title-gap-pl, var(--sp-title-gap-t, var(--sp-title-gap, 10px))))));
    }
}
@media (max-width: 479px) {
    .flgb-pb-title-cluster {
        gap: var(--title-gap-pp, var(--title-gap-pl, var(--title-gap-t, var(--title-gap, var(--sp-title-gap-pp, var(--sp-title-gap-pl, var(--sp-title-gap-t, var(--sp-title-gap, 10px))))))));
    }
}

.flgb-pb-title-cluster .flgb-pb-text--heading {
    color: var(--text-color, var(--tc-title-color, var(--pb-heading-color)));
}
.flgb-pb-title-cluster .flgb-pb-tc-pretitle {
    font-weight: var(--text-weight, var(--pb-heading-weight));
    color: var(--text-color, var(--tc-pretitle-color, var(--pb-text-color)));
}
.flgb-pb-title-cluster .flgb-pb-tc-subtitle {
    color: var(--text-color, var(--tc-subtitle-color, var(--pb-text-color)));
}
/* =========================================================================
 * Inline Formatting (mark, color, underline, strong/em)
 *
 * mark  = background highlight (--mark-bg, --tc-mark-bg)
 * color = accent text color    (--accent-color, --tc-accent-color)
 *
 * Shared across all surfaces. Set via per-page <style> or node-level
 * inline overrides.
 * ========================================================================= */

.flgb-pb-page mark {
    background: var(--mark-bg, #fff3b0);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}
.flgb-pb-page .flgb-pb-color {
    color: var(--accent-color, inherit);
}

/* Title cluster mark/color: --tc-* page settings override base defaults.
   Per-node --mark-bg / --accent-color still wins (set on ancestor). */
.flgb-pb-page .flgb-pb-title-cluster mark {
    background: var(--mark-bg, var(--tc-mark-bg, #fff3b0));
}
.flgb-pb-page .flgb-pb-title-cluster .flgb-pb-color {
    color: var(--accent-color, var(--tc-accent-color, inherit));
}
.flgb-pb-page u {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* =========================================================================
 * Box Container
 *
 * Shared bordered container. Base is "no opinion" — consumer parent-path
 * presets add visual identity. Explicit box field values override via
 * inline CSS vars (inline style > stylesheet).
 *
 * Precedence:
 *   1. Parent-path CSS preset = default
 *   2. Inline CSS var from box field = explicit override
 *   3. No var emitted when field empty = preset applies naturally
 * ========================================================================= */

.flgb-pb-box {
    --box-pad-default: 25px;
    padding: var(--box-pad-d, var(--box-pad-default));
    border-style: var(--box-border-style, none);
    border-width: var(--box-border-width, 0);
    border-color: var(--box-border-color, var(--pb-border-color));
    border-radius: var(--box-radius, 0);
    background: var(--box-bg, transparent);
    box-shadow: var(--box-shadow, none);
}

/* Responsive padding — cascade fallback to wider breakpoint, with --box-pad-default
 * dropping to 15px at ≤479 so consumers without bespoke presets shrink on phone portrait. */
@media (max-width: 1024px) {
    .flgb-pb-box { padding: var(--box-pad-t, var(--box-pad-d, var(--box-pad-default))); }
}
@media (max-width: 768px) {
    .flgb-pb-box { padding: var(--box-pad-pl, var(--box-pad-t, var(--box-pad-d, var(--box-pad-default)))); }
}
@media (max-width: 479px) {
    .flgb-pb-box {
        --box-pad-default: 15px;
        padding: var(--box-pad-pp, var(--box-pad-pl, var(--box-pad-t, var(--box-pad-d, var(--box-pad-default)))));
    }
}

/* =========================================================================
 * List-Row Primitive
 *
 * Emitted by render_list_item(). Icon slot + content stack.
 * ========================================================================= */

.flgb-pb-list-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.flgb-pb-list-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.flgb-pb-list-item__content {
    flex: 1;
    min-width: 0;
}

/* =========================================================================
 * List-Stack Family
 *
 * Emitted by render_list_stack(). ONE shared repeated-element family.
 * Owns: icon mode sizing, content stack layout, icon color var.
 *
 * No consumer emits its own mode-class family.
 * ========================================================================= */

.flgb-pb-list-stack {
    --list-row-gap-default: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--list-row-gap, var(--list-row-gap-default));
}

/* ── Content stack (title + text) ── */
.flgb-pb-list-stack .flgb-pb-list-item__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Base icon slot — small icon scale (check/circle/image_small) ── */
.flgb-pb-list-stack .flgb-pb-list-item__icon {
    --list-icon-size: 22px;
    --list-icon-half-size: 11px;
    --list-icon-line-height: 1.4;
    --list-icon-optical-y: 0px;
    width: var(--list-icon-size);
    height: var(--list-icon-size);
    color: var(--list-icon-color, inherit);
    margin-top: 2px;
    line-height: var(--list-icon-line-height);
    margin-top: calc(0.5lh - var(--list-icon-half-size) + var(--list-icon-optical-y));
}
.flgb-pb-list-stack .flgb-pb-list-item--body-only .flgb-pb-list-item__icon {
    --list-icon-line-height: 1.6;
}
.flgb-pb-list-stack .flgb-pb-list-item__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
/* Filled-circle icons only (check_circle, times_circle): inner glyph FG path
   paints the check/X showing through the disk's punched hole. Default transparent
   keeps the original "see-through" look; page/per-node override sets a fill color.
   Outlined variants (check_circle_o, times_circle_o) intentionally ignore the
   inner-color override — their ring + glyph render as a single icon-color shape. */
.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon svg .flgb-pb-icon-fg,
.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon svg .flgb-pb-icon-fg {
    fill: var(--list-icon-inner-color, transparent);
}
.flgb-pb-list-stack .flgb-pb-list-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Icon size preset 17 — SP-like (20px icon, 17px circle-style icons, 3px nudge) ── */
.flgb-pb-list-stack--sz-17 .flgb-pb-list-item__icon { --list-icon-size: 20px; --list-icon-half-size: 10px; }
.flgb-pb-list-stack--sz-17.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-17.flgb-pb-list-stack--check-circle-o .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-17.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-17.flgb-pb-list-stack--times-circle-o .flgb-pb-list-item__icon { --list-icon-size: 17px; --list-icon-half-size: 8.5px; }
/* ── Icon size preset 16 — compact (18px icon, 16px circle-style icons, 3px nudge) ── */
.flgb-pb-list-stack--sz-16 .flgb-pb-list-item__icon { --list-icon-size: 18px; --list-icon-half-size: 9px; }
.flgb-pb-list-stack--sz-16.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-16.flgb-pb-list-stack--check-circle-o .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-16.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-16.flgb-pb-list-stack--times-circle-o .flgb-pb-list-item__icon { --list-icon-size: 16px; --list-icon-half-size: 8px; }
/* ── Icon size preset 19 — circle-style 19px; base check stays 22px (no override) ── */
.flgb-pb-list-stack--sz-19.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-19.flgb-pb-list-stack--check-circle-o .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-19.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-19.flgb-pb-list-stack--times-circle-o .flgb-pb-list-item__icon { --list-icon-size: 19px; --list-icon-half-size: 9.5px; }
/* ── Icon size preset 20 — circle-style 20px; base check stays 22px (no override) ── */
.flgb-pb-list-stack--sz-20.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-20.flgb-pb-list-stack--check-circle-o .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-20.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--sz-20.flgb-pb-list-stack--times-circle-o .flgb-pb-list-item__icon { --list-icon-size: 20px; --list-icon-half-size: 10px; }

/* ── Circle-style icons — size override for default preset 18 (18px vs 22px base) ── */
.flgb-pb-list-stack--check-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--check-circle-o .flgb-pb-list-item__icon,
.flgb-pb-list-stack--times-circle .flgb-pb-list-item__icon,
.flgb-pb-list-stack--times-circle-o .flgb-pb-list-item__icon { --list-icon-size: 18px; --list-icon-half-size: 9px; }

/* ── Circle mode — slot size + tighter gap ── */
.flgb-pb-list-stack--circle .flgb-pb-list-item__icon {
    --list-icon-size: 20px;
    --list-icon-half-size: 10px;
}
.flgb-pb-list-stack--circle .flgb-pb-list-item {
    gap: 5px;
}

/* ── Number mode — circular badge ── */
.flgb-pb-list-stack--number .flgb-pb-list-item__icon {
    border-radius: 50%;
    background: var(--list-icon-color, #19af42);
    color: #fff;
    font-weight: 700;
    font-size: inherit;
}
.flgb-pb-list-stack--number .flgb-pb-list-item__number {
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

/* ── Image (Large) mode — large slot scale + wider rhythm ── */
.flgb-pb-list-stack--image-large { --list-row-gap-default: 24px; }
.flgb-pb-list-stack--image-large.flgb-pb-list-stack--dividers { --list-row-gap-default: 20px; }
@media (max-width: 768px) { .flgb-pb-list-stack--image-large.flgb-pb-list-stack--dividers { --list-row-gap-default: 15px; } }

/* ── Responsive row-gap override breakpoints (cascade --list-row-gap-{t,pl,pp}) ── */
@media (max-width: 1024px) {
    .flgb-pb-list-stack { gap: var(--list-row-gap-t, var(--list-row-gap, var(--list-row-gap-default))); }
}
@media (max-width: 768px) {
    .flgb-pb-list-stack { gap: var(--list-row-gap-pl, var(--list-row-gap-t, var(--list-row-gap, var(--list-row-gap-default)))); }
}
@media (max-width: 479px) {
    .flgb-pb-list-stack { gap: var(--list-row-gap-pp, var(--list-row-gap-pl, var(--list-row-gap-t, var(--list-row-gap, var(--list-row-gap-default))))); }
}
.flgb-pb-list-stack--image-large .flgb-pb-list-item { gap: 15px; }
.flgb-pb-list-stack--image-large .flgb-pb-list-item__icon {
    width: var(--list-img-w, 60px);
    height: auto;
    margin-top: 0;
    line-height: normal;
}
.flgb-pb-list-stack--image-large .flgb-pb-list-item__icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ── Responsive image-large icon slot overrides ── */
@media (max-width: 1024px) {
    .flgb-pb-list-stack--image-large .flgb-pb-list-item__icon {
        width: var(--list-img-w-t, var(--list-img-w, 60px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-list-stack--image-large .flgb-pb-list-item__icon {
        width: var(--list-img-w-pl, var(--list-img-w-t, var(--list-img-w, 60px)));
    }
}
@media (max-width: 479px) {
    .flgb-pb-list-stack--image-large .flgb-pb-list-item__icon {
        width: var(--list-img-w-pp, var(--list-img-w-pl, var(--list-img-w-t, var(--list-img-w, 50px))));
    }
}

/* ── Block alignment — position list as a unit within parent ── */
.flgb-pb-list-stack--align-center {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ── Mobile alignment override ── */
@media (max-width: 768px) {
    .flgb-pb-list-stack--mob-center { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    .flgb-pb-list-stack--mob-left { width: auto; margin-left: 0; margin-right: 0; }
}

/* ── Indent — left-flow margin (ignored when centered via render gating) ── */
.flgb-pb-list-stack--indent { margin-left: 20px; }
@media (max-width: 1024px) { .flgb-pb-list-stack--indent { margin-left: 15px; } }
@media (max-width: 768px) { .flgb-pb-list-stack--indent { margin-left: 10px; } }

/* ── Divider element — real element between items, gap handles spacing ── */
.flgb-pb-list-divider {
    height: 1px;
    background: #e0e0e0;
}

/* =========================================================================
 * Accordion Primitive
 *
 * Emitted by render_accordion(). Shared structure + visual shell contract.
 * Consumer nodes provide preset defaults with --acc-*-default vars; local
 * accordion_fields() controls emit --acc-* overrides.
 * ========================================================================= */

.flgb-pb-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--acc-item-gap, var(--acc-item-gap-default, 0));
}
.flgb-pb-accordion__item {
    display: flex;
    flex-direction: column;
    gap: var(--acc-qa-gap, var(--acc-qa-gap-default, 10px));
    padding: var(--acc-item-pad-y, var(--acc-item-pad-y-default, 0)) var(--acc-item-pad-x, var(--acc-item-pad-x-default, 0));
    background: var(--acc-item-bg, var(--acc-item-bg-default, transparent));
    border-color: var(--acc-border-color, var(--acc-border-color-default, var(--pb-border-color)));
    border-radius: var(--acc-item-radius, var(--acc-item-radius-default, 0));
}
.flgb-pb-accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 0;
}
.flgb-pb-accordion__panel {
    padding: 0;
}
.flgb-pb-accordion__label { flex: 1; }
.flgb-pb-accordion__icon {
    flex-shrink: 0;
    font-size: 20px;
    margin-left: 15px;
    line-height: 1;
}

/* Border modes: mode class chooses geometry; vars choose style details. */
.flgb-pb-accordion--boxed .flgb-pb-accordion__item {
    border-style: var(--acc-border-style, var(--acc-border-style-default, solid));
    border-width: var(--acc-bw, var(--acc-bw-default, 1px));
}
.flgb-pb-accordion--dividers .flgb-pb-accordion__item {
    border-style: none none var(--acc-border-style, var(--acc-border-style-default, solid)) none;
    border-width: 0 0 var(--acc-bw, var(--acc-bw-default, 1px)) 0;
}
.flgb-pb-accordion--dividers .flgb-pb-accordion__item:first-child {
    border-top-style: var(--acc-border-style, var(--acc-border-style-default, solid));
    border-top-width: var(--acc-bw, var(--acc-bw-default, 1px));
}
.flgb-pb-accordion--no-border .flgb-pb-accordion__item {
    border-style: none;
    border-width: 0;
}

@media (max-width: 1024px) {
    .flgb-pb-accordion {
        gap: var(--acc-item-gap-t, var(--acc-item-gap, var(--acc-item-gap-default, 0)));
    }
    .flgb-pb-accordion__item {
        gap: var(--acc-qa-gap-t, var(--acc-qa-gap, var(--acc-qa-gap-default, 10px)));
        padding: var(--acc-item-pad-y-t, var(--acc-item-pad-y, var(--acc-item-pad-y-default, 0))) var(--acc-item-pad-x-t, var(--acc-item-pad-x, var(--acc-item-pad-x-default, 0)));
    }
}
@media (max-width: 768px) {
    .flgb-pb-accordion {
        gap: var(--acc-item-gap-pl, var(--acc-item-gap-t, var(--acc-item-gap, var(--acc-item-gap-default, 0))));
    }
    .flgb-pb-accordion__item {
        gap: var(--acc-qa-gap-pl, var(--acc-qa-gap-t, var(--acc-qa-gap, var(--acc-qa-gap-default, 10px))));
        padding: var(--acc-item-pad-y-pl, var(--acc-item-pad-y-t, var(--acc-item-pad-y, var(--acc-item-pad-y-default, 0)))) var(--acc-item-pad-x-pl, var(--acc-item-pad-x-t, var(--acc-item-pad-x, var(--acc-item-pad-x-default, 0))));
    }
}
@media (max-width: 479px) {
    .flgb-pb-accordion {
        gap: var(--acc-item-gap-pp, var(--acc-item-gap-pl, var(--acc-item-gap-t, var(--acc-item-gap, var(--acc-item-gap-default, 0)))));
    }
    .flgb-pb-accordion__item {
        gap: var(--acc-qa-gap-pp, var(--acc-qa-gap-pl, var(--acc-qa-gap-t, var(--acc-qa-gap, var(--acc-qa-gap-default, 10px)))));
        padding: var(--acc-item-pad-y-pp, var(--acc-item-pad-y-pl, var(--acc-item-pad-y-t, var(--acc-item-pad-y, var(--acc-item-pad-y-default, 0))))) var(--acc-item-pad-x-pp, var(--acc-item-pad-x-pl, var(--acc-item-pad-x-t, var(--acc-item-pad-x, var(--acc-item-pad-x-default, 0)))));
    }
}

/* =========================================================================
 * Responsive: Text + CTA font sizes
 * ========================================================================= */

@media (max-width: 1024px) {
    .flgb-pb-cta-btn { font-size: 22px; }

    .flgb-pb-text--h1 { font-size: var(--text-size-t, 36px); }
    .flgb-pb-text--h2 { font-size: var(--text-size-t, 30px); }
    .flgb-pb-text--h3 { font-size: var(--text-size-t, 24px); }
    .flgb-pb-text--h4 { font-size: var(--text-size-t, 20px); }
    .flgb-pb-text--h5 { font-size: var(--text-size-t, 18px); }
    .flgb-pb-text--h6 { font-size: var(--text-size-t, 16px); }
    .flgb-pb-text--body { font-size: var(--text-size-t, inherit); }
}

@media (max-width: 768px) {
    .flgb-pb-cta-btn { font-size: 20px; }

    .flgb-pb-text--h1 { font-size: var(--text-size-pl, 30px); }
    .flgb-pb-text--h2 { font-size: var(--text-size-pl, 24px); }
    .flgb-pb-text--h3 { font-size: var(--text-size-pl, 20px); }
    .flgb-pb-text--h4 { font-size: var(--text-size-pl, 18px); }
    .flgb-pb-text--h5 { font-size: var(--text-size-pl, 18px); }
    .flgb-pb-text--h6 { font-size: var(--text-size-pl, 16px); }
    .flgb-pb-text--body { font-size: var(--text-size-pl, inherit); }
}

@media (max-width: 479px) {
    .flgb-pb-cta-btn { font-size: 20px; }

    .flgb-pb-text--h1 { font-size: var(--text-size-pp, 28px); }
    .flgb-pb-text--h2 { font-size: var(--text-size-pp, 22px); }
    .flgb-pb-text--h3 { font-size: var(--text-size-pp, 19px); }
    .flgb-pb-text--h4 { font-size: var(--text-size-pp, 18px); }
    .flgb-pb-text--h5 { font-size: var(--text-size-pp, 18px); }
    .flgb-pb-text--h6 { font-size: var(--text-size-pp, 16px); }
    .flgb-pb-text--body { font-size: var(--text-size-pp, inherit); }
}


/* =========================================================================
 * Shared Image Style — border, alignment wrapper
 * ========================================================================= */

/* Legacy: border on <img> directly (non-wrapped callers). */
.flgb-pb-img--bordered { border: 1px solid var(--pb-border-color); border-radius: 8px; }

/* Shared image wrapper primitive (opt-in via wrap=true). */
.flgb-pb-img-wrap { position: relative; overflow: hidden; }
.flgb-pb-img-wrap img,
.flgb-pb-img-wrap video { display: block; width: 100%; height: auto; }
.flgb-pb-img-wrap--bordered { border: 1px solid var(--img-border-color, var(--pb-border-color)); }
.flgb-pb-img-wrap--rounded { border-radius: var(--img-radius, 0); }
.flgb-pb-img-wrap--center { margin-inline: auto; }
.flgb-pb-img-wrap--right { margin-left: auto; }

/* Video — non-wrapped path (mirror unwrapped <img> defaults). */
.flgb-pb-img-align video,
.flgb-pb-img-align--center video,
.flgb-pb-img-align--right video { display: block; max-width: 100%; height: auto; }

/* Align-only shim (no sizing — just margin alignment for unwrapped images). */
.flgb-pb-img-align--center { margin-inline: auto; }
.flgb-pb-img-align--right { margin-left: auto; }


/* =========================================================================
 * Shared Media Primitive (two-layer: container + frame)
 *
 * .flgb-pb-media         — outer container (width, alignment)
 * .flgb-pb-media__frame  — inner clip frame (border, radius, overflow)
 * .flgb-pb-media__caption — caption element (inside or outside frame)
 * .flgb-pb-media__label  — before/after overlay label
 * ========================================================================= */

/* Container: width + alignment */
.flgb-pb-media--center { margin-inline: auto; }
.flgb-pb-media--right { margin-left: auto; }

/* Frame: border + radius + clip */
.flgb-pb-media__frame { position: relative; overflow: hidden; width: 100%; }
.flgb-pb-media__frame img,
.flgb-pb-media__frame video { display: block; width: 100%; }
.flgb-pb-media__frame--bordered { border: 1px solid var(--img-border-color, var(--pb-border-color)); }
.flgb-pb-media__frame--rounded { border-radius: var(--img-radius, 0); }
.flgb-pb-media__frame--shadow  { box-shadow: var(--img-shadow, none); }

/* Caption — base */
.flgb-pb-media__caption {
    font-size: var(--img-caption-size, 14px);
    font-weight: var(--img-caption-weight, 500);
    line-height: 1.3;
    text-align: center;
    padding: var(--img-caption-padding, 8px) var(--img-caption-padding, 12px);
}
/* Caption presets */
.flgb-pb-media__caption--dark {
    background: var(--img-caption-bg, #2b2b2b);
    color: var(--img-caption-color, #ffffff);
}
.flgb-pb-media__caption--light {
    background: var(--img-caption-bg, var(--pb-surface-light));
    color: var(--img-caption-color, #000000);
}
.flgb-pb-media__caption--none {
    background: transparent;
    color: var(--img-caption-color, var(--pb-muted-color));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* Before/After — combined mode (pair inside one frame) */
.flgb-pb-media--ba { display: flex; }
.flgb-pb-media__ba-item { flex: 1; min-width: 0; position: relative; }
.flgb-pb-media__ba-item img { display: block; width: 100%; }

/* Before/After — separate mode (per-item frames) */
.flgb-pb-media--ba-separate { display: flex; flex-wrap: wrap; }
.flgb-pb-media--ba-separate > .flgb-pb-media__frame { flex: 1; min-width: 0; }
/* Caption after the two frames wraps onto its own full-width row */
.flgb-pb-media--ba-separate > .flgb-pb-media__caption { width: 100%; }

/* Single mode — label anchor: positions the overlay label against the image
   itself, so a bottom label never sits on an in-frame caption strip. */
.flgb-pb-media__img-anchor { position: relative; }
.flgb-pb-media__img-anchor img,
.flgb-pb-media__img-anchor video { display: block; width: 100%; }

/* Before/After labels */
.flgb-pb-media__label {
    position: absolute;
    bottom: var(--ba-label-offset, 10px);
    left: 50%;
    transform: translateX(-50%);
    /* left:50% shrink-to-fit would cap the box at half the item width;
       max-content restores the real available width before wrapping. */
    width: max-content;
    max-width: calc(100% - 8px);
    text-align: center;
    font-size: var(--ba-label-size, 18px);
    font-weight: var(--ba-label-weight, 700);
    line-height: 1.3;
    color: var(--ba-label-color, #ffffff);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    pointer-events: none;
}
.flgb-pb-media__label--top {
    bottom: auto;
    top: var(--ba-label-offset, 10px);
}

/* Caption + label responsive */
@media (max-width: 1024px) {
    .flgb-pb-media__caption { font-size: var(--img-caption-size-t, var(--img-caption-size, 14px)); }
    .flgb-pb-media__label { font-size: var(--ba-label-size-t, var(--ba-label-size, 18px)); }
}
@media (max-width: 768px) {
    .flgb-pb-media__caption { font-size: var(--img-caption-size-pl, var(--img-caption-size-t, 13px)); padding-top: 4px; padding-bottom: 4px; }
    .flgb-pb-media__caption--none { padding-bottom: 0; }
    .flgb-pb-media__label { font-size: var(--ba-label-size-pl, var(--ba-label-size-t, 18px)); }
}
@media (max-width: 479px) {
    .flgb-pb-media__caption { font-size: var(--img-caption-size-pp, var(--img-caption-size-pl, 13px)); }
    .flgb-pb-media__label { font-size: var(--ba-label-size-pp, var(--ba-label-size-pl, 18px)); }
}


/* =========================================================================
 * Shared Responsive Grid
 * ========================================================================= */

.flgb-pb-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    gap: var(--grid-gap, 18px);
    margin-inline: auto;
}
@media (max-width: 1024px) {
    .flgb-pb-grid {
        grid-template-columns: repeat(var(--grid-cols-t, 2), 1fr);
        gap: var(--grid-gap-t, var(--grid-gap, 18px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-grid {
        grid-template-columns: repeat(var(--grid-cols-l, 1), 1fr);
        gap: var(--grid-gap-l, var(--grid-gap-t, var(--grid-gap, 18px)));
    }
}
@media (max-width: 479px) {
    .flgb-pb-grid {
        grid-template-columns: repeat(var(--grid-cols-p, 1), 1fr);
        gap: var(--grid-gap-p, var(--grid-gap-l, var(--grid-gap-t, var(--grid-gap, 18px))));
    }
}


/* =========================================================================
 * Shared Two-Column Layout
 * Dumb layout shell — two slots, swap, valign. Same level as .flgb-pb-grid.
 * Desktop: CSS grid 1fr 1fr. Mobile (<=768px): flex-column stack.
 * ========================================================================= */

.flgb-pb-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--two-col-gap, 48px);
    align-items: start;
}
.flgb-pb-two-col__a, .flgb-pb-two-col__b {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.flgb-pb-two-col--valign-center { align-items: center; }
.flgb-pb-two-col--valign-bottom { align-items: end; }

/* Swap: slot B goes left (column 1), slot A goes right (column 2). */
.flgb-pb-two-col--swap .flgb-pb-two-col__b { order: -1; }

/* Split variants — column width distribution. Default is 1fr 1fr (equal). */
.flgb-pb-two-col--split-a-wider { grid-template-columns: 52fr 48fr; }
.flgb-pb-two-col--split-b-wider { grid-template-columns: 48fr 52fr; }
.flgb-pb-two-col--split-a-fixed { grid-template-columns: 50% 1fr; }
.flgb-pb-two-col--split-b-fixed { grid-template-columns: 1fr 50%; }
/* Fixed-px col B: sidebar stays fixed width, content col fills remaining space. */
.flgb-pb-two-col--split-b-px { grid-template-columns: 1fr var(--two-col-b-width, 300px); }

@media (max-width: 1024px) {
    .flgb-pb-two-col {
        gap: var(--two-col-gap-tablet, var(--two-col-gap, 32px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-two-col {
        display: flex;
        flex-direction: column;
        gap: var(--two-col-gap-landscape, var(--two-col-gap-tablet, var(--two-col-gap, 20px)));
    }
    .flgb-pb-two-col__a, .flgb-pb-two-col__b { width: 100%; gap: 24px; }
    /* On mobile, swap has no effect — always stacks A then B. */
    .flgb-pb-two-col--swap .flgb-pb-two-col__b { order: 0; }
    /* On mobile, splits have no effect — single column. */
    .flgb-pb-two-col[class*="--split-"] { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
    .flgb-pb-two-col {
        gap: var(--two-col-gap-portrait, var(--two-col-gap-landscape, var(--two-col-gap, 16px)));
    }
}


/* =========================================================================
 * Shared Review Identity — promoted from adv-layout.css
 * Base rules only. Context overrides stay in adv-layout.css / SP CSS.
 * ========================================================================= */

/* Stars */
.flgb-pb-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flgb-pb-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 0;
    color: var(--pb-star-color);
}
.flgb-pb-stars svg {
    width: var(--star-size, 16px);
    height: var(--star-size, 16px);
    fill: currentColor;
}
.flgb-pb-star--empty {
    color: var(--pb-star-color-empty, #e5e5e5);
}

/* Avatar */
.flgb-pb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.flgb-pb-avatar--initial {
    background: #afafaf;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Name */
.flgb-pb-name {
    --text-weight: 700;
    font-weight: 700;
    display: block;
    line-height: 1;
}

/* Badge (verification overlay on avatar) */
.flgb-pb-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: var(--pb-surface-light);
    border: 1px solid var(--pb-surface-light);
    border-radius: 50%;
    overflow: hidden;
}
.flgb-pb-badge svg {
    width: 14px;
    height: 14px;
    color: var(--badge-color, #3a64d8);
    display: block;
}

/* Verified label */
.flgb-pb-verified {
    --text-color: #808080;
    font-size: 16px;
    color: #808080;
    line-height: 1;
}


/* =========================================================================
 * Shared Review-Header Structural — promoted from adv-layout.css
 * Generic review-header composition shape. Context overrides per consumer.
 * ========================================================================= */

.flgb-pb-review__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.flgb-pb-review__avatar-wrap {
    flex-shrink: 0;
    position: relative;
}
.flgb-pb-review__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.flgb-pb-review__name-row {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    line-height: 1;
}

/* =========================================================================
 * Slot-Pair Family
 *
 * Emitted by render_slot_pair(). Generic 2-child ordered stack.
 * Owns: desktop/mobile order, inner gap via --slot-pair-gap.
 * Does NOT own child content contracts.
 *
 * Consumers override ONLY via parent-path CSS:
 *   .flgb-node--sp_hero .flgb-pb-slot-pair { --slot-pair-gap: 24px; }
 * ========================================================================= */

.flgb-pb-slot-pair {
    display: flex;
    flex-direction: column;
    gap: var(--slot-pair-gap, 0);
}
.flgb-pb-slot-pair__a,
.flgb-pb-slot-pair__b {
    width: 100%;
}

/* Desktop B-first */
.flgb-pb-slot-pair--b-first .flgb-pb-slot-pair__a { order: 2; }
.flgb-pb-slot-pair--b-first .flgb-pb-slot-pair__b { order: 1; }

@media (max-width: 768px) {
    /* Mobile B-first */
    .flgb-pb-slot-pair--mob-b-first .flgb-pb-slot-pair__a { order: 2; }
    .flgb-pb-slot-pair--mob-b-first .flgb-pb-slot-pair__b { order: 1; }

    /* Desktop b-first does NOT carry to mobile — reset when no mob modifier */
    .flgb-pb-slot-pair--b-first:not(.flgb-pb-slot-pair--mob-b-first) .flgb-pb-slot-pair__a { order: unset; }
    .flgb-pb-slot-pair--b-first:not(.flgb-pb-slot-pair--mob-b-first) .flgb-pb-slot-pair__b { order: unset; }
}


/* =========================================================================
 * Content Box
 *
 * Shared styled wrapper primitive. Owns its own background directly —
 * no .flgb-node__bg child, no render_background() dependency.
 *
 * Surface-agnostic. SP-specific responsive gap defaults live in
 * sp-layout.css (--cbox-gap wired to --sp-inner-gap chain).
 *
 * Consumers: render_content_box() in class-render-helpers.php.
 * Field contract: content_box_fields() in class-shared-contracts.php.
 * ========================================================================= */

.flgb-pb-content-box {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--cbox-gap, 30px);
    padding-top:    var(--cbox-py, 40px);
    padding-bottom: var(--cbox-py, 40px);
    padding-left:   var(--cbox-px, 40px);
    padding-right:  var(--cbox-px, 40px);
    border-radius:  var(--cbox-radius, 0);
    box-shadow:     var(--cbox-shadow, none);
    background:     var(--cbox-bg, transparent);
    background-position: var(--cbox-bg-pos, center);
    background-size:     var(--cbox-bg-size, cover);
}

/* ── Responsive gap ── */
@media (max-width: 1024px) {
    .flgb-pb-content-box {
        gap: var(--cbox-gap-t, var(--cbox-gap, 30px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-content-box {
        gap: var(--cbox-gap-pl, var(--cbox-gap-t, var(--cbox-gap, 30px)));
    }
}
@media (max-width: 479px) {
    .flgb-pb-content-box {
        gap: var(--cbox-gap-pp, var(--cbox-gap-pl, var(--cbox-gap-t, var(--cbox-gap, 30px))));
    }
}

/* ── Responsive padding Y ── */
@media (max-width: 1024px) {
    .flgb-pb-content-box {
        padding-top:    var(--cbox-py-t, var(--cbox-py, 40px));
        padding-bottom: var(--cbox-py-t, var(--cbox-py, 40px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-content-box {
        padding-top:    var(--cbox-py-pl, var(--cbox-py-t, var(--cbox-py, 40px)));
        padding-bottom: var(--cbox-py-pl, var(--cbox-py-t, var(--cbox-py, 40px)));
    }
}
@media (max-width: 479px) {
    .flgb-pb-content-box {
        padding-top:    var(--cbox-py-pp, var(--cbox-py-pl, var(--cbox-py-t, var(--cbox-py, 40px))));
        padding-bottom: var(--cbox-py-pp, var(--cbox-py-pl, var(--cbox-py-t, var(--cbox-py, 40px))));
    }
}

/* ── Responsive padding X ── */
@media (max-width: 1024px) {
    .flgb-pb-content-box {
        padding-left:  var(--cbox-px-t, var(--cbox-px, 40px));
        padding-right: var(--cbox-px-t, var(--cbox-px, 40px));
    }
}
@media (max-width: 768px) {
    .flgb-pb-content-box {
        padding-left:  var(--cbox-px-pl, var(--cbox-px-t, var(--cbox-px, 40px)));
        padding-right: var(--cbox-px-pl, var(--cbox-px-t, var(--cbox-px, 40px)));
    }
}
@media (max-width: 479px) {
    .flgb-pb-content-box {
        padding-left:  var(--cbox-px-pp, var(--cbox-px-pl, var(--cbox-px-t, var(--cbox-px, 40px))));
        padding-right: var(--cbox-px-pp, var(--cbox-px-pl, var(--cbox-px-t, var(--cbox-px, 40px))));
    }
}

/* === core/css/flgb-node-wrapper.css === */
/**
 * V2 Builder — Node Wrapper
 *
 * Shared structural wrapper for all nodes emitted by render_node_wrapper().
 * Owns positioning, background overlay, shared vertical rhythm,
 * mobile background override, edge treatment, responsive padding override.
 *
 * Surface layout files override spacing for specific node types
 * (e.g. .flgb-node--image { margin-bottom: 20px }).
 *
 * Load order: 3 of 4 (tokens → primitives → node-wrapper → surface layout).
 *
 * @since 0.3.0
 */

/* =========================================================================
 * Base Wrapper
 *
 * All .flgb-node wrappers (section shells + body content nodes) get
 * position: relative for bg overlay z-index stacking.
 * ========================================================================= */

.flgb-node {
    position: relative;
    margin-top: var(--flgb-node-mt, 0);
}

/* =========================================================================
 * ADV Body Content Node Vertical Rhythm
 *
 * REMOVED in v0.2.81.154 — replaced by flow-spacing system in adv-layout.css.
 * Flow roles (.flgb-node-marker--flow-*) now own all ADV body vertical rhythm
 * via margin-top. See adv-layout.css "ADV Body Flow Spacing" section.
 * ========================================================================= */

/* =========================================================================
 * Background Overlay Layer
 *
 * Positioned behind .flgb-node__inner content via z-index stacking.
 * Visual properties consumed from CSS vars set by PHP render_background():
 *   --flgb-node-bg-color     (from bg_type=color)
 *   --flgb-node-bg-gradient  (from bg_type=gradient — takes precedence over image)
 *   --flgb-node-bg-image     (from bg_type=image)
 *   --flgb-node-bg-position  (from bg_type=image, default center)
 *   --flgb-node-bg-size      (from bg_type=image, default cover)
 *
 * PHP never sets visual properties directly — only CSS var declarations.
 * ========================================================================= */

.flgb-node__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--flgb-node-bg-color, transparent);
    background-image: var(--flgb-node-bg-gradient, var(--flgb-node-bg-image, none));
    background-size: var(--flgb-node-bg-size, cover);
    background-position: var(--flgb-node-bg-position, center);
    pointer-events: none;
}

/* =========================================================================
 * Mobile Background Override
 *
 * Shared wrapper capability: whole-node mobile background at <=768px.
 * Overrides desktop bg when mobile_bg_type is set. When mobile vars are
 * absent, desktop values cascade through unchanged (var() fallback chain).
 *
 * CSS vars emitted by overrides_to_css_vars() on .flgb-node:
 *   --flgb-node-mob-bg-color
 *   --flgb-node-mob-bg-gradient
 *   --flgb-node-mob-bg-image
 *   --flgb-node-mob-bg-position
 *   --flgb-node-mob-bg-size
 * ========================================================================= */

@media (max-width: 768px) {
    .flgb-node__bg {
        background-color: var(--flgb-node-mob-bg-color, var(--flgb-node-bg-color, transparent));
        background-image: var(--flgb-node-mob-bg-gradient, var(--flgb-node-mob-bg-image, var(--flgb-node-bg-gradient, var(--flgb-node-bg-image, none))));
        background-size: var(--flgb-node-mob-bg-size, var(--flgb-node-bg-size, cover));
        background-position: var(--flgb-node-mob-bg-position, var(--flgb-node-bg-position, center));
    }
}

/* =========================================================================
 * Inner Content Layer
 *
 * Sits above the background overlay. Contains the node's render() output.
 * ========================================================================= */

.flgb-node__inner {
    position: relative;
    z-index: 1;
}

/* =========================================================================
 * Edge Treatment
 *
 * Shared wrapper capability: line or shadow on node boundary edges.
 * Modifier classes emitted by render_node_wrapper() from overrides:
 *   .flgb-node--edge-line-{top|bottom|both}
 *   .flgb-node--edge-shadow-{top|bottom|both}
 *
 * Edge color var emitted by overrides_to_css_vars():
 *   --flgb-node-edge-color  (fallback to --pb-border-color)
 * ========================================================================= */

/* ── Line edge ── */
.flgb-node--edge-line-top {
    border-top: 1px solid var(--flgb-node-edge-color, var(--pb-border-color, #e0e0e0));
}
.flgb-node--edge-line-bottom {
    border-bottom: 1px solid var(--flgb-node-edge-color, var(--pb-border-color, #e0e0e0));
}
.flgb-node--edge-line-both {
    border-top: 1px solid var(--flgb-node-edge-color, var(--pb-border-color, #e0e0e0));
    border-bottom: 1px solid var(--flgb-node-edge-color, var(--pb-border-color, #e0e0e0));
}

/* ── Shadow edge ──
 * Single source of truth for wrapper shell shadow.
 * z-index: 1 prevents next-sibling .flgb-node__bg from occluding shadow. */
.flgb-node--edge-shadow-top {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.flgb-node--edge-shadow-bottom {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.flgb-node--edge-shadow-both {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* =========================================================================
 * Responsive Padding Override
 *
 * Shared wrapper capability: authored top/bottom padding override.
 * Nullable contract: '' = unset (inherit node default), 0 = explicit zero.
 *
 * Per-breakpoint modifier classes gate CSS consumption. Only authored
 * breakpoints take effect. Unset breakpoints are invisible to CSS.
 *
 * Desktop rule has no media query — it cascades to all sizes when authored.
 * Narrower breakpoint rules override only when their own class is present.
 *
 * Modifier classes:
 *   .flgb-node--has-pt      (desktop)
 *   .flgb-node--has-pt-t    (tablet, <=1024px)
 *   .flgb-node--has-pt-pl   (phone landscape, <=768px)
 *   .flgb-node--has-pt-pp   (phone portrait, <=479px)
 *   .flgb-node--has-pb      (same for bottom)
 * ========================================================================= */

/* ── Desktop (no media query — cascades to all sizes) ── */
.flgb-node--has-pt {
    padding-top: var(--flgb-node-pt) !important;
}
.flgb-node--has-pb {
    padding-bottom: var(--flgb-node-pb) !important;
}

/* ── Tablet (<=1024px) — overrides desktop when present ── */
@media (max-width: 1024px) {
    .flgb-node--has-pt-t {
        padding-top: var(--flgb-node-pt-t) !important;
    }
    .flgb-node--has-pb-t {
        padding-bottom: var(--flgb-node-pb-t) !important;
    }
}

/* ── Phone landscape (<=768px) — overrides wider when present ── */
@media (max-width: 768px) {
    .flgb-node--has-pt-pl {
        padding-top: var(--flgb-node-pt-pl) !important;
    }
    .flgb-node--has-pb-pl {
        padding-bottom: var(--flgb-node-pb-pl) !important;
    }
}

/* ── Phone portrait (<=479px) — overrides all wider when present ── */
@media (max-width: 479px) {
    .flgb-node--has-pt-pp {
        padding-top: var(--flgb-node-pt-pp) !important;
    }
    .flgb-node--has-pb-pp {
        padding-bottom: var(--flgb-node-pb-pp) !important;
    }
}

/* =========================================================================
 * Responsive Inner Gap Override
 *
 * Shared wrapper capability: authored inner gap override on .flgb-node__inner.
 * Same nullable contract and modifier-class pattern as padding override.
 *
 * Modifier classes:
 *   .flgb-node--has-ig      (desktop)
 *   .flgb-node--has-ig-t    (tablet, <=1024px)
 *   .flgb-node--has-ig-pl   (phone landscape, <=768px)
 *   .flgb-node--has-ig-pp   (phone portrait, <=479px)
 * ========================================================================= */

/* ── Desktop (no media query — cascades to all sizes) ── */
.flgb-node--has-ig > .flgb-node__inner {
    gap: var(--flgb-node-ig) !important;
}

/* ── Tablet (<=1024px) — overrides desktop when present ── */
@media (max-width: 1024px) {
    .flgb-node--has-ig-t > .flgb-node__inner {
        gap: var(--flgb-node-ig-t) !important;
    }
}

/* ── Phone landscape (<=768px) — overrides wider when present ── */
@media (max-width: 768px) {
    .flgb-node--has-ig-pl > .flgb-node__inner {
        gap: var(--flgb-node-ig-pl) !important;
    }
}

/* ── Phone portrait (<=479px) — overrides all wider when present ── */
@media (max-width: 479px) {
    .flgb-node--has-ig-pp > .flgb-node__inner {
        gap: var(--flgb-node-ig-pp) !important;
    }
}

/* === core/css/adv-layout.css === */
/**
 * V2 Builder — ADV Surface Layout
 *
 * ADV-specific composition, overrides, and node component CSS.
 * Consumes tokens from flgb-tokens.css and primitives from flgb-primitives.css.
 * Never redefines primitive properties (heading sizes, CTA shape, box border, etc.).
 *
 * Surface-scoped rules use .flgb-pb-page--adv where disambiguation is needed.
 * Node-specific rules use their BEM selectors directly (ADV-only nodes).
 *
 * Load order: 4 of 4 (tokens → primitives → node-wrapper → this file).
 *
 * @since 0.3.0
 */

/* =========================================================================
 * ADV Section Containment — Universal via .flgb-node__inner
 *
 * Every ADV node's .flgb-node__inner is the ONE containment owner:
 * max-width via --adv-content-width (default 800px, configurable via page settings).
 * 1-col mode: all nodes (body, header, adv_tag) respect this width.
 * 2-col mode: --adv-content-width not emitted, nodes use funnel max-width.
 * Footer + credits override to wider --flgb-max-w below.
 * Floating CTA exempted (viewport-fixed overlay, full-width).
 *
 * @since 0.2.81.148
 * ========================================================================= */

.flgb-pb-page--adv .flgb-node__inner {
    max-width: var(--adv-content-width, 800px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--flgb-pad-x, 15px);
    padding-right: var(--flgb-pad-x, 15px);
}

@media (max-width: 768px) {
    .flgb-pb-page--adv .flgb-node__inner {
        padding-left: var(--flgb-pad-x-mob, 10px);
        padding-right: var(--flgb-pad-x-mob, 10px);
    }
}

/* Floating CTA — full-width viewport overlay, exempt from containment. */
.flgb-pb-page--adv .flgb-node--adv_fcta_bottom .flgb-node__inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================================
 * ADV Tag Bar (frame node)
 *
 * Normalized to SP top_bar contract pattern.
 * Wrapper: .flgb-node--adv_tag — bg via --flgb-node-bg-color (wrapper overrides).
 * Text color: var(--adv-tag-text) emitted from get_wrapper_style_vars().
 * ========================================================================= */

.flgb-node--adv_tag {
    font-family: var(--pb-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.5px;
    --flgb-node-bg-color: #3f4651;
    color: var(--adv-tag-text, #cecece);
    padding-top: 5px;
    padding-bottom: 5px;
}

/* =========================================================================
 * Header (frame node)
 *
 * Normalized to SP header contract pattern.
 * Wrapper: .flgb-node--header — bg via --flgb-node-bg-color (wrapper overrides).
 * Inner structure: .flgb-pb-header (flex layout)
 * Trending text: shared text primitive via .flgb-pb-header__trending > .flgb-pb-text--body
 * ========================================================================= */

.flgb-node--header {
    --flgb-node-bg-color: #ffffff;
    border-bottom: 1px solid #ebecef;
    padding: 12px 0;
}
.flgb-pb-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flgb-pb-header__logo {
    width: auto;
}
.flgb-pb-header__trending {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.flgb-pb-header__trending > .flgb-pb-text--body {
    font-size: 14px;
}
.flgb-pb-header__trending-flag {
    height: 20px;
    width: auto;
}
.flgb-node--header--logo-center .flgb-pb-header__inner {
    justify-content: center;
}

/* =========================================================================
 * Body Wrapper (ADV surface layout)
 * ========================================================================= */

.flgb-pb-page--adv .flgb-node--adv_body {
    padding-top: var(--flgb-node-pt, 15px);
    padding-bottom: var(--flgb-node-pb, 15px);
}

.flgb-pb-page--adv .flgb-pb-body {
    font-size: var(--adv-base-font-size, 18px);
    line-height: var(--adv-base-line-height, 1.7);
    color: var(--pb-text-color);
}
.flgb-pb-page--adv .flgb-pb-body a {
    color: var(--pb-link-color);
    text-decoration: underline;
}
.flgb-pb-page--adv .flgb-pb-body a:hover {
    color: var(--pb-link-hover);
}

/* =========================================================================
 * ADV Body Flow Spacing — article typographic rhythm
 *
 * Role-based vertical rhythm for article content inside ADV body.
 * Each node marker carries .flgb-node-marker--flow-{role} (added by pipeline).
 * 6 roles: flow-body, flow-heading, flow-media, flow-box, flow-cta, flow-meta.
 * All spacing is margin-top only — no collapsing-margin issues.
 * Adjacency selectors handle heading→content pull and meta clustering.
 *
 * 7 CSS vars (all overridable via page-level settings later):
 *   --adv-flow          1.5rem   default body text rhythm
 *   --adv-flow-tight    1rem     meta spacing, post-heading pull
 *   --adv-flow-block    2rem     CTA block spacing
 *   --adv-flow-box      1.5rem   box role (quotes, alerts, benefit lists, reviews, closing boxes)
 *   --adv-flow-media    1.5rem   image/media role
 *   --adv-flow-section  1.7rem   heading top (new section feel)
 *   --adv-flow-cluster  0.5rem   meta+meta cluster (tight)
 *
 * @since 0.2.81.154
 * ========================================================================= */

/* Base: every marker in body gets default rhythm */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker {
    margin-top: var(--adv-flow, 1.5rem);
}

/* First child: no top margin */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker:first-child {
    margin-top: 0;
}

/* Role overrides */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-meta {
    margin-top: var(--adv-flow-tight, 1rem);
}
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-heading {
    margin-top: var(--adv-flow-section, 1.7rem);
}
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-media {
    margin-top: var(--adv-flow-media, 1.5rem);
}
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-box {
    margin-top: var(--adv-flow-box, 1.5rem);
}
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-cta {
    margin-top: var(--adv-flow-block, 2rem);
}

/* Adjacency: heading → body/meta = tight pull (heading stays close to its content) */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-heading + .flgb-node-marker--flow-body,
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-heading + .flgb-node-marker--flow-meta {
    margin-top: var(--adv-flow-tight, 1rem);
}

/* Adjacency: meta + meta = extra tight cluster (breadcrumb/author/ratings clump) */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-meta + .flgb-node-marker--flow-meta {
    margin-top: var(--adv-flow-cluster, 0.5rem);
}

/* Adjacency: intro/meta or alert → first article image = tighter pull */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-meta + .flgb-node-marker--flow-media,
.flgb-pb-page--adv .flgb-pb-body > .flgb-node--adv_alert + .flgb-node-marker--flow-media {
    margin-top: var(--adv-flow-tight, 1rem);
}

/* Author Meta "Skin One" layout pairings (layout-scoped, not page-skin-scoped):
 * Title directly before it = 20px; media (image/video) directly after it = 18px.
 * Extra .flgb-node class lifts specificity above the generic adjacency rules. */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node--title + .flgb-node.flgb-node--author_meta--skin_one {
    margin-top: 20px;
}
.flgb-pb-page--adv .flgb-pb-body > .flgb-node--author_meta--skin_one + .flgb-node.flgb-node-marker--flow-media {
    margin-top: 18px;
}

/* First-child heading: no section break above */
.flgb-pb-page--adv .flgb-pb-body > .flgb-node-marker--flow-heading:first-child {
    margin-top: 0;
}

/* =========================================================================
 * CTA — ADV surface overrides
 *
 * CTA visual shape is in primitives. These are ADV-specific additions.
 * ========================================================================= */

.flgb-pb-page--adv .flgb-pb-cta-btn {
    width: 100%;
}
.flgb-pb-page--adv .flgb-pb-body .flgb-pb-cta-btn {
    color: var(--cta-text, #ffffff);
    text-decoration: none;
}
.flgb-pb-page--adv .flgb-pb-body .flgb-pb-cta-btn:hover {
    color: var(--cta-text-hover, var(--cta-text, #ffffff));
    text-decoration: none;
}

/* --- CTA Color Presets (applied via class on .flgb-pb-page) --- */

.flgb-pb-page--vibrant .flgb-pb-cta-btn        { background: #3abc0b; border-bottom-color: #33a00b; }
.flgb-pb-page--vibrant .flgb-pb-cta-btn:hover   { background: #3ab20e; }
/* =========================================================================
 * Floating CTA — white wrapper bar, normal sitewide CTA button inside.
 * Uses wrapper identity class (SP parity pattern).
 * JS scroll toggle targets .flgb-node--adv_fcta_bottom directly.
 * ========================================================================= */

.flgb-node--adv_fcta_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    --flgb-node-bg-color: #ffffff;
    padding: 10px 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.flgb-node--adv_fcta_bottom.flgb-node--adv_fcta_bottom--visible {
    transform: translateY(0);
}
.flgb-pb-fcta__inner {
    max-width: 600px;
    margin: 0 auto;
}
.flgb-node--adv_fcta_bottom .flgb-pb-cta-btn {
    display: block;
    width: 100%;
    text-align: center;
}

/* =========================================================================
 * Subtitle CTA (ADV node-specific)
 * ========================================================================= */

.flgb-pb-subtitle-cta {
    font-size: var(--text-size, 20px);
    line-height: 1.4;
    font-weight: 400;
}
.flgb-pb-subtitle-cta strong {
    font-weight: 700;
}

/* =========================================================================
 * Image Block — REMOVED: migrated to shared media primitive in flgb-primitives.css
 * Before & After — REMOVED: migrated to shared media primitive in flgb-primitives.css
 * ========================================================================= */

/* =========================================================================
 * Surface Backgrounds
 *
 * Review background moved to .flgb-node--review .flgb-pb-box parent-path
 * preset (Box Parent-Path Presets section below). Markup already emits
 * .flgb-pb-box under .flgb-node--review.
 *
 * benefit-list box background now driven by shared box_bg field → inline --box-bg var.
 * ========================================================================= */

/* =========================================================================
 * Review Block — Basic Variant
 * ========================================================================= */

/* Item spacing — re-homed from .flgb-pb-review to shared box selector */
.flgb-pb-reviews > .flgb-pb-box {
    margin-bottom: 15px;
}
.flgb-pb-reviews > .flgb-pb-box:last-child {
    margin-bottom: 0;
}
/* Review-header structural base — PROMOTED to flgb-primitives.css */
/* .flgb-pb-review__header, __avatar-wrap, __info, __name-row */
/* .flgb-pb-review__avatar — DELETED. Now .flgb-pb-avatar + .flgb-pb-avatar--initial */
/* .flgb-pb-review__badge — DELETED. Now .flgb-pb-badge */
/* .flgb-pb-review__name — DELETED. Now .flgb-pb-name */
/* .flgb-pb-review__verified — DELETED. Now .flgb-pb-verified */

/* Review body text — base (all variants). Scoped via .flgb-pb-review-text wrapper.
 * Uses shared --text-size var so node-level controls can override. */
.flgb-node--review .flgb-pb-review-text {
    --text-size: 17px;
    line-height: 1.5;
}

/* =========================================================================
 * Review Block — FBS Variant (Facebook-style)
 * ========================================================================= */

.flgb-pb-review-fbs {
    display: flex;
    gap: 10px;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
/* .flgb-pb-review-fbs__avatar — DELETED. Now .flgb-pb-avatar (shared, context-sized below) */
.flgb-pb-review-fbs__body {
    flex: 1;
    min-width: 0;
}
/* .flgb-pb-review-fbs__bubble — DELETED (Scope A). */
/* .flgb-pb-review-fbs__name — DELETED (Scope B). Now .flgb-pb-name. */

/* FBS review body text — variant override */
.flgb-node--review--fbs .flgb-pb-review-text {
    --text-size: 16px;
    line-height: 1.5;
    margin-top: 2px;
}
.flgb-pb-review-fbs__actions {
    display: flex;
    gap: 15px;
    padding-left: 15px;
    margin-bottom: 4px;
}
.flgb-pb-review-fbs__action {
    font-size: 11px;
    color: #65676b;
}
.flgb-pb-review-fbs__action--bold {
    font-weight: 600;
    cursor: pointer;
}
.flgb-pb-review-fbs__reactions {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 3px 6px;
    border-radius: 100px;
    box-shadow: 0 0 5px rgba(153, 153, 153, 0.5);
    width: fit-content;
    margin-left: auto;
    margin-right: 18px;
    margin-top: -36px;
}
.flgb-pb-review-fbs__reaction-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flgb-pb-review-fbs__reaction-icon svg {
    width: 12px;
    height: 12px;
    fill: #ffffff;
    color: #ffffff;
    display: block;
}
.flgb-pb-review-fbs__reaction-icon--like {
    background: #5e91ff;
    z-index: 1;
}
.flgb-pb-review-fbs__reaction-icon--heart {
    background: #de485e;
    z-index: 0;
    margin-left: -6px;
    margin-right: 4px;
}
.flgb-pb-review-fbs__reaction-icon--heart svg {
    width: 11px;
    height: 11px;
}
.flgb-pb-review-fbs__reaction-count {
    font-size: 13px;
    line-height: 1;
}

/* =========================================================================
 * Review Block — V2 Variant (with optional image)
 * ========================================================================= */

/* .flgb-pb-review-v2 margin-bottom removed — handled by .flgb-pb-reviews > .flgb-pb-box */
.flgb-pb-review-v2--has-img {
    display: flex;
    gap: 30px;
}
.flgb-pb-review-v2__img {
    width: 170px;
    min-width: 170px;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
    flex-shrink: 0;
}
.flgb-pb-review-v2__content {
    flex: 1;
    min-width: 0;
}
/* V2 review body text — variant override */
.flgb-node--review--basic_v2 .flgb-pb-review-text {
    --text-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}
/* .flgb-pb-review-v2__name — DELETED. Now .flgb-pb-name. */

/* =========================================================================
 * Shared Identity Primitives (Scope B)
 *
 * Canonical classes for identity/meta elements shared across review + author_meta.
 * Context-specific sizing via .flgb-node--{type} or variant markers.
 * ========================================================================= */

/* ── Stars ── */
/* Stars base — PROMOTED to flgb-primitives.css */
/* V2 review: larger stars + margin */
.flgb-node--review--basic_v2 .flgb-pb-stars svg { width: 18px; height: 18px; }
.flgb-node--review--basic_v2 .flgb-pb-stars { margin-bottom: 10px; }
/* Author meta: tighter gap */
.flgb-node--author_meta .flgb-pb-stars { gap: 1px; }
/* Ratings count: larger stars + vertical alignment */
.flgb-pb-ratings-count .flgb-pb-stars { transform: translateY(-1px); }
.flgb-pb-ratings-count .flgb-pb-stars svg { width: 18px; height: 18px; }

/* Avatar base — PROMOTED to flgb-primitives.css */
/* FBS: sizing parity */
.flgb-pb-review-fbs .flgb-pb-avatar { min-width: 40px; }
/* Author meta: smaller avatar */
.flgb-node--author_meta .flgb-pb-avatar { width: 36px; height: 36px; }

/* Name base — PROMOTED to flgb-primitives.css */
/* Review basic: inline name in name-row. Uses shared --text-size var. */
.flgb-node--review .flgb-pb-name { --text-size: 17px; line-height: 1; display: inline; }
/* Review v2: larger */
.flgb-node--review--basic_v2 .flgb-pb-name { --text-size: 18px; }
/* FBS: slightly smaller, semibold via shared --text-weight */
.flgb-node--review--fbs .flgb-pb-name { --text-size: 15px; --text-weight: 600; line-height: 1.3; }
/* Author meta: inherits base 700, color from text token */
.flgb-node--author_meta .flgb-pb-name { color: var(--pb-text-color); }

/* ── Date ── */
.flgb-pb-date {
    display: block;
}
.flgb-node--author_meta .flgb-pb-date { color: var(--pb-muted-color); }

/* Badge + Verified base — PROMOTED to flgb-primitives.css */

/* .flgb-pb-quote standalone — DELETED in Scope A.
 * Styling now via .flgb-node--quote .flgb-pb-box (box preset)
 * + .flgb-node--quote .flgb-pb-text--body (text context override).
 */

/* =========================================================================
 * Box Parent-Path Presets
 *
 * Canonical .flgb-pb-box visual presets via parent-path context.
 * Each consuming node's wrapper (.flgb-node--{type}) provides context.
 * No modifier classes on .flgb-pb-box itself — identity is on the wrapper.
 *
 * Ordering: review general first, then FBS override (equal specificity, cascade wins).
 * ========================================================================= */

/* Quote — asymmetric padding (extra left for border) + text color token.
 * Border, bg, and border color are field defaults via inner_wrapper_fields(). */
.flgb-node--quote .flgb-pb-box {
    --box-pad-default: 15px 15px 15px 19px;
    color: var(--quote-text, inherit);
}

/* Closing box — border/bg via field defaults in inner_wrapper_fields(). */

/* Review (basic + basic_v2) — shared box var defaults. */
.flgb-node--review .flgb-pb-box {
    --box-bg: var(--pb-surface-light);
}

/* FBS bubble — shared box var defaults.
 * Must come AFTER .flgb-node--review .flgb-pb-box (equal specificity, cascade wins). */
.flgb-pb-review-fbs .flgb-pb-box {
    --box-border-style: none;
    --box-radius: 10px;
    --box-bg: #f0f2f5;
    --box-pad-default: 12px 15px;
    margin-bottom: 1px;
}

/* =========================================================================
 * Text Context Overrides
 *
 * Canonical .flgb-pb-text visual adjustments via parent-path context.
 * Active after each node's render migration switches it to emit
 * .flgb-pb-text classes.
 * ========================================================================= */

/* Heading line-height — skin-able (Skin One sets --adv-h1-lh / --adv-h2-lh).
   Fallbacks = primitive defaults. Kept above the Title override below so the
   Title's own line-height (equal specificity) still wins by source order. */
.flgb-pb-page--adv .flgb-pb-text--h1 { line-height: var(--adv-h1-lh, 1.25); }
.flgb-pb-page--adv .flgb-pb-text--h2 { line-height: var(--adv-h2-lh, 1.25); }

/* Title — active (Step 5) render migration */
/* font-size uses title-specific defaults (48/38/32/28), not generic H1 (36/36/30/28) */
.flgb-node--title .flgb-pb-text--heading {
    font-size: var(--text-size, var(--adv-title-size, 48px));
    line-height: var(--adv-title-lh, 1.15); /* skin-able */
    margin-bottom: var(--adv-title-sub-gap, 8px); /* skin-able */
}
.flgb-node--title .flgb-pb-text--body {
    font-size: var(--text-size, var(--adv-subtitle-size, 20px));
    line-height: var(--adv-subtitle-lh, 1.4); /* skin-able */
}

/* Quote body text — active (Scope A render migration) */
.flgb-node--quote .flgb-pb-text--body {
    font-size: 18px;
    line-height: 1.5;
}

/* =========================================================================
 * Author Meta — shared base (all variants)
 * ========================================================================= */

.flgb-pb-author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--pb-muted-color);
    line-height: 1;
}
/* .flgb-pb-author-meta__avatar — DELETED. Now .flgb-pb-avatar (shared, context-sized above). */
/* .flgb-pb-author-meta__name — DELETED. Now .flgb-pb-name (shared, context-styled above). */
.flgb-pb-author-meta__separator {
    color: #cccccc;
}
.flgb-pb-author-meta__category {
    color: var(--pb-muted-color);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.5px;
    font-size: 13px;
}
/* .flgb-pb-author-meta__date — DELETED. Now .flgb-pb-date (shared, context-styled above). */

/* --- Author Meta: two_line_labels variant --- */

.flgb-pb-author-meta--two_line_labels .flgb-pb-author-meta__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.flgb-pb-author-meta--two_line_labels .flgb-pb-author-meta__label {
    font-size: 12px;
    color: var(--pb-muted-color);
    text-transform: none;
    letter-spacing: 0.5px;
}
.flgb-pb-author-meta--two_line_labels .flgb-pb-name,
.flgb-pb-author-meta--two_line_labels .flgb-pb-date {
    font-weight: 700;
}
.flgb-pb-author-meta--two_line_labels .flgb-pb-author-meta__divider {
    width: 1px;
    height: 28px;
    background: #cccccc;
    flex-shrink: 0;
}

/* --- Author Meta: space_between variant --- */

.flgb-pb-author-meta--space_between {
    justify-content: space-between;
}
.flgb-pb-author-meta--space_between .flgb-pb-author-meta__left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flgb-pb-author-meta--space_between .flgb-pb-author-meta__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.flgb-pb-author-meta--space_between .flgb-pb-author-meta__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.flgb-pb-author-meta--space_between .flgb-pb-author-meta__likes {
    display: flex;
    align-items: center;
    gap: 4px;
}
.flgb-pb-author-meta--space_between .flgb-pb-author-meta__like-icon {
    width: 12px;
    height: 12px;
    display: block;
}

/* --- Author Meta: skin_one variant ---
 * Avatar | name + published date column | views + comments stats.
 * Typography inherits the node (14px, line-height 1) like the other variants. */

.flgb-pb-author-meta--skin_one {
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 0;
    border-top: 1px solid var(--pb-border-color);
    border-bottom: 1px solid var(--pb-border-color);
}
/* Next node is media (image/video): drop the bottom line + its 15px. */
.flgb-node--author_meta:has(+ .flgb-node-marker--flow-media) .flgb-pb-author-meta--skin_one {
    border-bottom: 0;
    padding-bottom: 0;
}
.flgb-node--author_meta--skin_one .flgb-pb-avatar {
    width: 40px;
    height: 40px;
}
.flgb-pb-author-meta--skin_one .flgb-pb-author-meta__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.flgb-pb-author-meta--skin_one .flgb-pb-name {
    font-size: 13px;
}
.flgb-pb-author-meta--skin_one .flgb-pb-date {
    font-size: 11.5px;
    /* Date text span reads --text-color; route it to muted so label + date match.
       Inspector Date color (inline var on the span) still wins. */
    --text-color: var(--pb-muted-color);
}
.flgb-pb-author-meta--skin_one .flgb-pb-author-meta__stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: var(--pb-muted-color);
}
.flgb-pb-author-meta--skin_one .flgb-pb-author-meta__stat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.flgb-pb-author-meta--skin_one .flgb-pb-author-meta__stat svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .flgb-pb-author-meta--skin_one {
        flex-wrap: nowrap;
    }
    .flgb-pb-author-meta--skin_one .flgb-pb-author-meta__stats {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
}

/* =========================================================================
 * Closing Box
 *
 * Standalone .flgb-pb-closing-box selector deleted — replaced by
 * .flgb-node--closing_box .flgb-pb-box parent-path preset above.
 * Markup already emits .flgb-pb-box under .flgb-node--closing_box.
 * ========================================================================= */

/* =========================================================================
 * Alert
 * ========================================================================= */

.flgb-pb-adv-alert {
    background: #fcf8e3;
    border: 1px solid #f4edc6;
    color: var(--text-color, var(--pb-text-color));
    font-size: var(--text-size, 16px);
    font-weight: var(--text-weight, 400);
    line-height: 1.5;
    padding: 12px 15px;
}
.flgb-pb-adv-alert strong {
    font-weight: 700;
}
.flgb-pb-adv-alert a {
    color: var(--pb-link-color);
    font-weight: 700;
    text-decoration: underline;
}

/* =========================================================================
 * Breadcrumb
 * ========================================================================= */

.flgb-pb-breadcrumb {
    font-size: var(--text-size, 13px);
}

/* =========================================================================
 * Ratings Count
 * ========================================================================= */

.flgb-pb-ratings-count {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flgb-pb-ratings-count__text {
    font-size: var(--text-size, 16px);
    font-weight: var(--text-weight, 700);
    line-height: 1;
}

/* =========================================================================
 * Benefit List
 * ========================================================================= */


/* ── Icon color — ADV checkmark-color token → shared --list-icon-color ── */
.flgb-node--benefit_list .flgb-pb-list-stack {
    --list-icon-color: var(--checkmark-color, #19af42);
}

/* ── Item title — parent-path on shared text primitive ── */
.flgb-node--benefit_list .flgb-pb-list-item__content > .flgb-pb-text--body:first-child:not(:last-child) {
    --text-weight: 700;
    line-height: 1.4;
}

/* ── Item text — parent-path on shared text primitive ── */
.flgb-node--benefit_list .flgb-pb-list-item__content > .flgb-pb-text--body:last-child {
    line-height: 1.6;
}

/* ── Bordered mode — shared box var defaults ──
 * Padding inherits from primitive (.flgb-pb-box --box-pad-default: 25px → 15px ≤479). */
.flgb-node--benefit_list .flgb-pb-box {
    --box-border-style: solid;
    --box-border-width: 1px;
    --box-border-color: var(--pb-border-color);
}

/* ── Heading context override ── */
.flgb-node--benefit_list .flgb-pb-text--heading {
    margin-top: 0;
    margin-bottom: 15px;
}

/* =========================================================================
 * Disclosure
 * ========================================================================= */

.flgb-node--adv_disclosure {
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}
.flgb-node--adv_disclosure p {
    margin: 0;
}

/* =========================================================================
 * Responsive: Large screen (max-width: 1200px)
 * ========================================================================= */

@media (max-width: 1200px) {
    .flgb-pb-review-v2__img { width: 150px; min-width: 150px; }
}

/* =========================================================================
 * Responsive: Tablet (max-width: 1024px)
 * ========================================================================= */

@media (max-width: 1024px) {
    /* Subtitle CTA */
    .flgb-pb-subtitle-cta { font-size: var(--text-size-t, 20px); }

    /* Alert */
    .flgb-pb-adv-alert { font-size: var(--text-size-t, 15px); }

    /* Author meta */
    .flgb-pb-author-meta { font-size: 13px; }

    /* Tag bar */
    .flgb-node--adv_tag { font-size: 14px; }

    /* Review basic */
    .flgb-node--review .flgb-pb-name { --text-size-t: 16px; }
    .flgb-node--review .flgb-pb-verified { font-size: 15px; }

    /* Review v2 */
    .flgb-pb-review-v2--has-img { gap: 20px; }
    .flgb-pb-review-v2__img { width: 110px; min-width: 110px; }
    .flgb-node--review--basic_v2 .flgb-pb-review-text { --text-size-t: 17px; line-height: 1.6; }
    .flgb-node--review--basic_v2 .flgb-pb-name { --text-size-t: 17px; }

    /* Stars */
    .flgb-pb-ratings-count .flgb-pb-stars svg { width: 17px; height: 17px; }

    /* Ratings count */
    .flgb-pb-ratings-count__text { font-size: var(--text-size-t, 15px); }

    /* Breadcrumb */
    .flgb-pb-breadcrumb { font-size: var(--text-size-t, 13px); }

    /* Header */
    .flgb-pb-header__trending > .flgb-pb-text--body { font-size: 14px; }

    /* Benefit list */
    /* Disclosure */
    .flgb-node--adv_disclosure { font-size: 10px; }

    /* Text context overrides */
    .flgb-node--title .flgb-pb-text--heading { font-size: var(--text-size-t, var(--adv-title-size-t, 38px)); }
    .flgb-node--title .flgb-pb-text--body { font-size: var(--text-size-t, var(--adv-subtitle-size-t, 20px)); }
}

/* =========================================================================
 * Responsive: Phone Landscape (max-width: 768px)
 * ========================================================================= */

@media (max-width: 768px) {
    /* Subtitle CTA */
    .flgb-pb-subtitle-cta { font-size: var(--text-size-pl, 18px); }

    /* Alert */
    .flgb-pb-adv-alert { font-size: var(--text-size-pl, 14px); }

    /* Floating CTA — sitewide CTA handles its own sizing */

    /* Author meta */
    .flgb-pb-author-meta { font-size: 12px; }

    /* Tag bar */
    .flgb-node--adv_tag { font-size: 13px; }

    /* Review basic */
    .flgb-node--review .flgb-pb-name { --text-size-pl: 15px; }
    .flgb-node--review .flgb-pb-review-text { --text-size-pl: 16px; }
    .flgb-node--review .flgb-pb-verified { font-size: 14px; }

    /* Review v2 */
    .flgb-pb-review-v2__img { width: 145px; min-width: 145px; }
    .flgb-node--review--basic_v2 .flgb-pb-review-text { --text-size-pl: 16px; line-height: 1.5; margin-bottom: 10px; }
    .flgb-node--review--basic_v2 .flgb-pb-name { --text-size-pl: 16px; }

    /* Stars */
    .flgb-pb-ratings-count .flgb-pb-stars svg { width: 16px; height: 16px; }
    .flgb-node--review--basic_v2 .flgb-pb-stars svg { width: 16px; height: 16px; }

    /* Ratings count */
    .flgb-pb-ratings-count__text { font-size: var(--text-size-pl, 14px); }

    /* Breadcrumb */
    .flgb-pb-breadcrumb { font-size: var(--text-size-pl, 12px); }

    /* Header */
    .flgb-pb-header__trending > .flgb-pb-text--body { font-size: 12px; }

    /* Benefit list */
    .flgb-node--benefit_list .flgb-pb-list-item__content > .flgb-pb-text--body:first-child:not(:last-child) { margin-bottom: 3px; }

    /* Disclosure */
    .flgb-node--adv_disclosure { font-size: 10px; }

    /* Text context overrides — active (Step 5) */
    .flgb-node--title .flgb-pb-text--heading { font-size: var(--text-size-pl, var(--adv-title-size-pl, 32px)); }
    .flgb-node--title .flgb-pb-text--body { font-size: var(--text-size-pl, var(--adv-subtitle-size-pl, 18px)); }
}

/* =========================================================================
 * Responsive: Phone Portrait (max-width: 479px)
 * ========================================================================= */

@media (max-width: 479px) {
    /* Subtitle CTA */
    .flgb-pb-subtitle-cta { font-size: var(--text-size-pp, 18px); }

    /* Alert */
    .flgb-pb-adv-alert { font-size: var(--text-size-pp, 14px); }

    /* Floating CTA — sitewide CTA handles its own sizing */

    /* Author meta */
    .flgb-pb-author-meta { font-size: 12px; }

    /* Tag bar */
    .flgb-node--adv_tag { font-size: 13px; }

    /* Review basic */
    .flgb-node--review .flgb-pb-name { --text-size-pp: 14px; }
    .flgb-node--review .flgb-pb-review-text { --text-size-pp: 16px; }
    .flgb-node--review .flgb-pb-verified { font-size: 13px; }

    /* Review v2 */
    .flgb-pb-review-v2--has-img { flex-direction: column; align-items: center; gap: 15px; }
    .flgb-pb-review-v2__img { width: 100%; min-width: 0; max-width: 200px; }

    /* Stars */
    .flgb-pb-ratings-count .flgb-pb-stars svg { width: 16px; height: 16px; }

    /* Ratings count */
    .flgb-pb-ratings-count__text { font-size: var(--text-size-pp, 14px); }

    /* Breadcrumb */
    .flgb-pb-breadcrumb { font-size: var(--text-size-pp, 12px); }

    /* Header */
    .flgb-pb-header__trending > .flgb-pb-text--body { font-size: 12px; }

    /* Disclosure */
    .flgb-node--adv_disclosure { font-size: 10px; }

    /* Text context overrides — active (Step 5) */
    .flgb-node--title .flgb-pb-text--heading { font-size: var(--text-size-pp, var(--adv-title-size-pp, 28px)); }
    .flgb-node--title .flgb-pb-text--body { font-size: var(--text-size-pp, var(--adv-subtitle-size-pp, 18px)); }
}

/* === assets/css/footer.css === */
/**
 * Footer + Credits — shared CSS (all surfaces).
 *
 * Single source of truth for shell (background, padding, color) and
 * __inner containment (max-width, horizontal padding, gap).
 * Surface CSS files must NOT redefine these — they are surface-agnostic.
 *
 * Inner column layout, typography, link styles, and responsive column
 * stacking follow below the shell block.
 *
 * @since 0.2.81.133
 */

/* ── Footer shell ── */
.flgb-node--shared_footer {
    --flgb-node-bg-color: #000000;
    color: #dbdbdb;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* ── Credits shell ── */
.flgb-node--shared_credits {
    --flgb-node-bg-color: #ffffff;
    color: #333333;
    font-size: 12px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Shared __inner containment (footer + credits) ── */
.flgb-node--shared_footer > .flgb-node__inner,
.flgb-node--shared_credits > .flgb-node__inner {
    max-width: var(--flgb-max-w, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--flgb-pad-x, 20px);
    padding-right: var(--flgb-pad-x, 20px);
    gap: 0;
}

/* ── Responsive shell ── */
@media (max-width: 1024px) {
    .flgb-node--shared_footer { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 768px) {
    .flgb-node--shared_footer > .flgb-node__inner,
    .flgb-node--shared_credits > .flgb-node__inner {
        padding-left: var(--flgb-pad-x-mob, 15px);
        padding-right: var(--flgb-pad-x-mob, 15px);
    }
}
@media (max-width: 479px) {
    .flgb-node--shared_footer { padding-top: 28px; padding-bottom: 28px; }
}

/* ── Footer inner layout ── */
.flgb-pb-footer {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}
.flgb-pb-footer a {
    color: #dbdbdb;
    text-decoration: none;
}
.flgb-pb-footer a:hover {
    text-decoration: underline;
}
.flgb-pb-footer__row {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
}
.flgb-pb-footer__half {
    display: flex;
    flex-direction: row;
    width: 50%;
    gap: 30px;
}
.flgb-pb-footer__col {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.flgb-pb-footer__header {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
}
.flgb-pb-footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.flgb-pb-footer__contact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.flgb-pb-footer__contact-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.flgb-pb-footer__contact-icon svg {
    width: 18px;
    height: 18px;
}
.flgb-pb-footer__lang {
    margin-top: 5px;
}

/* ── Credits bar inner layout ── */
.flgb-pb-credits__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
}

/* ── Responsive column stacking ── */
@media (max-width: 1024px) {
    .flgb-pb-footer__row {
        flex-direction: column;
        gap: 24px;
    }
    .flgb-pb-footer__half {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .flgb-pb-footer__half {
        flex-direction: column;
        gap: 24px;
    }
    .flgb-pb-footer__col {
        width: 100%;
        text-align: center;
        align-items: center;
    }
    .flgb-pb-footer__contact {
        justify-content: center;
    }
    .flgb-pb-footer__links {
        align-items: center;
    }
    .flgb-pb-footer__lang {
        display: flex;
        justify-content: center;
    }
    .flgb-pb-credits__inner {
        flex-direction: column;
        text-align: center;
        gap: 0;
    }
}
@media (max-width: 479px) {
    .flgb-pb-footer__links {
        gap: 10px;
    }
}