.ns-root{
  display: grid;
  gap: 24px;
  --nsArrowIconSize: 22px;
}


.ns-content{
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 20px 0px !important;
  border: none !important;
}

.ns-stage{
  width: 100% !important;
  position: relative;
  height: 420px;
  border-radius: 24px;
  overflow: hidden;
}

.ns-stage__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.ns-stage__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ns-stage__img.is-active{ opacity: 1; }

/* Desktop content (NO SLIDE) */
.ns-content__desktop{ display:block; }
.ns-content__title{ font-weight: 800; font-size: 20px; margin: 0 0 8px; }
.ns-content__desc{ font-size: 14px; opacity: .8; line-height: 1.45; }

/* Mobile content track (hidden on desktop by default) */
.ns-content__mobile{ display:none; overflow: hidden; }
.ns-track{ display:flex; width:100%; transform: translate3d(0,0,0); }
.ns-slide{ flex: 0 0 100%; width: 100%; }

/* Bars (mobile/tablet only) */
.ns-bars{
  display:none;
  margin: 0 0 16px;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.ns-bar{
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(106,53,255,0.18);
  overflow: hidden;
}
.ns-bar::after{
  content:"";
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background:#6a35ff;
}

.ns-bar.is-active::after{
  animation: nsFill var(--nsDur, 4000ms) linear forwards;
}

@keyframes nsFill{
  from { width: 0%; }
  to   { width: 100%; }
}

/* Arrows (mobile/tablet only) */
.ns-arrows{
  display:none;
  gap: 10px;
  margin-top: 14px;
}
.ns-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 36px;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor:pointer;
  color: var(--nsArrowColor, #111) !important; /* ensure icon visible on tablet */
  line-height: 0;
  overflow: hidden;
}

/* Icon sizing + visibility (FontAwesome SVG + <i>) */
.elementor-widget-nutrition-slider .ns-arrow svg,
.elementor-widget-nutrition-slider .ns-arrow i{
  width: var(--nsArrowIconSize, 22px) !important;
  height: var(--nsArrowIconSize, 22px) !important;
  font-size: var(--nsArrowIconSize, 22px) !important;
  display: block !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* Force SVG paints to follow currentColor (theme may override) */
.elementor-widget-nutrition-slider .ns-arrow svg *,
.elementor-widget-nutrition-slider .ns-arrow svg path{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Desktop cards row */
.ns-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ns-card{
  position: relative;
  text-align: left;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 16px;
  padding:  40px 12px !important;
  cursor: pointer;
  overflow: hidden;
  /* Some themes set button { white-space: nowrap } which truncates long text.
     Desktop cards should wrap naturally inside the card. */
  white-space: normal;
}
.ns-card__title{ display:block; font-weight: 800; margin-bottom: 6px; }
.ns-card__desc{
  display:block;
  opacity:.75;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.ns-card .ns-card__bar{
  position:absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden; /* keep same neutral/active colors as .ns-bar */
}

/* Desktop: card bar progress only on active */
.ns-card.is-active .ns-card__bar::after{
  animation: nsFill var(--nsDur, 4000ms) linear forwards;
}

/* ---------- Responsive ---------- */
/* Tablet/Mobile (max 1024px): show content box + mobile swiper; hide desktop cards */
@media (max-width: 1024px){
  .ns-content{
    display:block;
  }

  .ns-content__desktop{
    display:none;
  }
  .ns-content__mobile{
    display:block;
    width:100%;
  }
  .ns-track{ will-change: transform; }
  .ns-slide{ height:auto; display:block; }

  .ns-cards{
    display:none;
  }

  .ns-bars{
    display:flex;
  }
  .ns-arrows{
    display:flex;
  }
}

/* Desktop (min 1025px): hide middle content box; show cards row */
@media (min-width: 1025px){
  .ns-content{
    display:none;
  }
  .ns-cards{
    display:grid;
  }
}

/* Ensure Elementor/FontAwesome icons render correctly (mobile+tablet+desktop) */
.ns-arrow i,