/* ===== Block 1 from head.html ===== */
/* 顶部蓝色条外层 */
.top-bar{
    width:100%;
    background:#31854d;
    color:#fff;
    font-size: 14px;
}
/* 内容容器：最大宽度1140px，水平居中 */
.top-container{
    max-width:1440px;
    margin:0 auto;
    padding:0 15px;
    height:49px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction: row-reverse;
}
.top-left{
    display:flex;
    gap:30px;
}
.top-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
}
.top-item a{
    color:#fff;
    text-decoration:none;
}
.top-right{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
}
/* 手机适配 */
@media (max-width:768px){
    .top-container{
        height:auto;
        padding:10px 15px;
        flex-direction:column;
        gap:10px;
    }
    .top-left{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }
    .top-right{
        text-align:center;
    }
}
.wave{background-color:#31854d;height:10px;position:relative}
.wave:before{background-image:radial-gradient(circle at 6px,at -3px,transparent 7.2px,#FFF 8.2px);background-image:radial-gradient(circle at 6px -3px,transparent 7.2px,#FFF 8.2px);background-size:12px 12px;height:7.2px}
.wave:after,.wave:before{background-repeat:repeat;bottom:0px;content:"";left:0px;position:absolute;right:0px}
.wave:after{background-image:radial-gradient(circle at 6px,at 9px,#FFF 0,transparent 8.2px);background-image:radial-gradient(circle at 6px 9px,#FFF 7.2px,transparent 8.2px);background-size:24px 12px;height:9px}

/* ===== Block 2 from head.html ===== */
.default_nav_themes {
    position: relative;
}
.default_nav_themes .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #eee;
    min-width: 160px;
    z-index: 999;
    padding: 8px 0;
}
.default_nav_themes:hover .submenu {
    display: block;
}
.default_nav_themes .submenu li {
    list-style: none;
}
.default_nav_themes .submenu li a {
    display: block;
    padding: 10px 16px;
    white-space: nowrap;
}
.default_nav_themesno{
   color:#03771;
}

/* 首页：导航 Home 项高亮（与内页 {sort:tcode} 高亮同色 #0eb32c）
   首页 body class = "index"，内页为 article / blog / cases / products，
   故用 body.index 精确限定，不影响内页由 inline style 控制的栏目高亮。 */
body.index .nav ul.default_nav > li:first-child > a{
    color:#0eb32c;
}

.lk_categories_section{ margin-bottom:10px;}

/* ============================================================================
   首页「Product Categories」版块 —— 方形白卡（与 Featured Products 完全一致）
   ----------------------------------------------------------------------------
   第 14 版改造：原样式是「圆形图 + 绿色圆环 + 橙色 More 胶囊 + 居中标题」，
   现改为与首页 Featured Products 一样的**白底方形卡片**：
       白底 / 8px 圆角 / 1px 边框 / 轻阴影 / hover 上浮
       图片区正方形（分类图素材 480×480，1:1），object-fit:contain 不变形
       底部「分类名（左）+ View products →（右）」PC 横排、手机纵排
   5 个一排放（PC 5 列 / 平板 3 列 / 手机 2 列）。

   ★ 与 home-inline.css 里 Featured Products 卡片保持同一套视觉 token：
       背景 #fff  边框 #e8eae9  圆角 8px  阴影 rgba(0,0,0,.04) 0 1px 3px
       悬停阴影 rgba(0,0,0,.10) 0 10px 26px + translateY(-2px)
       标题 #14532d / 700 / 16px      链接 #2f6b4f / 13px
   ★ 本文件由 head.html 引入，全站共用，但 .lk_categories_section 仅首页存在，
     故改动不影响内页。
   ============================================================================ */

.lk_categories_section {
    background: #ffffff;                /* 外层仍是白底（模板内联写 #f0f5f4，会被它盖住） */
    padding: 50px 0 60px;
}

.lk_categories_section .section {
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
}

/* ---------- 标题 ---------- */
.lk_cat_head {
    text-align: center;
    margin-bottom: 46px;
}

.lk_cat_title {
    margin: 0;
    font-family: "OpenSans-Bold", "Montserrat-Regular", Arial, sans-serif;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 400;
    color: #1f2328;
}

.lk_cat_sub {
    margin: 20px 0 0;
    font-family: "Montserrat-Regular", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #333333;
}

/* ---------- 卡片栅格：PC 5 列（与 Featured Products 同款间距 24px） ---------- */
.lk_cat_list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));   /* ★ 5 个一排 */
    gap: 24px;
    align-items: stretch;
    justify-items: stretch;             /* 覆盖旧样式的 center，让卡片撑满列宽 */
    margin-top: 30px;
}

.lk_cat_item {
    width: 100%;
    min-width: 0;
    display: block;                     /* 覆盖旧样式的 flex/justify-content:center */
}

/* ---------- 卡片本体：与 Featured Products 同款白卡 ---------- */
.lk_cat_link {
    display: flex;
    flex-direction: column;
    align-items: stretch;               /* 覆盖旧样式的 center */
    width: 100%;
    max-width: none;                    /* 覆盖旧样式的 max-width:230px */
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8eae9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    text-decoration: none;
    text-align: left;
    transition: box-shadow .25s ease, transform .25s ease;
}
.lk_cat_link:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

/* ---------- 图片区：正方形（分类图素材 480×480，1:1），不变形不裁切 ----------
   ★ 用 aspect-ratio 撑正方形；比 padding-top 百分比写法更直观。
   若日后换非正方形素材，请把 object-fit 保持 contain，否则会变形。 */
.lk_cat_circle {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;                    /* 覆盖旧样式的 max-width:190px */
    aspect-ratio: 1 / 1;
    border-radius: 0;                   /* 覆盖旧样式的 50% */
    background: #f6f8f7;
    border: 0;                          /* 覆盖旧样式的 3px 绿环 */
    padding: 0;                         /* 覆盖旧样式的 5px */
    box-sizing: border-box;
    overflow: hidden;                   /* 覆盖旧样式的 visible，让图片被卡片圆角裁切 */
    transition: none;
}

.lk_cat_img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;                   /* 覆盖旧样式的 50% */
    object-fit: contain;                /* ★ 保持原比例，不变形不裁切 */
    object-position: center center;
    box-shadow: none;                   /* 去掉旧样式的内圈白环 */
    background: #f6f8f7;
    transition: transform .5s ease;
}
.lk_cat_link:hover .lk_cat_img {
    transform: scale(1.05);
}

/* ---------- 隐藏旧的「More」橙色胶囊 ---------- */
.lk_cat_more {
    display: none !important;
}

/* ---------- 底部文字区：分类名（左）+ View products →（右） ---------- */
.lk_cat_name {
    display: flex;
    flex-direction: column;             /* 手机纵排；PC 由下面媒体查询改横排 */
    gap: 6px;
    flex: 1 1 auto;
    margin: 0;                          /* 覆盖旧样式的 margin-top:20px */
    padding: 14px 16px 16px;            /* 与 Featured Products 一致 */
    box-sizing: border-box;
    font-family: "Montserrat-Regular", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;                   /* ★ 与 Featured Products 的粗体一致 */
    line-height: 1.35;
    color: #14532d;                     /* ★ 深绿，与 Featured Products 一致 */
    text-align: left;                   /* 覆盖旧样式的 center */
    transition: color .2s ease-in-out;
}
/* 去掉旧样式在分类名后追加的「→」 */
.lk_cat_name::after {
    content: none;
}

/* 「View products →」链接：与 Featured Products 的 .prod_view_more 同款 */
.lk_cat_view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #2f6b4f;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    align-self: flex-start;             /* 手机端靠左 */
    transition: color .2s ease, gap .2s ease;
}
.lk_cat_view .lk_cat_arrow {
    display: inline-block;
    transition: transform .2s ease;
}
.lk_cat_link:hover .lk_cat_view { color: #14532d; }
.lk_cat_link:hover .lk_cat_view .lk_cat_arrow { transform: translateX(3px); }
/* 悬停时下划线从左向右展开 */
.lk_cat_view::after {
    content: "";
    position: absolute;
    left: 0; right: auto; bottom: -2px;
    width: 0; height: 1px;
    background: currentColor;
    transition: width .25s ease;
}
.lk_cat_link:hover .lk_cat_view::after { width: 100%; }

/* ---------- ★ PC 端：分类名与 View products 横排 ----------
   与 home-inline.css 里 Featured Products 的 PC 横排写法完全一致：
   标题可压缩（min-width:0 + overflow:hidden），链接绝不压缩/裁切。 */
@media (min-width: 769px) {
    .lk_cat_name {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .lk_cat_name .lk_cat_label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .lk_cat_name .lk_cat_view {
        flex: 0 0 auto;
        align-self: auto;
        min-width: max-content;
    }
}

/* ---------- 响应式：平板 3 列 / 手机 2 列 ---------- */
@media screen and (max-width: 1200px) {
    .lk_cat_list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (max-width: 1000px) {
    .lk_categories_section { padding: 40px 0 46px; }
    .lk_cat_title { font-size: 34px; }
    .lk_cat_sub { font-size: 16px; margin-top: 14px; }
    .lk_cat_head { margin-bottom: 36px; }
    .lk_cat_list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .lk_cat_name { font-size: 15px; padding: 12px 14px 14px; }
    .lk_cat_view { font-size: 12px; }
    .xin_jia{ width:100%!important;}
}

@media screen and (max-width: 767px) {
    .lk_categories_section { padding: 32px 0 38px; }
    .lk_cat_title { font-size: 26px; }
    .lk_cat_sub { font-size: 14px; margin-top: 10px; }
    .lk_cat_head { margin-bottom: 28px; }
    .lk_cat_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .lk_cat_name { font-size: 14px; padding: 10px 12px 12px; gap: 4px; }
    .lk_cat_view { font-size: 12px; }
    /* 手机端只显示前 4 个分类（排满 2×2），隐藏第 5 个及以后。
       原因：手机端是 2 列，5 个卡片会排成 3 行、最后一行只剩 1 个、右侧空一格。
       用 :nth-child(n+5) 而不是 :last-child，这样后台以后加栏目也不会漏出第 6、7 个。
       因为被隐藏的是末尾几项，grid 不会因此产生前移错位，直接 display:none 即可。 */
    .lk_cat_item:nth-child(n + 5) { display: none !important; }
}

@media screen and (max-width: 400px) {
    .lk_cat_name { font-size: 13px; }
    .lk_cat_view { font-size: 11px; }
}