/* ========================================
   PRELOADER STYLES
   ======================================== */
.sp-pre-loader .sp-loader-with-logo img {
  height: 40vh;
}

/* ========================================
   HEADER STYLES
   ======================================== */
#sp-header {
  border: 3px solid white;
  border-width: 3px 0 3px 0px;
}

#sp-position1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#sp-header-tobar .social-icons span {
  font-size: 20px;
}

/* ========================================
   CATEGORY VIEW STYLES
   ======================================== */
.view-category .product-container {
  border: 1px solid white;
  border-radius: 6px;
  padding-bottom: 15px;
}

.view-category .product-container > div:not(.vm-product-media-container) {
  padding: 15px;
}

.view-category .vm-product-title {
  padding-top: 15px;
}

.view-category .vm-product-title a {
  color: #fff !important;
}

.view-category .vm-product-media-container {
  align-items: center;
}

.view-category .product-price {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   PRODUCT STYLES
   ======================================== */
.vm-product-rating-container {
  display: none !important;
}

.vm-product-s-desc,
.product-short-description {
  color: #d7d7d7 !important;
}

.vm-price-value span:only-child {
  margin-left: unset;
}

.vm-product-media-container a,
.vm-product-media-container img {
  width: 100%;
}

.vm-product-media-container img {
  width: 100%;
  /* height: 400px; */
  object-fit: cover;
}


.view-category .vm-product-media-container{
  height: 400px !important;
  min-height:400px !important;
  max-height:400px !important;
}
.view-category .vm-product-media-container img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
.view-category .vm-product-media-container,
.view-category .vm-product-media-container img{
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
}
}

/* ========================================
   CART AND SHOPPING STYLES
   ======================================== */
.addtocart-bar svg {
  color: #fff !important;
}

.back-to-category a {
  color: #fff !important;
}

/* ========================================
   CATEGORY NAVIGATION STYLES
   ======================================== */
.category-view .vm-category-description {
  margin-bottom: 1rem !important;
}

.category-view .vm-subcategory {
  margin-bottom: 10px;
}

.category-view .vm-subcategory .vm-subcategory-title {
  font-size: 14px;
  margin: 0;
  padding: 0 !important;
  text-align: center;
  display: flex;
  height: 100%;
  border-top: unset !important;
  color: white !important;
}

.category-view .vm-subcategory img.browseCategoryImage {
  margin-right: 5px;
  width: 32px;
  max-width: 100%;
  height: auto;
}

.category-view .vm-subcategory img.browseCategoryImage[src^="/images/virtuemart/typeless/noimage"] {
  display: none;
}

.category-view .vm-subcategory a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  color: #fff;
  background: black !important;
  background-color: #e9ecef;
  display: flex;
  padding: 15px 0;
  width: 100%;
  border: 1px solid white;
  border-radius: 2px;
}

/* ========================================
   NAVIGATION MENU STYLES
   ======================================== */
.inline-menu {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
}

/* ========================================
   FORM STYLES
   ======================================== */
.userfields_info,
.view-user .col-lg-6 .form-label {
  color: black !important;
}

.form-select {
  color: #fff !important;
  background-color: #000 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.btn.btn-link.text-dark.py-0 {
  color: white !important;
}

/* ========================================
   CHECKOUT STYLES (ProOPC)
   ======================================== */
#ProOPC, #ProOPC span, #ProOPC div, #ProOPC p, #ProOPC input, #ProOPC select, #ProOPC button, #ProOPC h1, .proopc-finalpage h3, .proopc-finalpage h2, .proopc-finalpage h1, .proopc-finalpage h4, .proopc-register-login h3, .proopc-register-login h2, .proopc-register-login h4, .proopc-register-login h1 {
  font: inherit;
}

/* ========================================
   LOGIN STYLES
   ======================================== */
.vm-login {
  color: black;
}

/* ========================================
   MOBILE MENU STYLES
   ======================================== */
.offcanvas-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offcanvas-menu .logo-image {
  height: 110px !important;
}

.offcanvas-overlay {
  background: rgba(152, 152, 152, 0.7) !important;
}

.offcanvas-inner .social-icons {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 25px !important;
}

.offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
  margin-right: 0px !important;
}

/* ========================================
   RESPONSIVE STYLES - MOBILE
   ======================================== */
@media screen and (max-width: 768px) {
  /* Header Mobile Styles */
  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .row,
  #sp-menu {
    height: 100%;
  }
  
  #sp-logo > div {
    height: 100%;
  }

  #sp-logo .logo-image {
    height: 80px !important;
  }

  #sp-top1 > div,
  #sp-top2 > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #sp-menu > div {
    display: flex !important;
    justify-content: flex-end !important;
  }
}