/* The Shoe Plug Rwanda — high-refresh / smooth-motion tuning
   Designed for 90/120/144/165Hz displays without forcing a fake refresh rate.
   Keeps motion on compositor-friendly transform/opacity where possible. */
:root{
  --tsp-motion-fast: .14s;
  --tsp-motion-med: .22s;
  --tsp-ease: cubic-bezier(.2,.75,.25,1);
}

/* Let the browser schedule scrolling naturally; do not simulate a frame rate. */
html{scroll-behavior:smooth;text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch;}
body{-webkit-tap-highlight-color:transparent;}

/* Prefer compositor-friendly transitions. */
button,a,.head-icon,.cart-head,.page-btn,.category-cards button,
.product-card,.card-actions button,.floating-card,.filter-trigger,.toolbar-action{
  transition-property:transform,opacity,background-color,color,border-color,box-shadow;
  transition-duration:var(--tsp-motion-med);
  transition-timing-function:var(--tsp-ease);
}

/* Hover is desktop-only: prevents pointless work on touch devices. */
@media (hover:hover) and (pointer:fine){
  .product-card:hover,
  .floating-card:hover,
  .head-icon:hover,
  .cart-head:hover,
  .filter-trigger:hover,
  .toolbar-action:hover{will-change:transform;}
}

/* Avoid painting effects on thousands of product tiles at once. */
.product-card{contain:layout paint style;content-visibility:auto;}
.product-card img,.hero-shoe img,.chat-product-media img,.thumb img{
  backface-visibility:hidden;
  transform:translateZ(0);
}
.product-card .photo img,.hero-shoe img,.chat-product-media img{
  image-rendering:auto;
}

/* Keep animations buttery on high-Hz panels. */
.page-enter{animation: tspPageEnter .34s var(--tsp-ease) both;}
@keyframes tspPageEnter{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* A short scroll state lets expensive visual layers back off while the finger/wheel is moving. */
html.tsp-is-scrolling .header,
html.tsp-is-scrolling .mobile-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
html.tsp-is-scrolling .header{box-shadow:0 4px 14px rgba(17,24,39,.045)!important;}

/* Avoid expensive blur/filter work during active scrolling on the hero image. */
html.tsp-is-scrolling .hero-editorial-product .hero-shoe img,
html.tsp-is-scrolling .hero-art .hero-shoe img{filter:none!important;}

/* GPU-friendly full-screen overlays. */
.customer-chat-modal,.customer-chat-card,.modal-card,.drawer,.mobile-nav,.search-panel{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Images should not cause a layout jump while decoding. */
img[width][height]{height:auto;}

@media(max-width:800px){
  /* Phone GPUs benefit from less simultaneous shadow/blur work. */
  .product-card{box-shadow:0 7px 22px rgba(17,18,20,.045)!important;}
  .header{box-shadow:0 5px 18px rgba(17,24,39,.05)!important;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* =========================================================
   YOUTUBE-LIKE MEDIA STABILITY
   Reserve every media slot before the image arrives. Once an
   image has loaded, keep the element present; do not virtualize
   the image itself while scrolling.
   ========================================================= */
.product-card .photo,
#products.product-grid .photo,
.detail-photo,
.category-cards button,
.promo-shoe,
.chat-product-media,
.compare-card-photo,
.wish-card .photo{
  overflow:hidden;
  contain:layout paint;
}

.product-card .photo{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
}
.product-card .photo::before,
.category-cards button::before,
.promo-shoe::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.55;
}
.product-card .photo::before{
  inset:0;
  background:linear-gradient(110deg,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0));
  z-index:0;
}
.product-card .photo img{
  position:relative;
  z-index:1;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  object-fit:cover!important;
  object-position:center;
  background:#f5f7fa;
}

/* Never let the browser content-virtualize the actual images. */
img,
.tsp-phone img,
.tsp-phone .product-card img,
#products .product-card img{
  content-visibility:visible!important;
  contain:none!important;
}

/* Keep the card's geometry independent of image decode/network timing. */
#products.product-grid > .product-card{
  min-height:0!important;
  contain:layout paint!important;
}
#products.product-grid > .product-card .product-body{min-height:0;}

/* A subtle loading state, but never a collapse/reflow state. */
img[src]{background:#f4f6f8;}
img.tsp-media-loading{filter:saturate(.92);}
img.tsp-media-loaded{filter:none;}

/* Give remote/category imagery a permanent box too. */
.category-cards button img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}
.promo-shoe img{
  display:block!important;
  max-width:min(82%,430px);
  max-height:330px;
}

/* Don't animate image arrival. Motion is reserved for user interaction. */
.product-card img,
.category-cards button img,
.promo-shoe img,
.hero-shoe img,
.detail-photo img,
.chat-product-media img{
  opacity:1!important;
  transition:transform .35s var(--tsp-ease),filter .25s ease!important;
}

@media(max-width:700px){
  .product-card .photo{aspect-ratio:1 / 1!important;}
}

@media(prefers-reduced-motion:reduce){
  .product-card img,
  .category-cards button img,
  .promo-shoe img,
  .hero-shoe img,
  .detail-photo img,
  .chat-product-media img{transition:none!important;}
}