@charset "utf-8";
/* ==========================================================================
   responsive.css  ·  全站响应式覆盖（必须最后加载）
   --------------------------------------------------------------------------
   为什么单独成文件：这些规则要盖掉 pages/*.css 里的基础样式，而基础样式
   是按页面拆分的（news.css / about.css …）。只要本文件排在页面样式之后，
   同特异度下后者胜出，覆盖才生效；混在 style.css 里会被页面样式反盖回去
   （移动端新闻列表被压成一列就是这么来的）。
   加载顺序：style.css → pages/{页面}.css → responsive.css
   ========================================================================== */

/* 注：右侧悬浮工具条（.side_tool）各断点尺寸一致（40×40、贴右边缘），
   与 huawei.com/cn 手机端实测相同，所以这里不再覆盖；
   原站遗留的 .float_button 圆形按钮规则已随功能下线一并删除。 */

@media (max-width: 980px) {
.hp-container {
padding: 0 20px;
}
.hp-band {
padding: 64px 0;
}
.hp-section-title {
margin-bottom: 36px;
}
}

@media (prefers-reduced-motion: reduce) {
  /* .reveal-fade 必须一起放开 opacity：脚本在 reduce 下不补 .in，
     漏掉会让所有挂了 reveal-fade 的元素（新闻标题、横幅副标题）永久不可见。
     但**不能**给它 transform: none —— .new_banner_box .title_wrap 就是 reveal-fade，
     它的居中靠 translate(-50%,-50%)，一旦清零，横幅标题会整体右移半个屏宽。
     reveal-fade 本身只动 opacity，本来也不需要重置 transform。 */
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .reveal-fade { opacity: 1 !important; transition: none !important; }
}

@media (max-width: 980px) {
  html.js .reveal.reveal-left,
  html.js .reveal.reveal-right { transform: translateY(30px); }
  html.js .reveal.reveal-left.in,
  html.js .reveal.reveal-right.in { transform: none; }
}

@media (max-width: 1200px) {
  /* 页头高度切到「无工具条」档：工具条 display:none，导航条降为 64。
     只改这两个变量，主区顶距 / 吸顶位置 / CMS 面包屑全部自动跟随。 */
  :root {
    --topbar-h: 0px;
    --header-h: 64px;
  }

  .index_product_content .product_wrap .cover_wrap .cover { width: 80%; padding-top: 53%; }

  /* 头部：汉堡菜单 */
  /* 关键：.main_top .header_box 是变高盒子，超长时改为纵向居中，
     否则汉堡按钮会被拉长并顶出屏幕 */
  .main_top { padding-right: 0; }
  .main_top .header_box {
    padding: 0 12px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .main_top .header_logo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .main_top .header_logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .nav_toggle { display: inline-flex !important; }
  /* ---- 汉堡抽屉：从页头下沿一直铺到屏幕底部（不再是 72vh 的下拉条） ---- */
  .main_top.nav-enabled .header_nav {
    position: fixed;
    top: var(--header-total);
    left: 0; right: 0; bottom: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0 22px;
    background: var(--color-bg-card);
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 抽屉滑到底不把滚动传给背后的页面（iOS 的滚动穿透） */
    overscroll-behavior: contain;
    white-space: normal;
  }
  .main_top.nav-enabled .header_nav.open {
    display: flex;
    animation: nav-drawer-in .22s ease-out both;
  }
  @keyframes nav-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  /* 抽屉展开时锁住背后页面。
     注意：style.css 里 html 有 overflow-x:hidden，一旦 html 的 overflow 不是
     visible，body 上的 overflow:hidden 就不再向视口传播 —— 锁 body 完全没用，
     必须锁 html。补 --nav-sbw（脚本写入的滚动条宽度）是为了避免滚动条消失
     那一刻页头内容整体右移十几像素。 */
  html.nav-open { overflow: hidden; }
  html.nav-open .main_top { padding-right: var(--nav-sbw, 0px); }

  .main_top.nav-enabled .header_nav .header_nav_item {
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    line-height: 1.4;
    /* 右padding 留给箭头，避免长菜单名压到箭头上；
       上下留白按视口高收缩：8 项 + 底部动作区在 667/640 这类小屏上要能一屏放下，
       否则底部的商城/语言按钮会被挤到滚动区外。先给固定值兜底，再用 svh 微调。 */
    padding: 17px 34px 17px 2px;
    padding-top: clamp(13px, 2.2svh, 19px);
    padding-bottom: clamp(13px, 2.2svh, 19px);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
    white-space: normal;
  }
  /* 右向箭头：用两条边框转 45° 画，不依赖图标字体的具体字形 */
  .main_top.nav-enabled .header_nav .header_nav_item::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-top: 1.5px solid var(--color-text-secondary);
    border-right: 1.5px solid var(--color-text-secondary);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color .2s, right .2s;
    transition: border-color .2s, right .2s;
  }
  .main_top.nav-enabled .header_nav .header_nav_item:hover::before,
  .main_top.nav-enabled .header_nav .header_nav_item:active::before {
    border-color: var(--color-primary);
    right: 6px;
  }
  /* 当前栏目：压过上面那条 color 声明（同特异度时本条在后） */
  .main_top.nav-enabled .header_nav .header_nav_item.active { color: var(--color-primary); }
  /* 桌面的下划线在这里换成箭头，规则必须显式关掉 */
  .main_top.nav-enabled .header_nav .header_nav_item::after {
    display: none;
  }

  /* ---- 抽屉底部动作区：商城 + 语言，圆形图标按钮 ---- */
  .main_top.nav-enabled .header_nav .nav_panel_foot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 64px;
    margin-top: auto;                 /* 顶到底部，菜单项少时也不会浮在中间 */
    padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px));
    padding-top: clamp(20px, 3.6svh, 40px);
    padding-bottom: calc(clamp(20px, 3.6svh, 40px) + env(safe-area-inset-bottom, 0px));
  }
  .nav_foot_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    text-align: center;
  }
  .nav_foot_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    -webkit-transition: border-color .2s, background .2s;
    transition: border-color .2s, background .2s;
  }
  .nav_foot_icon .material-icons {
    font-size: 26px;
    color: var(--color-text-secondary);
    -webkit-transition: color .2s;
    transition: color .2s;
  }
  .nav_foot_label { font-size: 13px; line-height: 1.4; }
  .nav_foot_btn:hover .nav_foot_icon,
  .nav_foot_btn:active .nav_foot_icon { border-color: var(--color-primary); background: var(--color-bg-soft); }
  .nav_foot_btn:hover .nav_foot_icon .material-icons,
  .nav_foot_btn:active .nav_foot_icon .material-icons { color: var(--color-primary); }

  .header_shop_content { display: none; }
  /* 无汉堡按钮时的降级：导航横向滚动（正常不应触发，作为兜底） */
  .main_top:not(.nav-enabled) .header_nav {
    max-width: 62vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .main_top:not(.nav-enabled) .header_nav::-webkit-scrollbar { display: none; }
}

/* 抽屉的入场动画必须放在上面那段之后才能关掉（同特异度，后被前者覆盖） */
@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .main_top.nav-enabled .header_nav.open { animation: none; }
  .main_top.nav-enabled .header_nav .header_nav_item::before { transition: none; }
}

@media (max-width: 992px) {
  /* 头部汉堡菜单相关规则已上移至 1200 断点，此处只留版面类调整 */

  /* 首页：公司简介卡片改静态 */
  .banner_content_bottom .index_company_profile {
    position: static; transform: none; width: 100%;
    padding: 30px 20px;
  }
  .banner_content_top .banner_cover,
  #index_main .swiper-slide { height: 420px; }
  .banner_content_bottom .banner_cover { height: 420px; }

  /* 数据条 */
  .main_banner_content .company_record { position: static; transform: none; margin-top: -40px; }
  .main_banner_content .company_record .list_record { padding: 20px; border-radius: 8px; }
  .main_banner_content .company_record .list_record .item_record { width: 50%; margin-bottom: 16px; }

  /* 产品区：分类列表移到下方 */
  .index_product_content { padding-right: 0; }
  .index_product_content .product_sort { position: static; width: 100%; }
  .product_sort .list_sort { height: auto; }
  .index_product_content .product_wrap .cover_wrap .cover { width: 90%; padding-top: 60%; }

  /* 态度四宫格 -> 两列 */
  .index_attitude_content .list_attitude .item_attitude { width: 50%; height: 460px; }
  .index_attitude_content .list_attitude .item_attitude .title_wrap { top: 70%; }

  /* 新闻 */
  .index_news_content .news_content .list_news { flex-direction: column; }
  .index_news_content .news_content .list_news .item_news { width: 100%; min-height: auto; }

  /* 页脚 */
  .footer_wrap > div { width: 100%; }
  .footer_wrap .footer_nav .list_footer { width: 50%; margin-bottom: 25px; }
  .footer_wrap .footer_info { padding: 0; }
  .footer_content_bottom .footer_bottom { flex-direction: column; gap: 8px; text-align: center; }
  /* 备案号在窄屏整行居中；两个号码可能各占一行，行间距靠 gap 控制 */
  .footer_content_bottom .footer_beian { justify-content: center; gap: 2px 14px; }

  /* 子页通用（级联生效） */
  #profile_main .profile_mian_banner { height: 360px !important; }
  #product_main .product_content .list_product .item_product { width: 50%; }
  #productviews_main .productviews_content .product_view > div { width: 100%; display: block; }
  .product_view .product_wrap { padding: 0 20px; }
  /* 窄屏新闻条目：日期块整行置顶 → 封面整宽 → 文字，纵向堆叠 */
  #news_main .item_news { flex-direction: column; gap: 0; }
  #news_main .item_news .news_wrap { width: 100%; padding-left: 0; min-height: 0; display: block; }
  #news_main .item_news .news_wrap .cover_wrap { position: static; width: 100%; height: 220px; margin-bottom: 15px; }
  #news_main .item_news .item_news_time {
    display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 10px; width: 100%; min-height: 0; height: auto; margin: 0 0 12px; padding: 12px 16px;
  }
  #news_main .item_news .item_news_time .day { font-size: 26px; }
  #news_main .item_news .item_news_time .year { font-size: 14px; }
  /* 招聘列表：5 列表头在窄屏每个字段只剩 30~70px，会把「工作地点」压成竖排。
     直接去掉表头（它只是桌面表格的列名），每条改成「职位名独占一行 + 元信息一行」。 */
  .recruit_wrap .recruit_tap { display: none; }
  .item_work .work_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 18px 20px;
  }
  .item_work .work_wrap .post {
    flex: 1 1 100%;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
  }
  .item_work .work_wrap .section,
  .item_work .work_wrap .address,
  .item_work .work_wrap .people,
  .item_work .work_wrap .date {
    flex: 0 0 auto;
    padding: 0;
    font-size: 13px;
    color: var(--color-text-muted);
  }
  /* 后台没填的字段会渲染成空 div，flex 下仍占一个 gap，把「地点」和「日期」拉开 */
  .item_work .work_wrap > div:empty { display: none; }
  .recruit_content { padding: 48px 0; }
  .recruit_wrap { padding: 28px 18px; }
  .technology_wrap .list_technology .item_technology { padding-right: 0 !important; padding-left: 0 !important; }
  /* quality 技术卡片已改 flex 色带布局，旧 absolute 释放规则删除 */
  .service_tap .list_servie .item_service { width: 50%; }
  .culture_content .culture_wrap > div { width: 100%; display: block; height: auto; padding: 30px; }
}

@media (max-width: 600px) {

  :root { --header-h: 58px; }

  .main_top .header_logo img { height: 34px; }
  .nav_toggle { width: 42px; height: 42px; margin-left: 8px; }
  .nav_toggle span { width: 21px; height: 3px; }
  .banner_content_top .banner_cover,
  #index_main .swiper-slide { height: 280px; }
  .banner_content_bottom .banner_cover { height: 280px; }

  .index_company_profile .title_top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .index_company_profile .title_top .title_decorate { margin: 0; width: 60px; }

  .main_banner_content .company_record .list_record .item_record { width: 100%; }
  .index_attitude_content .list_attitude .item_attitude { width: 100%; height: 380px; }

  .index_product_content .product_wrap { padding: 25px 15px; }
  .index_product_content .product_wrap .title_wrap .title { font-size: 26px; }
  .index_product_content .product_wrap .title_wrap .title .text { font-size: 20px; }
  .index_product_content .product_wrap .cover_wrap .cover { width: 100%; padding-top: 66%; }

  .index_news_content .news_content .list_news .item_news { flex-direction: column; }
  .index_news_content .news_content .list_news .item_news .item_news_time { text-align: left; margin: 0 0 10px; }

  .footer_nav .list_footer { width: 100%; }

  /* 子页通用（级联生效） */
  #product_main .product_content .list_product .item_product { width: 100%; }
  .service_tap .list_servie .item_service { width: 100%; }
  .company_culture_content .culture_content .list_culture { flex-direction: column; }
  .company_culture_content .culture_content .list_culture .item_culture { width: 100%; }
}

@media (max-width: 380px) {
}

@media (max-width: 992px) {
  #footer .footer_content .footer_wrap { padding: 30px 18px; }
  .footer_wrap .footer_nav { flex: 1 1 100%; }
  .footer_wrap .footer_info { flex: 1 1 100%; padding: 0; margin-top: 24px; }
  .footer_wrap .footer_social { flex: 1 1 100%; margin-top: 24px; }
  .footer_wrap .footer_nav .list_footer { width: 50%; margin-bottom: 20px; }
  .footer_nav .list_footer .list_nav .item_nav,
  .footer_wrap .footer_info .footer_details_views { line-height: 34px; }
  .footer_content_bottom .footer_bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 30px;
    padding: 12px 16px;
    text-align: center;
  }
  .footer_content_bottom .footer_bottom_left,
  .footer_content_bottom .footer_bottom_right { text-align: center; }
  /* 窄屏把「网站地图 + 备案号」整体居中；两者都可能换行，用 gap 控制行距 */
  .footer_content_bottom .footer_bottom_right { justify-content: center; gap: 2px 14px; }
  .footer_content_bottom .footer_beian { justify-content: center; }
}

@media (max-width: 600px) {
  #footer .footer_content .footer_wrap { padding: 26px 16px; }
  .footer_wrap .footer_nav .list_footer { width: 100%; }
  .tb_pop { width: 164px; padding: 12px; }
  .qr_card img, .qr_placeholder { width: 128px; height: 128px; }
  .footer_social .social_list { gap: 6px; }
}

@media (max-width: 1200px) {
  /* 工具条隐藏后页头只剩导航条，--topbar-h/--header-h 已在上面统一改为 0/64，
     主区顶距与吸顶位置都由 var(--header-total) / var(--header-stuck) 自动跟随，
     这里不再重复写死 64px（以前 style.css 写 116、home.css 写 64、
     cms.css 写 101，三处口径不一致，980~1200px 区间 CMS 页留白 68px） */
  .main_top--topbar { flex-direction: row; align-items: center; }
  .topbar { display: none; }
}

@media (max-width: 768px) {
  .new_banner_box { height: 280px; }
  .new_banner_box .title_wrap { padding: 0 20px; }
}

@media (max-width: 980px) {
  #product_main .main_tap_wrap, #news_main .main_tap_wrap, #technology_main .main_tap_wrap,
  #service_main .main_tap_wrap, #recruit_main .main_tap_wrap, #about_main .main_tap_wrap,
  #news_views_main .main_tap_wrap, #productviews_main .main_tap_wrap {
    padding: 0 20px;
  }
}

@media (max-width: 980px) {
  /* 窄屏列表容器：48px 的上下内边距 + 40px 外边距叠在一起，
     首条新闻离分类条有 100 多 px 空白，收紧到 28/24 */
  #news_main .news_content .list_news {
    margin-top: 24px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  #about_main .about_views,
  #about_main .about_content .about_views,
  #recruit_main .recruit_wrap,
  #news_main .news_content .list_news,
  #news_views_main .news_views,
  #service_main .service_content,
  #service_main .service_tap .list_servie {
    padding-left: 20px;
    padding-right: 20px;
  }
  #recruit_main .recruit_content,
  #news_views_main .news_views,
  #about_main .about_content .about_views {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 980px) {
  #productviews_main .productviews_content .product_view { padding: 20px 15px; }
  #productviews_main .product_view_info { padding: 20px 15px; overflow-x: auto; }
  /* 标签条跟正文/列表用同一套窄屏水槽，否则左边缘对不齐 */
  #news_main .news_content .news_tags { margin-top: 24px; }
  #productviews_main .product_tags { padding: 0 15px 28px; }
  /* 「商品详情」标题原来贴到屏幕左边缘（x=0），而正文白块内有 15px 内边距，两者左边缘对不齐 */
  #productviews_main .page_title { padding-left: 15px; padding-right: 15px; }
  #productviews_main .product_spec .product_table { width: 100%; }
  #productviews_main .product_spec .product_table td,
  #productviews_main .product_spec .product_table th { padding: 12px 8px; font-size: 13px; }
}

@media (max-width: 980px) {
  .technology_wrap .list_technology .item_technology { padding: 48px 0; }
  .technology_wrap .list_technology .item_technology .technology_inner { flex-direction: column; gap: 20px; padding: 0 20px; }
  /* 偶数卡片桌面端为 row-reverse（图右文左），移动端必须同步恢复纵排，否则图文倒序 */
  .technology_wrap .list_technology .item_technology:nth-child(even) .technology_inner { flex-direction: column; }
  .technology_wrap .list_technology .item_technology .technology_inner > * { flex: none; }
  .technology_wrap .list_technology .item_technology .cover_wrap { height: 220px; margin-left: 0; margin-right: 0; padding: 10px; }
  .technology_wrap .list_technology .item_technology .cover_wrap .cover { inset: 10px; }
  .technology_wrap .list_technology .item_technology .technology_box { padding: 25px 0 0; }
}

@media (max-width: 640px) {
  #product_main .main_tap .main_tap_wrap, #news_main .main_tap .main_tap_wrap,
  #technology_main .main_tap .main_tap_wrap, #service_main .main_tap .main_tap_wrap,
  #recruit_main .main_tap .main_tap_wrap, #about_main .main_tap .main_tap_wrap,
  #news_views_main .main_tap .main_tap_wrap, #productviews_main .main_tap .main_tap_wrap { padding: 0 12px; }
  #product_main .main_tap .tap_item, #news_main .main_tap .tap_item,
  #technology_main .main_tap .tap_item, #service_main .main_tap .tap_item,
  #recruit_main .main_tap .tap_item, #about_main .main_tap .tap_item,
  #news_views_main .main_tap .tap_item, #productviews_main .main_tap .tap_item { font-size: 14px; padding: 0 10px; white-space: nowrap; }
}

@media (max-width: 640px) {
  #service_main .main_tap { display: none; }
}

@media (max-width: 640px) {
  .technology_box .list_use { display: flex; justify-content: space-between; }
  .technology_box .list_use .item_use {
    width: 25%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-right: 0;
    font-size: 12px;
    border: 1px solid var(--color-primary-tint);
  }
  /* 文字块不再预留内外边距，贴合内容自然宽度 */
  .technology_box .list_use .item_use .item_use_box { width: 100%; padding: 0; box-sizing: border-box; }
  .technology_box .list_use .item_use .item_use_box .item_use_img { width: 26px; height: 26px; margin-bottom: 3px; }
  .technology_box .list_use .item_use .item_use_box .item_use_text { width: auto; margin: 0; line-height: 1.2; white-space: nowrap; }
}

@media (max-width: 1200px) {
  /* 移动端隐藏 CTA：避免与汉堡按钮争抢宽度导致其显示不全 */
  .header-cta { display: none; }
}

@media (max-width: 480px) {
  .cta-mask { align-items: flex-end; padding: 0; }
  /* 底部抽屉：留出 iPhone 的 home 指示条高度，否则最下面那行字/按钮会被压住。
     非刘海屏 env() 取 0，仍是最初的 22px。 */
  .cta-panel {
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   窄屏长文案：抑制「末行只剩一两个字」的孤字行
   --------------------------------------------------------------------------
   横幅副标题是居中的长句，390px 下常出现最后一行只剩「础。」这种情况，
   肉眼看非常刺眼。text-wrap: balance 会把各行拉匀；不支持的浏览器
   （Chrome < 114 / Safari < 17.5）忽略该声明，退回正常贪心换行，不影响可读性。
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .new_banner_box .title_wrap .subtitle,
  .hp-subbanner .inner p,
  .pd-banner .inner p,
  .hp-hero .hero-sub {
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   分页器窄屏：44px 是桌面端的触控舒适尺寸，390px 下三个键横排只剩 10px 余量，
   收紧到 40px 并把内边距降一档，保证「上一页 / 1 2 / 下一页」能整排放下
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .pager { gap: 6px; margin: 32px 0 4px; }
  .pager__item { min-width: 40px; height: 40px; padding: 0 12px; font-size: 14px; }
  .pager__item--dir { padding: 0 14px; font-size: 14px; letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   标签组件窄屏（≤720px）：标签条改成上下两行，胶囊横向滑动而不是折成一大坨。
   横滑只给「列表页的横条」；FAQ 左栏那条（.tagfilter--stack）本来就是窄条，
   跟着横滑会让胶囊顶到卡片外面，所以它保持换行。
   这几条从 style.css 搬到这里：style.css 不放 @media，否则会被后加载的
   页面样式（pages/*.css）整块反盖。
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .tagfilter { flex-direction: column; gap: 10px; padding: 14px; }
  .tagfilter__label { padding-top: 0; }

  .tagfilter:not(.tagfilter--stack) .tagfilter__list {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    padding-right: 14px;      /* 滚到底时最后一枚胶囊才不会被右边缘切掉 */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tagfilter:not(.tagfilter--stack) .tagfilter__list::-webkit-scrollbar { display: none; }
  .tagfilter:not(.tagfilter--stack) .tagfilter__list .tagchip { flex: none; }

  .tagbox { flex-direction: column; gap: 10px; }
  .tagbox__label { padding-top: 0; }
}