/* ============================================================================
   店铺宣传页 / 文档页版式
   ----------------------------------------------------------------------------
   用途：单页（/page/{slug}）的正文容器里，用一组约定好的类名拼出营销版面。
   店主在后台「页面管理 → 新建页面」选版式，系统预填这些结构，他只改字换图。

   两类页面：
     · 版式页（.sp-hero 开头）—— 产品画册 / 企业形象，区块自行拼版；
     · 文档页（.sp-doc）—— 政策 / FAQ / 配送 / 支付，靠 .sp-doc 统一正文排版。

   为什么单独写一份而不是塞进 kit.css：
     kit.css 是 18 个模板页 + 通用页共用的组件层（顶栏/页脚/商品卡），
     这里是「文档型页面」的版式，只有单页用。

   配色：全部读 kit 令牌（--tk-accent / --tk-ink / --tk-paper），
        店主的品牌色由 Themeaccent 覆盖注入，这里不用改一行。
   断点：只做 992 / 600 两档，和 kit 保持一致。

   2026-11 改版：原来区块间距按 88~104px 给，纯文档页正文又被模板里的
   760 居中规则单独处理，结果标题贴左、正文居中、右边一大片空。
   现在所有横向留白统一走 --tk-gutter，垂直间距收到 28~48，文档页
   收进 820 的阅读栏并在同一基线对齐。
   ========================================================================== */

/* ---------- 0. 容器 ---------- */
/* 与 .tk-wrap 同宽同内边距：页面里任何一块都和顶栏对齐 */
.sp-shell {
  max-width: var(--tk-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--tk-gutter, 24px);
}

.sp-wrap {
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding-inline: var(--tk-gutter, 24px);
}

/* ---------- 1. 页头（文档页用） ---------- */
/* 页头做成一条通栏白带（.sp-pagebar），正文是纸色 —— 页面顶部和主体之间
   有层次，不会出现「一整片米色，中间飘几个字」的空荡感。
   页头和正文统一收在 900 的栏里居中，两者左基线严格一致：
   之前页头贴容器左边、正文 760 居中，一进页面就是错位。 */
.sp-pagebar {
  background: var(--tk-card, #fff);
  border-bottom: 1px solid var(--tk-line, #E9E3D9);
}

.sp-pagehead {
  max-width: 900px;
  margin-inline: auto;
  padding: 28px 0 22px;
}

.sp-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tk-ink-3, #8C8479);
}

.sp-crumb a {
  color: var(--tk-ink-3, #8C8479);
  transition: color .15s ease;
}

.sp-crumb a:hover { color: var(--tk-accent, #B4633F); }

.sp-crumb__sep { opacity: .55; }

.sp-crumb em {
  font-style: normal;
  color: var(--tk-ink-2, #57514A);
  max-width: 46ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sp-pagehead h1 {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 33px);
  font-weight: 650;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--tk-ink, #201D1A);
}

.sp-pagehead__sub {
  max-width: 60ch;
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--tk-ink-3, #8C8479);
}

/* ---------- 2. 文档型正文（政策 / FAQ / 配送 / 支付 / 招聘） ---------- */
/* 900 是中文长文能接受的宽度上限；页头同宽，两者对齐后才像一篇文章。
   内容居中会让左右各留 150，但至少左右对称 —— 比「标题贴左 + 正文居中」
   那种半吊子对齐好看得多。 */
.sp-doc {
  max-width: 900px;
  margin-inline: auto;
  padding-top: 26px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--tk-ink-2, #57514A);
}

.sp-doc > *:first-child { margin-top: 0; }

.sp-doc p {
  margin: 0 0 16px;
  color: var(--tk-ink-2, #57514A);
}

/* 小节标题：左侧一小段主色竖条，比纯加粗更像「章节」 */
.sp-doc h2 {
  position: relative;
  margin: 38px 0 14px;
  padding-left: 14px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--tk-ink, #201D1A);
}

.sp-doc h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 3px;
  height: .92em;
  border-radius: 2px;
  background: var(--tk-accent, #B4633F);
}

.sp-doc h3 {
  margin: 26px 0 10px;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--tk-ink, #201D1A);
}

.sp-doc h4 {
  margin: 20px 0 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tk-ink, #201D1A);
}

.sp-doc ul,
.sp-doc ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.sp-doc ol { counter-reset: sp-doc-ol; }

.sp-doc li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  line-height: 1.8;
  color: var(--tk-ink-2, #57514A);
}

.sp-doc ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tk-accent, #B4633F);
  opacity: .85;
}

.sp-doc ol > li { counter-increment: sp-doc-ol; }

.sp-doc ol > li::before {
  content: counter(sp-doc-ol);
  position: absolute;
  left: 0;
  top: .32em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tk-accent-soft, #F6EBE4);
  color: var(--tk-accent, #B4633F);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sp-doc blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--tk-accent, #B4633F);
  border-radius: 0 10px 10px 0;
  background: var(--tk-surface, #F4F0E9);
  color: var(--tk-ink-2, #57514A);
}

.sp-doc blockquote p:last-child { margin-bottom: 0; }

.sp-doc hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--tk-line, #E9E3D9);
}

.sp-doc a {
  color: var(--tk-accent, #B4633F);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.sp-doc a:hover { color: var(--tk-accent-hover, #9E5334); }

.sp-doc strong { font-weight: 650; color: var(--tk-ink, #201D1A); }

.sp-doc img {
  max-width: 100%;
  height: auto;
  margin: 22px 0;
  border-radius: var(--tk-r, 18px);
}

.sp-doc table {
  width: 100%;
  margin: 18px 0 24px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tk-line, #E9E3D9);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}

.sp-doc th,
.sp-doc td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--tk-line, #E9E3D9);
  vertical-align: top;
}

.sp-doc thead th {
  background: var(--tk-surface, #F4F0E9);
  font-weight: 600;
  color: var(--tk-ink, #201D1A);
}

.sp-doc tr:last-child > th,
.sp-doc tr:last-child > td { border-bottom: 0; }

/* 文档页里首段的「导语」：稍微放大、压深，和后面正文拉开层次 */
.sp-doc > p:first-of-type {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--tk-ink-2, #57514A);
}

/* 正文末尾的兜底求助条：政策 / FAQ 这类页面翻到底通常没有下文，
   一条「问客服」比直接接页脚更自然，也把页面底部撑住。 */
.sp-doc__help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 900px;
  margin: 34px auto 0;
  padding: 18px 22px;
  border: 1px solid var(--tk-line, #E9E3D9);
  border-radius: var(--tk-r, 18px);
  background: var(--tk-card, #fff);
}

.sp-doc__help-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sp-doc__help-txt strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--tk-ink, #201D1A);
}

.sp-doc__help-txt span {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tk-ink-3, #8C8479);
}

/* ---------- 3. 首屏 ---------- */
.sp-hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(24px, 4vw, 52px);
  /* 顶对齐：图比文字高时，居中会把标题压到首屏中间，
     上面空出一大片（实测 133px），看起来像页面没加载完。 */
  align-items: start;
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.8vw, 34px) var(--tk-gutter, 24px) clamp(22px, 2.6vw, 32px);
}

/* 没有配图时走单栏居中 */
.sp-hero--plain {
  grid-template-columns: 1fr;
  text-align: center;
  padding-block: clamp(36px, 5vw, 64px);
}

.sp-hero--plain .sp-hero__acts { justify-content: center; }

.sp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 11px;
  margin-bottom: 14px;
  border-radius: var(--tk-r-pill, 999px);
  background: var(--tk-accent-soft, #F6EBE4);
  color: var(--tk-accent, #B4633F);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.sp-hero h1,
.sp-hero h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3.3vw, 40px);
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--tk-ink, #201D1A);
}

.sp-hero p,
.sp-hero__sub {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--tk-ink-2, #57514A);
  max-width: 42em;
}

.sp-hero--plain p,
.sp-hero--plain .sp-hero__sub { margin-inline: auto; }

.sp-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--tk-r-lg, 24px);
  object-fit: cover;
  background: var(--tk-surface, #F4F0E9);
}

/* ---------- 4. 按钮 ---------- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tk-tap, 44px);
  padding: 0 22px;
  border-radius: var(--tk-r-pill, 999px);
  background: var(--tk-accent, #B4633F);
  color: var(--tk-accent-ink, #fff);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.sp-btn:hover {
  background: var(--tk-accent-hover, #9E5334);
  color: var(--tk-accent-ink, #fff);
  transform: translateY(-1px);
}

.sp-btn--ghost {
  background: transparent;
  border-color: var(--tk-line-2, #D6CCBE);
  color: var(--tk-ink, #201D1A);
}

.sp-btn--ghost:hover {
  background: var(--tk-surface, #F4F0E9);
  color: var(--tk-ink, #201D1A);
  border-color: var(--tk-ink-3, #8C8479);
}

/* ---------- 5. 数据条 ---------- */
.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 30px) var(--tk-gutter, 24px);
  border-block: 1px solid var(--tk-line, #E9E3D9);
}

.sp-stats__i {
  padding: 2px 16px;
  border-left: 1px solid var(--tk-line, #E9E3D9);
}

.sp-stats__i:first-child { border-left: 0; padding-left: 0; }

.sp-stats__v {
  display: block;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tk-accent, #B4633F);
  font-variant-numeric: tabular-nums;
}

.sp-stats__k {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tk-ink-3, #8C8479);
}

/* ---------- 6. 图文分屏 ---------- */
.sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.8vw, 36px) var(--tk-gutter, 24px);
}

/* 反向：图在左、文在右 */
.sp-split--rev .sp-split__media { order: -1; }

.sp-split h2,
.sp-split h3 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--tk-ink, #201D1A);
}

.sp-split p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--tk-ink-2, #57514A);
}

.sp-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--tk-r, 18px);
  object-fit: cover;
  background: var(--tk-surface, #F4F0E9);
}

/* 要点列表：企业形象页讲「我们能做什么」时用 */
.sp-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.sp-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--tk-ink-2, #57514A);
}

.sp-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tk-accent, #B4633F);
}

/* ---------- 7. 图集 ---------- */
.sp-gallery {
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.8vw, 36px) var(--tk-gutter, 24px);
}

.sp-gallery__h {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--tk-ink, #201D1A);
}

.sp-gallery__sub {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tk-ink-3, #8C8479);
}

.sp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sp-gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }

.sp-gallery__grid figure {
  margin: 0;
  border-radius: var(--tk-r, 18px);
  overflow: hidden;
  background: var(--tk-card, #fff);
  border: 1px solid var(--tk-line, #E9E3D9);
  transition: box-shadow .18s ease, transform .18s ease;
}

.sp-gallery__grid figure:hover {
  box-shadow: var(--tk-sh-1, 0 10px 30px -18px rgba(0, 0, 0, .3));
  transform: translateY(-2px);
}

.sp-gallery__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.sp-gallery__grid figcaption {
  padding: 10px 14px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tk-ink-3, #8C8479);
}

/* ---------- 8. 参数表（产品画册） ---------- */
.sp-spec {
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.8vw, 36px) var(--tk-gutter, 24px);
}

.sp-spec h2,
.sp-spec h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--tk-ink, #201D1A);
}

.sp-spec__hint {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tk-ink-3, #8C8479);
}

/* 表格做成一张卡片：圆角 + 外描边，表头浅底，行悬停高亮。
   原来是无外框的裸表格，在 1240 的版面里看起来像残缺的 Excel。 */
.sp-spec table {
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tk-line, #E9E3D9);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tk-card, #fff);
  font-size: 14px;
}

.sp-spec th,
.sp-spec td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--tk-line, #E9E3D9);
  vertical-align: top;
}

.sp-spec thead th {
  background: var(--tk-surface, #F4F0E9);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tk-ink-2, #57514A);
  white-space: nowrap;
}

.sp-spec tbody th {
  width: 24%;
  font-weight: 600;
  color: var(--tk-ink, #201D1A);
  background: transparent;
  white-space: nowrap;
}

.sp-spec tbody td { color: var(--tk-ink-2, #57514A); }

.sp-spec tbody tr:last-child > th,
.sp-spec tbody tr:last-child > td { border-bottom: 0; }

.sp-spec tbody tr:hover > th,
.sp-spec tbody tr:hover > td { background: var(--tk-paper, #FBF9F6); }

/* ---------- 9. 行动区 ---------- */
.sp-cta {
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.6vw, 32px) var(--tk-gutter, 24px) clamp(18px, 2vw, 24px);
}

.sp-cta__box {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 2.8vw, 36px);
  border-radius: var(--tk-r-lg, 24px);
  background: var(--tk-accent-soft, #F6EBE4);
}

/* 右下角一枚淡色圆片：CTA 左边两行字、右边一颗按钮，中间一大段空，
   加个同色的极淡装饰把右侧托住，比硬拉宽文字自然。 */
.sp-cta__box::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--tk-accent, #B4633F);
  opacity: .07;
  pointer-events: none;
}

.sp-cta__box > * {
  position: relative;
  z-index: 1;
}

.sp-cta__box h2,
.sp-cta__box h3 {
  margin: 0 0 6px;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--tk-ink, #201D1A);
}

.sp-cta__box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tk-ink-2, #57514A);
}

.sp-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 10. 常见问题：折叠问答 ----------
   用 <details>/<summary>，不引 JS。卡片式（圆角 + 描边）而不是
   一条条分隔线 —— 后者在空页面上看起来像没加载完的表格。 */
.sp-faq {
  display: grid;
  gap: 10px;
  margin: 20px 0 4px;
  border-top: 0;
}

.sp-faq details {
  border: 1px solid var(--tk-line, #E9E3D9);
  border-radius: 14px;
  background: var(--tk-card, #fff);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.sp-faq details:hover { border-color: var(--tk-line-2, #D6CCBE); }

.sp-faq details[open] {
  border-color: var(--tk-line-2, #D6CCBE);
  box-shadow: var(--tk-sh-1, 0 10px 30px -18px rgba(0, 0, 0, .3));
}

.sp-faq summary {
  position: relative;
  display: block;
  padding: 15px 52px 15px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--tk-ink, #201D1A);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::marker { content: ""; }

/* 加减号做成圆底徽标，和「卡片」这套语言一致 */
.sp-faq summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--tk-surface, #F4F0E9);
  color: var(--tk-ink-3, #8C8479);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.sp-faq summary:hover::after { background: var(--tk-accent-soft, #F6EBE4); color: var(--tk-accent, #B4633F); }

.sp-faq details[open] summary { color: var(--tk-ink, #201D1A); }

.sp-faq details[open] summary::after {
  content: "−";
  background: var(--tk-accent, #B4633F);
  color: var(--tk-accent-ink, #fff);
}

.sp-faq details > *:not(summary) {
  margin-left: 18px;
  margin-right: 52px;
}

.sp-faq p {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--tk-ink-2, #57514A);
}

.sp-faq details > *:last-child { margin-bottom: 16px; }

/* ---------- 11. 响应式 ---------- */
@media (max-width: 992px) {
  .sp-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 26px;
  }

  /* 手机上先看字再看图 —— 老板拿手机看官网时最先要判断「这家靠不靠谱」 */
  .sp-hero__media { order: 1; }

  .sp-cta__box { grid-template-columns: 1fr; }
  .sp-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .sp-stats__i:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sp-split { grid-template-columns: 1fr; gap: 20px; }
  .sp-split--rev .sp-split__media { order: 0; }
  .sp-gallery__grid,
  .sp-gallery__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sp-shell,
  .sp-wrap,
  .sp-hero,
  .sp-stats,
  .sp-split,
  .sp-gallery,
  .sp-spec,
  .sp-cta { padding-inline: 18px; }

  .sp-pagehead { padding: 18px 0 14px; }
  .sp-crumb { margin-bottom: 10px; }
  .sp-pagehead__sub { font-size: 14px; }

  .sp-doc { font-size: 15px; padding-top: 20px; }
  .sp-doc h2 { margin-top: 30px; font-size: 18.5px; }
  .sp-doc > p:first-of-type { font-size: 15.5px; }

  .sp-doc__help {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 26px;
    padding: 16px 18px;
  }

  .sp-hero { padding-block: 22px; }
  .sp-stats { padding-block: 18px; row-gap: 16px; }
  .sp-stats__i { padding-inline: 12px; }
  .sp-gallery__grid,
  .sp-gallery__grid--4 { grid-template-columns: 1fr; }
  .sp-gallery__grid--4 figure:nth-child(n+4) { display: none; }
  .sp-spec th,
  .sp-spec td { padding: 10px 12px; font-size: 13px; }
  .sp-spec tbody th { width: 34%; }
  .sp-hero__acts .sp-btn { flex: 1 1 auto; }

  .sp-faq summary { padding: 13px 46px 13px 15px; font-size: 14.5px; }
  .sp-faq details > *:not(summary) { margin-left: 15px; margin-right: 15px; }
}