/*
 * Responsive correcties voor de mobiele Orion-header.
 * Plaats dit bestand na index.css en topscroller.css.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#fixedheader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  max-width: 100vw;
  background: #ffffff;
  box-shadow: 0 3px 14px rgba(34, 34, 68, 0.08);
}

/* Overschrijf de pixelbreedtes die het bestaande script inline toevoegt. */
#fixedheader #d0,
#fixedheader #d1,
#fixedheader #d2,
#fixedheader #d3,
#fixedheader #topbar,
#fixedheader #searchbar {
  width: 100% !important;
  max-width: 100vw;
}

#topbar {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
}

#topbarmenu,
#topbarlogo,
#shoppingcart,
#wishlist,
#loginicon {
  float: none !important;
  flex: 0 0 auto;
}

#topbarmenu {
  margin: 0 6px 0 0 !important;
}

#topbarlogo {
  margin: 0 auto 0 0 !important;
  min-width: 0;
}

#shoppingcart,
#wishlist,
#loginicon {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#shoppingcart {
  margin-right: 0 !important;
}

#wishlist,
#loginicon {
  margin-right: 10px !important;
}

#searchbar {
  display: flex;
  align-items: center;
  padding: 8px clamp(12px, 5vw, 45px);
}

#searchbar form {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(10px, 3vw, 35px);
  width: 100%;
  min-width: 0;
  margin: 0;
}

#searchbar #search {
  position: static !important;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

#searchbar #searchbtn {
  position: static !important;
  flex: 0 0 clamp(105px, 17vw, 145px);
  width: auto !important;
  margin: 0 !important;
}

#searchlist {
  right: 0;
  left: 0 !important;
  width: 100% !important;
  max-width: 100vw;
}

@media (max-width: 520px) {
  #topbar {
    padding-right: 6px;
    padding-left: 6px;
  }

  #topbarlogo img {
    width: auto;
    max-width: 112px;
    height: auto !important;
    max-height: 36px;
  }

  #shoppingcart img {
    width: 42px !important;
  }

  #wishlist img {
    width: auto;
    height: 40px !important;
  }

  #loginicon img {
    width: auto;
    height: 34px !important;
  }

  #wishlist,
  #loginicon {
    margin-right: 7px !important;
  }

  #searchbar {
    padding: 8px 10px;
  }

  #searchbar form {
    gap: 8px;
  }

  #searchbar #searchbtn {
    flex-basis: 82px;
  }
}

/* Liggende telefoon: benut de breedte en houd de header compact. */
@media (min-width: 521px) and (max-width: 1099px) and (max-height: 600px) {
  #fixedheader {
    width: 100vw;
  }

  #topbar {
    padding-right: 14px;
    padding-left: 10px;
  }

  #searchbar {
    padding-right: clamp(30px, 6vw, 60px);
    padding-left: clamp(30px, 6vw, 60px);
  }
}