/* ==================================================================
   Hoofdmenu — uitklap met merklogo's (23 september 2026)
   Drie opmaken: "kolommen" (standaard, hieronder eerst), "verticaal" en
   "per merk" (verderop). Keuze: NR Agri → Thema-instellingen → Hoofdmenu.

   WAT HET IS
   ==========
   Bij het aanwijzen van een hoofdcategorie in de menubalk (Melkmachine,
   Melkrobot, Stal benodigdheden …) verschijnt één breed paneel:
     1. "Zoek per merk" — de merklogo's, alleen merken met producten hier;
     2. "Categorieën"   — de subcategorieën in kolommen;
     3. een voetregel met korte uitleg en "Alle … →".

   Het sjabloon is megamenu.phtml van het thema; welke logo's erin komen
   rekent NrAgri\ThemeSettings\ViewModel\MenuBrands uit.

   WAAROM EIGEN KLASSEN EN GEEN TAILWIND
   =====================================
   Onze Tailwind-bouw maakt alleen klassen die al ergens in de themamap
   voorkomen. Nieuwe klassen in het sjabloon zouden op melknl pas werken na
   een nieuwe bouw én een nieuwe styles.css voor de hele winkel. Met eigen
   klassen in dit bestand is het één stylesheet erbij, en blijft de rest van
   de winkel onaangeroerd.

   BREED PANEEL
   ============
   De rij met menu-items (.nr-mm-row) is het ankerpunt; de items zelf zijn
   niet gepositioneerd. Daardoor spant het paneel de hele menubalk en valt het
   ook onder de rechter items niet buiten beeld. Een paneel zonder logo's en
   zonder subcategorieën (Skelex) blijft klein en hangt onder zijn eigen item.

   Openen gaat op muis én toetsenbord (:focus-within), met een kleine
   vertraging zodat het paneel niet flitst als de muis er alleen overheen
   schiet.
   ================================================================== */

.nr-mm-row {
    position: relative;
}

.nr-mm-row .nr-mm-item {
    position: static;
}

.nr-mm-row .nr-mm-item:has(> .nr-mm-panel--compact) {
    position: relative;
}

.nr-mm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--color-primary, #6CBF4A);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 50px -14px rgba(15, 23, 42, .30);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

/* Klein paneel (Skelex): hangt rechts uitgelijnd onder zijn eigen item. Het
   is meestal het laatste item van de balk; links uitgelijnd zou het op een
   scherm van 1024–1270 px rechts buiten beeld vallen. */
.nr-mm-panel--compact {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 280px;
    max-width: 380px;
}

.nr-mm-item:hover > .nr-mm-panel,
.nr-mm-item:focus-within > .nr-mm-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .18s ease .07s, transform .18s ease .07s, visibility 0s linear 0s;
}

.nr-mm-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 26px 18px;
    max-height: min(75vh, 660px);
    overflow: auto;
}

.nr-mm-panel--compact .nr-mm-inner {
    padding: 18px 20px;
    gap: 12px;
}

/* ---------- kopjes ---------- */
.nr-mm-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}

.nr-mm-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eceff3;
}

/* ---------- merklogo's ---------- */
.nr-mm-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

/*
   Merklogo's ZONDER tegel (23 september 2026, derde ronde — de opdrachtgever
   wilde de logo's zoals ze zijn, niet in grote grijze vlakken).

   De maat staat per logo inline in het sjabloon (MenuBrands::logoSize): elk
   logo krijgt hetzelfde oppervlak, zodat een lang woordmerk en een rond
   embleem even zwaar ogen zonder dat er een vak omheen nodig is. Hier alleen
   de plaatsing en een zachte markering bij aanwijzen.
*/
.nr-mm-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background-color .15s ease;
}

.nr-mm-logo img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.nr-mm-logo:hover,
.nr-mm-logo:focus-visible {
    background: #f3f5f8;
    outline: none;
}

/* ---------- subcategorieën ---------- */
.nr-mm-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 18px;
}

.nr-mm-cats a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #374151;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.nr-mm-cats a:hover,
.nr-mm-cats a:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 9%, transparent);
    color: var(--color-primary-700, #46812F);
    outline: none;
}

.nr-mm-arr {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
    color: #cbd5e1;
}

.nr-mm-arr svg {
    width: 100%;
    height: 100%;
}

.nr-mm-cats a:hover .nr-mm-arr,
.nr-mm-cats a:focus-visible .nr-mm-arr {
    color: var(--color-primary, #6CBF4A);
}

/* ---------- voetregel ---------- */
.nr-mm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding-top: 14px;
    border-top: 1px solid #eceff3;
}

.nr-mm-panel--compact .nr-mm-foot {
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
    align-items: flex-start;
}

.nr-mm-foot p {
    margin: 0;
    font-size: .87rem;
    color: #6b7280;
}

.nr-mm-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 9px;
    background: var(--color-primary, #6CBF4A);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease;
}

.nr-mm-all .nr-mm-arr {
    color: currentColor;
}

.nr-mm-all:hover,
.nr-mm-all:focus-visible {
    background: var(--color-primary-700, #46812F);
    color: #fff;
    outline: none;
}

/* ---------- aantallen (alle stijlen) ---------- */
.nr-mm-n {
    flex: none;
    min-width: 1.6em;
    font-size: .74rem;
    color: #9ca3af;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   STIJL "VERTICAAL" — merken onder elkaar, subcategorieën klappen uit

   Het paneel hangt onder zijn eigen menu-item. Links de merken als rijen,
   rechts één uitklap per merk, allemaal op dezelfde plek (bovenkant van de
   lijst) en minstens zo hoog als de lijst. Zolang er geen rij wordt
   aangewezen staat de uitklap van het eerste merk open.

   LET OP: die "standaard open"-regel staat bewust ONDER .nr-mmv-scope:hover /
   :focus-within (het menu-item, of de categorierij in "Alle categorieën"). Een kind met visibility:visible wordt óók getoond als zijn
   ouder visibility:hidden heeft — zonder die voorwaarde stond de uitklap
   onzichtbaar maar klikbaar onder het menu, ook als het paneel dicht was.

   Verbergen gaat met 0,12 s vertraging: schuin naar de uitklap bewegen over
   een buurrij heen laat hem dan niet meteen wegspringen.
   ================================================================== */
.nr-mm-row .nr-mm-item:has(> .nr-mm-panel--v) {
    position: relative;
}

.nr-mm-panel--v {
    right: auto;
    width: max-content;
    border-radius: 0 0 0 14px;
}

.nr-mmv {
    position: relative;
    width: 250px;
    padding: 16px 12px 12px;
}

/* Als uitklap naast een lijst ("Alle categorieën", open balk homepage): eigen kader. */
.nr-mmv--box {
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--color-primary, #6CBF4A);
    border-radius: 0 0 0 14px;
    box-shadow: 0 26px 50px -14px rgba(15, 23, 42, .30);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.nr-mmv--box .nr-mmv-fly {
    top: -3px;
}

.nr-mmv .nr-mm-label {
    margin: 0 4px 10px;
}

.nr-mmv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nr-mmv-row {
    position: static;
}

.nr-mmv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    color: #374151;
    text-decoration: none;
    transition: background-color .12s ease;
}

.nr-mmv-logo {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 4px;
}

.nr-mmv-logo img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.nr-mmv-catlabel {
    flex: 1;
    padding: 0 4px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 34px;
}

.nr-mmv-row--cats {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eceff3;
}

.nr-mmv-row:hover > .nr-mmv-brand,
.nr-mmv-row:focus-within > .nr-mmv-brand,
.nr-mmv-scope:hover .nr-mmv-list:not(:hover):not(:focus-within) > .nr-mmv-row:first-child > .nr-mmv-brand,
.nr-mmv-scope:focus-within .nr-mmv-list:not(:hover):not(:focus-within) > .nr-mmv-row:first-child > .nr-mmv-brand {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 10%, transparent);
}

.nr-mmv-row:hover > .nr-mmv-brand .nr-mm-arr,
.nr-mmv-row:focus-within > .nr-mmv-brand .nr-mm-arr {
    color: var(--color-primary, #6CBF4A);
}

.nr-mmv-fly {
    position: absolute;
    top: -3px;
    left: 100%;
    z-index: 1;
    width: 300px;
    min-height: calc(100% + 3px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--color-primary, #6CBF4A);
    border-radius: 0 0 14px 0;
    box-shadow: 18px 26px 44px -20px rgba(15, 23, 42, .32);
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease, visibility 0s linear .12s;
}

.nr-mmv-row:hover > .nr-mmv-fly,
.nr-mmv-row:focus-within > .nr-mmv-fly,
.nr-mmv-scope:hover .nr-mmv-list:not(:hover):not(:focus-within) > .nr-mmv-row:first-child > .nr-mmv-fly,
.nr-mmv-scope:focus-within .nr-mmv-list:not(:hover):not(:focus-within) > .nr-mmv-row:first-child > .nr-mmv-fly {
    z-index: 2;
    visibility: visible;
    opacity: 1;
    transition: opacity .14s ease .04s, visibility 0s linear 0s;
}

.nr-mmv-title {
    margin: 0 4px;
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

.nr-mmv-title span {
    font-weight: 400;
    color: #6b7280;
}

.nr-mmv-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nr-mmv-subs a,
.nr-mmb-subs a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    color: #374151;
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.nr-mmv-subs a:hover,
.nr-mmv-subs a:focus-visible,
.nr-mmb-subs a:hover,
.nr-mmb-subs a:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 9%, transparent);
    color: var(--color-primary-700, #46812F);
    outline: none;
}

.nr-mmv-fly .nr-mm-all {
    align-self: flex-start;
    margin-top: auto;
}

/* ==================================================================
   STIJL "PER MERK" — kolom per merk met zijn subcategorieën

   Breed paneel zoals de standaardstijl. Elke kolom: het logo (naar alles van
   dat merk in deze categorie), daaronder de subcategorieën waar het merk
   producten heeft, in boomvolgorde. Onderaan alle subcategorieën op één
   regel, voor wie niet op merk zoekt.
   ================================================================== */
.nr-mmb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 20px 18px;
}

.nr-mmb-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.nr-mmb-col .nr-mm-logo {
    justify-content: flex-start;
    min-height: 44px;
    padding: 4px 6px;
}

.nr-mmb-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nr-mmb-subs a {
    padding: 5px 6px;
    font-size: .87rem;
}

.nr-mmb-alle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 6px;
    color: var(--color-primary-700, #46812F);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.nr-mmb-alle .nr-mm-arr {
    width: 12px;
    height: 12px;
    color: currentColor;
}

.nr-mmb-alle:hover,
.nr-mmb-alle:focus-visible {
    text-decoration: underline;
    outline: none;
}

.nr-mmb-cats {
    flex: 1 1 420px;
    margin: 0;
    font-size: .84rem;
    line-height: 1.9;
    color: #9ca3af;
}

.nr-mmb-cats span {
    margin-right: 4px;
    font-weight: 700;
    color: #374151;
}

.nr-mmb-cats a {
    color: #4b5563;
    text-decoration: none;
}

.nr-mmb-cats a:hover,
.nr-mmb-cats a:focus-visible {
    color: var(--color-primary-700, #46812F);
    text-decoration: underline;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .nr-mmv-fly,
    .nr-mmv-row:hover > .nr-mmv-fly {
        transition: none;
    }
}

/* ==================================================================
   MENUBALK "MERK EERST" — merk → categorieën → subcategorieën → producten
   (proef 23 september 2026; html/menu/merkpaneel.phtml)

   Kop: merklogo + aantal artikelen. Daaronder twee delen: links de boom
   (categorie vet, subcategorieën ingesprongen, aantallen rechts), rechts de
   producten van de aangewezen regel. De aangewezen regel blijft gemarkeerd
   (.is-actief) als de muis naar de producten gaat, zodat duidelijk blijft
   waar de producten bij horen.
   ================================================================== */
.nr-mmm-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #eceff3;
}

.nr-mmm-naam {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}

.nr-mmm-aantal {
    font-size: .85rem;
    color: #6b7280;
}

.nr-mmm-body {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 300px;
    max-height: min(70vh, 600px);
}

.nr-mmm-tree {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 10px 14px;
    overflow: auto;
    border-right: 1px solid #eceff3;
}

.nr-mmm-cat,
.nr-mmm-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #374151;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.nr-mmm-cat {
    margin-top: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: #111827;
}

.nr-mmm-cat:first-child {
    margin-top: 0;
}

.nr-mmm-sub {
    padding-left: 24px;
    font-size: .88rem;
}

.nr-mmm-cat:hover,
.nr-mmm-sub:hover,
.nr-mmm-cat:focus-visible,
.nr-mmm-sub:focus-visible,
.nr-mmm-cat.is-actief,
.nr-mmm-sub.is-actief {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 10%, transparent);
    color: var(--color-primary-700, #46812F);
    outline: none;
}

.nr-mmm-prod {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px 24px 18px;
    overflow: auto;
}

.nr-mmm-titel {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

.nr-mmm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    transition: opacity .15s ease;
}

.nr-mmm-grid.is-laden {
    opacity: .45;
}

.nr-mmm-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    transition: background-color .12s ease;
}

.nr-mmm-card:hover,
.nr-mmm-card:focus-visible {
    background: #f6f7f9;
    outline: none;
}

.nr-mmm-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.nr-mmm-img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nr-mmm-pnaam {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-size: .84rem;
    line-height: 1.3;
}

.nr-mmm-prijs {
    font-size: .92rem;
    font-weight: 800;
    color: var(--color-secondary, #142C73);
}

.nr-mmm-leeg {
    margin: 0;
    font-size: .88rem;
    color: #6b7280;
}

.nr-mmm-prod .nr-mm-all {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- merkpaneel met modellen (Lely, 27 oktober 2026) ----------
   Rechts blokjes per model (zonder pictogram, op verzoek 30-10-2026); een
   blokje opent de onderdelenzoeker met merk + model al gekozen. Naam groot ("A3 Next"), serie klein erboven ("Astronaut"),
   aantal onderdelen rechts. */
.nr-mmm-muitleg {
    margin: -6px 0 0;
    font-size: .84rem;
    color: #6b7280;
}

.nr-mmm-mgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nr-mmm-model {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    height: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #DCE3EC;
    border-radius: 12px;
    background: #fff;
    color: var(--color-secondary, #142C73);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.nr-mmm-model:hover,
.nr-mmm-model:focus-visible {
    border-color: var(--color-primary, #6CBF4A);
    box-shadow: 0 6px 16px rgba(20, 44, 115, .10);
    transform: translateY(-1px);
}

.nr-mmm-mico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EEF4FA;
    color: var(--color-secondary, #142C73);
    transition: background .15s ease, color .15s ease;
}

.nr-mmm-model:hover .nr-mmm-mico,
.nr-mmm-model:focus-visible .nr-mmm-mico {
    background: var(--color-primary, #6CBF4A);
    color: #fff;
}

.nr-mmm-mico svg {
    width: 22px;
    height: 22px;
}

.nr-mmm-mtekst {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.nr-mmm-mserie {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
}

.nr-mmm-mnaam {
    font-size: 1.12rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Telefoonmenu: modellen als blokjes onder het merk (27 oktober 2026). */
.nr-mob-modellen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 18px 12px;
}

.nr-mob-model {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 4px;
    border: 1px solid #DCE3EC;
    border-radius: 10px;
    background: #fff;
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
    color: var(--color-secondary, #142C73);
}

.nr-mob-model:active {
    border-color: var(--color-primary, #6CBF4A);
}

.nr-mmm-maantal {
    margin-top: 3px;
    font-size: .74rem;
    font-weight: 600;
    color: #6b7280;
}

.nr-mmm-modellen .nr-mm-zoeker {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- variant "logos": merklogo's in een lichte menubalk ----------
   Op de navy balk verdwijnen de meeste logo's (contrast 1,1–2,6 : 1, gemeten
   23 september 2026). Deze variant maakt de balk wit; de inline kleur uit de
   thema-instellingen wordt daarom met !important overschreven. De groene
   streep onder het aangewezen merk blijft. */
nav.nr-mm--logobalk {
    background: var(--nr-balk, #fff) !important;
    color: var(--color-secondary, #142C73) !important;
    border-top: 1px solid rgba(20, 44, 115, .10);
}

/* Tweede ronde (24 september 2026): wit liep over in de witte header erboven.
   De tint komt als --nr-balk uit megamenu.phtml (instelling logobar_color,
   waarden in MenuBarColor); standaard lichtblauw #DDEAF3. */

/* --nr-schaal: 1, of kleiner als de rij niet past (het script pas() onderaan
   megamenu.phtml). Logo's en tussenruimte krimpen dan samen mee. */
.nr-mm--logobalk .nr-mmb-link {
    padding-left: calc(10px * var(--nr-schaal, 1));
    padding-right: calc(10px * var(--nr-schaal, 1));
}

.nr-mmb-logo {
    display: block;
    width: calc(var(--w) * var(--nr-schaal, 1));
    height: calc(var(--h) * var(--nr-schaal, 1));
    max-width: none;
    object-fit: contain;
}

/* ---------- "Kies uw merk" vóór de logo's (24 september 2026) ----------
   In dezelfde rij, klein en vet, met een groen pijltje naar de logo's. Het
   pijltje duwt bij het laden twee keer zachtjes naar rechts. Past de rij
   niet (.is-krap), dan gaat het label naar twee regels. */
.nr-mmb-kies {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 4px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
}

.nr-mm-row.is-krap .nr-mmb-kies {
    max-width: 8.6em;
    white-space: normal;
}

/* ---------- indeling van de merkenbalk (tweede ronde) ----------
   [Alle categorieën] [ ····· Kies uw merk › logo logo logo ····· ] [Klantenservice]
   De middelste zone vult de ruimte; label + logo's staan als groep in het
   midden, met tussenruimte die meegroeit met het scherm. pas() in
   megamenu.phtml meet of de groep past (zie daar). */
.nr-mmb-rij {
    flex: 1 1 auto;
    min-width: 0;
}

/* De groene knop en "Klantenservice" krimpen nooit: alleen de middelste zone
   geeft ruimte af (anders brak "Alle categorieën" over twee regels). */
.nr-mmb-rij > .nr-tik:first-child,
.nr-mmb-rij > .nr-mms {
    flex: none;
}

.nr-mmb-rij > .nr-tik:first-child > button {
    white-space: nowrap;
}

.nr-mmb-zone {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
}

/* Krapper (smal scherm of veel merken): de randen en tussenruimtes geven wat af. */
.nr-mm-row.is-krapper .nr-mms {
    padding-left: 4px;
}

.nr-mm-row.is-krapper .nr-mms-knop {
    gap: 6px;
    padding: 7px 10px 7px 8px;
    font-size: .72rem;
    letter-spacing: .02em;
}

.nr-mm-row.is-krapper .nr-mms-chev {
    display: none;
}

.nr-mm-row.is-krapper .nr-mmb-lijst {
    gap: 4px;
}

.nr-mm-row.is-krapper.nr-mm-row .nr-mmb-link {
    padding-left: calc(8px * var(--nr-schaal, 1));
    padding-right: calc(8px * var(--nr-schaal, 1));
}

.nr-mm-row.is-krapper .nr-mmb-rij > .nr-tik:first-child > button {
    padding-left: 16px;
    padding-right: 16px;
}

.nr-mmb-lijst {
    display: flex;
    flex: none;
    align-items: stretch;
    gap: calc(clamp(2px, 1vw, 22px) * var(--nr-schaal, 1));
}

/* ---------- categorie ná de merklogo's (27 oktober 2026) ----------
   "Stal benodigdheden" (instelling megamenu/bar_extra) als tekstknop achter
   de logo's, met een dun streepje ertussen: logo's = merken, dit = een
   productgroep zonder merk. De uitklap is dezelfde als in de gewone
   categoriebalk. pas() telt de breedte mee. */
.nr-mmb-extra {
    display: flex;
    flex: none;
    align-items: stretch;
    margin: 0 0 0 calc(10px * var(--nr-schaal, 1));
    padding: 0;
    list-style: none;
}

.nr-mmb-extra > li {
    display: flex;
    align-items: stretch;
}

.nr-mmb-extra-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 6px 0 calc(16px * var(--nr-schaal, 1));
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

.nr-mmb-extra-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(20, 44, 115, .18);
}

.nr-mmb-extra-link::after {
    content: "";
    position: absolute;
    left: calc(16px * var(--nr-schaal, 1));
    right: 6px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-primary, #6CBF4A);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.nr-mm-item:hover > .nr-mmb-extra-link::after,
.nr-mm-item.is-open > .nr-mmb-extra-link::after {
    transform: scaleX(1);
}

.nr-mm-item:hover > .nr-mmb-extra-link,
.nr-mm-item.is-open > .nr-mmb-extra-link {
    color: var(--color-primary-700, #46812F);
}

.nr-mmb-extra-ico {
    display: inline-flex;
    flex: none;
    width: 22px;
    height: 22px;
}

.nr-mmb-extra-ico svg,
.nr-mmb-extra-chev svg {
    width: 100%;
    height: 100%;
}

.nr-mmb-extra-chev {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
    opacity: .6;
    transition: transform .2s ease;
}

.nr-mm-item:hover > .nr-mmb-extra-link .nr-mmb-extra-chev,
.nr-mm-item.is-open > .nr-mmb-extra-link .nr-mmb-extra-chev {
    transform: rotate(180deg);
}

/* Krap: de naam op twee regels ("Stal / benodigdheden"); krapper (tablet
   liggend): kleiner, zonder pijltje — zoals Klantenservice. */
.nr-mm-row.is-krap .nr-mmb-extra-naam {
    width: min-content;
    white-space: normal;
}

.nr-mm-row.is-krapper .nr-mmb-extra-link {
    gap: 6px;
    padding-right: 2px;
    font-size: .7rem;
    letter-spacing: .02em;
}

.nr-mm-row.is-krapper .nr-mmb-extra-ico {
    width: 18px;
    height: 18px;
}

.nr-mm-row.is-krapper .nr-mmb-extra-chev {
    display: none;
}

/* Telefoon/tablet: als laatste in de schuifstrook, als tekstchip. */
.nr-mob-rolcat {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 44, 115, .14);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-secondary, #142C73);
}

.nr-mob-rolcat .nr-mmb-extra-ico {
    width: 16px;
    height: 16px;
}

/* Grotere logo's (27 oktober 2026) vragen meer ruimte: de logobalk mag op een
   breed scherm breder zijn dan de koptekst erboven (max. 1440 px). */
@media (min-width: 1280px) {
    .nr-mm--logobalk > .container {
        max-width: 1440px;
    }
}

/* "+N merken": verschijnt pas als er merken niet meer passen. */
.nr-mmo-knop {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 56px;
    padding: 0 10px;
    background: none;
    border: 0;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.nr-mmo-knop [data-nr-aantal] {
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 44, 115, .12);
}

.nr-mmo-chev,
.nr-mms-chev {
    display: inline-flex;
    width: 14px;
    height: 14px;
    opacity: .6;
    transition: transform .2s ease;
}

.nr-mmo-chev svg,
.nr-mms-chev svg {
    width: 100%;
    height: 100%;
}

.nr-mm-item:hover > .nr-mmo-knop .nr-mmo-chev,
.nr-mm-item.is-open > .nr-mmo-knop .nr-mmo-chev,
.nr-mm-item:hover > .nr-mms-knop .nr-mms-chev,
.nr-mm-item.is-open > .nr-mms-knop .nr-mms-chev {
    transform: rotate(180deg);
}

.nr-mm-panel--over {
    left: auto;
    right: 0;
    width: max-content;
    max-width: 100%;
}

.nr-mmo {
    padding: 18px 22px 20px;
}

.nr-mmo-kols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.nr-mmo-kol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
}

.nr-mmo-kol[hidden] {
    display: none;
}

.nr-mmo-logo {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 4px;
}

.nr-mmo-logo img {
    display: block;
    max-width: none;
    object-fit: contain;
}

.nr-mmo-kol ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nr-mmo-kol ul a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    color: #374151;
    font-size: .9rem;
    text-decoration: none;
}

.nr-mmo-kol ul a:hover,
.nr-mmo-kol ul a:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 9%, transparent);
    color: var(--color-primary-700, #46812F);
    outline: none;
}

/* ---------- "Klantenservice" (in plaats van ⋯) ----------
   Een witte knop met groen pictogram rechts in de balk: zichtbaar als knop,
   met tekst, zodat bezoekers weten dat daar de overige pagina's staan. De
   uitklap hangt rechts uitgelijnd onder de knop (paneel --compact). */
.nr-mms {
    display: flex;
    flex: none;
    align-items: center;
    padding-left: 12px;
}

.nr-mms-knop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    background: #fff;
    border: 1px solid rgba(20, 44, 115, .14);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(20, 44, 115, .08);
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nr-mm-item:hover > .nr-mms-knop,
.nr-mm-item.is-open > .nr-mms-knop,
.nr-mms-knop:focus-visible {
    border-color: var(--color-primary, #6CBF4A);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6CBF4A) 22%, transparent);
    outline: none;
}

.nr-mms-ico {
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--color-primary, #6CBF4A);
}

.nr-mms-ico svg {
    width: 100%;
    height: 100%;
}

/* Uitklap Klantenservice, compact (28 september 2026): ongeveer zo breed als
   de knop, geen kop (die staat al op de knop), kleinere regels. Hoogte past
   altijd in het scherm: --nr-ruimte = ruimte onder de menubalk, gemeten door
   het script onderaan megamenu.phtml (de header blijft bovenaan staan, dus
   wat eronder valt kon de bezoeker niet bereiken — de e-mail was op een laptop
   alleen te zien door uit te zoomen). */
.nr-mm-panel--service {
    min-width: 100%;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    max-height: var(--nr-ruimte, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 14px 14px;
}

.nr-mms-paneel {
    padding: 6px;
}

.nr-mms-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nr-mms-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #1f2937;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.nr-mms-link:hover,
.nr-mms-link:focus-visible {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 9%, transparent);
    color: var(--color-primary-700, #46812F);
    outline: none;
}

.nr-mms-pic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 12%, #fff);
    color: var(--color-primary-700, #46812F);
}

.nr-mms-pic svg {
    width: 100%;
    height: 100%;
}

.nr-mms-hulp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--color-secondary, #142C73);
    color: #fff;
}

.nr-mms-hulp strong {
    padding: 0 2px 2px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

.nr-mms-bel,
.nr-mms-mail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.nr-mms-bel {
    background: var(--color-primary, #6CBF4A);
}

.nr-mms-mail {
    background: rgba(255, 255, 255, .12);
}

.nr-mms-bel:hover,
.nr-mms-mail:hover,
.nr-mms-bel:focus-visible,
.nr-mms-mail:focus-visible {
    filter: brightness(1.1);
    outline: none;
}

.nr-mms-bel svg,
.nr-mms-mail svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.nr-mmb-kies-pijl {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-primary, #6CBF4A);
    animation: nr-duw 1.1s ease-in-out .6s 2;
}

.nr-mmb-kies-pijl svg {
    width: 100%;
    height: 100%;
    stroke-width: 3;
}

@keyframes nr-duw {
    0%, 100% { transform: none; }
    50% { transform: translateX(4px); }
}

/* ==================================================================
   TIKKEN — iPad en andere aanraakschermen (24 september 2026)

   Het script onderaan megamenu.phtml zet .is-open op een .nr-tik bij de
   eerste tik; hier wordt dat zichtbaar. Op een apparaat zonder hover
   (@media (hover:none)) telt ALLEEN .is-open: anders blijft een paneel na
   het kruisje open staan, omdat iOS de laatste tik als "hover" onthoudt.
   ================================================================== */
.nr-tik.is-open > .nr-tik-doel {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
}

.nr-mm-item.is-open > .nr-mm-panel,
.nr-mmv-row.is-open > .nr-mmv-fly {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.nr-mm-item.is-open > a::after {
    --tw-scale-x: 100%;
}

div.nr-mmv-scope.is-open > a[data-nr-open],
.nr-mmv-row.is-open > .nr-mmv-brand {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 8%, transparent);
    color: var(--color-primary-700, #46812F);
}

.nr-mmm-dicht {
    display: none;
}

@media (hover: none) {
    .nr-mm-item.nr-tik:not(.is-open) > .nr-mm-panel,
    .nr-mmv-row.nr-tik:not(.is-open) > .nr-mmv-fly {
        visibility: hidden;
        opacity: 0;
    }

    /* Zolang er in een merkenlijst niets is aangetikt, staat het eerste merk open — maar alleen als het menu
       zelf open is: "inherit" volgt het (verborgen) paneel. Met "visible" stond dit uitklapvak onzichtbaar
       (opacity 0) maar wél aantikbaar over de pagina, op iPad/touch: een tik op de inhoud ging naar een categorie. */
    .nr-mmv-list:not(:has(> .is-open)) > .nr-mmv-row:first-child > .nr-mmv-fly {
        visibility: inherit;
        opacity: 1;
        transform: none;
    }

    .nr-mmm-dicht {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        height: 40px;
        margin-left: auto;
        padding: 9px;
        border: 0;
        border-radius: 999px;
        background: #f3f4f6;
        color: #374151;
        cursor: pointer;
    }

    .nr-mmm-dicht svg {
        width: 100%;
        height: 100%;
    }

    /* Vinger in plaats van muis: iets ruimere regels in het merkpaneel. */
    .nr-mmm-cat,
    .nr-mmm-sub {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ==================================================================
   TELEFOON — categorie → merk → subcategorie (23 september 2026)

   In het schuifmenu klapt een categorie open met eerst "Alles in …", dan de
   merken als knoppen met hun logo. Tik op een merk en zijn subcategorieën
   klappen eronder open. Daarna "Categorieën" met alle subcategorieën, voor
   wie niet op merk zoekt. Knoppen minstens 46 px hoog (duimmaat).
   ================================================================== */
.nr-mob-label {
    margin: 0;
    padding: 12px 18px 6px 48px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}

.nr-mob-brands {
    display: flex;
    flex-direction: column;
    padding: 0 14px 8px 44px;
}

.nr-mob-brandbtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 6px 6px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(20, 44, 115, .09);
    cursor: pointer;
    text-align: left;
}

.nr-mob-logo {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.nr-mob-logo img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.nr-mob-chev {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    transition: transform .2s ease;
}

.nr-mob-chev svg {
    width: 100%;
    height: 100%;
}

.nr-mob-chev.is-open {
    transform: rotate(180deg);
    color: var(--color-primary, #6CBF4A);
}

.nr-mob-subs {
    display: flex;
    flex-direction: column;
    padding: 4px 0 6px 8px;
}

.nr-mob-subs a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 7px;
    color: #374151;
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: none;
}

.nr-mob-subs a:hover,
.nr-mob-subs a:active {
    background: #fff;
    color: var(--color-primary-700, #46812F);
}

.nr-mob-subs .nr-mob-all {
    font-weight: 700;
    color: var(--color-primary-700, #46812F);
}

@media (prefers-reduced-motion: reduce) {
    .nr-mm-panel,
    .nr-mm-item:hover > .nr-mm-panel,
    .nr-mm-item:focus-within > .nr-mm-panel,
    .nr-mm-logo {
        transition: none;
        transform: none;
    }
}

/* ==================================================================
   TELEFOON EN TABLET STAAND — logostrook "Kies uw merk" (24 september 2026)

   Onder de menuknop (vanaf 640 px ernaast) staan de merklogo's in een strook
   die opzij schuift. Zolang er rechts nog meer staat, vervaagt de rand
   (.is-meer, gezet door pas() in megamenu.phtml). Elk logo is een knop van
   minstens 44 px hoog (duimmaat) en opent het schuifmenu bij dat merk.
   ================================================================== */
/* LET OP: alleen onder 1024 px. Tailwind 4 zet lg:hidden in een @layer, en
   gewone css zonder laag wint daar altijd van — ook met minder specificiteit.
   Zonder deze @media stond het telefoonmenu op de pc als tweede rij onder de
   merkenbalk (gemeld 24 september 2026: "dubbel in de header"). */
@media (max-width: 1023.98px) {
    .nr-mob-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 18px;
    }
}

.nr-mob-strook {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 48px;
    border-top: 1px solid rgba(20, 44, 115, .08);
}

.nr-mob-kies {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    max-width: 8.4em;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.15;
    text-transform: uppercase;
}

.nr-mob-kies .nr-mmb-kies-pijl {
    width: 14px;
    height: 14px;
}

@media (min-width: 640px) {
    .nr-mob-strook {
        flex: 1 1 0;
        border-top: 0;
    }

    .nr-mob-kies {
        max-width: none;
        white-space: nowrap;
    }
}

.nr-mob-rol {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.nr-mob-rol::-webkit-scrollbar {
    display: none;
}

.nr-mob-rol.is-meer {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.nr-mob-rolmerk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
}

.nr-mob-rolmerk:active {
    background: rgba(20, 44, 115, .07);
}

.nr-mob-rolmerk img {
    display: block;
    max-width: none;
    object-fit: contain;
}

.nr-mob-rolnaam {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- schuifmenu: merken bovenaan ----------
   Merk → zijn categorieën (vet) met de subcategorieën ingesprongen eronder,
   onderaan "Alles van <merk>". Eén merk tegelijk open. */
.nr-mob-kop {
    margin: 0;
    padding: 16px 18px 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}

.nr-mob-merk {
    border-bottom: 1px solid #f3f4f6;
}

.nr-mob-merkbtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: #111827;
}

.nr-mob-merkbtn[aria-expanded="true"],
.nr-mob-merkcats {
    background: color-mix(in srgb, var(--color-primary, #6CBF4A) 7%, #fff);
}

.nr-mob-merkcats {
    display: flex;
    flex-direction: column;
    padding: 2px 12px 10px 18px;
}

.nr-mob-cat,
.nr-mob-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 7px;
    color: #374151;
    font-size: .92rem;
    line-height: 1.3;
    text-decoration: none;
}

.nr-mob-cat {
    font-weight: 700;
    color: #111827;
}

.nr-mob-sub {
    padding-left: 24px;
    font-size: .88rem;
}

.nr-mob-cat:active,
.nr-mob-sub:active {
    background: #fff;
    color: var(--color-primary-700, #46812F);
}

.nr-mob-merkcats .nr-mob-all {
    display: block;
    margin-top: 4px;
    padding: 11px 10px;
    font-weight: 700;
    color: var(--color-primary-700, #46812F);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .nr-mmb-kies-pijl {
        animation: none;
    }
}

/* Telefoonmenu: klantenservice onderaan, zelfde pictogrammen als op de pc. */
.nr-mob-dienst {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

.nr-mob-dienst .nr-mms-pic {
    width: 32px;
    height: 32px;
}

/* ==================================================================
   "KIES UW MERK" OPVALLEND (20 oktober 2026, proef genderen.shop)

   Op verzoek groter en even laten "flitsen", in de goedgekeurde stijl van
   melkstalonderdelen.nl (groen pijltje). Het label wordt een navy pilletje
   met witte letters (contrast 10 : 1) en groen pijltje:
     - bij het laden pulseert er drie keer een groene ring omheen;
     - een lichtglans trekt er zes keer overheen, eens per 8 seconden, en
       stopt dan — opvallen zonder blijvend te knipperen;
     - "minder beweging" in het systeem = geen enkele animatie.
   Geen echte knipperflits (WCAG 2.3.1): alleen zachte, trage overgangen op
   een klein vlak. pas() in megamenu.phtml meet de breedte van dit label
   gewoon mee; past het niet, dan gaat het (.is-krap) naar twee regels.
   ================================================================== */
.nr-mm-nav .nr-mmb-kies,
.nr-mm--logobalk .nr-mmb-kies {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: center;
    gap: 7px;
    margin-right: 12px;
    padding: 9px 13px 9px 16px;
    font-size: .93rem;
    letter-spacing: .07em;
    color: #fff;
    background: var(--nr-kies-bg, #2C3E5C);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(20, 44, 115, .2);
    animation: nr-kies-puls 1.5s ease-out .4s 3;
}

.nr-mm-nav .nr-mm-row.is-krap .nr-mmb-kies,
.nr-mm--logobalk .nr-mm-row.is-krap .nr-mmb-kies {
    border-radius: 14px;
    padding: 6px 10px 6px 12px;
    font-size: .8rem;
    max-width: 11em;            /* twee regels ("KIES UW / MERK"), niet drie */
    text-wrap: balance;
}

/* De glans: een schuine lichtstreep die van links naar rechts schuift. */
.nr-mm-nav .nr-mmb-kies::after,
.nr-mm--logobalk .nr-mmb-kies::after,
.nr-mob-kies::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: nr-kies-glans 8s ease-in-out .7s 6;
    pointer-events: none;
}

/* Groen pijltje zoals op melknl (kop.css maakt --color-primary in de
   menubalk navy; hier staat het pijltje op navy, dus een lichter groen). */
.nr-mm-nav .nr-mmb-kies .nr-mmb-kies-pijl,
.nr-mm--logobalk .nr-mmb-kies .nr-mmb-kies-pijl,
.nr-mob-kies .nr-mmb-kies-pijl {
    color: #8EDC6A;
    animation: nr-duw 1.1s ease-in-out .6s 3;
}

/* Telefoon/tablet: dezelfde stijl in de logostrook, iets kleiner. */
.nr-mob-kies {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: center;
    padding: 6px 10px 6px 12px;
    font-size: .74rem;
    max-width: 10.5em;
    text-wrap: balance;
    color: #fff;
    background: var(--nr-kies-bg, #2C3E5C);
    border-radius: 12px;
    animation: nr-kies-puls 1.5s ease-out .4s 3;
}

@keyframes nr-kies-puls {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 191, 74, .75), 0 2px 6px rgba(20, 44, 115, .2);
    }

    100% {
        box-shadow: 0 0 0 13px rgba(108, 191, 74, 0), 0 2px 6px rgba(20, 44, 115, .2);
    }
}

@keyframes nr-kies-glans {
    0% {
        transform: translateX(-130%);
    }

    18%,
    100% {
        transform: translateX(130%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nr-mmb-kies,
    .nr-mob-kies,
    .nr-mmb-kies::after,
    .nr-mob-kies::after,
    .nr-mmb-kies .nr-mmb-kies-pijl,
    .nr-mob-kies .nr-mmb-kies-pijl {
        animation: none !important;
    }
}

/* Merkpaneel: link naar de onderdelenzoeker met dit merk (20 oktober 2026). */
.nr-mm-zoeker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 12px;
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    background: var(--nr-kies-bg, #2C3E5C);
    border-radius: 999px;
    text-decoration: none;
}

.nr-mm-zoeker:hover,
.nr-mm-zoeker:focus-visible {
    background: #1F2A3F;
    color: #fff;
}

.nr-mm-zoeker svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* ==================================================================
   "KIES UW MERK" — RONDE 2: LEVENDIGER (20 oktober 2026, proef genderen.shop)

   Op verzoek aantrekkelijker met animatie en flits. Doorlopend, maar rustig:
     - lopende lichtrand: een groen-gele boog draait om het pilletje (3,5 s per ronde);
     - achtergrond: navy-blauw verloop dat langzaam golft (7 s);
     - flits + glans: elke 4 s heel even helderder met een lichtstreep erover;
     - pulsring: groene ring die zacht uitdijt (elke 2,6 s);
     - pijltje: duwt steeds zacht naar rechts;
     - aanwijzen/focus: iets groter en gloed.
   Flits ver onder 3 per seconde (WCAG 2.3.1). "Minder beweging" = alles stil.
   De draaiende rand gebruikt @property (Chrome/Edge/Safari 16.4+/Firefox 128+);
   oudere browsers tonen gewoon een groene rand.
   ================================================================== */
@property --nr-hoek {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.nr-mm-nav .nr-mmb-kies,
.nr-mm--logobalk .nr-mmb-kies,
.nr-mob-kies {
    border: 2px solid transparent;
    background:
        linear-gradient(115deg, #142C73 0%, #2A5BB0 45%, #142C73 90%) padding-box,
        conic-gradient(from var(--nr-hoek), #6CBF4A 0deg, #D8F5A2 40deg, #6CBF4A 80deg, rgba(108, 191, 74, .15) 140deg, rgba(108, 191, 74, .15) 300deg, #6CBF4A 360deg) border-box;
    background-size: 220% 100%, 100% 100%;
    animation:
        nr-kies-rand 3.5s linear infinite,
        nr-kies-golf 7s ease-in-out infinite,
        nr-kies-flits 4s ease-out 1s infinite,
        nr-kies-puls2 2.6s ease-out .4s infinite;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: default;
}

.nr-mm-nav .nr-mmb-kies::after,
.nr-mm--logobalk .nr-mmb-kies::after,
.nr-mob-kies::after {
    animation: nr-kies-glans2 4s ease-in-out 1s infinite;
}

.nr-mm-nav .nr-mmb-kies .nr-mmb-kies-pijl,
.nr-mm--logobalk .nr-mmb-kies .nr-mmb-kies-pijl,
.nr-mob-kies .nr-mmb-kies-pijl {
    color: #A8EA7F;
    animation: nr-duw 1.4s ease-in-out infinite;
}

/* Aanwijzen van de hele merkenzone of het label zelf: iets groter, met gloed. */
.nr-mmb-zone:hover .nr-mmb-kies,
.nr-mmb-kies:hover,
.nr-mob-strook:active .nr-mob-kies {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(108, 191, 74, .35), 0 6px 18px rgba(20, 44, 115, .35);
}

@keyframes nr-kies-rand {
    to {
        --nr-hoek: 360deg;
    }
}

@keyframes nr-kies-golf {
    0%, 100% {
        background-position: 0% 50%, 0 0;
    }

    50% {
        background-position: 100% 50%, 0 0;
    }
}

@keyframes nr-kies-flits {
    0%, 14%, 100% {
        filter: none;
    }

    4% {
        filter: brightness(1.35) saturate(1.15);
    }
}

@keyframes nr-kies-puls2 {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 191, 74, .7), 0 2px 8px rgba(20, 44, 115, .25);
    }

    70%, 100% {
        box-shadow: 0 0 0 12px rgba(108, 191, 74, 0), 0 2px 8px rgba(20, 44, 115, .25);
    }
}

@keyframes nr-kies-glans2 {
    0% {
        transform: translateX(-130%);
    }

    22%, 100% {
        transform: translateX(130%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nr-mm-nav .nr-mmb-kies,
    .nr-mm--logobalk .nr-mmb-kies,
    .nr-mob-kies,
    .nr-mm-nav .nr-mmb-kies::after,
    .nr-mm--logobalk .nr-mmb-kies::after,
    .nr-mob-kies::after,
    .nr-mmb-kies .nr-mmb-kies-pijl,
    .nr-mob-kies .nr-mmb-kies-pijl {
        animation: none !important;
        transition: none;
    }
}

/* ==================================================================
   "KIES UW MERK" — RONDE 3: NEONBORD (20 oktober 2026, proef genderen.shop)
   Script: NrAgri_ThemeSettings::html/kiesmerk-neon.phtml (typen → flikkeren →
   tada → wissen). Hier: ruimte reserveren voor de volle tekst (geen verspringen),
   de cursor en de neongloed. Zolang het neonbord draait (:has(.nr-kies-tekst))
   vervallen de flits/glans/puls van ronde 2; de lopende lichtrand blijft.
   ================================================================== */
.nr-kies-tekst {
    display: inline-grid;
    /* losse letter-spans kennen geen kerning; zonder kerning zijn ghost-tekst en getypte tekst exact even breed
       (anders viel "UW" net niet meer naast "KIES" en stond het label op drie regels) */
    font-kerning: none;
    font-variant-ligatures: none;
}

.nr-kies-tekst::before {
    content: attr(data-volledig);
    grid-area: 1 / 1;
    visibility: hidden;
}

.nr-kies-getypt {
    grid-area: 1 / 1;
    transition: text-shadow .25s ease, color .25s ease;
}

.nr-kies-cursor {
    display: inline-block;
    position: relative;
    width: 0;
    height: 1em;
    vertical-align: -.12em;
}

.nr-kies-cursor::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #A8EA7F;
    animation: nr-kies-knipper 1s steps(1, end) infinite;
}

@keyframes nr-kies-knipper {
    50% {
        opacity: 0;
    }
}

/* Neon aan: wit-groene letters met gloed */
.is-neon .nr-kies-getypt {
    color: #F2FFE9;
    text-shadow: 0 0 3px #B9F59A, 0 0 8px #8EDC6A, 0 0 16px rgba(108, 191, 74, .85), 0 0 26px rgba(108, 191, 74, .45);
}

.nr-mm-nav .nr-mmb-kies:has(.nr-kies-tekst),
.nr-mm--logobalk .nr-mmb-kies:has(.nr-kies-tekst),
.nr-mob-kies:has(.nr-kies-tekst) {
    animation: nr-kies-rand 3.5s linear infinite, nr-kies-golf 7s ease-in-out infinite;
}

.nr-mm-nav .nr-mmb-kies:has(.nr-kies-tekst)::after,
.nr-mm--logobalk .nr-mmb-kies:has(.nr-kies-tekst)::after,
.nr-mob-kies:has(.nr-kies-tekst)::after {
    animation: none;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nr-kies-cursor::after {
        animation: none;
    }
}

/* ==================================================================
   "KIES UW MERK" — RONDE 4: DISCO (20 oktober 2026, proef genderen.shop)
   Equalizer (vier balkjes) vóór de tekst en losse letters die kunnen springen.
   De beat zelf zit in kiesmerk-neon.phtml (Web Animations API).
   ================================================================== */
.nr-kies-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    flex: none;
    width: 14px;
    height: 13px;
    margin-right: 1px;
}

.nr-kies-eq i {
    display: block;
    flex: 1;
    height: 100%;
    background: linear-gradient(to top, #6CBF4A, #D8F5A2);
    border-radius: 1px;
    transform-origin: bottom;
    scale: 1 .35;
}

.nr-kies-letter {
    display: inline-block;
}

/* een woord breekt nooit midden in af; alleen tussen "Kies uw" en "merk" (zie typ() in kiesmerk-neon.phtml) */
.nr-kies-woord {
    white-space: nowrap;
}

/* De equalizer neemt ± 20 px van de tekst af; bij een smal label (is-krap / telefoon) krijgt het die ruimte erbij,
   anders paste "KIES UW" net niet (61 van 64 px) en stond het op drie regels. */
.nr-mm-nav .nr-mm-row.is-krap .nr-mmb-kies.is-disco,
.nr-mm--logobalk .nr-mm-row.is-krap .nr-mmb-kies.is-disco {
    max-width: calc(11em + 21px);
}

.nr-mob-kies.is-disco {
    max-width: calc(10.5em + 17px);
}

.nr-mob-kies .nr-kies-eq {
    width: 12px;
    height: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .nr-kies-eq i {
        scale: 1 .6;
    }
}