/* Add custom CSS styles below */ 

/* MOBILE ONLY: hide add-to-cart until hover */
@media (max-width: 768px) {

    /* Hide the mobile add-to-cart button by default */
    .product-card__addToCart.mobile {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px);
        transition: all .25s ease;
    }

    /* Show it when the product card is hovered/tapped */
    .product-card:hover .product-card__addToCart.mobile {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
    }
}


/* Fullscreen preloader overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/rABqPG/ZVwVUVdHaHBsI9dHAzK8M8SrijE0Ja2lME7mkE3Q.jpg")
              center center no-repeat;
  background-size: 200px 200px;
  z-index: 999999;
  animation: pulseLogo 2s infinite ease-in-out,
             hidePreloader 0.8s ease forwards;
  animation-delay: 0s, 1.2s; /* pulse starts immediately, fade-out starts after 1.8s */
  pointer-events: none;
  opacity: 1;
}

/* Pulse animation WITHOUT opacity changes */
@keyframes pulseLogo {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Fade-out animation */
@keyframes hidePreloader {
  to { opacity: 0; }
}



.store-footer__inner [class*="lg:col-[2]"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.store-footer__inner [class*="lg:col-[2]"]::before {
    content: "";
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto 0px auto;
    background-image: url("https://cdn.salla.sa/rABqPG/products/EmFTkXkCtJqAKWQXcUsYB15T78uoMKMd2C3LzNrF.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/* Reduce space under the logo */
.store-footer__inner [class*="lg:col-[2]"]::before {
    margin-bottom: 0px !important; /* adjust as needed */
}

/* Remove top margin from the first paragraph */
.store-footer__inner [class*="lg:col-[2]"] p:first-of-type {
    margin-top: 0 !important;
}