/* 添加渐变背景样式 */
body {
    background: transparent !important; /* 确保body背景透明，显示html的渐变背景 */
}

/* 调整边框和卡片的样式，使其与渐变背景更协调 */
.layui-card, .layui-container .fly-panel, .layui-elem-quote {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* 公告样式美化 */
.layui-elem-quote {
    overflow: hidden;
}

/* 弹出层圆角 */
.layui-layer-content, .layui-layer {
    border-radius: 8px !important;
    overflow: hidden;
}

/* 商品列表圆角效果 */
/* 表格圆角效果 */
.layui-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}

.layui-table thead tr:first-child th:first-child {border-top-left-radius: 8px;}
.layui-table thead tr:first-child th:last-child {border-top-right-radius: 8px;}
.layui-table tbody tr:last-child td:first-child {border-bottom-left-radius: 8px;}
.layui-table tbody tr:last-child td:last-child {border-bottom-right-radius: 8px;}

.layui-table td, .layui-table th {
  border-color: #e6e6e6;
  border-width: 1px;
}

/* 移动端商品列表圆角效果 */
@media screen and (max-width: 767px) {
  /* 为每个商品卡片添加圆角 */
  .goodsdetail-mobile {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
  }
}



/* 添加CSS样式 显示联系方式QQ/微信二维码 */
.wechat-hover, .qq-hover {
    position: relative;
    text-decoration: none;
}

.wechat-qrcode, .qq-qrcode {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1000;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    /* 确保二维码不受父元素overflow限制 */
    overflow: visible;
}

.wechat-qrcode img, .qq-qrcode img {
    width: 150px;
    height: 150px;
}

.wechat-hover:hover .wechat-qrcode, .qq-hover:hover .qq-qrcode {
    display: block;
}

/* 修复公告块样式，确保二维码能完整显示 */
.layui-elem-quote {
    position: relative;
    overflow: visible !important;
}




/* 响应式布局修复 - 以768px为界限，优化使得平板下不要乱码平铺 */
/* 小于768px的设备 - 只显示移动端布局 */
@media screen and (max-width: 767px) {
  .layui-hide-xs {display: none !important;}
  .layui-hide-md {display: block !important;}
}

/* 大于等于768px的设备 - 只显示电脑端布局 */
@media screen and (min-width: 768px) {
  .layui-hide-xs {display: block !important;}
  .layui-hide-md {display: none !important;}
}


/* 修复移动端商品卡片在小屏幕上的显示；这段代码的目的是确保在小屏幕上，商品卡片会占据整个宽度并垂直排列，而不是尝试并排显示，从而提供更好的移动端用户体验*/
@media screen and (max-width: 767px) {
  .goodsdetail {
    width: 100% !important;
    float: none !important;
  }
}


/* 商品列表字体设置*/
/* 商品分类名称加粗 */
.layui-card-header{
    font-weight: bold;
}
/* 移动端商品名称加粗换行，写到这种独立的css中，要加上important提高优先级 */
.title{
  white-space: normal  !important;
  word-break: break-all  !important; /* 确保了长单词或没有空格的长字符串不会溢出容器, 移动端下商品名称很长时换行 */
  font-weight: bold;
}

/* 商品详情页字体设置 */
/* 商品详情 商品名称 加粗 */
.trade-goodname{
  font-weight: bold;
}
/* 商品详情"商品描述"加大加粗 */
.layui-tab-title .layui-this {
  font-weight: bold !important;
  font-size: 16px !important;
}