.product-container {
    gap: 32px;
} 

ul.columns-2.product-container.odd-items li:last-child {
    grid-column: span 2; /* This will shift the last item to center */
    justify-self: center;
}

ul.columns-2.product-container li {
    max-width: 640px;
    
}

ul.columns-2.product-container li figure img {
    width: 100%;
    height: 260px;
    position: relative;
    max-width: 331.91px;
    object-fit: contain !important;
    transition: all 0.5s ease-in-out;
}

ul.columns-2.product-container li figure {
    text-align: center;
    margin-bottom: 0px;
    padding: 18px 0px;
    position: relative;
}

ul.columns-2.product-container li .wp-block-post-title {
    font-family: var(--wp--preset--font-family--montserrat) !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #1F2023;
    margin-top: 24px;
    margin-bottom: 8px;
}

ul.columns-2.product-container li .wp-block-post-excerpt {
    font-family: var(--wp--preset--font-family--montserrat) !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #63646A;
    margin: 0px;
}

ul.columns-2.product-container li {
    /* box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05); */
    background: #FFFFFF;
    cursor: pointer;
    /* transition-property: -webkit-clip-path;
    transition-property: clip-path;
    transition-property: clip-path, -webkit-clip-path;
    transition-duration: 221ms;
    -webkit-clip-path: polygon(-75px 0, 100% 0, 100% 100%, 0 100%, 0 -108px, -75px 0);
    clip-path: polygon(-75px 0, 100% 0, 100% 100%, 0 100%, 0 -108px, -75px 0); */
    overflow: hidden;
    position: relative;
    background: transparent;
}

/* ul.columns-2.product-container li::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.2;
    background: #000;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 97%, 98% 100%, 0 100%);
    transition: all 0.5s ease-in-out;
} */

/* ul.columns-2.product-container li:hover {
    -webkit-clip-path: polygon(75px 0, 100% 0, 100% 100%, 0 100%, 0 108px, 75px 0);
    clip-path: polygon(75px 0, 100% 0, 100% 100%, 0 100%, 0 108px, 75px 0);
}

ul.columns-2.product-container li:hover .product-card-btn a {
    background-color: var(--wp--preset--color--custom-tertiary) !important;
}

ul.columns-2.product-container li:hover .product-single-page-btn-container::before {
    background-color: var(--wp--preset--color--custom-tertiary) !important;
}

ul.columns-2.product-container li:hover .product-card-btn a svg path {
    stroke: #fff;
}

ul.columns-2.product-container li:hover::before {
    opacity: 0;
    z-index: 1;
} */


/* Hover Effect */
ul.columns-2.product-container li:not(:hover) figure::before {
    animation: moveLeft 0.2s linear forwards;
    
}
ul.columns-2.product-container li:hover figure::before {
    opacity: 1;
    animation: changeBackground 0.5s linear forwards, moveRight 0.2s linear forwards;
}
ul.columns-2.product-container li:hover {
    box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
    /* clip-path: polygon(0 0, 100% 0, 100% 75%, 85% 100%, 0 100%); */
}

ul.columns-2.product-container li:hover .product-single-page-btn-container::before {
    left: -49px;
}

ul.columns-2.product-container li:hover .product-card-btn a svg{
    left: 10px;
}

.product-card-btn a svg{
    position: relative;
    transition: all 0.5s ease-in-out;
    left: 0px;
}



ul.columns-2.product-container li:hover figure img {
    transform: scale(1.2);
}

/* @keyframes changeBackground {
    0% {
        background-image: url('https://dev.websiteprojectupdates.com/yokohamabatteries/wp-content/uploads/2025/03/thumb.png');
    }
    33% {
        background-image: url('https://dev.websiteprojectupdates.com/yokohamabatteries/wp-content/uploads/2025/03/thumb-1.png');
    }
    66% {
        background-image: url('https://dev.websiteprojectupdates.com/yokohamabatteries/wp-content/uploads/2025/03/thumb-1.png');
    }
    100% {
        background-image: url('https://dev.websiteprojectupdates.com/yokohamabatteries/wp-content/uploads/2025/03/thumb-2.png');
    } 
} */

@keyframes moveRight {
    0% {
        background-position: 50% 50%;
    }
    100% {
        background-position: unset;
    }
}

@keyframes moveLeft {
    0% {
        background-position: unset;
    }
    100% {
        background-position: 50% 50%;
    }
}


.product-card-btn a{
    height: 60px;
    display: flex;
    align-items: center;
    padding: 12px 23.5px;
    position: relative;
}

.product-card-btn {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 85% 100%, 0 100%);
    position: relative;
}


.product-single-page-btn-container::before {
    content: '';
    position: absolute;
    clip-path: polygon(var(--p) 0, 100% 0, calc(100% - var(--p)) 100%, 0 100%);
    --p: 45px;
    height: 100%;
    width: 95px;
    top: 0px;
    left: -45px;
    background-color: var(--wp--preset--color--custom-tertiary) !important;
    transition: all 0.5s ease-in-out;
}

/* ul.columns-2.product-container li .product-card-btn a svg path {
    stroke: #000;
} */

.wp-block-button.product-card-btn {
    z-index: 2 !important;
}

@media (max-width: 810px){
    ul.columns-2.product-container.odd-items li:last-child {
        grid-column: span 1; /* This will shift the last item to center */
        /* justify-self: center; */
    }
}

@media (max-width: 767px){
    ul.columns-2.product-container li figure {
        padding: 18px 40px;
    }
}

ul.columns-2.product-container li figure::before {
    content: '';
    position: absolute;
    width: 640px;
    height: 298px;
    /* width: 1038px; */
    left: 0px;
    top: 0px;
    /* opacity: 0;
    transition: opacity 0.5s ease-in-out; */
    background-image: url('https://www.yokohamabatteries.com.ph/wp-content/uploads/2025/03/vector-728.png'); 
    background-position: center;
}