.main{
    height:auto;
    border: 1px solid rgba(0,0,0,0);
}
.main-right{
    width: 70%;
    margin-top: 130px; 
}
.main-right-product-item{
    width: 70%;
    height: 14vw;
    border: 1px solid #ccc;
    margin: 0 auto;
    padding:2% 1%;

}
.product-item-class{
    font-size:large;
    font-weight: bolder;
}
.product-item-img{
    width: 6vw;
    height: 6vw;
    overflow: hidden;
    float: left;

}
.product-item-img img{
    width: 100%;
}
.product-item-box{
    float: left;
    width: 10%;
    margin-left: 1%;
}
.product-item-del-t{
    margin-left: 30%;
}
.product-item-del-t a{
    color: white;
}


.product-item-btn{
    width: 5vw;
    background:black;
    color: white;
    text-align: center;
}
.product-item-btn:hover{
    cursor: pointer;
}
.delete-btn{
    background-color: black;
    color: white;
    width: 100%;
}
.product-item-num{
    margin-left: 10%;
    width: 100%;
}
.product-box{
    float: left;
    margin-right: 10%;
}
.ops{
    width: 50%;
    height: auto;
    text-align: center;
    margin: 0 auto;
}
.ops p{
    font-size: larger;
}

.info h1{
    text-align: center;
}
.info div{
    margin: 0 auto;
    text-align: center;
}
.info .red{
    color: red;
}
.info div span:nth-of-type(2){
    width: 100%;
    display: inline-block;
}


.info div:nth-of-type(3){
    padding-bottom: 1%;
}
.info input{
    width: 50%;
    border: 1px solid #eee;
} 

#country{
    width: 15%;
}
#phone{
    width: 31%;
}
.infoBox{
    width: 10%;
    margin: 0 auto;

}
.infoBtn{
    background-color: black;
}
.infoBtn button{
    width: 100%;
    background-color: black;
    color: white;
}
@media screen and (max-width: 998px){
    .main-right-product-item{
        height: 16vw;
    }
}
/* ============ 仅当 ≤998px 时生效的追加样式 ============ */
@media screen and (max-width: 998px) {
    /* 主区域占满屏幕宽度 */
    .main-right {
        width: 100%;
        margin-top: 100px;   /* 可视情况再缩小一点 */
        padding: 0 4%;       /* 左右留一点呼吸感 */
        box-sizing: border-box;
    }

    /* 每一项由固定高度改为自适应，避免 16vw 过高或内容溢出 */
    .main-right-product-item {
        width: 100%;
        height: auto;
        padding: 12px;
        margin-bottom: 12px;
    }

    /* 图片与文字垂直排列，防止浮动折行 */
    .product-box {
        float: none;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        margin-right: 0;
    }

    .product-item-img {
        width: 18vw;
        height: 18vw;
        max-width: 90px;
        max-height: 90px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .product-item-num {
        margin-left: 0;
    }

    /* 让删除按钮宽度自适应，避免 5vw 过窄 */
    .product-item-btn {
        width: auto;
        min-width: 70px;
        padding: 4px 8px;
    }

    /* 表单输入框一行显示不开时自动换行 */
    .info input,
    #country,
    #phone {
        width: 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    /* 提交按钮容器自适应 */
    .infoBox {
        width: 60%;
        max-width: 200px;
    }
    /* 让每一项内部使用 flex，方便按钮垂直居中右对齐 */
.main-right-product-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* 左侧商品信息区域宽度自适应 */
.main-right-product-item > .product-item-class,
.main-right-product-item > .product-box {
    flex: 1 1 100%;
}

/* 删除按钮容器：右对齐、垂直居中、去掉浮动 */
.product-item-box {
    float: none;
    width: auto;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 删除按钮本身宽度自适应，去掉固定 5vw */
.product-item-btn,
.product-item-del-t {
    width: auto;
    min-width: 70px;
    margin: 0;
}
}