/* Scherpe SVG-vlaggen; exact 3 gelijke verticale kleurvlakken. */
.dd-language { display:inline-flex; align-items:center; gap:5px; margin-left:8px; }
.dd-language-flag-button { display:inline-flex; justify-content:center; align-items:center; width:36px; height:28px; padding:3px; background:transparent; border:1px solid transparent; border-radius:4px; cursor:pointer; box-sizing:border-box; flex-shrink:0; }
.dd-language-flag-button:hover { border-color:rgba(255,255,255,.65); background:rgba(255,255,255,.1); }
.dd-language-flag-button[aria-pressed="true"] { border-color:#e7b319; }
.dd-language-flag-button:focus-visible { outline:2px solid #e7b319; outline-offset:3px; }
.dd-language .dd-flag { display:block; width:28px; height:18px; min-width:28px; flex-shrink:0; border:0; border-radius:0; box-shadow:none; background:none; shape-rendering:crispEdges; }
@media(max-width:720px) {
  .dd-language { margin:0 0 0 6px; gap:4px; }
  .dd-language-flag-button { width:36px; height:28px; padding:3px; }
  /* Op Home, Banden en Diensten: vlaggen op een eigen gecentreerde rij
     onder de account- en winkelmandknoppen. */
  header > nav > .dd-language {
    grid-column: 1 / -1;
    justify-self: center;
    justify-content: center;
    margin: 2px 0 0;
    width: max-content;
  }
}

/* De drie publieke pagina's hebben op gsm dezelfde strakke headerindeling.
   Rij 1: Home / Banden kopen / Diensten
   Rij 2: Over ons / Contact
   Rij 3: Account / Winkelmandje
   Rij 4: gecentreerde taalvlaggen. Desktop blijft ongewijzigd. */
@media (max-width: 700px) {
  header.dd-mobile-main-header {
    box-sizing: border-box;
    padding: 15px 12px 13px;
    gap: 12px;
    align-items: center;
    text-align: center;
  }
  header.dd-mobile-main-header > .logo {
    width: 100%;
    margin: 0;
    line-height: 1.2;
    text-align: center;
  }
  header.dd-mobile-main-header > nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(100%, 440px);
    margin: 0 auto;
    column-gap: 4px;
    row-gap: 5px;
    align-items: center;
    justify-items: stretch;
  }
  header.dd-mobile-main-header > nav > a {
    box-sizing: border-box;
    grid-column: span 2;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 8px 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
  header.dd-mobile-main-header > nav > a:nth-child(4),
  header.dd-mobile-main-header > nav > a:nth-child(5),
  header.dd-mobile-main-header > nav > a:nth-child(6),
  header.dd-mobile-main-header > nav > a:nth-child(7) {
    grid-column: span 3;
  }
  header.dd-mobile-main-header > nav .account-link,
  header.dd-mobile-main-header > nav .cart-link {
    gap: 5px;
  }
  header.dd-mobile-main-header > nav .dd-language {
    grid-column: 1 / -1;
    justify-self: center;
    justify-content: center;
    width: max-content;
    margin: 3px 0 0;
    gap: 6px;
  }
  header.dd-mobile-main-header > nav .dd-language-flag-button {
    width: 38px;
    height: 32px;
    padding: 4px;
  }
}

/* Mobiele homepage: 'Banden zoeken' heeft dezelfde grijze rand als de overige niet-geselecteerde knoppen. */
@media (max-width: 700px) {
  #banden .dd-carousel-controls .dd-back-to-search { border-color: #666 !important; }
}