/**
 * NivoSync — Modern theme · catalogue loop
 *
 * Editorial layout with optional masonry mode. Design tokens are scoped
 * to `.ns-theme-modern` so the styles never leak into the host theme.
 *
 * File structure inside this stylesheet:
 *   1. Design tokens  (CSS custom properties — sage palette, fonts, motion)
 *   2. Customisation  (admin-controlled overrides via inline <style> hook)
 *   3. Reset          (scoped reset for the wrapper)
 *   4. Layout         (container, toolbar, results bar, pagination)
 *   5. Stepper        (3-step ring builder bar, WC-conditional — fleshed in 3.B)
 *   6. Filters        (primary + advanced — fleshed in 3.B / 3.C)
 *   7. Masonry wrap   (positioning ancestor for absolute-positioned cards)
 *   8. Cards          (variants: hero, tall, wide, compact, featured, micro — 3.E)
 *   9. Responsive     (breakpoints + reduced motion)
 *
 * @package    NivoSync
 * @subpackage Themes/Modern
 * @since      3.0.1
 */

/* ─────────────────────────────────────────────────────────────────
 * 1. DESIGN TOKENS — scoped to .ns-theme-modern so we never leak.
 * Override paths:
 *   --ns-modern-primary    → set by admin colour picker (sage default)
 *   --ns-modern-ink        → set by admin colour picker (near-black default)
 * Everything else is derived.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern {
    /* Brand */
    --ns-modern-primary: #2d4a3e;
    --ns-modern-primary-light: #3d6354;
    --ns-modern-primary-muted: #5a7d6e;
    --ns-modern-primary-wash: rgba(45, 74, 62, 0.06);
    --ns-modern-primary-wash-md: rgba(45, 74, 62, 0.10);
    --ns-modern-primary-wash-strong: rgba(45, 74, 62, 0.15);

    /* Surfaces */
    --ns-modern-bg: #fafaf8;
    --ns-modern-surface: #ffffff;
    --ns-modern-surface-alt: #f4f3f0;
    --ns-modern-border: #e8e6e1;
    --ns-modern-border-light: #f0eeea;

    /* Text */
    --ns-modern-ink: #1a1a18;
    --ns-modern-text: #3a3a36;
    --ns-modern-text-secondary: #7a7a72;
    --ns-modern-text-tertiary: #a5a59e;

    /* Typography
     * Three Google Fonts loaded via theme.json/assets.fonts.
     * Each has a robust fallback stack so type still renders if Google is blocked.
     */
    --ns-modern-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ns-modern-font-ui: 'Syne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ns-modern-font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Motion */
    --ns-modern-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ns-modern-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ns-modern-dur-fast: 180ms;
    --ns-modern-dur-mid: 400ms;
    --ns-modern-dur-slow: 700ms;

    /* Spacing scale */
    --ns-modern-radius-sm: 8px;
    --ns-modern-radius-md: 14px;
    --ns-modern-radius-lg: 20px;
    --ns-modern-radius-xl: 28px;
    --ns-modern-gap: 12px;

    /* Masonry — controlled per breakpoint */
    --ns-modern-cols: 4;
}

/* ─────────────────────────────────────────────────────────────────
 * 2. CUSTOMISATION HOOK (Appearance › Styles → Modern skin)
 * generate_css() emits --ns-modern-*-user custom properties for every
 * colour the merchant changes (scoped to .ns-theme-modern). Each brand
 * token reads its -user override with the design default as fallback, so
 * customisation is opt-in, non-destructive and removable by clearing the
 * field. The primary FAMILY (light/muted/wash*) is DERIVED from the
 * resolved primary via color-mix, so picking one brand colour moves the
 * whole accent palette together instead of leaving half of it green.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern {
    /* Brand — one control, whole family derived */
    --ns-modern-primary: var(--ns-modern-primary-user, #2d4a3e);
    --ns-modern-primary-light: color-mix(in srgb, var(--ns-modern-primary) 89%, #ffffff);
    --ns-modern-primary-muted: color-mix(in srgb, var(--ns-modern-primary) 75%, #ffffff);
    --ns-modern-primary-wash: color-mix(in srgb, var(--ns-modern-primary) 6%, transparent);
    --ns-modern-primary-wash-md: color-mix(in srgb, var(--ns-modern-primary) 10%, transparent);
    --ns-modern-primary-wash-strong: color-mix(in srgb, var(--ns-modern-primary) 15%, transparent);

    /* Surfaces */
    --ns-modern-bg: var(--ns-modern-bg-user, #fafaf8);
    --ns-modern-surface: var(--ns-modern-surface-user, #ffffff);
    --ns-modern-surface-alt: var(--ns-modern-surface-alt-user, #f4f3f0);
    --ns-modern-border: var(--ns-modern-border-user, #e8e6e1);

    /* Text */
    --ns-modern-ink: var(--ns-modern-ink-user, #1a1a18);
    --ns-modern-text: var(--ns-modern-text-user, #3a3a36);
    --ns-modern-text-secondary: var(--ns-modern-text-secondary-user, #7a7a72);

    /* Card text (Styles → Card Text block). --card-align is the flex-axis form of
       --card-text-align (left→flex-start …), so the flex-column body can actually
       move its items, not just the inline text. */
    --ns-modern-card-title-size: var(--ns-modern-card-title-size-user, 22px);
    --ns-modern-card-desc-size:  var(--ns-modern-card-desc-size-user, 10px);
    --ns-modern-card-text-align: var(--ns-modern-card-text-align-user, left);
    --ns-modern-card-align:      var(--ns-modern-card-align-user, flex-start);
}

/* ─────────────────────────────────────────────────────────────────
 * 3. RESET — scoped to the wrapper so we never touch the host theme.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern,
.ns-theme-modern *,
.ns-theme-modern *::before,
.ns-theme-modern *::after {
    box-sizing: border-box;
}

.ns-theme-modern {
    font-family: var(--ns-modern-font-ui);
    color: var(--ns-modern-text);
    background: var(--ns-modern-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ns-theme-modern button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
}

.ns-theme-modern a {
    color: inherit;
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
 * 4. LAYOUT — container, toolbar, results bar, pagination
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern.ns-rbl {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Toolbar above the grid: layout toggle + sort buttons. Built in 3.D. */
.ns-theme-modern .ns-rbl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    margin-bottom: 8px;
    gap: 16px;
    flex-wrap: wrap;
}

.ns-theme-modern .ns-rbl-results-count {
    font-family: var(--ns-modern-font-display);
    font-size: 15px;
    color: var(--ns-modern-text-secondary);
    font-weight: 300;
}

.ns-theme-modern .ns-rbl-results-count strong {
    color: var(--ns-modern-ink);
    font-weight: 600;
}

.ns-theme-modern .ns-rbl-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ns-theme-modern .ns-rbl-layout-toggle {
    display: inline-flex;
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-sm);
    overflow: hidden;
}

.ns-theme-modern .ns-rbl-layout-toggle button {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ns-modern-text-secondary);
    transition: all var(--ns-modern-dur-fast) ease;
    background: var(--ns-modern-surface);
}

.ns-theme-modern .ns-rbl-layout-toggle button.active {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-rbl-sort-btn {
    padding: 6px 12px;
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--ns-modern-text-secondary);
    background: var(--ns-modern-surface);
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-sort-btn:hover {
    border-color: var(--ns-modern-primary-muted);
}

.ns-theme-modern .ns-rbl-sort-btn.active {
    background: var(--ns-modern-primary-wash-md);
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

/* Pagination — kept from current Modern, restyled with sage palette. */
.ns-theme-modern .ns-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 0 60px;
    font-family: var(--ns-modern-font-mono);
    font-size: 13px;
}

.ns-theme-modern .ns-page-numbers {
    display: flex;
    gap: 4px;
}

.ns-theme-modern .ns-page-num,
.ns-theme-modern .ns-page-btn {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-sm);
    color: var(--ns-modern-text-secondary);
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-page-num:hover,
.ns-theme-modern .ns-page-btn:hover {
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-page-current {
    background: var(--ns-modern-primary);
    color: #fff;
    border-color: var(--ns-modern-primary);
}

/* Empty state */
.ns-theme-modern .ns-no-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--ns-modern-text-secondary);
}

.ns-theme-modern .ns-no-results-icon {
    margin-bottom: 16px;
    color: var(--ns-modern-text-tertiary);
}

.ns-theme-modern .ns-no-results h3 {
    font-family: var(--ns-modern-font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--ns-modern-ink);
    margin: 0 0 8px;
}

.ns-theme-modern .ns-no-results p {
    margin: 0;
    font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────
 * 5. STEPPER — 3-step ring builder bar, clip-path arrow geometry.
 *
 * Behaviour spec (WC-conditional, decided 2026-05-25):
 *   - When WC + Ring Builder both enabled: 3 steps fully clickable,
 *     `.is-active` / `.is-completed` states drive panel switching via the
 *     ring-builder JS that listens on `data-step`.
 *   - When WC or RB disabled: step 1 forced active, steps 2-3 carry
 *     `data-disabled="1"` so the click handler short-circuits, and a
 *     notice is rendered below the bar.
 *
 * Geometry: each step is a chevron drawn with `clip-path`. The first item
 * is flat on the left, the last is flat on the right, the middles have
 * both inward and outward notches so they slot together.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern .ns-rbl-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 40px;
    /* No background/border: the bar isn't full-width, so a filled surface read
       as a broken band on host sites. The chevron pills carry their own fill. */
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -32px 32px;
    gap: 0;
}

.ns-theme-modern .ns-rbl-stepper-intro {
    font-family: var(--ns-modern-font-display);
    font-size: 14px;
    color: var(--ns-modern-text-secondary);
    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: pointer;
    transition: all var(--ns-modern-dur-mid) var(--ns-modern-ease-out-expo);
    background: var(--ns-modern-surface-alt);
    color: var(--ns-modern-text-secondary);
    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: var(--ns-modern-radius-sm) 0 0 var(--ns-modern-radius-sm);
    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 var(--ns-modern-radius-sm) var(--ns-modern-radius-sm) 0;
    padding-right: 28px;
}

.ns-theme-modern .ns-rbl-step-item.is-active {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-rbl-step-item.is-completed {
    background: var(--ns-modern-primary-wash-strong);
    color: var(--ns-modern-primary);
}

/* Hover lift only on truly interactive steps. */
.ns-theme-modern .ns-rbl-step-item:not(.is-disabled):not(.is-active):hover {
    background: var(--ns-modern-primary-wash-md);
    color: var(--ns-modern-primary);
}

/* Disabled steps render in the decorative stepper when WC/RB are off. */
.ns-theme-modern .ns-rbl-step-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ns-theme-modern .ns-rbl-step-item.is-disabled:hover {
    background: var(--ns-modern-surface-alt);
    color: var(--ns-modern-text-secondary);
}

.ns-theme-modern .ns-rbl-step-num {
    font-family: var(--ns-modern-font-mono);
    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;
}

.ns-theme-modern .ns-rbl-stepper-notice {
    text-align: center;
    padding: 12px 20px;
    margin: 0 0 20px;
    background: var(--ns-modern-primary-wash);
    color: var(--ns-modern-primary);
    font-size: 12px;
    font-family: var(--ns-modern-font-mono);
    letter-spacing: 0.05em;
    border-radius: var(--ns-modern-radius-md);
}

/* Compact stepper for narrow viewports: drop the intro line and shrink
 * paddings so the three chevrons still fit without wrapping. */
@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;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 6. FILTERS — placeholder. Markup + styles fleshed in 3.C (deferred).
 * MVP uses the existing filters/horizontal.php base; this is just a
 * brand-aligned skin until 3.C lands.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern .ns-rbl-filters {
    background: var(--ns-modern-surface);
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.ns-theme-modern .ns-rbl-filter-label {
    font-family: var(--ns-modern-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ns-modern-primary);
    margin-bottom: 10px;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────
 * 7. MASONRY WRAP — positioning ancestor for absolute-positioned cards.
 *
 * Two modes selected via data-layout on the wrapper:
 *   data-layout="grid"    → standard CSS grid, uniform card heights
 *   data-layout="masonry" → cards absolutely positioned by the JS engine
 *
 * The engine reads --ns-modern-cols to know how many columns to lay out.
 * Cards may declare data-span="2" to span two columns (hero, wide, featured).
 * ───────────────────────────────────────────────────────────────── */

/* Container for both modes */
.ns-theme-modern .ns-rbl-items {
    position: relative;
    width: 100%;
}

/* GRID MODE — simple, predictable. */
.ns-theme-modern .ns-rbl-items[data-layout='grid'] {
    display: grid;
    grid-template-columns: repeat(var(--ns-modern-cols), 1fr);
    gap: var(--ns-modern-gap);
}

/* MASONRY MODE — JS engine controls absolute positioning. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] {
    /* The JS sets the container height after layout pass. */
    transition: height var(--ns-modern-dur-mid) var(--ns-modern-ease-out-expo);
}

.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card {
    position: absolute;
    opacity: 0;
    transition:
        transform var(--ns-modern-dur-mid) var(--ns-modern-ease-out-expo),
        box-shadow var(--ns-modern-dur-mid) var(--ns-modern-ease-out-expo),
        opacity var(--ns-modern-dur-slow) var(--ns-modern-ease-out-expo);
}

.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.placed {
    opacity: 1;
}

/* Reduced motion: skip the entrance fade so screen reader users get
 * predictable layouts. Position is still computed by the engine. */
@media (prefers-reduced-motion: reduce) {
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card {
        opacity: 1;
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 8. CARDS — base + variants.
 *
 * Variant assignment:
 *   - Grid mode (`data-layout="grid"`): every card is compact regardless
 *     of the modifier class so rows stay even.
 *   - Masonry mode (`data-layout="masonry"`): the grid.php loop rotates
 *     `card_type` through hero/tall/wide/compact/featured/micro by index,
 *     producing the same predictable rhythm as the HTML reference.
 *
 * Geometry comes from the HTML reference (G:/pages/dashboards/.../
 * ring-builder-v3-masonry.html lines 144-249), translated onto the
 * existing .ns-card-image / .ns-card-content / .ns-card-title chain so
 * card.php markup stays unchanged.
 *
 * `data-span="2"` is emitted on hero/wide/featured by card.php; the
 * masonry engine honours it when placing columns.
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern .ns-diamond-card {
    background: var(--ns-modern-surface);
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-lg);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.ns-theme-modern .ns-diamond-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 50px rgba(45, 74, 62, 0.1),
        0 0 0 1px rgba(45, 74, 62, 0.08);
    z-index: 10;
}

/* The whole card is clickable (themes/modern/assets/js/theme.js wires this
 * up after first render and after every AJAX swap). Give it focus
 * affordance for keyboard users. */
.ns-theme-modern .ns-diamond-card[role='link']:focus-visible {
    outline: 2px solid var(--ns-modern-primary);
    outline-offset: 2px;
}

/* AJAX loading state — soft fade so the visitor knows something is
 * happening between click and re-render. */
.ns-theme-modern .ns-rbl-items--loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--ns-modern-dur-fast) ease;
}

/* Card image (visual) baseline.
 *
 * The container fills its card variant's allocated space (set by the variant
 * rules in §8). The image inside fills the container with object-fit:cover
 * so real Nivoda photos crop to the frame edge rather than floating in the
 * middle of a sage gradient.
 *
 * The shipped placeholder SVG (assets/images/placeholder-diamond.svg) has a
 * viewBox 0 0 300 300 and uses currentColor — it scales gracefully when
 * cover-fitted into any aspect ratio. We add a defensive `is-placeholder`
 * hook (set from card.php) so we can switch to contain-fitting on the
 * placeholder specifically and avoid an ugly stretch when an admin tests
 * the catalogue before the Nivoda sync brings real images.
 */
.ns-theme-modern .ns-card-image {
    position: relative;
    background: linear-gradient(145deg, #f8f7f4 0%, #efede8 50%, #f2f0ec 100%);
    display: block;
    overflow: hidden;
}

.ns-theme-modern .ns-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ns-modern-dur-mid) var(--ns-modern-ease-out-expo);
}

/* Placeholder SVG fills the whole frame so the card image area looks
 * uniform whether a diamond has a real photo or not. The SVG itself
 * has internal padding around the diamond glyph (it's already designed
 * to sit politely in its viewBox), so we don't need to add a CSS inset
 * here. object-fit: cover guarantees no whitespace bands appear around
 * the SVG on landscape card variants. */
.ns-theme-modern .ns-card-image.is-placeholder img {
    object-fit: cover;
}

.ns-theme-modern .ns-diamond-card:hover .ns-card-image img {
    transform: scale(1.05);
}

/* Card body baseline. align-items (mapped from the Card Text alignment) moves the
   title, price and spec-chip row together; text-align keeps multi-line text in
   sync. The CTA column is pinned to full width below so buttons never shrink. */
.ns-theme-modern .ns-card-content {
    display: flex;
    flex-direction: column;
    padding: 14px;
    flex: 1;
    align-items: var(--ns-modern-card-align, flex-start);
    text-align: var(--ns-modern-card-text-align, left);
}
.ns-theme-modern .ns-card-ctas { align-self: stretch; }

.ns-theme-modern .ns-card-title {
    font-family: var(--ns-modern-font-display);
    font-size: var(--ns-modern-card-title-size, 22px);
    color: var(--ns-modern-ink);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 6px;
}

.ns-theme-modern .ns-card-title a {
    color: inherit;
    text-decoration: none;
}

.ns-theme-modern .ns-card-specs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ns-theme-modern .ns-card-spec {
    padding: 3px 8px;
    background: var(--ns-modern-surface-alt);
    border-radius: 4px;
    font-family: var(--ns-modern-font-mono);
    font-size: var(--ns-modern-card-desc-size, 10px);
    color: var(--ns-modern-text-secondary);
    font-weight: 400;
}

.ns-theme-modern .ns-card-price {
    font-family: var(--ns-modern-font-mono);
    font-size: 16px;
    color: var(--ns-modern-primary);
    font-weight: 500;
    margin-top: 10px;
}

.ns-theme-modern .ns-card-ctas {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ns-theme-modern .ns-card-cta {
    display: block;
    padding: 10px 0;
    border: 1.5px solid var(--ns-modern-primary);
    border-radius: var(--ns-modern-radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ns-modern-primary);
    text-align: center;
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-card-cta:hover {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-card-cta--ring {
    border-color: var(--ns-modern-primary-light);
    color: var(--ns-modern-primary-light);
}

/* Badges */
.ns-theme-modern .ns-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.ns-theme-modern .ns-card-badge {
    padding: 3px 8px;
    background: var(--ns-modern-primary);
    color: #fff;
    font-family: var(--ns-modern-font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    border-radius: 4px;
    font-weight: 500;
}

.ns-theme-modern .ns-card-badge--lab {
    background: var(--ns-modern-primary-light);
}

/* Card actions (wishlist, quickview) — top-right overlay */
.ns-theme-modern .ns-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-diamond-card:hover .ns-card-actions {
    opacity: 1;
}

.ns-theme-modern .ns-card-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ns-modern-primary);
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-card-action-btn:hover {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-card-action-btn svg {
    width: 16px;
    height: 16px;
}

/* ── VARIANTS — only applied in masonry mode. Grid mode keeps every
 * card uniform regardless of the modifier class. ── */

/* HERO — Tall left-image + right-body, spans 2 columns. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero {
    flex-direction: row;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero .ns-card-image {
    width: 50%;
    min-height: 320px;
    flex-shrink: 0;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero .ns-card-content {
    flex: 1;
    padding: 28px 24px;
    justify-content: center;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero .ns-card-title {
    font-size: 32px;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero .ns-card-price {
    font-size: 20px;
}

/* TALL — Vertical card, taller image. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-tall .ns-card-image {
    height: 280px;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-tall .ns-card-content {
    padding: 16px;
}

/* WIDE — Horizontal strip, spans 2 columns. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-wide {
    flex-direction: row;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-wide .ns-card-image {
    width: 200px;
    min-height: 160px;
    flex-shrink: 0;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-wide .ns-card-content {
    flex: 1;
    padding: 18px 20px;
    justify-content: center;
}

/* COMPACT — Default vertical card. Also the grid-mode baseline. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-compact .ns-card-image,
.ns-theme-modern .ns-rbl-items[data-layout='grid'] .ns-diamond-card .ns-card-image {
    height: 180px;
}

/* FEATURED — Larger horizontal, spans 2 columns. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured {
    flex-direction: row;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured .ns-card-image {
    width: 45%;
    min-height: 240px;
    flex-shrink: 0;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured .ns-card-content {
    flex: 1;
    padding: 22px;
    justify-content: center;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured .ns-card-title {
    font-size: 26px;
}

/* MICRO — Tiny row, no CTA, no quickview. */
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro {
    flex-direction: row;
    padding: 14px;
    gap: 12px;
    align-items: center;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-image {
    width: 56px;
    height: 56px;
    min-height: 0;
    flex-shrink: 0;
    border-radius: var(--ns-modern-radius-sm);
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-image img {
    width: 70%;
    max-width: 40px;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-content {
    padding: 0;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-title {
    font-size: 15px;
    margin-bottom: 2px;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-price {
    font-size: 13px;
    margin-top: 2px;
}
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-ctas,
.ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-micro .ns-card-specs {
    display: none;
}

/* Mobile collapse — horizontal variants stack vertically below 720px so
 * they stay readable on a single-column phone layout. */
@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero,
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-wide,
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured {
        flex-direction: column;
    }
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-hero .ns-card-image,
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-wide .ns-card-image,
    .ns-theme-modern .ns-rbl-items[data-layout='masonry'] .ns-diamond-card.is-featured .ns-card-image {
        width: 100%;
        min-height: 180px;
        height: 180px;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 9. RESPONSIVE — column scaling + mobile-only adjustments.
 * The masonry engine reads --ns-modern-cols, so changing it here
 * automatically reflows.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ns-theme-modern {
        --ns-modern-cols: 3;
    }
}

@media (max-width: 768px) {
    .ns-theme-modern {
        --ns-modern-cols: 2;
    }
    .ns-theme-modern.ns-rbl {
        padding: 0 16px;
    }
    .ns-theme-modern .ns-rbl-stepper {
        margin: 0 -16px 24px;
        padding: 18px 20px;
    }
}

@media (max-width: 480px) {
    .ns-theme-modern {
        --ns-modern-cols: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 10. FILTERS — full rebuild (3.0.3).
 *
 * Both horizontal and sidebar templates render the same .ns-rbl-*
 * primitives so the styles are shared. The wrapper differentiates:
 *   .ns-rbl-filters-wrap  → horizontal panel (above the grid)
 *   .ns-rbl-sidebar       → vertical panel (alongside the grid)
 * ───────────────────────────────────────────────────────────────── */

/* Horizontal wrapper */
.ns-theme-modern.ns-rbl-filters-wrap {
    margin: 24px 0;
}

.ns-theme-modern .ns-rbl-filters {
    background: var(--ns-modern-surface);
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-lg);
    overflow: hidden;
}

.ns-theme-modern .ns-rbl-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--ns-modern-border-light);
    gap: 16px;
    flex-wrap: wrap;
}

.ns-theme-modern .ns-rbl-filters-title {
    font-family: var(--ns-modern-font-display);
    font-size: 14px;
    color: var(--ns-modern-text-secondary);
    letter-spacing: 0.04em;
    font-weight: 400;
}

.ns-theme-modern .ns-rbl-filters-actions {
    display: flex;
    gap: 8px;
}

.ns-theme-modern .ns-rbl-btn-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--ns-modern-border);
    border-radius: 100px;
    font-size: 11px;
    color: var(--ns-modern-text-secondary);
    background: var(--ns-modern-surface);
    letter-spacing: 0.03em;
    font-weight: 500;
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-btn-toggle:hover {
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-rbl-btn-toggle.is-open,
.ns-theme-modern .ns-rbl-btn-toggle[aria-expanded='true'] {
    background: var(--ns-modern-primary);
    color: #fff;
    border-color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-rbl-btn-reset {
    border-style: dashed;
}

/* Mobile filter sheet toggle — desktop never sees it; ≤720px it becomes
 * the only way to open the filter body (see the collapse block in the
 * 720px media query below). */
.ns-theme-modern .ns-rbl-btn-sheet {
    display: none;
}

@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-btn-sheet {
        display: inline-flex;
    }

    /* Collapsed by default: only the header row (title + toggle buttons)
     * stays visible; the whole filter body folds behind the Filters
     * button. theme.js toggles `is-open` on .ns-rbl-filters. */
    .ns-theme-modern .ns-rbl-filters:not(.is-open) .ns-rbl-filter-row,
    .ns-theme-modern .ns-rbl-filters:not(.is-open) > .ns-rbl-filter-grid,
    .ns-theme-modern .ns-rbl-filters:not(.is-open) .ns-rbl-filters-advanced {
        display: none;
    }

    .ns-theme-modern .ns-rbl-filters.is-open .ns-rbl-filters-header {
        position: sticky;
        top: 0;
        background: var(--ns-modern-surface);
        z-index: 5;
    }
}

/* Generic filter row (above the grid sections) */
.ns-theme-modern .ns-rbl-filter-row {
    padding: 18px 28px;
    border-bottom: 1px solid var(--ns-modern-border-light);
}

.ns-theme-modern .ns-rbl-filter-row .ns-rbl-filter-label {
    margin-bottom: 12px;
}

/* Filter label (shared) */
.ns-theme-modern .ns-rbl-filter-label {
    font-family: var(--ns-modern-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ns-modern-primary);
    display: block;
    margin-bottom: 8px;
}

.ns-theme-modern .ns-rbl-filter-label-note {
    font-size: 9px;
    color: var(--ns-modern-text-tertiary);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--ns-modern-font-ui);
    margin-left: 4px;
}

/* Stone type toggle */
.ns-theme-modern .ns-rbl-stone-type {
    display: inline-flex;
    border: 1.5px solid var(--ns-modern-border);
    border-radius: 100px;
    overflow: hidden;
    background: var(--ns-modern-surface);
}

.ns-theme-modern .ns-rbl-stone-type--stacked {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--ns-modern-radius-sm);
    width: 100%;
}

.ns-theme-modern .ns-rbl-stone-btn {
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ns-modern-text-secondary);
    transition: all var(--ns-modern-dur-fast) ease;
    background: transparent;
}

.ns-theme-modern .ns-rbl-stone-btn.is-selected {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-rbl-stone-type--stacked .ns-rbl-stone-btn {
    padding: 12px;
    border-radius: 0;
}

/* Shape chips */
.ns-theme-modern .ns-rbl-shapes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ns-theme-modern .ns-rbl-shape-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 8px;
    min-width: 72px;
    border: 1.5px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-md);
    background: var(--ns-modern-surface);
    color: var(--ns-modern-text-tertiary);
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-shape-chip:hover {
    border-color: var(--ns-modern-primary-muted);
    background: var(--ns-modern-primary-wash);
    color: var(--ns-modern-primary-light);
}

/* Selected shape — strong sage fill with white icon + label so it reads as
 * "the active choice" at a glance. Previously this used a wash-only
 * highlight that was too subtle against the white surface. */
.ns-theme-modern .ns-rbl-shape-chip.is-selected {
    border-color: var(--ns-modern-primary);
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-rbl-shape-chip.is-selected svg {
    opacity: 1;
    stroke: #fff;
}

.ns-theme-modern .ns-rbl-shape-chip.is-selected span {
    color: #fff;
}

.ns-theme-modern .ns-rbl-shape-chip svg {
    width: 26px;
    height: 26px;
    opacity: 0.55;
    transition: opacity var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-shape-chip.is-selected svg,
.ns-theme-modern .ns-rbl-shape-chip:hover svg {
    opacity: 0.95;
}

.ns-theme-modern .ns-rbl-shape-chip span {
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.ns-theme-modern .ns-rbl-shapes--compact .ns-rbl-shape-chip {
    min-width: 56px;
    padding: 8px 6px 6px;
}

.ns-theme-modern .ns-rbl-shapes--compact .ns-rbl-shape-chip svg {
    width: 20px;
    height: 20px;
}

.ns-theme-modern .ns-rbl-shapes--compact .ns-rbl-shape-chip span {
    font-size: 9px;
}

/* Primary grid layout (horizontal panel) */
.ns-theme-modern .ns-rbl-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.ns-theme-modern .ns-rbl-filter-cell {
    padding: 18px 28px;
    border-right: 1px solid var(--ns-modern-border-light);
    border-bottom: 1px solid var(--ns-modern-border-light);
}

.ns-theme-modern .ns-rbl-filter-cell:nth-child(3n),
.ns-theme-modern .ns-rbl-filter-cell:last-child {
    border-right: none;
}

@media (max-width: 1024px) {
    .ns-theme-modern .ns-rbl-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ns-theme-modern .ns-rbl-filter-cell:nth-child(3n) {
        border-right: 1px solid var(--ns-modern-border-light);
    }
    .ns-theme-modern .ns-rbl-filter-cell:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-filter-grid {
        grid-template-columns: 1fr;
    }
    .ns-theme-modern .ns-rbl-filter-cell {
        border-right: none !important;
    }
}

/* Range slider (dual handle).
 *
 * Two native input[type=range] elements absolutely stacked over a
 * shared "track" pseudo-line provided by a real div behind them. The
 * inputs themselves render transparent tracks so we control the visual
 * with the underlying div. Each input only receives pointer events on
 * its own thumb (track is pointer-events:none), and the thumbs share
 * the same z-index so both are always grabbable regardless of position.
 */
.ns-theme-modern .ns-rbl-range {
    position: relative;
}

/* Visible shared track — a thin grey line behind the two inputs so the
 * slider "rail" is always visible, even where neither input's thumb is
 * at that pixel. Positioned at the same vertical centre as the thumbs
 * (bottom + 16px = thumb centre of a 32px-tall input band). */
.ns-theme-modern .ns-rbl-range::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 3px;
    background: var(--ns-modern-border);
    border-radius: 2px;
    transform: translateY(1.5px);
    pointer-events: none;
}

/* The `[data-range]` qualifier is load-bearing, not decoration: it lifts this
 * rule to (0,4,1) so it outranks Elementor's kit selector
 * `.elementor-kit-N input:not([type="button"]):not([type="submit"])` — (0,3,1).
 * Without it the two tie and the winner is decided by stylesheet order, which
 * we don't control. Every range input in this theme carries data-range, so the
 * qualifier costs no coverage. `padding` must be reset explicitly: the kit pads
 * every input and, with border-box, that insets the thumb travel ~27px per side
 * while the ::after rail still spans the full width, leaving the thumbs short of
 * the rail ends. Only pseudo-element rules below are safe at lower specificity —
 * the kit selector cannot match those. */
.ns-theme-modern .ns-rbl-range input[type='range'][data-range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ns-theme-modern .ns-rbl-range input[type='range']::-webkit-slider-runnable-track {
    height: 3px;
    background: var(--ns-modern-border);
    border-radius: 2px;
}

.ns-theme-modern .ns-rbl-range input[type='range']::-moz-range-track {
    height: 3px;
    background: var(--ns-modern-border);
    border-radius: 2px;
}

.ns-theme-modern .ns-rbl-range input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ns-modern-primary);
    border: 2px solid var(--ns-modern-surface);
    box-shadow: 0 1px 4px rgba(45, 74, 62, 0.25);
    margin-top: -7px;
    cursor: grab;
    transition: transform var(--ns-modern-dur-fast) var(--ns-modern-ease-spring);
}

.ns-theme-modern .ns-rbl-range input[type='range']::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ns-modern-primary);
    border: 2px solid var(--ns-modern-surface);
    box-shadow: 0 1px 4px rgba(45, 74, 62, 0.25);
    cursor: grab;
}

.ns-theme-modern .ns-rbl-range input[type='range']::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Both inputs share z-index — pointer-events:none on the input + auto
 * on the thumb pseudo-element means clicks only register on the visible
 * circles, so they don't fight each other for the track surface. Without
 * a z-index difference the right thumb stops getting "hidden behind the
 * track" of the other input. */
.ns-theme-modern .ns-rbl-range input[type='range'][data-range='min'],
.ns-theme-modern .ns-rbl-range input[type='range'][data-range='max'] {
    z-index: 2;
}

/* Make the input's own runnable-track transparent — the visible rail is
 * the parent ::after pseudo-element above. Without this Chrome paints a
 * second darker bar over the top input. */
.ns-theme-modern .ns-rbl-range input[type='range']::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}
.ns-theme-modern .ns-rbl-range input[type='range']::-moz-range-track {
    background: transparent;
    border: none;
}

.ns-theme-modern .ns-rbl-range-readout {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--ns-modern-font-mono);
    font-size: 12px;
    color: var(--ns-modern-text);
    margin: 0 0 12px;
    /* Reserve the row above the input band so the thumb never overlaps it. */
    min-height: 18px;
}

/* Pad the bottom of the range box so the absolute inputs have a 32px-tall
 * band to live in below the readout. */
.ns-theme-modern .ns-rbl-range {
    padding-bottom: 36px;
}

.ns-theme-modern .ns-rbl-range-sep {
    color: var(--ns-modern-text-tertiary);
}

.ns-theme-modern .ns-rbl-range-unit {
    color: var(--ns-modern-text-tertiary);
    font-size: 10px;
    margin-left: 4px;
}

/* Stepped labels (colour, clarity, cut, polish, symmetry, fluorescence) */
.ns-theme-modern .ns-rbl-stepped {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--ns-modern-font-mono);
    font-size: 10px;
    color: var(--ns-modern-text-tertiary);
    flex-wrap: wrap;
    gap: 4px;
}

.ns-theme-modern .ns-rbl-stepped span {
    padding: 4px 0;
}

/* Report chips */
.ns-theme-modern .ns-rbl-report-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ns-theme-modern .ns-rbl-report-chip {
    padding: 8px 20px;
    border: 1.5px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-sm);
    font-family: var(--ns-modern-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ns-modern-text-secondary);
    background: var(--ns-modern-surface);
    letter-spacing: 0.02em;
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-report-chip:hover {
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-rbl-report-chip.is-selected {
    background: var(--ns-modern-primary);
    border-color: var(--ns-modern-primary);
    color: #fff;
}

/* Advanced multi-select chips (fluorescence / polish / symmetry) — share
 * the report-chip skin but sit tighter so five options fit one cell row. */
.ns-theme-modern .ns-rbl-adv-chips {
    gap: 6px;
}

.ns-theme-modern .ns-rbl-adv-chip {
    padding: 6px 12px;
    font-size: 11px;
}

/* Advanced fold-down */
.ns-theme-modern .ns-rbl-filters-advanced {
    overflow: hidden;
    transition: max-height var(--ns-modern-dur-slow) var(--ns-modern-ease-out-expo);
}

.ns-theme-modern .ns-rbl-filters-advanced[hidden] {
    display: block !important; /* override native [hidden] so transition runs */
    max-height: 0;
}

.ns-theme-modern .ns-rbl-filters-advanced:not([hidden]) {
    max-height: 800px;
}

/* ─────────────────────────────────────────────────────────────────
 * 11. SIDEBAR — vertical filter panel (alternate to horizontal).
 * ───────────────────────────────────────────────────────────────── */
.ns-theme-modern.ns-rbl-sidebar {
    width: 100%;
    max-width: 320px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
}

.ns-theme-modern .ns-rbl-sidebar-inner {
    background: var(--ns-modern-surface);
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-lg);
    padding: 24px;
}

.ns-theme-modern .ns-rbl-sidebar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ns-modern-border-light);
    margin-bottom: 20px;
}

.ns-theme-modern .ns-rbl-sidebar-title {
    font-family: var(--ns-modern-font-display);
    font-size: 18px;
    color: var(--ns-modern-ink);
    font-weight: 400;
    margin: 0;
}

.ns-theme-modern .ns-rbl-sidebar-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--ns-modern-border-light);
}

.ns-theme-modern .ns-rbl-sidebar-section:last-of-type {
    border-bottom: none;
}

.ns-theme-modern .ns-rbl-btn-apply {
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    background: var(--ns-modern-primary);
    color: #fff;
    border: none;
    border-radius: var(--ns-modern-radius-sm);
    font-family: var(--ns-modern-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-btn-apply:hover {
    background: var(--ns-modern-primary-light);
}

@media (max-width: 768px) {
    .ns-theme-modern.ns-rbl-sidebar {
        max-width: 100%;
        position: static;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 12. MODERN CATALOG WRAPPER (3.0.4)
 *
 * The Modern theme provides its own page-level wrapper at
 * `themes/modern/loop/wrapper.php` instead of the shared
 * `templates/loop/wrapper.php`. This block styles the wrapper-level
 * primitives (the outer container + sort buttons that the new
 * results bar exposes). Everything inside (stepper, filters, cards)
 * is already covered by §5–§11.
 *
 * Why a Modern-specific wrapper:
 *   The shared wrapper renders a topbar / header-bar / type-toggle /
 *   view-toggle / sort-dropdown structure designed for Default and
 *   Elegant. None of those classes had Modern styles, which produced
 *   a confused look where the Modern catalogue's chrome was unstyled
 *   while only the grid inside it picked up sage tokens. The Modern
 *   wrapper replaces all of that with a simpler reference-aligned
 *   flow: stepper → filters → toolbar (count + sort + layout) → grid.
 * ───────────────────────────────────────────────────────────────── */

.ns-theme-modern.ns-modern-catalog {
    max-width: 1440px;
    margin: 24px auto;
    padding: 0 32px;
}

/* Sort button group (3 inline buttons inside the results toolbar). */
.ns-theme-modern .ns-rbl-sort {
    display: inline-flex;
    gap: 6px;
}

.ns-theme-modern .ns-rbl-sort-btn {
    padding: 6px 14px;
    border: 1px solid var(--ns-modern-border);
    border-radius: var(--ns-modern-radius-sm);
    background: var(--ns-modern-surface);
    font-family: var(--ns-modern-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ns-modern-text-secondary);
    cursor: pointer;
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-sort-btn:hover {
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-rbl-sort-btn.active {
    background: var(--ns-modern-primary-wash-md);
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}

/* On mobile, let the toolbar wrap and let each control take its own line. */
@media (max-width: 720px) {
    .ns-theme-modern .ns-rbl-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ns-theme-modern .ns-rbl-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ns-theme-modern .ns-rbl-sort,
    .ns-theme-modern .ns-rbl-layout-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .ns-theme-modern .ns-rbl-sort-btn,
    .ns-theme-modern .ns-rbl-layout-toggle button {
        flex: 1;
        text-align: center;
    }

    .ns-theme-modern.ns-modern-catalog {
        padding: 0 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 13. PAGINATION VARIANTS (v1.0.0+)
 *
 * Four pagination modes selectable from admin (NivoSync → Settings →
 * Display → pagination_type). The wrapper.php renders one of these
 * markup shapes; the CSS here styles all four. theme.js wires the
 * three JS-driven modes (ajax, load_more, infinite) to their
 * respective AJAX hooks.
 * ───────────────────────────────────────────────────────────────── */

/* Load More button — sage outlined pill, fills sage on hover. */
.ns-theme-modern .ns-rbl-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 0 60px;
}

.ns-theme-modern .ns-rbl-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 48px;
    border: 1.5px solid var(--ns-modern-primary);
    border-radius: 100px;
    background: transparent;
    color: var(--ns-modern-primary);
    font-family: var(--ns-modern-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--ns-modern-dur-fast) ease;
}

.ns-theme-modern .ns-rbl-loadmore-btn:hover {
    background: var(--ns-modern-primary);
    color: #fff;
}

.ns-theme-modern .ns-rbl-loadmore-btn.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

.ns-theme-modern .ns-rbl-loadmore-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: ns-modern-spin 0.6s linear infinite;
}

.ns-theme-modern .ns-rbl-loadmore-btn.is-loading .ns-rbl-loadmore-spinner {
    display: inline-block;
}

@keyframes ns-modern-spin {
    to { transform: rotate(360deg); }
}

/* Infinite-scroll sentinel — visible only when loading is in flight,
 * shown as a centred spinner. The sentinel itself doesn't need a
 * background because it sits below the last card. */
.ns-theme-modern .ns-rbl-infinite-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0 60px;
    min-height: 60px;
    color: var(--ns-modern-primary);
}

.ns-theme-modern .ns-rbl-infinite-sentinel .ns-rbl-loadmore-spinner {
    display: inline-block;
}

/* Numbered-AJAX pagination — buttons render visually identical to the
 * traditional <a> pagination but trigger fetchModernFilter() instead of
 * navigating. Disabled prev/next get the typical greyed-out treatment. */
.ns-theme-modern .ns-pagination--ajax button.ns-page-btn,
.ns-theme-modern .ns-pagination--ajax button.ns-page-num {
    cursor: pointer;
    font-family: inherit;
    background: var(--ns-modern-surface);
}

.ns-theme-modern .ns-pagination--ajax button.ns-page-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ns-theme-modern .ns-pagination--ajax button.ns-page-num:hover:not(.ns-page-current) {
    border-color: var(--ns-modern-primary-muted);
    color: var(--ns-modern-primary);
}


/* 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; }
}