/**
 * 产品详情页参数面板样式
 * 包含展开收起动画效果
 */

/* 参数面板动画样式 */
.product-params-dialog .param-item-cont{overflow:hidden;transition:height 0.3s ease-out;}
.product-params-dialog .param-item{border-bottom:1px solid #eee;transition:all 0.3s ease;}
.product-params-dialog .param-item:last-child{border-bottom:none;margin-bottom:0;}
.product-params-dialog .param-item-tit{display:flex;justify-content:space-between;align-items:center;padding:15px 0;cursor:pointer;user-select:none;transition:background-color 0.3s ease;}
.product-params-dialog .tit-txt{font-size:16px;}
.product-params-dialog .tit-icon{transition:transform 0.3s ease;font-size:16px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.product-params-dialog .param-item.expanded .tit-icon{transform:rotate(180deg);}
.product-params-dialog .sub-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;transition:background-color 0.2s ease;}
.product-params-dialog .sub-item-label{color:#555;margin-right:20px;font-size:14px;}
.product-params-dialog .sub-item-value{color:#333;text-align:right;font-size:14px;flex:1;word-break:break-word;}

/* 响应式样式 */
@media (max-width: 768px) {
.product-params-dialog .param-item-tit{padding:12px 0;}
.product-params-dialog .tit-txt{font-size:14px;}
.product-params-dialog .sub-item{flex-direction:column;align-items:flex-start;padding:10px 0;}
.product-params-dialog .sub-item-label{margin-right:0;margin-bottom:5px;font-size:13px;}
.sub-item-value{text-align:left;font-size:13px;}
}

/* Vue过渡动画样式 */
.param-expand-enter-active,.param-expand-leave-active{transition:height 0.4s ease-out,opacity 0.4s ease-out;overflow:hidden;}
.param-expand-enter,.param-expand-leave-to{height:0!important;opacity:0;}

/* 参数弹窗样式优化 */
.product-params-dialog .param-item{overflow:hidden;}
.product-params-dialog .param-item-tit{padding:15px 0 15px 0;cursor:pointer;}
.product-params-dialog .param-item.expanded .param-item-tit{border-bottom:none;}
.product-params-dialog .param-item-cont{padding:0 0 16px 0;background-color:white;}
.product-params-dialog .sub-item:last-child{border-bottom:none;}


@media screen and (max-width: 1820px) {
  .param-nav-menu{display: none;}
}
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1300px) {
  
}
@media screen and (max-width: 1180px) {
  .page-product-compare{padding-bottom:60px;}
  .page-product-compare .compare-main-param .detail-params{display: block;margin-top:8px;}
  .page-product-compare .detail-params .param-item{margin-top:16px;}
  .page-product-compare .detail-params .param-item:first-child{margin-top:0;}
  .page-product-compare .detail-params .param-item .param-value{margin-top:8px;}
  .page-product-compare .detail-params.item-right .param-item{border-right:0;}
  .page-product-compare .detail-params.item-left .param-item:last-child{border-right:1px solid var(--border-color);}
  .page-product-compare .detail-yingyong .detail-yingyong-list{gap:16px;}

  .page-product-compare .detail-yingyong .yingyong-swiper .swiper-button-next{display:none;}
  .page-product-compare .detail-yingyong .yingyong-swiper .swiper-button-prev{display:none;}

  .detail-mate-info .mate-img-swiper-box .mate-swiper .swiper-slide{padding:0;}
  .detail-mate-info .mate-img-swiper-box .mate-swiper .mate-img{width:100%;height:auto;}
  .page-product-compare .album-list-box{gap:16px;padding-top:60px;}
  .page-product-compare .album-list-box .album-item-box.album-left{margin-right:0;flex:1;}
  .page-product-compare .album-list-box .album-item-box.album-right{margin-right:0;flex:1;}
  .page-product-compare .album-list-box .album-item-box .swiper-button-next{display:none;}
  .page-product-compare .album-list-box .album-item-box .swiper-button-prev{display:none;}
  .detail-mate-info .mate-img-swiper-box .mate-img-360-btn{padding:8px 16px;}
  .detail-param-box{margin-top:60px;}

  .page-product-compare .detail-param-box .param-item-tit{padding:12px 0;}
  .page-product-compare .detail-param-box .sub-item{padding:8px 0;}
  .page-product-compare .detail-param-box .sub-item:last-child .sub-item-comparison{border-bottom:none;}
  .page-product-compare .detail-param-box .comparison-left{padding-bottom:8px;}

  .page-product-compare .detail-param-box .tit-txt{font-size:16px;}
  
  
}
@media screen and (max-width: 750px) {
  .page-product-compare{padding-bottom:0;}
}
@media screen and (max-width: 480px) {

}