/* ============================================================
   HY Lights 主题自定义样式
   从 demo 内联 <style> 提取，供所有页面共用
   ============================================================ */

/* ===== theme tokens ===== */
:root, html[data-theme="dark"] {
  --bg: #0A0C12;
  --bg-deep: #080A0F;
  --panel: #10141D;
  --panel2: #171C29;
  --line: rgba(255,255,255,0.09);
  --txt: #F3F5F9;
  --mut: #98A2B3;
  --amber: #FFB020;
  --volt: #FFC94D;
  --violet: #8B5CF6;
  --mag: #E879F9;
  --mint: #34D399;
  --ink-solid: #0A0C12;
  --card-1: #141927;
  --card-2: #0F1320;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #F5F6F9;
  --bg-deep: #ECEEF4;
  --panel: #FFFFFF;
  --panel2: #F0F2F7;
  --line: rgba(12,18,28,0.10);
  --txt: #0F1720;
  --mut: #5A6472;
  --amber: #C97700;
  --volt: #E8A400;
  --violet: #7C3AED;
  --mag: #C026D3;
  --mint: #0F9D6E;
  --ink-solid: #0A0C12;
  --card-1: #FFFFFF;
  --card-2: #F3F5F9;
  color-scheme: light;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255,176,32,.28); color: #fff; }

/* 亮色模式（默认）：显示深色 Logo，隐藏浅色 Logo */
img.hy-logo--dark  { display: block !important; }
img.hy-logo--light { display: none  !important; }
/* 暗色模式：反过来 */
html[data-theme="dark"] img.hy-logo--dark  { display: none  !important; }
html[data-theme="dark"] img.hy-logo--light { display: block !important; }

/* ---- theme switcher ---- */
.theme-switch { background: var(--panel2); border: 1px solid var(--line); }
.theme-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  color: var(--mut); transition: all .25s;
}
.theme-opt:hover { color: var(--txt); }
.theme-opt.on { background: rgba(255,176,32,.16); color: var(--amber); }

/* ---- signature beams ---- */
.beam-line {
  background: linear-gradient(90deg, transparent, #FFB020 30%, #FFC94D 55%, transparent 90%);
  height: 2px;
  display: inline-block;
}
@keyframes beamSweep {
  0%   { transform: translateX(-30%) rotate(-14deg); opacity: 0; }
  12%  { opacity: .7; }
  50%  { transform: translateX(190%) rotate(-14deg); opacity: .35; }
  62%  { opacity: 0; }
  100% { transform: translateX(190%) rotate(-14deg); opacity: 0; }
}

/* ---- cards ---- */
.card {
  background: linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,.4);
  box-shadow: 0 18px 40px -22px rgba(255,176,32,.35);
}
.card .img-zoom { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .img-zoom { transform: scale(1.06); }

.chip { background: var(--panel2); border: 1px solid var(--line); }

/* ---- category page ---- */
.category-card {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  background: linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.category-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,176,32,.5);
  box-shadow: 0 24px 50px -24px rgba(255,176,32,.35);
}
.category-card .img-wrap { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.category-card .img-wrap img { transition: transform .7s cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; object-fit: cover; }
.category-card:hover .img-wrap img { transform: scale(1.08); }
.category-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink-solid) 0%, transparent 60%);
  opacity: .7;
}

/* ---- no scrollbar ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   需求 1：Hero 轮播
   ============================================================ */
.hero-carousel {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  isolation: isolate;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease, visibility 0s;
  z-index: 2;
}
.hero-slide__bg {
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  transition: transform 7s ease-out;
}
.hero-slide.is-active .hero-slide__bg { transform: scale(1); }
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-slide__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,12,18,.85) 0%, rgba(10,12,18,.72) 60%, #0A0C12 100%),
    radial-gradient(120% 90% at 50% 10%, rgba(255,176,32,.12), transparent 55%);
}
/* Light 主题下 Hero 遮罩弱化 */
html[data-theme="light"] .hero-slide__bg::after {
  background:
    linear-gradient(to bottom, rgba(245,246,249,.72) 0%, rgba(245,246,249,.55) 60%, #F5F6F9 100%),
    radial-gradient(120% 90% at 50% 10%, rgba(255,176,32,.10), transparent 55%);
}
.hero-slide__content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.hero-slide.is-active .hero-slide__content > * {
  opacity: 1;
  transform: none;
}
.hero-slide.is-active .hero-slide__content > *:nth-child(1) { transition-delay: .15s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(2) { transition-delay: .25s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(3) { transition-delay: .35s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(4) { transition-delay: .45s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(5) { transition-delay: .55s; }

/* 箭头 */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 52px; height: 52px;
  border-radius: 9999px;
  background: rgba(10,12,18,.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
}
.hero-arrow:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-solid);
  transform: translateY(-50%) scale(1.06);
}
.hero-arrow--prev { left: 20px; }
.hero-arrow--next { right: 20px; }
@media (max-width: 640px) {
  .hero-arrow { width: 40px; height: 40px; }
  .hero-arrow--prev { left: 8px; }
  .hero-arrow--next { right: 8px; }
}

/* 圆点 */
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: rgba(255,255,255,.3);
  transition: all .35s;
  cursor: pointer;
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.is-active {
  background: var(--amber);
  width: 32px;
}
html[data-theme="light"] .hero-dot { background: rgba(0,0,0,.2); }
html[data-theme="light"] .hero-dot.is-active { background: var(--amber); }


/* ============================================================
   需求 2：Factory Tabs
   ============================================================ */
.hy-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 9999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); color: var(--mut);
  background: transparent; transition: all .25s;
}
.hy-tab:hover { border-color: rgba(255,176,32,.5); color: var(--txt); }
.hy-tab.is-active {
  background: var(--amber); color: var(--ink-solid);
  border-color: var(--amber);
  box-shadow: 0 8px 24px -10px rgba(255,176,32,.6);
}

.hy-tab-panel { display: none; }
.hy-tab-panel.is-active { display: block; }

/* 照片墙 */
.hy-photo {
  position: relative; overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.hy-photo:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,.5);
  box-shadow: 0 22px 50px -24px rgba(255,176,32,.5);
}
.hy-photo__img { aspect-ratio: 4/3; overflow: hidden; }
.hy-photo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hy-photo:hover .hy-photo__img img { transform: scale(1.06); }
.hy-photo__body { padding: 16px; }
/* 只有图片时，撑满不留白 */
.hy-photo--img-only .hy-photo__img { aspect-ratio: 1/1; }

/* ============================================================
   需求 3：How to Start 5 步连线
   ============================================================ */
.hy-steps {
  position: relative;
}
/* 连接线（仅桌面端） */
.hy-steps__line {
  display: none;
  position: absolute;
  top: 16px;              /* 圆点垂直中心：圆点高 32px，top = 32/2 = 16px */
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,176,32,.35) 8%,
    rgba(255,176,32,.55) 50%,
    rgba(255,176,32,.35) 92%,
    transparent 100%);
  z-index: 0;
}
@media (min-width: 1024px) {
  .hy-steps__line { display: block; }
}

.hy-steps__grid {
  position: relative;
  z-index: 1;
}

/* 序号圆点 */
.step-badge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: var(--amber); color: var(--ink-solid);
  font-family: inherit; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 0 6px var(--bg);   /* 用背景色围绕圆点，遮住连接线穿过 */
  z-index: 2;
}
/* 用第二个阴影做外发光 */
.step-badge::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgba(255,176,32,.28);
  pointer-events: none;
}

/* ============================================================
   需求 4：视频 Modal
   ============================================================ */
.hy-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
.hy-modal.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .3s, visibility 0s;
}
.hy-modal__inner {
  position: relative;
  width: 100%; max-width: 900px;
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.hy-modal.is-open .hy-modal__inner { transform: scale(1); }
.hy-modal__video {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.hy-modal__video iframe,
.hy-modal__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.hy-modal__close {
  position: absolute;
  top: -52px; right: 0;
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .25s;
}
.hy-modal__close:hover { background: var(--amber); color: var(--ink-solid); border-color: var(--amber); }

/* 视频播放按钮（覆盖在工厂图上） */
.hy-play-btn {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 68px; height: 68px;
  border-radius: 9999px;
  background: var(--amber);
  color: var(--ink-solid);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 4px solid var(--bg);
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 12px 30px -10px rgba(255,176,32,.7);
}
.hy-play-btn:hover { transform: scale(1.08); }
.hy-play-btn::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 9999px;
  border: 2px solid var(--amber);
  opacity: .5;
  animation: hy-pulse 2s ease-out infinite;
}
@keyframes hy-pulse {
  0%   { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ============================================================
   需求 5：导航二级菜单
   ============================================================ */
.hy-nav-item { position: relative; }
.hy-nav-item > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 26px 0;   /* 与 header 高度对齐，方便鼠标滑动 */
}
.hy-nav-item > a i.hy-caret {
  font-size: 10px;
  transition: transform .25s;
}
.hy-nav-item:hover > a i.hy-caret {
  transform: rotate(180deg);
}
/* 二级菜单 */
.hy-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  z-index: 60;
}
.hy-nav-item:hover .hy-submenu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hy-submenu::before {
  /* 顶部小三角 */
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.hy-submenu a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  text-transform: none;
  letter-spacing: 0;
  transition: all .2s;
}
.hy-submenu a:hover {
  background: var(--panel2);
  color: var(--amber);
  padding-left: 18px;
}

/* 移动端折叠二级菜单 */
.hy-mobile-sub {
  display: none;
  padding-left: 20px;
  border-left: 2px solid rgba(255,176,32,.3);
  margin-left: 14px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.hy-mobile-sub.is-open { display: block; }
.hy-mobile-sub a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--mut);
  transition: all .2s;
}
.hy-mobile-sub a:hover { color: var(--amber); background: var(--panel2); }

/* ---- filter pills ---- */
.pill { transition: all .25s; cursor: pointer; }
.pill.active {
  background: #FFB020;
  color: #0A0C12;
  border-color: #FFB020;
  font-weight: 600;
}
.pill:hover:not(.active) { border-color: rgba(255,176,32,0.5); }

/* ---- product gallery thumbnails ---- */
.thumb {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .25s, opacity .25s;
  opacity: 0.7;
}
.thumb:hover, .thumb.active { border-color: var(--amber); opacity: 1; }

/* ---- form focus ---- */
input:focus, textarea:focus, select:focus {
  outline: 2px solid #FFB020;
  outline-offset: 0;
  border-color: transparent;
}

/* ---- WC 分页 ---- */
.hy-pagination { display: flex; gap: .5rem; align-items: center; }
.hy-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .75rem; border-radius: 8px;
  border: 1px solid var(--line); color: var(--mut);
  transition: all .2s; text-decoration: none;
}
.hy-pagination .page-numbers:hover,
.hy-pagination .page-numbers.current {
  background: var(--amber); border-color: var(--amber); color: #0A0C12;
}

/* ============================================================
   页脚菜单链接样式
   ============================================================ */

/* 页脚菜单的 a 标签 */
.footer-nav-menu a {
  color: var(--mut);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
  display: inline-block;
}

.footer-nav-menu a:hover {
  color: var(--amber);
}

/* ============================================================
   客服系统（WhatsApp）完整样式
   ============================================================ */

/* --- 1. 悬浮球基础与脉冲动画 --- */
.wa-float-btn {
  background-color: #25D366;
  position: relative;
}
.wa-float-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: #25D366;
  z-index: 0;
  animation: wa-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- 2. 弹窗展开/收起状态 --- */
.wa-service-popup {
  /* 默认隐藏状态 */
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: bottom right; /* 关键：以右下角为基准向左上角展开 */
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wa-service-popup.show {
  /* 展开状态 */
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* --- 3. 亮色模式配色（默认） --- */
.wa-service-popup {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
}

.wa-service-item {
  color: #1f2937;
  background-color: transparent;
  transition: all 0.2s ease;
}

.wa-service-item:hover {
  background-color: #22c55e;
  color: #ffffff;
}

.wa-service-footer {
  border-color: #f3f4f6;
}

.wa-service-text {
  color: #6b7280;
}

/* --- 4. 暗色模式适配 --- */
html[data-theme="dark"] .wa-service-popup {
  background-color: var(--panel);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .wa-service-item {
  color: var(--txt);
}

html[data-theme="dark"] .wa-service-item:hover {
  background-color: #22c55e;
  color: #ffffff;
}

html[data-theme="dark"] .wa-service-footer {
  border-color: var(--line);
}

html[data-theme="dark"] .wa-service-text {
  color: var(--mut);
}

/* --- 5. 滚动条美化 --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
  border-radius: 10px;
}

/* ---- 隐藏 WooCommerce 默认 notice 样式冲突 ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--panel2); border-top-color: var(--amber); color: var(--txt);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}