@font-face {
    font-family: "OPPOSans-Ver2-Regular";
    src: url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff2) format("woff2"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff) format("woff"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.ttf) format("truetype");
}
*, html, body, div, p, span, a{
    font-family: OPPOSans-Ver2-Regular;
}
.header-title{
    padding: 0.8rem 1.5rem;
}
.content-auto {
    content-visibility: auto;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.btn-primary {
    @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300;
}
.btn-secondary {
    @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300;
}
.btn-vip {
    @apply bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-300 hover:to-yellow-500 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300;
}
.vip-glow {
    @apply animate-pulse text-vip;
}
.btn-vip {
    border-radius: 0.5rem;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 基础过渡，和 JS 里的 transition-all duration-300 配合 */
.transform {
  transition-property: transform, opacity, scale;
}
.duration-300 {
  transition-duration: 300ms;
}
p.text-sm.font-medium{
    font-size: 0.875rem;
    line-height: 1.75rem;
}


 
  /* 全局动画配置 */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }
  
  .animate-slide-down {
    animation: slideDown 0.5s ease-out;
  }
  
  .animate-scale {
    transition: transform 0.3s ease;
  }
  
  .animate-scale:hover {
    transform: scale(1.03);
  }
  
  .animate-pulse {
    animation: pulse 2s infinite;
  }
  
  /* 动画定义 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  /* 购物车侧边栏动画 */
  .cart-sidebar {
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  
  /* 商品卡片悬停效果 */
  .card-hover {
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* 按钮悬停效果 */
  .btn-hover {
    transition: all 0.2s ease;
  }
  
  .btn-hover:hover {
    transform: translateY(-2px);
  }
  
  /* 分类按钮选中效果 */
  .category-btn {
    transition: all 0.2s ease;
  }
  
  /* 模态框动画 */
  .modal {
    transition: opacity 0.3s ease;
  }
  
  .modal-content {
    transition: transform 0.3s ease;
  }
  
  /* 购物车添加动画 */
  .add-to-cart-animation {
    animation: addToCart 0.5s ease;
  }
  
  @keyframes addToCart {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
 
 
#vipModal > div{
    width: 90vw;
    max-width: 28rem;
} 
#resetBtn{
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}