/* Mobile Responsive CSS for EnkiLife Product Page */
/* 移动端响应式样式 - 将表格改为卡片式布局 */

/* 移动端媒体查询 - 768px以下设备 */
@media (max-width: 768px) {
    /* 自定义样式----------开始 */
    /* 主体 */
    .container section{
        padding: 0px !important;
        margin-top: 20px;
    }
    /* 输入框 */
    .wp-block-search__inside-wrapper {
        padding: 0 14px;
    }
    /* 详情和介绍 */
    .introduce-section, .detail-section{
        padding: 0px !important;
    }
    .introduce-section{
        margin-top: 20px;
    }
    .detail-title{
        margin: 0px !important;
        margin-top: 20px !important;
        padding-bottom: 8px !important;
    }
    .detail-section section .title1{
        padding-bottom: 0px !important;
        margin-bottom: 18px;
    }
    /* 自定义样式----------结束 */



    /* 重新设计表格为卡片布局 */
    table{
        display: block !important;
        border: none;
        background: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        width: 100%;
    }
     
    /* 表格主体样式 */
    table tbody {
        display: block;
        width: 100%;
    }
    table th, table td{
        padding: 0px;
    }
    
    /* 每一行转换为卡片 */
    table tbody tr {
        display: block;
        border-radius: 0px;
        overflow: hidden;
        background: white;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 14px;
        /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
    }
    /* 每个单元格显示为一行 */
    table tbody tr td, table tbody tr th {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        color: #333;
        background: white;
        margin-bottom: 10px;
        font-weight: 400;
        /* border-bottom: 1px solid #f0f0f0; */
    }
    table tbody tr td:last-child, table tbody tr th:last-child{
        margin-bottom: 0px;
    }

    /* 最后一个单元格去掉底部边框 */
    table tbody tr td:last-child {
        border-bottom: none;
    }
    
    /* 单元格内容样式 */

    table tbody tr td > div {
        /* padding: 4px 0px; */
        line-height: 20px;
        margin-bottom: 4px;
    }

    tr:not(.firstRow):hover {
        background: #ffffff!important;
    }
    tr:nth-child(even) {
        background-color: #ffffff!important;
    }
    
    /* 头部  除第一个th，其他的隐藏*/
    table .firstRow th:not(:first-child), table .firstRow td {
        display: none;
    }

    /* 隐藏原始表格的表头（firstRow） */
    table .firstRow {
        background: #f7f7f7;
        border-radius: 0px;
        border-bottom: 1px solid #dcdcdc;
        padding: 14px 16px;
        min-height: 50px;
        /* padding: 12px 14px; */
    }
    table .firstRow th{
        border: 0px;
        font-weight: 500;
        font-size: 18px;
        color: #222;
        /* background: #f7f7f7; */
        text-align: left;
        border-radius: 0px;
        width: 100% !important;
        background-color: transparent;
        margin: 0px;
    }
    /* 图片 */
    .standard-curve-image{
        padding: 0px !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .standard-curve-image img{
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
    }

}