SEO SECTION

add_action('woocommerce_after_shop_loop', 'woocommerce_after_shop_loop_bottom_category', 35);
if (!function_exists('woocommerce_after_shop_loop_bottom_category')) {
	function woocommerce_after_shop_loop_bottom_category() {
		if (is_shop()) {
			echo do_shortcode('
Block "seo-headlines" not found
');
		} else {
			if (is_product_category()) {
				$cat = get_queried_object();
				$taxonomy = $cat->taxonomy;
				$term_id = $cat->term_id;
				$seo = get_field('seo', $taxonomy . '_' . $term_id);
				if ($seo != '') {
					?>
                        <section class="section st-seo seo-headlines-section has-block tooltipstered" >
							<div class="section-content relative">
								<div class="row align-center row-seo-headlines">
									<div class="col pb-0  small-12 large-12">
										<div class="col-inner text-center">
                                            <div class="text more txt-seo text-less-more text-left">
                                                <?php echo $seo; ?>
                                            </div>
                                            <a class="button primary btn-readmore">
                                                <span><?php echo __('Mehr lesen','tzn');?></span>
                                            </a>
                                            <a class="button primary is-outline btn-readless hidden">
                                            <span><?php echo __('Weniger lesen','tzn');?></span>
                                            </a>
                                        </div>  
							        </div>
								</div>
							</div>
						</section>
                    <?php
				} 
			}
		}
	}
}

$('.btn-readmore').click(function (e) {
        e.preventDefault();
        $(this).hide();
        $('.st-seo .txt-seo').addClass('active');
    });
    $('.btn-readless').click(function (e) {
        e.preventDefault();
        $('.btn-readmore').show();
        $('.st-seo .txt-seo').removeClass('active');
    });

.st-seo .txt-seo.active + .button + .btn-readless{
    display: inline-block!important;
    visibility: visible!important;
}
.st-seo .txt-seo:not(.active){
    overflow: hidden;
/*     display: -webkit-box;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    -webkit-box-orient: vertical; */
    text-align: left;
    position: relative;
	    height: 30rem;
}
.st-seo .txt-seo p{
    text-align: left;
}
.st-seo .txt-seo{
    max-width: 45rem;
    margin-inline: auto;
}
.st-seo .txt-seo:not(.active):after {
    content: '';
    height: 58px;
    background: transparent linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF 100%);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.st-seo a.button.primary.btn-readmore:hover{
    background: transparent !important;
    color: #000000 !important;
}
.st-seo a.button.primary.btn-readmore {
    border: 0 !important;
    height: auto !important;
    line-height: initial !important;
    text-decoration: underline !important;
    padding: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    font-size: .813rem !important;
    background-color: transparent !important;
}