:root{
  --bg:#f8fafc;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 15px -3px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);background:#fff;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1280px,94%);margin:0 auto}
.section{padding:24px 0}
.small{font-size:12px;color:var(--muted)}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-right:6px}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.card-media{aspect-ratio:4/3;background:#f8fafc;display:flex;align-items:center;justify-content:center}
.card-content{padding:10px 12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
@media (max-width:1024px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid4{grid-template-columns:1fr}}

/* Two-row header */
.header{position:sticky;top:0;background:#fff;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:8px 16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand img{height:36px;width:auto}
.whatsapp-btn{border:1px solid var(--line);padding:6px 12px;border-radius:999px;background:#f0fdf4;white-space:nowrap}
.header-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.header-nav ul{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:0;padding:8px 16px;list-style:none}
.navlink{padding:8px 10px;border-radius:999px;white-space:nowrap}
.navlink:hover{background:#f1f5f9}

/* Mobile nav: horizontal scroll on small screens */
@media (max-width:900px){
  .header-nav ul{justify-content:flex-start;overflow-x:auto;gap:10px;padding:8px 12px;scrollbar-width:thin}
  .header-nav li{flex:0 0 auto}
}

/* Banner full-width responsive (1900x500) */
.banner .wrap{width:100%;max-width:1350px;margin:18px auto;padding:0 8px}
.banner .media{width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:19/5}
.banner .media img{width:100%;height:100%;object-fit:cover}

/* About section */
.about-grid{display:grid;grid-template-columns:1fr 520px;gap:24px;align-items:start}
.about-card{transform:translateX(-16px)}
.about-card img{width:100%;height:auto;display:block}
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr}
  .about-card{transform:none}
}

/* Forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .full{grid-column:1/-1}
.input{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;cursor:pointer}
.cta.primary{display:inline-block;padding:10px 16px;border-radius:999px;background:#ffbf00;border:none}

/* Catalog */
.catalog-grid{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.sidebar{position:sticky;top:96px;height:fit-content}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cat-list .acc{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;align-items:center}
.cat-list .count{font-size:12px;opacity:.7;border:1px solid var(--line);border-radius:999px;padding:0 8px;margin-left:8px}
.catalog-main .cat-section{padding:12px 0;border-bottom:1px dashed var(--line)}
@media (max-width:1024px){ .catalog-grid{grid-template-columns:1fr} .sidebar{position:static} }

/* Product detail strict layout */
.pd{padding:24px 0}
.pd-grid{display:grid;grid-template-columns:420px 1fr;grid-template-areas:"cover desc" "cover thumbs" "spec spec";gap:24px;align-items:start}
.pd-cover{grid-area:cover;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.pd-cover .square{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f8fafc}
.pd-cover img{width:100%;height:100%;object-fit:cover}
.pd-desc{grid-area:desc;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--shadow)}
.pd-thumbs{grid-area:thumbs;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-thumb{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.pd-thumb .square{aspect-ratio:1/1;background:#f8fafc;display:flex;align-items:center;justify-content:center}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-spec{grid-area:spec;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.pd-spec img{width:100%;height:auto;display:block}
@media (max-width:1024px){.pd-grid{grid-template-columns:1fr;grid-template-areas:"cover" "desc" "thumbs" "spec"}}

.footer .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.footer .grid{grid-template-columns:1fr}}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:14px;vertical-align:top}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.card-form{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;box-shadow:var(--shadow)}
.editor-toolbar .btn{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#fff}


/* ==== 2025-10-21 Nav tweaks ==== */
/* 顶部两行模块同宽居中，并把左右边距收一点 */
.header-top,
.header-nav { width: min(1280px, 99%); margin: 0 auto; }

.header-top {
  display: flex;
  align-items: center;      /* Logo / WhatsApp 垂直居中 */
  justify-content: space-between;
  padding: 8px 10px;        /* 往里靠一点 */
}

/* Logo 区域与文字水平居中对齐 */
.header-top .brand { display: inline-flex; align-items: center; gap: 10px; }

/* 取消类目的高度限制，让它根据内容自适应；同时保证垂直居中 */
.header-nav ul { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.header-nav a,
.navlink {
  display: inline-flex;
  align-items: center;      /* 文本在行内垂直居中 */
  height: auto;             /* 关键：不再固定高度 */
  line-height: 1.2;         /* 文本行高自然 */
  padding: 10px 14px;       /* 触摸区域保留 */
}

/* 大屏时再把左右边距略微收一点（更“往里靠”） */
@media (min-width: 1440px) {
  .header-top { padding-left: 6px; padding-right: 6px; }
}



/* ==== 2025-10-21 nav grid: logo | nav(2 rows) | whatsapp ==== */
.header { 
  /* 让整个头部本身就是容器（别动你的HTML） */
  width: min(1280px, 94%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr max-content;  /* 左200px | 中自适应 | 右实际宽度 */
  grid-auto-rows: 118px;                         /* 与logo等高 */
  align-items: center;
  position: relative;
}

/* 让 .header-top 的两个孩子（.brand 和 .whatsapp-btn）直接成为 .header 的网格项 */
.header-top{ display: contents; }

/* 左侧 LOGO：尺寸按 200×118 摆放 */
.header-top .brand{
  grid-column: 1;                 /* 左列 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.header-top .brand img{
  width: 200px; 
  height: 118px; 
  object-fit: contain;            /* 防止拉伸变形 */
}

/* 右侧 WhatsApp：靠右 */
.header-top .whatsapp-btn{
  grid-column: 3;                 /* 右列 */
  justify-self: end;
  margin-right: 6px;              /* “往里靠一点” */
}

/* 中间导航：占用中间那列，同一行里与左右并排 */
.header-nav{
  grid-column: 2;                 /* 中列 */
  grid-row: 1;                    /* 与logo/whatsapp同一行 */
}

/* 导航两行自适应 + 居中对齐 */
.header-nav ul{
  display: flex;
  flex-wrap: wrap;                /* 允许换行 */
  justify-content: center;        /* 水平居中 */
  align-content: center;          /* 多行在区域内垂直居中 */
  gap: 0 12px;                    /* 列间距 */
  row-gap: 8px;                   /* 行间距 */
  margin: 0;
  padding: 0;
}
.header-nav li{ list-style: none; }
.header-nav a,
.navlink{
  display: inline-flex;
  align-items: center;            /* 垂直居中 */
  height: auto;                   /* 取消固定高度 */
  line-height: 1.2;
  padding: 10px 12px;             /* 保持可点击区域 */
}

/* 大屏时整体再“往里靠”一点点 */
@media (min-width: 1440px){
  .header{ width: 1200px; }       /* 如需更窄/更宽，这里调 */
}

/* 窄屏（<=1024px）恢复原来的上下结构，避免拥挤 */
@media (max-width: 1024px){
  .header{ display: block; }
  .header-top{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 8px 10px;
  }
  .header-nav{ grid: none; }      /* 取消grid放置 */
  .header-nav ul{ justify-content: flex-start; }
}


/* ==== 额外外扩：logo 与 WhatsApp 各向外侧 230px ==== */
@media (min-width: 1200px){
  .header{ overflow: visible; }                /* 允许超出容器可见 */
  .header-top .brand{ 
                  /* logo 向外侧移动 */
    z-index: 2;
  }
  .header-top .whatsapp-btn{
    margin-right: -230px;                      /* WhatsApp 向外侧移动 */
    z-index: 2;
  }
}

/* 移动端保持正常（不外扩），无需改动 */




















/* ===== Detail Page Fix v3 (2025-10-22) =====
   目标：
   1) 顶部主图/缩略图在框内完整显示（不裁切）
   2) 底部描述（含参数/说明）最大宽度 1055px，高度不限自动换行，小屏自适应
   3) 强力覆盖 Word/Excel 粘贴产生的 inline 样式（nowrap、固定宽度等）
   使用：将本段粘贴到 /assets/styles.css 最底部（优先级最高）
================================================ */

/* —— 底部描述容器（参数/说明区）与任意描述块 —— */
.pd-spec,
.desc-html{
  max-width: 1055px;        /* 桌面最大宽度 */
  width: 100%;              /* 小屏自适应 */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  box-sizing: border-box;
  overflow-x: hidden;        /* 防止横向滚动条 */
}

/* 强制所有子元素换行（覆盖内联 white-space/nowrap） */
.pd-spec *,
.desc-html *{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* 兼容 <pre>/<code> 等保留空白的元素（改为可换行） */
.pd-spec pre, .pd-spec code, .pd-spec samp,
.desc-html pre, .desc-html code, .desc-html samp{
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* 兜底：若内容里使用了 <nobr>，也强制可换行 */
.pd-spec nobr, .desc-html nobr{
  white-space: normal !important;
}

/* 干掉粘贴内容带来的固定宽度/最小宽度 */
.pd-spec [style*="width:"], .desc-html [style*="width:"]{
  max-width: 100% !important;
  width: auto !important;
}
.pd-spec [style*="min-width"], .desc-html [style*="min-width"]{
  min-width: 0 !important;
}

/* Word/Excel 表格自适应容器 */
.pd-spec table, .desc-html table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
}
.pd-spec td, .pd-spec th,
.desc-html td, .desc-html th{
  word-break: break-word !important;
  vertical-align: top;
}

/* 描述中的图片自适应容器 */
.pd-spec img, .desc-html img{
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
}

/* —— 顶部主图与缩略图：完整显示在框内（不裁切） —— */
.pd-cover .square,
.pd-thumb .square{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-cover .square img,
.pd-thumb .square img,
.pd .square img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain !important; /* 关键：完整显示，不裁切 */
}

/* 可选：底部描述默认段落间距（按需启用）
.pd-spec p{ margin: 0 0 12px; }
*/

/* 可选：小屏优化（让左右内边距更紧凑）
@media (max-width: 768px){
  .pd-spec, .desc-html{ padding-left: 8px; padding-right: 8px; }
}
*/




































/* 让描述块占满 grid 的所有列，并限制为 1100 宽、居中 */
.pd .pd-grid > section[class*="pd-spec"]{
  grid-column: 1 / -1 !important;   /* 关键：跨所有列，否则会落在第1列≈420px */
  grid-row: auto !important;
  display: block !important;

  max-width: 1100px !important;     /* 你的最终要求：1100 */
  width: 100% !important;
  margin: 12px auto 0 !important;   /* 与上方模块对齐并居中 */
  justify-self: center !important;  /* 父级是 grid，强制水平居中 */
  box-sizing: border-box;
}

/* 保持自动换行与内容自适配（只作用于描述块内部） */
.pd .pd-grid > section[class*="pd-spec"] *{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* 表格/图片不撑出容器 */
.pd .pd-grid > section[class*="pd-spec"] table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
}
.pd .pd-grid > section[class*="pd-spec"] img{
  max-width: 100% !important;
  height: auto !important;
}

/* 覆盖从 Word/Excel 粘贴带来的 width 属性/内联宽度 */
.pd .pd-grid > section[class*="pd-spec"] [width]{
  width: auto !important;
}
.pd .pd-grid > section[class*="pd-spec"] [style*="width:"]{
  width: auto !important;
  max-width: 100% !important;
}















/* === HOME ONLY：分类模块(h2 + .grid4)卡片规范化 === */
/* 卡片：改为纵向布局，保证有足够高度（避免被 overflow 截掉） */
#catalog .catalog-main .cat-section h2 + .grid4 .card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:305px !important; /* 240(图) + 8(间距) + 50(标题) ≈ 298 */
}

/* 图片容器：固定 240×240；**覆盖主题的 4/3 比例** */
#catalog .catalog-main .cat-section h2 + .grid4 .card .card-media{
  width:240px !important;
  height:240px !important;
  flex:0 0 240px !important;
  aspect-ratio:auto !important;            /* 取消 4/3，确保正方形 */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
  box-sizing:border-box;
}

/* 兜底：就算没有 .card-media，也把卡片里的第一块媒体容器（含 img）固定成 240×240 */
#catalog .catalog-main .cat-section h2 + .grid4 .card > figure,
#catalog .catalog-main .cat-section h2 + .grid4 .card > picture,
#catalog .catalog-main .cat-section h2 + .grid4 .card > img:first-child{
  width:240px !important;
  height:240px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}

/* 图片：等比完整显示（不裁剪、不变形） */
#catalog .catalog-main .cat-section h2 + .grid4 .card .card-media img,
#catalog .catalog-main .cat-section h2 + .grid4 .card > figure img,
#catalog .catalog-main .cat-section h2 + .grid4 .card > picture img,
#catalog .catalog-main .cat-section h2 + .grid4 .card > img:first-child{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}

/* 标题框：固定 240×50（两行省略，居中）；兼容 h5/h4/.title/p */
#catalog .catalog-main .cat-section h2 + .grid4 .card h5,
#catalog .catalog-main .cat-section h2 + .grid4 .card h4,
#catalog .catalog-main .cat-section h2 + .grid4 .card .title,
#catalog .catalog-main .cat-section h2 + .grid4 .card p{
  width:240px !important;
  min-height:35px !important;
  max-height:50px !important;
  margin:8px auto 0 !important;
  text-align:center;
  line-height:1.25;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;     /* 两行 */
  -webkit-box-orient:vertical;
  text-overflow:ellipsis;
  box-sizing:border-box;
}