.cnls-pm {

    /* Sin fondo propio: se deja ver el fondo global de la
       página (lo define cnls-alqitat-background). Fallback
       al color base por si ese plugin no estuviera activo. */
    --cnls-pm-bg: transparent;
    --cnls-pm-title: #F4E9C7;
    --cnls-pm-gold: #E0A91F;
    --cnls-pm-muted: rgba(244, 233, 199, 0.64);
    --cnls-pm-line: rgba(224, 169, 31, 0.16);

    width: 100%;
    max-width: 1180px;

    margin: 300px auto 0;
    padding: 50px 24px 90px;

    background: var(--cnls-pm-bg);
    color: var(--cnls-pm-title);

    font-family: Manrope, sans-serif;

    position: relative;
    box-sizing: border-box;

}

.cnls-pm *,
.cnls-pm *::before,
.cnls-pm *::after {

    box-sizing: border-box;

}

/* =========================================================
   HEADER
   ========================================================= */

.cnls-pm-header {

    max-width: 760px;

    margin: 0 auto 34px;

    text-align: center;

}

.cnls-pm-title {

    margin: 0 0 12px !important;
    padding: 0 !important;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        ) !important;

    font-weight: 500 !important;

    line-height: .96 !important;

    color:
        var(--cnls-pm-title) !important;

}

.cnls-pm-description {

    max-width: 700px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.8;

    color:
        var(--cnls-pm-muted);

}

/* =========================================================
   SEARCH
   ========================================================= */

.cnls-pm-search-container {

    position: relative;

    max-width: 760px;

    margin: 0 auto;

    z-index: 20;

}

.cnls-pm-search-box {

    display: flex;

    align-items: center;

    padding: 12px;

    border:
        1px solid
        var(--cnls-pm-title);

    border-radius: 0;

    background: transparent;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

}

.cnls-pm-search-box:focus-within {

    border-color: #B3A06A;

    box-shadow:
        0 0 0 1px
        rgba(
            179,
            160,
            106,
            .08
        );

}

.cnls-pm-input {

    flex: 1;

    min-width: 0;

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding:
        0 4px !important;

    border: 0 !important;

    border-radius: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    background: transparent !important;

    color:
        var(--cnls-pm-title) !important;

    font-family:
        Manrope,
        sans-serif !important;

    font-size: 20px !important;

}

.cnls-pm-input::placeholder {

    color:
        rgba(
            244,
            233,
            199,
            .38
        );

}

.cnls-pm-search-button {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 50px;
    height: 50px;

    margin: 0 0 0 12px;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    color: #F4E9C7;

    cursor: pointer;

    transition:
        color .18s ease,
        transform .18s ease;

}

.cnls-pm-search-button:hover,
.cnls-pm-search-button:focus-visible,
.cnls-pm-search-box:focus-within .cnls-pm-search-button {

    background: transparent;

    color: #B3A06A;

}

.cnls-pm-search-button:focus-visible {

    outline:
        1px solid
        #B3A06A;

    outline-offset: 2px;

}

.cnls-pm-search-button:active {

    transform:
        scale(.94);

}

.cnls-pm-search-icon {

    fill: currentColor;

}

/* =========================================================
   SEARCH SUGGESTIONS
   ========================================================= */

.cnls-pm-suggestions {

    display: none;

    position: absolute;

    top: calc(100% + 4px);

    left: 0;
    right: 0;

    overflow: hidden;

    background: #091123;

    border:
        1px solid
        var(--cnls-pm-line);

    box-shadow:
        0 24px 60px
        rgba(
            0,
            0,
            0,
            .38
        );

}

.cnls-pm-suggestion {

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 13px;

    width: 100%;

    margin: 0;

    padding:
        12px 14px;

    border: 0;

    border-bottom:
        1px solid
        rgba(
            244,
            233,
            199,
            .06
        );

    background: transparent;

    color:
        var(--cnls-pm-title);

    text-align: left;

    cursor: pointer;

    transition:
        background .18s ease;

}

.cnls-pm-suggestion:hover,
.cnls-pm-suggestion:focus-visible,
.cnls-pm-suggestion.is-active {

    background:
        rgba(
            224,
            169,
            31,
            .06
        );

}

.cnls-pm-suggestion:focus-visible {

    outline:
        1px solid
        rgba(
            224,
            169,
            31,
            .45
        );

    outline-offset: -1px;

}

.cnls-pm-suggestion:last-child {

    border-bottom: 0;

}

.cnls-pm-suggestion-image {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 68px;

    overflow: hidden;

}

.cnls-pm-suggestion-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}

.cnls-pm-suggestion-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}

.cnls-pm-suggestion-brand {

    overflow: hidden;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 12px;

    line-height: 1.2;

    letter-spacing: .12em;

    text-transform: uppercase;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--cnls-pm-gold);

}

.cnls-pm-suggestion-name {

    overflow: hidden;

    font-size: 18px;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--cnls-pm-title);

}

.cnls-pm-suggestion-arrow {

    color:
        var(--cnls-pm-gold);

    font-size: 15px;

    transition:
        transform .18s ease;

}

.cnls-pm-suggestion:hover
.cnls-pm-suggestion-arrow,
.cnls-pm-suggestion.is-active
.cnls-pm-suggestion-arrow {

    transform:
        translateX(3px);

}

/* =========================================================
   PREMIUM CATALOG
   ========================================================= */

.cnls-pm-catalog {

    max-width: 1040px;

    margin: 72px auto 0;

}

.cnls-pm-catalog-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 28px;

    font-family:
        "Manrope",
        monospace;

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-muted);

}

.cnls-pm-catalog-heading::after {

    content: "";

    flex: 1;

    height: 1px;

    background:
        rgba(
            244,
            233,
            199,
            .09
        );

}

.cnls-pm-premium-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

        gap:
            34px 40px;

}

.cnls-pm-premium-card {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--cnls-pm-title);

    text-align: left;

    cursor: pointer;

}

.cnls-pm-premium-image {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 285px;

    margin: 0 0 17px;

    overflow: hidden;

    background: transparent;

}

.cnls-pm-premium-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    transform:
        translateZ(0);

    filter:
        saturate(.98)
        contrast(.99)
        brightness(.99);

    transition:
        transform 700ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        filter 700ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}

@media (hover: hover) and (pointer: fine) {

    .cnls-pm-premium-card:hover
    .cnls-pm-premium-image img,

    .cnls-pm-premium-card:focus-visible
    .cnls-pm-premium-image img {

        transform:
            translateY(-5px)
            scale(1.018);

        filter:
            saturate(1.02)
            contrast(1.02)
            brightness(1.02)
            drop-shadow(
                0 12px 18px
                rgba(
                    0,
                    0,
                    0,
                    .17
                )
            );

    }

}

.cnls-pm-premium-card:focus-visible {

    outline:
        1px solid
        var(--cnls-pm-gold);

    outline-offset: 8px;

}

.cnls-pm-premium-card.is-selected {

    position: relative;

}

.cnls-pm-premium-card.is-selected
.cnls-pm-premium-image {

    opacity: .82;

}

.cnls-pm-premium-card.is-selected
.cnls-pm-premium-name {

    color:
        var(--cnls-pm-gold);

}

.cnls-pm-premium-brand {

    display: block;

    margin-bottom: 5px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-gold);

}

.cnls-pm-premium-name {

    display: block;

    min-height: 42px;

    font-family:
        "Manrope",
        monospace;

    font-size: 18px;

    font-weight: 500;

	text-transform: uppercase;

	letter-spacing: -.015em;

    line-height: 1;

    color:
        var(--cnls-pm-title);

    transition:
        color .2s ease;

}

.cnls-pm-premium-action {

    display: block;

    margin-top: 8px;

    font-family:
        "Manrope",
        monospace;

    font-size: 10px;

    letter-spacing: .09em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-muted);

    transition:
        color .2s ease,
        transform .2s ease;

}

.cnls-pm-premium-card:hover
.cnls-pm-premium-action,
.cnls-pm-premium-card:focus-visible
.cnls-pm-premium-action {

    color:
        var(--cnls-pm-gold);

    transform:
        translateX(3px);

}

.cnls-pm-catalog-empty {

    padding: 35px;

    border:
        1px solid
        rgba(
            224,
            169,
            31,
            .12
        );

    color:
        var(--cnls-pm-muted);

    text-align: center;

}

/* =========================================================
   SELECTED
   ========================================================= */

.cnls-pm-selected {

    display: none;

    max-width: 980px;

    margin: 72px auto 0;

    padding:
        12px 16px;

    border-left:
        2px solid
        var(--cnls-pm-gold);

    background:
        rgba(
            224,
            169,
            31,
            .045
        );

    color:
        var(--cnls-pm-muted);

    font-size: 12px;

}

/* =========================================================
   LOADING
   ========================================================= */

.cnls-pm-loading {

    display: none;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 40px 0;

    color:
        var(--cnls-pm-muted);

    font-family:
        "Manrope",
        monospace;

    font-size: 10px;

    letter-spacing: .1em;

    text-transform: uppercase;

}

.cnls-pm-spinner {

    width: 16px;
    height: 16px;

    border:
        1px solid
        rgba(
            224,
            169,
            31,
            .22
        );

    border-top-color:
        var(--cnls-pm-gold);

    border-radius: 50%;

    animation:
        cnlsPmSpin
        .7s linear infinite;

}

@keyframes cnlsPmSpin {

    to {
        transform:
            rotate(360deg);
    }

}

/* =========================================================
   ERROR
   ========================================================= */

.cnls-pm-error {

    display: none;

    max-width: 760px;

    margin: 28px auto;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(
            224,
            169,
            31,
            .14
        );

    color:
        var(--cnls-pm-muted);

    font-size: 13px;

    line-height: 1.6;

    text-align: center;

}

/* =========================================================
   RESULTS
   ========================================================= */

.cnls-pm-output {

    scroll-margin-top: 40px;

}

.cnls-pm-target {

    max-width: 980px;

    margin: 62px auto 35px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(
            244,
            233,
            199,
            .07
        );

}

.cnls-pm-target-eyebrow {

    display: block;

    margin-bottom: 8px;

    font-family:
        "Manrope",
        monospace;

    font-size: 11px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-gold);

}

.cnls-pm-target-title {

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;

    font-size: 56px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    color:
        var(--cnls-pm-title) !important;

}

.cnls-pm-target-brand {

    margin-top: 7px;

	text-transform: uppercase;

    color:
        var(--cnls-pm-muted);

    font-size: 12px;

}

.cnls-pm-results {

    max-width: 980px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 40px;

}

.cnls-pm-card {

    position: relative;

    min-width: 0;

    padding:
        18px 0 0;


}

.cnls-pm-card-image {

    display: block;

    position: relative;

    width: 250px;
    height: 333px;

    max-width: 100%;

    margin: 0 auto 18px;

    background: transparent;

    overflow: visible;

    text-decoration: none !important;

}

.cnls-pm-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    will-change:
        transform,
        filter;

    backface-visibility: hidden;

    transform:
        translateZ(0);

    transform-origin:
        center center;

    filter:
        saturate(.98)
        contrast(.99)
        brightness(.99);

    transition:
        transform 860ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        filter 860ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}

@media (hover: hover) and (pointer: fine) {

    .cnls-pm-card-image:hover img,
    .cnls-pm-card-image:focus-visible img {

        transform:
            translateY(-3px)
            scale(1.015);

        filter:
            saturate(1.02)
            contrast(1.02)
            brightness(1.02)
            drop-shadow(
                0 10px 16px
                rgba(
                    0,
                    0,
                    0,
                    .16
                )
            );

    }

}

.cnls-pm-card-image:focus-visible {

    outline:
        1px solid
        var(--cnls-pm-gold);

    outline-offset: 4px;

}

.cnls-pm-card-brand {

    margin: 0 0 5px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 11px;

    letter-spacing: .13em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-gold);

}

.cnls-pm-card-title {

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        "Manrope",
        monospace !important;

    font-size: 18px !important;

    font-weight: 500 !important;

	text-transform: uppercase;

	letter-spacing: -0.014em;

    line-height: 1 !important;

    color:
        var(--cnls-pm-title) !important;

}

.cnls-pm-card-price {

    margin-top: 14px;

    color:
        var(--cnls-pm-gold);

    font-size: 18px;

}

.cnls-pm-card-price .amount {

    color:
        var(--cnls-pm-gold) !important;

}

.cnls-pm-shared {

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(
            244,
            233,
            199,
            .07
        );

}

.cnls-pm-shared-label {

    margin: 0 0 10px;

    font-family:
        "Manrope",
        monospace;

    font-size: 11px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        var(--cnls-pm-muted);

}

.cnls-pm-shared-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

.cnls-pm-shared-item {

    padding:
        6px 8px;

    border:
        1px solid
        rgba(
            224,
            169,
            31,
            .14
        );

    color:
        rgba(
            244,
            233,
            199,
            .76
        );

    font-size: 11px;

    line-height: 1.3;

}

.cnls-pm-why {

    margin: 18px 0 0;

    padding: 14px 0 0;

    border-top:
        1px solid
        rgba(
            244,
            233,
            199,
            .07
        );

    font-size: 14px;

    line-height: 1.6;

    color:
        var(--cnls-pm-muted);

}

.cnls-pm-why strong {

    color:
        var(--cnls-pm-title);

    font-weight: 500;

}

.cnls-pm-link {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 42px;

    margin: 18px 0 0;

    padding:
        0 14px;

    border:
        1px solid
        rgba(
            224,
            169,
            31,
            .35
        );

    color:
        var(--cnls-pm-gold) !important;

    background: transparent;

    font-family:
        "Manrope",
        monospace;

    font-size: 13px;

    letter-spacing: .09em;

    text-transform: uppercase;

    text-decoration: none !important;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease;

}

.cnls-pm-link:hover,
.cnls-pm-link:focus-visible {

    border-color:
        var(--cnls-pm-title);

    color:
        var(--cnls-pm-title) !important;

    background:
        rgba(
            244,
            233,
            199,
            .025
        );

}

.cnls-pm-link:focus-visible {

    outline:
        1px solid
        var(--cnls-pm-gold);

    outline-offset: 2px;

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .cnls-pm *,
    .cnls-pm *::before,
    .cnls-pm *::after {

        scroll-behavior: auto !important;

    }

    .cnls-pm-premium-image img,
    .cnls-pm-card-image img,
    .cnls-pm-search-button,
    .cnls-pm-suggestion,
    .cnls-pm-suggestion-arrow,
    .cnls-pm-premium-action,
    .cnls-pm-premium-name {

        transition: none !important;

        animation: none !important;

    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .cnls-pm-premium-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .cnls-pm {

        margin-top: 200px;

    }

    .cnls-pm-premium-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

    .cnls-pm-results {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .cnls-pm {

        margin-top: 120px;

        padding:
            36px 16px 65px;

    }

    .cnls-pm-title {

        font-size:
            clamp(
                38px,
                12vw,
                52px
            ) !important;

    }

    .cnls-pm-description {

        font-size: 16px;

        line-height: 1.7;

    }

    .cnls-pm-search-button {

        width: 44px;
        height: 44px;

    }

    .cnls-pm-input {

        height: 44px !important;

        font-size: 17px !important;

    }

    .cnls-pm-catalog {

        margin-top: 52px;

    }

    .cnls-pm-premium-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            30px 14px;

    }

    .cnls-pm-premium-image {

        height: 220px;

        margin-bottom: 13px;

    }

    .cnls-pm-premium-name {

        font-size: 25px;

    }

    .cnls-pm-premium-action {

        font-size: 8px;

    }

    .cnls-pm-results {

        grid-template-columns: 1fr;

    }

    .cnls-pm-target {

        margin-top: 45px;

    }

    .cnls-pm-target-title {

        font-size: 36px !important;

    }

    .cnls-pm-suggestion {

        grid-template-columns:
            44px
            minmax(
                0,
                1fr
            )
            auto;

    }

    .cnls-pm-suggestion-image {

        width: 44px;
        height: 58px;

    }

    .cnls-pm-suggestion-name {

        font-size: 16px;

    }

    .cnls-pm-card-title {

        font-size: 34px !important;

    }

}