/* ============================================================
   Guan Kee — enhancement layer (custom, not part of WoodMart)
   Continuous brand marquee + tasteful scroll/hover motion.
   100% reversible: delete /gk-assets/ and remove the two
   injected tags (id="gk-enhancements-css" / "gk-enhancements-js").
   ============================================================ */

/* ---------- 1. Continuous brand-logo marquee ---------- */
.gk-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:10px 0;
  /* soft fade at both edges so logos appear/disappear smoothly */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.gk-marquee-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:gk-scroll var(--gk-marquee-duration,25s) linear infinite;
  will-change:transform;
}
/* pause when a visitor hovers, then resume */
.gk-marquee:hover .gk-marquee-track{ animation-play-state:paused; }
@keyframes gk-scroll{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,0,0); } /* set is duplicated -> seamless */
}
.gk-brand{
  flex:0 0 auto;
  width:200px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  opacity:.8;
  transition:opacity .3s ease, transform .3s ease;
}
.gk-brand:hover{ opacity:1; transform:scale(1.06); }
.gk-brand img{
  max-width:100%;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@media (max-width:768px){
  .gk-brand{ width:150px; height:70px; padding:0 16px; }
  .gk-brand img{ max-height:54px; }
}
/* --- gallery (photo) marquee variant: larger cells --- */
.gk-marquee--gallery{ padding:14px 0; }
.gk-gallery-cell{
  flex:0 0 auto;
  height:240px;
  margin:0 9px;
  display:block;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .35s ease, box-shadow .35s ease;
}
.gk-gallery-cell:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,.16); }
.gk-gallery-cell img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
}
@media (max-width:768px){
  .gk-gallery-cell{ height:165px; border-radius:10px; margin:0 6px; }
}

/* once our marquee is live, hide the original Swiper UI for that widget */
.gk-marquee-active .wd-carousel-inner,
.gk-marquee-active .wd-nav-arrows,
.gk-marquee-active .wd-nav-pagin-wrap{ display:none !important; }

/* ---------- 2. Subtle scroll reveal (below-the-fold only) ---------- */
.gk-reveal{ opacity:0; transform:translateY(18px); }
.gk-reveal.gk-in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s ease;
}

/* ---------- 3. Gentle product-card hover lift ---------- */
.wd-product,
.product-grid-item{
  transition:transform .3s ease, box-shadow .3s ease;
}
.wd-product:hover,
.product-grid-item:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* ---------- Accessibility: honour reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gk-marquee-track{ animation:none; }
  .gk-marquee{ overflow-x:auto; }
  .gk-reveal{ opacity:1 !important; transform:none !important; }
  .wd-product:hover,
  .product-grid-item:hover{ transform:none; }
}