/* ===============
ARTICLES
=============== */
.sn__article-recipe-serving {
    display: flex;
    background: var(--clr-neutral-100);
    padding-block: var(--spacing-1-6);
    padding-inline: var(--spacing-1-6);
    border-radius: var(--rounded-sm);
    justify-content: space-around;
    align-items: center;
    gap: var(--spacing-2);
    text-align: center;
    .hdt-title {
        font-size: var(--text-base);
        font-weight: var(--font-normal);
    }
    p {
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
    }
}

.sn__article-promo-info {
    .sn__article-promo-info-block {
        background: #fff;
        padding: var(--spacing-3);
        gap: var(--spacing-2);
        i {
            font-size: 3rem;
        }
    }
}

.sn__article-related-products-slider {
    .hdt-title {
        margin-block-end: var(--spacing-2);
    }
    .sn__article-related-products-item {
        display: grid;
        grid: 1fr / 11.4rem minmax(0, 1fr) auto;
        align-items: center;
        background: var(--clr-neutral-100);
        padding: var(--spacing-1);
        border-radius: var(--rounded-sm);
        column-gap: 2rem;
        h3 {
            font-size: var(--text-base);
            margin-block-end: .4rem !important;
        }
        .hdt-open-quickview-btn, .hdt-product-card-btn--atc {
            margin-block-start: 0;
            position: absolute;
            top: var(--spacing-2);
            right: var(--spacing-2);
            .hdt-inner-btn {
                --padding-button: var(--spacing-1-4);
                width: var(--spacing-5);
                height: var(--spacing-5);
                background: var(--color-background);
                color: var(--color-foreground);
                font-size: var(--text-lg);
                &:hover {
                    color: var(--color-btn-secondary);
                }
            }
            span.sr-only-mobile {
                display: none;
            }
        }
        @media (width <= 576px) {
            grid: 8rem / 8rem minmax(0, 1fr) auto;
            a {
                max-width: 8rem;
            }
        }
    }
    .swym-wishlist-collections-v2 {
        display: none !important;
    }
}

/* ===============
Blog Posts/Article Page
================ */
.hdt-section__main-article blockquote {
    background-color: oklch(1 0 0);
    padding: 2rem;
    font-size: var(--h5-size-xl);
    border-radius: 1.6rem;
    display: block;
    border: none;
    text-align: inherit;
    margin-top: 1.5rem;
    @media (min-width: 1025px) {
        font-size: var(--rte-h5-size-xl);
        padding: 4rem;
    }
    &:after,&:before {
        content: none;
    }
}

.hdt-section__main-article table {
    border-radius: 0.4rem;
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0.8rem;
    margin-left: -0.8rem;
}

.hdt-section__main-article table tbody tr:first-child td,
.hdt-section__main-article table tbody tr td:first-child {
    background-color: var(--clr-neutral-700);
    color: oklch(1 0 0);
}

.hdt-section__main-article table tbody tr td {
    border-radius: 0.4rem;
    border: none;
    background-color: var(--clr-neutral-200);
}

.hdt-main-article-content {
    h1 {
        --heading-size: var(--h3-size);
    }
    h2 {
        --heading-size: var(--h4-size);
    }
    h3 {
        --heading-size: var(--h5-size);
    }
    h4 {
        --heading-size: var(--h6-size);
    }
    
    /* RFS: Responsive Font Sizes */
    @media only screen and (min-width: 768px) {
        h1 {
            --heading-size: clamp(var(--h3-size), max(calc(var(--h3-size) + .3vw), calc(1.3rem + .6vw)), var(--h3-size-xl));
        }
        h2 {
            --heading-size: clamp(var(--h4-size), max(calc(var(--h4-size) + .2vw), calc(1.275rem + .3vw)), var(--h4-size-xl));
        }
        h3 {
            --heading-size: clamp(var(--h5-size), max(calc(var(--h5-size) + .14vw), 1.25rem), var(--h5-size-xl));
        }
        h4 {
            --heading-size: clamp(var(--h6-size), max(calc(var(--h6-size) + .1vw), 1rem), var(--h6-size-xl));
        }
    }

    @media only screen and (min-width: 1150px) {
        h1 {
            --heading-size: var(--h3-size-xl);
        }
        h2 {
            --heading-size: var(--h4-size-xl);
        }
        h3 {
            --heading-size: var(--h5-size-xl);
        }
        h4 {
            --heading-size: var(--h6-size-xl);
        }
    }
}

/* For Printing */
@media print {
  @page { 
    size: portrait;
  }
  header, footer {
    display: none;
  }
  #MainContent {
    display: block;
  }
}