/* 
  Tùy chỉnh giao diện CSS cho Single Product - Layout 3
  Ví dụ tham khảo trang mẫu WoodMart: /shop/furniture/slat-bench/?opts=single_product_layout_3 
*/

#via-sp-head {
  border: 1px solid #f5f5f5;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  margin-bottom: 20px;
  background-color: antiquewhite;
  background: url('./assets/bg-gradient-white.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#via-sp-head #left {
  min-height: 70%;
}

#via-sp-head #right-2 {
  min-height: 70%;
}

@media (min-width: 768px) {
  #via-sp-head #left {
    transform: scale(0.8);
    transition: all 0.3s ease;
  }

  #via-sp-head #left:hover {
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  }

  #via-sp-head #right-2 {
    transform: scale(0.8);
    transition: all 0.3s ease;
  }

  #via-sp-head #right-2:hover {
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  }
}

/* Wishlist, Compare */
.via-sp-wishlist {
  --color: rgb(230, 0, 0);
  --spin-direction: rotatey(360deg);
}

.via-sp-compare {
  --color: green;
  --spin-direction: rotatex(360deg);
}

.wd-action-btn:hover {
  color: var(--color);
  text-shadow: 0 0 16px var(--color);
}

.wd-action-btn>a:hover .wd-action-icon {
  animation: 3s ease infinite wc-spin;
}

.wd-action-btn>a:hover .wd-action-icon:before {
  color: var(--color);
}

.wd-action-btn.wd-style-text>a:hover .wd-action-text {
  color: var(--color);
  text-decoration: underline;
}

/* Meta */
.via-sp-meta .tagged_as a {
  border: 1px solid #ccc;
}

.via-sp-meta .tagged_as a:hover {
  box-shadow: 0 0 2px black;
  color: black;
}

.via-sp-meta .posted_in a {
  color: var(--via-primary-color);
}

/* Share */
.via-sp-share a {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.via-sp-share a:hover {
  animation: 0.4s ease infinite alternate bounce;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.3) !important;
}

@keyframes wc-spin {
  0% {}

  70% {
    transform: var(--spin-direction);
  }

  100% {
    transform: var(--spin-direction);
  }
}