@import 'masonry.css';
@import 'product-card.css';

/* 修改超级链接样式 */
    a {
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    a:hover {
        color: red;
    }
    
    a:active {
        color: gray;
    }
a.text-white:hover,
a.text-white:focus {
  color: #f8f9fa !important;
  text-decoration: underline;
}

.hover-opacity:hover {
  opacity: 0.8;
}

@media (min-width: 1440px) { /* 改为更常见的屏幕宽度 */
    .container-xxxl { max-width: 1760px; }
}

/* WhatsApp 链接样式 */

.whatsapp-link {
  position: relative;
}
.whatsapp-img {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 1050;
  margin-top: 5px;
}
.whatsapp-link:hover .whatsapp-img {
  display: block;
}


/* 顶部导航栏样式 */
#topNav {
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}


/* 面包屑导航优化：更具体的选择器覆盖 Bootstrap 默认样式 */
.breadcrumb .breadcrumb-item a {
    text-decoration: none;
    color: #000 !important; /* 黑色默认状态 */
}

.breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
    color: #6c757d !important; /* 灰色悬停状态 */
}

.breadcrumb .breadcrumb-item.active {
    color: #6c757d !important; /* 激活项灰色 */
}
/* 宽度为 30px 的类 */


.none{
  display:none;
  width:30px;
}

/* logo 悬停效果 */
.logo-hover {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.logo-hover:hover {
  transform: rotate(15deg) scale(1.05);
}

/* 旋转 5 度的元素样式 */
.rotate-5 {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: inline-block; /* 确保旋转中心正确 */
}

a img.rotate-5 {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: inline-block;
}

a:hover img.rotate-5 {
  transform: rotate(5deg) scale(1.05);
}

/* 旋转 3 度的元素样式 */
.rotate-3 {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: inline-block; /* 确保旋转中心正确 */
}

a img.rotate-3 {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: inline-block;
}

a:hover img.rotate-3 {
  transform: rotate(3deg) scale(1.05);
}

/* 主导航栏样式 */
#mainNav {
  position: sticky;
  top: 0; /* 改为 topNav 的实际高度 */
  z-index: 1040;
  height: 80px;
  transition: all 0.6s ease;
  background: transparent;
}

#mainNav.scrolled {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  height: auto;
}

#mainNav.hidden {
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

/* 为导航栏的 active 链接添加红色下划线 */
.navbar-nav .nav-link.active {
  color: var(--bs-danger);
  border-bottom: 2px solid var(--bs-danger);
}

/* 定义LOGO中文字样式 */
.brand-text {
  display: inline-block;
  font-size: 1.5rem;
  transform: scaleX(0.8); /* 可根据需求调整缩放比例，小于 1 为拉伸，大于 1 为压缩 */
  transform-origin: left;
  font-weight: 800; /* 让字体更粗 */
  text-transform: uppercase; /* 添加此属性，将文字内容转换为全大写 */
}

/* 针对子菜单的 active 链接添加相同效果，并去除蓝色背景色 */
.navbar-nav .dropdown-menu .dropdown-item.active {
  color: var(--bs-danger);
  border-bottom: 2px solid var(--bs-danger);
  background-color: transparent;
}

/* 二级菜单样式 */
.menu_2 {
  width: 300px;
  display: none;
  z-index: 1000;
}

/* 通过鼠标悬停显示二级菜单 */
.list-group-item:hover .menu_2 {
  display: block;
}

/* 控制小屏时截断多余的文字 */
/* 小屏时：单行截断 + 右侧渐隐 */
@media (max-width: 768px) {
  .responsive-fade-multiline {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
      mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
}

/* 大屏时：3行显示 + 底部渐隐 */
@media (min-width: 769px) {
  .responsive-fade-multiline {
      display: -webkit-box;
      
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: calc(1.5em * 3); /* 预留3行空间（默认行高为1.5） */
      line-height: 1.5;
      position: relative;
      mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
}
/* 背景图全屏样式 */
.fullscreen-bg {
      min-height: 60vh;
      background-size: cover;
      background-position: right top;
      background-repeat: no-repeat;
    }
/* 底部 footer 样式 */
#myFooter {
  background: linear-gradient(135deg, red, green);
} 

/* Jquiry加载图片样式 */
#loading {
  display: none;
  width: 15px;  
}

/* 红色下划线背景样式 */
.section-title {
    margin: 1rem auto;
}

.section-divider::after {
    content: '';
    display: block;
    width: 5rem;
    height: 3px;
    background: var(--bs-danger);
    margin: 1rem auto;
}