/* ============================================
   Nadsons Category Slider — front-end styles
   All visual values come from CSS custom
   properties set inline from the admin settings.

   NOTE: several rules below use !important /
   extra resets on purpose — this protects the
   slider's layout from theme CSS (global img,
   a, span rules) leaking in and breaking the
   spacing/image sizing on the live site.
   ============================================ */

.ncs-wrapper{
  width:100%;
  max-width:100%;
  background:var(--ncs-bg, transparent);
  padding:var(--ncs-vpad, 4px) 0;
  margin:0;
  box-sizing:border-box;
  overflow:hidden;
}
.ncs-wrapper,
.ncs-wrapper *{ box-sizing:border-box; }

.ncs-viewport{
  width:100%;
  max-width:100%;
  overflow:hidden;
  /* Extra breathing room so the hover lift + shadow on .ncs-circle
     doesn't get clipped by this element's overflow:hidden. Cancelled
     out with a matching negative margin so it doesn't add visible gap. */
  padding:18px 0 26px;
  margin:-18px 0 -26px;
}

.ncs-track{
  display:flex;
  align-items:flex-start;
  width:max-content;
  animation-name:ncs-scroll;
  animation-duration:var(--ncs-speed, 30s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-direction:var(--ncs-anim-direction, reverse);
}

.ncs-wrapper.ncs-pause-on-hover .ncs-track:hover{
  animation-play-state:paused;
}

@keyframes ncs-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.ncs-wrapper a.ncs-item,
.ncs-wrapper a.ncs-item:visited,
.ncs-wrapper a.ncs-item:hover,
.ncs-wrapper a.ncs-item:focus{
  flex:0 0 auto;
  width:var(--ncs-circle-size, 160px);
  margin:0 var(--ncs-gap, 40px) 0 0 !important;
  padding:0 !important;
  text-align:center;
  text-decoration:none !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  list-style:none;
  background:none;
}

.ncs-circle{
  display:block;
  width:var(--ncs-circle-size, 160px);
  height:var(--ncs-circle-size, 160px);
  min-width:var(--ncs-circle-size, 160px);
  min-height:var(--ncs-circle-size, 160px);
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  border-width:var(--ncs-border-width, 3px);
  border-style:var(--ncs-border-style, dotted);
  border-color:var(--ncs-border-color, #c9962b);
  box-shadow:0 12px 26px rgba(0,0,0,0.14);
  background:#f2f2f2;
  transition:transform .35s cubic-bezier(.22,.9,.35,1.1), box-shadow .35s ease;
}

.ncs-item:hover .ncs-circle{
  transform:translateY(-10px);
  box-shadow:0 22px 40px rgba(0,0,0,0.24);
}

/* Force the actual photo content to visually fill the circle.
   Many WooCommerce category thumbnails contain built-in white/empty
   margins, so object-fit:cover alone still makes the image look too small.
   The circle clips the zoom cleanly at its edge. */
.ncs-wrapper .ncs-circle img,
.ncs-wrapper .ncs-circle-img{
  transition:transform .45s ease;
  transform:scale(1.34) !important;
  transform-origin:center center !important;
}
.ncs-item:hover .ncs-circle img,
.ncs-item:hover .ncs-circle-img{
  transform:scale(1.46) !important;
}

.ncs-item:hover .ncs-name,
.ncs-item:hover .ncs-count{
  transform:translateY(-3px);
}
.ncs-name, .ncs-count{
  transition:transform .35s ease;
}

/* High-specificity + !important: wins over theme global "img{max-width:100%;height:auto}"
   rules that were shrinking/distorting category images inside the circle. */
.ncs-wrapper .ncs-circle img,
.ncs-wrapper .ncs-circle-img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  min-width:0 !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:50%;
  margin:0 !important;
  padding:0 !important;
  /* object-position is set per-image via inline style (from the "Image
     Focus" dashboard setting), which takes priority over this fallback. */
  object-position:center center;
}

.ncs-circle-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(var(--ncs-circle-size, 160px) * 0.32);
  font-weight:700;
  color:#ffffff;
  background:var(--ncs-border-color, #c9962b);
}

.ncs-wrapper .ncs-name{
  display:block;
  margin:var(--ncs-name-gap, 8px) 0 0 0 !important;
  padding:0 !important;
  font-size:var(--ncs-name-size, 17px);
  font-weight:var(--ncs-name-weight, 700);
  color:var(--ncs-name-color, #0a0a0a);
  line-height:1.25;
  opacity:1;
}

.ncs-wrapper .ncs-count{
  display:block;
  margin:var(--ncs-count-gap, 3px) 0 0 0 !important;
  padding:0 !important;
  font-size:var(--ncs-count-size, 13px);
  color:var(--ncs-count-color, #6f6b64);
  line-height:1.3;
}

.ncs-empty{
  text-align:center;
  color:#888;
  padding:20px 0;
}

@media (prefers-reduced-motion: reduce){
  .ncs-track{ animation:none; }
}

/* ---------- Responsive ----------
   Multiple breakpoints so the slider actually scales down on tablets
   and phones, not just one jump at 600px. */
@media (max-width:1024px){
  .ncs-wrapper a.ncs-item{
    width:calc(var(--ncs-circle-size, 160px) * 0.85);
    margin-right:calc(var(--ncs-gap, 40px) * 0.75) !important;
  }
  .ncs-circle{
    width:calc(var(--ncs-circle-size, 160px) * 0.85);
    height:calc(var(--ncs-circle-size, 160px) * 0.85);
    min-width:calc(var(--ncs-circle-size, 160px) * 0.85);
    min-height:calc(var(--ncs-circle-size, 160px) * 0.85);
  }
}

@media (max-width:768px){
  .ncs-wrapper a.ncs-item{
    width:calc(var(--ncs-circle-size, 160px) * 0.7);
    margin-right:calc(var(--ncs-gap, 40px) * 0.55) !important;
  }
  .ncs-circle{
    width:calc(var(--ncs-circle-size, 160px) * 0.7);
    height:calc(var(--ncs-circle-size, 160px) * 0.7);
    min-width:calc(var(--ncs-circle-size, 160px) * 0.7);
    min-height:calc(var(--ncs-circle-size, 160px) * 0.7);
  }
  .ncs-wrapper .ncs-name{ font-size:15px; }
  .ncs-wrapper .ncs-count{ font-size:12px; }
}

@media (max-width:480px){
  .ncs-wrapper a.ncs-item{
    width:calc(var(--ncs-circle-size, 160px) * 0.52);
    margin-right:calc(var(--ncs-gap, 40px) * 0.4) !important;
  }
  .ncs-circle{
    width:calc(var(--ncs-circle-size, 160px) * 0.52);
    height:calc(var(--ncs-circle-size, 160px) * 0.52);
    min-width:calc(var(--ncs-circle-size, 160px) * 0.52);
    min-height:calc(var(--ncs-circle-size, 160px) * 0.52);
  }
  .ncs-wrapper .ncs-name{ font-size:13px; }
  .ncs-wrapper .ncs-count{ font-size:11px; }
}

@media (max-width:360px){
  .ncs-wrapper a.ncs-item{
    width:calc(var(--ncs-circle-size, 160px) * 0.42);
    margin-right:calc(var(--ncs-gap, 40px) * 0.3) !important;
  }
  .ncs-circle{
    width:calc(var(--ncs-circle-size, 160px) * 0.42);
    height:calc(var(--ncs-circle-size, 160px) * 0.42);
    min-width:calc(var(--ncs-circle-size, 160px) * 0.42);
    min-height:calc(var(--ncs-circle-size, 160px) * 0.42);
  }
}