/**
 * Compatible Plugin entry styles.
 *
 * Values taken from the supplied design (Compatible Plugin Page.dc.html) and its
 * exported design system, not approximated. The design expresses itself as
 * inline styles over CSS variables; this reproduces those against the classes
 * the Elementor template puts on each element.
 *
 * The split is the one the design's own build map proposed: Elementor owns
 * structure and content, this owns the visual system, because Elementor's
 * controls cannot express most of it.
 *
 * @since 1.0.0
 */

/*
 * Scoped to the page, not to a class list. Scoping tokens to the section
 * classes meant any section whose class was missing had undefined vars, which
 * makes every declaration using them invalid and silently dropped.
 */
body.single-compatible_plugin,
body.page {
    --wcv-primary-blue: #005580;
    --wcv-desat-blue: #e9f6ff;
    --wcv-brand-gradient: linear-gradient(90deg, #f0faff 0%, #d8f2ff 100%);
    --wcv-navy: #182c71;
    --wcv-navy-deep: #0f1031;
    --wcv-indigo: #242ac2;
    --wcv-link: #065ae8;
    --wcv-action: #0f62fe;
    --wcv-body-ink: #222222;
    --wcv-muted: #6e7191;
    --wcv-white: #ffffff;
    --wcv-surface-muted: #f7f7fc;
    --wcv-border-light: #eff0f6;
    --wcv-border: #dcddeb;
    --wcv-success: #15803d;
    --wcv-success-bg: #dcfce7;
    --wcv-font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --wcv-font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --wcv-font-rounded: 'Varela Round', 'Quicksand', 'Lato', sans-serif;
    --wcv-card-shadow: 0 2px 12px rgba(20, 20, 43, 0.08);
}

/* ================================================================ hero ==== */
.wcv-cp-hero {
    background: var(--wcv-brand-gradient) !important;
    border-bottom: 1px solid #dbeefb;
    padding: 26px 0 56px !important;
}
.wcv-cp-hero .elementor-widget-shortcode,
.wcv-cp-hero .elementor-widget-shortcode a {
    font-family: var(--wcv-font-primary);
    font-size: 14px;
    line-height: 20px;
    color: var(--wcv-muted);
}
.wcv-cp-hero .elementor-widget-shortcode { margin-bottom: 28px; }
/*
 * Elementor stretches sibling columns to equal height, and the panel's card is
 * the column itself, so an entry with two rows showed a tall white card with
 * nothing under the button. Size both columns to their content instead.
 */
.wcv-cp-hero > .elementor-container { align-items: flex-start; }

.wcv-cp-eyebrow .elementor-heading-title {
    font-family: var(--wcv-font-secondary);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--wcv-muted) !important;
    margin-bottom: 18px;
}
/*
 * Categories render as links; the design shows them as pill chips. White with
 * a tinted hairline, not the light-blue fill the panel's chips use: the hero
 * is itself a light-blue gradient, and a tinted pill on it was a smudge two
 * shades off its surroundings (Karla, 1 Oct 2026). White matches the panel
 * card and developer card that share the gradient.
 */
.wcv-cp-eyebrow .elementor-heading-title a {
    display: inline-block;
    font-family: var(--wcv-font-secondary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wcv-navy) !important;
    background: var(--wcv-white);
    border: 1px solid #c9e2f3;
    border-radius: 20px;
    padding: 4px 11px;
    margin: 0 6px 6px 0;
    text-decoration: none;
    transition: border-color 0.15s ease-in-out;
}
.wcv-cp-eyebrow .elementor-heading-title a:hover { border-color: var(--wcv-navy); text-decoration: none; }
/*
 * Rymera brand chip. The entry page's eyebrow and this chip are both heading
 * widgets; width:auto lets them sit on one line in the column's flex wrap
 * instead of stacking. On a card the chip sits above the logo.
 */
/* Elementor sizes every widget in a column to 100%; these two share a line. */
.wcv-cp-hero .elementor-widget-wrap > .wcv-cp-eyebrow,
.wcv-cp-hero .elementor-widget-wrap > .wcv-cp-brand-chip { width: auto !important; }
.wcv-cp-hero .elementor-widget-wrap > .wcv-cp-brand-chip { margin: 0 0 0 8px !important; }
.wcv-cp-brand-chip .elementor-heading-title { margin: 0 0 18px; line-height: 18px; }
.wcv-cp-brand {
    display: inline-block;
    font-family: var(--wcv-font-secondary);
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--wcv-navy);
    color: var(--wcv-white);
    white-space: nowrap;
}

.wcv-cp-title .elementor-heading-title {
    font-family: var(--wcv-font-rounded);
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--wcv-navy-deep) !important;
    margin: 0 0 18px;
}
.wcv-cp-summary,
.wcv-cp-summary * {
    font-family: var(--wcv-font-primary);
    font-size: 18px;
    line-height: 30px;
    color: var(--wcv-body-ink);
}
.wcv-cp-summary { max-width: 62ch; margin-bottom: 28px; }

/* Developer attribution: one heading from the Entry field tag (monogram, linked name, supporting line). */
.wcv-cp-dev { margin-bottom: 0 !important; }
.wcv-cp-dev .elementor-heading-title {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 12px 18px 12px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #d5eaf7;
    border-radius: 10px;
    font-family: var(--wcv-font-rounded);
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wcv-navy-deep) !important;
}
.wcv-cp-dev .wcv-cp-field-avatar {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--wcv-desat-blue);
    color: var(--wcv-primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.wcv-cp-dev .wcv-cp-field-value { grid-column: 2; }
.wcv-cp-dev .elementor-heading-title a,
.wcv-cp-dev .elementor-heading-title a:visited { color: inherit; text-decoration: none; }
.wcv-cp-dev .elementor-heading-title a:hover { color: var(--wcv-link); }
.wcv-cp-dev .wcv-cp-field-sub {
    grid-column: 2;
    display: block;
    font-family: var(--wcv-font-primary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--wcv-muted);
}

/* ================================================= "Get this plugin" panel ==== */
.wcv-cp-glance {
    background: var(--wcv-white);
    border: 1px solid var(--wcv-border-light);
    border-radius: 16px;
    padding: 22px 26px !important;
    box-shadow: var(--wcv-card-shadow);
}
.wcv-cp-glance .elementor-widget { margin-bottom: 0 !important; }
.wcv-cp-glance-title .elementor-heading-title {
    font-family: var(--wcv-font-rounded);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--wcv-navy-deep) !important;
    margin-bottom: 6px;
}

/* Rows: label left, value right, a hairline between rows. */
.wcv-cp-row .elementor-heading-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--wcv-border-light);
    font-family: var(--wcv-font-primary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--wcv-body-ink);
}
.wcv-cp-row .wcv-cp-field-label {
    flex: 0 0 auto;
    font-family: var(--wcv-font-secondary);
    font-size: 11px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wcv-muted);
}
.wcv-cp-row .wcv-cp-field-value {
    flex: 1 1 auto;
    text-align: right;
    word-break: break-word;
}
.wcv-cp-row .wcv-cp-field-value--terms {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.wcv-cp-row a.wcv-cp-field-link,
.wcv-cp-row a.wcv-cp-field-link:visited { color: var(--wcv-link); text-decoration: none; }
.wcv-cp-row a.wcv-cp-field-link:hover { text-decoration: underline; }

/*
 * Every panel row is the height of a pill row (12px padding, 26px pill, 12px
 * padding, hairline), so a text-only row such as Sold by keeps the same rhythm
 * and the hairlines fall at even intervals.
 */
.wcv-cp-glance .wcv-cp-row .elementor-heading-title { min-height: 51px; box-sizing: border-box; }

/*
 * Pills. One look for every taxonomy row in the panel and the side card: the
 * site's light-blue chip. Works with was green and the former Tested with row
 * grey, which read as two unrelated things stacked and looked misaligned even
 * though they were not. Tags keep the design's white outlined chip, since
 * they are a different kind of thing, and so does the category pill in the
 * hero, where the gradient behind it is light blue already.
 */
.wcv-cp-pill,
.wcv-cp-pill:visited {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--wcv-font-secondary);
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    text-decoration: none;
    background: var(--wcv-desat-blue);
    color: var(--wcv-navy);
    border: 1px solid transparent;
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.wcv-cp-pill:hover { background: #d8f2ff; color: var(--wcv-navy); }
.wcv-cp-pill--compatible_plugin_tag { background: var(--wcv-white); color: var(--wcv-body-ink); border-color: var(--wcv-border); font-weight: 500; }
.wcv-cp-pill--compatible_plugin_tag:hover { border-color: var(--wcv-navy); color: var(--wcv-navy); }

.wcv-cp-glance .wcv-cp-cta { margin-top: 18px !important; }
.wcv-cp-glance .wcv-cp-cta .elementor-button {
    width: 100%;
    justify-content: center;
    background: var(--wcv-navy) !important;
    color: var(--wcv-white) !important;
    font-family: var(--wcv-font-secondary);
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    padding: 14px 24px;
    transition: background 0.2s ease-in-out;
}
.wcv-cp-glance .wcv-cp-cta .elementor-button:hover { background: var(--wcv-indigo) !important; }

.wcv-cp-disclosure .elementor-heading-title {
    padding-top: 14px;
    font-family: var(--wcv-font-primary);
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    color: var(--wcv-muted);
}

/* ================================================================ body ==== */
.wcv-cp-h2 .elementor-heading-title {
    font-family: var(--wcv-font-rounded);
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--wcv-navy-deep) !important;
    margin: 0 0 14px;
}
.wcv-cp-h2--support { margin-top: 24px !important; }

.wcv-cp-content,
.wcv-cp-content p,
.wcv-cp-content li {
    font-family: var(--wcv-font-primary);
    font-size: 17px;
    line-height: 28px;
    color: var(--wcv-body-ink);
}
.wcv-cp-content ul,
.wcv-cp-content ol { padding-left: 22px; margin: 0 0 18px; }
.wcv-cp-content li { margin-bottom: 4px; }
/* Migrated bodies carry their own h1-h3; size them under the template's own headings. */
.wcv-cp-content h1,
.wcv-cp-content h2 {
    font-family: var(--wcv-font-rounded);
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--wcv-navy-deep);
    margin: 28px 0 10px;
}
.wcv-cp-content h3,
.wcv-cp-content h4 {
    font-family: var(--wcv-font-rounded);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--wcv-navy-deep);
    margin: 22px 0 8px;
}
.wcv-cp-content img { max-width: 100%; height: auto; border-radius: 8px; }
/*
 * Embedded videos (two entries end with a YouTube link). WordPress embeds them
 * at a fixed 640x480, which letterboxes a 16:9 video and on a phone becomes a
 * tall black box. Fill the column at the video's own ratio instead.
 */
.wcv-cp-content iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
    margin: 0 0 18px;
}

/* ------------------------------------------------------------ gallery ---- */
/*
 * Frame: the large image and its caption bar read as one panel. Elementor's
 * own image rules carry enough specificity to win over a bare .wcv-cp-shot
 * img, so this matches through the widget container the way Elementor's do.
 */
.wcv-cp-shot { margin-bottom: 0 !important; }
.wcv-cp-shot .elementor-widget-container {
    padding: 14px;
    background: var(--wcv-surface-muted);
    border: 1px solid var(--wcv-border-light);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    text-align: center;
}
.wcv-cp-shot .elementor-widget-container img {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    background: var(--wcv-white);
    border: 1px solid var(--wcv-border-light) !important;
    border-radius: 8px !important;
    box-shadow: none;
}
.wcv-cp-shot-caption { margin-bottom: 12px !important; }
.wcv-cp-shot-caption .elementor-heading-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--wcv-white);
    border: 1px solid var(--wcv-border-light);
    border-radius: 0 0 12px 12px;
    font-family: var(--wcv-font-primary);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--wcv-muted);
}
.wcv-cp-shot-caption .elementor-heading-title a,
.wcv-cp-shot-caption .elementor-heading-title a:visited {
    font-family: var(--wcv-font-secondary);
    font-weight: 700;
    color: var(--wcv-link);
    text-decoration: none;
    white-space: nowrap;
}
.wcv-cp-shot-caption .elementor-heading-title a:hover { text-decoration: underline; }
/* The template's href is "#" until entry.js points it at the image, so it shows only once the script has run. */
.wcv-cp-shot-full { display: none; }
.wcv-cp-js .wcv-cp-shot-full { display: inline; }

/*
 * Tiles. The strip is Elementor's Image Carousel, so each tile sits in a
 * Swiper slot one eighth of the row wide; the image itself is a fixed square.
 * Clicking a tile swaps the large image (assets/js/entry.js).
 */
.wcv-cp-thumbs { margin-bottom: 28px !important; }
.wcv-cp-thumbs .swiper-slide { text-align: left; }
.wcv-cp-thumbs .swiper-slide a { display: inline-block; border-radius: 10px; }
.wcv-cp-thumbs .swiper-slide img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px !important;
    border: 2px solid var(--wcv-border-light) !important;
    background: var(--wcv-white);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.wcv-cp-thumbs .swiper-slide:hover img,
.wcv-cp-thumbs .swiper-slide a:focus-visible img,
.wcv-cp-thumbs .wcv-cp-thumb--active img {
    opacity: 1;
    border-color: var(--wcv-primary-blue) !important;
}
.wcv-cp-thumbs .swiper-slide a:focus-visible { outline: 2px solid var(--wcv-link); outline-offset: 2px; }

/* ---------------------------------------------- support / compatibility ---- */
/*
 * Two cards side by side, as the design has them: icon and title on one line,
 * description running the full card width underneath. Elementor's icon box
 * puts the icon in a column beside both title and description, which in a
 * 58% content column left the text wrapping at five lines beside a lone icon.
 * The wrapper becomes a two-column grid and the content div stops being a
 * box (display: contents) so title and description can sit in different rows.
 */
.wcv-cp-support { background: transparent !important; }
.wcv-cp-support .elementor-widget-icon-box {
    background: var(--wcv-surface-muted);
    border: 1px solid var(--wcv-border-light);
    border-radius: 10px;
    padding: 22px 24px;
    height: 100%;
    text-align: left;
}
.wcv-cp-support .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
    text-align: left;
}
.wcv-cp-support .elementor-icon-box-content { display: contents; }
.wcv-cp-support .elementor-icon-box-icon {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    line-height: 0;
}
.wcv-cp-support .elementor-icon {
    font-size: 18px;
    color: var(--wcv-navy-deep);
    padding: 0;
}
.wcv-cp-support .elementor-icon-box-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--wcv-font-rounded);
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wcv-navy-deep);
    margin: 0;
}
.wcv-cp-support .elementor-icon-box-description {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: var(--wcv-font-primary);
    font-size: 15px;
    line-height: 24px;
    color: var(--wcv-body-ink);
    margin: 0;
}
@media (max-width: 767px) {
    /* Elementor stacks the two columns here; the cards need a gap between them, not beside them. */
    .wcv-cp-support .elementor-column:first-child > .elementor-widget-wrap,
    .wcv-cp-support .elementor-column:last-child > .elementor-widget-wrap { padding-left: 0; padding-right: 0; }
    .wcv-cp-support .elementor-column + .elementor-column { margin-top: 16px; }
    /* Elementor centres icon boxes at phone width; the cards stay left-aligned. */
    .wcv-cp-support .elementor-widget-icon-box .elementor-icon-box-wrapper,
    .wcv-cp-support .elementor-icon-box-title,
    .wcv-cp-support .elementor-icon-box-description { text-align: left !important; }
    .wcv-cp-support .elementor-widget-icon-box .elementor-icon-box-wrapper { align-items: center !important; }
}

/* -------------------------------------------------------- right column ---- */
.wcv-cp-side .elementor-widget { margin-bottom: 16px !important; }
.wcv-cp-side-wrap { margin-bottom: 16px; }

.wcv-cp-side-card {
    background: var(--wcv-white);
    border: 1px solid var(--wcv-border-light);
    border-radius: 12px;
    padding: 20px 22px !important;
    box-shadow: var(--wcv-card-shadow);
}
/* Neither taxonomy rendered: no headings inside, so no card. */
.wcv-cp-side-wrap:not(:has(.elementor-heading-title)) { display: none; }
/* Inside the card the rows stack: title above, pills below, left-aligned. */
.wcv-cp-side-card .wcv-cp-row .elementor-heading-title {
    display: block;
    padding: 0;
    border: 0;
}
.wcv-cp-side-card .wcv-cp-row .wcv-cp-field-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--wcv-font-rounded);
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wcv-navy-deep);
}
.wcv-cp-side-card .wcv-cp-row .wcv-cp-field-value--terms { justify-content: flex-start; }
.wcv-cp-side-card .elementor-widget:not(:last-child) { margin-bottom: 18px !important; }

/* Needs Pro: one heading whose title is the Conditional text tag. Tinted, as the design has it. */
.wcv-cp-needspro .elementor-heading-title {
    display: block;
    padding: 20px 22px;
    background: var(--wcv-desat-blue);
    border: 1px solid #cfe6f5;
    border-radius: 12px;
}
.wcv-cp-needspro__title {
    display: block;
    font-family: var(--wcv-font-rounded);
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--wcv-navy-deep);
}
.wcv-cp-needspro__desc {
    display: block;
    margin: 6px 0 14px;
    font-family: var(--wcv-font-primary);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--wcv-body-ink);
}
/*
 * "See Pricing": a small outlined button, sized like the panel's secondary
 * links. Josh found "Buy Pro" too big (2 Oct 2026): Elementor's heading
 * widget gives a link inside the title font-size: inherit, from a selector
 * with an attribute test that outranks any plain class chain, so the button
 * took the heading's 18px. The !important on the size is what wins; the
 * longer selector keeps it scoped to this card, and the hover rule below
 * has to match its weight or it loses to the colour declared here.
 */
.wcv-cp-needspro .elementor-heading-title .wcv-cp-needspro__button,
.wcv-cp-needspro .elementor-heading-title .wcv-cp-needspro__button:visited {
    display: inline-block;
    font-family: var(--wcv-font-secondary);
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700;
    color: var(--wcv-navy) !important;
    background: transparent;
    border: 1.5px solid var(--wcv-navy);
    padding: 5px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
.wcv-cp-needspro .elementor-heading-title .wcv-cp-needspro__button:hover { background: var(--wcv-navy); color: var(--wcv-white) !important; }

/* Report a problem. */
.wcv-cp-problem .elementor-heading-title {
    padding: 18px 22px;
    background: var(--wcv-white);
    border: 1px solid var(--wcv-border-light);
    border-radius: 12px;
    font-family: var(--wcv-font-primary);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--wcv-body-ink);
}
.wcv-cp-problem .elementor-heading-title a,
.wcv-cp-problem .elementor-heading-title a:visited {
    display: block;
    margin-top: 6px;
    font-family: var(--wcv-font-secondary);
    font-weight: 700;
    color: var(--wcv-link);
    text-decoration: none;
}
.wcv-cp-problem .elementor-heading-title a:hover { text-decoration: underline; }

/* ============================================================= related ==== */
.wcv-cp-related-head .elementor-column { display: flex; align-items: flex-end; }
.wcv-cp-related-head .wcv-cp-h2 .elementor-heading-title { margin-bottom: 0; }
.wcv-cp-related-all .elementor-heading-title { text-align: right; }
.wcv-cp-related-all .elementor-heading-title a,
.wcv-cp-related-all .elementor-heading-title a:visited {
    font-family: var(--wcv-font-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--wcv-link);
    text-decoration: none;
}
.wcv-cp-related-all .elementor-heading-title a:hover { text-decoration: underline; }
.wcv-cp-related-head { margin-bottom: 8px; }
/* A category with no siblings renders an empty grid; hide the whole section. */
.wcv-cp-related:has(.e-loop-nothing-found-message) { display: none; }

/*
 * Card: shared by the directory index and the related grid. A light card with
 * the logo in a tinted tile, the name, the developer and a text-link CTA.
 *
 * The loop item is a section > column > widgets, and Elementor lays those
 * widgets out as a wrapping flex row inside a centred, boxed container. Two
 * things made a row of cards look ragged: the container took its own width
 * and sat centred in the card, and each widget stacked only as tall as its
 * content, so titles and buttons landed at different heights from card to
 * card. The container is made full width here and the widget wrap becomes a
 * single-column grid with fixed rows: tile, a title row two lines tall, the
 * developer line, a stretching spacer, and the button on the bottom line.
 * Rymera brands lead the grid (Directory_Query) but their cards look like
 * every other card; the "Rymera brand" chip sits on the single entry only.
 */
.wcv-cp-card {
    border: 1px solid var(--wcv-border-light) !important;
    border-radius: 12px !important;
    background: var(--wcv-white) !important;
    box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
    padding: 20px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.wcv-cp-card:hover { box-shadow: var(--wcv-card-shadow); transform: translateY(-2px); border-color: var(--wcv-border) !important; }
.wcv-cp-card > .elementor-container { flex: 1 1 auto; width: 100%; max-width: none; margin: 0; }
.wcv-cp-card .elementor-column { display: flex; width: 100%; }
.wcv-cp-card .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(44px, auto) auto 1fr auto;
    row-gap: 0;
    align-items: start;
    align-content: start;
    height: 100%;
    padding: 0;
}
.wcv-cp-card .elementor-widget-wrap > .elementor-element { margin: 0 !important; width: 100%; }
/*
 * The "logo" is the source product's featured image. Of the 29 plugin images
 * only six are near square; the rest are banners between 3:2 and 3:1, so a
 * small square tile showed a sliver of each. The tile now runs the card's
 * width at 2:1, the same shape as a theme card's screenshot, and the image is
 * contained inside it with a margin of tint on every side: a 3:1 banner fills
 * the width, a square mark fills the height. Scoped to the image widget so it
 * outranks Elementor's own .elementor img rules.
 */
.wcv-cp-card .elementor-widget-theme-post-featured-image { grid-row: 1; padding-bottom: 16px; }
.wcv-cp-card .elementor-widget-theme-post-featured-image .elementor-widget-container { text-align: left; line-height: 0; }
.wcv-cp-card .elementor-widget-theme-post-featured-image img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    background: var(--wcv-desat-blue);
    border-radius: 10px;
    padding: 18px 22px;
}
/*
 * Title. Elementor Pro's post-title widget is a heading that also carries
 * .elementor-page-title, which the theme sizes as a page title; on the
 * directory index that made every card title huge. Say the size outright.
 * The row is two lines tall whatever the title, so the developer line below
 * starts at the same height on every card in a row; a three-line title takes
 * its third line and only its own card grows.
 */
.wcv-cp-card .elementor-widget-theme-post-title { grid-row: 2; }
.wcv-cp-card .elementor-widget-theme-post-title .elementor-heading-title,
.wcv-cp-card .elementor-page-title .elementor-heading-title,
.wcv-cp-card .elementor-widget-theme-post-title.elementor-page-title .elementor-heading-title {
    font-family: var(--wcv-font-rounded) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    color: var(--wcv-navy-deep) !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wcv-cp-card .elementor-widget-theme-post-title .elementor-heading-title a,
.wcv-cp-card .elementor-widget-theme-post-title .elementor-heading-title a:visited { color: inherit !important; text-decoration: none; }
.wcv-cp-card .elementor-widget-theme-post-title .elementor-heading-title a:hover { color: var(--wcv-link) !important; }
/* Developer line. The post-title widget also carries .elementor-widget-heading, so it is excluded here. */
.wcv-cp-card .elementor-widget-heading:not(.elementor-widget-theme-post-title) { grid-row: 3; padding-top: 4px; min-height: 22px; }
.wcv-cp-card .elementor-widget-heading:not(.elementor-widget-theme-post-title) .elementor-heading-title {
    font-family: var(--wcv-font-primary);
    font-size: 13px;
    line-height: 18px;
    color: var(--wcv-muted) !important;
    margin: 0;
}
.wcv-cp-card .elementor-widget-button { grid-row: 5; padding-top: 16px; }
.wcv-cp-card .elementor-widget-button .elementor-widget-container { text-align: left; }
.wcv-cp-card .elementor-button,
.wcv-cp-card .elementor-button:visited {
    background: transparent !important;
    color: var(--wcv-link) !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    font-family: var(--wcv-font-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-align: left;
}
.wcv-cp-card .elementor-button:hover { text-decoration: underline; }
.wcv-cp-card .elementor-button-text::after {
    content: " \2197";
    /* Decorative: the empty alternative keeps screen readers from announcing "north east arrow". Browsers without it keep the line above. */
    content: " \2197" / "";
}

/*
 * Theme card. A theme's featured image is its screenshot (1033x525 on every
 * migrated theme), not a mark, so it fills the same 2:1 tile edge to edge,
 * cropped from the top, with a hairline border in place of the tint.
 * Entry_Type puts wcv-cp-type-theme on the loop item wrapping .wcv-cp-card.
 */
.wcv-cp-type-theme .wcv-cp-card .elementor-widget-theme-post-featured-image img {
    object-fit: cover;
    object-position: top center;
    padding: 0;
    background: var(--wcv-surface-muted);
    border: 1px solid var(--wcv-border-light);
    border-radius: 8px;
}

/* ============================================================== submit ==== */
.wcv-cp-submit { background: var(--wcv-primary-blue) !important; }
.wcv-cp-submit > .elementor-container { align-items: center; }
.wcv-cp-submit .elementor-column { display: flex; align-items: center; }
.wcv-cp-submit .wcv-cp-h2 .elementor-heading-title,
.wcv-cp-submit .elementor-heading-title {
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 4px;
    color: var(--wcv-white) !important;
}
.wcv-cp-submit .elementor-widget-text-editor,
.wcv-cp-submit .elementor-widget-text-editor p {
    font-family: var(--wcv-font-primary);
    font-size: 15px;
    line-height: 22px;
    color: var(--wcv-white);
    margin: 0;
}
.wcv-cp-submit .elementor-widget { margin-bottom: 0 !important; }
.wcv-cp-submit-cta .elementor-widget-container { text-align: right; width: 100%; }
.wcv-cp-submit .elementor-button,
.wcv-cp-submit .elementor-button:visited {
    background: var(--wcv-navy) !important;
    color: var(--wcv-white) !important;
    font-family: var(--wcv-font-secondary);
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    padding: 14px 24px;
    transition: background 0.2s ease-in-out;
}
.wcv-cp-submit .elementor-button:hover { background: var(--wcv-indigo) !important; }

/* ===================================================== directory index ==== */
/*
 * Loop items are grid children; without stretch each card is only as tall as
 * its own content and a row of three ends up ragged.
 */
.wcv-cp-index-grid .elementor-grid { align-items: stretch; }
.wcv-cp-index-grid .elementor-grid-item,
.wcv-cp-index-grid .e-loop-item { display: flex; }
.wcv-cp-index-grid .e-loop-item > .elementor-section { width: 100%; }

/* ===================================================== directory filter ==== */
/*
 * The index page's jump-link row, as filter chips (see
 * assets/js/directory-filter.js and tools/build-index-page.php). Elementor's
 * Icon List draws inline items with dividers; the chips replace that.
 */
.wcv-cp-filter .elementor-icon-list-items {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.wcv-cp-filter .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.wcv-cp-filter .elementor-icon-list-item::after { display: none !important; }
.wcv-cp-filter .elementor-icon-list-item a,
.wcv-cp-filter .elementor-icon-list-item a:visited {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--wcv-desat-blue);
    color: var(--wcv-navy) !important;
    font-family: var(--wcv-font-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
.wcv-cp-filter .elementor-icon-list-item a:hover { background: #d8f2ff; }
.wcv-cp-filter .elementor-icon-list-item a.is-active,
.wcv-cp-filter .elementor-icon-list-item a.is-active:hover { background: var(--wcv-navy); color: var(--wcv-white) !important; }
.wcv-cp-filter .elementor-icon-list-item a:focus-visible { outline: 2px solid var(--wcv-link); outline-offset: 2px; }
.wcv-cp-filter .elementor-icon-list-text { color: inherit !important; }
.wcv-cp-filter.elementor-widget { margin-bottom: 28px !important; }
.wcv-cp-directory .e-loop-item.is-hidden { display: none !important; }

/* ========================================================== responsive ==== */
@media (max-width: 1024px) {
    .wcv-cp-title .elementor-heading-title { font-size: 32px; line-height: 40px; }
    .wcv-cp-h2 .elementor-heading-title { font-size: 24px; line-height: 32px; }
    .wcv-cp-row .elementor-heading-title { flex-wrap: wrap; }
    .wcv-cp-row .wcv-cp-field-value { text-align: left; }
    .wcv-cp-row .wcv-cp-field-value--terms { justify-content: flex-start; }
    .wcv-cp-submit-cta .elementor-widget-container { text-align: left; }
}