.catalog-main{background:#f7f4eb;min-height:60vh}
.catalog-breadcrumb{padding:18px 0;background:#fff;border-bottom:1px solid #e7e1d4}
.catalog-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;color:#697064;font-size:13px}
.catalog-breadcrumb li+li::before{content:"/";margin-right:8px;color:#a49d8d}
.catalog-breadcrumb a{color:#315522;text-decoration:none}.catalog-breadcrumb a:hover{text-decoration:underline}
.catalog-hero{--hero-image:#315522;padding:64px 0 42px;background:var(--hero-image);color:#fff}.catalog-hero .eyebrow{color:#d7d9a6}.catalog-hero h1{margin:10px 0 14px;font-size:clamp(34px,5vw,54px);line-height:1.05}.catalog-hero p{max-width:680px;margin:0;color:#edf0df;font-size:17px;line-height:1.65}
.catalog-section{padding:48px 0}.catalog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.catalog-filter button{border:1px solid #bfc9b9;background:#fff;color:#315522;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer}.catalog-filter button:hover,.catalog-filter .is-active{background:#315522;border-color:#315522;color:#fff}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.catalog-card{background:#fff;border:1px solid #e2dccf;display:flex;flex-direction:column;min-width:0}.catalog-card[hidden]{display:none}.catalog-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#ece7db}.catalog-card-body{display:flex;flex:1;flex-direction:column;padding:18px}.catalog-card h2{margin:0 0 10px;font-size:18px;line-height:1.35}.catalog-card h2 a{color:#263b1c;text-decoration:none}.catalog-card h2 a:hover{text-decoration:underline}.catalog-card p{margin:0 0 9px;color:#5f675d;font-size:13px;line-height:1.5}.catalog-card .card-link{margin-top:auto;color:#315522;font-weight:700;text-decoration:none}.catalog-card .card-link:hover{text-decoration:underline}
.reference-note{border-left:3px solid #9aa94e;margin:0 0 26px;padding:12px 15px;background:#fffdf7;color:#4a5346;line-height:1.6}.product-detail{padding:54px 0}.product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start}.product-image{background:#fff;border:1px solid #e2dccf}.product-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.product-copy h1{margin:8px 0 12px;color:#263b1c;font-size:clamp(32px,4vw,48px);line-height:1.08}.product-id,.product-category{margin:0 0 10px;color:#5f675d}.product-category a{color:#315522}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.tag-list span{padding:6px 9px;background:#e7ecd9;color:#315522;font-size:12px;font-weight:700}.product-facts{display:grid;gap:0;margin:22px 0}.product-facts div{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid #e2dccf}.product-facts dt{font-weight:700;color:#263b1c}.product-facts dd{margin:0;color:#4e564a}.customization-context{margin:26px 0;padding:22px;background:#fff;border:1px solid #e2dccf}.customization-context h2{margin:0 0 9px;color:#263b1c;font-size:20px}.customization-context p{margin:0;color:#4e564a;line-height:1.65}.related-products{padding-top:0}
.catalog-footer{padding:34px 0;background:#203817;color:#e9ecdf}.catalog-footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.catalog-footer p{margin:0}.catalog-footer a{color:#fff;text-decoration:none}.catalog-footer a:hover{text-decoration:underline}
@media (max-width:960px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-layout{gap:32px}}@media (max-width:620px){.catalog-hero{padding:44px 0 32px}.catalog-section,.product-detail{padding:34px 0}.catalog-grid,.product-layout{grid-template-columns:1fr}.catalog-footer-inner{align-items:flex-start;flex-direction:column}.product-facts div{grid-template-columns:1fr;gap:5px}}

/* xf:layout-2col —— 2026-08-18 Jacken 标注版式：context 入图片卡内共享边框；上移后的 CTA 留呼吸位 */
.product-image .customization-context{margin:0;border:0;border-top:1px solid #e2dccf}
.product-copy>.btn-primary{margin:6px 0 20px;display:inline-block}

/* xf:card-v2 —— 2026-08-18 列表卡升级样板（借鉴 luxopack 卡结构，浅色版）：三格数据条+标签+Get Quote */
.card-media{display:block}
.catalog-card h2 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.xf-stats div{background:#f7f3eb;border:1px solid #eee7da;border-radius:6px;padding:8px 9px;min-width:0}
.xf-stats span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:#7b8278;text-transform:uppercase}
.xf-stats b{display:block;font-size:13px;color:#263b1c;margin-top:2px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xf-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.xf-tags span{padding:4px 8px;border:1px solid #e2dccf;border-radius:999px;font-size:11px;color:#4e564a;background:#fff}
.xf-quote{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:auto;background:var(--green);color:#fff;font-weight:800;font-size:13px;border-radius:6px;letter-spacing:.02em}
.xf-quote:hover{filter:brightness(1.1)}
@media (max-width:620px){.xf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* xf:pdv2 —— 2026-08-18 产品页版式v2（ChatGPT稿结构，站内配色实现） */
.eyebrow-link{color:var(--green);text-decoration:none}
.eyebrow-link:hover{text-decoration:underline}
.product-facts.xf-v2 div{grid-template-columns:30px 165px 1fr;align-items:center;min-height:56px;padding:8px 0}
.xf-si{display:flex;align-items:center;color:#999653}
.xf-si svg{width:18px;height:18px;stroke-width:1.7}
.product-facts.xf-v2 dt{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:15px}
.xf-cta{margin:24px 0 0}
.xf-quote-btn{position:relative;display:flex;align-items:center;width:100%;min-height:56px;padding:0 20px;border-radius:3px;background:linear-gradient(90deg,var(--green),#24451c);color:#fff;transition:transform .2s,box-shadow .2s}
.xf-quote-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(30,58,24,.18)}
/* xf:wabadge —— 产品页 CTA 图标改用徽章图（tools/patch_whatsapp_style.py 管辖）*/
.xf-qb-icon{display:flex;align-items:center;width:38px;flex:0 0 38px}
.xf-qb-icon svg{display:none}
.xf-qb-icon:before{content:"";width:30px;height:30px;background:url("../images/ui/whatsapp-badge.webp") center/contain no-repeat}
.xf-qb-text{padding-left:6px;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:600;letter-spacing:.075em;text-transform:uppercase}
.xf-qb-arrow{margin-left:auto;font-size:24px;font-weight:300;transition:transform .2s}
.xf-quote-btn:hover .xf-qb-arrow{transform:translateX(5px)}
.reference-note.xf-note{margin:15px 0 0;padding:2px 0 2px 16px;background:none;border:0;border-left:2px solid #999653;color:#696b64;font-size:13px;line-height:1.7}
.xf-lower{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.xf-panel{position:relative;min-height:220px;padding:26px 28px;border:1px solid var(--line,#ded9cb);background:rgba(255,255,255,.4);overflow:hidden}
.xf-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.xf-panel-icon{color:#929148;display:flex}
.xf-panel-icon svg{width:24px;height:24px;stroke-width:1.5}
.xf-panel-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.xf-panel p{max-width:560px;margin:0;color:#65675f;font-size:14px;line-height:1.85}
.xf-panel .xf-inq-intro{margin-bottom:8px}
.xf-inq-list{margin:0;padding-left:17px;color:#555b51;font-size:13px;line-height:1.8}
.xf-inq-list li::marker{color:var(--green)}
.xf-botanical{position:absolute;right:30px;bottom:6px;width:140px;height:165px;opacity:.14;color:#8a955f;pointer-events:none}
@media (max-width:820px){.xf-lower{grid-template-columns:1fr;margin-top:36px}.xf-panel{min-height:auto;padding:22px 20px}.xf-botanical{width:105px;height:125px;right:8px}}

/* xf:pagination —— 2026-08-18 products 静态分页（方案A）：品类链接条 + 页位提示 + 页码条（build_products_index.py 管辖页专用） */
.xf-catnav a{display:inline-block;border:1px solid #bfc9b9;background:#fff;color:#315522;padding:10px 15px;font-size:14px}
.xf-catnav a:hover{background:#315522;border-color:#315522;color:#fff}
.xf-page-note{color:#7b8278;font-size:13px;margin:0 0 20px}
.xf-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:38px 0 4px}
.xf-pagination a,.xf-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid #bfc9b9;background:#fff;color:#315522;font-size:14px}
.xf-pagination a:hover{background:#315522;border-color:#315522;color:#fff}
.xf-pagination [aria-current="page"]{background:#315522;border-color:#315522;color:#fff;font-weight:700}
.xf-pagination .xf-page-off{color:#9aa294;border-color:#e3e7de}

/* xf:guides —— 2026-08-19 内链双向化：产品页/品类页 → 买家指南（inject_guide_links.py 管辖，卡片只放 tag+标题以压低模板占比） */
.xf-guides-section{background:#fbfaf7;border-top:1px solid #ece7dc}
.xf-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.xf-guide{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #e2dccf;padding:24px 22px;transition:border-color .25s,box-shadow .25s}
.xf-guide:hover{border-color:#bfc9b9;box-shadow:0 14px 32px rgba(29,46,23,.07)}
.xf-guide-tag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:#eef2e8;border-radius:999px;padding:5px 11px}
.xf-guide h3{font-family:Georgia,serif;font-size:19px;line-height:1.32;margin:0}
.xf-guide h3 a{color:var(--ink)}
.xf-guide h3 a:hover{color:var(--green)}
.xf-guide-link{margin-top:auto;font-size:12px;font-weight:800;color:var(--green)}
@media (max-width:820px){.xf-guides{grid-template-columns:1fr;gap:12px}}
.xf-guides-section .section-head{margin-bottom:26px}
.xf-guides-section .section-head h2{font-size:clamp(28px,2.6vw,36px)}

/* xf:cat-hero-photo —— 2026-08-22 分类页banner样板页(jute)：.catalog-hero 的 --hero-image 默认仍是纯色#315522(其余12个分类页不受影响)，用 body id 挂钩而不碰 class="catalog-hero" 本体，因为 build_category_content.py 的 HERO_RE 精确匹配 <section class="catalog-hero"> 这串字符，加别的属性会让该生成器以后重跑时匹配不上。渐变公式与锚点(right 38%)照抄 pages.css 的 .inner-hero，两种hero视觉同源。过目通过后再考虑铺开其余12个分类页。 */
#page-jute .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-jute.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-jute .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-jute-800.webp") right 38%/cover no-repeat}}
#page-canvas .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-canvas.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-canvas .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-canvas-800.webp") right 38%/cover no-repeat}}
#page-drawstring .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-drawstring.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-drawstring .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-drawstring-800.webp") right 38%/cover no-repeat}}
#page-polyester .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-polyester.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-polyester .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-polyester-800.webp") right 38%/cover no-repeat}}
#page-mesh .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-mesh.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-mesh .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-mesh-800.webp") right 38%/cover no-repeat}}
#page-non-woven .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-non-woven.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-non-woven .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-non-woven-800.webp") right 38%/cover no-repeat}}
#page-woven-pp .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-woven-pp.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-woven-pp .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-woven-pp-800.webp") right 38%/cover no-repeat}}
#page-cosmetic .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-cosmetic.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-cosmetic .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-cosmetic-800.webp") right 38%/cover no-repeat}}
#page-felt .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-felt.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-felt .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-felt-800.webp") right 38%/cover no-repeat}}
#page-oxford-fabric .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-oxford-fabric.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-oxford-fabric .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-oxford-fabric-800.webp") right 38%/cover no-repeat}}
#page-cooler .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-cooler.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-cooler .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-cooler-800.webp") right 38%/cover no-repeat}}
#page-tyvek .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-tyvek.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-tyvek .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-tyvek-800.webp") right 38%/cover no-repeat}}
#page-paper .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-paper.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-paper .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-paper-800.webp") right 38%/cover no-repeat}}
#page-products .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-products.webp") right 38%/cover no-repeat}
@media (max-width:620px){#page-products .catalog-hero{--hero-image:linear-gradient(100deg,rgba(17,32,13,.95) 0%,rgba(17,32,13,.88) 40%,rgba(17,32,13,.42) 100%),url("../images/ui/banner-products-800.webp") right 38%/cover no-repeat}}