/* Noa & Dje -- categorierondjes (shop + categoriepagina's).
   Maten, kleuren en gedrag 1-op-1 uit het voorbeeld van Angela (26-10-2026).
   Fonts: Poppins / Cormorant Garamond uit fonts.css (lokaal, geen Google). */

.ndr-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 4% 0;
  font-family: var(--font-body, "Poppins", -apple-system, "Segoe UI", sans-serif);
  min-width: 0;
}

.ndr-rowlabel {
  margin: 0;
  padding: 12px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7b6a66;
  line-height: 1.7;
}

.ndr-styles { border-top: 1px solid #f0e6df; margin-top: 4px; }

.ndr-fade { position: relative; min-width: 0; }

/* de rondjes */
.ndr {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4px 16px;
  margin: 0 -4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.ndr::-webkit-scrollbar { display: none; }

.ndr-item {
  flex: none;
  width: auto;
  min-width: 92px;
  max-width: 132px;
  text-align: center;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--text, #4a3b38);
}
.ndr-pic {
  display: flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 9px;
  overflow: hidden;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow .2s, transform .2s;
}
/* overflow:hidden knipt de ring niet af: box-shadow valt buiten de box. */
.ndr-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: none;
}
.ndr-pic--photo img { object-fit: cover; }

.ndr-item:nth-child(4n+1) .ndr-pic { background: #E7D9CC; }
.ndr-item:nth-child(4n+2) .ndr-pic { background: #F1E6EA; }
.ndr-item:nth-child(4n+3) .ndr-pic { background: #ECE6F3; }
.ndr-item:nth-child(4n+4) .ndr-pic { background: #E4E9DF; }

.ndr-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.25;
}
/* item groeit mee met een lang woord (Haaraccessoires), anders overlappen de namen */

.ndr-item:hover .ndr-pic { box-shadow: 0 0 0 2px #D9B5B0; transform: translateY(-2px); }
.ndr-item:focus-visible { outline: none; }
.ndr-item:focus-visible .ndr-pic { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #955251; }
.ndr-item.is-active .ndr-pic { box-shadow: 0 0 0 2.5px #955251; }
.ndr-item.is-active .ndr-label { color: #955251; font-weight: 600; }

/* de oude rechthoekige knoppen niet meer tonen (vangnet als er nog markup staat) */
.ndr-wrap ~ .catpills { display: none; }

/* producttelling met stijlfilter */
.results-count .ndr-count-note { color: var(--text-soft, #7b6a66); }

/* tussen rondjes en productlijst minder lucht */
.ndr-wrap + .filter-toggle,
.ndr-wrap + .shop { margin-top: 0; }

@media (max-width: 640px) {
  .ndr-wrap { padding: .4rem 0 0; }
  .ndr-rowlabel { padding: 8px 16px 0; }
  .ndr {
    gap: 14px;
    padding: 10px 16px 12px;
    margin: 0;
    scroll-padding: 0 16px;
  }
  .ndr-item { width: auto; min-width: 70px; max-width: 112px; }
  .ndr-pic { width: 66px; height: 66px; margin-bottom: 6px; }
  .ndr-label { font-size: 11px; }
  /* vervaging rechts: laat zien dat je kunt vegen */
  .ndr-fade::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44px;
    background: linear-gradient(to left, var(--bg, #FFFBF8), rgba(255, 251, 248, 0));
    pointer-events: none;
  }
}

/* Filters-knop (mobiel) niet tegen de schermrand */
@media (max-width: 860px) {
  .ndr-wrap + .filter-toggle { margin: .6rem 4% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ndr-pic { transition: none; }
  .ndr-item:hover .ndr-pic { transform: none; }
}

/* 29-10-2026: compacte categoriepagina op mobiel (Angela: producten moeten
   zichtbaar zijn zonder scrollen). Alleen smalle schermen; desktop ongewijzigd. */
@media (max-width: 640px) {
  .shop-hero { padding: .9rem 4% 0; }
  .shop-hero .breadcrumb { margin-bottom: .35rem; }
  .shop-hero .eyebrow { margin-bottom: .15rem; }
  .shop-hero h1 { font-size: 1.7rem; margin-bottom: 0; line-height: 1.15; }
  .shop-hero p { display: none; }

  /* beide rijen in een zijwaarts schuifbare rij, zonder kopjes */
  .ndr-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem 16px .4rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .ndr-wrap::-webkit-scrollbar { display: none; }
  .ndr-wrap::after { content: ""; flex: 0 0 20px; }
  .ndr-wrap .ndr-rowlabel { display: none; }
  .ndr-wrap .ndr-fade,
  .ndr-wrap .ndr-styles,
  .ndr-wrap .ndr { display: contents; }
  .ndr-wrap .ndr-fade::after { display: none; }
  .ndr-styles { border-top: 0; margin-top: 0; }
  .ndr-wrap .ndr-item { min-width: 58px; max-width: 84px; }
  .ndr-wrap .ndr-pic { width: 52px; height: 52px; margin-bottom: 4px; }
  .ndr-wrap .ndr-label { font-size: 10.5px; letter-spacing: .02em; }
  /* streepje tussen onderdelen en stijlen */
  .ndr-styles .ndr-item:first-child {
    margin-left: 2px;
    padding-left: 14px;
    border-left: 1px solid #eadfd8;
    min-width: 72px;
  }

  /* Filters, aantal en sorteren dicht op elkaar */
  .ndr-wrap + .filter-toggle { margin: .2rem 4% 0; padding: .2rem 0; }
  .shop { padding-top: .4rem; }
  .results-bar {
    flex-wrap: nowrap;
    gap: .5rem;
    margin-bottom: .8rem;
    padding-bottom: .6rem;
  }
  .results-sort label { display: none; }
  .results-sort select { padding: .4rem 1.8rem .4rem .6rem; }
}
@media (max-width: 640px) {
  .results-count { white-space: nowrap; font-size: .78rem; }
  .results-sort { flex: 0 1 auto; min-width: 0; }
  .results-sort select { width: 100%; max-width: 160px; font-size: 14px; }
  .ndr-wrap .ndr-item.is-active .ndr-pic { box-shadow: 0 0 0 2px #955251; }
}
/* 29-10-2026: ook op laptop/desktop compact (Angela): een rij, kleinere rondjes,
   zodat de producten direct zichtbaar zijn. */
@media (min-width: 641px) {
  .shop-hero { padding-top: 1.3rem; }
  .shop-hero .breadcrumb { margin-bottom: .5rem; }
  .shop-hero .eyebrow { margin-bottom: .15rem; }
  .shop-hero h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: .2rem; line-height: 1.15; }
  .shop-hero p { font-size: .88rem; }

  .ndr-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .7rem 4% .3rem;
    scrollbar-width: none;
  }
  .ndr-wrap::-webkit-scrollbar { display: none; }
  .ndr-wrap .ndr-rowlabel { display: none; }
  .ndr-wrap .ndr-fade,
  .ndr-wrap .ndr-styles,
  .ndr-wrap .ndr { display: contents; }
  .ndr-styles { border-top: 0; margin-top: 0; }
  .ndr-wrap .ndr-item { min-width: 70px; max-width: 104px; }
  .ndr-wrap .ndr-pic { width: 58px; height: 58px; margin-bottom: 5px; }
  .ndr-wrap .ndr-label { font-size: 11.5px; }
  .ndr-wrap .ndr-item.is-active .ndr-pic { box-shadow: 0 0 0 2px #955251; }
  .ndr-styles .ndr-item:first-child {
    margin-left: 6px;
    padding-left: 24px;
    border-left: 1px solid #eadfd8;
    min-width: 96px;
  }

  .shop { padding-top: 1.2rem; }
  .results-bar { margin-bottom: 1.1rem; padding-bottom: .8rem; }
}