.gallery-container h1 {
  text-align: center;
}


.category-rows { display: grid; gap: 42px; }
.nf-row-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  margin-left: 30px;
}
.nf-row-header h2 { margin: 0; font-size: 1.25rem; color: #333;  }

/* Kortmått – matchar din gridkänsla */
.nf-scroller {

    scroll-padding-left: calc(var(--leftpad) + 8px);

    --card-w: 280px;
    --card-h: 280px;
    --gap: 16px;

    /* EXAKT bredd för 3,5 kort: 3.5*card + 3*gap */
    width: min(100%, calc(var(--card-w) * 3.5 + var(--gap) * 3));

    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* fade */
/* I början (fade till höger) */
.nf-scroller.fade-state-start {
  mask-image: linear-gradient(to right, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 96%, transparent);
}

/* I slutet (fade till vänster) */
.nf-scroller.fade-state-end {
  mask-image: linear-gradient(to left, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to left, black 96%, transparent);
}

/* I mitten (fade åt båda håll, smalare och jämn) */
.nf-scroller.fade-state-middle {
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.1) 0%,   /* svagt mörk i kanten */
    black 4%,             /* fullt synlig snabbt */
    black 96%,            /* håller fullt nästan hela vägen */
    rgba(0,0,0,0.1) 100%  /* svagt mörk i slutet */
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.1) 0%,
    black 4%,
    black 96%,
    rgba(0,0,0,0.1) 100%
  );
}

/* Dölj rullistans UI (raden kan scrollas men ingen scrollbar visas) */
.nf-scroller { scrollbar-width: none; }          /* Firefox */
.nf-scroller::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

/* Ingen global horisontell scroll på sidan */
html, body { overflow-x: hidden; }

/* Kort – som .grid-item */
.nf-card {
  display: grid;
  grid-template-areas:
      "title"
      "thumb"
      "price";
  grid-template-rows: auto var(--card-h) auto;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  /* overflow: hidden; */
  text-decoration: none;
  color: #333;

  /* Tre rader: titel (auto), bild (fast), pris (auto) */
  display: grid;
  grid-template-rows: auto var(--card-h) auto;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
  z-index: 50;
}

.nf-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); }

/* Titel överst – centrerad */
.nf-title {
    color:#777;
    grid-area: title;
    padding: 12px 14px;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    white-space: nowrap; 
    /* overflow: hidden;  */
    text-overflow: ellipsis;
}

/* Bildyta */
.nf-thumb {
    aspect-ratio: 1 / 1;
    width: var(--card-w, 280px);
    /* overflow: hidden; */
    display: grid;
    place-items: center;
}
.nf-thumb img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 280px;
}

/* Pris + sålda tillsammans */
.nf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 12px;
  font-weight: bold;
  color: #333;
}

.nf-bottom-price {
  display: block;
  text-align: center;
  padding: 10px 14px 12px;
  font-weight: bold;
  color: #333;
}
.nf-bottom-price .nf-price { color: #007bff; }
.nf-bottom .nf-price { color: #007bff; }

.nf-bottom .nf-sold {
  color: #555;
  font-size: 0.95em;
}

/* Saknad thumb */
.nf-missing {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; color: #753232;
}

/* Pilar */
.nf-row { 
  position: relative; 
  width: 100%; /* viktigt, så den matchar den synliga bredden */
  overflow: visible;
}
.nf-controls {
  position: absolute;
  top: 50%; 
  left: -70vw;
  transform: translate(-50%, -50%);
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  z-index: 100;
  pointer-events: none; /* så den inte blockerar bilder */
}
.nf-controls .nf-btn {
  pointer-events: auto; /* men knapparna går att klicka */
}

.nf-btn {
  position: absolute;
    align-items: center; 
    justify-content: center; 
    border: none; border-radius: 999px; width: 48px; height: 48px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    background: #fff; cursor: pointer; font-size: 1rem; line-height: 48px;
}
.nf-btn:hover { transform: translateY(-1px); }
.nf-left img { display:block; transform: scale(0.7) translateX(-2px);}
.nf-right img { display:block; transform: scale(0.7)  translateX(6px); }

body, html { overflow-x: hidden; }

.nf-scrollwrap {
  position: relative; /* viktigt för absoluta knappar */
  overflow: visible;
}

.nf-scroller { 
  padding-left: 30px;
  scroll-padding-left: 30px;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth !important; 
}


/* Mobil – lite mindre kort */
@media (max-width: 600px) {
  .nf-scroller { --card-w: 220px; --card-h: 220px; --gap: 12px; }
  .nf-thumb img { max-height: 220px; }
  .nf-left, .nf-right {
    display: none !important;
  }
  .nf-scroller.has-more {
    mask-image: linear-gradient(to right, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
  }
}