:root {
  --gr-brand: #e1251b;
  --gr-brand-dark: #c81623;
  --gr-brand-soft: #fff1f0;
  --gr-link: #005ea7;
  --gr-title: #1f2329;
  --gr-text: #333;
  --gr-muted: #666;
  --gr-bg: #f6f7fb;
  --gr-card: #fff;
  --gr-line: #e7e9ee;
  --gr-line-soft: #f0f1f4;
  --gr-success: #2f9e44;
  --gr-warning: #f59f00;
  --gr-radius: 8px;
  --gr-shadow: 0 12px 32px rgba(31, 35, 41, .08);
  --gr-width: 1200px;
}

* {
  box-sizing: border-box
}

html {
  font-size: 16px;
  scroll-behavior: smooth
}

body {
  margin: 0 !important;
  background: var(--gr-bg) !important;
  color: var(--gr-text) !important;
  font: 16px/1.65 "Microsoft YaHei", "PingFang SC", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased
}

body a {
  color: inherit;
  text-decoration: none
}

body a:hover {
  color: var(--gr-brand)
}

body button,
body input,
body select,
body textarea {
  font: inherit
}

body button,
body [type=button],
body [type=submit],
body .btn,
body .publish,
body .submit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  cursor: pointer
}

body button:focus-visible,
body a:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: 2px solid var(--gr-brand);
  outline-offset: 2px
}

.wrap,
.dw,
.expo-wrap,
.wiki-wrap,
.trade-wrap,
.portal-wrap {
  width: min(var(--gr-width), 94%) !important;
  margin-left: auto !important;
  margin-right: auto !important
}

.global-shell-top,
.top {
  background: #f5f5f5 !important;
  color: #666 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  font-size: 13px !important
}

.global-shell-header,
body>header {
  background: rgba(255, 255, 255, .96) !important;
  color: var(--gr-title) !important;
  box-shadow: 0 8px 30px rgba(31, 35, 41, .045) !important;
  border-bottom: 1px solid var(--gr-line) !important;
  backdrop-filter: saturate(160%) blur(14px)
}

.global-shell-header .head,
.head {
  height: 86px !important;
  gap: 24px !important
}

.brand-logo {
  min-width: 190px !important
}

.brand-logo img {
  width: 176px !important;
  max-height: 60px !important;
  object-fit: contain !important
}

.global-shell-header .search,
.head .search {
  height: 48px !important;
  background: #fff !important;
  border: 2px solid var(--gr-brand) !important;
  border-radius: 12px !important;
  color: #7b8190 !important;
  box-shadow: 0 6px 18px rgba(225, 37, 27, .08) !important
}

.global-shell-header .publish,
.publish,
.btn,
.submit,
.actions a:not(.secondary):not(.alt),
.hero-actions .primary,
.empty a {
  background: linear-gradient(135deg, #f23b32, var(--gr-brand-dark)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 18px rgba(225, 37, 27, .18) !important;
  font-weight: 700 !important
}

.global-shell-header .publish:hover,
.publish:hover,
.btn:hover,
.submit:hover {
  background: var(--gr-brand-dark) !important;
  color: #fff !important
}

.navbox,
.nav,
.nav-wrap {
  background: #fff !important;
  border-color: var(--gr-line) !important;
  color: var(--gr-title) !important
}

.global-shell-header .nav {
  height: 48px !important;
  gap: 0 !important
}

.global-shell-header .nav a {
  height: 48px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important
}

.global-shell-header .nav a {
  position: relative
}

.global-shell-header .nav a:hover {
  background: #fff !important;
  color: var(--gr-brand) !important
}

.global-shell-header .nav a.on:after,
.global-shell-header .nav a:hover:after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--gr-brand)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--gr-title);
  font-weight: 700;
  line-height: 1.35
}

/* 深色底区块内的标题必须显式提亮：上面的 h1~h6 深色规则会让标题与深色背景糊在一起 */
.geo-strip h1,
.geo-strip h2,
.geo-strip h3,
.geo-strip h4,
.geo-strip h5,
.geo-strip h6,
.graph h1,
.graph h2,
.graph h3,
.graph h4,
.graph h5,
.graph h6,
.portal-dark h1,
.portal-dark h2,
.portal-dark h3,
.portal-dark h4 {
  color: #fff !important
}

h1 {
  font-size: 38px
}

h2 {
  font-size: 28px
}

h3 {
  font-size: 20px
}

p {
  line-height: 1.8
}

.muted,
.meta,
.crumb,
.summary+small {
  color: var(--gr-muted) !important
}

.crumb {
  font-size: 14px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important
}

.crumb a {
  color: var(--gr-link) !important
}

.hero,
.channel-hero,
.expo-hero,
.expo-head,
.wiki-hero,
.trade-hero,
.phead,
.shead {
  background: radial-gradient(circle at 75% 0, rgba(255, 117, 105, .12), transparent 34%), linear-gradient(110deg, #fff7f5 0, #fff 55%, #fff8f4 100%) !important;
  color: var(--gr-title) !important;
  border-bottom: 1px solid #f1e5e2 !important
}

.hero h1,
.channel-hero h1,
.expo-hero h1,
.expo-head h1,
.wiki-hero h1,
.trade-hero h1,
.phead h1,
.shead h1 {
  font-size: 40px !important;
  color: var(--gr-title) !important;
  letter-spacing: -.5px !important
}

.hero p,
.channel-hero p,
.expo-hero p,
.expo-head p,
.wiki-hero p,
.trade-hero p,
.phead p,
.shead p {
  color: #606a78 !important;
  font-size: 17px !important
}

.kicker,
.wiki-kicker,
.eyebrow,
.badge,
.tag,
.k,
.card-tag {
  color: var(--gr-brand) !important;
  font-weight: 800 !important
}

/* 小号全大写标签按正文标准要求 4.5:1，品牌红 #e1251b 在浅底上只有 4.33，加深一档 */
.kicker,
.wiki-kicker,
.eyebrow {
  color: var(--gr-brand-dark) !important
}

.card,
.content,
.side,
.article,
.expo-card,
.expo-side section,
.service-grid article,
.supplier,
.demand,
.feature,
.list,
.wb-panel,
.r-card,
.rental-box {
  background: var(--gr-card) !important;
  border: 1px solid var(--gr-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 20px rgba(31, 35, 41, .035) !important
}

.card:hover,
.expo-card:hover,
.supplier:hover,
.demand:hover,
.r-card:hover {
  border-color: #f2aaa5 !important;
  box-shadow: var(--gr-shadow) !important;
  transform: translateY(-2px)
}

.filter,
.cats a,
.trade-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 15px !important
}

.filter.active,
.cats a.on,
.trade-nav a.active {
  background: var(--gr-brand) !important;
  border-color: var(--gr-brand) !important;
  color: #fff !important
}

.price,
.r-price b,
.quote b {
  color: var(--gr-brand) !important
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px
}

th {
  background: #fafafa;
  color: #555;
  font-weight: 700
}

th,
td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--gr-line)
}

tbody tr:hover {
  background: #fffafa
}

.tag,
.badge,
.status,
.r-badges span {
  border-radius: 3px !important
}

input,
select,
textarea {
  min-height: 42px;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--gr-text) !important;
  padding: 9px 12px !important
}

/* 复选框/单选框不适用上面的输入框尺寸与内边距，否则会被撑成方框并把勾选标记挤变形 */
input[type=checkbox],
input[type=radio] {
  min-height: 0 !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 0 8px 0 0;
  flex: 0 0 auto;
  accent-color: var(--gr-brand);
  cursor: pointer
}

input[type=checkbox] {
  border-radius: 3px !important
}

input[type=radio] {
  border-radius: 50% !important
}

input:hover,
select:hover,
textarea:hover {
  border-color: #999 !important
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gr-brand) !important;
  box-shadow: 0 0 0 2px rgba(225, 37, 27, .1) !important
}

.global-shell-footer,
body>footer {
  background: #262626 !important;
  color: #aaa !important;
  border: 0 !important;
  margin-top: 56px !important;
  font-size: 14px !important
}

.global-shell-footer strong,
body>footer strong {
  color: #fff !important
}

.global-shell-footer a {
  color: #aaa !important
}

.global-shell-footer a:hover {
  color: #fff !important
}

.gr-floating-tools {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 80;
  display: grid;
  width: 54px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--gr-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--gr-shadow);
  backdrop-filter: blur(10px);
  transition: width .18s ease, right .18s ease, border-radius .18s ease
}

.gr-floating-tools a {
  width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--gr-line-soft);
  font-size: 12px;
  color: #555 !important
}

.gr-floating-tools a:last-child {
  border-bottom: 0
}

.gr-floating-tools a:hover {
  background: var(--gr-brand);
  color: #fff !important
}

/* 贴边把手：展开时是条底的一行（同宽 52px），收起时变成贴屏幕右边缘的窄把手。
   commerce.css 的 `body button{display:inline-flex;min-height:42px}` 特异性 (0,0,2)
   低于本条 (0,2,0)，显式写死高度即可覆盖。 */
.gr-floating-tools .gr-tools-toggle {
  width: 52px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  color: #555;
  cursor: pointer
}

.gr-floating-tools .gr-tools-toggle:hover {
  background: var(--gr-brand);
  color: #fff
}

/* 收起：只剩宽度 24px 的把手贴在视口右边缘（右边框去掉、左侧圆角），
   nav 的 width/right 有 transition，视觉上就是向左滑出 / 贴边收回。 */
.gr-floating-tools.is-collapsed a {
  display: none
}

.gr-floating-tools.is-collapsed {
  width: 24px;
  right: 0;
  border-right: 0;
  border-radius: 8px 0 0 8px
}

.gr-floating-tools.is-collapsed .gr-tools-toggle {
  width: 100%
}

/* 悬浮快捷条固定在视口最右侧（52px 宽 + 18px 右边距，共占用最右 70px），而页面容器
   是居中且宽度为 min(1240px, 94%)（租赁下单页是 min(1280px, 100% - 40px)）。
   空间不足时容器的右边缘会进入这 70px 区间，把内容最右一列压住（例如 /procurement
   分类板的第 4 列）。临界宽度：1240 容器需 ≥1380px，1280 容器需 ≥1420px。 */
@media(max-width:1419px) {
  .gr-floating-tools {
    display: none
  }
}

.hero {
  padding: 34px 0 42px !important
}

.hero-layout {
  gap: 18px !important
}

.category-panel,
.trust-panel {
  border: 1px solid rgba(230, 51, 45, .09) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 44px rgba(77, 27, 24, .08) !important;
  padding: 22px 18px !important
}

.category-panel h3,
.trust-panel h3 {
  font-size: 18px !important
}

.category-list {
  gap: 4px !important
}

.category-list a {
  padding: 9px 12px !important;
  border-radius: 9px !important;
  color: #555 !important
}

.category-list a:hover {
  background: linear-gradient(90deg, #fff0ee, #fff7f5) !important;
  color: var(--gr-brand) !important;
  transform: translateX(3px)
}

.hero-main {
  min-height: 380px !important;
  padding: 52px 48px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .22), transparent 28%), radial-gradient(circle at 88% 82%, rgba(118, 0, 9, .24), transparent 30%), linear-gradient(128deg, #ef3f37 0, #df1f29 52%, #b90816 100%) !important;
  box-shadow: 0 24px 56px rgba(180, 16, 25, .24) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important
}

.hero-main:before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 46px solid rgba(255, 255, 255, .055);
  border-radius: 50%;
  right: -65px;
  top: -95px
}

.hero-main:after {
  color: rgba(255, 255, 255, .055) !important;
  bottom: -86px !important
}

.hero-main .eyebrow {
  color: #ffe2dc !important;
  font-size: 13px !important;
  letter-spacing: .16em !important
}

.hero-main h1 {
  color: #fff !important;
  font-size: clamp(40px, 4vw, 54px) !important;
  max-width: 690px !important;
  text-shadow: 0 2px 16px rgba(80, 0, 0, .12)
}

.hero-main .lead {
  color: rgba(255, 255, 255, .86) !important;
  font-size: 17px !important;
  line-height: 1.9 !important
}

.hero-main .btn {
  min-height: 46px;
  padding: 0 24px !important
}

.hero-main .btn:not(.alt) {
  background: #fff !important;
  color: var(--gr-brand-dark) !important;
  box-shadow: 0 10px 24px rgba(95, 0, 5, .16) !important
}

.hero-main .btn.alt {
  background: rgba(114, 0, 10, .18) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  backdrop-filter: blur(8px)
}

.trust-item {
  position: relative;
  padding: 16px 0 16px 30px !important
}

.trust-item b {
  font-size: 15px !important
}

.trust-item b:first-letter {
  color: var(--gr-brand)
}

.trust-panel .ai-box {
  border-radius: 10px !important;
  padding: 14px 15px !important;
  background: linear-gradient(135deg, #fff0ed, #fff8f5) !important
}

.stats .wrap {
  padding: 28px 0 !important
}

.stat strong {
  font-size: 28px !important
}

.section {
  padding: 60px 0 !important
}

.section-head {
  margin-bottom: 24px !important
}

.section h2 {
  font-size: 30px !important
}

.channel {
  border-radius: 14px !important;
  padding: 26px !important;
  box-shadow: 0 6px 22px rgba(31, 35, 41, .04) !important
}

.channel i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff0ed, #ffe4df);
  font-size: 24px !important
}

.channel h3 {
  font-size: 19px !important
}

.supply-cta {
  border-radius: 18px !important;
  box-shadow: 0 20px 46px rgba(180, 16, 25, .2) !important
}

@media(max-width:900px) {
  html {
    font-size: 15px
  }

  .gr-floating-tools {
    display: none
  }

  .global-shell-header .head,
  .head {
    height: 70px !important
  }

  .global-shell-header .nav a {
    padding: 0 12px !important
  }

  .hero h1,
  .channel-hero h1,
  .expo-hero h1,
  .expo-head h1,
  .wiki-hero h1,
  .trade-hero h1,
  .phead h1,
  .shead h1 {
    font-size: 32px !important
  }
}

@media(max-width:600px) {
  body {
    font-size: 15px !important
  }

  .brand-logo {
    min-width: 145px !important
  }

  .brand-logo img {
    width: 142px !important
  }

  h1 {
    font-size: 30px
  }

  h2 {
    font-size: 24px
  }

  h3 {
    font-size: 18px
  }

  body button,
  body [type=button],
  body [type=submit],
  body .btn {
    min-height: 44px
  }
}

/* 2026 China B2B2C marketplace shell */
.shop-top {
  display: none !important
}

.gr-market-wrap {
  width: min(1240px, 94%);
  margin: 0 auto
}

.gr-topbar {
  height: 34px;
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
  color: #666;
  font-size: 12px
}

.gr-topbar .gr-market-wrap,
.gr-top-left,
.gr-top-right {
  height: 100%;
  display: flex;
  align-items: center
}

.gr-topbar .gr-market-wrap {
  justify-content: space-between
}

.gr-top-left,
.gr-top-right {
  gap: 18px
}

.gr-topbar a {
  color: #555
}

.gr-topbar a:hover {
  color: var(--gr-brand)
}

.gr-location {
  color: #222;
  font-weight: 700
}

.gr-location:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 2px solid var(--gr-brand);
  border-radius: 50%
}

.gr-top-badge {
  padding-left: 18px;
  border-left: 1px solid #ddd;
  color: #666
}

.gr-market-header {
  position: relative !important;
  z-index: 30;
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 18px rgba(31, 35, 41, .055) !important
}

.gr-head-main {
  height: 118px;
  display: flex;
  align-items: center;
  gap: 34px
}

.gr-market-logo {
  flex: 0 0 190px
}

.gr-market-logo img {
  display: block;
  width: 184px;
  height: auto
}

.gr-search-area {
  flex: 1;
  min-width: 0;
  max-width: 660px
}

.gr-search-tabs {
  height: 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-left: 4px;
  font-size: 13px
}

.gr-search-tabs a.on {
  color: var(--gr-brand);
  font-weight: 700
}

.gr-main-search {
  height: 48px;
  display: flex;
  border: 2px solid var(--gr-brand);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(225, 37, 27, .08)
}

.gr-main-search input {
  flex: 1;
  min-width: 0;
  height: 44px !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 18px !important;
  font-size: 15px
}

.gr-main-search button {
  width: 94px;
  min-height: 44px !important;
  border: 0;
  background: linear-gradient(135deg, #e1251b, #c81623);
  color: #fff;
  font-size: 16px;
  font-weight: 700
}

.gr-hotwords {
  display: flex;
  gap: 12px;
  padding: 7px 4px 0;
  color: #6b6b6b;
  font-size: 12px
}

.gr-hotwords a {
  color: #6b6b6b
}

.gr-hotwords a:hover {
  color: var(--gr-brand)
}

.gr-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px
}

.gr-head-actions>a:not(.gr-demand-action) {
  min-width: 66px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #333;
  font-size: 13px
}

.gr-action-icon {
  position: relative;
  width: 25px;
  height: 25px;
  display: block;
  border: 2px solid #424957;
  border-radius: 8px
}

.gr-icon-user:before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 7px;
  top: 4px;
  border: 2px solid currentColor;
  border-radius: 50%
}

.gr-icon-user:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 6px;
  left: 4px;
  bottom: 3px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0
}

.gr-icon-order:before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 6px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px currentColor, 0 10px currentColor
}

.gr-head-actions>a:hover,
.gr-head-actions>a:hover .gr-action-icon {
  color: var(--gr-brand);
  border-color: var(--gr-brand)
}

.gr-demand-action {
  height: 44px;
  padding: 0 20px;
  display: flex !important;
  align-items: center;
  background: linear-gradient(135deg, #e1251b, #c81623);
  color: #fff !important;
  border-radius: 9px;
  font-size: 15px !important;
  font-weight: 700;
  box-shadow: 0 9px 20px rgba(225, 37, 27, .18)
}

.gr-nav-shell {
  height: 50px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #e7e7e7;
  background: #fff
}

.gr-primary-nav {
  height: 49px;
  display: flex;
  align-items: center;
  gap: 0
}

.gr-primary-nav>a {
  height: 49px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  color: #222;
  font-size: 15px;
  font-weight: 700
}

.gr-primary-nav>a:not(.gr-all-categories):hover,
.gr-primary-nav>a.on {
  color: var(--gr-brand)
}

.gr-primary-nav>a:not(.gr-all-categories):hover:after,
.gr-primary-nav>a.on:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--gr-brand);
  border-radius: 3px
}

.gr-all-categories {
  align-self: stretch;
  min-width: 190px;
  margin-right: 10px;
  padding: 0 20px !important;
  background: linear-gradient(135deg, #e1251b, #c81623);
  color: #fff !important
}

.gr-all-categories i {
  width: 16px;
  height: 12px;
  margin-right: 10px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: relative
}

.gr-all-categories i:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  border-top: 2px solid #fff
}

.gr-nav-promise {
  margin-left: auto;
  color: #9b5d31;
  font-size: 12px;
  white-space: nowrap
}

.gr-home-ribbon {
  background: #fff;
  border-bottom: 1px solid #eee
}

.gr-home-ribbon .gr-market-wrap {
  height: 84px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center
}

.gr-home-ribbon a {
  min-width: 0;
  padding: 0 24px;
  border-right: 1px solid #eee
}

.gr-home-ribbon a:first-child {
  border-left: 1px solid #eee
}

.gr-home-ribbon b,
.gr-home-ribbon span {
  display: block
}

.gr-home-ribbon b {
  color: #262b33;
  font-size: 16px
}

.gr-home-ribbon span {
  margin-top: 3px;
  color: #8b919c;
  font-size: 12px
}

.gr-home-ribbon a:hover b {
  color: var(--gr-brand)
}

.gr-market-footer {
  margin-top: 64px !important;
  padding: 0 !important;
  background: #20242b !important;
  color: #aeb3bd !important
}

.gr-footer-promises {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  color: #333
}

.gr-footer-promises .gr-market-wrap {
  height: 106px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center
}

.gr-footer-promises .gr-market-wrap>div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-right: 1px solid #eee
}

.gr-footer-promises .gr-market-wrap>div:last-child {
  border: 0
}

.gr-footer-promises b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gr-brand);
  border-radius: 50%;
  color: var(--gr-brand);
  font-size: 20px
}

.gr-footer-promises span,
.gr-footer-promises strong {
  display: block
}

.gr-footer-promises strong {
  color: #222 !important;
  font-size: 16px
}

.gr-footer-promises span {
  color: #6b6b6b;
  font-size: 12px
}

.gr-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 44px;
  padding: 52px 0 40px
}

.gr-footer-grid section>strong {
  display: block;
  margin-bottom: 18px;
  color: #fff;
  font-size: 16px
}

.gr-footer-grid section>a {
  display: block;
  margin: 10px 0;
  color: #aeb3bd !important;
  font-size: 14px
}

.gr-footer-grid section>a:hover {
  color: #fff !important
}

.gr-footer-logo {
  display: inline-block;
  line-height: 0
}

.gr-footer-brand img {
  width: 180px;
  filter: none;
  opacity: 1;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px
}

.gr-footer-brand p {
  max-width: 340px;
  color: #aeb3bd;
  line-height: 1.9
}

.gr-footer-service {
  display: inline-flex !important;
  width: max-content;
  padding: 9px 15px;
  border: 1px solid #555;
  border-radius: 6px
}

.gr-footer-bottom {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #393d44;
  color: #9aa1ac;
  font-size: 12px
}

@media(max-width:1050px) {
  .gr-head-actions>a:not(.gr-demand-action) {
    display: none
  }

  .gr-primary-nav>a {
    padding: 0 11px
  }

  .gr-primary-nav>a:nth-of-type(n+8) {
    display: none
  }

  .gr-nav-promise {
    display: none
  }

  .gr-footer-grid {
    grid-template-columns: 2fr repeat(2, 1fr)
  }

  .gr-footer-grid section:nth-child(4),
  .gr-footer-grid section:nth-child(5) {
    display: none
  }
}

@media(max-width:760px) {
  .gr-topbar {
    display: none
  }

  .gr-head-main {
    height: 78px;
    gap: 12px
  }

  .gr-market-logo {
    flex-basis: 132px
  }

  .gr-market-logo img {
    width: 132px
  }

  .gr-search-tabs,
  .gr-hotwords,
  .gr-head-actions {
    display: none
  }

  .gr-main-search {
    height: 44px
  }

  .gr-main-search input {
    height: 40px !important;
    padding-left: 12px !important
  }

  .gr-main-search button {
    width: 64px;
    min-height: 40px !important
  }

  .gr-all-categories {
    display: none !important
  }

  .gr-primary-nav {
    overflow-x: auto
  }

  .gr-primary-nav>a {
    padding: 0 13px
  }

  .gr-home-ribbon .gr-market-wrap {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 0
  }

  .gr-home-ribbon a {
    padding: 12px 16px;
    border-bottom: 1px solid #eee
  }

  .gr-home-ribbon a:last-child {
    grid-column: 1/-1
  }

  .gr-footer-promises .gr-market-wrap {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 0
  }

  .gr-footer-promises .gr-market-wrap>div {
    padding: 12px
  }

  .gr-footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 36px 0
  }

  .gr-footer-brand {
    grid-column: 1/-1
  }

  .gr-footer-bottom {
    height: auto;
    display: grid;
    gap: 8px;
    padding: 20px 0
  }
}