/*
 * UniTV Card - Blocksy 主题颜色重载样式
 * 覆盖主题的8个主要颜色变量
 */

/* 使用更高优先级的选择器确保覆盖 */
html:root,
body:root,
:root {
  /* Color 1 - 主品牌色，用于关键强调 [按钮、链接、激活] */
  --theme-palette-color-1: #6366f1 !important;

  /* Color 2 - 替代色，常用于悬停效果 [hover]*/
  --theme-palette-color-2: #4f46e5 !important;

  /* Color 3 - 段落文本主色 [文本、图标、链接，不能修改为相近白色，否则影响阅读]*/
  --theme-palette-color-3: #64748b !important;

  /* Color 4 - 标题、副标题和标题文本 [标题、副标题、标题文本，不能修改为相近白色，否则影响阅读]*/
  --theme-palette-color-4: #1e293b !important;

  /* Color 5 - 边框和分割元素 [边框、分割线]*/
  --theme-palette-color-5: #e2e8f0 !important;

  /* Color 6 - 微妙背景，如页面英雄区域和页脚 [页脚]*/
  --theme-palette-color-6: #f1f5f9 !important;

  /* Color 7 - 主站点背景 [背景，不能修改为相近深色，否则影响阅读]*/
  --theme-palette-color-7: #fafbfc !important;

  /* Color 8 - 更亮的替代色，常用于头部背景 [头部，不能修改为相近深色，否则影响阅读]*/
  --theme-palette-color-8: #FFFFFF !important;
}
/* 网站标题字体颜色 */
.site-branding a {
  color: #6366f1 !important;
}
.site-branding a:hover {
  color: #4f46e5 !important;
}
/* 导航栏链接字体大小 */
#header-menu-1 .ct-menu-link,
.header-menu-1 .ct-menu-link,
nav .ct-menu-link {
  font-size: 15px !important;
  color: #475569 !important;
}
/* 导航栏链接字体颜色 hover*/
#header-menu-1 .ct-menu-link:hover,
.header-menu-1 .ct-menu-link:hover,
nav .ct-menu-link:hover {
  color: #6366f1 !important;
}
/* 导航栏链接字体颜色 active*/
#header-menu-1 .ct-menu-link.active,
.header-menu-1 .ct-menu-link.active,
nav .ct-menu-link.active {
  color: #6366f1 !important;
}
/* 激活菜单项的颜色（字体颜色）- 高优先级选择器 */
.header-menu-1 .menu-item.current-menu-item > .ct-menu-link,
.header-menu-1 .menu-item.active > .ct-menu-link,
.header-menu-1 .ct-menu-link.current-menu-item,
.header-menu-1 .ct-menu-link.active {
    color: #6366f1 !important;
}

/* 导航栏图标*/
.ct-cart-item,
.ct-cart-item svg {
  color: #475569 !important;
}
.ct-cart-item:hover {
  color: #6366f1 !important;
}

/* 页脚字体颜色 */
.ct-footer,
.ct-footer h2,
.ct-footer p {
  color: #64748b !important;
}
.ct-footer-copyright{
  color: #64748b !important;
}
.ct-footer a {
  color: #6366f1 !important;
}


/* 固定nav */
/* 全局背景色 */
body {
  padding-top: 80px !important;
}

/* 隐藏页面标题 */
.page-title,
.ct-page-title {
  display: none !important;
}

/* Header高度和背景色设置 */
.ct-header {
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ========================================
   首页Body背景色 - 亮色主题
   ======================================== */
.home body,
body.home {
  background: #f8fafc !important; /* 浅灰白色背景 */
}
/* ========================================
   首页顶部栏样式 - 亮色毛玻璃效果
   ======================================== */
.home .ct-header,
.home [data-row="top"] .ct-header,
.home [data-row="middle"] .ct-header,
.home [data-row="bottom"] .ct-header,
body.home .ct-header,
body.home [data-row] {
  background: rgba(255, 255, 255, 0.8) !important; /* 白色半透明背景 */
  backdrop-filter: blur(15px); /* 毛玻璃效果 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* 阴影效果 */
}
/* ========================================
   首页顶部栏样式 - 透明毛玻璃效果
   ======================================== */
.home .ct-header,
.home [data-row="top"] .ct-header,
.home [data-row="middle"] .ct-header,
.home [data-row="bottom"] .ct-header,
body.home .ct-header,
body.home [data-row] {
  background: rgba(255, 255, 255, 0.8) !important; /* 白色半透明背景 */
  backdrop-filter: blur(15px); /* 毛玻璃效果 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* 阴影效果 */
}

/* ========================================
   非首页顶部栏样式 - 亮色毛玻璃效果
   ======================================== */
   .ct-header:not(.home .ct-header),
   [data-row="top"] .ct-header:not(.home [data-row="top"] .ct-header),
   [data-row="middle"] .ct-header:not(.home [data-row="middle"] .ct-header),
   [data-row="bottom"] .ct-header:not(.home [data-row="bottom"] .ct-header),
   body:not(.home) .ct-header,
   body:not(.home) [data-row] {
       background: rgba(255, 255, 255, 0.9) !important; /* 白色半透明背景 */
       backdrop-filter: blur(15px); /* 毛玻璃效果 */
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* 亮色阴影 */
   }
/* ========================================
   迷你购物车商品图片样式
   ======================================== */
.woocommerce-mini-cart-item .ct-media-container img {
  aspect-ratio: 3/4 !important; /* 设置长方形比例 380:240 */
  object-fit: cover !important; /* 确保图片填充整个容器 */
  width: 100% !important;
  height: auto !important;
}

/* 确保图片容器也保持相同比例 */
.woocommerce-mini-cart-item .ct-media-container {
  aspect-ratio: 3/4 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 8px !important; /* 添加圆角 */
}

/* 图片悬停效果 */
.woocommerce-mini-cart-item .ct-media-container:hover img {
  transform: scale(1.05); /* 轻微放大效果 */
  transition: transform 0.3s ease;
}