/* ============================================================
   CERYE 产品广场 (catalog.css) — 东方香氛克制风,复用 site.css 变量
   统一卡片矩阵 + 7维筛选 + 搜索 + 询价清单 + 详情弹窗
   双语:.zh/.en span 显隐(随 body[data-lang] 切换,无需重渲染)
   ============================================================ */

/* —— 产品广场布局:更宽容器 + 左栏筛选 / 右栏产品 —— */
body{background:var(--paper)} /* 全站 body 默认深绿,本页两栏区无 section 遮底,需自铺浅底,否则筛选深字看不见 */
.products-shell{width:min(calc(100vw - 282px),1560px);margin:0 auto;padding:0 18px 40px} /* 100vw 需扣除 252px 固定左导航,否则右列被裁半 */
.products-page{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.products-sidebar{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow-y:auto;
  padding-right:4px;scrollbar-width:thin}
.products-sidebar::-webkit-scrollbar{width:6px}
.products-sidebar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.products-main{min-width:0}

/* —— 侧栏顶部 VSCP 母库入口 —— */
.cat-libnav{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cln-hd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:11px}
.cln-grid{display:flex;flex-direction:column;gap:7px}
.cln-card{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--card);
  border:1px solid var(--line);transition:.25s var(--ease);text-decoration:none}
.cln-card:hover{border-color:var(--ink-faint);background:var(--paper-lt)}
.cln-card.on{border-color:var(--g700);background:linear-gradient(150deg,var(--card),var(--paper2))}
.cln-card.on .cln-ic{background:var(--g700);color:var(--paper-lt)}
.cln-ic{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--en);font-size:15px;color:var(--g500);background:var(--line2);border-radius:50%;transition:.25s var(--ease)}
.cln-ic:hover{background:var(--g700);color:var(--paper-lt)}
.cln-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cln-tx b{font-family:var(--cn);font-weight:500;font-size:13px;color:var(--ink)}
.cln-tx i{font-family:var(--mono);font-size:9px;font-style:normal;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px}

/* —— 侧栏折叠开关(移动端) —— */
.cat-side-toggle{display:none;width:100%;align-items:center;gap:8px;font:inherit;font-family:var(--cn);
  font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);
  padding:12px 16px;cursor:pointer;margin-bottom:14px;transition:.25s var(--ease)}
.cat-side-toggle:hover{border-color:var(--ink-faint)}
.cat-side-toggle .cst-arr{margin-left:auto;font-size:11px;color:var(--ink-faint);transition:transform .25s var(--ease)}

/* —— 主区:主题系列快捷筛选条 —— */
.cat-seriesbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 0 4px}
.csb-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin-right:6px;flex-shrink:0}

/* —— 顶部 hero —— */
.cat-hero{padding:14px 0 26px;border-bottom:1px solid var(--line)}
.cat-hero .pk{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g500)}
.cat-hero h1{font-family:var(--cn);font-weight:600;font-size:clamp(30px,5vw,46px);letter-spacing:.02em;color:var(--ink);margin:14px 0 12px;line-height:1.15}
.cat-hero .csub{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:640px;margin:0 0 26px}
.cat-search-wrap{position:relative;max-width:520px}
.cat-search{font:inherit;font-family:var(--cn);font-size:15px;color:var(--ink);background:var(--paper-lt);
  border:1px solid var(--line);padding:14px 44px 14px 18px;width:100%;letter-spacing:.02em;transition:.3s var(--ease)}
.cat-search:focus{outline:none;border-color:var(--g500);background:var(--card)}
.cat-search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;
  font-size:18px;color:var(--ink-faint);line-height:1;display:none}
.cat-search-clear.on{display:block}
.cat-search-clear:hover{color:var(--ink)}

/* —— 筛选器(侧栏竖向分组) —— */
.cat-filters{padding:0}
.cfgroup{display:block;padding:13px 0;border-bottom:1px solid var(--line2)}
.cfgroup:last-child{border-bottom:none}
.cfl{display:block;font-family:var(--cn);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:var(--ink);margin-bottom:9px}
.cfchips{display:flex;flex-wrap:wrap;gap:7px}
.cchip{font:inherit;cursor:pointer;border:1px solid var(--line2);background:var(--paper);color:var(--ink);
  padding:6px 14px;border-radius:40px;font-size:12.5px;letter-spacing:.02em;transition:.25s var(--ease)}
.cchip:hover{color:var(--ink);border-color:var(--ink-faint)}
.cchip.on{background:var(--g700);border-color:var(--g700);color:var(--paper-lt)}

/* —— 结果条 —— */
.cat-resbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:20px 0 16px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 30px}
.cat-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.cat-count .ccnt{color:var(--brand);font-size:15px;font-weight:500}
.cat-active{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.cat-active .ctag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);padding:4px 9px 4px 11px;border-radius:30px}
.cat-active .ctag b{font-weight:400;color:var(--ink-faint);font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.cat-active .ctag i{cursor:pointer;font-style:normal;color:var(--ink-faint);font-size:14px;line-height:1}
.cat-active .ctag i:hover{color:var(--ink)}
.cat-clear{font:inherit;cursor:pointer;border:none;background:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;flex-shrink:0}
.cat-clear:hover{color:var(--ink)}

/* —— 卡片矩阵(铺满右侧,桌面 4-5 列) —— */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 22px}
.cat-empty{grid-column:1/-1;color:var(--ink-soft);font-size:15px;padding:50px 0;text-align:center}
.cc{display:flex;flex-direction:column;background:var(--paper-lt);border:1px solid transparent;cursor:pointer;
  transition:border-color .4s,box-shadow .4s,transform .4s}
.cc:hover{border-color:var(--line2);box-shadow:0 26px 54px -38px rgba(27,36,26,.5);transform:translateY(-2px)}
.cc-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.cc-img img{width:100%;height:100%;object-fit:contain;display:block;padding:7%;transition:transform 1.1s var(--ease)}
.cc:hover .cc-img img{transform:scale(1.05)}
.cc-ctype{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  background:rgba(24,33,25,.82);color:var(--paper-lt);padding:3px 9px;border-radius:30px}
.cc-bd{display:flex;flex-direction:column;gap:6px;padding:15px 14px 16px;flex:1}
.cc-name{font-family:var(--cn);font-weight:500;font-size:15.5px;letter-spacing:.02em;color:var(--ink);line-height:1.35}
.cc-name .en{font-family:var(--cn);font-weight:500}
.cc-meta{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:1px}
.cc-meta .m-sep{color:var(--ink-faint)}
.cc-series{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--g500)}
.cc-audience{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--ink-soft);line-height:1.45;margin-top:1px}
.ca-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  flex-shrink:0;background:var(--line2);padding:1px 5px;border-radius:2px}
.cc-deliv{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--brand);opacity:.92}
.cc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.cc-tags span{font-size:9px;letter-spacing:.03em;color:var(--ink-soft);border:1px solid var(--line);padding:2px 8px;border-radius:30px}
.cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto;padding-top:12px}
.cc-btns .cb{flex:1;text-align:center;font-family:var(--cn);font-size:11.5px;letter-spacing:.02em;
  padding:9px 4px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-soft);transition:.25s var(--ease)}
.cc-btns .cb:hover{color:var(--ink);border-color:var(--ink-faint)}
.cc-btns .cb-1{background:var(--g700);color:var(--paper-lt);border-color:var(--g700)}
.cc-btns .cb-1:hover{background:var(--g900);border-color:var(--g900);color:var(--paper-lt)}
.cc-btns .cb-cart.in{background:var(--brand);border-color:var(--brand);color:var(--paper-lt)}
.cc-btns .cb-cart.in:hover{background:var(--brand-d);border-color:var(--brand-d);color:var(--paper-lt)}

/* —— 母库入口卡 —— */
.cc-lib{background:linear-gradient(150deg,var(--card),var(--paper2))}
.cc-lib .cc-img{background:linear-gradient(150deg,var(--g700),var(--g900))}
.cc-lib .cc-img .cc-libicon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-size:54px;color:var(--g200);opacity:.5}
.cc-lib .cc-libno{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;color:var(--paper-lt);opacity:.8}

/* —— 加载更多 —— */
.cat-more-wrap{display:flex;justify-content:center;padding:42px 0 6px}
.cat-more{font:inherit;cursor:pointer;font-family:var(--cn);font-size:14px;letter-spacing:.04em;color:var(--ink);
  background:none;border:1px solid var(--ink-faint);padding:13px 40px;transition:.3s var(--ease)}
.cat-more:hover{background:var(--g700);border-color:var(--g700);color:var(--paper-lt)}

/* —— 询价清单浮标 + 面板 —— */
.cart-fab{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;align-items:center;gap:9px;
  background:var(--g900);color:var(--paper-lt);border:none;cursor:pointer;padding:14px 22px;border-radius:48px;
  font-family:var(--cn);font-size:14px;letter-spacing:.03em;box-shadow:0 18px 40px -16px rgba(15,22,15,.6);
  transition:.3s var(--ease);transform:translateY(0)}
.cart-fab:hover{background:var(--g950)}
.cart-fab[hidden]{display:none}
.cart-fab .cart-num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:20px;background:var(--brand);color:var(--g950);font-family:var(--mono);font-size:12px;font-weight:600}
.cart-panel{position:fixed;right:0;top:0;bottom:0;width:min(380px,90vw);z-index:260;background:var(--paper-lt);
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .42s var(--ease);
  display:flex;flex-direction:column}
.cart-panel.on{transform:translateX(0)}
.cart-ov{position:fixed;inset:0;z-index:250;background:rgba(24,33,25,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.cart-ov.on{opacity:1;pointer-events:auto}
.cart-hd{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 18px;border-bottom:1px solid var(--line)}
.cart-hd h3{font-family:var(--cn);font-weight:600;font-size:18px;color:var(--ink);margin:0}
.cart-hd .cart-x{border:none;background:none;cursor:pointer;font-size:20px;color:var(--ink-soft);line-height:1}
.cart-hd .cart-x:hover{color:var(--ink)}
.cart-list{flex:1;overflow-y:auto;padding:8px 0}
.cart-empty{color:var(--ink-faint);font-size:14px;text-align:center;padding:50px 24px;line-height:1.7}
.cart-item{display:flex;align-items:center;gap:12px;padding:13px 24px;border-bottom:1px solid var(--line2)}
.cart-item .ci-name{flex:1;font-family:var(--cn);font-size:14px;color:var(--ink);line-height:1.4}
.cart-item .ci-src{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-faint);margin-top:3px;text-transform:uppercase}
.cart-item .ci-rm{border:none;background:none;cursor:pointer;font-size:16px;color:var(--ink-faint);line-height:1;flex-shrink:0}
.cart-item .ci-rm:hover{color:#a4453a}
.cart-ft{padding:18px 24px 24px;border-top:1px solid var(--line)}
.cart-submit{display:block;width:100%;text-align:center;font-family:var(--cn);font-size:15px;letter-spacing:.04em;
  background:var(--g900);color:var(--paper-lt);border:none;cursor:pointer;padding:15px;transition:.3s var(--ease)}
.cart-submit:hover{background:var(--g950)}
.cart-submit[disabled]{opacity:.4;cursor:not-allowed}
.cart-clearall{display:block;width:100%;text-align:center;font:inherit;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-faint);background:none;border:none;cursor:pointer;margin-top:12px;
  text-decoration:underline;text-underline-offset:3px}
.cart-clearall:hover{color:var(--ink)}

/* —— 详情弹窗 —— */
.cmodal{position:fixed;inset:0;z-index:300;display:none}
.cmodal.on{display:block}
.cmodal-ov{position:absolute;inset:0;background:rgba(24,33,25,.46);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cmodal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,93vw);max-height:90vh;
  overflow-y:auto;background:var(--paper-lt);display:grid;grid-template-columns:1fr 1fr;box-shadow:0 50px 120px -40px rgba(0,0,0,.6)}
.cmodal-x{position:absolute;right:14px;top:14px;z-index:2;border:none;background:none;cursor:pointer;font-size:18px;color:var(--ink-soft);line-height:1}
.cmodal-x:hover{color:var(--ink)}
.cmodal-img{background:#fff;display:flex;align-items:center;justify-content:center;min-height:340px}
.cmodal-img img{width:100%;height:100%;object-fit:contain;padding:8%}
.cmodal-info{padding:40px 38px 34px;display:flex;flex-direction:column}
.cm-ctype{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.cm-name{font-family:var(--cn);font-weight:600;font-size:23px;color:var(--ink);margin:9px 0 6px;line-height:1.25}
.cm-en{font-family:var(--en);font-size:14px;color:var(--ink-faint);margin-bottom:18px}
.cm-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cm-row{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.cm-k{flex:0 0 84px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px}
.cm-v{color:var(--ink);line-height:1.55}
.cm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.cm-btns .cb{text-align:center;font-family:var(--cn);font-size:13px;padding:12px 8px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--ink-soft);transition:.25s var(--ease)}
.cm-btns .cb:hover{color:var(--ink);border-color:var(--ink-faint)}
.cm-btns .cb-1{background:var(--g700);color:var(--paper-lt);border-color:var(--g700)}
.cm-btns .cb-1:hover{background:var(--g900);border-color:var(--g900);color:var(--paper-lt)}
.cm-btns .cb-cart.in{background:var(--brand);border-color:var(--brand);color:var(--paper-lt)}

/* —— 辅助入口 —— */
.cat-help{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:54px 0 10px}
.cat-help a{display:block;padding:26px 24px;background:var(--card);border:1px solid var(--line);transition:.3s var(--ease)}
.cat-help a:hover{border-color:var(--ink-faint);background:var(--paper-lt)}
.cat-help h4{font-family:var(--cn);font-weight:600;font-size:16px;color:var(--ink);margin:0 0 8px}
.cat-help p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0}
.cat-help .ch-arr{font-family:var(--en);font-size:13px;color:var(--g500);margin-top:12px;display:block}

/* —— toast —— */
.cat-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(16px);z-index:280;
  background:var(--g950);color:var(--paper-lt);font-family:var(--cn);font-size:13.5px;letter-spacing:.03em;
  padding:11px 22px;border-radius:40px;opacity:0;pointer-events:none;transition:.3s var(--ease);box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.cat-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* —— 双语 .zh/.en (动态卡片用 span 显隐) —— */
.cc .en,.cchip .en,.cfl .en,.cat-count .en,.cat-empty .en,.cc-deliv .en,.cc-ctype .en,
.cmodal .en,.cart-panel .en,.cart-fab .en,.cat-toast .en,.cat-help .en,.ctag .en,
.cat-libnav .en,.csb-lbl .en,.cat-side-toggle .en{display:none}
body[data-lang="en"] .cc .zh,body[data-lang="en"] .cchip .zh,body[data-lang="en"] .cfl .zh,
body[data-lang="en"] .cat-count .zh,body[data-lang="en"] .cat-empty .zh,body[data-lang="en"] .cc-deliv .zh,
body[data-lang="en"] .cc-ctype .zh,body[data-lang="en"] .cmodal .zh,body[data-lang="en"] .cart-panel .zh,
body[data-lang="en"] .cart-fab .zh,body[data-lang="en"] .cat-toast .zh,body[data-lang="en"] .cat-help .zh,body[data-lang="en"] .ctag .zh,
body[data-lang="en"] .cat-libnav .zh,body[data-lang="en"] .csb-lbl .zh,body[data-lang="en"] .cat-side-toggle .zh{display:none}
body[data-lang="en"] .cc .en,body[data-lang="en"] .cchip .en,body[data-lang="en"] .cfl .en,
body[data-lang="en"] .cat-count .en,body[data-lang="en"] .cat-empty .en,body[data-lang="en"] .cc-deliv .en,
body[data-lang="en"] .cc-ctype .en,body[data-lang="en"] .cmodal .en,body[data-lang="en"] .cart-panel .en,
body[data-lang="en"] .cart-fab .en,body[data-lang="en"] .cat-toast .en,body[data-lang="en"] .cat-help .en,body[data-lang="en"] .ctag .en,
body[data-lang="en"] .cat-libnav .en,body[data-lang="en"] .csb-lbl .en,body[data-lang="en"] .cat-side-toggle .en{display:inline}
body[data-lang="en"] .cc-name .zh,body[data-lang="en"] .cm-name .zh{display:none}
body[data-lang="en"] .cc-name .en,body[data-lang="en"] .cm-name .en{display:inline}

/* —— 中等宽度:略收窄左栏 —— */
@media(max-width:1180px){
  .products-page{grid-template-columns:220px minmax(0,1fr);gap:20px}
}

/* —— ≤900:左栏塌成顶部可折叠 —— */
@media(max-width:900px){
  .products-shell{width:100%;padding:0 22px 36px}
  .products-page{display:block}
  .products-sidebar{position:static;max-height:none;overflow:visible;margin-bottom:24px;padding-right:0}
  .cat-side-toggle{display:flex}
  /* 折叠态:默认收起筛选维度,VSCP 入口常显 */
  .products-sidebar .cat-filters{display:none}
  .products-sidebar.filters-open .cat-filters{display:block}
  .products-sidebar.filters-open .cat-side-toggle .cst-arr{transform:rotate(180deg)}
  /* 横排展开筛选维度,省纵向空间 */
  .products-sidebar.filters-open .cfgroup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .products-sidebar.filters-open .cfl{margin-bottom:0;min-width:84px;flex-shrink:0;padding-top:3px}
  .products-sidebar.filters-open .cfchips{flex:1}
  .cln-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

@media(max-width:760px){
  .cmodal-box{grid-template-columns:1fr;max-height:88vh}
  .cmodal-img{min-height:240px}
  .cmodal-info{padding:26px 22px}
  .cat-help{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cat-grid{grid-template-columns:1fr;gap:22px}
  .cc-btns{grid-template-columns:1fr 1fr}
  .cart-fab{right:14px;bottom:14px;padding:12px 18px}
  .cln-grid{grid-template-columns:1fr}
  .products-sidebar.filters-open .cfgroup{display:block}
  .products-sidebar.filters-open .cfl{margin-bottom:9px}
}