/*
Theme Name: Circles WP
Theme URI: https://haurand.com/circles-wp-block-theme/
Author: Hans-Gerd Gerhards
Author URI: https://haurand.com
Description: Circles WP is a clean, flexible, fast and accessibility-ready block theme. Its default look is a stylish white on black background color scheme with an orange circle in background and lexend font (a sans-serif typography).  It is possible to change the background graphic with the Circles WP. 10 Circles WP with different colors are supplied in the \assets\images folder as SVG graphics. Circles WP is built from the ground up for flexibility. It includes ten different theme styles to choose from, and different block patterns that you can use to quickly create unique page layouts.  Circles WP is suitable for websites that contain few photos. The theme is therefore not suitable for photo-heavy websites.Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circles-wp
Tags: blog, portfolio, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, full-site-editing

/* Only for pattern "Show Image in full width container" */
.circles_wp_show_image {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.circles_wp_show_image figure {
    width: 90%;
}

:root {
    --sd-main-color: #decc7c;
    --sd-second-color: #33302e;
    --sd-light-grey-color: #efefef;
    --sd-radius-20: 20px;
    --sd-radius-40: 40px;
}

.wp-block-read-more {
    text-align: center;
}

header {
    margin-bottom: 40px;
}

header .wp-block-site-logo {
    text-align: center;
}

header .wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon {
    padding: unset;
}

.sd-header-group {

}

.wp-block-navigation__responsive-container-open {
    background-color: #fff;
    color: var(--sd-second-color);
    border-radius: var(--sd-radius-40);
    padding: 0.6rem 2rem;
}

.wc-block-grid.has-3-columns > .wc-block-grid__products {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.wc-block-grid.has-3-columns > .wc-block-grid__products .wc-block-grid__product {
    flex: unset;
    margin-bottom: unset;
    padding: unset;
    max-width: 100%;
}

.sd-product-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
}

.sd-product-buttons > * {
    flex-grow: 1;
}

.sd-product-buttons > .wp-block-button > .wp-element-button {
    width: 100%;
}

.wp-element-button {
    background-color: var(--sd-main-color);
    color: var(--sd-second-color);
    border-radius: var(--sd-radius-40);
    text-align: center;
}

a.wp-element-second-button, .wp-element-button.wp-element-second-button, .wp-element-second-button > .wp-element-button  {
    background-color: var(--sd-second-color);
    border: 1px solid var(--sd-main-color);
    color: var(--sd-main-color);
}

.wp-element-button:hover {
    outline: none;
}

.wc-block-grid__product .wc-block-grid__product-image,
.wc-block-grid__product-image.wc-block-components-product-image {
    position: relative;
    display: grid;
    align-items: center;
    border-radius: var(--sd-radius-20);
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    height: 0;
    padding-bottom: 80%;
}

.wc-block-grid__product-image > .sd-brand-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--wp--preset--font-size--small);
    text-transform: uppercase;
    padding: 8px 40px;
    border-radius: var(--sd-radius-20);
    background-color: var(--sd-light-grey-color);
    color: var(--sd-second-color);
    z-index: 1;
}

.wc-block-grid__product-image > img,
.wc-block-grid__product-image.wc-block-components-product-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    position: absolute;
}

.wc-block-grid__product, .wc-block-grid__product > a{
    text-decoration: none;
}

.wc-block-grid__product .wc-block-grid__product-title {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 500;
    text-align: left;
    margin-top: 40px;
}

.wc-block-grid__product .wc-block-grid__product-description {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--cyan-bluish-gray);
    text-decoration: none;
    text-align: left;
    margin-bottom: 40px;
}

.gutena-tabs-block>.gutena-tabs-tab {
    row-gap: 10px;
}

.gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title:hover {
    background-color: #f7f7f7;
}

.gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title,
.gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title:hover,
.gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title.inactive,
.gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title.active {
    padding-left: 30px;
    padding-right: 50px;
    margin-left: -17px;
    margin-right: -17px;
    border: unset;
    border-radius: 20px;
    z-index: unset;
}

@media (min-width: 998px) {
    .only-mobile {display: none!important;}
}

@media (max-width: 997px) {
    .only-desktop {display: none!important;}
    header .sd-header-group {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;

    }

    .wc-block-grid.has-3-columns > .wc-block-grid__products {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px 10px;
    }

    .wc-block-grid__product .wc-block-grid__product-image {
        padding-bottom: 140%;
    }

    .wc-block-grid__product-image.wc-block-components-product-image {
        padding-bottom: 60%;
    }

    .wc-block-grid__product-image > .sd-brand-badge {
        font-size: 0.8rem;
        padding: 8px 25px;
    }
}

@media (max-width: 550px) {
    header .sd-header-group {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }

    header .sd-header-group .wp-block-site-logo{
        grid-column: span 2;
        order: -1;
    }
}