@font-face {
  font-family: "vinkel Medium";
  src: url(../fonts/Vinkel-Medium.otf);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "vinkel bold";
  src: url(../fonts/Vinkel-Bold.otf);
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "vinkel Regular";
  src: url(../fonts/Vinkel-Regular.otf);
  font-weight: 800;
  font-style: normal;
}
html {
  font-family: var(--vinkel-font-regular), Arial, Helvetica, sans-serif;
}

:root {
  --bs-emphasis-color: white !important;
  --vinkel-blue: #d61b0c;
  --vinkel-grey: #4d4f53;
  --vinkel-lg-grey: #eeeeee;
  --vinkel-font-medium: "vinkel Medium", Arial, Helvetica, sans-serif;
  --vinkel-font-bold: "vinkel bold", Arial, Helvetica, sans-serif;
  --vinkel-font-regular: "vinkel regular", Arial, Helvetica, sans-serif;
}

select {
  font-family: var(--vinkel-font-regular), Arial, Helvetica, sans-serif !important;
}

p,
span,
a {
  font-family: var(--vinkel-font-regular);
}

h1,
h2,
.storelocator-storename {
  font-family: var(--vinkel-font-medium);
  text-wrap: balance;
}

h4 {
  font-family: var(--vinkel-font-medium);
  text-wrap: balance;
}

.accordion-body {
  font-family: var(--vinkel-font-regular);
}

input,
label,
.form-text {
  font-family: var(--vinkel-font-regular) !important;
}

.nav-link,
.btn-link,
a {
  color: var(--vinkel-blue) !important;
}

.btn {
  font-family: var(--vinkel-font-bold) !important;
}

.text-blue {
  color: var(--vinkel-blue);
}

.text-grey {
  color: var(--vinkel-grey);
}

.text-black {
  color: black;
}

.text-bold {
  font-family: var(--vinkel-font-bold);
}

.btn-primary {
  background-color: var(--vinkel-blue) !important;
}

.ZeissBlueBackground {
  background-color: var(--vinkel-blue);
}

.ZeissLightGreyBackground {
  background-color: var(--vinkel-lg-grey);
}

.ZeissWhiteBackground {
  background-color: #d61b0c;
}

.tabs-vertical-classic {
  gap: 2rem;
}
.tabs-vertical-classic__tabgroup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 200px;
  margin-bottom: 30px;
}
.tab-button {
  background: none;
  border: none;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.tab-button.active {
  font-weight: bold;
  border-color: #005ea5;
  background: #e6f2fa;
}

.tabs-vertical-classic .tab-content {
  display: none;
}
.tabs-vertical-classic .tab-content.active {
  display: block;
}
.mochila {
  width: 60%;
  display: block;
  margin: 0 auto;
  position: relative;
  margin-top: 100px;

  /* Sobe no site */
  transform: translateY(-50px);

  /* Animação de flutuação */
  animation: flutuar 4s ease-in-out infinite;
}

@media (min-width: 992px) {
  .webm-desktop.mochila,
  .safari-desktop.mochila {
    margin-top: -510px;
  }
}
.mochila_mobile {
  width: 80%;
  display: block;
  margin: 132px auto -60px auto;
  position: relative;
  transform: translateY(-50px);
  animation: flutuar 4s ease-in-out infinite;
  margin-top: 174px;
}

@keyframes flutuar {
  0% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(-50px);
  }
}
.mochila_newsletter {
  width: 90%;
  display: block;
  margin: 0 auto;
  position: relative;

  /* Sobe no site */
  transform: translateY(-50px);

  /* Animação de flutuação */
  animation: flutuar_newsletter 4s ease-in-out infinite;
}

@keyframes flutuar_newsletter {
  0% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(-50px);
  }
}
/* Evita overflow horizontal provocado por selects/controls */
#filter-container {
  max-width: calc(100vw - 20px);
  width: 420px; /* desktop */
}

#filter-container select,
#filter-container button {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Em mobile, fixa o container dentro do ecrã */
@media (max-width: 991.98px) {
  #filter-container {
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
  }
  .container-fluid[style*="background-image"] {
    background-position: left !important;
  }
}