/*
 * laolicms 官网与授权中心 v1.0.0
 * 作者：丿king　　联系 QQ：1735737677
 * 本文件作用：官网商品页专属样式 —— 只补 web.css 没有的组件（大首屏与承诺卡、频道入口带、大节标题、能力清单、
 *            服务带与底部行动条、首屏按钮反白、封面占位、授权等级五列与对比表、详情预览图、文档目录树、公告与单页版式），
 *            全站通用类一律沿用 web.css 的 w- 组件，不重复定义
 * 使用方式：页面模板在 {include head} 之后 link 本文件
 * 文件路径：web/template/laoli/public/pc/css/web_shop.css
 */

/* ---------- 首屏：左文案 + 右功能卡 ---------- */
.w-hero{position:relative;overflow:hidden;color:#fff;padding:72px 0 62px;
    background:linear-gradient(118deg,#1d3468 0%,#2f6bff 52%,#4f86ff 100%);}
.w-hero-bg{position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(620px 320px at 88% 8%,rgba(255,255,255,.20),transparent 62%),
        radial-gradient(520px 300px at 6% 96%,rgba(11,32,78,.42),transparent 66%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 76px);}
.w-hero-in{position:relative;z-index:1;display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.w-hero-l{flex:1 1 460px;min-width:0;}
.w-hero-r{flex:0 0 342px;width:342px;}
.w-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:16px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);font-size:13px;color:#eaf0ff;}
.w-hero h1{margin-top:18px;font-size:46px;line-height:1.24;font-weight:800;letter-spacing:.5px;}
/* web.css 的 .w-hero p 会盖掉单类名，这里用两级选择器确保首屏自己的排版生效 */
.w-hero .w-hero-lead{margin:14px 0 0;font-size:17px;line-height:1.85;color:rgba(255,255,255,.86);max-width:640px;}
.w-hero-act{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.w-hero-stat{gap:14px 34px;margin-top:34px;}
.w-hero-stat b{font-size:30px;}
.w-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.w-hero-tags span{padding:3px 11px;border-radius:14px;background:rgba(255,255,255,.15);font-size:13px;color:rgba(255,255,255,.9);}
.w-hero-form{display:flex;align-items:center;margin-top:26px;background:var(--w-white);border-radius:26px;overflow:hidden;
    max-width:520px;box-shadow:0 10px 26px rgba(11,32,78,.22);}
.w-hero-form select{flex:none;border:0;outline:0;background:transparent;padding:0 4px 0 14px;
    font-size:13px;color:var(--w-text-2);font-family:inherit;cursor:pointer;}
.w-hero-form input{flex:1 1 auto;min-width:0;border:0;outline:0;padding:12px 12px;font-size:14px;color:var(--w-text);background:transparent;}
.w-hero-form button{flex:none;border:0;background:var(--w-primary);color:#fff;padding:0 24px;height:48px;cursor:pointer;font-size:15px;}
.w-hero-form button:hover{background:var(--w-primary-dark);}
.w-hero-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:12px;
    padding:20px 22px;box-shadow:0 14px 34px rgba(11,32,78,.20);}
.w-hero-card h3{font-size:17px;font-weight:700;color:#fff;}
.w-hero-card li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:13px;line-height:1.7;color:rgba(255,255,255,.88);}
.w-hero-card li i{margin-top:4px;color:#ffd683;}
.w-hero-card li b{color:#fff;}
.w-hero-foot-note{margin-top:14px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.26);
    font-size:12px;color:rgba(255,255,255,.8);}

/* 首屏按钮的三种反白样式 */
.w-btn-glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30);color:#fff;}
.w-btn-glass:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.44);color:#fff;}
.w-btn-plain2{background:transparent;border-color:rgba(255,255,255,.42);color:#fff;}
.w-btn-plain2:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
.w-btn-white{background:var(--w-white);border-color:var(--w-white);color:var(--w-primary);}
.w-btn-white:hover{background:var(--w-primary-soft);border-color:var(--w-primary-soft);color:var(--w-primary-dark);}

/* ---------- 频道入口带 ---------- */
.w-chan-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px;}
.w-chan-big{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:var(--w-radius);
    background:var(--w-white);box-shadow:var(--w-shadow);transition:.18s;}
.w-chan-big:hover{box-shadow:var(--w-shadow-h);transform:translateY(-3px);}
.w-chan-big>i{flex:none;width:50px;height:50px;line-height:50px;text-align:center;border-radius:13px;
    background:var(--w-primary-soft);color:var(--w-primary);font-size:22px;}
.w-chan-big-t{flex:1 1 auto;min-width:0;}
.w-chan-big-t b{display:block;font-size:18px;font-weight:700;}
.w-chan-big-t span{display:block;margin-top:3px;font-size:13px;color:var(--w-text-3);}
.w-chan-big-n{flex:none;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--w-primary);font-weight:600;}
.w-chan-big-n i{font-size:12px;transition:.18s;}
.w-chan-big:hover .w-chan-big-n i{transform:translateX(4px);}

/* ---------- 大节标题 ---------- */
.w-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:38px 0 18px;}
.w-sec-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:2.4px;color:#c2cdea;margin-bottom:2px;}
.w-sec-hd h2{font-size:25px;font-weight:800;line-height:1.35;}
.w-sec-hd h2 i{color:var(--w-primary);margin-right:9px;font-size:21px;}
.w-sec-note{margin-top:7px;font-size:13px;color:var(--w-text-3);max-width:760px;}
.w-sec-hd .w-panel-more{flex:none;padding-bottom:4px;font-size:14px;}
.w-list-pad li{padding:12px 18px;border-bottom:1px dashed var(--w-line);}
.w-list-pad li:last-child{border-bottom:0;}

/* ---------- 能力清单 ---------- */
.w-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.w-why-item{padding:20px 22px;background:var(--w-white);border:1px solid var(--w-line);border-radius:var(--w-radius);transition:.18s;}
.w-why-item:hover{border-color:#cfdcff;box-shadow:var(--w-shadow-h);transform:translateY(-2px);}
.w-why-item i{display:block;margin-bottom:11px;width:40px;height:40px;line-height:40px;text-align:center;
    border-radius:11px;background:var(--w-primary-soft);color:var(--w-primary);font-size:18px;}
.w-why-item b{display:block;font-size:16px;font-weight:700;}
.w-why-item span{display:block;margin-top:6px;font-size:13px;line-height:1.85;color:var(--w-text-2);}

/* ---------- 服务带 ---------- */
.w-support{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.w-support-card{padding:20px 22px;background:var(--w-white);border-radius:var(--w-radius);box-shadow:var(--w-shadow);}
.w-support-card h3{font-size:16px;font-weight:700;margin-bottom:14px;}
.w-support-card h3 i{color:var(--w-primary);margin-right:7px;}
.w-support-wide{grid-column:1/-1;}
.w-support-wide .w-btn-group{margin-top:16px;}

/* ---------- 底部行动条 ---------- */
.w-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    margin-top:38px;padding:30px 34px;border-radius:12px;color:#fff;
    background:linear-gradient(112deg,#22375f 0%,#2f6bff 100%);}
.w-cta-t b{display:block;font-size:22px;font-weight:800;}
.w-cta-t span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.84);}
.w-cta-act{display:flex;gap:12px;flex-wrap:wrap;}

/* 公告条（站点设置 notice 有内容时才出现） */
.w-notice-bar{display:flex;gap:9px;align-items:center;background:#fff8e6;color:#8a5f06;font-size:13px;
    padding:9px 14px;border-radius:var(--w-radius);margin-bottom:16px;}
.w-notice-bar a{color:#8a5f06;text-decoration:underline;}

/* ---------- 封面占位：没有图时用首字母 + 图标兜底 ---------- */
.w-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
    min-height:110px;background:linear-gradient(135deg,#e7eeff 0%,#f6f8ff 100%);color:var(--w-primary);}
.w-ph i{font-size:24px;opacity:.6;}
.w-ph b{font-size:26px;font-weight:800;line-height:1;}
.w-ph span{font-size:12px;color:var(--w-text-3);}
.w-ph-side{min-height:56px;}
.w-ph-side i{font-size:16px;}
.w-ph-side b{font-size:18px;}
.w-prod-cover .w-ph{min-height:220px;border-radius:var(--w-radius);}
.w-prod-cover .w-ph i{font-size:36px;}
.w-prod-cover .w-ph b{font-size:42px;}

/* ---------- 频道分区 ---------- */
.w-chan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.w-chan .w-sub{font-weight:400;}
.w-chan-note{margin:-6px 0 14px;font-size:13px;color:var(--w-text-3);}
.w-sec-title .w-sort{margin-left:auto;}

/* ---------- 卡片补充 ---------- */
.w-grid>.w-empty,.w-plan-list>.w-empty,.w-doc-cat>.w-empty{grid-column:1/-1;}
.w-card-side .w-card-bd{flex:1 1 auto;min-width:0;padding:0;}
.w-card-side .w-card-title{display:block;line-height:1.5;}
.w-card-side .w-card-meta{margin-top:4px;}
.w-card-img .w-badge{z-index:2;}
.w-card-foot .w-price{max-width:60%;}

/* ---------- 授权等级：五列与对比表 ---------- */
.w-plan-list.w-plan-5{grid-template-columns:repeat(5,1fr);}
.w-plan.is-best{border-color:var(--w-primary);background:#fbfcff;}
.w-plan-name{padding-right:58px;}
.w-plan .w-plan-tag{max-width:62px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.w-plan-price .w-price{font-size:20px;}
.w-plan-price em{font-style:normal;font-size:12px;color:var(--w-text-3);margin-left:4px;}
.w-plan-lines{margin-top:8px;padding-top:8px;border-top:1px dashed var(--w-line);font-size:12px;color:var(--w-text-3);line-height:1.9;}
.w-plan-act{margin-top:10px;}
.w-rate{font-size:13px;color:var(--w-price);font-weight:700;}
.w-table-scroll{overflow-x:auto;}
.w-table.w-plan-table td{text-align:center;}
.w-table.w-plan-table th:first-child,.w-table.w-plan-table td:first-child{text-align:left;white-space:nowrap;}
.w-table .w-cell-name{display:block;font-weight:600;color:var(--w-text);}
.w-yes{color:var(--w-ok);}
.w-no{color:var(--w-text-3);}

/* ---------- 商品详情 ---------- */
.w-prod-tag{display:inline-flex;vertical-align:middle;margin-left:8px;}
.w-prod-meta li{display:flex;align-items:baseline;gap:6px;}
.w-prod-meta li span{color:var(--w-text-3);}
.w-prod-meta li b{color:var(--w-text-2);font-weight:600;}
.w-prod-meta img{height:24px;border-radius:4px;}
.w-prod-price .w-price-note{font-size:13px;color:var(--w-text-3);}
.w-prod-buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.w-prod-info .w-plan-list{grid-template-columns:repeat(2,1fr);}
.w-prod-buy form{display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.w-prod-tail{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding-top:14px;
    border-top:1px dashed var(--w-line);font-size:13px;color:var(--w-text-3);}
.w-prod-side-plan{padding:2px 0 0;}
.w-shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.w-shot-grid .w-shot{border:1px solid var(--w-line);}
.w-plain{font-size:15px;line-height:1.95;color:var(--w-text);}
.w-feat-line{font-size:14px;line-height:2;color:var(--w-text-2);}

/* 上下篇 */
.w-pre-next{display:flex;gap:14px;flex-wrap:wrap;}
.w-pre-next-item{flex:1 1 260px;min-width:0;display:block;padding:12px 15px;border:1px solid var(--w-line);
    border-radius:var(--w-radius);background:var(--w-white);transition:.16s;}
.w-pre-next-item:hover{border-color:var(--w-primary);box-shadow:var(--w-shadow);}
.w-pre-next-item span{display:block;font-size:12px;color:var(--w-text-3);}
.w-pre-next-item b{display:block;margin-top:4px;font-size:14px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.w-pre-next-item.is-off b{color:var(--w-text-3);font-weight:400;}
.w-pre-next-item.is-next{text-align:right;}

/* ---------- 侧栏通用块 ---------- */
.w-side-kefu{display:flex;flex-direction:column;gap:10px;}
.w-side-kefu a{display:flex;align-items:center;gap:9px;}
.w-side-kefu i{width:30px;height:30px;line-height:30px;text-align:center;border-radius:8px;
    background:var(--w-primary-soft);color:var(--w-primary);}
.w-steps-side{flex-direction:column;}
.w-steps-side .w-step{flex:none;width:100%;}
.w-steps-side .w-step b i{color:var(--w-primary);margin-right:5px;}
.w-side-cats a{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 0;border-bottom:1px dashed var(--w-line);font-size:14px;}
.w-side-cats a:last-child{border-bottom:0;}
.w-side-cats a span{color:var(--w-text-3);font-size:12px;}

/* ---------- 搜索页 ---------- */
.w-search-res{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:14px;font-size:14px;color:var(--w-text-2);}
.w-search-res b{color:var(--w-price);}
.w-chan-switch{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------- 文档 ---------- */
.w-doc-g{margin-bottom:12px;}
.w-doc-g h5{font-size:13px;font-weight:700;color:var(--w-text-3);padding:4px 13px;letter-spacing:.5px;}
.w-doc-side .w-doc-g a{padding-left:20px;font-size:13px;}
.w-doc-side-box{background:var(--w-white);border-radius:var(--w-radius);box-shadow:var(--w-shadow);
    padding:12px 0 14px;overflow:hidden;}
.w-doc-hd{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:14px;}
.w-doc-info{font-size:13px;color:var(--w-text-3);}
.w-doc-text h1{font-size:26px;line-height:1.4;margin:0 0 12px;}
.w-doc-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

/* ---------- 公告 ---------- */
.w-notice-item{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-bottom:1px solid var(--w-line);}
.w-notice-item:last-child{border-bottom:0;}
.w-notice-main{flex:1 1 auto;min-width:0;}
.w-notice-title{font-size:16px;font-weight:600;}
.w-notice-meta{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:5px;font-size:12px;color:var(--w-text-3);}
.w-notice-side{flex:none;text-align:right;font-size:12px;color:var(--w-text-3);}

/* ---------- 单页 ---------- */
.w-page-hd{padding:20px 24px 4px;}
.w-page-hd h1{font-size:24px;font-weight:700;}
.w-page-hd p{margin:8px 0 0;font-size:13px;color:var(--w-text-3);}

/* ---------- 详情页字段表（view.html / doc.html） ---------- */
.w-prod-meta-col{display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:#fafbfd;
    border:1px solid var(--w-line);border-radius:6px;}
.w-prod-meta-col li{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.9;word-break:break-all;}
.w-prod-meta-col li span{flex:none;min-width:82px;color:var(--w-text-3);}
.w-prod-meta-col li img{height:26px;border-radius:4px;}

/* ---------- 文档树 ---------- */
.w-doc-side .w-doc-g h5 a{color:var(--w-text-3);}
.w-doc-side .w-doc-g h5 a:hover{color:var(--w-primary);}
.w-doc-side .w-doc-g a.on{border-left-color:var(--w-primary);color:var(--w-primary);background:var(--w-primary-soft);font-weight:600;}
.w-doc-search{padding:0 12px 12px;}
.w-doc-search .w-search input{flex:1 1 auto;width:auto;min-width:0;}
.w-doc-sec{margin:0 0 22px;}
.w-doc-sec .w-tile b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- 搜索结果行 ---------- */
.w-search-item{display:flex;gap:11px;align-items:flex-start;padding:15px 18px;border-bottom:1px dashed var(--w-line);}
.w-search-item:last-child{border-bottom:0;}
.w-search-item .w-search-num{flex:none;width:22px;height:22px;line-height:22px;text-align:center;margin-top:2px;
    border-radius:5px;background:#f0f2f5;color:var(--w-text-3);font-size:12px;}
.w-search-item .w-search-bd{flex:1 1 auto;min-width:0;}
.w-search-item .w-search-title{display:block;font-size:16px;font-weight:600;}
.w-search-item .w-search-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:4px;font-size:13px;color:var(--w-text-3);}
.w-search-item .w-search-keys{display:inline;}
.w-search-item .w-search-keys b{color:var(--w-price);font-weight:600;}

/* ---------- 单页 / 公告侧栏高亮 ---------- */
.w-side-cats a.on{color:var(--w-primary);font-weight:600;}
.w-notice-text{font-size:15px;}

/* ---------- 文档口令页（doc_lock.html） ---------- */
.w-lock-box .w-panel-bd{padding:44px 24px;}
.w-lock{max-width:580px;margin:0 auto;text-align:center;}
.w-lock-ico{width:64px;height:64px;margin:0 auto 16px;line-height:64px;border-radius:50%;
    background:var(--w-primary-soft);color:var(--w-primary);font-size:26px;}
.w-lock h1{font-size:24px;font-weight:700;line-height:1.4;margin:0 0 8px;word-break:break-all;}
.w-lock-lead{margin:0 0 24px;font-size:14px;line-height:1.8;color:var(--w-text-2);}
.w-lock-form{text-align:left;}
.w-lock .w-btn-group,.w-lock .w-alert{text-align:left;}
.w-lock .w-alert a{margin-right:8px;}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
    .w-hero h1{font-size:40px;}
    .w-hero-r{flex:0 0 320px;width:320px;}
}
@media (max-width:1000px){
    .w-plan-list.w-plan-5{grid-template-columns:repeat(3,1fr);}
    .w-hero{padding:52px 0 46px;}
    .w-hero h1{font-size:34px;}
    .w-hero-r{flex:1 1 100%;width:auto;}
    .w-doc-cat{grid-template-columns:repeat(2,1fr);}
    .w-why{grid-template-columns:repeat(2,1fr);}
    .w-chan-band{grid-template-columns:repeat(2,1fr);}
    .w-chan-band .w-chan-big:last-child{grid-column:1/-1;}
}
@media (max-width:860px){
    .w-shot-grid{grid-template-columns:repeat(2,1fr);}
    .w-doc-side-box{padding:8px 0 10px;}
    .w-prod-meta-col li{flex-wrap:wrap;}
    .w-prod-meta-col li span{min-width:100%;}
    .w-sec-hd{margin:28px 0 16px;}
    .w-sec-hd h2{font-size:22px;}
    .w-support{grid-template-columns:1fr;}
    .w-cta{padding:24px 22px;}
    .w-cta-t b{font-size:19px;}
}
@media (max-width:520px){
    .w-search-item{padding:13px 14px;}
    .w-prod-info .w-plan-list{grid-template-columns:1fr;}
    .w-plan-list.w-plan-5{grid-template-columns:1fr;}
    .w-doc-cat,.w-shot-grid{grid-template-columns:1fr;}
    .w-hero-form select{display:none;}
    .w-notice-item{flex-direction:column;}
    .w-notice-side{text-align:left;}
    .w-pre-next-item.is-next{text-align:left;}
    .w-hero{padding:34px 0 32px;}
    .w-hero h1{font-size:27px;letter-spacing:0;}
    .w-hero .w-hero-lead{font-size:15px;}
    .w-hero-act .w-btn{flex:1 1 auto;}
    .w-hero-stat{gap:10px 22px;}
    .w-hero-stat b{font-size:23px;}
    .w-hero-card{padding:16px 17px;}
    .w-chan-band,.w-why{grid-template-columns:1fr;}
    .w-chan-band .w-chan-big:last-child{grid-column:auto;}
    .w-chan-big{padding:16px 18px;}
    .w-sec-hd{display:block;}
    .w-sec-hd .w-panel-more{display:inline-block;margin-top:8px;padding:0;}
    .w-cta{flex-direction:column;align-items:stretch;}
    .w-cta-act .w-btn{flex:1 1 auto;}
    .w-lock-box .w-panel-bd{padding:26px 16px;}
    .w-lock h1{font-size:19px;}
    .w-lock-lead{margin-bottom:18px;}
    .w-lock .w-btn-group .w-btn{flex:1 1 auto;}
}