/* =========================================================
   hengyan group — homepage (product-store layout)
   Design language: white canvas, heavy grotesque type,
   big radii, black pill CTAs, vivid product tiles.
   ========================================================= */



/* ---------------- self-hosted Archivo (no Google Fonts dependency) ---------------- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/archivo-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/archivo-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/archivo-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap;
  src:url("../fonts/archivo-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/archivo-900-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:#0f1512;
  --ink-2:#1b221e;
  --body:#46514b;
  --muted:#7e8a83;
  --line:#e3e6e1;
  --tint:#f7f6f1;
  --tint-2:#efece5;
  --accent:#1e6a4c;
  --accent-2:#4da87f;
  --hot:#c4553f;
  --new:#2f6f9e;
  --oem:#a9762a;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --wrap:1280px;
  --font:"Archivo","Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",Roboto,Arial,sans-serif;

  /* theme vars the desktop preview frame injects — keep sane fallbacks */
  --foreground:var(--ink);
  --muted-foreground:var(--muted);
  --accent-color:var(--accent);
  --border:var(--line);
  --card:#fff;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--body); font-family:var(--font);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--ink); margin:0; line-height:1.1; font-weight:800; letter-spacing:-.02em; }
h1{ font-size:clamp(1.65rem,3.6vw,2.7rem); text-transform:uppercase; letter-spacing:-.03em; line-height:1.06; }
h2{ font-size:clamp(1.35rem,2.4vw,1.95rem); text-transform:uppercase; letter-spacing:-.025em; }
h3{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------------- buttons / links ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.7em; border-radius:999px; border:1.5px solid transparent;
  font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#33383a; color:#fff; transform:translateY(-2px); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--tint); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn--sm{ padding:.55em 1.1em; font-size:.8rem; }
.btn--block{ width:100%; }

.link-arrow{ font-weight:700; font-size:.92rem; color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:2px; }
.link-arrow:hover{ color:var(--accent); border-color:var(--accent); }
/* social icon buttons */
.socials{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.socials--center{ justify-content:center; margin-top:18px; }
.socials__i{
  width:44px; height:44px; border-radius:999px; background:#3c4240; color:#fff;
  display:grid; place-items:center; transition:background .18s ease, transform .18s ease;
}
.socials__i:hover{ background:var(--accent); transform:translateY(-2px); }
.socials__i svg{ width:21px; height:21px; }
.foot .socials__i{ background:rgba(255,255,255,.14); }
.foot .socials__i:hover{ background:var(--accent); }
.ugc__links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
section[id]{ scroll-margin-top:96px; }        /* keep anchors clear of the sticky header */

/* whatsapp block on the contact page */
.wa{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.wa__qr{ display:block; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }
.wa__qr img{ display:block; width:100%; height:auto; }
.wa__body h2{ margin:12px 0 10px; }
.wa__hint{ color:var(--muted); font-size:.92rem; margin-bottom:18px; }
@media (max-width:820px){ .wa{ grid-template-columns:1fr; } .wa__qr{ max-width:320px; } }

.tag{
  display:inline-block; padding:.35em .9em; border-radius:999px; font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; background:rgba(16,18,17,.08); color:var(--ink);
}
.tag--light{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------------- announcement bar ---------------- */
.ann{
  background:var(--ink); color:#fff; display:flex; align-items:center; gap:8px;
  padding:9px 14px; font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.ann__nav{
  background:transparent; border:0; color:#fff; font-size:1.1rem; line-height:1; cursor:pointer;
  opacity:.65; padding:0 6px; font-family:inherit;
}
.ann__nav:hover{ opacity:1; }
.ann__track{ flex:1; position:relative; height:1.5em; overflow:hidden; }
.ann__item{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(60%); transition:opacity .4s ease, transform .4s ease;
  color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ann__item.is-active{ opacity:1; transform:none; }
.ann__item:hover{ text-decoration:underline; }

/* ---------------- header ---------------- */
.head{
  position:sticky; top:0; z-index:70; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head__inner{ display:flex; align-items:center; gap:18px; min-height:74px; }
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo__mark{ width:40px; height:40px; display:block; border-radius:12px; }
.logo__word{ font-weight:800; font-size:1.1rem; letter-spacing:-.02em; color:var(--ink); }
.logo--light .logo__word{ color:#fff; }

.nav{ display:flex; align-items:center; gap:26px; margin:0 auto; }
.nav a{ font-size:.92rem; font-weight:600; color:var(--ink); }
.nav a:hover{ color:var(--accent); }

.head__right{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.lang{ display:flex; gap:4px; }
.lang__btn{
  background:transparent; border:1px solid var(--line); color:var(--body);
  padding:.24em .6em; border-radius:999px; font-size:.74rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.lang__btn:hover{ border-color:var(--ink); color:var(--ink); }
.lang__btn.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.lang--mobile{ display:none; }

.burger{
  display:none; width:42px; height:38px; background:transparent; border:1.5px solid var(--line);
  border-radius:12px; cursor:pointer; padding:9px 10px;
}
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; margin:4px 0; transition:.2s; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------------- hero slider (full-bleed to both page edges) ---------------- */
.hero{ padding:0; }
.hero__viewport{ position:relative; max-width:none; margin:0; padding:0; min-height:600px; }
.hero__slide{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}
.hero__slide.is-active{ opacity:1; visibility:visible; position:relative; inset:auto; min-height:600px; }
.slide--a{ background:linear-gradient(115deg,#ffd9e6 0%,#ffb9d1 48%,#ff8fb5 100%); }
.slide--b{ background:linear-gradient(115deg,#dbe7ff 0%,#b8cdfa 48%,#8fb0f2 100%); }
.slide--c{ background:linear-gradient(115deg,#d9f2e3 0%,#b2e5c9 48%,#83d3aa 100%); }

.hero__media{
  position:absolute; right:9%; top:50%; transform:translateY(-50%) rotate(-3deg);
  width:min(20%,240px); opacity:1; pointer-events:none;
}
.hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{
  position:absolute; inset:0; display:block;
  background:linear-gradient(95deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 32%,
             rgba(255,255,255,.66) 52%, rgba(255,255,255,.12) 76%, rgba(255,255,255,0) 88%);
}
.hero__copy{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }
.hero__copy h1{ margin:12px 0 14px; }
.hero__copy p{ font-size:.95rem; max-width:52ch; margin-bottom:22px; color:#22282a; }

.hero__ui{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; }
.hero__dots{ display:flex; gap:8px; }
.hero__dots button{
  width:34px; height:5px; border-radius:99px; border:0; background:var(--line); cursor:pointer; padding:0;
}
.hero__dots button.is-active{ background:var(--ink); }
.hero__arrows{ display:flex; gap:8px; }
.arrow{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  color:var(--ink); font-size:1.1rem; cursor:pointer; font-family:inherit; line-height:1;
}
.arrow:hover{ border-color:var(--ink); }

/* ---------------- sections ---------------- */
.sec{ padding:78px 0; }
.sec--tint{ background:var(--tint); }
.sec__head{ margin-bottom:34px; max-width:760px; }
.sec__head--row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; max-width:none; }
.sec__head--center{ text-align:center; margin:0 auto 30px; }
.sec__head p{ margin-top:10px; color:var(--body); font-size:.98rem; }

/* ---------------- product grid ---------------- */
.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod__media{
  display:block; aspect-ratio:1/1; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.prod__media img{
  position:absolute; left:6%; top:6%; width:88%; height:88%; object-fit:contain;
  transition:transform .3s ease;
}
.prod:hover .prod__media{ transform:translateY(-4px); box-shadow:0 22px 40px rgba(16,18,17,.12); }
/* lifestyle scene photos (best seller cards) fill the whole square instead of being inset */
.prod__media img.photo{ left:0; top:0; width:100%; height:100%; object-fit:cover; }
.prod:hover .prod__media img.photo{ transform:scale(1.06); }
.prod:hover .prod__media img{ transform:scale(1.05) rotate(-2deg); }
.badge{
  position:absolute; top:12px; left:12px; padding:.28em .7em; border-radius:999px;
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff;
}
.badge--hot{ background:var(--hot); }
.badge--new{ background:var(--new); }
.badge--oem{ background:var(--oem); }
.prod__body{ padding:14px 4px 0; }
.prod__body h3{ font-size:1rem; }
.prod__body p{ font-size:.86rem; color:var(--muted); margin-top:2px; }
.prod__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.moq{ font-size:.78rem; font-weight:700; color:var(--ink); background:var(--tint-2); padding:.3em .7em; border-radius:999px; }

/* ---------------- category tiles ---------------- */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat{
  border-radius:var(--r-md); overflow:hidden; background:#fff; border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease; display:block;
}
.cat:hover{ transform:translateY(-4px); box-shadow:0 22px 40px rgba(16,18,17,.1); }
.cat__media{ display:block; position:relative; aspect-ratio:4/3; background:#fff; overflow:hidden; }
.cat__media img{ position:absolute; left:9%; top:9%; width:82%; height:82%; object-fit:contain; }
.cat__body{ display:block; padding:16px 18px 18px; }
.cat__body strong{ display:block; font-size:1.02rem; color:var(--ink); }
.cat__body em{ display:block; font-style:normal; font-size:.85rem; color:var(--muted); margin-top:3px; }
.cat__more{ display:inline-block; margin-top:12px; font-size:.82rem; font-weight:700; color:var(--ink); }
.cat:hover .cat__more{ color:var(--accent); }

/* ---------------- editorial band ---------------- */
.edit{ background:var(--ink); color:#cfd5d1; padding:84px 0; position:relative; overflow:hidden; }
.edit__bg{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.edit__scrim{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:linear-gradient(92deg, rgba(16,18,17,.95) 0%, rgba(16,18,17,.9) 42%,
             rgba(16,18,17,.62) 72%, rgba(16,18,17,.42) 100%);
}
.edit__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.band-stats{ display:grid; grid-template-columns:1fr 1fr; gap:28px 22px; align-content:center; }
.band-stats > div{ border-left:2px solid var(--accent-2); padding-left:16px; }
.band-stats dt{ color:#fff; font-size:2rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.band-stats dd{ margin:6px 0 0; color:#a9b3ad; font-size:.84rem; }
.edit h2{ color:#fff; margin:16px 0 18px; }
.edit p{ color:#b9c1bc; max-width:52ch; }
.edit .btn{ margin-top:26px; }
.ticks{ margin-top:22px; }
.ticks li{
  position:relative; padding:10px 0 10px 32px; color:#e4e8e5; font-size:.94rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ticks li:last-child{ border-bottom:0; }
.ticks li::before{
  content:""; position:absolute; left:0; top:16px; width:16px; height:16px; border-radius:50%;
  background:var(--accent);
}
.ticks li::after{
  content:""; position:absolute; left:5px; top:19px; width:4px; height:8px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(42deg);
}
.edit__stack{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:200px 160px; gap:16px; }
.ph{
  border-radius:var(--r-md); background:#222; position:relative; overflow:hidden;
}
.ph img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.ph--tall{ grid-row:span 2; }
.ph--white{ background:#fff; }
.ph--white img{ left:11%; top:11%; width:78%; height:78%; object-fit:contain; }

/* ---------------- service cards ---------------- */
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px; }
.card__n{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--tint-2); color:var(--ink); font-weight:800; font-size:.85rem; margin-bottom:16px;
}
.card h3{ margin-bottom:8px; }
.card p{ font-size:.9rem; color:var(--body); }

/* ---------------- steps ---------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.steps li{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px; }
.steps__n{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:#fff; font-weight:800; font-size:.85rem; margin-bottom:14px;
}
.steps h3{ margin-bottom:8px; }
.steps p{ font-size:.89rem; color:var(--body); }

/* ---------------- trust banner ---------------- */
.trust{ background:var(--tint-2); padding:38px 0; }
.trust__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.trust__i{ display:flex; flex-direction:column; gap:4px; }
.trust__i svg{ width:26px; height:26px; fill:var(--ink); margin-bottom:6px; }
.trust__i strong{ font-size:.94rem; color:var(--ink); }
.trust__i em{ font-style:normal; font-size:.82rem; color:var(--muted); }

/* ---------------- UGC strip ---------------- */
.ugc{ padding-bottom:60px; }
.ugc__strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ugc__t{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-sm);
  background:var(--tile,#eee); overflow:hidden;
}
.ugc__t img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.ugc__t{ transition:transform .22s ease; }
.ugc__t:hover{ transform:translateY(-4px); }

/* ---------------- inquiry ---------------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.grid2 h2{ margin:14px 0 14px; }
.grid2 > div > p{ color:var(--body); max-width:46ch; }
.info{ margin-top:24px; }
.info li{ display:flex; flex-direction:column; gap:2px; padding:13px 0; border-bottom:1px solid var(--line); }
.info strong{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.info a,.info span{ color:var(--ink); font-weight:600; font-size:.95rem; }
.info a:hover{ color:var(--accent); }

.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ display:block; margin-bottom:14px; }
.form label > span{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:6px; }
.form input,.form textarea{
  width:100%; padding:.8em .95em; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:.95rem; color:var(--ink); background:#fbfbf9;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--ink); background:#fff; }
.form textarea{ resize:vertical; }
.form__note{ margin-top:12px; font-size:.86rem; min-height:1.2em; }
.form__note.ok{ color:#1f7a4d; }
.form__note.err{ color:#c0392b; }

/* ---------------- dark CTA band (links to the contact page) ---------------- */
.ctaband{ background:var(--ink); padding:52px 0; }
.ctaband__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.ctaband h2{ color:#fff; }
.ctaband p{ color:#a9b3ad; margin-top:10px; max-width:52ch; font-size:.95rem; }
.ctaband__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------- newsletter ---------------- */
.news{ background:var(--accent); padding:54px 0; }
.news__inner{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.news h2{ color:#fff; margin-bottom:8px; }
.news p{ color:rgba(255,255,255,.86); font-size:.95rem; font-weight:500; }
.news__form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; position:relative; }
.news__form input{
  flex:1 1 240px; padding:.85em 1.1em; border-radius:999px; border:2px solid transparent;
  font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff;
}
.news__form input:focus{ outline:none; border-color:var(--ink); }
.news__note{ flex:1 0 100%; font-size:.84rem; font-weight:600; min-height:1.2em; color:rgba(255,255,255,.9); }

/* ---------------- footer ---------------- */
.foot{ background:var(--ink); color:#9aa39d; padding:64px 0 26px; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px; }
.foot h4{
  color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.foot a{ display:block; padding:5px 0; font-size:.9rem; }
.foot a.socials__i{ display:grid; place-items:center; padding:0; line-height:0; border-radius:999px; }
.foot a:hover{ color:#fff; }
.foot span{ display:block; padding:5px 0; font-size:.9rem; }
.foot p{ margin-top:16px; font-size:.88rem; max-width:40ch; color:#8b948e; }
.foot__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
}
.foot__lang{ display:flex; align-items:center; gap:12px; }
.foot__lang > span{ padding:0; font-size:.8rem; color:#8b948e; }
.foot__lang .lang__btn{ border-color:rgba(255,255,255,.24); color:#c3cac5; }
.foot__lang .lang__btn.is-active{ background:#fff; border-color:#fff; color:var(--ink); }
.foot__pay{ display:flex; gap:8px; }
.pay{
  padding:.35em .8em; border:1px solid rgba(255,255,255,.2); border-radius:8px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; color:#c3cac5;
}
.foot__legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:22px; font-size:.78rem; color:#7f8884;
}
.foot__legal span{ display:inline; padding:0; }
.foot__note{ color:#6d7671; }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .prods,.grid4,.steps,.trust__row{ grid-template-columns:repeat(2,1fr); }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .ugc__strip{ grid-template-columns:repeat(3,1fr); }
  .edit__inner{ grid-template-columns:1fr; gap:36px; }
  .grid2{ grid-template-columns:1fr; gap:34px; }
  .news__inner{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:#fff; padding:10px 22px 24px; border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px rgba(16,18,17,.14); transform:translateY(-140%);
    transition:transform .3s ease, visibility .3s ease; max-height:80vh; overflow:auto;
    visibility:hidden;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .lang--mobile{ display:flex; margin-top:16px; }
  .lang--desk{ display:none; }
  .burger{ display:block; }
  .head__cta{ padding:.7em 1.2em; font-size:.82rem; }
  .hero__viewport,.hero__slide.is-active{ min-height:460px; }
  .hero__photo{ object-position:72% center; }
  .hero__media{ width:26%; right:6%; opacity:.85; }
}

@media (max-width:620px){
  .ann{ padding:8px 10px; font-size:.74rem; }
  .ann__track{ height:2.7em; }
  .ann__item{ white-space:normal; line-height:1.3; text-align:center; overflow:visible; }
  .sec{ padding:56px 0; }
  .prods,.grid4,.steps,.cats,.trust__row,.ugc__strip{ grid-template-columns:1fr; }
  .ugc__strip{ grid-template-columns:repeat(2,1fr); }
  .form__row{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .hero__viewport,.hero__slide.is-active{ min-height:500px; }
  .hero__copy{ max-width:100%; }
  .hero__media{ width:32%; right:2%; opacity:.5; }
  .hero__ui{ flex-direction:row; }
  .sec__head--row{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* =========================================================
   interior pages (products · product detail · about · oem · contact)
   ========================================================= */
.pagehead{ background:var(--tint-2); padding:46px 0 40px; border-bottom:1px solid var(--line); }
.pagehead h1{ margin-bottom:10px; }
.pagehead p{ color:var(--body); font-size:.95rem; max-width:66ch; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:34px; }
.chip{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.5em 1.15em;
  font-family:inherit; font-size:.85rem; font-weight:700; color:var(--ink); cursor:pointer;
}
.chip:hover{ border-color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pp__count{ margin-left:auto; font-size:.85rem; color:var(--muted); font-weight:600; }

.catblock{ margin-bottom:58px; }
.catblock__head{ margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.catblock__head h2{ margin-bottom:5px; font-size:clamp(1.15rem,2vw,1.5rem); }
.catblock__head p{ color:var(--muted); font-size:.9rem; }
.prods--3{ grid-template-columns:repeat(3,1fr); }

.pdp__back{ display:inline-block; margin-bottom:24px; font-size:.85rem; font-weight:700; }
.pdp__back:hover{ color:var(--accent); }
.pdp__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:start; margin-bottom:70px; }
.gallery__main{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  position:relative; aspect-ratio:4/3; overflow:hidden;
}
.gallery__main img{ position:absolute; left:6%; top:6%; width:88%; height:88%; object-fit:contain; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.gallery__thumb{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  position:relative; aspect-ratio:1/1; overflow:hidden; padding:0; cursor:pointer;
}
.gallery__thumb.is-active{ border-color:var(--ink); box-shadow:0 0 0 2px rgba(16,18,17,.09); }
.gallery__thumb img{ position:absolute; left:9%; top:9%; width:82%; height:82%; object-fit:contain; }
.pdp__info h1{ margin:10px 0 8px; }
.pdp__tag{ color:var(--muted); font-size:.95rem; }
.specs{ width:100%; border-collapse:collapse; margin:22px 0 18px; font-size:.92rem; }
.specs th,.specs td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.specs th{ width:36%; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.specs td{ color:var(--ink); font-weight:600; }
.pdp__note{ font-size:.85rem; color:var(--muted); max-width:46ch; }
.pdp__cta{ margin-top:20px; }
.notfound{ max-width:620px; margin:0 auto; padding:80px 24px; text-align:center; }
.notfound h1{ margin-bottom:10px; }
.notfound p{ color:var(--muted); margin-bottom:24px; }

.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 22px; margin-bottom:12px;
}
.faq summary{ cursor:pointer; font-weight:700; color:var(--ink); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; font-weight:800; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:12px 0 0; font-size:.92rem; color:var(--body); }

.about-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:54px 0; }
.about-photos .ph{ aspect-ratio:4/3; }
.mapbox{
  background:var(--tint-2); border:1px dashed #cdd4cf; border-radius:var(--r-md);
  padding:44px 22px; text-align:center; color:var(--muted); font-size:.9rem; font-weight:600;
}

.ticks--light li{ color:var(--ink); border-color:var(--line); }

.nav a[aria-current="page"]{ color:var(--accent); }
.foot a[aria-current="page"]{ color:#fff; }

@media (max-width:1080px){
  .prods--3{ grid-template-columns:repeat(2,1fr); }
  .pdp__grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:620px){
  .prods--3{ grid-template-columns:1fr; }
  .about-photos{ grid-template-columns:1fr; }
  .pp__count{ margin-left:0; }
  .gallery__thumbs{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}


/* ---------------- scene band (full-bleed lifestyle) ---------------- */
.sceneband{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:clamp(300px,38vw,520px); }
.sceneband > img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.sceneband__scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,9,.86) 0%,rgba(8,10,9,.58) 40%,rgba(8,10,9,.14) 72%,rgba(8,10,9,0) 100%); }
.sceneband .wrap{ position:relative; z-index:2; color:#fff; }
.sceneband h2{ color:#fff; }
.sceneband p{ color:rgba(255,255,255,.88); max-width:52ch; margin:10px 0 22px; }
.tag--light{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------------- supply chain row ---------------- */
.sup{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.sup__i{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--tint); }
.sup__i img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.sup__i:hover img{ transform:scale(1.045); }
.sup__cap{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; color:#fff;
  background:linear-gradient(0deg,rgba(8,10,9,.88) 0%,rgba(8,10,9,.45) 55%,rgba(8,10,9,0) 100%); }
.sup__cap strong{ display:block; font-size:1.02rem; letter-spacing:-.01em; }
.sup__cap em{ font-style:normal; font-size:.85rem; color:rgba(255,255,255,.84); }
@media (max-width:900px){ .sup{ grid-template-columns:1fr; } .sup__i{ aspect-ratio:16/10; } }

/* about page: 工厂实拍 gallery */
.abg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.abg .ph{ aspect-ratio:4/3; }
@media (max-width:900px){ .abg{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .abg{ grid-template-columns:1fr; } }

/* category band: one full-bleed scene with the four category links overlaid */
.catscene{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:clamp(360px,46vw,640px); }
.catscene > img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.catscene__scrim{ position:absolute; inset:0;
  background:linear-gradient(95deg,rgba(8,10,9,.9) 0%,rgba(8,10,9,.7) 38%,rgba(8,10,9,.28) 66%,rgba(8,10,9,.05) 100%); }
.catscene__inner{ position:relative; z-index:2; color:#fff; }
.catscene h2{ color:#fff; }
.catscene p{ color:rgba(255,255,255,.86); max-width:50ch; margin:10px 0 22px; }
.catscene__links{ display:flex; flex-wrap:wrap; gap:12px; }
.catscene__links a{
  display:inline-block; padding:.55em 1.15em; border-radius:999px; font-size:.9rem; font-weight:700;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  transition:background .18s ease, transform .18s ease;
}
.catscene__links a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }

/* ---------------- shop by category (four tall lifestyle cards) ---------------- */
.catshop{ padding:66px 0 10px; }
.catshop__head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.catshop__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.catshop__item{ display:block; color:var(--ink); }
.catshop__media{
  display:block; position:relative; overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:3/4; background:var(--tint);
}
.catshop__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease;
}
.catshop__item:hover .catshop__media img{ transform:scale(1.05); }
.catshop__name{ display:block; margin-top:14px; font-weight:800; font-size:1.03rem; letter-spacing:-.01em; }
.catshop__sub{ display:block; margin-top:5px; color:var(--muted); font-size:.87rem; }
@media (max-width:900px){
  .catshop{ padding-top:46px; }
  .catshop__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .catshop__head{ flex-direction:column; align-items:flex-start; }
}

/* WhatsApp block without the QR card: one readable column */
.wa--slim{ display:block; max-width:780px; margin-inline:auto; }
.wa--slim .wa__body{ max-width:100%; }

/* ---------------- OEM page: tag lists ---------------- */
.taglist{ display:flex; flex-wrap:wrap; gap:10px; }
.taglist span{
  display:inline-block; padding:.5em 1.05em; border-radius:999px; font-size:.9rem; font-weight:600;
  color:var(--ink); background:var(--tint); border:1px solid var(--line);
}
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:900px){ .grid3{ grid-template-columns:1fr; } }

/* mission line on the about page */
.motto{
  margin:22px 0 0; font-weight:800; letter-spacing:-.01em; color:var(--ink);
  font-size:clamp(1.05rem,1.6vw,1.25rem);
}
.motto::before{ content:""; display:block; width:44px; height:3px; background:var(--accent); margin-bottom:14px; border-radius:2px; }

/* ---------------- OEM page imagery ---------------- */
.oemband{ line-height:0; }
.oemband img{ width:100%; height:clamp(220px,30vw,420px); object-fit:cover; display:block; }
.tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.tiles figure{ margin:0; }
.tiles img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--tint); display:block;
}
.tiles figcaption{ margin-top:9px; font-size:.85rem; font-weight:600; color:var(--body); }
.steps__img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm);
  margin-bottom:16px; display:block;
}
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }