/*------------------------------------*\
    
    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/

.readmore {
    display: flex;
    flex-direction: column;
}

.readmore__content {
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
}

.readmore.is-collapsible .readmore__content::after {
    content: '';
    display: block;
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 22;
    background: transparent;
    /* background: linear-gradient(to bottom,rgb(255, 255, 255, 1),rgb(255, 255, 255, 1)); */
    background: linear-gradient(to bottom, rgb(242, 243, 255, 0), rgb(242, 243, 255, 1));
}

.readmore.is-expanding.is-collapsible .readmore__content::after,
.readmore.is-expanded.is-collapsible .readmore__content::after {
    opacity: 0;
}

.readmore__expander {
    display: inline-block !important;
    align-self: flex-end;
    margin-top: 20px;
    width: auto !important;
    position: relative;
    text-decoration: none;
}

/* .readmore.is-expanding.is-collapsible .readmore__expander,
.readmore.is-expanded.is-collapsible .readmore__expander {
    margin-top: 0;
} */

.readmore__expander::before {
    transform: rotate(90deg);

    transition: transform 0.25s ease-in-out;
}

.readmore.is-expanded .readmore__expander::before {
    transform: rotate(270deg);
}

/* Special Case */
/* Better to move to woocommerce related stylesheet file */
/* .woocommerce ul.products li.product:nth-child(odd) .readmore__expander {
    margin-top: 0;
} */

.woocommerce ul.products li.product:nth-child(even) .readmore.is-collapsible .readmore__content::after {
    background: linear-gradient(to bottom, rgb(242, 243, 255, 0), rgb(242, 243, 255, 1));
}