@charset "utf-8";

.custom-choose-wrapper { width: 100%; height: auto; display: flex; align-items: center; position: relative; }

.custom-choose-flex-r h3 { color: rgb(0, 0, 0); font-size: 1.1vw; }

.custom-flavors-wrapper { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

.custom-flavors-flex { flex: 0 0 calc(25.7% - 16px); box-sizing: border-box; position: relative; }

.custom-flavors-flex img { border-radius: 10px; padding: 10px; }

.flavors-overlay { width: 100%; height: auto; text-align: center; position: absolute; bottom: 0px; background-color: rgba(255, 255, 255, 0.8); padding: 10px; }

.flavors-overlay h6 { font-size: 0.8vw; }

@media (max-width: 768px) {
  .custom-flavors-flex { flex: 0 0 32%; }
  .flavors-overlay h6 { font-size: 3vw; }
}

.dropdown-menu-wrapper { width: 100%; height: auto; position: relative; display: inline-block; }

.dropdown-button { color: rgb(0, 0, 0); cursor: pointer; font-size: 1.1vw; padding: 5px 0px; }

.dropdown-menu-wrapper h3 { display: inline-block; font-size: 1.1vw; font-weight: 700; padding-left: 10px; font-family: unset !important; }

.dropdown-button img { width: 16px; height: auto; display: inline-block; }

.dropdown-list { display: none; position: absolute; top: 100%; left: 0px; background-color: white; list-style: none; margin: 0px; width: 100%; z-index: 10; border: 1px solid rgb(0, 0, 0); border-radius: 10px; padding: 25px; box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 3px; }

.dropdown-item { padding: 10px; }

.dropdown-item:hover { background-color: rgb(241, 241, 241); }

.dropdown-link { text-decoration: none; color: rgb(51, 51, 51); }

.dropdown-link:hover { color: rgb(39, 39, 39); }

@media only screen and (max-width: 766px) {
  .custom-flavors-wrapper { gap: 5px; }
  .dropdown-button { color: rgb(0, 0, 0); cursor: pointer; font-size: 4vw; padding: 5px 0px; }
  .dropdown-menu-wrapper h3 { display: inline-block; font-size: 4vw; font-weight: 700; padding-left: 0px; font-family: unset !important; }
  .dropdown-list { display: none; position: relative; top: 100%; left: 0px; background-color: white; list-style: none; margin: 0px; width: 100%; z-index: 10; border: 1px solid rgb(0, 0, 0); border-radius: 10px; padding: 15px; box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 3px; }
}