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



/* 移动端媒体查询 - 768px以下设备 */
@media (max-width: 768px) {
    /* 高特异性选择器覆盖 themes.css 
    当时移动端时可以把themes.css的样式去掉*/
    body.woocommerce #content div.product .woocommerce-tabs .panel table,
    .woocommerce #content div.product .woocommerce-tabs .woocommerce-Tabs-panel table,
    .woocommerce #content div.product .woocommerce-tabs .panel table.compact-table,
    html body.woocommerce #content div.product .woocommerce-tabs .panel table {
        border: 1px solid #e2e8f0 !important;
        background: white !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        width: 100% !important;
    }

    /* 强制限制页面宽度 - 解决400px屏幕显示560px的问题 */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* 强制所有容器不超过屏幕宽度 */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* 自定义样式----------开始 */
    /* 主体 */
    .site--logo img{
        max-height: 50px !important;
    }
    .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;
    }
    .container .grid{
        box-sizing: border-box !important;
        width: 100% !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    }

    
    /* 描述位置左右间距 */
    [aria-labelledby="tab-title-description"]{
        padding: 14px 0px!important;
        border: 0px !important;
    }
    .detail-title{
        margin: 0px !important;
        margin-top: 20px !important;
        padding-bottom: 8px !important;
    }
    .detail-section section .title1{
        padding-bottom: 0px !important;
        margin-bottom: 18px;
    }

    /* 尾部 */
    .dt__footer .dt-container .f-j-b{
        margin-top: 14px !important;
    }
    .dt__footer .dt-container .f-j-b img{
        width: 20px !important;
        height: auto !important;
        margin-top: 3px !important;
    }
    .dt__footer .dt-container .f-j-b:first-child{
        margin-top: 0px !important;
    }
    .dt__footer .dt-container .f-j-b .flex{
        margin-left: 14px !important;
    }
    .dt__footer .dt-container .f-j-b .flex > p{
        margin-top: 0px !important;
    }
    .dt__footer .wpforms-field-container .wpforms-field-label{
        margin-bottom: 4px;
        display: block;
        margin-top: 12px;
    }
    .dt__footer .wpforms-container .wpforms-submit-container{
        margin-top: 12px;
    }
    /* 自定义样式----------结束 */



    /* 重新设计表格为卡片布局 */
    table{
        display: block !important;
        /* border: none; */
        background: none;
        box-shadow: none;
        border-radius: 0;
        overflow: auto!important;
        width: 100% !important;
        max-width: 100vw !important;
        border: 1px solid #e9e9e9 !important;
        table-layout: fixed !important; /* 强制固定表格布局 */
    }
   
     
    /* 表格主体样式 */
    table tbody {
        display: block;
        width: 100%;
        max-width: 100vw !important;
    }
    table th, table td{
        padding: 0px;
        word-wrap: break-word !important;
        word-break: break-all !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
    
    /* 每一行转换为卡片 */
    table tbody tr {
        display: block;
        border-radius: 0px;
        overflow: hidden;
        background: white;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 14px;
        max-width: 100vw !important;
        height: auto !important;
        box-sizing: border-box;
        /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
    }
    /* 每个单元格显示为一行 */
    table tbody tr td, table tbody tr th {
        display: block;
        width: 100%;
        max-width: 100% !important;
        padding: 0px !important;
        border: none !important;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        color: #333;
        background: white;
        margin-bottom: 10px;
        font-weight: 400;
        word-wrap: break-word !important;
        word-break: break-all !important;
        white-space: normal !important;
        text-indent: 0px !important;
        height: auto !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        text-align: left !important;
        /* 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;
        max-width: 100% !important;
        word-wrap: break-word !important;
        text-align: left !important;
    }

    table tbody tr td > p {
        margin: 0px !important;
        /* padding: 4px 0px; */
        line-height: 20px;
        margin-bottom: 4px !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        text-align: left !important;
    }

    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: 0px;
        border-bottom: 1px solid #dcdcdc;
        padding: 14px 16px;
        min-height: 50px;
        max-width: 100vw !important;
        /* padding: 12px 14px; */
    }
    table .firstRow th{
        border: 0px !important;
        font-weight: 500;
        font-size: 18px;
        color: #222;
        /* background: #f7f7f7; */
        text-align: left;
        border-radius: 0px;
        width: 100% !important;
        max-width: 100% !important;
        background-color: transparent;
        margin: 0px;
        word-wrap: break-word !important;
    }
    /* 图片 */
    .standard-curve-image{
        padding: 0px !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 100vw !important;
    }
    .standard-curve-image img{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
    }

    /* 强制所有图片自适应 */
    table img, section img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

}