/* Noa & Dje theme -- MOBILE FIXES (laatste laag, laadt als laatste) */

@media (max-width: 900px) {
  .masthead { padding: .9rem 1rem; }
  .masthead-icons { gap: .85rem; }
  .mobile-nav { padding: 4rem 1.5rem; overflow-y: auto; justify-content: flex-start; }
  .mobile-nav a { font-size: 1.5rem; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .nd-search-inner { padding: 1.4rem 5% 1.8rem; }
  .nd-sc { width: 100vw; }
  .section-slider { padding: 3.2rem 0; }
  .slider { padding-left: 5%; padding-right: 5%; }
  .related-grid { gap: 1rem; }
  .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: .76rem; }
  .catpills { gap: .4rem; }
  .catpills a { padding: .45rem 1rem; font-size: .68rem; }
}

/* iOS: voorkom zoom bij focus op inputs (font-size >= 16px) */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], textarea, select { font-size: 16px !important; }
}

/* horizontale scroll voorkomen op smalle schermen */
html, body { max-width: 100%; }

/* Footer: de rij betaalmethodes (5 labels, nowrap) was op 390px breder dan het
   scherm en maakte de hele pagina horizontaal scrollbaar. Op mobiel mag hij
   doorlopen naar een tweede regel. Desktop ongewijzigd. */
@media (max-width: 759px) {
  .footer-bottom .payments { flex-wrap: wrap; justify-content: center; max-width: 100%; }
}

/* focus-zichtbaarheid (toegankelijkheid) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* print */
@media print {
  .announce, .masthead, .menubar, .footer, .nd-sc, .nd-sc-backdrop, .nd-search, .nd-search-backdrop { display: none !important; }
}

/* =========================================================
   Feedback Angela 26-10-2026 -- "Mobiel voorbeeld" (HTML):
   op mobiel de drie categorieblokken ONDER ELKAAR (geen swipe-slider),
   lage brede tegels met ronde hoeken. Alleen mobiel; desktop ongewijzigd.
   ========================================================= */
@media (max-width: 759px) {
  .nd-herocats { padding: .875rem .75rem .375rem; }
  .nd-herocats-grid {
    grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto;
    gap: .75rem; overflow: visible; scroll-snap-type: none;
    padding: 0; scroll-padding: 0;
  }
  .nd-herocat { scroll-snap-align: none; border-radius: 16px; isolation: isolate; }
  .nd-herocat-media { aspect-ratio: 4 / 3; height: auto; }
  .nd-herocat-img { object-position: 50% 24%; }
	.nd-herocat:nth-child(2) .nd-herocat-img { object-position: 50% 30%; }
	.nd-herocat:nth-child(3) .nd-herocat-img { object-position: 50% 42%; }
  .nd-herocat::after { background: linear-gradient(to top, rgba(40,20,20,.55) 0%, rgba(40,20,20,0) 50%); }
  .nd-herocat-label { gap: .3rem; padding: 0 1rem .875rem; }
  .nd-herocat-name { font-size: 1.75rem; line-height: 1.1; }
  .nd-herocat-cta { font-size: .66rem; gap: .35rem; padding-bottom: 1px; border-bottom-width: 1px; }

  /* Footer: blokken netjes onder elkaar binnen de schermbreedte.
     Het nieuwsbrief-invoerveld (size=20) duwde de kolom naar 429px en
     maakte de hele pagina op 390px zijwaarts scrollbaar. */
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > * { min-width: 0; }
  .footer-newsletter form { max-width: 100%; }
  .footer-newsletter form input { min-width: 0; width: auto; flex: 1 1 auto; }
  .footer-newsletter form button { flex: 0 0 auto; }
}
/* Feedback Angela 26-10-2026 (vervolg): de mobiele regels voor .cats-grid en
   .fabric-inner in global.css werden overschreven door components.css (laadt later),
   waardoor "Ontdek de meisjeswereld" 4 smalle kolommen kreeg (labels vielen weg) en
   "Prints & stoffen" foto en tekst krap naast elkaar zette. Op mobiel onder elkaar. */
@media (max-width: 759px) {
  .cats-grid, .cats-grid.hero-item { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .cats-grid.hero-item .cat-tile:first-child { grid-column: auto; grid-row: auto; }
  .cats-grid .cat-tile { aspect-ratio: 4 / 3; height: auto; border-radius: 16px; isolation: isolate; }
  .cats-grid .cat-tile .cat-img { background-position: 50% 30%; }
	.cats-grid .cat-tile:nth-child(3) .cat-img { background-position: 50% 6%; }
  .cats-grid .cat-tile .cat-label { left: 1.1rem; right: 1.1rem; bottom: 1rem; justify-content: space-between; }
  .cats-grid .cat-tile .cat-label h3 { font-size: 1.6rem; line-height: 1.1; }

  .fabric-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fabric-inner > * { min-width: 0; }
  .fabric-preview-img { max-width: 320px; }
  .fabric-body > p { max-width: none; }
}

/* =========================================================
   Joey 28-10-2026 -- productsliders alleen HORIZONTAAL scrollbaar.
   overflow-x:auto zonder overflow-y maakte de track ook verticaal een
   scrollbox (hover translateY van .pcard gaf verticale overflow): op mobiel
   schoof een verticale veeg de kaarten op en neer i.p.v. de pagina.
   Geldt voor alle horizontale tracks van het thema.
   ========================================================= */
.slider,
.nda .woocommerce-MyAccount-navigation ul {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
}
.slider { height: auto; align-items: stretch; }
@media (max-width: 700px) {
  .gallery-thumbs { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
}
/* hoverlift ruimte geven via padding (al .4rem boven), geen lift op touch */
@media (hover: none) {
  .slider .pcard:hover { transform: none; }
  .slider .pcard:hover .pcard-img { transform: none; }
}

/* =========================================================
   Joey 28-10-2026 -- mobiel menu: submenu VERTICAAL onder elkaar.
   Oorzaak: header-v3.css zet .ndh-msub a op inline-block (stond zo vanaf het
   begin), daardoor liepen de subitems naast elkaar door over twee regels.
   Niet de slider-fix hierboven (.slider raakt .ndh-mnav niet).
   Gescoped op .ndh-mnav (alleen het mobiele paneel), desktop .ndh-drop ongemoeid.
   ========================================================= */
.ndh-mnav .ndh-msub { padding:0; font-size:13px; line-height:1.6; }
.ndh-mnav .ndh-msub a {
  display:block; width:100%; margin:0; padding:11px 20px 11px 36px;
  font-size:13px; line-height:1.6; letter-spacing:.06em;
  color:var(--ndh-ink); border-bottom:1px solid var(--ndh-line);
}
.ndh-mnav .ndh-msub a.ndh-msub-all { color:var(--ndh-marsala); font-weight:600; }