/* ═══════════════════════════════════════════════════════════════════════
   BWA Plugin Catalog
   Catalog grid + detail pane for the plugin library synced from Azure DevOps.

   Every colour, face, radius, shadow and step comes from the brand corpus
   (--bwa-*), so the module re-skins with the site instead of carrying its own
   palette. The fallbacks are the values the BWA Website corpus publishes
   today, so the sheet still renders correctly on a page that has not had
   brand-corpus-generated.css injected.

   Everything is scoped under .bwa-plugin-catalog. The bwac- (catalog) and
   bwad- (detail) element classes are only ever matched inside that root, so
   they cannot collide with another plugin's stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

.bwa-plugin-catalog {
    /* ── Corpus bindings ────────────────────────────────────────────── */
    --pc-primary: var(--bwa-color-primary, #0a101f);
    --pc-accent: var(--bwa-color-accent, #070c31);
    --pc-ink-1: var(--bwa-color-ink-1, #000000);
    --pc-ink-2: var(--bwa-color-ink-2, #525252);
    --pc-ink-3: var(--bwa-color-ink-3, #8c8c8c);
    --pc-bg-1: var(--bwa-color-bg-1, #ffffff);
    --pc-bg-2: var(--bwa-color-bg-2, #eff6ff);
    --pc-bg-3: var(--bwa-color-bg-3, #f1f1fb);
    --pc-line: var(--bwa-color-line, #e0e0e0);
    --pc-btn-text: var(--bwa-color-btn-text, #ffffff);
    --pc-danger: var(--bwa-color-danger, #dc2626);
    --pc-success: var(--bwa-color-success, #16a34a);

    --pc-font-body: var(--bwa-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
    --pc-font-heading: var(--bwa-font-heading, Inter, ui-sans-serif, system-ui, sans-serif);
    --pc-font-mono: var(--bwa-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

    --pc-radius-sm: var(--bwa-radius-sm, .25rem);
    --pc-radius: var(--bwa-radius-control, .5rem);
    --pc-radius-lg: var(--bwa-radius-lg, .75rem);
    --pc-radius-pill: var(--bwa-radius-pill, 9999px);

    --pc-shadow-hover: var(--bwa-shadow-hover, 0 .75rem 1.5rem #0003);

    --pc-space-1: var(--bwa-space-1, 4px);
    --pc-space-2: var(--bwa-space-2, 8px);
    --pc-space-3: var(--bwa-space-3, 16px);
    --pc-space-4: var(--bwa-space-4, 24px);
    --pc-space-5: var(--bwa-space-5, 32px);
    --pc-space-6: var(--bwa-space-6, 48px);

    --pc-transition: var(--bwa-transition, all .2s ease-in-out);
    --pc-focus-ring: var(--bwa-focus-ring, 0 0 0 .25rem #03021340);

    /* Fills its column so the grid lines up with every other block on the
       page; the page container already supplies the horizontal gutter. */
    width: 100%;
    margin: 0;
    padding: var(--pc-space-6) 0;
    font-family: var(--pc-font-body);
    color: var(--pc-ink-1);
    line-height: 1.6;
}

.bwa-plugin-catalog code {
    font-family: var(--pc-font-mono);
    background: var(--pc-bg-3);
    color: var(--pc-primary);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    padding: .1em .4em;
    font-size: .875em;
}

.bwa-plugin-catalog :focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
}

/* ── Intro ──────────────────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-clarification {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    padding: var(--pc-space-5);
    border-radius: var(--pc-radius-lg);
    margin: 0 0 var(--pc-space-5);
}

.bwa-plugin-catalog .bwac-clarification h3 {
    font-family: var(--pc-font-heading);
    color: var(--pc-btn-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 var(--pc-space-2);
    border-bottom: none;
}

.bwa-plugin-catalog .bwac-clarification p {
    color: var(--pc-btn-text);
    opacity: .85;
    margin: 0;
    max-width: 90ch;
}

.bwa-plugin-catalog .bwac-clarification code {
    background: #ffffff1a;
    border-color: #ffffff33;
    color: var(--pc-btn-text);
}

/* ── Controls ───────────────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-controls {
    display: flex;
    gap: var(--pc-space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--pc-space-3);
    padding: 0;
    background: none;
    border: 0;
}

.bwa-plugin-catalog .bwac-search,
.bwa-plugin-catalog .bwac-filter {
    padding: .7rem var(--pc-space-3);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    background: var(--pc-bg-1);
    font-family: inherit;
    font-size: .9375rem;
    color: var(--pc-ink-1);
    transition: var(--pc-transition);
}

.bwa-plugin-catalog .bwac-search { flex: 1; min-width: 260px; }
.bwa-plugin-catalog .bwac-filter { min-width: 190px; cursor: pointer; }

.bwa-plugin-catalog .bwac-search::placeholder { color: var(--pc-ink-3); }

.bwa-plugin-catalog .bwac-search:focus,
.bwa-plugin-catalog .bwac-filter:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: var(--pc-focus-ring);
}

.bwa-plugin-catalog .bwac-count {
    display: flex;
    align-items: center;
    font-size: .9375rem;
    color: var(--pc-ink-2);
    white-space: nowrap;
}

.bwa-plugin-catalog .bwac-count strong {
    color: var(--pc-primary);
    font-weight: 700;
    margin-right: var(--pc-space-1);
}

.bwa-plugin-catalog .bwac-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pc-space-2);
    margin: 0 0 var(--pc-space-5);
}

.bwa-plugin-catalog .bwac-tab {
    padding: .4rem .9rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-pill);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--pc-bg-1);
    color: var(--pc-ink-2);
    transition: var(--pc-transition);
    text-decoration: none;
}

.bwa-plugin-catalog .bwac-tab:hover { border-color: var(--pc-primary); color: var(--pc-primary); }

.bwa-plugin-catalog .bwac-tab.active {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    border-color: var(--pc-primary);
}

/* ── Source / sync bar ──────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-sourcebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pc-space-2) var(--pc-space-4);
    margin: 0 0 var(--pc-space-4);
    padding: var(--pc-space-3);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    background: var(--pc-bg-2);
    font-size: .8125rem;
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwac-sourcebar--warning {
    background: var(--pc-bg-1);
    border-left: 3px solid var(--pc-primary);
}

.bwa-plugin-catalog .bwac-sourcebar strong { color: var(--pc-primary); font-weight: 600; }

/* ── Grid and cards ─────────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--pc-space-4);
    margin: 0;
}

.bwa-plugin-catalog .bwac-card {
    background: var(--pc-bg-1);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
    padding: var(--pc-space-4);
    display: flex;
    flex-direction: column;
    transition: var(--pc-transition);
}

.bwa-plugin-catalog .bwac-card:hover {
    box-shadow: var(--pc-shadow-hover);
    border-color: var(--pc-primary);
    transform: translateY(-2px);
}

.bwa-plugin-catalog .bwac-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--pc-space-2);
    gap: var(--pc-space-2);
}

.bwa-plugin-catalog .bwac-card h3 {
    margin: 0;
    font-family: var(--pc-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    color: var(--pc-primary);
}

.bwa-plugin-catalog .bwac-version {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--pc-ink-2);
    background: var(--pc-bg-3);
    padding: .15rem .5rem;
    border-radius: var(--pc-radius-pill);
    white-space: nowrap;
}

/* Category badge. Neutral by design: this site's palette is monochrome navy,
   so twelve saturated hues read as foreign. The per-category hooks are still
   emitted by the script and left unstyled, so a site can colour-code them
   from its own stylesheet without touching this file. */
.bwa-plugin-catalog .bwac-cat-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: .6875rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    margin-bottom: var(--pc-space-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--pc-bg-2);
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwac-desc {
    font-size: .9375rem;
    color: var(--pc-ink-2);
    margin: 0 0 var(--pc-space-3);
    flex: 1;
    line-height: 1.55;
}

.bwa-plugin-catalog .bwac-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pc-space-1);
    margin-bottom: var(--pc-space-3);
}

.bwa-plugin-catalog .bwac-ftag {
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: var(--pc-radius-sm);
    background: var(--pc-bg-3);
    color: var(--pc-ink-2);
    border: 1px solid transparent;
}

.bwa-plugin-catalog .bwac-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pc-space-2);
    padding-top: var(--pc-space-3);
    border-top: 1px solid var(--pc-line);
}

.bwa-plugin-catalog .bwac-badges { display: flex; gap: var(--pc-space-1); flex-wrap: wrap; }

.bwa-plugin-catalog .bwac-badge {
    font-size: .625rem;
    padding: .1rem .45rem;
    border-radius: var(--pc-radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--pc-bg-3);
    color: var(--pc-ink-2);
}

/* The one badge that earns emphasis: a service is a different install shape. */
.bwa-plugin-catalog .bwac-badge-service {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
}

.bwa-plugin-catalog .bwac-card-actions {
    display: flex;
    align-items: center;
    gap: var(--pc-space-3);
    white-space: nowrap;
}

.bwa-plugin-catalog .bwac-detail-link {
    font-size: .8125rem;
    color: var(--pc-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.bwa-plugin-catalog .bwac-detail-link:hover { text-decoration-thickness: 2px; }

/* ── Download control ───────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-download {
    display: inline-flex;
    align-items: center;
    gap: var(--pc-space-1);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    padding: .4rem .85rem;
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-primary);
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    text-decoration: none;
    cursor: pointer;
    transition: var(--pc-transition);
}

.bwa-plugin-catalog .bwac-download:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-btn-text);
    text-decoration: none;
}

.bwa-plugin-catalog .bwac-download[aria-disabled="true"],
.bwa-plugin-catalog .bwac-download--unavailable {
    background: var(--pc-bg-3);
    border-color: var(--pc-line);
    color: var(--pc-ink-3);
    cursor: not-allowed;
    pointer-events: none;
    font-weight: 500;
}

.bwa-plugin-catalog .bwac-download-size {
    font-size: .6875rem;
    font-weight: 400;
    opacity: .8;
}

/* ── Category hooks ─────────────────────────────────────────────────── */
/* .bwac-cat-cms, -content, -social, -commerce, -communication, -connectors,
   -admin, -forms, -portals, -ai, -accessibility, -navigation, -default are
   still emitted on each badge. They are deliberately unstyled here — see the
   note on .bwac-cat-badge — and exist so a site can colour-code categories
   from its own stylesheet. */

/* ── Empty / loading / error ────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-noresults {
    text-align: center;
    padding: var(--pc-space-6) var(--pc-space-4);
    color: var(--pc-ink-2);
    display: none;
}

.bwa-plugin-catalog .bwac-noresults h3 {
    font-family: var(--pc-font-heading);
    color: var(--pc-primary);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: var(--pc-space-2);
}

.bwa-plugin-catalog .bwac-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pc-space-2);
    padding: var(--pc-space-6) var(--pc-space-4);
    color: var(--pc-ink-2);
    font-size: .9375rem;
}

.bwa-plugin-catalog .bwac-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--pc-line);
    border-top-color: var(--pc-primary);
    border-radius: 50%;
    animation: bwac-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .bwa-plugin-catalog .bwac-spinner { animation-duration: 3s; }
    .bwa-plugin-catalog .bwac-card:hover { transform: none; }
}

.bwa-plugin-catalog .bwac-error {
    padding: var(--pc-space-4);
    border: 1px solid var(--pc-line);
    border-left: 3px solid var(--pc-danger);
    border-radius: var(--pc-radius);
    background: var(--pc-bg-1);
    color: var(--pc-ink-1);
    margin: 0 0 var(--pc-space-4);
}

.bwa-plugin-catalog .bwac-error h3 {
    margin: 0 0 var(--pc-space-1);
    font-family: var(--pc-font-heading);
    color: var(--pc-primary);
    font-size: 1rem;
    font-weight: 700;
}

.bwa-plugin-catalog .bwac-error p { margin: 0; font-size: .875rem; color: var(--pc-ink-2); }

/* ── CTA ────────────────────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-cta {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    padding: var(--pc-space-6);
    text-align: center;
    border-radius: var(--pc-radius-lg);
    margin: var(--pc-space-6) 0 0;
}

.bwa-plugin-catalog .bwac-cta h2 {
    font-family: var(--pc-font-heading);
    color: var(--pc-btn-text);
    border: none;
    margin: 0 0 var(--pc-space-2);
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.bwa-plugin-catalog .bwac-cta p { color: var(--pc-btn-text); opacity: .85; margin: 0; }

/* ── Detail view ────────────────────────────────────────────────────── */

.bwa-plugin-catalog .bwad-breadcrumb {
    margin: 0 0 var(--pc-space-4);
    font-size: .875rem;
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwad-breadcrumb a,
.bwa-plugin-catalog .bwad-breadcrumb button.bwad-back-link {
    color: var(--pc-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: 600;
}

.bwa-plugin-catalog .bwad-breadcrumb a:hover,
.bwa-plugin-catalog .bwad-breadcrumb button.bwad-back-link:hover { text-decoration-thickness: 2px; }

.bwa-plugin-catalog .bwad-breadcrumb span { color: var(--pc-ink-3); margin: 0 var(--pc-space-1); }

.bwa-plugin-catalog .bwad-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--pc-space-4);
    margin-bottom: var(--pc-space-5);
    padding: var(--pc-space-5);
    background: var(--pc-bg-1);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
}

.bwa-plugin-catalog .bwad-header-info { flex: 1; min-width: 300px; }

.bwa-plugin-catalog .bwad-header h2 {
    margin: 0 0 var(--pc-space-2);
    font-family: var(--pc-font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--pc-primary);
    border: none;
}

.bwa-plugin-catalog .bwad-version-badge,
.bwa-plugin-catalog .bwad-type-badge {
    display: inline-block;
    font-size: .75rem;
    padding: .15rem .6rem;
    border-radius: var(--pc-radius-pill);
    margin-right: var(--pc-space-1);
}

.bwa-plugin-catalog .bwad-version-badge {
    background: var(--pc-bg-3);
    color: var(--pc-ink-2);
    font-weight: 500;
}

.bwa-plugin-catalog .bwad-type-badge {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* .bwad-type-module / -service / -tool / -dll-module are still emitted and
   left unstyled, matching the category hooks above. */

.bwa-plugin-catalog .bwad-cat-link {
    display: inline-block;
    margin-top: var(--pc-space-2);
    font-size: .875rem;
    color: var(--pc-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bwa-plugin-catalog .bwad-desc-full {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--pc-ink-2);
    margin-top: var(--pc-space-3);
    max-width: 75ch;
}

.bwa-plugin-catalog .bwad-header-actions {
    display: flex;
    flex-direction: column;
    gap: var(--pc-space-2);
    align-items: flex-end;
}

.bwa-plugin-catalog .bwad-btn {
    display: inline-block;
    padding: .7rem 1.5rem;
    border-radius: var(--pc-radius);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: var(--pc-transition);
    border: 1px solid transparent;
}

.bwa-plugin-catalog .bwad-btn-primary {
    background: var(--pc-primary);
    color: var(--pc-btn-text);
    border-color: var(--pc-primary);
}

.bwa-plugin-catalog .bwad-btn-primary:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-btn-text);
}

.bwa-plugin-catalog .bwad-btn-secondary {
    background: var(--pc-bg-1);
    color: var(--pc-primary);
    border-color: var(--pc-primary);
}

.bwa-plugin-catalog .bwad-btn-secondary:hover { background: var(--pc-bg-2); }

.bwa-plugin-catalog .bwad-btn[aria-disabled="true"] {
    background: var(--pc-bg-3);
    border-color: var(--pc-line);
    color: var(--pc-ink-3);
    cursor: not-allowed;
    pointer-events: none;
}

.bwa-plugin-catalog .bwad-btn-note { font-size: .75rem; color: var(--pc-ink-3); text-align: right; }

.bwa-plugin-catalog .bwad-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--pc-space-4);
    margin: 0;
}

.bwa-plugin-catalog .bwad-main,
.bwa-plugin-catalog .bwad-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--pc-space-4);
}

.bwa-plugin-catalog .bwad-section {
    background: var(--pc-bg-1);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
    padding: var(--pc-space-4);
}

.bwa-plugin-catalog .bwad-section h3 {
    margin: 0 0 var(--pc-space-3);
    padding-bottom: var(--pc-space-2);
    border-bottom: 1px solid var(--pc-line);
    font-family: var(--pc-font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pc-primary);
}

.bwa-plugin-catalog .bwad-feature-list { list-style: none; padding: 0; margin: 0; }

.bwa-plugin-catalog .bwad-feature-list li {
    padding: var(--pc-space-2) 0;
    border-bottom: 1px solid var(--pc-line);
    display: flex;
    align-items: center;
    gap: var(--pc-space-2);
    font-size: .9375rem;
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwad-feature-list li:last-child { border-bottom: none; }

.bwa-plugin-catalog .bwad-check { color: var(--pc-success); font-weight: 700; }

.bwa-plugin-catalog .bwad-file-tree {
    font-family: var(--pc-font-mono);
    font-size: .8125rem;
    line-height: 1.8;
    max-height: 420px;
    overflow: auto;
    background: var(--pc-bg-3);
    border-radius: var(--pc-radius);
    padding: var(--pc-space-3);
}

.bwa-plugin-catalog .bwad-file-tree .dir { color: var(--pc-primary); font-weight: 600; }
.bwa-plugin-catalog .bwad-file-tree .file { color: var(--pc-ink-2); }
.bwa-plugin-catalog .bwad-file-tree .sql { color: var(--pc-danger); }

.bwa-plugin-catalog .bwad-info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--pc-space-2);
    padding: var(--pc-space-2) 0;
    border-bottom: 1px solid var(--pc-line);
    font-size: .875rem;
}

.bwa-plugin-catalog .bwad-info-row:last-child { border-bottom: none; }
.bwa-plugin-catalog .bwad-info-label { color: var(--pc-ink-2); }

.bwa-plugin-catalog .bwad-info-value {
    font-weight: 600;
    color: var(--pc-primary);
    text-align: right;
    word-break: break-word;
}

.bwa-plugin-catalog .bwad-chips { display: flex; flex-wrap: wrap; gap: var(--pc-space-1); }

.bwa-plugin-catalog .bwad-chip {
    font-size: .75rem;
    padding: .15rem .6rem;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-bg-3);
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwad-empty { color: var(--pc-ink-3); font-size: .875rem; margin: 0; }

/* ── No-script fallback ─────────────────────────────────────────────── */

.bwa-plugin-catalog .bwac-noscript-list {
    margin: 0;
    padding-left: var(--pc-space-4);
    color: var(--pc-ink-2);
}

.bwa-plugin-catalog .bwac-noscript-list strong { color: var(--pc-primary); }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .bwa-plugin-catalog { padding: var(--pc-space-5) 0; }
    .bwa-plugin-catalog .bwac-grid { grid-template-columns: 1fr; }
    .bwa-plugin-catalog .bwac-controls { flex-direction: column; }
    .bwa-plugin-catalog .bwac-card-footer { flex-direction: column; align-items: flex-start; }
    .bwa-plugin-catalog .bwad-grid { grid-template-columns: 1fr; }
    .bwa-plugin-catalog .bwad-header { flex-direction: column; }
    .bwa-plugin-catalog .bwad-header-actions { align-items: stretch; }
    .bwa-plugin-catalog .bwad-btn-note { text-align: left; }
    .bwa-plugin-catalog .bwac-clarification,
    .bwa-plugin-catalog .bwac-cta { padding: var(--pc-space-4); }
}