/*
 * NPC Zibll 子主题 - 小工具样式
 * 仅覆盖/补齐子主题新增的小工具（尽量不影响父主题）
 */

/* ==========================================================================
   通用模块样式
   ========================================================================== */

.npc-container{ width:100%; max-width:1400px; margin:0 auto; padding:0 16px; }

/* 通用标题区 */
.npc-home-title { text-align: center; margin-bottom: 40px; }
.npc-home-title > span { display:inline-block; font-size:28px; font-weight:700; line-height:1.3; color:#111; }
.npc-home-title > p { margin:12px auto 0; max-width:820px; font-size:16px; line-height:1.8; color:#999; }

/* 通用模块上下留白 */
.npc-home-spread,
.npc-home-file { padding: 100px 0; }
.npc-home-homevip { padding: 0; }
.npc-home-homevip .npc-homevip-bg { padding: 80px 0; }

/* grid 基础（仅用于 npc 相关模块，避免影响父主题其他布局） */
.npc-home-spread .npc-grid,
.npc-home-file .npc-grid,
.npc-home-homevip .npc-grid,
.npc-home-card .npc-grid{ display:flex; flex-wrap:wrap; margin-left:-24px; }

.npc-home-spread .npc-grid > *,
.npc-home-file .npc-grid > *,
.npc-home-homevip .npc-grid > *,
.npc-home-card .npc-grid > *{ padding-left:24px; box-sizing:border-box; }

.npc-home-spread .npc-grid-medium,
.npc-home-file .npc-grid-medium,
.npc-home-homevip .npc-grid-medium,
.npc-home-card .npc-grid-medium{ margin-left:-24px; }

.npc-home-spread .npc-grid-medium > *,
.npc-home-file .npc-grid-medium > *,
.npc-home-homevip .npc-grid-medium > *,
.npc-home-card .npc-grid-medium > *{ padding-left:24px; }

/* 宽度工具类（仅用于 npc 相关模块） */
.npc-home-spread .npc-width-1-1,
.npc-home-file .npc-width-1-1,
.npc-home-homevip .npc-width-1-1,
.npc-home-card .npc-width-1-1{ width:100%; }

.npc-home-spread .npc-width-1-1,
.npc-home-file .npc-width-1-1,
.npc-home-homevip .npc-width-1-1,
.npc-home-card .npc-width-1-1,
.npc-home-spread .npc-width-1-2\@s,
.npc-home-file .npc-width-1-2\@s,
.npc-home-homevip .npc-width-1-2\@s,
.npc-home-card .npc-width-1-2\@s,
.npc-home-spread .npc-width-1-3\@s,
.npc-home-file .npc-width-1-3\@s,
.npc-home-homevip .npc-width-1-3\@s,
.npc-home-card .npc-width-1-3\@s{ box-sizing:border-box; }

@media (min-width:768px){
  .npc-home-spread .npc-width-1-2\@s,
  .npc-home-file .npc-width-1-2\@s,
  .npc-home-homevip .npc-width-1-2\@s,
  .npc-home-card .npc-width-1-2\@s{ width:50%; }

  .npc-home-spread .npc-width-1-3\@s,
  .npc-home-file .npc-width-1-3\@s,
  .npc-home-homevip .npc-width-1-3\@s,
  .npc-home-card .npc-width-1-3\@s{ width:33.3333%; }
}

.npc-text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============ 图文特色展示（npc_zibll_spread_widget） ============ */
.zib-widget.npc-home-spread{ padding-left:0!important; padding-right:0!important; }
.npc-home-spread .npc-home-spread-box.new-swiper{ overflow:hidden; }
.npc-home-spread .npc-home-spread-box .swiper-wrapper{ display:flex; }
.npc-home-spread .npc-home-spread-box .swiper-slide{ width:20%; box-sizing:border-box; padding:0 12px; }
.npc-home-spread .npc-home-spread-boxmk{ height:100%; background:#fff; border-radius:14px; padding:20px; text-align:center; box-shadow:0 8px 16px rgba(0,0,0,.05); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; will-change:transform; }
.npc-home-spread .npc-home-spread-boxmk img{ display:block; margin:0 auto; height:40px; width:auto!important; max-width:100%!important; max-height:40px!important; object-fit:contain!important; transition:transform .25s ease; }
.npc-home-spread .npc-home-spread-boxmk:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.npc-home-spread .npc-home-spread-boxmk:hover img{ transform:translateY(-6px); }
.npc-home-spread .npc-home-spread-boxmk > span{ margin-top:33px; font-size:16px; font-weight:bold; color:#0B1D30; display:block; }
.npc-home-spread .npc-home-spread-boxmk > p{ margin-top:25px; font-size:13px; font-weight:400; color:#757F92; line-height:22px; }
.npc-home-spread a{ text-decoration:none; }
@media (max-width:1024px){ .npc-home-spread .npc-home-spread-box .swiper-slide{ width:33.3333%; } }
@media (max-width:768px){ .npc-home-spread{ padding:60px 0; } .npc-home-spread .npc-home-title > span{ font-size:22px; } .npc-home-spread .npc-home-spread-box .swiper-slide{ width:100%; padding:0; } }
.npc-home-spread .new-swiper .swiper-slide img{ width:auto!important; height:auto!important; object-fit:contain!important; }

/* ==========================================================================
   首页卡片模块（npc_zibll_shop_widget）
   ========================================================================== */

.npc-home-card{ padding-top:60px; padding-bottom:100px; background:transparent; box-shadow:none; }

.npc-home-card .product-lists-row{ display:flex; flex-wrap:wrap; align-items:stretch; margin-left:-24px; }
.npc-home-card .product-lists-row > *{ padding-left:24px; box-sizing:border-box; width:100%; }
@media (min-width:768px){ .npc-home-card .product-lists-row > *{ width:33.3333%; } }

.npc-home-card .index-tab{ text-align:center; }
.npc-home-card .index-tab ul{ display:inline-flex; flex-wrap:wrap; gap:14px; margin:0 0 40px; padding:0; }
.npc-home-card .index-tab ul > li{ list-style:none; }
.npc-home-card .index-tab ul > li > a{ display:inline-block; padding:10px 18px; border-radius:4px; background:#f5f7fd; color:#333; font-size:14px; font-weight:600; transition:all .2s ease; border:none!important; outline:none!important; box-shadow:none!important; }
.npc-home-card .index-tab ul > li.active{ background:transparent!important; }
.npc-home-card .index-tab ul > li.active > a,
.npc-home-card .index-tab ul > li > a:hover{ background:var(--primary-color,#006fff); color:#fff; box-shadow:none!important; outline:none!important; }

.npc-home-card .tab-content{ width:100%; }

.npc-homecard-item{ background:#fff; border-radius:10px; box-shadow:0px 12px 21px 0px rgba(53,92,141,.11); overflow:hidden; transition:all .3s; }
.npc-homecard-item:hover{ box-shadow:0px 12px 21px 0px rgba(35,93,167,.18); transform:translateY(-3px); }
.npc-homecard-thumb{ position:relative; background:#f5f7fd; z-index:1; }
.npc-homecard-thumb-link{ display:block; aspect-ratio:4/3; overflow:hidden; }
.npc-homecard-thumb-link img,
.npc-homecard-thumb-link .npc-thumb-placeholder{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.npc-homecard-body{ margin:-28px 20px 20px; background:#fff; border-radius:10px; padding:22px 22px 18px; box-shadow:0px 12px 21px 0px rgba(53,92,141,.11); text-align:center; position:relative; z-index:2; }
.npc-homecard-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word; font-size:20px; font-weight:700; color:#242947; text-decoration:none; line-height:1.35; min-height:calc(1.35em * 2); }
.npc-homecard-title:hover{ color:var(--primary-color,#006fff); }
.npc-homecard-desc{ margin-top:14px; color:#aab3bf; font-size:14px; line-height:1.6; height:44px; overflow:hidden; }
.npc-homecard-actions{ margin-top:16px; }
.npc-homecard-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:14px; width:110px; height:33px; line-height:33px; border-radius:50px; background:var(--primary-color,#006fff); color:#fff; text-decoration:none; }
.npc-homecard-btn:hover{ box-shadow:0px 6px 16px 2px rgba(55,110,242,.49); }
@supports not (aspect-ratio:4/3){ .npc-homecard-thumb-link{ height:280px; } }
.npc-card-more{ margin-top:40px; }
.npc-card-more a{ display:block; width:200px; margin:0 auto; height:45px; line-height:45px; text-align:center; font-size:16px; color:#787878; font-weight:600; box-shadow:0px 12px 21px 0px rgba(53,92,141,.11); border:1px solid #f5f7fd; border-radius:4px; background:#fff; transition:all .3s linear; }
.npc-card-more a:hover{ color:#fff; border:1px solid var(--primary-color,#006fff); background:var(--primary-color,#006fff); width:260px; box-shadow:0px 6px 16px 2px rgba(55,110,242,.49); }
@media (max-width:768px){ .npc-home-card{ padding-bottom:60px; } .npc-homecard-body{ margin:-34px 14px 14px; padding:18px; } }

/* ========================================================================
   文档/教程模块（npc_zibll_file_widget）
   ======================================================================== */

.npc-home-file .npc-homefile-bg{ width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; }
.npc-home-file .npc-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
.npc-home-file-boxmk{ padding:20px; }
.npc-home-file-boxtop{ height:180px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.npc-home-file-boxtop a{ display:block; font-size:24px; color:#fff; text-decoration:none; }
.npc-home-file-boxmk li{ margin-top:16px; }
.npc-home-file-boxmk li .npc-flex{ display:flex; align-items:center; gap:12px; }
.npc-home-file-boxmk li a{ color:#888; font-size:14px; text-decoration:none; }
.npc-home-file-boxmk li span{ color:#999; font-size:13px; white-space:nowrap; }
.npc-home-file-boxbottom{ margin-top:18px; text-align:center; }
.npc-home-file-boxbottom a{ display:inline-block; padding:8px 26px; border:1px solid #2f74ff; color:#2f74ff; border-radius:4px; text-decoration:none; }


/* ========================================================================
   新商品详情页头部（WPCOM 风格）
   ======================================================================== */

.npc-shop-hero {
    padding: 50px 0;
    background-image: linear-gradient(135deg, var(--npc-hero-bg1, #4f62ff), var(--npc-hero-bg2, #2a8cff));
    color: #fff;
}

.npc-shop-hero .breadcrumbs {
    color: rgba(255,255,255,.8);
    margin-bottom: 40px;
}
.npc-shop-hero .breadcrumbs a {
    color: rgba(255,255,255,.8);
}
.npc-shop-hero .breadcrumbs a:hover {
    color: #fff;
}

.npc-shop-hero-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.npc-shop-hero-left {
    flex: 1;
    min-width: 0;
}

.npc-shop-hero-right {
    flex: 0 0 50%;
    max-width: 50%;
}

.npc-shop-hero-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 20px;
}

.npc-shop-hero-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,.8);
    margin-bottom: 30px;
}

/* 购买区样式覆盖 */
.npc-shop-buybox .product-pay-box {
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.2);
}
.npc-shop-buybox .product-pay-box .price-box .price-con .price {
    color: #fff;
}
.npc-shop-buybox .product-pay-box .price-box .original-price {
    color: rgba(255,255,255,.7);
}
.npc-shop-buybox .product-pay-box .product-select-box .title {
    color: #fff;
}

/* 移动端 */
@media (max-width: 768px) {
    .npc-shop-hero-inner {
        flex-direction: column;
    }
    .npc-shop-hero-right {
        flex: 0 0 100%;
        max-width: 100%;
        order: -1;
    }
    .npc-shop-hero-title { font-size: 28px; }
}