/*
 * YOOAN CTA System — 全站按钮唯一样式来源
 * ------------------------------------------------------------------
 * 一套系统，三个层级，共用同一个「左 → 右推移」动效语言：
 *   Primary   实心块  · 推移 = 橙色满块填充      → 留资/询价/提交
 *   Secondary 描边块  · 推移 = 实心填充（升级感）→ 浏览/查看/探索
 *   Text      文字链  · 推移 = 下划线重画        → 卡片内小入口
 *
 * 色值全部来自 theme.json，未新增任何颜色。
 * 圆角统一 2px。箭头统一为 SVG（不再使用 ↗\FE0E 文字字符）。
 * ------------------------------------------------------------------
 */

:root {
  --yooan-cta-radius: 2px;
  --yooan-cta-ease: cubic-bezier(.16, 1, .3, 1);
  --yooan-cta-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E");
  --yooan-cta-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E");
}

/* ==================================================================
   1. 共用基座
   ================================================================== */

.yooan-cta,
.ya-button,
.yh-hero__action,
.yh-cinema__media-link,
.yooan-origin-cta,
.yooan-footer__cta .wp-block-button__link,
.has-ink-background-color .yooan-footer__cta .wp-block-button__link {
  --cta-ink: #0E1733;
  --cta-paper: #FBF7E9;
  --cta-accent: #F5A20E;

  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  box-sizing: border-box;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1.35em;
  overflow: hidden;
  padding: .95rem 1.4rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--yooan-cta-radius) !important;
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .035em;
  text-decoration: none !important;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 220ms var(--yooan-cta-ease),
    box-shadow 220ms ease,
    color 200ms ease,
    border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* 推移色块：所有层级共用的同一个动作 */
.yooan-cta::before,
.ya-button::before,
.yh-hero__action::before,
.yh-cinema__media-link::before,
.yooan-footer__cta .wp-block-button__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--cta-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--yooan-cta-ease);
}

.yooan-cta:hover::before,
.yooan-cta:focus-visible::before,
.ya-button:hover::before,
.ya-button:focus-visible::before,
.yh-hero__action:hover::before,
.yh-hero__action:focus-visible::before,
.yh-cinema__media-link:hover::before,
.yh-cinema__media-link:focus-visible::before,
.yooan-footer__cta .wp-block-button__link:hover::before,
.yooan-footer__cta .wp-block-button__link:focus-visible::before {
  transform: scaleX(1);
}

/* 上浮 + 投影：给「可点」一个物理反馈 */
.yooan-cta:hover,
.yooan-cta:focus-visible,
.ya-button:hover,
.ya-button:focus-visible,
.yh-hero__action:hover,
.yh-hero__action:focus-visible,
.yh-cinema__media-link:hover,
.yh-cinema__media-link:focus-visible,
.yooan-origin-cta:hover,
.yooan-origin-cta:focus-visible,
.yooan-footer__cta .wp-block-button__link:hover,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -14px rgba(14, 23, 51, .55) !important;
}

.yooan-cta:active,
.ya-button:active,
.yh-hero__action:active,
.yh-cinema__media-link:active,
.yooan-origin-cta:active,
.yooan-footer__cta .wp-block-button__link:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* 键盘可见焦点：无障碍底线，不能省 */
.yooan-cta:focus-visible,
.ya-button:focus-visible,
.yh-hero__action:focus-visible,
.yh-cinema__media-link:focus-visible,
.yooan-origin-cta:focus-visible,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  outline: 2px solid var(--cta-accent);
  outline-offset: 3px;
}

/* ==================================================================
   2. 箭头 —— 统一为 SVG，替换掉原来的 ↗\FE0E / → 文字字符
   ================================================================== */

.yooan-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition:
    transform 320ms var(--yooan-cta-ease),
    background-color 200ms ease;
}

/* 页内滚动锚点用向下箭头（语义：往下看，不是跳走） */
.yooan-cta.is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button.is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  -webkit-mask-image: var(--yooan-cta-arrow-down);
  mask-image: var(--yooan-cta-arrow-down);
}

/* 箭头随推移一起「出发」 */
.yooan-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action:hover::after {
  transform: translate(3px, -3px);
}

.yooan-cta.is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button.is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translate(0, 3px);
}

/* ==================================================================
   3. Primary —— 实心块，橙色满块填充
   用于：询价 / 留资 / 提交表单 / 首页 Hero 主行动
   ================================================================== */

.yooan-cta--primary,
.ya-button:not(.ya-button--cream),
.yh-hero__action,
.yooan-origin-cta,
.yooan-footer__cta .wp-block-button__link,
.has-ink-background-color .yooan-footer__cta .wp-block-button__link {
  color: var(--cta-paper) !important;
  background: var(--cta-ink) !important;
}

/* 悬浮：橙块铺满后，文字与箭头必须转深色才够对比度 */
.yooan-cta--primary:hover,
.yooan-cta--primary:focus-visible,
.ya-button:not(.ya-button--cream):hover,
.ya-button:not(.ya-button--cream):focus-visible,
.yh-hero__action:hover,
.yh-hero__action:focus-visible,
.yooan-footer__cta .wp-block-button__link:hover,
.yooan-footer__cta .wp-block-button__link:focus-visible {
  color: #0E1733 !important;
}

.yooan-cta--primary:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button:not(.ya-button--cream):hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-footer__cta .wp-block-button__link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-hero__action:hover::after {
  background-color: #0E1733;
}

/* ==================================================================
   4. Secondary —— 描边块，悬浮时填实（视觉上「升级」为主按钮）
   用于：查看案例 / 浏览产品 / 看资质
   ================================================================== */

.yooan-cta--secondary,
.ya-button--cream,
.yh-cinema__media-link {
  color: var(--cta-ink) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--cta-ink) 42%, transparent) !important;
}

.yooan-cta--secondary::before,
.ya-button--cream::before,
.yh-cinema__media-link::before {
  background: var(--cta-ink);
}

.yooan-cta--secondary:hover,
.yooan-cta--secondary:focus-visible,
.ya-button--cream:hover,
.ya-button--cream:focus-visible,
.yh-cinema__media-link:hover,
.yh-cinema__media-link:focus-visible {
  color: var(--cta-paper) !important;
  border-color: var(--cta-ink) !important;
}

.yooan-cta--secondary:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-button--cream:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__media-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background-color: var(--cta-paper);
}

/* ==================================================================
   5. 深色区块上下文 —— 墨蓝底上把明暗对调
   ================================================================== */

/* 深色由「所在区块」决定，不由按钮变体名决定。
   实测深底区块：.ya-cta / .ya-footer / .ya-manufacturing / .ya-process / .ya-projects
   （.ypr-installation、.ypr-evidence 是浅底，不能算进来） */
.has-ink-background-color .yooan-cta,
.has-ink-background-color .ya-button,
.has-ink-background-color .ya-text-link,
.is-style-yooan-dark-section .yooan-cta,
.is-style-yooan-dark-section .ya-button,
.ya-manufacturing .ya-button,
.ya-manufacturing .ya-text-link,
.ya-process .ya-button,
.ya-process .ya-text-link,
.ya-projects .ya-button,
.ya-projects .ya-text-link,
.ya-cta .ya-button,
.ya-cta .ya-text-link,
.ya-footer .ya-button,
.ya-footer .ya-text-link,
.yh-cinema__media-link {
  --cta-ink: #FBF7E9;
  --cta-paper: #0E1733;
}

/* ==================================================================
   6. Text —— 文字 + 下划线重画（推移动作的最轻量版本）
   用于：卡片内小入口、并列的次要链接
   ================================================================== */

.yooan-cta--text,
.ya-text-link,
.yh-cinema__intro-side a,
.yooan-projects-hero__cta,
.yooan-origin-cta.yooan-projects-hero__cta {
  --cta-ink: #0E1733;
  --cta-accent: #F5A20E;

  position: relative;
  display: inline-flex !important;
  min-height: 0 !important;
  align-items: center;
  justify-content: flex-start;
  gap: .6em;
  overflow: visible !important;
  padding: 6px 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--cta-ink) 28%, transparent) !important;
  border-radius: 0 !important;
  color: var(--cta-ink) !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-decoration: none !important;
  transform: none !important;
}

.ya-text-link--light,
.yooan-projects-hero__cta {
  --cta-ink: #FBF7E9;
}

/* 橙色线从左到右重画一遍 */
.yooan-cta--text::before,
.ya-text-link::before,
.yh-cinema__intro-side a::before,
.yooan-projects-hero__cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--cta-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--yooan-cta-ease);
}

.yooan-cta--text:hover::before,
.yooan-cta--text:focus-visible::before,
.yh-cinema__intro-side a:hover::before,
.yh-cinema__intro-side a:focus-visible::before,
.ya-text-link:hover::before,
.ya-text-link:focus-visible::before,
.yooan-projects-hero__cta:hover::before,
.yooan-projects-hero__cta:focus-visible::before {
  transform: scaleX(1);
}

.yooan-cta--text:hover,
.ya-text-link:hover,
.yooan-projects-hero__cta:hover {
  color: var(--cta-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

.yooan-cta--text span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-text-link span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yh-cinema__intro-side a span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-projects-hero__cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition: transform 320ms var(--yooan-cta-ease), background-color 200ms ease;
}

.yooan-cta--text:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.ya-text-link:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-projects-hero__cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translate(3px, -3px);
}

/* 文字层级不需要 JS 注入的圆形涟漪 */
.yooan-projects-hero__cta .yooan-origin-cta__fill {
  display: none !important;
}

/* ==================================================================
   7. 接管 cta-buttons.js 注入的涟漪：改成同一套左 → 右推移
   （不改 JS，只改它生成的那个 span 的表现）
   ================================================================== */

.yooan-origin-cta__fill {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--cta-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 460ms var(--yooan-cta-ease) !important;
}

.yooan-origin-cta.is-hovered .yooan-origin-cta__fill,
.yooan-origin-cta:hover .yooan-origin-cta__fill,
.yooan-origin-cta:focus-visible .yooan-origin-cta__fill {
  transform: scaleX(1) !important;
}

.yooan-origin-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 1.35em;
}

.yooan-origin-cta.is-hovered,
.yooan-origin-cta:hover,
.yooan-origin-cta:focus-visible {
  color: #0E1733 !important;
  background: var(--cta-ink) !important;
}

.yooan-origin-cta.is-hovered span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
.yooan-origin-cta:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background-color: #0E1733;
}

/* ==================================================================
   8. 尺寸变体与窄屏
   ================================================================== */

.ya-button--small,
.yooan-cta--small {
  min-height: 42px;
  padding: .7rem 1.05rem !important;
  font-size: .75rem;
}

@media (max-width: 700px) {
  .yooan-cta,
  .ya-button,
  .yh-hero__action,
  .yooan-footer__cta .wp-block-button__link {
    gap: 1em;
    padding: .85rem 1.15rem !important;
    font-size: .75rem;
  }
}

/* ==================================================================
   9. 降低动效偏好 —— 系统设置里关了动画的用户，只保留状态变化
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .yooan-cta,
  .ya-button,
  .yh-hero__action,
  .yh-cinema__media-link,
  .yooan-origin-cta,
  .ya-text-link,
  .yooan-projects-hero__cta,
  .yooan-cta::before,
  .ya-button::before,
  .yh-hero__action::before,
  .yh-cinema__media-link::before,
  .ya-text-link::before,
  .yooan-projects-hero__cta::before,
  .yooan-origin-cta__fill,
  .yooan-cta span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
  .ya-button span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
    transition-duration: 1ms !important;
  }

  .yooan-cta:hover,
  .ya-button:hover,
  .yh-hero__action:hover,
  .yooan-origin-cta:hover {
    transform: none !important;
  }
}


/* ==================================================================
   10. 特指度补丁
   components.css 用 `header .wp-block-navigation-item__content[href*="page_id=1052"]`
   （特指度 0,2,1 且带 !important）锁住了导航里的询价按钮，
   这里用同等特指度把它拉回 Primary，而不是靠堆 !important。
   ================================================================== */

header .wp-block-navigation-item__content[href*="page_id=1052"] {
  --cta-ink: #0E1733;
  --cta-paper: #FBF7E9;
  --cta-accent: #F5A20E;

  min-height: 42px !important;
  padding: .7rem 1.05rem !important;
  border-radius: var(--yooan-cta-radius) !important;
  color: var(--cta-paper) !important;
  background: var(--cta-ink) !important;
  font-size: .75rem;
}

header .wp-block-navigation-item__content[href*="page_id=1052"]:hover,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible {
  color: #0E1733 !important;
  background: var(--cta-ink) !important;
}

/* ==================================================================
   11. 没有箭头 span 的按钮（区块编辑器生成的 / 导航里的）自动补一个
   用 :has() 判断「内部没有箭头 span」，避免已有箭头的按钮出现两个。
   老浏览器不支持 :has() 时只是没有箭头，不会错版。
   ================================================================== */

.yooan-origin-cta:not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after,
header .wp-block-navigation-item__content[href*="page_id=1052"]:not(:has(span[aria-hidden="true"]))::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: var(--cta-accent);
  -webkit-mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  mask: var(--yooan-cta-arrow-ne) center / contain no-repeat;
  transition:
    transform 320ms var(--yooan-cta-ease),
    background-color 200ms ease;
}

.yooan-origin-cta:not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):hover::after,
header .wp-block-navigation-item__content[href*="page_id=1052"]:not(:has(span[aria-hidden="true"])):hover::after {
  background-color: #0E1733;
  transform: translate(3px, -3px);
}

/* Final layer-integrity pass: fills touch the button edge and labels stay above. */
.yooan-origin-cta {
  overflow: hidden !important;
  border: 0 !important;
  isolation: isolate !important;
}

.yooan-origin-cta > .yooan-origin-cta__fill {
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.yooan-origin-cta > .yooan-origin-cta__label {
  position: relative !important;
  z-index: 2 !important;
  color: var(--cta-paper) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.yooan-origin-cta:hover > .yooan-origin-cta__label,
.yooan-origin-cta:focus-visible > .yooan-origin-cta__label,
.yooan-origin-cta.is-hovered > .yooan-origin-cta__label {
  color: #0E1733 !important;
}

.wp-block-button.is-style-outline .yooan-origin-cta > .yooan-origin-cta__label {
  color: var(--cta-ink) !important;
}

header .wp-block-navigation-item__content[href*="page_id=1052"] > .yooan-origin-cta__label {
  color: #FBF7E9 !important;
}
header .wp-block-navigation-item__content[href*="page_id=1052"] > .yooan-origin-cta__label .wp-block-navigation-item__label {
  color: #FBF7E9 !important;
}

header .wp-block-navigation-item__content[href*="page_id=1052"]:hover > .yooan-origin-cta__label,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible > .yooan-origin-cta__label,
header .wp-block-navigation-item__content[href*="page_id=1052"].is-hovered > .yooan-origin-cta__label {
  color: #0E1733 !important;
}
header .wp-block-navigation-item__content[href*="page_id=1052"]:hover > .yooan-origin-cta__label .wp-block-navigation-item__label,
header .wp-block-navigation-item__content[href*="page_id=1052"]:focus-visible > .yooan-origin-cta__label .wp-block-navigation-item__label,
header .wp-block-navigation-item__content[href*="page_id=1052"].is-hovered > .yooan-origin-cta__label .wp-block-navigation-item__label {
  color: #0E1733 !important;
}


/* ==================================================================
   12. 胶囊滑动按钮（2026-09-18 起全站生效，覆盖上方 1–8 节的形状与动效）
   来源：21st.dev「Button with Icon」，纯 CSS 移植
   - 形状：999px 胶囊；箭头变成右侧 40px 圆形图标
   - 悬浮：圆形从右滑到左，↗\FE0E 旋转 45° 成 →（↓ 只滑不转），文字反向让位
   - 旧的「左→右推移」色块全部关闭；Text 文字链层级不受影响
   箭头颜色写死在 SVG 里，所以按明暗上下文各准备一套：
     --pill-a-*  = 实心按钮圆形里的箭头（浅区块深色 / 深区块浅色）
     --pill-b-*  = 描边按钮圆形里的箭头（与 a 相反）
   ================================================================== */

:root { --yooan-cta-radius: 999px; }

:where(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link) {
  --pill-a-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-a-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-b-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-b-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-ease: cubic-bezier(.4, 0, .2, 1);
  --pill-size: 40px;
  --pill-pad: 1.5rem;
  --pill-room: 56px;
}
:where(.has-ink-background-color .yooan-cta, .has-ink-background-color .ya-button, .is-style-yooan-dark-section .yooan-cta, .is-style-yooan-dark-section .ya-button, .ya-manufacturing .ya-button, .ya-process .ya-button, .ya-projects .ya-button, .ya-cta .ya-button, .ya-footer .ya-button, .yh-cinema__media-link) {
  --pill-a-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-a-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --pill-b-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --pill-b-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}

html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) {
  justify-content: flex-start !important;
  min-height: 48px;
  padding: .7rem var(--pill-room) .7rem var(--pill-pad) !important;
  border-radius: 999px !important;
  text-align: left;
  transition:
    padding 500ms var(--pill-ease),
    background-color 300ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 220ms var(--yooan-cta-ease),
    box-shadow 220ms ease !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible {
  padding: .7rem var(--pill-pad) .7rem var(--pill-room) !important;
}

/* 关掉旧的推移色块 / JS 涟漪 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link)::before,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) > .yooan-origin-cta__fill { display: none !important; }
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) > .yooan-origin-cta__label { position: static !important; }

/* 圆形图标（实心按钮：圆 = 反色，箭头 = 按钮底色） */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after {
  position: absolute !important;
  z-index: 1;
  top: 50%;
  right: 4px;
  left: auto;
  display: block !important;
  width: var(--pill-size) !important;
  height: var(--pill-size) !important;
  flex: none !important;
  border-radius: 50%;
  background: var(--pill-a-ne) center / 16px no-repeat, var(--cta-paper) !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: translateY(-50%) !important;
  transition: right 500ms var(--pill-ease), transform 500ms var(--pill-ease) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-a-dn) center / 16px no-repeat, var(--cta-paper) !important;
}
/* 描边按钮：圆 = 实色，箭头 = 反色 */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-b-ne) center / 16px no-repeat, var(--cta-ink) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-cta-down span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: var(--pill-b-dn) center / 16px no-repeat, var(--cta-ink) !important;
}

/* 悬浮：圆形滑到左侧 + 旋转 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action:hover::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):hover::after,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action:focus-visible::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill))):focus-visible::after {
  right: calc(100% - var(--pill-size) - 4px);
  transform: translateY(-50%) rotate(45deg) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down:hover span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-cta-down:focus-visible span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  transform: translateY(-50%) !important;
}

/* 悬浮颜色：不再铺橙色块，改为底色轻微变化 */
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-hovered {
  color: var(--cta-paper) !important;
  background: color-mix(in srgb, var(--cta-ink) 86%, var(--cta-paper)) !important;
}
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):hover > .yooan-origin-cta__label,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link):focus-visible > .yooan-origin-cta__label,
html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link).is-hovered > .yooan-origin-cta__label { color: var(--cta-paper) !important; }

html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):hover,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):focus-visible,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-hovered {
  color: var(--cta-ink) !important;
  background: color-mix(in srgb, var(--cta-ink) 8%, transparent) !important;
  border-color: var(--cta-ink) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):hover > .yooan-origin-cta__label,
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta).is-hovered > .yooan-origin-cta__label { color: var(--cta-ink) !important; }

/* 描边按钮静态态（顺带修复：区块编辑器 outline 按钮原先是深底深字，看不见） */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) {
  color: var(--cta-ink) !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--cta-ink) 42%, transparent) !important;
}
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta) > .yooan-origin-cta__label { color: var(--cta-ink) !important; }

/* 首页影院区的链接在窄屏靠右绝对定位，胶囊变宽后会被挤出左边 */
@media (max-width: 600px) {
  html .yh-cinema__media-link { --pill-pad: 1rem; max-width: calc(100% - 44px); letter-spacing: .04em; }
}

/* 区块编辑器 outline 按钮没有箭头 span，圆形在 ::after 上 */
html :is(.yooan-cta--secondary, .ya-button--cream, .yh-cinema__media-link, .wp-block-button.is-style-outline .yooan-origin-cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after {
  background: var(--pill-b-ne) center / 16px no-repeat, var(--cta-ink) !important;
}

/* 询价变体（橙色胶囊）：页脚 Request a Quote、内页顶栏 Get a Quote，以及以后任何加了 .yooan-cta--quote 的按钮
   规则：橙色只给「询价/报价」动作，全站一眼可找 */
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) {
  color: #0E1733 !important;
  background: #F5A20E !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) > .yooan-origin-cta__label { color: #0E1733 !important; }
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote) span[aria-hidden="true"]:not(.yooan-origin-cta__fill) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A20E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 16px no-repeat, #0E1733 !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):hover,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):focus-visible,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote).is-hovered {
  color: #0E1733 !important;
  background: #FFB52E !important;
}
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote):hover > .yooan-origin-cta__label,
html body :is(.yooan-footer .yooan-footer__cta .wp-block-button__link, .ya-button.ya-button--quote, .yooan-cta--quote).is-hovered > .yooan-origin-cta__label { color: #0E1733 !important; }

/* 内页顶栏的 Get a Quote：about.css 给了固定宽度（126–176px），胶囊需要随文字撑开 */
html body .yooan-interior-reference-nav > .ya-button--quote { width: fit-content !important; border: 0 !important; font-size: 12px !important; font-weight: 600; }
@media (max-width: 782px) {
  html body .yooan-interior-reference-nav > .ya-button--quote { font-size: 11px !important; }
}

/* 小尺寸 */
html :is(.ya-button--small, .yooan-cta--small) {
  --pill-size: 34px;
  --pill-pad: 1.1rem;
  --pill-room: 46px;
  min-height: 42px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) { --pill-pad: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link),
  html :is(.yooan-cta:not(.yooan-cta--text), .ya-button, .yh-hero__action, .yh-cinema__media-link, .yooan-origin-cta:not(.yooan-projects-hero__cta), .yooan-footer__cta .wp-block-button__link, .has-ink-background-color .yooan-footer__cta .wp-block-button__link) span[aria-hidden="true"]:not(.yooan-origin-cta__fill),
html .yh-hero__action::after,
html .yooan-origin-cta:not(.yooan-projects-hero__cta):not(:has(span[aria-hidden="true"]:not(.yooan-origin-cta__fill)))::after { transition-duration: 1ms !important; }
}

/* 2026-10-02 · Projects hero text link: the generic .yooan-origin-cta hover rule (navy fill + navy label)
   was painting a blank navy block over it. Keep it a text link on hover/tap/focus. */
html .yooan-projects-hero__cta.yooan-origin-cta:hover,
html .yooan-projects-hero__cta.yooan-origin-cta:focus-visible,
html .yooan-projects-hero__cta.yooan-origin-cta.is-hovered {
  background: none !important;
  color: #FBF7E9 !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}
html .yooan-projects-hero__cta.yooan-origin-cta > .yooan-origin-cta__label,
html .yooan-projects-hero__cta.yooan-origin-cta:hover > .yooan-origin-cta__label,
html .yooan-projects-hero__cta.yooan-origin-cta:focus-visible > .yooan-origin-cta__label {
  color: #FBF7E9 !important;
}