/* ============================================================
   产品 / 解决方案 / 合作类页面区块样式（www 设计语言）
   ------------------------------------------------------------
   为什么单独一个文件：
     common/pages.css 覆盖的是「静态内容页」需要的通用块（统计栅格 /
     时间轴 / 图片墙 / CTA / 表单）。P4 这 25 个页面是 v10 独有的
     产品与服务页，它们的版式在 www 的模板包里**没有对应组件**：

       v10 类名                     w w w 里有没有
       ---------------------------  ----------------------------------
       .product-hot / .product-item 无（www 的产品区是 .tpm-portal-*，
                                        但那是首页横滑卡，不是选购表）
       .standards / .standards-box  无
       .cloud / .cloud-box          无（首页有近似块，但类名与结构都不同）
       .performance / .efficient    无
       .flow / .flow-box            无
       .panel-group（折叠问答）      无
       .advantage（左大字 + 右 2x2）  无
       .sustain（推广流程四联卡）     无
       .trend / .scene-box          无
       .recuit-*（招聘）             无

     v10 原本这些类名都定义在 default 主题的 product.css / extend.css /
     agent.css 里，而那些文件又依赖 v10 自己的 common.css
     （.btn / .section / .iconfont / .form-control / .fboxRow …）。
     www 主题里这套基础样式根本不存在，所以「只换 CSS 不改 HTML」会直接
     塌成无样式 —— 必须按 www 的取值重写。

   本文件里的所有取值遵循 common/vars.css：
     主色 var(--Original)、描边 #E6E9EC、通用阴影 0 2px 7px 0 #F2F5F7、
     hover 阴影 0 10px 20px 0 rgba(192,205,232,.3)、圆角 var(--radius)、
     正文 --txtcl / 副文 --txtdesc。
     凡是 pages.css 里已有的块（.p-section / .p-title / .p-cards /
     .p-specs / .p-tabs / .p-help / .p-btn / .p-input …）一律复用，
     本文件只补 pages.css 没有的那几块。

   加载顺序：必须排在 common/pages.css 之后、common/bridge.css 之前。
   ============================================================ */


/* ============================================================
   1. 页头内的搜索框（域名 / 商标）
   ------------------------------------------------------------
   v10 的 .input-search 是「输入框 + 后缀下拉 + 按钮」三件套，
   原本靠 product.css 的绝对定位拼装，且下拉面板依赖 animate.css 的
   fadeInUp。这里改成纯 flex + 自己的一点点过渡，不引额外动画库。
   ============================================================ */
.p-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 640px;
  height: 52px;
  margin-top: 28px;
  padding: 4px 4px 4px 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(55, 99, 170, 0.14);
  position: relative;
  z-index: 5;
}

/* 左侧「商标名」下拉：只在商标页出现 */
.p-search__select {
  position: relative;
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 18px;
  font-size: 14px;
  color: var(--txtcl);
  cursor: pointer;
  user-select: none;
  border-right: 1px solid #eef1f6;
}

.p-search__select::after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #9aa5b5;
  margin-top: 4px;
  transition: transform 0.2s ease-out;
}

.p-search__select.is-open::after {
  transform: rotate(180deg);
  margin-top: -4px;
}

/* 下拉面板：默认 display:none，.is-open 时展开。
   ★ 不用 opacity/visibility 做过渡，避免「无 JS 时面板常显」的问题。 */
.p-search__options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 132px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e9eef3;
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(16, 52, 113, 0.12);
}

.p-search__select.is-open .p-search__options {
  display: block;
}

.p-search__option {
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--txtdesc);
  white-space: nowrap;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.p-search__option:hover,
.p-search__option.is-active {
  background: var(--navright_block);
  color: var(--Original);
}

.p-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--txtcl);
}

.p-search__input::placeholder {
  color: #b4bcc9;
}

.p-search__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 30px;
  border: 0;
  border-radius: 6px;
  background: var(--gradient1);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease-out;
}

.p-search__btn:hover {
  background: var(--darker1);
}

/* ---- 域名页的搜索框变体 ------------------------------------------
   顺序与商标页相反：域名页是「先输域名，再选后缀」（原版即是如此），
   而商标页是「先选查询类型，再输关键词」。用 order 调整而不是另写一套
   结构，两个页面才能共用同一块 .p-search 样式。 */
.p-search--domain .p-search__input { order: 1; padding-left: 20px; }

.p-search--domain .p-search__select {
  order: 2;
  border-right: 0;
  border-left: 1px solid #eef1f6;
  padding: 0 18px 0 14px;
}

.p-search--domain .p-search__btn { order: 3; }

/* 域名后缀下拉里的候选项。
   ★ 这些是 v10 的 js/domain.js 动态拼进 #suffix-box 的，
     类名写死成 select-box-item / active（单数）。既然要「原样复用
     JS」，样式就得跟着旧类名走，而不是反过来改 JS。 */
.p-search__options .select-box-item {
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--txtdesc);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.p-search__options .select-box-item:hover,
.p-search__options .select-box-item.active,
.p-search__options .select-box-item.is-active {
  background: var(--navright_block);
  color: var(--Original);
}

/* 页头里的整体按钮（产品页「立即购买」），沿用 pages.css 的 .p-btn */
.globalBanner .p-btn {
  height: 44px;
  padding: 0 32px;
  font-size: 15px;
}

/* 页头下方的运营横幅（后台 $data.banner 配的活动图）。
   ★ 与 v10 的差异：v10 是「有横幅就整块替换页头」。这里改成
     「页头常在 + 横幅追加在下面」—— 因为页头里的 <h1> 是 SEO 与
     无障碍的落点，被运营图顶掉之后页面就没有一级标题了。 */
.p-promo {
  padding-top: 32px;
}

.p-promo__item {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(55, 99, 170, 0.12);
  transition: box-shadow 0.3s ease-out;
}

.p-promo__item:hover {
  box-shadow: 0 12px 30px rgba(55, 99, 170, 0.2);
}

.p-promo__item img {
  width: 100%;
  display: block;
}


/* ============================================================
   2. 服务优势 / 产品优势（图标在上，四列）   ------------------------------------------------------------
   对应 v10 的 .cloud > .cloud-box（图标 + h4 + 描述）。
   www 的首页优势块是 .chooseUs-itme（带序号与悬浮），这里是产品页的
   轻量版：白卡 + 蓝色图标底 + 标题 + 灰描述，四列等宽、可换行。
   ============================================================ */
.p-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 3 个 / 6 个的变体：6 个时两行三列比四列更好读 */
.p-stage--3 { grid-template-columns: repeat(3, 1fr); }
.p-stage--6 { grid-template-columns: repeat(3, 1fr); }

.p-stage__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 30px 28px 32px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-stage__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

.p-stage__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lighter1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.p-stage__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* 没有图片时退化为图标字体（v10 的部分图标在 www 主题里不存在） */
.p-stage__icon .develop {
  font-size: 26px;
  color: var(--Original);
}

/* 彩色插画变体（解决方案页的「产品特征」）。
   那些图标是 92x92 的线性插画，不是单色字形，用法上要改两点：
     · 默认档只有 30px，缩到 92x92 的插画上只剩一坨颜色，看不出画的
       是什么，所以放大到 44px（源图 92px，仍有 2 倍余量）；
     · 底色要跟着图标走。这 32 张图取样下来全是同一个品牌橙 #FF6638
       （逐个文件取过均值，色值一致），配默认的淡蓝底会互相打架。
       这里取同色 9% 透明度——和默认档「蓝底 + 蓝图标」是同一套逻辑。 */
.p-stage--art .p-stage__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 102, 56, 0.09);
}

.p-stage--art .p-stage__icon img {
  width: 44px;
  height: 44px;
}

.p-stage__title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 12px;
}

.p-stage__desc {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}


/* ============================================================
   3. 产品特性（左图 + 右列表）
   ------------------------------------------------------------
   对应 v10 的 .performance > .performance-left(大图) + .performance-right
   > .performance-item(小图标 + 标题 + 描述)。
   ============================================================ */
.p-perf {
  display: flex;
  align-items: center;
  gap: 56px;
}

.p-perf__media {
  flex: 0 0 46%;
  max-width: 560px;
}

.p-perf__media img {
  width: 100%;
  display: block;
}

.p-perf__list {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 24px;
}

.p-perf__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.p-perf__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lighter2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-perf__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.p-perf__icon .develop {
  font-size: 20px;
  color: var(--Original);
}

.p-perf__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 6px;
}

.p-perf__desc {
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
  margin: 0;
}


/* ============================================================
   4. 应用场景（页签 + 左文右图）
   ------------------------------------------------------------
   对应 v10 的 .efficient：上方 .nav-tabs 图标页签，下方 .tab-box
   左侧若干 .layout-paragraph（小标题 + 正文 / 列表），右侧 .tabs-img。
   页签沿用 pages.css 的 .p-tabs / .p-tabs__item / .p-tabs__pane。
   ============================================================ */
.p-scene {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.p-scene__body {
  flex: 1 1 auto;
  min-width: 0;
}

.p-scene__media {
  flex: 0 0 42%;
  max-width: 520px;
}

.p-scene__media img {
  width: 100%;
  display: block;
}

/* 段落块：小标题前带一条蓝色竖条，与 pages.css 的 .p-form__panel-title 同语言 */
.p-block + .p-block {
  margin-top: 26px;
}

.p-block__title {
  position: relative;
  padding-left: 14px;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
}

.p-block__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--gradient1);
}

.p-block p {
  font-size: 14px;
  line-height: 28px;
  color: var(--txtdesc);
  margin: 0;
}

/* 段落里的要点行：默认行内圆点 */
.p-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-block li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 28px;
  color: var(--txtdesc);
}

.p-block li + li {
  margin-top: 2px;
}

.p-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--Original);
  opacity: 0.55;
}

/* 「痛点 / 成果」小卡：v10 是 .layout-paragraph-s（灰底小段） */
.p-note {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--navleft_color);
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
}

.p-note + .p-note {
  margin-top: 10px;
}

.p-note strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--txtcl);
  margin-bottom: 4px;
}

/* 页签里的图标：www 的图标字体（.develop 基类在 static/css/iconfont.css） */
.p-tabs__icon {
  font-size: 18px;
  margin-right: 6px;
  color: inherit;
  vertical-align: -1px;
}


/* ============================================================
   5. 套餐 / 规格卡栅格（SSL / 短信 / 商标 / ICP / 域名）
   ------------------------------------------------------------
   对应 v10 的 .standards > .standards-box：
     h4 标题 → .title-desc 一句话卖点 → 若干「标签 + 值」行 / 要点 →
     .money-box（价格 + 按钮）
   卡片按内容高度对齐，按钮统一贴底。
   ============================================================ */
.p-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-plans--2 { grid-template-columns: repeat(2, 1fr); }
.p-plans--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* 四列时单卡变窄，内边距与标题同步收一档 —— 否则「套餐包规格 / 100000条」
   这种「标签 + 值」行会被挤到换行，比三列还难看。 */
.p-plans--4 .p-plan { padding: 24px 22px 22px; }
.p-plans--4 .p-plan__title { font-size: 18px; line-height: 26px; }
.p-plans--4 .p-plan__price strong { font-size: 26px; }

.p-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 30px 30px 28px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-plan:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

/* 推荐款：描边加粗 + 右上角角标 */
.p-plan--hot {
  border-color: rgba(0, 86, 255, 0.45);
}

.p-plan__flag {
  position: absolute;
  top: -1px;
  right: 18px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  border-radius: 0 0 8px 8px;
  background: var(--gradient1);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.p-plan__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0;
}

.p-plan__sub {
  margin: 8px 0 20px;
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
}

/* 「标签 / 值」行：SSL 的适用场景 + 颁发周期、短信的规格 + 时长 */
.p-plan__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed #f0f3f8;
  font-size: 13px;
  line-height: 22px;
}

.p-plan__row dt {
  flex: 0 0 auto;
  color: #98a2b3;
  margin: 0;
}

.p-plan__row dd {
  flex: 1 1 auto;
  margin: 0;
  text-align: right;
  color: var(--txtcl);
  word-break: break-word;
}

/* 要点列表（带对勾的卖点） */
.p-plan__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  flex: 1 1 auto;
}

.p-plan__list li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
}

.p-plan__list li + li {
  margin-top: 6px;
}

.p-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lighter1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230056ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}

/* 富文本描述（后台给 description 字段配的是富文本，会自带 p / div）：
   这里统一压一下行距与首尾外边距，避免卡片高度被自带样式撑飞。 */
.p-plan__desc {
  flex: 1 1 auto;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
}

.p-plan__desc > :first-child { margin-top: 0; }
.p-plan__desc > :last-child { margin-bottom: 0; }
.p-plan__desc p { margin: 0 0 8px; }
.p-plan__desc ul { margin: 0; padding-left: 18px; }
.p-plan__desc li { margin: 0; }

/* ---- 兼容后台富文本里沿用的 v10 类名 ------------------------------
   后台「产品 - 描述」是一个富文本框，运营是按 v10 默认模板的类名写的
   （.title-desc / .standards-box-s / .stand-cont）。换成 www 主题后
   这些类名在本主题里并不存在，富文本会退化成「一行行裸段落」。
   这里是给它们补的样式，而不是重写富文本 —— 运营不用改一个字，
   已经配好的内容就能直接长出正确的版式。
   注意：仅作用在 .p-plan__desc / .p-spec 里，不会污染 www 自己的页面。 */
.p-plan__desc .title-desc,
.p-spec .title-desc {
  color: var(--txtdesc);
}

.p-plan__desc .standards-box-s,
.p-spec .standards-box-s {
  margin: 0 0 12px;
}

.p-plan__desc .standards-box-s > p:first-child,
.p-spec .standards-box-s > p:first-child {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  color: var(--txtcl);
}

.p-plan__desc .standards-box-s > .title-desc,
.p-spec .standards-box-s > .title-desc {
  margin: 0;
  font-weight: 400;
}

/* 富文本里的「要点行」：<p><span class="iconfont icon-right"></span>xxx</p>
   本站没有 v10 那套 iconfont，span 会渲染成空方块占位。直接把它换成
   一套自绘的对勾，运营不用动内容。 */
.p-plan__desc .iconfont,
.p-spec .iconfont {
  display: none;
}

.p-plan__desc p:has(> .iconfont),
.p-spec p:has(> .iconfont) {
  position: relative;
  padding-left: 22px;
}

.p-plan__desc p:has(> .iconfont)::before,
.p-spec p:has(> .iconfont)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lighter1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230056ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}

/* 价格 + 按钮区：始终贴底 */
.p-plan__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
}

.p-plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #ff2626;
}

.p-plan__price em {
  font-style: normal;
  font-size: 14px;
}

.p-plan__price strong {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.p-plan__price span {
  font-size: 13px;
  color: var(--txtdesc);
}

/* 卡片里只有一个按钮、没有价格时的单按钮行 */
.p-plan__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
}

/* 栅格末尾的「查看更多」卡 */
.p-plan-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  border: 1px dashed #dfe5ee;
  border-radius: var(--radius);
  background: #fff;
  color: var(--txtdesc);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.25s ease-out, color 0.25s ease-out;
}

.p-plan-more:hover {
  border-color: var(--Original);
  color: var(--Original);
}

.p-plan-more::after {
  content: "";
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%230056ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* 规格卡的三列变体（云服务器 / 物理裸机的规格数量通常 ≥ 4） */
.p-specs--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 规格卡上的「新老同享」角标与标签胶囊（v10 的 .product-active-text /
   .product-text-item，原本是绝对定位的红色角标） */
.p-spec__ribbon {
  display: inline-block;
  align-self: flex-start;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: rgba(255, 38, 38, 0.08);
  color: #ff2626;
  font-size: 12px;
  font-weight: 500;
}

.p-spec__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.p-spec__tag {
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(0, 86, 255, 0.25);
  border-radius: 4px;
  color: var(--Original);
  font-size: 12px;
}

/* 原价（划线） */
.p-spec__origin {
  font-size: 12px;
  line-height: 18px;
  color: #98a2b3;
  text-decoration: line-through;
}


/* 二级页签（云服务器 / 物理裸机：一级=区域大类，二级=地区）
   比一级页签小一号，并且不再居中，与上方的区域页签在视觉上分层。 */
.p-tabs--sub {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px;
  border-radius: 24px;
  background: var(--navleft_color);
}

.p-tabs--sub .p-tabs__item {
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  border-radius: 17px;
  background: transparent;
  font-size: 14px;
}

.p-tabs--sub .p-tabs__item.is-active {
  background: #fff;
  color: var(--Original);
  box-shadow: 0 2px 8px rgba(55, 99, 170, 0.14);
}


/* ---------- 带按钮的卡片栅格（更多优惠活动） ----------
   grid 的行高默认 stretch，但 .p-card 自身不是 flex 容器，
   按钮行会跟着内容长短浮动、参差不齐。这里把卡片改成纵向 flex 并让
   按钮行吃满剩余空间，一行里的按钮就对齐在同一条基线上。 */
.p-cards--actions .p-card {
  display: flex;
  flex-direction: column;
}

.p-cards--actions .p-card__desc {
  flex: 1 1 auto;
}

.p-cards--actions .p-plan__actions {
  margin-top: 24px;
}


/* ============================================================
   6. 申请 / 办理流程（横向步骤条）   ------------------------------------------------------------
   复用 pages.css 的 .p-steps（4 列 + 连接线），这里只补 3 / 5 / 6 列的
   列数变体，并支持「有描述」的横排卡片形态（.p-steps--card）。
   ============================================================ */
.p-steps--3 { grid-template-columns: repeat(3, 1fr); }
.p-steps--5 { grid-template-columns: repeat(5, 1fr); }
.p-steps--6 { grid-template-columns: repeat(6, 1fr); }

/* 6 列时圆变小一点，免得挤在一起 */
.p-steps--5 .p-steps__num,
.p-steps--6 .p-steps__num {
  width: 46px;
  height: 46px;
  font-size: 16px;
  margin-bottom: 14px;
}

.p-steps--5 .p-steps__item::after,
.p-steps--6 .p-steps__item::after {
  top: 23px;
}

/* 卡形态：每步一张白卡（推广流程四联卡） */
.p-steps--card {
  gap: 20px;
}

.p-steps--card .p-steps__item {
  align-items: flex-start;
  text-align: left;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-steps--card .p-steps__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-steps--card .p-steps__item::after {
  display: none;
}

.p-steps--card .p-steps__num {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 26px;
  font-weight: 700;
  color: rgba(0, 86, 255, 0.22);
  margin: 0 0 16px;
}

.p-steps--card .p-steps__title {
  font-size: 17px;
  margin-bottom: 8px;
}

.p-steps--card .p-steps__desc {
  font-size: 13px;
  line-height: 22px;
  margin: 0 0 18px;
}

/* 卡形态右上角的插图 */
/* 卡形态右上角的插图（代理/推广流程：左边编号，右边插画）。
   源图是 256x256 的线性插画、带白底——白底压在白卡上正好看不出来，
   所以这里不用管透明通道，按 56px 出图保留细节。 */
.p-steps__img {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}


/* ============================================================
   7. 常见问题（折叠面板）
   ------------------------------------------------------------
   对应 v10 的 .panel-group 手风琴（bootstrap collapse）。
   www 的模板包里没有折叠组件，这里用原生 details/summary 语义化实现，
   由 js/faq.js 统一接管（并处理「一次只开一个」的互斥行为）。
   ============================================================ */
.p-faq {
  max-width: 980px;
  margin: 0 auto;
}

.p-faq__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  overflow: hidden;
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.p-faq__item + .p-faq__item {
  margin-top: 14px;
}

.p-faq__item:hover,
.p-faq__item.is-open {
  border-color: rgba(0, 86, 255, 0.4);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: var(--txtcl);
  text-align: left;
  cursor: pointer;
}

.p-faq__q:hover {
  color: var(--Original);
}

/* 右侧「+ / −」图标：两条线，竖向那条展开时转 90° 收起来 */
.p-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.p-faq__sign::before,
.p-faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.p-faq__sign::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.p-faq__sign::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.p-faq__item.is-open .p-faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.p-faq__a {
  display: none;
  padding: 0 26px 24px;
  font-size: 14px;
  line-height: 28px;
  color: var(--txtdesc);
}

.p-faq__item.is-open .p-faq__a {
  display: block;
}

.p-faq__a p {
  margin: 0 0 10px;
}

.p-faq__a p:last-child {
  margin-bottom: 0;
}

/* 答案里内嵌的示意图（v10 的「返现比例」那条带一张 519x206 的图） */
.p-faq__img {
  display: block;
  max-width: 100%;
  margin-top: 16px;
}


/* ============================================================
   8. 优势大卡（代理合作 / 推广奖励）
   ------------------------------------------------------------
   对应 v10 的 .agent-advantage > .advantage：
     左栏一块蓝色渐变大卡（.advantage-left，「限量招募中」）
     右栏 2x2 的四张优势卡（图标 + 标题 + 描述）
   ============================================================ */
.p-panel {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.p-panel__lead {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  border-radius: var(--radius);
  background: var(--gradient2);
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 86, 255, 0.22);
}

.p-panel__lead h3 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.p-panel__lead p {
  font-size: 14px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

.p-panel__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.p-panel__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 26px 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-panel__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-panel__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--lighter1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-panel__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.p-panel__icon .develop {
  font-size: 24px;
  color: var(--Original);
}

/* 插画变体（代理合作 / 推广奖励）。
   那几张是 176x176 的 3D 立体插画（暖橙色系、大量渐变），不是单色图标：
   缩到 26px 后细节全糊，而且塞进淡蓝色块里会把暖色调压脏。
   这一档不套色块，插画裸放在白卡上，按 64px 出图（源图 176px，余量 2.7 倍）。 */
.p-panel--art .p-panel__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

.p-panel--art .p-panel__icon img {
  width: 64px;
  height: 64px;
}

.p-panel__title {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 8px;
}

.p-panel__desc {
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
  margin: 0;
}


/* ============================================================
   9. 支持项四列（代理支持：培训 / 市场 / 销售 / 技术）
   ------------------------------------------------------------
   对应 v10 的 .agent-support .support > .support-box，
   每张卡是「标题栏（蓝底）+ 要点列表」。
   ============================================================ */
.p-supports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-support {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  overflow: hidden;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-support:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-support__head {
  padding: 20px 26px;
  background: var(--navright_block);
  border-bottom: 1px solid #eef1f6;
}

.p-support__head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0;
}

.p-support__body {
  padding: 20px 26px 24px;
}

.p-support__body li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 26px;
  color: var(--txtdesc);
  list-style: none;
}

.p-support__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--Original);
  opacity: 0.55;
}

.p-support__body ul {
  margin: 0;
  padding: 0;
}


/* ============================================================
   10. 行业趋势（四张插画卡）
   ------------------------------------------------------------
   对应 v10 的 .solution-trend .trend > .trend-box。

   ★ 顶部是「插画」不是「图标」。
     v10 对 .trend-box img 定的是 height:190px，源文件是 670x380 的
     横向插画。最早这里照 .p-stage__icon 写成 48px 的图标尺寸，套到
     解决方案页上会把插画压成一条细线，所以单独给了 .p-trend__media
     一层：整幅铺满卡顶、按 190px 高裁切。
   ============================================================ */
.p-trend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-trend__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  overflow: hidden;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-trend__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

.p-trend__media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* 两列变体：总览页的行业卡用两列，卡宽翻倍后 190px 的图会显得又扁又挤 */
.p-trend--2 { grid-template-columns: repeat(2, 1fr); }

/* 横幅变体：图本身就是 1920x441 的全景（4.35:1），按自身比例铺，
   不要用 cover 去裁——裁掉六成就只剩一片天空了。
   两列下卡宽约 640px，图高约 147px，正好是一条横幅。 */
.p-trend__item--banner .p-trend__media img {
  height: auto;
  aspect-ratio: 4.35;
}

.p-trend__body {
  padding: 20px 24px 26px;
}

.p-trend__title {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-trend__desc {
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
  margin: 0;
}

/* 总览页把整张卡做成链接（<a class="p-trend__item">）：
   a 标签自带的下划线和蓝色要摘掉，否则跟卡片里的正文不是一个调子 */
a.p-trend__item {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 卡片里的「查看详情 ›」。
   .p-link-more 是通用版（流程卡、岗位卡也用），.p-trend__more 是行业卡的
   同款别名，两者共用一套规则，免得同一颗箭头在三个地方各写一遍。 */
.p-trend__more,
.p-link-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--Original);
}

.p-trend__more::after,
.p-link-more::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 1px;
  transition: transform 0.25s ease-out;
}

a.p-trend__item:hover .p-trend__more::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.p-link-more:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* 图标变体：没有插画、只有小图标时用（内边距回到普通卡片） */
.p-trend__item--icon .p-trend__body { padding: 28px 26px 30px; }

.p-trend__item--icon .p-trend__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lighter1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.p-trend__item--icon .p-trend__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* 没有图片时的纯文字变体：用一条蓝色顶边代替插画，卡片不至于空一大块 */
.p-trend__item--text .p-trend__body { padding-top: 22px; }

.p-trend__item--text .p-trend__title {
  padding-top: 6px;
  border-top: 3px solid var(--Original);
  display: inline-block;
  margin-bottom: 14px;
}

/* 大图通栏（部署方式的架构图） */
.p-figure {
  text-align: center;
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 24px;
}

.p-figure img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.p-figure__placeholder {
  padding: 64px 0;
  border: 1px dashed #dfe5ee;
  border-radius: var(--radius);
  background: #fff;
  color: var(--txtdesc);
  font-size: 14px;
}


/* ============================================================
   11. 咨询表单（一小步，大未来）
   ------------------------------------------------------------
   对应 v10 的 .solution-future：左「一小步，大未来」+ 右 4+1 表单。
   表单控件复用 pages.css 的 .p-field / .p-input / .p-textarea。
   ============================================================ */
.p-consult {
  display: flex;
  align-items: center;
  gap: 56px;
}

.p-consult__lead {
  flex: 0 0 300px;
}

.p-consult__lead h2 {
  font-size: 34px;
  line-height: 46px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 14px;
}

.p-consult__lead p {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}

.p-consult__form {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 34px 36px;
}

/* 表单内两列并排（联系人 / 公司名称） */
.p-consult__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
}


/* ============================================================
   12. 招聘岗位（左侧页签 + 右侧福利卡）
   ------------------------------------------------------------ */
.p-jobs {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.p-jobs__main {
  flex: 1 1 auto;
  min-width: 0;
}

.p-jobs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.p-jobs__detail {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 30px 32px 32px;
}

.p-jobs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid #eef1f6;
}

.p-jobs__head h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0;
}

.p-jobs__city {
  font-size: 14px;
  color: var(--Original);
}

.p-jobs__group + .p-jobs__group {
  margin-top: 22px;
}

.p-jobs__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-jobs__text {
  font-size: 14px;
  line-height: 28px;
  color: var(--txtdesc);
  margin: 0;
  white-space: pre-line;
}

.p-jobs__side {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-jobs__card {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 26px 28px;
}

.p-jobs__card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}

/* 岗位卡底部的「立即申请」 */
.p-jobs__actions {
  margin-top: 26px;
}

.p-jobs__card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-jobs__card p {
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
  margin: 0;
}


/* ============================================================
   13. 域名流程页的共用外壳（订购 / 注册信息 / 商城）
   ------------------------------------------------------------
   这三页是「表单 + 结果 + 购物车」形态，v10 的类名必须原样保留
   （buy_domain.js 用它们做选择器）。这里只把它们的取值改成 www 的
   变量体系，不改类名、不改 DOM 结构。
   ============================================================ */
.domain-shell {
  padding: 32px 0 80px;
  background: var(--navleft_color);
}

.domain-shell .comp_container {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 32px 36px 40px;
}

/* 面包屑 */
.domain-shell .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 13px;
  color: var(--txtdesc);
}

.domain-shell .breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: #c8ced8;
}

.domain-shell .breadcrumb a {
  color: var(--txtdesc);
  text-decoration: none;
}

.domain-shell .breadcrumb a:hover {
  color: var(--Original);
}

/* 提示条 */
.domain-shell .buy-tip {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 26px;
  border-radius: var(--radius);
  background: var(--navright_block);
}

.domain-shell .tip-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

.domain-shell .tip-text p {
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
  margin: 0;
}

.domain-shell .tip-text p + p {
  margin-top: 4px;
}

/* 区块标题 */
.domain-shell .select-title,
.domain-shell .form-title {
  position: relative;
  padding-left: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 22px;
}

.domain-shell .select-title::before,
.domain-shell .form-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--gradient1);
}

/* 「网络类型 / 用户类型」单选：复用 pages.css 的 .p-radio 观感，
   但保持 v10 的 input + label 结构（buy_domain.js 依赖 id/for）。 */
.domain-shell .select-type,
.domain-shell .user-type {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.domain-shell .select-type .net-type,
.domain-shell .form-label {
  flex: 0 0 auto;
  min-width: 84px;
  font-size: 14px;
  color: var(--txtclc);
}

.domain-shell .net-type { margin-right: 6px; }

.domain-shell .select-type input[type="radio"],
.domain-shell .select-type input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.domain-shell .select-type label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid #dfe5ee;
  border-radius: 22px;
  font-size: 14px;
  color: var(--txtcl);
  cursor: pointer;
  transition: border-color 0.25s ease-out, background-color 0.25s ease-out, color 0.25s ease-out;
}

.domain-shell .select-type label:hover { border-color: rgba(0, 86, 255, 0.4); }

/* ★ 不用 :has()，由 js/buy-theme.js 在 change 时补 .is-checked（老内核兼容） */
.domain-shell .select-type input:checked + label,
.domain-shell .select-type label.is-checked {
  border-color: var(--Original);
  background: rgba(0, 86, 255, 0.06);
  color: var(--Original);
}

/* 用户类型（弹窗里的方块切换） */
.domain-shell .user-item {
  height: 38px;
  line-height: 36px;
  padding: 0 22px;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  font-size: 14px;
  color: var(--txtcl);
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.domain-shell .user-item.active {
  border-color: var(--Original);
  background: rgba(0, 86, 255, 0.06);
  color: var(--Original);
}

/* 表单行 */
.domain-shell .form-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.domain-shell .form-value {
  flex: 1 1 auto;
  min-width: 0;
}

.domain-shell .form-value > input[type="text"],
.domain-shell .form-value > input[type="email"],
.domain-shell .form-value > input[type="tel"],
.domain-shell .form-value > input[type="number"],
.domain-shell .form-value > textarea,
.domain-shell .form-value > select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--txtcl);
  outline: none;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.domain-shell .form-value > textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 14px;
  line-height: 24px;
  resize: vertical;
}

.domain-shell .form-value > input:focus,
.domain-shell .form-value > textarea:focus,
.domain-shell .form-value > select:focus {
  border-color: var(--Original);
  box-shadow: 0 0 0 3px rgba(0, 86, 255, 0.08);
}

.domain-shell .value-tips,
.domain-shell .form-value .value-tips {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: #98a2b3;
}

.domain-shell .origin-text,
.domain-shell .creat-text {
  color: var(--Original);
  cursor: pointer;
}

.domain-shell .creat-text:hover { text-decoration: underline; }

/* 模板卡片栅格 */
.domain-shell .tem-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.domain-shell .tem-box {
  margin: 22px 0;
}

.domain-shell .tem-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--txtdesc);
}

.domain-shell .no-tem {
  grid-column: 1 / -1;
  padding: 36px 0;
  text-align: center;
  font-size: 14px;
  color: var(--txtdesc);
  border: 1px dashed #dfe5ee;
  border-radius: var(--radius);
}

.domain-shell .agree-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0 28px;
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
}

.domain-shell .agree-box input[type="checkbox"] {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: var(--Original);
  flex: 0 0 auto;
}

.domain-shell .agree-box a {
  color: var(--Original);
  text-decoration: none;
}

.domain-shell .btn-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 按钮：v10 的 .ok-btn / .back-btn / .creat-btn 一律改成 www 的按钮语言。
   ★ .creat-btn 要排除 .creat-text：v10 的「没有查询到可用的信息模板，
     请先前往创建域名信息模版」里，那个入口同时带了
     class="creat-text creat-btn"。它是一句话里的行内链接，不该长成
     一颗蓝按钮 —— 否则整段空态文案会被一颗按钮劈成两半。 */
.domain-shell .ok-btn,
.domain-shell .search-btn,
.domain-shell .creat-btn:not(.creat-text),
.domain-shell .next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 30px;
  border-radius: var(--radius);
  background: var(--gradient1);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease-out;
}

.domain-shell .ok-btn:hover,
.domain-shell .search-btn:hover,
.domain-shell .creat-btn:not(.creat-text):hover {
  background: var(--darker1);
}

.domain-shell .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 30px;
  border-radius: var(--radius);
  border: 1px solid #dfe5ee;
  background: #fff;
  color: var(--txtcl);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.25s ease-out, color 0.25s ease-out;
}

.domain-shell .back-btn:hover {
  border-color: var(--Original);
  color: var(--Original);
}

/* 弹窗（创建域名信息模板）
   ★ 这里刻意保留 v10 的「宽度 0 → 1400px 展开」动画机制，而不是换成
     .is-open + opacity 过渡 —— 因为 web/www/js/buy_domain.js 是从 v10
     原样搬过来的，它做的就是 $('.creat-form').animate({width:'1400px'})。
     所以 .creat-form 的初始宽度必须是 0（否则动画没有起点），而
     max-width 用 min(1400px, 视口宽 - 40px) 兜住窄屏 ——
     窄屏时动画会长到贴着视口边缘就停住，不会横向溢出。 */
.domain-shell .creat-template-box {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(16, 28, 51, 0.45);
  padding: 40px 20px;
  overflow-y: auto;
}

/* 保留 .is-open 这一支：不依赖 JS 时也能用纯类名打开（例如服务端直接
   渲染成打开态做首屏提示），且与 buy_domain.js 的 .show() 互不冲突。 */
.domain-shell .creat-template-box.is-open {
  display: block;
}

.domain-shell .creat-form {
  width: 0;
  max-width: min(1400px, calc(100vw - 40px));
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(16, 52, 113, 0.28);
  overflow: hidden;
}

.domain-shell .form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid #eef1f6;
  font-size: 17px;
  font-weight: 700;
  color: var(--txtcl);
}

.domain-shell .close-dia-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease-out;
}

.domain-shell .close-dia-btn:hover { opacity: 1; }

.domain-shell .form-content {
  padding: 26px 28px 30px;
}

.domain-shell .form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 28px 26px;
}

.domain-shell .creat-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 40px;
  border-radius: var(--radius);
  background: var(--gradient1);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease-out;
}

.domain-shell .creat-ok:hover { background: var(--darker1); }

.domain-shell .creat-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 40px;
  border-radius: var(--radius);
  border: 1px solid #dfe5ee;
  background: #fff;
  color: var(--txtcl);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.25s ease-out, color 0.25s ease-out;
}

.domain-shell .creat-cancel:hover {
  border-color: var(--Original);
  color: var(--Original);
}

/* 表单主体：左边字段、右边「悬停说明」栏 */
.domain-shell .form-box {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.domain-shell .form-info {
  flex: 1 1 auto;
  min-width: 0;
}

.domain-shell .form-box > .right-tip {
  flex: 0 0 260px;
}

/* 悬停说明栏。buy_domain.js 靠 mouseenter 在 .no-tips / .input-tip 之间
   切换显隐（.form-value[show-tip] 有值就显示 .input-tip，否则显示 .no-tips）。
   两个都默认可见会在切换前闪一下，所以这里两者都常态显示、由 JS 控制，
   CSS 只负责版式。 */
.domain-shell .tip-text-box {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--navleft_color);
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
}

.domain-shell .no-tips {
  padding: 26px 0;
  text-align: center;
  color: #9aa5b5;
}

.domain-shell .no-tips-img img {
  width: 84px;
  margin: 0 auto 12px;
  display: block;
  opacity: 0.85;
}

.domain-shell .input-tip h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 8px;
}

.domain-shell .input-tip p {
  margin: 0 0 6px;
}

/* 证件照上传区 */
.domain-shell .upload-box {
  border: 1px dashed #d5dce6;
  border-radius: var(--radius);
  background: #fbfcfe;
  padding: 18px;
}

.domain-shell .upload-top {
  display: flex;
  gap: 20px;
}

.domain-shell .upload-content {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 0;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease-out;
}

.domain-shell .upload-content .up-img { width: 34px; }

.domain-shell .upload-view {
  font-size: 12px;
  color: var(--txtdesc);
}

.domain-shell .upload-view .view-box {
  width: 150px;
  height: 92px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--navright_block);
}

.domain-shell .upload-bommtom {
  margin-top: 12px;
  font-size: 12px;
  line-height: 22px;
  color: var(--txtdesc);
}

/* 表单里的零碎文字 */
.domain-shell .use-label { color: var(--txtdesc); }
.domain-shell .use-tips { color: #9aa5b5; }
.domain-shell .a-text { color: var(--Original); cursor: pointer; }
.domain-shell .agree-label { line-height: 24px; }

.domain-shell .find-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  margin-left: 10px;
  border-radius: 6px;
  background: var(--gradient1);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

/* 查询结果表（域名可用性 / 商城列表） */
.domain-shell .domain-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.domain-shell .domain-result-table th {
  padding: 14px 16px;
  background: var(--navright_block);
  border-bottom: 1px solid #e9eef3;
  font-weight: 600;
  color: var(--txtcl);
  text-align: left;
  white-space: nowrap;
}

.domain-shell .domain-result-table td {
  padding: 16px;
  border-bottom: 1px solid #f0f3f8;
  color: var(--txtdesc);
  vertical-align: middle;
}

.domain-shell .domain-result-table tr:hover td {
  background: #fafbfe;
}

.domain-shell .domain-result-table .domain-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--txtcl);
}

.domain-shell .domain-result-table .domain-price {
  color: #ff2626;
  font-size: 18px;
  font-weight: 700;
}

/* 价格旁的「年限价格表」浮层：v10 是 .icon-box > .icon-bottom 触发
   .table-price 弹出。本站没有 v10 那套 iconfont，改用 CSS 三角，
   并且纯 :hover 展开（不依赖 JS，键盘 Tab 也能带出来）。 */
.domain-shell .domain-price-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.domain-shell .domain-price-wrap::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #9aa5b5;
  margin-top: 4px;
}

.domain-shell .domain-price-pop {
  /* 默认不可见 + 不可点，避免「看不见但挡住了鼠标」 */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 260px;
  padding: 12px 14px;
  border: 1px solid #e9eef3;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 52, 113, 0.14);
  font-size: 12px;
  font-weight: 400;
  color: var(--txtdesc);
  text-align: left;
  transition: opacity 0.2s ease-out;
}

.domain-shell .domain-price-wrap:hover .domain-price-pop,
.domain-shell .domain-price-wrap:focus-within .domain-price-pop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.domain-shell .domain-price-pop table {
  width: 100%;
  border-collapse: collapse;
}

.domain-shell .domain-price-pop th,
.domain-shell .domain-price-pop td {
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid #f2f5f9;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.domain-shell .domain-price-pop th {
  background: transparent;
  color: #9aa5b5;
  font-weight: 500;
}

.domain-shell .domain-price-pop td:last-child,
.domain-shell .domain-price-pop th:last-child {
  text-align: right;
  color: var(--txtcl);
}

.domain-shell .domain-result-table .domain-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.domain-shell .domain-result-table .domain-status.is-taken {
  background: #f2f4f8;
  color: #8b95a5;
}

.domain-shell .domain-result-table .domain-status.is-free {
  background: rgba(10, 160, 110, 0.1);
  color: #0aa06e;
}

.domain-shell .domain-result-table .domain-note {
  font-size: 13px;
  color: #9aa5b5;
}

.domain-shell .domain-result-table .domain-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  border-radius: 6px;
  background: var(--gradient1);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease-out;
}

.domain-shell .domain-result-table .domain-act:hover { background: var(--darker1); }

.domain-shell .domain-result-table .domain-act.is-disabled {
  background: #eef1f6;
  color: #b4bcc9;
  cursor: not-allowed;
}

.domain-shell .domain-result-table .domain-whois {
  color: var(--Original);
  font-size: 13px;
  white-space: nowrap;
}

/* 购物车条目 */
.domain-shell .cart-item {
  padding: 14px 0;
  border-bottom: 1px dashed #f0f3f8;
}

.domain-shell .cart-item:first-child { padding-top: 0; }

.domain-shell .cart-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--txtcl);
}

.domain-shell .cart-item-head .remove {
  color: #9aa5b5;
  font-size: 13px;
  cursor: pointer;
}

.domain-shell .cart-item-head .remove:hover { color: #ff2626; }

.domain-shell .cart-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.domain-shell .cart-item-foot select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid #e6eaf1;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--txtcl);
}

.domain-shell .cart-item-foot .money {
  color: #ff2626;
  font-size: 16px;
  font-weight: 700;
}

.domain-shell .cart-item-foot .money small {
  font-size: 13px;
  font-weight: 400;
}

.domain-shell .cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid #eef1f8;
  font-size: 14px;
  color: var(--txtcl);
}

.domain-shell .cart-bar .money {
  color: #ff2626;
  font-size: 22px;
  font-weight: 700;
}

.domain-shell .cart-bar .money small {
  font-size: 13px;
  font-weight: 400;
}

.domain-shell .cart-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: 16px;
  border-radius: var(--radius);
  background: var(--gradient1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s ease-out;
}

.domain-shell .cart-buy:hover { background: var(--darker1); }

/* 结果列表的头部工具条（条数统计 + 筛选） */
.domain-shell .shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.domain-shell .shop-bar h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0;
}

.domain-shell .shop-bar .shop-count {
  font-size: 13px;
  color: var(--txtdesc);
}

.domain-shell .shop-bar .shop-count b {
  color: #ff2626;
  font-weight: 600;
}

.domain-shell .shop-bar-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--txtdesc);
}

.domain-shell .shop-bar-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.domain-shell .shop-bar-tools select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e6eaf1;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--txtcl);
}

/* 表格外层卡片：表格本身不带圆角/阴影，套一层白卡更像 www 的其它列表 */
.domain-shell .domain-table-card {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  overflow: hidden;
}

/* 商城页：顶部查询条 + 左结果 / 右购物车 */
.domain-shell .shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.domain-shell .shop-head .select-title {
  margin-bottom: 0;
}

/* 查询条放进页头时不再需要额外的上边距与外阴影（页头已有背景渐变） */
.domain-shell .shop-head .p-search {
  margin-top: 0;
  max-width: 560px;
  border: 1px solid #e6eaf1;
  box-shadow: 0 8px 20px rgba(55, 99, 170, 0.1);
}

.domain-shell .shop-content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.domain-shell .shop-left {
  flex: 1 1 auto;
  min-width: 0;
}

.domain-shell .shop-right {
  flex: 0 0 320px;
}


/* 空态 */
.domain-shell .domain-empty {
  padding: 50px 0;
  text-align: center;
  font-size: 14px;
  color: var(--txtdesc);
}

.domain-shell .domain-empty .develop {
  display: block;
  font-size: 44px;
  color: #c9d3e4;
  margin-bottom: 14px;
}

/* 购物车侧栏 */
.domain-shell .shop-cart-box {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 24px;
}

.domain-shell .shop-cart-box h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 16px;
}

.domain-shell .shop-cart-box .cart-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: var(--txtdesc);
}

.domain-shell .shop-cart-box .cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #eef1f8;
  font-size: 14px;
  color: var(--txtcl);
}

.domain-shell .shop-cart-box .cart-total strong {
  color: #ff2626;
  font-size: 22px;
}


/* ---- 域名注册信息页（whois 展示）的版式 ---------------------------
   对应 v10 的 .domain-register / .domain-register-box / .register-box-head /
   .register-box-item / .register-box-left / .domain-register-right /
   .domain-desc-box / .domain-desc-tips。 */
.domain-shell .whois-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 24px;
}

.domain-shell .whois-main {
  flex: 1 1 auto;
  min-width: 0;
}

.domain-shell .whois-side {
  flex: 0 0 300px;
}

.domain-shell .whois-card {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 26px 28px;
}

.domain-shell .whois-card + .whois-card {
  margin-top: 20px;
}

.domain-shell .whois-card > h3 {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 6px;
}

/* 「标签 / 值」两列：一行一条 whois 字段 */
.domain-shell .whois-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dashed #f0f3f8;
  font-size: 14px;
  line-height: 24px;
}

.domain-shell .whois-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.domain-shell .whois-row dt {
  flex: 0 0 200px;
  margin: 0;
  color: var(--txtdesc);
}

/* 英文小字副标题（Registrant / Registrar …） */
.domain-shell .whois-row dt small {
  display: block;
  font-size: 12px;
  color: #a8b1c0;
}

.domain-shell .whois-row dd {
  flex: 1 1 auto;
  margin: 0;
  text-align: right;
  color: var(--txtcl);
  word-break: break-word;
}

.domain-shell .whois-row dd .ok {
  color: #0aa06e;
}

/* 原始 whois 文本：等宽、可滚动，保留原始换行 */
.domain-shell .whois-raw {
  margin-top: 14px;
  max-height: 340px;
  overflow: auto;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: #f7f9fc;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
  line-height: 22px;
  color: var(--txtdesc);
  white-space: pre-wrap;
  word-break: break-all;
}

.domain-shell .whois-side-box {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 22px 22px 24px;
}

.domain-shell .whois-side-box + .whois-side-box {
  margin-top: 20px;
}

.domain-shell .whois-side-box > h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 16px;
}

.domain-shell .whois-side-box .p-search {
  height: 42px;
  margin-top: 0;
  box-shadow: none;
  border: 1px solid #e6eaf1;
}

.domain-shell .whois-side-box .p-search__input { font-size: 14px; }

.domain-shell .whois-side-box .p-search__btn {
  height: 34px;
  padding: 0 18px;
  font-size: 14px;
}

.domain-shell .whois-side-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.domain-shell .whois-side-tips span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--navright_block);
  font-size: 13px;
  color: var(--txtdesc);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.domain-shell .whois-side-tips a:hover span,
.domain-shell .whois-side-tips span:hover {
  background: var(--lighter1);
  color: var(--Original);
}


/* ============================================================
   14. 移动端
   ============================================================ */
@media screen and (max-width: 992px) {
  .p-stage,
  .p-stage--3,
  .p-stage--6,
  .p-plans,
  .p-plans--4,
  .p-specs--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-trend {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-supports {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-panel {
    flex-direction: column;
  }

  .p-panel__lead {
    flex: 0 0 auto;
    padding: 32px 24px;
  }

  .p-panel__lead h3 { font-size: 24px; }

  .p-consult {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .p-consult__lead { flex: 0 0 auto; }

  .p-consult__lead h2 { font-size: 28px; line-height: 38px; }

  .p-jobs {
    flex-direction: column;
  }

  .p-jobs__side {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .p-jobs__card { flex: 1 1 260px; }

  .p-perf,
  .p-scene {
    flex-direction: column;
    gap: 28px;
  }

  .p-perf__media,
  .p-perf__list,
  .p-scene__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .domain-shell .tem-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 域名三个流程页的两栏布局在 992 以下全部改单栏（结果表 / 购物车 /
     whois 侧栏都放到下面）。顺序上把「内容」提到「侧栏」前面 ——
     手机上先看到结果、再看到购物车，比反过来合理。 */
  .domain-shell .shop-content,
  .domain-shell .whois-layout {
    flex-direction: column;
    gap: 20px;
  }

  .domain-shell .shop-left,
  .domain-shell .shop-right,
  .domain-shell .whois-main,
  .domain-shell .whois-side {
    flex: 0 0 auto;
    width: 100%;
  }

  .domain-shell .form-box {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .domain-shell .form-box > .right-tip {
    flex: 0 0 auto;
    width: 100%;
  }

  .domain-shell .upload-top {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .p-stage,
  .p-stage--3,
  .p-stage--6,
  .p-plans,
  .p-plans--2,
  .p-plans--4,
  .p-specs--3,
  .p-trend,
  .p-supports,
  .p-panel__body,
  .p-perf__list,
  .p-consult__grid {
    grid-template-columns: 1fr;
  }

  /* 单列后卡宽只剩手机宽度，4.35:1 的横幅会被压到 78px 高、细成一条，
     这里放宽到 2.2:1（约 155px），仍然能看出是全景但不至于糊成色带 */
  .p-trend__item--banner .p-trend__media img {
    aspect-ratio: 2.2;
  }

  .p-search {
    height: auto;
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;
  }

  .p-search__select {
    height: 40px;
    padding: 0 12px;
    border-right: 0;
  }

  .p-search__input { height: 40px; flex: 1 1 140px; }

  .p-search__btn {
    height: 40px;
    width: 100%;
    padding: 0 16px;
  }

  .p-steps--3,
  .p-steps--5,
  .p-steps--6 {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-steps--5 .p-steps__item::after,
  .p-steps--6 .p-steps__item::after {
    display: none;
  }

  .p-plan,
  .p-stage__item,
  .p-trend__item,
  .p-panel__item,
  .p-support__head,
  .p-jobs__detail,
  .p-consult__form {
    padding-left: 22px;
    padding-right: 22px;
  }

  .domain-shell { padding: 20px 0 56px; }

  .domain-shell .comp_container { padding: 22px 18px 30px; }

  .domain-shell .form-item {
    flex-direction: column;
    gap: 8px;
  }

  .domain-shell .form-label { min-width: 0; }

  .domain-shell .tem-list { grid-template-columns: 1fr; }

  .domain-shell .domain-result-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}