/*
 * 主站皮肤 · orange — 卓采汇橙 · 工业贸易现代主义
 *
 * 与 default 的关系：
 *   default 是历史橙皮肤（hue 48 / radius 偏紧），样式偏经典 BS5 卡片版。
 *   orange 是面向新首页（templates/orange）的升级版橙皮肤：
 *     - 主色更高饱和（hue 48 → 50，chroma .17 → .19），与 #FF6A1A 对齐
 *     - 圆角恢复中性（6/8px），适合 Hero 大块面 + 工业方正风
 *     - 容器宽度从 1220 拉到 1280，给 Hero / 行业 silo 更多呼吸
 *
 * 加载顺序（base.html.twig 控制）：
 *   1. /build/tailwind.css        ← Tailwind utility 池 + @theme 默认 token
 *   2. /build/skin_site_orange.css← 本文件，覆盖 :root token
 *   3. <style>{ --bs-primary }</style> 终局兜底（base.html.twig 里 inline；orange 里在子模板中以橙色覆盖）
 */

:root {
  /* ===== 文本 ===== */
  --color-fg: #0E1620;
  --color-fg-muted: #475569;
  --color-fg-subtle: #94A3B8;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-on-accent: #FFFFFF;

  /* ===== 背景 ===== */
  --color-bg: #FFFFFF;
  --color-bg-muted: #F5F7FA;          /* 雾白 — section 底 */
  --color-bg-subtle: #EEF1F6;
  --color-card: #FFFFFF;
  --color-input: #F5F7FA;

  /* ===== 主色：卓采汇橙 (oklch ≈ #FF6A1A) ===== */
  --color-primary: oklch(70% 0.19 50);
  --color-primary-hover: oklch(63% 0.19 50);
  --color-primary-active: oklch(55% 0.19 50);
  --color-primary-soft: #FFF1E6;       /* 主色 8% — chip / hover bg */

  /* Bootstrap 5 兜底（base.html.twig inline override 也读这两个变量） */
  --bs-primary: #FF6A1A;
  --bs-primary-rgb: 255, 106, 26;

  /* ===== 强调蓝（链接 / 表格 active） ===== */
  --color-accent: oklch(50% 0.18 258);  /* ≈ #1554D1 */
  --color-accent-hover: oklch(43% 0.18 258);

  /* ===== 状态色 ===== */
  --color-danger: oklch(58% 0.22 25);   /* 中国红，克制使用 */
  --color-success: oklch(62% 0.16 145);
  --color-warning: oklch(78% 0.15 80);
  --color-gold: #C8932E;

  /* ===== 边框 / 分隔 ===== */
  --color-border: #E5E9F0;              /* hairline */
  --color-border-strong: #CBD5E1;
  --color-ring: oklch(70% 0.19 50);

  /* ===== 圆角（B2B 偏方正） ===== */
  --radius-input: 6px;
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-pill: 9999px;

  /* ===== 字体（Hero 用宋体、UI 用 HarmonyOS / PingFang、数字用 mono） ===== */
  --font-sans:
      "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-heading:
      "Noto Serif SC", "Source Han Serif SC", "Songti SC",
      "STSong", "SimSun", serif;
  --font-mono:
      "JetBrains Mono", "IBM Plex Mono", ui-monospace,
      "SFMono-Regular", Menlo, Consolas, monospace;

  /* ===== 阴影 ===== */
  --shadow-card:    0 1px 2px rgba(15,22,32,.04), 0 4px 12px rgba(15,22,32,.06);
  --shadow-popover: 0 2px 6px rgba(15,22,32,.06), 0 14px 28px rgba(15,22,32,.10);
  --shadow-modal:   0 12px 32px rgba(15,22,32,.16);
  --shadow-cta:     0 6px 16px rgba(255,106,26,.32);

  /* ===== 容器 ===== */
  --container-content: 1280px;
  --container-narrow: 980px;
}

/* ───── orange 皮肤专属 utilities（语义化补强，避免在模板里写魔法值） ───── */

/* 模块标题前的橙色指示条（::before 写法太啰嗦，用 class 收敛） */
.zc-section-bar::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--color-primary);
  margin-right: 12px;
  vertical-align: -3px;
  border-radius: 1px;
}

/* 英文小标 micro-label（顶在中文 H2 上方） */
.zc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 印章式认证 chip（金牌 / 实地 / VIP） */
.zc-stamp {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: #fff;
  border-radius: 2px;
  white-space: nowrap;
}
.zc-stamp.is-gold { border-color: var(--color-gold); color: var(--color-gold); }
.zc-stamp.is-success { border-color: var(--color-success); color: var(--color-success); }

/* 工业蓝图栅格底纹（section 上叠加，弱透明度） */
.zc-blueprint {
  background-image:
    linear-gradient(to right, rgba(15,22,32,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,22,32,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* 等宽数字（数据背书条 / 价格 / ticker 时间） */
.zc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Hero 主标题（宋体 + 高对比 + 微紧字距） */
.zc-display {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-fg);
}

/* CTA 主按钮（橙底 + 阴影 + 锐边） */
.zc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: var(--color-primary);
  color: var(--color-fg-on-primary);
  font-weight: 600;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-cta);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.zc-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.zc-cta:active { background: var(--color-primary-active); transform: translateY(0); }

.zc-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--color-fg);
  font-weight: 600;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button);
  transition: border-color .15s, color .15s;
}
.zc-cta-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 实时撮合 ticker 条目入场闪光 */
@keyframes zc-tick-flash {
  0%   { background-color: var(--color-primary-soft); }
  100% { background-color: transparent; }
}
.zc-tick-row { animation: zc-tick-flash 1s ease-out; }

/* 数字滚动入场（DataBackbone 用） */
@keyframes zc-num-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.zc-num-rise { animation: zc-num-rise .6s ease-out both; }

/* ═══════════════════════════════════════════════════════════════════
   H5 移动端响应式补齐 — orange 皮肤通用
   ─────────────────────────────────────────────────────────────────
   作用范围:
     · chrome (topbar/header/nav/footer) —— 模板里只用 Tailwind 原子类无断点
     · 首页 12 个 home section —— Tailwind 自带 lg/md 断点,大多自动塌缩,
       这里只补几个还在用 grid-cols-3 不收敛的局部网格
     · 5 个二级页 (products / search_product / search_company /
       product_new_list / product_new_detail / company / news_detail / newslist)
       —— 共享同样的 1280px 容器,统一收紧内边距
   ─────────────────────────────────────────────────────────────────── */

/* ─── 全局兜底: 任何溢出元素都不再撑横向滚动条 ─── */
html, body { overflow-x: hidden; }

/* ─── 平板及以下: 容器内边距收紧 ─── */
@media (max-width: 1024px) {
  .zc-header-row,
  .zc-header-nav-inner,
  .zc-topbar > div,
  .zc-footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .zc-header-cta .zc-cta-ghost { display: none !important; }  /* 「免费发产品」让位 */
}

/* ─── ≤768px: 主要 H5 断点 ─── */
@media (max-width: 768px) {
  /* TopBar —— 隐藏非关键文案,保留电话 + 登录注册 */
  .zc-topbar > div { height: auto !important; padding: 6px 12px !important; gap: 4px; flex-wrap: wrap; }
  .zc-topbar-left { gap: 6px !important; flex-wrap: wrap; }
  .zc-topbar-right { gap: 6px !important; flex-wrap: wrap; }
  .zc-topbar-tag,
  .zc-topbar-mute,
  .zc-topbar-extra,
  .zc-topbar-lang,
  .zc-topbar-sep { display: none !important; }

  /* Header —— 两行布局: 1) Logo + CTA, 2) 搜索条整行 */
  .zc-header-row {
    height: auto !important;
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .zc-header-logo { order: 0; flex: 1 1 auto; min-width: 0; }
  .zc-header-logo .zc-display { font-size: 20px !important; }
  .zc-logo-sub { display: none !important; }
  .zc-header-cta { order: 1; gap: 6px !important; flex-shrink: 0; }
  .zc-header-cta .zc-cta-ghost { display: none !important; }
  .zc-header-cta .zc-cta { height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }
  .zc-search-form {
    order: 2;
    width: 100%;
    height: 40px !important;
    flex-basis: 100%;
  }
  .zc-search-tabs { padding-left: 6px !important; padding-right: 2px !important; }
  .zc-search-tab { padding: 0 4px !important; font-size: 11px !important; }
  .zc-search-input { font-size: 12px !important; padding: 0 8px !important; }
  .zc-search-input::placeholder { font-size: 11px; }
  .zc-search-btn { height: 40px !important; padding: 0 10px !important; }
  .zc-search-btn-text { display: none; }
  .zc-search-btn .zc-search-icon { display: inline-block !important; }

  /* Nav —— 横向滚动 */
  .zc-header-nav-inner {
    height: 40px !important;
    gap: 18px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-header-nav-inner::-webkit-scrollbar { display: none; }
  .zc-header-nav-inner a { font-size: 13px; flex-shrink: 0; }
  .zc-header-live { display: none !important; }

  /* Hero & 通用 display 标题缩小 */
  .zc-display { letter-spacing: 0; }
  section .zc-display[class*="text-[44px]"],
  section h2.zc-display,
  section h1.zc-display { font-size: 26px !important; line-height: 1.25 !important; }
  /* Tailwind 任意值类 text-[44px]/[56px] 在小屏溢出 */
  [class*="text-[44px]"],
  [class*="text-[56px]"] { font-size: 28px !important; line-height: 1.25 !important; }
  [class*="text-[28px]"],
  [class*="text-[32px]"] { font-size: 22px !important; line-height: 1.3 !important; }

  /* 行业 silo 行 / hero 信任 chip 数据条 —— 缩字号 */
  .zc-stamp { height: 20px; padding: 0 6px; font-size: 10px; letter-spacing: .04em; }
  .zc-eyebrow { font-size: 10px; letter-spacing: .18em; }
  .zc-cta, .zc-cta-ghost { height: 42px; padding: 0 16px; }

  /* 全站容器 —— 收紧 1280 内边距 + 减少纵向 padding */
  [style*="max-width: 1280px"] { padding-left: 14px !important; padding-right: 14px !important; }
  section [style*="max-width: 1280px"][class*="py-20"],
  section [style*="max-width: 1280px"][class*="py-16"],
  section [style*="max-width: 1280px"][class*="py-14"] { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* 实时撮合 ticker —— 内文挤压 */
  .zc-ticker-time { font-size: 11px !important; }
  .zc-ticker-tag { font-size: 10px !important; padding: 0 4px !important; }

  /* Footer —— 5 列已是 md:5,自动塌缩成 1 列,只调内边距 + logo 字号 */
  .zc-footer > div { padding: 32px 14px !important; }
  .zc-footer .zc-display { font-size: 20px !important; }
  .zc-footer .grid { gap: 28px !important; }
  .zc-footer .border-t > div { padding: 14px !important; gap: 8px !important; font-size: 11px !important; }
}

/* ─── 640: 二级页列表项图片缩小 ─── */
@media (max-width: 640px) {
  /* product_new_list 列表 .flex.gap-5 > a.shrink-0(h-32 w-44 = 128x176) 缩小 */
  li.flex .shrink-0.w-44 { width: 6.5rem !important; }
  li.flex .shrink-0.h-32 { height: 5rem !important; }
  /* search_product 标王头条卡 h-32 w-32 同样缩 */
  a.flex.gap-4 .shrink-0.h-32.w-32 { width: 6rem !important; height: 6rem !important; }
  /* product_new_detail 缩略图行不动(已经够小) */
}

/* ─── ≤480px: 极小屏精修 ─── */
@media (max-width: 480px) {
  .zc-header-logo .zc-display { font-size: 18px !important; }
  .zc-header-cta .zc-cta { padding: 0 8px !important; font-size: 11px !important; }
  .zc-search-tab { padding: 0 3px !important; font-size: 10px !important; }
  .zc-search-input { font-size: 11px !important; }

  [class*="text-[44px]"],
  [class*="text-[56px]"] { font-size: 22px !important; }
  [class*="text-[28px]"] { font-size: 18px !important; }
  [class*="text-[26px]"] { font-size: 18px !important; }
  [class*="text-[24px]"] { font-size: 17px !important; }
  [class*="text-[20px]"] { font-size: 16px !important; }

  /* Hero 数据条 26px 数字 -> 18 */
  [class*="text-[26px]"] { font-size: 18px !important; }

  /* 4 / 3 / 2 col grid 全部强制 1 col(避免极小屏挤碎) */
  section .grid-cols-3:not([class*="lg:"]):not([class*="md:"]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
  section .grid-cols-2:not([class*="lg:"]):not([class*="md:"]) { grid-template-columns: 1fr !important; gap: 8px !important; }

  .zc-footer > div { padding: 24px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   传统 B2B 采购门户 · 站点 chrome(顶栏/头部/主导航/底部/悬浮栏)+ 共享原子
   —— 这些组件被 orange 全部页面共享(首页 + products/search/company/news…),
      所以放在 theme.css(每页都随 skin_link 加载),而非仅首页的 app_home_orange.css。
      首页专属版块(楼层/三栏 Hero/采购大厅 等)留在 app_home_orange.css。
   ─────────────────────────────────────────────────────────────────── */
:root{
  --primary:#FF6A1A; --primary-dark:#E0540A; --primary-soft:#FFF1E8;
  --red:#E4393C; --ink:#1A1A1A; --ink2:#555; --ink3:#999;
  --bg:#F5F5F5; --bg2:#FAFAFA; --bd:#EAEAEA; --bd2:#F2F2F2; --bds:#D9D2CB;
  --success:#1A9F5C; --gold:#E58A00; --dark:#2B2622; --dark2:#4A433D;
  --shell:1220px;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}
.oh-topbar,.oh-header,.oh-nav,.oh-footer,.oh-fab{font-family:var(--sans)}
.oh-topbar a,.oh-header a,.oh-nav a,.oh-footer a,.oh-fab a{text-decoration:none}
.oh-shell{width:var(--shell);margin:0 auto}
.oh-seo-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 共享原子(chrome 与首页版块共用) */
.oh-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 14px;font-size:13px;font-weight:700;border-radius:2px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.oh-btn-primary{background:var(--primary);color:#fff}
.oh-btn-primary:hover{background:var(--primary-dark);color:#fff}
.oh-btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.oh-btn-ghost:hover{background:var(--primary-soft)}
.oh-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(255,106,26,.5);animation:ohpulse 1.6s infinite}
@keyframes ohpulse{0%{box-shadow:0 0 0 0 rgba(255,106,26,.45)}70%{box-shadow:0 0 0 6px rgba(255,106,26,0)}100%{box-shadow:0 0 0 0 rgba(255,106,26,0)}}
.oh-topbar svg,.oh-header svg,.oh-nav svg,.oh-footer svg,.oh-fab svg{vertical-align:-.125em}

/* 01 TopBar */
.oh-topbar{background:var(--dark);color:#BDB5AE;font-size:12px}
.oh-topbar-in{display:flex;align-items:center;justify-content:space-between;height:32px}
.oh-tb-welcome{display:inline-flex;align-items:center;gap:5px}
.oh-tb-shield{color:var(--primary);font-size:13px}
.oh-tb-right{display:flex;align-items:center}
.oh-tb-right a{padding:0 10px;color:#BDB5AE}
.oh-tb-right a:hover{color:#FF8A3D}
.oh-tb-right i{width:1px;height:11px;background:var(--dark2)}
.oh-tb-reg{color:#FF8A3D!important}
.oh-tb-tel{color:#FF8A3D!important;font-weight:700}

/* 02 Header */
.oh-header{background:#fff}
.oh-header-in{display:flex;align-items:center;height:100px;gap:24px}
.oh-logo{display:flex;align-items:center;gap:10px;width:248px;flex:none}
.oh-logo-zh{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:1px}
.oh-logo-en{display:block;font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.18em;margin-top:2px}
.oh-logo-tag{align-self:flex-end;margin-bottom:6px;font-size:12px;color:var(--primary);background:var(--primary-soft);padding:2px 6px;border-radius:2px}
.oh-search{width:560px;flex:none}
.oh-search-box{display:flex;align-items:center;height:42px;border:2px solid var(--primary);background:#fff}
.oh-search-cat{display:flex;align-items:center;gap:3px;height:100%;padding:0 12px;font-size:14px;color:var(--ink2);border-right:1px solid var(--bd);cursor:pointer;white-space:nowrap}
.oh-search-cat b{font-size:10px;color:var(--ink3)}
.oh-search-input{flex:1;height:100%;border:0;outline:0;padding:0 12px;font-size:14px;color:var(--ink);font-family:var(--sans)}
.oh-search-input::placeholder{color:var(--ink3)}
.oh-search-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100px;height:100%;border:0;background:var(--primary);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.oh-search-btn:hover{background:var(--primary-dark)}
.oh-sbi{font-size:16px}
.oh-hot{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12px;color:var(--ink3)}
.oh-hot a{color:#666}
.oh-hot a:hover{color:var(--primary)}
.oh-head-cta{display:flex;flex-direction:column;gap:8px;margin-left:auto}
.oh-head-cta .oh-btn{height:40px;width:160px;font-size:15px}
.oh-head-pub b{background:#fff;color:var(--primary);font-size:11px;padding:0 3px;border-radius:2px;margin-right:2px}
.oh-head-qr{display:flex;align-items:center;gap:6px;flex:none;color:var(--ink3);font-size:12px;line-height:1.3}
.oh-head-qr .oh-qr{width:54px;height:54px;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink3);text-align:center;line-height:1.2}

/* 03 主导航 */
.oh-nav{background:var(--primary)}
.oh-nav-in{display:flex;align-items:center;height:44px}
.oh-nav-all{display:flex;align-items:center;gap:8px;width:200px;flex:none;height:44px;padding:0 14px;background:var(--primary-dark);color:#fff;font-size:16px;font-weight:700}
.oh-nav-burger{font-size:16px}
.oh-nav-links{display:flex;align-items:center;height:44px}
.oh-nav-links a{display:flex;align-items:center;height:44px;padding:0 18px;color:#fff;font-size:15px;transition:background .12s}
.oh-nav-links a:hover,.oh-nav-links a.is-active{background:rgba(255,255,255,.18);font-weight:700}
.oh-nav-live{margin-left:auto;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.92);font-size:12px;padding-right:4px}
.oh-nav-live .oh-pulse{background:#fff;box-shadow:none;animation:none}
.oh-nav-live b{font-weight:700}

/* 12 Footer */
.oh-footer{background:var(--dark);margin-top:24px}
.oh-footer-top{display:flex;padding:36px 0 30px}
.oh-footer-cols{display:flex;flex:1;gap:60px}
.oh-fcol h4{font-size:14px;font-weight:700;color:#E8E2DC;margin-bottom:14px}
.oh-fcol a{display:block;font-size:13px;color:#9A8F86;line-height:2}
.oh-fcol a:hover{color:#FF8A3D}
.oh-footer-contact{width:300px;flex:none;border-left:1px solid var(--dark2);padding-left:40px}
.oh-fc-label{font-size:13px;color:#9A8F86;margin-bottom:4px}
.oh-fc-tel{font-size:24px;font-weight:700;color:#FF8A3D;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.oh-fc-time{font-size:12px;color:#9A8F86;margin-top:4px}
.oh-fc-qr{display:flex;gap:18px;margin-top:14px}
.oh-fc-qr span{text-align:center}
.oh-fc-qr .oh-qr{width:72px;height:72px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:#666;text-align:center}
.oh-fc-qr i{display:block;font-size:12px;color:#9A8F86;font-style:normal;margin-top:5px}
.oh-footer-bar{border-top:1px solid var(--dark2);padding:16px 0}
.oh-footer-bar .oh-shell{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#8C837B}
.oh-footer-legal{display:flex;gap:14px;flex-wrap:wrap}
.oh-footer-legal a{color:#8C837B}
.oh-footer-legal a:hover{color:#FF8A3D}

/* 13 悬浮侧栏 */
.oh-fab{position:fixed;right:8px;top:38%;width:52px;background:#fff;border:1px solid var(--bd);box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:90}
.oh-fab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border-bottom:1px solid var(--bd2);color:#666;font-size:11px}
.oh-fab-item:last-child{border-bottom:0}
.oh-fab-ico{font-size:20px}
.oh-fab-item:hover{background:var(--primary-soft);color:var(--primary)}
.oh-fab-item.is-pub{background:var(--primary);color:#fff}
.oh-fab-item.is-pub:hover{background:var(--primary-dark);color:#fff}

/* chrome 响应式 */
@media(max-width:1260px){:root{--shell:100%}.oh-shell{padding:0 12px}.oh-search{width:480px}}
@media(max-width:1000px){.oh-head-qr{display:none}}
@media(max-width:768px){
  .oh-topbar,.oh-head-cta,.oh-nav-live,.oh-fab{display:none}
  .oh-header-in{height:auto;flex-wrap:wrap;gap:10px;padding:10px 0}
  .oh-logo{width:auto}
  .oh-search{width:100%;order:3}
  .oh-nav-in{overflow-x:auto;white-space:nowrap}
  .oh-nav-all{width:auto}
  .oh-footer-top{flex-wrap:wrap;gap:24px}
  .oh-footer-contact{width:100%;border-left:0;padding-left:0}
}