/* ================================================
   Before / after comparison slider (shared)
   Used on the homepage (Sea Buckthorn section) and product-detail pages.
   Markup: see js/nj-compare.js
   ================================================ */
.nj-compare{
  --pos:50%;
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--nj-compare-radius,16px);
  background:#241a14;
  aspect-ratio:672/990;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.nj-compare img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;
}
.nj-compare .nj-compare-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.nj-compare-line{
  position:absolute;top:0;bottom:0;left:var(--pos);
  width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 22px rgba(0,0,0,.35);
  pointer-events:none;
}
.nj-compare-knob{
  position:absolute;top:50%;left:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:#fff;color:#12291A;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:transform .16s ease-out;
}
.nj-compare-knob svg{width:22px;height:22px}
.nj-compare.is-dragging .nj-compare-knob{transform:scale(.92)}
.nj-compare:focus-within .nj-compare-knob{outline:3px solid #A9CE5B;outline-offset:3px}
.nj-compare-tag{
  position:absolute;top:14px;z-index:1;
  padding:6px 12px;border-radius:999px;
  background:rgba(12,31,18,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;
}
.nj-compare-tag.is-before{left:14px}
.nj-compare-tag.is-after{right:14px}
/* Keyboard + screen reader control (visually hidden, still focusable) */
.nj-compare input[type="range"]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);overflow:hidden;opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .nj-compare:hover .nj-compare-knob{transform:scale(1.06)}
  .nj-compare.is-dragging:hover .nj-compare-knob{transform:scale(.92)}
}
@media (prefers-reduced-motion:reduce){
  .nj-compare-knob{transition:none}
}

/* ------------------------------------------------
   Card rail: the page lays the cards out as a grid on wide screens; on phones
   they become a centred, snapping carousel (neighbours peek in at the sides)
   with the prev/next arrows in a row under the cards, never over a photo.
   ------------------------------------------------ */
.nj-rail{position:relative}
.nj-rail-nav{display:none}
@media (max-width:700px){
  .nj-rail .nj-rail-track{
    display:flex;gap:12px;position:relative;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:6px 14% 18px;
  }
  .nj-rail .nj-rail-track::-webkit-scrollbar{display:none}
  /* 14% side padding leaves a 72%-wide content box: one card fills it, neighbours peek into the padding */
  .nj-rail .nj-rail-track>*{flex:0 0 100%;min-width:0;scroll-snap-align:center}
  /* the scroller clips overflow, so a tighter shadow that fits in its padding */
  .nj-rail .nj-rail-track .nj-compare{aspect-ratio:4/5;box-shadow:0 8px 16px rgba(12,31,18,.16)}
  .nj-rail-nav{display:flex;justify-content:center;gap:14px}
  .nj-rail-btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;
    border:0;border-radius:50%;cursor:pointer;
    background:#12291A;color:#fff;
    box-shadow:0 8px 18px rgba(12,31,18,.22);
    transition:opacity .2s ease,transform .16s ease-out;
    -webkit-tap-highlight-color:transparent;
  }
  .nj-rail-btn svg{width:18px;height:18px}
  .nj-rail-btn:active{transform:scale(.94)}
  .nj-rail-btn:focus-visible{outline:3px solid #A9CE5B;outline-offset:2px}
  /* at either end the arrow stays in place, dimmed, so the pair never shifts */
  .nj-rail-btn:disabled{opacity:.3;cursor:default;box-shadow:none;transform:none}
  .nj-rail.is-single .nj-rail-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nj-rail-btn{transition:none}
}