/**
 * RTM Font Showcase Pro — specimen, glyph map and license panel.
 *
 * Every color and dimension comes from a custom property written by
 * Frontend\CssVars from the global palette, with the shipped default as the
 * var() fallback so an unset option degrades to the design rather than to
 * nothing.
 */

/* Visibility is the `hidden` attribute throughout, so the JS toggles one
   attribute instead of writing inline display values it would then have to
   remember. Declared explicitly because the rules below set `display` on
   these elements, which beats the user-agent stylesheet's [hidden]. */
.rtm-panel[hidden],
.rtm-ot-panel[hidden],
.rtm-glyph-set[hidden],
.rtm-atc-spinner[hidden],
.rtm-oc-bd[hidden] {
    display: none;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

/*
 * Inline SVG icons draw with currentColor, so they are only ever as visible as
 * the colour they inherit. Every icon in the suite sits on one of our own
 * surfaces, so the colour is ours to state -- and stating it is what stops a
 * theme's button colour erasing them.
 */
.rtm-suite button svg {
    display: block;
    flex-shrink: 0;
    color: inherit;
}
.rtm-suite *, .rtm-suite *::before, .rtm-suite *::after { box-sizing: border-box; }

/*
 * Controls, defended against the theme around them.
 *
 * These are buttons, selects and ranges dropped into somebody else's page, and
 * a theme that styles `button` broadly -- pill radii, 1rem padding, uppercase
 * letter-spacing, a min-width -- reshapes every control in the toolbar. That
 * is what turned four 26px alignment icons into four stretched slabs. Stating
 * the ones that matter costs a handful of declarations and makes the specimen
 * look the same in every theme it is dropped into.
 */
.rtm-suite button {
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    min-width: 0;
    min-height: 0;
    text-decoration: none;
}

/* Stacked is the resting arrangement: it is what a theme-builder template
   produces from the separate widgets, and what the whole showcase falls back
   to when the strip's script never ran. The gap is then what separates the
   specimen, the character map and the spec sheet. */
.rtm-panel + .rtm-panel {
    margin-top: 44px;
}

/* ── The panel switcher ──────────────────────────────────────────────────────
   Everything here is behind `.rtm-tabbed`, which the strip's own inline script
   puts on the suite. Nothing below applies until it does, so a page whose
   JavaScript failed shows no strip and all three panels -- see
   templates/parts/tabs.php for why that decision is made in markup rather
   than in this file. */

.rtm-tabs {
    display: none;
}

/* The strip runs the width of the panel and the chosen tab is a pill inside
   it -- the arrangement the glyph filter rail already uses, and for the same
   reason: a segmented control has to say which segment you are in before it
   says anything else. */
.rtm-tabbed .rtm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    padding: 5px;
    background: var(--rtm-card-bg, #f4f4f5);
    border-radius: var(--rtm-stage-r, 16px);
}

/* Only one panel at a time, and the margin between them goes with the
   stacking it existed to space out. */
.rtm-tabbed .rtm-panel:not(.rtm-panel-active) {
    display: none;
}

.rtm-tabbed .rtm-panel + .rtm-panel {
    margin-top: 0;
}

/*
 * Scoped under `.rtm-suite`, like every other button in this file.
 *
 * These three shipped unscoped and a theme won the argument: `.rtm-tab` is one
 * class, and a theme styling `.woocommerce button` or `.entry-content button`
 * has two, so its colour landed on top and the strip greyed out again -- which
 * is what it was still doing after the contrast fix. Every other control here
 * carries the `.rtm-suite` prefix for exactly this reason.
 *
 * An explicit colour rather than opacity, too. Opacity fades whatever colour
 * wins, so a theme colour that was already pale came through paler still.
 */
.rtm-suite .rtm-tab {
    padding: 10px 22px;
    border: none;
    border-radius: calc(var(--rtm-stage-r, 16px) - 5px);
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rtm-tab-text, #52525b);
    cursor: pointer;
    transition: background .16s, color .16s;
}

.rtm-suite .rtm-tab:hover {
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-tab:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: -2px;
}

/* The same pair the glyph filter marks its chosen category with, because it
   is the same statement. A white pill on the near-white strip was the other
   half of the problem: two greys a shade apart, and nothing to tell you which
   tab you were reading. */
.rtm-suite .rtm-tab-active,
.rtm-suite .rtm-tab-active:hover {
    background: var(--rtm-ctrl-btn-bg, #18181b);
    color: var(--rtm-ctrl-btn-text, #ffffff);
}

@media (max-width: 480px) {
    .rtm-tabbed .rtm-tabs { gap: 2px; }
    .rtm-suite .rtm-tab { padding: 9px 12px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
    .rtm-suite .rtm-tab { transition: none; }
}

/*
 * Controls below the specimen.
 *
 * Ordered rather than moved. The toolbar stays where it is in the document --
 * ahead of the specimen it drives, which is the order a screen reader and a
 * tab key both want -- and only the painting order changes. The OpenType panel
 * comes with it, because it drops out of the toolbar and reads as detached
 * from it the moment the two are separated.
 *
 * `.rtm-tb-top` needs no rules at all: the document order is already it.
 */
.rtm-panel.rtm-tb-bottom {
    display: flex;
    flex-direction: column;
}

.rtm-panel.rtm-tb-bottom .rtm-stage    { order: 1; }
.rtm-panel.rtm-tb-bottom .rtm-toolbar  { order: 2; margin-bottom: 0; margin-top: 26px; }
.rtm-panel.rtm-tb-bottom .rtm-ot-panel { order: 3; }
.rtm-panel.rtm-tb-bottom .rtm-buy-wrap { order: 4; }
.rtm-suite {
    margin: 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--rtm-text, #18181b);
}


/* ══════════════════════════════════════════════════════════════════
   PREVIEW STAGE
══════════════════════════════════════════════════════════════════ */
.rtm-stage {
    position: relative;
    background: var(--rtm-stage-bg, #ffffff);
    color: var(--rtm-stage-text, #18181b);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-stage-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    padding: var(--rtm-stage-p, 30px);
    transition: background .28s, color .28s, border-color .28s;
}

.rtm-stage.rtm-dark {
    background: #09090b !important;
    color: #f4f4f5 !important;
    border-color: #27272a !important;
}
.rtm-sampler {
    font-family: "RTMFont", system-ui, serif;
    outline: none;
    word-break: break-word;
    cursor: text;
    transition: font-size .14s;

    /* Above the rules, which are painted into the same padding box. */
    position: relative;
}

/* ── Metric rules ────────────────────────────────────────────────────────── */

/*
 * The five horizontal rules behind the specimen: ascender, cap height, x
 * height, baseline and descender. Inset to the stage's padding box so the
 * lines run the full width of the surface rather than stopping at the text.
 */
.rtm-guides {
    position: absolute;
    inset: 0;

    /* The specimen underneath is editable and the rules sit on top of it;
       without this the caret cannot be placed by clicking. */
    pointer-events: none;

    /* A rule can fall outside the card: a face whose ascender exceeds its em
       square, drawn at a line height that does not leave room for it, puts the
       ascender above the stage entirely. Better to lose the line than to paint
       it across the toolbar, where it reads as a stray border. */
    overflow: hidden;
}

.rtm-guide {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    /* Centred on the line it marks, which is what `top` is set to. */
    transform: translateY(-50%);
    border-top: 1px dashed var(--rtm-guide-line, rgba(120, 120, 130, .38));
    font-size: var(--rtm-guide-fs, 9px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rtm-guide-text, rgba(120, 120, 130, .85));
}

/* The zero the other four are measured from, so it is drawn as a fact rather
   than as a guide. */
.rtm-guide-baseline {
    border-top-style: solid;
    border-top-color: var(--rtm-guide-base, rgba(120, 120, 130, .7));
}

.rtm-guide-lbl,
.rtm-guide-val {
    /* Lifted clear of its own rule, and given the stage's colour behind it so
       the line does not strike through the words. */
    background: var(--rtm-stage-bg, #fff);
    padding: 0 4px;
    line-height: 1.6;
}

.rtm-guide-val {
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

.rtm-stage.rtm-dark .rtm-guide-lbl,
.rtm-stage.rtm-dark .rtm-guide-val {
    background: #09090b;
}

/* Alignment icon buttons */
.rtm-align-row { display: flex; gap: 5px; }
.rtm-suite .rtm-align-btn {
    /* Not `flex: 1`. These are four fixed icons; growing them to share the
       row's width is what made them read as buttons with nothing written on
       them, and the wider the toolbar the worse it got. */
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    cursor: pointer;

    /* How this looks -- fill, border, radius, and both of its states -- is
       decided once, under SPECIMEN TOOLBAR near the foot of this file. */
    transition: background .13s, color .13s, border-color .13s;
}

/* The OpenType features were a row of pills here until they moved into the
   panel that drops out of the toolbar, where they are checkboxes
   (.rtm-ot-check). Nothing emits .rtm-ot-pill or .rtm-ot-row any more. */

/* ── Purchase Options button ─────────────────────────────────────────────── */
.rtm-buy-wrap { margin-top: 18px; }

/* Sized to its own words, not to the page.
   Full width was defensible while this button was the last thing inside a
   tab panel. Now that the specimen, the character map and the spec sheet are
   all on one page, a bar the full width of the layout reads as a section
   divider rather than as the one thing on the page you are meant to click. */
.rtm-suite .rtm-buy-btn,
.rtm-suite .rtm-buy-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rtm-buy-gap, 10px);
    width: auto;
    min-width: 210px;
    padding: 15px 36px;
    background: var(--rtm-buy-bg, #18181b);
    color: var(--rtm-buy-text, #ffffff);
    border: none;
    border-radius: var(--rtm-buy-r, 12px);
    font-size: var(--rtm-buy-fs, 13px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: filter .18s, transform .18s, box-shadow .18s;
    text-align: center;
    line-height: 1.2;
}
.rtm-suite .rtm-buy-btn:hover {
    filter: brightness(.9);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Which side of the words the mark sits on is not set here: the Style tab
   writes flex-direction onto the element, and the row above is the default it
   starts from. */

/* The mark itself. Sized in em so it follows the button's own type scale
   until the Style tab says otherwise, and laid out as a box of its own so a
   font icon and an inline SVG line up the same way. */
.rtm-suite .rtm-buy-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--rtm-buy-ico-size, 1.25em);
    line-height: 0;
}
/* Sized only. `fill` is deliberately not set: the built-in mark below is drawn
   with strokes on an unfilled circle, and a blanket `fill: currentColor` here
   would inherit down to that circle and turn the outline into a solid disc. */
.rtm-suite .rtm-buy-ico svg {
    width: 1em;
    height: 1em;
}
.rtm-suite .rtm-buy-ico i { font-size: inherit; }

/* A mark on its own has no words to set the width, so the minimum meant for a
   line of text would leave it stranded in the middle of a wide slab. */
.rtm-suite .rtm-buy-icon {
    min-width: 0;
    padding: 14px;
}

/* Shape is not set here. Pill and circle come from the Style tab, which
   writes them straight onto the element -- see AddToCart::group_shape(). The
   circle needs `padding: 0` and `min-width: 0` alongside the radius, because
   the padding above is what was quietly stretching a round icon button into
   an oval, and those three have to arrive together or not at all. */

/* ── Sticky opener ───────────────────────────────────────────────────────
   The button leaves the flow and pins itself to an edge of the viewport for
   as long as the page is open.

   It used to detach on a scroll threshold, watched by an IntersectionObserver.
   That got the state wrong in the two places it matters most: at the top of
   the page -- where a floating buy button is exactly what a specimen wants,
   and where a visitor who has not scrolled yet saw nothing -- and in the
   Elementor editor, whose canvas is never scrolled, so switching Sticky on
   appeared to do nothing at all.

   Now the class alone positions it. The state is server-rendered, so the
   editor draws it the moment the control changes and no script is involved.

   z-index sits below the purchase panel (99999) and its backdrop (99998) on
   purpose: the panel this button opens has to cover it, or the button that
   opened it would float over the thing it just produced. */
.rtm-buy-sticky {
    /* Nothing is left in the flow to space away from, and the wrapper is not
       holding a gap open for a button that is never coming back to it. */
    margin: 0;
    min-height: 0;
}
.rtm-suite .rtm-buy-sticky .rtm-buy-btn {
    position: fixed;
    z-index: 99997;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

/* Edge and side are set by separate classes, so the six arrangements worth
   having -- four corners and two middles -- are five rules rather than six.
   The same inset serves both axes: a button in a corner is held off each of
   the edges it touches by the same amount. */
.rtm-buy-stick-bottom .rtm-buy-btn { bottom: var(--rtm-buy-stick-off, 20px); }
.rtm-buy-stick-top    .rtm-buy-btn { top: var(--rtm-buy-stick-off, 20px); }
.rtm-buy-stick-left   .rtm-buy-btn { left: var(--rtm-buy-stick-off, 20px); }
.rtm-buy-stick-right  .rtm-buy-btn { right: var(--rtm-buy-stick-off, 20px); }

/* The side turns around with the page, for the same reason the offcanvas edge
   does: a corner chosen on the Design screen is a reading-order corner.

   Spelled out rather than written as `inset-inline-start`, which would say
   the same thing in fewer lines. The centred arrangement below carries a
   translateX on the same `.rtm-buy-btn` tail, and rtl-audit-transforms.js
   matches on that tail -- a logical inset here reads to it as an offset whose
   transform was left unmirrored. The two never meet on one element (the
   template writes one edge class and one align class, and center is an align),
   but a report that has to be explained every time it is read is worse than
   two extra rules. */
[dir="rtl"] .rtm-buy-stick-left  .rtm-buy-btn { left: auto; right: var(--rtm-buy-stick-off, 20px); }
[dir="rtl"] .rtm-buy-stick-right .rtm-buy-btn { right: auto; left: var(--rtm-buy-stick-off, 20px); }

/* Centring is a transform rather than `margin: auto`, because the button has
   no width of its own to centre with -- it is sized by its own words. */
.rtm-suite .rtm-buy-stick-center .rtm-buy-btn {
    left: 50%;
    transform: translateX(-50%);
}

/* The admin bar is fixed above 782px and covers anything pinned to the top --
   in the editor preview most of all, which is where a designer is looking at
   this. Below that width WordPress scrolls the bar away with the page, so
   there is nothing to clear. */
@media screen and (min-width: 783px) {
    .admin-bar .rtm-buy-stick-top .rtm-buy-btn { top: calc(var(--rtm-buy-stick-off, 20px) + 32px); }
}

/* The resting rule lifts the button a pixel on hover with a transform of its
   own, which would replace the centring one and throw the button off to the
   right by half its width. Both have to travel together -- and only for the
   centred arrangement, since a button in a corner is positioned by `left` or
   `right` and can take the plain lift unaltered. */
.rtm-suite .rtm-buy-stick-center .rtm-buy-btn:hover {
    transform: translateX(-50%) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .rtm-suite .rtm-buy-stick-center .rtm-buy-btn:hover {
        transform: translateX(-50%);
    }
}
/* ══════════════════════════════════════════════════════════════════
   GLYPHS PANEL
══════════════════════════════════════════════════════════════════ */
.rtm-glyphs-wrap {
    background: var(--rtm-bg, #fff);
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    padding: 24px;
}
.rtm-glyphs-grid {
    display: grid;

    /* A column count rather than a minimum cell width. A character map is a
       grid of squares and a foundry has an opinion about how many fit across
       it; auto-fill decides that from a number nobody chose. The breakpoints
       below set the var itself, so the Elementor control -- which writes it at
       higher specificity per device -- overrides all three. */
    grid-template-columns: repeat(var(--rtm-glyph-cols, 12), minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1024px) { .rtm-glyphs-grid { --rtm-glyph-cols: 8; } }
@media (max-width: 600px)  { .rtm-glyphs-grid { --rtm-glyph-cols: 5; } }
.rtm-suite .rtm-glyph {
    border: 1px solid var(--rtm-glyph-brd, var(--rtm-border, #e4e4e7));
    border-radius: 8px;
    padding: 12px 4px 7px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--rtm-glyph-bg, var(--rtm-card-bg, #fafafa));
    cursor: default;
    transition: border-color .14s, transform .14s;
}
.rtm-suite .rtm-glyph:hover { border-color: var(--rtm-glyph-brd-h, var(--rtm-accent, #18181b)); transform: translateY(-2px); }
.rtm-glyph-char { font-family: "RTMFont", serif; font-size: 22px; color: var(--rtm-glyph-char, var(--rtm-text, #18181b)); line-height: 1; }
.rtm-glyph-code { font-size: 7px; font-family: monospace; color: var(--rtm-glyph-code, #a1a1aa); letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════════════
   DETAILS PANEL
══════════════════════════════════════════════════════════════════ */
.rtm-details-wrap {
    background: var(--rtm-spec-bg, var(--rtm-bg, #fff));
    border: 1px solid var(--rtm-spec-border, var(--rtm-border, #e4e4e7));
    border-radius: var(--rtm-stage-r, 16px);
    padding: 28px;
}
.rtm-details-title {
    font-size: 18px; font-weight: 800;
    color: var(--rtm-text, #18181b);
    margin: 0 0 16px;
}
.rtm-details-desc {
    font-size: 14px; line-height: 1.7;
    color: var(--rtm-text, #18181b); opacity: .85;
    border-bottom: 1px solid var(--rtm-border, #e4e4e7);
    padding-bottom: 20px; margin-bottom: 20px;
}
/* Spec rows: label left, value right, one rule between each. A datasheet
   reads down the left edge, so the labels stay in a column a customer can
   scan without reading the values. */
.rtm-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rtm-spec-divider, var(--rtm-border, #e4e4e7));
}

.rtm-spec-lbl {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rtm-spec-label, #a1a1aa);
}

/*
 * `flex: 1` is what makes the alignment mean anything.
 *
 * The row is `justify-content: space-between`, so the value used to be a box
 * sized to its own text and shoved against the right edge -- and `text-align`
 * on a box that tight has nothing to align inside it. Given the rest of the
 * row to sit in, the three settings genuinely move the text: left brings it
 * back beside its label, right leaves it where it always was.
 *
 * Left is the shipped answer now. A datasheet is read down the values, and a
 * column ragged on its left because every value is a different length is a
 * column you cannot scan.
 */
.rtm-spec-val {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    text-align: var(--rtm-spec-align, left);
    color: var(--rtm-spec-value, var(--rtm-text, #18181b));
}

.rtm-fmt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rtm-fmt-badge {
    background: var(--rtm-accent, #18181b);
    color: #fff; font-size: 9px; font-weight: 800;
    padding: 3px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .06em;
}
.rtm-fmt-note {
    font-size: 11px; font-style: italic;
    color: var(--rtm-spec-note, #71717a); margin: 6px 0 0;
}

/* ══════════════════════════════════════════════════════════════════
   OFFCANVAS PANEL
══════════════════════════════════════════════════════════════════ */
.rtm-oc-bd {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.52);
    z-index: 99998;
    opacity: 0;
    transition: opacity .3s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.rtm-oc-bd.rtm-open { opacity: 1; }

/* Where the panel is moved to, at the end of <body>.

   It holds two fixed children and nothing else, so it is given no size of
   its own -- and it is itself fixed, which is not for its own sake: a
   smooth-scroll library hoisting <body>'s children into a wrapper it
   translates leaves the fixed ones where they are, and a translated
   ancestor is what turns `fixed` back into "as long as the document".
   A fixed parent creates no containing block of its own, so the panel and
   the backdrop still measure themselves against the viewport.

   The margin is zeroed because the host wears the suite's classes to keep
   the panel's styling, and the suite has one. */
.rtm-oc-portal {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 0;
    height: 0;

    /*
     * The z-index is the host's own, and it has to be: a fixed element
     * is a stacking context, so the 99998 and 99999 the backdrop and the
     * panel carry now settle their order *inside* this box and say
     * nothing about where the box itself sits. Left at `auto` the whole
     * thing sinks to the level of an ordinary last child of <body> --
     * which a smooth-scroll wrapper appended after it then paints over,
     * the panel showing through only where the page behind happens to
     * have no background of its own.
     */
    z-index: 99999;
}

.rtm-oc-portal,
.rtm-oc-portal > * {
    margin: 0;
    padding: 0;
}

.rtm-oc {
    position: fixed;
    z-index: 99999;
    background: var(--rtm-oc-bg, #fff);
    display: flex; flex-direction: column;
    transition: transform .38s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
}

/* Direction variants */
.rtm-oc-right  { top:0; right:0; bottom:0; width:var(--rtm-oc-w,460px); transform:translateX(100%); }
.rtm-oc-left   { top:0; left:0;  bottom:0; width:var(--rtm-oc-w,460px); transform:translateX(-100%); }

/* The two side panels mirror, and the edge and the slide have to mirror
   together -- an inset that flipped while its translateX did not would park
   the panel a screen-width off the page.

   Mirroring at all is the decision worth stating. "Right" on the Design
   screen is a reading-order end rather than a wall of the monitor: it is the
   side a purchase panel arrives from because that is where the eye leaves the
   line, and on an Arabic shop that side is the left one. Every inset, margin
   and border in this file already turns around; a drawer that did not would
   be the one element in the showcase still facing the other way -- and it is
   where WooCommerce's own cart drawer goes. */
[dir="rtl"] .rtm-oc-right { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .rtm-oc-left  { left: auto; right: 0; transform: translateX(100%); }
.rtm-oc-top    { top:0; inset-inline-start:0;  inset-inline-end:0;  height:58vh; transform:translateY(-100%); }
.rtm-oc-bottom { bottom:0; inset-inline-start:0; inset-inline-end:0; height:58vh; transform:translateY(100%); }
.rtm-oc.rtm-oc-open { transform: translate(0,0) !important; }

.rtm-oc-inner { display:flex; flex-direction:column; height:100%; }

/* Header */
.rtm-oc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    background: var(--rtm-oc-head-bg, #fafafa);
    border-bottom: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    flex-shrink: 0;
}
.rtm-oc-title {
    font-size: 13px; font-weight: 800;
    color: var(--rtm-oc-head-text, #18181b);
    letter-spacing: .03em;
}
.rtm-suite .rtm-oc-close-btn,
.rtm-suite .rtm-oc-close-btn:focus {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--rtm-oc-close-bg, #fff);
    border: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    color: var(--rtm-oc-close-icon, #71717a);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .14s, color .14s;
}
.rtm-suite .rtm-oc-close-btn:hover {
    border-color: var(--rtm-accent, #18181b);
    color: var(--rtm-accent, #18181b);
}

/* Body */
.rtm-oc-body { flex:1; overflow-y:auto; padding:18px 22px; scrollbar-width:thin; }

/* License rows ───────────────────────────────────────────────────────────
   One row per licence type, each carrying its own tick, its tier dropdown
   and its price, the way a type foundry's licence table reads.

   The row is a grid rather than a flex line because it holds six things
   whose arrangement has to change with the room available: in a 460px right
   sidebar the billing and the tier drop to a second line under the name; in
   a full-width bottom sheet they sit in columns that align down the list.

   That switch is a container query on the list, not a media query. The same
   panel is 460px on one page and the whole viewport on another, so the width
   of the window says nothing about how much room these rows have. */
.rtm-radio-list {
    display: flex; flex-direction: column; gap: 8px;
    container-type: inline-size;
}

.rtm-lic-legend {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--rtm-oc-total-text, #64748b);
}

.rtm-radio-row {
    border: 2px solid var(--rtm-oc-row-border, #e4e4e7);
    border-radius: var(--rtm-oc-row-r, 10px);
    transition: border-color .14s, background .14s;

    display: grid;
    align-items: center;
    gap: 8px 10px;
    padding: 13px 14px;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "check icon main  price"
        "check icon meta  meta";
}
.rtm-radio-row:hover { border-color: var(--rtm-accent, #18181b); }
.rtm-radio-row.rtm-row-active {
    border-color: var(--rtm-oc-row-active-brd, #18181b);
    background: var(--rtm-oc-row-active-bg, #fffbeb);
}

/* The tick */
.rtm-lic-check {
    grid-area: check;
    display: flex; align-items: center;
    align-self: start;
    padding-top: 2px;
    flex-shrink: 0; cursor: pointer;
}
.rtm-lic-inp { position: absolute; opacity: 0; width: 0; height: 0; }
.rtm-lic-box {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 2px solid #d4d4d8;
    background: #fff;
    position: relative;
    transition: border-color .14s, background .14s;
    flex-shrink: 0;
    display: block;
}
.rtm-lic-inp:checked ~ .rtm-lic-box {
    border-color: var(--rtm-accent, #18181b);
    background: var(--rtm-accent, #18181b);
}
/* The check itself: two borders of a box, rotated. Cheaper than an SVG that
   would have to be inlined in six places, and it takes the accent colour. */
.rtm-lic-inp:checked ~ .rtm-lic-box::after {
    content: '';
    position: absolute;
    inset-inline-start: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}
.rtm-lic-inp:disabled ~ .rtm-lic-box { opacity: .4; cursor: not-allowed; }
.rtm-lic-inp:focus-visible ~ .rtm-lic-box {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

/* The placeholder where an enquiry row would have had one, so its name still
   lines up with the rows above and below it. */
.rtm-lic-check-off { grid-area: check; width: 18px; }

/* The mark */
.rtm-lic-icon {
    grid-area: icon;
    align-self: start;
    display: flex; align-items: center; justify-content: center;
    color: var(--rtm-oc-icon, #71717a);
    flex-shrink: 0;
}
.rtm-radio-row.rtm-row-active .rtm-lic-icon { color: var(--rtm-accent, #18181b); }

/* Name and licence text */
.rtm-lic-main { grid-area: main; min-width: 0; }
.rtm-var-name {
    display: block;
    font-size: 13px; font-weight: 700;
    color: var(--rtm-oc-label, #18181b);
    line-height: 1.25;
}
.rtm-lic-desc {
    margin: 3px 0 0;
    font-size: 11.5px; line-height: 1.45;
    color: var(--rtm-oc-desc, #71717a);
}
.rtm-oos {
    display: inline-block; margin-top: 4px;
    font-size: 10px; font-weight: 600; color: #ef4444;
}

/* Billing and tier. One cell in a narrow panel, two columns in a wide one. */
.rtm-lic-meta {
    grid-area: meta;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    min-width: 0;
}
.rtm-lic-billing {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 11.5px; white-space: nowrap;
}
.rtm-lic-billing-key { color: var(--rtm-oc-desc, #71717a); }
.rtm-lic-billing-val { font-weight: 700; color: var(--rtm-oc-label, #18181b); }

.rtm-lic-ask {
    font-size: 11.5px; font-weight: 700;
    color: var(--rtm-accent, #18181b);
    text-decoration: underline;
}

.rtm-lic-tier { min-width: 0; flex: 1 1 150px; }
.rtm-lic-tier-static {
    font-size: 11.5px; color: var(--rtm-oc-desc, #71717a);
}

/* The dropdown. Reset hard: a select is one of the few controls a theme is
   almost guaranteed to have opinions about, and the panel's is 11px tall
   furniture inside a bordered row rather than a form field on a page. */
.rtm-suite .rtm-lic-select,
.rtm-suite .rtm-lic-select:focus {
    -webkit-appearance: none; appearance: none;
    width: 100%; max-width: 100%;
    margin: 0;
    padding: 7px 28px 7px 10px;
    font-size: 11.5px; font-weight: 600; line-height: 1.3;
    font-family: inherit;
    color: var(--rtm-oc-label, #18181b);
    background-color: var(--rtm-oc-select-bg, #fff);
    /* The chevron, as a data URI: one request fewer and it cannot 404. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    border-radius: var(--rtm-oc-select-r, 8px);
    cursor: pointer;
    height: auto; min-height: 0;
    box-shadow: none;
}
.rtm-suite .rtm-lic-select:hover { border-color: var(--rtm-accent, #18181b); }
.rtm-suite .rtm-lic-select:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 1px;
}

/* Price, right-aligned against the edge of the row */
.rtm-row-price {
    grid-area: price;
    align-self: start;
    text-align: end;
    font-size: 14px; font-weight: 900;
    color: var(--rtm-oc-price, #18181b);
    white-space: nowrap;
}
.rtm-row-price .amount,
.rtm-row-price .woocommerce-Price-amount { color: inherit; }
.rtm-row-price del { opacity: .55; font-weight: 700; }

/* A tier nobody can buy yet: shown, priced on request, never ticked. */
.rtm-lic-enquiry { opacity: .82; }
.rtm-lic-enquiry:hover { border-color: var(--rtm-oc-row-border, #e4e4e7); }

/* Wide enough for the licence table proper: everything on one line, with the
   billing and tier columns fixed so they align down the whole list.

   600px of list, which a panel reaches at roughly 645px wide -- above the
   460px default and inside the range Panel Width offers. A bottom or top
   sheet is the full viewport and gets here on its own. */
@container (min-width: 600px) {
    .rtm-radio-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        grid-template-areas: "check icon main meta price";
        gap: 12px;
        padding: 14px 16px;
    }

    .rtm-lic-check, .rtm-lic-icon, .rtm-row-price { align-self: center; }
    .rtm-lic-check { padding-top: 0; }

    .rtm-lic-meta { flex-wrap: nowrap; gap: 12px; }
    .rtm-lic-billing { width: 120px; flex: 0 0 auto; }
    .rtm-lic-tier { width: 200px; flex: 0 0 auto; }

    .rtm-lic-desc { max-width: 46ch; }
}

/* Total summary */
.rtm-oc-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding: 13px 16px;
    background: var(--rtm-oc-total-bg, #f8fafc);
    border: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    border-radius: 10px;
}
/* The "Total" label. --rtm-oc-total-text was a registered setting with no
   rule reading it, so the Summary Text Color control did nothing. */
.rtm-oc-total > span:first-child {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    color: var(--rtm-oc-total-text, #64748b);
}
.rtm-oc-total-price {
    font-size: 20px; font-weight: 900;
    color: var(--rtm-oc-price, #18181b);
}
.rtm-oc-total-price .amount,
.rtm-oc-total-price .woocommerce-Price-amount { color: inherit; }

.rtm-oc-simple { text-align: center; padding: 20px 0; }
.rtm-oc-simple-price { font-size: 28px; font-weight: 900; color: var(--rtm-oc-price, #18181b); }
.rtm-oc-simple p { font-size: 12px; color: #71717a; margin: 8px 0 0; }

/* Footer */
.rtm-oc-footer {
    padding: 14px 22px 22px;
    border-top: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.rtm-oc-contact {
    font-size: 11px; color: #71717a;
    text-align: center; margin: 0; line-height: 1.5;
}
.rtm-oc-contact a {
    color: var(--rtm-accent, #18181b);
    font-weight: 700; text-decoration: underline;
}

.rtm-cart-notice {
    font-size: 13px; font-weight: 700;
    text-align: center; color: #22c55e;
    min-height: 0; transition: opacity .2s; opacity: 0;
}
.rtm-cart-notice.rtm-notice-show  { opacity: 1; }
.rtm-cart-notice.rtm-notice-error { color: #ef4444; }

.rtm-suite .rtm-atc-btn,
.rtm-suite .rtm-atc-btn:focus {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px;
    background: var(--rtm-oc-atc-bg, #18181b);
    color: var(--rtm-oc-atc-text, #ffffff);
    border: none;
    border-radius: var(--rtm-oc-atc-r, 10px);
    font-size: var(--rtm-oc-atc-fs, 13px);
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer;
    transition: background .18s, transform .18s;
}
.rtm-suite .rtm-atc-btn:hover    { background: var(--rtm-oc-atc-hover, #18181b); transform: translateY(-1px); }
.rtm-suite .rtm-atc-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/*
 * The way on to the cart, revealed once there is a cart to go to.
 *
 * Two links rather than one button, and secondary to the one above them: Add
 * to cart is still the panel's action, and these are where a visitor goes
 * *after* it. Scoped under `.rtm-suite` for the same reason every other
 * control in this file is -- a theme styling `.woocommerce a` has two classes
 * to this rule's one, and would otherwise repaint them.
 */
.rtm-suite .rtm-oc-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.rtm-suite .rtm-oc-next[hidden] { display: none; }

.rtm-suite .rtm-oc-next a,
.rtm-suite .rtm-oc-next a:focus {
    display: flex; align-items: center; justify-content: center;
    padding: 11px 8px;
    border: 1px solid var(--rtm-oc-row-border, #e4e4e7);
    border-radius: var(--rtm-oc-atc-r, 10px);
    background: none;
    color: var(--rtm-text, #18181b);
    font-size: 12px;
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
}

.rtm-suite .rtm-oc-next a:hover {
    background: var(--rtm-oc-atc-bg, #18181b);
    border-color: var(--rtm-oc-atc-bg, #18181b);
    color: var(--rtm-oc-atc-text, #ffffff);
}

/* Checkout is the one of the two most visitors want, so it carries the accent. */
.rtm-suite .rtm-oc-next-checkout,
.rtm-suite .rtm-oc-next-checkout:focus {
    border-color: var(--rtm-accent, #18181b);
    color: var(--rtm-accent, #18181b);
}

.rtm-suite .rtm-oc-next-checkout:hover {
    background: var(--rtm-accent, #18181b);
    border-color: var(--rtm-accent, #18181b);
    color: var(--rtm-oc-atc-text, #ffffff);
}

.rtm-atc-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rtm-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes rtm-spin { to { transform: rotate(360deg); } }

/* body scroll lock */
body.rtm-locked { overflow: hidden !important; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .rtm-oc-right, .rtm-oc-left { width: 100% !important; }
    .rtm-ot-row { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   STANDALONE PARTS (Elementor widgets)
   A suite holding one piece rather than all of them: no tab strip
   above it, so the panel it contains supplies its own top margin.
══════════════════════════════════════════════════════════════════ */
.rtm-suite-solo {
    margin: 0;
}

.rtm-suite-solo .rtm-panel {
    margin-top: 0;
}

/* The purchase button is its own widget here, so it is not tucked under a
   specimen and should not inherit that spacing. */
.rtm-suite-cart .rtm-buy-wrap {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ARCHIVE GRID
   Each card is set in that product's own face, which is the whole
   point: a shop front of identical sans-serif titles says nothing
   about what is for sale.

   Two states, one card. At rest: two letters at poster size, with
   the name, the foundry and the style count beneath. Pointed at: a
   full line of the same face, and the purchase button. Both states
   are in the markup at all times and cross-fade between fixed
   boxes, so a card never changes size under the cursor -- a grid
   that reflows on hover is a grid you cannot click accurately.
══════════════════════════════════════════════════════════════════ */
.rtm-afp-grid {
    display: grid;
    grid-template-columns: repeat(var(--rtm-afp-cols, 3), minmax(0, 1fr));
    gap: 24px;
}

.rtm-afp-card {
    position: relative;

    /* The specimen is sized against the card, not the viewport. A column
       count is a layout decision made in the editor, and a vw-based size
       cannot see it: the same clamp that reads well in one column sets a
       pangram far too large to fit in four. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 28px 26px;
    background: var(--rtm-card-bg, #fafafa);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    color: var(--rtm-text, #18181b);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}

/* focus-within, not focus-visible: the card is not focusable itself, its
   link and its button are. Tabbing to either must show the same state the
   cursor would, or a keyboard user reaches a Buy button they cannot see. */
.rtm-afp-card:hover,
.rtm-afp-card:focus-within {
    border-color: var(--rtm-accent, #18181b);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
}

/* The height of the whole card, held by the taller of the two states. */
.rtm-afp-stage {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: clamp(170px, 20vw, 250px);
    min-height: clamp(170px, 62cqw, 260px);
    color: var(--rtm-stage-text, #18181b);
}

.rtm-afp-aa,
.rtm-afp-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    transition: opacity .28s ease, transform .28s ease;
}

/* Each pair states a viewport size first and a container size second. A
   browser without container queries drops the line it cannot parse and
   keeps the first, which is the old behaviour rather than no size at all. */
.rtm-afp-aa {
    font-size: clamp(64px, 11vw, 132px);
    font-size: clamp(56px, 34cqw, 140px);
    line-height: 1;
}

.rtm-afp-line {
    font-size: clamp(18px, 2.2vw, 30px);
    font-size: clamp(15px, 8.5cqw, 30px);
    line-height: 1.25;
    opacity: 0;
    transform: translateY(8px);
}

.rtm-afp-card:hover .rtm-afp-aa,
.rtm-afp-card:focus-within .rtm-afp-aa {
    opacity: 0;
    transform: translateY(-8px);
}

.rtm-afp-card:hover .rtm-afp-line,
.rtm-afp-card:focus-within .rtm-afp-line {
    opacity: 1;
    transform: none;
}

/* ── Weight bar ──────────────────────────────────────────────────────────
   The left half of the foot, holding two faces in one cell exactly as the
   right half holds the facts and the Buy button: the name at rest, the bar
   under the cursor. It takes whatever the button leaves, which is what makes
   a long name and a short one produce the same bar.

   Deliberately not positioned, and it must stay that way: the stretched link
   on the name resolves against the nearest positioned ancestor, and that has
   to be the card. Give this element a position and the card's click target
   shrinks to the footer. */
.rtm-afp-lead {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;

    /* Stretched to the row rather than hugging its own content. The bar is
       aligned against the Buy button beside it, and there is nothing to align
       within unless this cell is as tall as the row that holds them both. */
    align-self: stretch;
}

.rtm-afp-ident,
.rtm-afp-weight {
    grid-area: 1 / 1;
    transition: opacity .22s ease, transform .22s ease;
}

/* Faded, never hidden, and for every placement alike. `display: none` and
   `visibility: hidden` both stop an element receiving clicks, and this one
   carries the stretched link that makes the whole card clickable -- so hiding
   the name outright would take the card's own link away at the exact moment
   the cursor is on it. */
.rtm-afp-card:hover .rtm-afp-ident,
.rtm-afp-card:focus-within .rtm-afp-ident {
    opacity: 0;
}

/* Where the bar sits against the button beside it. The button is the tallest
   thing in the row, so these three read as its top edge, its middle and its
   bottom. */
.rtm-afp-w-top .rtm-afp-weight { align-self: start; }
.rtm-afp-w-center .rtm-afp-weight { align-self: center; }
.rtm-afp-w-bottom .rtm-afp-weight { align-self: end; }

/* Above the stretched link so the handle can be dragged, and transparent to
   the pointer until the card is hovered so that a click meant for the card is
   not swallowed by a bar nobody can see.

   The pill has a background property of its own rather than borrowing
   --rtm-bg. That one is declared, in StyleControls::VAR_PARTS, to be painted
   by the details, glyphs and preview parts -- not the archive -- so reading it
   here would be a colour on the card that no control in the archive's Style
   tab can reach. */
.rtm-afp-weight {
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--rtm-afp-w-bg, #fff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
.rtm-afp-card:hover .rtm-afp-weight,
.rtm-afp-card:focus-within .rtm-afp-weight {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.rtm-afp-weight-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.rtm-afp-weight-range:focus { outline: none; }
.rtm-afp-weight-range:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 4px;
    border-radius: 999px;
}

/* The stops, drawn as dashes rather than as marks on a line: one segment per
   gap between two of the family's weights, so the bar reports how many
   weights there are without printing a number.

   Repeated for each engine's own pseudo-element, and repeated in full: a
   selector list containing one pseudo-element a browser does not know is a
   selector list that browser drops entirely, taking the rule it understood
   with it. Every value behind a custom property so the Style tab has one
   plain selector to write to instead of three vendor ones. */
.rtm-afp-weight-range::-webkit-slider-runnable-track {
    height: var(--rtm-afp-w-track-h, 3px);
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) 0,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4))
    );
}
.rtm-afp-weight-range::-moz-range-track {
    height: var(--rtm-afp-w-track-h, 3px);
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) 0,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4))
    );
}

/* The handle carries an A because the thing it moves is a letterform. The
   mark is a data URI rather than a glyph in the markup: a range input has no
   child to put text in, and the pseudo-elements that draw the handle cannot
   hold content.

   background-color and background-image are set apart rather than with the
   shorthand -- the shorthand would reset the image every time the Style tab
   wrote a colour, and the A would vanish. The negative margin is what centres
   the handle on the track, so it is computed from both sizes rather than
   fixed: either one can now be changed from the Style tab. */
.rtm-afp-weight-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--rtm-afp-w-thumb, 22px);
    height: var(--rtm-afp-w-thumb, 22px);
    margin-top: calc((var(--rtm-afp-w-track-h, 3px) - var(--rtm-afp-w-thumb, 22px)) / 2);
    border: none;
    border-radius: 50%;
    background-color: var(--rtm-afp-w-thumb-bg, var(--rtm-accent, #18181b));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='6' y='9' font-family='sans-serif' font-size='9' font-weight='700' fill='%23fff' text-anchor='middle'%3EA%3C/text%3E%3C/svg%3E");
    background-position: center;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    cursor: grab;
}
.rtm-afp-weight-range::-moz-range-thumb {
    width: var(--rtm-afp-w-thumb, 22px);
    height: var(--rtm-afp-w-thumb, 22px);
    border: none;
    border-radius: 50%;
    background-color: var(--rtm-afp-w-thumb-bg, var(--rtm-accent, #18181b));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='6' y='9' font-family='sans-serif' font-size='9' font-weight='700' fill='%23fff' text-anchor='middle'%3EA%3C/text%3E%3C/svg%3E");
    background-position: center;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    cursor: grab;
}

.rtm-afp-weight-range:active::-webkit-slider-thumb { cursor: grabbing; }
.rtm-afp-weight-range:active::-moz-range-thumb { cursor: grabbing; }

/* ── Ribbon ──────────────────────────────────────────────────────────────
   A corner label in one of three shapes. z-index 3 puts it over both the
   stretched link that makes the card clickable (1) and the weight bar (2),
   and pointer-events:none hands every click straight through to the link --
   a label that swallowed them would be a dead patch on the card exactly
   where the eye is drawn. */
.rtm-afp-ribbon {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    color: var(--rtm-afp-ribbon-text, #fff);
    font-size: var(--rtm-afp-ribbon-fs, 11px);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
}

/* ── Default: a wedge filling the corner ────────────────────────────────
   The triangle is cut out of a square with clip-path rather than drawn with
   the old border trick, because a border triangle cannot carry text and this
   one has to: the label sits inside it, turned to run along the hypotenuse. */
.rtm-afp-ribbon-default {
    width: var(--rtm-afp-ribbon-size, 104px);
    height: var(--rtm-afp-ribbon-size, 104px);
    background: var(--rtm-afp-ribbon-bg, var(--rtm-accent, #18181b));
    text-transform: uppercase;
}
.rtm-afp-ribbon-default .rtm-afp-ribbon-text {
    position: absolute;
    width: 128%;
    text-align: center;
    white-space: nowrap;
}

.rtm-afp-ribbon-default.rtm-afp-at-top-right {
    top: 0;
    inset-inline-end: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.rtm-afp-ribbon-default.rtm-afp-at-top-right .rtm-afp-ribbon-text {
    top: 30%;
    inset-inline-start: -14%;
    transform: rotate(45deg);
}

.rtm-afp-ribbon-default.rtm-afp-at-top-left {
    top: 0;
    inset-inline-start: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.rtm-afp-ribbon-default.rtm-afp-at-top-left .rtm-afp-ribbon-text {
    top: 30%;
    inset-inline-start: -14%;
    transform: rotate(-45deg);
}

.rtm-afp-ribbon-default.rtm-afp-at-bottom-right {
    bottom: 0;
    inset-inline-end: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.rtm-afp-ribbon-default.rtm-afp-at-bottom-right .rtm-afp-ribbon-text {
    bottom: 30%;
    inset-inline-start: -14%;
    transform: rotate(-45deg);
}

.rtm-afp-ribbon-default.rtm-afp-at-bottom-left {
    bottom: 0;
    inset-inline-start: 0;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.rtm-afp-ribbon-default.rtm-afp-at-bottom-left .rtm-afp-ribbon-text {
    bottom: 30%;
    inset-inline-start: -14%;
    transform: rotate(45deg);
}

/* ── Badge: a pill floating clear of the corner ─────────────────────────── */
.rtm-afp-ribbon-badge {
    padding: var(--rtm-afp-ribbon-pad-y, 8px) var(--rtm-afp-ribbon-pad-x, 15px);
    border-radius: var(--rtm-afp-ribbon-r, 999px);
    background: var(--rtm-afp-ribbon-bg, var(--rtm-accent, #18181b));
    white-space: nowrap;
    text-transform: uppercase;
}
.rtm-afp-ribbon-badge.rtm-afp-at-top-left     { top: var(--rtm-afp-ribbon-gap, 16px); inset-inline-start: var(--rtm-afp-ribbon-gap, 16px); }
.rtm-afp-ribbon-badge.rtm-afp-at-top-right    { top: var(--rtm-afp-ribbon-gap, 16px); inset-inline-end: var(--rtm-afp-ribbon-gap, 16px); }
.rtm-afp-ribbon-badge.rtm-afp-at-bottom-left  { bottom: var(--rtm-afp-ribbon-gap, 16px); inset-inline-start: var(--rtm-afp-ribbon-gap, 16px); }
.rtm-afp-ribbon-badge.rtm-afp-at-bottom-right { bottom: var(--rtm-afp-ribbon-gap, 16px); inset-inline-end: var(--rtm-afp-ribbon-gap, 16px); }

/* ── Ribbon: a tag hanging off the edge, notched at its free end ────────
   Flush with the edge it hangs from and narrow enough that the words stack,
   which is what makes it read as hanging rather than as a label that has
   been stood on end. The notch is cut with clip-path for the same reason the
   wedge is: it keeps the shape and its text in one element. */
.rtm-afp-ribbon-ribbon {
    width: var(--rtm-afp-ribbon-w, 62px);
    padding: 12px 8px 22px;
    background: var(--rtm-afp-ribbon-bg, var(--rtm-accent, #18181b));
    text-align: center;
}
.rtm-afp-ribbon-ribbon.rtm-afp-at-top-left,
.rtm-afp-ribbon-ribbon.rtm-afp-at-top-right {
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--rtm-afp-ribbon-notch, 22%)), 0 100%);
}
.rtm-afp-ribbon-ribbon.rtm-afp-at-bottom-left,
.rtm-afp-ribbon-ribbon.rtm-afp-at-bottom-right {
    bottom: 0;
    padding: 22px 8px 12px;
    clip-path: polygon(50% var(--rtm-afp-ribbon-notch, 22%), 100% 0, 100% 100%, 0 100%, 0 0);
}
.rtm-afp-ribbon-ribbon.rtm-afp-at-top-left,
.rtm-afp-ribbon-ribbon.rtm-afp-at-bottom-left { inset-inline-start: var(--rtm-afp-ribbon-gap, 22px); }
.rtm-afp-ribbon-ribbon.rtm-afp-at-top-right,
.rtm-afp-ribbon-ribbon.rtm-afp-at-bottom-right { inset-inline-end: var(--rtm-afp-ribbon-gap, 22px); }

/* A list row is short. The wedge and the hanging tag are both sized against a
   card that is mostly specimen, so they are brought in rather than left to
   cover a row whole. */
.rtm-afp-view-list .rtm-afp-ribbon-default { --rtm-afp-ribbon-size: 76px; }
.rtm-afp-view-list .rtm-afp-ribbon-ribbon {
    --rtm-afp-ribbon-w: 52px;
    font-size: 10px;
}
/* ══════════════════════════════════════════════════════════════════
   ARCHIVE TOOLBAR
   The strip above the grid. Two of its three controls are settled in
   the browser -- the layout and the pictures are a class on the grid
   -- and only the order goes back to the server.
══════════════════════════════════════════════════════════════════ */
.rtm-afp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
}

.rtm-afp-bar-end {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-inline-start: auto;
}

/* ── Layout switch ─────────────────────────────────────────────────── */
.rtm-afp-views {
    display: inline-flex;
    gap: 4px;
}

.rtm-suite .rtm-afp-view-btn,
.rtm-suite .rtm-afp-view-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: 8px;
    background: transparent;
    color: var(--rtm-text, #18181b);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rtm-suite .rtm-afp-view-btn:hover {
    border-color: var(--rtm-accent, #18181b);
}
.rtm-suite .rtm-afp-view-btn.is-on {
    background: var(--rtm-accent, #18181b);
    border-color: var(--rtm-accent, #18181b);
    color: #fff;
}

/* ── Images switch ─────────────────────────────────────────────────── */
.rtm-afp-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.rtm-afp-switch-label {
    font-size: 13px;
    font-weight: 600;
}

/* The checkbox is the state and the keyboard target; the track beside it is
   the part anybody sees. Taken out of the layout rather than hidden, because
   display:none would take it off the tab order with it. */
.rtm-afp-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.rtm-afp-switch-track {
    position: relative;
    display: block;
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: var(--rtm-border, #e4e4e7);
    transition: background .18s ease;
}
.rtm-afp-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.rtm-afp-switch input:checked ~ .rtm-afp-switch-track {
    background: var(--rtm-accent, #18181b);
}
.rtm-afp-switch input:checked ~ .rtm-afp-switch-track::after {
    transform: translateX(17px);
}

/* A switch reads as a journey from off to on, and that journey runs with the
   text. The resting inset and the travel have to be mirrored together: making
   the inset logical on its own would send the knob out of the track by twice
   the offset rather than nowhere, which is why the codemod leaves pairs like
   this alone and they are spelled out here instead. */
[dir="rtl"] .rtm-afp-switch-track::after {
    left: auto;
    right: 3px;
}
[dir="rtl"] .rtm-afp-switch input:checked ~ .rtm-afp-switch-track::after {
    transform: translateX(-17px);
}
.rtm-afp-switch input:focus-visible ~ .rtm-afp-switch-track {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 3px;
}

/* ── Order dropdown ────────────────────────────────────────────────── */
.rtm-suite .rtm-afp-sort select {
    padding: 8px 30px 8px 12px;
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: 8px;
    background: transparent;
    color: var(--rtm-text, #18181b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.rtm-afp-bar.is-busy {
    opacity: .55;
    pointer-events: none;
}

/* ── The picture face ──────────────────────────────────────────────── */
.rtm-afp-img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity .28s ease;
}
.rtm-afp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Which of the two resting faces is showing. The lettering is the default and
   the picture takes its place only while the switch is on, so a grid whose
   script never ran still shows type rather than an empty box. */
.rtm-afp-show-img .rtm-afp-img { opacity: 1; }
.rtm-afp-show-img .rtm-afp-aa { opacity: 0; }

.rtm-afp-card:hover .rtm-afp-img,
.rtm-afp-card:focus-within .rtm-afp-img {
    opacity: 0;
}

/* ── List layout ───────────────────────────────────────────────────── */
.rtm-afp-view-list {
    grid-template-columns: minmax(0, 1fr);
}

/* A row, not a poster. The stage keeps a fixed share of the width so every
   row lines its name and price up with the one above it, which is the whole
   reason to be in a list rather than a grid. */
.rtm-afp-view-list .rtm-afp-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
}
.rtm-afp-view-list .rtm-afp-stage {
    flex: 1 1 auto;
    min-height: 68px;
}
.rtm-afp-view-list .rtm-afp-aa {
    font-size: clamp(28px, 6cqw, 46px);
    justify-content: flex-start;
}
.rtm-afp-view-list .rtm-afp-line {
    font-size: clamp(14px, 3cqw, 20px);
    justify-content: flex-start;
    text-align: start;
}
.rtm-afp-view-list .rtm-afp-foot {
    flex: 0 0 auto;
    width: clamp(210px, 34%, 340px);
}

@media (max-width: 700px) {
    .rtm-afp-view-list .rtm-afp-card {
        flex-direction: column;
        align-items: stretch;
    }

    .rtm-afp-view-list .rtm-afp-foot {
        width: auto;
    }
}
/* ── Navigation under the grid ───────────────────────────────────────────
   Both kinds sit outside .rtm-afp-grid, so neither is ever mistaken for a
   card by the grid's own column count. */
.rtm-afp-more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.rtm-suite .rtm-afp-more-btn,
.rtm-suite .rtm-afp-more-btn:focus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: 999px;
    background: transparent;
    color: var(--rtm-text, #18181b);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.rtm-suite .rtm-afp-more-btn:hover {
    border-color: var(--rtm-accent, #18181b);
    color: var(--rtm-accent, #18181b);
}
.rtm-suite .rtm-afp-more-btn[disabled] {
    cursor: default;
    opacity: .65;
}

.rtm-afp-more-spin {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: rtm-afp-spin .7s linear infinite;
}
.rtm-afp-more-spin[hidden] { display: none; }

@keyframes rtm-afp-spin {
    to { transform: rotate(360deg); }
}

.rtm-afp-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 26px;
}

/* paginate_links() emits <a class="page-numbers"> beside a <span> for the
   current page, so both are styled together and only the current one is
   filled. */
.rtm-afp-pages .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: 10px;
    color: var(--rtm-text, #18181b);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}
.rtm-afp-pages a.page-numbers:hover {
    border-color: var(--rtm-accent, #18181b);
    color: var(--rtm-accent, #18181b);
}
.rtm-afp-pages .page-numbers.current {
    background: var(--rtm-accent, #18181b);
    border-color: var(--rtm-accent, #18181b);
    color: #fff;
}
.rtm-afp-pages .page-numbers.dots {
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .rtm-afp-more-spin { animation-duration: 2s; }
}

.rtm-afp-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

/* Wraps rather than clips. Truncating the name would mean overflow:hidden
   on the anchor, which would clip the stretched-link box below it along
   with the text -- and a card that stops being clickable to keep a name on
   one line has traded the wrong thing away. */
.rtm-afp-ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;

    /* At the foot of the card whatever the bar beside it is doing. */
    align-self: end;
}

.rtm-afp-name {
    font-size: 13px;
    font-weight: 700;
}

/* The link's own colour and underline are qualified by the card, like the
   purchase button below: an archive page is exactly where a theme styles
   every link it can reach.

   The size and weight above are deliberately left unqualified. Elementor
   writes the Typography control at `.elementor-element-x .rtm-afp-name`,
   which is two classes; matching that here would be a tie decided by
   stylesheet order, and a control that loses a coin toss reads as broken.
   Typography carries no colour, so there is nothing to tie with here. */
.rtm-afp-card .rtm-afp-name,
.rtm-afp-card .rtm-afp-name:hover,
.rtm-afp-card .rtm-afp-name:focus {
    color: inherit;
    text-decoration: none;
}

/* One link, stretched over the card. The alternative -- wrapping the whole
   card in an anchor -- cannot hold a Buy button, because a button inside a
   link is markup no browser agrees on. */
.rtm-afp-name::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rtm-afp-by {
    font-size: 12px;
    color: var(--rtm-accent, #18181b);
    transition: opacity .2s ease;
}

/* The hover face is about the typeface itself, so the credit line steps
   back and leaves the name to identify what is being shown. */
.rtm-afp-card:hover .rtm-afp-by,
.rtm-afp-card:focus-within .rtm-afp-by {
    opacity: 0;
}

.rtm-afp-aside {
    position: relative;
    display: grid;
    flex-shrink: 0;
    justify-items: end;
}

.rtm-afp-facts,
.rtm-afp-buy {
    grid-area: 1 / 1;
    transition: opacity .22s ease, transform .22s ease;
}

.rtm-afp-facts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: end;
}

.rtm-afp-card:hover .rtm-afp-facts,
.rtm-afp-card:focus-within .rtm-afp-facts {
    opacity: 0;
    transform: translateY(-4px);
}

.rtm-afp-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--rtm-oc-price, #18181b);
}

.rtm-afp-price del {
    opacity: .5;
    font-weight: 600;
}

.rtm-afp-styles {
    font-size: 12px;
    white-space: nowrap;
    color: var(--rtm-stage-label, #a1a1aa);
}

/* Text left unqualified so the Typography control outranks it; see the
   product name above for why that matters. */
.rtm-afp-buy {
    font-size: var(--rtm-buy-fs, 13px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Above the stretched link rather than under it: this is the one place on
   the card that must do something other than open the product. */
.rtm-afp-card .rtm-afp-buy {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--rtm-buy-bg, var(--rtm-accent, #18181b));
    color: var(--rtm-buy-text, #ffffff);
    border: none;

    /* Its own corner, not --rtm-buy-r. That setting is for the full-width
       Purchase Options button on a product page, where 12px reads as a
       button; the same 12px on a pill this size reads as a mistake. The
       colours and the type size are shared -- they are the shop's, not
       this button's. */
    border-radius: var(--rtm-afp-buy-r, 999px);
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.rtm-afp-card:hover .rtm-afp-buy,
.rtm-afp-card:focus-within .rtm-afp-buy {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.rtm-afp-card .rtm-afp-buy:hover {
    filter: brightness(.9);
}

/* WooCommerce marks the button while its request is in flight. Dimming is
   done with a filter rather than opacity, which the hover rule owns. */
.rtm-afp-card .rtm-afp-buy.loading {
    filter: brightness(.85);
    pointer-events: none;
}

/* WooCommerce appends a "View cart" link after a successful add. In a
   corner this size it lands on top of the button that produced it; the
   cart widget in the header is where that news belongs. */
.rtm-afp-aside .added_to_cart {
    display: none;
}

/* Nothing hovers on a touch screen, so neither state can be the one you
   have to reach for: the poster face stays, and the Buy button sits under
   the style count rather than behind it.

   The hover selectors are repeated rather than left to be overridden by
   specificity. A tap on a phone still fires :hover, and a card that had to
   be tapped once to reveal its own button is a card whose first tap is
   always wasted. */
@media (hover: none) {
    .rtm-afp-aside {
        gap: 10px;
    }

    .rtm-afp-line,
    .rtm-afp-card:hover .rtm-afp-line,
    .rtm-afp-card:focus-within .rtm-afp-line {
        display: none;
    }

    /* Nothing to hover with, so the two faces stop sharing a cell and simply
       stack. The name keeps its place -- a card that hid what the typeface is
       called to make room for a slider would have got the trade backwards --
       and the bar sits under it, always reachable. */
    .rtm-afp-lead {
        gap: 10px;
    }

    .rtm-afp-card:hover .rtm-afp-aa,
    .rtm-afp-card:focus-within .rtm-afp-aa,
    .rtm-afp-card:hover .rtm-afp-by,
    .rtm-afp-card:focus-within .rtm-afp-by,
    .rtm-afp-card:hover .rtm-afp-facts,
    .rtm-afp-card:focus-within .rtm-afp-facts,
    .rtm-afp-card:hover .rtm-afp-ident,
    .rtm-afp-card:focus-within .rtm-afp-ident,
    .rtm-afp-card .rtm-afp-weight,
    .rtm-afp-card .rtm-afp-buy {
        grid-area: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .rtm-afp-facts {
        grid-area: auto;
    }
}

@media (max-width: 768px) {
    .rtm-afp-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .rtm-afp-card .rtm-afp-buy {
        padding: 11px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rtm-afp-card,
    .rtm-afp-aa,
    .rtm-afp-line,
    .rtm-afp-facts,
    .rtm-afp-card .rtm-afp-buy {
        transition-duration: .01ms;
        transform: none;
    }

    .rtm-afp-card:hover,
    .rtm-afp-card:focus-within {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   SPECIMEN TOOLBAR
   One row above the stage, always visible. The controls used to hide
   behind a gear button, which meant a customer had to discover them
   before the specimen could do anything a static image cannot.
══════════════════════════════════════════════════════════════════ */
/*
 * Sized for the strip as it now ships -- three controls, not eleven.
 *
 * Every number below was tuned when this row held a name, three sliders, a
 * dropdown, four alignment buttons, OpenType, a dark toggle, a pencil and two
 * credit pills: at 9px labels and 110px tracks, that only just fitted on a
 * laptop. With three controls the same numbers read as fine print stranded at
 * the left edge of a very wide row, which is what they looked like.
 *
 * Wrapping still covers the other direction. A shop that switches all eleven
 * back on gets a taller row rather than a cramped one, and that is the right
 * trade -- a control you cannot read is worse than a row two lines deep.
 */
.rtm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    margin-bottom: 26px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rtm-toolbar-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
}

.rtm-tool {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rtm-tool-lbl {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--rtm-stage-label, #a1a1aa);
}

/* The readout is tabular so the row does not shuffle sideways as the
   number goes from 9px to 300px while a slider is being dragged. */
.rtm-tool-val {
    min-width: 48px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rtm-text, #18181b);
}

/* A share of the row rather than a fixed 110px, so three sliders on a wide
   screen use the space instead of huddling at one end of it. `flex` needs
   the parent to be a flex item that can grow, which `.rtm-tool` is. */
.rtm-tool-slider {
    flex: 1 1 220px;
    max-width: 340px;
}

.rtm-tool-slider input[type="range"] {
    flex: 1 1 auto;
    min-width: 90px;
    accent-color: var(--rtm-accent, #18181b);
}

.rtm-tool-select {
    padding: 5px 8px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 6px;
    background: var(--rtm-bg, #fff);
    font-size: 12px;
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}

/* Hover and active are set with the resting state, further down. */

.rtm-tool-icon {
    padding: 6px 8px;
}

/* The share button carries a word beside its mark, and that word is swapped
   for a longer confirmation on click. Without this the toolbar reflowed at the
   moment of the click -- every control after it stepping sideways just as the
   visitor was reading what happened. `white-space` keeps the confirmation on
   one line; the min-width reserves room for it up front, so the button grows
   once at load rather than twice per press. */
.rtm-suite .rtm-tool-share {
    min-width: 8.5em;
    justify-content: center;
    white-space: nowrap;
}

/* Pushed to the far end of the row: these are facts about the typeface,
   not controls, and they should not sit among things that click. */
.rtm-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.rtm-pill {
    padding: 5px 12px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 999px;
    font-size: 11px;
    color: #71717a;
    white-space: nowrap;
}

/* ── OpenType popover ────────────────────────────────────────────────────── */

.rtm-ot-wrap {
    position: relative;
}

/*
 * A row under the toolbar, not a popover hanging off a button.
 *
 * Eight feature names in a 280px absolutely-positioned column were a cropped
 * list that covered the specimen it was meant to be demonstrating on. Given
 * the page's width they lay out as a readable grid, and nothing is hidden
 * behind them -- which is also why a click elsewhere no longer closes it.
 */
.rtm-ot-panel {
    margin: 14px 0 0;
    padding: 18px 20px;
    /* Transparent, and lettering inherited from whatever it opened over. The
       dark slab was defensible as a popover floating above the page; as a row
       that pushes the specimen down it reads as a second page element rather
       than as part of the toolbar it belongs to. Both stay overridable. */
    background: var(--rtm-ot-bg, transparent);
    border-radius: var(--rtm-ot-r, 12px);
    color: var(--rtm-ot-text, inherit);
}

.rtm-ot-note {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: #a1a1aa;
}

/* ══════════════════════════════════════════════════════════════════
   CHARACTER MAP
   A filter rail beside the sets, so "does it have accents" is one
   click rather than a scroll through everything.
══════════════════════════════════════════════════════════════════ */
/* What the panel is, and how much of it there is. Above the rail rather
   than inside it: the total describes the whole map, and a count sitting
   in a column of category counts reads as one more category. */
.rtm-glyph-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
}

/* The rule switched off. The padding goes with it -- it was the gap
   between the words and the line, and there is no line now. */
.rtm-glyph-head-bare {
    padding-bottom: 0;
    border-bottom: none;
}

/* Nothing left in it but the count. A row holding one pill does not need
   the 24px that separated a two-line heading from the map. */
.rtm-glyph-head:not(:has(.rtm-glyph-head-title)):not(:has(.rtm-glyph-head-sub)) {
    margin-bottom: 12px;
}

.rtm-glyph-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rtm-text, #18181b);
}

.rtm-glyph-head-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--rtm-stage-label, #71717a);
}

.rtm-glyph-total {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rtm-card-bg, #f4f4f5);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rtm-text, #18181b);
}

.rtm-glyphs-wrap {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.rtm-glyph-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 20px;
}

.rtm-suite .rtm-glyph-filter,
.rtm-suite .rtm-glyph-filter:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: start;
    color: var(--rtm-text, #18181b);
    cursor: pointer;
    transition: background .13s, color .13s;
}

.rtm-suite .rtm-glyph-filter:hover {
    background: var(--rtm-card-bg, #fafafa);
}

.rtm-suite .rtm-glyph-filter.rtm-glyph-filter-active {
    background: var(--rtm-ctrl-btn-bg, #18181b);
    color: var(--rtm-ctrl-btn-text, #fff);
}

.rtm-glyph-count {
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}

.rtm-glyph-sets {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/*
 * The caption above each group -- "Uppercase 26", "Ligatures 9".
 *
 * `text-transform: uppercase` used to be forced here. It was a reasonable
 * small-caps label treatment everywhere except on this plugin, where the group
 * called Lowercase announced itself as LOWERCASE -- on a page whose entire
 * subject is letterforms, which makes it read as a bug rather than as a style.
 *
 * The tracking and weight stay, because those are what make it a label. The
 * case is left as the words were written, and the Set Heading typography
 * control can put the capitals back for a shop that wants them.
 */
.rtm-glyph-set-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--rtm-stage-label, #a1a1aa);
}

@media (max-width: 782px) {
    .rtm-glyphs-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .rtm-glyph-rail {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rtm-toolbar-meta {
        margin-inline-start: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════
   GLYPH INSPECTOR
   One character drawn at size, with the typeface's own vertical
   metrics ruled across it. A 22px cell in the map answers "is it in
   there"; this answers how the letter sits -- which is a comparison
   you can only make against the lines it was drawn to.
══════════════════════════════════════════════════════════════════ */

/* The suite ships its own, rather than trusting every theme to have
   defined it. Two hundred glyph cells each carry their character's
   Unicode name for a screen reader, and on a theme without this rule
   the character map would print all two hundred of them. */
.rtm-suite .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rtm-inspector {
    margin: 0 0 24px;
    padding: 18px 20px 16px;
    background: var(--rtm-stage-bg, #fff);
    color: var(--rtm-stage-text, #18181b);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-stage-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    transition: background .28s, color .28s, border-color .28s;
}

/* `hidden` alone loses to the display below on the elements inside it,
   and the panel is toggled by that attribute rather than by a class. */
.rtm-inspector[hidden] {
    display: none;
}

.rtm-inspector.rtm-dark {
    background: #09090b;
    color: #f4f4f5;
    border-color: #27272a;
}

.rtm-insp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.rtm-insp-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The full Unicode name, which for some characters is a sentence.
   Wrapping it is better than truncating a name whose distinguishing
   half is at the end -- "Latin Small Letter N Preceded By Apostrophe"
   is only itself after the fourth word. */
.rtm-insp-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}

.rtm-insp-code {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .06em;
    opacity: .55;
}

.rtm-insp-tools {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.rtm-suite .rtm-insp-btn,
.rtm-suite .rtm-insp-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .13s, border-color .13s, opacity .13s;
}

.rtm-suite .rtm-insp-btn:hover {
    border-color: var(--rtm-accent, #18181b);
}

.rtm-inspector.rtm-dark .rtm-insp-btn {
    border-color: #3f3f46;
}

.rtm-suite .rtm-insp-btn.rtm-tool-active {
    background: var(--rtm-accent, #18181b);
    border-color: var(--rtm-accent, #18181b);
}

/* No padding, deliberately. The script sizes the viewBox from this
   element's own clientWidth/clientHeight so that one font unit maps to
   the same number of pixels in both directions -- which is what lets
   the HTML label rail line up with rules drawn in font units. Padding
   here would put the SVG's box and the rail's coordinates on two
   different origins. */
.rtm-insp-stage {
    position: relative;
    height: clamp(240px, 40vh, 420px);
    overflow: hidden;
}

.rtm-insp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rtm-insp-glyph {
    fill: currentColor;
}

.rtm-insp-rule {
    stroke: var(--rtm-accent, #18181b);
    opacity: .55;
}

/* The baseline is not one measurement among five -- it is the zero the
   other four are stated against, so it is drawn as a line rather than
   as a dash. */
.rtm-insp-rule-base {
    stroke: currentColor;
    stroke-dasharray: none !important;
    opacity: .35;
}

.rtm-insp-rail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rtm-insp-tick {
    position: absolute;
    inset-inline-end: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 4px 2px 8px;
    /* Centred on its rule, which is what `top` is set to. */
    transform: translateY(-50%);
    background: var(--rtm-stage-bg, #fff);
    white-space: nowrap;
}

.rtm-inspector.rtm-dark .rtm-insp-tick {
    background: #09090b;
}

.rtm-insp-tick[hidden] {
    display: none;
}

.rtm-insp-tick-lbl {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .5;
}

.rtm-insp-tick-val {
    font-family: monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rtm-accent, #18181b);
}

.rtm-insp-note {
    margin: 12px 0 0;
    font-size: 10px;
    letter-spacing: .04em;
    line-height: 1.7;
    opacity: .5;
}

/* A glyph cell is a button now, so it arrives with the browser's own
   control styling to undo. */
.rtm-suite .rtm-glyph {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Without the inspector the cell is a `div`, not a button: nothing to open,
   so nothing to promise. The pointer goes with the promise. */
.rtm-suite div.rtm-glyph {
    cursor: default;
}

.rtm-glyph:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

.rtm-glyph.rtm-glyph-chosen {
    border-color: var(--rtm-glyph-on-brd, var(--rtm-accent, #18181b));
    background: var(--rtm-glyph-on-bg, var(--rtm-bg, #fff));
    box-shadow: inset 0 0 0 1px var(--rtm-glyph-on-brd, var(--rtm-accent, #18181b));
}

@media (max-width: 782px) {
    .rtm-insp-stage {
        height: clamp(200px, 34vh, 300px);
    }

    /* The rail overlaps the letter on a narrow screen, so the labels
       drop and only the numbers stay beside their rules. */
    .rtm-insp-tick-lbl {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   KINETIC STAGE
   A display line travelling along one axis of the font's own design.
   Its own block rather than part of the tester: that line is
   contenteditable, and the per-character spans this needs would not
   survive the first keystroke.
══════════════════════════════════════════════════════════════════ */
.rtm-kinetic {
    margin: 0 0 26px;
    padding: 34px 28px 18px;
    background: var(--rtm-stage-bg, #fff);
    color: var(--rtm-stage-text, #18181b);
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-stage-border, #e4e4e7);
    border-radius: var(--rtm-stage-r, 16px);
    overflow: hidden;
}

.rtm-kin-line {
    font-family: "RTMFont", system-ui, serif;
    font-size: clamp(38px, 9vw, 128px);
    line-height: 1.06;
    letter-spacing: -.01em;
    text-align: center;
    word-break: break-word;

    /* The letters change width as the axis moves, so the line reflows
       under its own animation. Centring keeps that breathing rather
       than letting it drag the whole line left and right. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

/* Each letter carries its own font-variation-settings, written by the
   script every frame. No transition: the easing is done in the loop,
   where it can be shaped and interrupted, and a CSS transition on top
   of it would fight the frame it just landed. */
.rtm-kin-char {
    display: inline-block;
    white-space: pre;
}

.rtm-kin-space {
    display: inline-block;
    width: .28em;
}

.rtm-kin-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--rtm-border, #e4e4e7);
}

.rtm-kin-icon {
    display: inline-flex;
    color: var(--rtm-accent, #18181b);
}

.rtm-kin-icon[hidden] {
    display: none;
}

/* The live axis value, which is the readout that makes the animation
   legible as a range rather than as decoration. */
.rtm-kin-axis {
    font-family: monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    opacity: .55;
}

.rtm-kin-manual {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-inline-start: auto;
}

.rtm-kin-manual-lbl {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .55;
}

.rtm-kin-manual-val {
    min-width: 3.2em;
    font-family: monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: .55;
}

@media (max-width: 782px) {
    .rtm-kinetic {
        padding: 24px 18px 14px;
    }

    .rtm-kin-bar {
        flex-wrap: wrap;
    }

    .rtm-kin-manual {
        margin-inline-start: 0;
        width: 100%;
    }

    .rtm-kin-manual input[type="range"] {
        flex: 1;
    }
}

/* ══════════════════════════════════════════════════════════════════
   INSPECTOR PLACEMENT
   Above the character map, or beside it. Beside is worth having: the
   map is long, and an inspector that scrolls away is one you have to
   scroll back to after every glyph you click.
══════════════════════════════════════════════════════════════════ */
/* The card's track is a variable so the Glyph Set widget's Detail Panel
   Width can write it; the grid is `1fr` and takes whatever is left,
   which is why that control needs no second number beside it. */
.rtm-panel.rtm-insp-left,
.rtm-panel.rtm-insp-right {
    display: grid;
    grid-template-columns: var(--rtm-insp-col, minmax(260px, 34%)) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* The panel's heading is not one of the two columns: it names the whole map,
   card included, so it takes the row above them. Left to auto-placement it
   took the first cell itself and pushed the card into the second -- which
   put a card asked for on the left on the right, under a heading a third of
   the width of what it heads, with the grid stranded in a narrow column
   underneath and the rest of the row empty. */
.rtm-panel.rtm-insp-left > .rtm-glyph-head,
.rtm-panel.rtm-insp-right > .rtm-glyph-head {
    grid-column: 1 / -1;
}

/* Source order puts the inspector first, which is what a screen reader
   and a narrow screen both want. `order` moves it visually without
   moving it in the document. */
.rtm-panel.rtm-insp-right .rtm-inspector {
    order: 2;
}

.rtm-panel.rtm-insp-left .rtm-inspector,
.rtm-panel.rtm-insp-right .rtm-inspector {
    position: sticky;
    top: 20px;
    margin-bottom: 0;
}

/* Above the map, pinned.
 *
 * This arrangement was dropped once because the card scrolled away after the
 * first row of glyphs, which made it useless exactly when the map was long
 * enough to need it. Sticky is what fixes that, and it is why the option is
 * back: the card holds the top of the screen while the grid runs underneath.
 *
 * The stage is shorter here than in the side panels. A band across the full
 * width does not need the height a column does, and a tall one pinned to the
 * top of a phone would leave nothing of the map to look at. */
.rtm-panel.rtm-insp-top .rtm-inspector {
    position: sticky;
    top: 20px;
    z-index: 2;
}

.rtm-panel.rtm-insp-top .rtm-insp-stage {
    height: clamp(150px, 24vh, 240px);
}
/* Beside the map the card is a column rather than a band, so the stage
   inside it is squarer and the labels have less room. */
.rtm-panel.rtm-insp-left .rtm-insp-stage,
.rtm-panel.rtm-insp-right .rtm-insp-stage {
    height: clamp(200px, 30vh, 300px);
}

/* Smaller, not gone. A bare 703 beside a dashed rule is a number without a
   claim; the label is the half that says what was measured. */
.rtm-panel.rtm-insp-left .rtm-insp-tick-lbl,
.rtm-panel.rtm-insp-right .rtm-insp-tick-lbl {
    font-size: 8px;
    letter-spacing: .04em;
}

/* The map's own rail and grid share what is left, so on a side layout
   the rail goes above its sets rather than stealing 190px of it. */
.rtm-panel.rtm-insp-left .rtm-glyphs-wrap,
.rtm-panel.rtm-insp-right .rtm-glyphs-wrap {
    grid-template-columns: minmax(0, 1fr);
}

.rtm-panel.rtm-insp-left .rtm-glyph-rail,
.rtm-panel.rtm-insp-right .rtm-glyph-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    /* One column, inspector back on top -- which is where the source
       order already has it, so the override is all that is needed. */
    .rtm-panel.rtm-insp-left,
    .rtm-panel.rtm-insp-right {
        display: block;
    }

    .rtm-panel.rtm-insp-left .rtm-inspector,
    .rtm-panel.rtm-insp-right .rtm-inspector {
        position: static;
        margin-bottom: 24px;
    }

}

/* ══════════════════════════════════════════════════════════════════
   SPECIMEN CHROME
   The toolbar, its sliders, its dropdown, its icon buttons and the
   credit badges. All of it was previously fixed in this file, so the
   Elementor panel had nothing to write to; each surface now reads a
   custom property with the shipped value as its fallback.
══════════════════════════════════════════════════════════════════ */

/* ── Dark stage ──────────────────────────────────────────────────────────── */

/*
 * Was three hardcoded colours with `!important`. The flag stays -- it is what
 * lets the dark state beat the light one written on the same element by the
 * palette -- but the values are now the shop's to choose.
 */
.rtm-stage.rtm-dark {
    background: var(--rtm-stage-dark-bg, #080b10) !important;
    color: var(--rtm-stage-dark-text, #f5f5f5) !important;
    border-color: var(--rtm-stage-dark-border, #27272a) !important;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.rtm-toolbar {
    background: var(--rtm-toolbar-bg, transparent);
    border: var(--rtm-toolbar-bw, 0) solid var(--rtm-toolbar-border, transparent);
    border-radius: var(--rtm-toolbar-r, 0);
    padding: var(--rtm-toolbar-p, 0);
}

/* ── Sliders ─────────────────────────────────────────────────────────────── */

/*
 * `accent-color` used to do all of this in one line, and it is genuinely the
 * right tool -- until somebody wants the filled part and the thumb to differ,
 * which is what a foundry asks for the moment it has a brand colour.
 *
 * The fill is a gradient stop rather than `::-moz-range-progress`, because
 * WebKit has no equivalent of that pseudo-element. `--rtm-fill` is a
 * percentage the script writes on every input event; with no script it sits at
 * its declared 0% and the track simply reads as empty rather than broken.
 */
.rtm-suite .rtm-tool-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;

    /* `width: 110px` used to live here and it beat the flex sizing above by
       specificity, which pinned every track to the same 110px however much
       room the row had. Auto lets the flex basis decide. */
    width: auto;
    height: var(--rtm-slider-h, 6px);
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--rtm-slider-fill, #18181b) 0 var(--rtm-fill, 0%),
        var(--rtm-slider-track, #e4e4e7) var(--rtm-fill, 0%) 100%
    );
    cursor: pointer;
    outline: none;
}

.rtm-suite .rtm-tool-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--rtm-slider-thumb-size, 16px);
    height: var(--rtm-slider-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-slider-thumb, #18181b);
    border: 2px solid var(--rtm-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.rtm-suite .rtm-tool-slider input[type="range"]::-moz-range-thumb {
    width: var(--rtm-slider-thumb-size, 16px);
    height: var(--rtm-slider-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-slider-thumb, #18181b);
    border: 2px solid var(--rtm-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
}

/* Firefox paints its own track over the element background. */
.rtm-suite .rtm-tool-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

/* ── Transform dropdown ──────────────────────────────────────────────────── */

.rtm-suite .rtm-tool-select {
    background: var(--rtm-select-bg, var(--rtm-bg, #fff));

    /* Three writers, in the order they should win. The global design centre
       sets `--rtm-select-border`; a widget's Elementor border group writes a
       real `border-color` at a higher specificity and beats it, which is the
       right way round; and with neither, the core Border Color applies. The
       property was dropped once, on the grounds that nothing could write it --
       true while Elementor was the only writer, and no longer. */
    border-color: var(--rtm-select-border, var(--rtm-border, #e4e4e7));
    color: var(--rtm-select-text, var(--rtm-text, #18181b));
}

/* ── Typeface picker ─────────────────────────────────────────────────────── */

/*
 * No frame by default.
 *
 * This one sits beside the name it changes, at the head of the toolbar, where
 * a boxed control reads as a form field dropped into a heading. The transform
 * dropdown keeps its border: that one lives among the controls, and there the
 * box is what says it is one.
 *
 * The Elementor border group still wins -- it writes style, width and colour
 * together at the specificity every Elementor selector carries, so a shop that
 * wants a frame here gets one.
 */
.rtm-suite .rtm-tool-family .rtm-tool-select {
    border: none;
    padding-inline-start: 0;
}

/* ── Icon buttons ────────────────────────────────────────────────────────── */

/*
 * One rule for the alignment icons, the OpenType button, the dark toggle and
 * the edit pencil. They are the same control wearing different glyphs, and
 * styling them apart is how three of the four end up looking like a mistake.
 */
/*
 * No box at rest.
 *
 * Eight grey tiles across the top of a specimen compete with the one thing on
 * the page worth looking at. The controls are still controls -- they take a
 * background on hover and on the active state, which is where the affordance
 * is actually needed -- but a toolbar nobody is touching now reads as a line
 * of labels rather than as a strip of buttons.
 */
/*
 * The `:focus` copies are not decoration -- they are what keeps this rule.
 *
 * Elementor's kit styles `button:hover, button:focus` as one rule at (0,2,1).
 * The hover half loses to the `:hover` rule below, which is (0,3,0); the focus
 * half had nothing to beat, so it outranked this (0,2,0) one and painted the
 * kit's accent across whichever control was last clicked -- and left it there,
 * because focus stays behind after the pointer has gone. Naming :focus here
 * lifts this to (0,3,0) without restating a single value, and the hover and
 * active rules that follow still win when they apply.
 */
.rtm-suite .rtm-align-btn,
.rtm-suite .rtm-tool-btn,
.rtm-suite .rtm-align-btn:focus,
.rtm-suite .rtm-tool-btn:focus {
    min-width: var(--rtm-icon-size, 28px);
    height: var(--rtm-icon-size, 28px);
    border-radius: var(--rtm-icon-r, 6px);
    background: var(--rtm-icon-bg, transparent);
    color: var(--rtm-icon-fg, #52525b);

    /* Transparent rather than absent. The width is reserved either way, so a
       shop that sets a hover border gets one without the row of buttons
       shifting a pixel the moment a pointer crosses it. */
    border: 1px solid var(--rtm-icon-border, transparent);
}

/*
 * No box in any state, so the colour has to carry both of them.
 *
 * Hover darkens toward the body text; active takes the accent. That is enough
 * to tell the two apart and enough to read "this one is on" at a glance, and
 * it holds the toolbar to one visual weight instead of letting a tile appear
 * under whichever control the pointer happens to be over.
 */
.rtm-suite .rtm-align-btn:hover,
.rtm-suite .rtm-tool-btn:hover {
    background: var(--rtm-icon-bg-h, transparent);
    color: var(--rtm-icon-fg-h, var(--rtm-text, #18181b));
    border-color: var(--rtm-icon-border-h, transparent);
}

.rtm-suite .rtm-align-btn.rtm-align-active,
.rtm-suite .rtm-tool-btn.rtm-tool-active {
    background: var(--rtm-icon-bg-a, transparent);
    color: var(--rtm-icon-fg-a, var(--rtm-accent, #18181b));
    border-color: var(--rtm-icon-border-a, transparent);
}

/* Keyboard focus still has to be visible. Suppressing the kit's focus fill
   removed the only thing marking it, and `:focus-visible` puts a ring back
   for the visitors who need one without showing it to everybody who clicks. */
.rtm-suite .rtm-align-btn:focus-visible,
.rtm-suite .rtm-tool-btn:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

/* ── Credit badges ───────────────────────────────────────────────────────── */

.rtm-suite .rtm-pill {
    background: var(--rtm-badge-bg, transparent);

    /* Same three writers as the transform dropdown above, same order: the
       design centre's property, beaten by a widget's Elementor border group,
       falling back to the core Border Color. */
    border: 1px solid var(--rtm-badge-border, var(--rtm-border, #e4e4e7));
    color: var(--rtm-badge-text, var(--rtm-stage-label, #a1a1aa));

    /* Declared here rather than left to the hover rules, which are generated
       by Elementor only when somebody actually sets a hover colour -- there
       would be nothing to put a transition on until then. */
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* ── Character map search ────────────────────────────────────────────────── */

.rtm-glyph-search {
    display: block;
    margin-bottom: 10px;
}

.rtm-suite .rtm-glyph-search input {
    box-sizing: border-box;
    width: 100%;
    padding: 7px 10px;
    background: var(--rtm-search-bg, var(--rtm-bg, #fff));
    border: 1px solid var(--rtm-search-border, var(--rtm-border, #e4e4e7));
    border-radius: var(--rtm-search-r, 8px);
    font-family: inherit;
    font-size: 12px;
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-glyph-search input:focus {
    outline: none;
    border-color: var(--rtm-accent, #18181b);
}

/* ── Category tabs ───────────────────────────────────────────────────────── */

/*
 * The counter beside each label -- "26", "165". A token of its own because it
 * is a different kind of thing from the label it sits next to: one names the
 * group, the other measures it, and a foundry usually wants the measurement
 * quieter.
 */
.rtm-suite .rtm-glyph-count {
    background: var(--rtm-count-bg, transparent);
    color: var(--rtm-count-text, inherit);
    border-radius: var(--rtm-count-r, 4px);
}

/* ══════════════════════════════════════════════════════════════════
   SPECIMEN TOOLBAR — added controls
══════════════════════════════════════════════════════════════════ */

/* ── OpenType, as a row under the toolbar ────────────────────────────────── */

.rtm-ot-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 20px;
}

.rtm-suite .rtm-ot-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    cursor: pointer;
}

.rtm-suite .rtm-ot-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--rtm-accent, #18181b);
    cursor: pointer;
}

.rtm-ot-note {
    margin: 14px 0 0;
    font-size: 11px;
    opacity: .55;
}

/* ── Alignment, as words ─────────────────────────────────────────────────── */

/*
 * Only the text variant needs sizing of its own. The icon variant is a square
 * and already has one.
 */
.rtm-suite .rtm-align-text .rtm-align-btn {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Title / paragraph toggle ────────────────────────────────────────────── */

.rtm-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

/* Off-screen rather than `display: none`: a hidden input is not focusable, and
   this is the only thing here a keyboard can operate. */
.rtm-mode-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rtm-mode-track {
    position: relative;
    display: block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--rtm-border, #e4e4e7);
    transition: background .18s ease;
}

.rtm-mode-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rtm-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}

.rtm-mode-input:checked + .rtm-mode-track {
    background: var(--rtm-accent, #18181b);
}

.rtm-mode-input:checked + .rtm-mode-track .rtm-mode-knob {
    transform: translateX(16px);
}

/* Mirrored as a pair; see the note on .rtm-afp-switch-track::after. */
[dir="rtl"] .rtm-mode-knob {
    left: auto;
    right: 3px;
}
[dir="rtl"] .rtm-mode-input:checked + .rtm-mode-track .rtm-mode-knob {
    transform: translateX(-16px);
}

.rtm-mode-input:focus-visible + .rtm-mode-track {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

.rtm-mode-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--rtm-stage-label, #a1a1aa);
}

/* ── Colour swatches ─────────────────────────────────────────────────────── */

.rtm-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rtm-color-swatch {
    display: inline-flex;
    cursor: pointer;
}

/*
 * The browser's own colour input, stripped to the swatch. Its native chrome is
 * a bordered box with padding that no two platforms draw the same way, and the
 * toolbar wants one square.
 *
 * No frame around it, for the same reason the buttons beside it lost theirs.
 * The edge these do need is on the colour itself: the background swatch starts
 * white on a white stage, and without a hairline there is nothing there to
 * click. An inset shadow draws that edge inside the square rather than adding
 * a box around it.
 */
.rtm-suite .rtm-color-swatch input[type="color"] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--rtm-icon-r, 6px);
    background: none;
    cursor: pointer;
}

.rtm-suite .rtm-color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.rtm-suite .rtm-color-swatch input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--rtm-icon-r, 6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.rtm-suite .rtm-color-swatch input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: var(--rtm-icon-r, 6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

.rtm-suite .rtm-tool-reset {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 10px;
}

/* ── Kinetic bar ─────────────────────────────────────────────────────────── */

/*
 * Not a row of its own. Weight belongs beside Size -- they are the same kind
 * of control moving the same line, and separating them made the axis look like
 * a different feature rather than another dimension of the typeface.
 *
 * `display: contents` keeps the element for the script to bind its config to
 * while letting the play button and the axis sliders sit directly in the
 * toolbar's own flex flow, so they wrap with everything else.
 */
.rtm-kin-bar {
    display: contents;
}

/* ── Paragraph mode ──────────────────────────────────────────────────────── */

/*
 * A block of copy is read, not looked at, so it is capped to a measure and
 * dropped to a size the eye can actually run along. The size slider still
 * governs -- this only stops a 200px display setting following the visitor
 * into a mode where it would put four words on a line.
 */
.rtm-sampler-paragraph {
    max-width: 62ch;
    font-size: clamp(16px, 2.2vw, 28px) !important;
    line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   FILTER PANEL
   A sidebar that narrows the grid: a price range, a free switch, and
   a block per taxonomy drawn as chips, a checkbox list or a dropdown.

   Chips are the default and the reason a type foundry wants its own
   filter rather than the shop's generic one -- each term is set in the
   typeface of a product carrying it, so "Script" written in a script
   says what it means before it is read.

   Everything the Style tab paints is a custom property declared on the
   panel. The alternative is Elementor writing at the vendor
   pseudo-elements a range thumb and a switch knob are made of, and one
   unknown selector in a list invalidates the whole rule -- so a Firefox
   visitor would have lost the handle colour a Chrome designer set.
══════════════════════════════════════════════════════════════════ */
.rtm-fil {
    background: var(--rtm-bg, #fff);
    color: var(--rtm-text, #18181b);
    font-size: 13px;
}

.rtm-fil-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
}
.rtm-fil-title {
    font-size: 15px; font-weight: 800;
    letter-spacing: .01em;
}
.rtm-suite .rtm-fil-clear,
.rtm-suite .rtm-fil-clear:hover,
.rtm-suite .rtm-fil-clear:active,
.rtm-suite .rtm-fil-clear:focus {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px; font-weight: 700;
    color: var(--rtm-accent, #18181b);
    text-decoration: underline;
    cursor: pointer;
}

/* One block per thing being filtered by, ruled off from the next. */
.rtm-fil-block {
    border-top: 1px solid var(--rtm-border, #e4e4e7);
    padding: 16px 0;
}

/* The heading is a button, so a theme that paints its buttons on hover
   would flood the whole row -- the hover and active states are listed
   here so the panel stays flat unless the Style tab says otherwise. */
.rtm-suite .rtm-fil-legend,
.rtm-suite .rtm-fil-legend:hover,
.rtm-suite .rtm-fil-legend:active,
.rtm-suite .rtm-fil-legend:focus {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0 0 12px;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 14px; font-weight: 800;
    font-family: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.rtm-fil-chev {
    flex-shrink: 0;
    transition: transform .16s;
    color: var(--rtm-fil-chev, #71717a);
}
/* Pointing up while open, which is the direction a thing that can be
   folded away goes. */
.rtm-fil-legend[aria-expanded="true"] .rtm-fil-chev { transform: rotate(180deg); }

.rtm-fil-body[hidden] { display: none; }

/* ── Price ───────────────────────────────────────────────────────────────
   Two range inputs stacked on one track. They are real controls: the
   keyboard reaches them and a screen reader announces a number rather
   than a pixel offset. Only the fill between the handles is drawn. */
.rtm-fil-range {
    position: relative;
    height: max(22px, var(--rtm-fil-thumb-size, 16px) + 6px);
    margin: 2px 0 14px;
}
.rtm-fil-track {
    position: absolute;
    inset-inline-start: 0; inset-inline-end: 0; top: 50%;
    height: var(--rtm-fil-track-h, 3px);
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--rtm-fil-track, #e4e4e7);
    display: block;
}
.rtm-fil-fill {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 999px;
    background: var(--rtm-fil-fill, var(--rtm-accent, #18181b));
    display: block;
}

/* The inputs themselves are invisible except for their handles, and they
   overlap -- so the track below can be clicked through everywhere except
   where a handle actually is. */
.rtm-suite .rtm-fil-thumb {
    -webkit-appearance: none; appearance: none;
    position: absolute;
    inset-inline-start: 0; top: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background: none;
    border: none;
    pointer-events: none;
}
.rtm-suite .rtm-fil-thumb:focus { outline: none; }

.rtm-fil-thumb::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: var(--rtm-fil-thumb-size, 16px);
    height: var(--rtm-fil-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-fil-thumb, #fff);
    border: 2px solid var(--rtm-fil-thumb-brd, var(--rtm-accent, #18181b));
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: grab;
    pointer-events: auto;
}
.rtm-fil-thumb::-moz-range-thumb {
    width: var(--rtm-fil-thumb-size, 16px);
    height: var(--rtm-fil-thumb-size, 16px);
    border-radius: 50%;
    background: var(--rtm-fil-thumb, #fff);
    border: 2px solid var(--rtm-fil-thumb-brd, var(--rtm-accent, #18181b));
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: grab;
    pointer-events: auto;
}
.rtm-fil-thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--rtm-accent, #18181b); outline-offset: 2px; }
.rtm-fil-thumb:focus-visible::-moz-range-thumb { outline: 2px solid var(--rtm-accent, #18181b); outline-offset: 2px; }

/* The two boxes under the slider. Typing in them is the way to land on an
   exact number, which no handle on a 500-wide range can do. */
.rtm-fil-nums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.rtm-fil-num {
    display: flex; align-items: center; gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 8px;
    background: var(--rtm-fil-input-bg, #fff);
}
.rtm-fil-num:focus-within { border-color: var(--rtm-accent, #18181b); }
.rtm-fil-cur { font-size: 12px; color: var(--rtm-fil-muted, #71717a); }
.rtm-suite .rtm-fil-num input,
.rtm-suite .rtm-fil-num input:focus {
    width: 100%; min-width: 0;
    padding: 0; margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px; font-weight: 700;
    color: inherit;
    outline: none;
    height: auto;
}

/* ── The free switch ─────────────────────────────────────────────────── */
.rtm-fil-switch {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    cursor: pointer;
}
.rtm-fil-switch-label { font-size: 12.5px; }
.rtm-fil-switch input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.rtm-fil-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--rtm-fil-toggle-off, var(--rtm-fil-track, #e4e4e7));
    transition: background .16s;
}
.rtm-fil-switch-track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--rtm-fil-toggle-thumb, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .16s;
}
.rtm-fil-switch input:checked ~ .rtm-fil-switch-track {
    background: var(--rtm-fil-toggle-on, var(--rtm-accent, #18181b));
}
.rtm-fil-switch input:checked ~ .rtm-fil-switch-track::after { transform: translateX(16px); }

/* Mirrored as a pair; see the note on .rtm-afp-switch-track::after. */
[dir="rtl"] .rtm-fil-switch-track::after { left: auto; right: 3px; }
[dir="rtl"] .rtm-fil-switch input:checked ~ .rtm-fil-switch-track::after { transform: translateX(-16px); }
.rtm-fil-switch input:focus-visible ~ .rtm-fil-switch-track {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

/* ── Chips ───────────────────────────────────────────────────────────────
   Two to a row by default, because the words are set in faces of wildly
   different widths and a single column wastes the sidebar while three
   crushes a blackletter into an ellipsis. */
.rtm-fil-chips {
    display: grid;
    grid-template-columns: repeat(var(--rtm-fil-cols, 2), minmax(0, 1fr));
    gap: 8px;
}
.rtm-fil-chip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--rtm-fil-chip-bg, #f4f4f5);
    color: var(--rtm-fil-chip-text, #18181b);
    border: 1.5px solid var(--rtm-fil-chip-brd, transparent);
    cursor: pointer;
    text-align: center;
    transition: background .14s, border-color .14s, color .14s;

    /* Set in the term's own typeface, at a size that lets it be judged.
       The fallback matters: a face that fails to load must still be
       readable rather than collapse to the browser's serif default. */
    font-size: var(--rtm-fil-chip-fs, 17px);
    line-height: 1.15;
}
.rtm-fil-chip:hover { border-color: var(--rtm-accent, #18181b); }
.rtm-fil-chip input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.rtm-fil-chip-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.rtm-fil-chip.is-on,
.rtm-fil-chip:has(input:checked) {
    background: var(--rtm-fil-chip-on-bg, #18181b);
    color: var(--rtm-fil-chip-on-text, #ffffff);
    border-color: var(--rtm-fil-chip-on-brd, var(--rtm-fil-chip-on-bg, #18181b));
}
.rtm-fil-chip:has(input:focus-visible) {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}

/* How many products a term holds, where the block asks for it. Set at the
   panel's own size rather than the chip's -- it is an annotation, and a
   number in a display face at 17px reads as part of the name. */
.rtm-fil-count {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    opacity: .6;
}

/* ── Checkbox list ───────────────────────────────────────────────────────
   For blocks where the names are long and the face is not the point --
   foundries, licence types, anything read rather than looked at. */
.rtm-fil-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rtm-fil-check {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 2px;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}
.rtm-fil-check input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.rtm-fil-box {
    flex-shrink: 0;
    width: 17px; height: 17px;
    border-radius: 4px;
    border: 1.5px solid var(--rtm-border, #e4e4e7);
    background: var(--rtm-fil-input-bg, #fff);
    position: relative;
    transition: background .14s, border-color .14s;
}
.rtm-fil-check input:checked ~ .rtm-fil-box {
    background: var(--rtm-fil-chip-on-bg, #18181b);
    border-color: var(--rtm-fil-chip-on-bg, #18181b);
}
/* The tick: two borders of a box, rotated. */
.rtm-fil-check input:checked ~ .rtm-fil-box::after {
    content: '';
    position: absolute;
    inset-inline-start: 5px; top: 1.5px;
    width: 4px; height: 8px;
    border: solid var(--rtm-fil-chip-on-text, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}
.rtm-fil-check input:focus-visible ~ .rtm-fil-box {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 2px;
}
.rtm-fil-check .rtm-fil-chip-text { flex: 1; min-width: 0; }
.rtm-fil-check .rtm-fil-count { margin-inline-start: auto; }

/* ── Dropdown ────────────────────────────────────────────────────────────
   One choice at a time, for a long secondary list where the room matters
   more than combining two of its terms. */
.rtm-suite .rtm-fil-drop,
.rtm-suite .rtm-fil-drop:focus {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    margin: 0;
    padding: 10px 30px 10px 12px;
    font-family: inherit;
    font-size: 13px; font-weight: 600;
    line-height: 1.3;
    color: inherit;
    background-color: var(--rtm-fil-input-bg, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--rtm-border, #e4e4e7);
    border-radius: 8px;
    box-shadow: none;
    height: auto;
    cursor: pointer;
}
.rtm-suite .rtm-fil-drop:hover { border-color: var(--rtm-accent, #18181b); }

/* Everything past the block's limit is rendered and folded, so Show all is
   a class rather than a request. */
.rtm-fil-folded { display: none; }
.rtm-fil-unfolded .rtm-fil-folded { display: flex; }

.rtm-suite .rtm-fil-showall,
.rtm-suite .rtm-fil-showall:hover,
.rtm-suite .rtm-fil-showall:active,
.rtm-suite .rtm-fil-showall:focus {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12.5px; font-weight: 700;
    color: var(--rtm-fil-link, #2563eb);
    cursor: pointer;
}
.rtm-suite .rtm-fil-showall:hover { text-decoration: underline; }
.rtm-fil-showall[aria-expanded="true"] svg { transform: rotate(180deg); }
.rtm-fil-showall svg { transition: transform .16s; }

/* ── What the grid says back ─────────────────────────────────────────── */
.rtm-afp-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--rtm-fil-muted, #71717a);
}

/* A grid waiting on a narrower list. Dimmed rather than emptied: the
   answer usually looks a lot like what is already there, and blanking it
   first makes every filter feel like a page load. */
.rtm-afp-grid.is-busy {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT GALLERY
   The foundry's own images at one height, laid end to end and pushed
   sideways. Widths are not set anywhere: each image keeps its own
   proportions, so a square lockup, a wide headline render and a tall
   mockup sit side by side at the same size without any of them being
   cropped into a grid cell. The height is the only dimension, and it
   is the one the Style tab exposes.

   Scrolling is the browser's. The track is an overflow box with snap
   points, which means a swipe, a trackpad, shift-wheel, the arrow
   keys and the two buttons all drive the same thing, and a visitor
   with no JavaScript still has a gallery they can move. The script
   adds the buttons and drag-to-pan on top of that -- see
   bindGallery() in font-preview.js.
══════════════════════════════════════════════════════════════════ */
.rtm-gal {
    --rtm-gal-h: 420px;
    --rtm-gal-gap: 12px;
    --rtm-gal-nav-size: 44px;
    --rtm-gal-nav-inset: 16px;
    --rtm-gal-card-w: 380px;
    --rtm-gal-card-inset: 24px;

    position: relative;
}

/* Out of the container and across the window.
   `50% - 50vw` is the width of one gutter, whatever the container is,
   so this needs no knowledge of the theme's layout. It costs a
   horizontal scrollbar on the page if an ancestor is not clipping,
   which is why it is off unless the widget asked for it. */
.rtm-gal-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
}

.rtm-gal-track {
    display: flex;
    gap: var(--rtm-gal-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* The bar is furniture on a strip of pictures, and the two buttons
       and a swipe already say it moves. Firefox and WebKit spell this
       differently and neither is a hack. */
    scrollbar-width: none;
}

.rtm-gal-track::-webkit-scrollbar {
    display: none;
}

/* The track is focusable, because a keyboard has to be able to reach a
   scrolling region. Focus has to be visible when it does. */
.rtm-gal-track:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 3px;
}

.rtm-gal.is-scrollable .rtm-gal-track {
    cursor: grab;
}

/* While a drag is in progress. Snapping is suspended for the duration:
   a snap point fighting a finger is what makes a hand-rolled carousel
   feel like it is arguing with you. */
.rtm-gal.is-dragging .rtm-gal-track {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.rtm-gal-item {
    flex: 0 0 auto;
    margin: 0;
    height: var(--rtm-gal-h);

    /* A panorama would otherwise be one image several screens wide.
       Clipped rather than squeezed: a specimen render distorted to fit
       is worse than one whose right edge is off the strip. */
    max-width: 92vw;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--rtm-card-bg, #fafafa);
}

/* Height fixed, width from the image's own proportions.
   `max-width: none` is not decoration -- almost every theme ships
   `img { max-width: 100% }`, and under it every frame in this strip
   would collapse to the width of its figure. */
.rtm-gal-img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

.rtm-gal-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rtm-gal-nav-size);
    height: var(--rtm-gal-nav-size);
    padding: 0;
    border: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
    border-radius: 999px;
    background: var(--rtm-bg, #fff);
    color: var(--rtm-text, #18181b);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .16s, color .16s, opacity .16s, transform .16s;
}

.rtm-gal-prev { inset-inline-start: var(--rtm-gal-nav-inset); }
.rtm-gal-next { inset-inline-end: var(--rtm-gal-nav-inset); }

/* The buttons swap sides on their own -- the insets above are logical -- but
   the chevrons inside them do not. A mark that points back the way the strip
   scrolls is the whole of what a chevron says, so it is mirrored rather than
   swapped for a second pair of paths in the markup. On the SVG and not on the
   button, which carries a translateY of its own for centring. */
[dir="rtl"] .rtm-gal-nav svg {
    transform: scaleX(-1);
}

.rtm-gal-nav:hover {
    transform: translateY(-50%) scale(1.06);
}

/* Kept on the page at the ends rather than removed. A button that
   vanishes takes the other one's position with it, and a strip whose
   controls move as you reach the end is a strip you stop trusting. */
.rtm-gal-nav[disabled] {
    opacity: .3;
    cursor: default;
    transform: translateY(-50%);
}

/* Both start hidden and the script reveals them, so a strip too short
   to scroll -- or a page with no JavaScript -- never shows a control
   that would do nothing. Specific enough to beat the display above. */
.rtm-gal-nav[hidden] {
    display: none;
}

/* ── Caption card ────────────────────────────────────────────────────────── */

/* Laid over the strip rather than in it, and transparent to the
   pointer: it sits in the middle of a scrolling region, and a caption
   that swallows a drag is a caption that breaks the gallery. */
.rtm-gal-card {
    position: absolute;
    z-index: 3;
    max-width: var(--rtm-gal-card-w);
    padding: 22px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--rtm-text, #18181b);
    pointer-events: none;
}

.rtm-gal-card-top-left {
    top: var(--rtm-gal-card-inset);
    inset-inline-start: var(--rtm-gal-card-inset);
}

.rtm-gal-card-top-right {
    top: var(--rtm-gal-card-inset);
    inset-inline-end: var(--rtm-gal-card-inset);
}

.rtm-gal-card-bottom-left {
    bottom: var(--rtm-gal-card-inset);
    inset-inline-start: var(--rtm-gal-card-inset);
}

.rtm-gal-card-bottom-right {
    bottom: var(--rtm-gal-card-inset);
    inset-inline-end: var(--rtm-gal-card-inset);
}

.rtm-gal-card-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.rtm-gal-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--rtm-accent, #18181b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}

.rtm-gal-title {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.rtm-gal-sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.45;
    opacity: .78;
}

/* Phones. The height is the only thing that has to change -- every
   width follows from it -- but the card and the buttons are sized for
   a desktop and would take most of a small screen at those numbers.
   Elementor's own responsive values are written at a higher
   specificity, so a widget that sets its own mobile height still wins
   here. */
@media (max-width: 767px) {
    .rtm-gal {
        --rtm-gal-h: 260px;
        --rtm-gal-nav-size: 36px;
        --rtm-gal-nav-inset: 10px;
        --rtm-gal-card-w: 76%;
        --rtm-gal-card-inset: 14px;
    }

    .rtm-gal-card { padding: 16px 18px; }
    .rtm-gal-title { font-size: 24px; }
    .rtm-gal-sub { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .rtm-gal-track { scroll-behavior: auto; }
    .rtm-gal-nav { transition: none; }
    .rtm-gal-nav:hover { transform: translateY(-50%); }
}

/* Inline purchase panel ─────────────────────
   The licence list where WooCommerce's own form used to stand, rather than in
   a drawer. Same rows, same total, same button -- so the only rules here are
   the ones that undo the drawer.

   `.rtm-oc-body` and `.rtm-oc-footer` are shared with the offcanvas because
   they wrap the shared partial. In the drawer they are a scrolling middle and
   a pinned foot of a fixed-height column; on the page they are neither, and
   left alone the body would carry a scrollbar it has no height to need and
   the footer would sit against a rule that no longer separates anything from
   anything. */
.rtm-suite-purchase { margin: 0 0 1.5em; }

.rtm-suite-purchase .rtm-oc-body {
    flex: none;
    overflow: visible;
    padding: 0;
}

.rtm-suite-purchase .rtm-oc-footer {
    padding: 16px 0 0;
    border-top: 0;
}

/* The total is the price of the page now, not a summary line in a sidebar. */
.rtm-suite-purchase .rtm-oc-total { margin-top: 14px; }

/* Full width, because it is the product's Add to cart and a theme's is. */
.rtm-suite-purchase .rtm-atc-btn { width: 100%; }

.rtm-suite-purchase .rtm-oc-contact { text-align: start; }

/* The free purchase panel ───────────────────
   A real form in the product summary, one radio per licence. It reuses the
   licence rows wholesale -- the same grid, the same tier dropdown, the same
   button -- so the only rules here are the two differences: a round marker
   instead of a square one, and no drawer around any of it. */
.rtm-buy { margin: 0 0 1.5em; }

.rtm-buy .rtm-lic-legend { margin-top: 0; }

/* The one visual difference from the paid panel, and it is the honest one: a
   round marker says "one of these", a square one says "as many as you like".
   Same element, same states -- only the shape and the mark inside it. */
.rtm-lic-box-radio { border-radius: 50%; }

.rtm-lic-inp:checked ~ .rtm-lic-box-radio {
    background: #fff;
    border-color: var(--rtm-accent, #18181b);
}
.rtm-lic-inp:checked ~ .rtm-lic-box-radio::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border: 0;
    border-radius: 50%;
    background: var(--rtm-accent, #18181b);
    transform: none;
}

/* A row the shop sells by enquiry: no radio to give it, so it is not a choice
   and must not look like one that happens to be off. */
.rtm-buy .rtm-row-enquiry { cursor: default; }
.rtm-buy .rtm-row-enquiry:hover { border-color: var(--rtm-oc-row-border, #e4e4e7); }

.rtm-buy-foot { margin-top: 16px; }

/* Full width, because it is the product's Add to cart and a theme's is. */
.rtm-buy .rtm-atc-btn { width: 100%; }

.rtm-buy .rtm-oc-contact { text-align: start; margin-top: 10px; }

/* ── Specimen sheet ───────────────────────────────────────────────────────── */

/*
 * The printed half of the showcase. Everything here is fixed: no control
 * writes to these rows, and none of them carries `.rtm-sampler`, which is
 * what a tester elsewhere on the page drives. A sheet that quietly restyled
 * itself when somebody moved a slider three widgets away would not be a
 * specimen of anything.
 */
.rtm-suite .rtm-spec-sheet {
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-spec-head {
    padding-bottom: 20px;
}

.rtm-suite .rtm-spec-title {
    margin: 0;

    /* Set in the face it names. The one line every reader looks at first is
       not the line to hand back to the theme's font. */
    font-family: "RTMFont", system-ui, serif;
    font-size: clamp(30px, 6vw, 54px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--rtm-text, #18181b);
}

.rtm-suite .rtm-spec-facts {
    margin: 10px 0 0;
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--rtm-stage-label, #52525b);
}

.rtm-suite .rtm-spec-block {
    padding: 26px 0;
}

/* The rule belongs under a block rather than over it, so the last block on
   the sheet does not end in a line across the page with nothing beneath it. */
.rtm-suite .rtm-spec-ruled {
    border-bottom: var(--rtm-stage-bw, 1px) var(--rtm-border-style, solid) var(--rtm-border, #e4e4e7);
}

/*
 * The gutter and the line. A grid rather than flex: the numbers down the left
 * have to hold one column whatever the line beside them does, and that is a
 * statement about the whole ladder rather than about each row.
 */
.rtm-suite .rtm-spec-row {
    display: grid;
    grid-template-columns: 3.2em 1fr;
    align-items: baseline;
    gap: 14px;
}

.rtm-suite .rtm-spec-size {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--rtm-stage-label, #52525b);

    /* The number labels the row, and at 72px the row's own baseline is a long
       way down. Pinning the label to the top keeps the column readable as a
       column instead of scattering it down the page. */
    align-self: start;
    padding-top: .45em;
}

.rtm-suite .rtm-spec-line {
    margin: 0;
    font-family: "RTMFont", system-ui, serif;
    line-height: 1.18;

    /* A ladder is about the shapes at each size, not about how a long line
       breaks. One line per rung, clipped where the page runs out. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtm-suite .rtm-spec-ladder .rtm-spec-row + .rtm-spec-row,
.rtm-suite .rtm-spec-weights .rtm-spec-row + .rtm-spec-row {
    margin-top: 14px;
}

/* The weight's name, beside the words it is setting rather than in the
   gutter: the gutter already carries the number, and the two together would
   be the same fact twice in two columns. */
.rtm-suite .rtm-spec-weight-name {
    margin-inline-start: .6em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rtm-stage-label, #52525b);
    vertical-align: middle;
}

/* The alphabet wraps — it is an inventory, and clipping it would hide the end
   of it, which is the part nobody has seen. */
.rtm-suite .rtm-spec-chars {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

.rtm-suite .rtm-spec-charset .rtm-spec-chars + .rtm-spec-chars {
    margin-top: 12px;
}

.rtm-suite .rtm-spec-copy {
    white-space: normal;
    line-height: 1.55;

    /* Reading measure. A paragraph run across a 1200px template is a test of
       the reader's patience rather than of the typeface. */
    max-width: 62ch;
}

@media (max-width: 600px) {
    .rtm-suite .rtm-spec-row {
        grid-template-columns: 2.4em 1fr;
        gap: 10px;
    }
}

/* Printed, this is what it was always meant to be: the gutter numbers go, the
   rules stay, and nothing is clipped because paper has no scroll. */
@media print {
    .rtm-suite .rtm-spec-size {
        display: none;
    }

    .rtm-suite .rtm-spec-row {
        display: block;
    }

    .rtm-suite .rtm-spec-line {
        white-space: normal;
        overflow: visible;
    }
}

/* ── Font comparison ──────────────────────────────────────────────────────── */

/*
 * Two typefaces on one stage, under one set of controls.
 *
 * The panes are `.rtm-sampler` like any other specimen row, which is why
 * every slider drives both without the stylesheet or the script knowing a
 * comparison is happening. All this adds is the column and the pair of heads.
 */
.rtm-suite .rtm-cmp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* The gap is the whole comparison: too little and the two faces bleed
       into one another, too much and the eye has to travel between them. */
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
}

/* The rule between the panes, drawn on the gap rather than as a border on
   either one -- a border belongs to a side, and this line belongs to neither. */
.rtm-suite .rtm-cmp-grid > .rtm-cmp-pane + .rtm-cmp-pane {
    border-inline-start: 1px solid var(--rtm-stage-border, #e4e4e7);
    padding-inline-start: clamp(20px, 4vw, 48px);
    margin-inline-start: calc(clamp(20px, 4vw, 48px) * -1);
}

.rtm-suite .rtm-cmp-pane {
    min-width: 0;
}

/*
 * The two heads are one row of labels. A fixed height rather than whatever
 * each happens to be: the name is text and the picker is a control, they are
 * naturally different heights, and the two specimens under them would start
 * at different baselines — which is exactly the difference a comparison is
 * trying to measure.
 */
.rtm-suite .rtm-cmp-head {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 14px;
}

.rtm-suite .rtm-cmp-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtm-stage-label, #52525b);
}

/* Set in the interface font, never in either typeface being compared: a label
   drawn in one of the two faces is quietly arguing for it. */
.rtm-suite .rtm-cmp-pick {
    max-width: 100%;
    padding: 5px 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtm-select-text, var(--rtm-stage-label, #52525b));
    background: var(--rtm-select-bg, transparent);
    border: 1px solid var(--rtm-select-border, var(--rtm-border, #e4e4e7));
    border-radius: 6px;
    cursor: pointer;
}

/* The comparison is the point of the stage while it is on, so the specimen
   gets the room the metric rules would otherwise have reserved. */
.rtm-suite .rtm-stage-cmp .rtm-sampler {
    word-break: break-word;
}

@media (max-width: 700px) {
    /*
     * Stacked, not scrolled. Two columns of type at phone width are two
     * columns of one word each — and a comparison read by scrolling sideways
     * is a comparison read one face at a time, which is the thing this
     * feature exists to avoid.
     */
    .rtm-suite .rtm-cmp-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .rtm-suite .rtm-cmp-grid > .rtm-cmp-pane + .rtm-cmp-pane {
        border-inline-start: 0;
        border-top: 1px solid var(--rtm-stage-border, #e4e4e7);
        padding-inline-start: 0;
        padding-top: 28px;
        margin-inline-start: 0;
    }
}

/* ── Comparison: wipe ─────────────────────────────────────────────────────── */

/*
 * The two typefaces superimposed, with a divider dragged across them.
 *
 * Both layers are placed in the same grid cell rather than absolutely
 * positioned. That is what keeps the container's height honest — it takes the
 * height of the taller of the two, so a wide face that wraps to a second line
 * grows the stage instead of spilling out of a box sized to the other one.
 */
.rtm-suite .rtm-cmp-wipe {
    position: relative;
    display: grid;

    /* Both children into one cell. */
    isolation: isolate;
}

.rtm-suite .rtm-cmp-layer {
    grid-area: 1 / 1;
    min-width: 0;
}

/*
 * The compared face, revealed from the divider rightwards.
 *
 * `clip-path` rather than a width and `overflow: hidden`: clipping leaves the
 * text laid out at full width and simply stops painting part of it, so the
 * letters do not reflow as the divider moves. A clipped-by-width overlay
 * re-wraps on every pixel of the drag, which reads as the typeface changing
 * shape while you look at it.
 */
.rtm-suite .rtm-cmp-over {
    clip-path: inset(0 0 0 var(--rtm-wipe, 50%));

    /*
     * Opaque, and this is the line that makes a wipe work on type at all.
     *
     * An image comparison gets away with clipping the top layer because the
     * layer underneath is the same size and equally opaque -- whatever is
     * revealed is that image, and nothing shows through. Text is not like
     * that: it is ink on clear glass. Clipped without a background of its
     * own, the compared face was painted *over* a base face that was still
     * fully drawn underneath, so the right-hand side showed both at once --
     * and since two typefaces set the same string at different widths, the
     * two were never even on the same letters. The result read as a fault.
     *
     * A background the colour of the stage turns the overlay back into
     * something that can hide what is behind it.
     */
    background: var(--rtm-stage-bg, #ffffff);

    /* Inert. The caret belongs to the layer underneath. */
    pointer-events: none;
}

/* The dark stage paints with !important and does not go through the custom
   property, so the overlay is told separately. */
.rtm-suite .rtm-stage.rtm-dark .rtm-cmp-over {
    background: #09090b;
}

/*
 * Right to left, where the divider and the clip would otherwise disagree.
 *
 * `clip-path: inset()` takes its four sides physically -- top, right, bottom,
 * left -- and has no logical form. The divider's offset does: it became
 * `inset-inline-start`, so on an RTL page the handle moves in from the right
 * while the clip went on revealing from the left, and the two ends of the
 * wipe came apart.
 *
 * Mirroring the inset is the whole fix. The pointer maths in
 * font-preview.js measures from the same edge for the same reason; see
 * percentFrom().
 */
[dir="rtl"] .rtm-suite .rtm-cmp-over {
    clip-path: inset(0 var(--rtm-wipe, 50%) 0 0);
}

.rtm-suite .rtm-cmp-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: var(--rtm-wipe, 50%);
    width: 2px;
    margin-inline-start: -1px;
    background: var(--rtm-accent, #18181b);
    cursor: ew-resize;

    /* Without this a drag on a touch screen scrolls the page instead. */
    touch-action: none;
    z-index: 2;
}

.rtm-suite .rtm-cmp-divider:focus-visible {
    outline: 2px solid var(--rtm-accent, #18181b);
    outline-offset: 3px;
}

.rtm-suite .rtm-cmp-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rtm-accent, #18181b);
    color: var(--rtm-stage-bg, #ffffff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

/* The two names, pinned to the ends of the pair rather than floating with the
   divider: a label that moved with the handle would be a label the reader has
   to chase. */
.rtm-suite .rtm-cmp-tags {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;

    /* Below the type rather than over it. A tag sitting on a descender is a
       tag arguing with the thing it names. */
    transform: translateY(calc(100% + 10px));
}

.rtm-suite .rtm-cmp-tag {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtm-stage-label, #52525b);
}

/* Set in the interface font, never in either face being compared — a label
   drawn in one of the two is quietly arguing for it. */
.rtm-suite .rtm-cmp-tag-b,
.rtm-suite .rtm-cmp-pick {
    pointer-events: auto;
    max-width: 55%;
    padding: 5px 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtm-select-text, var(--rtm-stage-label, #52525b));
    background: var(--rtm-select-bg, transparent);
    border: 1px solid var(--rtm-select-border, var(--rtm-border, #e4e4e7));
    border-radius: 6px;
    cursor: pointer;
}

/* Room for the tag row, which sits outside the pair's own box. */
.rtm-suite .rtm-stage-cmp-wipe {
    padding-bottom: calc(var(--rtm-stage-p, 30px) + 34px);
}

/* A wipe through running copy cuts words in half down the middle of the
   block. Legible for a display line, not for a paragraph — which is what the
   split mode is for, and what this note in the editor points at. */
.rtm-suite .rtm-cmp-wipe .rtm-sampler-paragraph {
    hyphens: none;
}

/* rtl-mirror-gradients: generated, do not edit by hand */
/* A gradient angle has no logical form, so RTL needs it spelled out.
   Regenerate with: node tools/rtl-mirror-gradients.js <path> --fix */
[dir="rtl"] .rtm-afp-weight-range::-webkit-slider-runnable-track {
  background-image: repeating-linear-gradient(
        to left,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) 0,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4))
    );
}
[dir="rtl"] .rtm-afp-weight-range::-moz-range-track {
  background-image: repeating-linear-gradient(
        to left,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) 0,
        var(--rtm-afp-w-track, var(--rtm-accent, #18181b)) calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4) - 5px),
        transparent calc(100% / var(--rtm-afp-w-steps, 4))
    );
}
[dir="rtl"] .rtm-suite .rtm-tool-slider input[type="range"] {
  background: linear-gradient(
        to left,
        var(--rtm-slider-fill, #18181b) 0 var(--rtm-fill, 0%),
        var(--rtm-slider-track, #e4e4e7) var(--rtm-fill, 0%) 100%
    );
}