/* Archive header */

.header-pattern {
    height: min(75vmax, 40rem);
}

.header-pattern .slice-1 {
    left: 0;
    bottom: 10%;
    transform: translate(-50%, 0) rotate(-210deg);
}

.header-pattern .slice-2 {
    right: 0;
    top: 25%;
    transform: translate(45%, 0) rotate(75deg);
}


/* Product grid */

.filters {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5em;
    justify-content: center;
    max-width: var(--container-xl);
    margin: var(--space-3) auto;
}

.product-cats, .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5em .75em;
    list-style: none;
    padding: 0 0 .5em;
    margin: 0;
    font-size: var(--h5);
}

.product-tags {
    column-gap: .25em;
}

@media (max-width: 768px) {
    .product-cats, .product-tags {
        flex: 1 1 360px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-inline: var(--site-padding);
    }
}

.product-cats a, .product-tags a {
    display: inline-block;
    color: var(--green-dark);
    background-color: var(--white);
    text-decoration: none;
    font-weight: var(--bold);
    padding: .625em .5em;
    line-height: 1.25;
    border-radius: 1.5em;
}

.product-cats a:hover, .product-tags a:hover {
    color: var(--green);
    text-decoration: none;
}

.product-cats a:active, .product-tags a:active {
    transform: translateY(1px);
    background-color: var(--dim);
}

.product-cats a {
    padding-inline: 1em;
    box-shadow: inset 0 0 0 3px currentColor;
}

.product-cats .active a {
    color: var(--white);
    background-color: var(--green);
    box-shadow: inset 0 0 0 3px var(--green);
}

.product-tags a {
    position: relative;
    padding-inline: 1.875em .5em;
}

.product-tags a:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - .5em);
    left: .5em;
    box-shadow: inset 0 0 0 3px currentColor;
}

.product-tags .active a {
    color: var(--green);
}

.product-tags .active a:before {
    box-shadow: none;
    background-color: currentColor;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFFAEF" d="M9.45878 17.9379L4 12.4908L6.07589 10.4091L9.45584 13.7831L17.239 6L19.3178 8.07883L9.45878 17.9379Z" /></svg>');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}


/* Product grid product */

/* The products are defined in woocommerce-common.css */