<style>

/* =========================================================
   GENERAL
   ========================================================= */

.uniskin-community {
    max-width: 1100px;
}

.uniskin-community a {
    text-decoration: none;
}


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

.uniskin-community-header {
    margin-bottom: 30px;
}

.uniskin-community-header h1 {
    margin: 0 0 10px;
}

.uniskin-community-header p {
    margin: 0;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   LATEST NEWS
   ========================================================= */

.uniskin-latest-news {
    margin: 0 0 32px;

    padding: 28px 32px;

    border: 1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}

.uniskin-news-meta {
    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .04em;
}

.uniskin-latest-news h2 {
    margin: 0 0 10px;
}

.uniskin-latest-news p {
    margin: 0 0 20px;

    line-height: 1.6;
}


/* =========================================================
   NEWS BUTTONS
   ========================================================= */

.uniskin-news-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}

.uniskin-community a.uniskin-primary-button,
.uniskin-community a.uniskin-primary-button:visited {
    display: inline-block;

    padding: 10px 18px;

    background: #0b5c7a !important;

    border: 1px solid #0b5c7a !important;

    border-radius: 4px;

    color: #ffffff !important;

    font-weight: 600;

    text-decoration: none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.uniskin-community a.uniskin-primary-button:hover,
.uniskin-community a.uniskin-primary-button:focus,
.uniskin-community a.uniskin-primary-button:active {
    background: #084a63 !important;

    border-color: #084a63 !important;

    color: #ffffff !important;

    transform: translateY(-1px);
}

.uniskin-community a.uniskin-secondary-button,
.uniskin-community a.uniskin-secondary-button:visited {
    display: inline-block;

    padding: 10px 18px;

    background: #ffffff !important;

    border: 1px solid #0b5c7a !important;

    border-radius: 4px;

    color: #0b5c7a !important;

    font-weight: 600;

    text-decoration: none !important;

    transition:
        background .15s ease,
        transform .15s ease;
}

.uniskin-community a.uniskin-secondary-button:hover,
.uniskin-community a.uniskin-secondary-button:focus,
.uniskin-community a.uniskin-secondary-button:active {
    background: #f4f8fa !important;

    color: #0b5c7a !important;

    transform: translateY(-1px);
}


/* =========================================================
   COMMUNITY GRID
   ========================================================= */

.uniskin-community-grid {
    display: grid;

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

    gap: 20px;
}

.uniskin-community-card {
    display: flex;

    flex-direction: column;

    min-height: 220px;

    padding: 28px;

    border: 1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;

    color: inherit !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.uniskin-community-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, .08);
}

.uniskin-community-card h3 {
    margin: 0 0 18px;
}

.uniskin-community-card p {
    margin: 0 0 20px;

    line-height: 1.6;
}

.uniskin-community-card span {
    margin-top: auto;

    font-weight: 600;
}


/* =========================================================
   PRODUCT ARCHIVE
   ========================================================= */

.uniskin-product-grid {
    display: grid;

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

    gap: 20px;
}

.uniskin-product-card {
    display: flex;

    flex-direction: column;

    min-height: 220px;

    padding: 28px;

    border: 1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;

    color: inherit !important;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.uniskin-product-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.08);
}

.uniskin-product-card h2 {
    margin: 0 0 16px;

    font-size: 22px;
}

.uniskin-product-card p {
    margin: 0 0 20px;

    line-height: 1.6;
}

.uniskin-product-card span {
    margin-top: auto;

    font-weight: 600;
}


/* =========================================================
   PRODUCT DETAIL
   ========================================================= */

.uniskin-product-detail {
    width: 100%;

    padding: 32px;

    border: 1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}


/* =========================================================
   PRODUCT HERO
   Desktop: title left / image right
   ========================================================= */

.uniskin-product-hero {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    margin-bottom: 10px;
}

.uniskin-product-hero.has-image {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 260px);

    gap: 48px;

    align-items: center;
}

.uniskin-product-title-column {
    min-width: 0;
}

.uniskin-product-title-column h1 {
    margin: 0;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.12;
}

.uniskin-product-image-column {
    display: flex;

    align-items: center;

    justify-content: flex-end;
}

.uniskin-product-image {
    display: block;

    width: 100%;

    max-width: 240px;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   PRODUCT SECTIONS
   ========================================================= */

.uniskin-product-section {
    width: 100%;

    padding-top: 26px;

    margin-top: 26px;

    border-top:
        1px solid #e5e5e5;
}

.uniskin-product-section h2 {
    margin: 0 0 14px;

    font-size: 24px;
}

.uniskin-product-section p {
    width: 100%;

    max-width: none;

    margin-top: 0;

    line-height: 1.7;
}

.uniskin-section-intro {
    margin-bottom: 18px;
}

.uniskin-product-ingredients {
    margin-top: 30px;
}


/* =========================================================
   PRODUCT INGREDIENT TOOLTIP
   ========================================================= */

.uniskin-ingredient-list {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.uniskin-ingredient {
    position: relative;

    padding: 10px 14px;

    border:
        1px solid #0b5c7a
        !important;

    border-radius: 4px;

    background:
        #fff !important;

    color:
        #0b5c7a !important;

    font: inherit;

    font-weight: 600;

    cursor: pointer;
}

.uniskin-ingredient:hover,
.uniskin-ingredient:focus,
.uniskin-ingredient.is-open {
    background:
        #f4f8fa !important;
}

.uniskin-info-icon {
    margin-left: 5px;
}

.uniskin-ingredient-tooltip {
    position: absolute;

    z-index: 100;

    left: 0;

    top:
        calc(100% + 10px);

    width: 320px;

    max-width: 80vw;

    padding: 18px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);

    color: #123f50;

    text-align: left;

    font-weight: 400;

    line-height: 1.5;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-4px);

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.uniskin-ingredient-tooltip strong {
    display: block;

    margin-bottom: 8px;

    font-size: 16px;
}

.uniskin-ingredient-tooltip > span {
    display: block;
}

.uniskin-ingredient-extended {
    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px solid #e5e5e5;
}

.uniskin-ingredient:hover
.uniskin-ingredient-tooltip,

.uniskin-ingredient:focus
.uniskin-ingredient-tooltip,

.uniskin-ingredient.is-open
.uniskin-ingredient-tooltip {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   INGREDIENT GUIDE SEARCH
   ========================================================= */

.uniskin-ingredient-search {
    margin-bottom: 24px;
}

.uniskin-ingredient-search input {
    width: 100%;

    padding: 14px 16px;

    border:
        1px solid #cfd6d9;

    border-radius: 5px;

    background: #fff;

    color: #123f50;

    font: inherit;

    font-size: 16px;

    outline: none;

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

.uniskin-ingredient-search input:focus {
    border-color: #0b5c7a;

    box-shadow:
        0 0 0 2px
        rgba(11, 92, 122, .10);
}


/* =========================================================
   INGREDIENT GUIDE LIST
   ========================================================= */

.uniskin-ingredient-guide-grid {
    display: flex;

    flex-direction: column;

    gap: 0;

    width: 100%;

    border-top: 1px solid #d8d8d8;
}


/* =========================================================
   INGREDIENT LIST ITEM
   ========================================================= */

.woocommerce-MyAccount-content
.uniskin-community
a.uniskin-ingredient-guide-card {
    display: grid;

    grid-template-columns:
    	minmax(250px, 32%)
    	minmax(0, 1fr)
    	auto;

    align-items: center;

    gap: 30px;

    width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 12px 4px !important;

    border: 0;

    border-bottom:
        1px solid #d8d8d8;

    border-radius: 0;

    background: transparent;

    color: inherit !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        padding .15s ease;
}


/* =========================================================
   INGREDIENT LIST HOVER
   ========================================================= */

.woocommerce-MyAccount-content
.uniskin-community
a.uniskin-ingredient-guide-card:hover {
    background: #f7fafb;

    transform: none;

    box-shadow: none;

    padding:
        12px 10px !important;
}

/* =========================================================
   INGREDIENT NAME
   ========================================================= */

.uniskin-ingredient-guide-card h2 {
    margin: 0;

    font-size: 20px;

    line-height: 1.3;

    word-break: normal !important;

    overflow-wrap: normal !important;

    hyphens: none !important;
}


/* =========================================================
   INGREDIENT DESCRIPTION
   ========================================================= */

.uniskin-ingredient-guide-card p {
    margin: 0;

    line-height: 1.6;
}


/* =========================================================
   INGREDIENT LINK
   ========================================================= */

.uniskin-ingredient-guide-card > span {
    margin: 0;

    white-space: nowrap;

    color: #0b5c7a;

    font-weight: 600;
}


/* =========================================================
   NO SEARCH RESULTS
   ========================================================= */

.uniskin-ingredient-no-results {
    margin-top: 20px;

    padding: 22px;

    border: 1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}


/* =========================================================
   INGREDIENT DETAIL
   ========================================================= */

.uniskin-ingredient-detail {
    width: 100%;

    padding: 32px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}

.uniskin-ingredient-detail-header {
    margin-bottom: 24px;
}

.uniskin-ingredient-kicker {
    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .05em;
}

.uniskin-ingredient-detail-header h1 {
    margin: 0;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height: 1.15;
}

.uniskin-ingredient-detail-section {
    width: 100%;

    padding-top: 26px;

    margin-top: 26px;

    border-top:
        1px solid #e5e5e5;
}

.uniskin-ingredient-detail-section h2 {
    margin: 0 0 14px;

    font-size: 24px;
}

.uniskin-ingredient-detail-section p {
    margin: 0;

    line-height: 1.7;
}

.uniskin-ingredient-summary {
    padding-top: 0;

    margin-top: 0;

    border-top: 0;

    font-size: 18px;
}

.uniskin-ingredient-products {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.uniskin-ingredient-product-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border:
        1px solid #0b5c7a;

    border-radius: 4px;

    background: #fff;

    color:
        #0b5c7a !important;

    font-weight: 600;

    transition:
        background .15s ease,
        transform .15s ease;
}

.uniskin-ingredient-product-link:hover {
    background: #f4f8fa;

    transform:
        translateY(-1px);
}


/* =========================================================
   NEWS ARCHIVE
   ========================================================= */

.uniskin-news-list {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

.uniskin-news-list-item {
    padding: 26px 28px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}

.uniskin-news-list-item h2 {
    margin: 0 0 10px;
}

.uniskin-news-list-item p {
    margin: 0 0 14px;

    line-height: 1.6;
}

.uniskin-text-link {
    font-weight: 600;
}


/* =========================================================
   SINGLE NEWS
   ========================================================= */

.uniskin-news-article {
    padding: 32px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}

.uniskin-news-article h1 {
    margin-top: 0;
}

.uniskin-news-content {
    margin-top: 24px;

    line-height: 1.7;
}


/* =========================================================
   BACK / MESSAGE
   ========================================================= */

.uniskin-community-back {
    margin-bottom: 22px;
}

.uniskin-community-back a {
    font-weight: 600;
}

.uniskin-message {
    padding: 24px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}


/* =========================================================
   DEBUG
   ========================================================= */

.uniskin-debug-panel {
    margin-top: 30px;

    padding: 16px;

    border:
        1px dashed #999;

    border-radius: 6px;

    background: #f7f7f7;
}

.uniskin-debug-panel pre {
    margin: 8px 0 0;

    white-space: pre-wrap;

    font-size: 12px;
}


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

@media (max-width: 768px) {

    .uniskin-community-grid,
    .uniskin-product-grid {
        grid-template-columns: 1fr;
    }


    .uniskin-community-card,
    .uniskin-product-card {
        min-height: auto;
    }


    .uniskin-latest-news,
    .uniskin-product-detail,
    .uniskin-news-article,
    .uniskin-ingredient-detail {
        padding: 22px;
    }


    /* =====================================================
       PRODUCT
       ===================================================== */

    .uniskin-product-hero,
    .uniskin-product-hero.has-image {
        display: flex;

        flex-direction: column;

        gap: 22px;

        margin-bottom: 4px;
    }


    .uniskin-product-image-column {
        order: -1;

        width: 100%;

        justify-content: center;
    }


    .uniskin-product-image {
        width: 100%;

        max-width: 260px;

        margin: 0 auto;
    }


    .uniskin-product-title-column {
        width: 100%;
    }


    .uniskin-product-title-column h1 {
        font-size: 34px;

        text-align: left;
    }


    /* =====================================================
       INGREDIENT GUIDE LIST
       ===================================================== */

    .uniskin-ingredient-guide-card {
        grid-template-columns:
            1fr
            auto;

        gap:
            8px
            18px;

        min-height: auto;

        padding:
            18px 4px;
    }


    .uniskin-ingredient-guide-card h2 {
        grid-column: 1;
        grid-row: 1;

        font-size: 19px;
    }


    .uniskin-ingredient-guide-card p {
        grid-column:
            1 / -1;

        grid-row: 2;

        margin: 0;
    }


    .uniskin-ingredient-guide-card > span {
        grid-column: 2;
        grid-row: 1;

        align-self: center;

        margin: 0;
    }


    .uniskin-ingredient-guide-card:hover {
        padding-left: 4px;
        padding-right: 4px;
    }

}

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

@media (max-width: 480px) {

    .uniskin-community-card,
    .uniskin-product-card,
    .uniskin-ingredient-guide-card {
        padding: 22px;
    }


    .uniskin-news-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .uniskin-primary-button,
    .uniskin-secondary-button {
        text-align: center;
    }


    .uniskin-ingredient-tooltip {
        width: 260px;

        max-width: 75vw;
    }

}

/* =========================================================
   DOWNLOAD TOOLS
   ========================================================= */

.uniskin-download-tools {
    margin-bottom: 28px;
}

.uniskin-download-search {
    margin-bottom: 18px;
}

.uniskin-download-search input {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #cfd6d9;
    border-radius: 5px;

    background: #fff;
    color: #123f50;

    font: inherit;
    font-size: 16px;

    outline: none;

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

.uniskin-download-search input:focus {
    border-color: #0b5c7a;

    box-shadow:
        0 0 0 2px
        rgba(11, 92, 122, .10);
}


/* =========================================================
   DOWNLOAD FILTERS
   ========================================================= */

.uniskin-download-categories {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.uniskin-download-filter {
    padding: 9px 14px;

    border: 1px solid #0b5c7a !important;
    border-radius: 4px;

    background: #fff !important;
    color: #0b5c7a !important;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.uniskin-download-filter:hover {
    background: #f4f8fa !important;
}

.uniskin-download-filter.is-active {
    background: #0b5c7a !important;
    color: #fff !important;
}


/* =========================================================
   DOWNLOAD GRID
   ========================================================= */

.uniskin-download-grid {
    display: grid;

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

    gap: 20px;
}

.uniskin-download-card {
    display: flex;

    flex-direction: column;

    min-height: 230px;

    padding: 26px 28px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;
}

.uniskin-download-category {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.uniskin-download-card h2 {
    margin: 0 0 12px;

    font-size: 22px;
}

.uniskin-download-card p {
    margin: 0 0 20px;

    line-height: 1.6;
}

.uniskin-community
a.uniskin-download-button {
    display: inline-block;

    align-self: flex-start;

    margin-top: auto;

    padding: 10px 16px;

    border: 1px solid #0b5c7a;
    border-radius: 4px;

    background: #0b5c7a;

    color: #fff !important;

    font-weight: 600;

    text-decoration: none !important;
}

.uniskin-community
a.uniskin-download-button:hover {
    background: #084a63;

    border-color: #084a63;

    color: #fff !important;
}

.uniskin-download-unavailable {
    margin-top: auto;

    font-size: 14px;

    opacity: .65;
}

.uniskin-download-no-results {
    margin-top: 20px;

    padding: 22px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;
}


@media (max-width: 768px) {

    .uniskin-download-grid {
        grid-template-columns: 1fr;
    }

    .uniskin-download-card {
        min-height: auto;
    }

}

/* =========================================================
   GUIDE TOOLS
   ========================================================= */

.uniskin-guide-tools {
    margin-bottom: 28px;
}

.uniskin-guide-search {
    margin-bottom: 18px;
}

.uniskin-guide-search input {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #cfd6d9;
    border-radius: 5px;

    background: #fff;
    color: #123f50;

    font: inherit;
    font-size: 16px;

    outline: none;

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

.uniskin-guide-search input:focus {
    border-color: #0b5c7a;

    box-shadow:
        0 0 0 2px
        rgba(11, 92, 122, .10);
}


/* =========================================================
   GUIDE FILTERS
   ========================================================= */

.uniskin-guide-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.uniskin-guide-filter {
    padding: 9px 14px;

    border: 1px solid #0b5c7a !important;
    border-radius: 4px;

    background: #fff !important;
    color: #0b5c7a !important;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.uniskin-guide-filter:hover {
    background: #f4f8fa !important;
}

.uniskin-guide-filter.is-active {
    background: #0b5c7a !important;
    color: #fff !important;
}


/* =========================================================
   GUIDE GRID
   ========================================================= */

.uniskin-guide-grid {
    display: grid;

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

    gap: 20px;
}

.uniskin-guide-card {
    display: flex;
    flex-direction: column;

    min-height: 220px;

    padding: 26px 28px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;

    color: inherit !important;
    text-decoration: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.uniskin-guide-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.08);
}

.uniskin-guide-category {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.uniskin-guide-card h2 {
    margin: 0 0 12px;

    font-size: 22px;
}

.uniskin-guide-card p {
    margin: 0 0 20px;

    line-height: 1.6;
}

.uniskin-guide-card span {
    margin-top: auto;

    font-weight: 600;
}

.uniskin-guide-no-results {
    margin-top: 20px;

    padding: 22px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;
}


/* =========================================================
   SINGLE GUIDE
   ========================================================= */

.uniskin-guide-detail {
    width: 100%;

    padding: 32px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;
}

.uniskin-guide-detail-header {
    margin-bottom: 30px;
}

.uniskin-guide-kicker {
    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.uniskin-guide-detail h1 {
    margin: 0 0 18px;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height: 1.15;
}

.uniskin-guide-lead {
    margin: 0;

    font-size: 18px;
    line-height: 1.7;
}

.uniskin-guide-content {
    padding-top: 26px;

    border-top: 1px solid #e5e5e5;

    line-height: 1.75;
}

.uniskin-guide-content p:first-child {
    margin-top: 0;
}


@media (max-width: 768px) {

    .uniskin-guide-grid {
        grid-template-columns: 1fr;
    }

    .uniskin-guide-card {
        min-height: auto;
    }

    .uniskin-guide-detail {
        padding: 22px;
    }

}
/* =========================================================
   LEGACY LAB HEADER
   ========================================================= */

.uniskin-legacy-header {
    margin-bottom: 30px;
}

.uniskin-legacy-label,
.uniskin-card-eyebrow {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.uniskin-legacy-header h1 {
    margin: 0 0 12px;
}

.uniskin-legacy-header p {
    max-width: 720px;

    margin: 0;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   LEGACY FILTERS
   ========================================================= */

.uniskin-legacy-tools {
    margin-bottom: 24px;
}

.uniskin-legacy-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.uniskin-legacy-filter {
    padding: 9px 14px;

    border:
        1px solid #0b5c7a
        !important;

    border-radius: 4px;

    background:
        #fff !important;

    color:
        #0b5c7a !important;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.uniskin-legacy-filter:hover {
    background:
        #f4f8fa !important;
}

.uniskin-legacy-filter.is-active {
    background:
        #0b5c7a !important;

    color:
        #fff !important;
}


/* =========================================================
   LEGACY GRID
   ========================================================= */

.uniskin-legacy-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   LEGACY CARD
   ========================================================= */

.uniskin-legacy-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 290px;

    padding: 28px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}

.uniskin-legacy-type {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.uniskin-legacy-card h2 {
    margin: 0 0 14px;

    padding-right: 24px;

    font-size: 23px;
}

.uniskin-legacy-description {
    margin: 0 0 22px;

    line-height: 1.65;
}

.uniskin-legacy-meta {
    margin-top: auto;
    margin-bottom: 20px;

    padding-top: 18px;

    border-top:
        1px solid #e5e5e5;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   DEADLINE DOT
   ========================================================= */

.uniskin-deadline-dot {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 11px;
    height: 11px;

    border-radius: 50%;
}

.uniskin-deadline-green {
    background: #39a96b;
}

.uniskin-deadline-yellow {
    background: #e5ad24;
}

.uniskin-deadline-red {
    background: #c94a4a;
}


/* =========================================================
   LEGACY CTA
   ========================================================= */

.uniskin-community
a.uniskin-legacy-button {
    display: inline-block;

    align-self: flex-start;

    padding: 10px 16px;

    border:
        1px solid #0b5c7a;

    border-radius: 4px;

    background: #0b5c7a;

    color: #fff !important;

    font-weight: 600;

    text-decoration: none !important;
}

.uniskin-community
a.uniskin-legacy-button:hover {
    background: #084a63;

    border-color: #084a63;

    color: #fff !important;
}


/* =========================================================
   LEGACY COMMUNITY CARD
   ========================================================= */

.uniskin-community-card-legacy {
    border:
        1px solid #0b5c7a;
}


/* =========================================================
   LEGACY NO RESULTS
   ========================================================= */

.uniskin-legacy-no-results {
    margin-top: 20px;

    padding: 22px;

    border:
        1px solid #d8d8d8;

    border-radius: 6px;

    background: #fff;
}


@media (max-width: 768px) {

    .uniskin-legacy-grid {
        grid-template-columns: 1fr;
    }

    .uniskin-legacy-card {
        min-height: auto;
    }

}

/* =========================================================
   LEGACY LAB SINGLE
   ========================================================= */

.uniskin-legacy-detail {
    position: relative;

    width: 100%;

    padding: 34px;

    border: 1px solid #d8d8d8;
    border-radius: 6px;

    background: #fff;
}


/* =========================================================
   LEGACY SINGLE HEADER
   ========================================================= */

.uniskin-legacy-detail-header {
    position: relative;

    padding-right: 32px;
}

.uniskin-legacy-detail-type {
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.uniskin-legacy-detail-header h1 {
    max-width: 800px;

    margin: 0 0 18px;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height: 1.15;
}

.uniskin-legacy-detail-lead {
    max-width: 800px;

    margin: 0;

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   DEADLINE DOT ON SINGLE PAGE
   ========================================================= */

.uniskin-legacy-detail-dot {
    top: 0;
    right: 0;
}


/* =========================================================
   LEGACY SINGLE META
   ========================================================= */

.uniskin-legacy-detail-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    margin-top: 30px;
    padding-top: 24px;

    border-top: 1px solid #e5e5e5;
}

.uniskin-legacy-detail-meta div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.uniskin-legacy-detail-meta span {
    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.uniskin-legacy-detail-meta strong {
    font-size: 16px;
}


/* =========================================================
   LEGACY SINGLE CONTENT
   ========================================================= */

.uniskin-legacy-detail-content {
    margin-top: 30px;
    padding-top: 28px;

    border-top: 1px solid #e5e5e5;

    line-height: 1.75;
}

.uniskin-legacy-detail-content p:first-child {
    margin-top: 0;
}

.uniskin-legacy-detail-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LEGACY SINGLE CTA
   ========================================================= */

.uniskin-legacy-detail-action {
    margin-top: 30px;
}


/* =========================================================
   LEGACY ARCHIVE DETAIL LINK
   ========================================================= */

.uniskin-community
a.uniskin-legacy-detail-link {
    display: inline-block;

    margin-top: 12px;

    color: #0b5c7a !important;

    font-weight: 600;

    text-decoration: none !important;
}

.uniskin-community
a.uniskin-legacy-detail-link:hover {
    text-decoration: underline !important;
}


@media (max-width: 768px) {

    .uniskin-legacy-detail {
        padding: 22px;
    }

    .uniskin-legacy-detail-meta {
        gap: 22px;
    }

}

</style>