/* Victor Scientific Co. — layout-preserving product interaction styles.
 * Shared product-card and CTA micro-interactions only. No page-entry/reveal animations.
 */
.vsc-product-card,
.main_product_inner .product_item,
.product_item.wist_item{
  border-radius:20px!important;
  overflow:hidden;
  border:1px solid var(--site-border, #dfe4ea);
  background:#fff;
  backface-visibility:hidden;
}
.vsc-product-card__media{border-radius:20px 20px 0 0;overflow:hidden}
.main_product_inner .product_item,.product_item.wist_item{
  box-shadow:0 5px 18px rgba(20,31,48,.045);
}

body.product-refresh-page .details_slider{border-radius:20px!important;overflow:hidden}
body.product-refresh-page .details_right{border-radius:20px!important}
body.product-refresh-page .details_slider.vsc-gallery-preparing,
body.product-refresh-page .details_slider.vsc-gallery-ready{visibility:visible!important;opacity:1!important}

/* Related product card geometry is preserved from the previous production file. */
body.product-refresh-page .related-product-section{padding-top:20px;padding-bottom:18px}
body.product-refresh-page .related-product-section .product-inner{margin-left:-6px;margin-right:-6px}
body.product-refresh-page .related-product-section .product_item{
  box-sizing:border-box;min-height:390px;height:auto;margin:6px 6px 18px;padding:12px;
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--site-border, #dfe4ea);border-radius:20px!important;
  background:#fff;box-shadow:0 7px 22px rgba(20,31,48,.055)
}
body.product-refresh-page .related-product-section .product_item_inner{height:auto!important;flex:0 0 auto;display:block;border-radius:15px;overflow:hidden}
body.product-refresh-page .related-product-section .pro_img{height:190px;border-radius:15px;overflow:hidden;background:#fff}
body.product-refresh-page .related-product-section .pro_img img{height:100%;width:100%;object-fit:contain}
body.product-refresh-page .related-product-section .pro_des{padding:0 2px;display:flex;flex-direction:column;flex:1}
body.product-refresh-page .related-product-section .pro_name{min-height:50px;height:auto;margin-top:10px}
body.product-refresh-page .related-product-section .pro_name a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#293143;font-size:13px;line-height:1.5;font-weight:700}
body.product-refresh-page .related-product-section .related-rating{min-height:17px;margin-top:6px;line-height:1}
body.product-refresh-page .related-product-section .related-rating i{color:#efb21a;font-size:10px}
body.product-refresh-page .related-product-section .pro_price{margin-top:auto!important;margin-bottom:7px!important;padding-top:7px}
body.product-refresh-page .related-product-section .pro_price p{font-size:14px;font-weight:800}
body.product-refresh-page .related-product-section .related-stock-status{font-size:9px;font-weight:800}
body.product-refresh-page .related-product-section .pro_btn{gap:6px}
body.product-refresh-page .related-product-section .order-btn,
body.product-refresh-page .related-product-section .order-btn-link,
body.product-refresh-page .related-product-section .cart-icon-btn,
body.product-refresh-page .related-product-section .cart-icon-link{min-height:38px;border-radius:999px!important}

.vsc-product-card .vsc-icon-btn,.vsc-product-card .vsc-cart-btn,
.related-product-section .order-btn,.related-product-section .order-btn-link,
.related-product-section .cart-icon-btn,.related-product-section .cart-icon-link{
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease
}
.vsc-product-card .vsc-icon-btn:active,.vsc-product-card .vsc-cart-btn:active,
.related-product-section .order-btn:active,.related-product-section .order-btn-link:active,
.related-product-section .cart-icon-btn:active,.related-product-section .cart-icon-link:active{transform:translateY(1px) scale(.985)}

/* Native vertical page scroll remains in charge on touch devices. The product
   gallery itself uses native horizontal scroll-snap, not Owl Carousel. */
@media(max-width:767.98px){
  body.product-refresh-page,body.product-refresh-page #content,body.product-refresh-page .main-details-page{touch-action:pan-y}
  body.product-refresh-page .details_slider .dimage_item img{-webkit-user-drag:none;user-select:none}
  body.product-refresh-page .related-product-section .product_item{min-height:350px;padding:9px;border-radius:17px!important}
  body.product-refresh-page .related-product-section .pro_img{height:154px;border-radius:13px}
  body.product-refresh-page .related-product-section .pro_name{min-height:46px}
  body.product-refresh-page .related-product-section .pro_name a{font-size:11px}
  body.product-refresh-page .related-product-section .pro_price p{font-size:12px}
}


/* Admin Border Color: update outlines without changing approved card geometry or surfaces. */
.vsc-product-card,
.main_product_inner .product_item,
.product_item.wist_item,
.related-product-section .product_item,
.campaign-product-card,
.order-section .product-card,
.vsc-featured-category,
.vsc-brand-card {
  border-color: var(--site-border, #dfe4ea) !important;
}

/* Shared premium product-card edge animation.
   One lightweight CSS-only effect is reused by homepage, category, shop,
   offers, search, campaign and product-detail related-product cards. */
@property --vsc-product-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes vsc-product-border-rotate {
  to { --vsc-product-border-angle: 360deg; }
}

.vsc-product-card,
.main_product_inner .product_item,
.product_item.wist_item,
.related-product-section .product_item,
.campaign-product-card,
.order-section .product-card,
.vsc-featured-category,
.vsc-brand-card {
  position: relative;
  isolation: isolate;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .vsc-product-card::after,
  .main_product_inner .product_item::after,
  .product_item.wist_item::after,
  .related-product-section .product_item::after,
  .campaign-product-card::after,
  .order-section .product-card::after,
  .vsc-featured-category::after,
  .vsc-brand-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--vsc-product-border-angle),
      transparent 0deg 42deg,
      rgba(11, 59, 130, .22) 76deg,
      var(--site-primary, #0b3b82) 112deg,
      var(--site-secondary, #1e6b82) 148deg,
      #54c8c0 178deg,
      var(--site-primary, #0b3b82) 210deg,
      transparent 250deg 360deg
    );
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transition: opacity 160ms ease;
  }
}

@media (hover: hover) and (pointer: fine) {
  .vsc-product-card:hover::after,
  .main_product_inner .product_item:hover::after,
  .product_item.wist_item:hover::after,
  .related-product-section .product_item:hover::after,
  .campaign-product-card:hover::after,
  .order-section .product-card:hover::after,
  .vsc-featured-category:hover::after,
  .vsc-brand-card:hover::after,
  .vsc-product-card:focus-within::after,
  .main_product_inner .product_item:focus-within::after,
  .product_item.wist_item:focus-within::after,
  .related-product-section .product_item:focus-within::after,
  .campaign-product-card:focus-within::after,
  .order-section .product-card:focus-within::after,
  .vsc-featured-category:focus-visible::after,
  .vsc-brand-card:focus-visible::after {
    opacity: 1;
    animation: vsc-product-border-rotate 2.8s linear infinite;
  }
}

@media (hover: none) {
  .vsc-product-card:active::after,
  .main_product_inner .product_item:active::after,
  .product_item.wist_item:active::after,
  .related-product-section .product_item:active::after,
  .campaign-product-card:active::after,
  .order-section .product-card:active::after,
  .vsc-featured-category:active::after,
  .vsc-brand-card:active::after {
    opacity: 1;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vsc-product-card:hover::after,
  .main_product_inner .product_item:hover::after,
  .product_item.wist_item:hover::after,
  .related-product-section .product_item:hover::after,
  .campaign-product-card:hover::after,
  .order-section .product-card:hover::after,
  .vsc-featured-category:hover::after,
  .vsc-brand-card:hover::after {
    animation: none !important;
  }
}
