/* Aesthetically pleasing styles */
.flip-container {
    perspective: 1000px;
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    width: 300px; /* Adjust to your image width */
    height: 525px; /* Adjust to your image height */
    margin: 50px auto; /* Center the card */
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
}

:root { --img-radius: 12px; }

/ /*rounded border dont remove / or code breaks in store idk why*/
img,
.wp-block-image img,
.entry-content img,
.gallery img,
.woocommerce img,
.woocommerce-product-gallery__image img,
.stk-img,
.stk-img img,
.stk-img-wrapper img {
  border-radius: var(--img-radius);
  display: block; 
  height: auto;
}

.wp-block-image figure,
.wp-block-cover,
.wp-block-cover .wp-block-cover__inner-container,
.stk-img-wrapper,
.woocommerce-product-gallery__wrapper,
.gallery-item {
  border-radius: var(--img-radius);
  overflow: hidden;
}


/*for mobile hover colour readability */
.mobile-menu a:hover,
.mobile-navigation a:hover,
.offcanvas-menu a:hover {
  color: #99FF99 !important; 
}

/*delete if ya want blur on sold out*/
.woocommerce ul.products li.product.outofstock img {
  filter: blur(1px);
  opacity: 0.9;
  transition: all 0.3s ease;
}

/*fixing the cramp in the checkout */
@media (max-width: 1024px) {
  body.woocommerce-checkout .entry-content,
  body.woocommerce-cart .entry-content,
  body.woocommerce-account .entry-content {
    padding-left: 15px;
    padding-right: 15px;
  }