.chooser-results {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-radius: 6px 6px 0 0;
    border: 1px solid rgba(0, 43, 70, 0.20);
    background: #F8F8F8;

    .chooser-results-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
    }

    .chooser-results-title {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .chooser-results-subtitle {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .chooser-results-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    &.is-empty .chooser-results-footer-item--restart {
        display: none;
    }

    .chooser-results-skeleton {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .chooser-results-skeleton-bar {
        display: block;
        align-self: stretch;
        border-radius: 6px;

        /*
         * Flat grey at rest. The placeholder is shown both before the visitor has
         * finished answering and while a result is being fetched, and only the second of
         * those is a wait worth animating.
         */
        background-color: #EAEAEA;
        background-image: linear-gradient(90deg, #EAEAEA 35%, #FBFBFB 50%, #EAEAEA 65%);
        background-repeat: no-repeat;
        background-size: 300% 100%;
        background-position: 150% 0;
    }

    /*
     * A sheen sweeping across the placeholder, only while a request is actually in
     * flight. The flow adds .is-loading when it sends and removes it when the answer
     * comes back, so nothing pulses at a visitor who is still choosing.
     */
    &.is-loading .chooser-results-skeleton-bar {
        animation: chooser-skeleton-sheen 1.8s ease-in-out infinite;
    }

    .chooser-results-skeleton-bar--lg {
        height: 96px;
    }

    .chooser-results-skeleton-bar--md {
        height: 24px;
    }

    .chooser-results-skeleton-bar--sm {
        width: 164px;
        height: 24px;
        align-self: flex-start;
    }

    .chooser-results-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        border-radius: 5px;
        background: var(--white, #FFF);
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
    }

    .chooser-results-card--product {
        padding: 46px 26px;
        align-items: flex-start;
        gap: 16px;
    }

    .chooser-results-product-brand {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 19px;
        margin: 0;
    }

    .chooser-results-product-brand:before {
        content: " ";
        width: 17.8px;
        height: 20px;
        background-image: url("../../../../layout/components/can-be-used-block/assets/icons/Component_@2x.webp");
        background-repeat: no-repeat;
        display: inline-block;
        background-size: cover;
        margin-inline-end: 8px;
    }

    .chooser-results-product-subtitle {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin: 0;
        display: -webkit-box;
        word-break: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .chooser-results-product-main {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }

    .chooser-results-product-image {
        width: 126.146px;
        height: 219.539px;
        padding: 0;
        margin-inline-end: 30px;
        object-fit: contain;
        object-position: top;
    }

    .chooser-results-product-meta {
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }


    .chooser-results-product-title {
        overflow-wrap: anywhere;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: normal;
        text-align: left;
        color: #002b46;
        display: -webkit-box;
        word-break: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: fit-content;
        margin: 0;
    }

    .chooser-results-product-analysis {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; 
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    .chooser-results-product-te {
        color: rgba(0, 43, 70, 0.7);
        margin-top: 0;
    }

    .chooser-results-link {
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px; /* 175% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        margin-top: 8px;
    }


    .chooser-results-brand-logo {
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--Dark-Grey, #D9D9D9);
        justify-content: center;
        align-items: center;
        padding: 24px 40px;
    }

    .chooser-results-brand-logo img {
        width: 261px;
        height: 96px;
        aspect-ratio: 87/32;
        object-fit: contain;
    }

    .chooser-results-brand-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 24px 20px;
    }

    .chooser-results-brand-subtitle {
        margin: 0;
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        line-height: 120%;
    }

    .chooser-results-calculator-image {
        height: 129px;
        width: 100%;
        align-self: stretch;
        border-radius: 5px 5px 0 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .chooser-results-calculator-image.unit_converter {
        background-image: url("../../../digital-tools_home/assets/images/nutrient-converter_calculator-mobile.svg");
    }

    .chooser-results-calculator-image.crf_timer {
        background-image: url("../../../digital-tools_home/assets/images/crf_calculator-mobile.svg");
    }

    .chooser-results-calculator-image.pekacid {
        background-image: url("../../../digital-tools_home/assets/images/pekacid_calculator-mobile.svg");
    }

    .chooser-results-calculator-image.nutrient_blend_tool {
        background-image: url("../../../digital-tools_home/assets/images/nutrient-blend_calculator-mobile.svg");
    }

    .chooser-results-calculator-image.crf_chooser {
        background-image: url("../../../digital-tools_home/assets/images/CRF chooser mobile.svg");
    }

    .chooser-results-calculator-image.wsf_chooser {
        background-image: url("../../../digital-tools_home/assets/images/WSF Chooser mobile.svg");
    }

    .chooser-results-calculator-image.top_dressing_chooser {
        background-image: url("../../../digital-tools_home/assets/images/Topdressing chooser mobile.svg");
    }

    .chooser-results-calculator-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        padding: 24px;
    }

    .chooser-results-calculator-title {
        margin: 0 0 8px;
        color: var(--Primary-blue, #002B46);
        text-align: center;
        -webkit-text-stroke-width: 0.3px;
        -webkit-text-stroke-color: #002B46;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
    }

    .chooser-results-calculator-subtitle {
        margin: 0;
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
    }

    .chooser-results-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        align-self: stretch;
    }

    .chooser-results-footer-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .chooser-results-footer-label {
        margin: 0;
        color: var(--Primary-blue, #002B46);
        font-family: Inter;
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;
    }

    .chooser-results-btn {
        display: flex;
        height: 50px;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        width: 100%;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .chooser-results-btn--primary {
        border-radius: 5px;
        background: var(--Primary-turquoise-blue, #00B5D3);
        border: 1px solid var(--Primary-turquoise-blue, #00B5D3);
        color: #fff;
    }

    .chooser-results-btn--outline {
        border-radius: 5px;
        border: 1px solid var(--Primary-turquoise-blue, #00B5D3);
        background: var(--White, #FFF);
        color: #00B5D3;
    }


    @media (max-width: 768px) {
        width: 100%;
        padding: 40px 20px;
        border-radius: 0;
        border: none;

        .chooser-results-header {
            gap: 12px;
        }

        .chooser-results-title {
            font-weight: 400;
            line-height: 110%;        
        }

        .chooser-results-subtitle {
            font-size: 16px;
            line-height: 28px;
        }

        .chooser-results-product-image {
            width: 108.772px;
            height: 189.303px;
        }

        .chooser-results-calculator-image {
            height: 113px;
        }

        .chooser-results-calculator-title {
            margin: 0 0 12px;
            font-family: Demo;
            font-size: 20px;
            font-weight: 400;
        }
    
        .chooser-results-calculator-subtitle {
            font-size: 16px;
        }

    }
}

/*
 * The skeleton sheen. Declared outside .chooser-results because keyframes are global and
 * nesting them would not register the name.
 */
@keyframes chooser-skeleton-sheen {
    from {
        background-position: 150% 0;
    }
    to {
        background-position: -150% 0;
    }
}

/* Someone who has asked the system for less motion gets a still placeholder. */
@media (prefers-reduced-motion: reduce) {
    .chooser-results .chooser-results-skeleton-bar {
        animation: none;
        background-image: none;
    }
}