/* Make variant selector clearly noticeable */
.xb-list-style__select {
  border: 2px solid #F21D2F !important;
  border-radius: 8px;
  padding: 10px 12px;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(242, 29, 47, 0.15);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Stronger emphasis on hover */
.xb-list-style__select:hover {
  box-shadow: 0 0 0 3px rgba(242, 29, 47, 0.25);
}

/* Very clear focus state */
.xb-list-style__select:focus {
  outline: none;
  border-color: #F21D2F;
  box-shadow: 0 0 0 4px rgba(242, 29, 47, 0.35);
}

/* ===== iOS wishlist modal wobble fix (safe version) ===== */
@media (max-width: 768px) {
  .xb-wishlist-modal {
    max-height: 90vh;
    height: 90vh;
  }
  
  /* Lock inner scroll area */
  .xb-wishlist-modal__wrapper {
    max-height: calc(90vh - 64px); /* header height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent horizontal shake */
  .xb-wishlist-modal,
  .xb-wishlist-modal__wrapper {
    overflow-x: hidden;
  }
  
  /* Fix variant select overflow */
  .xb-wishlist-modal .xb-list-style__select {
    max-width: 100%;
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: 44px;
  }
  
  /* Allow option text to wrap */
  .xb-wishlist-modal .xb-list-style__select option {
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* Make sure the variant container doesn't overflow */
  .xb-wishlist-modal .xb-list-style__variant {
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .xb-wishlist-modal {
    will-change: transform;
  }
}