/* Mobiele aanpassingen. Wordt na de stijlen in elke pagina geladen, zodat
   deze regels winnen van de gelijknamige regels in de pagina zelf. */

[data-burger] { display: none; }

/* Kolommen met een flex-basis (bijv. flex: 1 1 560px) mogen smaller worden dan
   hun inhoud, anders duwen ze de pagina op mobiel breder dan het scherm. */
[style*="flex: 1 1"], [style*="flex:1 1"],
[style*="flex: 0 1"], [style*="flex:0 1"] { min-width: 0; }

@media (max-width: 1060px) {
  header[data-header] > div {
    flex-wrap: wrap;
    row-gap: 0 !important;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4) !important;
  }
  header[data-header] [data-mark] { height: 42px !important; }

  /* Hamburgerknop: een verborgen checkbox in een label, werkt zonder JavaScript */
  [data-burger] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  [data-burger] input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  [data-burger]:has(input:focus-visible) { outline: 2px solid var(--orange-500); outline-offset: 2px; }
  [data-burger] > span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
  }
  [data-burger]:has(input:checked) > span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
  [data-burger]:has(input:checked) > span:nth-of-type(2) { opacity: 0; }
  [data-burger]:has(input:checked) > span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Menu en knoppen zijn dicht tot de hamburger wordt aangetikt */
  header[data-header] nav {
    display: none !important;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: var(--space-1) !important;
    margin: 0 !important;
    padding: var(--space-2) 0 var(--space-3);
  }
  header[data-header] nav a { padding: 14px 16px !important; }
  header[data-header] > div > span:last-child {
    display: none !important;
    order: 4;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
  }
  header[data-header]:has([data-burger] input:checked) nav { display: flex !important; }
  header[data-header]:has([data-burger] input:checked) > div > span:last-child { display: flex !important; }
}

/* Assortimenttegels: de foto krijgt een vaste verhouding in plaats van de restruimte */
@media (max-width: 860px) {
  [data-tiles] > [data-tile] { aspect-ratio: auto !important; }
  [data-tiles] > [data-tile] > span:first-child { flex: none !important; aspect-ratio: 4 / 3; }
}

/* Hele smalle telefoons (oude iPhone SE): grote knoppen mogen krimpen en omlopen */
@media (max-width: 380px) {
  button[style*="padding: 18px 34px"], a[style*="padding: 18px 34px"],
  button[style*="padding: 14px 26px"], a[style*="padding: 14px 26px"] {
    padding: 16px 22px !important;
    white-space: normal !important;
    text-align: center;
  }
  [style*="flex: 0 0 auto"] { flex-shrink: 1 !important; min-width: 0; max-width: 100%; }
}