/* ==========================================================
   DN Future Friendly — lightweight animation layer
   Only transform/opacity are animated (GPU accelerated, no
   layout thrash) to keep the site fast on mobile networks.
   ========================================================== */

/* Product gallery thumbnails (WooCommerce flexslider) */
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;padding:0;
}
.woocommerce-product-gallery .flex-control-thumbs li{width:64px;list-style:none;}
.woocommerce-product-gallery .flex-control-thumbs img{
  border-radius:8px;border:1px solid var(--dnff-border);cursor:pointer;
  opacity:.6;transition:var(--dnff-transition);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1;border-color:var(--dnff-red-glow);}

/* Placeholder shimmer for products without an uploaded image yet */
.dnff-no-image{
  position:relative;overflow:hidden;
  background:linear-gradient(110deg,#161619 8%,#1f1f26 18%,#161619 33%);
  background-size:200% 100%;
  animation:dnff-shimmer 1.8s linear infinite;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--dnff-grey);font-size:.78rem;min-height:160px;
}
@keyframes dnff-shimmer{to{background-position-x:-200%;}}

/* Button press micro-interaction */
.dnff-btn{position:relative;overflow:hidden;}
.dnff-btn:active{transform:scale(.97);}

/* Swatch pop-in when list rebuilds */
@keyframes dnff-pop{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
.dnff-swatch{animation:dnff-pop .25s ease both;}

/* Fade/scale for variation image + price block on change */
.single_variation_wrap{transition:opacity .25s ease;}
.single_variation_wrap.dnff-updating{opacity:.45;}

/* Category icon float on hover */
.dnff-cat-icon{transition:transform .35s ease;}
.dnff-cat-card:hover .dnff-cat-icon{transform:translateY(-4px) rotate(-4deg);}

/* Number count-up target (used by JS on stats strip) */
.dnff-stat b{transition:opacity .3s ease;}

/* Sticky header shrink on scroll */
.dnff-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.4);}

/* Skip-link accessibility (visually hidden until focused) */
.dnff-skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--dnff-red);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;z-index:99999;
}
.dnff-skip-link:focus{left:0;top:0;}

/* Loading spinner used briefly while variation JS resolves (no layout shift) */
.dnff-spin{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:dnff-rotate .7s linear infinite;
}
@keyframes dnff-rotate{to{transform:rotate(360deg);}}