/* ============================================================
   Linara Linen — WordPress integration overrides
   ============================================================ */

/* ---- About page: mill numbers (nums grid) ---- */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 44px; margin-top: 8px; }
.num-item { border-top: 1px solid var(--line); padding-top: 18px; }
.num-item .v { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 54px); color: var(--ink); line-height: 1.05; font-weight: 500; letter-spacing: -0.015em; }
.num-item .k { font-family: var(--grotesk); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); margin: 8px 0 4px; }
.num-item .d { font-size: 13.5px; color: var(--gray-400); }
@media (max-width: 720px) { .nums { grid-template-columns: repeat(2, 1fr); gap: 22px 28px; } }
@media (max-width: 480px) { .nums { grid-template-columns: 1fr; } }

/* ---- Blog single: article body ---- */
.article-content { font-size: 16.5px; line-height: 1.9; color: var(--gray-600); }
.article-content h2 {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(22px, 2.8vw, 28px); line-height: 1.2;
  margin: 44px 0 16px; padding-left: 16px;
  border-left: 3px solid var(--flax);
  letter-spacing: -0.01em;
}
.article-content h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(19px, 2.2vw, 23px); margin: 30px 0 10px; }
.article-content p { margin: 0 0 18px; }
.article-content ul { list-style: none; margin: 0 0 20px; }
.article-content ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.article-content ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--flax); }
.article-content b, .article-content strong { color: var(--ink); font-weight: 600; }
.article-content a { text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--ink); }
.article-content img { height: auto; margin: 10px 0 22px; }
.article-content .tip {
  background: var(--bg-warm); border-left: 3px solid var(--flax);
  padding: 18px 20px; margin: 24px 0; font-size: 15.5px;
}
.article-content blockquote { border-left: 3px solid var(--flax); padding-left: 18px; margin: 22px 0; color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 19px; }

/* ---- Policy pages ---- */
.policy { max-width: 800px; margin: 0 auto; font-size: 16px; line-height: 1.85; color: var(--gray-600); }
.policy h2 { font-family: var(--serif); color: var(--ink); font-weight: 500; font-size: 24px; margin: 36px 0 12px; }
.policy h3 { font-family: var(--serif); color: var(--ink); font-weight: 500; font-size: 19px; margin: 26px 0 8px; }
.policy p { margin: 0 0 16px; }
.policy ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.policy ul li { margin-bottom: 8px; }
.policy a { text-decoration: underline; }

/* ---- WordPress core bits ---- */
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--gray-400); text-align: center; margin-top: 6px; }
.article-content img, .policy img { height: auto; }
img { height: auto; }

/* ---- Fluent Forms visual merge (form on warm background) ---- */
.ff-form { font-family: var(--sans); }
.ff-form .ff-el-input--label label { font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.ff-form .ff-el-form-control {
  background: #fff; border: 1px solid var(--line-2); border-radius: 0;
  font-family: var(--sans); font-size: 15px; padding: 12px 14px; color: var(--ink);
  min-height: 48px;
}
.ff-form .ff-el-form-control:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.ff-form .ff-el-group, .ff-form .ff-el-input--content { margin-bottom: 0; }
.ff-form textarea.ff-el-form-control { min-height: 130px; }
.ff-form .ff-btn-submit {
  background: var(--ink) !important; color: #fff !important; border-radius: 999px !important;
  font-family: var(--grotesk) !important; font-size: 12px !important; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 16px 36px !important; font-weight: 500;
}
.ff-form .ff-btn-submit:hover { background: #000 !important; }
.ff-message-success { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 0; font-family: var(--sans); }
.ff-el-input--content .ff-el-form-check { margin-bottom: 8px; }
.ff-form .ff-el-form-check-input { border-radius: 0 !important; border-color: var(--line-2) !important; }
.ff-form .ff-el-form-check-input:checked { background: var(--ink) !important; border-color: var(--ink) !important; }
.ff-form select.ff-el-form-control { appearance: auto; }
@media (max-width: 720px) {
  .ff-form .ff-cell, .ff-form .ff-el-group { width: 100% !important; }
}

/* ---- Contact: notice + honeypot ---- */
.ll-notice { padding: 18px 22px; margin-bottom: 26px; font-size: 15px; line-height: 1.7; border: 1px solid; }
.ll-notice--ok { border-color: #9DB89B; background: #F0F5EF; color: #2F4A2D; }
.ll-notice--err { border-color: #D9A8A0; background: #FAF0EE; color: #7A332A; }
.ll-notice b { color: inherit; }
.ll-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Policy pages typography ---- */
.policy { max-width: 780px; margin: 0 auto; font-size: 16px; line-height: 1.85; color: var(--gray-600); }
.policy h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(22px, 2.6vw, 27px); margin: 40px 0 14px; }
.policy p { margin: 0 0 16px; }
.policy ul, .policy ol { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.policy a { text-decoration: underline; }

/* ---- Article (blog single) container ---- */
.article { max-width: 840px; margin: 0 auto; padding: clamp(48px, 8vw, 90px) var(--pad) var(--sec); }
.article h1 { font-size: clamp(30px, 4.6vw, 48px); margin: 10px 0 18px; line-height: 1.12; }
.article .meta { font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-400); }
.article-content ul, .article-content ol { list-style: disc; padding-left: 24px; margin: 0 0 22px; }
.article-content img, .article-content iframe { max-width: 100%; height: auto; border-radius: 0; }
.article-content .tip { border: 1px solid var(--flax); border-left: 4px solid var(--flax); padding: 16px 20px; margin: 26px 0; background: var(--bg-warm); font-size: 15.5px; }
.article-content a { text-decoration: underline; }

/* ---- WordPress alignment helpers ---- */
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--gray-400); text-align: center; margin-top: 6px; }

/* ---- Fluent Form / plugin leftovers (unused now) ---- */

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 720px) {
  /* Nav: hide the WA circle so logo + burger fit comfortably in <400px */
  .site-header .nav-wa { display: none; }
  /* Hero h1: prototype sets max-width:8.5em (~425px at 52px) which overflows 390 viewports */
  .hero h1 { max-width: 100%; }
  .hero .lede { max-width: 100%; }
  /* Hero stats: stack instead of forcing 4 items into a narrow viewport */
  .hero .stats { flex-direction: column; gap: 14px; align-items: flex-start; }
  .hero .stats > div { display: flex; align-items: baseline; gap: 12px; }
  .hero .stats > div b { display: inline-block; min-width: 0; }
  /* Hero CTA buttons: stack full-width */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta .btn { justify-content: center; }
  /* Accred grid: prototype covers 1024→? and 480→2, but not 720 — fill the gap */
  .accred-grid { grid-template-columns: repeat(2, 1fr); }
  .accred-item { padding: 20px 18px; }
  .accred-item:nth-child(odd) { border-left: 0; }
  .accred-item:nth-child(1), .accred-item:nth-child(2) { border-top: 0; }
  /* Footer: stack all 4 sections instead of staying 2-col */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  /* PDP: gallery stacked, image height controlled */
  .pdp .container { gap: 28px; }
  /* Numerals on about page already handled, but ensure section padding not too big */
}
@media (max-width: 480px) {
  /* Tighter section padding on tiny screens */
  .section { padding: clamp(48px, 7vw, 80px) 0; }
  /* Hero CTA & every CTA row: full-width buttons */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: center; }
  /* Accred items: smaller icon + text */
  .accred-item { padding: 14px 12px; gap: 12px; }
  .accred-item .ic { width: 34px; height: 34px; font-size: 8.5px; }
  .accred-item .tx { font-size: 12.5px; }
  .accred-item .tx b { font-size: 12.5px; }
  /* Product card: bigger tap targets */
  .prod-card .thumb { aspect-ratio: 4/3; }
  /* Announce marquee smaller padding */
  .announce-track span { font-size: 10px; letter-spacing: .16em; }
  /* Hero min-height off so it doesn't force scroll on very small phones */
  .hero { min-height: 0; padding-bottom: 60px; }
}

/* ---- Overflow root fix: closed drawer & fixed decor must not widen the page ---- */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
@media (max-width: 720px) {
  .nav-menu { visibility: hidden; }
  .nav-menu.open { visibility: visible; }
}

/* ============================================================
   Blend spec tables — 每种混纺一张规格表（按产品逐行列）
   ============================================================ */
.blend-spec {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0;
  margin-bottom: 26px;
  overflow: hidden;
}
.blend-spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.blend-spec__head h3 {
  font-size: 24px;
  margin: 0;
}
.blend-spec__count {
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}
/* 表格在卡片内不再额外加外框 */
.blend-spec .spec-table { margin: 0; }
.blend-spec .spec-table th {
  padding: 12px 20px;
  font-size: 11px;
}
.blend-spec .spec-table td {
  padding: 13px 20px;
  font-size: 13.5px;
  vertical-align: top;
}
/* 首列（成分）允许换行，其余列不换行 */
.blend-spec .spec-table td:first-child { white-space: normal; }
.blend-spec .spec-table td:not(:first-child) { white-space: nowrap; }
.blend-spec .spec-table td a {
  color: var(--ink);
  border-bottom: 1px solid var(--flax);
  font-family: var(--grotesk);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.blend-spec .spec-table td a:hover { color: var(--flax); }
.blend-spec__note {
  margin: 0;
  padding: 16px 26px 20px;
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.65;
  border-top: 1px solid var(--line);
}
.blend-spec__note b { color: var(--ink); }

/* 通用参数卡：并入规格区，视觉上和上面几张混纺卡同族但略作区分 */
.blend-spec--general {
  background: var(--bg-warm);
  margin-top: 34px;
}
.blend-spec--general .blend-spec__head {
  border-bottom-color: var(--line);
}
.blend-spec--general .spec-table td:first-child {
  font-family: var(--grotesk);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gray-400);
}
.blend-spec--general .spec-table td:not(:first-child) { color: var(--ink); }

/* 表格下方的通用商务条款 */
.spec-foot {
  margin: 6px 0 0;
  padding: 18px 22px;
  background: var(--bg-warm);
  border-left: 3px solid var(--flax);
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.65;
}
.spec-foot b { color: var(--ink); }

/* ---- 规格表横向溢出根治 ----
   基础样式里 th/td 有 20px 内边距 + 首列 nowrap，
   窄屏时表格实际宽度会超过容器，向右撑破布局（并反噬到上方 hero 区）。
   这里包一层可横滑容器，并允许首列换行。 */
.spec-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.spec-table th,
.spec-table td { min-width: 0; }
.spec-table td:first-child { white-space: normal; }

/* 首列不换行的场景（如参数名很短的通用表）保持整洁 */
.spec-table--tight td:first-child { white-space: nowrap; }

/* 移动端：规格表改为两列堆叠，避免横向溢出 */
@media (max-width: 720px) {
  .blend-spec__head { padding: 18px 16px 14px; flex-direction: column; gap: 6px; }
  .blend-spec__head h3 { font-size: 20px; }
  .blend-spec .spec-table,
  .blend-spec .spec-table tbody,
  .blend-spec .spec-table tr,
  .blend-spec .spec-table td { display: block; width: 100%; }
  .blend-spec .spec-table th { display: none; }
  .blend-spec .spec-table tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .blend-spec .spec-table td {
    padding: 3px 0;
    border: 0;
    white-space: normal !important;
  }
  .blend-spec .spec-table td:first-child { font-size: 14px; }
  .blend-spec .spec-table td:not(:first-child) { font-size: 12.5px; color: var(--gray-600); }
  .blend-spec__note { padding: 14px 16px 16px; }
  .spec-foot { padding: 16px; }

  /* 通用参数表在手机上同样堆叠 */
  .section > .container > .spec-table { display: block; }
  .section > .container > .spec-table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .section > .container > .spec-table th { display: none; }
  .section > .container > .spec-table td {
    display: block;
    width: 100%;
    padding: 2px 0;
    border: 0;
  }
  .section > .container > .spec-table td:first-child { font-size: 13px; }
  .section > .container > .spec-table td:not(:first-child) { font-size: 14px; color: var(--ink); }
}