/**
 * NivoSync — Generic theme, Ring Builder Settings Loop styles.
 *
 * loop.css is NOT loaded on Ring Builder pages, so this file self-declares the
 * --ns-gen-* token layer (copied verbatim from assets/css/loop.css) and also
 * restyles the SHARED stepper (.ns-rb-stepper, rendered by render_rb_page above
 * every RB page) to the generic look. All component rules are scoped under
 * .ns-rbl--modern (or .ns-theme-modern for the shared stepper) so nothing
 * leaks into the host WordPress theme.
 *
 * @package NivoSync
 * @since   3.0.7
 */

/* =========================================================================
   DESIGN TOKENS — the admin overrides the *-user vars; these are the defaults.
   ========================================================================= */
.ns-theme-modern {
    --ns-gen-bg:        var(--ns-gen-bg-user, #ffffff);
    --ns-gen-surface:   var(--ns-gen-surface-user, #f4f4f3);
    --ns-gen-ink:       var(--ns-gen-ink-user, #1a1a1a);
    --ns-gen-ink-soft:  var(--ns-gen-ink-soft-user, #6b6b6b);
    --ns-gen-line:      var(--ns-gen-line-user, #e3e3e1);
    --ns-gen-accent:    var(--ns-gen-accent-user, #8a6d3b);
    --ns-gen-on-ink:    var(--ns-gen-on-ink-user, #ffffff);
    --ns-gen-track:     var(--ns-gen-track-user, #dcdcda);
    --ns-gen-active:    var(--ns-gen-active-user, #d3a441);
    --ns-gen-focus:     var(--ns-gen-focus-user, #2b6cb0);

    /* Button state tokens (configurable; sensible derived defaults). */
    --ns-gen-btn-solid-bg:       var(--ns-gen-btn-solid-bg-user, var(--ns-gen-ink));
    --ns-gen-btn-solid-text:     var(--ns-gen-btn-solid-text-user, var(--ns-gen-on-ink));
    --ns-gen-btn-solid-hover-bg: var(--ns-gen-btn-solid-hover-bg-user, var(--ns-gen-accent));
    --ns-gen-btn-ghost-bg:       var(--ns-gen-btn-ghost-bg-user, var(--ns-gen-bg));
    --ns-gen-btn-ghost-text:     var(--ns-gen-btn-ghost-text-user, var(--ns-gen-ink));
    --ns-gen-btn-ghost-hover-bg: var(--ns-gen-btn-ghost-hover-bg-user, var(--ns-gen-surface));
    --ns-gen-card-hover-border:  var(--ns-gen-card-hover-border-user, var(--ns-gen-line));

    /* Type. */
    --ns-gen-font-display: var(--ns-gen-font-display-user, Georgia, 'Times New Roman', serif);
    --ns-gen-font-body:    var(--ns-gen-font-body-user, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

    /* Geometry / motion. */
    --ns-gen-radius:    var(--ns-gen-radius-user, 4px);
    --ns-gen-radius-lg: var(--ns-gen-radius-lg-user, 8px);
    --ns-gen-gap:       16px;
    --ns-gen-maxw:      1280px;
    --ns-gen-card-min:  240px;
    --ns-gen-t:         160ms ease;
}

/* =========================================================================
   SHARED STEPPER — intentionally NOT restyled here.
   The Custom skin used to override the shared stepper into a segmented
   black-box look, which diverged from the clean circles-and-line stepper the
   diamond step shows (that step doesn't load this file, so it falls back to the
   base ns-rb-stepper.css). The two steps therefore looked like different
   products. We now let ALL steps use the base stepper so the Custom skin's
   diamond, setting and complete steps share one consistent stepper. If a
   bespoke Custom stepper is ever wanted, restyle it in ns-rb-stepper.css (base)
   or here, but keep every step identical.
   ========================================================================= */

/* =========================================================================
   ROOT / BASE (scoped)
   ========================================================================= */
.ns-rbl--modern {
    max-width: var(--ns-gen-maxw);
    margin: 0 auto;
    padding: 0 20px 60px;
    color: var(--ns-gen-ink);
    font-family: var(--ns-gen-font-body);
    font-size: 15px;
    line-height: 1.5;
}
.ns-rbl--modern *, .ns-rbl--modern *::before, .ns-rbl--modern *::after { box-sizing: border-box; }
.ns-rbl--modern img, .ns-rbl--modern svg { display: block; max-width: 100%; }
.ns-rbl--modern button { font: inherit; cursor: pointer; }
.ns-rbl--modern a { color: inherit; text-decoration: none; }
.ns-rbl--modern :focus-visible { outline: 2px solid var(--ns-gen-focus); outline-offset: 2px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.ns-rbl--modern .ns-rbl-header { text-align: center; margin: 6px 0 22px; }
.ns-rbl--modern .ns-rbl-header__subtitle { text-transform: uppercase; letter-spacing: .4px; font-size: 12px; color: var(--ns-gen-ink-soft); margin: 0 0 8px; }
.ns-rbl--modern .ns-rbl-header__title { font-family: var(--ns-gen-font-display); font-weight: 500; font-size: 28px; margin: 0 0 8px; color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-header__desc { color: var(--ns-gen-ink-soft); font-size: 14px; margin: 0 auto; max-width: 640px; }

/* =========================================================================
   SHAPE BANNER
   ========================================================================= */
.ns-rbl--modern .ns-rbl-shape-banner { margin: 0 0 18px; }
.ns-rbl--modern .ns-rbl-shape-banner__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 10px 14px; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-surface); font-size: 13px; color: var(--ns-gen-ink); }

/* Selected-diamond summary (left side of the bar) */
.ns-rbl--modern .ns-rbl-shape-banner__diamond { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.ns-rbl--modern .ns-rbl-shape-banner__thumb { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; background: var(--ns-gen-bg); border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); padding: 3px; }
.ns-rbl--modern .ns-rbl-shape-banner__diamond-info { display: flex; flex-direction: column; line-height: 1.25; }
.ns-rbl--modern .ns-rbl-shape-banner__diamond-title { font-weight: 600; font-size: 14px; color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-shape-banner__diamond-meta { font-size: 12px; color: var(--ns-gen-ink-soft); }
.ns-rbl--modern .ns-rbl-shape-banner__change { flex: 0 0 auto; color: var(--ns-gen-accent); font-size: 13px; font-weight: 600; border-bottom: 1px solid transparent; }
.ns-rbl--modern .ns-rbl-shape-banner__change:hover { border-bottom-color: currentColor; }

/* Shape context (right side of the bar) */
.ns-rbl--modern .ns-rbl-shape-banner__text { color: var(--ns-gen-ink-soft); }
.ns-rbl--modern .ns-rbl-shape-banner__text strong { color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-shape-banner__clear { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--ns-gen-ink-soft); font-size: 13px; padding: 0; }
.ns-rbl--modern .ns-rbl-shape-banner__clear:hover { color: var(--ns-gen-ink); }

/* =========================================================================
   STICKY FILTER BAR
   ========================================================================= */
.ns-rbl--modern .ns-rbl-filters__sentinel { height: 1px; }
.ns-rbl--modern .ns-rbl-filters { border-top: 1px solid var(--ns-gen-line); border-bottom: 1px solid var(--ns-gen-line); background: var(--ns-gen-bg); margin-bottom: 22px; }
.ns-rbl--modern .ns-rbl-filters.is-sticky { position: sticky; top: 0; z-index: 40; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ns-rbl--modern .ns-rbl-filters__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 0; }
.ns-rbl--modern .ns-rbl-filters__selects { display: flex; flex-wrap: wrap; gap: 12px; }
.ns-rbl--modern .ns-rbl-filters__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.ns-rbl--modern .ns-rbl-filters__count { font-size: 13px; color: var(--ns-gen-ink-soft); white-space: nowrap; }

/* Dropdowns */
.ns-rbl--modern .ns-rbl-filters__dropdown { position: relative; }
.ns-rbl--modern .ns-rbl-filters__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; min-width: 150px; justify-content: space-between; font-size: 14px; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); transition: border-color var(--ns-gen-t); }
.ns-rbl--modern .ns-rbl-filters__trigger:hover,
.ns-rbl--modern .ns-rbl-filters__trigger.is-open { border-color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-filters__trigger.has-value { border-color: var(--ns-gen-ink); font-weight: 600; }
.ns-rbl--modern .ns-rbl-filters__trigger-chevron { color: var(--ns-gen-ink-soft); transition: transform var(--ns-gen-t); flex: 0 0 auto; }
.ns-rbl--modern .ns-rbl-filters__trigger.is-open .ns-rbl-filters__trigger-chevron { transform: rotate(180deg); }

.ns-rbl--modern .ns-rbl-filters__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: var(--ns-gen-bg); border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 50; padding: 6px; display: none; }
.ns-rbl--modern .ns-rbl-filters__panel[aria-hidden="false"] { display: block; }
.ns-rbl--modern .ns-rbl-filters__panel--right { left: auto; right: 0; }
.ns-rbl--modern .ns-rbl-filters__options { list-style: none; margin: 0; padding: 0; }
.ns-rbl--modern .ns-rbl-filters__option { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 13px; border: 0; border-radius: var(--ns-gen-radius); background: none; color: var(--ns-gen-ink); transition: background-color var(--ns-gen-t); }
.ns-rbl--modern .ns-rbl-filters__option:hover { background: var(--ns-gen-surface); }
.ns-rbl--modern .ns-rbl-filters__option.is-active { background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); }

/* Mobile toggle (hidden on desktop) */
.ns-rbl--modern .ns-rbl-filters__mobile-toggle { display: none; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); font-size: 14px; font-weight: 600; }

/* =========================================================================
   GRID
   ========================================================================= */
.ns-rbl--modern .ns-rbl-grid__wrapper { position: relative; }
.ns-rbl--modern .ns-rbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ns-gen-card-min), 1fr)); gap: 24px; padding: 6px 0 30px; }

/* Loading overlay (transparent scrim + spinner; blocks interaction during load) */
.ns-rbl--modern .ns-rbl-grid__loading { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; padding-top: 80px; z-index: 5; }
.ns-rbl--modern .ns-rbl-grid__loading.is-active { display: flex; }
.ns-rbl--modern .ns-rbl-grid__spinner { width: 34px; height: 34px; border: 3px solid var(--ns-gen-line); border-top-color: var(--ns-gen-ink); border-radius: 50%; animation: ns-rbl-gen-spin .8s linear infinite; }
@keyframes ns-rbl-gen-spin { to { transform: rotate(360deg); } }

/* Empty state */
.ns-rbl--modern .ns-rbl-empty { grid-column: 1 / -1; text-align: center; color: var(--ns-gen-ink-soft); padding: 50px 0; }
.ns-rbl--modern .ns-rbl-empty svg { margin: 0 auto 12px; color: var(--ns-gen-line); }
.ns-rbl--modern .ns-rbl-empty__title { font-family: var(--ns-gen-font-display); font-weight: 500; font-size: 20px; color: var(--ns-gen-ink); margin: 0 0 6px; }
.ns-rbl--modern .ns-rbl-empty__text { font-size: 14px; margin: 0; }

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.ns-rbl--modern .ns-rbl-drawer { position: fixed; inset: 0; z-index: 1000; display: none; }
.ns-rbl--modern .ns-rbl-drawer[aria-hidden="false"] { display: block; }
.ns-rbl--modern .ns-rbl-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.ns-rbl--modern .ns-rbl-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: var(--ns-gen-bg); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.15); }
.ns-rbl--modern .ns-rbl-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ns-gen-line); }
.ns-rbl--modern .ns-rbl-drawer__title { font-family: var(--ns-gen-font-display); font-weight: 500; font-size: 18px; margin: 0; color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-drawer__close { background: none; border: 0; color: var(--ns-gen-ink); padding: 4px; }
.ns-rbl--modern .ns-rbl-drawer__body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.ns-rbl--modern .ns-rbl-drawer__group { display: flex; flex-direction: column; gap: 8px; }
.ns-rbl--modern .ns-rbl-drawer__label { font-weight: 600; font-size: 13px; color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-drawer__select { padding: 10px 12px; font: inherit; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-drawer__footer { display: flex; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--ns-gen-line); }
.ns-rbl--modern .ns-rbl-drawer__clear,
.ns-rbl--modern .ns-rbl-drawer__apply { flex: 1; padding: 12px; font-size: 14px; border-radius: var(--ns-gen-radius); border: 1px solid var(--ns-gen-ink); transition: background-color var(--ns-gen-t), color var(--ns-gen-t); }
.ns-rbl--modern .ns-rbl-drawer__clear { background: var(--ns-gen-btn-ghost-bg); color: var(--ns-gen-btn-ghost-text); }
.ns-rbl--modern .ns-rbl-drawer__clear:hover { background: var(--ns-gen-btn-ghost-hover-bg); }
.ns-rbl--modern .ns-rbl-drawer__apply { background: var(--ns-gen-btn-solid-bg); color: var(--ns-gen-btn-solid-text); }
.ns-rbl--modern .ns-rbl-drawer__apply:hover { background: var(--ns-gen-btn-solid-hover-bg); border-color: var(--ns-gen-btn-solid-hover-bg); }
body.ns-rbl-drawer-open { overflow: hidden; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
    .ns-rbl--modern .ns-rbl-filters__selects { display: none; }
    .ns-rbl--modern .ns-rbl-filters__sort-dropdown { display: none; }
    .ns-rbl--modern .ns-rbl-filters__mobile-toggle { display: inline-flex; }
    .ns-rbl--modern .ns-rbl-filters__right { margin-left: 0; }
}
@media (min-width: 769px) {
    .ns-rbl--modern .ns-rbl-drawer { display: none !important; }
}

/* =========================================================================
   HOST-THEME BUTTON-BLEED GUARD (Elementor kit)
   The kit paints every bare <button> — `.elementor-kit-N button` (0,2,1) —
   outranking this file's `.ns-rbl--modern .ns-X` button rules (0,2,0) and
   flooding the Clear button and the Style / Metal / Price / Sort filter
   dropdowns (including their hover) with the kit's accent colour. Re-pin each
   background at (0,3,0) via the compound root (.ns-rbl--modern and
   .ns-theme-modern sit on the same element). New <button>s need explicit bg.
   ========================================================================= */
/* Pin BOTH background and text colour: the kit's `button:hover` also sets a text
   colour (white), so pinning only the background left white text on the white
   fill — the dropdown labels vanished on hover. */
.ns-theme-modern.ns-rbl--modern .ns-rbl-shape-banner__clear { background: none; color: var(--ns-gen-ink-soft); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-shape-banner__clear:hover { color: var(--ns-gen-ink); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__trigger,
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__trigger:hover,
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__trigger.is-open,
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__trigger.has-value { background: var(--ns-gen-bg); color: var(--ns-gen-ink); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__option,
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__option:hover { background: var(--ns-gen-surface); color: var(--ns-gen-ink); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__option { background: none; }
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__option.is-active { background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-filters__mobile-toggle { background: var(--ns-gen-bg); color: var(--ns-gen-ink); }
.ns-theme-modern.ns-rbl--modern .ns-rbl-drawer__close { background: none; color: var(--ns-gen-ink); }

/* =========================================================================
   MODERN BRIDGE — feed the ported token layer from the Modern palette.
   This file was ported from the generic RB implementation; its rules read
   --ns-gen-* tokens. Here we define the -user layer of those tokens from
   Modern's own palette (respecting the Appearance › Styles overrides
   emitted as --ns-modern-*-user), so the whole RB flow wears the Modern
   look and follows the merchant's Modern Skin Colors. Declared last so it
   wins the same-specificity defaults block above.
   ========================================================================= */
.ns-theme-modern {
    --ns-gen-bg-user:        var(--ns-modern-surface-user, #ffffff);
    --ns-gen-surface-user:   var(--ns-modern-surface-alt-user, #f4f3f0);
    --ns-gen-ink-user:       var(--ns-modern-ink-user, #1a1a18);
    --ns-gen-ink-soft-user:  var(--ns-modern-text-secondary-user, #7a7a72);
    --ns-gen-line-user:      var(--ns-modern-border-user, #e8e6e1);
    --ns-gen-accent-user:    var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-on-ink-user:    #ffffff;
    --ns-gen-track-user:     #f0eeea;
    --ns-gen-active-user:    color-mix(in srgb, var(--ns-modern-primary-user, #2d4a3e) 75%, #ffffff);
    --ns-gen-focus-user:     var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-btn-solid-bg-user:       var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-btn-solid-hover-bg-user: color-mix(in srgb, var(--ns-modern-primary-user, #2d4a3e) 89%, #ffffff);
    --ns-gen-card-hover-border-user:  var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-font-display-user: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ns-gen-font-body-user:    'Syne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ns-gen-radius-user:    8px;
    --ns-gen-radius-lg-user: 14px;
}

/* =========================================================================
   MODERN EDITORIAL LAYER — visual identity distinct from the Custom skin.
   The port above shares structure with Custom; this layer restyles the key
   surfaces with the Modern catalogue's DNA: Fraunces serif display headings,
   IBM Plex Mono price/meta, Syne uppercase UI labels, sage washes and larger
   radii. Scoped one level above the ported rules so it wins ties.
   ========================================================================= */
.ns-theme-modern .ns-rbl--modern .ns-rbl-header__title {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 300;
    letter-spacing: -0.01em;
}
.ns-theme-modern .ns-rbl--modern .ns-rbl-header__subtitle {
    font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ns-gen-accent);
}
.ns-theme-modern .ns-rbl--modern .ns-rbl-filters__count { font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }
.ns-theme-modern .ns-rbl--modern .ns-rbl-filters__trigger,
.ns-theme-modern .ns-rbl--modern .ns-rbl-filters__mobile-toggle,
.ns-theme-modern .ns-rbl--modern .ns-rbl-drawer__apply,
.ns-theme-modern .ns-rbl--modern .ns-rbl-drawer__clear {
    font-family: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ns-theme-modern .ns-rbl--modern .ns-rbl-shape-banner {
    background: color-mix(in srgb, var(--ns-gen-accent) 6%, #ffffff);
    border-color: transparent;
    border-radius: 14px;
}
.ns-theme-modern .ns-rbl--modern .ns-rbl-shape-banner__diamond-title { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 400; }
.ns-theme-modern .ns-rbl--modern .ns-rbl-shape-banner__diamond-meta { font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }

/* =========================================================================
   MODERN CHEVRON STEPPER (Create Your Ring) — copied from loop.css §5 and
   adapted for RB pages: loop.css does not load here, so colours/typography
   resolve through the bridged --ns-gen-* tokens; no background band (host-site
   friendly) and no negative margins (they caused horizontal overflow outside
   the catalogue container).
   ========================================================================= */
.ns-theme-modern .ns-rbl-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    margin: 0 0 32px;
    gap: 0;
}
.ns-theme-modern .ns-rbl-stepper-intro {
    font-family: var(--ns-gen-font-display, Georgia, serif);
    font-size: 14px;
    color: var(--ns-gen-ink-soft, #7a7a72);
    letter-spacing: 0.02em;
    margin-right: 32px;
    font-weight: 300;
    white-space: nowrap;
}
.ns-theme-modern .ns-rbl-step-group {
    display: flex;
    align-items: stretch;
    height: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 8px rgba(45, 74, 62, 0.08));
}
.ns-theme-modern .ns-rbl-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px 0 20px;
    position: relative;
    cursor: default;
    transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--ns-gen-surface, #f4f3f0);
    color: var(--ns-gen-ink-soft, #7a7a72);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.ns-theme-modern .ns-rbl-step-item:first-child {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 0 0);
    border-radius: 8px 0 0 8px;
    padding-left: 24px;
}
.ns-theme-modern .ns-rbl-step-item:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
    border-radius: 0 8px 8px 0;
    padding-right: 28px;
}
.ns-theme-modern .ns-rbl-step-item.is-active {
    background: var(--ns-gen-accent, #2d4a3e);
    color: #fff;
}
.ns-theme-modern .ns-rbl-step-item.is-completed {
    background: color-mix(in srgb, var(--ns-gen-accent, #2d4a3e) 15%, transparent);
    color: var(--ns-gen-accent, #2d4a3e);
}
.ns-theme-modern .ns-rbl-step-num {
    font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 500;
    min-width: 22px;
}
.ns-theme-modern .ns-rbl-step-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ns-theme-modern .ns-rbl-step-icon { width: 20px; height: 20px; opacity: 0.7; flex-shrink: 0; }
.ns-theme-modern .ns-rbl-step-item.is-active .ns-rbl-step-icon { opacity: 1; }
@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-stepper-intro { display: none; }
    .ns-theme-modern .ns-rbl-step-item { padding: 0 20px 0 14px; gap: 8px; }
    .ns-theme-modern .ns-rbl-step-text { display: none; }
}

/* Completed steps are real back-links: the anchor reproduces the item's flex
   layout so num/text/icon keep their spacing, and inherits the state colour. */
.ns-theme-modern .ns-rbl-step-item .ns-rbl-step-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.ns-theme-modern .ns-rbl-step-item.is-completed { cursor: pointer; }
@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-step-item .ns-rbl-step-link { gap: 8px; }
}