/* ============================================================
   Product single — 单品页描述区结构化样式
   （对齐 Golenda 参考：品牌紫 + 清晰层级 + 规整表格）

   解决两个问题：
   1. div.product 是两列 grid，但 woocommerce-tabs 没跨列 → 描述区错乱到左列
   2. 描述 HTML 里的 <div class="section"> 被 style.css 首页样式污染
      （.section{padding:88px 0}、.section h2{font-size:38px}）
   并把描述 HTML 内联的 #c0392b 红统一为品牌紫 #641c86。
   ============================================================ */

/* 单品页 hero 产品名：响应式字号，避免超长标题过大 */
.jomola-product-hero h1{
    font-size:clamp(26px,3.2vw,40px);
    line-height:1.15;
    max-width:960px;
    overflow-wrap:break-word;
}

/* ---------- 布局修复：描述区 / 相关产品跨满整行 ---------- */
.jomola-single-product div.product{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}
.jomola-single-product div.product .woocommerce-tabs{
    grid-column:1 / -1;
    width:100%;
    padding-top:48px;
}

/* 产品标题在 summary 顶部显示（对齐 Golenda：分类 → 标题 → 描述 → SKU → GET QUOTE） */
.jomola-single-product .jomola-single-cat{
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--green);
    margin:0 0 10px;
}
.jomola-single-product .jomola-single-cat a{color:var(--green);text-decoration:none}
.jomola-single-product .jomola-single-cat a:hover{opacity:.72}
.jomola-single-product .jomola-sku{font-weight:700;color:var(--ink)}
.jomola-single-product .jomola-sku .sku{color:var(--ink)}

/* 隐藏 WooCommerce 自动加的 "Description" 屏幕标题 */
.jomola-single-product .woocommerce-tabs .woocommerce-Tabs-panel--description > h2:first-child{
    display:none;
}

/* 描述区内容：舒适的中栏宽度 */
.jomola-single-product .woocommerce-tabs .panel{
    max-width:920px;
}

/* ---------- .section 重置（覆盖首页 .section{padding:88px}） ---------- */
.jomola-single-product .woocommerce-tabs .panel .section{
    padding:0 0 38px;
    margin:0 0 38px;
    border-bottom:1px solid var(--line);
}
.jomola-single-product .woocommerce-tabs .panel .section:last-of-type{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
}

/* 标题：品牌紫左边框 */
.jomola-single-product .woocommerce-tabs .panel .section > h2{
    font-size:24px;
    line-height:1.25;
    margin:0 0 18px;
    padding-left:14px;
    border-left:4px solid var(--green);
    color:var(--ink);
    letter-spacing:0;
}

/* 正文段落 */
.jomola-single-product .woocommerce-tabs .panel .section p{
    font-size:15px;
    line-height:1.75;
    color:#3a4441;
    margin:0 0 14px;
}
.jomola-single-product .woocommerce-tabs .panel .section p:last-child{margin-bottom:0}

/* 列表：品牌紫圆点 + 分隔线 */
.jomola-single-product .woocommerce-tabs .panel .section ul{
    list-style:none;
    margin:0;
    padding:0;
}
.jomola-single-product .woocommerce-tabs .panel .section ul li{
    position:relative;
    padding:8px 0 8px 22px;
    font-size:15px;
    line-height:1.6;
    color:#3a4441;
    border-bottom:1px dashed var(--line);
}
.jomola-single-product .woocommerce-tabs .panel .section ul li:last-child{border-bottom:0}
.jomola-single-product .woocommerce-tabs .panel .section ul li::before{
    content:"";
    position:absolute;
    left:3px;
    top:17px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
}
.jomola-single-product .woocommerce-tabs .panel .section ul li strong{
    color:var(--ink);
    font-weight:700;
}

/* ---------- 参数表：内联红 → 品牌紫 + 斑马纹 ---------- */
.jomola-single-product .woocommerce-tabs .panel table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    margin:4px 0 0;
    border:1px solid var(--line);
}
.jomola-single-product .woocommerce-tabs .panel table th,
.jomola-single-product .woocommerce-tabs .panel table td{
    padding:11px 14px;
    border:1px solid var(--line);
    text-align:left;
    vertical-align:top;
}
.jomola-single-product .woocommerce-tabs .panel table tr:first-child{
    background-color:var(--green) !important;
    color:#fff !important;
}
.jomola-single-product .woocommerce-tabs .panel table tr:first-child th{
    color:#fff !important;
    font-weight:700;
}
.jomola-single-product .woocommerce-tabs .panel table td strong{color:var(--ink)}

/* ---------- 描述里内嵌的 Related products 卡片区 ---------- */
.jomola-single-product .woocommerce-tabs .panel ul.products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    list-style:none;
    margin:0;
    padding:0;
}
.jomola-single-product .woocommerce-tabs .panel ul.products li{
    padding:0;
    border:0;
    border-bottom:0;
    text-align:center;
}
.jomola-single-product .woocommerce-tabs .panel ul.products li::before{display:none}
.jomola-single-product .woocommerce-tabs .panel ul.products li img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:6px;
}
.jomola-single-product .woocommerce-tabs .panel ul.products li h3{
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    margin:12px 0 0;
    color:var(--ink);
}
.jomola-single-product .woocommerce-tabs .panel ul.products li a{color:inherit;text-decoration:none}
.jomola-single-product .woocommerce-tabs .panel ul.products li a:hover h3{color:var(--green)}

/* 描述区里非 .section 的裸 h2（如 "Related products" 标题） */
.jomola-single-product .woocommerce-tabs .panel > div > h2{
    font-size:24px;
    margin:0 0 18px;
    padding-left:14px;
    border-left:4px solid var(--green);
    color:var(--ink);
}

/* ---------- CTA 盒子（Ready to Order）：内联红 → 品牌紫 ---------- */
.jomola-single-product .woocommerce-tabs .panel div[style*="c0392b"]{
    background:#f7f2fa !important;
    border-color:var(--green) !important;
}
.jomola-single-product .woocommerce-tabs .panel a[style*="c0392b"]{
    color:var(--green) !important;
}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
    .jomola-single-product .woocommerce-tabs .panel ul.products{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:480px){
    .jomola-single-product .woocommerce-tabs .panel ul.products{
        grid-template-columns:1fr;
    }
    .jomola-single-product .woocommerce-tabs .panel .section > h2{
        font-size:20px;
    }
}