/* ==================================================================
   NR Agri — mobiele correcties

   Alleen dingen die aantoonbaar misgaan op een telefoon, met de reden
   erbij. Geen smaakwijzigingen: die horen in het thema thuis.
   ================================================================== */


/* ------------------------------------------------------------------
   1. 100vh is op een telefoon niet de zichtbare hoogte

   Een mobiele browser rekent `100vh` uit alsof de adresbalk weg is. Staat
   die er wél, dan is het element hoger dan het scherm en valt de onderkant
   eraf — precies daar waar de knoppen zitten.

   `100dvh` (dynamic viewport height) is daarvoor gemaakt: die volgt de
   werkelijke zichtbare hoogte, ook terwijl de adresbalk in- en uitschuift.
   Met @supports blijft de oude waarde staan voor browsers die het niet
   kennen; die verliezen dus niets.

   Twee plekken waar dit hier speelt:
   - de winkelwagenlade — die krijgt in ons thema `height:100vh`. Met de
     adresbalk erbij valt de afrekenknop onder de schermrand;
   - `.page-wrapper` van Hyvä — die krijgt `min-height:100vh`, waardoor elke
     pagina net iets langer is dan het scherm en er altijd "iets te scrollen"
     lijkt, ook op een lege pagina.
   ------------------------------------------------------------------ */

@supports (height: 100dvh) {
    html dialog#cart-drawer {
        height: 100dvh;
        max-height: 100dvh;
    }

    html body .page-wrapper {
        min-height: 100dvh;
    }
}


/* ------------------------------------------------------------------
   2. Laden en het menu: scrollen mag niet doorlopen naar de pagina

   Open je het hamburgermenu en scroll je door tot het einde, dan neemt de
   pagina eronder het over en schuift die weg. Bij het sluiten sta je dan
   ergens anders dan waar je was. `overscroll-behavior: contain` houdt het
   scrollen binnen het paneel.

   De donkere achtergrond eronder mag helemaal niet meebewegen; die krijgt
   `touch-action: none`. Tikken om te sluiten blijft gewoon werken.
   ------------------------------------------------------------------ */

/* Het uitschuifpaneel van het menu en de zijvensters. */
aside[class*="overflow-y-auto"],
dialog#cart-drawer,
[id$="-drawer"] {
    overscroll-behavior: contain;
}

/* De verduisterde achtergrond van het mobiele menu (z-index 9998/9999). */
.z-\[9998\] > .absolute.inset-0,
.z-\[9999\] > .absolute.inset-0 {
    touch-action: none;
}


/* ------------------------------------------------------------------
   2b. Het mobiele menu viel achter de header — een stapelprobleem

   DE OORZAAK
   De uitschuiflade van "Alle categorieën" staat in de HTML binnen
   `<nav class="... relative z-40 ...">`. Een element met `position` én een
   `z-index` maakt een eigen stapelcontext: alles daarbinnen wordt als één
   laag geschilderd, op z-index 40. De koptekst ernaast is
   `<div id="header" class="relative z-50">` en ligt dus altijd hoger.

   De lade heeft zelf `z-[9998]`, maar dat telt alleen binnen de nav. Tegen de
   header van z-50 kan hij niets beginnen — vandaar dat het bovenste deel van
   het menu erachter verdween.

   DE OPLOSSING, EN WAAROM ZO
   Wij tillen de nav alleen omhoog zolang de lade daadwerkelijk open staat.
   Permanent verhogen zou niet mogen: de zoeksuggesties in de header staan op
   z-[70] binnen die header, en een nav die er altijd overheen ligt zou die
   suggestielijst afdekken.

   Alpine schakelt de lade met `x-show`, en dat zet `display: none` in de
   stijl van het element. Staat dat er niet, dan is de lade open. Het
   sjabloon zelf zet `display:none` zonder spatie, Alpine mét — daarom staan
   beide vormen in de selector.

   `header.phtml` wordt hier niet aangeraakt; dat bestand is van Jeroen.
   ------------------------------------------------------------------ */

nav:has(.fixed.inset-0.z-\[9998\]:not([style*="display:none"]):not([style*="display: none"])) {
    z-index: 9998;
}

/* Zolang het menu open is, mag de pagina eronder niet meescrollen. */
body:has(nav .fixed.inset-0.z-\[9998\]:not([style*="display:none"]):not([style*="display: none"])) {
    overflow: hidden;
}

/* De lade zelf tot de werkelijke schermhoogte, niet de gerekende. */
@supports (height: 100dvh) {
    .fixed.inset-0.z-\[9998\] > aside,
    .fixed.inset-0.z-\[9999\] > aside {
        height: 100dvh;
    }
}


/* ------------------------------------------------------------------
   3. Niets mag breder zijn dan het scherm

   Eén te breed element geeft een pagina die zijwaarts schuift, en dan lijkt
   álles scheef te staan. Dit is een vangnet voor inhoud die de beheerder
   zelf plaatst: een tabel uit Word, een ingesloten video, een brede
   afbeelding.

   Bewust GEEN `overflow-x:hidden` op html/body: dat verbergt het probleem
   en breekt bovendien `position:sticky`.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
    .nr-cat-text table,
    .nr-cat-block table,
    .nr-prod-text table,
    .cms-page-view .column.main table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .nr-cat-text iframe,
    .nr-cat-block iframe,
    .nr-prod-text iframe,
    .cms-page-view .column.main iframe {
        max-width: 100%;
    }

    /* Lange woorden en adressen (bestelnummers, e-mailadressen) mogen
       afbreken in plaats van de pagina op te rekken. */
    .nr-cat-text,
    .nr-cat-block,
    .nr-prod-text {
        overflow-wrap: break-word;
    }
}


/* ------------------------------------------------------------------
   4. Aantikvlakken

   De richtlijn is 44 bij 44 pixels. Kleiner betekent misklikken, en op een
   winkel is dat direct omzet. Dit raakt alleen kleine knoppen die verder
   geen eigen maat hebben.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
    .nrs-strip-list a,
    .nr-tile,
    .nrp-payment {
        min-height: 2.75rem;
    }
}

/* ------------------------------------------------------------------
   Header in de logokleur (28 september 2026, proef genderen.shop)

   De knoppen rechts in de header (Verlanglijst, Account, Winkelwagen)
   hebben Hyvä's klasse .btn, en die zet een vaste donkere tekstkleur.
   Op een donkere header (Thema-instellingen → Kleuren → Header) werden
   ze daardoor onzichtbaar. Nu volgen ze de tekstkleur van de header;
   op een witte header verandert er niets.

   Het staande logo (koe boven, naam + regel eronder) is 147 × 112 op de
   pc; op de telefoon iets kleiner, zodat de header niet te hoog wordt.
   ------------------------------------------------------------------ */
#header .btn.bg-transparent {
    color: inherit;
}

@media (max-width: 767.98px) {
    #header img[src*="-staand."] {
        width: auto;
        height: 84px;
    }
}