:root {
    --gap: 2rem;
}

@media screen and (max-width: 768px) {
    :root {
        --gap: 1rem;
    }
}

mark {
    background: none;
}

.aligncenter,
.align-center {
    text-align: center;
}

.woocommerce div.product {
    margin-bottom: 0;
    position: relative;
    margin: 0;
}

.woocommerce img,
.woocommerce-page img {
    height: auto;
    max-width: 100%;
    width: 100%;
    margin: 0;
    display: block;
}

.product-item-img {
    overflow: hidden;
    position: relative;
}

.product_meta,
.product_meta a {
    color: #5a5a5a;
    text-decoration: none !important;
    border: none;
    font-size: small;
}

#sizes {
    float: right;
    color: inherit;
    border-width: 1px;
    color: #000;
    font-size: small;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline !important;
    text-underline-thickness: 1px;
    text-underline-offset: 8px;
    margin-top: 2rem;
}

.hover {
    position: absolute;
    overflow: hidden;
    top: 0;
    height: 100%;
    width: 100%;
}

.hover img {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    object-fit: cover;
    height: 100% !important;
    width: 100%;
}

.hover:hover img {
    opacity: 1;
}

.stay-fixed {
    position: sticky;
    top: 50px;
    padding: 0 clamp(0, 2vw, var(--wp--style--root--padding-left));
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb span {
    color: #5a5a5a !important;
    font-size: small !important;
}

.woocommerce .woocommerce-breadcrumb {
    margin: 2rem 0 !important;
}

.product-images ul,
.product-images li {
    display: block;
    margin: 0;
    padding: 0;
}

.product-images img {
    width: 100%;
}

.woocommerce-loop-product__title,
.woocommerce-loop-category__title {
    font-size: 1.5rem;
}

.woocommerce-LoopProduct-link {
    color: inherit;
}

.row,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    clear: both;
}

.column-2 > div {
    width: calc((100% - (1 * var(--gap))) / 2)
}

.column-3 > div {
    width: calc((100% - (2 * var(--gap))) / 3)
}

.column-4 > div {
    width: calc((100% - (3 * var(--gap))) / 4)
}

.column-5 > div {
    width: calc((100% - (4 * var(--gap))) / 5)
}

.column-6 > div {
    width: calc((100% - (5 * var(--gap))) / 6)
}

@media screen and (min-width: 768px) and (max-width:1024px) {

    .column-4 > div,
    .column-5 > div,
    .column-6 > div {
        width: calc((100% - (2 * var(--gap))) / 3)
    }
}

@media screen and (max-width: 479px) {

    .column-2 > div,
    .column-3 > div {
        width: calc((100% - (1 * var(--gap))) / 2)
    }

    .column-4 > div,
    .column-5 > div,
    .column-6 > div {
        width: calc((100% - (1 * var(--gap))) / 2)
    }



    .single-product .column-2 > div {
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    .product-images ul {
        display: flex;
        gap: 0px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
        -webkit-overflow-scrolling: touch;
        scroll-padding: 1rem;
    }

    .product-images li {
        scroll-snap-align: center;
        flex: 0 0 100%;
        text-align: center;
    }

    .product-images ul::-webkit-scrollbar {
        width: 18px;
        margin: 1rem 0;
    }

    .product-images ul::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 10px
    }

    .product-images ul::-webkit-scrollbar-thumb {
        background: #000;
        border-radius: 10px;
        border: 6px solid #fff
    }

    .product-images ul::-webkit-scrollbar-thumb:hover {
        background: #555
    }
}

.woocommerce-products-header {
    text-align: center;
}

.related.products > h2 {
    text-align: center;
}

.shop-alert {
    padding: 1rem 1.5rem;
    background: #eee;
    margin-bottom: 2rem;
}