/**
 * PDP Template/Pattern Styles
**/

/* Icon/Imag Hero */
.image-icon__container figure {
    width: 100%;
}

.image-icon__container img {
    object-fit: contain;
}

/* Icon List */
.icon-list__container,
.icon-list__container .wp-block-buttons {
    width: 100%;
}

.icon-list__item {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.icon-list__item--pdp {
    padding: 8px 0;
}

.icon-list__item--pdp:not(:first-child) {
    margin-top: 12px !important;
}

.icon-list__item svg {
    width: 48px;
    height: 48px;
    flex: 1 0 48px;
    align-self: baseline;
}

/* Publicity Banner */
.publicity-banner__container {
    justify-items: center;
}

.publicity-banner__container img {
    vertical-align: unset;
}

.publicity-banner__usat {
    width: 72px;
    height: 28px;
    opacity: 50%;
}

.publicity-banner__forbes {
    width: 70px;
    height: 18px;
    opacity: 50%;
}

.publicity-banner__abc {
    width: 80px;
    height: 28px;
    opacity: 50%;
}

.publicity-banner__health {
    width: 86px;
    height: 14px;
    opacity: 50%;
}

.publicity-banner__ncoa {
    width: 64px;
    height: 24px;
}

/* Icon/Text Callout */
.icon-text-callout__container>div {
    gap: 48px;
}

.trust__star-rating {
    width: 100%;
}

/* Key Features */
.key-features__container ul {
    padding-inline-start: 24px;
}

.key-features__container {
    border-left: 1px solid #E6E6E6;
    padding-left: 24px;
}

.key-features__container ul li:not(:last-child) {
    margin-bottom: 6px;
}

/* Product Comparison Cards */
.product-comparison__container--pdp {
    align-items: end;
}

.product-comparison__card {
    box-shadow: 0 4px 72px 0 rgba(81, 84, 107, 0.03), 0 6px 6px 0 rgba(81, 84, 107, 0.08);
    flex: 1 0 296px;
}

.product-comparison__card--viewing {
    text-align: center;
    flex: 1 0 304px;
}

.product-comparison__card--viewing>p {
    display: inline-block;
}

.product-comparison__card img {
    aspect-ratio: 26/20;
    object-fit: cover;
}

.product-comparison__deal p {
    border-right: 1px solid #FAD000;
    border-left: 1px solid #FAD000;
    width: 100%;
    text-align: center;
}

.product-comparison__container {
    max-width: 1280px;
    overflow-x: scroll;
    padding-bottom: 12px;
}

.product-comparison__deal p:first-of-type {
    border-top: 1px solid #FAD000;
    border-top-left-radius: 99px;
    border-top-right-radius: 99px;
}

.product-comparison__deal p:last-of-type {
    border-bottom: 1px solid #FAD000;
    border-bottom-left-radius: 99px;
    border-bottom-right-radius: 99px;
}

.image-text-card__container--centered {
    margin-top: 72px;
}

.image-text-card__container--centered figure img,
.image-text-card__container figure img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.icon-text__icon {
    height: 72px;
    width: 72px;
    text-align: center;
    align-content: center;
}

.icon-text__container .icon-text__icon {
    flex: 1 0 72px;
}

.testimonial__cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.testimonial__card {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    margin: 0;
}

.testimonial__card-top {
    padding-bottom: 32px;
}

.testimonial__card-bottom {
    border-top: 1px solid #E6E6E6;
    margin-top: auto;
    padding-top: 32px;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.testimonial__card-bottom>div:last-of-type {
    justify-self: end;
}

.payment-group__container figure {
    width: 58px;
    height: 40px;
}

.order-now__container--gradient {
    position: relative;
    background: linear-gradient(180deg, #FFF 0%, #E7EEFA 100%), linear-gradient(180deg, #FFF 0%, #E7EEFA 100%);
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.order-now__container--gradient>div:first-of-type {
    margin-top: 72px;
}

.order-now-cta__container .wp-block-buttons {
    width: 100%;
}

.order-now-cta__button-wrapper--desktop {
    display: none !important;
}

/******************
 * Responsive
 ******************/
@media screen and (min-width: 736px) {
    .title__container h2 {
        font-size: 64px !important;
    }

    .publicity-banner__container {
        grid-template-columns: repeat(6, auto);
        justify-content: center;
    }

    .trust__star-rating {
        width: unset;
    }

    .image-text-card__container {
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
    }

    .image-text-card__container--centered {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
}

@media screen and (min-width: 1280px) {
    .collections-pattern__wrapper>* {
        margin-block-start: 104px;
    }

    .title__banner {
        flex-grow: 0;
    }

    .image-icon__container {
        flex-direction: row;
    }

    .image-icon__container figure {
        flex: 1 0 616px;
    }

    .icon-list__container {
        flex: 1 0 0;
    }

    .icon-text-callout__container {
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
    }

    .icon-text-callout__container>div {
        justify-content: space-between;
        width: 1280px;
        margin: 0 auto;
    }

    .feature__container h2 {
        text-align: left;
    }

    .quality__container p,
    .product-comparison__wrapper>div:first-of-type p,
    .order-now-cta__container p,
    .satisfaction__heading-wrapper p,
    .testimonials__heading-wrapper p {
        font-size: 24px;
    }

    .trust-key-features__wrapper {
        display: flex;
        flex-direction: row;
        gap: 72px;
    }

    .trust__container * {
        text-align: left;
    }

    .trust__container {
        flex-direction: column;
        align-items: baseline;
        margin: 0;
        flex: 3 0 0;
    }

    .trust__star-rating {
        flex-direction: row;
        align-items: center;
        border-radius: 99px !important
    }

    .key-features__container {
        flex: 2 0 0;
        margin: 0;
        margin-top: 0 !important;
    }

    .callout__container {
        padding: 72px !important;
    }

    .product-comparison__card--viewing,
    .product-comparison__card {
        flex: 1 0 410px;
    }

    .product-comparison__deal {
        flex-direction: row;
        width: fit-content;
    }

    .product-comparison__deal p:first-of-type {
        border-top-left-radius: 99px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 99px;
        border-top: 1px solid #FAD000;
        border-right: none;
        border-bottom: 1px solid #FAD000;
        padding: 8px 8px 8px 16px !important;
        white-space: nowrap;
        font-size: 16px;
    }

    .product-comparison__deal p:last-of-type {
        border-top-right-radius: 99px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 99px;
        border-top: 1px solid #FAD000;
        border-left: none;
        padding: 8px 16px 8px 8px;
        white-space: nowrap;
        font-size: 16px;
    }

    .product-comparison__container {
        overflow-x: unset;
    }


    .icon-text__container {
        flex-direction: row;
    }

    .icon-text__container>div {
        flex: 1 0 0;
        align-items: flex-start;
    }

    .icon-text__container--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .icon-text__container--row .icon-text__icon {
        flex: 1 0 72px;
    }

    .icon-text__row {
        flex-direction: column;
        align-items: baseline;
    }

    .testimonial__cards-wrapper {
        flex-direction: row;
        align-items: stretch;
    }

    .order-now__container--gradient>div:first-of-type {
        margin-top: 104px;
    }

    .order-now-cta__container {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 72px;
    }

    .order-now-cta__container div>* {
        text-align: start;
    }

    .order-now-cta__container>div {
        flex: 1 0 861px;
    }

    .order-now-cta__container>div:first-of-type {
        align-items: baseline;
    }

    .order-now-cta__container>div {
        flex: 1 0 0;
    }

    .order-now-cta__container .wp-block-buttons {
        width: unset;
    }

    .order-now-cta__button-wrapper--mobile {
        display: none !important;
    }

    .order-now-cta__button-wrapper--desktop {
        display: block !important;
    }

    .payment-details__container {
        margin-top: 72px;
    }

    .order-now-cta__heading-wrapper p {
        font-size: 20px;
    }
}