/**
 * KEYAURA+ × WordPress 兼容层（只在宝塔/WP 环境加载，本地预览不用）
 *
 * 只做两件事：把主题容器还原成通栏宽，以及抵消主题对 img / a / button / 标题
 * 的全局样式。尺寸、颜色、动画仍由 keyaura.css 定义。
 *
 * 注意权重：#keyaura-detail-root .foo 是 1-1-0，会压过 keyaura.css 里 0-1-0 的规则，
 * 只在确实要盖主题时才这么写。
 */

/* ── 容器还原 ──
 * 页面本体是一块固定 2560px 宽的画布，靠 zoom 缩到视口宽。
 * 主题内容容器的 max-width / padding 会把画布挤窄并留白；transform / filter
 * 会让画布内的 fixed、mix-blend-mode 表现异常，一并清掉。
 */
body.single-product .site-content,
body.single-product .entry-content,
body.single-product .content-area,
body.single-product #primary,
body.single-product main.site-main,
body.single-product .page-content,
body.single-product article,
body[class*="page-template"][class*="keyaura" i] .site-content,
body[class*="page-template"][class*="keyaura" i] .entry-content,
body[class*="page-template"][class*="keyaura" i] .content-area,
body[class*="page-template"][class*="keyaura" i] #primary,
body[class*="page-template"][class*="keyaura" i] main.site-main,
.site-content:has(#keyaura-detail-root),
.entry-content:has(#keyaura-detail-root),
.content-area:has(#keyaura-detail-root),
#primary:has(#keyaura-detail-root),
.main-con:has(#keyaura-detail-root),
article:has(#keyaura-detail-root) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* 主题自带的文章标题会顶在画布上方，设计稿里没有 */
body.single-product .entry-header,
body.single-product .page-header,
body.single-product h1.entry-title,
body.single-product h1.product_title,
body[class*="page-template"][class*="keyaura" i] .entry-header,
body[class*="page-template"][class*="keyaura" i] .page-header,
body[class*="page-template"][class*="keyaura" i] h1.entry-title {
  display: none !important;
}

#keyaura-detail-root {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* 独立层叠上下文：画布内部的 z-index 不和主题弹层互相穿插 */
  isolation: isolate;
}

/* ── img / video ──
 * 主题常写 img { max-width:100% }，画布里的图按设计稿定死了尺寸，被压缩就错位。
 * 不要在这里碰 height，keyaura.css 给多数图片写了固定高度。
 */
#keyaura-detail-root img,
#keyaura-detail-root video {
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 标题 / 段落 ──
 * 只清 margin/padding。别在这里写 text-transform / font-size：
 * 全大写和字号都由 .ka-heading / .ka-label 等 0-1-0 规则负责，这里一写就会顶掉。
 */
#keyaura-detail-root h1,
#keyaura-detail-root h2,
#keyaura-detail-root h3,
#keyaura-detail-root p {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none;
}

#keyaura-detail-root h1::before,
#keyaura-detail-root h1::after,
#keyaura-detail-root h2::before,
#keyaura-detail-root h2::after {
  content: none !important;
}

/* ── 按钮外壳 ──
 * 主题给 button 的内边距/边框/阴影/最小宽度会把它们变成灰方块。
 * 这里只清外壳；形状和配色仍交给 keyaura.css。
 */
#keyaura-detail-root .ka-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
  font: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

/* 本身没有底色的按钮：背景必须透明，悬停也不能被主题染色 */
#keyaura-detail-root .ka-video-play,
#keyaura-detail-root .ka-360-control,
#keyaura-detail-root .ka-swatch,
#keyaura-detail-root .ka-airflow-dial,
#keyaura-detail-root .ka-video-play:hover,
#keyaura-detail-root .ka-360-control:hover,
#keyaura-detail-root .ka-swatch:hover,
#keyaura-detail-root .ka-airflow-dial:hover,
#keyaura-detail-root .ka-video-play:focus,
#keyaura-detail-root .ka-360-control:focus,
#keyaura-detail-root .ka-swatch:focus,
#keyaura-detail-root .ka-airflow-dial:focus {
  background: transparent !important;
}

/* 气流标签有底色和单侧圆角，主题的 button:hover 背景/圆角会盖掉它们，
   只能在这里用 !important 重申（值与 keyaura.css 保持一致） */
#keyaura-detail-root .ka-airflow-tab--mtl,
#keyaura-detail-root .ka-airflow-tab--mtl:hover,
#keyaura-detail-root .ka-airflow-tab--mtl:focus {
  background: #49ed78 !important;
  border-radius: 0 50px 50px 0 !important;
}

#keyaura-detail-root .ka-airflow-tab--dtl,
#keyaura-detail-root .ka-airflow-tab--dtl:hover,
#keyaura-detail-root .ka-airflow-tab--dtl:focus {
  background: #ff7d00 !important;
  border-radius: 50px 0 0 50px !important;
}

#keyaura-detail-root .ka-airflow-dial,
#keyaura-detail-root .ka-video-play {
  border-radius: 50% !important;
}

/* 按住吸气的圆形按钮自带半透明底和随吸气变亮的外发光，
   主题的 button:hover 会把它染成灰方块，上面 .ka-btn 的 box-shadow:none 也会吃掉发光 */
#keyaura-detail-root .ka-dtl-hold,
#keyaura-detail-root .ka-dtl-hold:hover,
#keyaura-detail-root .ka-dtl-hold:focus {
  background: rgba(0, 0, 0, 0.38) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 calc(var(--ka-inhale) * 90px) rgba(255, 160, 40, 0.75) !important;
}

/* 上面对 img / p / h2 / .ka-btn 清了 margin、padding，下面几处是版式本身要用的，重申回来
   （值与 keyaura.css / keyaura-m.css 保持一致） */
#keyaura-detail-root .ka-360-btn-icon--v { margin-left: 0.5px !important; }
#keyaura-detail-root .ka-360-btn-icon--r { margin-top: 0.5px !important; }
#keyaura-detail-root .ka-airflow-tab--dtl { padding-right: 208px !important; }
#keyaura-detail-root .ka-flavors-swatches .ka-swatch { padding-top: 3px !important; }
#keyaura-detail-root .ka-flavor-list-more { padding: 10px !important; }

@media (max-width: 768px) {
  #keyaura-detail-root .ka-360-control:nth-child(2) { margin-left: 61px !important; }
  #keyaura-detail-root .ka-360-control:nth-child(3) { margin-left: 81px !important; }
  #keyaura-detail-root .ka-clouds-head .ka-heading { margin-top: 5px !important; }
  #keyaura-detail-root .ka-clouds-head .ka-body { margin-top: 15px !important; }
  #keyaura-detail-root .ka-airflow-tab--dtl { padding-right: 0 !important; }
  #keyaura-detail-root .ka-flavor-list-more { padding: 0 !important; }
}

/* 移动稿的气流标签是两头全圆角，MTL 用浅一档的绿（值与 keyaura-m.css 保持一致） */
@media (max-width: 768px) {
  #keyaura-detail-root .ka-airflow-tab--mtl,
  #keyaura-detail-root .ka-airflow-tab--mtl:hover,
  #keyaura-detail-root .ka-airflow-tab--mtl:focus,
  #keyaura-detail-root .ka-airflow-tab--dtl,
  #keyaura-detail-root .ka-airflow-tab--dtl:hover,
  #keyaura-detail-root .ka-airflow-tab--dtl:focus {
    border-radius: 25px !important;
  }

  #keyaura-detail-root .ka-airflow-tab--mtl,
  #keyaura-detail-root .ka-airflow-tab--mtl:hover,
  #keyaura-detail-root .ka-airflow-tab--mtl:focus {
    background: #5cd98a !important;
  }
}