/* --------------------------- Layout -------------------------- */

#page-layout
{
    display: grid;
    grid-template-columns: 100%;
    position: relative;
}

.content-area
{
    padding: var(--padding_content_area) var(--gap_spacing_default);
}

.content-area p, .content-area ul, .content-area ol, .content-area address,
html .kt-row-column-wrap p, html .kt-row-column-wrap ul, html .kt-row-column-wrap ol, html .kt-row-column-wrap address,
.product-description ul, .icon-section-list-item-content ul
{
    margin-bottom: var(--gap_spacing_default);
}

.content-area ul li,
html .kt-row-column-wrap ul li,
.product-description ul li,
.icon-section-list-item-content ul li
{
    padding-left: 1em;
}

.content-area ul li::before,
html .kt-row-column-wrap ul li::before,
.product-description ul li::before,
.icon-section-list-item-content ul li::before
{
    content: "•";
    color: var(--theme_color_secondary);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.content-area ol,
html .kt-row-column-wrap ol
{
    list-style: none;
    counter-reset: li;
    margin-left: var(--gap_spacing_default);
    margin-bottom: var(--gap_spacing_default);
}

.content-area ol li::before, 
html .kt-row-column-wrap ol li::before
{
    content: '.' counter(li);
    color: var(--theme_color_secondary);
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em;
    text-align: right;
    direction: rtl;
}

.content-area ol li,
html .kt-row-column-wrap ol li
{
    counter-increment: li;
    margin-bottom: 10px;
}

.content-area p:last-child, .content-area ul:last-child, .content-area ol:last-child,
html .kt-row-column-wrap p:last-child, html .kt-row-column-wrap ul:last-child, html .kt-row-column-wrap ol:last-child,
.product-description ul:last-child
{
    margin-bottom: 0;
}

.error404 .not-found
{
    text-align: center;
    padding: var(--padding_content_area) var(--gap_spacing_default);
}

.search-no-results, .search-results h1.entry-title
{
    text-align: center;
}

@media (max-width: 500px) {

    #page-layout h1
    {
        font-size: var(--heading_tag_size);
        line-height: var(--heading_tag_line_height);
        margin-bottom: var(--gap_spacing_large);
    }

}

@media (max-width: 400px) {
    
    #page-layout h1
    {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: var(--gap_spacing_large);
    }
    
}