/* ============================================================
   www.6789333.xyz — Anshan Custom Handbag OEM/ODM Factory
   DESIGN SYSTEM: "Cargo Manifest"
   A palette of raw materials (canvas / leather / brass rivets)
   and freight-document typography — built for a factory that
   ships physical goods across borders, not a generic SaaS look.
   ============================================================ */

:root{
  /* ---- Color tokens ---- */
  --ink:        #1C1B19;   /* near-black, warm charcoal — primary text */
  --canvas:     #EDE8DE;   /* raw canvas fabric — page background */
  --canvas-2:   #E2DCCC;   /* slightly deeper canvas — section alt bg */
  --paper:      #F7F5EF;   /* card surface, lighter than canvas */
  --leather:    #8B5E3C;   /* tan leather — primary accent */
  --leather-dk: #6E4A2E;   /* leather hover/active */
  --brass:      #B08D57;   /* hardware brass — secondary accent, rules */
  --steel:      #35566A;   /* steel-blue — trust / logistics / links */
  --steel-dk:   #24404F;
  --stamp-red:  #B03A2E;   /* ink-stamp red — used sparingly: CTA / alerts */
  --line:       #C9C0AC;   /* hairline borders on canvas */
  --line-dk:    #3A3733;   /* hairline borders on ink */
  --success:    #4B6B4F;

  /* ---- Type tokens ---- */
  --font-display: 'Oswald', 'Roboto Condensed', 'Noto Sans SC', 'Noto Sans Arabic', sans-serif;
  --font-body:    'IBM Plex Sans', 'Inter', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
                  'Noto Sans KR', 'Noto Sans Arabic', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Roboto Mono', monospace;

  /* ---- Layout tokens ---- */
  --maxw: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 2px; /* near-zero radius — manifests don't have rounded corners */
  --shadow-card: 0 1px 2px rgba(28,27,25,.06), 0 6px 20px rgba(28,27,25,.05);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; margin:0 0 .5em; text-transform:uppercase; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--stamp-red); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(3rem, 7vw, 6rem); }
.section--alt{ background:var(--canvas-2); }
.section--ink{ background:var(--ink); color:var(--canvas); }
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leather); display:flex; align-items:center; gap:.6em; margin-bottom:.9em;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--brass); display:inline-block; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.6em;
  font-family:var(--font-display); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:var(--radius); transition:.2s ease;
}
.btn--primary{ background:var(--ink); color:var(--canvas); }
.btn--primary:hover{ background:var(--stamp-red); border-color:var(--stamp-red); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--canvas); }
.btn--on-ink{ border-color:var(--canvas); color:var(--canvas); }
.btn--on-ink:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }

/* ---- Header / Nav ---- */
.topbar{
  background:var(--ink); color:var(--canvas-2); font-family:var(--font-mono); font-size:.78rem;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding-block:.5rem; gap:1rem; flex-wrap:wrap; }
.topbar-contacts{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.topbar-contacts a:hover{ color:var(--brass); }

.langswitch{ position:relative; }
.langswitch summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.4em; }
.langswitch summary::-webkit-details-marker{ display:none; }
.langswitch[open] summary svg{ transform:rotate(180deg); }
.langswitch ul{
  position:absolute; right:0; top:calc(100% + 6px); background:var(--paper); color:var(--ink);
  border:1px solid var(--line); min-width:170px; box-shadow:var(--shadow-card); z-index:60;
}
.langswitch li a{ display:block; padding:.6em .9em; font-family:var(--font-body); font-size:.85rem; }
.langswitch li a:hover{ background:var(--canvas-2); }

.masthead{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-size:1.3rem; letter-spacing:.02em; }
.brand small{ display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--leather); text-transform:none; }

.mainnav{ display:flex; gap:1.8rem; align-items:center; }
.mainnav > li{ position:relative; }
.mainnav > li > a{
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.4em 0; border-bottom:2px solid transparent;
}
.mainnav > li > a:hover, .mainnav > li.is-active > a{ border-color:var(--stamp-red); }
.mainnav .subnav{
  position:absolute; left:0; top:calc(100% + 12px); background:var(--paper); border:1px solid var(--line);
  min-width:220px; box-shadow:var(--shadow-card); opacity:0; visibility:hidden; transform:translateY(4px);
  transition:.18s ease; padding:.5rem 0;
}
.mainnav > li:hover .subnav{ opacity:1; visibility:visible; transform:translateY(0); }
.mainnav .subnav a{ display:block; padding:.55em 1.1em; font-size:.85rem; }
.mainnav .subnav a:hover{ background:var(--canvas-2); color:var(--leather); }

.navtoggle{ display:none; background:none; border:1px solid var(--ink); padding:.5em .7em; }

/* ---- Floating contact rail ---- */
.contact-rail{
  position:fixed; right:1rem; bottom:1rem; z-index:70; display:flex; flex-direction:column; gap:.55rem;
}
.contact-rail a{
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--canvas);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  border:1px solid var(--line-dk); transition:.2s ease; position:relative;
}
.contact-rail a:hover{ background:var(--stamp-red); transform:translateY(-2px); }
.contact-rail a .rail-label{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--canvas); padding:.35em .7em; font-family:var(--font-mono);
  font-size:.72rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.15s ease;
}
.contact-rail a:hover .rail-label{ opacity:1; }

/* ---- Hero / stamp badge (signature element) ---- */
.hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--canvas); }
.hero .wrap{ padding-block: clamp(3.5rem, 9vw, 7rem); display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.05; margin-bottom:.5rem; }
.hero h1 em{ font-style:normal; color:var(--brass); }
.hero .lede{ font-size:1.05rem; color:#D8D2C4; max-width:46ch; margin-bottom:2rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-media {
  display: inline-flex;      /* 让容器收缩到内容大小,而不是撑满整列 */
  padding: 2px;               /* 外框与图片之间留2像素 */
  background: #fff;           /* 白色边框底色,按你原来的配色改 */
  border: 1px solid #e5e0d8;  /* 如果原来有描边,保留/调整这行 */
  align-self: start;          /* 防止在grid布局里被拉伸到和左侧文字一样高 */
  max-width: 100%;
  box-sizing: border-box;
}

.hero-media img,
.hero-media picture {
  display: block;
  width: 100%;      /* 图片撑满容器(容器已收缩到合适大小) */
  height: auto;      /* 保持原始比例,不裁切 */
  max-width: 100%;
}

.stamp-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }
.stamp{
  border:2px solid var(--brass); border-radius:50%; width:112px; height:112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-6deg); font-family:var(--font-mono); position:relative; flex-shrink:0;
}
.stamp:nth-child(2){ transform:rotate(4deg); }
.stamp:nth-child(3){ transform:rotate(-3deg); }
.stamp::before{
  content:""; position:absolute; inset:6px; border:1px dashed var(--brass); border-radius:50%; opacity:.6;
}
.stamp .stamp-num{ font-size:1.4rem; font-weight:700; color:var(--brass); line-height:1; }
.stamp .stamp-label{ font-size:.56rem; letter-spacing:.05em; text-transform:uppercase; margin-top:.3em; color:#D8D2C4; }

/* ---- Route timeline (OEM/ODM production stages — real sequence) ---- */
.route{ display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:.5rem; }
.route-step{ flex:1 1 0; min-width:150px; position:relative; padding-inline:1rem; text-align:center; }
.route-step .node{
  width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--leather);
  margin:0 auto .9rem;
}
.route-step::before{
  content:""; position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--line);
}
.route-step:first-child::before{ display:none; }
.route-step .step-no{ font-family:var(--font-mono); color:var(--leather); font-size:.75rem; letter-spacing:.1em; }
.route-step h4{ font-size:.95rem; margin:.3em 0 .4em; }
.route-step p{ font-size:.85rem; color:#5c584f; }

/* ---- Cards / grids ---- */
.grid{ display:grid; gap:1.5rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card); transition:.2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--brass); }
.card .thumb{ aspect-ratio:1/1; overflow:hidden; background:var(--canvas-2); position:relative; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.card:hover .thumb img{ transform:scale(1.05); }
.card .thumb .moq-tag{
  position:absolute; left:.6rem; bottom:.6rem; background:var(--ink); color:var(--canvas);
  font-family:var(--font-mono); font-size:.68rem; padding:.3em .6em; letter-spacing:.03em;
}
.card .body{ padding:1.1rem 1.2rem 1.3rem; }
.card h3{ font-size:1rem; margin-bottom:.4em; text-transform:none; letter-spacing:0; }
.card .cat{ font-family:var(--font-mono); font-size:.7rem; color:var(--leather); text-transform:uppercase; letter-spacing:.08em; }
.card .specs{ display:flex; gap:.8rem; margin-top:.7rem; font-family:var(--font-mono); font-size:.72rem; color:#6b665c; flex-wrap:wrap; }

.factory-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.factory-strip div{ padding:1.4rem 1rem; text-align:center; border-left:1px solid var(--line); }
.factory-strip div:first-child{ border-left:none; }
.factory-strip .num{ font-family:var(--font-display); font-size:2rem; color:var(--leather); }
.factory-strip .lbl{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:#6b665c; }

/* ---- Testimonials ---- */
.testi{ background:var(--paper); border:1px solid var(--line); padding:1.6rem; position:relative; }
.testi::before{ content:"\201C"; font-family:Georgia,serif; font-size:3rem; color:var(--brass); line-height:1; }
.testi .who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; font-family:var(--font-mono); font-size:.78rem; }
.testi .who img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }

/* ---- Forms ---- */
.form-field{ margin-bottom:1rem; }
.form-field label{ display:block; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.4em; color:#5c584f; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--leather); }

/* ---- Breadcrumb ---- */
.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:#6b665c; padding-block:1rem; border-bottom:1px solid var(--line); }
.breadcrumb a:hover{ color:var(--leather); }
.breadcrumb span{ margin-inline:.4em; }

/* ---- List / article rows ---- */
.list-row{ display:flex; gap:1.4rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.list-row .thumb{ width:180px; flex-shrink:0; aspect-ratio:4/3; overflow:hidden; background:var(--canvas-2); }
.list-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.list-row .meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--leather); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4em; }
.list-row h3{ text-transform:none; letter-spacing:0; font-size:1.15rem; margin-bottom:.4em; }
.list-row p{ color:#5c584f; font-size:.92rem; }

/* ---- Pagination ---- */
.pagination{ display:flex; gap:.4rem; justify-content:center; padding-top:2rem; font-family:var(--font-mono); font-size:.85rem; }
.pagination a, .pagination span{ min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.pagination a:hover{ border-color:var(--leather); color:var(--leather); }
.pagination .is-current{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }

/* ---- Sidebar (category/tags) ---- */
.subcat-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; padding-block:1.2rem; }
.subcat-tabs a{
  padding:.5em 1.1em; border:1px solid var(--line); font-family:var(--font-mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.subcat-tabs a:hover, .subcat-tabs a.is-active{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }

/* ---- Content article body ---- */
.article-body{ max-width:74ch; font-size:1.02rem; }
.article-body h2{ text-transform:none; font-size:1.4rem; margin-top:1.6em; }
.article-body img{ margin-block:1rem; border:1px solid var(--line); }
.article-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.75rem; color:#6b665c; padding-block:1rem; border-block:1px solid var(--line); margin-bottom:1.5rem; }

/* ---- Gallery ---- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.gallery-grid a{ aspect-ratio:1/1; overflow:hidden; display:block; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.gallery-grid a:hover img{ transform:scale(1.06); }

/* ---- Footer ---- */
.sitefooter{ background:var(--ink); color:#C7C1B3; }
.sitefooter .wrap{ padding-block:3.5rem 1.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.sitefooter h4{ color:var(--canvas); font-size:.85rem; letter-spacing:.06em; margin-bottom:1em; }
.sitefooter li{ margin-bottom:.55em; font-size:.88rem; }
.sitefooter a:hover{ color:var(--brass); }
.sitefooter .bottom{ border-top:1px solid var(--line-dk); font-family:var(--font-mono); font-size:.72rem; padding-block:1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.sitefooter .langlist{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---- Responsive ---- */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .factory-strip{ grid-template-columns:repeat(2,1fr); }
  .factory-strip div:nth-child(3){ border-left:none; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .sitefooter .wrap{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px){
  .mainnav{
    position:fixed; inset:0 0 0 auto; width:82%; max-width:340px; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:5rem 1.5rem 2rem; gap:0;
    transform:translateX(100%); transition:.25s ease; box-shadow:-8px 0 24px rgba(0,0,0,.15);
  }
  .mainnav.is-open{ transform:translateX(0); }
  .mainnav > li{ width:100%; border-bottom:1px solid var(--line); }
  .mainnav .subnav{ position:static; opacity:1; visibility:visible; box-shadow:none; border:none; transform:none; display:none; }
  .mainnav > li.is-open .subnav{ display:block; }
  .navtoggle{ display:block; }
  .grid--4, .grid--3, .grid--2{ grid-template-columns:1fr; }
  .sitefooter .wrap{ grid-template-columns:1fr; padding-block:2.5rem 1rem; }
  .list-row{ flex-direction:column; }
  .list-row .thumb{ width:100%; }
  .factory-strip{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .route{ flex-direction:column; }
  .route-step::before{ display:none; }
}
/* Force rich-text editor images (newstext) to scale within their
   container instead of rendering at their raw saved width/height */
.article-body img{
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin-block:1rem;
  border:1px solid var(--line);
}

/* Product detail photo — capped size, no cropping, centered */
.product-media{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  background:var(--canvas-2);
  margin-inline:auto;
  overflow:hidden;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pagination {
  font-size: 14px;
  line-height: 1;
}

/* 所有可点击按钮 + 当前页数字，统一按钮外观 */
.pagination a,
.pagination > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0 3px 6px 0;
  border: 1px solid #e5e0d8;
  border-radius: 6px;
  text-decoration: none;
  color: #4a4038;
  background: #fff;
  font-weight: 400;
  vertical-align: middle;
  box-sizing: border-box;
}

.pagination a:hover {
  border-color: #c9a35a;
  color: #c9a35a;
}

/* 当前页码：直接子元素的<b>，实心深色突出显示 */
.pagination > b {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  font-weight: 600;
}

/* "共45条"提示：去掉按钮外观，弱化成灰色小字 */
.pagination a[title="Total"] {
  border: none;
  background: transparent;
  color: #999;
  min-width: auto;
  padding: 0 8px 0 0;
  font-weight: 400;
}

.pagination a[title="Total"] b {
  font-weight: 400;
  color: #999;
}