/**
 * KEYPLAY WordPress 隔离样式
 * 加载顺序：keyplay.css 之后（PHP priority 1000），用 !important 压过主题全局样式
 */

/* ─── 1. 内容区全宽 ─── */
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.single-post-type-product .site-content,
body.single-post-type-product .entry-content,
body.single-post-type-product .content-area,
body.single-post-type-product #primary,
body.single-post-type-product main.site-main,
body[class*="page-template"][class*="keyplay"] .site-content,
body[class*="page-template"][class*="keyplay"] .entry-content,
body[class*="page-template"][class*="keyplay"] .content-area,
body[class*="page-template"][class*="keyplay"] #primary,
body[class*="page-template"][class*="keyplay"] main.site-main,
.site-content:has(#keyplay-root),
.entry-content:has(#keyplay-root),
.content-area:has(#keyplay-root),
#primary:has(#keyplay-root),
.main-con:has(#keyplay-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;
}

body.single-product .entry-header,
body.single-product h1.entry-title,
body.single-product h1.product_title,
body.single-post-type-product .entry-header,
body.single-post-type-product h1.entry-title,
body.single-post-type-product h1.product_title {
  display: none !important;
}

/* ─── 2. 字体：覆盖其他产品 CSS 引入的坏 ttf ─── */
@font-face {
  font-family: "HarmonyOS Sans SC";
  src: local("HarmonyOS Sans SC"), local("Microsoft YaHei"), sans-serif;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "HarmonyOS Sans SC Black";
  src: local("HarmonyOS Sans SC Black"), local("Microsoft YaHei Bold"), sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* ─── 3. 根容器 ─── */
#keyplay-root {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  isolation: isolate;
  position: relative;
  background: #fff;
  font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 16px !important;
  line-height: normal !important;
  color: #000 !important;
}

#keyplay-root *,
#keyplay-root *::before,
#keyplay-root *::after {
  box-sizing: border-box;
}

/* ─── 4. 定位（卡片背景图依赖 relative + absolute inset-0） ─── */
#keyplay-root .relative { position: relative !important; }
#keyplay-root .absolute { position: absolute !important; }
#keyplay-root .inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
#keyplay-root .bottom-\[72px\] { bottom: 72px !important; }
#keyplay-root .-top-\[5px\] { top: -5px !important; }
#keyplay-root .-top-\[20px\] { top: -20px !important; }
#keyplay-root .left-1\/2 { left: 50% !important; }
#keyplay-root .-translate-x-1\/2 { transform: translateX(-50%) !important; }
#keyplay-root .z-0 { z-index: 0 !important; }
#keyplay-root .z-10 { z-index: 10 !important; }
#keyplay-root .z-20 { z-index: 20 !important; }

/* ─── 5. Flex 布局 ─── */
#keyplay-root .flex { display: flex !important; }
#keyplay-root .inline-flex { display: inline-flex !important; }
#keyplay-root .flex-col { flex-direction: column !important; }
#keyplay-root .items-center { align-items: center !important; }
#keyplay-root .items-start { align-items: flex-start !important; }
#keyplay-root .items-end { align-items: flex-end !important; }
#keyplay-root .justify-center { justify-content: center !important; }
#keyplay-root .justify-between { justify-content: space-between !important; }
#keyplay-root .justify-start { justify-content: flex-start !important; }
#keyplay-root .shrink-0 { flex-shrink: 0 !important; }
#keyplay-root .flex-1 { flex: 1 1 0% !important; }

/* ─── 6. 宽度 ─── */
#keyplay-root .w-full { width: 100% !important; }
#keyplay-root .w-8 { width: 2rem !important; }
#keyplay-root .w-10 { width: 2.5rem !important; }
#keyplay-root .max-w-full { max-width: 100% !important; }
#keyplay-root .max-w-\[1400px\] { max-width: 1400px !important; }
#keyplay-root .max-w-\[800px\] { max-width: 800px !important; }

/* ─── 7. 高度（功能卡片塌陷的根因） ─── */
#keyplay-root .h-8 { height: 2rem !important; }
#keyplay-root .h-10 { height: 2.5rem !important; }
#keyplay-root .h-full { height: 100% !important; }
#keyplay-root .h-auto { height: auto !important; }
#keyplay-root .h-\[180px\] { height: 180px !important; min-height: 180px !important; }
#keyplay-root .h-\[230px\] { height: 230px !important; min-height: 230px !important; }
#keyplay-root .h-\[400px\] { height: 400px !important; }
#keyplay-root .h-\[540px\] { height: 540px !important; }
#keyplay-root .h-\[600px\] { height: 600px !important; }
#keyplay-root .h-\[680px\] { height: 680px !important; min-height: 680px !important; }
#keyplay-root .min-h-\[960px\] { min-height: 960px !important; }
#keyplay-root .min-h-\[1200px\] { min-height: 1200px !important; }
#keyplay-root .max-h-full { max-height: 100% !important; }

/* ─── 8. 间距 ─── */
#keyplay-root .gap-2 { gap: 0.5rem !important; }
#keyplay-root .gap-4 { gap: 1rem !important; }
#keyplay-root .gap-5 { gap: 1.25rem !important; }
#keyplay-root .gap-10 { gap: 2.5rem !important; }
#keyplay-root .gap-\[20px\] { gap: 20px !important; }
#keyplay-root .gap-\[30px\] { gap: 30px !important; }
#keyplay-root .mt-6 { margin-top: 1.5rem !important; }
#keyplay-root .mt-10 { margin-top: 2.5rem !important; }
#keyplay-root .mx-auto { margin-left: auto !important; margin-right: auto !important; }
#keyplay-root .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
#keyplay-root .mb-\[8px\] { margin-bottom: 8px !important; }
#keyplay-root .mb-\[20px\] { margin-bottom: 20px !important; }
#keyplay-root .mb-10 { margin-bottom: 2.5rem !important; }
#keyplay-root .mb-\[82px\] { margin-bottom: 82px !important; }
#keyplay-root .mb-\[83px\] { margin-bottom: 83px !important; }
#keyplay-root .mt-\[50px\] { margin-top: 50px !important; }
#keyplay-root .mt-\[60px\] { margin-top: 60px !important; }
#keyplay-root .mt-\[81px\] { margin-top: 81px !important; }
#keyplay-root .mt-auto { margin-top: auto !important; }

/* ─── 9. 内边距 ─── */
#keyplay-root .p-0 { padding: 0 !important; }
#keyplay-root .p-6 { padding: 1.5rem !important; }
#keyplay-root .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
#keyplay-root .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
#keyplay-root .pt-6 { padding-top: 1.5rem !important; }
#keyplay-root .py-\[80px\] { padding-top: 80px !important; padding-bottom: 80px !important; }
#keyplay-root .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
#keyplay-root .pt-\[50px\] { padding-top: 50px !important; }
#keyplay-root .pt-\[72px\] { padding-top: 72px !important; }
#keyplay-root .pt-\[75px\] { padding-top: 75px !important; }
#keyplay-root .pt-\[80px\] { padding-top: 80px !important; }
#keyplay-root .pb-\[57px\] { padding-bottom: 57px !important; }
#keyplay-root .pb-\[65px\] { padding-bottom: 65px !important; }
#keyplay-root .pb-\[80px\] { padding-bottom: 80px !important; }
#keyplay-root .pb-\[88px\] { padding-bottom: 88px !important; }
#keyplay-root .pb-8 { padding-bottom: 2rem !important; }

/* ─── 10. 背景色 / 背景图 ─── */
#keyplay-root .bg-white { background-color: #fff !important; }
#keyplay-root .bg-black { background-color: #000 !important; }
#keyplay-root .bg-transparent { background-color: transparent !important; }
#keyplay-root .bg-\[\#d7ff00\] { background-color: #d7ff00 !important; }
#keyplay-root .bg-\[\#fafafa\] { background-color: #fafafa !important; }
#keyplay-root .bg-gray-100 { background-color: #f3f4f6 !important; }
#keyplay-root .bg-gray-200 { background-color: #e5e7eb !important; }
#keyplay-root .bg-gray-900 { background-color: #111827 !important; }
#keyplay-root .bg-cover { background-size: cover !important; }
#keyplay-root .bg-center { background-position: center !important; }
#keyplay-root .bg-no-repeat { background-repeat: no-repeat !important; }

/* ─── 11. 圆角 / 阴影 / 溢出 ─── */
#keyplay-root .rounded-3xl { border-radius: 1.5rem !important; }
#keyplay-root .rounded-\[30px\] { border-radius: 30px !important; }
#keyplay-root .rounded-\[40px\] { border-radius: 40px !important; }
#keyplay-root .rounded-full { border-radius: 9999px !important; }
#keyplay-root .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
#keyplay-root .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; }
#keyplay-root .overflow-hidden { overflow: hidden !important; }
#keyplay-root .overflow-x-hidden { overflow-x: hidden !important; }

/* ─── 12. 图片 / 视频 ─── */
#keyplay-root img,
#keyplay-root video {
  max-width: none !important;
  border: none !important;
}
#keyplay-root .object-cover { object-fit: cover !important; }
#keyplay-root .object-contain { object-fit: contain !important; }
#keyplay-root .object-center { object-position: center !important; }
#keyplay-root .keyplay-360-label-icon {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: inline-block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
#keyplay-root .touch-none img {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ─── 13. 功能卡片标题（主题常把 h3 垂直居中叠在图上） ─── */
#keyplay-root .keyplay-feature-card {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}
#keyplay-root .keyplay-feature-title,
#keyplay-root h3.keyplay-feature-title {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 24px 24px 0 !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: #000 !important;
  flex: none !important;
}

/* ─── 13b. 360 控件：强制 40px 小圆按钮，防主题把按钮撑成大圆 ─── */
#keyplay-root .keyplay-360-controls {
  margin-top: 24px !important;
  display: flex !important;
  gap: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
}
#keyplay-root .keyplay-360-control-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#keyplay-root .keyplay-360-control-dot {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 9999px !important;
  background: #d7ff00 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}
#keyplay-root .keyplay-360-control-label {
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #000 !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── 14. 文字 ─── */
#keyplay-root h1,
#keyplay-root h2,
#keyplay-root h4,
#keyplay-root p {
  margin: 0 !important;
  padding: 0;
  border: none;
  background: transparent;
}
#keyplay-root .text-center { text-align: center !important; }
#keyplay-root .text-left { text-align: left !important; }
#keyplay-root .text-\[13px\] { font-size: 13px !important; }
#keyplay-root .text-\[16px\] { font-size: 16px !important; }
#keyplay-root .text-\[18px\] { font-size: 18px !important; }
#keyplay-root .text-\[22px\] { font-size: 22px !important; }
#keyplay-root .text-\[48px\] { font-size: 48px !important; }
#keyplay-root .text-\[60px\] { font-size: 60px !important; }
#keyplay-root .uppercase { text-transform: uppercase !important; }
#keyplay-root .text-black { color: #000 !important; }
#keyplay-root .text-white { color: #fff !important; }
#keyplay-root .font-harmony { font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important; }
#keyplay-root .font-harmony-black { font-family: "HarmonyOS Sans SC Black", "Microsoft YaHei", sans-serif !important; font-weight: 900 !important; }
#keyplay-root .leading-\[48px\] { line-height: 48px !important; }
#keyplay-root .tracking-\[0px\] { letter-spacing: 0 !important; }

/* ─── 14. 按钮（只重置 button 本身，不影响子 div 背景色） ─── */
#keyplay-root button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0 !important;
  line-height: normal !important;
  font: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}
#keyplay-root button > .rounded-full.bg-\[\#d7ff00\] {
  background-color: #d7ff00 !important;
}

/* ─── 15. lg 断点（≥1024px 三列布局） ─── */
@media (min-width: 64rem) {
  #keyplay-root .lg\:flex-row { flex-direction: row !important; }
  #keyplay-root .lg\:w-\[420px\] {
    width: 420px !important;
    max-width: 420px !important;
    flex-shrink: 0 !important;
  }
  #keyplay-root .lg\:w-\[520px\] {
    width: 520px !important;
    max-width: 520px !important;
    flex-shrink: 0 !important;
  }
  #keyplay-root .lg\:w-\[770px\] { width: 770px !important; }
  #keyplay-root .lg\:w-1\/2 { width: 50% !important; }
  #keyplay-root .lg\:mt-0 { margin-top: 0 !important; }
  #keyplay-root .lg\:mb-0 { margin-bottom: 0 !important; }
  #keyplay-root .lg\:items-end { align-items: flex-end !important; }
  #keyplay-root .lg\:pl-20 { padding-left: 5rem !important; }
}