/* ==========================================================================
   Site polish — icon / number / process sections brought up to the approved
   design. Loaded after main.css on purpose: main.css stays untouched so other
   work on that file cannot collide with this.
   2026-10-01
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Numbers row  (home "Our Factory Strength", about "Our Numbers",
      oem stats band)
   Design: red line icon on the LEFT, big number + small label on the right,
   thin vertical rule between the cells.
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:0;text-align:left}
.stats.five{grid-template-columns:repeat(5,1fr)}
/* grid, not flex: the icon spans both rows so the number sits ABOVE its label
   instead of beside it (the label and value are siblings in the markup). */
.stat{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;padding:4px 12px;
  border-inline-end:1px solid var(--line);
}
.stat:last-child{border-inline-end:none}
.stat .ico{grid-row:1/3;width:38px;height:38px;margin:0;color:var(--brand);stroke-width:1.4}
.stat b{display:block;grid-column:2;font-size:23px;font-weight:800;line-height:1.1;letter-spacing:-.3px}
.stat span{display:block;grid-column:2;font-size:12px;color:var(--muted);line-height:1.3}

/* the red band on the OEM page keeps white icons */
.stats-band .stat{border-inline-end-color:rgba(255,255,255,.25)}
.stats-band .stat .ico{color:#fff}
.stats-band .stat b{color:#fff}
.stats-band .stat span{color:#fff;opacity:.85}

/* --------------------------------------------------------------------------
   2. Process row  (home "Our Process")
   Design: red line icon on the LEFT of the text, arrow to the next step.
   -------------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);align-items:start;gap:0}
/* grid for the same reason as .stat — icon spans both rows, label above copy */
.step{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:10px;align-items:start;text-align:left;padding:0 6px;
}
.step .ico{grid-row:1/3;width:36px;height:36px;margin:0;color:var(--brand);stroke-width:1.4}
.step b{display:block;grid-column:2;font-size:14px;margin-bottom:2px}
.step span{display:block;grid-column:2;font-size:12px;color:var(--muted);line-height:1.4}
.step::after{content:"→";position:absolute;inset-inline-end:-8px;top:9px;color:#d8c9cc;font-size:16px}
.step:last-child::after{display:none}
.step.on .ico{color:var(--brand)}

/* --------------------------------------------------------------------------
   3. Process row, solid variant  (oem "Simple Steps To Build Your Brand")
   Design: solid deep-red disc with a white line icon, label underneath.
   -------------------------------------------------------------------------- */
.flow-solid .step{display:block;text-align:center;padding:0 10px}
.flow-solid .step .ico{
  width:88px;height:88px;padding:23px;margin:0 auto 18px;
  background:var(--brand);color:#fff;border-radius:50%;stroke-width:1.4;
  box-shadow:0 8px 20px rgba(139,26,43,.20);
}
.flow-solid .step b{font-size:15px;color:var(--brand);margin-bottom:6px}
.flow-solid .step::after{
  content:"→";top:32px;inset-inline-end:-9px;
  color:var(--brand);font-size:20px;font-weight:700;
}

/* --------------------------------------------------------------------------
   4. Icon + text columns  (about/oem "Why Choose Us", factory "Our Strengths",
      contact "Why Contact")
   Design: large red line icon, bold title, muted copy, hairline rule between.
   -------------------------------------------------------------------------- */
.why-contact{gap:0}
.why-contact .wc{padding:6px 22px;border-inline-end:1px solid var(--line)}
.why-contact .wc:last-child{border-inline-end:none}
.why-contact .wc .ico{width:54px;height:54px;margin:0 auto 18px;color:var(--brand);stroke-width:1.35}
.why-contact .wc b{display:block;font-size:15.5px;margin-bottom:8px}
.why-contact .wc span{font-size:13px;color:var(--muted);line-height:1.5}

/* --------------------------------------------------------------------------
   5. Home "Factory Direct, Quality Assurance" mini features
   Design: four across, red icon above, centred.
   Scoped to .feat4 — the OEM page's .mini-feat rows keep their icon-left
   layout, which the design also calls for there.
   -------------------------------------------------------------------------- */
.feat4{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
.feat4 .feat{display:block;text-align:center}
.feat4 .feat .ico{width:44px;height:44px;margin:0 auto 12px;color:var(--brand);stroke-width:1.4}
.feat4 .feat b{display:block;font-size:14px;margin-bottom:5px}
.feat4 .feat span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* the OEM mini rows stay icon-left, just a little more presence */
.feat .ico{width:32px;height:32px}

/* --------------------------------------------------------------------------
   6. Promises strip
   Two variants, both taken from the design:
     - on the deep-red bar (home)   : white outline icon, uppercase white label
     - light variant (products page): red icon, dark label, muted sub-label
   The light one is the variant that was reading as "thin" — the icons were
   inheriting the dark body colour instead of the brand red.
   -------------------------------------------------------------------------- */
.promise{gap:15px}
.promise .ico{width:36px;height:36px;stroke-width:1.5}
.promise b{font-size:14.5px;letter-spacing:.4px}
.promise span{font-size:12.5px;opacity:.82}

.promises--light{background:#f7f3f2;color:var(--ink)}
.promises--light .promise{border-inline-end:1px solid #e7ded9}
.promises--light .promise:last-child{border-inline-end:none}
.promises--light .promise .ico{width:44px;height:44px;color:var(--brand);stroke-width:1.5}
.promises--light .promise b{color:var(--ink)}
.promises--light .promise span{color:var(--muted);opacity:1}

/* --------------------------------------------------------------------------
   7. Client wall
   Design shows the names sitting in white cards rather than floating in grey.
   NOTE: these are real retailers' names — see the note in 素材方案-图片.md
   about not presenting them as customers unless they actually are.
   -------------------------------------------------------------------------- */
.clients{gap:16px;padding:4px 0}
.clients div{
  flex:1 1 150px;max-width:200px;height:84px;
  display:grid;place-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  color:#33383d;font-size:19px;font-weight:700;letter-spacing:.3px;
  filter:none;opacity:1;text-align:center;line-height:1.25;
}

/* --------------------------------------------------------------------------
   8. Process circles  (about/factory "Professional Production Process")
   Slightly larger discs so they carry the same weight as the design.
   -------------------------------------------------------------------------- */
.fstep .thumb{width:124px;height:124px}
.fstep .num{width:36px;height:36px;font-size:14px;margin:-18px auto 12px}
.fstep::after{top:44px}
.fstep b{font-size:14.5px}
.fstep span{font-size:12.5px;line-height:1.45}

/* --------------------------------------------------------------------------
   10. Column-count helpers
   These used to live as inline style="grid-template-columns:repeat(N,1fr)"
   in the templates, which beat every media query — so a 4-across row stayed
   4-across on a phone and blew the page width out. As classes they collapse
   with everything else.
   -------------------------------------------------------------------------- */
.stats-4{grid-template-columns:repeat(4,1fr)}
.wc-5{grid-template-columns:repeat(5,1fr)}
.flow-5{grid-template-columns:repeat(5,1fr)}

/* --------------------------------------------------------------------------
   11. Narrow screens
   IMPORTANT: every grid re-declared above must repeat its breakpoints here.
   main.css sets these at 1080/720, but its rules come earlier in the cascade,
   so a bare `.stats{6 columns}` up top would silently win on a phone.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .flow,.flow-circles,.flow-5,.stats,.stats.five{grid-template-columns:repeat(3,1fr)}
  .flow,.flow-circles,.flow-5{row-gap:30px}
  .stats-4,.why-contact,.wc-5{grid-template-columns:repeat(2,1fr)}
  .feat4{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .stat{border-inline-end:none;padding:10px 8px}
  .why-contact .wc{border-inline-end:none;padding:12px 10px}
}
@media (max-width:720px){
  .flow,.flow-circles,.flow-5,.stats,.stats.five,
  .stats-4,.why-contact,.wc-5{grid-template-columns:repeat(2,1fr)}
  .step::after,.fstep::after{display:none}
  .step{display:block;text-align:center}
  .step .ico{margin:0 auto 10px}
  .flow-solid .step{display:block;text-align:center}
  .flow-solid .step .ico{width:76px;height:76px;padding:20px}
  .stat{justify-items:start}
  .clients div{flex:1 1 132px;max-width:none;height:74px;font-size:17px}
}
@media (max-width:520px){
  .flow,.flow-circles,.flow-5,.stats,.stats.five,.stats-4,.why-contact,.wc-5{grid-template-columns:1fr}
  .feat4{grid-template-columns:1fr}
  .stat{justify-items:center}
  .clients div{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   12. Shop sidebar on phones — collapsible panels
   (method chosen by the user on 2026-10-02, from a 5-way clickable mock-up)

   At <=1080px the sidebar stacks ABOVE the product grid, so its full
   ~1600px pushed the first product ~2200px down the page. Both boxes now
   start closed and open on tap.

   Everything here is inside the media query, and the .collapsed class is
   only ever added by the page's own script — so:
     * desktop layout is untouched
     * if the script has not run yet (or is cached out), the panels simply
       render open, exactly as before
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .shop-side .side-title{cursor:pointer;padding-right:46px;position:relative;
    -webkit-tap-highlight-color:transparent}
  .shop-side .side-title::after{content:"\25BE";position:absolute;right:16px;top:50%;
    transform:translateY(-50%);font-size:15px;line-height:1;transition:transform .22s}
  .shop-side .side-box.collapsed .side-title::after{
    transform:translateY(-50%) rotate(-90deg)}
  .shop-side .side-box.collapsed .side-body{display:none}
  .shop-side .side-box.collapsed{margin-bottom:14px}
}


/* ==========================================================================
   首页顶部：hero 副标题 + 顶栏社交图标   (2026-10-02 按图纸还原)
   ========================================================================== */

/* 图纸上「Your Reliable Wholesale Partner」跟主标题几乎一样大，是一行标题
   配一行副标题；线上被做成 24px 的小字（主标题 52px），看着像脚注。
   按图纸比例调到约 88%。 */
.hero h1 small{font-size:46px;font-weight:700;opacity:.96;margin-top:8px;letter-spacing:-.5px}
/* main.css 把 h1 限在 640px，52px 的主标题会被挤成两行、副标题再两行 —— 一共四行。
   图纸是干净的两行，所以放宽到能各自占一行。 */
.hero h1{max-width:820px}
@media(max-width:720px){
  .hero h1 small{font-size:28px}
}

/* 顶栏社交图标：还没填链接时也显示（不可点），填了链接就变成 <a>。
   原来只有 .topbar-right a 有圆形底，所以这里把 span 版本补齐。 */
.topbar-right .yb-soc{width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border-radius:0;color:#fff;opacity:.94;transition:opacity .2s}
.topbar-right .yb-soc svg{width:16px;height:16px}
.topbar-right a.yb-soc:hover{opacity:1}
.topbar-right .yb-soc-pending{cursor:default}


/* ==========================================================================
   首页顶部 第二轮 (2026-10-02)
   ========================================================================== */

/* ---------- Logo：改成图纸那样的文字标识 ----------
   原来是 YBW 图片（site_logo 选项）。图纸上是「Yiwu Bras Wholesale」整串
   品牌红粗体，所以这里调大字号并统一成品牌色，跟图纸一致。 */
.logo{font-size:28px;font-weight:800;letter-spacing:-.5px}
.logo a{color:var(--brand)}
.logo em{color:var(--brand);font-style:normal}
@media(max-width:720px){
  .logo{font-size:22px}
}

/* Logo 从图片换成 28px 文字后变宽，header 一行放不下 —— About Us / OEM & ODM
   被折成两行。收紧各处间距，并禁止导航项内部换行（宁可整体挤，不要单字换行）。 */
.header .wrap{gap:18px}
.nav{gap:17px}
.nav-item>a{white-space:nowrap}
.header-search{flex:0 1 200px;min-width:140px}
.logo{font-size:26px}
@media(max-width:1080px){
  .logo{font-size:23px}
  .header .wrap{gap:12px}
  .nav{gap:13px}
}

/* ---------- 顶栏语言切换器 ----------
   TranslatePress 把配色写成元素上的 inline CSS 变量（--bg:#ffffff 等），
   inline 只能靠 !important 压过。原来是白底方块，在红顶栏上很跳；
   改成半透明白底 + 白字，跟旁边的社交图标一致。
   ⚠️ 用户后面要做阿拉伯语版，这个控件**必须保留**，只是换了配色。 */
.topbar-right .trp-shortcode-switcher__wrapper{
  --bg:rgba(255,255,255,.15)!important;
  --bg-hover:rgba(255,255,255,.26)!important;
  --text:#fff!important;
  --text-hover:#fff!important;
  --border:0!important;
  --border-width:0!important;
  --border-color:transparent!important;
  --border-radius:999px!important;
}
.topbar-right .trp-language-item-name{color:#fff}


/* ==========================================================================
   手机端修复 (2026-10-02)
   ========================================================================== */

/* ---------- hero 容器 ----------
   main.css 里 `.hero-inner{padding:70px 0}` 把 `.wrap` 的左右 24px 内边距覆盖掉了；
   而且它是 `.hero`（flex 容器）的子元素，`.wrap` 的 `margin:0 auto` 让它变成
   「收缩到内容宽度再居中」——手机上内容比屏幕宽，就顶到屏幕外（左边被切、右边溢出）。
   改成正常的满宽容器。 */
.hero .hero-inner{width:100%;min-width:0;padding:70px 24px}

/* ---------- 顶栏：语言切换器压住标签语 ----------
   切换器的可交互层是绝对定位、贴右边缘向左生长的，手机上顶栏一行挤不下，
   它就盖在标签语上。让顶栏在窄屏换行：第一行标签语，第二行语言+社交图标。 */
/* 语言切换器已经隐藏，顶栏不需要再为它让位。
   回到用户喜欢的那版：**一行** —— 标签语在左（窄屏时自己折行），社交图标在右。
   原来出问题是因为切换器绝对定位压过来，现在切换器没了，这个布局就成立了。 */
@media(max-width:720px){
  .tb-tagline{font-size:12px;line-height:1.45}
}


/* ---------- 语言切换器：跟社交图标同一视觉级别 ----------
   原来是个半透明大白药丸，比旁边的图标大一圈，顶栏上很跳。
   改成：无底色、只留国旗，尺寸对齐社交图标。 */
.topbar-right .trp-shortcode-switcher__wrapper{
  --bg:transparent!important;
  --bg-hover:rgba(255,255,255,.18)!important;
  --border:0!important;
  --border-width:0!important;
  --font-size:0px!important;
}
.topbar-right .trp-shortcode-switcher__wrapper .trp-language-item{padding:0 2px}
.topbar-right .trp-language-item-name{display:none}
.topbar-right .trp-flag-image{width:20px;height:auto;border-radius:2px}