/* Header */
.store-header {
    position: static !important;
}
#mainnav {
    height: unset !important;
}
salla-advertisement {
    display: none;
}
@media (min-width: 480px) {
    .navbar-brand img {
        max-width: 110px;
    }
}

/* jo-hero-section */
section.jo-hero-section .img-wrapper,
section.jo-hero-section .arrows {
    display: none;
}
section.jo-hero-section a.subtext {
    font-weight: 600;
}
section.jo-hero-section div[aria-label="2 / 2"] .text-container {
    display: none;
}
@media (min-width: 1024px) {
    section.jo-hero-section .my-slide {
        height: 880px !important;
    }
    section.jo-hero-section a.subtext {
        margin-top: 2rem;
        font-size: 21px;
    }
}
@media (max-width: 576px) {
    section.jo-hero-section .my-slide {
        height: 240px !important;
        width: 100% !important;
        padding: 0;
    }
    section.jo-hero-section .block-title {
        font-size: 30px;
    }
    section.jo-hero-section .text-container {
        width: 210px;
        margin: 0;
        padding-bottom: 1rem;
        align-items: center;
    }
    section.jo-hero-section div:has( > .arrows ) {
        justify-content: end;
        padding: 0;
    }
    section.jo-hero-section .hero-wrapper {
        margin-bottom: 0;
    }
    section.jo-hero-section a {
        text-align: center !important;
    }
    /* Enhance Appearance on Mobile */
    section.jo-hero-section .my-slide {
        justify-content: start;
        padding-top: 1rem;
    }
    section.jo-hero-section .my-slide > div:first-child {
        display: none;
    }
    section.jo-hero-section .mybutton {
        padding: 6px 20px;
    }
    section.jo-hero-section i {
        padding: 6px;
    }
}



/* cats */
section.jo-categories .swiper-wrapper {
    justify-content: center;
    gap: 2rem;
}
section.jo-categories .swiper-wrapper > a {
    margin: 0 !important;
}

/* products-banner-slider */
section.products-banner-slider .text-background.leading-tight {
    display: none;
}

/* FAQs */
.jo-faq .section-wrapper {
    background: unset;
}
.sicon-quote:before {
    color: var(--color-primary);
}

/* Hides */
section.products-banner-slider .bg-black\/40,
.pro_addit,
.dis_background {
    display: none;
}

/** Modal Pop-up Stylings **/
/* Button Styling */
.sharp-btn {
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin: 8px;
  margin-bottom: 22px;
}
.sharp-btn:hover {
  background: ##cc88239e;
  transform: scale(1.05);
}
/* Modal Overlay */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Start from top */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9999;
}
.custom-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
/* Modal Content Box */
.custom-modal-content {
  background: #fff;
  padding: 20px;
  position: relative;
  max-width: 500px;
  width: 90%;
  margin-top: -100px; /* Hidden above */
  transition: margin-top 0.4s ease-out;
}
.custom-modal-overlay.active .custom-modal-content {
  margin-top: 50px; /* Slide down into view */
}
.custom-modal-content img {
  width: 100%;
  display: block;
}
/* Close Button */
.modal-close-x {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 28px;
}
.image-slider img {
    object-fit: contain !important;
    background: #fff;
}
.single-blog article h2 {
    font-size: clamp(1rem, 0.8454rem + 0.6598vw, 2rem);;
}
.single-blog article p {
    font-size: clamp(.8rem, 1.2113rem + 0.1649vw, 1.1rem);
}