/* =====================================================
   FILTER BUTTON — componente compartido (Recursos, Proyectos, Marketplace)
   Botón blanco con borde, naranja al pasar el ratón o activo; variante
   --dim: borde y texto del color de cada dimensión BIM (--dim-color, inline)
   con tooltip (data-tooltip) con su nombre.
   ===================================================== */

.pwb-filter-btn {
    position: relative; /* ancla el tooltip de las dimensiones */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: var(--wp--preset--spacing--px-8) var(--wp--preset--spacing--px-16);
    border-radius: var(--wp--custom--radius--sm);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pwb-filter-btn:hover,
.pwb-filter-btn.is-active {
    background: var(--wp--preset--color--custom-pwb-primary-color, var(--wp--preset--color--custom-pwb-primary-color));
    border-color: var(--wp--preset--color--custom-pwb-primary-color, var(--wp--preset--color--custom-pwb-primary-color));
    color: var(--wp--preset--color--custom-pwb-main-background);
}

/* Sin vídeos para la selección actual: deshabilitado, no un callejón sin
   salida clicable. */
.pwb-filter-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pwb-filter-btn:disabled:hover {
    background: none;
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

/* Dimensiones: borde y texto del color de cada una (--dim-color, inline)
   también en reposo. */
.pwb-filter-btn--dim {
    border-color: var(--dim-color, var(--wp--custom--color--white));
    color: var(--dim-color, var(--wp--custom--color--white));
}

/* Cuadrados, con padding de 0.5rem: 2.125rem es el alto que ya tenían (con el borde de
   1.5px), así que la barra de filtros no cambia de altura. El código (1D–6D) va centrado. */
.pwb-filter-btn--dim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0.5rem;
    line-height: 1;
}

.pwb-filter-btn--dim:hover,
.pwb-filter-btn--dim.is-active {
    background: var(--dim-color, var(--wp--custom--color--white));
    border-color: var(--dim-color, var(--wp--custom--color--white));
    color: var(--wp--preset--color--custom-pwb-main-background);
}

.pwb-filter-btn--dim:disabled:hover {
    background: none;
    border-color: var(--dim-color, var(--wp--custom--color--white));
    color: var(--dim-color, var(--wp--custom--color--white));
}

/* Tooltip con el nombre de la dimensión — solo CSS, igual que en Proyectos. */
.pwb-filter-btn--dim[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--custom-pwb-main-background);
    color: var(--wp--custom--color--white);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    padding: var(--wp--preset--spacing--px-6) var(--wp--preset--spacing--px-10);
    border-radius: var(--wp--custom--radius--sm-plus);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.pwb-filter-btn--dim[data-tooltip]:hover::after,
.pwb-filter-btn--dim[data-tooltip]:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pwb-filter-btn--dim[data-tooltip]::after {
        transition: none;
    }
}

.pwb-proyecto-tag {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--wp--custom--color--white);
    padding: var(--wp--preset--spacing--px-6) var(--wp--preset--spacing--px-10);
    border-radius: var(--wp--custom--radius--sm-plus);
}

.pwb-proyecto-tag--fase {
    background: var(--wp--preset--color--custom-pwb-secondary-background);
}

.pwb-proyecto-tag--sector {
    background: var(--pwb-sector-residencial);
}

.pwb-proyecto-tag[data-sector="infraestructura"] { background: var(--pwb-sector-infraestructura); }
.pwb-proyecto-tag[data-sector="dotacional"] { background: var(--pwb-sector-dotacional); }
.pwb-proyecto-tag[data-sector="industrial"] { background: var(--pwb-sector-industrial); }
.pwb-proyecto-tag[data-sector="smart-cities"] { background: var(--pwb-sector-smart-cities); }
.pwb-proyecto-tag[data-sector="residencial"] { background: var(--pwb-sector-residencial); }
.pwb-proyecto-tag[data-sector="terciario"] { background: var(--pwb-sector-terciario); }

/* Etiqueta de dimensión (1D–6D) — componente compartido por las tarjetas de
   Proyectos y la ficha del proyecto (pwb_dim_tag() en functions.php): cuadrada
   (22×22px), solo contorno, con el color de la dimensión
   (pwb_dimension_colors(), el mismo código en toda la web) en el borde y en
   el texto. Cualquier cambio aquí se aplica a los dos sitios. */
.pwb-dim-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dim-color, var(--wp--custom--color--white));
    background: transparent;
    border: 1px solid var(--dim-color, var(--wp--custom--color--white));
    border-radius: var(--wp--custom--radius--sm);
}

/* Barra de filtro compartida (Recursos, Proyectos), todo en una línea
   (envuelve en pantallas estrechas): desplegables de selección múltiple +
   dimensiones. El botón y las dimensiones son .pwb-filter-btn (ver arriba). */
.pwb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* 8px, el mismo espacio que hay dentro de cada grupo (Fase–Sector y entre
       dimensiones): antes eran 24px entre Sector y las dimensiones. */
    gap: var(--wp--preset--spacing--px-8);
}

.pwb-filter-bar__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--px-8);
}

/* Desplegables de Fase y Sector: el disparador es el mismo botón; con alguna
   opción elegida toma el estado activo (naranja). El menú usa el fondo y el
   borde del tooltip. */
.pwb-filter-dd {
    position: relative;
}

.pwb-filter-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-8);
}

.pwb-filter-dd__btn svg {
    transition: transform 0.15s ease;
}

.pwb-filter-dd.is-open .pwb-filter-dd__btn svg {
    transform: rotate(180deg);
}

.pwb-filter-dd__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-2);
    padding: var(--wp--preset--spacing--px-6);
    background: var(--wp--preset--color--custom-pwb-main-background);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--wp--custom--radius--lg);
    box-shadow: var(--wp--preset--shadow--pwb-dropdown);
}

/* display:flex de arriba ganaría al atributo hidden nativo. */
.pwb-filter-dd__menu[hidden] {
    display: none;
}

.pwb-filter-dd__opt {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-10);
    padding: var(--wp--preset--spacing--px-8) var(--wp--preset--spacing--px-12);
    border: none;
    border-radius: var(--wp--custom--radius--sm);
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.pwb-filter-dd__opt:hover {
    background: rgba(255, 255, 255, 0.06);
}

.pwb-filter-dd__check {
    margin-left: auto;
    color: var(--wp--preset--color--custom-pwb-primary-color, var(--wp--preset--color--custom-pwb-primary-color));
    opacity: 0;
}

.pwb-filter-dd__opt.is-active .pwb-filter-dd__check {
    opacity: 1;
}

.pwb-filter-dd__opt:disabled {
    opacity: 0.35;
    cursor: default;
}

.pwb-filter-dd__opt:disabled:hover {
    background: none;
}

/* =====================================================
   PWB MARKETPLACE — escaparate público
   Correcciones de POWERBIM_Marketplace_Propuesta_Diseno.pptx sobre el
   mockup interno del producto (docs/marketplace). El naranja de marca
   queda reservado como único color de interacción (pill activo, CTA); el
   color por dimensión BIM es una capa de identidad aparte, aplicada en
   tres sitios: pill de navegación, cabecera de sección y chip de tarjeta.
   ===================================================== */

.pwb-marketplace {
    --pwb-mkt-card-bg: #1e2229;
    --pwb-mkt-card-bg-hover: #262b33;
    --pwb-mkt-card-border: #343b45;
    --pwb-mkt-card-border-hover: #454c57;
    --pwb-mkt-icon-bg: #16191d;
    --pwb-mkt-text-dim: rgba(255, 255, 255, 0.62);
}

/* Barra de navegación: "Destacadas" + las 6 dimensiones (componente
   .pwb-filter-btn), centrada, pegajosa al hacer scroll. 8px entre botones y
   24px entre "Destacadas" y las dimensiones, igual que entre grupos en
   Recursos. */
.pwb-marketplace__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--px-8);
    margin: var(--wp--preset--spacing--px-24) 0 var(--wp--preset--spacing--px-40);
    position: sticky;
    top: 0;
    padding: var(--wp--preset--spacing--px-14) 0;
    background: var(--wp--preset--color--custom-pwb-main-background);
    z-index: 5;
}

.pwb-marketplace__pills > [data-jump="featured"] {
    margin-right: var(--wp--preset--spacing--px-16);
}

/* El grupo .pwb-marketplace no lleva layout constrained, así que las secciones
   se contienen aquí: ancho de contenido del tema y centradas. El padding
   lateral (en el grupo, porque "Destacadas" ya es un grupo con su padding
   anulado por la regla global de .alignfull) solo hace falta cuando el grupo
   sale a sangre completa (≥782px, ver "alignfull breakout fix"); por debajo ya
   queda dentro del padding de la página. */
.pwb-marketplace-section {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    margin-bottom: var(--wp--preset--spacing--px-48);
    scroll-margin-top: 76px;
}

@media (min-width: 782px) {
    .pwb-marketplace {
        padding-inline: var(--wp--style--root--padding-left);
    }

    /* La barra pegajosa mantiene su fondo a sangre completa. */
    .pwb-marketplace__pills {
        margin-inline: calc(var(--wp--style--root--padding-left) * -1);
    }
}

.pwb-marketplace-section__head {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-12);
    margin-bottom: var(--wp--preset--spacing--px-16);
}

/* La cabecera de sección es una etiqueta de catálogo, no un titular de
   marketing — se fija el tamaño en vez de heredar el clamp global de h2
   (pensado para hero/CTA, ~40-64px), que aquí chocaba visualmente contra
   el badge de dimensión y contra las tarjetas justo debajo. */
.pwb-marketplace-section__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--custom--color--white);
    margin: 0;
}

.pwb-marketplace-dim-badge {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: var(--wp--preset--font-size--xs-plus);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--wp--custom--radius--md);
    padding: var(--wp--preset--spacing--px-6) var(--wp--preset--spacing--px-10);
    letter-spacing: 0.5px;
    border: 0.5px solid var(--pwb-mkt-dim-color);
    color: var(--pwb-mkt-dim-color);
    background: color-mix(in srgb, var(--pwb-mkt-dim-color) 14%, transparent);
    flex-shrink: 0;
}

.pwb-marketplace-dim-badge[data-dim="1d"] { --pwb-mkt-dim-color: var(--pwb-dim-1d); }
.pwb-marketplace-dim-badge[data-dim="2d"] { --pwb-mkt-dim-color: var(--pwb-dim-2d); }
.pwb-marketplace-dim-badge[data-dim="3d"] { --pwb-mkt-dim-color: var(--pwb-dim-3d); }
.pwb-marketplace-dim-badge[data-dim="4d"] { --pwb-mkt-dim-color: var(--pwb-dim-4d); }
.pwb-marketplace-dim-badge[data-dim="5d"] { --pwb-mkt-dim-color: var(--pwb-dim-5d); }
.pwb-marketplace-dim-badge[data-dim="6d"] { --pwb-mkt-dim-color: var(--pwb-dim-6d); }

.pwb-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: var(--wp--preset--spacing--px-16);
}

.pwb-marketplace-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(calc(258px * 2 + 16px), 1fr));
}

/* Retoque 01 — contraste real de tarjeta frente al fondo (antes ~12 puntos
   de diferencia; ahora fondo más claro que el de la página + borde reforzado) */
.pwb-marketplace-card {
    background: var(--pwb-mkt-card-bg);
    border: 1px solid var(--pwb-mkt-card-border);
    border-radius: var(--wp--custom--radius--md-plus);
    padding: var(--wp--preset--spacing--px-16);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pwb-marketplace-card:hover,
.pwb-marketplace-card:focus-visible {
    background: var(--pwb-mkt-card-bg-hover);
    border-color: var(--pwb-mkt-card-border-hover);
}

.pwb-marketplace-card.is-muted {
    opacity: 0.6;
}

.pwb-marketplace-card--featured {
    padding: var(--wp--preset--spacing--px-24);
}

.pwb-marketplace-card--featured .pwb-marketplace-card__icon {
    width: 52px;
    height: 52px;
}

.pwb-marketplace-card--featured .pwb-marketplace-card__name {
    font-size: 17px;
}

.pwb-marketplace-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--wp--custom--radius--md);
    background: var(--pwb-mkt-icon-bg);
    border: 0.5px solid var(--pwb-mkt-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--custom--color--white);
    flex-shrink: 0;
}

.pwb-marketplace-card__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--wp--custom--color--white);
    margin: 0;
}

/* Retoque 02 — texto alineado con la marca: gris neutro, no azulado */
.pwb-marketplace-card__desc {
    font-size: 12.5px;
    color: var(--pwb-mkt-text-dim);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.pwb-marketplace-card__badges {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-8);
    flex-wrap: wrap;
}

.pwb-marketplace-chip,
.pwb-marketplace-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-6);
    font-size: var(--wp--preset--font-size--2-xs);
    font-weight: 500;
    padding: var(--wp--preset--spacing--px-4) var(--wp--preset--spacing--px-8);
    border-radius: var(--wp--custom--radius--sm-plus);
    background: var(--wp--preset--color--custom-pwb-secondary-background);
    border: 0.5px solid var(--pwb-mkt-card-border);
    color: rgba(255, 255, 255, 0.85);
}

/* Identidad por dimensión — chip de código dentro de cada tarjeta (uno de
   los "tres sitios" del criterio del PPTX) */
.pwb-marketplace-chip {
    border-color: var(--pwb-mkt-chip-color);
    color: var(--pwb-mkt-chip-color);
    background: color-mix(in srgb, var(--pwb-mkt-chip-color) 16%, transparent);
}

.pwb-marketplace-chip[data-dim="1d"] { --pwb-mkt-chip-color: var(--pwb-dim-1d); }
.pwb-marketplace-chip[data-dim="2d"] { --pwb-mkt-chip-color: var(--pwb-dim-2d); }
.pwb-marketplace-chip[data-dim="3d"] { --pwb-mkt-chip-color: var(--pwb-dim-3d); }
.pwb-marketplace-chip[data-dim="4d"] { --pwb-mkt-chip-color: var(--pwb-dim-4d); }
.pwb-marketplace-chip[data-dim="5d"] { --pwb-mkt-chip-color: var(--pwb-dim-5d); }
.pwb-marketplace-chip[data-dim="6d"] { --pwb-mkt-chip-color: var(--pwb-dim-6d); }

.pwb-marketplace-chip__code {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    margin-right: var(--wp--preset--spacing--px-4);
    font-size: var(--wp--preset--font-size--2-xs);
    font-weight: 600;
}

.pwb-marketplace-badge--beta {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: var(--wp--preset--font-size--2-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wp--custom--color--white);
}

.pwb-marketplace-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pwb-marketplace-badge--soon {
    color: var(--pwb-mkt-text-dim);
}

.pwb-marketplace-badge--ai-cortex {
    color: #b98aff;
    border-color: #3a2a66;
}
.pwb-marketplace-badge--ai-cortex .pwb-marketplace-badge__dot {
    background: #4f00ff;
}
.pwb-marketplace-badge--ai-anticipate {
    color: #ff5577;
    border-color: #5c2233;
}
.pwb-marketplace-badge--ai-anticipate .pwb-marketplace-badge__dot {
    background: #ff2a54;
}

/* ---------- modal ("demostración") ---------- */
.pwb-marketplace-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 13, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--px-24);
}

.pwb-marketplace-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.pwb-marketplace-modal {
    width: 660px;
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--wp--preset--color--custom-pwb-secondary-background);
    border: 0.5px solid var(--pwb-mkt-card-border);
    border-radius: var(--wp--custom--radius--lg-plus);
    transform: scale(0.97);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.pwb-marketplace-scrim.is-open .pwb-marketplace-modal {
    transform: scale(1);
    opacity: 1;
}

.pwb-marketplace-modal__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6.5;
    background: var(--pwb-mkt-icon-bg);
    border-bottom: 0.5px solid var(--pwb-mkt-card-border);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pwb-marketplace-modal__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--px-10);
    color: var(--pwb-mkt-text-dim);
}

.pwb-marketplace-modal__play-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(245, 246, 248, 0.08);
    border: 1px solid var(--pwb-mkt-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--custom--color--white);
    font-size: var(--wp--custom--font-size--lg);
}

.pwb-marketplace-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: var(--wp--custom--radius--sm);
    background: rgba(10, 11, 13, 0.6);
    border: none;
    color: var(--wp--custom--color--white);
    font-size: var(--wp--preset--font-size--sm-plus);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwb-marketplace-modal__header {
    padding: var(--wp--preset--spacing--px-22) var(--wp--preset--spacing--px-26) 0;
}

.pwb-marketplace-modal__title-row {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-14);
}

.pwb-marketplace-modal__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--wp--custom--radius--md-plus);
    background: var(--pwb-mkt-icon-bg);
    border: 0.5px solid var(--pwb-mkt-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--custom--color--white);
    flex-shrink: 0;
}

.pwb-marketplace-modal__title-col h2 {
    font-size: var(--wp--custom--font-size--lg);
    font-weight: 600;
    color: var(--wp--custom--color--white);
    margin: 0 0 var(--wp--preset--spacing--px-4);
}

.pwb-marketplace-modal__category {
    font-size: var(--wp--preset--font-size--xs-plus);
    color: var(--pwb-mkt-text-dim);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-8);
}

.pwb-marketplace-modal__category .pwb-marketplace-dim-badge {
    padding: var(--wp--preset--spacing--px-2) var(--wp--preset--spacing--px-8);
    font-size: var(--wp--preset--font-size--2-xs);
}

.pwb-marketplace-modal__body {
    padding: var(--wp--preset--spacing--px-22) var(--wp--preset--spacing--px-26) var(--wp--preset--spacing--px-26);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-22);
}

.pwb-marketplace-modal__label {
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    color: var(--pwb-mkt-text-dim);
    margin: 0 0 var(--wp--preset--spacing--px-10);
}

.pwb-marketplace-modal__desc {
    font-size: var(--wp--preset--font-size--xs-plus);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.pwb-marketplace-modal__results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-10);
}

.pwb-marketplace-modal__results li {
    font-size: var(--wp--preset--font-size--xs-plus);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    padding-left: var(--wp--preset--spacing--px-22);
    position: relative;
}

.pwb-marketplace-modal__results li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp--preset--color--custom-pwb-primary-color);
}

.pwb-marketplace-modal__footer {
    padding: var(--wp--preset--spacing--px-4) var(--wp--preset--spacing--px-26) var(--wp--preset--spacing--px-26);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-10);
}

.pwb-marketplace-modal__cta {
    background: var(--wp--preset--color--custom-pwb-primary-color);
    color: #0a0b0d;
    border: none;
    border-radius: var(--wp--custom--radius--sm);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    padding: var(--wp--preset--spacing--px-12) 18px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pwb-marketplace-modal__cta:hover {
    opacity: 0.85;
}

.pwb-marketplace-modal__note {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--pwb-mkt-text-dim);
    text-align: center;
    margin: 0;
}

@media (max-width: 640px) {
    .pwb-marketplace-grid--featured {
        grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    }
}