.pdp-compare-fares nav {
    display: flex;
    align-items: center;
    gap: .62rem;

    height: 4rem;
    padding: 0 1.5rem;

    background-color: var(--azamara-blue);
    color: white;

    font-size: 0.875rem;
    font-style: normal;
    font-weight: 420;
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: 0.04375rem;
}

.pdp-compare-fares nav .spacer {
    width: 0.0625rem;
    height: 1.125rem;  

    background: hsla(0, 0%, 100%, 0.5);
}

.pdp-compare-fares nav .cruise-name {
    text-transform: capitalize;
}

.pdp-compare-fares nav .cruise-title-override {
    text-transform: none;
}

.pdp-compare-fares nav .cruise-name,
.pdp-compare-fares nav .cruise-dates,
.pdp-compare-fares nav .ship-name, 
.pdp-compare-fares nav .spacer {
    display: none;
}

@media (min-width: 768px) {
    .pdp-compare-fares nav .cruise-name,
    .pdp-compare-fares nav .cruise-dates,
    .pdp-compare-fares nav .ship-name, 
    .pdp-compare-fares nav .spacer {
        display: inline;
    }
}

.pdp-compare-fares nav .close-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;

    background: transparent;
    border: none;

    color: white;
    fill: white;
    line-height: 0;

    font-size: 0.875rem;
    font-style: normal;
    font-weight: 420;
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: 0.04375rem;
    text-transform: uppercase;
}

.pdp-compare-fares nav .close-button svg {
        fill: white;
        max-width: .8rem;
        max-height: .8rem;
}