/*
Theme Name: 3decor
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: fresh-blog-lite
*/

* {
    transition: all 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

.bg-blur {
    backdrop-filter: blur(8px);
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0;
    gap: 8px;
}
.wp-block-woocommerce-product-categories .wc-block-product-categories-list .wc-block-product-categories-list-item {margin:0; display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;}
.wp-block-woocommerce-product-categories .wc-block-product-categories-list .wc-block-product-categories-list-item a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    width: 140px;
    height: 50px;
        background: rgba(0,0,0,0.4);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        outline: var(--wp--preset--color--primary) 1px solid;
    text-decoration: none;
    &:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        outline: var(--wp--preset--color--primary) 4px solid;
    }

    & .wc-block-product-categories-list-item__name {
        position:absolute;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
    border-radius: 12px;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        color:#fff;
        font-size:1.4rem;
        font-weight: bold;
    }
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list .wc-block-product-categories-list-item a .wc-block-product-categories-list-item__image {
  display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: 12px;
    width: 100%!important;
    height: 100%!important;
    margin:0;
    padding:0;
    border-radius: 12px;
    max-width:100%;
    & img {
        width: 100%!important;
        height: 100%!important;
    filter: blur(8px) opacity(0.8);
    border-radius: 12px;
    }
}